/* Ported from personal-website (Next + Tailwind) to plain CSS. */
:root {
  --bg: #0a0a0b; --fg: #ecece9; --muted: #9a9a97; --rule: #26262a;
  --display-wght: 780; --body-wght: 380;
  --pad: clamp(1.5rem, 4vw, 4rem);
  --inset: clamp(1.5rem, 11vw, 16rem);
  --accent: #d9480f;
}
[data-surface="light"] {
  --bg: #f4f4f2; --fg: #0a0a0b; --muted: #61615e; --rule: #d6d6d2;
  --display-wght: 820; --body-wght: 400;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; line-height: 1.65; text-wrap: pretty;
  display: flex; flex-direction: column; min-height: 100vh;
}
body, [data-surface] { background: var(--bg); color: var(--fg); font-variation-settings: "wght" var(--body-wght), "wdth" 100; }
main { flex: 1; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 6px; }
img, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* Type */
.display, .title { font-variation-settings: "wght" var(--display-wght), "wdth" 100; text-wrap: balance; margin: 0; }
.display { font-size: clamp(2.5rem, 1.3rem + 5.4vw, 5.5rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 18ch; }
.title { font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; }
.label { font-variation-settings: "wght" 560, "wdth" 88; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.lede { font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.011em; color: var(--muted); max-width: 46ch; margin: 2rem 0 0; }
.muted { color: var(--muted); }

/* Frame */
.site-header, .site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem var(--pad); }
.site-header a { text-decoration: none; transition: opacity 0.15s; }
.site-header a:hover, .site-header a[aria-current="page"] { opacity: 0.6; }
.site-footer { border-top: 1px solid var(--rule); padding-block: 2.5rem; }
.hero { padding: clamp(6rem, 12vw, 10rem) var(--pad); }
.inset { padding: 5rem var(--inset) 7rem; }

/* Week list */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(16rem, calc((100% - 4rem) / 3)), 1fr)); gap: 3rem 2rem; }
.weeks a { display: flex; flex-direction: column; gap: 0.75rem; text-decoration: none; }
.weeks a:hover .title { text-decoration: underline; }
.weeks .label { color: var(--muted); }
.weeks .title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.weeks .thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--rule); border-radius: 0.75rem; margin-bottom: 0.5rem; filter: grayscale(1); }

/* About: portrait beside a headline, a short bio and three facts; stacked on phones */
.about { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: clamp(7rem, 12vw, 9rem) var(--inset) 6rem; }
.about img { width: 100%; border-radius: 0.75rem; filter: grayscale(1); }
.about h1 { font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem); max-width: 16ch; }
.about p { max-width: 62ch; margin: 1.25rem 0 0; }
.about h1 + p { margin-top: 2rem; }
.facts { display: grid; grid-template-columns: 6rem minmax(0, 1fr); max-width: 62ch; margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); }
@media (max-width: 48rem) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about img { max-width: 28rem; }
}

/* Week page body */
article h2.label { font-size: 1.25rem; margin: 4rem 0 0; }
article h3 { font-size: 1.125rem; margin: 2.5rem 0 0; }
article p, article ul, article ol, article pre, article figure { max-width: 62rem; margin: 1.25rem 0 0; }
article figure img, article figure video { border-radius: 0.75rem; }
figcaption { color: var(--muted); font-size: 0.75rem; margin-top: 0.75rem; }
pre { border: 1px solid var(--rule); padding: 1.25rem; overflow-x: auto; font-size: 0.875rem; }
.label.name { text-transform: none; letter-spacing: 0.02em; }
.site-header .label { font-variation-settings: "wght" 560, "wdth" 100; font-size: 1.375rem; }
.todo { background: #ffe58a; color: #0a0a0b; padding: 0 0.25em; }

/* Photo-led pages */
.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Title laid over the cover: both share one grid cell; the cover stretches if the text needs more room (phones). */
.cover-hero { display: grid; }
.cover-hero > * { grid-area: 1 / 1; }
.cover-hero .cover { align-self: stretch; height: auto; aspect-ratio: auto; min-height: min(100svh, 56.25vw); }
.cover-hero .hero { align-self: end; padding-top: 10rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.6) 60%, transparent); --muted: rgb(255 255 255 / 0.72); }
.cover-hero .display { font-size: clamp(2.25rem, 1rem + 4vw, 4.25rem); }
/* Phones: too narrow to overlay without hiding the picture, so stack as before. */
@media (max-width: 40rem) {
  .cover-hero { display: block; }
  .cover-hero .cover { min-height: 0; aspect-ratio: 16 / 9; }
  .cover-hero .hero { padding-top: 2.5rem; background: none; --muted: #9a9a97; }
}
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 2.5rem 0 0; }
.jump a { color: var(--muted); text-decoration: none; }
.jump a:hover { color: var(--fg); }
article section { scroll-margin-top: 2rem; }
article section + section { margin-top: 6rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
article section > h2.title { margin-top: 0.75rem; }
article figure { margin: 2.5rem 0 0; }
figcaption { font-size: 0.875rem; }
.fail { color: #b3261e; }
article table { border-collapse: collapse; width: 100%; max-width: 62rem; margin-top: 1.25rem; font-size: 0.875rem; }
article td { padding: 0.6rem 1.5rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
article td:first-child { white-space: nowrap; }
code { font-size: 0.9em; }
strong { font-variation-settings: "wght" 640, "wdth" 100; }

/* Sub-headings: a real step between the section title and body text */
article h3.label {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  font-variation-settings: "wght" 640, "wdth" 100;
  margin-top: 3.5rem;
}
figure video { width: 100%; }

/* Header stays at the top while scrolling. header.js reports what is underneath:
   over a cover photo/video it is transparent; elsewhere it takes that section's colours. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 50%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: color 0.2s, background-color 0.2s; }
.site-header[data-over="cover"] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero { padding-top: clamp(7rem, 12vw, 10rem); }

/* Steps as plain cards in a grid, a chevron between neighbours. */
.flow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: step; }
.flow li { position: relative; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--rule); border-radius: 4px; }
.flow b { display: block; font-variation-settings: "wght" 640, "wdth" 100; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.25; }
.flow b::before { counter-increment: step; content: counter(step); margin-right: 0.6rem; font-variation-settings: "wght" 400, "wdth" 100; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow p { margin: 0.4rem 0 0; max-width: none; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.flow .out { display: block; margin-top: 0.75rem; font-size: 0.8125rem; }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 1.35rem; right: -1.05rem; width: 0.5rem; height: 0.5rem; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.flow li:nth-child(4n)::after { display: none; }
@media (max-width: 62rem) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(4n)::after { display: block; }
  .flow li:nth-child(2n)::after { display: none; }
}
@media (max-width: 36rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li:not(:last-child)::after { display: block; top: auto; right: auto; bottom: -1.05rem; left: 1.35rem; transform: rotate(135deg); }
}

/* Inline SVG drawings take the page's type and colour tokens. */
.scroll { overflow-x: auto; }
.diagram { display: block; width: 100%; min-width: 40rem; height: auto; }
.diagram text { font-family: inherit; font-size: 13px; fill: var(--muted); }
.diagram .h { fill: var(--fg); font-size: 14px; font-weight: 600; }
.diagram .pin { fill: var(--fg); }
.diagram .pin.on, .diagram .rod { fill: var(--accent); }
.diagram .guide { fill: var(--rule); stroke: var(--muted); stroke-width: 0.5; }
.diagram .rod.off, .diagram .plate, .diagram .car { fill: var(--muted); }
.diagram .rail { stroke: var(--muted); stroke-width: 3; }
.diagram .arr { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Menu (sub-pages): a hamburger in the header opens a small panel on the left. */
/* The button hangs in the left margin, so the name stays where it is on the home page. */
.header-left { position: relative; display: flex; align-items: baseline; }
.menu-btn { appearance: none; background: none; border: 0; padding: 0.4rem 0.25rem; position: absolute; top: 50%; left: max(calc(var(--pad) * -1), -36px); transform: translateY(-50%); color: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px; transition: opacity 0.15s; }
.menu-btn:hover { opacity: 0.6; }
.menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 40; }
.menu[hidden] { display: none; }
.menu-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 0.25s; }
.menu-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(21rem, 86vw); padding: 6rem var(--pad) 2rem; background: #0a0a0b; color: #ecece9; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; }
.menu.on .menu-scrim { opacity: 1; }
.menu.on .menu-panel { transform: none; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid #26262a; }
.menu-panel a { display: block; padding: 0.9rem 0; text-decoration: none; font-variation-settings: "wght" 600, "wdth" 100; font-size: 1.05rem; line-height: 1.3; transition: opacity 0.15s; }
.menu-panel { outline: none; }
.menu-panel a { color: #9a9a97; transition: color 0.15s; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { color: #ecece9; }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #ecece9; }
/* Phones: no room in the left margin, so the button goes to the right of the banner. */
@media (max-width: 600px) {
  .header-left { position: static; }
  .menu-btn { left: auto; right: calc(var(--pad) - 0.25rem); }
  .site-header:has(.menu-btn) { flex-wrap: nowrap; column-gap: 0.75rem; }
  .site-header:has(.menu-btn) nav { margin-right: 2rem; white-space: nowrap; }
}

/* Lightbox for article images (header.js). */
img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; padding: 1rem; overflow: auto; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { margin: auto; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); object-fit: contain; border-radius: 0.25rem; background: #fff; cursor: zoom-in; }
.lightbox.full img { max-width: none; max-height: none; cursor: zoom-out; }
html.lightbox-open { overflow: hidden; }
.lightbox-close { position: fixed; top: 1rem; right: 1rem; z-index: 1; display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.9rem 0 0.75rem; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; background: rgb(255 255 255 / 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: inherit; font-variation-settings: "wght" 560, "wdth" 88; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s; }
.lightbox-close::after { content: ""; position: absolute; inset: -0.25rem; }
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgb(255 255 255 / 0.28); }

/* Pages with <body class="has-outline">: narrower text column, section outline on the right (header.js). */
html:has(body.has-outline) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.has-outline) { scroll-behavior: auto; } }
body.has-outline article > section[id] { scroll-margin-top: 5rem; }
/* One column width for text, lists, figures, tables and step cards. */
body.has-outline article > section { --col: 52rem; }
body.has-outline article > section > :is(p, ul, ol, pre, figure, table) { max-width: var(--col); }
body.has-outline article > section > table { width: 100%; }
body.has-outline .flow, body.has-outline .flow.milling { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.has-outline .flow li:not(:last-child)::after { display: block; }
body.has-outline .flow li:nth-child(2n)::after { display: none; }
.outline { display: none; }
@media (min-width: 64rem) {
  .outline { position: fixed; top: 7rem; right: 1.5rem; z-index: 40; width: 14rem; display: flex; flex-direction: column; gap: 0.1rem; border-left: 1px solid var(--rule); }
  .outline[hidden] { display: none; }
  .outline a { padding: 0.3rem 0 0.3rem 0.75rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.35; transition: color 0.15s, border-color 0.15s; }
  .outline a:hover, .outline a[aria-current] { color: var(--fg); }
  .outline a[aria-current] { border-left-color: var(--fg); }
}
/* From 64rem the right margin leaves a gap before the outline; the left margin stays as it is. */
@media (min-width: 64rem) { body.has-outline article.inset { padding-right: 20.5rem; } }