/* DEIFIED · site v0.2
   Layout: the master drawing fills the screen; the frame is just a logo, three links and two lines of text.
   Every size and gap comes from the Fibonacci scale: 5 · 8 · 13 · 21 · 34 · 55 · 89 · 144. */
:root{
  /* color */
  --void:#0A0A0A; --bone:#F2F1EC; --paper:#F2F1EC; --ink:#0A0A0A;
  --muted-d:#A3A29B; --muted-l:#5C5B55; --hash-d:#6E6D67; --hash-l:#8A8982;
  --line-d:#2A2A28; --line-l:#D8D6CE; --signal:#FF3B1D; --signal-ink:#C22A0E;
  /* type */
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Fibonacci scale (type and space) */
  --f5:5px; --f8:8px; --f13:13px; --f21:21px; --f34:34px; --f55:55px; --f89:89px; --f144:144px;
  --gut:var(--f34);
  color-scheme:dark;
}
@media (max-width:760px){:root{--gut:var(--f21)}}

html,body{height:100%;margin:0}
body{background:var(--void);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.paper{background:var(--paper);color:var(--ink);color-scheme:light}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* type roles (all Fibonacci) */
.t-label{font:500 var(--f13)/var(--f21) var(--mono);letter-spacing:.08em;text-transform:uppercase}
.t-micro{font:400 var(--f13)/var(--f21) var(--mono);letter-spacing:.16em;text-transform:uppercase}
.sq{display:inline-block;width:var(--f8);height:var(--f8);background:var(--signal);margin-right:var(--f8);vertical-align:1px}

/* frame: logo left, links right, nothing else */
.top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:var(--f21);padding:calc(env(safe-area-inset-top,0px) + var(--f34)) var(--gut) 0;pointer-events:none}
.top>*{pointer-events:auto}
/* pages that scroll get a soft backdrop so content slides under the frame, not into it */
body:not(:has(.home)) .top{padding-bottom:var(--f34);background:linear-gradient(to bottom,var(--void) 72%,rgba(10,10,10,0))}
body.paper .top{background:linear-gradient(to bottom,var(--paper) 72%,rgba(242,241,236,0))}
.logo{display:block;width:var(--f89);color:inherit}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;gap:var(--f34)}
.nav a{opacity:.55;transition:opacity .2s}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::before{content:"";display:inline-block;width:var(--f5);height:var(--f5);background:var(--signal);margin-right:var(--f8);vertical-align:2px}

/* HOME */
.home{position:relative;height:100%;height:100svh;min-height:540px}
.home canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.home-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + var(--f34));display:flex;justify-content:space-between;align-items:flex-end;gap:var(--f34);pointer-events:none}
.home-foot h1{margin:0;font:500 var(--f34)/1.18 var(--sans);letter-spacing:-.025em;max-width:16em;text-wrap:balance}
.what{display:grid;justify-items:end;gap:var(--f5);text-align:right}
.what .t-label{font-weight:600}
.what p{margin:0}
.what .t-micro{color:var(--muted-d);pointer-events:auto;transition:color .2s}
.what .t-micro:hover{color:var(--bone)}
@media (max-width:760px){
  .home-foot{flex-direction:column;align-items:flex-start}
  .home-foot h1{font-size:var(--f21)}
  .what{justify-items:start;text-align:left}
  .nav{gap:var(--f21)}
}

/* WORK */
.work{padding:var(--f144) var(--gut) var(--f55);min-height:100%;box-sizing:border-box}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--f34);flex-wrap:wrap;border-bottom:1px solid var(--line-d);padding-bottom:var(--f21)}
.work-head h1{margin:0;font:500 var(--f89)/.92 var(--sans);letter-spacing:-.04em}
.work-head p{margin:0;color:var(--muted-d);max-width:34em;font-size:var(--f13);line-height:var(--f21)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:2px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.case{position:relative;aspect-ratio:4/5;max-width:100%;background:#111110;overflow:hidden}
.case canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.case::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f89);background:linear-gradient(to top,#111110 34%,rgba(17,17,16,0));pointer-events:none}
.case .meta{z-index:1;position:absolute;left:var(--f13);right:var(--f13);bottom:var(--f13);display:flex;justify-content:space-between;gap:var(--f13)}
.case .meta span:last-child{color:var(--muted-d)}
@media (max-width:760px){.work-head h1{font-size:var(--f55)}}

/* CONTACT */
.contact{min-height:100%;padding-top:var(--f89)}
.adam{position:relative;height:clamp(233px,48vh,521px)}
.adam canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.contact-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--f89);padding:var(--f55) var(--gut) var(--f89);border-top:1px solid var(--line-l)}
.contact-body h1{margin:0 0 var(--f21);font:500 var(--f89)/.94 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.lead{font-size:var(--f21);line-height:var(--f34);color:var(--muted-l);max-width:24em;margin:0 0 var(--f34)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--f8) var(--f21);color:var(--muted-l);margin:0}
.facts dd{margin:0;color:var(--ink)}
.facts a,.note a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
form{display:grid;gap:var(--f21);align-content:start}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--f21)}
.f{display:grid;gap:var(--f5)}
.f label,.f .lbl{color:var(--muted-l)}
.f input:not([type=checkbox]),.f textarea{font:400 var(--f21)/var(--f34) var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:var(--f5) 0;width:100%;box-sizing:border-box}
.f textarea{min-height:var(--f144);resize:vertical}
.chips{position:relative;display:flex;flex-wrap:wrap;gap:var(--f8)}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chips label{border:1px solid var(--line-l);padding:var(--f8) var(--f13);cursor:pointer;color:var(--muted-l);transition:background .2s,color .2s,border-color .2s}
.chips label:hover{border-color:var(--ink);color:var(--ink)}
.chips input:checked+label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+label{outline:2px solid var(--signal-ink);outline-offset:2px}
.send{justify-self:start;transition:background .2s,color .2s,border-color .2s;font:500 var(--f13)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:var(--ink);border:1px solid var(--signal);padding:var(--f21) var(--f34);cursor:pointer}
.send:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.send .arr{display:inline-block;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.send:hover .arr{transform:translateX(var(--f5))}
.send:disabled{opacity:.55;cursor:progress}
.sent{color:var(--ink);font-size:var(--f21);line-height:var(--f34);text-transform:none;letter-spacing:0;font-family:var(--sans);margin:0;align-self:start;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.sent:focus{outline:none}
.note{color:var(--muted-l)}
@media (max-width:760px){
  .contact-body{grid-template-columns:1fr;gap:var(--f55)}
  .contact-body h1{font-size:var(--f55)}
  .row2{grid-template-columns:1fr}
}
/* MOTION: pages cross-fade; text rises once the drawing has printed (900 ms); hint fades on the first touch */
@view-transition{navigation:auto}
@keyframes rise{from{opacity:0;transform:translateY(var(--f13))}to{opacity:1;transform:none}}
.home-foot h1{animation:rise .8s .75s cubic-bezier(.2,.7,.2,1) both}
.what{animation:rise .8s .95s cubic-bezier(.2,.7,.2,1) both}
.contact-body>div,.contact-body>form{animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both}
.contact-body>form{animation-delay:.5s}
.work-head{animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) both}
.hint{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + var(--f34));left:0;right:0;margin:0;text-align:center;color:var(--muted-d);z-index:2;pointer-events:none;animation:rise .8s 1.4s both;transition:opacity .6s}
.hint .h-touch{display:none}
@media (max-width:760px){.hint{bottom:auto;top:calc(env(safe-area-inset-top,0px) + var(--f89))}}
@media (hover:none){.hint .h-mouse{display:none}.hint .h-touch{display:inline}}
body.touched .hint{opacity:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}@view-transition{navigation:none}}

/* a low fade keeps the headline readable over the drawing */
.home::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f233,233px);background:linear-gradient(to top,var(--void) 18%,rgba(10,10,10,0));pointer-events:none}
.home-foot{z-index:2}