/* Stories — single article (long-form editorial).
   Dark full-bleed hero (matches homepage/platform editorial rhythm) →
   continuous full-width light reading section with a centered column.
   Headings use the site display face (Oswald, uppercase). base.css tokens.
   Used by stories/<slug>.html. Pilot: social-media-in-sports. */

/* ── Hero: dark, full-bleed image ───────────────────────────────── */
.article-hero {
  position: relative;
  isolation: isolate;
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  padding: calc(72px + 8vh) min(5vw, 72px) clamp(40px, 6vh, 72px);
  overflow: hidden;
  background: var(--bg);
}
.article-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Black & white to match the homepage cover treatment. */
  filter: grayscale(1) contrast(1.1) brightness(.78);
}
.article-hero::after {                 /* legibility + brand wash */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(5,6,7,.92) 0%, rgba(5,6,7,.45) 45%, rgba(5,6,7,.30) 100%);
}
/* Stronger legibility wash for busy/high-detail photos (e.g. Alabama's packed
   stadium crowd). Deliberate per-article override of the standard treatment —
   raises the mid/top stops so the headline holds contrast over the texture. */
.article-hero--dim::after {
  background:
    linear-gradient(to top, rgba(5,6,7,.95) 0%, rgba(5,6,7,.66) 50%, rgba(5,6,7,.48) 100%);
}

/* Lockup hero — for partnership case studies with no licensable photo.
   A brand "Greenfly × <Partner>" lockup on near-black, centered. Logos
   keep full colour (the B&W photo filter doesn't apply — there's no photo). */
.article-hero--lockup {
  background:
    radial-gradient(58% 55% at 34% 42%, rgba(182,245,0,.10) 0%, transparent 70%),
    #0B0C0D;
}
.hero-lockup {
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(24px, 3.5vw, 48px);
  margin-bottom: clamp(28px, 4vh, 44px);
}
.hero-lockup .hl-fly { height: clamp(60px, 8vw, 104px); width: auto; }
.hero-lockup .hl-byu { height: clamp(72px, 9.5vw, 124px); width: auto; }
.hero-lockup .hl-x {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px); color: var(--accent); line-height: 1;
}
/* Same width as .article-body so the hero text and body copy share one
   left edge (both centered on the page). */
.article-hero-inner { max-width: 720px; margin: 0 auto; width: 100%; }
.article-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.article-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.article-kicker .mono {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
}
.article-hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.014em;
  line-height: 0.98;
  font-size: clamp(40px, 6vw, 88px);
  color: #fff;
  max-width: 16ch;
}
.article-lede {
  margin-top: 24px;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}
.article-meta {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
/* No dimming on the separator. At rgba(255,255,255,.3) the middot was 2.55:1
   where the words either side of it sit at .6 and 7.30:1 — the dot was the
   only part of the line below AA, for no reason the design needed. It now
   inherits .article-meta. */

/* Social share row (URLs wired by js/stories-article.js from canonical) */
.article-share { margin-top: 22px; display: flex; gap: 12px; }
.article-share .share-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.85);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.article-share .share-btn svg { width: 17px; height: 17px; display: block; }
.article-share .share-btn:hover { color: #0F0F0F; background: var(--accent); border-color: var(--accent); }
.article-share .share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Reading section: full-width light, centered column ─────────── */
.article-wrap {
  padding: clamp(48px, 8vh, 96px) min(5vw, 72px) 0;
}
.article-body { max-width: 720px; margin: 0 auto; padding-bottom: 12vh; }
.article-body > * + * { margin-top: 1.35em; }
.article-body p {
  font-family: var(--body);
  font-size: 18px; line-height: 1.7; color: var(--text);
}
.article-body h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 1.04;
  font-size: clamp(28px, 3vw, 44px);
  margin-top: 1.7em;
}
.article-body h3 {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 25px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 1.6em;
}
/* Inline prose links. --accent-dim resolves to #6F8C2A on a light band, which
   is 3.30:1 on cream where body text needs 4.5:1. green-900 #335614 clears it
   at 7.26:1 — the same treatment the legal pages use, and an existing token in
   gf-design-system (--primary-hover) rather than a value invented here.
   Hover keeps brand green: it is a transient state, and the underline plus the
   resting colour already carry the affordance. */
.article-body a:not(.btn) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:not(.btn):hover { color: var(--accent); }
.article-body strong { font-weight: 600; }
/* In-body figure — full reading-column width image with optional caption */
.article-figure { margin: 2.2em 0; }
.article-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
/* Dark container — keeps the figure at reading-column width but puts the
   graphic on a brand-dark panel instead of floating on the cream. */
.article-figure--dark {
  background: #0F0F0F;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 36px);
}
.article-figure--dark img { border-radius: 8px; }
.article-figure figcaption {
  margin-top: 12px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .04em; color: var(--dim); line-height: 1.5;
}
.article-body ul { margin-left: 1.1em; }
.article-body li {
  font-family: var(--body);
  font-size: 18px; line-height: 1.6; color: var(--text);
  margin-top: 0.5em; padding-left: 0.3em;
}

/* TikTok click-to-load facade — shows the poster + play button; the real
   TikTok embed (and its third-party script) loads only on click. Keeps the
   page fast and defers third-party cookies until the reader opts in. */
.tiktok-facade {
  --accent: #B6F500;                 /* dark card sits inside .section-light */
  position: relative; display: block;
  width: 100%; max-width: 320px; margin: 2.6em auto;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--hair-strong); border-radius: 14px;
  background: #0F0F0F; overflow: hidden; cursor: pointer;
  padding: 0;
}
.tiktok-facade .tt-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
}
.tiktok-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.1) 46%, rgba(0,0,0,.42) 100%);
}
.tiktok-facade .tt-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 9px; border-radius: 5px; backdrop-filter: blur(4px);
}
.tiktok-facade .tt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 64px; height: 64px; border: none; border-radius: 50%;
  background: var(--accent); color: #0F0F0F; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  transition: transform .25s var(--ease-out, ease);
}
.tiktok-facade:hover .tt-play { transform: translate(-50%,-50%) scale(1.08); }
.tiktok-facade .tt-play svg { width: 24px; height: 24px; margin-left: 3px; }
.tiktok-facade .tt-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px; display: flex; flex-direction: column; gap: 5px;
}
.tiktok-facade .tt-handle {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.tiktok-facade .tt-cap {
  font-family: var(--body); font-size: 14px; line-height: 1.4; color: #fff;
}

/* TikTok lightbox — opens the player on a dark scrim so the embed's own
   white chrome reads as an intentional modal, with no in-page layout shift. */
.tiktok-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: flex-start; justify-content: center;
  padding: 5vh 20px; overflow: auto;
  background: rgba(5,6,7,.93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tiktok-modal.is-open { display: flex; }
.tiktok-modal-inner { position: relative; width: 100%; max-width: 605px; }
.tiktok-modal .tiktok-embed { margin: 0 auto !important; }
.tiktok-modal-close {
  position: fixed; top: 20px; right: 24px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent, #B6F500); color: #0F0F0F; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.article-body li::marker { color: var(--accent); }

/* Pull quote — dark brand panel with green highlights + attribution.
   New-brand translation of the old teal quote graphic. */
.article-quote {
  position: relative;
  margin: 2.6em 0;
  /* Panel is dark, but it sits inside .section-light (which flips --accent
     to field green). Re-assert electric green for the dark surface. */
  --accent: #B6F500;
  background: #0F0F0F;
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px) clamp(28px, 3.4vw, 44px);
  overflow: hidden;
}
.article-quote::before {            /* big quote-mark motif */
  content: "\201C";
  position: absolute; top: -0.18em; left: 0.12em;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 200px; line-height: 1;
  color: var(--accent); opacity: .14;
  pointer-events: none;
}
.article-quote blockquote {
  position: relative; margin: 0;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(23px, 2.6vw, 34px); line-height: 1.22;
  letter-spacing: -0.005em; color: #fff;
}
.article-quote blockquote .aq-green { color: var(--accent); }
.article-quote figcaption {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.article-quote .aq-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--accent);
}
.article-quote .aq-who { display: flex; flex-direction: column; line-height: 1.25; }
.article-quote .aq-name {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 19px; color: #fff; text-transform: uppercase; letter-spacing: -0.01em;
}
.article-quote .aq-title {
  font-family: var(--condensed); font-weight: 500;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent);
}

/* Pull-stat callout — the data the post ranks on */
.article-stat {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 2em 0;
}
.article-stat .n {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--text);
}
.article-stat .l { margin-top: 10px; color: var(--dim); font-size: 16px; line-height: 1.5; }
.article-stat em { font-style: italic; color: var(--text); }

/* FAQ */
.article-faq { margin-top: 2.4em; }
.article-faq h3 { margin-top: 1.5em; }
.article-faq p { color: var(--dim); }

/* End CTA */
.article-cta {
  border-top: 1px solid rgba(15,15,15,.14);
  margin-top: 3.2em; padding-top: 2.6em; text-align: center;
}
.article-cta h2 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.012em; line-height: 1; font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 10px;
}
.article-cta p { color: var(--dim); margin-bottom: 28px; }
.article-cta-row {
  display: flex; align-items: center; gap: 28px;
  max-width: 720px; margin: 0 auto;
}
.article-cta-rule { flex: 1; height: 1px; background: rgba(15,15,15,.18); }

@media (max-width: 720px) {
  .article-hero { min-height: 56vh; }
  .article-body p, .article-body li { font-size: 17px; }
}