/* ============================================================
   UN:SEEN:ED
   Tokens sampled from ink on raw cotton.
   ============================================================ */
/* Every value below is sampled from the approved hero frame, so the page and the
   footage read as one place. Contrast against --canvas measured, not guessed. */
:root{
  --canvas:#090C11;        /* the footage's deepest shadow, never pure black */
  --canvas-deep:#06080B;
  --panel:#131820;         /* straight out of the frame */
  --line:#222C36;
  --line-strong:#3A4854;   /* decorative hairlines only */
  --border-input:#5C6B78;  /* interactive borders: 3.45:1. Hairlines fail here */
  --accent:#93BFD1;        /* light through wet ink. 9.91:1 on canvas */
  --accent-hover:#ABD0DE;
  --accent-muted:rgba(147,191,209,.22);
  --text-primary:#DEE5EB;  /* the cloth's own white */
  --text-secondary:#929DA8; /* 7.10:1 on canvas */

  --display:'Syne',ui-sans-serif,system-ui,sans-serif;
  --body:'Newsreader',ui-serif,Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,7,12,.95),0 3px 12px rgba(5,7,12,.78),0 10px 44px rgba(5,7,12,.8);

  /* Two ink blobs drawn by hand as overlapping lobes with a soft blurred edge.
     They are the masks the drop designs bleed through, and no two are alike. */
  --blob-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='5.5'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%23fff'%3E%3Ccircle cx='50' cy='49' r='24'/%3E%3Ccircle cx='35' cy='40' r='16'/%3E%3Ccircle cx='65' cy='43' r='15'/%3E%3Ccircle cx='42' cy='64' r='17'/%3E%3Ccircle cx='63' cy='63' r='13'/%3E%3Ccircle cx='28' cy='55' r='11'/%3E%3Ccircle cx='73' cy='54' r='10'/%3E%3Ccircle cx='52' cy='27' r='9'/%3E%3C/g%3E%3C/svg%3E");
  --blob-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%23fff'%3E%3Ccircle cx='50' cy='51' r='22'/%3E%3Ccircle cx='63' cy='37' r='17'/%3E%3Ccircle cx='34' cy='47' r='18'/%3E%3Ccircle cx='58' cy='68' r='15'/%3E%3Ccircle cx='38' cy='70' r='12'/%3E%3Ccircle cx='76' cy='52' r='11'/%3E%3Ccircle cx='24' cy='62' r='10'/%3E%3Ccircle cx='47' cy='24' r='10'/%3E%3C/g%3E%3C/svg%3E");

  --gut:clamp(20px,5vw,80px);
  --sec:clamp(88px,13vh,180px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;      /* fallback first */
  overflow-x:clip;
  margin:0;padding:0;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.06vw,19px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity 1.1s var(--ease-soft);
}
body.lit{opacity:1}

img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--accent-muted);color:var(--text-primary)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:-100px;left:var(--gut);z-index:200;
  background:var(--accent);color:var(--canvas);
  padding:14px 22px;border-radius:2px;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{top:16px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   The fixed environment layer. One place, not stacked sections.
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 55% 45% at 22% 18%,rgba(147,191,209,.075),transparent 62%),
    radial-gradient(ellipse 62% 52% at 82% 74%,rgba(96,132,160,.06),transparent 66%),
    radial-gradient(ellipse 90% 70% at 50% 50%,rgba(15,20,27,.5),transparent 78%);
  animation:drift 96s var(--ease-soft) -34s infinite;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(222,229,235,.016) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(222,229,235,.014) 0 1px,transparent 1px 3px);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.2%,1.6%,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.mote{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(222,229,235,.5),transparent 68%);
  animation:mote 52s linear infinite;
}
@keyframes mote{
  0%{transform:translate3d(0,14vh,0);opacity:0}
  12%{opacity:.5}
  88%{opacity:.35}
  100%{transform:translate3d(2.5vw,-104vh,0);opacity:0}
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);
  transition:background .6s var(--ease-soft),backdrop-filter .6s var(--ease-soft),border-color .6s var(--ease-soft);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(11,10,15,.74);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.mark{
  display:inline-flex;align-items:center;gap:.06em;
  font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.15vw,18px);letter-spacing:.12em;
  color:var(--text-primary);text-decoration:none;
}
.mark .dots{display:inline-flex;flex-direction:column;gap:3px;margin:0 .34em;padding-bottom:.1em}
.mark .dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--accent);display:block}
.nav-links{display:flex;gap:clamp(18px,2.2vw,36px);align-items:baseline}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;position:relative;padding-bottom:3px;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.nav-links{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 24px;border-radius:2px;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:#090C11;border:1px solid var(--accent);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn.ghost{
  background:transparent;color:var(--text-primary);border-color:var(--border-input);
}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.nav .btn{padding:11px 20px;font-size:11px}
.btn .short{display:none}
@media (max-width:700px){
  .nav{padding:14px var(--gut)}
  .mark{font-size:14px;letter-spacing:.07em}
  .mark .dots{margin:0 .26em}
  .mark .dots i{width:3px;height:3px}
  .nav .btn{padding:10px 15px;font-size:10px;letter-spacing:.12em}
  .nav .btn .short{display:inline}
  .nav .btn .long{display:none}
}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   Hero: pinned scroll region + sticky stage
   ============================================================ */
.hero{position:relative;height:700vh;z-index:1;padding:0}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--canvas-deep);
}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:50% 55%;
  transition:opacity 1s var(--ease-soft);
}
/* The push-in. The generated shot rests on a small mark, so the page supplies the
   last of the camera move: a steady dolly toward the mark as the visitor descends,
   so the bleed lands large at the settle. Transform only, on its own layer. */
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  opacity:0;transition:opacity .9s var(--ease-soft);
  will-change:transform;
  transform:translateZ(0) scale(var(--push,1));
  transform-origin:36% 72%;
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,10,15,0) 35%,rgba(7,10,15,.62) 100%);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,7,11,.72) 0%,rgba(5,7,11,0) 22%,rgba(5,7,11,0) 74%,rgba(5,7,11,.78) 100%);
}

/* the loading ring */
.ring{
  position:absolute;right:var(--gut);bottom:calc(var(--gut) + 4px);
  width:38px;height:38px;color:var(--accent);
  transform:rotate(-90deg);opacity:.85;
  transition:opacity .6s var(--ease-soft);
}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.chev{
  position:absolute;right:var(--gut);bottom:calc(var(--gut) + 4px);
  width:38px;height:38px;color:var(--text-secondary);opacity:.8;
  animation:chev 3.4s var(--ease-soft) -.8s infinite;
}
@keyframes chev{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(3px);opacity:.9}}

/* caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;
  padding:0 var(--gut);
  text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
/* right-column scrims: the action lane down the left of centre stays bright */
.band[data-side="right"]::before{
  background:radial-gradient(ellipse 62% 74% at 74% 50%,rgba(5,7,12,var(--a,.66)) 0%,rgba(5,7,12,calc(var(--a,.66)*.66)) 46%,rgba(5,7,12,0) 76%);
}
.band[data-side="centre"]::before{
  background:radial-gradient(ellipse 74% 58% at 50% 42%,rgba(5,7,12,var(--a,.66)) 0%,rgba(5,7,12,calc(var(--a,.66)*.66)) 46%,rgba(5,7,12,0) 76%);
}
.band .inner{position:relative;width:100%}
/* Containers are sized in px, never ch: a ch resolves against the inherited body
   font, not the display face inside, so a ch cap here measures the wrong font. */
.band[data-side="right"] .inner{display:flex;justify-content:flex-end}
.band[data-side="right"] .col{width:min(520px,46%);min-width:min(100%,380px)}
.band[data-side="centre"] .inner{display:flex;justify-content:center;text-align:center}
.band[data-side="centre"] .col{width:min(920px,94%)}
@media (max-width:1180px){
  .band[data-side="right"] .col{width:min(460px,56%)}
}

.line{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.35vw,68px);line-height:1.02;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
}
.line .w{display:inline-block;white-space:pre}
.line .c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down: words fall into place */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (g) approach-from-depth with a static-blur soft copy */
.e-depth .stack{position:relative;display:inline-block;transform:scale(calc(.82 + .18*var(--k,0)));transform-origin:100% 50%}
.band[data-side="centre"] .e-depth .stack{transform-origin:50% 50%}
.e-depth .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.e-depth .sharp{position:relative;opacity:var(--k,0)}
/* (a) scatter: characters assemble the way ink spreads into the weave */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (e) word-by-word rise into a staged settle */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}

.sub{
  font-family:var(--body);font-weight:300;
  font-size:clamp(15px,1.28vw,20px);line-height:1.58;
  color:var(--text-primary);
  max-width:44ch;margin:22px 0 0;
}
.row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.band .sub{
  opacity:var(--ks,0);
  transform:translateY(calc((1 - var(--ks,0)) * 16px));
}
.band[data-side="centre"] .sub{margin-left:auto;margin-right:auto}
.band .row{
  opacity:var(--kb,0);
  transform:translateY(calc((1 - var(--kb,0)) * 16px));
  pointer-events:auto;
}
.band[data-side="centre"] .row{justify-content:center}
.band .btn{text-shadow:none}

.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 20px;
}
.band .kicker{opacity:calc(.3 + .7*var(--k,0))}

.wordmark{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,5.5vw,82px);line-height:.98;letter-spacing:.02em;
  margin:0;white-space:nowrap;
}

/* the settle chip: small mono over footage gets a chip, never the big radial */
.chip{
  display:inline-block;
  background:rgba(8,8,15,.55);border:1px solid rgba(92,107,120,.36);
  border-radius:10px;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,7,12,.85);
  padding:7px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
}

.cue{
  position:absolute;left:var(--gut);bottom:calc(var(--gut) + 6px);
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-secondary);display:flex;align-items:center;gap:12px;
  text-shadow:0 1px 3px rgba(5,7,12,.9);
  opacity:var(--cue,1);transition:opacity .6s var(--ease-soft);
}
.cue span{display:block;width:52px;height:1px;background:linear-gradient(90deg,var(--text-secondary),transparent);
  animation:cuepull 3.6s var(--ease-soft) -1.1s infinite}
@keyframes cuepull{0%,100%{transform:scaleX(.4);opacity:.4}50%{transform:scaleX(1);opacity:.9}}
@media (max-height:560px){.cue{display:none}}

/* ============================================================
   The static hero (five gates). A designed layout, not an apology.
   ============================================================ */
.static-hero{
  position:absolute;inset:0;display:none;
  flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) calc(var(--gut) + 14px);
  background-size:cover;background-position:38% 52%;background-color:var(--canvas-deep);
}
.static-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,7,11,.62) 0%,rgba(5,7,11,.2) 34%,rgba(5,7,11,.86) 78%,rgba(5,7,11,.96) 100%);
}
.static-hero .col{position:relative;width:min(440px,100%);text-shadow:var(--tshadow)}
.static-hero .line{font-size:clamp(34px,8.6vw,54px)}
.static-hero .sub{opacity:1;transform:none;font-size:clamp(15px,4vw,18px);max-width:34ch}
.static-hero .row{opacity:1;transform:none}
.static-hero .btn{text-shadow:none}

/* These five must stay character-for-character identical to GATES in the script. */
@media (prefers-reduced-motion: reduce){
  .hero{height:100svh}
  .stage .poster,.stage video,.stage .ring,.stage .chev,.stage .bands,.cue,.vignette,.scrim{display:none}
  .static-hero{display:flex}
}

/* ============================================================
   Shared section furniture
   ============================================================ */
main{position:relative;z-index:2;background:var(--canvas)}
section{position:relative;padding:var(--sec) var(--gut)}
.wrap{max-width:1240px;margin:0 auto}

.sec-head{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.1vw,46px);line-height:1.08;letter-spacing:-.018em;margin:0;
}
.lede{
  font-weight:300;color:var(--text-secondary);
  font-size:clamp(16px,1.18vw,19px);line-height:1.66;max-width:54ch;margin:20px 0 0;
}

/* the signature: hand drawn bleed edges, no two alike, drawn on scroll */
.divider{padding:0 var(--gut)}
.bleedline{display:block;width:100%;height:44px;overflow:visible;color:var(--accent);opacity:.5}
.bleedline path{
  fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;
  stroke-dasharray:var(--len,1400);stroke-dashoffset:calc(var(--len,1400) * (1 - var(--d,0)));
}
.bleedline circle{fill:currentColor;opacity:calc(var(--d,0) * .74)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* entrance choreography */
.up{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease) ,transform .95s var(--ease)}
.in.up,.in .up{opacity:1;transform:none}
.in .up:nth-child(1){transition-delay:0ms}
.in .up:nth-child(2){transition-delay:90ms}
.in .up:nth-child(3){transition-delay:180ms}
.in .up:nth-child(4){transition-delay:270ms}
.in .up:nth-child(5){transition-delay:360ms}
/* retire the stagger so later hovers never lag; matches the nth-child specificity */
.in.done .up:nth-child(1),.in.done .up:nth-child(2),.in.done .up:nth-child(3),
.in.done .up:nth-child(4),.in.done .up:nth-child(5){transition-delay:0s}

/* ============================================================
   02 ONE , full bleed statement. Nothing else on the screen.
   ============================================================ */
#one{background:var(--canvas-deep);text-align:center;padding-top:calc(var(--sec) * 1.15);
  overflow-x:hidden;overflow-x:clip}   /* the turn's glow is 150% wide; keep it off the page edge */
#one .wrap{max-width:1080px}
#one .statement{
  font-family:var(--display);font-weight:600;
  font-size:clamp(27px,4vw,58px);line-height:1.1;letter-spacing:-.02em;
  color:var(--text-secondary);
  margin:0 auto;max-width:22ch;text-wrap:balance;
}
#one .turn{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,7.1vw,104px);line-height:.94;letter-spacing:-.03em;
  margin:.32em auto .1em;color:var(--text-primary);
  position:relative;display:inline-block;text-wrap:nowrap;
}
#one .turn::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:150%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(147,191,209,.2),transparent 62%);
  opacity:.55;animation:pulse 7.4s var(--ease-soft) -2.2s infinite;
}
@keyframes pulse{0%,100%{opacity:.28}50%{opacity:.72}}
#one .body{
  font-weight:300;color:var(--text-secondary);
  font-size:clamp(16px,1.2vw,19px);line-height:1.72;
  max-width:56ch;margin:32px auto 0;
}

/* ============================================================
   03 INSIDE , three cards. Equal treatment, three images.
   ============================================================ */
#inside .head-row{max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(44px,6vh,76px)}
@media (max-width:940px){.cards{grid-template-columns:1fr;max-width:520px}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .6s var(--ease),transform .6s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 38% 42%,rgba(147,191,209,.16),transparent 66%),
    linear-gradient(155deg,#191722 0%,#0D0C12 62%,#08070B 100%);
}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease),opacity .8s var(--ease-soft)}
.card:hover .shot img{transform:scale(1.045)}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,10,15,.72),transparent 52%);
}
.card .txt{padding:clamp(22px,2.2vw,32px);flex:1}
.card h3{
  font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,25px);
  letter-spacing:-.01em;margin:0 0 12px;
}
.card p{margin:0;color:var(--text-secondary);font-weight:300;font-size:16px;line-height:1.68;max-width:34ch}
.card .num{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--accent);
  display:block;margin-bottom:14px;
}
/* the real code, real HTML type over the generated panel */
.panelcode{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.4deg);
  font-family:var(--mono);font-size:clamp(10px,1.05vw,13px);font-weight:500;
  letter-spacing:.2em;color:#161D26;
  background:rgba(207,217,224,.93);padding:9px 14px;border-radius:2px;
  box-shadow:0 2px 14px rgba(0,0,0,.5);
  white-space:nowrap;
}
.card .living{
  height:1px;background:linear-gradient(90deg,transparent,var(--accent-muted),transparent);
  animation:wick 9s var(--ease-soft) -3s infinite;transform-origin:left;
}
@keyframes wick{0%,100%{transform:scaleX(.2);opacity:.3}50%{transform:scaleX(1);opacity:.9}}

/* ============================================================
   04 THE BLEED , the one interactive moment
   ============================================================ */
#bleed{background:var(--canvas-deep);text-align:center;overflow:hidden}
#bleed .wrap{max-width:760px}
.holdstage{
  position:relative;margin:clamp(34px,5vh,58px) auto 0;
  width:min(360px,74vw);aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;
  /* real cloth from the hero's own first frame, so the mark you make is made
     on the same material the film is made on */
  background-image:
    radial-gradient(circle at 50% 50%,rgba(9,12,17,.1),rgba(9,12,17,.42) 78%),
    url('/assets/cloth.jpg');
  background-size:cover,cover;
  background-position:50% 50%,50% 50%;
  border:1px solid var(--border-input);
  cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:border-color .7s var(--ease);
}
.holdstage:hover{border-color:var(--accent-muted)}
.holdstage.done{border-color:var(--accent)}
.holdsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.blob{transform-origin:50% 50%;transform:scale(calc(.16 + .84*var(--hold,0)));opacity:calc(.55 + .45*var(--hold,0))}
.tendril{
  fill:none;stroke:#151320;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:var(--tlen,200);
  stroke-dashoffset:calc(var(--tlen,200) * (1 - var(--hold,0)));
  opacity:calc(var(--hold,0)*.9);
}
.holdlabel{
  position:relative;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;pointer-events:none;
  color:#141A22;                                   /* dark ink: the cloth behind it is pale */
  text-shadow:0 1px 0 rgba(226,232,238,.55);
  opacity:calc(1 - var(--hold,0)*1.5);
  transition:opacity .4s var(--ease-soft);
}
.holdserial{
  position:relative;z-index:2;font-family:var(--mono);font-weight:500;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.22em;color:var(--accent);
  text-shadow:0 1px 3px rgba(5,7,12,.9),0 0 18px rgba(5,7,12,.8);
  opacity:var(--doneK,0);transform:translateY(calc((1 - var(--doneK,0)) * 8px));
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  pointer-events:none;
}
.holdstage.done .holdlabel{opacity:0}
.bleed-close{
  margin:clamp(30px,4vh,48px) auto 0;max-width:42ch;
  font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,27px);
  line-height:1.28;letter-spacing:-.012em;
  opacity:var(--doneK,0);transform:translateY(calc((1 - var(--doneK,0)) * 14px));
  transition:opacity .9s var(--ease) .18s,transform .9s var(--ease) .18s;
}
.holdhint{
  margin:24px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);
}
.bleed-close{margin-top:clamp(26px,3.4vh,40px)}

/* ============================================================
   05 DROPS , a left indexed vertical register
   ============================================================ */
#drops{padding-bottom:0}
#drops .wrap{max-width:1140px}

.dropscroll{position:relative;height:460vh}
.dropstage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;
  padding:0 var(--gut);overflow:hidden;
}

/* the garment, crossing the page */
.shirtrail{position:absolute;inset:0;pointer-events:none}
.tee{
  position:absolute;margin:0;
  right:var(--tbase,120px);top:50%;
  width:min(400px,30vw);aspect-ratio:1;
  transform:translate3d(var(--tx,0px),calc(-50% + var(--ty,0px)),0) rotate(var(--tr,0deg));
}
.tee .bleedwrap{position:absolute;inset:0;display:block}
/* the shot's own dark ground is feathered away so the garment sits in the page
   instead of on it, as a photograph pasted into a rectangle */
.tee img{
  width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 50% 53% at 50% 49%,#000 68%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 50% 53% at 50% 49%,#000 68%,rgba(0,0,0,0) 100%);
}
/* Two different hand-shaped ink blobs, so the two changes are never the same
   shape. The mask grows from nothing to full cover as the drop turns over. */
.tee[data-i="1"] .bleedwrap,
.tee[data-i="2"] .bleedwrap{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:52% 44%;mask-position:52% 44%;
  /* --mv is rv eased so the bleed starts small and slow, then completes wide
     enough to cover the corners. At 260% the outgoing design showed as a halo. */
  -webkit-mask-size:calc(var(--mv,0) * 460%) calc(var(--mv,0) * 460%);
  mask-size:calc(var(--mv,0) * 460%) calc(var(--mv,0) * 460%);
  opacity:clamp(0,var(--rv,0) * 9,1);
}
.tee[data-i="1"] .bleedwrap{
  -webkit-mask-image:var(--blob-a);mask-image:var(--blob-a);
}
.tee[data-i="2"] .bleedwrap{
  -webkit-mask-image:var(--blob-b);mask-image:var(--blob-b);
}
.tee::after{
  content:"";position:absolute;left:50%;bottom:-5%;transform:translateX(-50%);
  width:74%;height:9%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(5,7,12,.6),transparent 70%);
}

/* the drop text, one band at a time */
.dropbands{position:relative;width:min(440px,40%);z-index:2}
.dband{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  opacity:0;width:100%;
}
.dband .no{
  font-family:var(--mono);font-size:clamp(22px,2.6vw,38px);font-weight:400;
  color:var(--accent);letter-spacing:.04em;margin:0 0 10px;
  opacity:calc(.25 + .75*var(--k,0));
}
.dband .theme{
  font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,50px);
  letter-spacing:.01em;margin:0 0 18px;line-height:1.02;
  transform:translateY(calc((1 - var(--k,0)) * 20px));
}
.dband .story{
  margin:0;color:var(--text-secondary);font-weight:300;font-size:16px;line-height:1.7;max-width:46ch;
  opacity:calc(var(--k,0));transform:translateY(calc((1 - var(--k,0)) * 14px));
}
.dband .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);line-height:2.1;margin:22px 0 0;
  opacity:calc(var(--k,0));
}
.dband .meta b{display:block;color:var(--text-primary);font-weight:500}

@media (max-width:1180px){
  .tee{width:min(310px,28vw)}
  .dropbands{width:min(340px,36%)}
  .dband .story{font-size:15px}
}

/* Phones, portrait tablets, sideways phones and reduced motion get the same
   markup unfolded into a plain stacked list. display:contents lifts the two
   wrappers out so order can interleave design, drop, design, drop. */
@media (prefers-reduced-motion: reduce){
  #drops{padding-bottom:var(--sec)}
  .dropscroll{height:auto}
  .dropstage{
    position:static;height:auto;display:flex;flex-direction:column;
    padding:clamp(34px,6vh,60px) 0 0;overflow:visible;
  }
  .shirtrail,.dropbands{display:contents}
  .tee{
    position:relative;right:auto;top:auto;width:100%;max-width:420px;
    transform:none;margin:0 auto clamp(18px,3vh,28px);
  }
  .tee .bleedwrap{position:relative;inset:auto;
    -webkit-mask-image:none !important;mask-image:none !important;opacity:1 !important}
  .tee img{position:relative;
    -webkit-mask-image:radial-gradient(ellipse 52% 55% at 50% 49%,#000 70%,rgba(0,0,0,0) 100%);
    mask-image:radial-gradient(ellipse 52% 55% at 50% 49%,#000 70%,rgba(0,0,0,0) 100%)}
  .tee::after{display:none}
  .dband{
    position:relative;top:auto;transform:none;opacity:1;width:100%;
    padding-bottom:clamp(40px,7vh,72px);
    border-bottom:1px solid var(--line);margin-bottom:clamp(34px,6vh,56px);
  }
  .dband:last-of-type{border-bottom:0;margin-bottom:0}
  .dband .no,.dband .story,.dband .meta{opacity:1}
  .dband .theme,.dband .story{transform:none}
  .tee[data-i="0"]{order:1}   .dband:nth-of-type(1){order:2}
  .tee[data-i="1"]{order:3}   .dband:nth-of-type(2){order:4}
  .tee[data-i="2"]{order:5}   .dband:nth-of-type(3){order:6}
}
.dots-mark{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle;margin-right:.5em}
.dots-mark i{width:3px;height:3px;border-radius:50%;background:var(--accent);display:block}

/* ============================================================
   06 THE RECORD , offset two columns with the owner page mock
   ============================================================ */
#record .grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,84px);align-items:center;
}
@media (max-width:900px){#record .grid{grid-template-columns:1fr}}
.record-note{
  margin:28px 0 0;padding-left:20px;border-left:1px solid var(--accent-muted);
  color:var(--text-secondary);font-weight:300;font-size:16px;line-height:1.66;max-width:44ch;
}
.owner{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,3vw,44px);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.owner::before{
  content:"";position:absolute;inset:-1px;border-radius:3px;pointer-events:none;
  background:linear-gradient(150deg,rgba(147,191,209,.2),transparent 46%);
  opacity:.6;animation:pulse 8.6s var(--ease-soft) -3.4s infinite;
}
.owner .om{
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.16em;
  display:flex;align-items:center;margin-bottom:26px;
}
.owner dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:15px 22px;align-items:baseline}
.owner dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin:0}
.owner dd{margin:0;font-family:var(--mono);font-size:clamp(12px,1.15vw,14px);letter-spacing:.06em;color:var(--text-primary);text-align:right}
.owner dd.hl{color:var(--accent)}
.owner .strip{margin-top:28px;padding-top:20px;border-top:1px dashed var(--line-strong);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}

/* ============================================================
   07 QUESTIONS , narrow accordion column
   ============================================================ */
#questions{background:var(--canvas-deep)}
#questions .wrap{max-width:820px}
.q{border-bottom:1px solid var(--line)}
.q:first-of-type{border-top:1px solid var(--line)}
.q button{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.4vh,28px) 0;
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,21px);
  line-height:1.36;letter-spacing:-.008em;color:var(--text-primary);
  transition:color .45s var(--ease);
}
.q button:hover{color:var(--accent)}
.q .ic{flex:0 0 auto;width:13px;height:13px;position:relative;margin-top:.45em}
.q .ic::before,.q .ic::after{
  content:"";position:absolute;left:0;top:6px;width:13px;height:1px;background:currentColor;
  transition:transform .55s var(--ease);
}
.q .ic::after{transform:rotate(90deg)}
.q[data-open="true"] .ic::after{transform:rotate(0deg)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.q[data-open="true"] .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{
  margin:0 0 clamp(22px,2.6vh,30px);color:var(--text-secondary);
  font-weight:300;font-size:16px;line-height:1.72;max-width:58ch;
}

/* ============================================================
   08 CLAIM , the single call to action
   ============================================================ */
#claim{
  background-size:cover;background-position:50% 50%;background-color:var(--canvas-deep);
  position:relative;
}
#claim::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,7,11,.9),rgba(5,7,11,.82) 44%,rgba(5,7,11,.95));
}
#claim .wrap{position:relative;max-width:660px;text-align:center}
#claim .lede{margin-left:auto;margin-right:auto;max-width:46ch}
form{margin-top:clamp(36px,5vh,56px);text-align:left}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;background:rgba(19,24,32,.82);border:1px solid var(--border-input);
  border-radius:2px;padding:14px 16px;color:var(--text-primary);
  font-family:var(--body);font-weight:300;font-size:16px;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.field textarea{min-height:96px;resize:vertical}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:#131820;color:#DEE5EB}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(19,24,32,1);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#8B96A1}
form .btn{width:100%;padding:17px 24px;font-size:12px;margin-top:8px}
.formnote{
  margin:18px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--text-secondary);line-height:1.9;text-align:center;
}
.success{
  display:none;padding:clamp(30px,4vh,46px) 0;text-align:center;
}
.success.on{display:block}
form.sent{display:none}
.success .mk{
  width:46px;height:46px;margin:0 auto 22px;border-radius:50%;
  border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);
}
.success p{margin:0 auto;max-width:40ch;font-weight:300;color:var(--text-primary);font-size:17px;line-height:1.66}
.success.sorry{padding:22px 0 0}
.success.sorry p{font-size:15px;color:var(--text-secondary);max-width:44ch}
.success.sorry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
form .btn[disabled]{opacity:.6;cursor:default;transform:none}

/* ============================================================
   Footer
   ============================================================ */
footer{
  position:relative;z-index:2;background:var(--canvas);
  border-top:1px solid var(--line);
  padding:clamp(44px,6vh,72px) var(--gut);
}
footer .wrap{max-width:1240px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
footer .mark{font-size:clamp(17px,1.6vw,22px)}
footer .made{font-family:var(--body);font-weight:300;color:var(--text-secondary);font-size:15px;margin:14px 0 0}
footer .right{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);text-align:right;line-height:2.4}
footer a{color:var(--text-secondary);text-decoration:none;transition:color .4s var(--ease)}
footer a:hover{color:var(--accent)}
@media (max-width:640px){footer .wrap{flex-direction:column;align-items:flex-start}footer .right{text-align:left}}

/* ============================================================
   Pause everything off-screen and on hidden tabs
   ============================================================ */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   Reduced motion, honoured completely
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  body{opacity:1}
  .up{opacity:1;transform:none}
  .bleedline path{stroke-dashoffset:0}
  .bleedline circle{opacity:.74}
  /* re-apply positional transforms rather than blanket-killing them */
  .mark .dots i,.dots-mark i{transform:none}
  .panelcode{transform:translate(-50%,-50%) rotate(-1.4deg)}
  .blob{transform:scale(1);opacity:1}
  .tendril{stroke-dashoffset:0;opacity:.9}
  .holdlabel{display:none}
  .holdserial,.bleed-close{opacity:1;transform:none}
  .success .mk{transform:none}
}

/* ============================================================
   SUB PAGES: the drop pages and the piece pages.
   Each drop page overrides --accent with a colour taken from its own
   tradition, so the gallery wall stays cool and the work brings the colour.
   ============================================================ */
body.subpage{opacity:1;max-width:none}
body.subpage main{padding-top:78px}
.back{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.back:hover{border-bottom-color:var(--accent)}

/* --- drop page masthead --- */
.dhero{padding-bottom:clamp(40px,6vh,72px)}
.dhero .wrap{max-width:1140px}
.dtitle{
  font-family:var(--display);font-weight:800;
  font-size:clamp(46px,10vw,132px);line-height:.92;letter-spacing:-.03em;
  margin:.08em 0 .12em;color:var(--text-primary);
}
.dplace{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin:0;
}
.dfacts{
  display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;
  margin:clamp(30px,4vh,48px) 0;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.dfacts span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.dfacts b{display:block;font-size:clamp(20px,2.4vw,30px);letter-spacing:.02em;color:var(--accent);font-weight:400;margin-bottom:6px}
.dstory{font-weight:300;color:var(--text-primary);font-size:clamp(17px,1.5vw,22px);line-height:1.62;max-width:56ch;margin:0 0 22px}
.dcraft{font-weight:300;color:var(--text-secondary);font-size:16px;line-height:1.7;max-width:56ch;margin:0}

/* --- the grid of pieces --- */
.dgrid{background:var(--canvas-deep);padding-top:clamp(56px,8vh,110px)}
.dgrid .wrap{max-width:1140px}
.pgrid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,3vw,44px);margin-top:clamp(38px,5vh,64px);
}
@media (max-width:720px){.pgrid{grid-template-columns:1fr;max-width:460px}}
.pcard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);
  transition:border-color .6s var(--ease),transform .6s var(--ease);
}
.pcard:hover{border-color:var(--accent-muted);transform:translateY(-5px)}
.pshot{
  display:block;position:relative;aspect-ratio:1;overflow:hidden;
  background:radial-gradient(ellipse 60% 60% at 50% 46%,rgba(255,255,255,.05),transparent 70%),var(--canvas-deep);
}
.pshot img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.pcard:hover .pshot img{transform:scale(1.05)}
.pmeta{display:block;padding:clamp(18px,2vw,26px)}
.pserial{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:10px}
.pname{display:block;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.01em;margin-bottom:8px}
.pmotif{display:block;color:var(--text-secondary);font-weight:300;font-size:15px;line-height:1.6;max-width:34ch}
.pstate{
  display:inline-block;margin-top:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--line-strong);border-radius:20px;padding:5px 11px;
}

/* --- previous and next drop --- */
.dropnav{
  display:flex;justify-content:space-between;gap:20px;
  margin-top:clamp(50px,7vh,90px);padding-top:28px;border-top:1px solid var(--line);
}
.dropnav a{
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.6vw,22px);
  color:var(--text-primary);text-decoration:none;transition:color .4s var(--ease);
}
.dropnav a:hover{color:var(--accent)}
.dropnav a.r{text-align:right}
.dropnav span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px;
}
.dcta{text-align:center}
.dcta .lede{margin-left:auto;margin-right:auto}
.dcta .btn{margin-top:26px}

/* --- a single piece --- */
.piece .wrap{max-width:1180px}
.pgridtwo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
@media (max-width:900px){.pgridtwo{grid-template-columns:1fr}}
.pfig{
  position:relative;border-radius:3px;overflow:hidden;
  background:radial-gradient(ellipse 62% 62% at 50% 46%,rgba(255,255,255,.06),transparent 72%),var(--canvas-deep);
  border:1px solid var(--line);
}
.pfig img{width:100%;height:auto;display:block}
.ptitle{
  font-family:var(--display);font-weight:800;
  font-size:clamp(38px,6vw,78px);line-height:.96;letter-spacing:-.02em;margin:.1em 0 .16em;
}
.pserialbig{
  font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);letter-spacing:.24em;
  color:var(--accent);margin:0 0 26px;
}
.pnote{font-weight:300;color:var(--text-primary);font-size:clamp(16px,1.35vw,19px);line-height:1.66;max-width:44ch;margin:0 0 32px}
.spec{margin:0 0 30px;display:grid;grid-template-columns:auto 1fr;gap:13px 24px;align-items:baseline;
  border-top:1px solid var(--line);padding-top:24px}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin:0}
.spec dd{margin:0;font-family:var(--mono);font-size:clamp(12px,1.1vw,14px);letter-spacing:.05em;color:var(--text-primary);text-align:right}
.spec dd.hl{color:var(--accent)}
.spec dd.open{color:var(--text-secondary)}
.pstate-line{
  color:var(--text-secondary);font-weight:300;font-size:15px;line-height:1.66;max-width:42ch;
  margin:0 0 28px;padding-left:18px;border-left:1px solid var(--accent-muted);
}

/* --- the rest of the drop --- */
.others{margin-top:clamp(60px,9vh,120px);padding-top:clamp(34px,5vh,56px);border-top:1px solid var(--line)}
.others h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,26px);margin:0 0 clamp(22px,3vh,34px)}
.orow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
@media (max-width:640px){.orow{grid-template-columns:repeat(3,1fr);gap:10px}}
.ocard{display:block;text-decoration:none;color:inherit}
.oshot{
  display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;border:1px solid var(--line);
  background:var(--canvas-deep);transition:border-color .5s var(--ease);
}
.oshot img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.ocard:hover .oshot{border-color:var(--accent-muted)}
.ocard:hover .oshot img{transform:scale(1.06)}
.oname{
  display:block;margin-top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
}
.ocard:hover .oname{color:var(--text-primary)}

/* the drops sequence gained a place line and a link through to the drop page */
.dband .place{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 18px;opacity:calc(var(--k,0));
}
.dband .dlink{margin:18px 0 0;opacity:calc(var(--k,0))}
.dband .dlink a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .45s var(--ease),gap .45s var(--ease);
}
.dband .dlink a::after{content:"";width:16px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.dband .dlink a:hover{border-bottom-color:var(--accent-muted)}
.dband .dlink a:hover::after{width:26px}
@media (prefers-reduced-motion: reduce){
  .dband .place,.dband .dlink{opacity:1}
}

/* ============================================================
   The drops morph, generated as a real film.
   One garment turning in the air while its design is replaced by the next,
   the change spreading through the cloth like dye wicking. Scroll scrubs it,
   the same engine as the hero. The three stills underneath stay for phones,
   for reduced motion, and for anyone the video never reaches.
   ============================================================ */
.teevid{
  position:absolute;margin:0;
  right:var(--tbase,120px);top:50%;
  width:min(400px,30vw);aspect-ratio:1;
  object-fit:contain;opacity:0;
  transform:translate3d(var(--tx,0px),calc(-50% + var(--ty,0px)),0) rotate(var(--tr,0deg));
  will-change:transform;
  transition:opacity .8s var(--ease-soft);
  -webkit-mask-image:radial-gradient(ellipse 50% 53% at 50% 49%,#000 68%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 50% 53% at 50% 49%,#000 68%,rgba(0,0,0,0) 100%);
}
/* once the film is playing it owns the stage and the stills step aside */
.dropstage.morph-ready .teevid{opacity:1}
.dropstage.morph-ready .tee{opacity:0;transition:opacity .8s var(--ease-soft)}
@media (max-width:1180px){.teevid{width:min(310px,28vw)}}

@media (prefers-reduced-motion: reduce){
  .teevid{display:none}
  .dropstage.morph-ready .tee{opacity:1}
}

/* ============================================================
   PHONES AND PORTRAIT TABLETS: the same journey, composed for the shape.
   Everything scrubs here now. What changes is the layout, because a 16:9
   frame with the action left and the words right does not survive a portrait
   crop. The films are swapped for portrait cuts at a fraction of the weight,
   and the words move below the action instead of beside it.
   Reduced motion is still a hard stop and still gets the stills.
   ============================================================ */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px){

  /* --- the hero --- */
  .stage video{
    object-position:50% 50%;
    transform-origin:50% 58%;
  }
  .scrim{
    background:radial-gradient(ellipse 150% 70% at 50% 30%,rgba(7,10,15,0) 30%,rgba(7,10,15,.5) 100%);
  }
  .vignette{
    background:linear-gradient(to bottom,rgba(5,7,11,.72) 0%,rgba(5,7,11,0) 26%,rgba(5,7,11,0) 46%,rgba(5,7,11,.92) 86%,rgba(5,7,11,.97) 100%);
  }
  .band{align-items:flex-end;padding:0 var(--gut) calc(var(--gut) + 12px)}
  .band[data-side="right"] .inner,
  .band[data-side="centre"] .inner{justify-content:flex-start;text-align:left}
  .band[data-side="right"] .col,
  .band[data-side="centre"] .col{width:100%;min-width:0}
  .band[data-side="centre"] .sub{margin-left:0;margin-right:0}
  .band[data-side="centre"] .row{justify-content:flex-start}
  /* one scrim shape for both, anchored low where the words now live */
  .band[data-side="right"]::before,
  .band[data-side="centre"]::before{
    background:radial-gradient(ellipse 120% 46% at 50% 88%,rgba(5,7,12,var(--a,.72)) 0%,rgba(5,7,12,calc(var(--a,.72)*.7)) 52%,rgba(5,7,12,0) 82%);
  }
  .line{font-size:clamp(30px,8.6vw,52px)}
  .wordmark{font-size:clamp(28px,9.4vw,56px)}
  .band .sub{font-size:clamp(15px,4.1vw,18px);max-width:32ch}
  .cue{display:none}

  /* --- the drops sequence --- */
  .dropstage{flex-direction:column;justify-content:center;padding:0 var(--gut)}
  .shirtrail{position:relative;inset:auto;width:100%;height:50vh;flex:0 0 auto}
  .teevid,.tee{
    right:auto;left:50%;top:50%;width:min(340px,74vw);
    transform:translate3d(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px)),0) rotate(var(--tr,0deg));
  }
  .dropbands{width:100%;height:38vh;flex:0 0 auto}
  .dband{top:auto;bottom:0;transform:none;text-align:left}
  .dband .theme{font-size:clamp(28px,8.6vw,44px);transform:none}
  .dband .story{font-size:15px;max-width:38ch}
  .dband .no{font-size:clamp(20px,6vw,30px)}
}

/* a phone held sideways has no room for a 700vh journey, so it keeps the still */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 480px){
  .hero{height:100svh}
  .stage .poster,.stage video,.stage .ring,.stage .chev,.stage .bands,.cue,.vignette,.scrim{display:none}
  .static-hero{display:flex}
  .dropscroll{height:auto}
  .dropstage{position:static;height:auto;display:flex;flex-direction:column;padding:clamp(34px,6vh,60px) 0 0;overflow:visible}
  .shirtrail{display:contents}
  .dropbands{display:contents}
  .teevid{display:none}
  .tee{position:relative;right:auto;left:auto;top:auto;width:100%;max-width:420px;transform:none;margin:0 auto 24px;opacity:1}
  .tee .bleedwrap{position:relative;inset:auto;-webkit-mask-image:none !important;mask-image:none !important;opacity:1 !important}
  .tee::after{display:none}
  .dband{position:relative;bottom:auto;opacity:1;width:100%;padding-bottom:48px;border-bottom:1px solid var(--line);margin-bottom:40px}
  .dband:last-of-type{border-bottom:0}
  .dband .no,.dband .story,.dband .meta,.dband .place,.dband .dlink{opacity:1}
  .tee[data-i="0"]{order:1} .dband:nth-of-type(1){order:2}
  .tee[data-i="1"]{order:3} .dband:nth-of-type(2){order:4}
  .tee[data-i="2"]{order:5} .dband:nth-of-type(3){order:6}
}