/* Switched On: How Australia watches TV (FIT3179 DV2, Gathika Athuruliya)
   Type:  Bebas Neue (headlines, TV title cards) · VT323 (TV on-screen-display labels)
          Source Serif 4 (story text) · IBM Plex Sans Condensed (charts, captions)
   All fonts self-hosted from /fonts (SIL Open Font Licence).

   COLOUR SYSTEM: one colour = one meaning, used identically on every chart.
     Broadcast (antenna) ........ indigo  #3A4E8C
     Free-to-air apps (BVOD) .... coral   #E86A4F
     Other online video ......... sand    #E9B44C
     AFL ........................ teal    #1B998B
     NRL ........................ violet  #8B5FBF
     Drama (chapter 5) .......... rose    #B56576
     Earlier year / context ..... grey    #B9BBC7
   Age groups, genders and states are never colour-coded, so they can never clash. */

@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f7f5f0;
  --paper-2: #efecf3;
  --card: #ffffff;
  --ink: #23263f;
  --ink-soft: #4f5563;
  --rule: #e2dfe8;
  --screen: #12142a;
  --broadcast: #3A4E8C;
  --apps: #E86A4F;     --apps-text: #B8432A;
  --online: #E9B44C;   --online-text: #8C6418;
  --afl: #1B998B;      --afl-text: #11695F;
  --nrl: #8B5FBF;      --nrl-text: #6A4399;
  --drama: #B56576;    --drama-text: #8E3F57;
  --old: #B9BBC7;
  --serif: "Source Serif 4", Georgia, serif;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --osd: "VT323", "Courier New", monospace;
  --sans: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --gap: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 28px; }

/* colour words used in running text: same colours as the charts */
.k-broad { color: var(--broadcast); font-weight: 600; }
.k-apps { color: var(--apps-text); font-weight: 600; }
.k-online { color: var(--online-text); font-weight: 600; }
.k-afl { color: var(--afl-text); font-weight: 600; }
.k-nrl { color: var(--nrl-text); font-weight: 600; }
.k-drama { color: var(--drama-text); font-weight: 600; }
.chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* ================= HERO ================= */
.hero { position: relative; overflow: hidden; color: #f2f0f7; padding: 64px 0 44px;
  background:
    linear-gradient(100deg, rgba(18,20,42,.95) 0%, rgba(18,20,42,.86) 50%, rgba(18,20,42,.74) 100%),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/Television_static.gif?width=800") center / cover,
    url("../img/static-fallback.svg") 0 0 / 300px 300px,
    var(--screen); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(to right, var(--broadcast) 0 33.3%, var(--apps) 33.3% 66.6%, var(--online) 66.6% 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center; }
.osd { font-family: var(--osd); font-size: 24px; letter-spacing: .06em; color: #9ef0c8; text-shadow: 0 0 8px rgba(158,240,200,.55); margin: 0 0 6px; }
.osd .rec { color: #ff6b5b; text-shadow: 0 0 8px rgba(255,107,91,.7); }

/* title: a TV caption with RGB colour fringing and scanlines */
.hero h1 { font-family: var(--display); font-weight: 400; font-size: 132px; line-height: .86; margin: 0 0 18px; letter-spacing: .01em; position: relative; }
.hero h1 .w1 { color: #f6f4fb; text-shadow: -3px 0 rgba(232,106,79,.85), 3px 0 rgba(58,78,140,.95); }
.hero h1 .w2 { color: transparent; -webkit-text-stroke: 2px #f6f4fb; text-shadow: none;
  background: repeating-linear-gradient(to bottom, rgba(233,180,76,.95) 0 3px, rgba(233,180,76,.35) 3px 6px); -webkit-background-clip: text; background-clip: text; }
.dek { font-family: var(--serif); font-size: 23px; line-height: 1.45; color: #dcdae6; margin: 0 0 22px; max-width: 24em; }
.dek em { color: #fff; }
.byline { font-size: 14px; color: #a9acc0; margin: 0; }
.byline strong { color: #fff; font-weight: 600; }

.tv { margin: 0; background: #262a4a; border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 24px 50px rgba(0,0,0,.45), inset 0 0 0 2px #343a63; position: relative; }
.tv::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 110px; height: 12px; transform: translateX(-50%); background: #262a4a; border-radius: 0 0 10px 10px; }
.tv .screen { background: #0b0d1d; border-radius: 8px; padding: 14px; display: flex; justify-content: center; position: relative; overflow: hidden; }
.tv .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
.key { list-style: none; padding: 0; margin: 12px 0 6px; font-size: 13px; color: #e5e3ee; display: grid; gap: 3px; }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.tv figcaption { font-size: 12px; color: #a3a7bd; line-height: 1.4; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 46px; padding-top: 22px; border-top: 1px solid #343a63; }
.stats b { display: block; font-family: var(--osd); font-weight: 400; font-size: 58px; line-height: .9; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.25); }
.stats span { display: block; font-size: 14px; color: #b9bccf; margin-top: 4px; }
.hero-credit { position: absolute; right: 16px; bottom: 14px; font-size: 11px; color: rgba(255,255,255,.55); z-index: 1; }
.hero-credit a { color: inherit; }

/* ================= NAV ================= */
.toc { position: sticky; top: 0; z-index: 10; background: rgba(247,245,240,.96); border-bottom: 1px solid var(--rule); backdrop-filter: blur(6px); }
.toc ol { list-style: none; display: flex; gap: 26px; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; font-size: 14px; counter-reset: ch; overflow-x: auto; }
.toc li { counter-increment: ch; white-space: nowrap; }
.toc a { color: var(--ink-soft); text-decoration: none; position: relative; }
.toc a::before { content: "CH " counter(ch, decimal-leading-zero) " "; font-family: var(--osd); font-size: 17px; color: var(--apps-text); }
.toc a:hover, .toc a.active { color: var(--ink); }
.toc a.active { font-weight: 600; }
.toc a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 3px; background: var(--apps); border-radius: 2px; }

/* ================= INTRO / KEY ================= */
.intro { padding: 72px 0 24px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.prose p { font-family: var(--serif); font-size: 19px; line-height: 1.62; margin: 0 0 1em; max-width: 36em; }
.prose p.lead::first-letter { font-family: var(--display); float: left; font-size: 78px; line-height: .8; padding: 6px 10px 0 0; color: var(--apps); }
.questions { list-style: none; counter-reset: q; padding: 0; margin: 18px 0 0; }
.questions li { counter-increment: q; font-family: var(--serif); font-size: 19px; padding: 8px 0 8px 46px; position: relative; border-top: 1px dashed var(--rule); }
.questions li::before { content: counter(q); position: absolute; left: 0; top: 2px; font-family: var(--display); font-size: 34px; color: var(--apps); }
.legend-card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 20px 22px; }
.legend-card h3 { font-family: var(--osd); font-weight: 400; font-size: 22px; letter-spacing: .05em; margin: 0 0 4px; color: var(--ink); }
.legend-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.legend-card dl { display: grid; grid-template-columns: 18px 1fr; gap: 8px 10px; margin: 0; font-size: 15px; align-items: center; }
.legend-card dt { width: 16px; height: 16px; border-radius: 3px; }
.legend-card dd { margin: 0; }
.legend-card dd small { color: var(--ink-soft); }

/* ================= CHAPTERS ================= */
.chapter { padding: 80px 0; }
.chapter.alt { background: var(--paper-2); }
.ch-head { margin-bottom: 30px; max-width: 820px; }
.ch-osd { display: inline-flex; gap: 10px; align-items: center; font-family: var(--osd); font-size: 22px; color: #fff; background: var(--screen); padding: 2px 12px 0; border-radius: 4px; letter-spacing: .06em; }
.ch-osd b { font-weight: 400; color: #9ef0c8; }
.ch-head h2 { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: .95; margin: 12px 0 14px; letter-spacing: .005em; }
.ch-head h2 .outline { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.ch-head h2 .accent { color: var(--apps); }
.ch-head p.standfirst { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* text + chart rows */
.story, .story.flip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.story + .story, .story + .card, .card + .story, .grid-2 + .story, .story + .grid-2, .grid-2 + .card, .card + .grid-2, .wrap > .card + .card, .picker + .grid-2, .grid-2 + .grid-2 { margin-top: 36px; }
.story .prose h3 { font-family: var(--osd); font-weight: 400; font-size: 22px; letter-spacing: .05em; color: var(--apps-text); margin: 0 0 6px; }
.story .prose p { font-size: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }

.card { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 22px 22px 16px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.card h3 { font-size: 19px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
.card .sub { font-size: 14px; color: #4f5563; margin: 0 0 14px; }
.card .chart { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
.card .chart > .vega-embed { width: auto; }
#vis-mekko > .vega-embed, #vis-gf > .vega-embed { width: 100%; }
.card figcaption { font-size: 12px; color: #5f6470; margin-top: 12px; padding-top: 10px; border-top: 1px solid #efedf3; }
.card figcaption a { color: inherit; }
.how-to { font-size: 13px; color: var(--apps-text); margin: -6px 0 10px; }
.how-to::before { content: "▶ "; font-size: 10px; }

/* takeaway "lower third" boxes, styled like a TV news caption */
.takeaway { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(18,20,42,.08); }
.takeaway .tag { background: var(--apps); color: #fff; font-family: var(--osd); font-size: 24px; padding: 14px 18px 10px; letter-spacing: .06em; display: flex; align-items: center; }
.takeaway p { margin: 0; background: var(--screen); color: #f2f0f7; font-family: var(--serif); font-size: 19px; line-height: 1.45; padding: 14px 20px; }
.transition { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-soft); text-align: center; margin: 56px auto 0; max-width: 30em; }
.transition::before { content: "▼"; display: block; font-style: normal; font-size: 13px; color: var(--apps); margin-bottom: 6px; }

/* big-number facts */
.facts { justify-content: flex-start; }
.fact { padding: 14px 0; border-top: 1px solid var(--rule); }
.fact:first-of-type { border-top: 0; }
.fact b { display: block; font-family: var(--osd); font-weight: 400; font-size: 50px; line-height: .9; color: var(--ink); }
.fact span { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 4px; }

/* ================= PICKERS (linked interactivity) ================= */
.picker { background: var(--screen); color: #f2f0f7; border-radius: 10px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: center; }
.picker .label { font-family: var(--osd); font-size: 22px; color: #9ef0c8; letter-spacing: .05em; }
.picker .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.picker button { font: 600 14px var(--sans); color: #e9e7f2; background: #262a4a; border: 1px solid #3b4170; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .15s, color .15s; }
.picker button:hover { background: #343a63; }
.picker button[aria-pressed="true"] { background: #f2f0f7; color: var(--screen); border-color: #f2f0f7; }
.picker .readout { grid-column: 1 / -1; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: #dcdae6; min-height: 1.5em; border-top: 1px dashed #3b4170; padding-top: 10px; margin: 0; }
.picker .readout b { color: #fff; }
.picker .readout .k-apps { color: #ff9a82; } .picker .readout .k-broad { color: #a9b8ea; }
.picker .readout .k-afl { color: #5fd6c7; } .picker .readout .k-nrl { color: #c4a3ec; }

/* Marimekko on a TV set */
.tv-card { background: #262a4a; border: 0; border-radius: 22px; padding: 22px 26px 18px; box-shadow: 0 18px 40px rgba(18,20,42,.25); margin-bottom: 26px; }
.tv-card::after { content: ""; position: absolute; left: 50%; bottom: -20px; width: 160px; height: 14px; transform: translateX(-50%); background: #262a4a; border-radius: 0 0 12px 12px; }
.tv-card h3 { color: #fff; }
.tv-card .sub { color: #c9cbe0; }
.tv-card #vis-mekko { background: #fff; border-radius: 8px; padding: 10px; }
.tv-card figcaption { color: #a9acc0; border-top-color: #343a63; }
.mekko-head { display: flex; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; padding-left: 62px; }
.mekko-head span:first-child { color: #a9b8ea; } .mekko-head span:last-child { color: #ff9a82; }
.tv-card .data-table summary { color: #ff9a82; }
.tv-card .data-table table { background: #fff; color: var(--ink); border-radius: 6px; }

.card.split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; }

/* vega-embed */
.vega-embed { max-width: 100%; }
.vega-embed .vega-bindings { font-size: 13px; margin-top: 4px; }
.vega-embed .vega-bindings input { accent-color: var(--drama); }

/* ================= ENDING ================= */
.ending { background: var(--screen); color: #eae8f2; padding: 72px 0; position: relative; overflow: hidden; }
.ending h2 { font-family: var(--display); font-weight: 400; font-size: 72px; line-height: 1; margin: 0 0 16px; color: #fff; }
.ending h2 .outline { color: transparent; -webkit-text-stroke: 2px #fff; }
.ending .prose p { color: #d6d5e2; }
.takeaways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 32px; }
.takeaways div { border-top: 3px solid var(--apps); padding-top: 12px; font-size: 16px; color: #c9cbe0; }
.takeaways b { display: block; color: #fff; font-size: 18px; margin-bottom: 4px; }
.crt-off { position: absolute; left: 50%; top: 34px; width: 70%; height: 2px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #fff 0%, #ffb3a3 30%, rgba(232,106,79,0) 70%); box-shadow: 0 0 22px 6px rgba(232,106,79,.4); }
.crt-off::after { content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 8px rgba(255,255,255,.7); }

/* ================= ABOUT ================= */
.about { padding: 56px 0 72px; font-size: 14px; color: #4f5563; }
.meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.about h2 { font-family: var(--display); font-weight: 400; font-size: 38px; color: var(--ink); margin: 0 0 10px; }
.about h3 { font-family: var(--osd); font-weight: 400; font-size: 20px; letter-spacing: .05em; color: var(--ink); margin: 12px 0 8px; }
.about p { margin: 0 0 10px; }
.about b { color: var(--ink); }
.about ol { margin: 0; padding-left: 18px; }
.about li { margin-bottom: 6px; }
.about a { color: var(--broadcast); }

/* ================= accessibility ================= */
.chart:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--apps); outline-offset: 3px; border-radius: 4px; }
.data-table { margin-top: 10px; font-size: 13px; }
.data-table summary { cursor: pointer; color: var(--broadcast); font-weight: 600; width: max-content; }
.data-table table { border-collapse: collapse; margin-top: 8px; width: 100%; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #ecebf1; }
.data-table th { background: #f3f2f7; font-weight: 600; color: var(--ink); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .grid-2, .meta-grid, .story, .story.flip, .intro-grid, .card.split { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .hero h1 { font-size: 104px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 76px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .takeaways { grid-template-columns: minmax(0, 1fr); }
  .ch-head h2 { font-size: 44px; }
  .card { overflow-x: auto; }
  .picker { grid-template-columns: 1fr; }
}

/* ================= motion (js/fx.js); off for reduced-motion users ================= */
.static-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .12; mix-blend-mode: screen; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.motion .hero::before { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.05), transparent); animation: roll 6s linear infinite; }
@keyframes roll { to { top: 110%; } }
.motion .hero .tv .screen, .motion .hero h1 { animation: power-on 1.1s cubic-bezier(.2,.8,.2,1) both; transform-origin: center; }
.motion .hero h1 { animation-delay: .15s; }
@keyframes power-on { 0% { transform: scale(0, .004); filter: brightness(6); opacity: 0; } 35% { transform: scale(1, .004); filter: brightness(6); opacity: 1; } 70% { transform: scale(1, 1.04); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.motion .hero h1 .w1 { animation: fringe 5s 1.4s infinite; }
@keyframes fringe { 0%, 90%, 100% { text-shadow: -3px 0 rgba(232,106,79,.85), 3px 0 rgba(58,78,140,.95); } 92% { text-shadow: -8px 0 rgba(232,106,79,.9), 8px 0 rgba(58,78,140,1); } 94% { text-shadow: 2px 0 rgba(232,106,79,.9), -2px 0 rgba(58,78,140,1); } }
.motion .osd .rec { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.card.tuning::before { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  background: url("../img/static-fallback.svg") 0 0 / 220px 220px, #3a3a48; animation: tune .7s steps(1) forwards, snow .12s steps(4) infinite; }
@keyframes tune { 0% { opacity: .95; } 30% { opacity: .75; } 55% { opacity: .4; } 80% { opacity: .12; } 100% { opacity: 0; } }
@keyframes snow { 0% { background-position: 0 0; } 25% { background-position: -57px 33px; } 50% { background-position: 91px -40px; } 75% { background-position: -23px -88px; } }
.progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 50; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(to right, var(--broadcast), var(--apps)); }
.motion .ending.switch-off .crt-off { animation: crt-off 1.6s ease-in forwards; }
@keyframes crt-off { 0% { width: 70%; opacity: 1; } 60% { width: 2%; opacity: 1; } 100% { width: 0; opacity: .25; } }
.motion .ending.switch-off h2 { animation: glitch 2.6s .9s steps(1) both; }
@keyframes glitch { 0% { opacity: 0; } 10% { opacity: 1; text-shadow: 3px 0 var(--apps), -3px 0 var(--broadcast); transform: translateX(2px); } 14% { text-shadow: -4px 0 var(--apps), 4px 0 var(--broadcast); transform: translateX(-3px); } 18% { text-shadow: none; transform: none; } 60% { text-shadow: 2px 0 var(--apps), -2px 0 var(--broadcast); } 62%, 100% { text-shadow: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* linked pickers stay in view while you scroll through the charts they control */
.prose.wide p { max-width: 52em; }
.linked { position: relative; margin-top: 18px; }
.linked > .picker { box-shadow: 0 10px 24px rgba(18,20,42,.18); }
.linked > .grid-2 { margin-top: 24px; }
.picker .readout { font-size: 17px; }
@media (max-width: 760px) { .linked > .picker { position: static; } }

/* plain-language "what am I looking at" line under each chart title */
.reads { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--ink); background: #f3f2f8; border-left: 3px solid var(--apps); border-radius: 0 4px 4px 0; padding: 6px 10px; margin: -4px 0 14px; }
.reads b { font-family: var(--osd); font-weight: 400; font-size: 18px; letter-spacing: .05em; color: var(--apps-text); }
.tv-card .reads, .tv .reads { background: #1b1e3a; color: #e5e3ee; }
.tv-card .reads b, .tv .reads b { color: #ff9a82; }

#vis-slope > .vega-embed, #vis-scatter > .vega-embed { width: 100%; }

/* ===== tighter title page (less empty space in containers) ===== */
.hero { padding: 40px 0 30px; }
.hero-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
.tv { padding: 12px 12px 10px; }
.tv .screen { padding: 8px; }
.tv .reads { margin: 8px 0 6px; }
.key { margin: 6px 0 4px; grid-template-columns: 1fr; }
.stats { margin-top: 28px; padding-top: 18px; }
.intro { padding: 56px 0 8px; }
.intro-text p { max-width: 58em; }
.intro-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); margin-top: 22px; align-items: stretch; }
.intro-cards .legend-card { display: flex; flex-direction: column; }
.q-card .questions { margin: 6px 0 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.q-card .questions li { font-size: 18px; }
@media (max-width: 1100px) { .intro-cards { grid-template-columns: minmax(0, 1fr); } .hero-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
/* headline numbers sit beside the TV instead of in a separate row */
.hero-grid { align-items: stretch; }
.hero-grid > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 24px; padding-top: 18px; }
.hero .stats b { font-size: 50px; }
.hero h1 { font-size: 124px; }

/* ===== ending photos ===== */

/* ending: text left, photos right */
.ending-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.ending .ending-grid .prose p { font-size: 20px; max-width: none; }
.ending .prose b { color: #fff; }
.photo-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph { margin: 0; position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #262a4a url("../img/static-fallback.svg") 0 0 / 160px 160px; box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px #343a63; }
.ph-wide { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.ph.noimg img { visibility: hidden; }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; font-family: var(--osd); font-size: 18px; letter-spacing: .04em; color: #fff; background: linear-gradient(to top, rgba(18,20,42,.9), transparent); }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
.ph-credit { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px; color: #8f93ab; }
.ph-credit a { color: inherit; }

@media (max-width: 1100px) { .ending-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ===== text + chart rows: equal heights (js/main.js fitRows sizes each chart to the text beside it) ===== */
.story:has(> .card:not(.facts)) { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: 36px; align-items: start; }
.story.flip:has(> .card:not(.facts):first-child) { grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); }
.story:has(> .card) > .prose p { max-width: none; font-size: 19.5px; }
.story.flip > .card.facts { align-self: stretch; }
.card.facts .fact { padding: 10px 0; }
/* full-width intro text uses the full width, so it is fewer lines tall */
.prose.wide p { max-width: none; }
@media (max-width: 1100px) { .story:has(> .card), .story.flip:has(> .card:first-child) { grid-template-columns: minmax(0, 1fr); } }
.card.facts .fact { padding: 8px 0; }
.card.facts .fact b { font-size: 44px; }