:root {
    --bg: #ffffff;
    --ink: #111111;
    --muted: #6b6b6b;
    --line: #e6e6e6;
    --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0b0b;
        --ink: #f2f2f2;
        --muted: #858585;  /* same 5.3:1 contrast as light mode, so the hierarchy holds */
        --line: #262626;
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* clip on html, not body: body clipping does not stop the window scrolling sideways. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    font-feature-settings: 'ss01';
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--muted);
}
a:hover { text-decoration-color: var(--ink); }

.page {
    max-width: 68rem;
    margin: 0 auto;
    padding: 4rem 1rem 3rem;
}

/* Glass pieces. Each canvas keeps its space from the start (aspect-ratio), so nothing moves when
   WebGL draws it, and shows only once glass3d.js adds .is-3d to its parent. Without WebGL the
   space stays empty and the page reads as plain text. */
.glass3d { display: block; visibility: hidden; touch-action: pan-y; }
.glass-wrap.is-3d .glass3d { visibility: visible; }

/* Mast: name, description and contact on one left edge. */
.name {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 0.2rem;
}

.meta {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.9375rem;
}
/* The description breaks only between its parts, never inside one. */
.meta .nw { white-space: nowrap; }

.links a { display: inline-block; padding: 0.4rem 0; margin: -0.4rem 0; }  /* taller tap target, same look */

.links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    margin: 0;
    padding: 0;
}

/* The band replaces the divider line. Like HELLO, it is widened by its two empty cubes
   so the first glass cube lines up with the text edge. */
/* It is also trimmed by its empty cube rows above and below (a % margin is a share of the width,
   so 100%/31 is one cube), so the margins below are the real gaps at every screen width. */
.band-wrap { margin: 4.5rem 0 4rem; }
.g-band {
    width: calc(100% * 33 / 31);
    aspect-ratio: 33 / 3;
    margin: calc(-100% / 31) 0 calc(-100% / 31) calc(-100% / 31);
}

/* Sections: three columns, year above each entry. */
.cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.block h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1.25rem;
}

/* A 2x2 glass block before each section name. The negative margins trim its empty cubes. */
.mark-wrap { display: block; }
/* Set 1.6px above centre, so it sits on the capitals of the label by eye. */
.g-mark { width: 2.25rem; aspect-ratio: 1; margin: -0.6rem -0.2rem -0.4rem -0.55rem; }

.entries { list-style: none; margin: 0; padding: 0; }

.entry {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    gap: 0 1rem;
    margin-bottom: 1.5rem;
}

.year {
    margin-bottom: 0.125rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.entry h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

.entry p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.entry .extra { margin-top: 0.375rem; }
.entry .extra a { color: var(--ink); margin-right: 1rem; }

.foot {
    margin-top: 5rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Three columns need about 300px each; below that the sections stack. */
@media (max-width: 56rem) {
    .cols { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 640px) {
    .page { padding-top: 2.5rem; }
}