/* Mateusz Nowotnik's site, in the direction of ART_DIRECTION.md (2026-10-20): cream paper with grain, hand-inked
   working figures, dither, painted plates, numbered tab cards. Light only: there is no dark theme.
   Type: an old-style serif for headlines, artefact titles and section numbers (Iowan Old Style where the device has
   it); Geist for text (Mateusz's voice); Geist Mono for the machines' voice (inside figures and cards); Beth Ellen
   for his name only. Colour: each pigment has one job; vermilion only ever marks what needs a person. */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The name, handwritten: Beth Ellen (OFL), cut to Basic Latin. Its own ascent and descent (1.63 / 0.6 em) are far
   taller than its ink, so they're overridden to the name's ink box (the "t" at 1.05 em, the "z" at -0.42 em): the
   line box is the signature, and the header centres it. Until it arrives, Geist stands in, scaled to the same
   width and box (the numbers come from the font files; README "Fonts"), so nothing moves when it swaps in. */
@font-face { font-family: "Beth Ellen"; src: url("../fonts/BethEllen-basic-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 106%; descent-override: 44%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; }
@font-face { font-family: "Beth Ellen fallback"; src: url("../fonts/Geist-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 121.71%; ascent-override: 87.09%; descent-override: 36.15%; line-gap-override: 0%; }
/* Headlines where Iowan Old Style (Apple's) is missing: Literata (OFL, TypeTogether), Latin, weight 400, 20 KB. Never
   fetched on Macs and iPhones, since Iowan comes first in --serif. size-adjust sets it to Iowan's widths (measured
   over the page's headlines, README "Fonts"), so line breaks match Iowan; Palatino, the face it swaps in for on
   Windows, is within 1% of the same widths, so the swap barely moves anything. */
@font-face { font-family: "Literata"; src: url("../fonts/Literata-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 94.88%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* paper and ink */
  --paper: #efe7da;          /* the page: warm cream (ref 8's ground) */
  --paper-2: #f7f1e6;        /* cards, the figures' sheets */
  --paper-3: #e4d9c6;        /* sunk areas */
  --sheet: #fbf7ef;          /* a sheet on a card: labels, receipts, the calendar's frame */
  --ink: #24201a;            /* all text and every drawn line */
  --ink-2: #5a5348;          /* quieter text (6.2:1 on paper) */
  --ink-3: #8b8273;          /* decoration only (3.1:1, never text) */
  --rule: rgba(36, 32, 26, .16);
  /* pigments, each with one job (ART_DIRECTION.md, "Palette") */
  --vermilion: #ee4b29;      /* only what needs a person: fills and large numerals */
  --mint-ink: #2a7259;       /* done, as text on paper (5.1:1) */
  --vermilion-ink: #b8361a;  /* the same, as small text on paper or as a fill under paper-coloured text */
  --flag-bg: #fde3d9;
  --coral: #f3876a; --mustard: #ecb63c; --mint: #8fd5c3; --cerulean: #4ea4e1;
  --pink: #f3a8b6; --lilac: #b8a7e6; --sage: #b4cc97; --olive: #3d3b1e; --chartreuse: #cbd650;
  --ultramarine: #1d2c78; --periwinkle: #a7b3e5; --cobalt: #3446a6;
  /* type. Iowan Old Style is Apple's and comes first, so Macs and iPhones see exactly it; everyone else gets
     Literata (self-hosted, matched to Iowan's widths), with Palatino or Georgia while it loads. */
  --serif: "Iowan Old Style", "Literata", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hand: "Beth Ellen", "Beth Ellen fallback", cursive;
  /* layout */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --header-h: 76px;
  --section-y: clamp(64px, 7.8vw, 112px);   /* one gap between every section and before the footer: 112 px at 1440, 64 on phones */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--paper);
  /* --grain is a 256 px tile drawn by js/main.js (fine grain, blotches, fibres); until then the cream is flat. */
  background-image: var(--grain, none); background-size: 256px 256px;
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
html:not(.js) .js-only { display: none; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper-2);
  border-radius: 10px; font-weight: 500; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 10px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }

/* ---------- Type ---------- */
.h1 { font: 400 clamp(2.6rem, 1.45rem + 2.9vw, 4.1rem)/1.03 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.h2 { font: 400 clamp(2rem, 1.4rem + 1.8vw, 3.1rem)/1.07 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.h3 { font: 400 1.5rem/1.2 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.label { font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 36rem; text-wrap: pretty; }
.note { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.note strong { color: var(--ink); font-weight: 560; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--ink); font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn-primary { background: var(--ink); color: var(--paper-2); }
.btn-ghost { background: transparent; color: var(--ink); }
@media (hover: hover) { .btn:hover { transform: translate(-1px, -2px); box-shadow: 2px 3px 0 var(--ink); } }
.btn:active { transform: translate(1px, 1px); box-shadow: none; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .arrow { width: 15px; height: 15px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Brand and header. The signature is the mark; its box is its ink (the font's overrides), so
   align-items: center centres it and the focus ring goes round it. ---------- */
.brand { display: inline-flex; align-items: center; padding: 4px 8px; margin: -4px -8px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.brand-name { font-family: var(--hand); font-size: 26px; font-weight: 400; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.site-header { position: relative; z-index: 10; }
.header-row { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.header-row .brand { margin-right: auto; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { padding: 7px 10px; border-radius: 8px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .site-nav a:hover { color: var(--ink); background: rgba(36, 32, 26, .06); } }
.clock { font: 400 12px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
.clock b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
html:not(.js) .clock { display: none; }

/* ---------- Hero: the copy gets about half, Fig. 1 the other half ---------- */
.hero { padding: 18px 0 0; }
/* The markup's order is the phone's: the headline, Fig. 1, then the paragraph and buttons. Here the grid puts the two
   text blocks on the left, centred together against Fig. 1 on the right (the empty 1fr rows above and below take up
   the difference); below 1180 px the text stacks above Fig. 1, and on phones Fig. 1 comes straight after the headline. */
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". fig" "head fig" "rest fig" ". fig"; column-gap: clamp(32px, 4.4vw, 64px); }
.hero-head { grid-area: head; }
.hero-rest { grid-area: rest; }
.hero-grid > .f1-wrap { grid-area: fig; align-self: center; }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 3px rgba(236, 182, 60, .28); }
.hero .h1 { margin-bottom: 24px; }
.hero .lede { margin-bottom: 30px; }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 15px; color: var(--ink-2); max-width: 34rem; }
.hero-note img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--ink); }

/* ---------- Fig. 1, the checker, framed like the section cards: a tab that reads "Fig. 1", flat paper-2 (no
   grain: the cards stay clean against the grainy page, as in prototype A), no outline. The whole scene sits inside with margins; the control strip runs along the bottom like a player bar:
   the buttons and the status line in one row, a tick per document under it, the note last. ---------- */
.f1-wrap { position: relative; min-width: 0; margin-top: 46px; }
.f1-tab { font-size: 22px; }
.fig1 { min-width: 0; margin: 0; background: var(--paper-2); border-radius: 0 22px 22px 22px; padding: 16px 24px 14px; }
.f1-title { font: 400 13px/1.4 var(--mono); }
.f1-title b { display: block; font-weight: 600; font-size: 14.5px; }
.f1-title span { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.f1-stage { position: relative; aspect-ratio: 2; margin: 8px 0 10px; }
.f1-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.f1-bar { display: flex; align-items: center; gap: 12px 20px; padding-top: 12px; border-top: 1px solid var(--rule); }
.f1-actions { flex: none; display: flex; gap: 8px; }
.f1-btn { padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet); font: 500 13px/1.1 var(--mono); white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) { .f1-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); } }
.f1-btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.f1-run { min-width: 7.5em; background: var(--ink); color: var(--sheet); }
@media (hover: hover) { .f1-run:hover:not(:disabled) { box-shadow: 2px 2px 0 var(--vermilion-ink); } }
.f1-btn:disabled { cursor: default; opacity: .55; }
.f1-run:disabled { opacity: .8; }
.f1-status { flex: 1; min-width: 0; min-height: calc(2 * 1.45em); display: flex; align-items: center; font: 500 12.5px/1.45 var(--mono); }
.f1-status.hot { color: var(--vermilion-ink); }
.f1-status.ok { color: var(--mint-ink); }
.f1-ticks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.f1-ticks li { height: 7px; border-radius: 2px; background: #ddd4c4; transition: background-color .25s ease; }
.f1-ticks li.done { background: var(--mint); }
.f1-ticks li.flag { background: var(--vermilion); }
.f1-note { margin-top: 10px; font: 400 11.5px/1.45 var(--mono); color: var(--ink-2); }
.f1-noscript { margin-top: 10px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
html:not(.js) .f1-bar, html:not(.js) .f1-ticks { display: none; }
/* the drawing's line work (js/fig1.js) */
.fig1 .ln { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fig1 .ln-thin { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig1 .lbl { font-family: var(--mono); fill: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Fig. 2's panel: a painted ground and a calm paper card on it ---------- */
.panel { position: relative; margin: 0; min-width: 0; border-radius: 26px; overflow: hidden; background: var(--paper-3); }
.panel-paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.card { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 0 1px 0 rgba(36, 32, 26, .06), 0 18px 40px -22px rgba(29, 44, 120, .45); padding: 18px 20px 0; }
.fig-title { font: 400 13px/1.45 var(--mono); }
.fig-title b { display: block; font-weight: 600; font-size: 14px; }
.card-note { margin: 12px -20px 0; padding: 10px 20px 12px; border-top: 1.5px solid var(--ink); font: 400 11.5px/1.45 var(--mono); color: var(--ink-2); }

/* ---------- Section heads: numbered tab cards (ref 6) ---------- */
section { scroll-margin-top: 20px; }
.work, .built, .decide, .how, .about, .book { padding-top: var(--section-y); }
.sec-head { position: relative; margin-top: 46px; }
.sec-no { position: absolute; left: 0; bottom: 100%; height: 46px; width: 118px; padding-left: 24px; background: var(--paper-2);
  border-radius: 14px 0 0 0; font: 400 26px/46px var(--serif); }
.sec-no::after { content: ""; position: absolute; left: 100%; bottom: 0; width: 44px; height: 46px; background: inherit;
  clip-path: polygon(0 0, 28% 0, 100% 100%, 0 100%); border-top-right-radius: 10px; }
.sec-card { background: var(--paper-2); border-radius: 0 22px 22px 22px; padding: clamp(24px, 3.2vw, 44px); }
.sec-card .label + .h2, .sec-card .label + .h1 { margin-top: 12px; }
.sec-card .h2 + .lede { margin-top: 18px; }

/* ---------- 01 What I work on ---------- */
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: end; }
/* The desk: a small pixel picture of the work done by hand, dithered onto the page's palette (baked to img/desk.png; the tool is in
   ../site-tools/). Shown at exactly 2x so every pixel stays square. */
.desk { width: 352px; }
.desk img { width: 352px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Under the header card: two points and the hiring tag on the left, Fig. 2 on the right. */
.work-grid { --fig2-pad: clamp(16px, 2.2vw, 28px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; margin-top: clamp(40px, 5vw, 64px); }
/* The left column shares Fig. 2's card edges: the first point starts level with the card's title row, the hiring tag
   sits on the card's bottom edge. Each point hangs from a small disc in 04's step-number style: mint with a loop (it
   runs on its own, like Fig. 1's DONE tray), vermilion with a person (the colour of what comes back to a person). */
.work-points { display: flex; flex-direction: column; gap: clamp(36px, 3.6vw, 52px); padding: calc(var(--fig2-pad) + 12px) 0 var(--fig2-pad); }
.point { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.point-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--ink); }
.point-mark svg { display: block; }
.mark-own { background: var(--mint); color: var(--ink); }
.mark-person { background: var(--vermilion); color: var(--sheet); }
.point .h3 { margin-top: 6px; font-size: clamp(1.3rem, 1.05rem + .4vw, 1.4rem); text-wrap: balance; }
.point p { max-width: 34ch; margin-top: 6px; font-size: clamp(16px, 15px + .2vw, 17.5px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* the hiring line as a small paper tag, its bottom on the card's bottom edge */
.work-note { align-self: flex-start; max-width: 100%; margin-top: auto; padding: 10px 16px 11px 14px;
  background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 var(--ink); transform: rotate(-.8deg); font-size: 15px; line-height: 1.45; }
.work-note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 3px rgba(236, 182, 60, .28); vertical-align: 1px; }

/* Fig. 2: the same paper card on a painted ground; workflow tabs along the top, one at a time: a heading, what goes in
   and comes out, and what runs on its own against what comes back to a person. All cards share one grid cell, so the
   deck keeps the height of the tallest; the others are hidden with visibility (and inert). */
.fig2 { padding: var(--fig2-pad, clamp(16px, 2.2vw, 28px)); }
.fig2-card { padding-bottom: 0; }
.fig2-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fig2-tabs [role="tab"] { padding: 6px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 400 12px/1 var(--mono); cursor: pointer; }
@media (hover: hover) { .fig2-tabs [role="tab"]:not([aria-selected="true"]):hover { background: rgba(36, 32, 26, .06); } }
.fig2-tabs [aria-selected="true"] { background: var(--ink); color: var(--sheet); }
html:not(.js) .fig2-tabs { display: none; }
.fig2-deck { display: grid; padding: 20px 0 22px; perspective: 1400px; }
.js .fig2-deck > .ex { grid-area: 1 / 1; }
.js .fig2-deck > .ex:not(.on) { visibility: hidden; }
html:not(.js) .ex + .ex { margin-top: 24px; padding-top: 20px; border-top: 1.5px dashed var(--rule); }
.ex.flip { animation: flip .5s cubic-bezier(.2, .75, .25, 1); transform-origin: 50% 0; }
@keyframes flip { from { opacity: 0; transform: rotateX(-50deg) translateY(-4px); } 60% { opacity: 1; } }
.ex-title { font: 400 1.5rem/1.2 var(--serif); letter-spacing: -.008em; }
.ex-title { font: 400 1.5rem/1.2 var(--serif); letter-spacing: -.008em; }
/* what goes in and what comes out, side by side with an arrow between; then what runs on its own and what comes back */
.ex-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; margin-top: 18px; border-top: 1.5px solid var(--ink); }
.ex-io div { position: relative; padding-top: 10px; }
.ex-io div + div::before { content: "→"; position: absolute; left: -24px; top: 26px; font: 400 16px/1 var(--mono); color: var(--ink-2); }
.ex-io dt { font: 400 10.5px/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; }
.ex-io dd { margin-top: 5px; font-size: 15.5px; line-height: 1.45; }
.ex-split { display: grid; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ex-split b { font-weight: 560; color: var(--ink); }
.ex-split span:last-child b { color: var(--vermilion-ink); }

/* ---------- 02 What I've built: three label cards in a row. Each is the gallery label card (the plate version's:
   outlined, an offset shadow, a slight tilt; all three the same size) on a painted mat (js/paint.js, pale) that shows
   --off past the card on the two sides its mat-* class names and tucks --tuck under it on the other two, so the mat's
   own tilt never shows an edge there. The label is the one outlined thing on the page. ---------- */
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3.4vw, 48px); margin-top: clamp(32px, 4vw, 52px); align-items: start; }
.exhibit { --off: clamp(14px, 2.2vw, 30px); --tuck: 18px; --card: 340px; position: relative; justify-self: center; width: min(100%, calc(var(--card) + var(--off))); }
.ex-mat { position: absolute; z-index: 0; width: calc(100% - var(--tuck)); height: calc(100% - var(--tuck)); transform: rotate(.7deg); }
html:not(.js) .ex-mat { background: var(--paper-3); }
.mat-tr { padding: var(--off) var(--off) 0 0; }
.mat-tr .ex-mat { top: 0; right: 0; }
.mat-bl { padding: 0 0 var(--off) var(--off); }
.mat-bl .ex-mat { bottom: 0; left: 0; transform: rotate(-.6deg); }
.exhibit .label-card { position: relative; z-index: 1; container-type: inline-size; }
@container (max-width: 290px) { .label-card .a-id { font-size: 21px; } }   /* a narrower label (its text under 290 px) keeps its tag beside the id where it can */
.ex-grid > .exhibit:nth-child(even) .label-card { transform: rotate(.6deg); }
.artefact { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; padding: 16px 18px 18px; }
.a-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1.2px solid var(--ink); }
.a-id { font: 400 24px/1.1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.a-k { margin: 12px 0 3px; font: 400 13px/1.3 var(--serif); color: var(--ink-2); }
.a-subject { font: 500 17px/1.25 var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1.2px solid var(--ink); border-radius: 999px; font: 500 11px/1 var(--mono); white-space: nowrap; }
.tag-live { background: var(--mint); }
.label-card { transform: rotate(-.8deg); box-shadow: 4px 5px 0 var(--ink); }
.a-sub { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.a-io { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1.2px solid var(--ink); }
.a-io div { padding: 8px 10px 4px 0; }
.a-io div + div { padding-left: 10px; border-left: 1.2px solid var(--ink); }
.a-io dt { font: 400 12px/1.3 var(--serif); color: var(--ink-2); }
.a-io dd { margin-top: 3px; font-size: 13.5px; line-height: 1.4; }
.a-steps { counter-reset: step; border-top: 1px dashed var(--rule); }
.a-steps li { counter-increment: step; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: 13.5px; line-height: 1.35; }
.a-steps li::before { content: counter(step); grid-row: 1 / 3; width: 20px; height: 20px; border: 1.2px solid var(--ink); border-radius: 50%; font: 500 11px/18px var(--mono); text-align: center; }
.a-steps strong { font-weight: 560; }
.a-steps span { color: var(--ink-2); font-size: 13px; }

/* ---------- 03 Before you decide: the short list on a clipboard ---------- */
.decide-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; }   /* the copy and the clipboard centred on each other: no dead space under either */
.decide-copy .lede { margin-top: 20px; }
.decide-copy .cta-row { margin-top: 30px; }
/* The flagged list clipped to a clipboard (a hardboard edge round the paper, a mustard clip drawn by spots.mjs), with
   Fig. 1's cobalt halftone cast to the lower left; a laptop with the call open peeks out from behind it. */
.clipboard { position: relative; margin: 34px 0 0; }
.spot-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the spots' ink lines (Fig. 1's, a touch finer at this size) */
.spot .ln { stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spot .pl { stroke: #c2b7a3; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.board { position: relative; z-index: 1; padding: 30px 16px 16px; background: #cfa877; border: 1.5px solid var(--ink); border-radius: 16px; transform: rotate(-1deg); }
/* the cast shadow sits behind the board and the laptop (the board is the clipboard's last child, so inset: 0 is its box) */
.clipboard::before { content: ""; position: absolute; inset: 0; transform: translate(-14px, 16px) rotate(-1deg); border-radius: 16px;
  background: radial-gradient(circle, #22307f 0 34%, transparent 40%) 0 0 / 3.6px 3.6px, rgba(52, 70, 166, .62); }
.board > .spot-clip { position: absolute; z-index: 2; top: -18px; left: 50%; width: 120px; height: auto; transform: translateX(-50%); }
.spot-laptop { position: absolute; z-index: 0; top: -68px; right: -20px; width: 128px; height: auto; }
@media (max-width: 1180px) { .spot-laptop { top: -60px; } }   /* the card's top padding is smaller there */
.receipt { position: relative; z-index: 1; padding: 20px 20px 16px; background: var(--sheet); border: 1px solid rgba(36, 32, 26, .4); border-radius: 3px; }
.flag-head { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.flag-head span + span { color: var(--ink-2); }
/* the demo in four numbered steps */
.demo-list ol { counter-reset: demo; }
.demo-list li { counter-increment: demo; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rule); font: 400 13.5px/1.4 var(--mono); }
.demo-list li::before { content: counter(demo); flex: none; width: 22px; height: 22px; border: 1.2px solid var(--ink); border-radius: 50%; font: 500 11px/20px var(--mono); text-align: center; }
.demo-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.demo-list .pill { margin-left: auto; flex: none; white-space: nowrap; padding: 3px 8px; border: 1.2px solid var(--ink); border-radius: 999px; background: var(--mint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- 04 How I work: three steps joined by a line of dithered pixels (ref 4) ---------- */
.how-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
/* the dither line runs mustard to mint to cerulean: the colours show through a checkerboard of 2 px squares */
.how-steps::before { content: ""; position: absolute; z-index: 1; left: 48px; right: 48px; top: 22px; height: 8px;
  background: linear-gradient(90deg, var(--mustard), var(--mint) 50%, var(--cerulean));
  -webkit-mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 4px 4px; mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.how-steps li { position: relative; padding: 0 22px 24px; background: var(--paper-2); border-radius: 18px; }
.step-no { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 14px; transform: translateY(-4px);
  background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 50%; font: 400 19px/1 var(--serif); box-shadow: 2px 3px 0 var(--ink); }
.how-steps li { padding-top: 0; }
.how-steps .h3 { margin-top: 8px; }
.how-steps li > p:last-child { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
/* each step's object sits top right, on the line at the far end of its card (the number at the near end); it stays
   above the label, so the heading keeps the card's full width */
.how-steps .spot { position: absolute; z-index: 2; top: -10px; right: 18px; width: 88px; height: auto; }

/* ---------- 05 About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.mount { max-width: 340px; padding: 14px 14px 48px; background: var(--sheet); border: 1.5px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); transform: rotate(-2deg); }
.photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.about-body .label + .h2 { margin-top: 12px; }
.about-role { margin-top: 12px; font: 400 13.5px/1.4 var(--mono); color: var(--ink-2); }
.about-body .lede { margin-top: 22px; max-width: 40rem; }
.about-body .lede + .lede { margin-top: 14px; }
.about-body .about-data { margin-top: 18px; }
/* The sign-off. Its box is its ink (the font's overrides), plus room on the right for the "z"'s tail. */
.signoff { width: fit-content; margin-top: 20px; padding-right: .15em; font-family: var(--hand); font-size: clamp(2.125rem, 1.75rem + 1.1vw, 2.625rem); line-height: normal; letter-spacing: 0; }
/* Written in once (js/main.js adds .write, then .in): a mask 1 em wider than twice the word, ink up to the word's
   width, a 1 em soft edge, then nothing. It slides from all-clear to all-ink, so the edge crosses the word
   left to right for the whole 1.2 s. Without JS or with reduced motion, .write is never added. */
.signoff.write {
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - .5em), transparent calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
  mask: linear-gradient(90deg, #000 calc(50% - .5em), transparent calc(50% + .5em)) 100% 0 / calc(200% + 1em) 100% no-repeat;
}
.signoff.write.in {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: -webkit-mask-position 1.2s cubic-bezier(.45, .05, .3, 1), mask-position 1.2s cubic-bezier(.45, .05, .3, 1);
}
.about-body .cta-row { margin-top: 30px; }

/* ---------- 06 Book: the stillest screen ---------- */
.book { padding-bottom: 0; }
.book-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; }
.contact-line { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.contact-line a { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
/* Cal.com draws its own card; the sheet holds its place (and the loading note) while it loads. */
.book .wrap { container: book / inline-size; }
.cal-frame:has(> .cal-loading:not([hidden])) { min-height: 600px; }
.cal-frame { position: relative; margin-top: 28px; padding: 8px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 6px 0 var(--ink); }
/* On Cal.com's wide layout the embed keeps ~30 px of blank under its "Cal.com" line; the same on top evens the gaps. */
@container book (min-width: 790px) { .cal-frame { padding-top: 38px; } }
#cal-inline { width: 100%; overflow: auto; }
.cal-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.cal-loading[hidden] { display: none; }
.cal-fallback { margin-top: 16px; font-size: 15px; color: var(--ink-2); }

/* ---------- Footer: the fjord, then the ultramarine bar ---------- */
.site-footer { margin-top: var(--section-y); color: #f4efe4; background: var(--ultramarine); }
.fjord { display: block; width: 100%; height: clamp(300px, 38vw, 520px); }
.footer-bar { padding: 20px 0 30px; }   /* the gap above the name matches the gap below it (to the line) */
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; }
.site-footer .brand { color: #fbf3e6; }
.site-footer .brand-name { font-size: 30px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.site-footer a { color: #f4efe4; text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.footer-bottom { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(244, 239, 228, .2); font: 400 12px/1.5 var(--mono); color: rgba(244, 239, 228, .75); }
.footer-plain { margin-top: 0; }
.footer-plain .footer-bar { padding: 22px 0 26px; }
.footer-plain .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Privacy, Company details, 404 ---------- */
.page { padding: clamp(28px, 5vw, 56px) 0 clamp(80px, 10vw, 128px); }
.page .sec-head { margin-top: 46px; }
.page .sec-card { max-width: 820px; }
.legal .updated { margin-top: 14px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.legal h2 { margin-top: 48px; padding-top: 22px; border-top: 1.5px solid var(--ink); font: 400 1.6rem/1.25 var(--serif); letter-spacing: -.01em; }
.legal h3 { margin-top: 26px; font-size: 1.0625rem; font-weight: 600; }
.legal p, .legal li { line-height: 1.7; }
.legal p { margin-top: 12px; }
.legal h3 + p, .legal h3 + ul { margin-top: 6px; }
.legal ul { margin-top: 12px; padding-left: 20px; list-style: disc; display: grid; gap: 8px; }
.legal li::marker { color: var(--ink-2); }
.legal dl { margin: 40px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1.5px solid var(--ink); }
.legal dt, .legal dd { padding: 16px 0; border-bottom: 1px dashed var(--rule); }
.legal dt { padding-right: 40px; font: 400 13px/1.7rem var(--mono); color: var(--ink-2); }
.legal dd { overflow-wrap: anywhere; }
.not-found .lede { margin-top: 20px; }
.not-found .cta-row { margin-top: 30px; }
.not-found-art { width: 240px; height: auto; margin-top: 36px; }
.ascii { margin-top: 18px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; }
/* A value the owner still has to fill in. Loud on purpose, so it can't ship unnoticed. */
.placeholder { background: #fbe9b7; color: #6b4a06; border: 1px dashed currentColor; border-radius: 4px; padding: 0 6px; font-family: var(--mono); font-size: .85em; font-weight: 500; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1179px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; padding: 0; }
  .point { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }   /* side by side, the headings and lines share rows */
  .work-note { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .fig2 { max-width: 820px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "rest" "fig"; }
  .hero-rest { margin-bottom: clamp(32px, 4.4vw, 64px); }
  .f1-wrap { max-width: 760px; }
}
@media (max-width: 980px) {
  .work-points { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
}
@media (max-width: 860px) {
  .work-head, .decide-grid, .about-grid, .book-head { grid-template-columns: minmax(0, 1fr); }
  .desk { width: auto; max-width: 352px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .how-steps::before { display: none; }
  .how-steps .spot { top: -4px; width: 80px; }
  .mount { max-width: 280px; }
}
/* 02: two columns where three would squeeze the labels (the third centred under them), one on phones (each label as
   wide as the column). */
@media (max-width: 1239px) {
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-grid > .exhibit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* the hero on phones, in the markup's order: the headline, Fig. 1 (so the first screen shows the machine), then the
     paragraph and the buttons; the header's Book button is the first screen's only one */
  .hero { padding-top: 8px; }
  .hero .kicker { margin-bottom: 14px; }
  .hero .h1 { margin-bottom: 16px; }
  .hero-grid { grid-template-areas: "head" "fig" "rest"; }
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .exhibit { width: 100%; }
  .hero-rest { margin: 28px 0 0; }
  html:not(.js) .f1-stage { display: none; }   /* no empty drawing box on the first screen without JS: the note says why */
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .header-row { gap: 12px; }
  .clock { display: none; }
  .header-row .btn-sm { height: 36px; padding: 0 13px; font-size: 13.5px; }
  /* the name: as large as fits beside the button (182 px of button, gutters and air, over its 10.6 em) */
  .site-header .brand-name { font-size: clamp(14px, calc((100vw - 190px) / 10.6), 26px); }
  .lede { font-size: 17px; }
  /* Fig. 1 on a phone: the buttons on one row, the status under them, then the ticks */
  .fig1 { padding: 16px 14px 14px; }
  .f1-tab { font-size: 19px; }
  .f1-bar { flex-direction: column; align-items: stretch; }
  .f1-actions .f1-btn { flex: 1 1 auto; padding: 9px 12px; }
  .f1-status { min-height: calc(2 * 1.45em); align-items: flex-start; }
  .f1-ticks { gap: 4px; }
  .panel { border-radius: 20px; }
  .card { padding: 16px 14px 0; border-radius: 14px; }
  .card-note { margin: 12px -14px 0; padding: 10px 14px 12px; }
  .fig2 { padding: 12px; }
  .ex-io { grid-template-columns: minmax(0, 1fr); }
  .ex-io div + div { margin-top: 4px; }
  .ex-io div + div::before { display: none; }
  .sec-no { width: 92px; height: 40px; padding-left: 18px; font-size: 22px; line-height: 40px; }
  .sec-no::after { height: 40px; width: 36px; }
  .sec-head { margin-top: 40px; }
  .board { padding: 26px 8px 8px; border-radius: 14px; }
  .clipboard::before { transform: translate(-8px, 12px) rotate(-1deg); border-radius: 14px; }
  .receipt { padding: 16px 14px 12px; }
  .flag-head { flex-wrap: wrap; gap: 2px 12px; }
  .demo-list li { font-size: 13px; }
  .spot-laptop { top: -62px; right: -6px; width: 100px; }
  .footer-bottom { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .f1-title span { font-size: 10.5px; letter-spacing: .02em; }   /* "routine work · the odd ones to a person" on one line */
  .header-row .btn-sm { padding: 0 11px; font-size: 13px; }
  .site-header .brand-name { font-size: clamp(14px, calc((100vw - 176px) / 10.6), 26px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}