/* Generated from design/tokens.json (Quiet Surfaces, version 4). Do not edit by hand. */
:root {
  color-scheme: dark;
  --bg: #081024;
  --ink: #f3f6ff;
  --ink-2: rgba(243,246,255,0.66);
  --veil: rgba(8,16,36,0.46);
  --glass: rgba(255,255,255,0.12);
  --glass-strong: rgba(255,255,255,0.22);
  --stroke: rgba(255,255,255,0.14);
  --sheet: rgba(18,24,44,0.56);
  --sheet-edge: rgba(255,255,255,0.16);
  --track: rgba(255,255,255,0.14);
  --track-strong: rgba(255,255,255,0.42);
  --focus: #9db8ff;
  --on-media: #ffffff;
  --on-media-ink: #0c1a33;
  --scrim: rgba(3,5,16,0.78);
  --backdrop: rgba(3,6,16,0.26);
  --accent: var(--blue);
  --on-accent: #081024;
  --tint: var(--blue-deep);
  --hi: var(--blue-soft);
  --red: oklch(0.66 0.17 27);
  --red-deep: oklch(0.25 0.06 27);
  --red-soft: oklch(0.88 0.055 27);
  --orange: oklch(0.66 0.17 45);
  --orange-deep: oklch(0.25 0.06 45);
  --orange-soft: oklch(0.88 0.055 45);
  --green: oklch(0.66 0.17 148);
  --green-deep: oklch(0.25 0.06 148);
  --green-soft: oklch(0.88 0.055 148);
  --teal: oklch(0.66 0.112 190);
  --teal-deep: oklch(0.25 0.042 190);
  --teal-soft: oklch(0.88 0.055 190);
  --blue: oklch(0.66 0.17 257);
  --blue-deep: oklch(0.25 0.06 257);
  --blue-soft: oklch(0.88 0.055 257);
  --indigo: oklch(0.66 0.17 277);
  --indigo-deep: oklch(0.25 0.06 277);
  --indigo-soft: oklch(0.88 0.055 277);
  --purple: oklch(0.66 0.17 305);
  --purple-deep: oklch(0.25 0.06 305);
  --purple-soft: oklch(0.88 0.055 305);
  --pink: oklch(0.66 0.17 355);
  --pink-deep: oklch(0.25 0.06 355);
  --pink-soft: oklch(0.88 0.055 355);
  --viz-1: #f74962;
  --viz-2: #1d84f5;
  --viz-3: #00aa95;
  --viz-4: #d66919;
  --viz-5: #ab5ade;
  --viz-6: #b19005;
  --viz-7: #635ce5;
  --viz-8: #14a846;
  --viz-ramp-1: #760220;
  --viz-ramp-2: #93152f;
  --viz-ramp-3: #b0253e;
  --viz-ramp-4: #cf354e;
  --viz-ramp-5: #ea4a60;
  --viz-ramp-6: #fd6a78;
  --viz-ramp-7: #fd959b;
  --viz-div-1: #87bafd;
  --viz-div-2: #3b8cee;
  --viz-div-3: #1962b5;
  --viz-div-4: #3a3d45;
  --viz-div-5: #b0253e;
  --viz-div-6: #ea4a60;
  --viz-div-7: #fd959b;
  --viz-good: #30d158;
  --viz-warn: #ffd60a;
  --viz-bad: #ff453a;
  --viz-grid: rgba(255,255,255,0.08);
  --viz-axis: rgba(255,255,255,0.22);
  --viz-edge: rgba(255,255,255,0.55);
  --viz-sheen: rgba(255,255,255,0.42);
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 22px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --shadow-raised: 0 30px 60px -30px rgba(0,0,0,0.55);
  --shadow-sheet: 0 -20px 60px rgba(0,0,0,0.3);
  --shadow-tinted: 0 -24px 70px rgba(0,0,0,0.4);
  --shadow-fab: inset 0 1px 1px rgba(255,255,255,0.6),inset 0 -1px 2px rgba(0,0,0,0.1),0 12px 28px -8px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.1);
  --shadow-control: inset 0 1px 1px rgba(255,255,255,0.5),0 6px 18px rgba(0,0,0,0.22);
  --shadow-glass: inset 0 1px 1px rgba(255,255,255,0.55),inset 0 -1px 2px rgba(0,0,0,0.14),0 8px 22px rgba(0,0,0,0.2);
  --shadow-primary: 0 12px 30px rgba(0,0,0,0.28);
  --shadow-viz: inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -10px 14px rgba(0,0,0,0.2);
  --blur-chip: 14px;
  --blur-control: 18px;
  --blur-soft: 22px;
  --blur-sheet: 36px;
  --blur-ambient: 46px;
  --duration-press: 150ms;
  --duration-base: 250ms;
  --duration-move: 420ms;
  --duration-slow: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow", system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.display-large { font-family: var(--font-display); font-size: 60px; line-height: 0.9; font-weight: 800; letter-spacing: -0.035em; }
.display-page { font-family: var(--font-display); font-size: 46px; line-height: 0.94; font-weight: 800; letter-spacing: -0.035em; }
.display-title { font-family: var(--font-display); font-size: 36px; line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; }
.display-lead { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.text-body { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; font-weight: 400; }
.text-button { font-family: var(--font-ui); font-size: 16px; font-weight: 600; }
.text-intro { font-family: var(--font-ui); font-size: 15px; line-height: 1.45; font-weight: 400; }
.text-small { font-family: var(--font-ui); font-size: 14px; line-height: 1.45; font-weight: 400; }
.text-label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.text-fine { font-family: var(--font-ui); font-size: 13px; line-height: 1.45; font-weight: 400; }

/* Quiet Surfaces · component styles. Every colour, font, space, radius, shadow, blur and duration comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The display face is condensed with its width axis, which the generated type classes cannot carry. */
.display-large, .display-page, .display-title { margin: 0; text-wrap: balance; font-variation-settings: "wdth" 80, "opsz" 96; }
.display-lead { margin: 0; font-variation-settings: "wdth" 88, "opsz" 32; }

/* ---------- Surfaces ---------- */
.qs-surface { position: relative; padding: var(--qs-pad, var(--space-7)); color: var(--ink); border-radius: var(--radius-xl); }
.qs-surface--ground { background: var(--bg); }
.qs-surface--panel { --qs-pad: 16px 18px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--stroke); }
.qs-surface--glass { background: var(--sheet); backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); -webkit-backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); box-shadow: var(--shadow-sheet), inset 0 1px 0 var(--sheet-edge), inset 0 0 0 1px color-mix(in srgb, var(--sheet-edge) 30%, transparent); }
.qs-surface--tinted { color: var(--on-media); color-scheme: dark; background: var(--tint); box-shadow: var(--shadow-tinted); }
.qs-surface--tinted .qs-surface--panel { border: 0; border-radius: var(--radius-lg); color: var(--on-media); background: rgba(255, 255, 255, .075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.qs-surface--tinted .qs-link { color: var(--hi); }

/* Panels and notes: flat groups inside any surface */
.qs-note { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.45; color: var(--ink-2); background: var(--glass); border: 1px solid var(--stroke); }
.qs-link { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; }

/* ---------- Sheet: a glass surface that rises over the page ---------- */
.qs-sheet { padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: min(92dvh, 900px); overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: var(--ink); background: var(--sheet); backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); -webkit-backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); box-shadow: var(--shadow-sheet), inset 0 1px 0 var(--sheet-edge), inset 0 0 0 1px color-mix(in srgb, var(--sheet-edge) 30%, transparent); }
.qs-sheet::backdrop { background: var(--backdrop); }
@media (min-width: 700px) { .qs-sheet { margin: auto; border-radius: var(--radius-xl); } }
@media (prefers-reduced-motion: no-preference) {
  .qs-sheet[open] { animation: qs-rise var(--duration-move, 420ms) var(--ease-standard, cubic-bezier(.2, .8, .2, 1)); }
  @keyframes qs-rise { from { transform: translateY(60px); opacity: 0; } }
}
.qs-sheet__scroll { max-height: min(92dvh, 900px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); scrollbar-width: thin; scrollbar-color: var(--track-strong) transparent; }
.qs-sheet__close { position: absolute; top: 14px; right: 14px; z-index: 7; }
.qs-sheet__head { position: relative; padding: 26px var(--space-7) 6px; }
.qs-sheet__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96; font-size: 36px; line-height: .95; letter-spacing: -.03em; }
.qs-sheet__intro { margin: 0; max-width: 40ch; padding-right: 40px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.qs-sheet__body { display: grid; gap: var(--space-4); padding: 14px var(--space-7) 24px; }

/* ---------- Toast ---------- */
.qs-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); z-index: 20; width: max-content; max-width: min(88vw, 420px); padding: 12px 18px; border-radius: var(--radius-md); text-align: center; font-size: 14px; line-height: 1.35; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--stroke); backdrop-filter: blur(var(--blur-control)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.6); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--duration-base, 250ms) ease, transform var(--duration-base, 250ms) ease; }
.qs-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Media: one image, video or illustration, cropped to fill its frame ---------- */
.qs-media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--qs-ratio, 4 / 3); border-radius: var(--qs-radius, var(--radius-xl)); background: var(--track); }
.qs-media--square { --qs-ratio: 1 / 1; }
.qs-media--wide { --qs-ratio: 16 / 9; }
.qs-media--portrait { --qs-ratio: 3 / 4; }
.qs-media--raised { box-shadow: var(--shadow-raised); }
.qs-media > img, .qs-media > video, .qs-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--media-focus, 50% 50%); }
.qs-media__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--scrim) 0%, rgba(3, 5, 16, .42) 32%, rgba(3, 5, 16, 0) 58%); }
.qs-media__caption { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1; color: var(--on-media); }

/* Treatment: soft, blurred into a quiet ground (scaled past its edges so the blur never shows a rim) */
.qs-media--soft > img, .qs-media--soft > video, .qs-media--soft > svg { filter: blur(var(--blur-soft)) saturate(1.3); transform: scale(1.12); }

/* Treatment: dissolve, fading into the surface below over its last 96px so there is no edge */
.qs-media--dissolve { --qs-dissolve: linear-gradient(to bottom, #000 calc(100% - 96px), rgba(0, 0, 0, .957) calc(100% - 84px), rgba(0, 0, 0, .844) calc(100% - 72px), rgba(0, 0, 0, .684) calc(100% - 60px), rgba(0, 0, 0, .5) calc(100% - 48px), rgba(0, 0, 0, .316) calc(100% - 36px), rgba(0, 0, 0, .156) calc(100% - 24px), rgba(0, 0, 0, .043) calc(100% - 12px), transparent calc(100% - 2px)); -webkit-mask-image: var(--qs-dissolve); mask-image: var(--qs-dissolve); }

/* Treatment: ambient, enlarged and blurred behind the whole page */
.qs-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.qs-ambient__layer { position: absolute; inset: -18%; opacity: 0; transition: opacity var(--duration-slow, 900ms) ease; filter: blur(var(--blur-ambient)) saturate(1.35); }
.qs-ambient__layer.is-on { opacity: 1; }
.qs-ambient__layer > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.qs-ambient::after { content: ""; position: absolute; inset: 0; background: var(--veil); }

/* ---------- Chip: a small glass label over media ---------- */
.qs-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 13px; border-radius: var(--radius-pill); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--on-media); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(var(--blur-chip)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-chip)) saturate(1.4); }
.qs-chip--solid { color: var(--on-media-ink); background: var(--on-media); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.qs-chip svg { width: 16px; height: 16px; flex: none; }

/* ---------- Icon button: a round control with one icon ---------- */
.qs-iconbtn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(var(--blur-chip)); -webkit-backdrop-filter: blur(var(--blur-chip)); transition: transform var(--duration-press, 150ms) ease, background var(--duration-base, 250ms) ease, color var(--duration-base, 250ms) ease; }
.qs-iconbtn:active { transform: scale(.92); }
.qs-iconbtn:disabled { opacity: .3; cursor: default; }
.qs-iconbtn svg { width: 22px; height: 22px; }
.qs-iconbtn--sm { width: 36px; height: 36px; }
.qs-iconbtn--sm svg { width: 16px; height: 16px; }
.qs-iconbtn--on-media { color: var(--on-media); border-color: rgba(255, 255, 255, .3); background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); backdrop-filter: blur(var(--blur-chip)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur-chip)) saturate(1.5); box-shadow: var(--shadow-control); }
.qs-iconbtn--on-media[aria-pressed="true"] { color: var(--on-media-ink); background: var(--on-media); border-color: transparent; }
.qs-iconbtn[aria-pressed="true"] svg { fill: currentColor; }
.qs-iconbtn--on-media:focus-visible { outline: 3px solid var(--on-media); outline-offset: 2px; }

/* ---------- Floating action button ---------- */
.qs-fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(19px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--accent); border: 1px solid var(--sheet-edge); background: linear-gradient(140deg, color-mix(in srgb, var(--glass-strong) 70%, transparent), color-mix(in srgb, var(--glass) 55%, transparent)), color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(var(--blur-control)) saturate(1.8); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8); box-shadow: var(--shadow-fab); transition: transform var(--duration-press, 150ms) ease; }
.qs-fab:active { transform: scale(.94); }
.qs-fab svg { width: 25px; height: 25px; }
.qs-fab__count { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); }
.qs-fab__count[hidden] { display: none; }

/* ---------- Button ---------- */
.qs-btn { height: 54px; padding: 0 22px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); transition: transform var(--duration-press, 150ms) ease, background var(--duration-base, 250ms) ease; }
.qs-btn:active { transform: scale(.97); }
.qs-btn svg { width: 16px; height: 16px; flex: none; }
.qs-btn--primary { color: var(--bg); background: var(--ink); border-color: transparent; }
.qs-btn--block { display: flex; width: 100%; }

/* ---------- Field: one text input and its button ---------- */
.qs-field { display: flex; gap: var(--space-3); }
.qs-input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 16px; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); }
.qs-input::placeholder { color: var(--ink-2); }
.qs-field .qs-btn { flex: none; }

/* ---------- Liquid glass: controls floating on a tinted surface ---------- */
.qs-surface--tinted .qs-iconbtn, .qs-surface--tinted .qs-btn[aria-pressed="true"] { color: var(--on-media); border: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .13)); backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); box-shadow: var(--shadow-glass); }
.qs-surface--tinted .qs-btn--primary { color: var(--tint); background: var(--on-media); box-shadow: var(--shadow-primary); }
.qs-surface--tinted .qs-btn--primary[aria-pressed="true"] { color: var(--on-media); }

/* ---------- Viewer: media opened into a tinted surface (the far end of a shared-element move) ---------- */
.qs-viewer { position: fixed; inset: 0; z-index: 10; display: grid; align-content: center; justify-items: center; gap: var(--space-5); padding: var(--space-7); color: var(--on-media); color-scheme: dark; background: var(--tint); }
.qs-viewer[hidden] { display: none; }
.qs-viewer__stage { width: min(100%, 440px); }
.qs-viewer__caption { width: min(100%, 440px); }
.qs-viewer__close { position: absolute; top: 14px; right: 14px; }

/* ---------- Continuity: how a shared element travels ---------- */
::view-transition-group(qs-shared) { animation-duration: var(--duration-move, 420ms); animation-timing-function: var(--ease-standard, cubic-bezier(.2, .8, .2, 1)); }
::view-transition-old(qs-shared), ::view-transition-new(qs-shared) { width: 100%; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duration-base, 250ms); }

/* ---------- Data and diagrams ---------- */
/* A mark takes its colour from --viz-c. Set it per series: style="--viz-c: var(--viz-2)". */
.qs-viz { --viz-c: var(--viz-1); display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui); font-size: 12px; }
.qs-viz text { fill: var(--ink-2); }
.qs-viz .qs-viz__label { fill: var(--ink); font-size: 13px; }
.qs-viz__grid { fill: none; stroke: var(--viz-grid); stroke-width: 1; }
.qs-viz__axis { fill: none; stroke: var(--viz-axis); stroke-width: 1; }
.qs-viz__line { fill: none; stroke: var(--viz-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--viz-c) 70%, transparent)); }
.qs-viz__area { fill: var(--viz-c); stroke: none; }
.qs-viz__dot { fill: var(--viz-c); stroke: var(--bg); stroke-width: 2; filter: drop-shadow(0 0 6px var(--viz-c)); }
.qs-viz__bar { fill: var(--viz-c); }
.qs-viz__node { fill: color-mix(in srgb, var(--viz-c) 18%, transparent); stroke: color-mix(in srgb, var(--viz-c) 70%, transparent); stroke-width: 1; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--viz-c) 36%, transparent)); }
.qs-viz__node--plain { fill: var(--glass); stroke: var(--stroke); filter: none; }
.qs-viz__edge { fill: none; stroke: var(--viz-edge); stroke-width: 1.5; }
.qs-viz__arrow { fill: var(--viz-edge); }
/* The sheen is a second copy of a bar or node, filled with one of the shared gradients. */
.qs-viz__sheen { pointer-events: none; }
.qs-viz--flat .qs-viz__line, .qs-viz--flat .qs-viz__dot, .qs-viz--flat .qs-viz__node { filter: none; }
.qs-viz--flat .qs-viz__sheen, .qs-viz--flat .qs-viz__area { display: none; }
/* Marks drawn in HTML: a swatch, a bar, a legend key. */
.qs-viz-mark { --viz-c: var(--viz-1); display: block; border-radius: var(--radius-sm); background: linear-gradient(140deg, var(--viz-sheen), transparent 48%), var(--viz-c); box-shadow: var(--shadow-viz), 0 8px 20px -8px var(--viz-c); }
.qs-viz-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.qs-viz-key { --viz-c: var(--viz-1); display: inline-flex; align-items: center; gap: var(--space-1); }
.qs-viz-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--viz-c); box-shadow: 0 0 8px var(--viz-c); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; }
}

/* Site styles, loaded after Quiet Surfaces (tokens.css, then bundle.css). */

/* Pages hand over to each other with a view transition. continuity.js names the one element that travels. */
@view-transition { navigation: auto; }

/* ---------- Departures from Quiet Surfaces, for a quieter, more neutral feel ---------- */

/* Neutrals: muted greys in place of the system's navy-tinted ground and ink. The site is dark only. */
:root {
  --bg: #161617;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --veil: rgba(22, 22, 23, 0.5);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --stroke: rgba(255, 255, 255, 0.1);
  --sheet: rgba(44, 44, 46, 0.56);
  --sheet-edge: rgba(255, 255, 255, 0.16);
  --track: rgba(255, 255, 255, 0.1);
  --track-strong: rgba(255, 255, 255, 0.4);
  --on-media-ink: #1d1d1f;
  --h: 257;
}

/* Accent: a neon, reddish pink for links, in place of the system's blue. It is the one vivid colour on the site, so
   the keyboard focus ring takes it too. The value is more vivid than an ordinary screen can show; a wide-gamut
   screen, such as a phone's or a recent Mac's, shows it in full. */
:root { --accent: oklch(0.69 0.22 17); --focus: var(--accent); }

/* Type: the system face for titles as well, at a gentler weight, in place of the condensed display face. */
.display-large, .display-page, .display-title, .display-lead { margin: 0; font-family: var(--font-ui); font-variation-settings: normal; text-wrap: balance; }
.display-large { font-size: clamp(34px, 9vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.display-page { font-size: clamp(28px, 7vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.display-title { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; }
.display-lead { font-size: 19px; line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; }
.text-body { font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; }

/* ---------- Page ---------- */
.site { position: relative; min-height: 100vh; }
.site-page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 72px; padding: 20px var(--space-6) 48px; }
.site-main { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 72px; }
.site-section { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: var(--space-6); }
.site-section--wide { max-width: 1040px; }
.site-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); }
.site-heading { margin: 0; font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.site-more { align-self: center; }
.site-empty { margin: 0; color: var(--ink-2); }
.site-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.site-link:hover { text-decoration-color: currentColor; }
a.qs-btn, a.qs-iconbtn { text-decoration: none; }
a.qs-link { font-weight: 600; }

/* The page's media as an ambient wash behind the top of the page, fading into the ground. */
.site-wash { position: absolute; inset: 0 0 auto 0; height: 720px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
/* A slight tint: the image keeps its own saturation and sits under a heavier veil than the system's ambient treatment. */
.site-wash .qs-ambient__layer { filter: blur(var(--blur-ambient)) saturate(1.1); }
/* When the build has already blurred the image (.is-blurred), the browser does no blurring of its own. */
.site-wash .qs-ambient__layer.is-blurred { filter: none; }
.site-wash::after { background: color-mix(in srgb, var(--bg) 66%, transparent); }

/* Images arrive inside <picture>, which offers smaller copies. The media frame styles the image inside it all the same. */
.qs-media > picture { display: contents; }
.qs-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--media-focus, 50% 50%); }

/* ---------- Shapes and surfaces ---------- */

/* Squircle corners where the browser draws them, round corners elsewhere. */
.site-squircle { border-radius: var(--radius-xl); }
@supports (corner-shape: squircle) {
  .site-squircle { corner-shape: squircle; border-radius: 46px; }
}

/* Liquid glass: the floating button's glass, for anything that floats over the wash or the page. */
.site-liquid { color: var(--ink); border: 1px solid var(--sheet-edge); background: linear-gradient(140deg, color-mix(in srgb, var(--glass-strong) 70%, transparent), color-mix(in srgb, var(--glass) 55%, transparent)), color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(var(--blur-control)) saturate(1.8); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8); box-shadow: var(--shadow-fab); }

/* A tinted surface that sits in the page is lifted from below, not from above like a rising sheet. */
.site-tinted { box-shadow: var(--shadow-raised); }

/* Line icons: 24px grid, 1.9px strokes, round caps and joins, in the text colour */
.site-icon { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-icon--chevron { stroke-width: 2.4; }

/* Stand-in artwork: muted shapes in one hue, for anything without a cover image. */
.art-base { fill: oklch(0.5 0.045 var(--h)); }
.art-light { fill: oklch(0.78 0.035 var(--h)); }
.art-mid { fill: oklch(0.62 0.05 var(--h)); }
.art-dark { fill: oklch(0.3 0.035 var(--h)); }

/* ---------- Navigation: a floating liquid-glass pill that stays still between pages ---------- */
.site-nav { position: sticky; top: 20px; z-index: 5; display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: var(--radius-pill); view-transition-name: site-nav; }
.site-nav a { height: 44px; padding: 0 18px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--ink); transition: background var(--duration-base) ease; }
.site-nav a[aria-current="page"] { background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--stroke); }

/* ---------- Profile: a liquid-glass card with the photo overlapping its top edge, text centred beneath, links bottom right ---------- */
.site-profile-wrap { width: 100%; max-width: 520px; margin-top: 56px; }
.site-profile { position: relative; padding: 0 28px 20px; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.site-profile p { margin: 0; text-wrap: balance; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.site-profile__id { display: flex; flex-direction: column; gap: 4px; }
.site-profile__name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; }
.site-roles span + span::before { content: " · "; }
.site-profile__sentence { align-self: stretch; }
.site-profile__foot { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; }
/* The photo sits above the card's edge and its edge light, so neither shows through it. */
/* The photo stands mostly above the card: 11/14 of it, whatever its size (88px of the 112px here). */
.site-avatar { --avatar: 112px; position: relative; z-index: 1; width: var(--avatar); height: var(--avatar); margin-top: calc(var(--avatar) * -11 / 14); flex: none; overflow: hidden; border-radius: 50%; background: linear-gradient(180deg, #a5abb8, #858994); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 12px 24px -6px rgba(0, 0, 0, 0.42), 0 30px 52px -18px rgba(0, 0, 0, 0.5); }
.site-avatar > picture { display: contents; }
.site-avatar img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; object-fit: cover; }
.site-links { display: flex; gap: var(--space-2); margin-left: auto; }
.site-iconlink { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); transition: transform var(--duration-press) ease; }
.site-iconlink:active { transform: scale(.92); }
.site-iconlink svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Tiles that open a page ---------- */
/* A tile is a small tinted surface. Its cover sits at the top and dissolves into a ground of the cover's own colour
   (--tint, which the build samples), and the title sits on that ground. Tiles in a row are as tall as the tallest. */
.site-tile { display: flex; color: inherit; text-decoration: none; border-radius: var(--radius-xl); -webkit-tap-highlight-color: transparent; }
.site-tile__card { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; isolation: isolate; }

/* Behind everything, the cover again, already blurred by the build, under a veil of the tint that thickens downwards.
   It keeps the ground from being flat: the cover's colours carry on, faintly, under the words. */
.site-tile__wash { position: absolute; inset: 0; z-index: -1; }
.site-tile__wash img { width: 100%; height: 100%; display: block; object-fit: cover; }
.site-tile__wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--tint) 40%, transparent) 0%, color-mix(in srgb, var(--tint) 78%, transparent) 52%, color-mix(in srgb, var(--tint) 92%, transparent) 100%); }

/* The cover, whole, fading out over its lower half and gone just above its foot, where the title starts. The fade
   eases at both ends so that no edge shows. */
.site-tile__media { flex: none; --qs-radius: 0; background: none; }
.site-tile__media.qs-media--dissolve { --qs-dissolve: linear-gradient(to bottom, #000 54%, rgba(0, 0, 0, .957) 58.75%, rgba(0, 0, 0, .844) 63.5%, rgba(0, 0, 0, .684) 68.25%, rgba(0, 0, 0, .5) 73%, rgba(0, 0, 0, .316) 77.75%, rgba(0, 0, 0, .156) 82.5%, rgba(0, 0, 0, .043) 87.25%, transparent 92%); }
/* A light shade at the very top, for the chip. */
.site-tile .qs-media__scrim { background: linear-gradient(to bottom, rgba(3, 5, 16, .26), rgba(3, 5, 16, 0) 26%); }
.site-tile .qs-chip { position: absolute; top: var(--space-5); left: var(--space-5); z-index: 1; }

/* The words start where the cover has gone. */
.site-tile__text { position: relative; margin-top: -20px; padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: 6px; }
.site-tile h3, .site-tile p { margin: 0; }
.site-tile h3 { font-size: 19px; text-shadow: 0 1px 12px color-mix(in srgb, var(--tint) 70%, transparent); }
.site-tile p { color: rgba(255, 255, 255, 0.74); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* Liquid glass over media: a sheen across the fill, a bright top rim, a soft lower shade and lift, over a blurred, saturated backdrop. */
.site-tile .qs-chip, .site-cover .qs-chip, .site-cover .qs-iconbtn--on-media { border: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .13)); backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); box-shadow: var(--shadow-glass); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
/* Over a light cover the glass dims what is behind it, so a white label still reads. The build marks light covers. */
[data-tone="light"] .qs-chip, [data-tone="light"] .qs-iconbtn--on-media { background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .13)), rgba(3, 5, 16, .3); backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(.5); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(.5); }

/* ---------- Feed: one grouped list, a row per entry, with a thumbnail of the page it points to ---------- */
.site-list { padding: 0; overflow: hidden; border-radius: var(--radius-lg); }
.site-row { display: flex; align-items: center; gap: var(--space-4); padding: 14px 18px; }
.site-row + .site-row { border-top: 1px solid var(--stroke); }
.site-row p { margin: 0; }
.site-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.site-thumb { width: 48px; flex: none; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.site-thumb--icon { display: grid; place-items: center; color: var(--ink-2); background: var(--track); }
.site-thumb--icon svg { width: 22px; height: 22px; }
.site-meta { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.site-foot { width: 100%; max-width: 1040px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--stroke); font-size: 13px; color: var(--ink-2); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* ---------- Project page: one tinted surface, coloured from the cover ---------- */
.site-project { width: 100%; max-width: 760px; padding: 0; overflow: hidden; }
.site-cover { position: relative; }
.site-cover .qs-media { border-radius: 0; }
.site-cover__back { position: absolute; top: 16px; left: 16px; z-index: 2; }
.site-cover__chips { position: absolute; top: 22px; right: 16px; z-index: 2; display: flex; gap: var(--space-2); }
.site-project__body { position: relative; margin-top: -48px; padding: 0 40px 40px; display: flex; flex-direction: column; gap: 28px; }
.site-project__head { display: flex; flex-direction: column; gap: 10px; }
.site-project__head .display-lead { max-width: 36ch; color: rgba(255, 255, 255, 0.8); }
.site-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-3); }
.site-facts dt { color: rgba(255, 255, 255, 0.66); }
.site-facts dd { margin: 4px 0 0; }
.site-facts a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The hero of a page is where a tile's media arrives. */
.site-hero-media { view-transition-name: qs-shared; }
/* A tile's cover and a project's hero have square corners: the card around them rounds them, and the card does not
   travel. So what travels is given the card's top corners for the journey. */
::view-transition-group(qs-shared) { overflow: clip; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
@supports (corner-shape: squircle) {
  ::view-transition-group(qs-shared) { corner-shape: squircle; border-radius: 46px 46px 0 0; }
}
/* A feed thumbnail is too small for those corners. continuity.js says when one is leaving or being returned to, and
   the corners grow from the thumbnail's own, or shrink back to them, alongside the browser's own move (named first). */
@media (prefers-reduced-motion: no-preference) {
  :root[data-shared-thumb="from"]::view-transition-group(qs-shared) { animation-name: -ua-view-transition-group-anim-qs-shared, site-from-thumb; }
  :root[data-shared-thumb="to"]::view-transition-group(qs-shared) { animation-name: -ua-view-transition-group-anim-qs-shared, site-to-thumb; }
}
@keyframes site-from-thumb { from { corner-shape: round; border-radius: var(--radius-sm); } }
@keyframes site-to-thumb { to { corner-shape: round; border-radius: var(--radius-sm); } }

/* ---------- Blog post ---------- */
.site-post { width: 100%; max-width: 880px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.site-post__head { max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.site-post__head .display-lead { max-width: 36ch; color: var(--ink-2); }
.site-post > .qs-media { width: 100%; }

/* Long-form text */
.site-prose { width: 100%; max-width: 60ch; font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; }
.site-prose > * { margin: 0 0 var(--space-5); }
.site-prose > *:last-child { margin-bottom: 0; }
.site-prose h2, .site-prose h3 { margin: 36px 0 var(--space-3); font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; }
.site-prose h3 { font-size: 19px; }
.site-prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.site-prose a:hover { text-decoration-color: currentColor; }
.site-prose ul, .site-prose ol { padding-left: 1.2em; }
.site-prose li + li { margin-top: var(--space-1); }
.site-prose img { display: block; height: auto; border-radius: var(--radius-md); }
.site-prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 0; }
.site-prose :not(pre) > code { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--track); }
.site-prose pre { padding: 16px 18px; overflow-x: auto; line-height: 1.55; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--stroke); }
.site-prose blockquote { padding: 14px 16px; border-radius: var(--radius-md); color: var(--ink-2); background: var(--glass); border: 1px solid var(--stroke); }
.site-prose blockquote > *:last-child { margin-bottom: 0; }
/* On a project page's tinted ground, links take the accent rather than the highlight sampled from the cover. */
.qs-surface--tinted .site-prose a, .qs-surface--tinted .qs-link { color: var(--accent); text-decoration-color: currentColor; }

/* ---------- Not found ---------- */
.site-notfound { align-items: center; padding-top: 56px; text-align: center; }
.site-notfound p { margin: 0; color: var(--ink-2); }

/* ---------- Under the pointer or the thumb: cards lift, lean and catch the light ---------- */
/* hover.js marks the card under the pointer, or under a thumb for as long as it is held, with .is-lit, and reports where on the card that is. */
/* --px and --py run from -1 to 1 across the card; --mx and --my are the same point as percentages. */
.site-tile, .site-profile-wrap { --px: 0; --py: 0; --mx: 50%; --my: 0%; }

/* Settling back is slow; following the pointer is quick. */
.site-tile__card, .site-tile .qs-media img, .site-tile .qs-media > svg, .site-tile__text, .site-tile .qs-chip, .site-profile, .site-avatar { transition: transform var(--duration-move) var(--ease-standard), box-shadow var(--duration-move) var(--ease-standard); }
.site-tile.is-lit .site-tile__card, .site-tile.is-lit .qs-media img, .site-tile.is-lit .qs-media > svg, .site-tile.is-lit .site-tile__text, .site-tile.is-lit .qs-chip { transition-duration: 180ms; }

/* A tile rises and leans. Inside it, the picture drifts against the pointer and the words drift with it, which gives the tile depth. */
.site-tile.is-lit .site-tile__card { transform: perspective(900px) rotateX(calc(var(--py) * -3.5deg)) rotateY(calc(var(--px) * 4.5deg)) translateY(-5px) scale(1.012); box-shadow: 0 46px 70px -32px rgba(0, 0, 0, .62); }
.site-tile.is-lit .qs-media img, .site-tile.is-lit .qs-media > svg { transform: scale(1.05) translate(calc(var(--px) * -5px), calc(var(--py) * -5px)); }
.site-tile.is-lit .site-tile__text, .site-tile.is-lit .qs-chip { transform: translate(calc(var(--px) * 3px), calc(var(--py) * 3px)); }

/* The profile card barely leans, being glass, and follows the pointer more slowly. Its photo floats a touch further than the card. */
.site-profile-wrap.is-lit .site-profile, .site-profile-wrap.is-lit .site-avatar { transition-duration: 320ms; }
.site-profile-wrap.is-lit .site-profile { transform: perspective(1100px) rotateX(calc(var(--py) * -0.9deg)) rotateY(calc(var(--px) * 1.1deg)) translateY(-2px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 2px rgba(0, 0, 0, .1), 0 22px 38px -14px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .11); }
.site-profile-wrap.is-lit .site-avatar { transform: translate(calc(var(--px) * 2px), calc(var(--py) * 1.5px - 1px)) scale(1.015); }

/* Light: a soft glow under the pointer, and a brighter line along the nearest edge. */
.site-tile__card::after, .site-tile__card::before, .site-profile::before, .site-profile::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; corner-shape: inherit; opacity: 0; transition: opacity var(--duration-base) ease; }
.site-tile__card::after { inset: 0; z-index: 2; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%); }
.site-profile::before { inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--glass-strong) 55%, transparent), transparent 62%); }
.site-tile__card::before, .site-profile::after { padding: 1px; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.site-tile__card::before { inset: 0; z-index: 3; }
.site-profile::after { inset: -1px; }
.site-tile.is-lit .site-tile__card::after, .site-tile.is-lit .site-tile__card::before, .site-profile-wrap.is-lit .site-profile::before, .site-profile-wrap.is-lit .site-profile::after { opacity: 1; }

/* Controls answer more quietly, and only to a mouse or trackpad. */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover:not([aria-current]) { background: var(--glass); }
  .site-iconlink { transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base) ease; }
  .site-iconlink:hover { transform: scale(1.08); background: var(--glass-strong); }
}

/* With reduced motion the light still responds, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .site-tile.is-lit .site-tile__card, .site-tile.is-lit .qs-media img, .site-tile.is-lit .qs-media > svg, .site-tile.is-lit .site-tile__text, .site-tile.is-lit .qs-chip, .site-profile-wrap.is-lit .site-profile, .site-profile-wrap.is-lit .site-avatar, .site-iconlink:hover { transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 699px) {
  .site-page { gap: 48px; padding: 64px var(--space-6) calc(120px + env(safe-area-inset-bottom, 0px)); }
  .site-main { gap: 48px; }
  .site-wash { height: 600px; }
  .site-heading { font-size: 24px; }
  .site-section { gap: var(--space-5); }

  /* The navigation moves to the bottom, within reach of a thumb. */
  .site-nav { position: fixed; top: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); }

  /* The profile card, a size down: a smaller photo, type and buttons. */
  .site-profile-wrap { margin-top: 30px; }
  .site-profile { padding: 0 18px 14px; gap: var(--space-3); }
  .site-avatar { --avatar: 80px; }
  .site-profile__name { font-size: 18px; }
  .site-roles { font-size: 13px; }
  .site-roles span { display: block; }
  .site-roles span + span::before { content: none; }
  .site-profile__sentence { font-size: 15px; }
  .site-profile__foot .text-small { font-size: 13px; }
  /* Smaller to look at, but still 44px to touch. */
  .site-iconlink { width: 36px; height: 36px; }
  .site-iconlink::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
  .site-iconlink svg { width: 16px; height: 16px; }

  /* Tiles: a sideways rail on the home page, one column elsewhere. The rail's padding leaves room for the tiles' shadows. */
  .site-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .site-grid--rail { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 20px; margin: 0 -20px -64px; padding: 0 20px 64px; }
  .site-grid--rail::-webkit-scrollbar { display: none; }
  .site-grid--rail > .site-tile { flex: none; width: 280px; scroll-snap-align: start; }
  .site-more { align-self: stretch; }

  .site-project__body { padding: 0 var(--space-7) 28px; }
}