/* ============================================================
   TRIUMPH FENCING STUDIO — v2 (photo-driven, dark + champagne gold)
   Two families: Fraunces (340/600), Hanken Grotesk (400/500). Zero italics.
   One letterspaced-caps token: 0.16em.
   ============================================================ */

:root{
  --ink:#0B0B0D;        /* near-black page base */
  --ink-2:#13141A;      /* raised dark band */
  --char:#1C1D24;       /* card / footer surface (steel) */
  --gold:#C9A86A;       /* champagne primary */
  --gold-bright:#E4C98C;/* hover / glint / focus */
  --gold-deep:#8C7240;  /* rules, borders, pressed */
  --bone:#F4EFE6;       /* primary text on dark */
  --bone-dim:#B9B3A7;   /* secondary text */
  --line:rgba(201,168,106,.28);
  --scrim:linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.55) 55%, rgba(8,8,10,.92) 100%);
  --maxw:1280px;
  --pad:clamp(1.25rem, 5vw, 4.5rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;            /* R1 safety net */
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- type roles ---------- */
.display{
  font-family:"Fraunces",serif;
  font-weight:340;
  font-optical-sizing:auto;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--bone);
}
.gold-word{ font-weight:600; color:var(--gold); }
.on-photo{ font-weight:340; text-shadow:0 1px 24px rgba(0,0,0,.55); }

.lead{ font-size:1.18rem; line-height:1.5; max-width:62ch; }
.body{ font-size:1rem; line-height:1.65; max-width:62ch; }
.body.sm{ font-size:.92rem; }
.bone-dim{ color:var(--bone-dim); }

.kicker{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}

.ulink{
  font-weight:500;
  color:var(--gold);
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.ulink:hover::after{ transform:scaleX(1); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.95rem 1.6rem;
  border:1px solid transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-bright); transform:translateY(-1px); }
.btn--ghost{ border-color:var(--line); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-1px); }

.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.cta-row--center{ justify-content:center; }

/* ============================================================
   PHOTO TREATMENT
   ============================================================ */
.photo{ position:relative; overflow:hidden; }
.photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.28) contrast(1.06) brightness(var(--b,.72)) saturate(.85);
}
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* top stop lifted to .22 so gold .tag labels (top-left) always sit on a
     dark substrate and clear ~4.5:1 even over the brightest part of a photo */
  background:
    linear-gradient(180deg, rgba(8,8,10,.22), rgba(8,8,10,.72)),
    rgba(201,168,106,.10);
  mix-blend-mode:multiply;
}
.photo--scrim-strong::after{
  background:
    linear-gradient(180deg, rgba(8,8,10,.30), rgba(8,8,10,.92)),
    rgba(201,168,106,.12);
  mix-blend-mode:multiply;
}
.photo--vignette::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(8,8,10,.7) 100%);
}

/* museum-plate frame (contained photos only) */
.plate{ position:relative; border:1px solid var(--line); transition:border-color .35s ease; }
.plate:hover{ border-color:var(--gold-bright); }
.plate .tag{
  position:absolute; top:.85rem; left:.85rem; z-index:3;
  font-family:"Hanken Grotesk",sans-serif; font-weight:500;
  font-size:.68rem; line-height:1; letter-spacing:.16em; color:var(--gold);
  text-shadow:0 1px 6px rgba(0,0,0,.7); /* keep gold legible over bright photo tops */
}
.plate .tag--tr{ left:auto; right:.85rem; }
.plate .placard{
  position:absolute; left:.85rem; right:.85rem; bottom:.85rem; z-index:3;
  font-family:"Hanken Grotesk",sans-serif; font-weight:500;
  font-size:.82rem; line-height:1.3; color:var(--bone);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.section-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section-head .display{ max-width:18ch; margin-top:.6rem;
  font-size:clamp(1.7rem,3.6vw,2.9rem); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:64px;
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(19,20,26,.92);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.brand__crest{ height:40px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
.nav__links > a:not(.pill){
  font-weight:500; font-size:.86rem; color:var(--bone);
  position:relative; padding:.2rem 0;
}
.nav__links > a:not(.pill)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav__links > a:not(.pill):hover{ color:var(--gold-bright); }
.nav__links > a:not(.pill):hover::after{ transform:scaleX(1); }
.pill{
  font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold);
  padding:.55rem 1.1rem; border-radius:999px;
  transition:background .3s ease, color .3s ease;
}
.pill:hover{ background:var(--gold); color:var(--ink); }

/* mobile menu toggle — hidden on desktop, shown <=768 */
.nav__toggle{
  display:none;
  width:44px; height:44px;
  background:transparent; border:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__bars,
.nav__bars::before,
.nav__bars::after{
  display:block; width:22px; height:1.5px; background:var(--bone);
  transition:transform .3s ease, opacity .2s ease;
}
.nav__bars{ position:relative; }
.nav__bars::before,
.nav__bars::after{ content:""; position:absolute; left:0; }
.nav__bars::before{ top:-6px; }
.nav__bars::after{ top:6px; }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   [A] HERO
   ============================================================ */
.hero{ position:relative; width:100%; min-height:100svh; display:flex; }
.hero__photo{ position:absolute; inset:0; z-index:0; }
/* hero reads as imagery, not texture: lighter top/mid than scrim-strong,
   still dark at the lower-left where the copy sits */
.hero__photo.photo--scrim-strong::after{
  background:
    linear-gradient(180deg, rgba(8,8,10,.12) 0%, rgba(8,8,10,.30) 48%, rgba(8,8,10,.86) 100%),
    rgba(201,168,106,.10);
  mix-blend-mode:multiply;
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:6rem var(--pad) 7rem;
  display:flex; align-items:flex-end;  /* lower-left */
}
.hero__copy{ max-width:46rem; }
.hero .display{ font-size:clamp(2.6rem,6.4vw,5.4rem); margin:.9rem 0 1.1rem; }
.hero .lead{ max-width:38ch; }
.hero__credit{
  position:absolute; right:var(--pad); bottom:4.4rem; z-index:2;
  font-weight:500; font-size:.69rem; letter-spacing:.13em;
  color:var(--gold); text-align:right; white-space:nowrap; line-height:1.5;
  text-shadow:0 1px 6px rgba(0,0,0,.7); /* legible gold over photo */
}

/* act-spine */
.act-spine{
  position:absolute; left:0; right:0; bottom:1.4rem; z-index:3;
  display:flex; align-items:center; gap:1rem;
  padding:0 var(--pad);
}
.act-spine__rule{
  /* default visible: any spine whose section is never observed (e.g. the
     full-bleed [I] closing) is still drawn, never stuck at width 0 */
  position:absolute; left:var(--pad); right:var(--pad); bottom:2.2rem; height:1px;
  background:var(--gold-deep); transform:scaleX(1); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s;
}
/* only the hero opts into the signature draw-in: collapsed until loaded */
.hero .act-spine__rule{ transform:scaleX(0); }
.hero.loaded .act-spine__rule{ transform:scaleX(1); }
.act-spine__word{
  font-weight:500; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.act-spine__cue{ margin-left:auto; color:var(--gold); font-size:1.1rem; opacity:.7; }
.act-spine--band .act-spine__rule{ background:var(--gold-deep); }

/* ============================================================
   [B]/[F] SPLIT
   ============================================================ */
.split{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,9vw,8rem) 0;
  display:grid; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  /* bleed = how far media pushes past the centred container into the gutter.
     0 by default (no overflow when gutter is absent); enabled only when the
     viewport is comfortably wider than the container (see min-width query). */
  --bleed:0px;
}
.split__text{ padding:0 var(--pad); }
.split__text .display{ font-size:clamp(1.9rem,3.8vw,3rem); margin:.7rem 0 1.3rem; }
.split__text .body{ margin-bottom:1.4rem; }

.split__media .photo{ aspect-ratio:4/5; }

/* image bleeds off right edge */
.split--img-right{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); }
.split--img-right .split__text{ padding-left:var(--pad); }
.split--img-right .split__media{ margin-right:calc(-1 * var(--bleed)); }
.split--img-right .split__media .photo{ aspect-ratio:5/6; }

/* image bleeds off left edge */
.split--img-left{ grid-template-columns:minmax(0,54fr) minmax(0,46fr); }
.split--img-left .split__media{ margin-left:calc(-1 * var(--bleed)); }
.split--img-left .split__media .photo{ aspect-ratio:5/6; }
.split--img-left .split__text{ padding-right:var(--pad); }

/* 2x2 benefits grid */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; margin:.5rem 0 2rem; }
.grid2__cell .num{ font-size:1.5rem; color:var(--gold); display:block; margin-bottom:.3rem; }
.gname{ font-family:"Hanken Grotesk",sans-serif; font-weight:500; font-size:1rem; margin-bottom:.3rem; color:var(--bone); }

/* thrive-in-five chips */
.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.chips .chips__lead{
  font-family:"Hanken Grotesk",sans-serif; font-weight:500;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-right:.4rem;
}
.chips li:not(.chips__lead){
  font-size:.8rem; font-weight:500; color:var(--bone-dim);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem;
}

/* ============================================================
   [C] WEAPONS — staggered offset cards
   ============================================================ */
.weapons{ padding:clamp(4rem,9vw,8rem) 0; background:var(--ink); }
.weapons .section-head{ text-align:center; }
.weapons .section-head .display{ margin:.6rem auto 0; }
.weapons__grid{
  max-width:var(--maxw); margin:3.5rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start;
}
.wcard--a{ margin-top:0; }
.wcard--b{ margin-top:48px; }
.wcard--c{ margin-top:24px; }
.wcard .photo--tall{ aspect-ratio:3/4.4; }
.wcard{ transition:transform .35s ease; }
.wcard:hover{ transform:translateY(-6px); }
.wcard__cap{
  position:absolute; left:1rem; right:1rem; bottom:1.1rem; z-index:3;
}
.wcard__cap .wname{ font-size:1.6rem; margin-bottom:.35rem; }
.wcard__cap .body.sm{ max-width:none; }

/* ============================================================
   [D] WIDE CINEMATIC BAND
   ============================================================ */
.band{ position:relative; width:100%; min-height:70svh; display:flex; }
.band__photo{ position:absolute; inset:0; border:none; }
.band__photo .tag{ top:1.2rem; left:auto; right:1.4rem; }
.band__text{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:6rem var(--pad);
  display:flex; flex-direction:column; justify-content:center;
}
.band__quote{ max-width:16ch; font-size:clamp(1.8rem,4vw,3.2rem); margin-top:.7rem; }

/* ============================================================
   [E] PROGRAMMES — editorial index
   ============================================================ */
.programmes{ background:var(--ink-2); padding:clamp(4rem,9vw,8rem) 0; }
.programmes__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.index{ margin-top:3rem; border-top:1px solid var(--gold-deep); }
.index__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem;
  padding:1.8rem .4rem;
  border-bottom:1px solid var(--gold-deep);
  transition:background .35s ease;
}
.index__row:hover{ background:rgba(201,168,106,.05); }
.index__age{ font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--gold); min-width:3.2ch; }
.index__body{ display:flex; flex-direction:column; gap:.3rem; }
.index__name{ font-weight:500; font-size:1.05rem; color:var(--bone); }
.index__body .body{ max-width:60ch; }
.index__go{
  font-size:1.5rem; color:var(--gold);
  transition:transform .3s ease, color .3s ease;
}
.index__row:hover .index__go{ transform:translateX(6px); color:var(--gold-bright); }
.programmes__foot{ margin-top:2rem; }

/* ============================================================
   [G] MONUMENT — pinned figure on vast field
   ============================================================ */
.monument{ background:var(--ink); padding:clamp(5rem,11vw,9rem) 0; }
.monument__inner{
  max-width:780px; margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.monument .kicker{ margin-bottom:1rem; }
.monument__title{
  font-size:clamp(2.3rem,5.5vw,4rem); max-width:16ch;
  margin-bottom:clamp(2rem,4.5vw,3.2rem);
}
.monument__fig{
  width:min(360px,80vw); margin:0 0 clamp(1.9rem,3.5vw,2.6rem);
  background:var(--char);   /* plate body so photo + caption read as one card */
}
.monument__fig .photo{ aspect-ratio:3/4; }
/* honest, legible documentary grade — much lighter than the hero/band scrim */
.monument__fig .photo::after{
  background:linear-gradient(180deg, rgba(8,8,10,.04), rgba(8,8,10,.32));
  mix-blend-mode:normal;
}
.monument__fig .placard{           /* caption strip BELOW the photo, not over it */
  position:static; padding:.9rem 1.05rem; text-align:left;
  border-top:1px solid var(--line); color:var(--bone-dim);
  font-size:.78rem; line-height:1.35; letter-spacing:.01em;
}
.monument__body{ max-width:48ch; margin:0 auto clamp(1.9rem,3.5vw,2.6rem); }

/* ============================================================
   [H] WORDMARK INTERLUDE
   ============================================================ */
.wordmark{
  background:var(--ink); text-align:center;
  padding:clamp(5rem,12vw,9rem) var(--pad);
}
.wordmark__crest{ height:56px; width:auto; margin:0 auto 1.4rem; opacity:.9; }
.wordmark__word{
  font-family:"Fraunces",serif; font-weight:340; line-height:1;
  font-size:clamp(3rem,13vw,11rem);
  letter-spacing:-.02em;
  background:linear-gradient(110deg, var(--bone) 0%, var(--bone) 38%, var(--gold-bright) 50%, var(--bone) 62%, var(--bone) 100%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:background-position 1.6s cubic-bezier(.4,0,.1,1);
}
.wordmark.in-view .wordmark__word{ background-position:0 0; }
.wordmark__sub{ margin:1.4rem auto 0; max-width:42ch; }

/* ============================================================
   [I] CLOSING
   ============================================================ */
.closing{ position:relative; width:100%; min-height:96svh; display:flex; }
.closing__photo{ position:absolute; inset:0; z-index:0; }
.closing__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:6rem var(--pad) 6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
}
.closing .display{ font-size:clamp(2.2rem,5.4vw,4.4rem); margin-bottom:1rem; }
.closing .lead{ max-width:42ch; }

/* ============================================================
   [J] FOOTER
   ============================================================ */
.footer{ background:var(--char); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,7vw,5.5rem) var(--pad) 2.5rem;
  display:grid; grid-template-columns:1.2fr 1fr 1.3fr 1fr; gap:2.5rem;
}
.footer__crest{ height:48px; width:auto; margin-bottom:1rem; }
.footer__h{
  font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.footer__list{ display:flex; flex-direction:column; gap:.6rem; }
.footer__list a{
  font-size:.92rem; color:var(--bone-dim);
  transition:color .3s ease;
}
.footer__list a:hover{ color:var(--gold-bright); }
.footer__bar{
  max-width:var(--maxw); margin:0 auto;
  padding:1.4rem var(--pad);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.82rem; color:var(--bone-dim);
}
/* agency attribution — required at the very bottom of every deliverable */
.footer__credit{
  border-top:1px solid var(--line);
  padding:1.05rem var(--pad);
  text-align:center;
  font-size:.72rem; letter-spacing:.08em;
  color:var(--bone-dim);
}
.footer__credit a{
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.footer__credit a:hover{ border-bottom-color:var(--gold); }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* image settle-in: each section's photo eases down from a slight zoom as it reveals */
.reveal .photo img{ transform:scale(1.12); transition:transform 1.5s cubic-bezier(.16,1,.3,1); }
.in-view .photo img{ transform:scale(1); }

/* staggered children */
.weapons__grid .wcard{ transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.in-view.wcard--a{ transition-delay:0ms; }
.in-view.wcard--b{ transition-delay:60ms; }
.in-view.wcard--c{ transition-delay:120ms; }
.index__row.in-view:nth-child(1){ transition-delay:0ms; }
.index__row.in-view:nth-child(2){ transition-delay:50ms; }
.index__row.in-view:nth-child(3){ transition-delay:100ms; }
.index__row.in-view:nth-child(4){ transition-delay:150ms; }

/* hero load reveal */
.hero .reveal{ opacity:0; transform:translateY(26px); }
.hero.loaded .reveal{ opacity:1; transform:none; transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1); }
.hero.loaded .reveal[data-step="1"]{ transition-delay:.05s; }
.hero.loaded .reveal[data-step="2"]{ transition-delay:.11s; }
.hero.loaded .reveal[data-step="3"]{ transition-delay:.17s; }
.hero.loaded .reveal[data-step="4"]{ transition-delay:.23s; }
/* hero photo: slow continuous Ken-Burns for cinematic life */
.hero__photo img{ animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{ 0%{ transform:scale(1.05); } 100%{ transform:scale(1.16) translate(-2%,-1.2%); } }

/* edge-bleed gated on the ACTUAL gutter, not a fixed breakpoint:
   bleed can never exceed (viewport - container)/2, so media never crosses
   the viewport edge — overflow-safe by construction, clip is a true net.
   container is centred at max-width:var(--maxw); 1px floor keeps max() valid. */
@media (min-width:1408px){
  .split{ --bleed:min(64px, max(1px, (100vw - var(--maxw)) / 2)); }
}

/* ============================================================
   RESPONSIVE — 1024
   ============================================================ */
@media (max-width:1024px){
  .nav__links{ gap:1.2rem; }
  .nav__links > a:not(.pill){ font-size:.8rem; }
  .split--img-right,
  .split--img-left{ grid-template-columns:1fr 1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2.2rem 2rem; }
}

/* ============================================================
   RESPONSIVE — 768 (R1-critical: collapse offsets & bleeds)
   ============================================================ */
@media (max-width:768px){
  :root{ --pad:1.25rem; }

  /* nav: crest + hamburger; links become a stacked dropdown overlay */
  .nav__toggle{ display:inline-flex; order:2; }
  .nav__links{
    position:fixed; top:64px; left:0; right:0; z-index:49;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(19,20,26,.98);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.25rem;
    /* collapsed by default; revealed via .nav--open */
    transform:translateY(-12px);
    opacity:0; visibility:hidden;
    transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
  }
  .nav__links.nav--open{
    transform:translateY(0); opacity:1; visibility:visible;
  }
  .nav__links > a:not(.pill){
    display:block; font-size:1rem; padding:.9rem .2rem;
    border-bottom:1px solid var(--line);
  }
  .nav__links > a:not(.pill)::after{ display:none; }
  .nav__links .pill{
    margin-top:1rem; text-align:center; align-self:flex-start;
  }

  .hero__inner{ padding:5rem 1.25rem 6.5rem; }
  .hero__credit{ display:none; }

  /* splits stack; image ABOVE text, full-bleed width, frame retained */
  .split{ grid-template-columns:1fr !important; gap:1.8rem; padding:3.5rem 0; }
  .split--img-right .split__media,
  .split--img-left .split__media{ margin:0; order:-1; }
  .split--img-right .split__media .photo,
  .split--img-left .split__media .photo,
  .split__media .photo{ aspect-ratio:4/3; }
  .split__text{ padding:0 1.25rem; }

  .grid2{ grid-template-columns:1fr; gap:1.3rem; }

  /* weapon cards: flush single column, NO offsets/transforms */
  .weapons__grid{ grid-template-columns:1fr; gap:1.4rem; }
  .wcard--a,.wcard--b,.wcard--c{ margin-top:0; }
  .wcard .photo--tall{ aspect-ratio:4/5; }

  /* band: text below, readable height */
  .band{ min-height:60svh; }
  .band__text{ padding:4.5rem 1.25rem; }
  .band__quote{ max-width:none; }

  /* index rows: 2-col (drop arrow into name column) */
  .index__row{ grid-template-columns:auto 1fr; gap:1rem; padding:1.4rem .2rem; }
  .index__go{ grid-column:2; justify-self:end; }

  .monument__fig{ width:min(320px,72vw); }

  .footer__inner{ grid-template-columns:1fr; gap:2rem; }
  .footer__bar{ flex-direction:column; gap:.6rem; }
  .closing__inner{ padding:5rem 1.25rem; }
}

/* ============================================================
   SHORT VIEWPORT (landscape phones, short laptops) — prevent the
   fixed-svh hero/closing/band copy from colliding with the pinned
   act-spine / credit. Relax vertical padding, drop the pinned decor.
   ============================================================ */
@media (max-height:640px){
  .hero__inner{ padding:4.5rem var(--pad) 3.5rem; }
  .closing__inner{ padding:4.5rem var(--pad) 3.5rem; }
  .band__text{ padding:4rem var(--pad); }
  .act-spine,
  .hero__credit{ display:none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
  .reveal,
  .hero .reveal,
  .wordmark__word{ opacity:1 !important; transform:none !important; }
  .act-spine__rule{ transform:scaleX(1) !important; }
  .hero__photo img,
  .reveal .photo img,
  .in-view .photo img{ transform:none !important; animation:none !important; }
  .wordmark__word{ background-position:0 0 !important; }
}