/* =====================================================
   THE GRID MAGAZINE — site stylesheet
   Brand: black / white / red, matching the print cover
   ===================================================== */

:root{
  --bg:#0a0a0a;
  --surface:#141414;
  --surface2:#1b1b1b;
  --line:#2a2a2a;
  --red:#e8342a;
  --red-dark:#b3241b;
  --white:#ffffff;
  --text:#e7e7e7;
  --muted:#9b9b9b;
  --max-width:1180px;
  --radius:6px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:16px;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.container{
  width:min(92%, var(--max-width));
  margin:auto;
}

h1,h2,h3,h4{
  font-family:'Anton', 'Arial Narrow', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--white);
  line-height:1.05;
}

h2{ font-size:2.1rem; margin-bottom:22px; }
h3{ font-size:1.15rem; margin-bottom:10px; letter-spacing:.3px; }

.eyebrow{
  display:inline-block;
  color:var(--red);
  letter-spacing:3px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:14px;
}

.rule{
  width:64px;
  height:3px;
  background:var(--red);
  margin:18px 0 26px;
  border:none;
}

.rule.center{ margin-left:auto; margin-right:auto; }

.lead{
  max-width:680px;
  font-size:1.12rem;
  color:#d4d4d4;
}

.muted{ color:var(--muted); }

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:2px;
  background:var(--red);
  color:var(--white);
  text-decoration:none;
  font-family:'Anton', sans-serif;
  letter-spacing:1px;
  font-size:.92rem;
  text-transform:uppercase;
  border:2px solid var(--red);
  transition:.25s;
  cursor:pointer;
}

.btn:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }

.btn.ghost{
  background:transparent;
  border:2px solid var(--white);
  color:var(--white);
}

.btn.ghost:hover{ background:var(--white); color:var(--bg); }

.btn.block{ width:100%; text-align:center; }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }

/* ---------- Promo Bar ---------- */

.promo-bar{ background:var(--red); }

.promo-bar-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  padding:11px 0;
  text-align:center;
}

.promo-bar-inner p{
  margin:0;
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:.92rem;
  font-weight:500;
}

.promo-bar-inner strong{ font-weight:800; }

.promo-bar .promo-btn{
  background:var(--bg);
  border-color:var(--bg);
  color:var(--white);
  padding:8px 18px;
  font-size:.76rem;
}

.promo-bar .promo-btn:hover{ background:#000; border-color:#000; transform:none; }

@media (max-width:600px){
  .promo-bar-inner{ flex-direction:column; gap:8px; padding:12px 0; }
}

/* ---------- Header / Nav ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(10,10,10,.92);
  border-bottom:1px solid var(--line);
}
/* Note: backdrop-filter intentionally removed here -- in Safari/WebKit,
   an ancestor with backdrop-filter creates a new containing block for any
   position:fixed descendant, which broke the mobile nav dropdown (nested
   inside this header) on iPhone/iPad. The header stays legible without it
   thanks to the 92%-opacity dark background above. */

.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  /* Wider than the site's normal 1180px content cap -- with 8 nav items
     (some 2-3 words) plus the logo and Subscribe button, 1180px forces
     multi-word links to wrap onto two lines. This only matters between
     the ~900px hamburger breakpoint and this width; below 900px the
     hamburger nav takes over regardless. */
  width:min(96%, 1500px);
}

.brand{
  font-family:'Anton', sans-serif;
  font-size:1.5rem;
  letter-spacing:1px;
  text-decoration:none;
  color:var(--white);
  display:flex;
  align-items:baseline;
  gap:6px;
}

.brand span{ color:var(--red); }

.brand-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  text-decoration:none;
}
.brand-logo img{ height:40px; width:auto; display:block; }
.brand-logo .brand-rule{
  display:block;
  width:100%;
  height:2px;
  background:var(--red);
  margin:0;
}
.brand-logo .brand-strap{
  display:block;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:.62rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
  white-space:normal;
  max-width:190px;
  line-height:1.4;
}

@media (max-width:1100px){
  .brand-logo .brand-strap{ max-width:150px; }
}

@media (max-width:600px){
  .brand-logo img{ height:32px; }
  .brand-logo .brand-strap{ font-size:.5rem; letter-spacing:1px; max-width:130px; }
}

nav.main-nav ul{
  display:flex;
  list-style:none;
  gap:1.3rem;
  align-items:center;
}

nav.main-nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.3px;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:.2s;
  white-space:nowrap;
}

nav.main-nav a:hover,
nav.main-nav a.active{
  color:var(--white);
  border-bottom-color:var(--red);
}

.member-login-link{
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 16px;
  font-size:.8rem;
}

.member-login-link:hover{
  border-color:var(--red);
  border-bottom-color:var(--red);
}

.header-cta{ display:flex; align-items:center; gap:16px; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--white);
  font-size:1.6rem;
  cursor:pointer;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg, rgba(6,6,6,.5) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.95) 100%),
             url("../images/hero-bg.jpg") center 35%/cover no-repeat;
}

.hero-content{ max-width:680px; padding:60px 0; }

.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  margin:10px 0 20px;
}

.hero h1 .accent{ color:var(--red); }

.hero-tagline{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  line-height:1.35;
  color:#fff;
  max-width:640px;
  margin:0 0 10px;
}

.hero-tagline .accent{ color:var(--red); }

.hero-subtext{
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:.01em;
  color:#fff;
  max-width:640px;
  margin:0 0 26px;
}

.hero-checklist{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 28px;
  max-width:640px;
}

.hero-checklist li{
  color:#e7e7e7;
  font-size:.98rem;
  padding:4px 0;
}

.hero-checklist li:before{
  content:"\2713";
  color:var(--red);
  font-weight:700;
  margin-right:8px;
}

@media (max-width:600px){
  .hero-checklist{ grid-template-columns:1fr; }
}

/* ---------- Page hero (interior pages) ---------- */

.page-hero{
  padding:120px 0 60px;
  background:linear-gradient(180deg, rgba(6,6,6,.68), rgba(10,10,10,1)),
             url("../images/hero-bg.jpg") center 35%/cover no-repeat;
  border-bottom:1px solid var(--line);
}

.page-hero h1{ font-size:clamp(2.1rem, 5vw, 3.1rem); }

.page-hero p{ margin-top:14px; max-width:640px; }

/* ---------- Sections ---------- */

section{ padding:80px 0; }

.section-alt{ background:var(--surface); }

/* ---------- Light editorial section (icon rows, matches print cover's
   "Inside This Issue" strip) ---------- */

.section-light{
  background:#f2f1ee;
  color:#1a1a1a;
}

.section-light h1, .section-light h2, .section-light h3{ color:#111; }
.section-light .lead{ color:#3a3a3a; }
.section-light .muted{ color:#6b6b6b; }
.section-light .eyebrow{ color:var(--red); }
/* A ghost button is white-on-transparent, which is invisible on a light
   section. Nothing used one there until the offline-reader block on the
   home page, so the gap had never shown. Fixed here rather than scoped to
   that section, so the next light section to use one inherits it. */
.section-light .btn.ghost{ border-color:#1a1a1a; color:#1a1a1a; }
.section-light .btn.ghost:hover{ background:#1a1a1a; color:#f2f1ee; }

.icon-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:34px;
  margin-top:20px;
}

.icon-row .icon-item{ text-align:center; }

.icon-row .icon-item svg{
  width:38px;
  height:38px;
  stroke:var(--red);
  fill:none;
  stroke-width:1.6;
  margin-bottom:14px;
}

.icon-row .icon-item img{
  height:46px;
  width:auto;
  margin:0 auto 14px;
}

.icon-row .icon-item .icon-emoji{
  display:block;
  font-size:2.6rem;
  line-height:1;
  margin-bottom:14px;
}

.icon-row .icon-item h3{
  font-size:.92rem;
  letter-spacing:.5px;
  color:#111;
  margin-bottom:8px;
}

.icon-row .icon-item .icon-rule{
  width:26px; height:2px; background:var(--red);
  margin:0 auto 10px;
}

.icon-row .icon-item p{
  font-size:.85rem;
  color:#666;
  line-height:1.55;
}

/* dark variant of the icon row, for use on black backgrounds */
.icon-row.on-dark .icon-item h3{ color:var(--white); }
.icon-row.on-dark .icon-item p{ color:var(--muted); }

/* ---------- Circular badge logo ---------- */

.badge-logo{ display:inline-block; }
.badge-logo img{ width:96px; height:96px; display:block; }

/* ---------- Cover split hero (used on Latest Issue) ---------- */

.cover-split{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:40px;
  align-items:center;
}

.cover-split .cover-panel img{
  border-radius:4px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.12);
}

.cover-split .issue-note{ text-align:left; }
.cover-split .issue-note p{ color:#d8d8d8; margin-bottom:16px; }

@media (max-width:980px){
  .cover-split{ grid-template-columns:1fr; text-align:center; }
  .cover-split .cover-panel{ max-width:260px; margin:0 auto; }
  .cover-split .issue-note{ text-align:center; }
}

.section-title{ text-align:center; }
.section-title .lead{ margin:0 auto; text-align:center; }

.text-center{ text-align:center; }

/* ---------- Feature grid / cards ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
  margin-top:46px;
}

.card{
  background:var(--surface2);
  padding:28px 26px;
  border-radius:var(--radius);
  border-top:3px solid var(--red);
  box-shadow:var(--shadow);
  transition:.25s;
}

.card:hover{ transform:translateY(-5px); }

.card .icon{ font-size:1.6rem; margin-bottom:14px; color:var(--red); }

.card p{ color:var(--muted); font-size:.94rem; }

/* ---------- Issue / cover showcase ---------- */

.issue-showcase{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:center;
}

.issue-cover img{
  border-radius:8px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

.issue-meta ul{ list-style:none; margin:22px 0 30px; }

.issue-meta ul.two-col{
  columns:2;
  column-gap:32px;
}

.issue-meta ul.two-col li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}

@media(max-width:900px){
  .issue-meta ul.two-col{ columns:1; }
}

.issue-meta li{
  padding:9px 0 9px 26px;
  border-bottom:1px solid var(--line);
  position:relative;
  color:#dcdcdc;
}

.issue-meta li:before{
  content:"—";
  color:var(--red);
  position:absolute;
  left:0;
}

/* ---------- Current issue teaser ---------- */
/* Scoped to #current-issue only -- the free-issue showcase above (#latest)
   keeps its default uncropped cover; this section's cover is stretched to
   match the text column height so a shorter article list (this issue has
   fewer sections than the evergreen free issue) doesn't leave dead space
   next to the cover image. */

#current-issue .issue-showcase{ align-items:stretch; }

#current-issue .issue-cover{
  position:relative;
  overflow:hidden;
}

#current-issue .issue-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

.subscriber-badge{
  position:absolute;
  top:14px;
  left:14px;
  background:var(--red);
  border:1px solid var(--red);
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:4px;
}

/* ---------- Sneak peek strip (This Week's Issue) ---------- */
/* Replaces the old static cover image in #current-issue with a small
   swipe-through carousel of real page spreads. Scoped entirely under
   #current-issue .issue-strip so it can't leak into any other page. */

#current-issue .issue-strip{
  position:relative;
  align-self:start;
  /* Without this, a grid item defaults to min-width:auto, so the wide
     flex content inside .strip-track (5 cards + gaps) refuses to shrink
     below its own content width and instead forces this grid item -- and
     the whole page -- wider than the viewport on mobile. min-width:0 lets
     the item shrink to the column width so .strip-track's own
     overflow-x:auto handles the horizontal scrolling locally instead. */
  min-width:0;
  width:100%;
  max-width:100%;
  /* Extra headroom above the strip (on top of the .strip-flag repositioning
     below) so the "New: Sneak Peek" tag has full clearance from the sticky
     .site-header across the realistic range of scroll positions where this
     section is settled on screen, not just when it's scrolled fully past. */
  margin-top:22px;
}

#current-issue .strip-flag{
  /* Was top:-13px, poking above .issue-strip's own top edge. Because
     .issue-strip sits flush at the top of its section (no offset), that
     put the flag in the same viewport band as the sticky .site-header
     (0-105px tall, z-index:1000) for a wide range of natural scroll
     positions -- the site-header's opaque background painted over it,
     so the label looked chopped off ("New: Sneak Peek" cut down to
     "...IEW: SNEAK PEEK" or worse). Moving it to a positive top tucks it
     inside .strip-frame's own top padding instead, so it now scrolls
     with the rest of the card content and only ever disappears behind
     the header at the same time the card itself does -- normal sticky
     header behaviour, not a visual glitch. */
  position:absolute;
  top:12px;
  left:14px;
  background:var(--red);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:3px;
  z-index:5;
}

#current-issue .strip-frame{
  border:1.5px dashed var(--red-dark);
  border-radius:var(--radius);
  padding:26px 0 16px;
  background:radial-gradient(120% 140% at 50% 0%, #171310 0%, #0a0a0a 65%);
  overflow:hidden;
  max-width:100%;
}

#current-issue .strip-track{
  display:flex;
  align-items:center;
  gap:14px;
  overflow-x:auto;
  max-width:100%;
  padding:14px 50% 14px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}

#current-issue .strip-track::-webkit-scrollbar{ display:none; }

#current-issue .strip-card{
  flex:0 0 auto;
  width:172px;
  scroll-snap-align:center;
  border-radius:7px;
  overflow:hidden;
  background:var(--surface2);
  border:1px solid var(--line);
  cursor:pointer;
  transform:scale(.86);
  opacity:.5;
  filter:saturate(.75);
  transition:transform .35s cubic-bezier(.22,.9,.32,1), opacity .35s ease, filter .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

#current-issue .strip-card img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
  border:none;
}

#current-issue .strip-card .cap{
  padding:9px 11px 12px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

#current-issue .strip-card.active{
  transform:scale(1.14);
  opacity:1;
  filter:saturate(1);
  box-shadow:0 28px 60px rgba(0,0,0,.6), 0 0 0 1px var(--red);
  border-color:var(--red);
  z-index:3;
}

#current-issue .strip-card.active .cap{ color:var(--white); }

#current-issue .strip-card.lockcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px 16px;
  background:linear-gradient(160deg,#241311,#100a09);
  border-color:var(--red-dark);
}

#current-issue .strip-card.lockcard.active{ box-shadow:0 28px 60px rgba(0,0,0,.6), 0 0 0 1px var(--red); }

#current-issue .strip-card.lockcard .icon{
  width:32px;height:32px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  margin-bottom:10px;
}

#current-issue .strip-card.lockcard h4{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.02em;
  margin:0 0 6px;
}

#current-issue .strip-card.lockcard p{
  font-size:.68rem;
  color:#c8a49c;
  line-height:1.5;
  margin:0;
}

#current-issue .strip-card.lockcard .cta-btn{
  display:inline-block;
  margin-top:14px;
  padding:8px 20px;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-family:'Anton', sans-serif;
  letter-spacing:.6px;
  font-size:.7rem;
  text-transform:uppercase;
  border:1.5px solid var(--red);
  border-radius:2px;
  transition:.2s;
  pointer-events:auto;
}

#current-issue .strip-card.lockcard .cta-btn:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
}

#current-issue .strip-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:4px;
}

#current-issue .strip-dots .d{
  width:6px;height:6px;border-radius:50%;
  background:#333;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

#current-issue .strip-dots .d.on{ background:var(--red); transform:scale(1.25); }

#current-issue .strip-hint{
  text-align:center;
  font-size:.66rem;
  color:var(--muted);
  margin-top:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media (max-width:480px){
  /* Slightly narrower cards on small phones so the centered card and its
     neighbours' peek fit comfortably without the track feeling cramped. */
  #current-issue .strip-card{ width:148px; }
}

/* ---------- Editor / bio ---------- */

.bio-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  align-items:start;
}

.bio-photo{
  aspect-ratio:4/5;
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:.85rem;
  text-align:center;
  overflow:hidden;
}

.bio-copy p{ margin-bottom:18px; max-width:640px; }

.pull-quote{
  border-left:3px solid var(--red);
  padding:6px 0 6px 24px;
  margin:28px 0;
  font-family:'Anton', sans-serif;
  font-size:1.3rem;
  text-transform:none;
  letter-spacing:.2px;
  color:var(--white);
  line-height:1.4;
}

/* ---------- Pricing ---------- */

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;
  margin-top:46px;
}

.section-divider{
  border:none;
  border-top:1px solid var(--line);
  max-width:var(--max-width);
  margin:40px auto;
}

/* ---- Home page "Latest Updates" ticker ----
   CURRENTLY UNUSED. Removed from index.html on 2026-08-25 because on a
   phone it pushed the hero down the first screen. Rules kept so the ticker
   can be restored by putting the markup back -- see the comment in
   index.html where it used to sit.
   Full-bleed news-ticker bar: red angled tag on the left, dark bar
   with rotating headline text, red arrow controls on the right.
   Sits directly under the header, above the hero, so it's visible
   without scrolling. */
.updates-ticker{
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:48px;
  background:var(--bg);
  border-top:2px solid var(--red);
  border-bottom:2px solid var(--red);
}
.updates-ticker-tag{
  flex:none;
  display:flex;
  align-items:center;
  background:var(--red);
  padding:0 30px 0 22px;
  margin-right:-16px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  position:relative;
  z-index:2;
}
.updates-ticker-tag-text{
  font-family:'Anton', sans-serif;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--white);
  text-transform:uppercase;
  white-space:nowrap;
}
.updates-ticker-body{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface);
  padding:0 18px 0 34px;
}
.updates-ticker-link{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
}
.updates-ticker-link:hover .updates-ticker-text{ color:var(--white); }
.updates-ticker-label{
  flex:none;
  font-family:'Anton', sans-serif;
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--red);
  text-transform:uppercase;
  border:1px solid var(--red-dark);
  border-radius:3px;
  padding:2px 6px;
}
.updates-ticker-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14.5px;
  font-weight:600;
}
.updates-ticker-arrow{
  flex:none;
  background:none;
  border:none;
  color:var(--red);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  padding:6px 8px;
}
.updates-ticker-arrow:hover{ color:var(--white); }
@media (max-width:640px){
  .updates-ticker-tag{ padding:0 20px 0 14px; }
  .updates-ticker-tag-text{ font-size:11px; }
  .updates-ticker-body{ padding:0 10px 0 26px; gap:8px; }
  .updates-ticker-text{ white-space:normal; font-size:13.5px; }
}

/* ---- Publication Schedule list (Home + Free Issue pages) ---- */
.pub-list{
  max-width:820px;
  margin:0 auto;
}
.pub-list-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.pub-list-item:first-child{ padding-top:0; }
.pub-list-item:last-child{ border-bottom:none; }
.pub-list-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:8px;
}
.pub-list-issue{
  font-family:'Anton', sans-serif;
  font-size:.72rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  background:var(--red);
  padding:2px 8px;
  border-radius:3px;
  white-space:nowrap;
}
.pub-list-week{
  font-family:'Anton', sans-serif;
  font-size:.78rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--red);
}
.pub-list-date{
  font-size:.82rem;
  color:var(--muted);
}
.pub-list-status{
  font-size:.66rem;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:700;
  padding:3px 10px;
  border-radius:20px;
  border:1px solid var(--line);
  color:var(--muted);
}
.pub-list-status.is-published{
  color:var(--white);
  background:var(--red);
  border-color:var(--red);
}
.pub-list-item h3{ margin-bottom:6px; }
.pub-list-item p{ margin:0; }
.section-light .pub-list-item{ border-bottom-color:#e2e2e2; }
.section-light .pub-list-date{ color:#6b6b6b; }
.section-light .pub-list-status{ border-color:#dcdcdc; color:#6b6b6b; }
.section-light .pub-list-status.is-published{ color:var(--white); border-color:var(--red); }

/* ---- Publication Schedule section list (magazine structure) ---- */
.pub-list-sections{
  column-count:2;
  column-gap:28px;
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.pub-list-sections li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  line-height:1.5;
  margin:0 0 9px;
  padding-left:13px;
  position:relative;
}
.pub-list-sections li::before{
  content:"\2013";
  position:absolute;
  left:0;
  color:var(--red);
}
.pub-list-section-name{
  display:block;
  font-family:'Anton', sans-serif;
  color:var(--red);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.pub-list-section-desc{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}
.section-light .pub-list-section-desc{ color:#6b6b6b; }
@media (max-width:640px){
  .pub-list-sections{ column-count:1; }
}

.price-card{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
}

.price-card.featured{
  border-color:var(--red);
  box-shadow:0 0 0 1px var(--red), var(--shadow);
  position:relative;
}

.price-card.featured .badge{
  position:absolute;
  top:-13px; left:50%; transform:translateX(-50%);
  background:var(--red);
  color:var(--white);
  font-size:.7rem;
  letter-spacing:1.5px;
  padding:5px 14px;
  border-radius:20px;
  font-weight:700;
}

.price-card .amount{
  font-family:'Anton', sans-serif;
  font-size:2.6rem;
  color:var(--white);
  margin:14px 0 4px;
}

.price-card .amount span{ font-size:.95rem; color:var(--muted); font-family:'Inter',sans-serif; }

.price-card ul{ list-style:none; margin:22px 0 30px; text-align:left; flex-grow:1; }

.price-card li{ padding:7px 0; color:#d4d4d4; font-size:.92rem; }

.price-card li:before{ content:"✓ "; color:var(--red); font-weight:700; }

.price-card li.discount-item{ color:var(--red); font-weight:700; }

.coupon-code{
  display:inline-block;
  font-family:'Anton', sans-serif;
  letter-spacing:1px;
  font-size:.82em;
  background:var(--bg);
  color:var(--white);
  border:1px solid rgba(255,255,255,.5);
  border-radius:3px;
  padding:1px 7px;
  margin:0 2px;
}

.price-note{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:30px; }
.price-confirm{ font-size:.85rem; color:var(--muted); margin:14px 0 10px; text-align:center; }
.price-confirm strong{ color:var(--text); }

/* ---------- Newsletter / CTA banner ---------- */

.cta-banner{
  text-align:center;
  background:linear-gradient(135deg,#1a1a1a,#0a0a0a);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

form.stack-form{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

input[type=email],
input[type=text],
textarea{
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:1rem;
  background:var(--surface2);
  color:var(--white);
  font-family:'Inter',sans-serif;
}

input[type=email]{ width:320px; }

textarea{ width:100%; min-height:150px; resize:vertical; }

::placeholder{ color:#7d7d7d; }

.contact-form{ max-width:560px; margin-top:36px; display:flex; flex-direction:column; gap:16px; }

.contact-form label{ font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block; }

/* HubSpot embedded forms render their own (light) styling — wrap them in a
   card so they sit intentionally on the dark page instead of floating. */
.hubspot-form-wrap{
  max-width:560px;
  margin-top:28px;
  background:#fff;
  border-radius:var(--radius);
  padding:26px 28px;
  box-shadow:var(--shadow);
}

/* Contact page: "Send a message" + "Other ways to reach us" side by side on
   desktop. Was previously an inline two-column grid with no mobile
   breakpoint, which squeezed the HubSpot form (and its fixed padding) into
   an unusably narrow column on phones -- collapsed to one column below. */
.contact-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}

/* ---------- FAQ ---------- */

.faq-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}

.faq-item h3{ margin-bottom:8px; }
.faq-item p{ color:var(--muted); }

/* ---------- Legal text ---------- */

.legal p, .legal li{ color:#d4d4d4; margin-bottom:14px; max-width:780px; }
.legal h2{ margin-top:40px; font-size:1.4rem; }
.legal h2:first-child{ margin-top:0; }
.legal ul{ margin-left:22px; margin-bottom:14px; }
.legal .updated{ color:var(--muted); font-size:.85rem; margin-bottom:30px; }

/* ---------- Footer ---------- */

footer{
  background:#050505;
  border-top:1px solid var(--line);
  padding:60px 0 30px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
}

.footer-grid h4{
  font-family:'Anton', sans-serif;
  color:var(--red);
  font-size:.85rem;
  letter-spacing:1.5px;
  margin-bottom:16px;
  text-transform:uppercase;
}

.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:var(--muted); text-decoration:none; font-size:.92rem; }
.footer-grid a:hover{ color:var(--white); }

.footer-brand{ text-align:center; }
.footer-brand p{ color:var(--muted); font-size:.9rem; margin-top:14px; max-width:280px; margin-left:auto; margin-right:auto; }
.footer-brand .badge-logo{ display:inline-block; margin-bottom:14px; }
.footer-brand .badge-logo img.cover-two-footer-logo{ width:402px; height:auto; max-width:100%; }

.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  color:#777;
  font-size:.82rem;
}

.footer-bottom a{ color:#777; text-decoration:none; margin-left:16px; }
.footer-bottom a:hover{ color:var(--white); }

.disclaimer{
  color:#666;
  font-size:.78rem;
  max-width:900px;
  margin-top:18px;
  line-height:1.6;
}

/* ---------- Mobile ---------- */

@media (max-width:900px){
  nav.main-nav{
    position:fixed; inset:0 0 0 0;
    /* top gets overridden inline by JS to match the real header height
       (accounts for the promo bar + a strapline that can wrap to 2 lines) */
    z-index:1001; /* explicitly above .site-header (1000) and everything
                     else, so the dropdown always sits over page content
                     (e.g. the homepage hero image) rather than behind it */
    background:var(--bg);
    display:none;
    flex-direction:column;
    padding:30px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav ul{ flex-direction:column; gap:0; }
  nav.main-nav li{ border-bottom:1px solid var(--line); }
  nav.main-nav a{ display:block; padding:16px 0; border-bottom:none; }
  .header-cta{ gap:8px; }
  .header-cta .btn{
    padding:8px 14px;
    font-size:.68rem;
    letter-spacing:.5px;
  }
  .member-login-link{
    padding:6px 12px;
    font-size:.68rem;
  }
  .nav-toggle{ display:block; }

  .issue-showcase, .bio-layout, .contact-split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:600px){
  section{ padding:56px 0; }
  h2{ font-size:1.7rem; }
  .footer-grid{ grid-template-columns:1fr; }
  input[type=email]{ width:100%; }
  .footer-bottom{ flex-direction:column; }
  .footer-bottom a{ margin-left:0; margin-right:16px; }
  .hubspot-form-wrap{ padding:20px 16px; }
}

/* ---------- The Grid Data Desk ---------- */

.stats-banner{
  background:var(--surface2);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius);
  padding:16px 20px;
  margin-bottom:28px;
  color:#d4d4d4;
  font-size:.92rem;
}
.stats-banner strong{ color:var(--white); }
.stats-banner.upsell{ border-left-color:var(--red); }
.stats-banner .btn{ margin-top:12px; }

/* ---- Toolbar: two rows -- segmented controls on top, dropdown filters
   below, all in one clearly-bordered card so it reads as a single unified
   instrument rather than a loose stack of boxes. ---- */
.dd-toolbar{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
}
.dd-toolbar-row{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:22px;
}
.dd-toolbar-row + .dd-toolbar-row{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.dd-toolbar-row-dropdowns{ align-items:flex-end; }

.dd-field{ display:flex; flex-direction:column; gap:7px; }
.dd-field label{
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.dd-divider{
  width:1px;
  align-self:stretch;
  background:var(--line);
  margin:2px 0;
}

/* Segmented pill control -- used for Stats(Player/Team), View(Season/Career)
   and Category(Offense/Defense/Other). One bordered track, active option
   filled solid red, so each choice reads as clearly selected/deselected. */
.dd-segmented{
  display:inline-flex;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.dd-seg-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.2px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.dd-seg-btn:hover{ color:var(--text); }
.dd-seg-btn.active{ background:var(--red); color:var(--white); }
.dd-seg-btn:disabled{ opacity:.4; cursor:not-allowed; }

.dd-field-select select{
  background:var(--surface2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:4px;
  padding:9px 32px 9px 12px;
  font-size:.85rem;
  font-family:'Inter',sans-serif;
  min-width:140px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%239b9b9b' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
}
.dd-field-select select:focus{ outline:1px solid var(--red); }

.dd-field-search{ flex-grow:1; min-width:200px; }
.dd-field-search input[type=search]{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:4px;
  padding:9px 12px;
  font-size:.85rem;
  font-family:'Inter',sans-serif;
}
.dd-field-search input[type=search]:focus{ outline:1px solid var(--red); }

/* ---- Results table ---- */
.stats-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
table.stats-table{
  width:100%;
  border-collapse:collapse;
  font-size:.78rem;
  white-space:nowrap;
}
table.stats-table th, table.stats-table td{
  padding:8px 13px;
  text-align:left;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
table.stats-table th:last-child, table.stats-table td:last-child{ border-right:none; }
table.stats-table thead th{
  background:var(--surface2);
  color:var(--white);
  font-size:.68rem;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  position:sticky;
  top:0;
  border-bottom:2px solid var(--line);
}
table.stats-table thead th:hover{ color:var(--red); }
table.stats-table thead th.sorted{ color:var(--red); }

/* Zebra striping so rows stay readable across a wide, dense table. */
table.stats-table tbody tr:nth-child(even){ background:rgba(255,255,255,.025); }
table.stats-table tbody tr:hover{ background:rgba(232,52,42,.08); }

table.stats-table td.stats-name-col{
  color:var(--white);
  font-weight:700;
  position:sticky;
  left:0;
  background:var(--bg);
}
table.stats-table tbody tr:nth-child(even) td.stats-name-col{ background:#101010; }
table.stats-table tbody tr:hover td.stats-name-col{ background:rgba(232,52,42,.14); }

/* Numeric columns: right-aligned, tabular figures so digits line up
   consistently under their headings regardless of value width. */
table.stats-table td.stats-num, table.stats-table th.stats-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  min-width:64px;
}
table.stats-table td.stats-num{ font-feature-settings:"tnum" 1; }

.stats-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:.85rem;
}
.stats-meta-left{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-csv{
  padding:7px 16px;
  font-size:.72rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  flex-shrink:0;
}
.stats-empty{ padding:40px 20px; text-align:center; color:var(--muted); }

@media (max-width:700px){
  .dd-toolbar-row{ flex-direction:column; align-items:stretch; }
  .dd-divider{ display:none; }
  .dd-field-select select{ min-width:0; width:100%; }
}

/* ---------- Super Bowl tab ---------- */

table.stats-table tbody tr.sb-row{ cursor:pointer; }
table.stats-table tbody tr.sb-row:hover{ background:rgba(232,52,42,.12); }
table.stats-table tbody tr.sb-row.expanded{ background:rgba(232,52,42,.18); }
table.stats-table td.sb-mvp{ color:#d4d4d4; font-size:.75rem; }

.sb-detail-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:var(--radius);
  padding:24px 26px;
  box-shadow:var(--shadow);
}
.sb-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.sb-detail-head h3{ margin-bottom:4px; }
.sb-detail-score{
  font-family:'Anton',sans-serif;
  font-size:1.6rem;
  color:var(--white);
  white-space:nowrap;
}
.sb-detail-score .sb-loser{ color:var(--muted); }
.sb-detail-meta{ color:var(--muted); font-size:.85rem; line-height:1.6; }
.sb-detail-meta strong{ color:var(--text); }
.sb-close-btn{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:4px; padding:6px 12px; font-size:.78rem; cursor:pointer;
}
.sb-close-btn:hover{ color:var(--white); border-color:var(--red); }

.sb-team-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.sb-team-stats-col{ padding:16px 18px; }
.sb-team-stats-col:first-child{ border-right:1px solid var(--line); }
.sb-team-stats-col h4{
  font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; color:var(--red);
  margin-bottom:10px;
}
.sb-team-stats-col table{ width:100%; font-size:.8rem; border-collapse:collapse; }
.sb-team-stats-col td{ padding:5px 0; border-bottom:1px solid var(--line); }
.sb-team-stats-col td.sb-stat-val{ text-align:right; color:var(--white); font-variant-numeric:tabular-nums; }
@media (max-width:700px){
  .sb-team-stats-grid{ grid-template-columns:1fr; }
  .sb-team-stats-col:first-child{ border-right:none; border-bottom:1px solid var(--line); }
}


/* =====================================================================
   SUBSCRIBE PAGE — three tiers and the printed-issue runs.
   Deployed 4 Sep 2026 with the Print & Digital launch. Appended rather
   than merged: everything below supersedes the earlier .pricing-grid,
   .price-card, .price-card .amount, .price-card ul and .price-confirm
   rules by source order. Those earlier rules are now dead weight and
   should be deleted in a quieter week — not on a launch day.
   ===================================================================== */
/* =====================================================================
   SUBSCRIBE PAGE — Print & Digital plan + the ten printed issues
   Prepared 27 Aug 2026. NOT YET DEPLOYED.
   Append to css/style.css and bump the ?v= query on subscribe.html.
   Preview: open preview.html in this folder, or
   https://claude.ai/code/artifact/9fdee4a4-f131-4e3c-90a1-a39fd34fd708
   ===================================================================== */

/* --- 1. REPLACE the existing .pricing-grid and .price-card rules ------------
   The three cards are put on a shared subgrid so title, price, subline,
   features, confirmation and button each sit on one line across all three,
   whatever the bullet counts.
   row-gap MUST stay 0: every card spans all six rows, so any row-gap is added
   five times INSIDE each card (this cost 130px per card when it was 26px).
   Spacing comes from the children's own margins, below. */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  grid-template-rows:auto auto auto 1fr auto auto;
  column-gap:26px;
  row-gap:0;
  margin-top:44px;
}
.price-card{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 28px;
  text-align:center;
  position:relative;
  display:grid;
  grid-row:span 6;
  grid-template-rows:subgrid;
}
/* Safari < 16 and any browser without subgrid falls back to the old flex
   behaviour: everything still works, the rows just do not align. */
@supports not (grid-template-rows:subgrid){
  .price-card .feature-cell{flex:1 1 auto;}
  .price-card{display:flex;flex-direction:column;}
  .price-card ul{flex-grow:1;}
}

/* --- 2. Card internals: spacing now lives here, not on the grid gap --------- */
.price-card .amount{margin:14px 0 2px;line-height:1.1;align-self:center;}
.price-card .subline{                      /* NEW — one line under the price   */
  font-size:.86rem;color:var(--muted);line-height:1.45;
  align-self:center;min-height:1.45em;     /* reserves the row when empty      */
}
.price-card ul{margin:20px 0 24px;}
.price-card li a{                          /* NEW — "10 issues printed…" link  */
  color:var(--red);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(232,52,42,.4);
}
.price-card li a:hover{border-bottom-color:var(--red);}
/* the Ireland/international line is a footnote, not a headline feature: red
   here would compete with the "10 printed issues" anchor three lines above */
.price-card li a.quiet{color:inherit;font-weight:400;border-bottom-color:rgba(255,255,255,.22);}
.price-card li a.quiet:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.65);}
/* The "See the ten issues" button shares the bullet-list grid cell, so the card
   still has exactly six children and the six-row subgrid keeps aligning. */
.price-card .feature-cell{display:grid;grid-template-rows:1fr auto;}
.price-card .feature-cell ul{margin-bottom:14px;}
.price-card .btn.small{
  justify-self:center;margin-bottom:10px;
  background:transparent;border-color:var(--line);color:var(--muted);letter-spacing:.6px;
}
.price-card .btn.small:hover{background:transparent;border-color:var(--red);color:var(--white);transform:none;}
.price-confirm{align-self:end;padding:0 0 12px;margin:0;}

/* --- 3. The CTA labels carry the price, which makes them long. Without this
   they wrap onto two lines in a 260px column and again on a phone. ---------- */
.btn.block{padding-left:14px;padding-right:14px;}
.price-card .btn.block{letter-spacing:.4px;font-size:.86rem;}

/* --- 4. NEW — outlined badge, so Print can be marked without taking the solid
   red "Most Popular" pill off the Annual card. ----------------------------- */
.price-card .badge.outline{
  background:var(--bg);color:var(--red);border:1px solid var(--red);
}

/* --- 5. NEW — the Print & Digital card sits a shade warmer than its siblings */
.price-card.print-tint{background:linear-gradient(180deg,#20191a 0%,#1b1b1b 55%);}

/* --- 6. NEW — single issue as a line of text under the grid ---------------- */
.single-line{text-align:center;color:var(--muted);font-size:.95rem;margin-top:34px;}
.single-line a{color:var(--red);font-weight:600;}

/* --- 7. NEW — "The ten printed issues" section ----------------------------- */
.runs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:34px;align-items:stretch;}
.run{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;}
.run.hero{border-color:rgba(232,52,42,.5);background:linear-gradient(180deg,#20191a 0%,#1b1b1b 60%);}
.run-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
.run-when{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--red);}
.run-count{font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--white);line-height:1;text-align:right;}
.run-count span{font-size:.68rem;letter-spacing:1.4px;color:var(--muted);font-family:'Inter',sans-serif;text-transform:uppercase;display:block;margin-top:2px;}
.run h4{font-size:1.05rem;margin:6px 0 14px;}
.run ol{list-style:none;counter-reset:iss;flex-grow:1;}
.run li{position:relative;padding:8px 0 8px 26px;font-size:.88rem;color:#d4d4d4;border-top:1px solid rgba(255,255,255,.05);}
.run li:first-child{border-top:none;}
.run li:before{counter-increment:iss;content:counter(iss);position:absolute;left:0;top:8px;font-family:'Anton',sans-serif;font-size:.8rem;color:var(--red);}
.run li em{display:block;font-style:normal;color:var(--muted);font-size:.78rem;margin-top:1px;}
.run .promise{margin-top:14px;padding:12px 14px;background:rgba(232,52,42,.1);border:1px solid rgba(232,52,42,.3);border-radius:4px;font-size:.82rem;color:#e6e6e6;}
.runs-foot{color:var(--muted);font-size:.88rem;margin-top:24px;text-align:center;}
.runs-foot a{color:var(--red);font-weight:600;}

/* --- 8. Phones ------------------------------------------------------------- */
@media(max-width:719px){
  /* One column, so cross-card alignment is meaningless and subgrid must go:
     the cards would land on implicit rows and the 1fr features row stretches
     the first card. */
  .pricing-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:34px;margin-top:34px;}
  .price-card{display:flex;flex-direction:column;grid-row:auto;padding:30px 22px;}
  .price-card ul{flex-grow:1;}
  .price-card .subline{min-height:0;}

  /* No reordering on a phone: Monthly leads, carrying the "Most Popular" badge,
     then Annual, then Print & Digital — the same order as the markup and as
     the desktop grid, so screen-reader and keyboard order match what is seen. */

  .runs{grid-template-columns:1fr;}
  .brand-strap,.brand-rule{display:none;}
  .brand-logo img{width:132px;}
  .site-header .container{gap:12px;}
}

/* --- deploy fix, 4 Sep 2026 -------------------------------------------------
   The additions file assumed a general `.price-card .badge` rule existed. It
   did not: style.css only ever positioned `.price-card.featured .badge`, so on
   the live page the new "New" pill on the Print & Digital card stayed in flow,
   became a seventh child of a six-row subgrid, and pushed that card's price,
   bullets and button out of line with its siblings. Caught in a local render
   before deploy, not after. */
.price-card{ position:relative; }
.price-card .badge{
  position:absolute;
  top:-13px; left:50%; transform:translateX(-50%);
  background:var(--red);
  color:var(--white);
  font-size:.7rem;
  letter-spacing:1.5px;
  padding:5px 14px;
  border-radius:20px;
  font-weight:700;
  white-space:nowrap;
}

/* ---------- Subscribe hero: flick-through peek (21 September 2026) ----------
   Replaces the single static cover that used to sit in .page-hero on
   subscribe.html.

   The strip is a NATIVE horizontal scroller at every width, and the range
   input drives scrollLeft rather than a transform. That was a deliberate
   second pass: with a transform the slider was the only way to move the
   strip, and on a 1280x800 laptop the slider lands below the fold, so the
   hero looked like a dead row of images. Scrolling means a trackpad swipe
   works whether or not the control is on screen.

   Page width and the 700px breakpoint are both read back out of the DOM by
   js/peek-strip.js instead of being repeated there, so these are safe to
   change -- except the breakpoint, which is named in that file too and has
   to move with this one.
--------------------------------------------------------------------------- */

.peek-hero{ padding-top:88px; }

.peek-head{
  display:grid;
  /* 420px was too tight: at Inter .98rem every label but one wrapped, and
     the ticks are only 6 items, so the column can afford the room. */
  grid-template-columns:minmax(0,1fr) minmax(440px,520px);
  gap:44px;
  align-items:start;
  margin-bottom:16px;
}

.peek-intro h1{ margin:0 0 12px; }
.peek-intro .lead{ margin:0; max-width:620px; }
/* The shared .hero-checklist (index, free, free-thanks) puts its tick in an
   inline ::before, so a label that wraps runs its second line back underneath
   the tick and the left edge goes ragged. Here the li is a flex row instead,
   which makes the tick its own item and hangs the text off it. Scoped to
   .peek-head so the other three pages are untouched. */
.peek-head .hero-checklist{ max-width:none; margin:0; gap:0 32px; }

.peek-head .hero-checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0 0;
  margin-top:10px;
  border-top:1px solid var(--line);
  font-size:.94rem;
  line-height:1.45;
  /* Any label that still wraps breaks into two even lines rather than
     stranding one word. Ignored by browsers that do not support it. */
  text-wrap:balance;
}

.peek-head .hero-checklist li:before{
  margin-right:0;
  flex-shrink:0;
  line-height:1.45;
}

.peek-strip{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0d0d0d;
  padding:12px 0;
  /* The range input is the visible control; a native bar under the strip
     just adds a second, uglier one. */
  scrollbar-width:none;
}
.peek-strip::-webkit-scrollbar{ display:none; }

.peek-track{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:16px;
}

.peek-page{
  position:relative;
  flex:0 0 auto;
  width:220px;
  aspect-ratio:700 / 993;
  padding:0;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  background:var(--surface);
  cursor:pointer;
  scroll-snap-align:center;
  filter:brightness(.42) saturate(.55);
  transition:filter .25s ease, transform .25s ease, border-color .25s ease;
}

.peek-page img{ width:100%; height:100%; display:block; object-fit:cover; }

.peek-page.is-active{
  filter:none;
  border-color:var(--red);
  transform:scale(1.03);
  box-shadow:0 18px 38px rgba(0,0,0,.6);
}

.peek-page:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.peek-badge{
  position:absolute; left:10px; top:10px;
  font-size:.66rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--white); background:var(--red-dark);
  padding:4px 8px; border-radius:3px;
}

.peek-folio{
  position:absolute; right:8px; bottom:8px;
  font-family:'Anton', sans-serif; font-size:.82rem; letter-spacing:1px;
  color:var(--white); background:rgba(10,10,10,.82);
  padding:3px 8px; border-radius:3px;
}

.peek-controls{ display:flex; align-items:center; gap:26px; margin-top:12px; }

.peek-readout{ width:300px; flex-shrink:0; }
.peek-name{
  display:block;
  font-family:'Anton', sans-serif; font-size:1.2rem; line-height:1.1;
  letter-spacing:1px; text-transform:uppercase; color:var(--white);
}
.peek-meta{ display:block; font-size:.8rem; color:var(--muted); margin-top:4px; }

.peek-scrub{ flex-grow:1; display:flex; flex-direction:column; gap:4px; }
/* Without this the class rule above would beat the user agent's [hidden]
   rule, and a visitor with no JavaScript would get a slider that does
   nothing. */
.peek-scrub[hidden]{ display:none; }
.peek-scrub label{
  font-size:.72rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.peek-scrub input[type=range]{
  width:100%; height:44px; cursor:grab;
  accent-color:var(--red); background:transparent;
}
.peek-scrub input[type=range]:active{ cursor:grabbing; }

.peek-member{ margin-top:12px; }

@media (max-width:980px){
  .peek-head{ grid-template-columns:1fr; gap:22px; }
}

/* Phones: the magazine has to be the first thing in the hero, so the strip
   and its caption jump ahead of the checklist -- six ticks above the fold
   pushed every page off screen. display:contents dissolves .peek-head so
   its two children can be ordered against the strip below them.
   js/peek-strip.js matches on this same 700px; move both together. */
@media (max-width:700px){
  .peek-hero .container{ display:flex; flex-direction:column; }
  .peek-hero .peek-head{ display:contents; }
  .peek-hero .peek-intro{ order:1; margin-bottom:18px; }
  .peek-hero .peek-strip{ order:2; }
  .peek-hero .peek-controls{ order:3; }
  .peek-hero .hero-checklist{ order:4; margin-top:22px; }
  .peek-hero .peek-member{ order:5; }

  .peek-strip{ scroll-snap-type:x mandatory; }
  .peek-page{ width:62vw; }
  .peek-controls{ flex-direction:column; align-items:flex-start; gap:10px; }
  .peek-readout{ width:auto; }
  .peek-scrub{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .peek-page{ transition:none; }
}