/* DOORS v2: the home page as a front door to three rooms.
   Spec: desk_review/site2026/home_dialogue.md (max sign-off 2026-11-01) + RESEARCH_wayfinding.md.
   - Each door wears its own product's color (Hedgy #00C805, Learn #27e1ff, Lyrics #d8a657, read
     from the live pages), so the door matches the room. The lab's own colors are Ukrainian: the knot in flag blue #0057B7 with a flag-yellow #FFD700 eye (a yellow head at small sizes),
     the wordmark and hero name in flag yellow, and a lighter blue #4C9BFF for focus (flag blue is too dark on black): the knot, the hero name, the focus ring.
   - Three type sizes on the whole page: --t1 display, --t2 reading, --t3 small.
   - Surfaces step in tone instead of hairlines. Ink is off pure white (OLED halation).
   - One scroll-linked moment (the Hedgy screen arriving), behind @supports and reduced motion.
   - No numbers in the page's own text; the Hedgy picture is labeled sample data. */
/* see [[user-aesthetic-dna]]  OLED black, vivid; color comes from the products, not a default accent */

@font-face{font-family:"TD Sans";font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"TD Sans";font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"TD Sans";font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
/* Instrument Sans has no Cyrillic: the lyric lines fall to Inter Tight, sized to match (from Instrument) */
@font-face{font-family:"TD Sans";font-weight:400 500;font-display:swap;src:url(fonts/inter-tight-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;size-adjust:111%;ascent-override:87.4%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"TD Sans";font-weight:600;font-display:swap;src:url(fonts/inter-tight-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;size-adjust:111%;ascent-override:87.4%;descent-override:22.5%;line-gap-override:0%}

:root{
  --bg:#000;
  --ink:oklch(95% .004 250);--body:oklch(84% .004 250);--mut:oklch(68% .004 250);
  --step1:oklch(13% .004 250);--step2:oklch(9% .004 250);
  --ty:#FFD700;   /* flag yellow: the wordmark and the hero name (14.97:1 on black) */
  --td:#4C9BFF;   /* TD text blue: the flag blue's hue, light enough for text on black (7.44:1). The mark itself is flag blue #0057B7. */
  --sans:"TD Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(16px,3vw,48px);--barh:52px;
  /* the three sizes */
  --t0:clamp(46px,5vw + 26px,112px);
  --t1:clamp(28px,1vw + 23px,40px);
  --t2:clamp(17px,.3vw + 16px,20px);
  --t3:14.5px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 var(--t2)/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,p,blockquote{margin:0}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--td);outline-offset:3px}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--td);color:#000;padding:8px 12px;font:600 var(--t3)/1 var(--sans)}
.skip:focus{top:8px}

/* ---------- a quiet top bar: the mark and the three rooms */
.bar{position:sticky;top:0;z-index:20;height:var(--barh);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad);background:var(--bg)}
.mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ty);font:600 var(--t3)/1 var(--sans);letter-spacing:-.005em}
.mk{display:block;width:22px;height:24px}   /* the 8-17 knot, small-size cut: flag blue lifted a touch (#1268D2) so it reads at 22 px, with a yellow head */
.nav{display:flex;gap:clamp(16px,2vw,28px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;font:500 var(--t3)/1 var(--sans);letter-spacing:.005em;color:var(--mut);text-decoration:none}
.nav a:hover{color:var(--ink)}

/* ---------- hero: who we are, and the stance. The light pools under it, toward the first door. */
.hero{text-align:center;padding:clamp(48px,7vw,120px) var(--pad) clamp(120px,10vw,168px)}
/* hero hierarchy: the name small in flag yellow, the idea large and bright, the sentence quieter.
   The display line is the one size outside the three (--t0): it is short and has to lead. */
.hero .eb{font:600 var(--t3)/1.2 var(--sans);letter-spacing:.02em;color:var(--ty)}
h1{max-width:12em;margin:14px auto 0;font:600 var(--t0)/1.02 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.sub{max-width:28em;margin:24px auto 0;color:var(--mut);line-height:1.55;text-wrap:pretty}
[data-fx]{position:relative;isolation:isolate}
.fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 100%,rgba(110,175,190,.08),rgba(110,175,190,.025) 55%,rgba(110,175,190,0))}
.fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s linear}
.fx.on canvas{opacity:1}

/* ---------- the doors: one slab each, its product's color glowing from behind it */
/* The glow is a radial gradient (Chrome and Safari dither gradients; box-shadow and blur filters
   step visibly on black). It sits behind the slab, so the light shows only around the edges,
   like Spatial's thread light, with no 3D and no canvas. Quiet at rest, brighter on hover/focus. */
.doors{max-width:1280px;margin:0 auto;padding:24px var(--pad) 32px;display:grid;gap:40px;overflow-x:clip}
.pair{display:grid;gap:40px}
.door{position:relative;display:block;border-radius:28px;color:var(--body);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.d-hedgy{--door:#00c805}
.d-learn{--door:#27e1ff}
.d-lyrics{--door:#d8a657}
.d-elnino{--door:#ffd400}   /* the event page's own yellow (/elnino/ --yellow); brighter and cooler than Lyrics gold #d8a657 */
.door:focus-visible{outline-offset:6px}
.glow{position:absolute;inset:-56px -40px;z-index:0;pointer-events:none;opacity:.8;transition:opacity .45s ease;
  background:radial-gradient(closest-side,color-mix(in oklch,var(--door) 50%,transparent) 60%,
    color-mix(in oklch,var(--door) 22%,transparent) 80%,color-mix(in oklch,var(--door) 0%,transparent) 100%)}
.slab{position:relative;z-index:1;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit;
  border:1px solid color-mix(in oklch,var(--door) 20%,#1c1c1c);
  /* light coming through the doorway: a faint wash of the door's color from the top edge */
  background:radial-gradient(130% 80% at 50% -12%,color-mix(in oklch,var(--door) 14%,transparent),transparent 70%),#050505}
.d-hedgy .glow{inset:-96px -72px}   /* a wide slab hides most of its ellipse: give the light more room */
.d-hedgy .slab{background:#000}   /* the app screen is black: the slab and the screen are one surface */
/* Hedgy's real screen, set straight on the slab (no frame) */
.shot{display:flex;flex-direction:column;align-items:center;padding:28px 16px 0}
.shot picture{display:block;width:min(280px,100%)}
.shot img{display:block;width:100%;height:auto;border-radius:22px}   /* a phone's rounded corner; no frame */
.tag{display:block;padding:10px 0 0;font:500 var(--t3)/1.3 var(--sans);letter-spacing:.005em;color:var(--mut)}
/* three levels: name, one line, a quiet action */
.txt{display:flex;flex-direction:column;padding:28px 28px 26px}
.nm{font:600 var(--t1)/1.05 var(--sans);letter-spacing:-.022em;color:var(--ink)}
.ln{margin-top:10px;max-width:30em;color:var(--body);text-wrap:pretty}
.act{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;min-height:44px;
  font:600 var(--t3)/1 var(--sans);letter-spacing:.005em;color:color-mix(in oklch,var(--door) 82%,white);
  text-decoration:underline 1px transparent;text-underline-offset:6px;transition:text-decoration-color .2s ease}
.door:hover .act,.door:focus-visible .act{text-decoration-color:color-mix(in oklch,var(--door) 60%,transparent)}
.door:hover .glow,.door:focus-visible .glow{opacity:1}
/* El Niño: a picture door like Hedgy. The slab is the art's own night sky, so the picture and the
   door are one surface; the text uses one color (name brighter), so no gray sits on gray. */
.d-elnino .slab{background:linear-gradient(180deg,#070b13,#111b2d)}
.pic{display:block;padding:24px 20px 0}
.art{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.d-elnino .ln{max-width:34em}
.by{margin-top:8px;font:400 var(--t3)/1.4 var(--sans);color:var(--body)}   /* the credit: organizations only, no people */
/* Learn and Lyrics are pure doorways: names line up at the top, the action sits on the threshold */
.pair .slab{min-height:clamp(232px,24vw,320px)}
.pair .txt{flex:1}
.pair .act{margin-top:auto;padding-top:16px}
/* door feel: press on touch, lift on hover, the other doors step back */
.door:active{transform:scale(.985);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){
  .door:hover{transform:translateY(-3px)}
  .doors:has(.door:hover) .door:not(:hover){opacity:.62}
  .door:active{transform:translateY(-1px) scale(.99)}
}

/* ---------- why we're here (max's approved text) */
.why-band{margin-top:clamp(56px,6vw,88px);padding:clamp(56px,6vw,88px) var(--pad);background:var(--step2);text-align:center}
.why-band h2{font:500 var(--t3)/1.2 var(--sans);letter-spacing:.005em;color:var(--mut)}
.why-band blockquote{max-width:34em;margin:24px auto 0}
.why-band blockquote p{font-weight:500;color:var(--ink);line-height:1.6;text-wrap:pretty}
.why-band blockquote footer{margin-top:16px;font:400 var(--t3)/1.3 var(--sans);color:var(--mut)}
.keep{max-width:34em;margin:32px auto 0;color:var(--body);text-wrap:balance}

/* ---------- also from the lab, and the footer */
.also{max-width:46em;margin:0 auto;padding:clamp(40px,4vw,56px) var(--pad);text-align:center;font-size:var(--t3);color:var(--mut);text-wrap:balance}
.also a{color:var(--ink);text-decoration:underline 1px color-mix(in oklch,var(--ink) 35%,transparent);text-underline-offset:4px}
.also a:hover{text-decoration-color:var(--ink)}
@media (pointer:coarse){.also a{padding-block:14px}}   /* inline links in a sentence: a taller touch area, same line */
.foot{padding:24px var(--pad) 40px;background:var(--step2)}
.fl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;font:400 var(--t3)/1.3 var(--sans)}
.fl a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut);text-decoration:none}
.fl a:hover{color:var(--ink)}

/* ---------- wide: Hedgy is the big door, Learn and Lyrics pair up */
@media (min-width:760px){
  .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .d-hedgy .slab,.d-elnino .slab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .pic{padding:32px 0 28px 48px}
  .art{width:380px}
  .d-elnino .txt{padding:40px 56px;max-width:36em}
  .shot{padding:40px 0 32px 56px}
  .shot picture{width:330px}
  .d-hedgy .txt{padding:40px 56px;max-width:36em}
  .pair .txt{padding:36px 40px 32px}
}

/* ---------- motion */
@media (prefers-reduced-motion:no-preference){
  /* a door into its room: the tile's name glides into the product page's heading where both
     pages opt in (only this side is wired for now; see doors_REPORT.md) */
  @view-transition{navigation:auto}
  .hero>.eb,.hero>h1,.hero>.sub{transition:opacity .42s linear,transform .6s cubic-bezier(.2,.7,.2,1)}
  .hero>h1{transition-delay:50ms}.hero>.sub{transition-delay:110ms}
  @starting-style{.hero>.eb,.hero>h1,.hero>.sub{opacity:0;transform:translateY(12px)}}
  /* the one scroll-linked moment: the Hedgy screen arrives as its door comes up. Still by default. */
  @supports (animation-timeline:view()){
    .d-hedgy .shot picture{animation:arrive linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  }
}
@keyframes arrive{from{opacity:.2;transform:translateY(32px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .door:hover{transform:none}
  .door:active{transform:none;opacity:.85}
}
@media print{body{background:#fff;color:#111}.bar,.fx{display:none}}