/* Hallmark · shape: a trailer, then the catalogue it was cut from · genre: atmospheric · theme: custom · job: listen · idea: "The site opens as a self-playing trailer of everything Nick is building, cut from the log, so it re-cuts itself each time something ships" · vibe: "dark screening room, wide heavy type, colour from the work"
 * paper: oklch(13% 0.012 275) · accent: oklch(70% 0.210 32) · display: Archivo · body: Figtree · hero: a title card beside a fan of the newest covers, then one shot per thing on that thing's own colour, in three cuts · nav: the name, a search pill, the blog, one way to say hello · footer: a colophon · imagery: the product: his store banners 9, screenshots 4 (capture.mjs) · signature: the trailer
 * axes: dark/grotesk-heavy/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · weakest: E, a page that moves this much can tire; every loop has a pause, the trailer holds still on focus and under a pointer on a control, and a visitor who asks for less motion gets the title card and a still page */
/* Hallmark · waive 6b · 44b passes at 1280x800, the head, the line and both actions sit left-aligned on the title card · the first screen is a cinema title card, held before the cut */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");

/* ---------- The voice: wide, heavy capitals for heads; a calm sans for reading ---------- */
body { color: var(--color-ink-2); font-size: var(--text-body); line-height: 1.6; }
h1, h2, h3 { color: var(--color-ink); font-weight: var(--display-weight); font-stretch: 118%; line-height: 1; text-transform: uppercase; }
h2 { max-width: none; font-size: var(--text-head); }
a { text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
.lead { color: var(--color-ink-2); font-size: var(--text-lead); }
.icon { flex-shrink: 0; }
.more a { color: var(--color-ink); font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
/* Anything that carries a thing's or a post's colour also gets a deeper shade of it. */
[data-tint] { --tint-deep: color-mix(in oklab, var(--tint) 58%, var(--color-paper)); --tint-field: linear-gradient(158deg, var(--tint) 20%, var(--tint-deep) 135%); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--light { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn--light:hover { border-color: var(--color-paper); background: var(--color-paper); color: var(--color-ink); }
.key { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-shade); color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.key:hover { background: var(--color-ink); color: var(--color-paper); }
.key:active { transform: scale(0.95); }
.key:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.key--wide { min-width: 76px; }

/* ---------- Nav: it lies over the top of whatever the page opens with ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: var(--z-sticky); }
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-inline-end: auto; color: var(--color-ink); font: 900 var(--text-lg)/1 var(--font-display); font-stretch: 118%; letter-spacing: 0; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.search { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: min(18rem, 26vw); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-shade); color: var(--color-ink-2); font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.search:hover { border-color: var(--color-ink); color: var(--color-ink); }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav__link:hover { text-decoration: underline; text-decoration-color: var(--color-ink); text-decoration-thickness: 2px; }
.nav :focus-visible { outline-color: var(--color-ink); }

/* ---------- The reel: a title card, then one shot per thing on that thing's own colour ---------- */
.reel { position: relative; }
.reel__stage { position: relative; height: var(--stage-h); overflow: clip; isolation: isolate; background: var(--color-paper); }
/* Each shot is a layer of its own (isolation), so nothing inside one, such as the title card's stacked covers,
   can show through the shot that lies over it. */
.reel__shot { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); padding: calc(var(--nav-h) + var(--space-sm)) 0 var(--bar-h); background: var(--tint); isolation: isolate; }
/* The title card stays where it is, under the shots, so the page's one top heading is always there to be read. */
.reel__shot--title { background: var(--color-paper); }
.reel__shot.is-off { animation: cut-out var(--dur-cut-out) var(--ease-in) both; }

.reel__title { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; height: 100%; }
.reel__say { display: grid; gap: var(--space-lg); justify-items: start; }
.reel__say h1 { max-width: 11ch; font-size: var(--text-title-card); letter-spacing: var(--tracking-display); }
.reel__say .lead { max-width: 30ch; }
.reel__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.fan { position: relative; align-self: center; aspect-ratio: 1 / 1; max-height: 100%; }
.fan__cover { position: absolute; width: 80%; aspect-ratio: var(--cover-ratio); border-radius: var(--radius-card); background: var(--tint); box-shadow: 0 0 0 1px var(--color-rule), var(--shadow-card); overflow: hidden; }
.fan__cover img { width: 100%; height: 100%; object-fit: cover; }
.fan__cover:nth-child(1) { top: 2%; left: 16%; rotate: -6deg; z-index: 3; --n: 0; }
.fan__cover:nth-child(2) { top: 30%; left: 2%; rotate: 4deg; z-index: 2; --n: 1; }
.fan__cover:nth-child(3) { top: 58%; left: 20%; rotate: -2deg; z-index: 1; --n: 2; }

.reel__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-sm) var(--gap-columns); height: 100%; }
.reel__date { grid-area: 1 / 1 / 2 / -1; color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; }
.reel__name { grid-area: 2 / 1 / 3 / -1; width: max-content; max-width: none; font-size: var(--fit, var(--text-shot)); letter-spacing: var(--tracking-display); line-height: 1.02; overflow-wrap: normal; white-space: nowrap; }
.reel__words { grid-area: 3 / 1 / 4 / span 4; align-self: end; display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--space-md); }
.reel__line { max-width: 24ch; color: var(--color-ink); font-size: var(--text-xl); line-height: 1.3; }
.reel__pic { grid-area: 3 / 5 / 4 / -1; display: grid; place-items: start end; min-height: 0; container-type: size; perspective: 1400px; }
.reel__frame { display: block; width: min(100cqw, 200cqh); aspect-ratio: var(--cover-ratio); border-radius: var(--radius-card); background: var(--tint-deep); box-shadow: var(--shadow-card); overflow: hidden; rotate: y -8deg; transform-origin: 100% 50%; }
.reel__frame img { width: 100%; height: 100%; object-fit: cover; }
/* The second cut: the picture on the left, the words on the right. */
.reel__shot--b .reel__date, .reel__shot--b .reel__name { justify-self: end; }
.reel__shot--b .reel__words { grid-column: 9 / -1; }
.reel__shot--b .reel__pic { grid-column: 1 / span 8; place-items: start start; }
.reel__shot--b .reel__frame { rotate: y 8deg; transform-origin: 0 50%; }
/* The third cut: the picture on top, as large as the room allows, with the name and the words under it. */
.reel__shot--c .reel__in { grid-template-rows: auto minmax(0, 1fr) auto; }
.reel__shot--c .reel__pic { grid-area: 2 / 1 / 3 / -1; place-items: center start; }
.reel__shot--c .reel__frame { rotate: none; transform-origin: 0 50%; }
.reel__shot--c .reel__name { grid-area: 3 / 1 / 4 / span 7; align-self: end; }
.reel__shot--c .reel__words { grid-area: 3 / 8 / 4 / -1; align-self: end; gap: var(--space-md); padding-bottom: var(--space-2xs); }
.reel__shot--c .reel__line { font-size: var(--text-lg); }

.reel__bar { position: absolute; inset: auto 0 0 0; z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-lg); height: var(--bar-h); }
.reel__keys { display: flex; gap: var(--space-xs); }
.reel__count { display: none; color: var(--color-ink); font: 400 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
.reel__ticks { display: flex; flex: 1; gap: var(--space-2xs); min-width: 0; }
.tick { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.tick::before, .tick::after { content: ""; position: absolute; inset: 10px 0; border-radius: var(--radius-pill); }
.tick::before { background: var(--color-ink); opacity: 0.3; }
.tick::after { background: var(--color-ink); transform: scaleX(0); transform-origin: 0 50%; }
.tick.is-done::after { transform: scaleX(1); }
.tick.is-on::after { animation: tick var(--tick-time, 3200ms) linear both; }

@keyframes cut-out { to { opacity: 0; scale: 1.03; } }
@keyframes wipe-a { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes wipe-b { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes wipe-c { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes appear { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes name-in { from { opacity: 0; translate: 0 40%; font-stretch: 62%; } }
@keyframes frame-in { from { opacity: 0; translate: 14% 0; scale: 0.9; } }
@keyframes frame-in-b { from { opacity: 0; translate: -14% 0; scale: 0.9; } }
@keyframes frame-in-c { from { opacity: 0; translate: 0 10%; scale: 0.94; } }
@keyframes frame-drift { from { rotate: y -13deg; } to { rotate: y -5deg; } }
@keyframes frame-drift-b { from { rotate: y 13deg; } to { rotate: y 5deg; } }
@keyframes frame-drift-c { from { scale: 1; } to { scale: 1.04; } }
@keyframes fan-in { from { opacity: 0; translate: 26% 12%; rotate: 14deg; } }
@keyframes tick { to { transform: scaleX(1); } }
.reel__shot--a.is-on { animation: wipe-a 380ms var(--ease-snap) both; }
.reel__shot--b.is-on { animation: wipe-b 380ms var(--ease-snap) both; }
.reel__shot--c.is-on { animation: wipe-c 380ms var(--ease-snap) both; }
.reel__shot.is-on .reel__frame { animation: frame-in var(--dur-cut) var(--ease-snap) 80ms both, frame-drift var(--shot-time) linear both; }
.reel__shot--b.is-on .reel__frame { animation-name: frame-in-b, frame-drift-b; }
.reel__shot--c.is-on .reel__frame { animation-name: frame-in-c, frame-drift-c; }
.reel__shot.is-on .reel__date { animation: appear 320ms var(--ease-out) 120ms both; }
.reel__shot.is-on .reel__name { animation: name-in 720ms var(--ease-snap) 80ms both; }
.reel__shot.is-on .reel__line { animation: rise 520ms var(--ease-snap) 240ms both; }
.reel__shot.is-on .reel__words .btn { animation: rise 520ms var(--ease-snap) 320ms both; }
.js .reel__shot--title.is-on h1 { animation: name-in 760ms var(--ease-snap) both; }
.js .reel__shot--title.is-on .lead { animation: rise 520ms var(--ease-snap) 180ms both; }
.js .reel__shot--title.is-on .reel__actions { animation: rise 520ms var(--ease-snap) 260ms both; }
.js .reel__shot--title.is-on .fan__cover { animation: fan-in 760ms var(--ease-snap) both; animation-delay: calc(120ms + var(--n) * 110ms); }
/* Held: the slow drift and the tick wait. A cover that arrives while held still arrives (its first animation runs). */
.reel.is-held .reel__frame { animation-play-state: running, paused; }
.reel.is-held .tick::after { animation-play-state: paused; }

/* ---------- Things that move as the page scrolls ----------
   Nothing is ever invisible: a block waits a little low and slides up into place, a head starts narrow and
   opens out, a cover starts zoomed in and settles. */
.js [data-rise] { translate: 0 56px; transition: translate 800ms var(--ease-snap); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-rise].is-in { translate: none; }
.js [data-stretch] { font-stretch: 62%; transition: font-stretch 900ms var(--ease-snap); }
.js [data-stretch].is-in { font-stretch: 118%; }
.js [data-rise] .card__art img { scale: 1.16; transition: scale 1200ms var(--ease-snap); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-rise].is-in .card__art img { scale: 1; }
/* A head marked to fit is set on one line, as large as the line allows. fit.js works out the size. */
.js [data-fit]:not(.reel__name) { width: max-content; max-width: none; font-size: var(--fit, var(--text-head)); white-space: nowrap; }
/* The hidden twin fit.js measures a head on, so the head itself is never disturbed. */
.ruler { position: fixed; inset: 0 auto auto 0; visibility: hidden; pointer-events: none; white-space: nowrap; line-height: 1; }

/* ---------- Lately: the newest line large on its thing's colour, the next few under it ---------- */
.lately { padding-block: var(--section-gap) var(--section-gap-s); }
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-xl); }
.lately__lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--tint-field); color: var(--color-ink); text-decoration: none; transition: translate var(--dur-short) var(--ease-snap), filter var(--dur-short) var(--ease-out); }
.lately__lead:hover { color: var(--color-ink); translate: 0 -6px; filter: brightness(1.08); }
.lately__lead:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.lately__words { display: grid; gap: var(--space-md); align-content: center; }
.lately__when { font: 400 var(--text-md)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; }
.lately__text { max-width: 22ch; font-size: var(--text-3xl); font-weight: 600; line-height: 1.12; text-wrap: balance; }
.lately__name { font: 900 var(--text-md)/1.1 var(--font-display); font-stretch: 112%; text-transform: uppercase; }
.lately__art { display: block; aspect-ratio: var(--cover-ratio); border-radius: 8px; background: var(--tint-deep); box-shadow: var(--shadow-card); overflow: hidden; rotate: 2deg; transition: rotate var(--dur-long) var(--ease-snap); }
.lately__lead:hover .lately__art { rotate: none; }
.lately__art img { width: 100%; height: 100%; object-fit: cover; }
.log { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.log__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: inherit; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.log__row:hover { border-bottom-color: var(--color-ink); color: inherit; }
.log__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.log__when { color: var(--color-muted); font: 400 var(--text-sm)/1.4 var(--font-outlier); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log__text { max-width: 56ch; color: var(--color-ink); font-size: var(--text-lg); line-height: 1.4; transition: translate var(--dur-short) var(--ease-snap); }
.log__row:hover .log__text { translate: 8px 0; }

/* ---------- Section heads ---------- */
.section__head { display: grid; gap: var(--space-md); justify-items: start; margin-bottom: var(--space-2xl); }

/* ---------- The blog: each post is a block of its own colour with its title set large ---------- */
.blog { padding-block: 0 var(--section-gap-s); }
.posts { display: grid; gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.posts[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.posts[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.posts > li { display: grid; }
.post-tile { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-md); min-height: 19rem; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--tint-field); color: var(--color-ink); text-decoration: none; overflow: hidden; transition: translate var(--dur-short) var(--ease-snap), filter var(--dur-short) var(--ease-out); }
.post-tile:hover { color: var(--color-ink); translate: 0 -6px; filter: brightness(1.08); }
.post-tile:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.post-tile__when { font: 400 var(--text-sm)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; }
.post-tile__title { grid-row: 3; align-self: end; max-width: 22ch; font-size: var(--text-tile); font-stretch: 100%; line-height: 1.04; }
.post-tile__line { grid-row: 4; max-width: 52ch; font-size: var(--text-md); line-height: 1.5; }
/* The post's first picture, top right. A drawing is shown as its shapes alone, in the tile's own colours. */
.post-tile__art { position: absolute; inset: var(--space-lg) var(--space-lg) auto auto; display: grid; place-items: start end; width: 40%; height: 46%; pointer-events: none; --color-paper-2: var(--tint-deep); --color-paper-3: color-mix(in oklab, var(--tint) 62%, var(--color-ink)); --color-rule: color-mix(in oklab, var(--color-ink) 42%, transparent); --color-muted: color-mix(in oklab, var(--color-ink) 62%, transparent); }
.post-tile__art svg { width: 100%; height: 100%; }
.post-tile__art text { display: none; }
.post-tile__art--photo img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
/* On the blog's own page every post is a row, the newest larger: words on the left, its picture on the right. */
.posts--all .post-tile { min-height: 15rem; padding: var(--space-xl); }
.posts--all .post-tile__title, .posts--all .post-tile__line { max-width: min(62%, 30ch); }
.posts--all .post-tile__line { max-width: min(62%, 52ch); font-size: var(--text-lg); line-height: 1.45; }
.posts--all .post-tile__art { inset: var(--space-xl) var(--space-xl) var(--space-xl) auto; width: 30%; height: auto; place-items: center end; }
.posts--all > li:first-child .post-tile { min-height: 23rem; }
.posts--all > li:first-child .post-tile__title { font-size: var(--text-head); font-stretch: 108%; }

/* ---------- The strip: every cover in a row that slides sideways as the page scrolls ---------- */
.strip { padding-block: var(--space-lg) var(--section-gap); overflow: clip; }
/* The tilt is on a frame as wide as the screen, and the row slides inside it, so the band keeps its place. */
.strip__tilt { rotate: -2deg; }
.strip__row { display: flex; gap: var(--space-md); width: max-content; translate: var(--shift, 0px) 0; }
.strip__cover { flex: none; width: clamp(11rem, 24vw, 22rem); aspect-ratio: var(--cover-ratio); border-radius: var(--radius-card); background: var(--tint); overflow: hidden; }
.strip__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Everything so far, then the games: each thing is a tile of its own colour ---------- */
.everything { padding-block: 0 var(--section-gap); }
.games { padding-block: 0 var(--section-gap-l); }
.cards { display: grid; gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--bento > [data-lead] { grid-column: span 2; grid-row: span 2; }
.cards > li { display: grid; }
.card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-lg); border-radius: var(--radius-card); background: var(--tint-field); color: var(--color-ink); text-decoration: none; transition: translate var(--dur-short) var(--ease-snap), filter var(--dur-short) var(--ease-out); }
.card:hover { color: var(--color-ink); translate: 0 -6px; filter: brightness(1.08); }
.card:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.card__art { position: relative; display: block; aspect-ratio: var(--cover-ratio); border-radius: 8px; background: var(--tint-deep); box-shadow: var(--shadow-card); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease-snap); }
.card__art img { width: 100%; height: 100%; object-fit: cover; }
.card__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--color-glare), transparent 55%); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.card:hover .card__art { transition-duration: 90ms; }
.card:hover .card__art::after { opacity: 1; }
/* A small tile pins its name under the picture and its line to the foot, so a row of tiles ends on one line. */
.card__words { display: grid; gap: var(--space-xs); align-content: space-between; padding-inline: var(--space-sm); }
.card__name { font: 900 var(--text-card)/1.06 var(--font-display); font-stretch: 112%; text-transform: uppercase; overflow-wrap: break-word; }
.card__line { max-width: 44ch; line-height: 1.45; }
.card__where { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.card__go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-inline: var(--space-md); padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; }
.cards--two .card__name, .card--lead .card__name { font-size: var(--text-card-lead); }
.cards--two .card__line, .card--lead .card__line { font-size: var(--text-lg); }
.cards--two .card__words, .card--lead .card__words { gap: var(--space-xs); align-content: start; padding: var(--space-xs) var(--space-md) var(--space-sm); }
.card__news { display: block; margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 36%, transparent); max-width: 44ch; line-height: 1.45; }
.card__news time { display: block; margin-bottom: var(--space-2xs); font: 400 var(--text-sm)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; }

/* ---------- Share codes ---------- */
.codes-band { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.codes-band__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.codes-band__say { display: grid; gap: var(--space-md); }
.codes-band__say h2 { font-size: var(--text-section); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); color: var(--color-ink); font-weight: 600; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.chip--all { border-color: transparent; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.code-card { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink-2); scroll-margin-top: var(--space-xl); }
.code-card:target { border-color: var(--color-accent); }
.code-card__name { font-size: var(--text-card-lead); font-stretch: 108%; }
.code-card__what { color: var(--color-ink-2); }
.code-card__offer { color: var(--color-ink); font-size: var(--text-lg); line-height: 1.4; }
.code-card__use { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.code-card__code { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) dashed var(--color-ink-2); border-radius: 8px; color: var(--color-ink); font: 400 var(--text-lg)/1 var(--font-outlier); user-select: all; }

/* ---------- Hello ---------- */
.hello { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.hello__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.hello__say { max-width: 18ch; font-size: var(--text-head); }
.hello__ways { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0 0 var(--space-xs); list-style: none; }

/* ---------- Footer ---------- */
.foot { padding-block: var(--space-xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: baseline; }
.foot__meta { max-width: 60ch; color: var(--color-muted); font-size: var(--text-md); }
.foot__meta a { color: var(--color-ink-2); }

/* ---------- The whole log, the blog's list, the codes, and the page for a wrong address ---------- */
.logpage { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--section-gap); }
.logpage__in { display: grid; gap: var(--space-2xl); }
.logpage__head { display: grid; gap: var(--space-lg); justify-items: start; }
.logpage__head h1 { font-size: var(--text-head); }
.blogpage .logpage__head h1 { font-size: var(--text-title-card); }
.month { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-columns); align-items: start; }
.month__name { padding-top: var(--space-lg); font-size: var(--text-title); font-stretch: 100%; line-height: 1.3; }
.log li:target .log__row { border-bottom-color: var(--color-accent); }

/* ---------- A post ---------- */
.post__head { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-2xl); background: var(--tint-field); }
.post__head-in { display: grid; gap: var(--space-lg); justify-items: start; }
.post__when { color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-outlier); font-variant-numeric: tabular-nums; }
.post__head h1 { max-width: 20ch; font-size: var(--text-head); font-stretch: 108%; line-height: 1.02; }
.post__head .lead { max-width: 46ch; color: var(--color-ink); font-size: var(--text-xl); line-height: 1.4; }
.post__body { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 18rem); justify-content: start; gap: var(--space-2xl); align-items: start; }
.post__rail { position: sticky; top: var(--space-xl); display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); line-height: 1.4; }
.post__rail-head { color: var(--color-ink); font-weight: 600; }
.post__rail ol { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.post__rail a { display: block; padding-block: var(--space-2xs); color: var(--color-muted); text-decoration: none; }
.post__rail a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.prose { padding-block: var(--space-2xl) var(--section-gap-s); font-size: var(--text-prose); line-height: 1.62; }
.prose h2 { scroll-margin-top: var(--space-xl); }
.prose > * { max-width: var(--measure); margin-block: 0; }
.prose p, .prose li { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-lg); }
.prose > pre, .prose > .fig, .prose > .table-wrap { margin-block: var(--space-xl); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); font-stretch: 108%; line-height: 1.08; }
.prose h3 { margin-top: var(--space-xl); font-size: var(--text-lg); font-stretch: 100%; line-height: 1.2; }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--color-ink); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-accent); font-weight: 600; }
.prose blockquote { margin-inline: 0; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-xl); line-height: 1.45; }
.prose blockquote > * + * { margin-top: var(--space-md); }
.prose hr { height: 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin-block: var(--space-2xl); }
.prose code { padding: 0.1em 0.35em; border-radius: 6px; background: var(--color-paper-3); color: var(--color-ink); font: 400 0.88em/1.4 var(--font-outlier); overflow-wrap: break-word; }
.code { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); overflow-x: auto; }
.code code { padding: 0; border-radius: 0; background: none; font-size: var(--text-sm); line-height: 1.6; overflow-wrap: normal; white-space: pre; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: 1.4; }
.table-wrap th { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 2px solid var(--color-ink-2); color: var(--color-ink); font-weight: 600; text-align: left; vertical-align: bottom; }
.table-wrap td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.table-wrap .num { text-align: right; white-space: nowrap; }
.table-wrap td.num { font-family: var(--font-outlier); font-size: 0.92em; }
.fig { margin-inline: 0; }
.fig img { width: 100%; border-radius: var(--radius-card); }
.fig figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
/* A drawing sits in the middle of a panel as wide as the words. */
.fig--drawn { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-xl) var(--space-lg) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.fig--drawn svg { width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.fig--drawn figcaption { justify-self: start; margin-top: 0; }
/* A drawing is set in the page's own type and colours, through these few classes. */
.drawing text { fill: var(--color-ink-2); font: 400 16px/1 var(--font-body); }
.drawing .small { font-size: 13px; }
.drawing .num { font-family: var(--font-outlier); }
.drawing .head { fill: var(--color-ink); font: 900 20px/1 var(--font-display); font-stretch: 108%; text-transform: uppercase; }
.drawing .ink { fill: var(--color-ink); }
.drawing .ink-2 { fill: var(--color-ink-2); }
.drawing .muted { fill: var(--color-muted); }
.drawing .rule { fill: var(--color-rule); }
.drawing .paper-2 { fill: var(--color-paper-2); }
.drawing .paper-3 { fill: var(--color-paper-3); }
.drawing .accent { fill: var(--color-accent); }
.drawing .cool { fill: var(--color-cool); }
.drawing .warm { fill: var(--color-warm); }
.drawing .none { fill: none; }
.drawing [class*="line-"] { stroke-width: 2; }
.drawing .line-ink { stroke: var(--color-ink); }
.drawing .line-muted { stroke: var(--color-muted); }
.drawing .line-rule { stroke: var(--color-rule); }
.drawing .line-accent { stroke: var(--color-accent); }
.drawing .line-cool { stroke: var(--color-cool); }
.drawing .line-warm { stroke: var(--color-warm); }
.drawing .thin { stroke-width: 1; }
.drawing .thick { stroke-width: 4; }
.drawing .dash { stroke-dasharray: 6 6; }
.drawing .round { stroke-linecap: round; stroke-linejoin: round; }
/* On the panel a drawing's boxes are a step lighter than the panel itself. */
.fig--drawn .paper-2 { fill: var(--color-paper-3); }
.fig--drawn .paper-3 { fill: var(--color-rule); }
.post__more { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.post__more h2 { font-size: var(--text-section); }

/* ---------- The finder ---------- */
.finder { width: min(40rem, calc(100% - 2 * var(--space-md))); max-height: min(36rem, 80dvh); margin-top: 12dvh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-card); color: var(--color-ink-2); overflow: hidden; }
.finder::backdrop { background: var(--color-scrim); }
.finder__form { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; }
.finder__field { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.finder__field input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--color-ink); font-size: var(--text-lg); outline: 2px solid transparent; outline-offset: 2px; }
.finder__field input::placeholder { color: var(--color-muted); }
.finder__field input:focus-visible { outline-color: transparent; }
.finder__field:focus-within { box-shadow: inset 0 -2px 0 var(--color-accent); }
.finder__list { margin: 0; padding: var(--space-xs); list-style: none; overflow-y: auto; }
.finder__list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: 8px; color: inherit; text-decoration: none; }
.finder__list a:hover, .finder__list a:focus-visible { background: var(--color-paper-3); outline-offset: -2px; }
.finder__name { color: var(--color-ink); font: 900 var(--text-lg)/1.2 var(--font-display); font-stretch: 110%; }
.finder__kind { color: var(--color-muted); font-size: var(--text-sm); text-align: right; }
.finder__none { padding: var(--space-lg); }

/* ---------- For a visitor who asked for less motion: everything is in place and nothing plays by itself ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-rise], .js [data-stretch] { translate: none; font-stretch: 118%; transition: none; }
  .js [data-rise] .card__art img { scale: 1; transition: none; }
  .reel__shot, .reel__shot *, .reel__shot *::after, .tick::after { animation: none !important; }
  .tick.is-on::after { transform: scaleX(1); }
  .strip__row { translate: none; }
  .card:hover, .post-tile:hover { translate: none; }
}

/* ---------- Narrower than a laptop ---------- */
@media (width < 60rem) {
  .search { min-width: 0; width: 44px; justify-content: center; padding: 0; }
  .search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav__in { gap: var(--space-md); }
  .reel__title { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: var(--space-lg); }
  .reel__say { gap: var(--space-md); }
  .fan { align-self: center; width: min(100%, 30rem); aspect-ratio: 1 / 0.86; }
  .fan__cover { width: 70%; }
  .fan__cover:nth-child(1) { top: 0; left: 0; }
  .fan__cover:nth-child(2) { top: 30%; left: 30%; }
  .fan__cover:nth-child(3) { top: 60%; left: 8%; }
  .reel__in, .reel__shot--b .reel__in, .reel__shot--c .reel__in { display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); }
  .reel__words, .reel__shot--c .reel__name, .reel__shot--c .reel__words { align-self: auto; }
  .reel__pic, .reel__shot--b .reel__pic, .reel__shot--c .reel__pic { order: -1; flex: none; display: block; padding: 0; container-type: normal; }
  .reel__frame, .reel__shot--b .reel__frame, .reel__shot--c .reel__frame { width: 100%; rotate: -2deg; }
  .reel__shot--b .reel__frame { rotate: 2deg; }
  .reel__shot--c .reel__frame { rotate: none; transform-origin: 0 50%; }
  .reel__date, .reel__shot--b .reel__date { justify-self: auto; margin-top: var(--space-sm); }
  .reel__name, .reel__shot--b .reel__name { justify-self: auto; width: auto; max-width: 100%; font-size: var(--text-shot); line-height: 1; overflow-wrap: break-word; white-space: normal; }
  .reel__words, .reel__shot--c .reel__words { gap: var(--space-md); padding: 0; margin: 0; }
  .reel__line { font-size: var(--text-lg); }
  .reel__shot.is-on .reel__frame, .reel__shot--b.is-on .reel__frame, .reel__shot--c.is-on .reel__frame { animation: frame-in-c var(--dur-cut) var(--ease-snap) 80ms both; }
  .month, .codes-band__in, .lately__lead, .hello__in, .foot__in { grid-template-columns: minmax(0, 1fr); }
  .lately__lead { gap: var(--space-lg); padding: var(--space-lg); }
  .lately__art { order: -1; rotate: none; }
  .lately__text { font-size: var(--text-2xl); }
  .section__head { margin-bottom: var(--space-xl); }
  .cards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--bento > [data-lead] { grid-row: auto; }
  .posts[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts[data-count="3"] > li:first-child { grid-column: 1 / -1; }
  .posts--all .post-tile { padding: var(--space-lg); }
  .posts--all .post-tile__title, .posts--all .post-tile__line { max-width: 100%; }
  .posts--all .post-tile__art { inset: var(--space-lg) var(--space-lg) auto auto; width: 40%; height: 40%; place-items: start end; }
  .log__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .month__name { padding-top: 0; }
  h2, .js [data-stretch], .js [data-stretch].is-in { font-stretch: 100%; }
  .js [data-fit]:not(.reel__name) { width: auto; max-width: 100%; font-size: var(--text-head); white-space: normal; }
}
@media (width < 40rem) {
  .nav__in { gap: var(--space-sm); }
  .wordmark { font-size: var(--text-md); }
  .prose .code code { overflow-wrap: anywhere; white-space: pre-wrap; }
  .cards--two, .cards--bento, .posts[data-count="2"], .posts[data-count="3"], .codes { grid-template-columns: minmax(0, 1fr); }
  .cards--bento > [data-lead], .posts[data-count="3"] > li:first-child { grid-column: auto; }
  .reel__bar { gap: var(--space-sm); justify-content: space-between; }
  .reel__ticks { display: none; }
  .reel__count { display: block; }
  .post-tile, .posts--all .post-tile { min-height: 16rem; }
  .posts--all > li:first-child .post-tile { min-height: 18rem; }
}
@media (width < 22.5rem) {
  .nav__link--hello { display: none; }
}
/* The list at a post's side is shown only where it has a column to itself. */
@media (width < 75rem) {
  .post__body { grid-template-columns: minmax(0, 1fr); }
  .post__rail { display: none; }
}