/* Shelf's design tokens: the only file where a colour, font, length, duration
   or effect is written as a value. styles.css builds every component from
   these names, and `npm run lint:css` fails on a raw value there or on a name
   that isn't defined here. The rules for choosing between them are in
   docs/design/ (start at DESIGN.md).

   Each token holds its light value on :root; the dark blocks at the end set
   its dark value, following the system's setting or the theme switch's
   choice set on <html data-theme>. Safari/iOS 16.2 is the oldest browser the
   page supports (color-mix() is the newest feature it needs). */

/* Archivo is used at one weight and width (400, 100%), so the file is the
   variable font pinned there (fontTools instancer): 15 KB instead of 90. */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-stretch: 100%; font-display: block; }

:root {
  color-scheme: light dark;

  /* ---------- Colour: the materials ----------
     B's world: grey binder's board, Bookends cloths with named roles (library
     blue the product, bottle green the features, brass the one action),
     pasted paper labels. */
  --color-board: #E2E0DB;
  --color-label: #FFFFFF;
  --color-label-hover: color-mix(in oklch, var(--color-label) 90%, var(--color-ink));
  --color-ink: #1C1A17;
  --color-ink-muted: #57524B;
  --color-hairline: #C9C5BE;
  --color-field-edge: #8E8B87;
  --color-critical: #A8322B;
  --color-selection: color-mix(in oklch, var(--color-cloth-blue) 24%, transparent);
  --color-cloth-blue: #2C5F7C;
  --color-cloth-green: #3F5F3A;
  --color-on-cloth: #FFFFFF;
  --color-on-cloth-muted: #E7E2DA;
  --color-brass: #D9A84E;
  --color-brass-hover: color-mix(in oklch, var(--color-brass) 88%, #000000);
  --color-on-brass: #1C1A17;
  /* The Bookends mark's three spines. */
  --color-spine-1: #7A3E2E;
  --color-spine-2: #3F5F3A;
  --color-spine-3: #2C5F7C;

  /* ---------- Colour: the drawn devices and the captures ---------- */
  --color-bezel: #121212;
  --color-glass: #000000;
  --color-hw-frame: #2C2C2C;
  --color-hw-edge: #7E7E7E;
  --color-hw-lens: #1C1C1C;
  --color-scrim: color-mix(in oklch, #121212 72%, transparent);
  --color-on-scrim: #FFFFFF;
  /* The Reddit captures are shots of Reddit's light UI, so their paper stays white. */
  --color-capture-paper: #FFFFFF;
  --color-capture-rule: rgba(18, 18, 18, 0.08);

  /* ---------- Surfaces ---------- */
  /* Paper pasted flat on board or cloth (B), and paper lifted off the board (the readers cards). */
  --shadow-paper: 0 0 0 1px rgba(28, 26, 23, 0.12), 0 1px 1px rgba(28, 26, 23, 0.10);
  --shadow-card: 0 0 0 1px rgba(28, 26, 23, 0.06), 0 2px 4px rgba(28, 26, 23, 0.05), 0 18px 44px rgba(28, 26, 23, 0.12);
  --shadow-device: 0 2px 6px rgba(0, 0, 0, 0.25), 0 30px 60px rgba(0, 0, 0, 0.30);
  /* The feature collages: an iPad screen, the phones beside it, the front phone of three. */
  --shadow-collage-pad: 0 0 0 1px var(--color-hairline), 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-collage-phone: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-collage-phone-front: 0 14px 40px rgba(0, 0, 0, 0.18);
  /* Field rings: the 1px edge doubled to 2px. */
  --ring-field-focus: 0 0 0 1px var(--color-ink);
  --ring-field-critical: 0 0 0 1px var(--color-critical);
  /* Paints over the browser's autofill tint with the field's own paper. */
  --ring-autofill: 0 0 0 100px var(--color-label) inset;
  --filter-card-dim: none;
  /* Cloth: a fine plain weave laid over the cloth colour. */
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95 0.035' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.16 0 0 0 -0.04'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.95' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.22 0 0 0 -0.05'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  /* The endpaper: Bookends marks printed on the blue cloth. */
  --texture-endpaper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='translate(12 14) scale(0.62)'%3E%3Cpath d='M0 40V28a12 12 0 0 1 12-12v24Z'/%3E%3Crect x='14' y='0' width='7' height='40' rx='1.2'/%3E%3Crect x='22.5' y='6' width='6' height='34' rx='1.2'/%3E%3Crect x='30' y='3' width='6.5' height='37' rx='1.2'/%3E%3Cpath d='M50.5 40V28a12 12 0 0 0-12-12v24Z'/%3E%3C/g%3E%3Cg transform='translate(68 70) scale(0.62)'%3E%3Cpath d='M0 40V28a12 12 0 0 1 12-12v24Z'/%3E%3Crect x='14' y='0' width='7' height='40' rx='1.2'/%3E%3Crect x='22.5' y='6' width='6' height='34' rx='1.2'/%3E%3Crect x='30' y='3' width='6.5' height='37' rx='1.2'/%3E%3Cpath d='M50.5 40V28a12 12 0 0 0-12-12v24Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --texture-endpaper-tile: 112px 112px;

  /* ---------- Dye bleed ----------
     Where the board meets a cloth, the cloth's dye bleeds into the board and
     the board into the cloth, so there is no line between them
     (docs/design/surfaces.md). At the edge both sides are --color-bleed-*
     under the grain. The board side is a broad --color-wash-* plus a short
     ramp up to the edge colour; the cloth side runs on from the edge colour
     to the cloth. Both ramps are 1 - sin: steepest at the edge, flat where
     they end. The cloth ramp is longer by (1 - bleed) / (bleed - wash), about
     2.8x, so the slope is the same on both sides of the edge. On the cloth
     the weave fades in from the edge while the grain fades out. */
  /* The colour at the edge (35% cloth; 44% in dark), and the wash across the board (12%; 24% in dark). Muted text keeps 4.5:1 on up to about 19% cloth, so the steep part of a board ramp stays in the margin no text enters. On the cloth side the light captions need the cloth within about 12% of the edge colour, so the green band's ramp is kept to 102px, within the band's bottom padding (the lowest caption ends about 72-76px above the edge), and the readers ramp to 36px to match it. */
  --color-bleed-blue: color-mix(in oklch, var(--color-board) 65%, var(--color-cloth-blue));
  --color-bleed-green: color-mix(in oklch, var(--color-board) 65%, var(--color-cloth-green));
  --color-wash-blue: color-mix(in oklch, var(--color-board) 88%, var(--color-cloth-blue));
  --color-wash-green: color-mix(in oklch, var(--color-board) 88%, var(--color-cloth-green));
  /* Fine monochrome specks that dither the slow ramps so they don't band: white at 4%, black at 0.6%, weighted so the board's average colour doesn't move. */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='10 0 0 0 -4.5  10 0 0 0 -4.5  10 0 0 0 -4.5  0 0 0 0 1'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0.034 0 0 0 0.006'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* The green band rising out of the hero's foot, on the copy column and the swatch alike. */
  --texture-rise-green: linear-gradient(to top, var(--color-cloth-green) 0, color-mix(in oklab, var(--color-cloth-green) 93%, transparent) 56px, color-mix(in oklab, var(--color-cloth-green) 75%, transparent) 112px, color-mix(in oklab, var(--color-cloth-green) 50%, transparent) 168px, color-mix(in oklab, var(--color-cloth-green) 25%, transparent) 224px, color-mix(in oklab, var(--color-cloth-green) 7%, transparent) 280px, transparent 336px);
  /* Board sides: the copy column (blue below it on phones; blue to its right and green below on desktop), readers (green above), questions (blue below). The copy ramp is 90px: the hint above the edge sits 48px clear of it. */
  --texture-wash-copy: linear-gradient(to top, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 15px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 30px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 45px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 60px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 75px, transparent 90px), linear-gradient(to top, var(--color-wash-blue) 0, color-mix(in oklab, var(--color-wash-blue) 93%, transparent) 11.7%, color-mix(in oklab, var(--color-wash-blue) 75%, transparent) 23.3%, color-mix(in oklab, var(--color-wash-blue) 50%, transparent) 35%, color-mix(in oklab, var(--color-wash-blue) 25%, transparent) 46.7%, color-mix(in oklab, var(--color-wash-blue) 7%, transparent) 58.3%, transparent 70%);
  --texture-wash-readers: linear-gradient(to bottom, var(--color-bleed-green) 0, color-mix(in oklab, var(--color-bleed-green) 74%, transparent) 6px, color-mix(in oklab, var(--color-bleed-green) 50%, transparent) 12px, color-mix(in oklab, var(--color-bleed-green) 29%, transparent) 18px, color-mix(in oklab, var(--color-bleed-green) 13%, transparent) 24px, color-mix(in oklab, var(--color-bleed-green) 3%, transparent) 30px, transparent 36px), linear-gradient(to bottom, var(--color-wash-green) 0, color-mix(in oklab, var(--color-wash-green) 93%, transparent) 8.3%, color-mix(in oklab, var(--color-wash-green) 75%, transparent) 16.7%, color-mix(in oklab, var(--color-wash-green) 50%, transparent) 25%, color-mix(in oklab, var(--color-wash-green) 25%, transparent) 33.3%, color-mix(in oklab, var(--color-wash-green) 7%, transparent) 41.7%, transparent 50%);
  --texture-wash-faq: linear-gradient(to top, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 12px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 24px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 36px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 48px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 60px, transparent 72px), linear-gradient(to top, var(--color-wash-blue) 0, color-mix(in oklab, var(--color-wash-blue) 93%, transparent) 8.3%, color-mix(in oklab, var(--color-wash-blue) 75%, transparent) 16.7%, color-mix(in oklab, var(--color-wash-blue) 50%, transparent) 25%, color-mix(in oklab, var(--color-wash-blue) 25%, transparent) 33.3%, color-mix(in oklab, var(--color-wash-blue) 7%, transparent) 41.7%, transparent 50%);
  /* Cloth sides, under the weave: the swatch (from the copy column above it on phones), the green band (readers below), the endpaper (questions above). */
  --texture-bleed-swatch: var(--texture-rise-green), linear-gradient(to bottom, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 43px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 86px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 129px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 172px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 215px, transparent 258px);
  --texture-bleed-story: linear-gradient(to top, var(--color-bleed-green) 0, color-mix(in oklab, var(--color-bleed-green) 74%, transparent) 17px, color-mix(in oklab, var(--color-bleed-green) 50%, transparent) 34px, color-mix(in oklab, var(--color-bleed-green) 29%, transparent) 51px, color-mix(in oklab, var(--color-bleed-green) 13%, transparent) 68px, color-mix(in oklab, var(--color-bleed-green) 3%, transparent) 85px, transparent 102px);
  --texture-bleed-endpaper: linear-gradient(to bottom, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 34px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 68px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 102px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 136px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 170px, transparent 204px);
  /* Masks: where each cloth's weave fades in from a board edge (and from the hero's foot, so the copy column's flat green meets weave-free cloth), and the complement, where the grain fades out. */
  --texture-weave-in-swatch: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.07) 27px, rgb(0 0 0 / 0.25) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.75) 108px, rgb(0 0 0 / 0.93) 135px, black 162px), linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.07) 27px, rgb(0 0 0 / 0.25) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.75) 108px, rgb(0 0 0 / 0.93) 135px, black 162px);
  --texture-grain-out-swatch: linear-gradient(to bottom, black 0, rgb(0 0 0 / 0.93) 27px, rgb(0 0 0 / 0.75) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.25) 108px, rgb(0 0 0 / 0.07) 135px, transparent 162px), linear-gradient(to top, black 0, rgb(0 0 0 / 0.93) 27px, rgb(0 0 0 / 0.75) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.25) 108px, rgb(0 0 0 / 0.07) 135px, transparent 162px);
  --texture-weave-in-story: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.07) 27px, rgb(0 0 0 / 0.25) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.75) 108px, rgb(0 0 0 / 0.93) 135px, black 162px), linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.07) 27px, rgb(0 0 0 / 0.25) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.75) 108px, rgb(0 0 0 / 0.93) 135px, black 162px);
  --texture-grain-out-story: linear-gradient(to bottom, black 0, rgb(0 0 0 / 0.93) 27px, rgb(0 0 0 / 0.75) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.25) 108px, rgb(0 0 0 / 0.07) 135px, transparent 162px), linear-gradient(to top, black 0, rgb(0 0 0 / 0.93) 27px, rgb(0 0 0 / 0.75) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.25) 108px, rgb(0 0 0 / 0.07) 135px, transparent 162px);
  --texture-weave-in-endpaper: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.07) 24px, rgb(0 0 0 / 0.25) 48px, rgb(0 0 0 / 0.5) 72px, rgb(0 0 0 / 0.75) 96px, rgb(0 0 0 / 0.93) 120px, black 144px);
  --texture-grain-out-endpaper: linear-gradient(to bottom, black 0, rgb(0 0 0 / 0.93) 24px, rgb(0 0 0 / 0.75) 48px, rgb(0 0 0 / 0.5) 72px, rgb(0 0 0 / 0.25) 96px, rgb(0 0 0 / 0.07) 120px, transparent 144px);

  /* ---------- Radius ----------
     The app's Tokens.Radius (docs/design/type-space-motion.md in the Shelf
     app repo). A box nested inside another takes the outer
     radius less the gap between them, so the corners stay concentric. */
  --radius-card: 14px;
  --radius-field: 12px;
  --radius-pill: 999px;
  /* The brass button sits 6px inside the field (1px edge + 5px padding). */
  --radius-button: calc(var(--radius-field) - var(--inset-field));
  --radius-focus: 2px;
  --radius-collage-phone: 22px;

  /* ---------- Lines ---------- */
  --stroke: 1px;
  /* Dividers: one device pixel on high-density screens. */
  --rule: 1px;
  /* A ruled label's rule, drawn this far inside its edge. */
  --inset-rule: 6px;
  --focus-width: 2px;
  --focus-width-device: 3px;
  --spinner-width: 2px;
  --bezel-collage-phone: 5px;
  --underline-offset: 3px;

  /* ---------- Type ----------
     The locked page's faces: SF Pro Text for text, SF Pro Display for section
     headings and the readers stat, Archivo regular for the hero and readers headlines. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-headline: "Archivo", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-caption: 14px;
  --text-small: 15px;
  --text-body: 16px;
  --text-lede: 17px;
  --text-title: 18px;
  --text-section: clamp(32px, 4vw, 52px);
  --text-readers: clamp(32px, 4.2vw, 56px);
  --text-hero: 44px;
  --text-stat: clamp(56px, 7vw, 88px);
  --weight-regular: 400;
  --weight-semibold: 600;
  --leading-stat: 1;
  --leading-display: 1.06;
  --leading-title: 1.25;
  --leading-status: 1.3;
  --leading-question: 1.35;
  --leading-caption: 1.4;
  --leading-snug: 1.5;
  --leading-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-headline: -0.03em;
  --tracking-stat: -0.035em;
  --measure-lede: 34rem;
  --measure-feature: 30rem;
  --measure-answer: 40rem;

  /* ---------- Space ----------
     The closed spacing scale: --space-N is N px. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  /* The page's side margin: 16px on phones, growing to 64px on wide screens. */
  --gutter: 16px;
  --gutter-wide: clamp(24px, 4.4vw, 64px);
  --section-space: clamp(72px, 9vw, 128px);
  --hero-headline-space: var(--space-32);
  /* The join field's padding: the button sits 6px in, less the 1px edge. */
  --inset-field: 6px;
  /* Icons drawn off-centre in their box, nudged back: the play triangle and the hint's mark. */
  --optical-nudge: 3px;
  /* Hit areas past a control's drawn edge: text links and the segmented switch. */
  --hit-text: -12px -8px;
  --hit-seg: -3px 0;

  /* ---------- Size ---------- */
  /* The visually hidden box: one pixel, clipped. */
  --size-hidden: 1px;
  --size-tap: 44px;
  --size-seg: 40px;
  --size-field: 58px;
  --size-control: 46px;
  --size-control-stacked: 48px;
  --size-checkbox: 18px;
  --size-icon-sm: 16px;
  --size-icon-md: 18px;
  --size-icon-lg: 20px;
  --size-icon-xl: 24px;
  --size-play: 64px;
  --size-mark: 52px;
  --size-mark-sm: 36px;
  --size-bar: 56px;
  --size-hint: 24px;
  --size-question: 64px;
  --width-join: 440px;
  --width-content: 1312px;
  --width-board: 1080px;
  --width-colophon: 640px;
  --width-strip-card: 560px;
  --width-column-side: 360px;
  --width-column-faq: 760px;
  --width-device-ipad: 560px;
  --width-device-iphone: 400px;
  --height-screen: 100dvh;
  --height-hero: 100svh;
  /* On the desktop hero the devices are sized by the viewport's height. */
  --height-device-ipad: clamp(760px, 126svh, 1180px);
  --height-device-iphone: clamp(720px, 120svh, 1100px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-fade: ease;
  --ease-spin: linear;
  --duration-fast: 150ms;
  --duration-spin: 700ms;
  --scale-press: 0.97;
  --scale-press-arrow: 0.96;
  --opacity-pressed: 0.7;
  --opacity-disabled: 0.45;
  /* The entrance on a visit's first load (styles.css): each piece of the hero rises this far into place, starting a stagger after the one before. Under Reduce Motion it only fades, all at once. */
  --duration-enter: 450ms;
  --duration-enter-reduced: 200ms;
  --stagger-enter: 60ms;
  --distance-enter: 8px;
}

/* Dark values: every token that changes in dark, colours included. The same
   block twice: once for the theme switch's Dark, once for the system's dark
   when the switch is on System. `npm run lint:css` checks the two match. */
:root[data-theme="dark"] {
  --color-board: #151413;
  --color-label: #2B2823;
  --color-ink: #F2EEE6;
  --color-ink-muted: #C0B9AF;
  --color-hairline: #38342F;
  --color-field-edge: #7F7D78;
  --color-critical: #FF9C92;
  --color-cloth-blue: #1F4A62;
  --color-cloth-green: #2C4729;
  --color-on-cloth: #F6F1EA;
  --color-on-cloth-muted: #D8D0C4;
  --color-brass: #CFA04A;
  --color-spine-1: #E3A08C;
  --color-spine-2: #9DBB98;
  --color-spine-3: #8CC1DE;
  --color-bezel: #2E2B27;
  --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 1px 1px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95 0.035' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.1 0 0 0 -0.04'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.95' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.3 0 0 0 -0.05'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  --filter-card-dim: brightness(0.8);
  --color-bleed-blue: color-mix(in oklch, var(--color-board) 56%, var(--color-cloth-blue));
  --color-bleed-green: color-mix(in oklch, var(--color-board) 56%, var(--color-cloth-green));
  --color-wash-blue: color-mix(in oklch, var(--color-board) 76%, var(--color-cloth-blue));
  --color-wash-green: color-mix(in oklch, var(--color-board) 76%, var(--color-cloth-green));
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='10 0 0 0 -4.5  10 0 0 0 -4.5  10 0 0 0 -4.5  0 0 0 0 1'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  -0.031 0 0 0 0.035'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-board: #151413;
    --color-label: #2B2823;
    --color-ink: #F2EEE6;
    --color-ink-muted: #C0B9AF;
    --color-hairline: #38342F;
    --color-field-edge: #7F7D78;
    --color-critical: #FF9C92;
    --color-cloth-blue: #1F4A62;
    --color-cloth-green: #2C4729;
    --color-on-cloth: #F6F1EA;
    --color-on-cloth-muted: #D8D0C4;
    --color-brass: #CFA04A;
    --color-spine-1: #E3A08C;
    --color-spine-2: #9DBB98;
    --color-spine-3: #8CC1DE;
    --color-bezel: #2E2B27;
    --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 1px 1px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --texture-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95 0.035' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.1 0 0 0 -0.04'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.95' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.3 0 0 0 -0.05'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
    --filter-card-dim: brightness(0.8);
    --color-bleed-blue: color-mix(in oklch, var(--color-board) 56%, var(--color-cloth-blue));
    --color-bleed-green: color-mix(in oklch, var(--color-board) 56%, var(--color-cloth-green));
    --color-wash-blue: color-mix(in oklch, var(--color-board) 76%, var(--color-cloth-blue));
    --color-wash-green: color-mix(in oklch, var(--color-board) 76%, var(--color-cloth-green));
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='10 0 0 0 -4.5  10 0 0 0 -4.5  10 0 0 0 -4.5  0 0 0 0 1'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  -0.031 0 0 0 0.035'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (min-resolution: 2dppx) { :root { --rule: 0.5px; } }

/* Desktop hero (wide and tall enough): a larger headline set lower, and the lede a step up. */
@media (min-width: 960px) and (min-height: 620px) {
  :root {
    --text-hero: clamp(48px, min(5vw, 8vh), 72px);
    --text-lede: 18px;
    --hero-headline-space: clamp(40px, 9svh, 96px);
    /* The dye bleed turns with the hero: blue across the copy column's right edge, green rising under both columns. The copy ramp is 72px: the lede stops 40px short of the edge. */
    --texture-wash-copy: var(--texture-rise-green), linear-gradient(to left, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 12px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 24px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 36px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 48px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 60px, transparent 72px), linear-gradient(to left, var(--color-wash-blue) 0, color-mix(in oklab, var(--color-wash-blue) 93%, transparent) 11.7%, color-mix(in oklab, var(--color-wash-blue) 75%, transparent) 23.3%, color-mix(in oklab, var(--color-wash-blue) 50%, transparent) 35%, color-mix(in oklab, var(--color-wash-blue) 25%, transparent) 46.7%, color-mix(in oklab, var(--color-wash-blue) 7%, transparent) 58.3%, transparent 70%);
    --texture-bleed-swatch: var(--texture-rise-green), linear-gradient(to right, var(--color-bleed-blue) 0, color-mix(in oklab, var(--color-bleed-blue) 74%, transparent) 34px, color-mix(in oklab, var(--color-bleed-blue) 50%, transparent) 68px, color-mix(in oklab, var(--color-bleed-blue) 29%, transparent) 102px, color-mix(in oklab, var(--color-bleed-blue) 13%, transparent) 136px, color-mix(in oklab, var(--color-bleed-blue) 3%, transparent) 170px, transparent 204px);
    --texture-weave-in-swatch: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.07) 32px, rgb(0 0 0 / 0.25) 64px, rgb(0 0 0 / 0.5) 96px, rgb(0 0 0 / 0.75) 128px, rgb(0 0 0 / 0.93) 160px, black 192px), linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.07) 27px, rgb(0 0 0 / 0.25) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.75) 108px, rgb(0 0 0 / 0.93) 135px, black 162px);
    --texture-grain-out-swatch: linear-gradient(to right, black 0, rgb(0 0 0 / 0.93) 32px, rgb(0 0 0 / 0.75) 64px, rgb(0 0 0 / 0.5) 96px, rgb(0 0 0 / 0.25) 128px, rgb(0 0 0 / 0.07) 160px, transparent 192px), linear-gradient(to top, black 0, rgb(0 0 0 / 0.93) 27px, rgb(0 0 0 / 0.75) 54px, rgb(0 0 0 / 0.5) 81px, rgb(0 0 0 / 0.25) 108px, rgb(0 0 0 / 0.07) 135px, transparent 162px);
  }
}