/* ============================================================
   k-sensual.art
   Direction: "Domestic Noir" — a private room at 11pm.
   Tungsten amber light bleeding into ink-violet shadow.
   System: LIGHT = INTIMACY. Amber marks her voice and the way in.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:    #0B0A0E;   /* near-black, violet undertone — the dark room   */
  --umber:  #171015;   /* warm dark — section grounds                    */
  --lamp:   #E8B87F;   /* tungsten amber — her voice, and the door       */
  --flush:  #C4566B;   /* worn lipstick / skin flush — secondary heat    */
  --linen:  #EFE6DC;   /* warm off-white — body copy                     */
  --smoke:  #8A7F86;   /* mauve grey — labels, meta                      */
  --shade:  #120C1A;   /* deep ink-violet — vignettes, the dark she hides in */

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", "Segoe UI", system-ui, sans-serif;

  --gut: clamp(1.5rem, 5vw, 5rem);
  --sec: clamp(5.5rem, 13vh, 9.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--linen);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.7;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

:focus-visible{outline:2px solid var(--lamp); outline-offset:4px; border-radius:2px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.7rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--smoke);
  margin:0 0 1.35rem;
}
.eyebrow--lamp{color:var(--lamp); opacity:.85}

.h1,.h2,.h3,.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  line-height:1.04;
  letter-spacing:-.018em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.hero__title{font-size:clamp(2.6rem,7.2vw,5.4rem)}
.h1{font-size:clamp(2.35rem,5.6vw,4.4rem)}
.h2{font-size:clamp(1.95rem,4.2vw,3.4rem)}
.h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.h2--center{text-align:center}
.h1 em,.h2 em,.hero__title em{
  font-style:italic; font-weight:300; color:var(--lamp);
}

.lede{font-size:clamp(1.08rem,1rem + .4vw,1.3rem); color:#D9CFC6; margin:0 0 1.15rem; max-width:56ch}
.body{margin:0 0 1.15rem; color:#C9BFB8; max-width:58ch}
.body--dim{color:var(--smoke)}
.center{text-align:center}
.center .lede,.center .body,.center .voice{margin-left:auto;margin-right:auto}

/* her voice — lit by the lamp */
.voice{
  font-family:var(--display);
  font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,1.05rem + .95vw,1.85rem);
  line-height:1.4;
  color:var(--lamp);
  max-width:34ch;
  margin:2rem 0;
  position:relative;
  padding-left:1.4rem;
}
.voice::before{
  content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:1px;
  background:linear-gradient(180deg,transparent,var(--lamp),transparent);
  opacity:.7;
}
.voice--big{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem); max-width:24ch}
.center .voice{padding-left:0; text-align:center}
.center .voice::before{display:none}

.fineprint{font-size:.82rem; color:var(--smoke); margin:0 0 1.6rem; max-width:52ch}

/* ---------- buttons ---------- */
.btn{
  --pad:1rem 2rem;
  display:inline-block;
  font-family:var(--body);
  font-size:.86rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  padding:var(--pad);
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
}
.btn--lamp{
  background:var(--lamp); color:#160F08;
  box-shadow:0 0 0 0 rgba(232,184,127,.42), 0 14px 40px -16px rgba(232,184,127,.6);
}
.btn--lamp:hover{
  background:#F3CB99;
  transform:translateY(-2px);
  box-shadow:0 0 34px 0 rgba(232,184,127,.34), 0 20px 44px -18px rgba(232,184,127,.75);
}
.btn--ghost{
  background:transparent; color:var(--linen);
  border-color:rgba(239,230,220,.28);
}
.btn--ghost:hover{border-color:var(--lamp); color:var(--lamp); transform:translateY(-2px)}
.btn--lg{--pad:1.25rem 2.6rem; font-size:.95rem}
.btn--sm{--pad:.8rem 1.5rem; font-size:.76rem}

.link-arrow{
  display:inline-block; margin-top:.5rem;
  font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lamp); text-decoration:none;
  border-bottom:1px solid rgba(232,184,127,.35);
  padding-bottom:.35rem;
  transition:border-color .3s var(--ease), gap .3s;
}
.link-arrow::after{content:"\00a0\00a0→"; transition:transform .3s var(--ease); display:inline-block}
.link-arrow:hover{border-color:var(--lamp)}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- grain (analog intimacy, also masks upscaling) ---------- */
.grain{
  position:absolute; inset:-50%;
  pointer-events:none; z-index:3;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ============================================================
   FIXED HERO — content scrolls over it, she stays behind
   ============================================================ */
.hero{
  position:fixed; inset:0;
  height:100svh;
  z-index:0;
  overflow:hidden;
  display:grid;
  align-content:end;
}
.hero__stage{position:absolute; inset:0}
.hero__slide{
  position:absolute; inset:0;
  /* keep the face/mask in frame — square sources crop hard on wide screens */
  background-size:cover; background-position:center 12%;
  opacity:0;
  transform:scale(1.06);
  filter:saturate(.86) contrast(1.06) brightness(.92);
  transition:opacity 2.2s var(--ease);
  will-change:opacity,transform;
}
.hero__slide.is-on{
  opacity:1;
  animation:drift 11s linear forwards;
}
@keyframes drift{
  from{transform:scale(1.045) translate3d(0,0,0)}
  to  {transform:scale(1.14)  translate3d(-1.2%,-1.6%,0)}
}
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    /* violet shadow swallowing the top-right corner, where her face sits.
       Keeps her unreadable — the mask, in gradient form. */
    radial-gradient(72% 82% at 100% -6%,
      rgba(18,12,26,.98) 0%,
      rgba(18,12,26,.88) 26%,
      rgba(18,12,26,.58) 48%,
      rgba(18,12,26,.22) 66%,
      transparent 82%),
    /* dark bed under the copy block, so the headline holds contrast
       whichever slide is showing */
    radial-gradient(78% 62% at 14% 86%, rgba(11,10,14,.90), transparent 66%),
    /* lamp glow, kept off her face so it doesn't undo the vignette */
    radial-gradient(95% 70% at 62% 46%, rgba(232,184,127,.15), transparent 60%),
    linear-gradient(180deg, rgba(11,10,14,.34) 0%, rgba(11,10,14,.16) 28%, rgba(11,10,14,.80) 74%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11,10,14,.80) 0%, rgba(11,10,14,.14) 58%, rgba(11,10,14,.38) 100%);
}
.hero__inner{
  position:relative; z-index:4;
  /* same measure as .wrap so the hero headline lines up with every
     section heading below it instead of hugging the viewport edge */
  width:min(76rem,100% - var(--gut)*2);
  margin-inline:auto;
  padding:0 0 clamp(5rem,12vh,8.5rem);
  will-change:opacity,transform;
}
/* the first thing a visitor arriving for K-sensual needs answered */
.hero__note{
  color:#9C9098;
  letter-spacing:.2em;
  max-width:46ch;
  line-height:2;
}
.hero__note span{display:block; color:var(--lamp)}

.hero__sub{
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:#D9CFC6; max-width:38ch;
  margin:0 0 2.25rem;
}
.hero__micro{
  margin:1.5rem 0 0;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--smoke);
}
.hero__cue{
  position:absolute; z-index:4; bottom:1.6rem; left:50%; translate:-50% 0;
  width:1px; height:3rem; overflow:hidden;
  background:rgba(239,230,220,.14);
}
.hero__cue span{
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,transparent,var(--lamp));
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   SCROLLING PAGE
   ============================================================ */
.page{
  position:relative; z-index:1;
  margin-top:100svh;
}
.s{
  position:relative;
  padding:var(--sec) 0;
  background:var(--ink);
}
.s--notice{
  background:
    linear-gradient(180deg, rgba(196,86,107,.07), transparent 42%),
    var(--umber);
  border-top:1px solid rgba(232,184,127,.14);
}
.s--hidden{background:var(--ink)}
.s--bots{
  background:var(--ink);
  padding-block:clamp(6.5rem,16vh,11rem);
}
.s--unlock{background:var(--ink)}
.s--custom{background:var(--umber)}
.s--rating{
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(196,86,107,.13), transparent 72%),
    var(--ink);
}
.s--gallery{background:var(--umber)}
.s--watching{
  background:
    radial-gradient(65% 55% at 50% 50%, rgba(196,86,107,.10), transparent 74%),
    var(--ink);
}

.wrap{
  position:relative; z-index:1;
  width:min(76rem,100% - var(--gut)*2);
  margin-inline:auto;
}
.wrap--narrow{width:min(46rem,100% - var(--gut)*2)}
.wrap--mid{width:min(58rem,100% - var(--gut)*2)}

/* ---------- photo grounds ---------- */
.bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.bg__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(11,10,14,.62), rgba(11,10,14,.90) 78%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.bg__scrim--deep{
  background:
    radial-gradient(85% 65% at 50% 42%, rgba(11,10,14,.74), rgba(11,10,14,.93) 76%),
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 84%, var(--ink) 100%);
}
/* A real <img> rather than a background, so the fade can be masked relative to
   the photo's own top edge instead of the (much taller) section. Sits at its
   natural ratio along the bottom, anchored left, so her mouth — bottom-left of
   the frame — is always the part you see. No parallax: a bottom-anchored photo
   that doesn't fill the box would drift off the edge. */
.bg__photo{
  position:absolute; left:0; bottom:0;
  width:100%; height:auto;
  /* dissolve the top and the trailing edge so the photo has no hard border
     anywhere — it fades into --ink rather than sitting on top of it */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 46%),
    linear-gradient(90deg, #000 0, #000 48%, transparent 94%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 46%),
    linear-gradient(90deg, #000 0, #000 48%, transparent 94%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* graded to the site's own tones: desaturated and warm, not blue */
.s--bots .bg__photo{
  filter:grayscale(.5) sepia(.3) saturate(1.15) brightness(.94) contrast(1.06);
}
/* ink + shade wash, with the same lamp glow the other sections carry */
.s--bots .bg__scrim--deep{
  background:
    radial-gradient(66% 48% at 60% 38%, rgba(232,184,127,.07), transparent 64%),
    radial-gradient(90% 64% at 46% 44%, rgba(18,12,26,.58), rgba(11,10,14,.90) 76%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 78%, var(--ink) 100%);
}

/* ---------- reveal (light sweep) ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{opacity:1; transform:none}

/* ---------- media + the signature light band ---------- */
.media{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#100C10;
  border-radius:2px;
}
.media img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:saturate(.88) contrast(1.05) brightness(.9);
  transition:filter .6s var(--ease), transform 1.1s var(--ease);
}
.media::after{               /* the band of light falling across her */
  content:""; position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(232,184,127,.0) 42%,
    rgba(232,184,127,.42) 50%,
    rgba(255,240,220,.16) 56%,
    transparent 68%);
  transform:translateX(-120%);
}
.media.is-in::after{animation:sweep 1.5s var(--ease) .18s both}
@keyframes sweep{from{transform:translateX(-120%)} to{transform:translateX(120%)}}
.media:hover img{filter:saturate(1) contrast(1.06) brightness(1); transform:scale(1.035)}
.media figcaption{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:2.5rem 1rem .9rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,230,220,.82);
  background:linear-gradient(180deg,transparent,rgba(11,10,14,.85));
}

/* ---------- split ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.split__media{max-width:34rem; width:100%}

/* ---------- the three denials, as one sentence ---------- */
.nots{
  max-width:40ch; margin:1.75rem auto 3.5rem;
  font-size:clamp(.98rem,.94rem + .2vw,1.1rem);
  line-height:1.85;
  color:#9C9098;
}

/* ---------- unlock list ---------- */
.unlock__list{
  list-style:none; padding:0;
  margin:2.5rem 0 1rem;
  columns:2; column-gap:clamp(2rem,5vw,4rem);
}
.unlock__list li{
  break-inside:avoid;
  padding:.85rem 0 .85rem 1.6rem;
  position:relative;
  color:#C9BFB8;
  border-bottom:1px solid rgba(239,230,220,.08);
}
.unlock__list li::before{
  content:""; position:absolute; left:0; top:1.55em;
  width:.5rem; height:1px; background:var(--lamp);
}

/* ---------- the wonders: four lines that arrive one at a time ---------- */
.wonders{
  list-style:none; padding:0;
  margin:2.75rem auto;
  max-width:46ch;
}
.wonders li{
  padding:1.15rem 0;
  text-wrap:balance;
  border-top:1px solid rgba(232,184,127,.15);
  font-family:var(--display);
  font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1rem + .55vw,1.45rem);
  line-height:1.35;
  color:var(--lamp);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.wonders li:first-child{border-top:0}
.wonders li:last-child{
  color:#F6D5A8;
  font-size:clamp(1.25rem,1.05rem + .85vw,1.7rem);
}
.reveal.is-in .wonders li{opacity:1; transform:none}
.reveal.is-in .wonders li:nth-child(1){transition-delay:.15s}
.reveal.is-in .wonders li:nth-child(2){transition-delay:.42s}
.reveal.is-in .wonders li:nth-child(3){transition-delay:.69s}
.reveal.is-in .wonders li:nth-child(4){transition-delay:.96s}

/* ---------- rating modes ---------- */
.modes{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin:2rem 0;
}
.modes span{
  font-family:var(--display); font-style:italic; font-size:1.05rem;
  padding:.4rem 1.1rem;
  border:1px solid rgba(196,86,107,.4);
  border-radius:999px;
  color:#E7C3CB;
}

/* ---------- gallery grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.5rem,1.2vw,1rem);
  margin-block:3rem;
}

/* ---------- close: instagram then the paid ask, over one tall figure ------ */
.s--close{
  background:var(--ink);
  min-height:170svh;
  display:grid;
  align-content:center;
  gap:clamp(4.5rem,12vh,8rem);
  padding-block:clamp(6rem,15vh,10rem);
}
/* Tall enough that a 3:4 portrait at cover keeps her whole standing frame.
   Anchored bottom so the legs stay in shot at every viewport. */
.bg__figure{
  position:absolute; inset:0;
  background-size:cover;
  background-position:bottom center;
  background-repeat:no-repeat;
  /* muted, but still legibly her — she reads through the gradient, not under it */
  filter:grayscale(.2) saturate(.85) brightness(1.15) contrast(1.0);
}
/* the same violet wash the other sections use, laid over her so the whole
   thing reads as one graded field rather than text-on-a-photo */
.bg__scrim--final{
  background:
    radial-gradient(70% 44% at 50% 40%, rgba(196,86,127,.10), transparent 68%),
    radial-gradient(96% 64% at 50% 56%, rgba(18,12,26,.52), rgba(11,10,14,.84) 80%),
    linear-gradient(180deg, var(--ink) 0%, rgba(19,13,28,.58) 22%, rgba(19,13,28,.58) 78%, var(--ink) 100%);
}
.close__rule{
  position:relative; z-index:1;
  width:min(20rem,50%);
  height:1px;
  margin-inline:auto;
  background:linear-gradient(90deg,transparent,rgba(239,230,220,.22),transparent);
}

/* instagram: an icon, deliberately no button — it must not read as loud as
   the amber CTA below it */
.ig{
  display:inline-grid; justify-items:center; gap:.85rem;
  margin-top:2.5rem;
  text-decoration:none;
  color:var(--smoke);
  transition:color .3s var(--ease);
}
.ig__glyph{
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
  border:1px solid rgba(239,230,220,.24);
  border-radius:50%;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.ig__glyph svg{width:1.5rem; height:1.5rem}
.ig__label{
  font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
}
.ig:hover{color:var(--lamp)}
.ig:hover .ig__glyph{
  border-color:var(--lamp);
  background:rgba(232,184,127,.08);
  transform:translateY(-2px);
}
.s--final .lede{color:#E4DAD1}

/* ---------- footer ---------- */
.foot{
  background:#07060A;
  padding:3rem 0 8rem;   /* clears the sticky dock */
  border-top:1px solid rgba(239,230,220,.07);
}
.foot__inner{text-align:center}
.foot__legal{
  font-size:.75rem; line-height:1.7; color:#5F5860;
  max-width:60ch; margin:0 auto 1rem;
}
.foot__meta{font-size:.75rem; color:#5F5860; margin:0}
.foot__meta a{color:#7A727C; text-decoration:none}
.foot__meta a:hover{color:var(--lamp)}

/* ============================================================
   STICKY DOCK
   ============================================================ */
.dock{
  position:fixed; z-index:40;
  left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:.9rem var(--gut);
  background:rgba(9,8,12,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border-top:1px solid rgba(232,184,127,.2);
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.dock.is-up{transform:none}
.dock__line{
  margin:0; font-size:.9rem; color:#BDB2B8;
}
.dock__line em{font-family:var(--display); font-style:italic; color:var(--lamp); font-size:1.05rem}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.media--open{cursor:zoom-in}

.lb{
  position:fixed; inset:0; z-index:90;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(1rem,4vw,3rem);
  background:rgba(6,5,9,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  animation:lbIn .32s var(--ease) both;
}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0} to{opacity:1}}

.lb__frame{
  margin:0; justify-self:center;
  display:grid; justify-items:center; gap:1rem;
  max-width:100%;
}
.lb__img{
  height:min(66svh,720px);
  max-width:92vw;
  width:auto;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation:lbImg .45s var(--ease) both;
}
@keyframes lbImg{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
.lb__cap{
  margin:0;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--smoke);
}
.lb__cta{position:absolute; left:50%; bottom:clamp(1rem,4vh,2.5rem); translate:-50% 0}

.lb__close,.lb__nav{
  background:transparent; border:1px solid rgba(239,230,220,.16);
  color:var(--linen);
  border-radius:50%;
  cursor:pointer; line-height:1;
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.lb__close:hover,.lb__nav:hover{border-color:var(--lamp); color:var(--lamp); background:rgba(232,184,127,.08)}
.lb__nav{width:3rem; height:3rem; font-size:1.7rem; padding:0 0 .22em}
.lb__close{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:2.6rem; height:2.6rem; font-size:1.5rem; padding:0 0 .1em;
  z-index:2;
}

@media (max-width:640px){
  .lb{grid-template-columns:1fr; grid-template-areas:"frame"}
  .lb__frame{grid-area:frame}
  .lb__nav{position:absolute; bottom:clamp(4.5rem,12vh,7rem); z-index:2}
  .lb__nav--prev{left:1rem}
  .lb__nav--next{right:1rem}
}

/* scroll lock — the lightbox is the only thing that takes over the viewport now */
body.is-locked{overflow:hidden}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:2}
  .split__media{max-width:none}
  .denials{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .unlock__list{columns:1}
  .hero{align-content:end}
  .hero__inner{padding-bottom:clamp(3rem,10vh,5rem)}
  .hero__title{font-size:clamp(2.4rem,10vw,3.4rem)}
  .voice{padding-left:1rem}
  .dock{flex-direction:column; gap:.7rem; padding:.85rem var(--gut) 1.1rem}
  .dock__line{font-size:.8rem; text-align:center}
  .hero__cue{display:none}

  /* ---- phone rendering cost ----------------------------------------
     Mobile sessions were running ~32s against ~149s on desktop. These are
     the three layers a phone GPU struggles with most on this page. Each is
     a texture the size of the screen or larger, recomposited every frame. */

  /* The grain sits at inset:-50%, so it is four viewports of animated noise
     under mix-blend-mode. Hold it still and shrink it to one viewport —
     the texture still reads, the per-frame blend does not. */
  .grain{position:fixed; inset:0; animation:none; opacity:.12; mix-blend-mode:soft-light}

  /* Only one slide is on screen at a time and the crossfade is a plain
     opacity change, so promoting every slide to its own GPU layer just
     costs memory on a device that has less of it. */
  .hero__slide{will-change:auto}

  /* backdrop-filter forces the compositor to re-sample everything behind the
     dock on every scroll frame. The dock is already near-opaque; drop the
     blur and lean on the solid colour instead. */
  .dock{background:rgba(9,8,12,.96); -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none}
  .wonders li{opacity:1; transform:none}
  .hero__slide.is-on{animation:none; transform:scale(1.02)}
  .grain{animation:none}
}