/* ═══════════════════════════════════════════════════════════════════════
   DARK TIDES SUPPLY
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #08080a;
  --ink-2:      #0c0c0f;
  --panel:      #101013;
  --cream:      #e9e2d4;
  --cream-dim:  #b8b1a4;
  --muted:      #8b857b;
  --gold:       #c9a961;
  --gold-soft:  #a8905a;
  --hair:       rgba(201,169,97,.16);
  --hair-2:     rgba(233,226,212,.10);

  --rail:       84px;
  --bar:        66px;
  --pad:        clamp(24px, 5vw, 92px);

  --display: 'Cinzel', 'Baskerville', 'Times New Roman', serif;
  --ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream-dim);
  font-family:var(--ui);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.display{
  font-family:var(--display);
  font-weight:600;
  color:var(--cream);
  letter-spacing:.02em;
  line-height:1.02;
  text-transform:uppercase;
}

.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;
}

/* ── film grain ─────────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-120px; z-index:900; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grainShift 700ms steps(2,end) infinite;
}
@keyframes grainShift{ 50%{ transform:translate(-14px,10px); } }

/* ── shared bits ────────────────────────────────────────────────────── */
.eyebrow{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:300;
}
.eyebrow em{ font-style:normal; color:var(--muted); margin:0 .35em; }

.btn{
  display:inline-block;
  padding:16px 34px;
  border:1px solid rgba(233,226,212,.42);
  color:var(--cream);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  transition:background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.btn:hover{ background:var(--cream); border-color:var(--cream); color:#0b0b0d; }

.link-u{
  position:relative; display:inline-block;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-dim); padding-bottom:5px;
}
.link-u::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.45;
  transform-origin:right; transform:scaleX(1);
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.link-u:hover{ color:var(--cream); }
.link-u:hover::after{ opacity:1; transform:scaleX(1.06); }
.link-u.arrow span{ margin-left:.6em; }

/* ── reveal on scroll ───────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.13s; }
.reveal[data-delay="2"]{ transition-delay:.26s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .grain{ animation:none; }
}

/* ═══════════════════════════════ SIDE RAIL ═════════════════════════════ */
.rail{
  position:fixed; left:0; top:0; z-index:80;
  width:var(--rail); height:100vh;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  padding:20px 0 26px;
  background:linear-gradient(180deg,#0a0a0c,#08080a);
  border-right:1px solid var(--hair);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.rail.hide{ opacity:0; transform:translateX(-12px); pointer-events:none; }

.rail-mark{ color:var(--cream); opacity:.82; }
.rail-mark svg{ width:34px; height:48px; }

.rail-nav{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-around;
  width:100%; padding:34px 0;
}
.rail-line{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent);
}
.rail-progress{
  position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(180deg,rgba(201,169,97,.05),var(--gold));
  transition:height .18s linear;
}

.rail-item{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:14px 0; width:100%;
  background:linear-gradient(90deg,transparent,#09090b 22%,#09090b 78%,transparent);
}
.rail-item .num{
  font-family:var(--display); font-size:12px; letter-spacing:.16em;
  color:var(--cream-dim); opacity:.6; transition:opacity .4s, color .4s;
}
.rail-item .lbl{
  font-size:7.6px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); opacity:.62; transition:opacity .4s, color .4s;
  white-space:nowrap;
}
.rail-item .dot{
  width:5px; height:5px; margin-top:9px; border-radius:50%;
  background:#2a2822; border:1px solid var(--hair);
  transition:background .4s, box-shadow .4s, transform .4s;
}
.rail-item:hover .num,.rail-item.active .num{ opacity:1; color:var(--cream); }
.rail-item:hover .lbl,.rail-item.active .lbl{ opacity:1; color:var(--gold-soft); }
.rail-item.active .dot{
  background:var(--gold); transform:scale(1.25);
  box-shadow:0 0 0 3px rgba(201,169,97,.14), 0 0 12px rgba(201,169,97,.5);
}

.rail-compass{ color:var(--gold); opacity:.62; }
.rail-compass svg{ width:38px; height:38px; animation:swing 9s ease-in-out infinite; }
@keyframes swing{ 0%,100%{ transform:rotate(-5deg);} 50%{ transform:rotate(5deg);} }

/* ═══════════════════════════════ TOP BAR ═══════════════════════════════ */
.topbar{
  position:fixed; z-index:70; top:0; left:var(--rail); right:0;
  height:var(--bar);
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(18px,3vw,40px);
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}
.wordmark{
  font-family:var(--display); font-weight:500;
  font-size:clamp(11px,1.1vw,13px); letter-spacing:.44em;
  text-transform:uppercase; color:var(--cream);
  padding-left:.44em;
}
.utility{
  position:absolute; right:clamp(18px,3vw,40px);
  display:flex; align-items:center; gap:clamp(14px,1.8vw,26px);
}
.utility button{ color:var(--cream-dim); opacity:.85; transition:opacity .35s, color .35s; }
.utility button:hover{ opacity:1; color:var(--cream); }
.utility svg{ width:18px; height:18px; }
.cart{ position:relative; }
.cart-count{
  position:absolute; top:-4px; right:-8px;
  min-width:14px; height:14px; padding:0 3px;
  border-radius:8px; background:var(--gold); color:#0a0a0c;
  font-size:8.5px; line-height:14px; text-align:center; letter-spacing:.02em;
  opacity:0; transform:scale(.6); transition:opacity .35s, transform .35s;
}
.cart-count.on{ opacity:1; transform:scale(1); }

/* ═══════════════════════════════ SHELL ═════════════════════════════════ */
.shell{ margin-left:var(--rail); }

/* ═══════════════════════════════ 01 · HERO ═════════════════════════════ */
.hero{
  position:relative;
  /* tuned to the hero clip's 2.2:1 frame — a taller hero would crop the
     lantern and the window edges out of shot */
  min-height:min(82vh,720px);
  display:flex; align-items:center;
  padding:calc(var(--bar) + 40px) var(--pad) 90px;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media picture{ position:absolute; inset:0; display:block; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 45%;
  transform:scale(1.06);
  will-change:transform;
}
/* hero video — sits over the still, which doubles as poster + fallback */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:62% 45%;
  opacity:0; transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.hero-video.ready{ opacity:1; }

.sound-toggle{
  position:absolute; z-index:3;
  right:var(--pad); bottom:clamp(26px,4vw,44px);
  display:flex; align-items:center; gap:10px;
  padding:9px 16px;
  border:1px solid rgba(233,226,212,.24);
  background:rgba(8,8,10,.42);
  backdrop-filter:blur(6px);
  color:var(--cream-dim);
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  transition:border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}
.sound-toggle:hover{ border-color:var(--gold-soft); color:var(--cream); background:rgba(8,8,10,.62); }
.sound-toggle svg{ width:15px; height:15px; }
.sound-toggle .ico-on{ display:none; }
.sound-toggle[aria-pressed="true"]{ border-color:rgba(201,169,97,.5); color:var(--cream); }
.sound-toggle[aria-pressed="true"] .ico-on{ display:block; }
.sound-toggle[aria-pressed="true"] .ico-off{ display:none; }

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,6,8,.94) 0%, rgba(6,6,8,.72) 32%, rgba(6,6,8,.18) 62%, rgba(6,6,8,.42) 100%),
    linear-gradient(180deg, rgba(6,6,8,.78) 0%, transparent 34%, transparent 62%, rgba(6,6,8,.86) 100%);
}
.hero-body{ position:relative; max-width:min(720px,54vw); }
.hero h1{
  font-size:clamp(2.9rem,6.4vw,6.1rem);
  line-height:.94; letter-spacing:.005em;
  text-shadow:0 8px 60px rgba(0,0,0,.7);
}
.hero-sub{
  margin-top:clamp(22px,3vw,38px);
  font-size:clamp(13px,1.15vw,16px); letter-spacing:.07em;
  color:var(--cream-dim);
}
.hero-cta{
  margin-top:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column; align-items:flex-start; gap:26px;
}
.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:1px; height:56px; background:linear-gradient(180deg,transparent,var(--hair));
  overflow:hidden;
}
.hero-scroll span{
  position:absolute; inset:0; display:block; background:var(--gold);
  animation:trickle 2.6s var(--ease) infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);}
}

/* ═══════════════════════════════ 02 · CARGO ════════════════════════════ */
.cargo{
  position:relative;
  padding:clamp(60px,7vw,110px) 0 clamp(46px,5vw,74px);
  background:
    radial-gradient(120% 90% at 50% 0%, #131316 0%, #0a0a0c 62%),
    var(--ink);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.cargo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 0h6v6H0z' fill='none'/><path d='M0 5.6h6' stroke='rgba(255,255,255,.02)' stroke-width='1'/></svg>");
  opacity:.9;
}
.sec-head{ position:relative; text-align:center; margin-bottom:clamp(34px,4vw,56px); }
.ornament{ display:block; margin-top:16px; color:var(--hair); }
.ornament svg{ width:130px; height:12px; margin:0 auto; opacity:.9; }

.cargo-track{
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; user-select:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;   /* lands cleanly on a piece after a swipe */
}
.piece{ scroll-snap-align:center; }
.cargo-track::-webkit-scrollbar{ display:none; }
.cargo-track.dragging{ cursor:grabbing; }
.cargo-track.dragging a{ pointer-events:none; }

.cargo-rail{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(24px,3.4vw,58px);
  padding:0 clamp(24px,3.5vw,64px) 12px;
  min-width:max-content;
}

.piece{ position:relative; flex:0 0 auto; width:clamp(200px,20vw,282px); }
.piece.is-featured{
  width:clamp(250px,26vw,368px);
  margin-bottom:22px;
  margin-right:clamp(140px,13vw,200px);   /* room for the spec callout */
  z-index:3;
}

.piece-img{
  display:block; position:relative;
  filter:brightness(.92) contrast(1.02);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.piece-img::after{
  content:''; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.85));
  pointer-events:none;
}
.piece:hover .piece-img{ filter:brightness(1.08) contrast(1.04); transform:translateY(-6px); }

.piece-meta{ margin-top:-14px; position:relative; }
.piece-meta.align-right{ text-align:right; }
.piece .no,.spec .no{
  display:block; font-size:9.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.piece h3,.spec h3{
  margin-top:9px;
  font-family:var(--display); font-weight:500;
  font-size:clamp(13px,1.15vw,16px); letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream);
}
.piece .colour{
  margin-top:5px; font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted);
}
.piece .price,.spec .price{
  margin-top:14px; font-family:var(--display); font-size:17px;
  letter-spacing:.05em; color:var(--cream);
}
.piece .link-u,.spec .link-u{ margin-top:12px; }

/* featured spec callout */
.spec{
  position:absolute; left:calc(100% + 34px); top:34%;
  width:clamp(120px,12vw,190px); z-index:4;
}
.spec-node{ position:absolute; left:-34px; top:6px; width:34px; height:1px; background:var(--hair); }
.spec-node i{
  position:absolute; left:-4px; top:-3.5px;
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--gold-soft); background:#0b0b0d;
}
.spec-list{ margin-top:12px; }
.spec-list li{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); line-height:2.05;
}

.drag-hint{
  position:relative;
  margin-top:clamp(26px,3.4vw,44px); text-align:center;
  font-size:9.5px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--muted);
}
.drag-hint .arw{
  display:inline-block; margin:0 clamp(14px,4vw,60px); padding:4px 8px;
  color:var(--gold-soft); opacity:.65; font-size:15px; line-height:1;
  transform:translateY(2px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.drag-hint .arw:hover{ opacity:1; }
.drag-hint .arw[data-dir="-1"]:hover{ transform:translate(-4px,2px); }
.drag-hint .arw[data-dir="1"]:hover{ transform:translate(4px,2px); }
.drag-hint.is-static{ opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }

/* ═══════════════════════════════ 03 · LEGENDS ══════════════════════════ */
.legends{ position:relative; overflow:hidden; border-bottom:1px solid var(--hair); }
.legend-strip{ display:flex; height:clamp(300px,34vw,470px); }
.legend{ position:relative; flex:1; overflow:hidden; }
.legend + .legend{ border-left:1px solid rgba(0,0,0,.6); }
.legend img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78) saturate(.92);
  transform:scale(1.02);
  transition:transform 1.4s var(--ease), filter 1s var(--ease);
}
.legends:hover .legend img{ filter:brightness(.6) saturate(.8); }
.legend:hover img{ transform:scale(1.09); filter:brightness(1) saturate(1); }
.legend::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.5),transparent 38%,rgba(8,8,10,.72));
  pointer-events:none;
}

/* A soft band across all three panels so the headline stays readable no matter
   what the art does underneath it — the Revenge panel's fire sits right where
   the type falls. Also visually ties the three frames into one strip. */
.legends::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 20%,
    rgba(7,7,9,.30) 34%,
    rgba(7,7,9,.60) 44%,
    rgba(7,7,9,.60) 52%,
    rgba(7,7,9,.30) 62%,
    transparent 76%);
}

.legend-type{
  position:absolute; z-index:3; left:0; right:0; top:46%;
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:space-evenly;
  padding:0 clamp(10px,2vw,34px);
  font-size:clamp(1.05rem,3.5vw,3.6rem);
  letter-spacing:.12em; line-height:1;
  color:rgba(236,229,215,.58);
  text-shadow:0 6px 40px rgba(0,0,0,.85);
  pointer-events:none;
}
.legend-type em{
  font-style:normal; color:rgba(201,169,97,.42);
  font-size:.72em; padding:0 clamp(4px,1vw,16px);
}

.legend-card{
  position:absolute; z-index:3; left:50%; top:66%;
  transform:translate(-50%,-50%);
  width:min(370px,72vw); padding:clamp(20px,2.4vw,32px);
  text-align:center;
  background:rgba(10,10,13,.62);
  backdrop-filter:blur(7px);
  border:1px solid var(--hair-2);
}
.legend-card p{
  font-size:clamp(13px,1.25vw,18px); letter-spacing:.14em; line-height:1.5;
}
.legend-card .link-u{ margin-top:18px; }

/* ═══════════════════════════════ THE CRAFT ═════════════════════════════ */
.craft{
  position:relative; overflow:hidden;
  min-height:clamp(430px,44vw,660px);
  display:flex; align-items:center;
  padding:clamp(50px,6vw,90px) var(--pad);
  border-bottom:1px solid var(--hair);
}
.craft-media{ position:absolute; inset:0; }
.craft-media img{ width:100%; height:100%; object-fit:cover; object-position:58% 55%; }
.craft-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,7,9,.95) 0%, rgba(7,7,9,.78) 26%, rgba(7,7,9,.2) 54%, rgba(7,7,9,.35) 100%),
    linear-gradient(180deg, rgba(7,7,9,.6), transparent 30%, rgba(7,7,9,.55));
}
.craft-copy{ position:relative; max-width:min(420px,40vw); }
.craft-copy h2{ font-size:clamp(1.9rem,3.6vw,3.5rem); }
.craft-copy p{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:12.5px; line-height:2; letter-spacing:.05em; color:var(--muted);
  max-width:34ch;
}

.callouts{ position:absolute; inset:0; pointer-events:none; }
.callout{ position:absolute; display:flex; align-items:flex-start; gap:14px; }
.callout .node{
  position:relative; flex:0 0 auto; margin-top:6px;
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--gold-soft); background:rgba(10,10,12,.8);
}
.callout .node::before{
  content:''; position:absolute; top:50%; height:1px;
  background:linear-gradient(90deg,var(--hair),transparent);
}
.callout h4{
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream); font-weight:400; line-height:1.7;
}
.callout p{
  margin-top:5px; font-size:10px; letter-spacing:.13em;
  color:var(--muted); line-height:1.85;
}
.callout.c1{ top:20%;  left:57%; }
.callout.c1 .node::before{ right:100%; width:clamp(26px,5vw,90px); transform:scaleX(-1); }
.callout.c2{ top:52%;  left:52%; }
.callout.c2 .node::before{ right:100%; width:clamp(26px,4vw,70px); transform:scaleX(-1); }
.callout.c3{ top:70%;  left:34%; }
.callout.c3 .node::before{ right:100%; width:clamp(20px,3vw,50px); transform:scaleX(-1); }

/* ═══════════════════════════════ THE ARCHIVE ═══════════════════════════ */
.archive{ position:relative; background:var(--ink-2); }
.entry{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr) clamp(180px,28vw,420px) clamp(64px,7vw,104px);
  min-height:clamp(84px,8.6vw,124px);
  border-top:1px solid var(--hair);
  overflow:hidden;
  transition:background .55s var(--ease);
}
.entry:last-child{ border-bottom:1px solid var(--hair); }
.entry:hover{ background:#141418; }

.sigil{
  display:grid; place-items:center;
  color:var(--gold-soft); opacity:.82;
  transition:opacity .5s, transform .6s var(--ease), filter .5s var(--ease);
}
.sigil svg,
.sigil img{
  width:clamp(26px,2.6vw,38px); height:clamp(26px,2.6vw,38px);
  object-fit:contain;
}
.sigil img{ filter:brightness(.92) saturate(.95); }
.entry:hover .sigil{ opacity:1; transform:rotate(8deg); filter:brightness(1.25) saturate(1.05); }

.entry-text{ display:flex; align-items:baseline; gap:clamp(10px,1.4vw,20px); padding-right:20px; transition:transform .6s var(--ease); }
.entry:hover .entry-text{ transform:translateX(10px); }
.entry-text em{
  font-style:normal; font-family:var(--display);
  font-size:clamp(11px,1.05vw,15px); letter-spacing:.16em; color:var(--muted);
  white-space:nowrap;
}
.entry-text h3{
  font-family:var(--display); font-weight:500;
  font-size:clamp(13px,1.5vw,22px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.entry-img{ position:relative; align-self:stretch; overflow:hidden; }
.entry-img img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(.85);
  transform:scale(1.03);
  transition:transform 1.2s var(--ease), filter .8s var(--ease);
}
.entry:hover .entry-img img{ filter:brightness(.92) saturate(1); transform:scale(1.1); }
.entry-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--ink-2),transparent 46%,rgba(12,12,15,.6));
}

.entry-go{
  display:grid; place-items:center; justify-self:center;
  width:clamp(30px,3vw,42px); height:clamp(30px,3vw,42px);
  border:1px solid var(--hair); border-radius:50%;
  color:var(--cream-dim); font-size:14px;
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease);
}
.entry:hover .entry-go{
  background:var(--gold); border-color:var(--gold); color:#0a0a0c; transform:translateX(4px);
}

/* ═══════════════════════════════ 04 · CREW ═════════════════════════════ */
.crew{
  position:relative; overflow:hidden;
  min-height:clamp(340px,34vw,520px);
  display:grid; place-items:center;
  padding:clamp(56px,6vw,92px) 24px;
  text-align:center;
}
.crew-media{ position:absolute; inset:0; }
.crew-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.crew-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,7,9,.82) 0%, rgba(7,7,9,.3) 34%, rgba(7,7,9,.3) 62%, rgba(7,7,9,.9) 100%);
}
.crew-body{ position:relative; width:min(760px,92vw); }
.crew h2{ font-size:clamp(1.5rem,3.4vw,3.2rem); line-height:1.14; letter-spacing:.06em; }

.signup{
  margin:clamp(26px,3.2vw,44px) auto 0;
  display:flex; align-items:stretch;
  width:min(560px,90vw);
  position:relative; flex-wrap:wrap;
}
.signup input{
  flex:1 1 240px; min-width:0;
  padding:15px 20px;
  /* opaque enough to stay legible where it crosses the sunset's bright
     horizon line — the scrim is deliberately left thin so the sky survives */
  background:rgba(8,8,10,.74);
  backdrop-filter:blur(2px);
  border:1px solid rgba(233,226,212,.34); border-right:0;
  color:var(--cream); font-family:var(--ui); font-weight:300;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  outline:none; transition:border-color .4s, background .4s;
}
.signup input::placeholder{ color:rgba(206,199,186,.72); }
.signup input:focus{ border-color:var(--gold-soft); background:rgba(8,8,10,.86); }
.signup button{
  flex:0 0 auto; padding:15px 30px;
  background:rgba(233,226,212,.95); color:#0a0a0c;
  border:1px solid rgba(233,226,212,.95);
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.signup button:hover{ background:var(--gold); border-color:var(--gold); }
.form-note{
  flex:1 0 100%; margin-top:12px; min-height:1.2em;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft);
}

/* ═══════════════════════════════ FOOTER ═══════════════════════════════ */
.footer{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:26px clamp(20px,4vw,56px);
  background:var(--ink);
  border-top:1px solid var(--hair);
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.footer-mark{
  position:absolute; left:50%; top:0; transform:translate(-50%,-52%);
  color:var(--cream); opacity:.55; background:var(--ink); padding:0 12px;
}
.footer-mark svg{ width:20px; height:28px; }
.f-nav{ display:flex; gap:clamp(16px,3vw,44px); }
.f-nav a{ transition:color .4s; }
.f-nav a:hover{ color:var(--cream); }
.f-social{ display:flex; gap:16px; }
.f-social a{ color:var(--muted); transition:color .4s; }
.f-social a:hover{ color:var(--cream); }
.f-social svg{ width:15px; height:15px; }

/* ═══════════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1180px){
  .spec{ left:auto; right:-8px; top:auto; bottom:-6px; width:160px; }
  .spec-node{ display:none; }
}

@media (max-width:900px){
  :root{ --rail:56px; --bar:58px; }
  .rail-item .lbl{ display:none; }
  .rail-mark svg{ width:26px; height:36px; }
  .rail-compass svg{ width:28px; height:28px; }
  .wordmark{ letter-spacing:.3em; font-size:10.5px; }
  .utility svg{ width:16px; height:16px; }

  .hero{ min-height:min(76vh,620px); }
  .hero-body{ max-width:none; }
  /* mobile gets a squared-off recut of the clip and its matching still
     (see make_hero_video.sh), so they're already framed — just centre them */
  .hero-media img,
  .hero-video{ object-position:50% 46%; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,8,.86) 0%, rgba(6,6,8,.34) 26%, rgba(6,6,8,.5) 62%, rgba(6,6,8,.92) 100%),
      linear-gradient(90deg, rgba(6,6,8,.72) 0%, rgba(6,6,8,.28) 55%, rgba(6,6,8,.4) 100%);
  }

  .cargo-rail{ justify-content:flex-start; align-items:flex-start; }
  .piece,.piece.is-featured{
    width:min(64vw,300px); margin-bottom:0; margin-right:0;
  }
  .piece-meta.align-right{ text-align:left; }
  .spec{ position:static; width:auto; margin-top:4px; }
  .spec-list{ display:flex; flex-wrap:wrap; gap:0 18px; }
  .piece-meta{ margin-top:4px; }

  .legend-strip{ height:clamp(240px,44vw,340px); }
  .legend-type{
    top:38%; padding:0 6px;
    font-size:clamp(.6rem,2.7vw,1.5rem); letter-spacing:.03em;
    white-space:nowrap;
  }
  .legend-card{ top:74%; }

  .craft{ align-items:flex-end; min-height:78vh; }
  .craft-scrim{
    background:linear-gradient(180deg,rgba(7,7,9,.72) 0%,rgba(7,7,9,.42) 26%,rgba(7,7,9,.9) 62%,rgba(7,7,9,.97) 100%);
  }
  .craft-copy{ max-width:none; }
  .callouts{ display:none; }

  .entry{ grid-template-columns:52px minmax(0,1fr) 46px; min-height:78px; }
  .entry-img{ display:none; }
  .entry-text{ flex-direction:column; gap:2px; }
  .entry-text h3{ white-space:normal; }

  .footer{ justify-content:center; text-align:center; }
  .f-left,.f-right{ flex:1 0 100%; }
}

@media (max-width:560px){
  .hero h1{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .hero-cta{ gap:20px; }
  .btn{ padding:14px 26px; letter-spacing:.26em; }
  .eyebrow{ letter-spacing:.3em; font-size:10px; }
  .signup input{ border-right:1px solid rgba(233,226,212,.28); }
  .signup button{ flex:1 0 100%; margin-top:10px; }
  .legend-type em{ padding:0 3px; font-size:.6em; }
  .wordmark{ font-size:9.5px; letter-spacing:.22em; }
  .utility button:first-child{ display:none; }   /* search folds into the menu */
  .drag-hint{ letter-spacing:.2em; font-size:8.5px; }
  .drag-hint .arw{ margin:0 10px; font-size:13px; }
}