/* ============================================================
   NORTH SHORE BEEFS — Stylesheet
   Direction: Cult / Magazine-cover
   Fonts: Anton (display) + Archivo (body) + IBM Plex Mono (utility)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Colors */
  --bg:           #f5f0e6;
  --paper:        #fff8ec;
  --ink:          #0a0a0a;
  --ink-2:        #2a2a2a;
  --muted:        #666;
  --line:         #d8cfc0;
  --red:          #c8201a;
  --red-dk:       #8a1410;
  --gold:         #e8a317;
  --blue:         #0a2342;

  /* Type */
  --sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --display: 'Anton', Impact, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --max:           1280px;
  --header-h:      78px;
  --gap:           1.5rem;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    150ms var(--ease);

  /* Aliases — inner-page compatibility */
  --accent:         var(--red);
  --bg-primary:     var(--ink);
  --bg-secondary:   var(--bg);
  --bg-surface:     var(--paper);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--muted);
  --border:         var(--line);
  --border-accent:  var(--red);
  --font-display:   var(--display);
  --font-body:      var(--sans);
  --font-mono:      var(--mono);
  --header-height:  var(--header-h);
  --transition:     var(--t);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:500; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}

/* Subtle paper grain */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img,video{ display:block; max-width:100%; }
button{ background:none; border:none; cursor:pointer; font-family:inherit; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .tick-track{ animation-duration:40s!important; }
  .press-track{ animation-duration:60s!important; }
  .reveal{ transition:none!important; }
}

/* ============================================================
   PHOTO PLACEHOLDERS
   ============================================================ */
.ph{
  position:relative;
  background-color:#1a0e0c;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 14px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph::before{
  content: attr(data-label);
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
  padding:.4em .75em;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:2px; white-space:nowrap;
}
.ph > img:not(.stamp-c){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:.95; text-transform:uppercase; }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.label{
  display:inline-block;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  background:var(--red); color:var(--paper);
  padding:.3rem .65rem; margin-bottom:1.25rem;
}
.label--gold{ background:var(--gold); color:var(--ink); }
.label--ink{ background:var(--ink); color:var(--paper); }

/* ============================================================
   CONTAINERS
   ============================================================ */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:1.75rem; }
.section{ padding-block:5rem; }
.section--lg{ padding-block:7rem; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 650ms var(--ease), transform 650ms var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal--d1{ transition-delay:80ms; }
.reveal--d2{ transition-delay:160ms; }
.reveal--d3{ transition-delay:240ms; }

/* ============================================================
   BUTTONS — chunky, hard shadows
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.625rem;
  padding:.95rem 1.5rem;
  font-family:var(--display); font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-radius:0;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  cursor:pointer; white-space:nowrap;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.btn--p{ background:var(--red); color:var(--paper); }
.btn--p:hover{ box-shadow:6px 6px 0 var(--red-dk); }
.btn--ink{ background:var(--ink); color:var(--paper); box-shadow:5px 5px 0 var(--red); }
.btn--ink:hover{ box-shadow:6px 6px 0 var(--red); }
.btn--sm{ padding:.6rem 1rem; font-size:.85rem; box-shadow:4px 4px 0 var(--ink); }
.btn--sm:hover{ box-shadow:5px 5px 0 var(--ink); }

/* ============================================================
   TICKER (top of page)
   FIX: gap removed from .tick-track — baked into span padding instead
   so translateX(-50%) lands exactly on the seam.
   ============================================================ */
.tick{ background:var(--ink); color:var(--bg); overflow:hidden; border-bottom:3px solid var(--red); }
.tick-track{
  display:flex; gap:0;
  padding:.625rem 0;
  font-family:var(--display); font-size:1rem; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
  animation:tick-scroll 40s linear infinite;
}
.tick-track > span{
  display:flex; gap:2.5rem; align-items:center; flex-shrink:0;
  padding-right:2.5rem;
}
.tick-track > span::after{ content:'●'; color:var(--red); font-size:.625rem; }
@keyframes tick-scroll{ to{ transform:translateX(-50%); } }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.header-inner{
  max-width:var(--max); margin:0 auto;
  padding:.875rem 1.75rem;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.5rem;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:52px; width:auto; display:block; }

.main-nav{ justify-self:center; }
.nav-list{ display:flex; gap:0; }
.nav-link{
  padding:.625rem 1rem;
  font-family:var(--display); font-size:1rem;
  letter-spacing:.02em; text-transform:uppercase;
  border-right:1px solid var(--line);
  transition:background var(--t), color var(--t);
}
.nav-list li:first-child .nav-link{ border-left:1px solid var(--line); }
.nav-link:hover, .nav-link.active{ background:var(--ink); color:var(--paper); }
.nav-link--fenway{ color:var(--red); }
.nav-link--fenway::after{
  content:'SEPT 12';
  font-family:var(--mono); font-size:.55rem; font-weight:500;
  background:var(--red); color:var(--paper);
  padding:2px 5px; margin-left:.4rem;
  letter-spacing:.1em; vertical-align:middle;
}
.nav-link--fenway:hover{ color:var(--paper); }

.header-actions{ display:flex; align-items:center; gap:.75rem; }
.hdr-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem;
  font-family:var(--display); font-size:.95rem;
  letter-spacing:.05em; text-transform:uppercase;
  transition:background var(--t);
}
.hdr-cta:hover{ background:var(--red); }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  border:2px solid var(--ink); background:var(--paper);
}
.hamburger span{
  display:block; width:100%; height:2px; background:var(--ink);
  transition:transform var(--t), opacity var(--t);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:960px){
  .hamburger{ display:flex; }
  .header-inner{ display:flex; justify-content:space-between; align-items:center; }
  .main-nav{
    position:fixed;
    top:var(--header-h);
    left:0;
    width:100vw;
    bottom:0;
    background:var(--paper); border-top:3px solid var(--ink);
    transform:translateX(100%);
    visibility:hidden; pointer-events:none;
    transition:transform 300ms var(--ease), visibility 0s 300ms;
    overflow-y:auto; padding:2rem 1.5rem;
    z-index:200;
    box-sizing:border-box;
  }
  .main-nav.is-open{
    transform:translateX(0);
    visibility:visible; pointer-events:auto;
    transition:transform 300ms var(--ease), visibility 0s 0s;
  }
  .nav-list{ display:flex; flex-direction:column; gap:.25rem; align-items:stretch; width:100%; }
  .nav-link{ display:block; border:none!important; font-size:1.5rem; padding:.875rem 1rem; width:100%; text-align:left; }
  .hdr-cta{ display:none; }
}

/* ============================================================
   HERO — magazine cover
   ============================================================ */
.hero{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  position:relative; overflow:hidden;
}
.hero-grid{
  max-width:var(--max); margin:0 auto;
  padding:2rem 1.75rem 1.75rem;
  display:grid; grid-template-columns:1fr 1.4fr 1fr;
  gap:1.75rem;
  min-height:75vh;
}
.hero-l{
  display:flex; flex-direction:column;
  justify-content:flex-start; gap:1.25rem;
  border-right:2px solid var(--ink);
  padding-right:1.75rem;
}
.issue{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.issue strong{ color:var(--red); }
.hero-l h2{
  font-family:var(--display); font-size:1.5rem; line-height:1;
  letter-spacing:.01em; text-transform:uppercase;
  margin-top:0; margin-bottom:.625rem;
}
.hero-l h2 em{ color:var(--red); font-style:normal; display:block; }
.hero-l p{ font-size:.9rem; line-height:1.5; color:var(--ink-2); margin-bottom:1rem; }
.issue-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.issue-item{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.issue-item:first-child{ border-top:1px solid rgba(0,0,0,.1); }
.issue-num{
  font-family:var(--mono); font-size:.65rem; font-weight:700;
  letter-spacing:.12em; color:var(--red);
  flex-shrink:0; padding-top:.15rem;
}
.issue-hed{
  font-family:var(--display); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.2;
  color:var(--ink);
}
.issue-hed em{
  display:block; font-family:var(--body,sans-serif);
  font-style:normal; font-weight:400; text-transform:none;
  letter-spacing:0; font-size:.75rem; color:var(--ink-2); margin-top:.15rem;
}
.hero-l-nums{ display:flex; gap:1.25rem; padding-top:1rem; border-top:1px solid var(--ink); }
.hln{ display:flex; flex-direction:column; line-height:1; }
.hln strong{ font-family:var(--display); font-size:1.75rem; }
.hln span{
  font-family:var(--mono); font-size:.55rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:3px;
}

.hero-c{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  justify-content:flex-start; gap:.875rem;
}
.kicker{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.32em; text-transform:uppercase;
  display:flex; align-items:center; gap:.875rem;
}
.kicker::before, .kicker::after{
  content:''; width:32px; height:1px; background:var(--ink);
}
.hero-title{
  font-family:var(--display);
  font-size:clamp(4rem, 11vw, 10.5rem);
  line-height:.85; letter-spacing:-.01em;
  text-transform:uppercase; margin:0;
}
.hero-title em{
  color:var(--red); font-style:italic;
  display:inline-block; transform:rotate(-2deg);
}
.hero-tag{
  font-family:var(--display); font-size:1.4rem;
  letter-spacing:.02em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:.4rem 1rem; display:inline-block;
  transform:rotate(-1.5deg); margin-top:.25rem;
}
.hero-c-img{
  width:100%; aspect-ratio:5/4;
  border:3px solid var(--ink);
  position:relative; margin-top:.5rem;
  background:var(--paper);
}
.stamp-c{
  position:absolute; top:15px; right:15px;
  width:120px; height:120px;
  transform:rotate(8deg);
  z-index:2; display:block;
}

.hero-r{
  display:flex; flex-direction:column;
  justify-content:flex-start;
  border-left:2px solid var(--ink);
  padding-left:1.75rem; gap:1.25rem;
}
.blurb{ font-size:.975rem; line-height:1.55; color:var(--ink-2); }
.blurb-h{
  font-family:var(--display); font-size:1.15rem;
  letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:.4rem; color:var(--red);
}
.pricetag{
  display:flex; justify-content:space-between; align-items:end;
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--ink);
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.pricetag strong{
  font-family:var(--display); font-size:1.5rem;
  color:var(--red); letter-spacing:.02em;
}

.hero-cta{
  padding:1.25rem 1.75rem 2rem;
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:center; gap:.875rem; flex-wrap:wrap;
}

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; }
  .hero-l, .hero-r{ border:none; padding:0; }
  .hero-l{ order:2; border-top:1px solid var(--ink); padding-top:1.5rem; }
  .hero-r{ order:3; border-top:1px solid var(--ink); padding-top:1.5rem; }
  .hero-c{ order:1; }
  .hero-title{ font-size:clamp(3.5rem, 16vw, 6rem); }
  .stamp-c{ width:70px; height:70px; top:8px; right:8px; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--ink); color:var(--paper); border-bottom:3px solid var(--red); }
.stats-in{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:2.5rem 2rem; text-align:center;
  border-right:1px solid #333;
}
.stat:last-child{ border-right:none; }
.stat-n{
  font-family:var(--display);
  font-size:clamp(3rem, 6vw, 5.25rem);
  line-height:.9; letter-spacing:-.02em;
}
.stat-n em{ color:var(--red); font-style:normal; }
.stat-l{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:#999; margin-top:.5rem;
}
@media (max-width:768px){
  .stats-in{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid #333; }
}

/* ============================================================
   THE WIRE — editorial newswire strip
   ============================================================ */
.wire{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  padding:3rem 1.75rem 3.5rem;
  position:relative;
}
.wire-in{ max-width:var(--max); margin:0 auto; }
.wire-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:3px solid var(--ink); padding-bottom:.625rem;
  margin-bottom:1.75rem;
}
.wire-badge{
  background:var(--ink); color:var(--paper);
  padding:.3rem .7rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.25em; text-transform:uppercase;
}
.wire-time{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.wire-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
}
.wire-item{
  padding:1.5rem;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  transition:background var(--t);
}
.wire-item:hover{ background:#fff2d9; }
.wire-tag{
  display:inline-block;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase;
  background:var(--red); color:var(--paper);
  padding:.2rem .55rem; margin-bottom:.75rem;
}
.wire-tag--gold{ background:var(--gold); color:var(--ink); }
.wire-tag--ink{ background:var(--ink); color:var(--paper); }
.wire-item h3{
  font-family:var(--display); font-size:1.4rem;
  line-height:1; letter-spacing:.01em;
  text-transform:uppercase; margin-bottom:.625rem;
}
.wire-item p{
  font-size:.9rem; line-height:1.5;
  color:var(--ink-2);
}
@media (max-width:860px){
  .wire-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   WHAT IS A NORTH SHORE BEEF
   ============================================================ */
.wis{ padding:5rem 1.75rem; background:var(--paper); border-bottom:3px solid var(--ink); }
.wis-in{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:4rem; align-items:center;
}
.wis h2{
  font-family:var(--display); font-size:clamp(2.75rem, 6vw, 5rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.wis h2 em{ color:var(--red); font-style:italic; }
.wis p{
  font-size:1.05rem; line-height:1.6;
  color:var(--ink-2); margin-bottom:1rem; max-width:520px;
}
.wis-img{
  aspect-ratio:1/1;
  border:4px solid var(--ink);
  box-shadow:14px 14px 0 var(--red);
}
@media (max-width:860px){
  .wis-in{ grid-template-columns:1fr; gap:2.5rem; }
  .wis-img{ box-shadow:8px 8px 0 var(--red); }
}

/* ============================================================
   ANATOMY — exploded diagram
   ============================================================ */
.anat{
  padding:5rem 1.75rem;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  position:relative;
  background-image:
    linear-gradient(to right, rgba(10,10,10,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.04) 1px, transparent 1px);
  background-size:40px 40px, 40px 40px;
}
.anat-in{ max-width:var(--max); margin:0 auto; }
.anat-hd{ text-align:center; margin-bottom:3.5rem; }
.anat-hd h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 4.75rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
  margin-bottom:.75rem;
}
.anat-hd h2 em{ color:var(--red); font-style:italic; }
.anat-sub{
  font-family:var(--mono); font-size:.85rem;
  color:var(--muted); max-width:520px; margin:0 auto;
}

.anat-stage{
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:4rem; align-items:center;
}

.anat-stack{
  position:relative;
  display:flex; flex-direction:column;
  gap:1.25rem;
  padding:2rem 0;
}
.layer{
  position:relative;
  display:grid; grid-template-columns:220px 1fr 1.6fr;
  align-items:center; gap:1.5rem;
}
.layer-visual{
  height:28px; width:100%;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  position:relative;
}
.l-bot{
  background:radial-gradient(ellipse at bottom, #d4a366 40%, #c08c4f 70%);
  border-radius:6px 6px 120px 120px / 6px 6px 60px 60px;
  height:32px;
}
.l-cheese{
  background:repeating-linear-gradient(-45deg,
    var(--gold) 0 8px, #f2b436 8px 16px);
  height:18px;
}
.l-beef{
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.15) 0 2px,
      transparent 2px 6px),
    linear-gradient(180deg, #7a1a1a 0%, #a02323 40%, #6a1515 100%);
  height:52px;
}
.l-mayo{
  background:linear-gradient(180deg, #fff8ec 0%, #eadaa8 100%);
  height:14px;
}
.l-bbq{
  background:
    radial-gradient(ellipse at 25% 50%, #5a1408 15%, transparent 40%),
    radial-gradient(ellipse at 70% 50%, #3a0d04 12%, transparent 35%),
    linear-gradient(180deg, #6b180a, #4a1006);
  height:14px;
}
.l-top{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.25) 2px, transparent 3px),
    radial-gradient(circle at 60% 20%, rgba(0,0,0,.22) 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,.2) 2px, transparent 3px),
    radial-gradient(circle at 40% 50%, rgba(0,0,0,.18) 1.5px, transparent 2.5px),
    radial-gradient(ellipse at top, #d4a366 40%, #a87836 75%);
  border-radius:140px 140px 6px 6px / 70px 70px 6px 6px;
  height:38px;
}
.layer--bot .layer-visual{ box-shadow:3px 4px 0 var(--ink); }
.layer--hero .layer-visual{ box-shadow:4px 4px 0 var(--red); }

.layer-pull{
  height:1px; background:var(--ink);
  position:relative;
}
.layer-pull::before{
  content:''; position:absolute; left:-4px; top:-3px;
  width:7px; height:7px; background:var(--ink); border-radius:50%;
}
.layer-pull::after{
  content:''; position:absolute; right:-4px; top:-3px;
  width:7px; height:7px; background:var(--red); border-radius:50%;
}
.layer-info{ display:flex; flex-direction:column; gap:.15rem; }
.layer-num{
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.25em; color:var(--red);
  text-transform:uppercase;
}
.layer-info h4{
  font-family:var(--display); font-size:1.25rem;
  line-height:1; letter-spacing:.01em;
  text-transform:uppercase;
}
.layer-info p{
  font-size:.82rem; line-height:1.45;
  color:var(--ink-2);
}

.anat-meta{
  background:var(--ink); color:var(--paper);
  padding:1.75rem;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--red);
  display:flex; flex-direction:column; gap:.1rem;
}
.meta-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.75rem 0;
  border-bottom:1px dashed #333;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:#aaa;
}
.meta-row:last-child{ border-bottom:none; }
.meta-row strong{
  font-family:var(--display); font-size:1.4rem;
  letter-spacing:.02em; color:var(--paper);
}

@media (max-width:960px){
  .anat-stage{ grid-template-columns:1fr; gap:2.5rem; }
  .layer{ grid-template-columns:140px 1fr; }
  .layer-pull{ display:none; }
  .layer-info{ grid-column:2; }
}
@media (max-width:560px){
  .layer{ grid-template-columns:100px 1fr; gap:1rem; }
}

/* ============================================================
   COMMANDMENTS
   ============================================================ */
.comm{
  padding:5.5rem 1.75rem;
  background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--red);
  position:relative; overflow:hidden;
}
.comm::before{
  content:'X.';
  position:absolute; right:-2rem; bottom:-6rem;
  font-family:var(--display);
  font-size:clamp(18rem, 32vw, 32rem);
  line-height:.9;
  color:rgba(200,32,26,.08);
  letter-spacing:-.04em;
  pointer-events:none;
}
.comm-in{ max-width:var(--max); margin:0 auto; position:relative; }
.comm-hd{ margin-bottom:3rem; max-width:720px; }
.comm-hd .eyebrow{ color:var(--gold); margin-bottom:.75rem; display:block; }
.comm-hd h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 5rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.comm-hd h2 em{ color:var(--red); font-style:italic; }

.comm-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid #2a2a2a;
  border-left:1px solid #2a2a2a;
}
.comm-list li{
  display:grid; grid-template-columns:auto 1fr;
  gap:1.25rem; align-items:start;
  padding:1.25rem 1.5rem;
  border-right:1px solid #2a2a2a;
  border-bottom:1px solid #2a2a2a;
  transition:background var(--t);
}
.comm-list li:hover{ background:#161616; }
.c-n{
  font-family:var(--display); font-size:2.5rem;
  line-height:.9; letter-spacing:-.02em;
  color:var(--red);
  min-width:2.5rem;
}
.comm-list p{
  font-size:1rem; line-height:1.5;
  color:#ddd;
  padding-top:.25rem;
}
.comm-list p em{
  color:var(--gold); font-style:normal; font-weight:700;
}
@media (max-width:760px){
  .comm-list{ grid-template-columns:1fr; }
}

/* ============================================================
   APP SECTION
   ============================================================ */
.app{
  padding:5rem 1.75rem;
  background:var(--blue); color:var(--paper);
  border-bottom:3px solid var(--ink);
  position:relative; overflow:hidden;
}
.app::before{
  content:'THE MAP';
  position:absolute;
  font-family:var(--display);
  font-size:clamp(15rem, 30vw, 28rem);
  line-height:.9;
  color:rgba(255,255,255,.04);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  letter-spacing:-.02em;
  text-transform:uppercase;
  pointer-events:none; white-space:nowrap;
}
.app-in{
  position:relative; max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
}
.app h2{
  font-family:var(--display);
  font-size:clamp(2.75rem, 6vw, 5rem);
  line-height:.9; text-transform:uppercase;
  margin-bottom:1.5rem; letter-spacing:-.01em;
}
.app h2 em{ color:var(--gold); font-style:italic; }
.app p{
  font-size:1.05rem; line-height:1.6;
  margin-bottom:1.5rem; max-width:480px;
  color:rgba(255,255,255,.85);
}
.app-feats{
  display:flex; flex-direction:column; gap:.625rem;
  margin-bottom:2rem;
  font-family:var(--mono); font-size:.85rem;
}
.app-feats li{ display:flex; gap:.625rem; align-items:center; }
.app-feats li::before{ content:'→'; color:var(--gold); font-weight:700; }

.app-badges{ display:flex; gap:.875rem; flex-wrap:wrap; }
.app-badge{
  display:flex; align-items:center; gap:.625rem;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1rem;
  border:2px solid var(--paper);
  transition:background var(--t), border-color var(--t);
}
.app-badge:hover{ background:var(--red); border-color:var(--red); }
.app-badge-icon{ width:22px; height:22px; flex-shrink:0; }
.app-badge-text{ display:flex; flex-direction:column; line-height:1.1; }
.app-badge-text small{ font-size:.55rem; letter-spacing:.04em; color:#aaa; }
.app-badge-text strong{
  font-family:var(--display); font-size:.95rem;
  letter-spacing:.02em; text-transform:uppercase;
}

.app-r{ display:flex; justify-content:center; position:relative; z-index:2; }

.phone-mockup{
  width:280px; aspect-ratio:9/19;
  border:8px solid #fff8ec;
  border-radius:42px;
  background:#0a0a0a; position:relative;
  box-shadow:14px 14px 0 var(--red), 0 30px 80px rgba(0,0,0,.5);
  transform:rotate(-3deg);
}
.phone-mockup::before{
  content:'';
  position:absolute; top:14px; left:50%;
  transform:translateX(-50%);
  width:90px; height:22px;
  background:#0a0a0a; border-radius:14px;
  z-index:2;
}
.phone-screen{
  position:absolute; inset:6px;
  border-radius:34px; overflow:hidden;
  background:#fff8ec;
}
.phone-screen > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }
.phone-map{
  position:absolute; inset:0; background:#fff8ec;
  background-image:
    linear-gradient(to right, rgba(10,35,66,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,35,66,.18) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, rgba(232,163,23,.2), transparent 50%);
  background-size:30px 30px, 30px 30px, 100% 100%;
}
.phone-pin{
  position:absolute; width:14px; height:14px;
  background:var(--red);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 0 3px rgba(200,32,26,.25);
}
.phone-pin--gold{ background:var(--gold); box-shadow:0 0 0 3px rgba(232,163,23,.3); }
.phone-tag{
  position:absolute; top:55px; left:50%;
  transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  padding:.5rem .875rem;
  font-family:var(--display); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:860px){
  .app-in{ grid-template-columns:1fr; gap:3rem; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev{ padding:5rem 1.75rem; background:var(--paper); border-bottom:3px solid var(--ink); }
.rev-in{ max-width:var(--max); margin:0 auto; }
.rev-hd{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:2.5rem; gap:2rem; flex-wrap:wrap;
  border-bottom:3px solid var(--ink); padding-bottom:1.25rem;
}
.rev-hd h2{
  font-family:var(--display);
  font-size:clamp(2.75rem, 6vw, 5rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.rev-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

.card{
  position:relative;
  background:var(--paper);
  border:3px solid var(--ink);
  transition:transform var(--t), box-shadow var(--t);
  cursor:pointer;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--red); }
.card-rank{
  position:absolute; top:.625rem; left:.625rem;
  width:auto; min-width:38px; height:38px; padding:0 .5rem; white-space:nowrap;
  background:var(--red); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.1rem;
  border:2px solid var(--ink);
  z-index:2;
}
.card-img{ aspect-ratio:4/3; border-bottom:3px solid var(--ink); }
.card-body{ padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.card-town{
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.4rem;
}
.card-name{
  font-family:var(--display); font-size:1.55rem;
  line-height:.95; text-transform:uppercase;
  margin-bottom:.625rem; letter-spacing:.01em;
}
.rating{
  display:flex; align-items:center; gap:.25rem;
  margin-bottom:.875rem; padding-bottom:.875rem;
  border-bottom:1px dashed #ccc;
}
.beef{
  width:14px; height:14px;
  background:var(--red);
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  opacity:.2;
}
.beef.on{ opacity:1; }
.rating-n{
  margin-left:.4rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; color:var(--muted); font-weight:500;
}
.card-q{
  font-size:.95rem; line-height:1.5;
  color:var(--ink-2); flex:1; margin-bottom:1rem;
}
.card-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:.875rem;
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.card-foot .verified{ color:var(--red); font-weight:700; }

@media (max-width:960px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rev-grid{ grid-template-columns:1fr; } }

/* ============================================================
   GAUNTLET — town leaderboard
   ============================================================ */
.gaunt{
  padding:5rem 1.75rem;
  background:var(--bg);
  border-bottom:3px solid var(--ink);
}
.gaunt-in{ max-width:var(--max); margin:0 auto; }
.gaunt-hd{
  display:flex; justify-content:space-between; align-items:end;
  gap:2rem; flex-wrap:wrap;
  margin-bottom:2rem;
  padding-bottom:1.25rem;
  border-bottom:3px solid var(--ink);
}
.gaunt-hd h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 4.75rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.gaunt-hd h2 em{ color:var(--red); font-style:italic; }
.gaunt-sub{
  font-family:var(--mono); font-size:.85rem;
  color:var(--muted); margin-top:.5rem;
}
.gaunt-legend{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  flex-wrap:wrap;
}
.g-dot{
  display:inline-block; width:10px; height:10px;
  background:var(--ink); border-radius:50%;
  margin:0 .35rem 0 0;
}
.g-dot--red{ background:var(--red); }
.g-dot--gold{ background:var(--gold); }

.gaunt-scroll{
  overflow-x:auto; overflow-y:hidden;
  margin:0 -1.75rem; padding:0 1.75rem;
  scrollbar-width:thin;
  scrollbar-color:var(--ink) var(--bg);
  scroll-snap-type:x mandatory;
}
.gaunt-scroll::-webkit-scrollbar{ height:8px; }
.gaunt-scroll::-webkit-scrollbar-thumb{ background:var(--ink); }
.gaunt-scroll::-webkit-scrollbar-track{ background:var(--line); }

.gaunt-track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:300px;
  gap:1.25rem;
  padding-bottom:1rem;
}
.town{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:1.25rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:transform var(--t), box-shadow var(--t);
  scroll-snap-align:start;
}
.town:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--red); }
.town-hd{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:1rem;
  padding-bottom:1rem; border-bottom:2px solid var(--ink);
}
.town-rank{
  font-family:var(--display); font-size:2.25rem;
  line-height:.9; letter-spacing:-.02em;
  color:var(--red);
}
.town-hd h3{
  font-family:var(--display); font-size:1.75rem;
  line-height:1; letter-spacing:.01em; text-transform:uppercase;
}
.town-meta{
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:block; margin-top:.2rem;
}
.town-crown{
  background:var(--gold); color:var(--ink);
  padding:.25rem .5rem;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
  border:2px solid var(--ink);
  transform:rotate(6deg);
}
.town-list{ display:flex; flex-direction:column; gap:.375rem; }
.town-list li{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:.75rem; align-items:baseline;
  padding:.4rem 0;
  border-bottom:1px dashed var(--line);
}
.town-list li:last-child{ border-bottom:none; }
.t-rank{
  font-family:var(--mono); font-size:.7rem;
  color:var(--muted);
  font-weight:500;
}
.t-name{
  font-family:var(--display); font-size:1rem;
  letter-spacing:.02em; text-transform:uppercase;
}
.t-rate{
  font-family:var(--display); font-size:1.1rem;
  letter-spacing:.01em; color:var(--red);
}
.town-quote{
  font-family:var(--mono); font-size:.72rem;
  line-height:1.4; color:var(--ink-2);
  padding-top:.75rem; border-top:2px solid var(--ink);
  font-style:italic;
}
.gaunt-foot{
  margin-top:1.75rem; padding-top:1.25rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.gaunt-note{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; color:var(--muted);
}
.gaunt-note a{ color:var(--red); text-decoration:underline; }

/* ============================================================
   FIELD NOTES — ransom-note pull quotes
   ============================================================ */
.fnotes{
  padding:5rem 1.75rem;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  position:relative;
}
.fnotes-in{ max-width:var(--max); margin:0 auto; }
.fnotes-hd{ margin-bottom:3rem; text-align:center; }
.fnotes-hd .eyebrow{ display:block; margin-bottom:.75rem; }
.fnotes-hd h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 6vw, 4.75rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.fnotes-hd h2 em{ color:var(--red); font-style:italic; }

.fnotes-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}
.fnote{
  background:var(--paper);
  border:3px solid var(--ink);
  padding:1.75rem;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
  transition:transform var(--t), box-shadow var(--t);
}
.fnote::before{
  content:'\201C';
  position:absolute; top:-.5rem; left:.625rem;
  font-family:var(--display); font-size:9rem;
  line-height:1; color:var(--ink);
  opacity:.13; pointer-events:none; z-index:0;
}
.fnote p, .fnote footer{ position:relative; z-index:1; }
.fnote p{
  font-family:var(--display); font-size:1.5rem;
  line-height:1.1; letter-spacing:.01em;
  text-transform:uppercase; margin-bottom:1.25rem;
}
.fnote p em{ color:var(--red); font-style:italic; }
.fnote footer{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  padding-top:.875rem; border-top:1px dashed var(--line);
}
.fnote--1{ transform:rotate(-1deg); }
.fnote--2{ transform:rotate(1deg); background:#fff2d9; }
.fnote--3{ transform:rotate(.5deg); }
.fnote--4{ transform:rotate(-.75deg); background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 var(--red); }
.fnote--4::before{ color:var(--paper); opacity:.12; }
.fnote--4 p em{ color:var(--gold); }
.fnote--4 footer{ color:#aaa; border-top-color:#333; }
.fnote:hover{ transform:rotate(0) translate(-2px,-2px); box-shadow:8px 8px 0 var(--red); }
@media (max-width:760px){
  .fnotes-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FENWAY CALLOUT
   ============================================================ */
.fen{
  position:relative;
  padding:5rem 1.75rem;
  background:var(--red); color:var(--paper);
  overflow:hidden; text-align:center;
  border-bottom:3px solid var(--ink);
}
.fen::before{
  content:'FENWAY';
  position:absolute;
  font-family:var(--display);
  font-size:clamp(18rem, 38vw, 36rem);
  line-height:.9;
  color:rgba(0,0,0,.1);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  letter-spacing:-.02em;
  pointer-events:none;
}
.fen-in{ position:relative; max-width:1000px; margin:0 auto; }
.fen-bar{
  display:inline-flex; align-items:center; gap:.875rem;
  padding:.5rem 1rem;
  background:var(--ink);
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.25em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.fen-bar .dot{
  width:8px; height:8px; background:var(--gold);
  border-radius:50%; animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.fen h2{
  font-family:var(--display);
  font-size:clamp(3rem, 10vw, 8rem);
  line-height:.85; letter-spacing:-.01em; text-transform:uppercase;
  margin-bottom:1.25rem;
  text-shadow:5px 5px 0 var(--ink);
}
.fen h2 em{ font-style:italic; color:var(--gold); }
.fen p{ font-size:1.15rem; max-width:560px; margin:0 auto 2rem; }
.countdown{
  display:flex; gap:1rem; justify-content:center;
  margin-bottom:2rem; flex-wrap:wrap;
}
.cdu{
  background:var(--ink); color:var(--paper);
  padding:1rem 1.25rem; min-width:90px;
  border:3px solid var(--paper);
  text-align:center;
}
.cdu-n{
  font-family:var(--display); font-size:2.5rem;
  line-height:.9; letter-spacing:-.02em;
  display:block;
}
.cdu-l{
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:#aaa; margin-top:.4rem; display:block;
}

/* ============================================================
   PRESS / AS HEARD ON
   FIX: animation moved to .press-inner wrapper;
   translateX(-50%) on the whole inner row instead of
   translateX(-100%) on each individual track.
   ============================================================ */
.press{
  padding:2.5rem 0;
  background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--red);
  overflow:hidden;
  position:relative;
}
.press-in{ position:relative; }
.press-hd{ text-align:center; margin-bottom:1.25rem; padding:0 1.75rem; }
.press-hd .eyebrow{ color:var(--gold); }
.press-marquee{
  overflow:hidden;
  border-top:1px solid #2a2a2a;
  border-bottom:1px solid #2a2a2a;
  padding:1.25rem 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.press-inner{
  display:flex; gap:0;
}
.press-track{
  display:flex; gap:2.5rem; align-items:center;
  flex-shrink:0; padding-right:2.5rem;
  animation:press-scroll 60s linear infinite;
  will-change:transform;
}
.p-logo{
  font-family:var(--display); font-size:1.5rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--paper);
}
.p-logo em{
  font-family:var(--sans); font-size:.95rem; font-weight:400;
  letter-spacing:.03em; text-transform:none; font-style:italic;
  color:#888; margin-left:.4rem;
}
.p-dot{ color:var(--red); font-size:.65rem; }
@keyframes press-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* ============================================================
   EMAIL CAPTURE
   ============================================================ */
.email-cap{ padding:5rem 1.75rem; background:var(--paper); border-bottom:3px solid var(--ink); text-align:center; }
.email-cap-in{ max-width:560px; margin:0 auto; }
.email-cap h2{
  font-family:var(--display);
  font-size:clamp(2.5rem, 5vw, 4rem);
  line-height:.95; text-transform:uppercase;
  letter-spacing:-.01em; margin-bottom:1rem;
}
.email-cap h2 em{ color:var(--red); font-style:italic; }
.email-cap p{ font-size:1.05rem; color:var(--ink-2); margin-bottom:2rem; }

.email-form{
  display:flex; gap:0; max-width:480px; margin:0 auto;
  border:3px solid var(--ink); background:var(--paper);
  box-shadow:5px 5px 0 var(--ink);
}
.email-form input{
  flex:1; padding:1rem 1.25rem;
  background:transparent; border:none;
  font-family:var(--sans); font-size:1rem; font-weight:500;
  color:var(--ink);
}
.email-form input::placeholder{ color:var(--muted); }
.email-form input:focus{ outline:none; background:rgba(0,0,0,.03); }
.email-form button{
  padding:1rem 1.25rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--display); font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase;
  border-left:3px solid var(--ink);
  transition:background var(--t);
}
.email-form button:hover{ background:var(--red); }

@media (max-width:480px){
  .email-form{ flex-direction:column; }
  .email-form button{ border-left:none; border-top:3px solid var(--ink); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  padding:3rem 1.75rem 2rem;
  background:var(--ink); color:var(--paper);
}
.footer-inner{ max-width:var(--max); margin:0 auto; }
.footer-top{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid #333;
}
.footer-brand{ display:flex; align-items:center; gap:.625rem; }
.footer-nav{
  display:flex; flex-wrap:wrap; gap:.25rem 1.5rem;
  align-items:center; justify-content:center;
}
.footer-nav a{
  font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:#999; transition:color var(--t);
}
.footer-nav a:hover{ color:var(--paper); }

.footer-social{ display:flex; gap:.625rem; }
.social-icon{
  display:grid; place-items:center;
  width:40px; height:40px;
  background:transparent; color:#999;
  border:1px solid #333;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.social-icon:hover{ color:var(--paper); border-color:var(--paper); background:#1a1a1a; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; padding-top:1.5rem; flex-wrap:wrap;
}
.footer-app-badges{ display:flex; gap:.625rem; }
.footer-copy{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:#666;
}

@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr; text-align:center; gap:1.5rem; }
  .footer-brand, .footer-nav, .footer-social{ justify-content:center; justify-self:center; }
  .footer-bottom{ flex-direction:column-reverse; text-align:center; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.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;
}

/* Fade-up entrance (hero — above fold, fires on load) */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.fade-up{ animation:fadeUp 600ms var(--ease) both; }
.fade-up--d1{ animation-delay:80ms; }
.fade-up--d2{ animation-delay:160ms; }
.fade-up--d3{ animation-delay:240ms; }
.fade-up--delay-1{ animation-delay:80ms; }
.fade-up--delay-2{ animation-delay:160ms; }
.fade-up--delay-3{ animation-delay:240ms; }

/* ============================================================
   NAV BADGE
   ============================================================ */
.nav-badge{
  display:inline-block;
  background:var(--red); color:var(--paper);
  padding:.15rem .4rem;
  font-family:var(--mono); font-size:.55rem;
  letter-spacing:.1em; text-transform:uppercase;
  vertical-align:middle; margin-left:.3rem;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.page-wrap{ display:block; }
.container--narrow{ max-width:760px; }
.section--sm{ padding-block:3rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.flex-between{ display:flex; justify-content:space-between; align-items:center; }
.text-center{ text-align:center; }
.divider{ border:none; border-top:3px solid var(--ink); margin:0; }

@media (max-width:760px){
  .grid-2{ grid-template-columns:1fr; }
}

/* ============================================================
   DISPLAY TYPOGRAPHY
   ============================================================ */
.display-lg{
  font-family:var(--display);
  font-size:clamp(3.5rem,8vw,6rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.display-md{
  font-family:var(--display);
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
}
.display-sm{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:.95; letter-spacing:-.01em; text-transform:uppercase;
}
.body-lg{ font-size:1.05rem; line-height:1.6; color:var(--ink-2); }

/* ============================================================
   BUTTON VARIANTS
   ============================================================ */
.btn--primary{
  background:var(--red); color:var(--paper);
  border-color:var(--red);
  box-shadow:5px 5px 0 var(--red-dk);
}
.btn--primary:hover{ box-shadow:6px 6px 0 var(--red-dk); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:none; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:none; }
.btn--app{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem;
  font-family:var(--display); font-size:.95rem;
  letter-spacing:.05em; text-transform:uppercase;
  border:none; box-shadow:none;
  transition:background var(--t);
}
.btn--app:hover{ background:var(--red); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.form-label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.form-input,
.form-select,
.form-textarea{
  padding:.75rem 1rem;
  background:var(--paper); border:2px solid var(--ink);
  font-family:var(--sans); font-size:1rem; color:var(--ink); width:100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{ outline:3px solid var(--red); outline-offset:2px; }
.form-textarea{ min-height:120px; resize:vertical; }

/* ============================================================
   COMPONENTS
   ============================================================ */
.feature-list{ display:flex; flex-direction:column; gap:1.25rem; }
.feature-item{ display:flex; gap:1rem; align-items:flex-start; }
.feature-item__icon{ width:20px; height:20px; flex-shrink:0; margin-top:.15rem; color:var(--red); }
.feature-item__title{
  font-family:var(--display); font-size:1rem;
  letter-spacing:.02em; text-transform:uppercase; margin-bottom:.25rem;
}
.feature-item__body{ font-size:.9rem; line-height:1.5; color:var(--ink-2); }

.pull-quote{ border-left:4px solid var(--red); padding-left:1.25rem; margin:1.5rem 0; }
.pull-quote__text{
  font-family:var(--display); font-size:1.25rem;
  line-height:1.1; text-transform:uppercase; letter-spacing:.01em;
}

.filter-bar{ display:flex; gap:.375rem; flex-wrap:wrap; padding:1rem 0; overflow-x:auto; }
.filter-btn{
  display:inline-flex; align-items:center;
  padding:.4rem .875rem;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--paper); border:2px solid var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:background var(--t), color var(--t);
}
.filter-btn:hover,
.filter-btn.active{ background:var(--ink); color:var(--paper); }

.nsb-badge{
  display:inline-block;
  background:var(--red); color:var(--paper);
  padding:.2rem .55rem;
  font-family:var(--mono); font-size:.65rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:2px solid var(--red);
}

/* ============================================================
   COUNTDOWN SUB-CLASSES
   ============================================================ */
.countdown__unit{
  display:flex; flex-direction:column; align-items:center;
  background:var(--ink); padding:1rem 1.25rem; min-width:90px;
  border:3px solid var(--paper); text-align:center;
}
.countdown__number{ font-family:var(--display); font-size:2.5rem; line-height:.9; letter-spacing:-.02em; display:block; color:var(--paper); }
.countdown__label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:#aaa; margin-top:.4rem; display:block; }
.countdown__sep{ font-family:var(--display); font-size:2.5rem; display:flex; align-items:center; color:rgba(255,255,255,.4); padding-bottom:.5rem; }
@media (max-width:480px){
  .countdown{ gap:.375rem; }
  .cdu{ min-width:0; flex:1; padding:.75rem .375rem; }
  .cdu-n{ font-size:1.75rem; }
  .countdown__unit{ min-width:0; flex:1; padding:.75rem .375rem; }
  .countdown__number{ font-size:1.75rem; }
  .countdown__sep{ font-size:1.75rem; padding-bottom:.25rem; }
}

/* ============================================================
   FOOTER ADDITIONS
   ============================================================ */
.footer-logo{ display:flex; align-items:center; gap:.625rem; }
.app-badge-img{ height:36px; width:auto; }