@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/assets/fonts/golos-text-variable.woff2") format("woff2");
}

:root {
    --sans: "Golos Text", ui-sans-serif, system-ui, sans-serif;
    --bg: #ffffff;
    --ink: #1f1c18;
    --text: #2b2723;
    --body: #46423c;
    --dim: #57534e;
    --meta: #6b665f;
    --line: #d6d1c8;
    --mid: #a39d93;
    --leader: #e7e3db;
    --card: #f4f2ed;
    --accent: #1f3ff5;
    --small: 12.5px;
    color-scheme: light;
}

* { box-sizing: border-box; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul { list-style: none; }

/* The work row bleeds out to the window's edge with 100vw, which counts a visible scrollbar: clip the overshoot so the
   page itself never scrolls sideways */
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
section[id], article[id] { scroll-margin-top: 64px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 13.5px/1.6 var(--sans);
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 150ms, text-decoration-color 150ms;
}
a:hover { color: var(--ink); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #d6ddff; color: var(--ink); }

/* Top bar: section links, aligned right */
.top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.top-inner {
    display: flex;
    justify-content: flex-end;
    width: min(480px, 100% - 40px);
    margin-inline: auto;
    padding: 22px 0 14px;
}
.nav { display: flex; gap: 22px; }
.nav a { color: var(--meta); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
}

/* One centered column of content */
.page {
    width: min(480px, 100% - 40px);
    margin-inline: auto;
    padding-top: 16px;
    padding-bottom: 96px;
    --bleed: max(20px, (100vw - 480px) / 2);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Contact links in the intro: a firmer underline in the accent */
.lead a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.lead a:hover { color: var(--accent); }

/* Text: reading paragraphs in the body grey, so titles, names and links in the ink color stand out */
.lead p, .piece-text p, .now p:not(.facts) {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--body);
}
.lead p a, .piece-text p a, .jobs p a { color: var(--ink); }
.lead p + p { margin-top: 14px; }
.intro + section h2 { margin-top: 28px; }
.lead p, .piece-text p, .now p, .jobs p:not(.facts) { text-wrap: pretty; }
.ink { color: var(--ink); }

/* Lists */
h2 { margin: 72px 0 14px; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; text-wrap: balance; }
.entries { line-height: 1.45; }
.entries li + li { margin-top: 14px; }
.writings .sub { display: block; margin-top: 2px; font-size: var(--small); color: var(--meta); }
.now p { max-width: 60ch; }
.now ul { max-width: 60ch; padding-left: 18px; list-style: disc; }
.now li { font-size: 13.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.now li::marker { color: var(--meta); }
.now li + li { margin-top: 6px; }
.now .facts { margin-top: 6px; font-size: var(--small); color: var(--meta); }
.now ul + .facts { margin-top: 16px; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.name { color: var(--ink); }
.meta { color: var(--meta); font-size: var(--small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta a { text-decoration-color: var(--line); }

/* Work: the pieces sit in one row that scrolls sideways and runs out to the right edge of the window */
.pieces {
    display: flex;
    gap: 16px;
    margin-right: calc(-1 * var(--bleed));
    padding-right: var(--bleed);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pieces::-webkit-scrollbar { display: none; }
.pieces:focus-visible { outline-offset: 4px; }
.piece { flex: 0 0 min(400px, 86%); scroll-snap-align: start; }
/* A piece that needs more room for its figure: as wide as the text column, and taller than it is wide. Sized from
   the viewport, since the row runs past the column, so a phone always shows about 40px of the next piece */
.piece.wide { flex-basis: min(480px, 100vw - 76px); }
.scroller-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.scroller-nav button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: border-color 150ms, opacity 150ms;
}
.scroller-nav button:hover { border-color: var(--ink); }
.scroller-nav button:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }
.piece { display: flex; flex-direction: column; background: var(--card); overflow: hidden; }
.piece canvas { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 260px; cursor: pointer; touch-action: manipulation; }
.piece canvas[data-drag] { touch-action: pan-y; }
.piece.wide canvas { aspect-ratio: 1 / 1; min-height: 360px; }
.piece canvas:focus-visible { outline-offset: -3px; }
/* The text lines up with the figure's own 24px margin: a larger title, then a smaller description */
.piece-text { padding: 0 24px 24px; line-height: 1.45; }
.piece h3 { color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.piece .meta { margin-top: 3px; font-size: 12px; white-space: normal; }
.piece-text p { margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.piece .line { flex-direction: column; gap: 0; }

/* Work page: three plain sections. Each job is a line (company and role, years on the right), a short
   paragraph and its tools; open source and papers are one line each, cut short with an ellipsis if needed */
.page-title { color: var(--ink); font-size: 19.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.page-title + section h2 { margin-top: 32px; }
.page-title + .entries, .page-title + .now { margin-top: 24px; }
.jobs > li + li { margin-top: 28px; }
.jobs p { margin-top: 4px; color: var(--body); line-height: 1.6; text-wrap: pretty; }
.jobs .name { font-weight: 600; }
.jobs .name .dim { font-weight: 400; }
.jobs .facts { margin-top: 4px; font-size: var(--small); color: var(--meta); }
.rows li + li { margin-top: 10px; }
.rows .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { color: var(--meta); }


@media (max-width: 480px) {
    .top-inner { padding: 16px 0 12px; }
    .nav { gap: 18px; }
    .page { padding-top: 12px; }
    .meta { white-space: normal; text-align: right; }
    .entries .line { flex-wrap: wrap; row-gap: 0; }
    .entries .meta { flex-basis: 100%; text-align: left; }
    .rows .name { white-space: normal; }
    .rows .line, .jobs .line { flex-wrap: wrap; row-gap: 0; }
    .rows .meta, .jobs .meta { flex-basis: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    a { transition: none; }
}