/* =====================================================================
   AMSB · cinematic.css · SHARED DESIGN KIT
   Extracted verbatim from index-redesign.html so every inner page can
   wear the same world: black ground, gold (lead/orthodox) + blue
   (rear/southpaw) accents, Bebas Neue display + IBM Plex Mono body,
   film grain, scroll washes, kinetic line-mask headlines, reveals,
   buttons, footer, and the Sound toggle.

   Pair with /js/cinematic.js for the motion (reveal / wash / kpr-mask).
   Load the Google Fonts (Bebas Neue + IBM Plex Mono) in the page head.
   ===================================================================== */

:root{
  --bg-deep:#040404;
  --bg:#080808;
  --bg-elev:#101010;
  --bg-card:#141414;
  --fg:#f6f5f2;
  --fg-dim:#cfccc6;
  --fg-muted:#8a8784;
  --fg-faint:#555350;
  --line:#262524;
  --line-soft:#181716;
  --gold:#c8a84b;
  --gold-glow:#eccd72;
  --gold-deep:#9c7f2f;
  --ember:#E8001E;
  --ember-glow:#ff4d5f;
  --cream:#e8e0d0;
  --ease:cubic-bezier(.2,.7,.2,1);
  --blue:#66c7dc;
  --blue-deep:#3f93a6;
  --acc:var(--gold);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg-deep);
  color:var(--fg);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* base background: deep vignette + a soft top glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% -8%, rgba(200,168,75,.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 0%, #161512 0%, var(--bg-deep) 62%),
    var(--bg-deep);
}
/* slow drifting spotlight for life */
body::after{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:radial-gradient(620px 620px at 30% 20%, rgba(200,168,75,.06), transparent 70%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%{transform:translate(-6%,-4%)}
  100%{transform:translate(10%,8%)}
}

/* ============ FILM GRAIN (Trust the Film) ============ */
.grain{
  position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-3%,3%)}70%{transform:translate(4%,2%)}90%{transform:translate(-2%,-3%)}
  100%{transform:translate(0,0)}
}

/* ============ SCROLL PROGRESS ============ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(to right,var(--gold-deep),var(--gold-glow));
  box-shadow:0 0 12px rgba(200,168,75,.6);transition:width .08s linear}

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.06em;color:var(--fg);line-height:1}
a{color:var(--gold);text-decoration:none;transition:color .18s var(--ease)}
a:hover,a:focus{color:var(--gold-glow)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
p{margin:0 0 1.4em;max-width:62ch}
::selection{background:var(--gold);color:#000}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

.eyebrow{font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.eyebrow.ember{color:var(--ember)}

.section{padding:128px 0;position:relative}
.section + .section{border-top:1px solid var(--line-soft)}
/* hairline that fades at the edges */
.section.hr::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(to right,transparent,var(--line),transparent)}

/* ============ REVEAL ON SCROLL (no-JS safe) ============ */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}

/* ============ KPR: SCROLL LIGHT-WASHES (gold/blue/ember only) ============ */
.kpr-washes{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;contain:strict}
.kpr-wash{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);will-change:opacity}
.kpr-wash.on{opacity:1}
.kpr-wash.kw-gold{background:radial-gradient(82% 74% at 50% 42%,rgba(236,205,114,.20),rgba(200,168,75,.085) 40%,transparent 72%)}
.kpr-wash.kw-blue{background:radial-gradient(90% 80% at 34% 50%,rgba(102,199,220,.18),rgba(70,150,180,.075) 42%,transparent 76%)}
.kpr-wash.kw-ember{background:radial-gradient(88% 80% at 60% 48%,rgba(255,77,95,.16),rgba(232,0,30,.06) 44%,transparent 74%)}
.kpr-wash.kw-split{background:radial-gradient(70% 70% at 22% 40%,rgba(236,205,114,.16),transparent 66%),radial-gradient(70% 74% at 80% 60%,rgba(102,199,220,.15),transparent 70%)}

/* ============ KPR: KINETIC LINE-MASK HEADLINES ============ */
.js .kpr-mask{display:block;overflow:hidden;padding-bottom:.06em}
.js .kpr-mask > span{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.js .kpr-mask.in > span{transform:none}
.js .kpr-mask.d1 > span{transition-delay:.10s}
.js .kpr-mask.d2 > span{transition-delay:.18s}

/* ============ KPR: GOLD->BLUE GRADIENT BORDER (mask-composite ring) ============ */
.kpr-edge{position:relative}
.kpr-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(236,205,114,.70),rgba(255,255,255,.05) 46%,rgba(102,199,220,.58));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  pointer-events:none;opacity:.55;transition:opacity .3s var(--ease);z-index:1}
.kpr-edge:hover::before{opacity:1}
.kpr-edge.kpr-edge-lead::before{background:linear-gradient(135deg,rgba(236,205,114,.92),rgba(236,205,114,.30) 55%,rgba(156,127,47,.5));opacity:.9}

/* ============ KPR: PER-SECTION ACCENT (--acc, gold<->blue<->ember) ============ */
.section.hr[data-wash].kpr-active::before{background:linear-gradient(to right,transparent,var(--acc),transparent);opacity:.9}
.kpr-active .eyebrow::after{content:"";display:block;width:34px;height:2px;margin:8px auto 0;background:var(--acc);box-shadow:0 0 10px var(--acc);transition:background .8s var(--ease),box-shadow .8s var(--ease)}

/* ============ KPR: reduced-motion kill-switch ============ */
@media(prefers-reduced-motion:reduce){
  .kpr-washes{display:none!important}
  .js .kpr-mask{overflow:visible!important}
  .js .kpr-mask > span{transform:none!important;transition:none!important}
  .kpr-edge::before{transition:none!important}
  .kpr-active .eyebrow::after{box-shadow:none}
}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;background:rgba(6,6,6,.72);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 32px}
.nav .mark{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:.24em;color:var(--fg);line-height:1}
.nav .mark .system-name{display:block;font-family:'IBM Plex Mono',monospace;font-size:.48rem;
  letter-spacing:.3em;color:var(--fg-faint);margin-top:3px;font-weight:400}
.nav ul{list-style:none;display:flex;gap:34px;align-items:center}
.nav .lnk{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-muted);font-weight:500;position:relative;padding:4px 0}
.nav .lnk::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--gold);transition:width .25s var(--ease)}
.nav .lnk:hover{color:var(--fg)}.nav .lnk:hover::after{width:100%}
.nav .btn{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--gold);border:1px solid var(--gold-deep);padding:9px 18px;border-radius:2px;
  transition:all .2s var(--ease)}
.nav .btn:hover{background:var(--gold);color:#000;box-shadow:0 0 24px rgba(200,168,75,.35)}
/* hamburger toggle: hidden on desktop, shown only at the mobile breakpoint below */
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:3px;
  cursor:pointer;width:44px;height:44px;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;transition:border-color .2s var(--ease)}
.nav-burger:hover{border-color:var(--gold-deep)}
.nav-burger span{display:block;width:20px;height:2px;background:var(--fg-dim);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s var(--ease),background .2s var(--ease)}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav.open .nav-burger,.nav.open .nav-burger span{border-color:var(--gold);background:var(--gold)}
.nav.open .nav-burger{background:none}

/* ============ BUTTONS ============ */
.btn-primary,.btn-ghost{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;padding:15px 28px;border-radius:2px;cursor:pointer;
  transition:all .2s var(--ease);display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:linear-gradient(180deg,var(--gold-glow),var(--gold));color:#000;border:1px solid var(--gold)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(200,168,75,.4);color:#000}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ============ SOUND TOGGLE ============ */
.snd-toggle{background:none;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);display:inline-flex;align-items:center;gap:8px;padding:4px 0}
.snd-toggle:hover{color:var(--gold)}
.snd-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.snd-eq i{width:2px;height:100%;background:var(--gold);transform-origin:bottom;animation:sndEq .9s ease-in-out infinite}
.snd-eq i:nth-child(2){animation-delay:.18s}
.snd-eq i:nth-child(3){animation-delay:.36s}
.snd-toggle.snd-off{color:var(--fg-faint)}
.snd-toggle.snd-off .snd-eq i{animation-play-state:paused;height:34%;background:var(--fg-faint)}
@keyframes sndEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ============ FOOTER ============ */
footer{background:#020202;padding:96px 0 40px;border-top:1px solid var(--line)}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
footer h5{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.3em;color:var(--gold);
  text-transform:uppercase;font-weight:600;margin-bottom:20px}
footer p,footer li{font-size:.85rem;color:var(--fg-muted);line-height:1.8}
footer ul{list-style:none}
footer a{color:var(--fg-dim)}footer a:hover{color:var(--gold)}
footer form{display:flex;flex-direction:column;gap:12px;max-width:470px}
footer form .radio{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:4px}
footer form label{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;
  color:var(--fg-muted);text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:6px;cursor:pointer}
footer form input[type=radio]{accent-color:var(--gold)}
footer form input[type=text],footer form input[type=email],footer form textarea{
  background:var(--bg-elev);border:1px solid var(--line);color:var(--fg);padding:12px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:.85rem;border-radius:3px;width:100%;transition:border-color .2s var(--ease)}
footer form input:focus,footer form textarea:focus{outline:none;border-color:var(--gold)}
footer form textarea{min-height:100px;resize:vertical}
footer form button{background:linear-gradient(180deg,var(--gold-glow),var(--gold));color:#000;border:none;
  padding:13px 26px;font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:.2em;cursor:pointer;
  border-radius:3px;align-self:flex-start;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
footer form button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(200,168,75,.35)}
footer .colophon{border-top:1px solid var(--line);padding-top:30px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:.72rem;letter-spacing:.06em;color:var(--fg-faint)}
footer .colophon .tm{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em}

/* ============ RESPONSIVE ============ */
@media(max-width:920px){
  footer .grid{grid-template-columns:1fr;gap:44px}
  .section{padding:88px 0}
  .nav ul{gap:18px}
}
@media(max-width:560px){
  .wrap{padding:0 22px}.nav .wrap{padding:14px 22px;position:relative}
  /* show the hamburger, keep the AMSB mark on the left */
  .nav-burger{display:flex}
  /* turn the inline link list into a full-width dropdown panel under the bar */
  .nav ul{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:#0a0a0a;border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .3s var(--ease),opacity .25s var(--ease),visibility .25s var(--ease)}
  .nav.open ul{max-height:80vh;opacity:1;visibility:visible}
  .nav ul li{width:100%;border-top:1px solid var(--line-soft)}
  .nav ul li:first-child{border-top:none}
  /* each tap target at least 44px tall, links stacked vertically */
  .nav .lnk{display:flex;align-items:center;width:100%;min-height:44px;padding:0 22px;
    font-size:.78rem;letter-spacing:.2em}
  .nav .lnk::after{display:none}
  .nav .lnk:hover{color:var(--gold)}
  .nav .btn{display:flex;align-items:center;width:100%;min-height:44px;border:none;border-radius:0;
    padding:0 22px;color:var(--gold);background:none}
  .nav .btn:hover{background:rgba(200,168,75,.1);color:var(--gold-glow);box-shadow:none}
  /* keep the Sound toggle reachable inside the panel */
  .nav .snd-toggle{display:flex;width:100%;min-height:44px;padding:0 22px;justify-content:flex-start}
  /* panel scrolls instead of clipping if a page ever adds more links */
  .nav.open ul{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   MOBILE HARDENING (iPhone ~390px, iOS Safari) — additive only.
   Everything here is gated behind max-width breakpoints so the desktop
   layout is untouched. Fixes: no horizontal scroll, comfortable tap
   targets, readable tiny labels, lighter section padding, safe areas,
   responsive media, and clean text wrapping.
   ===================================================================== */
@media(max-width:560px){
  /* ---- 1 / 8 · never let anything blow past the viewport ---- */
  /* belt-and-suspenders for long URLs, hashes, emails in copy & footer */
  body{overflow-x:hidden}
  /* headings: only break a token if it truly cannot fit (protect Bebas display) */
  h1,h2,h3,h4,.eyebrow,.dateline{overflow-wrap:break-word}
  /* body / links / footer: break long unbroken URLs & emails */
  p,li,a,footer .colophon{overflow-wrap:anywhere;word-break:break-word}
  /* media inside any consuming page stays inside the frame */
  img,video{max-width:100%}
  img{height:auto}

  /* ---- honor iOS safe areas (notch / Dynamic Island in landscape) ---- */
  /* add the inset to the existing 22px gutter rather than replacing it */
  .wrap{padding-left:calc(22px + env(safe-area-inset-left));
        padding-right:calc(22px + env(safe-area-inset-right))}
  .nav .wrap{padding-left:calc(22px + env(safe-area-inset-left));
             padding-right:calc(22px + env(safe-area-inset-right))}

  /* ---- 4 · lighter vertical rhythm on a phone ---- */
  .section{padding:60px 0}
  footer{padding:60px 0 calc(34px + env(safe-area-inset-bottom))}
  footer .grid{gap:40px;margin-bottom:44px}

  /* ---- 3 · rescue meaningful labels that fall under ~11px ---- */
  /* nav subtitle was ~7.7px — unreadable on a phone */
  .nav .mark .system-name{font-size:.58rem;letter-spacing:.26em}
  .nav .mark{font-size:1.2rem;letter-spacing:.2em}
  /* legal / colophon line was ~9.6px */
  footer .colophon{font-size:.7rem}
  footer .colophon .tm{font-size:.66rem}

  /* ---- 2 · roomier, tappable footer + form ---- */
  footer h5{font-size:.66rem;margin-bottom:16px}
  footer p,footer li{font-size:.9rem}
  /* give social / sitemap links real tap height without changing desktop */
  footer ul li{line-height:1}
  footer ul li a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
  /* full-width, comfortable form controls (already 100% wide; bump touch size) */
  footer form{max-width:100%}
  footer form input[type=text],footer form input[type=email],footer form textarea{
    font-size:16px;padding:14px}            /* 16px = no iOS focus zoom */
  footer form .radio{gap:14px 18px}
  footer form label{min-height:32px}
  footer form button{width:100%;align-self:stretch;padding:15px 26px;text-align:center}

  /* ---- 6 · keep the colophon off the edges & let it stack ---- */
  footer .colophon{flex-direction:column;gap:10px;align-items:flex-start}

  /* ---- 2 · shared CTA buttons (used by other pages) wrap, never overflow ---- */
  .btn-primary,.btn-ghost{width:100%;justify-content:center;
    padding:15px 22px;letter-spacing:.16em}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}