/* ============== AUTO_HERMES — "BLUEPRINT" ==============
   A cyanotype engineering drawing set, redlined in review.
   The drawing is drafted in white line on Prussian blue (Hermes, the writer);
   the red ink is the reviewer's pen (Opus). Two themes = two reproductions
   of the same sheet: BLUEPRINT (white-on-blue) and PRINT (blue-on-vellum). */
:root{
  /* Prussian ground — the blueprint sheet */
  --night:    oklch(0.320 0.100 252);
  --night-2:  oklch(0.282 0.090 252);
  --surface:  oklch(0.362 0.104 250);
  --bp-deep:  oklch(0.238 0.080 252);   /* duotone plate ground */
  --ink:      oklch(0.965 0.012 240);
  --ink-dim:  oklch(0.876 0.030 240);
  --muted:    oklch(0.800 0.042 242);
  --line:     oklch(0.965 0.012 240 / .22);
  --line-2:   oklch(0.965 0.012 240 / .40);
  --grid-1:   oklch(0.965 0.012 240 / .045);
  --grid-2:   oklch(0.965 0.012 240 / .085);

  /* the reviewer's redline (accent) */
  --warm:     oklch(0.690 0.195 33);    /* red ink on blue — large text & marks only */
  --warm-hi:  oklch(0.745 0.170 38);
  --warm-deep:oklch(0.565 0.205 30);    /* red fills — white text passes 4.5 */
  --warm-ink: oklch(0.990 0.005 240);

  /* the drafted line (Hermes, secondary) */
  --cool:     oklch(0.870 0.058 230);
  --cool-hi:  oklch(0.930 0.040 232);

  --display:"Big Shoulders","Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  --body:"Libre Franklin",system-ui,sans-serif;
  --mono:"Martian Mono","JetBrains Mono",ui-monospace,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  /* z scale: grid 0 · content 1 · nav 20 · sheet-frame 40 · grain 50 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--ink);font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);line-height:1.66;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* graph-paper field under everything */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,var(--grid-2) 0 1px,transparent 1px 130px),
    repeating-linear-gradient(90deg,var(--grid-2) 0 1px,transparent 1px 130px),
    repeating-linear-gradient(0deg,var(--grid-1) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,var(--grid-1) 0 1px,transparent 1px 26px)}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--warm)}
img{max-width:100%}
::selection{background:var(--warm-deep);color:var(--warm-ink)}
:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
section,header,footer,.strip{position:relative;z-index:1}

/* paper grain */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* drawing border around the viewport */
.sheet-frame{position:fixed;inset:10px;z-index:40;pointer-events:none;border:1px solid var(--line)}
.sheet-frame::before{content:"";position:absolute;inset:4px;border:1px solid var(--grid-2)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-weight:600;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:.95em 1.5em;border:1px solid transparent;
  transition:transform .35s var(--out),background .3s,border-color .3s,color .3s,box-shadow .35s var(--out);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-amber{background:var(--warm-deep);color:var(--warm-ink);
  box-shadow:0 0 0 1px var(--warm-deep),0 10px 30px -16px var(--warm-deep)}
.btn-amber:hover{background:var(--warm);box-shadow:0 0 0 1px var(--warm),0 16px 40px -16px var(--warm)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--warm);color:var(--warm-hi)}
.btn-sm{padding:.68em 1.1em;font-size:.64rem}
.btn-lg{padding:1.1em 1.9em;font-size:.82rem}
.play{font-size:.66em;transform:translateY(.5px)}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:1.5rem;
  padding:1.2rem clamp(1.2rem,4vw,3rem);transition:padding .3s var(--ease),background .3s,backdrop-filter .3s,border-color .3s}
.nav.scrolled{padding-top:.65rem;padding-bottom:.65rem;background:oklch(0.262 0.086 252 / .82);
  backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand-mark{width:26px;height:26px}
.brand-word{font-family:var(--mono);font-weight:700;letter-spacing:.04em;font-size:.9rem}
.brand-word .us{color:var(--warm)}
.nav-links{display:flex;gap:1.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-dim)}
.nav-links a{position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--warm);transition:right .3s var(--out)}
.nav-links a:hover::after{right:0}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:0 clamp(1.2rem,5vw,4rem);overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* drafting-lamp pool behind the emblem */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 66% 46%,oklch(0.42 0.105 248 / .55),transparent 70%)}
/* vignette grounding the sheet edges */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 95% at 60% 42%,transparent 44%,oklch(0.282 0.090 252 / .42) 72%,var(--night) 98%),
             linear-gradient(180deg,oklch(0.282 0.090 252 / .5) 0%,transparent 22%,transparent 62%,var(--night) 100%)}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;align-items:center;justify-content:center}
.hero-fallback img{width:min(46vw,420px);filter:drop-shadow(0 0 50px oklch(0.90 0.04 235 / .5))}
.hero-inner{position:relative;z-index:2;max-width:700px}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);
  margin:0 0 1.6rem;display:inline-flex;align-items:stretch;border:1px solid var(--line-2)}
.eyebrow b{font-weight:600;color:var(--warm);padding:.62em .85em;border-right:1px solid var(--line-2)}
.eyebrow span{padding:.62em .95em}
h1{font-family:var(--display);font-weight:700;font-size:clamp(3.1rem,9vw,6rem);line-height:.94;
  text-transform:uppercase;letter-spacing:.005em;margin:0 0 1.6rem;font-variation-settings:"opsz" 72}
h1 em{color:var(--warm);text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.1em}
.hero-sub{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--ink-dim);max-width:30em;margin:0 0 2.4rem;line-height:1.62}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.drag-hint{position:absolute;right:clamp(1.2rem,5vw,4rem);bottom:8.5rem;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.6rem}
.drag-hint .ring{width:13px;height:13px;border:1.5px solid var(--warm);border-top-color:transparent;border-radius:50%;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{position:absolute;left:50%;bottom:2rem;z-index:2;transform:translateX(-50%);
  font-size:1.05rem;color:var(--muted);animation:bob 2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---- marquee strip — title-block tape ---- */
.strip{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:oklch(0.282 0.090 252 / .6);overflow:hidden;padding:.95rem 0;position:relative}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--grid-2)}
.strip::before{top:4px}.strip::after{bottom:4px}
.strip-track{display:flex;gap:1.7rem;width:max-content;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);animation:march 155s linear infinite}
.strip-track i{color:var(--warm);font-style:normal}
@keyframes march{to{transform:translateX(-50%)}}

/* ---- section scaffolding — sheet tabs ---- */
section{padding:clamp(5rem,11vw,9rem) clamp(1.2rem,5vw,4rem)}
.section-head{max-width:var(--maxw);margin:0 auto 3.4rem}
.kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);
  display:inline-flex;align-items:stretch;border:1px solid var(--line-2);margin-bottom:1.5rem;background:oklch(0.282 0.090 252 / .5)}
.kicker b{font-weight:600;color:var(--warm);padding:.6em .8em;border-right:1px solid var(--line-2)}
.kicker > i,.kicker > span{font-style:normal;padding:.6em .9em}
.kicker:not(:has(b)){padding:.6em .9em}
h2{font-family:var(--display);font-weight:650;font-size:clamp(2.4rem,5vw,3.8rem);line-height:.96;
  text-transform:uppercase;letter-spacing:.005em;margin:0;font-variation-settings:"opsz" 60}
h2 em{color:var(--warm);text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em}
.head-note{color:var(--ink-dim);max-width:34em;margin:1.4rem 0 0}

/* ---- about / the loop drawing ---- */
.about{max-width:1280px;margin:0 auto}
.about-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:2.6rem}
.lede{font-size:clamp(1.18rem,1.9vw,1.44rem);font-weight:500;line-height:1.42;color:var(--ink);max-width:24em;letter-spacing:-.005em}
.lede-2{font-size:clamp(1rem,1.3vw,1.1rem);font-weight:400;color:var(--ink-dim);max-width:38em}
.lede-2 strong{color:var(--ink);font-weight:600}
.loop{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2.4rem 1.5rem;margin:.5rem 0;
  border:1px solid var(--line);background:oklch(0.282 0.090 252 / .35)}
.node{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.35rem 1.7rem;
  border:1px solid var(--line-2);background:var(--surface);min-width:158px;position:relative}
.node::before,.node::after{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--line-2)}
.node::before{top:-4px;left:-4px;border-width:1px 0 0 1px}
.node::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
.node .n-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--muted)}
.node strong{font-family:var(--display);font-size:1.6rem;font-weight:650;text-transform:uppercase;letter-spacing:.02em}
.node small{color:var(--ink-dim);font-size:.82rem}
.node-h strong{color:var(--cool-hi)}
.node-h .n-tag{color:var(--cool)}
.node-o strong{color:var(--warm)}
.node-o .n-tag{color:var(--warm)}
.loop-arc{width:240px;height:120px;flex:0 0 auto;overflow:visible}
.arc{fill:none;stroke-width:1.3}
.arc-top{stroke:var(--cool);opacity:.75}
.arc-bot{stroke:var(--warm);stroke-dasharray:6 5;opacity:.85}   /* the redline returns with notes */
.dot-1{fill:var(--cool-hi)}.dot-2{fill:var(--warm)}

/* ---- features — detail callouts ---- */
.how{max-width:1280px;margin:0 auto}
.features{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.feat{border:1px solid var(--line);padding:1.7rem;overflow:hidden;position:relative;background:var(--night-2);
  transition:border-color .4s,background .4s}
.feat:hover{border-color:var(--line-2);background:var(--surface)}
.feat-thumb{margin:-1.7rem -1.7rem 1.5rem;aspect-ratio:3/2;overflow:hidden;position:relative;
  border-bottom:1px solid var(--line);background:var(--bp-deep)}
.feat-thumb img,.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.94) contrast(1.05);transition:filter .5s var(--out),transform .55s var(--out)}
/* cyanotype duotone: blue overlay carries hue, image carries luminance */
.feat-thumb::after,.proj-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:oklch(0.46 0.124 251);mix-blend-mode:color;transition:opacity .5s var(--out)}
/* hover develops the print to full colour */
.feat:hover .feat-thumb img,.proj:hover .proj-thumb img{filter:none;transform:scale(1.035)}
.feat:hover .feat-thumb::after,.proj:hover .proj-thumb::after{opacity:0}
.fnum{font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--warm);letter-spacing:.04em;
  display:inline-flex;align-items:center;justify-content:center;width:2.3em;height:2.3em;
  border:1px solid var(--warm);border-radius:50%;position:relative}
.fnum::after{content:"";position:absolute;left:100%;top:50%;width:2.2rem;height:1px;background:var(--warm);opacity:.55}
.feat h3{font-family:var(--display);font-weight:600;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;
  margin:.95rem 0 .5rem}
.feat p{color:var(--ink-dim);font-size:.95rem;margin:0}

/* ---- projects — numbered plates ---- */
.projects{max-width:1280px;margin:0 auto}
.proj-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.proj{border:1px solid var(--line);padding:1.7rem;background:var(--night-2);
  transition:border-color .4s,background .4s;position:relative;overflow:hidden}
.proj:hover{border-color:var(--line-2);background:var(--surface)}
.proj-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem;position:relative}
.proj-top img{width:34px;height:34px}
.chip{font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm);border:1.5px solid var(--warm);padding:.42em .7em;transform:rotate(-2deg);opacity:.92}
.proj h3{font-family:var(--display);font-weight:600;font-size:1.66rem;text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 .5rem;position:relative}
.proj p{color:var(--ink-dim);font-size:.93rem;margin:0;position:relative}
.proj-more{display:flex;flex-direction:column;justify-content:center;background:transparent;border-style:dashed;border-color:var(--line-2)}
.proj-more h3{color:var(--warm)}
.proj-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warm);
  margin-top:1rem;position:relative;display:inline-flex;gap:.4em;transition:gap .3s var(--out)}
.proj-link:hover{gap:.8em}
.proj-thumb{margin:-1.7rem -1.7rem 1.5rem;aspect-ratio:3/2;overflow:hidden;position:relative;
  border-bottom:1px solid var(--line);background:var(--bp-deep)}

/* ---- film — night footage ---- */
.film{max-width:1280px;margin:0 auto}
.film-frame{max-width:var(--maxw);margin:0 auto;overflow:hidden;border:1px solid var(--line-2);
  outline:1px solid var(--grid-2);outline-offset:5px;
  box-shadow:0 40px 110px -50px oklch(0.10 0.04 252 / .9);background:#000;position:relative}
.film-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---- CTA — the approval ---- */
.cta{position:relative;text-align:center;overflow:hidden}
.cta-glow{position:absolute;left:50%;top:30%;width:84vw;max-width:960px;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,oklch(0.45 0.11 250 / .5),transparent 62%);
  filter:blur(22px);pointer-events:none}
/* drafting grid receding to the horizon */
.cta-floor{position:absolute;left:50%;bottom:0;width:240%;height:60%;z-index:0;pointer-events:none;
  transform:translateX(-50%) perspective(340px) rotateX(60deg);transform-origin:bottom center;
  background:
    repeating-linear-gradient(90deg,transparent 0 47px,oklch(0.92 0.03 235 / .4) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 47px,oklch(0.92 0.03 235 / .24) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 239px,oklch(0.69 0.195 33 / .5) 239px 240px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  mask-image:linear-gradient(to top,#000 0%,transparent 78%);
  opacity:.5;animation:floor 7s linear infinite}
@keyframes floor{to{background-position:0 48px,0 48px,0 240px}}
.cta-inner{position:relative;max-width:740px;margin:0 auto}
.cta h2{margin-bottom:1.3rem}
.cta p{color:var(--ink-dim);font-size:1.08rem;max-width:34em;margin:0 auto 2.4rem}
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
/* the stamp */
.cta-stamp{position:relative;width:158px;height:158px;margin:0 auto 1.9rem;transform:rotate(-6deg);opacity:.94}
.cta-stamp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-stamp circle{fill:none;stroke:var(--warm)}
.cta-stamp circle:first-of-type{stroke-width:2}
.cta-stamp circle:last-of-type{stroke-width:1}
.cta-stamp text{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;fill:var(--warm)}
.stamp-glyph{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);
  background:var(--warm);-webkit-mask:url(../assets/logos/caduceus.svg) center/contain no-repeat;
  mask:url(../assets/logos/caduceus.svg) center/contain no-repeat}
.js .cta-inner.reveal .cta-stamp{opacity:0}
.js .cta-inner.reveal.in .cta-stamp{animation:stamp .5s var(--out) .25s both}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-11deg) scale(1.65)}
  62%{opacity:.97;transform:rotate(-5.4deg) scale(.97)}
  100%{opacity:.94;transform:rotate(-6deg) scale(1)}
}

/* ---- footer — the title block ---- */
.foot{display:flex;align-items:center;gap:1.4rem 2rem;flex-wrap:wrap;justify-content:space-between;
  padding:2.2rem clamp(1.2rem,5vw,4rem);border-top:1px solid var(--line-2);background:oklch(0.282 0.090 252 / .6);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--grid-2)}
.foot-l{display:flex;align-items:center;gap:.55rem}
.foot-l img{width:22px;height:22px}
.foot-l .brand-word{font-size:.82rem}
.foot-stamp{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.foot-stamp b{color:var(--warm);font-weight:600}
.foot-by{color:var(--muted);font-family:var(--mono);font-size:.64rem;letter-spacing:.04em}
.foot-by a{color:var(--ink-dim)}.foot-by a:hover{color:var(--warm-hi)}
.foot-links{display:flex;gap:1.3rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim)}
.foot-links a:hover{color:var(--warm-hi)}

/* ---- reveal motion ---- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--out),transform .8s var(--out)}
.js .reveal.in{opacity:1;transform:none}
/* section heads plot in from the left like a pen stroke */
.js .section-head.reveal{transform:none;clip-path:inset(0 100% 0 0)}
.js .section-head.reveal.in{clip-path:inset(0 -2% 0 0);transition:opacity .55s var(--out),clip-path 1s var(--out)}
.hero .reveal{transition-duration:1s}
.hero .d1{transition-delay:.07s}.hero .d2{transition-delay:.16s}.hero .d3{transition-delay:.26s}.hero .d4{transition-delay:.38s}

/* ---- responsive ---- */
@media(max-width:880px){
  .nav-links{display:none}
  .features,.proj-grid{grid-template-columns:1fr 1fr}
  .loop{flex-direction:column}.loop-arc{transform:rotate(90deg);width:120px;height:90px}
  .drag-hint{display:none}
  /* stack the hero: emblem holds the top half, copy anchors to the bottom */
  .hero{align-items:flex-end;padding-bottom:6.5rem}
  /* ground the lower half so copy reads over the lifted emblem */
  .hero::after{background:
    radial-gradient(140% 80% at 50% 10%,transparent 32%,oklch(0.282 0.090 252 / .5) 62%,var(--night) 100%),
    linear-gradient(180deg,oklch(0.282 0.090 252 / .4) 0%,transparent 16%,transparent 30%,oklch(0.282 0.090 252 / .88) 54%,var(--night) 100%)}
  html[data-theme="light"] .hero::after{background:
    radial-gradient(140% 80% at 50% 10%,transparent 32%,oklch(0.946 0.012 245 / .55) 62%,var(--night) 100%),
    linear-gradient(180deg,oklch(0.946 0.012 245 / .4) 0%,transparent 16%,transparent 30%,oklch(0.962 0.009 245 / .92) 54%,var(--night) 100%)}
}
@media(max-width:560px){
  .features,.proj-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:flex-start}
  h1{font-size:clamp(2.9rem,13.5vw,3.9rem)}
  .sheet-frame{inset:7px}.sheet-frame::before{inset:3px}
}

/* ---- reduced motion / no-webgl ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto}
  .reveal,.js .reveal,.js .section-head.reveal{opacity:1;transform:none;transition:none;clip-path:none}
  .js .cta-inner.reveal .cta-stamp{opacity:.94;animation:none}
}
body.no-webgl #scene{display:none}
body.no-webgl .hero-fallback{display:flex}

/* ---- reproduction toggle (BLUEPRINT ⇄ PRINT) ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:.62em .85em;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-dim);cursor:pointer;
  font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.14em;line-height:1;
  transition:color .25s,border-color .25s}
.theme-toggle:hover{color:var(--warm-hi);border-color:var(--warm)}
.ti-pr{display:none}
html[data-theme="light"] .ti-bp{display:none}
html[data-theme="light"] .ti-pr{display:inline}

/* ============== PRINT — the same drawing on vellum ============== */
html[data-theme="light"]{
  --night:    oklch(0.962 0.009 245);
  --night-2:  oklch(0.934 0.013 245);
  --surface:  oklch(0.988 0.005 245);
  --bp-deep:  oklch(0.905 0.018 245);
  --ink:      oklch(0.298 0.084 252);
  --ink-dim:  oklch(0.402 0.075 250);
  --muted:    oklch(0.500 0.062 248);
  --line:     oklch(0.298 0.084 252 / .25);
  --line-2:   oklch(0.298 0.084 252 / .45);
  --grid-1:   oklch(0.298 0.084 252 / .05);
  --grid-2:   oklch(0.298 0.084 252 / .10);
  --warm:     oklch(0.545 0.205 30);
  --warm-hi:  oklch(0.500 0.200 30);
  --warm-deep:oklch(0.545 0.205 30);
  --warm-ink: oklch(0.990 0.005 240);
  --cool:     oklch(0.460 0.082 250);
  --cool-hi:  oklch(0.380 0.085 252);
}
html[data-theme="light"] body{background:linear-gradient(180deg,oklch(0.968 0.008 245),oklch(0.946 0.012 245))}
html[data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.028}
html[data-theme="light"] .nav.scrolled{background:oklch(0.965 0.009 245 / .82);border-bottom-color:var(--line)}
html[data-theme="light"] .strip,html[data-theme="light"] .foot{background:oklch(0.934 0.013 245 / .7)}
html[data-theme="light"] .kicker{background:oklch(0.988 0.005 245 / .7)}
html[data-theme="light"] .loop{background:oklch(0.934 0.013 245 / .5)}
html[data-theme="light"] .feat,html[data-theme="light"] .proj{background:var(--surface)}
html[data-theme="light"] .feat:hover,html[data-theme="light"] .proj:hover{background:oklch(1 0 0)}
/* prints are developed: full-colour plates, no duotone */
html[data-theme="light"] .feat-thumb img,html[data-theme="light"] .proj-thumb img{filter:none}
html[data-theme="light"] .feat-thumb::after,html[data-theme="light"] .proj-thumb::after{opacity:0}
html[data-theme="light"] .hero::before{background:radial-gradient(58% 52% at 66% 46%,oklch(0.88 0.035 240 / .8),transparent 70%)}
html[data-theme="light"] .hero::after{background:
  linear-gradient(90deg,oklch(0.962 0.009 245 / .92) 0%,oklch(0.962 0.009 245 / .5) 26%,transparent 50%),
  radial-gradient(130% 95% at 60% 42%,transparent 46%,oklch(0.946 0.012 245 / .3) 74%,var(--night) 98%),
  linear-gradient(180deg,transparent 0%,transparent 64%,var(--night) 100%)}
html[data-theme="light"] .hero-fallback img{filter:drop-shadow(0 14px 40px oklch(0.30 0.084 252 / .35))}
html[data-theme="light"] .cta-glow{background:radial-gradient(circle,oklch(0.88 0.03 240 / .85),transparent 62%)}
html[data-theme="light"] .cta-floor{background:
  repeating-linear-gradient(90deg,transparent 0 47px,oklch(0.30 0.084 252 / .35) 47px 48px),
  repeating-linear-gradient(0deg,transparent 0 47px,oklch(0.30 0.084 252 / .22) 47px 48px),
  repeating-linear-gradient(0deg,transparent 0 239px,oklch(0.545 0.205 30 / .45) 239px 240px)}
html[data-theme="light"] .film-frame{box-shadow:0 36px 90px -50px oklch(0.30 0.084 252 / .4)}