/* The Print Register — site styles. One design language: a kept record printed on good
   stock. Warm paper, ink, and a small register of named spot inks (petrol the primary,
   indigo and brunswick the secondaries), hairline rules, tabular figures wherever
   numbers appear. The inks behave like spots on a three-colour job: flat, never
   gradients; tints are flat screens of the same inks. Dark theme is the negative of
   the page, not a new palette. Tokens are the brand kit's, verbatim. */

:root {
  /* palette — OKLCH is the source of truth, hex is the computed sRGB fallback */
  --ink:          oklch(24.5% 0.010 75);  /* #23201b */
  --paper:        oklch(97.3% 0.007 85);  /* #f8f6f1 */
  --stock:        oklch(92.5% 0.008 85);  /* #e9e6e0 */

  /* the spot-ink register: primary + two secondaries, each with deep (hover),
     light (dark-surface accent) and tint (flat wash) cuts */
  --petrol:          oklch(46% 0.078 215);   /* #0c6373  primary: links, device, processes/standards/data */
  --petrol-deep:     oklch(38.5% 0.062 218); /* #114b5a */
  --petrol-light:    oklch(80% 0.052 205);   /* #97c8ce */
  --petrol-tint:     oklch(93% 0.020 212);   /* #daecf0 */
  --indigo:          oklch(44% 0.095 278);   /* #474c86  second ink: business, packaging, finishes, events */
  --indigo-deep:     oklch(37.5% 0.078 280); /* #393b69 */
  --indigo-light:    oklch(80% 0.058 275);   /* #b2bbe4 */
  --indigo-tint:     oklch(93% 0.020 278);   /* #e4e7f6 */
  --brunswick:       oklch(45% 0.072 160);   /* #2c6247  third ink: paper/substrates, sustainability, community */
  --brunswick-deep:  oklch(38% 0.058 162);   /* #224c39 */
  --brunswick-light: oklch(80% 0.062 158);   /* #9dcaaf */
  --brunswick-tint:  oklch(93% 0.022 160);   /* #dcede3 */

  /* type */
  --font-masthead: "Besley", Georgia, serif;
  --font-serif:    "Source Serif 4", Georgia, serif;
  --font-sans:     "Archivo", system-ui, sans-serif;

  /* semantic — light (paper) theme */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--petrol);
  --accent-strong: var(--petrol-deep);
  --spot-indigo: var(--indigo);
  --spot-brunswick: var(--brunswick);
  --panel: var(--stock);
  --hairline: color-mix(in oklab, var(--ink) 28%, transparent);
  --rule: var(--ink);
  --faint: color-mix(in oklab, var(--ink) 62%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --accent: var(--petrol-light);
    --accent-strong: color-mix(in oklab, var(--petrol-light) 82%, white);
    --spot-indigo: var(--indigo-light);
    --spot-brunswick: var(--brunswick-light);
    --panel: color-mix(in oklab, var(--paper) 8%, var(--ink));
    --hairline: color-mix(in oklab, var(--paper) 30%, transparent);
    --rule: var(--paper);
    --faint: color-mix(in oklab, var(--paper) 62%, transparent);
  }
}

/* category -> ink. Petrol is the default (no attribute needed); the two ink families
   below opt in via data-cat on the kicker or desk head. Values follow the brand kit's
   category codes plus the site's own labels. */
[data-cat="business"], [data-cat="packaging"],
[data-cat="events"], [data-cat="finishes"] { --spot: var(--spot-indigo); }
[data-cat="paper"], [data-cat="environment"], [data-cat="sustainability"],
[data-cat="community"] { --spot: var(--spot-brunswick); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  font-optical-sizing: auto;
}
@media (min-width: 700px) { body { font-size: 1.125rem; } }

/* wiki/reference surfaces sit on stock, news stays paper (brand rule) */
body[data-surface="wiki"] { background: var(--stock); }
@media (prefers-color-scheme: dark) {
  body[data-surface="wiki"] { background: color-mix(in oklab, var(--paper) 5%, var(--ink)); }
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--accent-strong); }

h1, h2, h3 {
  font-family: var(--font-masthead);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); font-weight: 700; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }

table, .data, .figures, .chip { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.1rem; }
.measure { max-width: 700px; }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--bg); color: var(--fg);
  padding: 0.5rem 1rem; z-index: 10; font-family: var(--font-sans);
}
.skip:focus { left: 0; }

/* ── header: nameplate over a gazette double rule ─────────────────────────────── */
.site-head { padding: 1.3rem 0 0; }
.site-head .wrap { text-align: center; }
.nameplate { display: inline-block; }
.nameplate img { display: block; margin: 0 auto; }
/* Theme plates: DEFAULT (light) shows the ink nameplate and hides the reversed twin,
   with NO reliance on a media query matching — a fragile @media(light) hide let the white
   plate fall back to visible and ghost under the ink one on the wiki stock surface. Dark
   mode (later in source, same specificity) swaps them. .nameplate on each rule outranks
   `.nameplate img` above. */
.nameplate .plate-paper { display: none; }
@media (prefers-color-scheme: dark) {
  .nameplate .plate-ink { display: none; }
  .nameplate .plate-paper { display: block; }
}
.site-nav {
  margin-top: 1rem;
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--hairline);
  padding: 0.45rem 0.2rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.095em; text-transform: uppercase;
}
.site-nav a { color: var(--fg); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
body[data-page="home"] .site-nav a[data-nav="home"],
body[data-page="wiki"] .site-nav a[data-nav="wiki"],
body[data-page="how"]  .site-nav a[data-nav="how"],
body[data-page="tips"] .site-nav a[data-nav="tips"],
body[data-page="about"] .site-nav a[data-nav="about"] { color: var(--accent); }

/* ── kickers + meta ───────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.095em; text-transform: uppercase;
  color: var(--spot, var(--accent));
  margin: 0 0 0.55rem;
}
.kicker a { text-decoration: none; }
.meta {
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--faint); margin: 0.3rem 0;
}
.standfirst {
  font-size: 1.16em; line-height: 1.5; margin: 0.4rem 0 0.9rem; color: var(--fg);
}

/* ── front page ───────────────────────────────────────────────────────────────── */
.front main { padding: 1.6rem 0 2.5rem; }
.lead-story {
  display: grid; gap: 1.2rem; align-items: start;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--hairline);
}
@media (min-width: 820px) { .lead-story { grid-template-columns: 1.15fr 1fr; } }
.lead-story h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-top: 0; font-weight: 700; }
.lead-story a.story-link { color: var(--fg); text-decoration: none; }
.lead-story a.story-link:hover h2 { color: var(--accent-strong); }
.lead-art img { display: block; border: 1px solid var(--hairline); }

.second-tier {
  display: grid; gap: 1.5rem; padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 700px) { .second-tier { grid-template-columns: 1fr 1fr; } }

.desk { padding: 1.6rem 0 0.4rem; }
.desk-head {
  font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.095em; text-transform: uppercase; color: var(--fg);
  display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem;
}
.desk-head::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
/* a small flat patch of the desk's ink, like a spot swatch on a control strip */
.desk-head[data-cat]::before {
  content: ""; width: 0.55em; height: 0.55em; flex: none;
  background: var(--spot, var(--accent));
}
.desk-head .icon { width: 18px; height: 18px; }
.desk-grid { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .desk-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .desk-grid.three { grid-template-columns: 1fr 1fr 1fr; } }

/* story cards are TEXT-FORWARD: kicker + headline + standfirst, no thumbnail.
   The full story graphic stays on article pages (strip) and the front-page lead
   (card); the grid reads as a record, each entry ruled off like a ledger line. */
.story-card a.story-link { color: var(--fg); text-decoration: none; }
.story-card a.story-link:hover h3 { color: var(--accent-strong); }
.story-card h3 { margin: 0 0 0.3rem; font-size: 1.18rem; }
.story-card .kicker { margin: 0 0 0.35rem; font-size: 0.72rem; }
.story-card p { margin: 0.2rem 0 0; font-size: 0.95em; }
.desk-grid .story-card { border-top: 1px solid var(--hairline); padding-top: 0.85rem; }

/* ── article pages ────────────────────────────────────────────────────────────── */
.article main { padding: 1.8rem 0 2.5rem; }
.article-head { max-width: 820px; }
.article-head h1 { margin-bottom: 0.6rem; }
.lead-strip { margin: 1.1rem 0 1.6rem; }
.lead-strip img { display: block; border: 1px solid var(--hairline); }
.article-body { max-width: 700px; }
.article-body > p:first-of-type { margin-top: 0; }

figure { margin: 1.8rem 0; }
figcaption {
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--faint);
  margin-top: 0.5rem; line-height: 1.45;
}

/* data tables */
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.88rem; }
.data-table caption {
  text-align: left; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding-bottom: 0.5rem;
}
.data-table th, .data-table td { text-align: left; padding: 0.45rem 0.8rem 0.45rem 0; vertical-align: top; }
.data-table thead th { border-bottom: 1px solid var(--rule); font-weight: 600; }
.data-table tbody tr { border-bottom: 1px solid var(--hairline); }
.data-table td.num, .data-table th.num { text-align: right; padding-right: 0; padding-left: 0.9rem; }
/* a .num cell has no right padding, so whatever follows it carries the gap */
.data-table td.num + td, .data-table td.num + th,
.data-table th.num + td, .data-table th.num + th { padding-left: 0.9rem; }
.table-scroll { overflow-x: auto; }

/* citation furniture — first-class, not footnote apology */
.sources { max-width: 700px; margin: 2.4rem 0 0; padding-top: 1rem; border-top: 2px solid var(--rule); }
.sources h2 { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.095em; text-transform: uppercase; margin: 0 0 0.8rem; }
.sources ol { margin: 0; padding-left: 1.2rem; font-size: 0.92em; }
.sources li { margin-bottom: 0.45rem; }
.sources cite { font-style: italic; }

.chip {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--fg); background: var(--bg);
  padding: 0.12rem 0.55rem; text-decoration: none; margin: 0 0.35rem 0.35rem 0;
}
a.chip:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
body[data-surface="wiki"] .chip { background: var(--stock); border-color: var(--petrol-deep); }
@media (prefers-color-scheme: dark) {
  body[data-surface="wiki"] .chip { background: transparent; border-color: var(--accent); }
}

.methodology {
  background: var(--panel);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 1.2rem; margin: 1.8rem 0;
  font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.55;
}
.methodology h2, .methodology h3 {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.095em; text-transform: uppercase; margin: 0 0 0.5rem;
}
.methodology p { margin: 0.4rem 0; }

.correction-note {
  max-width: 700px; margin: 1.6rem 0 0; font-family: var(--font-sans);
  font-size: 0.85rem; color: var(--faint);
}

/* charts — spot-ink series on ink text, honest in both themes. Series order is the
   ink register: petrol first, indigo second, brunswick third; tints are the matching
   flat fills (light theme only; on the dark ground use the light cuts at low opacity). */
.chart {
  --chart-accent: var(--petrol); --chart-2: var(--indigo); --chart-3: var(--brunswick);
  --chart-fill: var(--petrol-tint); --chart-fill-2: var(--indigo-tint); --chart-fill-3: var(--brunswick-tint);
  --chart-ink: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .chart {
    --chart-accent: var(--petrol-light); --chart-2: var(--indigo-light); --chart-3: var(--brunswick-light);
    --chart-fill: color-mix(in oklab, var(--petrol-light) 18%, var(--ink));
    --chart-fill-2: color-mix(in oklab, var(--indigo-light) 18%, var(--ink));
    --chart-fill-3: color-mix(in oklab, var(--brunswick-light) 18%, var(--ink));
    --chart-ink: var(--paper);
  }
}
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
/* phone: never scale chart type below legibility — let the figure scroll instead */
@media (max-width: 640px) {
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 560px; }
}

/* stat callout */
.stat-callout {
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--hairline);
  padding: 0.9rem 0; margin: 1.8rem 0; max-width: 700px;
}
.stat-callout .figure {
  font-family: var(--font-masthead); font-weight: 700; font-size: 2.4rem;
  line-height: 1.05; color: var(--accent-strong); font-variant-numeric: tabular-nums lining-nums;
}
.stat-callout p { margin: 0.3rem 0 0; font-family: var(--font-sans); font-size: 0.9rem; }

/* ── wiki furniture ───────────────────────────────────────────────────────────── */
.infobox {
  border-top: 3px double var(--rule); border-bottom: 3px double var(--rule);
  background: var(--bg); padding: 0.9rem 1.1rem; margin: 0 0 1.5rem;
  font-family: var(--font-sans); font-size: 0.88rem;
}
@media (min-width: 860px) { .infobox { float: right; width: 300px; margin: 0 0 1rem 1.8rem; } }
.infobox dt { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.55rem; }
.infobox dd { margin: 0.1rem 0 0; }
.infobox dl { margin: 0; }
.wiki-list { list-style: none; padding: 0; margin: 0; }
.wiki-list li { border-bottom: 1px solid var(--hairline); padding: 0.9rem 0; }
.wiki-list h3 { margin: 0 0 0.25rem; }
.wiki-updated { font-family: var(--font-sans); font-size: 0.8rem; color: var(--faint); }

/* ── forms (tips page) ────────────────────────────────────────────────────────── */
.tip-forms { display: grid; gap: 2rem; margin-top: 1.6rem; }
@media (min-width: 960px) { .tip-forms { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.form-block { border-top: 2px solid var(--rule); padding-top: 1rem; }
.form-block h2 { margin-top: 0; font-size: 1.25rem; }
.form-block form div { margin: 0.9rem 0; }
label { display: block; font-family: var(--font-sans); font-size: 0.83rem; font-weight: 600; margin-bottom: 0.3rem; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 0.55rem 0.6rem; font: inherit; font-size: 0.95rem;
  color: var(--fg); background: var(--bg); border: 1px solid var(--hairline);
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
textarea { min-height: 7.5rem; resize: vertical; }
input[type="file"] { font-family: var(--font-sans); font-size: 0.85rem; }
.btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.04em; color: var(--paper); background: var(--petrol);
  border: none; padding: 0.65rem 1.4rem; cursor: pointer;
}
.btn:hover { background: var(--petrol-deep); }
@media (prefers-color-scheme: dark) {
  .btn { color: var(--ink); background: var(--petrol-light); }
  .btn:hover { background: var(--accent-strong); }
}
.form-msg { font-family: var(--font-sans); font-size: 0.9rem; }
.form-msg.ok { color: var(--accent-strong); }
.form-msg.err { color: #8a2a1b; }
@media (prefers-color-scheme: dark) { .form-msg.err { color: #e4a294; } }
.hp { position: absolute; left: -999px; top: -999px; }

/* ── ad slots: exist from birth, empty by default ─────────────────────────────── */
.ad-slot:not([hidden]) {
  border: 1px solid var(--hairline); padding: 1rem; margin: 1.8rem 0;
  font-family: var(--font-sans); font-size: 0.8rem;
}
.ad-slot:not([hidden])::before {
  content: "Advertisement"; display: block; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.095em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem;
}

/* ── footer: ink ground, reversed plate ───────────────────────────────────────── */
.site-foot { margin-top: 3rem; background: var(--ink); color: var(--paper); padding: 2rem 0 2.4rem; }
.site-foot a { color: var(--petrol-light); }
.site-foot a:hover { color: var(--paper); }
.foot-plate { display: inline-block; margin-bottom: 0.9rem; }
.foot-plate img { display: block; }
.foot-nav {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin: 0.4rem 0 1rem;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.foot-nav a { text-decoration: none; }
.site-foot p { max-width: 62ch; font-size: 0.92rem; margin: 0.5rem 0; }

/* page head block on standard pages */
.page-head { max-width: 820px; margin-bottom: 1.4rem; }

/* launch note on the front page */
.launch-note {
  margin-top: 2.2rem; padding: 1rem 1.2rem; background: var(--panel);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans); font-size: 0.88rem; max-width: none;
}
.launch-note p { margin: 0.35rem 0; max-width: 75ch; }