/*
  A black-and-white frame with bright color blocks.

  The chrome (nav, type, buttons, links) is monochrome: white canvas, near-black
  ink, one variable family (Host Grotesk) carrying every role by weight. Color only
  appears as solid blocks, and every block means something: each project `kind`
  owns one color, used for its note, its feature block, its timeline bar and the
  header of its panel. Text on a block is always --on-block, in both themes.

    --kN   block color for kind N (1–5)

  Shapes: buttons and filters are pills, blocks and panels are 24px, notes are
  10px (they're meant to read like paper), tags are 6px.
*/
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f4f4f1;
  --ink: #151515;
  --muted: #5c5c57;
  --line: #e4e4e0;
  --on-block: #151515;
  --on-block-muted: #3d3d39;
  --inverse: #151515;
  --inverse-ink: #f4f4f1;
  --inverse-muted: #a8a8a1;
  --inverse-line: #33332f;
  --shadow: 0 1px 2px rgb(21 21 21 / 0.06), 0 12px 32px -8px rgb(21 21 21 / 0.18);

  --k1: #cdeb6f; /* lime  */
  --k2: #a9cdff; /* sky   */
  --k3: #ffb596; /* coral */
  --k4: #ffd966; /* butter */
  --k5: #f5b3d5; /* pink  */

  --todo: #8a4b08;
  --todo-bg: #fff1a8;

  --sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --radius: 24px;
  --nav-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121211; --surface: #1c1c1a; --ink: #f2f2ee; --muted: #a9a9a2; --line: #2c2c29;
    --inverse: #1f1f1d; --inverse-ink: #f2f2ee; --inverse-muted: #a9a9a2; --inverse-line: #383834;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.6);
    --k1: #c2e063; --k2: #9fc3f5; --k3: #f5a988; --k4: #f2cc58; --k5: #eaa7c9;
    --todo: #fcd34d; --todo-bg: #3a3110; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121211; --surface: #1c1c1a; --ink: #f2f2ee; --muted: #a9a9a2; --line: #2c2c29;
  --inverse: #1f1f1d; --inverse-ink: #f2f2ee; --inverse-muted: #a9a9a2; --inverse-line: #383834;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --k1: #c2e063; --k2: #9fc3f5; --k3: #f5a988; --k4: #f2cc58; --k5: #eaa7c9;
  --todo: #fcd34d; --todo-bg: #3a3110; color-scheme: dark;
}

/* Anything tagged with a kind picks up that color as --k. */
[data-k] { --k: var(--surface); }
[data-k="1"] { --k: var(--k1); }
[data-k="2"] { --k: var(--k2); }
[data-k="3"] { --k: var(--k3); }
[data-k="4"] { --k: var(--k4); }
[data-k="5"] { --k: var(--k5); }

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; }
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; }
::selection { background: var(--k1); color: var(--on-block); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.125em; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 12px; z-index: 100; border-radius: 8px; }

/* Shared numerals: the final value sits invisibly underneath so a count-up
   never changes the width of its line. */
.num { display: inline-grid; font-feature-settings: "kern"; }
.num > * { grid-area: 1 / 1; }
.num-ghost { visibility: hidden; }

/* ── Scroll progress + sticky nav ───────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); }
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 16px; height: var(--nav-h); }
.brand { font-weight: 650; letter-spacing: -0.02em; text-decoration: none; margin-right: auto; font-size: 17px; }
.nav nav { display: flex; gap: 2px; }
.nav nav a { padding: 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; }
.nav nav a.active { color: var(--ink); background: var(--surface); }
@media (hover: hover) { .nav nav a:hover { color: var(--ink); } }
@media (max-width: 560px) { .brand { display: none; } .nav nav { margin-right: auto; margin-left: -10px; } .nav nav a { padding: 8px 9px; } }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 18px; transition: background-color 0.15s ease, transform 0.16s var(--ease-out), opacity 0.15s ease; }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); } }
.icon-btn:active:not(:disabled) { transform: scale(0.94); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 13px; border: 0; border-radius: 999px; font-weight: 550; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.16s var(--ease-out), background-color 0.15s ease; }
.btn.primary { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .btn.primary:hover { background: color-mix(in srgb, var(--ink) 82%, var(--bg)); } }
.btn:active { transform: scale(0.97); }
.text-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; font-size: 15px; font-weight: 550; cursor: pointer; transition: background-color 0.15s ease, transform 0.16s var(--ease-out); }
@media (hover: hover) { .text-btn:hover { background: var(--surface); } }
.text-btn:active { transform: scale(0.97); }
.text-btn .i { font-size: 18px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { display: grid; gap: 48px; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; padding-top: 72px; min-height: min(700px, calc(100svh - var(--nav-h))); } }
h1 { font-size: clamp(56px, 10.5vw, 96px); line-height: 0.94; font-weight: 380; letter-spacing: -0.04em; margin: 0 0 0 -0.04em; }
.tagline { font-size: clamp(20px, 2.3vw, 26px); line-height: 1.35; font-weight: 420; letter-spacing: -0.012em; margin: 28px 0 0; max-width: 30ch; }
.hero-meta { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.link-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.link-row a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 550; font-size: 16px; text-decoration: none; }
.link-row a .i { font-size: 19px; }
.link-row a[href] span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s var(--ease-out); }
@media (hover: hover) { .link-row a[href]:hover span { background-size: 100% 1px; } }

/* Notes: up to three projects laid on the page like paper on a desk. */
.notes { list-style: none; margin: 0; padding: 0; position: relative; }
.notes li { display: contents; }
.note {
  --r: 0deg; --x: 0px; --y: 0px;
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px 22px; border-radius: 10px; background: var(--k); color: var(--on-block);
  text-decoration: none; box-shadow: var(--shadow);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 0.45s var(--ease-out), box-shadow 0.3s ease;
}
.note-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 550; color: var(--on-block-muted); }
.note-title { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; padding-top: 10px; }
.note-metric { font-size: 15px; line-height: 1.35; color: var(--on-block-muted); padding-right: 32px; }
.note-metric .num { font-size: 34px; font-weight: 450; letter-spacing: -0.03em; color: var(--on-block); display: grid; line-height: 1.1; }
.note-go { position: absolute; right: 18px; bottom: 20px; font-size: 22px; transition: transform 0.3s var(--ease-out); }

/* Phones: a row you can swipe. */
@media (max-width: 959px) {
  .notes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 14px 16px 26px; scrollbar-width: none; }
  .notes::-webkit-scrollbar { display: none; }
  .note { flex: 0 0 min(270px, 76vw); min-height: 230px; scroll-snap-align: center; }
  .note-metric { margin-top: auto; }
  .notes li:nth-child(1) .note { --r: -1.5deg; }
  .notes li:nth-child(2) .note { --r: 1.2deg; }
  .notes li:nth-child(3) .note { --r: -0.8deg; }
}
@media (min-width: 720px) and (max-width: 959px) { .notes { margin: 0 -40px; padding-inline: 40px; } }
/* Desktop: a loose cascade, featured note in front. Each note's title and
   number sit at the top, so the strip left showing on the ones behind still
   reads. Reach for the stack and it fans out. */
@media (min-width: 960px) {
  .notes { height: 550px; }
  .note { position: absolute; width: min(340px, 86%); height: 250px; }
  .notes li:nth-child(1) .note { --r: -1.5deg; left: 6%; top: 300px; z-index: 3; }
  .notes li:nth-child(2) .note { --r: 3deg; left: 14%; top: 150px; z-index: 2; }
  .notes li:nth-child(3) .note { --r: -4deg; left: 1%; top: 0; z-index: 1; }
  .notes[data-count="2"] { height: 400px; }
  .notes[data-count="2"] li:nth-child(1) .note { top: 150px; }
  .notes[data-count="2"] li:nth-child(2) .note { top: 0; }
  .notes[data-count="1"] { height: 260px; }
  .notes[data-count="1"] li:nth-child(1) .note { top: 0; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .notes:hover li:nth-child(1) .note { --y: 22px; --x: -6px; --r: -3deg; }
  .notes:hover li:nth-child(2) .note { --x: 30px; --r: 5deg; }
  .notes:hover li:nth-child(3) .note { --y: -22px; --x: -12px; --r: -6deg; }
  .notes .note:hover { --r: 0deg !important; box-shadow: 0 2px 4px rgb(21 21 21 / 0.08), 0 28px 48px -12px rgb(21 21 21 / 0.3); }
  .notes .note:hover .note-go { transform: translate(3px, -3px); }
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding-top: 88px; }
@media (min-width: 720px) { .section { padding-top: 120px; } }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
h2 { font-size: clamp(40px, 6vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -0.04em; margin: 0; }
.hint { margin: -16px 0 24px; color: var(--muted); font-size: 15px; }

/* ── Work: filters, feature block, index ────────────────────────────────── */
.work-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); }
.filters button { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px 8px; border-radius: 999px; border: 0; background: none; font-size: 15px; font-weight: 550; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out); }
@media (hover: hover) { .filters button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 8%, transparent); } }
.filters button:active { transform: scale(0.96); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 560px) {
  .work-tools { width: 100%; }
  .filters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .filters button { padding: 7px 12px 8px; white-space: nowrap; }
}
.filters .count { font-size: 12.5px; font-weight: 500; opacity: 0.6; font-variant-numeric: tabular-nums; }

.projects { display: flex; flex-direction: column; }
.kind-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--k); box-shadow: inset 0 0 0 1px rgb(21 21 21 / 0.18); flex: none; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 13.5px; font-weight: 500; padding: 3px 9px 4px; border-radius: 6px; border: 1px solid var(--line); }

/* The open project is a whole color block (the featured one to start). */
.feature {
  display: grid; gap: 32px; margin: 12px 0; padding: 28px 24px; border-radius: var(--radius);
  background: var(--k); color: var(--on-block); text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}
@media (min-width: 860px) { .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 48px; } }
.feature-main { display: flex; flex-direction: column; gap: 12px; }
.feature .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; font-weight: 550; color: var(--on-block-muted); }
.feature-title { font-size: clamp(44px, 6vw, 72px); line-height: 0.98; font-weight: 450; letter-spacing: -0.04em; margin: 8px 0 0; }
.feature-role { margin: 0; font-size: 17px; font-weight: 550; }
.feature-summary { margin: 8px 0 0; font-size: 19px; line-height: 1.45; max-width: 46ch; }
.feature-result { margin: 8px 0 0; font-size: 17px; line-height: 1.5; max-width: 52ch; color: var(--on-block-muted); }
.feature-side { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
@media (min-width: 860px) { .feature-side { align-items: flex-start; padding-left: 40px; border-left: 1px solid rgb(21 21 21 / 0.16); } }
.feature-metric { display: grid; gap: 4px; }
.feature-metric .num { font-size: clamp(64px, 8vw, 104px); line-height: 0.9; font-weight: 380; letter-spacing: -0.045em; }
.feature-metric .label { font-size: 17px; font-weight: 500; }
.feature .tags li { border-color: rgb(21 21 21 / 0.22); }
.feature .btn.primary { background: var(--on-block); color: #fff; align-self: flex-start; }
.feature .btn .i { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .feature:hover .btn .i { transform: translateX(4px); } }
.feature:active { transform: scale(0.995); }
/* The project's first photo, framed inside its block. */
.feature-shot { grid-column: 1 / -1; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgb(21 21 21 / 0.08), 0 16px 40px -12px rgb(21 21 21 / 0.35); }
.feature-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
/* A chart or figure keeps its own shape, on white like the page it came from. */
.feature-shot.whole { background: #fff; }
.feature-shot.whole img { aspect-ratio: auto; max-height: 560px; object-fit: contain; }

/* Every project is a row in an index you can scan. Hover floods a row with
   its color; clicking grows it into its block. */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index.lead-open { border-top-color: transparent; }
.row {
  position: relative; isolation: isolate; display: grid; gap: 4px 24px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  width: calc(100% + 32px); margin: 0 -16px; padding: 22px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; cursor: pointer; transition: border-color 0.2s ease;
}
.row::before {
  content: ""; position: absolute; inset: -1px 0; z-index: -1; border-radius: 16px; background: var(--k);
  clip-path: inset(0 100% 0 0 round 16px); transition: clip-path 0.4s var(--ease-out);
}
.row-kind { grid-column: 1; color: var(--muted); }
.row-when { grid-column: 2; grid-row: 1; justify-self: end; font-size: 14px; color: var(--muted); white-space: nowrap; }
.row-main { grid-column: 1 / -1; display: grid; gap: 2px; }
.row-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; font-weight: 550; letter-spacing: -0.025em; }
.row-role { font-size: 15.5px; color: var(--muted); }
.row-metric { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.row-metric .num { font-size: 28px; font-weight: 450; letter-spacing: -0.03em; line-height: 1; }
.row-mlabel { font-size: 15px; color: var(--muted); }
.row-go { display: none; }
@media (min-width: 900px) {
  .row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 260px) 150px 28px; align-items: center; width: calc(100% + 40px); padding: 26px 20px; margin: 0 -20px; }
  .row-kind, .row-when, .row-main, .row-metric { grid-column: auto; grid-row: auto; }
  .row-when { order: 4; justify-self: start; }
  .row-metric { order: 3; display: grid; gap: 4px; margin: 0; }
  .row-go { order: 5; display: block; font-size: 22px; justify-self: end; transition: transform 0.3s var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) {
  .row:hover::before { clip-path: inset(0 0 0 0 round 16px); }
  .row:hover { border-bottom-color: transparent; color: var(--on-block); }
  .row:hover .row-kind, .row:hover .row-when, .row:hover .row-role, .row:hover .row-mlabel { color: var(--on-block-muted); }
  .row:hover .row-go { transform: translateY(3px); }
}
.row:focus-visible { outline-offset: -2px; border-radius: 16px; }

/* ── Interactive timeline ───────────────────────────────────────────────── */
.tl-controls { display: flex; align-items: center; gap: 8px; }
.tl-pos { font-size: 14px; font-weight: 550; color: var(--muted); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }

.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; }
.legend-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--muted); cursor: default; transition: color 0.15s ease; }
.legend-chip:hover { color: var(--ink); }

.tl-scroll { overflow-x: auto; overflow-y: hidden; border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; }
.tl-chart { --tl-gutter: 200px; position: relative; min-width: 760px; margin: 0 24px; padding: 6px 0 40px; }
/* Rows are threads: name and span on the left, bars on the track. */
.tl-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--tl-gutter) minmax(0, 1fr); }
.tl-row + .tl-row { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.tl-thread { display: grid; align-content: start; gap: 2px; padding: 14px 16px 12px 0; }
.tl-thread-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.tl-thread-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; }
/* The thread's whole span, behind its bars. */
.tl-band { position: absolute; top: 6px; bottom: 6px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
@media (max-width: 719px) {
  .tl-chart { --tl-gutter: 0px; min-width: 640px; }
  .tl-row { grid-template-columns: minmax(0, 1fr); }
  .tl-thread { position: sticky; left: 16px; width: max-content; max-width: calc(100vw - 96px); padding: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
}
/* Year grid and markers sit under the rows, lined up with the tracks. */
.tl-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tl-gridline { position: absolute; top: 0; bottom: 32px; border-left: 1px solid var(--line); }
/* Where older years are folded in: a break mark on the axis. */
/* `//` breaks: the folded stretch before the projects, and squeezed empty months. */
.tl-fold, .tl-gap { position: absolute; bottom: 24px; width: 12px; height: 14px; margin-left: -6px; background: var(--surface); }
.tl-fold::before, .tl-fold::after, .tl-gap::before, .tl-gap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); transform: skewX(-20deg); }
.tl-fold::before, .tl-gap::before { left: 3px; }
.tl-fold::after, .tl-gap::after { left: 8px; }
.tl-tick { position: absolute; bottom: 28px; height: 5px; border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.tl-year { position: absolute; bottom: 6px; font-size: 13px; font-weight: 550; color: var(--muted); padding-left: 6px; font-variant-numeric: tabular-nums; }
.tl-now { position: absolute; top: 8px; bottom: 32px; border-left: 1.5px dashed var(--ink); z-index: 0; pointer-events: none; opacity: 0.55; }
.tl-now span { position: absolute; bottom: -26px; left: -19px; font-size: 12px; font-weight: 600; color: var(--bg); background: var(--ink); padding: 1px 8px 2px; border-radius: 999px; }

.tl-bar {
  position: absolute; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; z-index: 1;
  transition: opacity 0.2s ease;
}
.tl-label { align-self: flex-start; font-size: 14px; font-weight: 550; white-space: nowrap; color: var(--ink); padding: 0 6px 0 0; transition: opacity 0.4s ease 0.3s; }
.tl-fill {
  display: block; align-self: flex-start; height: 18px; border-radius: 5px; background: var(--k); transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-out), box-shadow 0.15s ease;
}
.tl-fill.ongoing { background: linear-gradient(90deg, var(--k) 72%, color-mix(in srgb, var(--k) 25%, transparent)); }
.tl-len { font-weight: 500; color: var(--muted); }
@media (hover: hover) { .tl-bar:hover .tl-fill { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-block) 45%, transparent); } }
.tl-bar.selected .tl-fill { box-shadow: inset 0 0 0 2px var(--on-block), 0 0 0 2px var(--ink); }
.tl-bar.selected .tl-label { font-weight: 650; }
.tl-bar.flip .tl-label { align-self: flex-end; padding: 0 0 0 6px; }
.tl-bar:focus-visible { outline: none; }
.tl-bar:focus-visible .tl-fill { outline: 2px solid var(--ink); outline-offset: 4px; }
.tl-chart[data-focus] .tl-bar { opacity: 0.25; }
.tl-chart[data-focus="1"] .tl-bar[data-k="1"], .tl-chart[data-focus="2"] .tl-bar[data-k="2"],
.tl-chart[data-focus="3"] .tl-bar[data-k="3"], .tl-chart[data-focus="4"] .tl-bar[data-k="4"],
.tl-chart[data-focus="5"] .tl-bar[data-k="5"] { opacity: 1; }
/* Bars grow from the left the first time the chart is seen. */
.js .tl-chart:not(.in) .tl-fill { transform: scaleX(0); }
.js .tl-chart:not(.in) .tl-label { opacity: 0; }

.tl-detail { display: grid; gap: 24px; margin-top: 16px; padding: 28px 24px; border-radius: var(--radius); background: var(--k); color: var(--on-block); }
@media (min-width: 760px) { .tl-detail { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 32px 36px; } }
.tl-detail .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; font-weight: 550; color: var(--on-block-muted); }
.tl-detail h3 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; margin: 10px 0 0; }
.tl-detail .tl-role { margin: 6px 0 0; font-size: 16px; font-weight: 550; }
.tl-detail .tl-summary { margin: 12px 0 0; max-width: 60ch; }
.tl-side { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (min-width: 760px) { .tl-side { flex-direction: column; align-items: flex-end; text-align: right; } }
.tl-metric { display: grid; gap: 2px; }
.tl-metric .num { font-size: 48px; line-height: 1; font-weight: 400; letter-spacing: -0.04em; }
.tl-metric .label { font-size: 15px; color: var(--on-block-muted); }
.tl-detail .btn.primary { background: var(--on-block); color: #fff; }
.tl-detail.swap .tl-card, .tl-detail.swap .tl-side { animation: swap-in 0.22s var(--ease-out); }
@keyframes swap-in { from { opacity: 0; transform: translateY(4px); } }

/* ── About ──────────────────────────────────────────────────────────────── */
.about-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; } }
.intro { font-size: clamp(20px, 2.1vw, 24px); line-height: 1.45; font-weight: 420; letter-spacing: -0.012em; max-width: 34em; }
.intro p { margin: 0 0 20px; }
.about-main { display: grid; gap: 48px; align-content: start; }
.about-side { display: grid; gap: 36px; align-content: start; }
.about-grid h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--muted); }
.education ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 46em; }
.education li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.edu-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.edu-school { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.edu-when { font-size: 14px; color: var(--muted); white-space: nowrap; }
.edu-detail { font-size: 16px; color: var(--muted); }
.now ul, .beyond ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.now li, .beyond li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.beyond li { display: grid; gap: 2px; }
.b-detail { font-size: 15px; font-weight: 400; color: var(--muted); }
.b-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.b-thumbs a { display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; transition: transform 0.16s var(--ease-out); }
.b-thumbs a:active { transform: scale(0.96); }
.b-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) { .b-thumbs a:hover { transform: translateY(-2px) rotate(-1.5deg); } }
/* Your photo: a print pinned to the desk, same paper logic as the notes. */
.print { margin: 0 0 4px; justify-self: start; width: min(260px, 100%); padding: 10px 10px 12px; border-radius: 4px; background: #fbfbf9; box-shadow: var(--shadow); transform: rotate(-2deg); }
.print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.print figcaption { margin-top: 8px; font-size: 13.5px; font-weight: 500; color: #3d3d39; text-align: center; }

/* ── Links: one inverse block to close the page ─────────────────────────── */
.contact { background: var(--inverse); color: var(--inverse-ink); border-radius: var(--radius); padding: 40px 24px 28px; }
@media (min-width: 720px) { .contact { padding: 56px 56px 40px; } }
.contact h2 { margin-bottom: 28px; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inverse-line); }
.link-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 24px; padding: 20px 0; border-bottom: 1px solid var(--inverse-line); text-decoration: none; }
@media (min-width: 720px) { .link-item { grid-template-columns: 220px minmax(0, 1fr) auto; } }
.li-label { font-size: clamp(26px, 3.4vw, 36px); font-weight: 450; letter-spacing: -0.03em; line-height: 1.15; }
.li-host { grid-row: 2; color: var(--inverse-muted); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) { .li-host { grid-row: auto; } }
.li-go { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--inverse-ink) 12%, transparent); font-size: 20px; transition: transform 0.3s var(--ease-out), background-color 0.2s ease, color 0.2s ease; }
@media (min-width: 720px) { .li-go { grid-row: auto; grid-column: auto; } }
@media (hover: hover) {
  .link-item[href]:hover .li-go { background: var(--k1); color: var(--on-block); transform: rotate(45deg); }
  .link-item[href]:hover .li-label { text-decoration: underline; text-decoration-thickness: 2px; }
}
.posts { margin-top: 36px; }
.posts h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--inverse-muted); }
.elsewhere { list-style: none; padding: 0; margin: 0; }
.elsewhere a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 12px 0; text-decoration: none; }
.elsewhere .e-kind { grid-row: span 2; font-size: 13px; font-weight: 600; color: var(--inverse-muted); }
.e-title { font-weight: 600; }
.e-note { grid-column: 2; font-size: 15px; color: var(--inverse-muted); }

.footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 32px; padding-bottom: 40px; font-size: 15px; color: var(--muted); }
.footer p { margin: 0; }
.footer a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 550; color: var(--ink); }
@media (hover: hover) { .footer a:hover { text-decoration: underline; } }

/* ── Project panel (native <dialog>) ────────────────────────────────────── */
.panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(680px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--bg); color: var(--ink); overflow: hidden;
  display: none; flex-direction: column; box-shadow: -24px 0 64px rgb(21 21 21 / 0.22);
}
@media (min-width: 700px) { .panel { border-radius: 24px 0 0 24px; } }
.panel[open] { display: flex; animation: sheet-in 0.48s var(--ease-drawer); }
.panel::backdrop { background: rgb(21 21 21 / 0.4); animation: fade 0.3s ease; }
.panel.closing { animation: sheet-out 0.22s var(--ease-out) forwards; }
.panel.closing::backdrop { animation: fade 0.22s ease reverse forwards; }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes sheet-out { to { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: var(--k, var(--surface)); color: var(--on-block); }
.panel-bar .icon-btn { background: rgb(255 255 255 / 0.5); color: var(--on-block); }
@media (hover: hover) { .panel-bar .icon-btn:hover { background: rgb(255 255 255 / 0.8); } }
.panel-count { font-size: 14px; font-weight: 550; margin-left: 6px; font-variant-numeric: tabular-nums; }
.panel-bar .close { margin-left: auto; }
.panel-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
/* The scroll area takes focus when the panel opens so arrow keys and Tab start
   inside it; it isn't a control, so it gets no ring (the buttons keep theirs). */
.panel-body:focus { outline: none; }
.panel-head { background: var(--k, var(--surface)); color: var(--on-block); padding: 12px 24px 32px; }
@media (min-width: 700px) { .panel-head { padding: 16px 44px 40px; } }
.panel-head .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 14px; font-weight: 550; color: var(--on-block-muted); }
.panel-head h2 { font-size: clamp(40px, 6vw, 56px); margin-top: 12px; font-weight: 450; }
.panel-role { margin: 10px 0 0; font-size: 17px; font-weight: 550; }
.panel-summary { font-size: 19px; line-height: 1.45; margin: 14px 0 0; }
.panel-metric { display: grid; gap: 4px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(21 21 21 / 0.16); }
.panel-metric .num { font-size: 56px; line-height: 0.95; font-weight: 400; letter-spacing: -0.04em; }
.panel-metric .label { font-size: 16px; color: var(--on-block-muted); }
.panel-content { padding: 8px 24px 64px; }
@media (min-width: 700px) { .panel-content { padding: 12px 44px 72px; } }
.panel-section { margin-top: 32px; }
.panel-section h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; }
.panel-section p { margin: 0 0 14px; max-width: 64ch; }
.panel-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panel-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 10px; border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 550; font-size: 15px; transition: background-color 0.15s ease, transform 0.16s var(--ease-out); }
@media (hover: hover) { .panel-links a[href]:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); } }
.panel-links a:active { transform: scale(0.97); }
/* Project photos: one at a time in a 4:3 frame (swipe, or pick a thumbnail),
   so a panel never grows a tall stack of images. */
.gallery { margin: 28px 0 0; }
.g-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 8px; }
.g-track::-webkit-scrollbar { display: none; }
.g-track:focus-visible { outline-offset: 3px; }
.g-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.g-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 8px; background: var(--surface); }
/* Charts and figures (`crop: false`) show whole, on white like their page. */
.g-slide.whole img { object-fit: contain; object-position: center; background: #fff; }
.g-slide figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.g-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.g-thumbs button {
  width: 56px; height: 42px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--surface); opacity: 0.5; transition: opacity 0.15s ease, transform 0.16s var(--ease-out), box-shadow 0.15s ease;
}
.g-thumbs button.whole { background: #fff; }
.g-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-thumbs button.whole img { object-fit: contain; }
.g-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) { .g-thumbs button:hover { opacity: 1; } }
.g-thumbs button:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .tl-chart:not(.in) .tl-fill { transform: none; }
  .js .tl-chart:not(.in) .tl-label { opacity: 1; }
  .panel[open], .panel::backdrop, .panel.closing, .panel.closing::backdrop, .tl-detail.swap .tl-card, .tl-detail.swap .tl-side { animation: none; }
  .note, .row::before { transition: none; }
  /* Keep fades, drop movement: transforms and clip-path wipes snap instead. */
  *, *::before, *::after { transition-property: color, background-color, border-color, opacity !important; }
}

/* ── Music: a video, then the instrument, awards and listening link ─────── */
.music { display: grid; gap: 32px; }
@media (min-width: 900px) { .music { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.m-video { margin: 0; }
.m-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface); }
.m-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--surface); cursor: pointer; }
.m-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-play-btn {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #151515; font-size: 26px; box-shadow: 0 2px 16px rgb(0 0 0 / 0.35); /* on a photo, white reads in both themes */
  transition: transform 0.2s var(--ease-out);
}
.m-play-btn .i { margin-left: 3px; } /* a triangle looks centered a little right of center */
@media (hover: hover) and (pointer: fine) { .m-play:hover .m-play-btn { transform: scale(1.06); } }
.m-play:active .m-play-btn { transform: scale(0.97); }
.m-len { position: absolute; right: 12px; bottom: 12px; padding: 2px 9px 3px; border-radius: 999px; background: rgb(21 21 21 / 0.78); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.m-watch { color: var(--ink); font-weight: 550; text-underline-offset: 3px; }
.m-side { display: grid; gap: 28px; align-content: start; }
.m-head { display: grid; gap: 2px; }
.m-head h3 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; font-weight: 550; letter-spacing: -0.025em; }
.m-detail { font-size: 15px; color: var(--muted); }
.m-side h4 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--muted); }
/* Song covers: squares like record sleeves, four to a row, each opening its
   track. Like the hero notes, each sits at a slight tilt and lifts out on
   hover (further tilt, deeper shadow). */
.m-tracks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.m-tracks li:nth-child(4n + 1) a { --r: -2deg; --rh: -4deg; }
.m-tracks li:nth-child(4n + 2) a { --r: 1.5deg; --rh: 3.5deg; }
.m-tracks li:nth-child(4n + 3) a { --r: -1deg; --rh: -3deg; }
.m-tracks li:nth-child(4n + 4) a { --r: 2deg; --rh: 4deg; }
.m-tracks a {
  --y: 0px; --s: 1; position: relative; display: block; border-radius: 8px;
  box-shadow: 0 1px 2px rgb(21 21 21 / 0.1), 0 4px 10px -4px rgb(21 21 21 / 0.25);
  transform: translateY(var(--y)) rotate(var(--r, 0deg)) scale(var(--s));
  transition: transform 0.45s var(--ease-out), box-shadow 0.3s ease;
}
.m-tracks img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .m-tracks a:hover { --y: -8px; --s: 1.07; --r: var(--rh); z-index: 1; box-shadow: var(--shadow); }
}
.m-tracks a:focus-visible { --y: -8px; --s: 1.07; z-index: 1; }
.m-tracks a:active { --s: 0.97; transition-duration: 0.16s; }
.m-awards ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.m-awards li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.m-awards .m-award-notes { border: 0; margin-top: 4px; }
.m-awards .m-award-notes li { position: relative; padding: 0 0 0 16px; border: 0; font-size: 15px; font-weight: 400; color: var(--muted); }
.m-awards .m-award-notes li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.m-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 16px 18px; border-radius: 16px; background: var(--surface); text-decoration: none; transition: transform 0.16s var(--ease-out); }
.m-link-label { font-weight: 600; }
.m-link-note { grid-column: 1; font-size: 15px; color: var(--muted); }
.m-link .i { grid-row: 1 / span 2; grid-column: 2; font-size: 20px; transition: transform 0.3s var(--ease-out); }
/* The headline card (40,000+ listens): a metric-sized number, its link, and
   the song covers, on one gray card. */
.m-card { display: grid; gap: 10px; padding: 22px 22px 22px; border-radius: 16px; background: var(--surface); }
.m-stat { display: grid; gap: 4px; }
.m-stat .num { font-size: clamp(52px, 6vw, 76px); line-height: 0.9; font-weight: 380; letter-spacing: -0.045em; }
.m-stat-label { font-size: 17px; font-weight: 500; }
.m-card-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 550; color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.m-card-link .i { font-size: 15px; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .m-card-link:hover { color: var(--ink); } .m-card-link:hover .i { transform: translate(2px, -2px); } }
.m-card .m-tracks { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) { .m-link:hover .i { transform: translate(3px, -3px); } }
.m-link:active { transform: scale(0.98); }

/* Unwritten placeholder text: disappears once you replace every "TODO". */
.todo { outline: 1.5px dashed var(--todo); outline-offset: 2px; background: var(--todo-bg); color: var(--todo) !important; border-radius: 3px; }

/* ── GSAP / Lenis layer (motion.js) ─────────────────────────────────────── */
html.lenis { scroll-behavior: auto; }
.projects.flipping .feature, .projects.flipping .row { transition: none !important; }
/* While a block opens (motion.js), rows sliding under the cursor don't light up. */
.index.moving { pointer-events: none; }
/* A row that opens during a filter change grows into its block instead of spilling. */
.projects.flipping .index > li.open { overflow: hidden; }