/* Hallmark · shape: Long Document · genre: editorial · theme: Loom (deal 1/3, seed genizah-careful-disk-cleanup-b826·aa3fe43a·2026-11-11·r0) · job: try (install) · draw: manual
 * hero: Stage, head on 1 to 6, the sorted sheet on 7 to 12 · nav: edge-aligned wordmark, three links, theme switch · footer: mast, the wordmark over links · imagery: the product's own sort sheet and transcript, one public-domain archival photograph · signature: the three piles as a ruled sheet in the hero · loom: ecru, indigo colourway for dark
 * axes: light/roman-serif/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the ruled-row Range repeats across sections, so the example runs as a transcript and the name story as a photograph */
/* Hallmark · waive 26b · no control on the page can be disabled · every button is always actionable, so a disabled state would be dead code */

@font-face { font-family: "Libre Caslon Display"; src: url("fonts/libre-caslon-display-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); --text-section: clamp(2.25rem, 2.5vw + 1rem, 3.5rem);
  --text-title: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-short: 220ms;
  --container: 1280px; --gutter: 64px; --gap-columns: 32px; --section-gap: 144px;
  --color-paper: oklch(95.5% 0.014 85); --color-paper-2: oklch(92% 0.022 84); --color-paper-3: oklch(85% 0.032 80);
  --color-ink: oklch(21% 0.012 60); --color-ink-2: oklch(31% 0.012 60); --color-muted: oklch(44% 0.014 62);
  --color-rule: oklch(83% 0.022 84); --color-rule-ink: oklch(21% 0.012 60);
  --color-accent: oklch(34% 0.115 267); --color-accent-2: oklch(43% 0.125 267); --color-accent-ink: oklch(95.5% 0.014 85); --color-focus: oklch(43% 0.15 267);
  --font-display: "Libre Caslon Display", ui-serif, Georgia, serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rule-hair: 1px; --rule-ink: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(23% 0.045 266); --color-paper-2: oklch(27.5% 0.055 266); --color-paper-3: oklch(32% 0.06 266);
    --color-ink: oklch(94% 0.015 85); --color-ink-2: oklch(88% 0.018 85); --color-muted: oklch(79% 0.022 85);
    --color-rule: oklch(40% 0.06 266); --color-rule-ink: oklch(94% 0.015 85);
    --color-accent: oklch(92% 0.025 85); --color-accent-2: oklch(97% 0.012 85); --color-accent-ink: oklch(26% 0.08 266); --color-focus: oklch(82% 0.1 267);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(23% 0.045 266); --color-paper-2: oklch(27.5% 0.055 266); --color-paper-3: oklch(32% 0.06 266);
  --color-ink: oklch(94% 0.015 85); --color-ink-2: oklch(88% 0.018 85); --color-muted: oklch(79% 0.022 85);
  --color-rule: oklch(40% 0.06 266); --color-rule-ink: oklch(94% 0.015 85);
  --color-accent: oklch(92% 0.025 85); --color-accent-2: oklch(97% 0.012 85); --color-accent-ink: oklch(26% 0.08 266); --color-focus: oklch(82% 0.1 267);
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in oklab, var(--color-accent) 24%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 { margin: 0; font-weight: 400; font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.04; }
h1 { font-size: var(--text-display); line-height: 1; max-width: 12ch; }
h2 { font-size: var(--text-section); max-width: 18ch; }
h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-title); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--font-mono); font-size: 0.9em; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: var(--space-sm); top: -64px; z-index: 50; padding: var(--space-xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus { top: var(--space-sm); }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.link { font-weight: 500; padding-block: var(--space-2xs); text-decoration: none; border-bottom: 2px solid currentColor; transition: border-color var(--dur-short) var(--ease-out); }
.link:hover { border-color: var(--color-accent-2); }
:root[data-theme="dark"] .link:hover { border-color: var(--color-focus); }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: var(--color-paper); border-bottom: var(--rule-ink) solid var(--color-rule-ink); }
.nav-in { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.wordmark { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; text-decoration: none; margin-right: auto; }
.links { display: flex; gap: var(--space-lg); }
.links a { text-decoration: none; font-weight: 500; font-size: var(--text-sm); padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.links a:hover { border-color: currentColor; }
.theme { background: none; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; min-height: 40px; padding: 0 var(--space-md); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.theme:hover { border-color: var(--color-ink); }

/* hero */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.hero-text { grid-column: 1 / span 6; }
.hero .lead { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 32ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.sheet { grid-column: 8 / span 5; margin: 0; background: var(--color-paper-2); padding: var(--space-lg); }
.pile + .pile { margin-top: var(--space-lg); }
.pile-head { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); line-height: 1.3; max-width: none; padding-bottom: var(--space-xs); border-bottom: var(--rule-ink) solid var(--color-rule-ink); }
.pile-head span { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); margin-left: var(--space-xs); }
.sheet dl { margin: 0; }
.sheet dl div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.sheet dd { margin: 0; white-space: nowrap; font-weight: 500; }
.sheet figcaption { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }

/* sections */
.sec { padding-block: var(--section-gap); }
.sec:not(.band) + .sec:not(.band) { padding-top: 0; }
.band { background: var(--color-paper-2); color: var(--color-ink); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.split-head { grid-column: 1 / span 5; }
.split-head p { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.split > :last-child { grid-column: 7 / span 6; }
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* example transcript */
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.chat li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.chat b { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding-top: 2px; }
.chat .gz b { color: var(--color-ink); }
.chat li p + p { margin-top: var(--space-sm); }
.chat .caution { background: var(--color-paper); padding: var(--space-lg); border-bottom: 0; border-left: var(--rule-ink) solid var(--color-accent-2); }
.chat .caution > :not(b) { grid-column: 2; }
.chat .caution strong { font-weight: 600; }

/* never */
.never { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: var(--rule-ink) solid var(--color-rule-ink); }
.never li { padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lg); line-height: 1.35; }
.note { margin-top: var(--space-xl); color: var(--color-ink-2); max-width: 60ch; }

/* name story */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.photo { grid-column: 1 / span 7; margin: 0; }
.photo img { width: 100%; filter: saturate(0.88) contrast(0.96); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.story-text { grid-column: 9 / span 4; }
.story-text p { margin-top: var(--space-lg); }
.story-text .moral { padding-top: var(--space-lg); border-top: var(--rule-ink) solid var(--color-rule-ink); font-weight: 500; }

/* install */
.install-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.install-head h2 { grid-column: 1 / span 5; }
.install-head p { grid-column: 7 / span 6; color: var(--color-ink-2); }
.routes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.routes li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.routes h3 { grid-column: 1 / span 5; }
.routes li > :not(h3) { grid-column: 7 / span 6; }
.cmd { display: flex; align-items: flex-start; gap: var(--space-sm); background: var(--color-paper); padding: var(--space-md); }
.cmd pre { margin: 0; flex: 1; min-width: 0; overflow-x: auto; font-size: var(--text-sm); line-height: 1.6; }
.copy { flex-shrink: 0; background: none; color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.copy:hover { border-color: var(--color-ink); }

/* faq */
.faq { border-top: var(--rule-ink) solid var(--color-rule-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); font-size: var(--text-title); font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--color-muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: var(--space-lg); max-width: 60ch; color: var(--color-ink-2); }

/* footer */
.foot { border-top: var(--rule-ink) solid var(--color-rule-ink); padding-block: var(--space-2xl) var(--space-xl); }
.foot-mark { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 12rem); line-height: 0.9; letter-spacing: -0.02em; }
.foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot-links a { font-weight: 500; }
.small { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 80ch; }

/* tablet and phone */
@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap: 96px; }
  .hero-text, .sheet, .split-head, .split > :last-child, .photo, .story-text, .install-head h2, .install-head p, .routes h3, .routes li > :not(h3) { grid-column: 1 / -1; }
  .sheet { margin-top: var(--space-xl); }
  .never { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes li { row-gap: var(--space-sm); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap: 72px; --gap-columns: 16px; }
  .links { display: none; }
  .hero { padding-top: var(--space-xl); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .chat li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .chat .caution > :not(b) { grid-column: 1; }
  .never { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: var(--space-md); }
  .sheet dl div { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Benchmark table */
.bench { width: 100%; max-width: 760px; table-layout: fixed; margin-top: var(--space-lg); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bench th, .bench td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; overflow-wrap: anywhere; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bench thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; border-bottom: var(--rule-ink) solid var(--color-rule-ink); }
.bench tbody tr:last-child th, .bench tbody tr:last-child td { border-bottom: 0; padding-top: var(--space-md); }
#benchmark p + p { margin-top: var(--space-md); max-width: 60ch; }
@media (max-width: 480px) { .bench th, .bench td { padding-right: var(--space-xs); font-size: var(--text-sm); } }
.bench th:first-child, .bench td:first-child { width: 56%; }