/* ============ Tokens & CSS-referenced assets ============
   Asset custom props exist so treatments reference one place
   (and so the self-contained preview can swap them for data URIs). */
:root{
  --ink:#0F0E10; --ink-2:#151318; --plaster:#EAE5DB; --muted:#98918A;
  --accent:#4A55E6; --line:rgba(234,229,219,.14); --pad:clamp(1.2rem,4.5vw,3rem);
  --hl:#EB2F30;          /* collage vermilion — text highlight (contrast 4.57 on ink) */
  --hl-band:#B31E1C;     /* deep Extravagance red — animated highlighter band */
  --lift01:image-set(url("/assets/img/work-01-lift.webp") type("image/webp"),url("/assets/img/work-01-lift.jpg") type("image/jpeg"));
  --under05:image-set(url("/assets/img/work-05-under.webp") type("image/webp"),url("/assets/img/work-05-under.jpg") type("image/jpeg"));
  --blue04:url("/assets/img/work-04-blue.webp");
  --tapeA:url("/assets/img/work-03-tape-a.jpg");
  --tapeB:url("/assets/img/work-03-tape-b.jpg");
  --pcLetters:url("/assets/img/work-06-letters.jpg");
  --pcMandarin:url("/assets/img/work-06-mandarin.jpg");
  --pcStrips:url("/assets/img/work-06-strips.jpg");
  --fragA:url("/assets/img/work-01-1080.jpg");
  --fragB:url("/assets/img/work-04-1080.jpg");
  --mTornA:url("/assets/masks/torn-a.png");
  --mTornB:url("/assets/masks/torn-b.png");
  --mStripH:url("/assets/masks/strip-h.png");
  --mStripV:url("/assets/masks/strip-v.png");
  --mFragA:url("/assets/masks/frag-a.png");
  --mFragB:url("/assets/masks/frag-b.png");
  --mSpray:url("/assets/masks/spray-reveal.png");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--plaster);
  font-family:'Archivo',system-ui,sans-serif;font-size:1rem;line-height:1.65;
  overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
::selection{background:var(--hl);color:var(--ink)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
img{max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

/* ============ Header ============ */
.site-head{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:max(1.15rem,env(safe-area-inset-top)) var(--pad) 1.15rem;
  background:linear-gradient(to bottom,rgba(15,14,16,.82) 30%,rgba(15,14,16,0));
}
.brand{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;font-size:1.1rem;text-decoration:none;letter-spacing:.02em}
.site-nav a{
  display:inline-block;padding:.45rem 0;margin-left:clamp(.9rem,3vw,1.8rem);
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .25s;
}
.site-nav a:hover{color:var(--plaster)}

/* ============ Hero — featured portrait + spray-revealed name (R6) ============ */
.hero{
  min-height:100svh;position:relative;overflow:clip;
  display:grid;align-items:center;gap:3rem;
  padding:16vh var(--pad) 10vh;
  background:radial-gradient(120% 55% at 50% 0%,rgba(234,229,219,.05),transparent 60%);
}
@media (min-width:920px){
  .hero{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);padding-top:10vh}
}
.hero-core{position:relative;z-index:2}
.hero-name{
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;
  font-size:clamp(2.9rem,9.5vw,7.6rem);line-height:.98;letter-spacing:-.01em;
  opacity:calc(1 - var(--q,0)*.7);
}
.hero-name span{
  display:inline-block;will-change:transform;
  transform:translate(calc(var(--dx)*var(--q,0)),calc(var(--dy)*var(--q,0))) rotate(calc(var(--dr)*var(--q,0)));
}
/* one-shot spray reveal; JS-gated so no-JS users always see the name */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .js .hero-name{
    -webkit-mask-image:var(--mSpray);mask-image:var(--mSpray);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;
    -webkit-mask-position:0% 0;mask-position:0% 0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .js .hero-name.revealed{animation:spray 1.2s ease-out forwards}
  @keyframes spray{to{-webkit-mask-position:100% 0;mask-position:100% 0}}
}
.hero-sub{
  margin-top:1.5rem;color:var(--muted);
  font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  opacity:calc(1 - var(--q,0)*1.4);
}
.hero-frag{
  position:absolute;background-size:cover;background-position:center;
  opacity:.4;z-index:1;will-change:transform;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.frag-a{
  width:min(30vw,21rem);aspect-ratio:1;top:5%;left:2%;
  background-image:var(--fragA);-webkit-mask-image:var(--mFragA);mask-image:var(--mFragA);
  transform:translate(calc(var(--mx,0)*14px + var(--rxa,0)*1px - var(--q,0)*7vw),
                      calc(var(--my,0)*10px + var(--rya,0)*1px - var(--q,0)*5vh)) rotate(-5deg);
}
.frag-b{
  width:min(23vw,16rem);aspect-ratio:1.414;bottom:6%;left:26%;
  background-image:var(--fragB);-webkit-mask-image:var(--mFragB);mask-image:var(--mFragB);
  opacity:.3;
  transform:translate(calc(var(--mx,0)*-18px + var(--rxb,0)*1px + var(--q,0)*6vw),
                      calc(var(--my,0)*-12px + var(--ryb,0)*1px + var(--q,0)*7vh)) rotate(4deg);
}
.hero-plate{position:relative;z-index:2;justify-self:center;text-align:left}
.hero-plate .plate-link{display:block;text-decoration:none}
.hero-plate img{
  display:block;height:auto;
  width:min(78vw,calc(58vh*.75),30rem);
  box-shadow:0 24px 38px -18px rgba(0,0,0,.75),0 80px 130px -40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .25s,transform .9s ease .25s;
}
@media (min-width:920px){.hero-plate img{width:min(38vw,calc(72vh*.75),30rem)}}
.hero-plate.in img{opacity:1;transform:translateY(calc(var(--q,0)*4vh))}
.hero-feat{
  margin-top:1rem;border-left:1px solid var(--accent);padding-left:.9rem;
  font-size:.72rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;line-height:1.7;
}
.hero-feat b{display:block;font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;
  font-size:1.05rem;color:var(--plaster);letter-spacing:.01em;text-transform:none}
.scroll-cue{
  position:absolute;bottom:2rem;left:50%;width:1px;height:3.2rem;
  background:linear-gradient(var(--plaster),transparent);opacity:.5;
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ============ Section furniture / About ============ */
.section-label{
  display:flex;align-items:center;gap:1.1rem;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  margin-bottom:2.4rem;font-weight:500;
}
.section-label::after{content:"";height:1px;flex:1;background:var(--line)}
.about{max-width:62rem;margin:0 auto;padding:16vh var(--pad) 8vh}
.entity{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(1.45rem,3vw,2.35rem);line-height:1.4}
.entity em{
  font-style:italic;font-weight:500;color:var(--plaster);
  /* highlighter band sits low behind the words, like a marker stroke */
  background-image:linear-gradient(180deg,transparent 44%,var(--hl-band) 44% 90%,transparent 90%);
  background-repeat:no-repeat;background-position:0 .02em;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .06em;border-radius:.08em;
}
/* JS-gated: start un-highlighted, then sweep in when the About block enters view */
.js .entity em{background-size:0% 100%}
.entity.hl-on em{animation:hlSweep .85s cubic-bezier(.5,.05,.3,1) forwards}
.entity.hl-on em:nth-of-type(2){animation-delay:.34s}
@keyframes hlSweep{from{background-size:0% 100%}to{background-size:100% 100%}}
.statement{margin-top:2.4rem;max-width:46rem;color:var(--muted)}
.statement p+p{margin-top:1rem}

/* ============ Works — per-score engine (R1) ============ */
.works{padding-top:4vh}
.works>.section-label{max-width:62rem;margin-inline:auto;padding-inline:var(--pad)}
.work{
  min-height:140vh;display:grid;place-items:center;padding:8vh 0;
  background:radial-gradient(120% 50% at 50% 0%,rgba(234,229,219,.04),transparent 55%); /* R7 wall light */
}
.work-inner{display:grid;gap:2rem;justify-items:start;width:min(88vw,calc(72vh*var(--ar)))}
.plate-link{display:block;width:100%;text-decoration:none;cursor:zoom-in}
.plate{
  position:relative;overflow:hidden;background:#191317;width:100%;
  box-shadow:0 20px 30px -16px rgba(0,0,0,.7),0 64px 100px -36px rgba(0,0,0,.48); /* R7 contact shadow */
}
.work[data-ar="portrait"] .plate,.finale .plate{
  box-shadow:0 26px 40px -18px rgba(0,0,0,.75),0 90px 140px -44px rgba(0,0,0,.52);
}
.plate img{display:block;width:100%;height:auto}
.ly{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;will-change:transform,opacity}
.placard{border-left:1px solid var(--accent);padding-left:1.1rem}
.placard h3{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;font-size:1.3rem;line-height:1.25}
.placard p{font-size:.76rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:.4rem}

/* --- Score: resurface (Work I) — red buries again as you leave --- */
.ly-lift{background-image:var(--lift01);opacity:calc(var(--c,0)*.85)}

/* --- Score: sheen (Work II) — specular sweep, transform-only --- */
.ly-sheen{
  inset:auto;top:-10%;bottom:-10%;left:-45%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.20) 48%,rgba(160,190,255,.10) 55%,transparent);
  mix-blend-mode:screen;transform:translateX(calc(var(--sx,0)*1%)) skewX(-12deg);
}

/* --- Score: taping (Work III) — strips settle with adhesive skew --- */
.tape{
  position:absolute;background-size:cover;background-position:center;pointer-events:none;will-change:transform;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.tape-a{
  left:10.97%;top:3.93%;width:54.03%;height:22.57%;
  background-image:var(--tapeA);-webkit-mask-image:var(--mStripH);mask-image:var(--mStripH);
  transform:translate(calc((1 - var(--st,0))*-9vw),calc((1 - var(--st,0))*-8vh)) rotate(calc((1 - var(--st,0))*-6deg));
}
.tape-b{
  left:76.46%;top:29.44%;width:20%;height:61.53%;
  background-image:var(--tapeB);-webkit-mask-image:var(--mStripV);mask-image:var(--mStripV);
  transform:translate(calc((1 - var(--st,0))*7vw),calc((1 - var(--st,0))*6vh)) rotate(calc((1 - var(--st,0))*5deg));
}

/* --- Score: stencil (Work IV) — blue stamps on in two passes --- */
.ly-blue{background-image:var(--blue04);mix-blend-mode:multiply;opacity:0;transition:opacity .26s steps(2,end)}
.work.pass-1 .ly-blue{opacity:.55}
.work.pass-2 .ly-blue{opacity:1}

/* --- Score: linewalk (Work V) — colour walks across an organic edge --- */
.ly-under{background-image:var(--under05)} /* clip-path driven by JS */

/* --- Score: assembly (Work VI, pinned scrub) --- */
.finale{min-height:235vh;display:block;padding:0}
.finale .pin{position:sticky;top:0;min-height:100svh;display:grid;place-items:center;padding:6vh 0}
.piece{
  position:absolute;background-size:cover;background-position:center;pointer-events:none;will-change:transform;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.pc-mandarin{
  left:43.98%;top:4.44%;width:31.48%;height:29.04%;
  background-image:var(--pcMandarin);-webkit-mask-image:var(--mTornA);mask-image:var(--mTornA);
  transform:translate(calc((1 - var(--s1,0))*-13vw),calc((1 - var(--s1,0))*-13vh)) rotate(calc((1 - var(--s1,0))*-7deg));
}
.pc-strips{
  left:16.48%;top:33.48%;width:51.48%;height:50%;
  background-image:var(--pcStrips);-webkit-mask-image:var(--mTornB);mask-image:var(--mTornB);
  transform:translate(calc((1 - var(--s2,0))*-11vw),calc((1 - var(--s2,0))*11vh)) rotate(calc((1 - var(--s2,0))*5deg));
}
.pc-letters{
  left:60.93%;top:3.93%;width:39.07%;height:96.07%;
  background-image:var(--pcLetters);-webkit-mask-image:var(--mStripV);mask-image:var(--mStripV);
  transform:translate(calc((1 - var(--s3,0))*13vw),calc((1 - var(--s3,0))*-6vh)) rotate(calc((1 - var(--s3,0))*6deg));
}

/* ============ Study mode (R5) ============ */
.viewer{
  position:fixed;inset:0;z-index:90;background:rgba(11,10,12,.96);
  display:grid;grid-template-rows:1fr auto;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.viewer.open{opacity:1;pointer-events:auto}
.viewer-stage{position:relative;overflow:hidden;touch-action:none;cursor:grab}
.viewer-stage.dragging{cursor:grabbing}
.viewer-drift{position:absolute;inset:0}
.viewer.open .viewer-drift.idle{animation:vdrift 30s ease-in-out infinite alternate}
@keyframes vdrift{from{transform:translate(-.6%, .5%)}to{transform:translate(.6%,-.5%)}}
.viewer-stage img{
  position:absolute;left:50%;top:50%;max-width:none;
  transform:translate(-50%,-50%) translate(var(--px,0px),var(--py,0px)) scale(var(--z,1));
  will-change:transform;user-select:none;-webkit-user-drag:none;
}
.viewer-bar{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;
  padding:1.1rem var(--pad) max(1.2rem,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(15,14,16,.9);
}
.viewer-placard h3{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;font-size:1.2rem}
.viewer-placard p{font-size:.72rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:.3rem}
.viewer-hint{font-size:.68rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.viewer-close{
  position:absolute;top:max(1rem,env(safe-area-inset-top));right:var(--pad);z-index:2;
  background:none;border:1px solid var(--line);color:var(--plaster);cursor:pointer;
  font-family:inherit;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.6rem 1rem;transition:border-color .25s,color .25s;
}
.viewer-close:hover{border-color:var(--accent);color:var(--accent)}

/* ============ Ripple v2 (R4) ============ */
.ripple{position:fixed;left:0;top:0;z-index:65;pointer-events:none;width:340px;height:340px;margin:-170px 0 0 -170px;opacity:0}
.ripple.on{animation:rippleLife 1.6s cubic-bezier(.15,.8,.3,1) forwards}
.ripple path{fill:none;stroke:var(--plaster);vector-effect:non-scaling-stroke}
.ripple path:nth-child(2){stroke:var(--accent);opacity:.75}
.ripple path:nth-child(3){opacity:.5}
@keyframes rippleLife{
  0%{opacity:0;transform:scale(.07) rotate(0deg)}
  10%{opacity:.85}
  100%{opacity:0;transform:scale(1) rotate(7deg)}
}

/* ============ Contact / Footer / Consent ============ */
.contact{padding:20vh var(--pad) 14vh;text-align:center}
.contact .section-label{max-width:62rem;margin:0 auto 2.4rem}
.contact-lead{max-width:34rem;margin:0 auto 2.8rem;color:var(--muted);font-size:1rem;line-height:1.7}

.contact-hand{display:inline-flex;flex-direction:column;align-items:center;gap:1rem}
.contact-mail{
  position:relative;display:inline-block;text-decoration:none;
  font-family:'Dancing Script',cursive;font-weight:600;color:var(--plaster);
  font-size:clamp(2rem,6.5vw,3.9rem);line-height:1.15;padding:0 .12em .18em;
  transition:color .35s;
}
.contact-mail:hover{color:var(--hl)}
.contact-mail .ink{display:inline-block;white-space:nowrap}
/* pen nib that travels along the writing edge */
.contact-mail .nib{
  position:absolute;left:0;top:8%;width:.5em;height:.5em;opacity:0;pointer-events:none;
  transform:translate(-50%,0) rotate(45deg);
  background:linear-gradient(135deg,var(--hl),#ff9d7a);
  clip-path:polygon(50% 0,100% 55%,50% 100%,0 55%);
  filter:drop-shadow(0 0 5px rgba(235,47,48,.6));
}
/* self-drawing underline */
.contact-mail .underline{
  position:absolute;left:0;right:0;bottom:-.04em;width:100%;height:.34em;overflow:visible;
}
.contact-mail .underline path{stroke:var(--hl)}

/* JS-gated initial "unwritten" state (no-JS shows full text + drawn line) */
.js .contact-hand .ink{clip-path:inset(0 100% 0 0)}
.js .contact-hand .underline path{stroke-dasharray:640;stroke-dashoffset:640}
.contact-hand.writing .ink{animation:writeReveal 1.9s cubic-bezier(.62,.02,.34,1) forwards}
.contact-hand.writing .nib{animation:nibMove 1.9s cubic-bezier(.62,.02,.34,1) forwards, nibBob .32s ease-in-out infinite}
.contact-hand.writing .underline path{animation:drawLine .8s ease-out 1.72s forwards}
@keyframes writeReveal{to{clip-path:inset(0 -3% 0 0)}}
@keyframes nibMove{
  0%{left:0;opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes nibBob{0%,100%{margin-top:0}50%{margin-top:-.06em}}
@keyframes drawLine{to{stroke-dashoffset:0}}

.contact-copy{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.5rem .95rem;transition:color .25s,border-color .25s,background .25s;
}
.contact-copy:hover{color:var(--plaster);border-color:var(--hl)}
.contact-copy.done{color:var(--hl);border-color:var(--hl)}

.contact-social{margin-top:3rem;display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap}
.contact-social a{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .25s}
.contact-social a:hover{color:var(--plaster)}

@media (prefers-reduced-motion:reduce){
  .js .contact-hand .ink{clip-path:none!important;animation:none!important}
  .js .contact-hand .underline path{stroke-dashoffset:0!important;animation:none!important}
  .contact-hand .nib{display:none!important}
  .js .entity em{background-size:100% 100%!important;animation:none!important}
}
.site-foot{
  border-top:1px solid var(--line);
  padding:2rem var(--pad) max(2.6rem,env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.site-foot a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.1em;transition:color .25s,border-color .25s}
.site-foot a:hover{color:var(--plaster);border-bottom-color:var(--hl)}
.credit{
  display:flex;justify-content:center;
  padding:1.6rem var(--pad) max(2.4rem,env(safe-area-inset-bottom));
  background:var(--ink);
}
.credit-link{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--muted);transition:color .35s;
}
.credit-text{
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);transition:color .35s;
}
.credit-link:hover .credit-text{color:var(--plaster)}
.credit-word{
  font-family:'Bodoni Moda',serif;font-style:italic;font-weight:500;
  font-size:1.2rem;letter-spacing:.01em;line-height:1;
  color:var(--plaster);transition:color .35s,text-shadow .45s;
}
.credit-link:hover .credit-word{text-shadow:0 0 18px rgba(78,224,240,.55)}
.qorym-mark{width:44px;height:44px;overflow:visible;flex:none;
  filter:drop-shadow(0 0 6px rgba(78,224,240,.3));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.credit-link:hover .qorym-mark{transform:scale(1.08) rotate(6deg)}
@media (prefers-reduced-motion:reduce){
  .qorym-mark *{animation:none!important}
  .credit-link:hover .qorym-mark{transform:none}
}
.consent{
  position:fixed;z-index:60;
  left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));
  width:min(21.5rem,calc(100vw - 2rem));
  background:var(--ink-2);border:1px solid var(--line);
  padding:1.15rem 1.25rem;box-shadow:0 26px 60px rgba(0,0,0,.55);
}
.consent[hidden]{display:none}
.consent h2{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.6rem}
.consent p{font-size:.8rem;line-height:1.55;color:var(--muted)}
.consent p a{color:var(--plaster);text-decoration:none;border-bottom:1px solid var(--line)}
.consent p a:hover{border-bottom-color:var(--hl)}
.consent-actions{display:flex;align-items:baseline;gap:1.4rem;margin-top:.95rem}
.consent button{
  background:none;border:none;cursor:pointer;color:var(--plaster);
  font-family:inherit;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.25rem 0;border-bottom:1px solid var(--accent);
}
.consent button.decline{color:var(--muted);border-bottom-color:var(--line)}
.consent button:hover{color:var(--accent)}

/* ============ Mobile ============ */
@media (max-width:919px){
  .hero{text-align:center}
  .hero-core{justify-self:center}
  .hero-plate{justify-self:center;text-align:left}
  .frag-b{left:auto;right:4%}
}
@media (max-width:760px){
  .work{min-height:118vh}
  .work-inner{width:min(92vw,calc(62vh*var(--ar)))}
  .finale{min-height:200vh}
}
@media (max-width:480px){
  .brand{font-size:.98rem}
  .site-nav a{margin-left:.95rem;font-size:.66rem;letter-spacing:.15em}
  .hero-sub{letter-spacing:.2em;font-size:.72rem}
  .entity{font-size:1.4rem}
  .placard h3{font-size:1.15rem}
  .consent{padding:1rem 1.05rem}
}

/* ============ Reduced motion: full-content parity (N3/R9) ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-name{-webkit-mask-image:none!important;mask-image:none!important;animation:none!important;opacity:1!important}
  .hero-name span,.hero-frag{transform:none!important}
  .hero-sub{opacity:1!important}
  .hero-plate img{opacity:1!important;transform:none!important;transition:none}
  .scroll-cue{animation:none}
  .ly-lift{opacity:.7!important}
  .ly-sheen,.ripple{display:none!important}
  .ly-under{display:none!important}
  .ly-blue{opacity:1!important;transition:none}
  .tape,.piece{transform:none!important}
  .viewer,.viewer-stage img{transition:none}
  .viewer .viewer-drift{animation:none!important}
}