/* Beyond the Glow: page styles.
   Colour key (lecturer feedback): one colour = one meaning across every chart.
   Data colours live in js/theme.js too; keep the two in sync. */
:root {
  --bg: #faf7f8;
  --surface: #ffffff;
  --ink: #261b24;         /* titles, annotations (figure) */
  --text: #3a2c36;        /* body text people must read: contrast 12:1 */
  --muted: #6e6069;       /* secondary text only: captions, sources, byline (ground) */
  --line: #e4dce1;
  --ui: #5b4256;          /* headings and UI only, never in charts */

  --c-trade: #c08a1e;     /* C1-C3 */
  --c-price: #1d8072;     /* C4-C5 */
  --c-product: #7656b0;   /* C6-C8, C12 highlight */
  --c-ingred: #a3442c;    /* C9-C10 */
  --c-oily: #4f5f0c;      /* C11: dark olive, as in oil (darker = the focus group) */
  --c-dry: #5f8ccc;       /* C11 */
  --c-ctx: #c4bcc1;       /* context everywhere */

  --display: "Gloock", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }

/* One centred column, max 1100 px, with a 24 px gutter: no horizontal scrolling on small laptops. */
.page { max-width: 1100px; margin: 0 auto; padding: 48px 24px 64px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
/* One type scale for the whole page, charts included (peer critique: too many near-identical sizes).
   13 small text · 15 secondary text and chart subtitles · 17 body · 21 headings and chart titles ·
   30 section titles and key figures · 36 header numbers · page title. Sizes are in px so the 16 px rem
   base can't produce in-between sizes. */
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: 30px; }
/* Hierarchy: page title > section title (30) > chart title and side-text heading (21) > body (17). */
h3 { font-size: 21px; margin-bottom: 8px; }
/* At most 10 words (about 55 characters) per line: typography notes and DV1 feedback. */
p { margin: 0 0 12px; max-width: 23em; }
a { color: var(--ui); }

.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 600; color: var(--ui); margin-bottom: 8px; }
.muted { color: var(--muted); }

/* Hero: a centred banner framed like a skincare product label (double plum frame, numbers in a strip
   along the bottom), so the title fills the width instead of leaving the right side empty. */
/* Kept compact (peer critique: white space at the title): subtitle on two wide lines, tight padding. */
.hero { margin: 7px 7px 48px; }
.hero-label { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--ui); text-align: center; padding: 32px 48px 0; overflow: hidden; }
.hero-label p { margin-left: auto; margin-right: auto; }
.hero .eyebrow { letter-spacing: .2em; margin-bottom: 10px; }
.subtitle { font-size: 21px; color: var(--muted); max-width: none; margin-top: 12px; margin-bottom: 8px; text-wrap: balance; }
.byline { font-size: 13px; color: var(--muted); }
.stats { margin: 24px -48px 0; border-top: 1px solid var(--line); }
.stats > div { box-sizing: border-box; }   /* dividers stay inside each third, so the strip never wraps */
.stats > div + div { border-left: 1px solid var(--line); }
.stat { font-size: 15px; color: var(--muted); padding: 16px 20px 18px; margin: 0 auto; max-width: none; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 36px; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
/* Data caveat sits under the intro text, filling the space beside the "On this page" card. */
.caveat { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: none; margin: 12px 0 0; }

/* Sections */
/* White space (DV1 feedback): generous gaps between sections and rows group related items. */
section { margin-bottom: 104px; }
.section-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.section-title span { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ui); border: 1px solid var(--ui); border-radius: 50%; width: 1.9em; height: 1.9em; display: inline-grid; place-items: center; flex: none; transform: translateY(-4px); }
.lede { color: var(--text); margin-bottom: 20px; }
/* Section header: title and intro on the left (2/3); on the right (1/3, the side-panel column, so the
   right-hand sight-line runs from header to charts) a small navigation card.
   The card must read as page navigation, not data commentary, so it differs from the side panels on every cue:
   a plum-tinted box (plum = page UI, never a chart colour), smaller text, numbered links that jump to each chart. */
.section-head { margin-bottom: 36px; }
.section-head .lede { margin-bottom: 0; }
.questions { box-sizing: border-box; padding: 2px 0 0 28px; }
.questions-card { background: #f3ecf1; border: 1px solid #e6d9e2; border-radius: 10px; padding: 14px 18px 16px; }
.questions-label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ui); margin: 0 0 8px; }
.questions ol { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.questions li { counter-increment: q; display: flex; gap: 10px; font-size: 15px; line-height: 1.4; padding: 5px 0; }
.questions li::before { content: counter(q); flex: none; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-top: .05em; border-radius: 50%; background: var(--ui); color: #fff; font-size: 13px; font-weight: 600; }
.questions a { color: var(--ui); text-decoration: none; }
.questions a::after { content: "\00a0\2193"; }   /* non-breaking space: the arrow never wraps onto a line alone */
.questions a:hover, .questions a:focus-visible { text-decoration: underline; }
/* Jump links land with a little space above the chart title. */
.vis, section { scroll-margin-top: 28px; }
.try + .vis { scroll-margin-top: 84px; }   /* keep the "Try it" chip in view too */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Sight-lines: side text starts on the same top line as its chart's title. */
.row { margin-bottom: 56px; align-items: flex-start; }
.row > .text { padding-top: 4px !important; }
/* Sight-lines: side text keeps the page's left/right edges and only gets space on the side facing the chart. */
.text { box-sizing: border-box; }
.row > .text:first-child { padding: 0 28px 0 0; }
.row > .text:last-child { padding: 0 0 0 28px; }
.text p { color: var(--text); }

/* Side-panel extras: a key number (figure) and a "what to look for" reading guide.
   Order follows the visual hierarchy: heading > text > big number > guide. */
/* Two sight-lines per row: the side text starts level with the chart title and ends level with the chart's
   source line, because the key figure is pushed to the bottom of the (stretched) side column. */
.row.has-text { align-items: stretch; }
.row.has-text > .text { display: flex; flex-direction: column; }
.row.has-text > .text > p:not(.key-figure):not(.look) { margin-bottom: 24px; }
.key-figure { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.key-figure b:not([class]) { color: var(--ink); }
.key-figure b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; }   /* coloured by its k-* class; same size as section titles, below header numbers (36) */
.key-figure > span { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 6px; max-width: 22em; }
.look { margin: 20px 0 0; font-size: 15px; color: var(--text); max-width: 22em; }
.look-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ui); margin-bottom: 4px; }

/* Coloured words act as the colour key in the text (same hue as the chart, darkened where needed for 4.5:1 contrast). */
.k { font-weight: 600; }
.k-trade { color: #8a6212; }
.k-price { color: #1d8072; }
.k-product { color: #7656b0; }
.k-ingred { color: #a3442c; }
.k-oily { color: #4f5f0c; }
.k-dry { color: #3d6aa8; }

/* Chart containers */
.vis { width: 100%; min-height: 120px; }
.vis .vega-embed { width: 100%; }
/* Per-chart metadata: small and grey (ground), directly under its chart. */
.source { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; max-width: none; }
/* "Try it" chip above each interactive chart. Instructions for using a chart are page UI, not data, so they
   leave the grey chart subtitle and take the plum UI style of the navigation cards (plum = using the page). */
.try { display: inline-flex; align-items: baseline; gap: 10px; max-width: none; margin: 0 0 14px; padding: 6px 14px 7px 10px; font-size: 15px; line-height: 1.4; color: var(--ui); background: #f3ecf1; border: 1px solid #e6d9e2; border-radius: 999px; }
.try-label { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ui); border-radius: 999px; padding: 1px 9px 2px; }
.vis .placeholder { border: 1px dashed var(--line); border-radius: 8px; padding: 32px; text-align: center; color: var(--muted); font-size: 15px; }

/* Takeaways */
.takeaways { margin: 16px -12px 8px; }
.tip { margin: 0 12px 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; height: calc(100% - 24px); box-sizing: border-box; }
.tip-num { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--ui); color: var(--ui); font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.tip h3 { margin-bottom: 8px; }
.tip p { color: var(--text); font-size: 15px; margin: 0; }

/* Tooltips: the value is the figure (bold, dark), the field name is ground (small, grey). */
#vg-tooltip-element { font-family: var(--body); font-size: 13px; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(38, 27, 36, .12); }
#vg-tooltip-element table tr td.key { color: var(--muted); font-weight: 400; }
#vg-tooltip-element table tr td.value { color: var(--ink); font-weight: 600; }
.small { font-size: 13px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding-top: 32px; font-size: 15px; }
.footer h2 { margin-bottom: 12px; }
.footer h3 { margin-top: 24px; }
.footer p { text-wrap: pretty; }   /* no single word left alone on the last line */
.sources { padding-left: 18px; color: var(--muted); }
.sources li { margin-bottom: 6px; }

@media (max-width: 767px) {
  .row > .text:first-child, .row > .text:last-child { padding: 16px 0 0; }
  .questions { padding: 20px 0 0; }
  .hero-label { padding: 32px 20px 0; }
  .subtitle br, .caveat br { display: none; }   /* desktop line breaks (≤10 words a line) wrap naturally on phones */
  .stats { margin: 24px -20px 0; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
}