/* ===========================================================================
   MERODAN — merodan.com root
   Deliberately colder than /tiger/: same paper-white ink and the same two
   typefaces, but the orange is withheld until the door at the bottom of the
   page, so arriving at the tiger reads as ignition rather than continuation.
   Standalone sheet — this page never loads styles/main.css.
   ======================================================================== */

/* ============================================================= FONTS */
@font-face{
  font-family:'Fraunces';
  src:url('../vendor/fonts/fraunces.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../vendor/fonts/fraunces-italic.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../vendor/fonts/archivo.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================================================= TOKENS */
:root{
  --bg:#060608;
  --bg-2:#0b0b10;
  --ink:#f2eee6;
  --ink-2:rgba(242,238,230,.56);
  --ink-3:rgba(242,238,230,.30);
  --line:rgba(242,238,230,.11);
  --cold:#7fb4ff;
  --hot:#ff5b1e;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(18px,4vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ============================================================= RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(15px,1vw,17px); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* cursor:none only once the custom cursor is actually live — otherwise a
   coarse-pointer or JS-failed visit gets no pointer at all. */
body.cursor-on,body.cursor-on *{cursor:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}
::selection{background:var(--cold);color:#06060a}
:focus-visible{outline:2px solid var(--cold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ============================================================= OVERLAYS */
.grain{
  position:fixed;inset:-50%;z-index:120;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,3%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}
}

/* ============================================================= CURSOR */
.cursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;mix-blend-mode:difference;opacity:0}
body.cursor-on .cursor{opacity:1}
.cursor__dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor__ring{
  position:fixed;top:0;left:0;width:42px;height:42px;border:1px solid rgba(255,255,255,.55);
  border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s;
}
.cursor__label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#06060a;
  opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s;white-space:nowrap;
}
.cursor.is-hover .cursor__ring{width:60px;height:60px;background:var(--ink);border-color:transparent}
.cursor.is-hover .cursor__dot{opacity:0}
.cursor.has-label .cursor__label{opacity:1;transform:scale(1)}

/* ============================================================= BOOT */
.boot{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);gap:14px;
}
body.booted .boot{opacity:0;pointer-events:none;transition:opacity .6s .1s var(--ease)}
.boot__row{display:flex;justify-content:space-between;align-items:baseline}
.boot__mark{font-size:12px;letter-spacing:.42em;text-transform:uppercase}
.boot__pct{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.boot__bar{height:1px;background:var(--line);position:relative;overflow:hidden}
.boot__bar span{position:absolute;inset:0;background:var(--cold);transform:scaleX(0);transform-origin:left}
.boot__log{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
body.is-booting{overflow:hidden}

/* ============================================================= FIELD */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:var(--bg)}
.field-fallback{
  position:fixed;inset:0;z-index:0;display:none;
  background:
    radial-gradient(60% 45% at 50% 44%,rgba(127,180,255,.16),transparent 70%),
    radial-gradient(90% 70% at 50% 50%,#0d1018,#060608 72%);
}
body.no-gl .field{display:none}
body.no-gl .field-fallback{display:block}

/* the no-WebGL twin of the shader wordmark */
.hero__markfallback{
  display:none;position:absolute;left:50%;top:45.5%;transform:translate(-50%,-50%);
  font-weight:800;letter-spacing:.045em;white-space:nowrap;
  font-size:clamp(42px,12.2vw,220px);line-height:1;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(178deg,#dceaff,#7fb4ff 45%,#31527f);
}
body.no-gl .hero__markfallback{display:block}

/* ============================================================= IRIS (transition) */
.iris{
  position:fixed;inset:0;z-index:190;pointer-events:none;background:#000;
  clip-path:circle(0% at 50% 50%);
}
body.leaving .iris{clip-path:circle(140% at 50% 50%);transition:clip-path .62s cubic-bezier(.7,0,.3,1)}

/* ============================================================= NAV */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,26px) var(--pad);
  mix-blend-mode:difference;
}
.nav__brand{font-size:13px;letter-spacing:.42em;text-transform:uppercase;font-weight:600}
.nav__links{display:flex;gap:26px}
.nav__links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0}
.nav__links a i{font-style:normal;opacity:.6}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.pip{width:5px;height:5px;border-radius:50%;background:var(--cold);display:inline-block;animation:pip 2.4s ease-in-out infinite}
@keyframes pip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.28;transform:scale(.7)}}

/* ============================================================= HERO */
.hero{
  position:relative;z-index:1;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--pad) + 58px) var(--pad) var(--pad);
}
/* the field is bright enough to fight the copy — lay a scrim under the lower
   half so the headline always reads, whatever the noise happens to be doing */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:54%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.58) 52%,rgba(6,6,8,.92));
}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.hero__bottom{max-width:min(760px,92vw)}
.hero__line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(28px,4.2vw,58px);line-height:1.06;letter-spacing:-.02em;
}
.hero__line em{font-style:italic;color:var(--cold)}
.hero__sub{margin-top:18px;max-width:48ch;color:var(--ink-2);font-size:clamp(14px,1.05vw,17px)}
.hero__scroll{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(22px,4vh,44px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hero__scroll i{width:44px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;inset:0;background:var(--cold);animation:sweep 2.2s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.hero__scroll:hover{color:var(--ink)}

/* stacked bottom-right so they never collide with the shader wordmark, which
   owns the middle 90% of the viewport */
.hud{
  position:absolute;right:var(--pad);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--ink-3);display:flex;gap:10px;text-transform:uppercase;
}
.hud--l{bottom:calc(var(--pad) + 18px)}
.hud--r{bottom:var(--pad)}
.hud__d{color:rgba(242,238,230,.2)}
#hudXY{font-variant-numeric:tabular-nums;color:var(--ink-2)}
@media (max-width:1180px){.hud{display:none}}

/* boot-staged entrance */
[data-boot]{opacity:0;transform:translateY(18px)}

/* ============================================================= SECTION HEADS */
.sec-head{
  display:flex;align-items:baseline;gap:16px;padding-bottom:22px;margin-bottom:clamp(30px,6vh,70px);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.sec-head .idx{color:var(--cold)}
.sec-head .lbl{color:var(--ink-2)}
.sec-head__c{margin-left:auto}
.lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================= THESIS */
.thesis{position:relative;z-index:1;padding:clamp(90px,16vh,190px) var(--pad);background:linear-gradient(180deg,transparent,var(--bg) 24%,var(--bg))}
.thesis__text{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,3.4vw,50px);line-height:1.22;letter-spacing:-.018em;
  max-width:min(22ch,92vw);
}
.thesis__text .w{display:inline-block;overflow:hidden;vertical-align:top}
.thesis__text .w i{display:inline-block;font-style:normal;transform:translateY(102%)}
.thesis__by{margin-top:clamp(26px,5vh,54px);color:var(--ink-3);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.thesis__by span{color:var(--cold);margin-right:8px}

/* ============================================================= PRODUCT ROWS */
.work{position:relative;z-index:1;background:var(--bg);padding:clamp(60px,10vh,120px) var(--pad) clamp(80px,14vh,170px)}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,70px);
  padding:clamp(32px,5vh,58px) 0;border-top:1px solid var(--line);align-items:center;
}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row__no{font-family:var(--mono);font-size:11px;color:var(--cold);letter-spacing:.14em}
.row__name{
  font-family:var(--serif);font-weight:300;letter-spacing:-.025em;
  font-size:clamp(38px,6.2vw,96px);line-height:.98;margin:10px 0 16px;
}
.row__name a{position:relative;display:inline-block;transition:color .4s}
.row__name a::after{content:'';position:absolute;left:0;bottom:.08em;width:100%;height:2px;background:var(--hot);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.row__name a:hover{color:var(--hot)}
.row__name a:hover::after{transform:scaleX(1);transform-origin:left}
.row__what{color:var(--ink-2);max-width:42ch;font-size:clamp(14px,1.05vw,17px)}
.row__meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.st{padding:3px 9px;border:1px solid var(--line);border-radius:99px}
.st--dev{color:var(--ink-2)}
.st--live{color:var(--hot);border-color:rgba(255,91,30,.4)}

/* A live row that isn't the tiger. The orange is spent at the door and nowhere
   above it, so Marginalia signals "live" in the page's cold blue instead. */
.row--cold .st--live{color:var(--cold);border-color:rgba(127,180,255,.42)}
.row--cold .row__name a:hover{color:var(--cold)}
.row--cold .row__name a::after{background:var(--cold)}
.row--cold .panel--go:hover .panel__go,
.row--cold .panel-link:hover .panel__go{background:var(--cold);border-color:var(--cold);color:#06060a}

.row--ghost{opacity:.34}
.row--ghost .row__name{font-size:clamp(30px,4vw,64px)}

/* ---- demo panels ---- */
.panel{
  position:relative;border:1px solid var(--line);background:rgba(10,11,15,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:5px;overflow:hidden;min-height:230px;display:block;
  transition:border-color .5s,transform .7s var(--ease);
}
.row:hover .panel{border-color:rgba(127,180,255,.3)}
.panel__bar{
  display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;
}
.panel__bar i{width:7px;height:7px;border-radius:50%;background:rgba(242,238,230,.16)}
.panel__bar span{margin-left:8px}

/* terminal (Sentient UI) */
.term{font-family:var(--mono);font-size:12px;line-height:1.85;padding:14px 15px 6px;min-height:150px}
.term li{display:flex;gap:9px;opacity:0;transform:translateY(5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term li.in{opacity:1;transform:none;transition:opacity .3s,transform .3s}
.term li b{font-weight:400;width:1em;flex:none;text-align:center}
.term .ok  b{color:#6ee7a8}
.term .bad b{color:#ff6b57}
.term .heal b{color:var(--cold)}
.term .ok  {color:var(--ink-2)}
.term .bad {color:#ff9c8d}
.term .heal{color:var(--cold)}
.term .sel{color:var(--ink);opacity:.9}
.term .old{text-decoration:line-through;opacity:.45}
.term .note{color:var(--ink-3);font-size:11px}
.term__foot{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:9px 15px 13px;
  border-top:1px solid var(--line);margin-top:8px;min-height:34px;letter-spacing:.03em;
}
.term__foot b{color:var(--cold);font-weight:400}

/* document (Marginalia) */
.doc{display:grid;grid-template-columns:.82fr 1.18fr;gap:12px;padding:14px 15px;min-height:158px}
.doc__pages{position:relative;height:150px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.012)}
.doc__pages .pg{padding:7px 8px}
.doc__pages .ln{height:2px;background:rgba(242,238,230,.2);margin-bottom:4px;border-radius:1px}
.doc__pages .ln.h{height:3px;background:rgba(242,238,230,.34);width:60%;margin-bottom:6px}
.doc__pages::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,6,8,.95))}
.doc__out{display:flex;flex-direction:column;gap:8px;justify-content:center}
.chip{
  border:1px solid var(--line);border-left:2px solid var(--cold);border-radius:3px;
  padding:8px 10px;font-size:11.5px;line-height:1.4;color:var(--ink-2);
  opacity:0;transform:translateX(10px);background:rgba(127,180,255,.04);
}
.chip.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chip b{color:var(--ink);font-weight:500}
.doc__foot{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  padding:9px 15px 13px;border-top:1px solid var(--line);letter-spacing:.03em;
}
.doc__foot i{font-style:normal;color:var(--cold)}
.doc__foot em{margin-left:auto;font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
#docCount{color:var(--ink);font-variant-numeric:tabular-nums}

/* the Marginalia panel is a link wrapped around a still-running demo: the
   "Open" pill rises out of a scrim on hover/focus rather than replacing it */
.panel-link{position:relative;display:block}
.panel-link .panel{transition:border-color .5s,transform .7s var(--ease),filter .5s var(--ease)}
.panel-link:hover .panel,.panel-link:focus-visible .panel{border-color:rgba(127,180,255,.34);filter:brightness(.62) saturate(.8)}
.panel__open{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.panel-link:hover .panel__open,.panel-link:focus-visible .panel__open{opacity:1}
/* coarse pointers get no hover, so keep the affordance permanently visible */
@media (hover:none){
  .panel-link .panel{filter:brightness(.72)}
  .panel__open{opacity:1}
}

/* "open" panel for the tiger row */
.panel--go{
  min-height:230px;display:grid;place-items:center;
  background:#0a0a0d url('../assets/img/hero.jpg') center 22%/cover no-repeat;
}
.panel--go::before{content:'';position:absolute;inset:0;background:rgba(6,6,8,.72);backdrop-filter:saturate(.25);transition:background .6s var(--ease),backdrop-filter .6s var(--ease)}
.panel--go:hover::before{background:rgba(6,6,8,.28);backdrop-filter:saturate(1.1)}
.panel__go{position:relative;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--ink-3);padding:12px 22px;border-radius:99px;transition:background .4s,color .4s,border-color .4s}
.panel--go:hover .panel__go{background:var(--hot);border-color:var(--hot);color:#0b0b0d}

/* ============================================================= THE DOOR */
.door{
  position:relative;z-index:1;min-height:100svh;display:grid;align-items:center;
  padding:clamp(70px,12vh,140px) var(--pad);overflow:hidden;isolation:isolate;
}
.door__img{
  position:absolute;inset:0;z-index:-2;
  background:url('../assets/img/hero.jpg') 66% center/cover no-repeat;
  filter:grayscale(.9) brightness(.62) contrast(1.12);
  transform:scale(1.06);opacity:.78;
  transition:filter .9s var(--ease),transform 1.2s var(--ease),opacity .9s var(--ease);
}
.door__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--bg) 2%,rgba(6,6,8,.86) 38%,rgba(6,6,8,.12) 74%,rgba(6,6,8,.5)),
             linear-gradient(180deg,var(--bg),transparent 20%,transparent 80%,var(--bg));
}
.door.is-hot .door__img{filter:grayscale(0) brightness(.78) contrast(1.05);transform:scale(1);opacity:1}
.door__body{position:relative;max-width:min(640px,92vw)}
.door__ex{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--hot)}
.door__title{
  font-family:var(--serif);font-weight:200;letter-spacing:-.03em;
  font-size:clamp(72px,15vw,240px);line-height:.86;margin:12px 0 18px;
}
.door__copy{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,2.2vw,32px);color:var(--ink-2)}
.door__cta{
  display:inline-block;margin-top:clamp(26px,4vh,44px);
  border:1px solid var(--ink-3);border-radius:99px;overflow:hidden;position:relative;
}
.door__cta::before{content:'';position:absolute;inset:0;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.door__cta:hover::before{transform:scaleX(1)}
.door__cta-in{position:relative;display:block;padding:16px 40px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:color .35s}
.door__cta:hover .door__cta-in{color:#0b0b0d}
.door__cta i{font-style:normal}
.door__note{margin-top:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* eyes in the dark */
.eyes{
  position:absolute;top:clamp(56px,12vh,120px);right:clamp(20px,7vw,120px);
  width:clamp(150px,19vw,272px);height:auto;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.door.is-seen .eyes{opacity:.92}
.eye__lid{fill:rgba(4,3,3,.62);stroke:var(--hot);stroke-width:2;opacity:.7;
  filter:drop-shadow(0 0 14px rgba(255,91,30,.5))}
.eye__iris{fill:var(--hot);opacity:.5;filter:blur(.4px)}
.eye__pupil{fill:#1a0b04;stroke:rgba(255,180,120,.85);stroke-width:1.1;
  filter:drop-shadow(0 0 7px rgba(255,91,30,.95))}
.eyes .eye{transform-box:fill-box;transform-origin:center;transition:transform .1s ease}
.eyes.blink .eye{transform:scaleY(.05)}
.door.is-hot .eye__lid{opacity:1;stroke-width:2.4}
.door.is-hot .eye__iris{opacity:.85}

/* ============================================================= FOOTER */
.foot{position:relative;z-index:1;background:var(--bg);padding:clamp(80px,14vh,160px) var(--pad) var(--pad)}
.foot__cta{
  font-family:var(--serif);font-weight:200;letter-spacing:-.028em;
  font-size:clamp(38px,7vw,116px);line-height:.96;
}
.foot__cta em{font-style:italic;color:var(--cold)}
.foot__mail{
  display:inline-block;margin-top:clamp(24px,4vh,44px);font-size:clamp(16px,1.6vw,24px);
  border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .35s,border-color .35s;
}
.foot__mail:hover{color:var(--cold);border-color:var(--cold)}
.foot__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(24px,4vw,60px);
  margin-top:clamp(50px,9vh,110px);padding-top:26px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);
}
.foot__cols .lbl{display:block;margin-bottom:10px}
.foot__cols a:hover{color:var(--cold)}
.foot__mark{
  margin-top:clamp(40px,7vh,90px);font-weight:800;letter-spacing:.02em;line-height:.82;
  font-size:clamp(52px,15.5vw,270px);
  color:transparent;-webkit-text-stroke:1px rgba(242,238,230,.16);
  user-select:none;
}
.foot__base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:clamp(24px,4vh,44px);padding-top:20px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.1em;color:var(--ink-3);
}
.foot__base a:hover{color:var(--cold)}

/* reveal primitives */
[data-reveal],[data-lines] .ln-in{opacity:0;transform:translateY(20px)}
[data-lines] .ln{display:block;overflow:hidden}
[data-lines] .ln-in{display:block}

/* ============================================================= RESPONSIVE */
@media (max-width:1000px){
  .row{grid-template-columns:1fr;gap:26px}
  .row__demo{order:2}
  .panel{min-height:200px}
}
@media (max-width:900px){
  .nav__links{gap:16px}
  .nav__links a{font-size:10px;letter-spacing:.1em}
  .nav__status{display:none}
  .hero{padding-top:calc(var(--pad) + 68px)}
  .doc{grid-template-columns:1fr}
  .doc__pages{height:92px}
  .eyes{top:auto;bottom:clamp(24px,6vh,60px);right:clamp(16px,6vw,60px);width:min(46vw,220px)}
  /* A portrait viewport only sees ~26% of a 16:9 still, and at 66% that slice
     is anonymous flank. Pull it onto the head, and lift the scrim off the top
     third so the animal is actually recognisable above the copy. */
  .door__img{background-position:28% center}
  .door__scrim{background:linear-gradient(180deg,var(--bg) 1%,rgba(6,6,8,.42) 26%,rgba(6,6,8,.86) 60%,rgba(6,6,8,.94))}
}
@media (max-width:560px){
  /* Five links no longer fit beside the wordmark. Drop the two in-page
     anchors — Products and Studio are both a scroll away — and keep the three
     that actually leave this page. */
  .nav__links a:nth-child(1),.nav__links a:nth-child(2){display:none}
  .thesis__text{max-width:none}
}

/* ============================================================= REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{display:none}
  /* [data-row] included deliberately: those use gsap.from(), which stamps
     opacity:0 at setup and only clears when ScrollTrigger fires. If that never
     ran, every product would be invisible — a far worse failure than a missing
     animation. */
  [data-boot],[data-reveal],[data-row],[data-lines] .ln-in{opacity:1!important;transform:none!important}
  .thesis__text .w i{transform:none!important}
  .chip,.term li{opacity:1!important;transform:none!important}
}