/* =============================================================
   GRITTY'S TRIAL LAWYER - main.css
   Matt N. Halden / GrittysTrialLawyer.Me
   Theme v1.0.0
   ============================================================= */

/* ─── TABLE OF CONTENTS ──────────────────────────────────────
   01. Design Tokens (Custom Properties)
   02. Dark Mode Overrides
   03. Reset & Base
   04. Typography
   05. Layout Utilities
   06. Cookie Banner
   07. Newsletter Modal
   08. Top Strip
   09. Navigation (Desktop)
   10. Mega Menu
   11. Search Overlay
   12. Mobile Nav Drawer
   13. Masthead & Team Band
   14. Hero - Front Page
   15. Section Shared Styles
   16. Latest Dispatches (Blog Grid)
   17. Stats Band
   18. Podcast (From the Booth)
   19. Videos (Film Room)
   20. Newsletter Section
   21. About Strip
   22. Footer
   23. Post Formats (Single)
   24. Archive & Taxonomy
   25. Pagination
   26. Scroll Animations
   27. Responsive - 1024px
   28. Responsive - 768px
   29. Responsive - 480px
   ─────────────────────────────────────────────────────────── */


/* ─── 01. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Palette - light */
  --paper:       #f4efe4;
  --paper-2:     #ede7d9;
  --paper-3:     #e0d9c8;
  --ink:         #1a1510;
  --ink-2:       #3d362d;
  --ink-3:       #6b6258;
  --rule:        #c4bbb0;
  --rule-light:  #ddd7cc;
  --white:       #ffffff;

  /* Team colors */
  --eagles:       #004c54;
  --phillies:     #e81828;
  --flyers:       #f74902;
  --sixers:       #006bb6;
  --union:        #c8a94e; /* kept for possible future use; NOT used as primary accent */
  --powder-blue:  #6BACE4;
  --kelly-green:  #076B3B;

  /* Semantic aliases - resolve to light values by default */
  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--paper-3);
  --text:       var(--ink);
  --text-2:     var(--ink-2);
  --text-3:     var(--ink-3);
  --border:     var(--rule);
  --border-lt:  var(--rule-light);
  --card-bg:    var(--white);

  /* Typography stacks */
  --serif:  'Playfair Display', 'Times New Roman', Georgia, serif;
  --body:   'Lora', Georgia, 'Times New Roman', serif;
  --mono:   'Courier Prime', 'Courier New', Courier, monospace;
  --sans:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* Misc */
  --r-sm:      0rem;
  --r-md:      0.5rem;
  --nav-h:     64px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 02. DARK MODE OVERRIDES ────────────────────────────────── */
[data-theme="dark"] {
  --paper:      #0d0c0a;
  --paper-2:    #161410;
  --paper-3:    #1e1b16;
  --ink:        #f0ebe0;
  --ink-2:      #c8c0b4;
  --ink-3:      #8a8278;
  --rule:       #2e2b25;
  --rule-light: #252219;
  --white:      #1e1b16;

  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--paper-3);
  --text:       var(--ink);
  --text-2:     var(--ink-2);
  --text-3:     var(--ink-3);
  --border:     var(--rule);
  --border-lt:  var(--rule-light);
  --card-bg:    var(--paper-2);

  /* Lighten dark team colors so they read on dark backgrounds */
  --eagles: #1fa8b4;
  --sixers: #4db8ff;
}


/* ─── 03. RESET & BASE ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--sixers);
  outline-offset: 3px;
}

/* WordPress alignment classes */
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left:  1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 0.35rem;
  font-style: italic;
}


/* ─── 04. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

p {
  color: var(--text-2);
}

.byline {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Team color labels */
.label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25em 0.6em;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.label-eagles   { background: var(--eagles);   color: #fff; }
.label-phillies { background: var(--phillies);  color: #fff; }
.label-flyers   { background: var(--flyers);   color: #fff; }
.label-sixers   { background: var(--sixers);   color: #fff; }

/* Section headings w/ decorative rules */
.section-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.section-rule::before,
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-rule--left::before { max-width: 2rem; }

.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Global button variants - fill from left on hover */

/* Base .btn - neutral border/text, slide-fill on hover.
   Used on membership tier cards, account page CTAs, etc. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms ease, border-color 220ms ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn:hover              { color: var(--bg); border-color: var(--text); }
.btn:hover::before      { transform: scaleX(1); }
.btn:active::before     { transform: scaleX(1); opacity: 0.85; }

/* Gold/union variant for Club Seats CTAs */
.gtl-btn-union {
  border-color: var(--union);
  color: var(--union);
}
.gtl-btn-union::before { background: var(--union); }
.gtl-btn-union:hover   { border-color: var(--union); color: var(--bg); }

.btn-primary {
  border: 2px solid var(--phillies);
  color: var(--phillies);
  background: transparent;
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms ease;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--phillies);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn-primary:hover              { color: #fff; }
.btn-primary:hover::before      { transform: scaleX(1); }
.btn-primary:active::before     { transform: scaleX(1); background: #a30e18; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1.5px solid var(--border);
  padding: 0.65rem 1.5rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms ease, border-color 220ms ease;
}
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn-outline:hover              { border-color: var(--text); color: var(--bg); }
.btn-outline:hover::before      { transform: scaleX(1); }
.btn-outline:active::before     { transform: scaleX(1); opacity: 0.85; }

/* Small button modifier - matches copy-link-btn sizing */
.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
}

.btn-subscribe {
  border: 2px solid var(--phillies);
  color: var(--phillies);
  background: transparent;
  padding: 0.4rem 1rem;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms ease;
}
.btn-subscribe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--phillies);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn-subscribe:hover         { color: #fff; }
.btn-subscribe:hover::before { transform: scaleX(1); }

/* ── No border-radius on any button/CTA or interactive element ── */
.btn,
.btn-primary,
.btn-outline,
.btn-sm,
.btn-subscribe,
.btn-newsletter,
.btn-cookie-accept,
.btn-cookie-decline,
.platform-btn,
.gtl-billing-opt,
.hero-read-more,
.post-card-read,
.episode-play,
.handle-link,
.footer-social,
.copy-link-btn,
.nav-search-btn,
.nav-darkmode,
.nav-link,
.post-tag,
.modal,
.crossword-teaser {
  border-radius: 0;
}

/* Animated underline on plain text links (not buttons, not nav items) */
.footer-links a,
.single-content a:not(.btn-primary):not(.btn-outline) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 250ms ease;
  padding-bottom: 2px;
}
.footer-links a:hover,
.single-content a:not(.btn-primary):not(.btn-outline):hover {
  background-size: 100% 2px;
}


/* ─── 05. LAYOUT UTILITIES ───────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* section-inner: same max-width as .container; when nested inside
   .container it inherits the parent's constraints without adding extra
   horizontal padding. Used standalone on pages like /membership/. */
.section-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* When section-inner sits inside .container, the container already
   provides the side padding - remove the duplicate. */
.container > .section-inner {
  padding-left: 0;
  padding-right: 0;
}
.section {
  padding: 4rem 0;
}
.section + .section {
  border-top: 1px solid var(--border);
}


/* ─── 06. COOKIE BANNER ──────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.5rem;
  border-radius: var(--r-md);
  display: none; /* JS sets display:flex after delay - prevents flash-of-banner on load */
  align-items: center;
  gap: 1.5rem;
  z-index: 10000; /* above #page-transition (9999) */
  width: calc(100% - 3rem);
  max-width: 680px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--sans);
  font-size: 0.85rem;
}
#cookie-banner p    { color: var(--paper); margin: 0; }
#cookie-banner a    { text-decoration: underline; opacity: 0.8; }
#cookie-banner a:hover { opacity: 1; }

.cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.btn-cookie-accept {
  background: var(--phillies);
  color: #fff;
  padding: 0.45rem 1rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity var(--transition);
}
.btn-cookie-accept:hover { opacity: 0.85; }

.btn-cookie-decline {
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(244, 239, 228, 0.35);
  padding: 0.45rem 1rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color var(--transition), opacity var(--transition);
  opacity: 0.8;
}
.btn-cookie-decline:hover {
  border-color: rgba(244, 239, 228, 0.8);
  opacity: 1;
}


/* ─── 07. NEWSLETTER MODAL ───────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, 0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  backdrop-filter: blur(4px);
}
#modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--phillies);
  max-width: 520px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  transform: translateY(20px);
  transition: transform 400ms ease;
}
#modal-overlay.open .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.25rem;
  color: var(--text-3);
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text); }

.modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phillies);
  margin-bottom: 0.5rem;
}

.modal h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.modal p { font-size: 0.9rem; margin-bottom: 1.5rem; }

.modal-form { display: flex; gap: 0.5rem; }
.modal-form input[type="email"] {
  flex: 1;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  border-radius: 0;
  transition: border-color var(--transition);
}
.modal-form input[type="email"]:focus {
  border-color: var(--phillies);
  outline: none;
}

.modal-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 0.75rem;
}


/* ─── 08. TOP STRIP ──────────────────────────────────────────── */
#top-strip {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#top-strip a {
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--transition);
}
#top-strip a:hover { opacity: 1; }

.strip-socials { display: flex; gap: 1rem; }
.strip-meta    { display: flex; gap: 1.5rem; }


/* ─── 09. NAVIGATION ─────────────────────────────────────────── */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition), background var(--transition);
}
#main-nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 2rem;
  position: relative;
}

.nav-logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: 0;
  flex-shrink: 0;
  line-height: 1;
}
.nav-logo span {
  display: block;
  font-size: 0.6em;
  font-weight: 400;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.nav-item { position: relative; }

.nav-link {
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}
.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: var(--bg-2);
}
.nav-link .caret {
  font-size: 0.6rem;
  transition: transform var(--transition);
}
.nav-item:hover .caret { transform: rotate(180deg); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-search-btn,
.nav-darkmode {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: color var(--transition), background var(--transition);
  font-size: 0.9rem;
}
.nav-search-btn:hover,
.nav-darkmode:hover {
  color: var(--text);
  background: var(--bg-2);
}

.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--r-sm);
  color: var(--text);
  transition: background var(--transition);
}
.nav-hamburger:hover { background: var(--bg-2); }
.nav-hamburger span {
  width: 100%;
  height: 2px;
  background: currentColor;
  display: block;
  transition: transform 300ms, opacity 300ms;
  border-radius: 2px;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─── 10. MEGA MENU ──────────────────────────────────────────── */
.mega-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--text);
  padding: 1.5rem;
  min-width: 480px;
  width: fit-content;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 900;
}
.mega-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mega-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mega-item {
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-sm);
  transition: background var(--transition);
  cursor: pointer;
  display: block;
  white-space: nowrap;
}
.mega-item:hover { background: var(--bg-2); }

.mega-item-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.mega-item-desc {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-3);
}

.mega-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}

.mega-featured {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem;
  background: var(--bg-2);
  border-radius: var(--r-sm);
}
.mega-featured-text { flex: 1; }
.mega-featured-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 0.25rem;
}
.mega-featured-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
}


/* ─── 11. SEARCH OVERLAY ─────────────────────────────────────── */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(20, 16, 10, 0.9);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  backdrop-filter: blur(8px);
}
#search-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.search-inner {
  width: 100%;
  max-width: 640px;
  padding: 0 1.5rem;
  transform: translateY(-20px);
  transition: transform 300ms ease;
}
#search-overlay.open .search-inner { transform: translateY(0); }

.search-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(244, 239, 228, 0.5);
  margin-bottom: 1rem;
  display: block;
}

.search-input-wrap { position: relative; }
.search-input-wrap input {
  width: 100%;
  padding: 1rem 3rem 1rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(244, 239, 228, 0.4);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  transition: border-color 200ms;
}
.search-input-wrap input:focus {
  outline: none;
  border-color: var(--paper);
}
.search-input-wrap input::placeholder { color: rgba(244, 239, 228, 0.3); }

.search-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(244, 239, 228, 0.5);
  font-size: 1.5rem;
  transition: color 200ms;
}
.search-close:hover { color: var(--paper); }

.search-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(244, 239, 228, 0.4);
  margin-top: 1rem;
  letter-spacing: 0.04em;
}

/* ─── 11b. INLINE NAV SEARCH (desktop) ───────────────────────── */
.nav-search-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 300ms ease, opacity 250ms ease;
}
.nav-search-bar.open {
  max-width: 260px;
  opacity: 1;
}
.nav-search-bar input {
  width: 200px;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.35rem 0.25rem;
  transition: border-color 200ms;
  white-space: nowrap;
}
.nav-search-bar input:focus {
  outline: none;
  border-bottom-color: var(--text-2);
}
.nav-search-bar input::placeholder { color: var(--text-3); }
.nav-search-bar button {
  color: var(--text-3);
  font-size: 0.8rem;
  padding: 0.25rem;
  transition: color 200ms;
  flex-shrink: 0;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-search-bar button:hover { color: var(--text); }
#nav-search-close { margin-left: 0.1rem; }
@media (max-width: 768px) {
  .nav-search-bar { display: none !important; }
}


/* ─── 12. MOBILE NAV DRAWER ──────────────────────────────────── */

/* Backdrop overlay - full viewport, above the nav bar */
#mobile-nav-overlay {
  display: none;                     /* enabled at 768px via media query */
  position: fixed;
  inset: 0;                          /* covers everything top to bottom */
  background: rgba(0, 0, 0, 0.45);
  z-index: 850;                      /* above sticky nav (800) */
  opacity: 0;
  pointer-events: none;              /* invisible = untappable; won't block hamburger */
  transition: opacity 300ms ease;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#mobile-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;              /* tappable once visible so it closes the drawer */
}

/* Drawer - full-height right panel, sits above the nav bar */
#mobile-nav {
  display: none;                     /* enabled at 768px via media query */
  position: fixed;
  top: 0;                            /* full height so the drawer header is always visible */
  right: 0;
  bottom: 0;
  left: auto;
  width: min(290px, 88vw);
  background: var(--bg);
  z-index: 900;                      /* above overlay (850) and nav (800) */
  overflow: hidden;                  /* clip children; body handles scroll */
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.18);
  border-left: 1px solid var(--border);
}
#mobile-nav.open { transform: translateX(0); }

/* Drawer inner header (brand + close button) */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;                    /* never scrolls - body scrolls below it */
  background: var(--bg);
}
.mobile-nav-brand {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mobile-nav-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 0.9rem;
  transition: color 150ms, background 150ms;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-nav-close:hover {
  color: var(--text);
  background: var(--bg-2);
}

/* Scrollable body - fills remaining drawer height, scroll lives here */
.mobile-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.mobile-nav-body > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Primary links */
.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  transition: color 150ms, background 150ms;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--phillies);
  background: var(--bg-2);
}
.mobile-nav-link .fa-chevron-right {
  font-size: 0.6rem;
  color: var(--text-3);
  transition: color 150ms, transform 150ms;
}
.mobile-nav-link:hover .fa-chevron-right {
  color: var(--phillies);
  transform: translateX(2px);
}
.mobile-nav-link .fa-regular.fa-user {
  margin-right: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

/* Sub-links: team colour pills */
.mobile-nav-sub {
  padding: 0.6rem 1.25rem 0.75rem;
  background: var(--bg-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-sublink {
  display: inline-block;
  padding: 0.45rem 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background 150ms;
}
.mobile-nav-sublink:hover {
  background: color-mix(in srgb, currentColor 24%, transparent);
}

/* Footer: subscribe button + auth links */
.mobile-nav-footer {
  padding: 1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-top: 2px solid var(--border);
  margin-top: auto;
}
.mobile-nav-footer .btn-subscribe {
  width: 100%;
  justify-content: center;
  padding: 0.7rem;
  font-size: 0.85rem;
}
.mobile-user-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.mobile-user-section .mobile-nav-link {
  padding: 0.6rem 0;
  border-bottom: none;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-2);
}
.mobile-user-section .mobile-nav-link:hover {
  background: transparent;
  color: var(--phillies);
}


/* ─── 13. MASTHEAD & TEAM BAND ───────────────────────────────── */
#masthead {
  border-bottom: 3px double var(--border);
  padding-top: 3rem;
  overflow: hidden;
}

.masthead-dateline {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.masthead-dateline span { margin: 0 1rem; white-space: nowrap; }

.masthead-rule {
  height: 1px;
  background: var(--border);
  margin-bottom: 1rem;
}
.masthead-rule--double {
  height: 3px;
  background: linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent 2px,
    var(--border) 2px
  );
}

.masthead-wordmark {
  text-align: center;
  padding: 1.5rem 0;
}
.masthead-wordmark h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text);
}
.masthead-wordmark h1 .mnh {
  display: block;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.5vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}

.masthead-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--text-3);
  margin-top: 0.5rem;
}

/* Team color band navigation */
.team-band {
  display: flex;
  margin: 1rem 0 0;
  border-top: 1px solid var(--border);
}
.team-band-item {
  flex: 1;
  text-align: center;
  padding: 0.45rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms ease;
}
.team-band-item:last-child { border-right: none; }
.team-band-item::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
  z-index: -1;
}
.team-band-item[data-team="eagles"]::before   { background: var(--eagles); }
.team-band-item[data-team="phillies"]::before { background: var(--phillies); }
.team-band-item[data-team="flyers"]::before   { background: var(--flyers); }
.team-band-item[data-team="sixers"]::before   { background: var(--sixers); }
.team-band-item:hover              { color: #fff; }
.team-band-item:hover::before      { transform: scaleX(1); }


/* ─── 14. HERO - FRONT PAGE ──────────────────────────────────── */
#hero {
  padding: 2rem 0 1.5rem;
  border-bottom: 3px double var(--border);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  border: 1px solid var(--border);
}

.hero-main {
  padding: 2rem;
  border-right: 1px solid var(--border);
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--team-color, var(--phillies));
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--team-color, var(--phillies));
  display: inline-block;
}

.hero-main h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.hero-byline   { margin-bottom: 1.25rem; }

.hero-lede {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-2);
  padding-top: 1rem;
  border-top: 1px solid var(--border-lt);
  margin-bottom: 1rem;
}
.hero-lede p + p { margin-top: 0.75rem; }

.hero-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding-bottom: 0.2rem;
  position: relative;
  transition: color var(--transition);
}
.hero-read-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--team-color, var(--phillies));
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-read-more:hover::after,
.hero-main:hover .hero-read-more::after { width: 100%; }
.hero-read-more:hover,
.hero-main:hover .hero-read-more { color: var(--team-color, var(--phillies)); }
.hero-read-more .arrow { transition: transform var(--transition); }
.hero-read-more:hover .arrow,
.hero-main:hover .hero-read-more .arrow { transform: translateX(4px); }

/* Hero main bottom row — CTA + bookmark */
.hero-main-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-main-bottom .bookmark-btn {
  z-index: 2;
  position: relative;
}

/* Hero sidebar */
.hero-sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-top {
  padding: 0.75rem 1.25rem;
}

.sidebar-section-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-lt);
}

.sidebar-story {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-lt);
  position: relative;
  cursor: pointer;
}
.sidebar-story:last-child { border-bottom: none; }
.sidebar-story h4 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sidebar-story-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-3);
  margin-bottom: 0.25rem;
  letter-spacing: 0.08em;
}
.sidebar-story-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.sidebar-story-title-row h4 { flex: 1; }
.sidebar-story-title-row .bookmark-btn {
  z-index: 2;
  position: relative;
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 0.15rem;
}

.sidebar-story h4 {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--transition);
}
.sidebar-story:hover h4 { color: var(--phillies); }
.sidebar-story p {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.2rem;
}

.sidebar-bottom {
  background: var(--ink);
  padding: 1.25rem;
  color: var(--paper);
}
.sidebar-stat-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(244, 239, 228, 0.5);
  margin-bottom: 0.25rem;
}
.sidebar-stat-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--phillies);
  line-height: 1;
}
.sidebar-stat-desc {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: rgba(244, 239, 228, 0.7);
  margin-top: 0.25rem;
}

/* Secondary story row */
.hero-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-top: none;
}

.secondary-story {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--border);
  transition: background var(--transition);
  position: relative;
  cursor: pointer;
}
.secondary-story h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.secondary-story:last-child { border-right: none; }
.secondary-story:hover      { background: var(--bg-2); }

.secondary-story h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.4rem 0 0.5rem;
  transition: color var(--transition);
}
.secondary-story:hover h3 { color: var(--phillies); }
.secondary-story p {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.5;
}


/* ─── 16. LATEST DISPATCHES (BLOG GRID) ──────────────────────── */
#blog .posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.post-card {
  padding: 1.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  transition: background var(--transition);
  position: relative;
  cursor: pointer;
}
.post-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.archive-grid .post-card:nth-child(3n),
.related-grid .post-card:nth-child(3n) { border-right: none; }
#blog .posts-grid .post-card:nth-child(3n+1):not(.post-card--featured) { border-right: none; }
.post-card:hover         { background: var(--bg-2); }

.post-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  margin: -1.5rem -1.5rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.post-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  filter: grayscale(20%);
}
.post-card:hover .post-card-img img { transform: scale(1.04); }
.post-card-img .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(20, 16, 10, 0.4));
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.post-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  flex: 1;
  transition: color var(--transition);
}
.post-card:hover h3 { color: var(--phillies); }

.post-card-excerpt {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0.6rem 0 1rem;
  flex: 1;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-lt);
  position: relative;
  z-index: 2;
}
.post-card-author {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
}
.post-card-read {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--transition);
  position: relative;
}
.post-card-read::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--phillies);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.post-card:hover .post-card-read { color: var(--phillies); }
.post-card:hover .post-card-read::after { width: 100%; }

/* Featured wide card */
.post-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.post-card--featured .post-card-img {
  margin: 0;
  border-bottom: none;
  border-right: 1px solid var(--border);
  aspect-ratio: auto;
  min-height: 280px;
}
.post-card--featured .post-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.post-card--featured h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0.5rem 0 0.75rem;
}
.post-card--featured .post-card-excerpt { font-size: 0.9rem; }

.blog-footer {
  margin-top: 2rem;
  text-align: center;
}


/* ─── 17. STATS BAND ─────────────────────────────────────────── */
#stats-band {
  background: var(--ink);
  color: var(--paper);
  padding: 3rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
  border-right: 1px solid rgba(244, 239, 228, 0.12);
}
.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-desc {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(244, 239, 228, 0.5);
}


/* ─── 18. PODCAST - FROM THE BOOTH ──────────────────────────── */
#podcast {
  border-left: 4px solid var(--phillies);
  padding-left: 0;
}
#podcast .section-inner { padding-left: 2rem; }

.podcast-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3rem;
  align-items: start;
}

.podcast-show-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.podcast-show-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--phillies);
}

.podcast-show-art {
  aspect-ratio: 1;
  background: var(--bg-3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-family: var(--serif);
  border: 1px solid var(--border);
  color: var(--phillies);
}

.podcast-show-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 0.35rem;
}

.podcast-show-desc {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.podcast-platforms {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.platform-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  transition: all var(--transition);
}
.platform-btn:hover {
  border-color: var(--phillies);
  color: var(--phillies);
}

/* Episodes list */
.episodes-list { display: flex; flex-direction: column; gap: 0; }

.episode-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-lt);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  transition: background var(--transition);
  cursor: pointer;
}
.episode-item:last-child { border-bottom: none; }

.episode-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--phillies);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: background var(--transition), transform var(--transition);
}
.episode-item:hover .episode-play { background: #c4121f; transform: scale(1.08); }

.episode-num {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 0.25rem;
}
.episode-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--transition);
}
.episode-item:hover .episode-title { color: var(--phillies); }
.episode-desc {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.episode-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}


/* ─── 19. VIDEOS - FILM ROOM ─────────────────────────────────── */
#videos {
  border-left: 4px solid var(--flyers);
  padding-left: 0;
}
#videos .section-inner { padding-left: 2rem; }

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.video-card {
  background: var(--card-bg);
  cursor: pointer;
  transition: background var(--transition);
}
.video-card:hover { background: var(--bg-2); }

.video-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.video-card:hover .video-thumb img { transform: scale(1.05); }

/* No-thumbnail placeholder */
.video-thumb-no-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--ink-2, #1a1710) 100%);
  color: var(--text-3);
  font-size: 2.25rem;
  opacity: 0.5;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 10, 0.35);
  transition: background var(--transition);
}
.video-card:hover .video-play-overlay { background: rgba(20, 16, 10, 0.5); }

.video-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(247, 73, 2, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform var(--transition), background var(--transition);
}
.video-card:hover .video-play-btn { transform: scale(1.1); background: var(--flyers); }

.video-duration {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(20, 16, 10, 0.8);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}

.video-info { padding: 1rem; }
.video-info h3 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.35rem;
  transition: color var(--transition);
}
.video-card:hover .video-info h3 { color: var(--flyers); }

.video-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-3);
}


/* ─── 20. CROSSWORD CORNER ───────────────────────────────────── */

#crossword-corner { padding: 4rem 0; }

.crossword-teaser {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: center;
  padding: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}

/* Decorative 5×5 grid */
.crossword-teaser-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.cw-teaser-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1px;
  aspect-ratio: 1;
}

.cw-teaser-cell--black {
  background: var(--sixers);
  border-color: var(--sixers);
}

/* Content */
.crossword-teaser-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sixers);
  margin: 0 0 0.5rem;
}

.crossword-teaser-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

.crossword-teaser-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 180ms;
}
.crossword-teaser-title a:hover { color: var(--sixers); }

.crossword-teaser-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.crossword-teaser-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-3);
  margin: 0 0 1.25rem;
}

.crossword-teaser-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .crossword-teaser {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .crossword-teaser-grid {
    width: 120px;
  }
}

/* ─── 21. NEWSLETTER SECTION ─────────────────────────────────── */
#newsletter {
  background: var(--ink);
  color: var(--paper);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.newsletter-bg-text {
  position: absolute;
  bottom: -0.5rem;
  right: -1rem;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(6rem, 18vw, 16rem);
  color: rgba(244, 239, 228, 0.03);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

.newsletter-inner {
  max-width: 560px;
  position: relative;
  z-index: 1;
}

.newsletter-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phillies);
  margin-bottom: 0.75rem;
}

#newsletter h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--paper);
  margin-bottom: 1rem;
  line-height: 1.1;
}
#newsletter p { color: rgba(244, 239, 228, 0.65); font-size: 0.95rem; }

.newsletter-form { margin-top: 2rem; }

.newsletter-form-row { display: flex; gap: 0.5rem; }

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.8rem 1rem;
  background: rgba(244, 239, 228, 0.08);
  border: 1px solid rgba(244, 239, 228, 0.2);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9rem;
  border-radius: 0;
  transition: border-color var(--transition);
}
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--phillies);
}
.newsletter-form input::placeholder { color: rgba(244, 239, 228, 0.3); }

.btn-newsletter {
  background: var(--phillies);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background var(--transition), transform 100ms;
  white-space: nowrap;
}
.btn-newsletter:hover  { background: #c4121f; }
.btn-newsletter:active { transform: scale(0.98); }

.newsletter-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(244, 239, 228, 0.35);
  margin-top: 0.75rem;
}


/* ─── 21. ABOUT STRIP ────────────────────────────────────────── */
#about {
  padding: 4rem 0;
  border-bottom: 3px double var(--border);
}

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

.about-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--eagles);
  margin-bottom: 0.75rem;
}
#about h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 1.25rem; }
#about p  { font-size: 0.95rem; margin-bottom: 1rem; }

.about-sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--text);
  margin-top: 1.5rem;
}

.about-handles {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.handle-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms ease, border-color 200ms ease;
}
.handle-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--eagles);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
  z-index: -1;
}
.handle-link:hover              { color: #fff; border-color: var(--eagles); }
.handle-link:hover::before      { transform: scaleX(1); }

.about-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-quote-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--eagles);
  padding: 1.5rem;
}
.about-quote-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text);
}
.about-quote-card cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-style: normal;
}


/* ─── 22. FOOTER ─────────────────────────────────────────────── */
#site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 4rem 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 260px 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(244, 239, 228, 0.1);
}

.footer-brand h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--paper);
  margin-bottom: 0.35rem;
}
.footer-brand p {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: rgba(244, 239, 228, 0.5);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.footer-socials { display: flex; gap: 0.75rem; }
.footer-social {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(244, 239, 228, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 239, 228, 0.6);
  font-size: 0.9rem;
  transition: all var(--transition);
}
.footer-social:hover {
  border-color: var(--phillies);
  color: var(--phillies);
}

.footer-col h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.4);
  margin-bottom: 1rem;
}

.footer-links li + li { margin-top: 0.5rem; }
.footer-links a {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: rgba(244, 239, 228, 0.65);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--paper); }

.footer-bottom {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(244, 239, 228, 0.06);
}
.footer-bottom p {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: rgba(244, 239, 228, 0.3);
  margin: 0;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: rgba(244, 239, 228, 0.3);
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: rgba(244, 239, 228, 0.8); }


/* ─── 23. POST FORMATS - SINGLE ──────────────────────────────── */
.single-header {
  padding: 3rem 0 2rem;
  border-bottom: 3px double var(--border);
}
.single-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.single-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  margin-bottom: 1.25rem;
}
.single-byline { margin-bottom: 2rem; }
.single-byline .byline span + span::before {
  content: ' \00B7 ';
  opacity: 0.5;
}
.single-featured-img {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--bg-3);
  margin-top: 2rem;
  border: 1px solid var(--border);
}
.single-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
}

/* Article body */
.entry-content {
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-2);
  padding: 3rem 0;
}
.entry-content h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
.entry-content h3 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.entry-content h4 { font-size: 1.1rem;  margin: 1.5rem 0 0.5rem; }
.entry-content p  { margin-bottom: 1.5rem; text-wrap: pretty; }
.entry-content a  { color: var(--phillies); text-decoration: underline; }
.entry-content a:hover { color: #c4121f; }

.entry-content blockquote {
  border-left: 4px solid var(--phillies);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--bg-2);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
}
.entry-content blockquote p { margin-bottom: 0; }
.entry-content blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-style: normal;
}
.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 1.75rem;
  margin-bottom: 1.5rem;
}
.entry-content li { margin-bottom: 0.4rem; }

.entry-content figure {
  margin: 2rem 0;
}
.entry-content figure img {
  border: 1px solid var(--border);
  filter: grayscale(15%);
}
.entry-content pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--bg-3);
  padding: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.entry-content hr {
  border: none;
  border-top: 3px double var(--border);
  margin: 3rem 0;
}

/* Post footer - tags, share */
.single-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.post-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: all var(--transition);
}
.post-tag:hover { border-color: var(--phillies); color: var(--phillies); }

/* Related posts */
.related-posts {
  padding: 3rem 0;
  border-top: 3px double var(--border);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-bottom: none;
}


/* ─── 24. ARCHIVE & TAXONOMY ─────────────────────────────────── */
.archive-header {
  padding: 3rem 0 2rem;
  border-bottom: 3px double var(--border);
}
.archive-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 0.75rem;
}
.archive-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}
.archive-title .team-accent-eagles   { color: var(--eagles); }
.archive-title .team-accent-phillies { color: var(--phillies); }
.archive-title .team-accent-flyers   { color: var(--flyers); }
.archive-title .team-accent-sixers   { color: var(--sixers); }

.archive-desc {
  font-size: 0.95rem;
  color: var(--text-3);
  margin-top: 0.75rem;
  font-family: var(--sans);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}


/* ─── 25. LOAD MORE ──────────────────────────────────────────── */
.gtl-load-more-wrap {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.gtl-load-more {
  min-width: 200px;
  justify-content: center;
}
.gtl-load-more.loading {
  opacity: 0.5;
  pointer-events: none;
}


/* ─── 26. ABOUT DESK CARD ────────────────────────────────────── */
.about-desk {
  margin: 1.5rem 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--phillies);
  padding: 1rem 1.25rem;
}
.about-desk-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--phillies);
  margin-bottom: 0.75rem;
}
.about-desk-list { list-style: none; margin: 0; padding: 0; }
.about-desk-list li {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-lt);
  font-size: 0.82rem;
}
.about-desk-list li:last-child { border-bottom: none; }
.about-desk-key {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  min-width: 72px;
  flex-shrink: 0;
  padding-top: 0.05rem;
}
.about-desk-val {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.4;
}


/* ─── DARK MODE: ALWAYS-DARK PANELS ─────────────────────────────
   Sections that use var(--ink) as their background in light mode
   (top-strip, stats-band, newsletter, footer) invert in dark mode
   because --ink flips to cream. These overrides keep them properly
   dark and fix their text colors. */

[data-theme="dark"] #top-strip {
  background: #111009;
  color: var(--ink);
}

[data-theme="dark"] #stats-band {
  background: #111009;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .stat-desc {
  color: rgba(240, 235, 224, 0.5);
}

[data-theme="dark"] #newsletter {
  background: var(--bg-3);
}
[data-theme="dark"] #newsletter h2 { color: var(--ink); }
[data-theme="dark"] #newsletter p  { color: rgba(240, 235, 224, 0.65); }
[data-theme="dark"] .newsletter-eyebrow { color: var(--phillies); }

[data-theme="dark"] #site-footer {
  background: #111009;
  color: var(--ink);
}
[data-theme="dark"] .footer-brand h2      { color: var(--ink); }
[data-theme="dark"] .footer-brand p       { color: rgba(240, 235, 224, 0.5); }
[data-theme="dark"] .footer-col h3        { color: rgba(240, 235, 224, 0.4); }
[data-theme="dark"] .footer-links a       { color: rgba(240, 235, 224, 0.65); }
[data-theme="dark"] .footer-links a:hover { color: var(--ink); }
[data-theme="dark"] .footer-bottom p,
[data-theme="dark"] .footer-bottom-links a { color: rgba(240, 235, 224, 0.3); }
[data-theme="dark"] .footer-bottom-links a:hover { color: rgba(240, 235, 224, 0.8); }
[data-theme="dark"] .footer-top    { border-bottom-color: rgba(240, 235, 224, 0.1); }
[data-theme="dark"] .footer-bottom { border-top-color: rgba(240, 235, 224, 0.06); }
[data-theme="dark"] .footer-social {
  border-color: rgba(240, 235, 224, 0.15);
  color: rgba(240, 235, 224, 0.6);
}

/* Search overlay in dark mode */
[data-theme="dark"] #search-overlay {
  background: rgba(10, 8, 6, 0.92);
}


/* ─── 27. SCROLL ANIMATIONS ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* ─── 27. RESPONSIVE - 1024px ────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-sidebar {
    flex-direction: row;
    border-top: 1px solid var(--border);
  }
  .hero-main { border-right: none; }
  .sidebar-top {
    border-bottom: none;
    border-right: 1px solid var(--border);
    flex: 1;
  }
  .sidebar-bottom { flex: 0 0 180px; }

  .hero-secondary { grid-template-columns: 1fr 1fr; }
  .secondary-story:nth-child(2) { border-right: none; }
  .secondary-story:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--border);
  }

  .podcast-grid { grid-template-columns: 1fr; }

  /* Footer: brand spans full width, 3 link columns below */
  .footer-top   {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(244, 239, 228, 0.1);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 1.5rem;
  }
  .footer-brand p { margin-bottom: 0; }

  .about-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .stats-grid   { grid-template-columns: repeat(3, 1fr); }

  .post-card--featured { grid-template-columns: 1fr; }
  .post-card--featured .post-card-img { aspect-ratio: 16 / 9; }

  .related-grid { grid-template-columns: 1fr 1fr; }

  .mega-menu { min-width: 400px; }

  /* 2-col videos between 768–1024px (3-col is too crowded on tablets) */
  .videos-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tighten nav slightly on tablets */
  .nav-inner  { gap: 1.5rem; }
  .nav-actions { gap: 0.5rem; }
}


/* ─── 28. RESPONSIVE - 768px ─────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 56px; }

  /* Hide desktop nav, show hamburger */
  .nav-links,
  .nav-actions .nav-membership-badge { display: none; }
  .nav-hamburger { display: flex; }
  #mobile-nav         { display: flex; flex-direction: column; } /* flex so body+footer fill height */
  #mobile-nav-overlay { display: block; }

  /* Remove sign-in / user avatar from the header bar on mobile  - 
     they both live in the drawer already */
  .nav-actions .nav-signin,
  .nav-actions .nav-user { display: none; }

  /* Push actions to the far right when nav-links (flex:1) is hidden */
  .nav-actions { margin-left: auto; }

  /* Constrain custom logo image inside the 56px nav bar */
  .nav-logo .custom-logo { max-height: 34px; width: auto; }

  /* Grid resets */
  #blog .posts-grid { grid-template-columns: 1fr !important; }
  .post-card { border-right: none !important; border-bottom: 1px solid var(--border); }
  .post-card:last-child { border-bottom: none; }
  .videos-grid  { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }

  .hero-secondary { grid-template-columns: 1fr; }
  .secondary-story { border-right: none !important; }
  .secondary-story + .secondary-story { border-top: 1px solid var(--border); }

  /* Footer mobile */
  .footer-top    { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand  {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(244, 239, 228, 0.1);
  }
  .footer-brand p { margin-bottom: 1rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  /* Podcast / From the Booth mobile */
  #podcast { border-left: none; padding-left: 0; border-top: 4px solid var(--phillies); }
  #podcast .section-inner { padding-left: 0; }
  .episode-item { grid-template-columns: auto 1fr; }
  .episode-meta { grid-column: 1 / -1; text-align: left; }

  /* Videos / Film Room mobile */
  #videos { border-left: none; padding-left: 0; border-top: 4px solid var(--flyers); }
  #videos .section-inner { padding-left: 0; }

  /* Blog grid mobile - prevent overflow */
  #blog .posts-grid { overflow: hidden; }
  .post-card--featured { grid-template-columns: 1fr; }
  .post-card--featured .post-card-img {
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .post-card--featured .post-card-img img {
    max-width: 100%;
  }
  .post-card--featured .post-card-body {
    padding: 1.25rem;
  }

  /* Team band - keep flex:1 so items stay evenly spread (centered) at all widths */
  .team-band { overflow-x: auto; justify-content: stretch; }
  .team-band-item { flex: 1; min-width: 0; }

  /* Newsletter stacks */
  .newsletter-form-row { flex-direction: column; }

  /* Top strip simplify */
  .strip-meta { display: none; }
  #top-strip  { justify-content: center; }

  /* Cookie simplify */
  .cookie-actions   { flex-direction: column; }
  #cookie-banner    { flex-direction: column; align-items: flex-start; }

  /* Modal adjustments */
  .modal-form { flex-direction: column; }
  .modal      { padding: 2rem 1.5rem; }

  /* Single post */
  .single-footer { flex-direction: column; }
  .single-featured-img { aspect-ratio: 16 / 9; }

  /* Nav - compact for mobile so nothing gets squeezed */
  .nav-inner   { gap: 0.75rem; }
  .nav-actions { gap: 0.4rem; }

  /* Masthead dateline - wrap instead of overflowing */
  .masthead-dateline      { flex-wrap: wrap; justify-content: center; gap: 0; }
  .masthead-dateline span { margin: 0.1rem 0.4rem; }

  /* Section padding - generous on desktop, lean on phones */
  .section          { padding: 2.5rem 0; }
  #about            { padding: 2.5rem 0; }
  #crossword-corner { padding: 2.5rem 0; }

  /* Hero card - reduce inner padding */
  .hero-main   { padding: 1.5rem; }
  .sidebar-top { padding: 1.25rem; }

  /* Single post - tighten header and body spacing */
  .single-header { padding: 2rem 0 1.5rem; }
  .entry-content { padding: 2rem 0; }

  /* About - smaller quote on mobile */
  .about-quote-card blockquote { font-size: 0.95rem; }

  /* Footer - reduce top breathing room */
  #site-footer { padding-top: 2.5rem; }
  .footer-top  { padding-bottom: 2rem; }
}


/* ─── 29. MEMBERSHIP PAGE ────────────────────────────────────── */

.gtl-membership-hero {
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--border);
}

.gtl-membership-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 0.75rem;
}

.gtl-membership-lead {
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 560px;
  margin: 0;
}

/* ─── Homepage Membership Strip ──────────────────────────────── */
.gtl-membership-strip-section {
  padding: 2.5rem 0;
  background: var(--bg-2);
}

/* Non-member: editorial strip with left copy + two tier columns */
.gtl-membership-strip {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 0;
  align-items: center;
}

.gtl-strip-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

.gtl-strip-left {
  padding-right: 2.5rem;
}

.gtl-strip-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--union);
  margin-bottom: 0.5rem;
}

.gtl-strip-headline {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.gtl-strip-desc {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text-3);
}

.gtl-strip-tier {
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gtl-strip-tier-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.4rem 0 0.1rem;
}

.gtl-strip-tier-price {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--union);
  line-height: 1;
  margin: 0;
}
.gtl-strip-tier-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-3);
  margin-left: 0.15rem;
}

.gtl-strip-tier-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-3);
  margin: -0.25rem 0 0;
}

.gtl-strip-tier-perks {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0 0 0.25rem;
}

.gtl-strip-tier .gtl-strip-tier-price { color: var(--text); }
.gtl-strip-tier--featured .gtl-strip-tier-price { color: var(--union); }
.gtl-strip-tier--featured .gtl-strip-tier-name { color: var(--union); }

/* FREE/PREMIUM badges should be inline (not stretch full column width) */
.gtl-strip-tier .label { align-self: flex-start; }

/* Bleachers member: subtle upgrade banner */
.gtl-upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--union);
  background: var(--card-bg);
}

.gtl-upgrade-banner-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--union);
  margin-bottom: 0.35rem;
}

.gtl-upgrade-banner-copy p {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text-2);
  margin: 0;
}

@media (max-width: 860px) {
  .gtl-membership-strip {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .gtl-strip-divider { display: none; }
  .gtl-strip-left    { padding-right: 0; }
  .gtl-strip-tier    { padding: 1rem 0 0; border-top: 1px solid var(--border); }
  .gtl-upgrade-banner { flex-direction: column; align-items: flex-start; }
}

.gtl-tier-card {
  border: 2px solid var(--border);
  background: var(--card-bg);
  padding: 1.75rem;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
}

.gtl-tier-card:hover { transform: translateY(-2px); }
.gtl-tier-featured    { border-color: var(--union); }

.gtl-tier-featured-label {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--union);
  color: var(--paper);
  padding: 0.2rem 0.5rem;
}

.gtl-tier-top    { margin-bottom: 1.25rem; }

.gtl-tier-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0 0.75rem;
}

.gtl-tier-billing-toggle {
  display: flex;
  border: 1px solid var(--border);
  width: fit-content;
  margin-bottom: 0.75rem;
}

.gtl-billing-opt {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: background var(--transition), color var(--transition);
}

.gtl-billing-opt.active { background: var(--text); color: var(--bg); }

/* Bleachers "Free - Always" badge - mirrors billing toggle height for cross-card alignment */
.gtl-tier-free-toggle {
  border: 1px solid var(--border);
  width: fit-content;
  margin-bottom: 0.75rem; /* matches .gtl-tier-billing-toggle margin */
}

.gtl-free-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: var(--text);
  color: var(--bg);
}

.gtl-billing-save {
  font-family: var(--mono);
  font-size: 0.58rem;
  background: var(--union);
  color: var(--paper);
  padding: 0.1rem 0.3rem;
  letter-spacing: 0.05em;
}

.gtl-tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.gtl-tier-amount {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.gtl-tier-period {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-3);
}

.gtl-tier-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--union);
  width: 100%;
  display: none;
  margin-top: 0.15rem;
}

.gtl-tier-note.visible { display: block; }

.gtl-tier-features {
  list-style: none;
  margin: 0 0 1.5rem;
  flex: 1;
  flex: 1; /* push CTA button to bottom of card */
}

.gtl-tier-features li {
  font-family: var(--body);
  font-size: 0.88rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-lt);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-2);
}

.gtl-tier-features li::before { font-family: var(--mono); font-size: 0.8rem; flex-shrink: 0; }
.gtl-tier-features li.yes       { color: var(--text); }
.gtl-tier-features li.yes::before { content: '\2713'; color: var(--eagles); }
.gtl-tier-features li.no        { opacity: 0.45; }
.gtl-tier-features li.no::before  { content: '-'; color: var(--text-3); }

.gtl-tier-card .btn { width: 100%; justify-content: center; }

.gtl-tier-current {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.55rem;
  border: 2px solid var(--border);
}

.gtl-tier-current-gold { color: var(--union); border-color: var(--union); }

.gtl-membership-footnote {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
  margin-top: 1.5rem;
}

.gtl-membership-faq       { padding: 3.5rem 0; }
.gtl-membership-faq-inner  { max-width: 640px; }

.gtl-membership-faq h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

.gtl-faq-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-lt);
}

.gtl-faq-item dt {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.gtl-faq-item dd {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 0;
}


/* ─── 30. MEMBERSHIP GATING ──────────────────────────────────── */

.gtl-gated-notice {
  border: 2px solid var(--border);
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 2rem 0;
  background: var(--bg-2);
}

.gtl-gated-notice .gated-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  color: var(--text-3);
}

.gtl-gated-notice h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.gtl-gated-notice p {
  font-family: var(--body);
  color: var(--text-2);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide ads / promo blocks for Club Seats members via body class */
.is-club-seats .ad-block,
.is-club-seats .promo-subscribe { display: none !important; }


/* ─── 30. RESPONSIVE - 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .hero-sidebar { flex-direction: column; }
  .sidebar-top  { border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-bottom { flex: auto; }

  .masthead-wordmark h1 { font-size: clamp(2rem, 12vw, 3.5rem); }

  #newsletter h2 { font-size: 1.75rem; }

  .podcast-grid { gap: 2rem; }

  /* Reduce container side-padding on very narrow screens */
  .container,
  .container--narrow,
  .section-inner { padding: 0 1rem; }

  /* Match top-strip padding to container so strip and nav content align */
  #top-strip { padding-left: 1rem; padding-right: 1rem; }

  /* Allow section headings to wrap (white-space:nowrap overflows on small phones) */
  .section-heading { white-space: normal; }

  /* Further reduce section padding */
  .section          { padding: 1.75rem 0; }
  #about            { padding: 1.75rem 0; }
  #crossword-corner { padding: 1.75rem 0; }

  /* Hero card - minimal inner padding */
  .hero-main   { padding: 1.25rem; }
  .sidebar-top { padding: 1rem; }

  /* Article body - slightly smaller type, tighter vertical rhythm */
  .entry-content    { font-size: 1rem; padding: 1.75rem 0; }
  .entry-content h2 { font-size: 1.5rem; }
  .entry-content h3 { font-size: 1.15rem; }
  .entry-content blockquote { padding: 0.75rem 1rem; font-size: 1rem; }

  /* Single post header */
  .single-header { padding: 1.5rem 0 1rem; }

  /* Footer */
  #site-footer { padding-top: 2rem; }
}


/* ─── 30. PAGE TRANSITION OVERLAY ───────────────────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  display: none;
  will-change: opacity;
}

/* Stat mini-links in about section */
.about-stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition), transform var(--transition);
}
.about-stat-link:hover { opacity: 0.75; transform: translateY(-2px); }