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

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

nav.main-nav a.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); }

.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:rgba(10,10,10,.88);
  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 ----
   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); }
.just-launched-banner{
  width:100%;
  background:#1F8A4C;
  text-align:center;
  padding:11px 20px;
}
.just-launched-banner span{
  font-family:'Anton', sans-serif;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--white);
  text-transform:uppercase;
}
@media (max-width:640px){
  .just-launched-banner span{ font-size:12.5px; }
  .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-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 .btn{
    padding:8px 14px;
    font-size:.68rem;
    letter-spacing:.5px;
  }
  .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); }
}