/* The Decision Record. See DESIGN_STANDARDS.md.
   Components use tokens only. No raw colour values below the token blocks. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-roman.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --paper: #F5F6F3;
  --ink: #1F2A44;
  --ink-2: #5A6275;
  --rule: #D5D9DF;
  --before: #7C8494;
  --shipped: #0F7B5F;
  --focus: #2F5BD3;
  --gap-flag: #B3261E;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", ui-serif, Georgia, "Times New Roman", serif;

  --t-hero: clamp(36px, 5.2vw, 60px);
  --t-h1: clamp(36px, 4vw, 48px);
  --t-h2: 24px;
  --t-h3: 21px;
  --t-delta: clamp(36px, 4.5vw, 48px);
  --t-body: 18px;
  --t-lede: 21px;
  --t-note: 14px;
  --t-ui: 16px;

  --margin-col: 11rem;
  --text-col: 38rem;
  --col-gap: 3rem;
  --page-pad: clamp(24px, 8vw, 128px);
  --section-gap: 96px;
  --bar-h: 10px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121826;
    --ink: #E4E8EF;
    --ink-2: #A3ACBD;
    --rule: #2A3346;
    --before: #6B7488;
    --shipped: #5BD1A8;
    --focus: #8AA8FF;
    --gap-flag: #FF8A80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121826;
  --ink: #E4E8EF;
  --ink-2: #A3ACBD;
  --rule: #2A3346;
  --before: #6B7488;
  --shipped: #5BD1A8;
  --focus: #8AA8FF;
  --gap-flag: #FF8A80;
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .note, button, input, textarea, label, .site-name, .site-nav {
  font-family: var(--sans);
}
/* Schibsted's tabular set also widens . and , so tabular figures are kept to
   places where numbers line up in a column. */
.tabular { font-variant-numeric: tabular-nums lining-nums; }
h2 { font-size: var(--t-h2); line-height: 1.25; font-weight: 700; }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; }

p + p { margin-top: 1em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

.note { font-size: var(--t-note); line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.tabular { font-variant-numeric: tabular-nums lining-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600; padding: 12px 20px; border-radius: 2px;
}
.skip-link:focus { top: 16px; }

/* ── Grid: margin column + text column ──────────────────── */
.row {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, var(--text-col)) 1fr;
  column-gap: var(--col-gap);
  padding-left: var(--page-pad);
  padding-right: 24px;
}
.row > .margin { grid-column: 1; }
.row > .main { grid-column: 2; min-width: 0; }
.row .row { padding-left: 0; padding-right: 0; }   /* nested rows share the grid */

.section { margin-top: var(--section-gap); }
.section > .row:first-child { margin-bottom: 24px; }

@media (max-width: 1079px) {
  :root { --margin-col: 9rem; --col-gap: 2rem; }
}
@media (max-width: 719px) {
  :root { --section-gap: 64px; }
  .row { display: block; margin-left: 16px; margin-right: 16px; padding-left: 0; padding-right: 0; }
  .row .row { margin-left: 0; margin-right: 0; }
  .row > .margin { margin-bottom: 8px; }
}

/* Hairline between stacked rows (deltas, case rows, ledger). On wide screens
   the rule sits on each column, so the page gutter stays clear. */
.ruled { padding-bottom: var(--ruled-pad, 32px); }
.ruled > .margin, .ruled > .main { border-top: 1px solid var(--rule); padding-top: var(--ruled-pad, 32px); }
@media (max-width: 719px) {
  .ruled { border-top: 1px solid var(--rule); padding-top: var(--ruled-pad, 24px); padding-bottom: var(--ruled-pad, 24px); }
  .ruled > .margin, .ruled > .main { border-top: 0; padding-top: 0; }
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 24px;
  min-height: 72px;
  padding: 8px 24px 8px var(--page-pad);
}
.site-name { font-weight: 700; font-size: 18px; text-decoration: none; padding: 10px 0; }
.site-name:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: var(--t-ui); font-weight: 600; line-height: 1.2;
  text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 2px; color: var(--ink); cursor: pointer; padding: 0;
}
.theme-toggle[hidden] { display: none; }
@media (max-width: 719px) {
  .site-header { padding: 8px 16px; }
  .site-nav { margin-left: -10px; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding-top: 64px; }
.hero-sentence {
  font-size: var(--t-hero); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.lede { font-size: var(--t-lede); line-height: 1.55; margin-top: 32px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; font-family: var(--sans); font-weight: 600; font-size: var(--t-ui); }
.actions a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.hero .margin { padding-top: 12px; }
@media (max-width: 719px) {
  .hero { padding-top: 32px; display: flex; flex-direction: column; }
  .hero .margin { order: 2; margin-top: 32px; padding-top: 0; }
  .hero-sentence { max-width: none; }
}

/* ── Hero portrait + By the numbers (quick-scan strip) ──── */
.profile-photo { display: block; width: 100%; max-width: 11rem; border: 1px solid var(--rule); margin-bottom: 20px; }
.numbers-row {
  display: flex; flex-wrap: wrap; gap: 32px 40px; margin: 0; padding: 0; list-style: none;
}
.numbers-row li { display: flex; flex-direction: column; gap: 4px; }
.num {
  font-family: var(--sans); font-weight: 800; font-size: var(--t-h2); line-height: 1;
  color: var(--shipped); letter-spacing: -0.01em;
}
.num-label { font-size: var(--t-note); color: var(--ink-2); max-width: 16ch; }

/* ── Receipt (label/value stacks in the margin) ─────────── */
.receipt { display: grid; gap: 12px; }
.receipt dt { color: var(--ink); font-weight: 600; }
.receipt dd { color: var(--ink-2); }
@media (max-width: 719px) {
  .receipt { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .receipt > div { display: flex; gap: 6px; }
  .receipt dt::after { content: ":"; }
}

/* ── Buttons ────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 12px 20px; border: 0; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-ui); line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ── Delta (the one flourish) ───────────────────────────── */
.delta-metric { font-family: var(--sans); font-size: var(--t-h3); line-height: 1.3; font-weight: 600; }
.delta-bars { margin-top: 16px; display: grid; gap: 10px; container-type: inline-size; }
.delta-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; font-family: var(--sans); }
/* Both bars share one scale: the longer value fills the track (max 28rem),
   leaving room for the figure at the end of the bar. */
.bar {
  display: block; height: var(--bar-h); flex: none; min-width: 2px;
  width: calc((min(28rem, 100cqw) - 9rem) * var(--p));
}
.bar-before { background: var(--before); }
.bar-approx { background: none; border-top: var(--bar-h) dashed var(--before); height: 0; }
.bar-after {
  background: var(--shipped);
  transition: width 900ms cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 150ms);
}
.deltas-pending .bar-after { width: calc((min(28rem, 100cqw) - 9rem) * var(--p0)); transition: none; }
.delta-before { font-size: var(--t-note); color: var(--ink-2); }
.delta-after, .delta-figure {
  font-family: var(--sans); font-size: var(--t-delta); line-height: 1; font-weight: 800;
  color: var(--shipped); letter-spacing: -0.01em;
}
.delta-change { font-size: var(--t-note); font-weight: 600; color: var(--shipped); }
.delta-figure { margin-top: 12px; }
.delta-phrase { font-family: var(--sans); font-size: var(--t-note); color: var(--ink-2); margin-top: 8px; }
.delta-phrase-lead { font-size: var(--t-h3); font-weight: 600; color: var(--shipped); }
.delta-how { margin-top: 12px; }
.delta-basis { margin-top: 8px; }
.summary .delta { padding-top: 12px; }

/* ── Case rows (home) ───────────────────────────────────── */
.case-list, .ledger { margin: 0; padding: 0; list-style: none; }
.case-row { position: relative; }
.case-area { color: var(--ink); font-weight: 600; }
.case-row .margin p + p { margin-top: 0; }
.case-title a { text-decoration: none; }
.case-title a::after { content: ""; position: absolute; inset: 0; }
.case-row.is-linked:hover .case-title a { text-decoration: underline; text-decoration-thickness: 2px; }
.case-approach { margin-top: 8px; }
.case-row .delta { margin-top: 20px; }
.case-outcome { font-family: var(--sans); font-size: var(--t-note); font-weight: 600; color: var(--shipped); margin-top: 8px; }
.case-shots { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.case-shots figure { max-width: 11rem; }
.case-shot { display: block; width: 100%; border: 1px solid var(--rule); }
.case-shots figcaption { margin-top: 6px; }

/* ── Beliefs ────────────────────────────────────────────── */
.belief { padding-top: 24px; padding-bottom: 24px; }
.belief-title { margin-bottom: 8px; }

/* ── Ledger ─────────────────────────────────────────────── */
.shipped-intro { font-size: var(--t-lede); line-height: 1.55; max-width: var(--text-col); }
.shipped-group { margin-top: 48px; margin-bottom: 4px; }
.shipped-group.is-first { margin-top: 40px; }
.ledger-item { --ruled-pad: 20px; }
.ledger-thing { font-family: var(--sans); font-weight: 600; }
.ledger-shot {
  margin-top: 16px; display: block; width: 100%; max-width: 11rem;
  border: 1px solid var(--rule);
}
@media (max-width: 719px) {
  .ledger-item > .margin { margin-bottom: 4px; }
  .case-row .margin { display: flex; flex-wrap: wrap; gap: 0 12px; }
}

/* ── Contact form ───────────────────────────────────────── */
.contact-form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; margin: 0; }
.field label { font-size: var(--t-note); font-weight: 600; }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font-family: var(--serif); font-size: var(--t-body); line-height: 1.4;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-2); border-radius: 2px;
}
.field textarea { resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
.honeypot { position: absolute; left: -9999px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; font-family: var(--sans); font-weight: 600; font-size: var(--t-ui); }
.contact-links:empty { display: none; }
.contact-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Case study page ────────────────────────────────────── */
.case-head { padding-top: 40px; }
.back { font-family: var(--sans); font-weight: 600; font-size: var(--t-ui); }
.back a { display: inline-flex; align-items: center; min-height: 44px; }
.case-h1 { font-size: var(--t-h1); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.case-body { margin-top: 40px; }
.case-aside { align-self: start; position: sticky; top: 24px; display: grid; gap: 32px; }
.toc-title { color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; color: var(--ink-2); }
.toc a:hover { text-decoration: underline; }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.summary { border-left: 3px solid var(--ink); padding: 4px 0 4px 20px; }
.summary-title { font-size: var(--t-note); font-weight: 600; margin-bottom: 12px; }
.summary dl { display: grid; gap: 12px; }
.summary dl > div { display: grid; grid-template-columns: 6rem 1fr; gap: 16px; }
.summary dt { font-family: var(--sans); font-size: 14px; font-weight: 600; padding-top: 4px; }
.case-section { margin-top: 64px; }
.case-section > h2 { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.5em; }
.prose p + ul, .prose ul + p { margin-top: 1em; }
.pull-quote { margin: 40px 0 40px 2rem; }
.pull-quote p { font-style: italic; font-size: 24px; line-height: 1.4; }
.pull-quote footer { margin-top: 12px; }
.options { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.options th, .options td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.options thead th { font-family: var(--sans); font-size: var(--t-note); font-weight: 600; }
.options tbody th { font-family: var(--sans); font-weight: 600; }
.options .chosen { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
.next-case { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--rule); font-family: var(--sans); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.next-case .note { display: block; margin-bottom: 4px; }
.case-figure { grid-column: 1 / 3; margin: 40px 0; }
.case-figure figcaption { margin-top: 8px; }
@media (max-width: 719px) {
  .case-aside { position: static; margin-bottom: 32px; }
  .toc { display: none; }
  .summary dl > div { grid-template-columns: 1fr; gap: 2px; }
  .options thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .options, .options tbody, .options tr, .options th, .options td { display: block; width: 100%; }
  .options tr { border-top: 1px solid var(--rule); padding: 12px 0; }
  .options th, .options td { border: 0; padding: 4px 0; }
  .options td[data-label]::before { content: attr(data-label); display: block; font-family: var(--sans); font-size: var(--t-note); font-weight: 600; color: var(--ink-2); }
  .options .chosen:empty { display: none; }
  .pull-quote { margin-left: 1rem; }
}

/* ── About (now a scrollable section on the home page, not its own page) ── */
.about-text section + section { margin-top: 56px; }
.about-text h2 { margin-bottom: 16px; }
.plain-list { padding-left: 1.25em; }
.plain-list li + li { margin-top: 0.4em; }
.about-outside { margin-top: 56px; }
.about-figure { margin-top: 24px; max-width: var(--text-col); }
.about-figure img { width: 100%; border: 1px solid var(--rule); }
.about-figure figcaption { margin-top: 8px; }

/* Story timeline: each chapter is its own margin-date / main-prose pair,
   same annotation pattern as a case page, read oldest to newest. */
.story { margin: 0; padding: 0; list-style: none; }
.story-item { --ruled-pad: 28px; }
.story-org { font-family: var(--sans); font-weight: 600; color: var(--ink); }

.simple-page { padding-top: 64px; padding-bottom: 64px; }
.simple-page .lede { margin-top: 16px; }
.simple-page p + p { margin-top: 24px; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { margin-top: var(--section-gap); padding: 32px 0 48px; }
.site-footer .row > * + * { margin-top: 0; }
@media (max-width: 719px) {
  .site-footer .row { display: flex; gap: 12px; }
}

/* ── Dev-only gap markers (never in production) ─────────── */
.gap {
  margin: 12px 0; padding: 8px 12px;
  border: 1px dashed var(--gap-flag); color: var(--gap-flag);
  font-family: var(--sans); font-size: var(--t-note); line-height: 1.4;
}

/* ── Motion ─────────────────────────────────────────────── */
.theme-fade, .theme-fade * {
  transition: color 200ms linear, background-color 200ms linear, border-color 200ms linear, fill 200ms linear !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  :root, :root[data-theme="dark"] {
    --paper: #FFFFFF; --ink: #000000; --ink-2: #333333; --rule: #BBBBBB; --before: #888888; --shipped: #0F7B5F;
  }
  .site-header, .skip-link, .toc, .theme-toggle, .contact-form, .actions, .site-footer { display: none !important; }
  body { font-size: 11pt; }
  .row { display: block; padding: 0; }
  .case-aside { position: static; }
  .main a[href^="http"]::after, .main a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--ink-2); }
  .case-title a::after { position: static; content: none; }
  .case-section, .delta, .ledger-item, .case-row { break-inside: avoid; }
}