/* SHARED_START */
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/host-grotesk-400.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/host-grotesk-500.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/host-grotesk-600.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/host-grotesk-700.ttf') format('truetype'); }

/* ============================================================
   CREATOR ECONOMY MAP — STYLES
   Daylight product world: cool near-white ground, white surfaces,
   ink type, hairlines, soft layered shadow, one cobalt accent.
   ============================================================ */

:root {
    --font: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --bg: oklch(98.3% 0.003 264);
    --surface: #fff;
    --ink: oklch(20% 0.014 264);
    --ink-2: oklch(44% 0.014 264);
    --ink-3: oklch(54% 0.012 264);
    --line: oklch(20% 0.014 264 / 0.09);
    --line-2: oklch(20% 0.014 264 / 0.16);

    --accent: oklch(54% 0.21 262);
    --accent-hover: oklch(47% 0.22 262);
    --accent-soft: oklch(54% 0.21 262 / 0.09);
    --accent-ring: oklch(54% 0.21 262 / 0.4);

    /* Relationship kinds: shown only when a stakeholder is in focus */
    --t-money: oklch(60% 0.15 158);
    --t-content: oklch(54% 0.2 262);
    --t-influence: oklch(66% 0.16 62);
    --t-talent: oklch(56% 0.17 318);

    --shadow-1: 0 1px 1px oklch(20% 0.02 264 / 0.04), 0 1px 3px oklch(20% 0.02 264 / 0.06);
    --shadow-2: 0 1px 2px oklch(20% 0.02 264 / 0.05), 0 6px 16px oklch(20% 0.02 264 / 0.08);
    --shadow-3: 0 2px 4px oklch(20% 0.02 264 / 0.05), 0 16px 40px oklch(20% 0.02 264 / 0.13);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

    --bar-h: 56px;
    --panel-w: 432px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
/* SHARED_END */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1,h2,h3 { margin: 0; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--surface); padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }
.brand { font-weight: 600; letter-spacing: -.012em; text-decoration: none; }
.site-menu { position: relative; font-size: 14px; }
.site-menu summary { cursor: pointer; padding: 10px; }
.site-menu nav { position: absolute; top: 100%; min-width: 220px; padding: 10px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-2); }
.site-menu a { display: block; padding: 9px; text-decoration: none; }
.site-menu a:hover { background: var(--bg); }
.reading-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.reading-footer p { font-size: 14px; color: var(--ink-2); }

.editorial { height: auto; min-height: 100%; overflow: auto; font-size: 17px; line-height: 1.7; }
.page-header { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: auto; padding: 20px 32px; border-bottom: 1px solid var(--line); }
.page-header .brand { font-size: 17px; }
.page-header .site-menu { z-index: 10; }
.page-header .site-menu nav { left: auto; right: 0; }
.editorial main { max-width: 1140px; margin: auto; padding: 48px 32px 64px; }
.editorial article { max-width: 72ch; margin: auto; }
.editorial h1 { font-size: clamp(36px, 4.8vw, 62px); line-height: 1.06; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; margin: 24px 0; }
.editorial h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.18; font-weight: 600; letter-spacing: -.025em; margin: 54px 0 16px; text-wrap: balance; }
.editorial h3 { font-size: 22px; line-height: 1.3; margin: 32px 0 10px; font-weight: 600; letter-spacing: -.015em; }
.editorial p { margin: 18px 0; }
.editorial a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.editorial a:hover { color: var(--accent); }
.editorial .lead { font-size: clamp(20px, 2vw, 23px); line-height: 1.55; margin: 32px 0; }
.editorial .byline, .breadcrumbs, figcaption { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.editorial .wide { margin: 40px 0; }
.editorial img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; }
.editorial figcaption { margin-top: 12px; }
.editorial li { padding-left: 4px; margin: 12px 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
caption { text-align: left; margin-bottom: 16px; color: var(--ink-2); }
th, td { padding: 16px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; min-width: 125px; }
thead { background: var(--surface); }
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.timeline time { font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline p { margin: 6px 0 0; }
.editorial .reading-footer { border-top: 1px solid var(--line-2); padding-top: 16px; margin-top: 64px; max-width: 72ch; }
.editorial .reading-footer nav { font-size: 15px; }
@media (max-width: 600px) { .page-header { padding: 16px; } .editorial main { padding: 24px 16px 48px; } .editorial h2 { margin-top: 40px; } }
@media (max-width: 600px) {
    .editorial table thead { display: none; }
    .editorial table, .editorial tbody, .editorial tr, .editorial th, .editorial td { display: block; width: 100%; min-width: 0; }
    .editorial tbody tr { padding: 20px 0; border-bottom: 1px solid var(--line-2); }
    .editorial tbody th, .editorial tbody td { padding: 6px 0; border: 0; }
    .editorial tbody th { font-size: 18px; }
    .editorial tbody td:nth-child(2)::before { content: 'Reported figure: '; font-weight: 600; }
    .editorial tbody td:nth-child(3)::before { content: 'Scope and source: '; font-weight: 600; }
}

@media (max-width: 600px) { .editorial caption { display: block; width: 100%; } }