/* danieljin.com, one system for every page.
   Two themes (paper, night) and six sun phases (night, dawn, sunrise, day, golden, dusk).
   The head script sets <html data-theme data-phase> from the sun over Kansas City before first paint.
   Fonts are system stacks on purpose: zero requests, zero layout shift. */

:root {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --serif: "Iowan Old Style", "Sitka Text", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", Menlo, Consolas, ui-monospace, monospace;

  --step--2: clamp(.7rem, .68rem + .08vw, .75rem);
  --step--1: clamp(.8rem, .77rem + .12vw, .875rem);
  --step-0: clamp(1rem, .95rem + .22vw, 1.125rem);
  --step-1: clamp(1.18rem, 1.08rem + .45vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.24rem + .95vw, 2.05rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --step-4: clamp(2.5rem, 1.75rem + 3.6vw, 5rem);
  --step-5: clamp(3rem, 1.8rem + 6vw, 7.25rem);

  --gutter: clamp(16px, 4.2vw, 44px);
  --wrap: 1180px;
  --measure: 66ch;
  --nav-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 160ms;
  --mid: 240ms;

  /* Aliases kept for the legacy pages and today's token names. */
  --font-sans: var(--sans);
  --font-size-50: .66rem; --font-size-100: .78rem; --font-size-200: .9rem; --font-size-300: 1rem;
  --font-size-400: 1.08rem; --font-size-500: 1.2rem; --font-size-600: 1.4rem; --font-size-700: 1.7rem;
  --font-size-800: 2.2rem; --font-size-900: 2.9rem; --font-size-950: 3.4rem;
  --duration-fast: var(--fast); --duration-normal: var(--mid); --ease-standard: var(--ease);
  --radius-none: 2px; --radius-sm: 4px; --radius-pill: 999px;
}

/* ---------- themes ---------- */
:root, :root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4eee2; --bg-2: #faf6ee; --bg-3: #ebe3d3;
  --ink: #1d1b17; --ink-2: #3e3a32; --ink-3: #5f584c; --ink-4: #666056;
  --rule: rgba(29, 27, 23, .12); --rule-2: rgba(29, 27, 23, .24);
  --good: #2f6b4a; --warn: #7a5300; --bad: #9b3524;
  --data-warm: #9c4417; --data-cool: #2f5ea8; --data-neutral: #857d70; --data-good: #2f6b4a; --data-bad: #9b3524;
  --scrim: 244, 238, 226;
  --accent: #7f5700; --accent-2: #5f4100;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0b0e15; --bg-2: #10141e; --bg-3: #161b28;
  --ink: #efe7d6; --ink-2: #cfc6b4; --ink-3: #a39b88; --ink-4: #8f8878;
  --rule: rgba(239, 231, 214, .11); --rule-2: rgba(239, 231, 214, .22);
  --good: #82d3aa; --warn: #f0c46a; --bad: #f2917c;
  --data-warm: #ff9f62; --data-cool: #86b4ff; --data-neutral: #8f8a80; --data-good: #82d3aa; --data-bad: #f2917c;
  --scrim: 11, 14, 21;
  --accent: #e6bb5a; --accent-2: #f3cf7e;
}

/* Accent follows the sun. Paper values stay dark enough for 4.5:1 on paper; night values light enough on ink. */
:root[data-theme="paper"][data-phase="night"]   { --accent: #34489a; --accent-2: #243676; }
:root[data-theme="paper"][data-phase="dawn"]    { --accent: #97403a; --accent-2: #74302b; }
:root[data-theme="paper"][data-phase="sunrise"] { --accent: #914e0e; --accent-2: #6f3b09; }
:root[data-theme="paper"][data-phase="day"]     { --accent: #7f5700; --accent-2: #5f4100; }
:root[data-theme="paper"][data-phase="golden"]  { --accent: #974900; --accent-2: #733700; }
:root[data-theme="paper"][data-phase="dusk"]    { --accent: #6a42a8; --accent-2: #513282; }
:root[data-theme="night"][data-phase="night"]   { --accent: #a9bcff; --accent-2: #c9d5ff; }
:root[data-theme="night"][data-phase="dawn"]    { --accent: #f0a8a1; --accent-2: #f7c6c0; }
:root[data-theme="night"][data-phase="sunrise"] { --accent: #f7b87c; --accent-2: #fbd0a6; }
:root[data-theme="night"][data-phase="day"]     { --accent: #e6bb5a; --accent-2: #f3cf7e; }
:root[data-theme="night"][data-phase="golden"]  { --accent: #ffad5a; --accent-2: #ffc487; }
:root[data-theme="night"][data-phase="dusk"]    { --accent: #c9a8f5; --accent-2: #ddc7fa; }

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --good-soft: color-mix(in srgb, var(--good) 13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad) 13%, transparent);

  /* legacy page vocabulary */
  --ground: var(--bg); --surface: var(--bg-2); --surface-alt: var(--bg-3); --surface-card: var(--bg-2);
  --muted: var(--ink-3); --faint: var(--ink-4); --rule-soft: var(--rule); --line: var(--rule-2);
  --ink-secondary: var(--ink-2);
  --safe: var(--good); --safe-soft: var(--good-soft); --warn-soft: var(--warn-soft);
  --loss: var(--bad); --loss-soft: var(--bad-soft);
  --signal: var(--accent); --signal-soft: var(--accent-soft);
  --warm: var(--data-warm); --cool: var(--data-cool); --amber: var(--warn);
  --success: var(--good); --warning: var(--warn); --danger: var(--bad);
  --accent-hover: var(--accent-2); --accent-bright: var(--accent-2);
  --ember: var(--accent); --ember-soft: var(--accent-soft);
  --color-black: var(--bg); --color-white: var(--ink);
  --color-gray-950: var(--bg-2); --color-gray-800: var(--bg-3); --color-gray-700: var(--rule-2);
  --color-gray-600: var(--ink-4); --color-gray-500: var(--ink-4); --color-gray-400: var(--ink-3);
  --color-gray-300: var(--ink-3); --color-gray-200: var(--ink-2); --color-gray-100: var(--ink-2);
  --color-accent-50: var(--accent-2); --color-accent-500: var(--accent); --color-accent-600: var(--accent-2);
  --color-accent-700: var(--accent); --color-accent-950: var(--accent-soft);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  transition: background-color var(--mid) var(--ease), color var(--mid) var(--ease);
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0; }
h1 { font-style: italic; font-weight: 400; letter-spacing: -.015em; line-height: 1.02; }
h2 { font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
code, kbd, samp, pre { font-family: var(--mono); font-size: .88em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
button { font: inherit; color: inherit; }
table { font-family: var(--sans); font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); font: 600 .85rem var(--sans); text-decoration: none; border-radius: 3px; transition: top var(--fast) var(--ease); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap-x { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.kicker { font: 600 var(--step--2)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: .9em; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.kicker.plain::before { display: none; }
.kicker .acc { color: var(--accent); }
.deck { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.meta { font: 500 var(--step--1)/1.6 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums lining-nums; }

.btn { display: inline-flex; align-items: center; gap: .65em; padding: .78em 1.2em; border: 1px solid var(--rule-2); border-radius: 999px; font: 600 var(--step--2)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: transparent; text-decoration: none; cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.arrow { display: inline-block; transition: transform var(--fast) var(--ease); }
a:hover .arrow, .btn:hover .arrow { transform: translateX(3px); }
.tag { display: inline-flex; align-items: center; gap: .45em; padding: .28em .7em; border: 1px solid var(--rule-2); border-radius: 999px; font: 600 var(--step--2)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.note { border-left: 2px solid var(--warn); background: var(--warn-soft); padding: .9em 1.1em; font: 400 var(--step--1)/1.55 var(--sans); color: var(--ink-2); border-radius: 0 3px 3px 0; }
.note strong { color: var(--ink); }

/* ---------- site header ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom: 1px solid var(--rule); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); transition: background-color var(--mid) var(--ease), border-color var(--mid) var(--ease), color var(--mid) var(--ease); }
.wordmark { font: italic 400 1.32rem/1 var(--display); letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: auto; }
.wordmark:hover { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); font: 500 .84rem/1 var(--sans); }
.nav-links a { color: var(--ink-2); text-decoration: none; padding: 8px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.theme-toggle { display: inline-flex; align-items: center; gap: .55em; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; display: none; }
:root[data-mode="kc"] .theme-toggle .ti-kc, :root:not([data-mode]) .theme-toggle .ti-kc, :root[data-mode="light"] .theme-toggle .ti-light, :root[data-mode="dark"] .theme-toggle .ti-dark { display: block; }
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; height: 34px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; display: inline-flex; align-items: center; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { border-color: var(--accent); color: var(--ink); }
.nav-menu .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 10px; background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); display: grid; }
.nav-menu .menu-panel a { padding: 11px 12px; font: 500 .95rem/1.2 var(--sans); color: var(--ink); text-decoration: none; border-radius: 4px; }
.nav-menu .menu-panel a:hover { background: var(--accent-soft); }
@media (max-width: 980px) { .nav-links { display: none; } .nav-menu { display: block; } .theme-label { display: none; } .theme-toggle { padding: 0 9px; } }

/* A lighthouse island that builds itself when you hover the benchmark link: a nod to the study's showpiece. */
.bench-link { position: relative; display: inline-flex; }
.bench-pop { position: absolute; top: calc(100% + 8px); left: 50%; width: 176px; height: 112px; transform: translateX(-50%) translateY(-4px); pointer-events: none; opacity: 0; transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); border-radius: 6px; overflow: hidden; background: linear-gradient(#1a2440, #2c3350 55%, #43405a 70%, #1d2a44 71%, #121a2e); box-shadow: 0 16px 36px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06); }
.bench-link:hover .bench-pop, .bench-link:focus-within .bench-pop { opacity: 1; transform: translateX(-50%) translateY(0); }
.bench-pop svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.bench-pop .vx { opacity: 0; transform: translateY(6px); transition: opacity 150ms ease, transform 150ms ease; transition-delay: calc((20 - var(--i)) * 14ms); }
.bench-link:hover .vx, .bench-link:focus-within .vx { opacity: 1; transform: none; transition-delay: calc(var(--i) * 26ms); }
.bench-pop .beam { transform-box: view-box; transform-origin: 116px 44px; opacity: 0; transition: opacity 300ms ease 0ms; }
.bench-link:hover .beam, .bench-link:focus-within .beam { opacity: 1; transition-delay: 620ms; animation: beam 5.5s linear infinite; }
@keyframes beam { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.bench-pop .cap { position: absolute; left: 10px; bottom: 8px; font: 600 .56rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(246, 237, 221, .72); }
@media (hover: none) { .bench-pop { display: none; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); margin-top: clamp(64px, 10vw, 128px); padding: 44px 0 56px; font: 400 var(--step--1)/1.6 var(--sans); color: var(--ink-3); }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 28px 40px; }
.site-footer .wordmark { font-size: 1.5rem; display: inline-block; margin-bottom: 10px; }
.site-footer p { margin: 8px 0 0; max-width: 40ch; }
.site-footer .kicker { margin-bottom: 4px; }
@media (max-width: 820px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }

/* ---------- sections (home, résumé, 404) ---------- */
.section { padding-block: clamp(64px, 9vw, 120px) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--rule); }
.section-head h2 { font-size: var(--step-3); margin-top: 14px; }
.section-head .aside { font: 400 var(--step--1)/1.6 var(--sans); color: var(--ink-3); max-width: 46ch; justify-self: end; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } .section-head .aside { justify-self: start; } }
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal], .reduced [data-reveal] { opacity: 1; transform: none; }

/* ---------- legacy pages: one system over each page's own layout ---------- */
.legacy { font-size: var(--step-0); }
.legacy .wrap, .legacy .h-container { max-width: var(--wrap); padding: 0 var(--gutter) 40px; margin: 0 auto; }
.legacy .masthead, .legacy .h-header { border-bottom: 1px solid var(--rule-2); padding: clamp(40px, 7vw, 88px) 0 30px; margin: 0 0 40px; }
.legacy .eyebrow, .legacy .h-badge { font: 600 var(--step--2)/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); background: none; padding: 0; gap: 6px 12px; }
.legacy .eyebrow span:first-child, .legacy .h-badge { color: var(--accent); }
.legacy h1, .legacy h1.h-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.3rem, 1.55rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -.015em; margin: 16px 0 18px; max-width: 22ch; }
.legacy .standfirst, .legacy .h-desc { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.legacy h2 { font-family: var(--display); font-weight: 500; font-size: var(--step-2); letter-spacing: -.01em; }
.legacy h3, .legacy h4 { font-family: var(--display); }
.legacy section h2 .num, .legacy h2 .num { font: 600 .72rem/1 var(--mono); color: var(--accent); letter-spacing: .08em; vertical-align: .4em; margin-right: .5em; }
.legacy .sec-note { font: 600 var(--step--2)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.legacy p, .legacy li { color: var(--ink-2); }
.legacy .kpi-card, .legacy .viz-card, .legacy .card, .legacy .h-kpi-card, .legacy .h-chart-card, .legacy .h-table-card, .legacy .callout { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px; box-shadow: none; }
.legacy .kpi-label, .legacy .h-kpi-label, .legacy .viz-note, .legacy .card-head { font-family: var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.legacy .kpi-val, .legacy .h-kpi-val { font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.legacy .kpi-sub, .legacy .h-kpi-sub { font-family: var(--sans); color: var(--ink-3); }
.legacy .viz-head h2 { font-size: var(--step-1); font-weight: 500; }
.legacy .narrative, .legacy .callout { background: var(--accent-soft); border-left: 2px solid var(--accent); border-radius: 0 3px 3px 0; color: var(--ink-2); font-family: var(--sans); }
.legacy table { font-family: var(--sans); font-size: .9rem; }
@media (max-width: 760px) { .legacy table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .legacy pre { max-width: 100%; overflow-x: auto; } }
.legacy th { font-family: var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.legacy td, .legacy th { border-color: var(--rule) !important; }
.legacy .tag, .legacy .pill, .legacy .term, .legacy .chk-badge, .legacy .bar-pill { font-family: var(--sans); border-radius: 999px; }
.legacy code { background: var(--bg-3); padding: .1em .35em; border-radius: 3px; color: var(--ink); }
.legacy .h-btn, .legacy .tool-btn { font-family: var(--sans); border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); }
.legacy .h-btn:hover, .legacy .tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.legacy .page-context { font: 600 var(--step--2)/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.legacy .page-context a { color: var(--ink-2); text-decoration: none; }
.legacy .page-context a:hover { color: var(--accent); }
.legacy .data-note { margin: 18px 0 0; max-width: 72ch; }
.legacy .page-context + .hero { margin-top: 44px; }
/* role classes the study page borrowed from its old token file */
.legacy .label { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; }
.legacy .caption { font-family: var(--sans); font-weight: 500; }
.legacy .headline { font-family: var(--display); }
.legacy .study-foot { font-family: var(--sans); }
.js-plot { min-height: 420px; }

/* ---------- print (the résumé prints clean) ---------- */
@media print {
  :root { --bg: #fff; --bg-2: #fff; --bg-3: #f3f3f3; --ink: #111; --ink-2: #222; --ink-3: #444; --rule: #ccc; --rule-2: #999; --accent: #111; }
  .site-nav, .site-footer, .no-print, .skip { display: none !important; }
  body { font-size: 10.5pt; background: #fff; }
  a { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}