/* GENERATED by scripts/build-catalogue.py from site/assets/css/site.css. Do not edit. */
/*
 * niklausgerber.com — the one stylesheet.
 *
 * Source of truth for every value: github.com/niklausgerber/design-system
 * (tokens/tokens.css; rules in catalogue/, which renders this file from its site/ mirror).
 *
 * Layout reacts to the width of the `page` container, not the viewport.
 * That is what lets an index tile render the real top of a page at its true
 * 1440 (or 390) layout and scale it down: the tile's miniature is simply
 * another `page` container with a fixed width.
 *
 *   phone    container  < 768
 *   tablet   container  768 to 1023
 *   desktop  container >= 1024 (drawn at 1440)
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
    font-family: "Instrument Sans";
    src: url("../../site/assets/fonts/instrument-sans.e001c72b.woff2") format("woff2");
    font-weight: 400 500;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../../site/assets/fonts/newsreader.1e46ca21.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../../site/assets/fonts/newsreader-italic.66baf51c.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: optional; /* italic is rare: never swap it in late and move text */
}
/* Metric-matched fallbacks, so the swap to the web font moves nothing. */
@font-face {
    font-family: "Instrument Sans Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Roboto");
    size-adjust: 102.83%;
    ascent-override: 94.33%;
    descent-override: 24.31%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Newsreader Fallback";
    src: local("Georgia"), local("Noto Serif");
    size-adjust: 93.37%;
    ascent-override: 78.72%;
    descent-override: 28.38%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------------- tokens */

:root {
    color-scheme: light dark;
    --canvas: #f5f3ef;
    --ink: #141414;
    --ink-2: #5a564f;
    --hair: #e0ddd8;
    --tile: #f5f3ef;
    --accent: #26357a;
    --link: #26357a;
    --on-accent: #f7f6ff;
    --on-accent-link: #aab4f0;
    --band: #26357a;
    --night: #0a0a0b;
    --btn-bg: #26357a;
    --btn-fg: #f7f6ff;
    --btn-hover: #141414;
    --photo: none;
    --mark: #26357a; /* state markers (rail, filters): indigo, light lavender in dark */

    --font-ui: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
    --font-read: "Newsreader", "Newsreader Fallback", Georgia, serif;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 150ms;
    --t-base: 250ms;
    --t-slow: 400ms;
}
@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #121212;
        --ink: #ecebe7;
        --ink-2: #a8a399;
        --hair: #33312e;
        --tile: #1e1e1c;
        --link: #aab4f0;
        --btn-bg: #aab4f0;
        --btn-fg: #121212;
        --btn-hover: #ecebe7;
        --photo: brightness(0.88);
        --mark: #aab4f0;
    }
}
@media (prefers-contrast: more) {
    :root { --ink-2: var(--ink); --hair: var(--ink); }
}

/* ----------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html {
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; filter: var(--photo); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 600; }
::selection { background: var(--accent); color: var(--on-accent); }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--t-fast) linear;
}
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 2px; }

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip {
    position: absolute;
    left: 20px; top: -100px;
    z-index: 10;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--canvas);
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
}
.skip:focus { top: 20px; color: var(--canvas); outline-color: var(--canvas); }

@media (min-width: 768px) and (max-width: 1023px) { html { scroll-padding-top: 64px; } }

/* The container everything measures itself against. */
.page { container: page / inline-size; overflow-x: clip; }

/* -------------------------------------------------------------- spacing */

/* Side gutters: 20 phone, 48 tablet, centred 1060 column on desktop (190 at 1440). */
.wrap { padding-inline: 20px; }
@container page (min-width: 768px) {
    .wrap { padding-inline: 48px; }
}
@container page (min-width: 1024px) {
    .wrap { padding-inline: max(48px, calc((100cqw - 1060px) / 2)); }
}

/* Label column + content column. Phone: one column. */
.cols { display: block; }
@container page (min-width: 768px) {
    .cols { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
}
@container page (min-width: 1024px) {
    .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); }
}
.cols > :only-child { grid-column: 2; }

/* ----------------------------------------------------------------- type */

.display {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}
.lede {
    font-family: var(--font-read);
    font-size: 20px;
    line-height: 30px;
    max-width: 640px;
    text-wrap: pretty;
}
.prose {
    font-family: var(--font-read);
    text-wrap: pretty;
}
.label { font-size: 15px; line-height: 22px; color: var(--ink-2); }
@container page (min-width: 768px) {
    .display { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; }
    .lede { font-size: 22px; line-height: 32px; }
}
@container page (min-width: 1024px) {
    .display { font-size: 72px; line-height: 76px; letter-spacing: -0.022em; }
    .lede { font-size: 24px; line-height: 36px; }
}

/* ----------------------------------------------------------------- band */

.band {
    background: var(--band);
    color: var(--on-accent);
    padding-block: 20px 56px;
}
.band a { color: var(--on-accent); }
.band a:hover { color: var(--on-accent-link); }
.band :focus-visible { outline-color: var(--on-accent); }
.band-back {
    display: inline-block;
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.band-back { position: relative; }
.band-back::after { content: ""; position: absolute; inset: -12px -10px; }
.band-title { margin-top: 72px; }
.band-label { font-size: 15px; line-height: 22px; margin-bottom: 14px; }
.band .lede { margin-top: 20px; }
.band-note { margin-top: 24px; font-size: 15px; line-height: 22px; max-width: 560px; }
@container page (min-width: 768px) {
    .band { padding-block: 28px 80px; }
    .band-title { margin-top: 96px; }
    .band-label { font-size: 17px; line-height: 26px; margin: 0; }
    .band .lede { margin-top: 28px; }
}
@container page (min-width: 1024px) {
    .band { padding-block: 28px 112px; }
    .band-back { padding-bottom: 3px; }
    .band-title { margin-top: 136px; }
    .band-label { font-size: 20px; line-height: 28px; }
    .band .lede { margin-top: 32px; }
}

/* -------------------------------------------------------------- buttons */

.btn {
    display: inline-block;
    min-height: 52px;
    padding: 0 28px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 17px;
    line-height: 52px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-fg); }
.band .btn { background: var(--on-accent); color: var(--accent); }
.band .btn:hover { background: #fff; color: var(--accent); }
.btn-row { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.btn-row > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 24px; }

/* ----------------------------------------------------- content page body */

.main { padding-top: 48px; }
@container page (min-width: 768px) { .main { padding-top: 72px; } }
@container page (min-width: 1024px) { .main { padding-top: 112px; } }

.intro { font-family: var(--font-read); font-size: 18px; line-height: 30px; max-width: 640px; text-wrap: pretty; }
@container page (min-width: 768px) { .intro { font-size: 20px; line-height: 32px; } }
@container page (min-width: 1024px) { .intro { font-size: 21px; line-height: 34px; } }

/* Rail: sticky numbered sections. Desktop: column. Tablet: row of numbers. Phone: none. */
.rail { display: none; }
.rail ol { position: relative; }
.rail a {
    display: block;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    border-left: 2px solid var(--hair);
    padding: 7px 0 7px 14px;
    transition: color var(--t-fast) linear;
}
.rail a:hover, .rail a[aria-current] { color: var(--ink); }
.rail-n { font-variant-numeric: tabular-nums; }
/* The marker: one 2px bar that slides to the section in view (site.js sets --rail-y and --rail-h). */
.rail-mark {
    position: absolute;
    left: 0; top: 0;
    width: 2px; height: var(--rail-h, 38px);
    background: var(--mark);
    transform: translateY(var(--rail-y, 0));
    transition: transform var(--t-base) var(--ease), height var(--t-base) var(--ease);
}
.rail-mark[hidden] { display: none; }
@container page (min-width: 1024px) {
    .rail { display: block; position: sticky; top: 40px; padding-right: 40px; }
}
@container page (min-width: 768px) and (max-width: 1023px) {
    .rail {
        display: block;
        position: sticky; top: 0; z-index: 2;
        background: var(--canvas);
        border-bottom: 1px solid var(--hair);
        margin-bottom: 48px;
    }
    .rail ol { display: flex; gap: 0; }
    .rail li { flex: 0 0 auto; }
    .rail a { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 16px 8px; line-height: 24px; min-width: 44px; text-align: center; }
    .rail a[aria-current] { border-bottom-color: var(--mark); }
    .rail-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cols > .rail { grid-column: 1 / -1; }
    .cols > .rail ~ * { grid-column: 2; }
    .rail-mark { display: none; }
}

/* Breadcrumb in the rail: the way back from the band, travelling with the sticky
   rail. Desktop: above the section list. Tablet: at the start of the number row.
   Phone: the rail is hidden, and the scroll-up block takes over. */
.rail-crumbs { display: none; }
@container page (min-width: 768px) {
    .rail-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 15px; line-height: 22px; }
    .rail-crumbs a { display: inline-flex; align-items: center; padding: 0; border: 0; color: var(--ink); text-decoration: none; }
    .rail-crumbs a:hover { color: var(--link); }
    .rail-crumbs > :not(.rail-crumbs-sep) > span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
    .rail-crumbs-sep { color: var(--ink-2); }
}
@container page (min-width: 1024px) {
    .rail-crumbs { margin: 0 0 28px 16px; }
    .shelf-side .rail-crumbs { margin-left: 0; }
}
/* The Bookshelf's filter column is only sticky on desktop, so only there does it carry the trail. */
@container page (max-width: 1023px) { .shelf-side .rail-crumbs { display: none; } }
@container page (min-width: 768px) and (max-width: 1023px) {
    .rail { display: flex; align-items: center; }
    .rail-crumbs { flex: 0 0 auto; margin-right: 8px; padding-right: 16px; border-right: 1px solid var(--hair); }
    .rail .rail-crumbs a { min-height: 44px; padding-top: 3px; }

    .rail ol { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}

/* Sections */
.sec { padding-top: 80px; }
.sec-rule { height: 1px; background: var(--ink); transform-origin: 0 50%; }
.sec-n { padding-top: 16px; font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec h2 {
    margin: 6px 0 24px;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}
@container page (min-width: 768px) {
    .sec { padding-top: 72px; }
    .sec-n { padding-top: 20px; font-size: 17px; line-height: 26px; }
    .sec h2 { margin: 8px 0 40px; font-size: 34px; line-height: 40px; }
}
@container page (min-width: 1024px) {
    .sec { padding-top: 144px; }
    .sec-n { padding-top: 24px; font-size: 20px; line-height: 28px; }
    .sec h2 { margin: 8px 0 48px; font-size: 56px; line-height: 60px; letter-spacing: -0.02em; }
}

/* Reading text */
.sec > p:not([class]), .p { font-family: var(--font-read); font-size: 18px; line-height: 30px; margin-bottom: 18px; max-width: 640px; text-wrap: pretty; }
.say { font-family: var(--font-read); font-size: 24px; line-height: 34px; margin-bottom: 20px; max-width: 640px; text-wrap: pretty; }
.sec h3 { margin: 28px 0 10px; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.sec h2 + h3, .sec .pair h3 { margin-top: 0; }
@container page (min-width: 768px) {
    .sec > p:not([class]), .p { font-size: 20px; line-height: 32px; margin-bottom: 28px; }
    .say { font-size: 28px; line-height: 38px; margin-bottom: 28px; }
    .sec h3 { margin: 40px 0 12px; font-size: 20px; line-height: 28px; }
}
@container page (min-width: 1024px) {
    .sec > p:not([class]), .p { font-size: 21px; line-height: 34px; margin-bottom: 34px; }
    .say { font-size: 32px; line-height: 44px; margin-bottom: 36px; }
    .sec h3 { margin: 48px 0 14px; font-size: 22px; line-height: 30px; }
}

/* Link addresses and other typed text, in the interface face. */
code { font-family: var(--font-ui); font-size: 0.94em; overflow-wrap: anywhere; }

/* Term rows: name left, explanation right. */
.rows { border-top: 1px solid var(--ink); }
.rows > div { padding: 16px 0 18px; }
.rows > div + div { border-top: 1px solid var(--hair); }
.rows dt { font-size: 17px; line-height: 26px; font-weight: 500; }
.rows dd { margin-top: 4px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .rows > div { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 20px 0 22px; }
    .rows dt { font-size: 19px; line-height: 30px; }
    .rows dd { margin: 0; font-size: 19px; line-height: 30px; }
}

/* Hairline list */
.list { border-top: 1px solid var(--ink); }
.list li { font-family: var(--font-read); font-size: 17px; line-height: 27px; padding: 12px 0; text-wrap: pretty; }
.list li + li { border-top: 1px solid var(--hair); }
@container page (min-width: 1024px) {
    .list li { font-size: 19px; line-height: 30px; padding: 14px 0; }
}

/* Two lists side by side */
.pair { display: grid; gap: 40px; }
@container page (min-width: 1024px) {
    .pair { grid-template-columns: 340px 340px; gap: 20px; }
}

/* Numbered steps */
.steps { border-top: 4px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 18px 0; }
.steps li + li { border-top: 1px solid var(--ink); }
.steps .n { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps .t { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; }
@container page (min-width: 1024px) {
    .steps { border-top-width: 5px; }
    .steps li { grid-template-columns: 56px 1fr; padding: 22px 0; }
    .steps .n { font-size: 20px; }
    .steps .t { font-size: 34px; line-height: 40px; }
}
.after { margin-top: 24px; margin-bottom: 0; }
@container page (min-width: 1024px) { .after { margin-top: 32px; } }

/* Offers: ruled rows, name left, price right (Advisory). */
.offers { margin-top: 40px; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); }
.offer + .offer { border-top: 1px solid var(--hair); }
.offer { padding: 18px 0 24px; }
.offers .offer-h { margin: 0; display: block; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; font-weight: 500; }
.offer-price { display: block; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.offer p { margin-top: 12px; max-width: 600px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
.fine { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.after-offers { margin-top: 40px; }
.mail-big { margin-top: 28px; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
@container page (min-width: 1024px) {
    .offers { margin-top: 64px; border-top-width: 5px; }
    .offer { padding: 22px 0 30px; }
    .offer + .offer { border-top-color: var(--ink); }
    .offers .offer-h { display: flex; font-size: 28px; line-height: 34px; }
    .offer-price { font-size: 20px; line-height: 28px; }
    .offer p { margin-top: 14px; font-size: 19px; line-height: 30px; }
    .offer p:first-of-type { margin-top: 16px; }
    .fine { font-size: 16px; line-height: 24px; }
    .after-offers { margin-top: 48px; }
    .mail-big { margin-top: 40px; font-size: 28px; line-height: 34px; }
}

/* ---- Breadcrumb on second-level pages (articles, Hirsla support/privacy/legal):
   "← Index / Parent" in the band. The trail stops at the parent. Phone: 44px tap
   areas, and the band's top padding drops to 8px so the band keeps its height. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-left: -6px; font-size: 15px; line-height: 22px; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 6px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.crumbs a > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.band-sub { padding-top: 8px; }
@container page (min-width: 768px) {
    .band-sub { padding-top: 28px; }
    .crumbs ol { gap: 0 14px; margin-left: 0; }
    .crumbs li + li::before { margin-right: 14px; }
    .crumbs a { min-height: 0; padding: 0; }
    .crumbs a > span { padding-bottom: 3px; }
    .band-sub .band-title { margin-top: 96px; }
}
@container page (min-width: 1024px) {
    .band-sub .band-title { margin-top: 136px; }
}

/* Scroll-up way back (site.js adds it on every page but the home): appears after
   200px of scroll and a 40px move up, hides on the way down. Phone: always.
   Tablet: only where no rail carries the breadcrumb (the Thoughts list, the
   Bookshelf). Desktop: never; the way back sits in the left column instead. It repeats the band: "← Index", or "← Index / Parent" on
   second-level pages. Same colours in both modes. */
.up-index {
    position: fixed;
    z-index: 20;
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    display: flex;
    align-items: center;
    height: 44px;
    background: var(--band);
    color: var(--on-accent);
    border: 1px solid var(--canvas);
    font-size: 15px;
    line-height: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
.up-index a { display: flex; align-items: center; height: 100%; padding: 0 12px; color: inherit; text-decoration: none; }
.up-index a:first-child { padding-left: 18px; }
.up-index a:last-child { padding-right: 18px; }
.up-index-sep { opacity: 0.6; }
.up-index.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.up-index a:hover, .up-index a:focus-visible { color: var(--on-accent-link); }
.up-index a:focus-visible { outline-color: var(--on-accent); outline-offset: -4px; }
@media (min-width: 768px) {
    .up-index { top: 20px; left: 20px; }
    .up-index.with-rail { display: none; }
}
@media (min-width: 1024px) { .up-index { display: none; } }

/* ---- Book page (Unresolved): cover straddles the band edge. */
.band-cover { padding-bottom: calc((100cqw - 40px) / 2 + 40px); }
.cover-row { display: block; }
.cover { display: block; position: relative; z-index: 1; margin-top: -50%; }
.cover img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@container page (min-width: 768px) {
    .band-cover { padding-bottom: calc((100cqw - 256px) / 2 + 56px); }
    .cover-row { display: grid; }
}
@container page (min-width: 1024px) {
    .band-cover { padding-bottom: 422px; }
}
.main-book { padding-top: 28px; }
.buy-note { margin-top: 16px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.buy-note a { color: var(--link); }
.buy-note a:hover { color: var(--ink); }
.sec-first { padding-top: 80px; }
.rail-cta { margin-top: 28px; padding-left: 16px; font-size: 16px; line-height: 24px; }
.rail .rail-cta a { display: inline; padding: 0; border: 0; color: var(--link); text-decoration: underline; }
.rail .rail-cta a:hover { color: var(--ink); }
@container page (min-width: 768px) and (max-width: 1023px) { .rail-cta { display: none; } }
@container page (min-width: 1024px) {
    .main-book { padding-top: 40px; }
    .main-book .rail { top: 40px; margin-top: 202px; }
    .buy-note { margin-top: 18px; line-height: 22px; }
    .sec-first { padding-top: 112px; }
}

.pull { margin-top: 36px; font-family: var(--font-read); font-size: 24px; line-height: 34px; max-width: 640px; text-wrap: pretty; }
.say-end { margin-top: 36px; }
@container page (min-width: 1024px) {
    .pull { margin-top: 56px; font-size: 32px; line-height: 44px; }
    .say-end { margin-top: 56px; }
}

.parts { margin-top: 24px; border-top: 4px solid var(--ink); }
.parts li { display: grid; grid-template-columns: 32px 1fr; padding: 16px 0 20px; }
.parts li + li { border-top: 1px solid var(--ink); }
.parts .n { font-size: 15px; line-height: 28px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.parts-t { font-size: 22px; line-height: 28px; letter-spacing: -0.015em; font-weight: 500; }
.parts-d { margin-top: 6px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .parts { margin-top: 40px; border-top-width: 5px; }
    .parts li { grid-template-columns: 56px 1fr; padding: 22px 0 26px; }
    .parts .n { font-size: 20px; line-height: 40px; }
    .parts-t { font-size: 28px; line-height: 36px; }
    .parts-d { font-size: 19px; line-height: 30px; }
}

.excerpt-src { margin-bottom: 24px; font-family: var(--font-read); font-style: italic; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.excerpt { border-top: 1px solid var(--ink); padding-top: 24px; }
.excerpt p { margin-bottom: 20px; max-width: 640px; font-family: var(--font-read); font-size: 20px; line-height: 32px; text-wrap: pretty; }
.after-excerpt { margin-top: 36px; }
@container page (min-width: 1024px) {
    .excerpt-src { margin-bottom: 32px; font-size: 17px; line-height: 26px; }
    .excerpt { padding-top: 32px; }
    .excerpt p { margin-bottom: 34px; font-size: 24px; line-height: 38px; }
    .after-excerpt { margin-top: 56px; }
}

.praise { border-top: 1px solid var(--ink); }
.praise figure { margin: 0; padding: 22px 0 28px; }
.praise figure + figure { border-top: 1px solid var(--hair); }
.praise blockquote p { max-width: 640px; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.praise .praise-lead blockquote p { font-size: 24px; line-height: 34px; }
.praise figcaption { margin-top: 16px; font-size: 16px; line-height: 24px; font-weight: 500; }
.praise figcaption span { display: block; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--ink-2); }
@container page (min-width: 1024px) {
    .praise figure { padding: 28px 0 36px; }
    .praise blockquote p { font-size: 21px; line-height: 34px; }
    .praise .praise-lead blockquote p { font-size: 32px; line-height: 44px; }
    .praise figcaption { margin-top: 20px; font-size: 17px; }
}

.buy-end { padding-top: 96px; }
.buy-end h2 { margin: 20px 0 28px; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
@container page (min-width: 1024px) {
    .buy-end { padding-top: 176px; }
    .buy-end h2 { margin: 24px 0 40px; font-size: 48px; line-height: 54px; }
}

/* ---- App page (Hirsla) ------------------------------------------------ */

/* Screen: a screenshot clipped to a rounded rectangle with a 1px ring in the
   surrounding text colour at 14%. No bezel, notch or shadow (design system catalogue/components/app-blocks.html, Device).
   Phone radius is 13% of the width; screens are 390 x 844, hence 13% / 6%. */
.screen {
    display: block;
    border-radius: 13% / 6%;
    overflow: hidden;
    background: #e9e6df;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
    line-height: 0;
}
.screen img { width: 100%; height: auto; }
.screen-watch { border-radius: 24% / 20%; background: #000; }

/* Device: an export that carries its own iPhone, iPad or iPhone Duo frame on a
   transparent ground, so it takes no ring, radius or background of its own. */
.device { display: block; line-height: 0; }
.device img { width: 100%; height: auto; }
.device-wide { margin: 40px 0; }
@container page (min-width: 1024px) { .device-wide { margin: 48px 0; } }

/* Film: the promo film. The reader starts it; it never autoplays, and the
   browser loads nothing but the poster until then (preload="none"). */
.film { margin: 40px 0; }
.film video { display: block; width: 100%; height: auto; }
.film figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@container page (min-width: 1024px) { .film { margin: 48px 0; } }

/* Hero phones straddle the band edge. --ph is one phone's width. */
.band-app, .hero-row { --ph: calc((100cqw - 40px - 12px) / 2); }
.band-app { padding-bottom: calc(var(--ph) * 0.97 + 40px); }
.hero-row { display: block; }
.hero-phones { display: flex; align-items: flex-start; gap: 12px; margin-top: calc(var(--ph) * -0.97); position: relative; z-index: 1; color: var(--ink); }
.hero-phones > picture { flex: 0 0 var(--ph); }
.hero-phones > picture + picture { margin-top: 32px; }
@container page (min-width: 768px) {
    .band-app, .hero-row { --ph: min(336px, calc((100cqw - 256px - 28px) / 2)); }
    .band-app { padding-bottom: calc(var(--ph) * 0.97 + 56px); }
    .hero-row { display: grid; }
    .hero-phones { gap: 28px; }
    .hero-phones > picture + picture { margin-top: 64px; }
}
@container page (min-width: 1024px) {
    .band-app, .hero-row { --ph: 336px; }
    .band-app { padding-bottom: 397px; }
}
/* Hirsla from 1.2: the Mac window beside the iPhone, bottoms aligned. */
.hero-mac { align-items: flex-end; }
.hero-mac > picture:first-child { flex: 1 1 0; min-width: 0; }
.hero-mac > picture + picture { flex: 0 0 calc(var(--ph) * 0.62); margin-top: 0; }
.band .btn-row { margin-top: 28px; }
@container page (min-width: 1024px) { .band .btn-row { margin-top: 36px; } }

.sec-n span { margin-left: 0.75em; }

.samples { border-top: 4px solid var(--ink); }
.samples li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 0 16px; }
.samples li + li { border-top: 1px solid var(--hair); }
.samples-t { font-size: 19px; line-height: 26px; font-weight: 500; }
.samples-d { font-family: var(--font-read); font-size: 17px; line-height: 27px; color: var(--ink-2); }
.samples-m { font-size: 14px; line-height: 22px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container page (min-width: 1024px) {
    .samples { border-top-width: 5px; }
    .samples li { gap: 16px; padding: 18px 0 20px; }
    .samples-t { font-size: 22px; line-height: 30px; }
    .samples-d { font-size: 19px; line-height: 30px; }
    .samples-m { font-size: 15px; }
}

.beats { display: grid; gap: 32px; margin-bottom: 56px; }
.beats li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; color: var(--ink); }
.beats-n { font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec .beats h3 { margin: 6px 0 10px; font-size: 19px; line-height: 26px; }
.beats-d { font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@container page (min-width: 1024px) {
    .beats { grid-template-columns: repeat(3, 220px); gap: 20px; margin-bottom: 72px; }
    .beats li { display: block; }
    .beats-n { margin-top: 20px; }
    .sec .beats h3 { margin: 6px 0 14px; font-size: 22px; line-height: 30px; }
}

.sec .sub { margin-top: 0; }
.sec .sub-gap { margin-top: 56px; }
@container page (min-width: 1024px) { .sec .sub-gap { margin-top: 72px; } }
.kicker { margin-bottom: 24px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@container page (min-width: 1024px) { .kicker { font-size: 17px; } }
.pair-note { margin: -6px 0 12px; font-size: 15px; line-height: 22px; color: var(--ink-2); }

.screens { display: flex; gap: 16px; margin: 40px 0; color: var(--ink); }
.screens > picture { flex: 1 1 0; max-width: 165px; }
.screens-3 { gap: 12px; }
.screens-3 > picture { max-width: none; }
@container page (min-width: 768px) {
    .screens { gap: 20px; margin: 48px 0; }
    .screens > picture { flex: 0 0 220px; max-width: 220px; }
    .screens-3 > picture { flex: 1 1 0; }
}
@container page (min-width: 1024px) { .screens-3 > picture { flex: 0 0 220px; } }

.banner { display: block; margin-bottom: 32px; }
.banner img { width: 100%; height: auto; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-top: 1px solid var(--ink); }
.kinds li { padding: 12px 0; font-size: 17px; line-height: 26px; font-weight: 500; border-bottom: 1px solid var(--hair); }
.rows-gap { margin-top: 40px; }
@container page (min-width: 1024px) {
    .banner { margin-bottom: 48px; }
    .kinds li { padding: 14px 0; font-size: 20px; line-height: 30px; }
    .rows-gap { margin-top: 48px; }
}

.watches { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.watches figure { margin: 0; width: 150px; }
.watches figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
@container page (min-width: 1024px) {
    .watches { gap: 14px; }
    .watches figure { width: 336px; }
    .main-app .sec-first { padding-top: 0; }
}

.sign { margin-top: 8px; font-size: 28px; line-height: 36px; font-weight: 500; }
@container page (min-width: 1024px) { .sign { font-size: 32px; line-height: 40px; } }

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    min-height: 44px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-2); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 0 0 20px; font-family: var(--font-read); font-size: 17px; line-height: 27px; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
    .faq details[open] p { animation: faq-in 200ms var(--ease); }
    @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
}
@container page (min-width: 1024px) {
    .faq summary { padding: 18px 0; font-size: 22px; line-height: 30px; }
    .faq details p { padding: 0 40px 24px 0; font-size: 19px; line-height: 30px; }
}

.buy-end .p { margin-bottom: 24px; }
.close-links { margin-top: 32px; font-size: 16px; line-height: 28px; }
.close-fine { margin-top: 36px; max-width: 640px; }

/* ---- Utility pages and articles: smaller section heads, tighter rhythm. */
.read-util > .p:first-child { margin-top: 0; }
.sec-util { padding-top: 64px; }
.sec-util h2 { font-size: 30px; line-height: 36px; }
.band-meta { font-size: 15px; line-height: 22px; }
@container page (min-width: 1024px) {
    .sec-util { padding-top: 96px; }
    .sec-util h2 { margin: 8px 0 36px; font-size: 40px; line-height: 46px; }
    .band-meta { font-size: 15px; line-height: 22px; }
    .article > p:not([class]), .article .sec > p:not([class]) { max-width: 700px; }
    .sec-util > p:not([class]), .read-util > .p { margin-bottom: 26px; }
    .rail-util a { font-size: 15px; line-height: 22px; padding: 8px 0 8px 14px; }
}

/* ---- Articles (Thoughts) ------------------------------------------------ */
.band-meta time { display: block; }
.band-meta a { display: inline-block; margin-top: 4px; }
.article > p:not([class]) { margin-bottom: 18px; max-width: 640px; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.quote { margin: 32px 0; max-width: 640px; }
.quote p { font-family: var(--font-read); font-style: italic; font-size: 24px; line-height: 34px; text-wrap: pretty; }
.fig { margin: 28px 0 36px; }
.fig img { width: 100%; height: auto; }
.bul, .nlist { margin: 0 0 18px; display: grid; gap: 10px; max-width: 640px; }
.bul li, .nlist li { display: grid; grid-template-columns: 22px 1fr; font-family: var(--font-read); font-size: 18px; line-height: 30px; text-wrap: pretty; }
.bul li::before { content: "\2013"; font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); }
.nlist { counter-reset: n; }
.nlist li { counter-increment: n; grid-template-columns: 26px 1fr; }
.nlist li::before { content: counter(n); font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.olist { margin: 0 0 32px; border-top: 1px solid var(--ink); counter-reset: n; max-width: 700px; }
.olist li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; font-family: var(--font-read); font-size: 18px; line-height: 29px; text-wrap: pretty; }
.olist li + li { border-top: 1px solid var(--hair); }
.olist li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-ui); font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.back-to { margin-top: 64px; font-size: 16px; line-height: 24px; }
@container page (min-width: 1024px) {
    .article > p:not([class]) { margin-bottom: 26px; font-size: 21px; line-height: 34px; }
    .quote { margin: 48px 0; }
    .quote p { font-size: 34px; line-height: 44px; }
    .fig { margin: 40px 0; }
    .bul, .nlist { margin-bottom: 26px; gap: 14px; }
    .bul li, .nlist li { font-size: 21px; line-height: 34px; }
    .nlist li { grid-template-columns: 32px 1fr; }
    .bul li::before, .nlist li::before { line-height: 34px; }
    .olist { margin-bottom: 40px; }
    .olist li { grid-template-columns: 48px 1fr; padding: 14px 0; font-size: 21px; line-height: 32px; }
    .back-to { margin-top: 96px; }
}
.sec-util > p:not([class]) a, .article a { text-decoration-thickness: 1px; }

/* Thoughts index rows */
.t-intro { padding-bottom: 48px; }
.t-row { display: block; border-top: 1px solid var(--ink); padding: 20px 0 32px; color: var(--ink); text-decoration: none; transition: border-color var(--t-fast) linear; }
.t-row:hover { color: var(--ink); border-top-color: var(--mark); }
.t-row:hover .t-n { color: var(--ink); }
.t-n { display: block; font-size: 15px; line-height: 22px; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color var(--t-fast) linear; }
.t-title { display: block; margin-top: 6px; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.t-row:hover .t-title { color: var(--link); }
.t-d { display: block; margin-top: 10px; font-family: var(--font-read); font-size: 18px; line-height: 28px; text-wrap: pretty; }
.t-group { margin-top: 56px; border-top: 4px solid var(--ink); padding: 20px 0 24px; }
.t-group h2 { margin-top: 6px; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; font-weight: 500; }
@container page (min-width: 768px) {
    .t-row, .t-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
    .t-n { padding-top: 8px; }
}
@container page (min-width: 1024px) {
    .t-intro { padding-bottom: 72px; }
    .t-row { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); padding: 28px 0 56px; }
    .t-group { margin-top: 96px; grid-template-columns: minmax(0, 1fr) minmax(0, 700px); border-top-width: 5px; padding: 28px 0 36px; }
    .t-group .t-n { padding-top: 12px; }
    .t-intro .intro { max-width: 700px; }
    .t-n { font-size: 20px; line-height: 28px; }
    .t-title { margin-top: 0; font-size: 36px; line-height: 42px; }
    .t-d { margin-top: 16px; font-size: 19px; line-height: 30px; }
    .t-group h2 { margin-top: 0; font-size: 40px; line-height: 46px; }
}

/* ---- Bookshelf --------------------------------------------------------- */
.filters { margin-bottom: 40px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.filters[hidden] { display: block; visibility: hidden; } /* keeps its place, so nothing moves when the script shows it */
.filters-count { margin-bottom: 12px; }
.filters-box summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.filters-box[open] summary { margin-bottom: 4px; }
.filters-h { margin: 20px 0 8px; font-size: 15px; line-height: 22px; font-weight: 400; }
.filters-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.filters button {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--hair);
    background: none;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
    transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.filters button:hover { color: var(--ink); border-color: var(--ink-2); }
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
.filters-reset button, .shelf-empty button { min-height: 44px; padding: 0; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.shelf-empty { margin-top: 40px; font-family: var(--font-read); font-size: 18px; line-height: 30px; }
.shelf-empty button { background: none; font: inherit; cursor: pointer; }
.shelf[hidden] { display: none; }
.books li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0 16px; }
.books li + li { border-top: 1px solid var(--hair); }
.books li[hidden] { display: none; }
.book-t { color: var(--ink); text-decoration: none; font-size: 19px; line-height: 26px; }
.book-t:hover { color: var(--link); text-decoration: underline; }
.book-fin { font-size: 14px; line-height: 26px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.book-m { grid-column: 1 / -1; font-family: var(--font-read); font-size: 16px; line-height: 25px; color: var(--ink-2); }
.book-cols { color: var(--ink-2); }
@container page (min-width: 1024px) {
    .shelf-side { position: sticky; top: 40px; padding-right: 40px; }
    .filters { margin: 0; }
    .filters[hidden] { display: none; }
    .filters-box summary { display: none; }
    .filters-list:not(.filters-chips) { flex-direction: column; border-left: 1px solid var(--hair); gap: 0; }
    .filters-list:not(.filters-chips) button { min-height: 0; padding: 4px 0 4px 14px; border: 0; text-align: left; }
    .filters-list:not(.filters-chips) button[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--mark); }
    .filters-chips button { min-height: 0; padding: 2px 0; margin-right: 10px; border: 0; }
    .filters-chips button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--mark); }
    .books li { padding: 20px 0 22px; }
    .book-t { font-size: 21px; line-height: 28px; font-weight: 500; }
    .shelf h2 { font-size: 40px; line-height: 46px; }
    .book-fin { font-size: 15px; line-height: 30px; }
    .book-m { font-size: 18px; line-height: 28px; }
}
.shelf:first-child, .shelf.is-first { padding-top: 0; }

/* ---- 404 and Blackhole: one night page, the same in both modes. ------- */
html.night-page { background: var(--night); color-scheme: dark; }
.night { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--night); color: var(--on-accent); }
.night a { color: var(--on-accent); }
.night a:hover { color: var(--on-accent-link); }
.night :focus-visible { outline-color: var(--on-accent); }
.rings { position: absolute; left: -115px; top: -60px; width: 620px; height: 620px; pointer-events: none; }
.rings g { transform-origin: 450px 450px; transform: rotate(var(--a, 0deg)); animation: ring var(--d) linear infinite var(--dir); }
@keyframes ring { from { transform: rotate(var(--a, 0deg)); } to { transform: rotate(calc(var(--a, 0deg) + 360deg)); } }
.night-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; min-height: 100svh; padding-block: 20px 40px; }
.night-inner .band-back { align-self: flex-start; }
.night-main { max-width: 620px; padding-top: 420px; }
.night-label { margin-bottom: 14px; font-size: 15px; line-height: 22px; color: var(--on-accent-link); }
.night-text { margin-top: 24px; font-family: var(--font-read); font-size: 18px; line-height: 28px; text-wrap: pretty; }
.night-text a { color: var(--on-accent-link); }
.night-links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 17px; line-height: 27px; }
.night-links a { display: inline-block; min-height: 44px; padding-top: 8px; }
@container page (min-width: 1024px) {
    .rings { left: auto; right: -260px; top: -100px; width: 1100px; height: 1100px; }
    .night-inner { padding-block: 28px 96px; }
    .night-main { padding-top: 240px; }
    .night-text { margin-top: 32px; font-size: 21px; line-height: 34px; }
}

/* Closing line */
.closing { padding-top: 96px; }
.closing p { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
.closing .label { padding-bottom: 12px; font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 0; text-wrap: wrap; }
@container page (min-width: 1024px) {
    .closing { padding-top: 176px; }
    .closing .label { font-size: 20px; line-height: 28px; padding-bottom: 16px; }
    .closing p { font-size: 48px; line-height: 54px; }
}

/* ------------------------------------------------- home and home ending */

/* Content pages end on the full home after 120 / 160 / 200px. */
.ending { padding-top: 120px; }
@container page (min-width: 768px) { .ending { padding-top: 160px; } }
@container page (min-width: 1024px) { .ending { padding-top: 200px; } }

.home-head { padding-top: 40px; }
.name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 17px;
    line-height: 26px;
    padding-bottom: 10px;
}
.name-row a { color: inherit; text-decoration: none; }
.name-role { font-size: 13px; line-height: 20px; color: var(--ink-2); text-align: right; }
.rule-5 { height: 4px; background: var(--ink); }
.home-head .display { margin-top: 28px; max-width: 1060px; }
.home-intro { margin-top: 20px; }
.home-intro .prose { font-size: 18px; line-height: 30px; }
.home-now { font-size: 15px; line-height: 23px; max-width: 520px; text-wrap: pretty; }
.home-now + .prose { margin-top: 18px; }
@container page (min-width: 768px) {
    .home-head { padding-top: 56px; }
    .name-row { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .name-role { font-size: 15px; line-height: 22px; }
    .rule-5 { height: 5px; }
    .home-head .display { margin-top: 48px; }
    .home-intro { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .home-intro .prose { font-size: 20px; line-height: 32px; }
    .home-now { font-size: 17px; line-height: 26px; }
    .home-now + .prose { margin-top: 24px; }
}
@container page (min-width: 1024px) {
    .home-head { padding-top: 72px; }
    .home-head .display { margin-top: 64px; }
    .home-intro { margin-top: 40px; }
    .home-intro .prose { font-size: 21px; line-height: 34px; }
}

/* The Index: six tiles. */
.tiles {
    padding-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 20px;
    align-items: end;
}
.tile-wide { grid-column: 1 / -1; }
.tile-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.tile-link > .tile-frame { margin-top: auto; } /* names of different lengths: the frames in a row still line up */
.tile-link:hover, .tile-link:focus-visible { color: var(--link); }
.tile-name { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; padding-bottom: 8px; }
/* What the tile is, in one quiet word: the same rhythm as the name row above the grid. */
.tile-kind { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.tile-frame {
    display: block;
    container: tile / inline-size;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-top: 4px solid currentColor;
    background: var(--tile);
    transition: border-color var(--t-fast) linear;
}
.tile-wide .tile-frame { aspect-ratio: 350 / 330; }
/* The miniature: the real page top at its own layout width, scaled to fit the tile. */
.mini {
    display: block;
    container: page / inline-size;
    position: absolute;
    top: 0; left: 0;
    width: 390px;
    height: 600px;
    transform-origin: 0 0;
    transform: scale(tan(atan2(100cqw, 390px)));
    background: var(--canvas);
    color: var(--ink);
    pointer-events: none;
}
@container page (min-width: 768px) {
    .tiles { padding-top: 96px; gap: 64px 20px; }
    .tile-name { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .tile-kind { font-size: 15px; line-height: 22px; }

    .tile-frame { aspect-ratio: 520 / 360; border-top-width: 5px; }
    .tile-wide .tile-frame { aspect-ratio: 1060 / 440; }
    .mini { width: 1440px; height: 1000px; transform: scale(tan(atan2(100cqw, 1440px))); }
}
@container page (min-width: 1024px) {
    .tiles { padding-top: 144px; }
}

/* Inside a miniature: show the rail as it looks with the first section active. */
.mini .rail { position: static; }
.mini .rail li > span { display: block; color: var(--ink-2); font-size: 16px; line-height: 24px; border-left: 2px solid var(--hair); padding: 7px 0 7px 14px; }
.mini .rail li:first-child > span { color: var(--ink); border-left-color: var(--mark); }
.mini .rail-mark { display: none; }

/* Playground */
.playground { padding-top: 72px; }
.playground h2 { font-size: 17px; line-height: 26px; font-weight: 400; padding-bottom: 12px; }
.playground .prose { margin-bottom: 24px; max-width: 640px; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.pg-list { border-top: 1px solid var(--ink); }
.pg-list a {
    display: block;
    padding: 14px 0;
    font-size: 19px;
    line-height: 28px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
}
.pg-list a > span { display: block; transition: transform var(--t-fast) var(--ease); }
.pg-list a:hover { color: var(--link); }
.pg-list a:hover > span { transform: translateX(8px); }
.pg-d { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
@container page (min-width: 768px) {
    .playground { padding-top: 144px; }
    .playground h2 { font-size: 20px; line-height: 28px; padding-bottom: 14px; }
    .playground .prose { margin-bottom: 32px; font-size: 19px; line-height: 30px; }
    .pg-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 20px; }
    .pg-list a { padding: 16px 0; font-size: 24px; line-height: 30px; }
    .pg-d { font-size: 16px; line-height: 24px; min-height: 48px; }
}

/* Footer */
.foot { padding-block: 72px 40px; font-size: 15px; line-height: 26px; }
.foot-rule { display: none; height: 1px; background: var(--ink); }
.foot h2 { font-size: 17px; line-height: 26px; font-weight: 400; padding-bottom: 8px; }
.foot-meta { padding-top: 36px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.foot-meta strong { display: block; font-weight: 400; }
@container page (min-width: 768px) {
    .foot { padding-block: 120px 72px; }
    .foot-rule { display: block; }
    .foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 36px; }
    .foot h2 { font-size: 20px; line-height: 28px; padding-bottom: 12px; }
    .foot-meta { padding-top: 0; font-size: 15px; line-height: 26px; }
    .foot-meta strong { font-size: 20px; line-height: 28px; padding-bottom: 12px; color: var(--ink); }
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    /* Plain navigations: a short crossfade. */
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
    /* All page transitions run 360 ms on the design-system ease (vt.js sets a
       class on <html> for the kind of move, and --vt-x/y/s for the tile's box). */
    ::view-transition-group(*) { animation-duration: 360ms; animation-timing-function: var(--ease); }

    /* in: the whole new page grows out of the clicked tile, as one picture. */
    html.vt-in::view-transition-new(root) { transform-origin: 0 0; animation: vt-grow 360ms var(--ease) both; }
    html.vt-in::view-transition-old(root) { animation: vt-fade 360ms linear both; }
    @keyframes vt-grow { from { transform: translate(var(--vt-x), var(--vt-y)) scale(var(--vt-s)); } }

    /* out: the page shrinks back into its tile on the Index and melts into it. */
    html.vt-out::view-transition-old(root) { z-index: 1; transform-origin: 0 0; animation: vt-shrink 360ms var(--ease) both; }
    html.vt-out::view-transition-new(root) { animation: none; }
    @keyframes vt-shrink {
        70% { opacity: 1; }
        to { transform: translate(var(--vt-x), var(--vt-y)) scale(var(--vt-s)); opacity: 0; }
    }
    @keyframes vt-fade { to { opacity: 0; } }

    /* row: a Thoughts row grows into the article's band and its title travels
       into the headline. row-out: the band shrinks back into the row. */
    ::view-transition-group(vt-row) { overflow: clip; }
    html.vt-row-in::view-transition-old(vt-row) { display: none; }
    html.vt-row-in::view-transition-new(vt-row) { inset: 0 auto auto 0; width: 100%; height: auto; animation: none; }
    html.vt-row-in::view-transition-old(vt-title) { display: none; }
    html.vt-row-in::view-transition-new(vt-title) { animation: none; }
    html.vt-row-in::view-transition-old(root) { animation: vt-fade 160ms linear both; }
    html.vt-row-in::view-transition-new(root) { animation: vt-appear 200ms linear 160ms both; }
    @keyframes vt-appear { from { opacity: 0; } }
    html.vt-row-out::view-transition-old(vt-row) { inset: 0 auto auto 0; width: 100%; height: auto; animation: vt-fade-late 360ms linear both; }
    html.vt-row-out::view-transition-new(vt-row),
    html.vt-row-out::view-transition-new(vt-title) { animation: vt-appear 120ms linear 240ms both; }
    html.vt-row-out::view-transition-old(vt-title) { animation: vt-fade-late 360ms linear both; }
    html.vt-row-out::view-transition-old(root) { animation: vt-fade 160ms linear both; }
    html.vt-row-out::view-transition-new(root) { animation: none; }
    @keyframes vt-fade-late { 65% { opacity: 1; } to { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Agent figure (design system web/components/agent-figure/): an illustration of how an agent
   works, one per story, after the section it explains. The stage is sharp like
   the page; everything inside is rounded (the only rounding on the site), so it
   reads as a picture of software, not as part of the site. Sizes are in em, so
   font-size scales the whole figure. Three modes: exchange (a conversation),
   measure (a page is scanned, one element flagged and filed), ledger (where
   the output lands). Without JS, under reduced motion and in print it shows its
   end state; site.js steps it through (300 ms steps, 1.5 s apart) once it is
   40% in view. The stage is aria-hidden; a hidden transcript carries the story. */
.agf {
    --agf-stage: #ffffff; --agf-sub: #5a564f; --agf-line: #d6d3cd; --agf-tint: #eceef8;
    --agf-on: #f7f6ff; --agf-on-soft: rgba(247, 246, 255, 0.2); --agf-link: #26357a;
    --agf-block: #e6e4de; --agf-phone: #141414; --agf-scan: rgba(38, 53, 122, 0.12);
    margin: 48px 0 8px;
    font-size: 16px;
    line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
    .agf {
        --agf-stage: #1e1e1c; --agf-sub: #a8a399; --agf-line: #33312e; --agf-tint: #272b45;
        --agf-link: #aab4f0; --agf-block: #33312e; --agf-phone: #0b0b0b; --agf-scan: rgba(170, 180, 240, 0.16);
    }
}
@container page (max-width: 767px) { .agf { font-size: 13px; } }
.agf-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10 / 7;
    min-height: 30em;
    padding: 1.75em 2em;
    background: var(--agf-stage);
    color: var(--ink);
}
@container page (max-width: 767px) { .agf-stage { aspect-ratio: auto; padding: 1.5em 1.25em; } }
.agf-cap { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 0.5em; font-size: 0.875em; line-height: 1.5; color: var(--ink-2); }
.agf-btn { min-width: 44px; min-height: 44px; padding: 0 0.5em; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.agf-btn[hidden] { display: none; }
.agf-pill { display: inline-flex; align-items: center; gap: 0.5em; border-radius: 999px; padding: 0.35em 0.9em 0.35em 0.5em; font-weight: 500; }
.agf-pill::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: currentColor; }
.agf-pill-a { background: var(--accent); color: var(--agf-on); }
.agf-pill-b { background: var(--agf-tint); }
.agf-pill-b::before { background: var(--agf-link); }

/* Exchange */
.agf-ex { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }

.agf-ex-head { display: flex; justify-content: space-between; gap: 1em; }
.agf-msg { max-width: 70%; padding: 0.75em 1em; border-radius: 1.25em 1.25em 1.25em 0.4em; background: var(--accent); color: var(--agf-on); align-self: flex-start; text-wrap: pretty; overflow-wrap: anywhere; }
.agf-msg-b { align-self: flex-end; border-radius: 1.25em 1.25em 0.4em 1.25em; background: var(--agf-tint); color: var(--ink); }
.agf-dots { display: flex; gap: 0.4em; padding: 0.5em 0.25em; }
.agf-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--agf-link); animation: agf-pulse 1.2s infinite; }
.agf-dots i:nth-child(2) { animation-delay: 0.2s; }
.agf-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes agf-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Measure */
.agf-me { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-phone { position: relative; flex: none; width: 13em; height: 23em; overflow: hidden; border: 0.55em solid var(--agf-phone); border-radius: 2.4em; background: var(--agf-stage); }
.agf-bar { display: block; height: 0.6em; border-radius: 0.4em; background: var(--agf-block); }
.agf-phone-top { display: flex; justify-content: space-between; margin: 1.4em 1em 0; }
.agf-phone-top .agf-bar { width: 4em; height: 0.65em; }
.agf-phone-top .agf-bar + .agf-bar { width: 1.3em; }
.agf-h { position: relative; margin: 1.6em 1em 0; font-size: 1.55em; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.agf-box { position: absolute; inset: -0.3em -0.45em; border: 0.15em solid var(--agf-link); border-radius: 0.5em; }
.agf-badge { display: inline-block; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--agf-link); color: var(--agf-stage); font-size: 0.8em; line-height: 1.4em; text-align: center; font-weight: 500; }
.agf-h .agf-badge { position: absolute; right: -0.6em; top: -0.75em; font-size: 0.55em; }
.agf-phone .agf-bar.l1 { margin: 1.4em 1em 0; }
.agf-phone .agf-bar.l2 { width: 68%; margin: 0.5em 1em 0; }
.agf-phone .agf-bar.l3 { height: 2.4em; margin: 1.5em 1em 0; border-radius: 1.2em; }
.agf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin: 1.1em 1em 0; }
.agf-cards .agf-bar { height: 4.8em; border-radius: 0.9em; }
.agf-cards .agf-bar + .agf-bar { margin-top: 1em; }
.agf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2.1em; background: var(--agf-scan); border-bottom: 0.12em solid var(--agf-link); opacity: 0; }
.agf-side { display: flex; flex: 1; flex-direction: column; gap: 1em; min-width: 14em; }
.agf-flag { padding: 0.9em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-flag-t { display: flex; align-items: center; gap: 0.6em; font-weight: 500; }
.agf-sub { margin-top: 0.2em; color: var(--agf-sub); }
.agf-ticket { padding: 0.9em 1em; border-radius: 1em; background: var(--accent); color: var(--agf-on); }
.agf-ticket-t { display: flex; justify-content: space-between; gap: 0.6em; font-weight: 500; }
.agf-tag { padding: 0 0.8em; border-radius: 999px; background: var(--agf-on); color: var(--accent); font-size: 0.85em; line-height: 1.7em; font-weight: 500; }
.agf-shot { display: block; height: 2.6em; margin-top: 0.7em; border-radius: 0.6em; background: var(--agf-on-soft); }

/* Ledger */
.agf-le { display: flex; flex-direction: column; gap: 0.7em; height: 100%; }
.agf-le-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 0.5em; }
.agf-le-head .agf-chip { padding: 0.3em 0.9em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-le-head .agf-sub { margin: 0; text-align: right; }
.agf-row { display: flex; align-items: center; gap: 0.9em; padding: 0.85em 1em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-row-tag { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--agf-tint); font-weight: 500; font-size: 0.9em; }
.agf-row-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agf-state { position: relative; flex: none; width: 4.8em; height: 1.8em; }
.agf-state span { position: absolute; inset: 0; border-radius: 999px; text-align: center; line-height: 1.8em; transition: opacity 300ms ease-out; }
.agf-open { background: var(--accent); color: var(--agf-on); }
.agf-closed { background: var(--agf-block); }

.agf-row[data-close] .agf-open { opacity: 0; }
.agf-row[data-close] .agf-closed { opacity: 1; }
.agf-note { margin-top: auto; padding: 0.8em 1em; border-radius: 0.9em; background: var(--agf-tint); text-wrap: pretty; }

/* App (a phone runs through its screens; a step list beside it marks the current one).
   Screens are stacked in order and each covers the one before, so the end state
   shows the last screen. */
.agf-app { display: flex; flex-wrap: wrap; gap: 2em 2.5em; align-items: center; justify-content: center; height: 100%; }
.agf-app .agf-phone { width: 14em; height: 26em; }
.agf-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--agf-stage); font-size: 0.8em; }
.agf-scr-page { flex: 1; padding: 2em 1.2em 0; opacity: 0.45; }
.agf-scr-page .agf-bar { margin-top: 0.7em; }
.agf-sheet { padding: 1.1em 1.1em 1.6em; border-radius: 1.4em 1.4em 0 0; background: var(--agf-tint); }
.agf-sheet-t { font-weight: 500; }
.agf-sheet-link { margin-top: 0.6em; padding: 0.6em 0.8em; border-radius: 0.8em; background: var(--agf-stage); }
.agf-apps { display: flex; justify-content: space-between; margin-top: 1em; }
.agf-apps span { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 0.9em; background: var(--agf-block); font-size: 0.85em; }
.agf-apps .agf-apps-me { background: var(--accent); color: var(--agf-on); font-weight: 500; }
.agf-scr-head { padding: 2.2em 1.1em 0.9em; border-radius: 0 0 1.2em 1.2em; background: var(--agf-phone); color: var(--agf-on); font-family: var(--font-read); font-size: 1.35em; }
.agf-scr-body { flex: 1; padding: 0.9em 0.8em 0; }
.agf-card { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-card + .agf-card, .agf-card + .agf-bar { margin-top: 0.6em; }
.agf-card-i { flex: none; width: 1.8em; height: 1.8em; border-radius: 0.5em; background: var(--agf-stage); }
.agf-card-t { flex: 1; min-width: 0; }
.agf-card-t b { display: block; font-weight: 500; }
.agf-card-t span { display: block; color: var(--agf-sub); font-size: 0.9em; }
.agf-card-n { flex: none; color: var(--agf-sub); font-size: 0.85em; }
.agf-card-dim { opacity: 0.6; }
.agf-ask { margin: 2.2em 0.8em 0; padding: 0.7em 0.9em; border-radius: 0.9em; background: var(--agf-tint); }
.agf-ans { margin: 0.8em 0.8em 0; overflow: hidden; border-radius: 0.9em; border: 1px solid var(--agf-line); }
.agf-ans-h { padding: 0.45em 0.9em; background: var(--agf-phone); color: var(--agf-on); font-size: 0.8em; font-weight: 500; letter-spacing: 0.06em; }
.agf-ans-t { padding: 0.7em 0.9em; }
.agf-ans .agf-card { margin: 0 0.6em; }
.agf-ans-f { padding: 0.6em 0.9em; color: var(--agf-sub); font-size: 0.85em; }
.agf-tabs { display: flex; gap: 0.3em; margin: auto 0.8em 1.2em; padding: 0.3em; border-radius: 1.1em; background: var(--agf-phone); color: var(--agf-on); }
.agf-tabs span { flex: 1; padding: 0.5em 0; border-radius: 0.9em; text-align: center; }
.agf-tabs .agf-tab-on { background: var(--agf-stage); color: var(--ink); }
.agf-steps { display: flex; flex: 1; flex-direction: column; gap: 0.7em; min-width: 14em; }
.agf-step { display: flex; gap: 0.7em; padding: 0.75em 0.9em; border: 1px solid var(--agf-line); border-radius: 1em; transition: border-color 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out; }
.agf-step .agf-badge { margin-top: 0.1em; }
.agf-step-t { font-weight: 500; }
.agf-on .agf-step.is-now { border-color: var(--agf-link); box-shadow: inset 0 0 0 1px var(--agf-link); }

/* Build (a brief becomes a wireframe: the key points are pulled out, then the
   blocks arrive one by one with the real copy in them). */
.agf-bd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5em; align-items: start; height: 100%; }
@container page (max-width: 767px) { .agf-bd { grid-template-columns: minmax(0, 1fr); } }
.agf-doc { padding: 1em; border: 1px solid var(--agf-line); border-radius: 1em; font-size: 0.85em; }
.agf-doc p + p { margin-top: 0.5em; }
.agf-doc .agf-chip { display: inline-block; margin-bottom: 0.7em; padding: 0.2em 0.8em; border-radius: 999px; background: var(--agf-tint); font-weight: 500; }
.agf-pulled { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.9em; }
.agf-pulled span { padding: 0.2em 0.7em; border-radius: 999px; background: var(--accent); color: var(--agf-on); }
.agf-wf { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em; border: 1px solid var(--agf-line); border-radius: 1em; }
.agf-wf-top { display: flex; gap: 0.35em; }
.agf-wf-top i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--agf-block); }
.agf-blk { padding: 0.7em 0.8em; border-radius: 0.6em; background: var(--agf-block); }
.agf-blk-l { display: block; color: var(--agf-sub); font-size: 0.75em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.agf-blk-h { display: block; margin-top: 0.2em; font-size: 1.15em; font-weight: 500; line-height: 1.2; }
.agf-blk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; margin-top: 0.4em; font-size: 0.85em; }
.agf-blk-row span { padding: 0.4em 0.5em; border-radius: 0.4em; background: var(--agf-stage); }
.agf-verify { padding: 0 0.5em; border-radius: 999px; background: var(--agf-tint); color: var(--agf-link); font-size: 0.8em; font-weight: 500; }
.agf-cta { display: inline-block; margin-top: 0.4em; padding: 0.35em 1em; border-radius: 999px; background: var(--accent); color: var(--agf-on); font-size: 0.9em; }
.agf-bd .agf-note { grid-column: 1; margin-top: 0; }
.agf-bd .agf-wf { grid-row: span 2; }


/* Steps: only while site.js plays the figure (.agf-on). */
.agf [data-s], .agf-scan { transition: opacity 300ms ease-out, transform 300ms ease-out; }
.agf-on [data-s]:not(.is-in) { opacity: 0; transform: translateY(0.4em); }
.agf-on .agf-ticket[data-s]:not(.is-in) { transform: translateX(-0.6em); }
.agf-on[data-step="1"] .agf-scan { opacity: 1; transform: translateY(19em); transition: transform 1.4s ease-out, opacity 300ms ease-out; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-open { opacity: 1; }
.agf-on .agf-row[data-close]:not(.is-closed) .agf-closed { opacity: 0; }
@media print {
    .agf-on [data-s] { opacity: 1 !important; transform: none !important; }
    .agf-btn { display: none; }
}

/* --------------------------------------------------------- forced colours */

@media (forced-colors: active) {
    .up-index { border-color: CanvasText; }
    .agf-stage { border: 1px solid CanvasText; }
    .agf-msg, .agf-ticket, .agf-row, .agf-flag, .agf-note, .agf-pill, .agf-card, .agf-blk, .agf-step { border: 1px solid CanvasText; }
    .agf-on .agf-step.is-now { border-width: 3px; }
    .rule-5, .sec-rule, .foot-rule { background: CanvasText; }
    .band { border-bottom: 1px solid CanvasText; }
    .rail a[aria-current] { border-left-color: Highlight; }
    .rail-mark { forced-color-adjust: none; background: Highlight; }
    .rail a { border-bottom-color: Canvas; }
    .rail a[aria-current] { border-bottom-color: Highlight; }
    .filters button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .btn { border: 1px solid ButtonText; }
}