/* ============================================================================
   AI Weekly — Quarterly Recap ("The State of AI")
   Premium editorial magazine. All styles scoped under .recap (no chrome bleed).
   Design language: dark cinematic cover + interstitials, warm-paper reading
   pages, color-coded features, big display serif, restrained scroll motion.
   ========================================================================== */

.recap {
  /* ---- palette ---- */
  --ink: #14131a;
  --ink-2: #1f1d27;
  --paper: #f6f2ea;
  --paper-2: #efeae0;
  --paper-3: #e6e0d3;
  --muted: #6d6a62;
  --muted-2: #918d83;
  --rule: #d9d2c4;
  --rule-dark: #2c2933;

  --blue: #1b5479;        /* brand link */
  --crimson: #c0362c;     /* Feature 1 — the recall */
  --gold: #b07d2b;        /* Feature 2 — the money */
  --teal: #1e8a6e;        /* Feature 3 — the field / brand teal */
  --accent: var(--crimson);

  /* ---- type ---- */
  --display: "Fraunces", "Merriweather", Georgia, serif;
  --serif: "Newsreader", "Merriweather", Georgia, serif;
  --sans: "Inter", "Lato", system-ui, -apple-system, sans-serif;

  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.recap *,
.recap *::before,
.recap *::after { box-sizing: border-box; }

.recap img { max-width: 100%; display: block; }
.recap a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* reading progress bar */
.recap__progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 60; transition: width .12s linear;
}

/* smooth anchor jumps + offset for the sticky section menu */
html { scroll-padding-top: 60px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* sticky section menu (appears after the cover scrolls away) */
.recap__nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,17,24,.9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--sans);
}
.recap__nav .wrap { display: flex; align-items: center; gap: 16px; height: 52px; }
.recap__nav .brand { font-weight: 800; font-size: .8rem; color: #f4f1ea; letter-spacing: .03em; white-space: nowrap; }
.recap__nav .brand span { color: var(--muted-2); font-weight: 600; }
.recap__nav .links { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.recap__nav .links::-webkit-scrollbar { display: none; }
.recap__nav a:not(.recap__nav-sub) { font-size: .79rem; color: rgba(244,241,234,.58); text-decoration: none; padding: 7px 12px; border-radius: 100px; white-space: nowrap; transition: color .15s, background .15s; }
.recap__nav a:not(.recap__nav-sub):hover { color: #f4f1ea; }
.recap__nav a.active { color: #14131a; background: #e7b94e; font-weight: 700; }
.recap__nav-sub { flex-shrink: 0; background: #e7b94e; color: #14131a !important; font-family: var(--sans); font-weight: 800; font-size: .78rem; padding: 8px 16px; border-radius: 100px; text-decoration: none; white-space: nowrap; transition: filter .15s; }
.recap__nav-sub:hover { filter: brightness(1.06); }
@media (max-width: 760px) { .recap__nav .brand { display: none; } }

/* inline subscribe bands (multiple conversion points through the report) */
.recap__subscribe { background: var(--ink); color: #f4f1ea; }
.recap__subscribe .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 27px 0; flex-wrap: wrap; }
.recap__subscribe .copy { font-family: var(--serif); font-size: 1.14rem; line-height: 1.4; }
.recap__subscribe .copy b { font-weight: 700; }
.recap__subscribe .copy span { color: rgba(244,241,234,.72); }
.recap__subscribe a { flex-shrink: 0; font-family: var(--sans); font-weight: 800; font-size: .92rem; background: #e7b94e; color: #14131a; border-radius: 100px; padding: 13px 26px; text-decoration: none; white-space: nowrap; transition: filter .15s; }
.recap__subscribe a:hover { filter: brightness(1.06); }
@media (max-width: 640px) { .recap__subscribe .wrap { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* shared layout */
.recap .wrap { width: min(1180px, 92vw); margin-inline: auto; }
.recap .measure { width: min(680px, 92vw); margin-inline: auto; }
.recap .measure-wide { width: min(820px, 92vw); margin-inline: auto; }

.recap .kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.recap .eyebrow {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ============================ COVER ===================================== */
.recap__cover {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 70% 10%, #2a2740 0%, var(--ink) 55%);
  color: #f4f1ea;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.recap__cover-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .42; mix-blend-mode: luminosity;
  transform: scale(1.06);
}
.recap__cover-grain {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.recap__cover-top, .recap__cover-bottom { position: relative; z-index: 2; }
.recap__masthead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--sans);
}
.recap__masthead-brand { font-weight: 800; letter-spacing: .02em; font-size: 1rem; }
.recap__masthead-issue { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.7); }

.recap__cover-center { position: relative; z-index: 2; padding: 4vh 0 6vh; }
.recap__cover h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.8rem, 8.4vw, 7.4rem);
  line-height: .98;
  letter-spacing: -0.02em;
  margin: 0 0 .35em;
  max-width: 16ch;
}
.recap__cover h1 em { font-style: italic; color: #e7b94e; }
.recap__cover-dek {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  color: rgba(244,241,234,.86);
  max-width: 46ch;
}
.recap__byline { margin-top: 1.6em; font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: rgba(244,241,234,.7); }

/* animated stat ticker on cover */
.recap__ticker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  margin-bottom: 26px;
}
.recap__ticker div { background: transparent; padding: 18px 4px 22px; backdrop-filter: blur(2px); }
.recap__ticker .n { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1; }
.recap__ticker .l { font-family: var(--sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,241,234,.62); margin-top: 8px; }
.recap__scrollcue { text-align: center; padding-bottom: 22px; font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,234,.55); }
.recap__scrollcue span { display: block; font-size: 1.1rem; margin-top: 6px; animation: recapBob 1.8s ease-in-out infinite; }
@keyframes recapBob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* ============================ ARGUMENT / LEDE ========================== */
.recap__lede { background: var(--paper); padding: clamp(70px, 11vh, 150px) 0; }
.recap__lede .kicker { display:block; text-align:center; margin-bottom: 22px; }
.recap__drop p { margin: 0 0 1.1em; }
.recap__drop p:first-of-type { font-size: 1.18em; }
.recap__drop p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 600;
  font-size: 4.2em; line-height: .72; float: left;
  margin: .06em .12em 0 -.02em; color: var(--accent);
}
.recap__lede em { color: var(--ink); }

/* ============================ NUMBERS STRIP =========================== */
.recap__numbers { background: var(--ink); color: #f4f1ea; padding: clamp(60px,9vh,110px) 0; }
.recap__numbers .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.recap__numbers .cell { background: var(--ink); padding: 34px 30px; }
.recap__numbers .n { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem,4.6vw,3.8rem); line-height: 1; color: #fff; }
.recap__numbers .n small { font-size: .42em; color: var(--muted-2); }
.recap__numbers .l { font-family: var(--sans); font-size: .8rem; letter-spacing: .04em; color: rgba(244,241,234,.78); margin-top: 14px; line-height: 1.5; }

/* ============================ FEATURES ================================ */
.recap__feature { position: relative; }
.recap__f-art {
  position: relative; min-height: 86vh;
  display: flex; align-items: flex-end;
  background: var(--ink); color: #f4f1ea; overflow: hidden;
}
.recap__f-art .bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .55;
}
.recap__f-art::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,9,14,.2) 0%, rgba(10,9,14,.5) 55%, rgba(10,9,14,.92) 100%);
}
.recap__f-art .inner { position: relative; z-index: 2; padding-bottom: 7vh; }
.recap__f-num {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem,1.4vw,1.2rem); color: var(--accent); margin-bottom: 10px;
}
.recap__f-art h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem,6.2vw,5.2rem); line-height: 1.0;
  letter-spacing: -.02em; margin: 0; max-width: 18ch;
}
.recap__f-art .dek {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem,1.7vw,1.45rem); line-height: 1.5;
  color: rgba(244,241,234,.88); margin-top: 22px; max-width: 50ch;
}

.recap__f-body { background: var(--paper); padding: clamp(56px,8vh,110px) 0; }
.recap__f-body p { margin: 0 0 1.15em; }
.recap__f-body p strong { font-weight: 700; }
.recap__f-body .standfirst { font-size: 1.16em; line-height: 1.55; }
.recap__f-body .standfirst::first-letter {
  font-family: var(--display); font-weight: 600;
  font-size: 3.6em; line-height: .74; float: left; margin: .05em .1em 0 0; color: var(--accent);
}

/* pull quote */
.recap__pull {
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule);
  margin: 2.2em 0; padding: 1.1em 0 1.2em;
}
.recap__pull blockquote {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.5rem,3vw,2.3rem); line-height: 1.22; margin: 0; letter-spacing: -.01em;
}
.recap__pull cite { display:block; font-family: var(--sans); font-style: normal; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* Q3 watch kicker */
.recap__q3watch {
  font-family: var(--sans); font-size: .96rem; line-height: 1.55;
  background: var(--paper-2); border-left: 3px solid var(--accent);
  padding: 18px 22px; margin-top: 2em;
}
.recap__q3watch b { font-family: var(--sans); letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; color: var(--accent); display:block; margin-bottom:6px; }

/* feature accent theming */
.recap__feature.f1 { --accent: var(--crimson); }
.recap__feature.f2 { --accent: var(--gold); }
.recap__feature.f3 { --accent: var(--teal); }

/* ============================ UNDER THE RADAR ======================== */
.recap__radar { background: var(--paper-2); padding: clamp(60px,9vh,120px) 0; --accent: var(--blue); }
.recap__radar h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin: .2em 0 .3em; }
.recap__radar .intro { max-width: 62ch; color: var(--muted); margin-bottom: 44px; }
.recap__radar .intro strong { color: var(--ink); }
.recap__radar .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.recap__radar .card { background: var(--paper); padding: 26px 26px 22px; display: flex; flex-direction: column; }
.recap__radar .tag { font-family: var(--sans); font-weight: 600; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.recap__radar .hook { font-family: var(--display); font-weight: 600; font-size: 1.28rem; line-height: 1.14; margin: 0 0 10px; letter-spacing: -.01em; }
.recap__radar .card p { font-size: .95rem; color: var(--ink); line-height: 1.5; margin: 0 0 18px; }
.recap__radar .src { margin-top: auto; font-family: var(--sans); font-size: .72rem; letter-spacing: .02em; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }

/* ============================ DIMENSION 3 — SECURITY (kill chain) ===== */
.recap__sec { background: var(--ink); color: #f1ede6; padding: clamp(60px,9vh,120px) 0; --accent: #d96a5e; }
.recap__sec h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin: .2em 0 .4em; }
.recap__sec .intro { max-width: 64ch; color: rgba(241,237,230,.72); margin-bottom: 40px; }
.recap__chain { list-style: none; counter-reset: kc; margin: 0; padding: 0; max-width: 860px; }
.recap__chain li { position: relative; counter-increment: kc; display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 0 0 26px 40px; border-left: 2px solid var(--rule-dark); margin-left: 8px; }
.recap__chain li::before { content: counter(kc); position: absolute; left: -17px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #14131a; font-family: var(--sans); font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.recap__chain li:last-child { border-left-color: transparent; padding-bottom: 6px; }
.recap__chain .d { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.recap__chain .t { font-family: var(--serif); font-size: 1.04rem; line-height: 1.5; }
.recap__chain .t b { font-weight: 700; }
.recap__chain .t code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; }
.recap__chain .s { display:block; font-family: var(--sans); font-size: .72rem; color: rgba(241,237,230,.5); margin-top: 6px; }
.recap__sec-foot { max-width: 64ch; margin-top: 36px; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: rgba(241,237,230,.85); }

/* ============================ DIMENSION 4 — LABOR ==================== */
.recap__labor { background: var(--paper); padding: clamp(60px,9vh,120px) 0; --accent: var(--blue); }
.recap__labor h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin: .2em 0 .4em; }
.recap__labor .intro { max-width: 64ch; color: var(--muted); margin-bottom: 44px; }
.recap__labor .intro em { color: var(--ink); font-style: italic; }
.recap__labor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.recap__labor-grid > div { background: var(--paper); padding: 32px 34px; }
.recap__labor h3 { font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; }
.recap__ledger .row, .recap__talent .flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.recap__ledger .row:last-child, .recap__talent .flow:last-child { border-bottom: 0; }
.recap__ledger .row b, .recap__talent .flow b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.recap__ledger .row span { font-family: var(--sans); font-size: .92rem; color: var(--muted); }
.recap__talent .flow small { font-family: var(--sans); font-size: .78rem; color: var(--muted-2); font-style: italic; width: 100%; order: 3; }
.recap__talent .flow span { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--teal); margin-left: auto; }
.recap__labor-foot { max-width: 70ch; margin-top: 32px; font-size: 1.02rem; line-height: 1.6; }

/* ============================ VOICES ================================== */
.recap__voices { background: var(--paper-2); padding: clamp(60px,9vh,120px) 0; --accent: var(--teal); }
.recap__voices h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin: 0 0 .3em; }
.recap__voices .intro { max-width: 60ch; color: var(--muted); margin-bottom: 48px; }
.recap__voices .intro strong { color: var(--ink); }

/* most-shared chart (horizontal bars) */
.recap__shares { display: grid; gap: 14px; margin: 12px 0 10px; }
.recap__share { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.recap__share .title { font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
.recap__share .title small { display:block; font-family: var(--sans); font-size:.72rem; color: var(--muted); margin-top:4px; }
.recap__share .bar { position: relative; height: 10px; background: var(--paper-3); border-radius: 5px; margin-top: 8px; overflow:hidden; }
.recap__share .bar i { position:absolute; left:0; top:0; bottom:0; width: var(--w,0%); background: var(--teal); border-radius:5px; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.recap__share .count { font-family: var(--display); font-weight: 600; font-size: 1.5rem; min-width: 2ch; text-align:right; }
.recap__share .count small { font-family: var(--sans); font-weight: 400; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); display:block; }

/* who-read grid */
.recap__readers { margin-top: 54px; }
.recap__readers h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.recap__readers .names { display:flex; flex-wrap: wrap; gap: 8px; }
.recap__readers .chip {
  font-family: var(--sans); font-size: .86rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 100px; padding: 6px 14px;
}
.recap__readers .chip b { color: var(--teal); font-weight: 700; }

/* ============================ WINNERS / LOSERS ======================== */
.recap__wl { background: var(--paper); padding: clamp(60px,9vh,120px) 0; }
.recap__wl .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
.recap__wl .col { padding: 38px 36px; }
.recap__wl .col + .col { border-left: 1px solid var(--rule); }
.recap__wl h3 { font-family: var(--display); font-weight: 600; font-size: 1.8rem; margin: 0 0 6px; }
.recap__wl .win h3 { color: var(--teal); }
.recap__wl .lose h3 { color: var(--crimson); }
.recap__wl .item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.recap__wl .item:last-child { border-bottom: 0; }
.recap__wl .item b { font-family: var(--serif); font-weight: 700; }
.recap__wl .item p { margin: 4px 0 0; font-size: .96rem; color: var(--muted); line-height:1.5; }

/* ============================ TIMELINE =============================== */
.recap__timeline { background: var(--ink); color: #f4f1ea; padding: clamp(60px,9vh,120px) 0; }
.recap__timeline h2 { font-family: var(--display); font-weight:600; font-size: clamp(2rem,4.4vw,3.2rem); margin:0 0 40px; }
.recap__months { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.recap__month .m { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: #e7b94e; border-bottom: 1px solid var(--rule-dark); padding-bottom: 12px; margin-bottom: 18px; }
.recap__month .ev { padding: 12px 0; border-bottom: 1px solid var(--rule-dark); }
.recap__month .ev .d { font-family: var(--sans); font-size: .68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); }
.recap__month .ev .t { font-family: var(--serif); font-size: .98rem; line-height:1.4; margin-top: 4px; }

/* ============================ Q3 OUTLOOK ============================== */
.recap__outlook { background: var(--paper-2); padding: clamp(60px,9vh,120px) 0; }
.recap__outlook h2 { font-family: var(--display); font-weight:600; font-size: clamp(2rem,4.4vw,3.2rem); margin:0 0 .4em; }
.recap__outlook .lead { max-width: 60ch; color: var(--muted); margin-bottom: 40px; }
.recap__predictions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.recap__pred { background: var(--paper); padding: 28px 30px; }
.recap__pred .num { font-family: var(--display); font-style: italic; color: var(--accent); font-size: 1.2rem; }
.recap__pred h4 { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin: 8px 0; line-height:1.3; }
.recap__pred p { margin: 0; font-size: .95rem; color: var(--muted); line-height:1.5; }

/* ============================ METHOD / FOOTER ======================== */
.recap__method { background: var(--paper); padding: clamp(56px,8vh,100px) 0; border-top: 1px solid var(--rule); }
.recap__method h3 { font-family: var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin:0 0 16px; }
.recap__method p { font-size: 1rem; color: var(--muted); }
.recap__method p strong { color: var(--ink); }

.recap__cta { background: var(--ink); color:#f4f1ea; padding: clamp(60px,9vh,120px) 0; text-align:center; }
.recap__cta h2 { font-family: var(--display); font-weight:600; font-size: clamp(1.8rem,4vw,3rem); margin:0 0 .4em; }
.recap__cta p { color: rgba(244,241,234,.8); max-width: 46ch; margin: 0 auto 28px; }
.recap__cta a.btn {
  display:inline-block; font-family: var(--sans); font-weight:700; font-size: .95rem;
  background: #e7b94e; color: #14131a; padding: 15px 34px; border-radius: 100px; text-decoration:none;
}
.recap__share-row { margin-top: 26px; font-family: var(--sans); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(244,241,234,.55); }
.recap__share-row a { color: rgba(244,241,234,.85); margin: 0 10px; }

.recap__foot { background: var(--ink); color: rgba(244,241,234,.5); font-family: var(--sans); font-size:.78rem; text-align:center; padding: 30px 0 50px; border-top:1px solid var(--rule-dark); }

/* ============================ SKEPTICS' DECK (in-feature dissent) ===== */
.recap__skeptics { margin: 2em 0 1.6em; }
.recap__skeptics .lead { font-family: var(--sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.recap__skeptics .deck { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recap__skeptic {
  position: relative; background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 5px; padding: 16px 17px 14px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.recap__skeptic:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(20,19,26,.35); }
.recap__skeptic .tag { font-family: var(--sans); font-weight: 700; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.recap__skeptic .src { font-family: var(--serif); font-weight: 700; font-size: 1.04rem; line-height: 1.22; margin: 7px 0 9px; }
.recap__skeptic .src a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.recap__skeptic .src a:hover { color: var(--accent); }
.recap__skeptic .arg { font-family: var(--sans); font-size: .86rem; line-height: 1.45; color: var(--ink); margin: 0 0 11px; }
.recap__skeptic .why { font-family: var(--sans); font-size: .82rem; line-height: 1.4; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--rule); }
.recap__skeptic .why b { display: block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .6rem; margin-bottom: 4px; }
@media (max-width: 860px) { .recap__skeptics .deck { grid-template-columns: 1fr; } }

/* ============================ INLINE PER-SECTION POLLS =============== */
.recap__poll {
  margin: 2.4em 0 .8em; padding: 22px 24px 20px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 4px;
  font-family: var(--sans);
}
/* on dark sections (security) the poll inverts */
.recap__sec .recap__poll { background: rgba(255,255,255,.04); border-color: var(--rule-dark); color: #f1ede6; }
.recap__poll .ask { display: block; font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.recap__poll .q { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; line-height: 1.28; margin-bottom: 16px; }
.recap__poll .opts { display: flex; flex-wrap: wrap; gap: 9px; }
.recap__poll .opts button {
  font-family: var(--sans); font-size: .9rem; font-weight: 600; color: inherit;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 100px;
  padding: 10px 18px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.recap__sec .recap__poll .opts button { background: rgba(255,255,255,.06); border-color: var(--rule-dark); }
.recap__poll .opts button:hover { border-color: var(--accent); color: var(--accent); }
.recap__poll.voted .opts { display: none; }
.recap__poll .result { display: none; }
.recap__poll.voted .result { display: block; }
.recap__poll .ritem { margin-bottom: 13px; }
.recap__poll .ritem .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; margin-bottom: 6px; }
.recap__poll .ritem.you .top { font-weight: 700; color: var(--accent); }
.recap__poll .ritem .top .pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.recap__poll .ritem .track { height: 8px; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.recap__sec .recap__poll .ritem .track { background: rgba(255,255,255,.1); }
.recap__poll .ritem .track i { display: block; height: 100%; width: 0; background: var(--accent); opacity: .45; border-radius: 4px; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.recap__poll .ritem.you .track i { opacity: 1; }
.recap__poll .tally { margin-top: 12px; font-size: .74rem; color: var(--muted); }
.recap__sec .recap__poll .tally { color: rgba(241,237,230,.6); }

/* ============================ "WE COVERED THIS" (internal links) ===== */
.recap__covered { font-family: var(--sans); font-size: .85rem; line-height: 1.5; margin-top: 26px; padding-top: 15px; border-top: 1px solid rgba(127,127,127,.28); }
.recap__covered .lbl { font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; color: var(--accent); margin-right: 10px; white-space: nowrap; }
.recap__covered a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.recap__covered a:hover { color: var(--accent); }
/* timeline entries are internal links on the dark spine */
.recap__month .ev .t a { color: inherit; text-decoration: underline; text-decoration-color: rgba(231,185,78,.5); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.recap__month .ev .t a:hover { text-decoration-color: #e7b94e; }

/* ============================ APPLIED AI (tabbed block) ============= */
.recap__applied { background: var(--ink); color: #f1ede6; padding: clamp(62px,9vh,124px) 0; --accent: #8b80f0; }
.recap__applied h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem,4.6vw,3.4rem); line-height: 1.02; letter-spacing: -.02em; margin: .2em 0 .35em; }
.recap__applied .intro { max-width: 64ch; color: rgba(241,237,230,.72); margin-bottom: 30px; }
.recap__applied .intro em { color: #f1ede6; font-style: italic; }
/* tab bar (JS only; without JS the panels stack) */
.recap__tabs { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.recap.js .recap__tabs { display: flex; }
.recap__tabs button { font-family: var(--sans); font-weight: 700; font-size: .86rem; cursor: pointer; color: rgba(241,237,230,.72); background: rgba(255,255,255,.05); border: 1px solid var(--rule-dark); border-radius: 100px; padding: 11px 20px; transition: color .15s, background .15s, border-color .15s; }
.recap__tabs button:hover { color: #f1ede6; border-color: var(--accent); }
.recap__tabs button.active { background: var(--accent); color: #14131a; border-color: var(--accent); }
.recap__panel { margin-bottom: 28px; }
.recap.js .recap__panel { display: none; margin-bottom: 0; }
.recap.js .recap__panel.active { display: block; animation: recapFade .4s ease; }
@keyframes recapFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.recap__panel .panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.recap__panel .panel-head h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: #f1ede6; margin: 0; }
.recap__panel .panel-head .ph-lead { font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: rgba(241,237,230,.82); }
/* deck cards re-themed for the dark Applied block */
.recap__applied .recap__skeptics { margin: 0; }
.recap__applied .recap__skeptic { background: rgba(255,255,255,.045); border-color: var(--rule-dark); color: #f1ede6; }
.recap__applied .recap__skeptic .src a { color: #f1ede6; }
.recap__applied .recap__skeptic .arg { color: rgba(241,237,230,.92); }
.recap__applied .recap__skeptic .why { color: rgba(241,237,230,.6); border-top-color: var(--rule-dark); }
.recap__applied .recap__skeptic:hover { box-shadow: 0 12px 26px -16px rgba(0,0,0,.6); }

/* ============================ SHARE + VIRALITY ====================== */
/* share button bar (used in CTA + the card panel) */
.recap__sharebar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.recap__sharebar button {
  font-family: var(--sans); font-weight: 700; font-size: .84rem; cursor: pointer;
  border-radius: 100px; padding: 11px 18px; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: #f4f1ea; border: 1px solid rgba(244,241,234,.32);
  transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.recap__sharebar button:hover { background: #e7b94e; color: #14131a; border-color: #e7b94e; transform: translateY(-2px); }
.recap__sharebar button.copied { background: var(--teal); color: #fff; border-color: var(--teal); }

/* floating persistent share button */
.recap__fab { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.recap__fab.hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
.recap__fab { transition: opacity .3s, transform .3s; }
.recap__fab-toggle {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; border: none;
  background: #e7b94e; color: #14131a; font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 10px 30px -8px rgba(20,19,26,.5); display: flex; align-items: center; justify-content: center;
}
.recap__fab-menu { display: none; flex-direction: column; gap: 8px; }
.recap__fab.open .recap__fab-menu { display: flex; }
.recap__fab-menu button {
  font-family: var(--sans); font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap;
  background: var(--ink); color: #f4f1ea; border: 1px solid var(--rule-dark);
  border-radius: 100px; padding: 9px 16px; box-shadow: 0 8px 22px -10px rgba(20,19,26,.5);
}
.recap__fab-menu button:hover { background: #e7b94e; color: #14131a; border-color: #e7b94e; }

/* ============================ MOTION ================================= */
/* Reveal is progressive enhancement: only hidden once JS marks .recap.js,
   so no-JS / crawlers / static renders see all content. */
.recap.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.recap.js [data-reveal].in { opacity: 1; transform: none; }
.recap.js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.recap.js [data-reveal][data-delay="2"] { transition-delay: .16s; }
.recap.js [data-reveal][data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .recap.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .recap__scrollcue span { animation: none; }
  .recap__cover-art { transform: none; }
}

/* ============================ RESPONSIVE ============================= */
@media (max-width: 860px) {
  .recap { font-size: 18px; }
  .recap__ticker { grid-template-columns: repeat(2,1fr); }
  .recap__numbers .grid,
  .recap__months,
  .recap__radar .grid,
  .recap__labor-grid,
  .recap__predictions { grid-template-columns: 1fr; }
  .recap__chain li { grid-template-columns: 1fr; gap: 4px; }
  .recap__chain .d { padding-top: 0; }
  .recap__wl .grid { grid-template-columns: 1fr; }
  .recap__wl .col + .col { border-left: 0; border-top: 1px solid var(--rule); }
  .recap__share { grid-template-columns: 1fr; gap: 6px; }
  .recap__share .count { text-align: left; }
}