/* ABC Areal Semi Mono by Dinamo, free fonts license (see fonts/Dinamo Licensing Terms.pdf).
   Inter (copy and links) loads from Google Fonts in index.html. */
@font-face{font-family:"ABC Areal Semi Mono";src:url("fonts/ABCArealSemiMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Layout: Figma frame "MacBook Pro 14 - 1" on a strict grid (18px by default). Crosses sit at every step;
   columns, gaps, line-heights and the image box are whole steps, and each text block's first baseline is
   snapped onto a row of crosses (alignBaselines in main.js). */
:root{
  color-scheme:light;
  --bg:#f4f7f9;
  --fg:#000000;
  --muted:#66707a;
  --cross:#b9c3cc;              /* full-strength cross colour; the Tone setting mixes it toward the background */
  --rule:#9aa3ab;
  --panel:#f8fafbee;
  --accent:#001AFF;             /* labels, domain, weather line, hover underlines */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;   /* copy + links */
  --smallFont:"ABC Areal Semi Mono",ui-monospace,"SF Mono",Menlo,monospace;                  /* labels + caption */
  --bodyW:200;                  /* Inter Extra Light */
  --bodySize:30px;
  --headSize:16px; --headLH:18px;
  --g:18px;                     /* one grid step (Tune → Grid; main.js keeps this in sync) */
  --padL:200px; --padR:120px; --col1:560px; --gap:100px; --stageH:560px;   /* set in whole steps by main.js */
}
/* Single cool-white look by design: no dark theme */

html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden}
#grid{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* top bar: domain left, Brooklyn time / weather / moon right */
.topbar{
  position:absolute;z-index:2;left:0;right:0;top:var(--g);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--g);flex-wrap:wrap;
  padding-left:max(var(--g), env(safe-area-inset-left,0px));
  padding-right:max(var(--g), env(safe-area-inset-right,0px));
}
.mono{font-family:var(--smallFont);font-size:var(--headSize);line-height:var(--headLH);font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.topbar .domain{margin:0;text-decoration:none;color:var(--accent)}
.sky{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.sky .sep{margin:0 .35em}

.page{
  position:relative;z-index:1;min-height:100%;
  display:grid;grid-template-columns:var(--col1) minmax(0,1fr);
  column-gap:var(--gap);align-items:start;
  padding-block:calc(var(--g)*8) calc(var(--g)*4);
  padding-left:var(--padL);
  padding-right:var(--padR);
}
.tb{position:relative}            /* text blocks: nudged by main.js so baselines land on a row */
.label{margin:0 0 var(--g)}
.bio{display:grid;gap:calc(var(--g)*2);font-size:var(--bodySize);font-weight:var(--bodyW);line-height:calc(var(--g)*2);letter-spacing:-.02em;margin:0}
.bio p{margin:0;text-wrap:pretty}
.elsewhere{margin-top:calc(var(--g)*3)}
.links{font-size:16px;font-weight:var(--bodyW);line-height:var(--g);letter-spacing:-.02em;color:var(--fg)}
.links .sep{margin:0 .3em;color:var(--rule)}

/* the draw-in line (after warbler.studio): a background whose anchor flips sides, so it grows from the
   left on hover and erases toward the right on leave */
.lk,.word{
  color:inherit;text-decoration:none;cursor:pointer;
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
  background-position:100% 100%;background-size:0% 1px;padding-bottom:2px;
  transition:background-size .48s cubic-bezier(.33,1,.68,1);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.lk:hover,.lk:focus-visible,.word:hover,.word.on,.word:focus-visible{
  background-position:0 100%;background-size:100% 1px;outline:none;
  transition:background-size .42s cubic-bezier(.33,1,.68,1);
}
/* hover words: italic at rest, upright with the line on hover */
.word{font-style:italic;background-size:0% 1.5px;padding-bottom:3px}
.word:hover,.word.on,.word:focus-visible{font-style:normal;background-size:100% 1.5px}

.stage{position:relative;height:var(--stageH);margin-top:calc(var(--headLH) + var(--g))}   /* image top lines up with the copy */
.probe{display:inline-block;width:0;height:0;vertical-align:baseline}
.stage img{
  position:absolute;left:0;top:0;object-fit:cover;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(20,24,28,.2);
  opacity:0;transform:scale(.975) translateY(4px);filter:blur(6px);transform-origin:50% 60%;
  transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),filter .42s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform,filter;pointer-events:none;
}
.stage img.show{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1);
}
.caption{position:absolute;left:0;font-family:var(--smallFont);font-size:12px;font-weight:700;letter-spacing:-.01em;line-height:var(--g);color:var(--muted);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(3px);transition:opacity .3s ease,transform .3s ease}
.caption.show{opacity:1;transform:none;transition:opacity .5s ease .12s,transform .5s cubic-bezier(.16,1,.3,1) .12s}

/* tuning panel (remove before launch) */
.tune{
  position:fixed;z-index:3;
  right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--panel);border:1px solid var(--cross);border-radius:6px;
  font:400 .78rem/1.3 ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:0;
  width:15rem;max-width:calc(100vw - 32px);backdrop-filter:blur(6px);
  max-height:calc(100vh - 32px);overflow:auto;
}
.tune summary{cursor:pointer;padding:.6rem .8rem;font-weight:600;list-style:none}
.tune summary::-webkit-details-marker{display:none}
.tune summary::after{content:"+";float:right;color:var(--muted)}
.tune[open] summary::after{content:"–"}
.tune .rows{display:grid;gap:.55rem;padding:0 .8rem .8rem}
.tune label{display:grid;grid-template-columns:4.6rem 1fr 2.2rem;align-items:center;gap:.5rem;color:var(--muted)}
.tune input[type=range]{width:100%;accent-color:var(--fg)}
.tune output{text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
.tune .note{color:var(--muted);line-height:1.4;margin:0}
.tune .check{grid-template-columns:auto 1fr}
.tune .group{margin:.3rem 0 0;font-weight:600;color:var(--fg)}
.tune select{width:100%;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--cross);border-radius:4px;padding:2px 4px}

@media (max-width:1100px){ .bio{font-size:min(var(--bodySize),26px)} }
@media (max-width:760px){
  .page{grid-template-columns:minmax(0,1fr);padding-block:calc(var(--g)*6) calc(var(--g)*6)}
  .bio{font-size:min(var(--bodySize),22px)}
  .topbar{flex-direction:column;align-items:flex-start;gap:0}
  .sky{text-align:left}
  .tune{width:auto;left:calc(16px + env(safe-area-inset-left,0px))}
}
@media (prefers-reduced-motion:reduce){.word,.word:hover,.word.on,.word:focus-visible,.lk,.lk:hover,.lk:focus-visible{transition:none}.stage img,.stage img.show{transform:none;filter:none;transition:opacity .2s}}