/* The site's stylesheet. Generated by scripts/build-site-style.py from
   design/system/tokens.json (the tokens, both themes, no variant),
   design/system/spearhead.css (the components, without the Folio variant)
   and design/system/site.css (the site's own pieces). Do not edit: change
   those and rebuild. */

/* ---- tokens: design/system/tokens.json ---- */

:root, [data-theme="light"] {
  color-scheme: light;
  --paper: #f5efe2;
  --paper-raised: #fffdf7;
  --paper-sunk: #ebe3d0;
  --plate: #15110e;
  --on-plate: #efe6d2;
  --ink: #221d19;
  --ink-soft: #4a4038;
  --ink-muted: #6b6055;
  --line: #ddd3bf;
  --line-strong: #8a7e6c;
  --book: #9a2a1b;
  --book-fill: #b3321f;
  --on-book: #fffdf7;
  --book-soft: #f3ddd2;
  --tape: #7a5200;
  --tape-fill: #edb42f;
  --on-tape: #221d19;
  --tape-soft: #f7e8bb;
  --prayer: #1a4d6b;
  --prayer-fill: #1a4d6b;
  --on-prayer: #fffdf7;
  --prayer-soft: #dce8ee;
  --kit: #25593f;
  --kit-fill: #2f6d4f;
  --on-kit: #fffdf7;
  --kit-soft: #dbe9dd;
  --accent: var(--book);
  --link: var(--book);
  --link-visited: #6a3550;
  --mark: #fbe7a1;
  --focus: #1a4d6b;
  --rope-strand: #e2d5b6;
  --rope-key: #221d19;
  --flash-ink: #15110e;
  --flash-bone: #efe6d2;
  --flash-red: #c8432b;
  --flash-yellow: #edb42f;
  --flash-green: #2f6d4f;
  --dawn-coral: #f0876a;
  --dawn-peach: #f5c9a0;
  --dusk-indigo: #1d2a44;
  --die-white: #fbf6ea;
  --sky: #f4d0ae;
  --star: #f4d0ae00;
  --shadow-card: 0 2px 10px #5a3c2812;
  --shadow-popup: 0 14px 34px -12px #221d1966;
  --shadow-sticker: 0 1px 0 #15110e26, 0 7px 14px -7px #15110e66;
  --focus-ring: 0 0 0 2px #f5efe2, 0 0 0 4px #1a4d6b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12151d;
  --paper-raised: #1a1e29;
  --paper-sunk: #0c0e14;
  --plate: #07080b;
  --on-plate: #efe6d2;
  --ink: #ebe4d5;
  --ink-soft: #cdc5b4;
  --ink-muted: #9c9686;
  --line: #2a3040;
  --line-strong: #646c80;
  --book: #f08a73;
  --book-fill: #e8674f;
  --on-book: #12151d;
  --book-soft: #3a1f1c;
  --tape: #edb42f;
  --tape-fill: #edb42f;
  --on-tape: #12151d;
  --tape-soft: #382d12;
  --prayer: #8fbcdc;
  --prayer-fill: #8fbcdc;
  --on-prayer: #12151d;
  --prayer-soft: #18293a;
  --kit: #6fb58e;
  --kit-fill: #6fb58e;
  --on-kit: #12151d;
  --kit-soft: #172a20;
  --accent: var(--book);
  --link: var(--book);
  --link-visited: #c9a0bb;
  --mark: #5a4818;
  --focus: #edb42f;
  --rope-strand: #cfc6b0;
  --rope-key: #07080b;
  --flash-ink: #15110e;
  --flash-bone: #efe6d2;
  --flash-red: #c8432b;
  --flash-yellow: #edb42f;
  --flash-green: #2f6d4f;
  --dawn-coral: #f0876a;
  --dawn-peach: #f5c9a0;
  --dusk-indigo: #1d2a44;
  --die-white: #fbf6ea;
  --sky: #1b2946;
  --star: #efe6d2;
  --shadow-card: 0 0 0 1px #2a3040;
  --shadow-popup: 0 18px 40px -10px #000000d9;
  --shadow-sticker: 0 9px 18px -8px #000000e6;
  --focus-ring: 0 0 0 2px #12151d, 0 0 0 4px #edb42f;
}

/* With no data-theme on the root, follow the device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #12151d;
    --paper-raised: #1a1e29;
    --paper-sunk: #0c0e14;
    --plate: #07080b;
    --on-plate: #efe6d2;
    --ink: #ebe4d5;
    --ink-soft: #cdc5b4;
    --ink-muted: #9c9686;
    --line: #2a3040;
    --line-strong: #646c80;
    --book: #f08a73;
    --book-fill: #e8674f;
    --on-book: #12151d;
    --book-soft: #3a1f1c;
    --tape: #edb42f;
    --tape-fill: #edb42f;
    --on-tape: #12151d;
    --tape-soft: #382d12;
    --prayer: #8fbcdc;
    --prayer-fill: #8fbcdc;
    --on-prayer: #12151d;
    --prayer-soft: #18293a;
    --kit: #6fb58e;
    --kit-fill: #6fb58e;
    --on-kit: #12151d;
    --kit-soft: #172a20;
    --accent: var(--book);
    --link: var(--book);
    --link-visited: #c9a0bb;
    --mark: #5a4818;
    --focus: #edb42f;
    --rope-strand: #cfc6b0;
    --rope-key: #07080b;
    --flash-ink: #15110e;
    --flash-bone: #efe6d2;
    --flash-red: #c8432b;
    --flash-yellow: #edb42f;
    --flash-green: #2f6d4f;
    --dawn-coral: #f0876a;
    --dawn-peach: #f5c9a0;
    --dusk-indigo: #1d2a44;
    --die-white: #fbf6ea;
    --sky: #1b2946;
    --star: #efe6d2;
    --shadow-card: 0 0 0 1px #2a3040;
    --shadow-popup: 0 18px 40px -10px #000000d9;
    --shadow-sticker: 0 9px 18px -8px #000000e6;
    --focus-ring: 0 0 0 2px #12151d, 0 0 0 4px #edb42f;
  }
}

/* With data-weight="thin" on the root, an element with its own data-theme takes its page's theme instead. */
[data-weight="thin"] [data-theme] {
  color-scheme: inherit;
  --paper: inherit;
  --paper-raised: inherit;
  --paper-sunk: inherit;
  --plate: inherit;
  --on-plate: inherit;
  --ink: inherit;
  --ink-soft: inherit;
  --ink-muted: inherit;
  --line: inherit;
  --line-strong: inherit;
  --book: inherit;
  --book-fill: inherit;
  --on-book: inherit;
  --book-soft: inherit;
  --tape: inherit;
  --tape-fill: inherit;
  --on-tape: inherit;
  --tape-soft: inherit;
  --prayer: inherit;
  --prayer-fill: inherit;
  --on-prayer: inherit;
  --prayer-soft: inherit;
  --kit: inherit;
  --kit-fill: inherit;
  --on-kit: inherit;
  --kit-soft: inherit;
  --accent: inherit;
  --link: inherit;
  --link-visited: inherit;
  --mark: inherit;
  --focus: inherit;
  --rope-strand: inherit;
  --rope-key: inherit;
  --flash-ink: inherit;
  --flash-bone: inherit;
  --flash-red: inherit;
  --flash-yellow: inherit;
  --flash-green: inherit;
  --dawn-coral: inherit;
  --dawn-peach: inherit;
  --dusk-indigo: inherit;
  --die-white: inherit;
  --sky: inherit;
  --star: inherit;
  --shadow-card: inherit;
  --shadow-popup: inherit;
  --shadow-sticker: inherit;
  --focus-ring: inherit;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-label: 2px;
  --radius-popup: 4px;
  --radius-band: 7px;
  --radius-card: 8px;
  --radius-sticker: 18px;
  --radius-pill: 999px;
  --measure: 36rem;
  --margin-col: 15rem;
  --rail: 6.5rem;
  --gutter: 2.5rem;
  --page-max: 76rem;
  --hairline: 1px;
  --keyline: 1.5px;
  --card-rail: 5px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-slap: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 150ms;
  --t-base: 320ms;
  --t-slow: 700ms;
  --t-drift: 7s;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-stencil: "Stardos Stencil", "Stencil Std", Stencil, Rockwell, Georgia, serif;
  --font-app: "Source Code Pro", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

.read-title { font-family: var(--font-serif); font-size: 52px; line-height: 1.06; font-weight: 400; letter-spacing: -0.015em; font-variation-settings: 'opsz' 60; }
.read-title-sm { font-family: var(--font-serif); font-size: 36px; line-height: 1.12; font-weight: 400; letter-spacing: -0.01em; font-variation-settings: 'opsz' 48; }
.read-heading { font-family: var(--font-serif); font-size: 27px; line-height: 1.2; font-weight: 600; font-variation-settings: 'opsz' 32; }
.read-subheading { font-family: var(--font-serif); font-size: 21px; line-height: 1.3; font-weight: 600; }
.read-lede { font-family: var(--font-serif); font-size: 22px; line-height: 1.5; font-weight: 400; font-style: italic; }
.read-body { font-family: var(--font-serif); font-size: 19px; line-height: 1.62; font-weight: 400; }
.read-quote { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; font-weight: 400; font-style: italic; }
.read-note { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 15px; line-height: 1.35; font-weight: 500; }
.ui-strong { font-family: var(--font-sans); font-size: 15px; line-height: 1.35; font-weight: 650; }
.ui-sm { font-family: var(--font-sans); font-size: 13px; line-height: 1.35; font-weight: 500; }
.ui-figure { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.mark-marquee { font-family: var(--font-stencil); font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: 0.06em; }
.mark-folio { font-family: var(--font-stencil); font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; }
.mark-stamp-lg { font-family: var(--font-stencil); font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: 0.1em; }
.mark-stamp { font-family: var(--font-stencil); font-size: 12.5px; line-height: 1.1; font-weight: 700; letter-spacing: 0.12em; }
.app-label { font-family: var(--font-app); font-size: 13px; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.app-figure { font-family: var(--font-app); font-size: 15px; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.app-sm { font-family: var(--font-app); font-size: 12px; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 400; }

/* ---- components: design/system/spearhead.css ---- */

/* ==========================================================================
   Spearhead component stylesheet
   Loads after tokens.css and reads every colour, space and radius from it.
   Order in the center, flash at the edge: .sp-prose is the quiet column;
   stamps, stickers, rope and popups live around it.
   ========================================================================== */

/* ---------- ground ---------- */
/* body carries a container, which stops its background reaching the canvas: paint html too */
html { background: var(--paper); }
body { margin: 0; }
body, .sp-root {
  background: var(--paper); color: var(--ink);
  font: 400 19px/1.62 var(--font-serif); font-optical-sizing: auto; font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sp-root, .sp-root *, .sp-root *::before, .sp-root *::after { box-sizing: border-box; }
/* the narrow layout is a container query on the root, not a media query */
body, .sp-root { container: sp / inline-size; }
.sp-root :focus-visible, body :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.sp-root img { max-width: 100%; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the mark as one ink, the spearhead with its cut-outs: the Folio brand, and an icon slot anywhere */
body, .sp-root { --i-mark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M48 10C58.7 23.9 68.3 41 67.3 56 66.7 62.4 60.8 66.7 55 68.8V86H41V68.8C35.2 66.7 29.3 62.4 28.7 56 27.7 41 37.3 23.9 48 10ZM46.7 24a1.3 1.3 0 0 1 2.6 0v32a1.3 1.3 0 0 1-2.6 0ZM44.5 60.3a3.5 3.5 0 1 0 7 0 3.5 3.5 0 1 0-7 0ZM41 73.6h14v2H41ZM41 79h14v2H41Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

/* ---------- page frame ---------- */
.sp-page { max-width: var(--page-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
/* The reading frame: its content box IS the measure. The rail (left) and the
   margin column (right) are padding that floated notes hang into. */
.sp-reading {
  max-width: calc(var(--rail) + var(--measure) + var(--margin-col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: calc(var(--rail) + var(--gutter));
  padding-right: calc(var(--margin-col) + var(--gutter));
}
.sp-reading::after { content: ""; display: block; clear: both; }
.sp-bleed { margin-left: calc(-1 * (var(--rail) + var(--gutter))); margin-right: calc(-1 * (var(--margin-col) + var(--gutter))); }

/* ---------- masthead ---------- */
.sp-nav { display: flex; align-items: center; gap: var(--space-5); padding-block: 14px; flex-wrap: wrap; }
.sp-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.sp-brand img { display: block; width: 42px; height: 42px; }
.sp-brand__name { font: 700 18px/1.1 var(--font-stencil); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.sp-nav__links { display: flex; align-items: center; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; font: 500 15px/1.35 var(--font-sans); }
.sp-nav__links a { position: relative; display: inline-block; padding: 11px 0 9px; color: var(--ink-soft); text-decoration: none; }
/* the underline is drawn, from the left, rather than switched on */
.sp-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--book-fill); scale: 0 1; transform-origin: 0 50%; }
.sp-nav__links a:hover { color: var(--ink); }
.sp-nav__links a:hover::after { scale: 1 1; background: var(--line-strong); }
.sp-nav__links a[aria-current="page"] { color: var(--ink); }
.sp-nav__links a[aria-current="page"]::after { scale: 1 1; }
.sp-nav__tools { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- stamp: stencil label for what a thing is ---------- */
.sp-stamp {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 4px 7px 3px; border: var(--keyline) solid currentColor; border-radius: var(--radius-label);
  font: 700 12.5px/1.1 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.sp-stamp--book { color: var(--book); }
.sp-stamp--tape { color: var(--tape); }
.sp-stamp--prayer { color: var(--prayer); }
.sp-stamp--kit { color: var(--kit); }
.sp-stamp--muted { color: var(--ink-muted); }
.sp-stamp--fill { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-stamp--fill.sp-stamp--book { background: var(--book-fill); color: var(--on-book); border-color: var(--ink); }
.sp-stamp--fill.sp-stamp--tape { background: var(--tape-fill); color: var(--on-tape); border-color: var(--ink); }
.sp-stamp--fill.sp-stamp--prayer { background: var(--prayer-fill); color: var(--on-prayer); border-color: var(--ink); }
.sp-stamp--fill.sp-stamp--kit { background: var(--kit-fill); color: var(--on-kit); border-color: var(--ink); }
.sp-stamp--lg { font-size: 17px; letter-spacing: .1em; padding: 6px 10px 4px; }
.sp-stamp--tilt { rotate: -2.5deg; }
.sp-stamp--bare { border-color: transparent; padding-inline: 0; }

/* ---------- rope rule ---------- */
.sp-rope {
  display: block; height: 10px; margin: 0; border: 0;
  border-block: var(--keyline) solid var(--rope-key); border-radius: 6px;
  background: repeating-linear-gradient(-56deg, var(--rope-strand) 0 6.5px, var(--rope-key) 6.5px 8px);
}
.sp-rope--thin { height: 7px; background: repeating-linear-gradient(-56deg, var(--rope-strand) 0 4.5px, var(--rope-key) 4.5px 5.6px); }

/* ---------- sticker ---------- */
.sp-sticker { display: inline-block; line-height: 0; rotate: var(--tilt, -4deg); filter: drop-shadow(0 1px 0 rgb(21 17 14 / .16)) drop-shadow(0 7px 7px rgb(21 17 14 / .26)); }
.sp-sticker img { display: block; width: var(--size, 128px); height: auto; }
.sp-sticker--sm { --size: 76px; }
.sp-sticker--lg { --size: 196px; }
.sp-sticker--xl { --size: 280px; }
/* a die-cut border for art that has none of its own */
.sp-sticker--cut img { filter: drop-shadow(3px 0 0 var(--die-white)) drop-shadow(-3px 0 0 var(--die-white)) drop-shadow(0 3px 0 var(--die-white)) drop-shadow(0 -3px 0 var(--die-white)); }
/* a sticker alone shines (#69): wrapped in .sp-shine with five sparks after it, it stands on a
   sunburst (::before, sixteen rays of the emblem yellow fading out from the middle) over a soft
   glow (::after). Where motion is on the rays and the glow burst as the sticker slaps on, the
   sparks wink out around it, and the whole settles to a quiet glow, the rays turning once in a
   minute and a half, the glow breathing on the drift clock; under the pointer (or a link's focus)
   the rays flare, the glow brightens, the sparks wink again and the sticker pops. The arrival
   animations end on the resting values and fill backwards only, so the hover can move the same
   properties by transition. With motion off none of it is drawn: the sticker alone, still. */
.sp-shine { position: relative; display: inline-block; line-height: 0; isolation: isolate; --glow: var(--flash-yellow); }
.sp-shine > .sp-sticker { position: relative; z-index: 1; transition: scale var(--t-base) var(--ease-slap); }
.sp-shine::before, .sp-shine::after, .sp-spark { content: ""; display: none; position: absolute; border-radius: 50%; pointer-events: none; }
.sp-shine::before { inset: -34%; z-index: 0; opacity: .22; background: repeating-conic-gradient(from 0deg, var(--glow) 0deg 9deg, transparent 9deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-out); }
.sp-shine::after { inset: -16%; z-index: 0; opacity: .5; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 72%, #fff) 0%, transparent 62%); filter: blur(2px); transition: filter var(--t-base) var(--ease-out); }
.sp-spark { z-index: 2; width: 14px; height: 14px; border-radius: 0; background: var(--die-white); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 3px var(--glow)); opacity: 0; scale: 0; }
.sp-spark:nth-of-type(1) { top: -7%; left: 12%; --d: 0s; }
.sp-spark:nth-of-type(2) { top: 9%; right: -9%; --d: .22s; width: 10px; height: 10px; }
.sp-spark:nth-of-type(3) { bottom: 3%; right: 1%; --d: .4s; }
.sp-spark:nth-of-type(4) { bottom: -9%; left: 26%; --d: .56s; width: 11px; height: 11px; }
.sp-spark:nth-of-type(5) { top: 44%; left: -11%; --d: .7s; width: 9px; height: 9px; }
/* the masthead's emblems shine the same way with no markup of their own: the mark's rays halo
   sits behind it on the brand (::before, sized by --mark), and a pinned masthead's badge carries
   its own (the Big Book sticker's, build-site.py's BRAND_BADGE, with three sparks) */
.sp-brand { position: relative; --mark: 42px; --glow: var(--flash-yellow); }
.sp-brand::before { content: ""; display: none; position: absolute; left: calc(var(--mark) * -.36); top: 50%; width: calc(var(--mark) * 1.72); height: calc(var(--mark) * 1.72); translate: 0 -50%; z-index: -1; border-radius: 50%; opacity: .22; pointer-events: none; background: repeating-conic-gradient(from 0deg, var(--glow) 0deg 9deg, transparent 9deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-out); }
.sp-brand--badge::before { display: none !important; }   /* the badge's own halo stands there */
.sp-brand__badge::before { content: ""; display: none; position: absolute; inset: -34%; z-index: -1; border-radius: 50%; opacity: .22; pointer-events: none; background: repeating-conic-gradient(from 0deg, var(--glow) 0deg 9deg, transparent 9deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); mask: radial-gradient(circle, #000 16%, rgb(0 0 0 / .5) 44%, transparent 70%); transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-out); }
.sp-brand__badge img { transition: scale var(--t-base) var(--ease-slap); }

/* ---------- prose: the quiet column ---------- */
.sp-prose { font: 400 19px/1.62 var(--font-serif); color: var(--ink); text-wrap: pretty; }
.sp-prose > * { margin-block: 0; }
.sp-prose > * + * { margin-top: 1.02em; }
.sp-prose h2 { font: 600 27px/1.2 var(--font-serif); margin-top: 2em; text-wrap: balance; }
.sp-prose h3 { font: 600 21px/1.3 var(--font-serif); margin-top: 1.6em; text-wrap: balance; }
.sp-prose h2 + *, .sp-prose h3 + * { margin-top: .55em; }
.sp-prose a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.sp-prose a:not([class]):visited { color: var(--link-visited); }
.sp-prose a:not([class]):hover { text-decoration-thickness: 2px; }
.sp-prose ul, .sp-prose ol { padding-left: 1.3em; }
.sp-prose li + li { margin-top: .35em; }
.sp-prose ul > li::marker { content: "\25C6\00a0\00a0"; color: var(--book); font-size: .55em; }
.sp-prose code, .sp-code { font: 400 .78em/1.5 var(--font-mono); background: var(--paper-sunk); padding: .1em .35em; border-radius: var(--radius-label); }
.sp-title { margin: 0; font: 400 clamp(36px, 2.6vw + 22px, 56px)/1.06 var(--font-serif); letter-spacing: -.015em; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.sp-title--sm { font-size: 36px; line-height: 1.12; letter-spacing: -.01em; font-variation-settings: 'opsz' 48; }
.sp-lede { margin: 0; font: italic 400 22px/1.5 var(--font-serif); color: var(--ink-soft); text-wrap: pretty; }
.sp-meta { font: 500 13px/1.35 var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sp-meta a { color: inherit; }
/* a cross-link that opens a preview wears a dotted underline */
.sp-xref { color: var(--link); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em; cursor: pointer; }
.sp-xref:hover, .sp-xref[aria-expanded="true"] { text-decoration-style: solid; }
.sp-mark { background: var(--mark); color: inherit; padding: .05em .12em; border-radius: 1px; }

/* the initial of a sally, stamped rather than written */
.sp-dropcap::first-letter {
  float: left; margin: .09em .14em 0 0; padding: .1em .15em .02em;
  font: 700 3.02em/.86 var(--font-stencil);
  background: var(--book-fill); color: var(--on-book);
  border: var(--keyline) solid var(--ink); border-radius: var(--radius-label);
}

/* quotation from the literature; always closes with its citation */
.sp-quote { margin: 1.25em 0; padding: .05em 0 .05em 1.05em; border-left: 3px solid var(--line-strong); font: italic 400 19px/1.55 var(--font-serif); color: var(--ink-soft); }
.sp-quote p { margin: 0; }
.sp-quote p + p { margin-top: .6em; }
.sp-quote__cite { display: block; margin-top: .45em; font-style: normal; line-height: 1.3; }

/* ---------- citation chip: every quote has a page ---------- */
.sp-cite {
  display: inline-flex; align-items: baseline; gap: .34em;
  padding: 0 .48em; border-radius: var(--radius-label);
  font: 600 13.5px/1.55 var(--font-sans); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap;
  background: var(--book-soft); color: var(--book); text-decoration: none; cursor: pointer;
  vertical-align: .07em;
}
.sp-cite::before { content: "\25C6"; font-size: .7em; }
.sp-cite:hover, .sp-cite[aria-expanded="true"] { background: var(--book-fill); color: var(--on-book); }
.sp-cite--tape { background: var(--tape-soft); color: var(--tape); }
.sp-cite--tape::before { content: "\25B8"; font-size: 1em; }
.sp-cite--tape:hover, .sp-cite--tape[aria-expanded="true"] { background: var(--tape-fill); color: var(--on-tape); }
.sp-cite--prayer { background: var(--prayer-soft); color: var(--prayer); }
.sp-cite--prayer::before { content: "\2020"; font-size: 1em; }
.sp-cite--prayer:hover, .sp-cite--prayer[aria-expanded="true"] { background: var(--prayer-fill); color: var(--on-prayer); }
.sp-cite--kit { background: var(--kit-soft); color: var(--kit); }
.sp-cite--kit::before { content: "\25A4"; font-size: .85em; }
.sp-cite--kit:hover, .sp-cite--kit[aria-expanded="true"] { background: var(--kit-fill); color: var(--on-kit); }
.sp-cite--reading::before { content: "\2736"; font-size: .9em; }
.sp-cite--topic { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sp-cite--topic::before { content: "#"; font-size: 1em; }
.sp-cite--topic:hover { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ---------- popup: the passage, without leaving the page ---------- */
.sp-pop {
  width: min(27rem, calc(100vw - 32px));
  background: var(--paper-raised); color: var(--ink);
  border: var(--keyline) solid var(--ink); border-radius: var(--radius-popup); box-shadow: var(--shadow-popup);
  font: 400 15.5px/1.52 var(--font-serif); text-align: left; overflow: hidden;
}
.sp-pop--floating { position: absolute; z-index: 30; }
.sp-pop__bar { display: flex; align-items: center; gap: var(--space-2); padding: 7px 8px 6px 10px; border-bottom: 1px solid var(--line); background: var(--paper-sunk); }
.sp-pop__where { flex: 1; min-width: 0; font: 600 13px/1.3 var(--font-sans); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pop__btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-label); background: transparent; color: var(--ink-soft); cursor: pointer; text-decoration: none; }
.sp-pop__btn:hover { background: var(--ink); color: var(--paper); }
.sp-pop__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }   /* the pin, pressed: the panel stays */
.sp-pop__btn .sp-i { font-size: 13.5px; }
.sp-pop__body { padding: 12px 14px 2px; max-height: 15.5rem; overflow: auto; }
.sp-pop__body p { margin: 0 0 .75em; }
.sp-pop__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 14px 10px; border-top: 1px dashed var(--line-strong); font: 500 13px/1.3 var(--font-sans); color: var(--ink-muted); }
.sp-pop__foot a { color: var(--link); }
/* on a phone the popup is a sheet that rises from the bottom edge */
.sp-pop--sheet { width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0; }
.sp-pop--sheet .sp-pop__bar { padding-block: 10px 9px; }
.sp-pop--sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line-strong); }
.sp-pop--sheet .sp-pop__body { max-height: none; }

/* ---------- notes in the edges ---------- */
.sp-noteref { font: 700 .6em/1 var(--font-stencil); color: var(--book); vertical-align: super; margin-left: .12em; text-decoration: none; }
.sp-sidenote {
  display: block; float: right; clear: right; width: var(--margin-col);
  margin: .3em calc(-1 * (var(--margin-col) + var(--gutter))) 1em 0;
  font-style: normal; text-indent: 0;
  font: 400 15px/1.5 var(--font-serif); color: var(--ink-soft); text-align: left;
}
.sp-sidenote__n { font: 700 11px/1 var(--font-stencil); color: var(--book); margin-right: .45em; }
.sp-railnote {
  display: block; float: left; clear: left; width: var(--rail);
  margin: 0 0 0 calc(-1 * (var(--rail) + var(--gutter))); text-align: right;
}
.sp-folio { display: inline-block; font: 700 13px/1.2 var(--font-stencil); letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; padding-top: .55em; border-top: 1px solid var(--line-strong); min-width: 3.4em; }
.sp-para-n { font: 600 12px/2.6 var(--font-sans); color: var(--ink-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.sp-para-n:hover { color: var(--book); }

/* ---------- link lists: backlinks, pages cited, related ---------- */
.sp-links { list-style: none; margin: 0; padding: 0; }
.sp-links > li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; column-gap: var(--space-2); padding: 11px 0 10px; border-top: 1px solid var(--line); font: 500 15px/1.35 var(--font-sans); }
.sp-links > li:last-child { border-bottom: 1px solid var(--line); }
.sp-links__k { color: var(--book); font-size: .8em; line-height: 1.75; }
.sp-links__k--tape { color: var(--tape); font-size: 1em; line-height: 1.35; }
.sp-links__k--kit { color: var(--kit); }
.sp-links__k--prayer { color: var(--prayer); font-size: 1em; line-height: 1.35; }
.sp-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.sp-links a:hover { color: var(--link); text-decoration: underline; }
.sp-links__n { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.sp-links__ctx { grid-column: 2 / -1; margin: 2px 0 0; font: italic 400 15px/1.45 var(--font-serif); color: var(--ink-soft); }
.sp-h { margin: 0 0 var(--space-3); font: 600 21px/1.3 var(--font-serif); }
.sp-h small { font: 500 13px/1 var(--font-sans); color: var(--ink-muted); margin-left: .4em; }

/* ---------- the handout sheet's card, band and list, kept ---------- */
.sp-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-left: var(--card-rail) solid var(--book-fill);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-3) 15px;
  font: 400 15px/1.45 var(--font-sans); color: var(--ink);
}
.sp-card--prayer { border-left-color: var(--prayer-fill); }
.sp-card--kit { border-left-color: var(--kit-fill); }
.sp-card--tape { border-left-color: var(--tape-fill); }
.sp-card__h { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); padding-bottom: 5px; border-bottom: 1px solid var(--line); font: 700 12.5px/1.3 var(--font-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--book); }
.sp-card--prayer .sp-card__h { color: var(--prayer); }
.sp-card--kit .sp-card__h { color: var(--kit); }
.sp-card--tape .sp-card__h { color: var(--tape); }
.sp-card__ref { margin-left: auto; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-muted); }
.sp-card p { margin: 0 0 .5em; }
.sp-card > :last-child { margin-bottom: 0; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list > li { position: relative; padding: 2.5px 0 2.5px 15px; font: 400 14.5px/1.36 var(--font-sans); }
.sp-list > li::before { content: "\25C6"; position: absolute; left: 1px; top: .58em; font-size: 8px; line-height: 1; color: var(--book-fill); }
.sp-band { border-radius: var(--radius-band); padding: var(--space-2) var(--space-3); text-align: center; }
.sp-band--prayer { background: var(--prayer-soft); color: var(--prayer); font: italic 400 16px/1.45 var(--font-serif); }
.sp-band--note { background: var(--paper-sunk); border: 1px dashed var(--line-strong); color: var(--ink-soft); font: 400 13.5px/1.4 var(--font-sans); }
.sp-band__cite { display: block; margin-top: 4px; font: 500 12px/1.3 var(--font-sans); font-style: normal; color: var(--ink-muted); }
.sp-keyline { margin: 0; text-align: center; font: 700 19px/1.4 var(--font-serif); color: var(--book); }

/* ---------- controls ---------- */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 18px; border: var(--keyline) solid var(--ink); border-radius: var(--radius-label);
  background: transparent; color: var(--ink); font: 650 15px/1 var(--font-sans); text-decoration: none; cursor: pointer;
}
.sp-btn:hover { background: var(--paper-sunk); translate: 0 -1px; }
.sp-btn--primary { background: var(--ink); color: var(--paper); }
.sp-btn--primary:hover { background: var(--book-fill); color: var(--on-book); }
.sp-btn--quiet { border-color: transparent; padding-inline: 4px; text-decoration: underline; text-underline-offset: .22em; }
.sp-btn--quiet:hover { background: transparent; color: var(--link); }
.sp-btn .sp-i { font-size: 15px; }
.sp-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-label); background: transparent; color: var(--ink); cursor: pointer; }
.sp-iconbtn:hover { background: var(--paper-sunk); }
.sp-iconbtn .sp-i { font-size: 18px; }
.sp-play { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: var(--keyline) solid var(--ink); border-radius: var(--radius-pill); background: var(--tape-fill); color: var(--on-tape); cursor: pointer; flex: none; }
.sp-play .sp-i { font-size: 18px; }
.sp-play--lg { width: 64px; height: 64px; }
.sp-play--lg .sp-i { font-size: 24px; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent;
  color: var(--ink); font: 500 13.5px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sp-chip:hover { border-color: var(--ink); }
.sp-chip[aria-pressed="true"], .sp-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sp-chip__n { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sp-chip[aria-pressed="true"] .sp-chip__n, .sp-chip[aria-current="true"] .sp-chip__n { color: inherit; opacity: .75; }
.sp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sp-toggle { display: inline-flex; border: var(--keyline) solid var(--ink); border-radius: var(--radius-label); overflow: hidden; }
.sp-toggle button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border: 0; background: transparent; color: var(--ink); font: 600 13px/1 var(--font-sans); cursor: pointer; }
.sp-toggle button + button { border-left: var(--keyline) solid var(--ink); }
.sp-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sp-toggle .sp-i { font-size: 13px; }
.sp-search { display: flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 12px; border: var(--keyline) solid var(--line-strong); border-radius: var(--radius-label); background: var(--paper-raised); color: var(--ink-muted); }
.sp-search:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.sp-search .sp-i { font-size: 16px; }
.sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 15px/1.35 var(--font-sans); }
.sp-search input::placeholder { color: var(--ink-muted); opacity: 1; }
.sp-kbd { font: 500 12px/1 var(--font-mono); padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-muted); }

/* ---------- tapes ---------- */
.sp-rack { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sp-tape {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: stretch; min-height: 66px;
  background: var(--paper-raised); color: var(--ink); border: var(--keyline) solid var(--ink); border-radius: 3px; text-decoration: none;
}
.sp-tape:hover { background: var(--paper); translate: 0 -2px; box-shadow: var(--shadow-card); }
.sp-tape__len { display: grid; place-content: center; justify-items: center; gap: 3px; background: var(--tape-fill); color: var(--on-tape); border-right: var(--keyline) solid var(--ink); font: 700 23px/1 var(--font-stencil); }
.sp-tape__len small { font: 700 9px/1 var(--font-stencil); letter-spacing: .16em; }
.sp-tape--red .sp-tape__len { background: var(--book-fill); color: var(--on-book); }
.sp-tape--green .sp-tape__len { background: var(--kit-fill); color: var(--on-kit); }
.sp-tape--blue .sp-tape__len { background: var(--prayer-fill); color: var(--on-prayer); }
.sp-tape--bone .sp-tape__len { background: var(--paper-sunk); color: var(--ink); }
.sp-tape__body { display: grid; align-content: center; gap: 1px; padding: 8px 14px; min-width: 0; }
.sp-tape__who { font: 650 17px/1.25 var(--font-sans); }
.sp-tape__what { font: italic 400 15px/1.35 var(--font-serif); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tape__meta { display: flex; align-items: center; gap: var(--space-3); padding: 0 14px; font: 500 13px/1.2 var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.sp-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 16px 10px 10px; background: var(--paper-raised); color: var(--ink);
  border: var(--keyline) solid var(--ink); border-radius: var(--radius-popup); box-shadow: var(--shadow-popup);
}
.sp-player__now { display: grid; gap: 6px; min-width: 0; }
.sp-player__title { font: 650 15px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-player__title span { font-weight: 500; color: var(--ink-muted); }
.sp-scrub { position: relative; height: 8px; background: var(--paper-sunk); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.sp-scrub__fill { position: absolute; inset: -1px auto -1px -1px; width: var(--at, 40%); background: var(--tape-fill); border: 1px solid var(--ink); border-radius: var(--radius-pill); }
.sp-player__tools { display: flex; align-items: center; gap: var(--space-2); }
.sp-time { font: 600 13px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.sp-passage { position: relative; }
.sp-passage__t { font: 600 13px/2.35 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--tape); text-decoration: none; white-space: nowrap; }
.sp-passage__t:hover { text-decoration: underline; }
.sp-passage--now { background: var(--tape-soft); box-shadow: -14px 0 0 var(--tape-soft), 14px 0 0 var(--tape-soft), -18px 0 0 var(--tape-fill); }

/* ---------- the two bookends of the day ---------- */
.sp-day { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: 22px 22px 20px; background: var(--paper-raised); color: var(--ink); border: var(--keyline) solid var(--ink); border-radius: var(--radius-sticker); }
a.sp-day:hover { translate: 0 -3px; box-shadow: var(--shadow-popup); }
.sp-day[data-theme="dark"] { background: var(--paper); }
.sp-day__h { margin: 0; font: 400 27px/1.18 var(--font-serif); font-variation-settings: 'opsz' 40; text-wrap: balance; padding-right: 96px; }
.sp-day__art { position: absolute; top: -18px; right: -10px; }
.sp-day p { margin: 0; font: 400 16px/1.5 var(--font-serif); color: var(--ink-soft); }
.sp-day .sp-list > li { font-size: 15px; }

/* ---------- contents, tables, sheets ---------- */
.sp-toc { list-style: none; margin: 0; padding: 0; font: 500 13.5px/1.35 var(--font-sans); }
.sp-toc a { display: block; padding: 5px 0 5px 12px; color: var(--ink-muted); text-decoration: none; border-left: 2px solid var(--line); }
.sp-toc a:hover { color: var(--ink); }
.sp-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--book-fill); font-weight: 650; }
.sp-table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.sp-table th { text-align: left; font-weight: 650; padding: 8px 10px 7px; border-bottom: var(--keyline) solid var(--ink); white-space: nowrap; }
.sp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-sheet { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; gap: var(--space-3); color: var(--ink); text-decoration: none; }
/* two more sheets under the top one: a small stack, which fans under the pointer */
.sp-sheet::before, .sp-sheet::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; aspect-ratio: 8.5 / 11; background: var(--paper-raised); border: 1px solid var(--line-strong); transform-origin: 50% 92%; }
.sp-sheet::before { rotate: -2.5deg; translate: -5px 4px; }
.sp-sheet::after { rotate: 2deg; translate: 5px 3px; }
.sp-sheet:hover::before { rotate: -5deg; translate: -11px 6px; }
.sp-sheet:hover::after { rotate: 4.5deg; translate: 11px 5px; }
.sp-sheet__page { position: relative; aspect-ratio: 8.5 / 11; padding: 10% 10% 8%; background: var(--paper-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); display: grid; align-content: start; justify-items: center; gap: 6%; overflow: hidden; }
.sp-sheet__t { font: 700 clamp(11px, 1.05vw, 14px)/1.15 var(--font-serif); text-align: center; text-wrap: balance; }
.sp-sheet__rule { width: 26%; height: 3px; border-radius: 2px; background: var(--book-fill); }
.sp-sheet__lines { width: 100%; display: grid; gap: 7px; }
.sp-sheet__lines i { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.sp-sheet__lines i:nth-child(3n) { width: 72%; }
.sp-sheet__cardrow { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sp-sheet__cardrow b { display: block; height: 38px; border: 1px solid var(--line); border-left: 3px solid var(--book-fill); border-radius: 3px; }
.sp-sheet:hover .sp-sheet__page { border-color: var(--ink); }
.sp-sheet__name { font: 650 15px/1.3 var(--font-sans); }
.sp-sheet__name small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--font-sans); color: var(--ink-muted); }

/* ---------- footer: the plate ---------- */
.sp-foot { background: var(--plate); color: var(--on-plate); font: 400 14.5px/1.5 var(--font-sans); }
.sp-foot a { color: var(--on-plate); }
.sp-foot .sp-brand { color: var(--on-plate); }


/* ---------- the Book: folios, the paragraph a link landed on ---------- */
.sp-pagebreak { display: inline-block; margin: 0 .3em; padding: 1px 5px 0; border: 1px solid var(--line-strong); border-radius: var(--radius-label); font: 700 11px/1.5 var(--font-stencil); letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; vertical-align: .14em; }
.sp-target { box-shadow: -16px 0 0 var(--paper), -20px 0 0 var(--book-fill); }
.sp-linked { display: grid; gap: 5px; justify-items: start; }
.sp-sidenote.sp-linked { display: grid; }
.sp-linked__h { font: 700 11px/1.2 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }

/* ---------- write-in lines and yes/no asks, from the worksheet handouts ---------- */
.sp-write { display: grid; gap: 4px; }
.sp-write__l { font: 600 13px/1.3 var(--font-sans); color: var(--ink-muted); }
.sp-write__line { height: 30px; border-bottom: 1px solid var(--line-strong); }
.sp-asks { list-style: none; margin: 0; padding: 0; }
.sp-asks > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 9px 0; border-top: 1px solid var(--line); font: 400 16px/1.4 var(--font-serif); }
.sp-asks > li:last-child { border-bottom: 1px solid var(--line); }
.sp-yn { display: inline-flex; gap: 6px; }
.sp-yn .sp-chip { min-height: 32px; padding: 0 11px; font-size: 13px; }

/* ---------- icons: one ink, taken from the text colour ---------- */
.sp-i { display: inline-block; flex: none; width: 1.2em; height: 1.2em; vertical-align: -.22em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.sp-i--search { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2210.5%22 cy=%2210.5%22 r=%226.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M15.5 15.5L21 21%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--play { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 4.5v15l13-7.5z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.sp-i--pause { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6 4.5h4.2v15H6zM13.8 4.5H18v15h-4.2z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.sp-i--open { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 5H5v14h14v-5M14 5h5v5M19 5l-8.5 8.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--close { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--pin { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 4h6l-1 6 3.5 3.5h-11L10 10zM12 13.5V20%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--sun { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M18.7 5.3l-1.8 1.8M7.1 16.9l-1.8 1.8%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--moon { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M19.5 14.2A8 8 0 0 1 9.8 4.5a8 8 0 1 0 9.7 9.7z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--print { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 9V4h10v5M7 17H4.5v-8h15v8H17M7 14h10v6H7z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--menu { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--back { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 7L4 12l5 5M4.5 12H15a5 5 0 0 1 5 5v1%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--book { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 6.5C10 5 7 4.6 3.5 5v13c3.5-.4 6.5 0 8.5 1.5 2-1.5 5-1.9 8.5-1.5V5C17 4.6 14 5 12 6.5zM12 6.5v13%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--tape { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223%22 y=%225.5%22 width=%2218%22 height=%2213%22 rx=%222%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%228.5%22 cy=%2212%22 r=%221.8%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2215.5%22 cy=%2212%22 r=%221.8%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8.5 13.8h7%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--sheet { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.5 3.5h8l4 4v13h-12zM14.5 3.5v4h4M9.5 12h6M9.5 15.5h6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--rewind { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M11 7l-5 5 5 5M18 7l-5 5 5 5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--forward { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M13 7l5 5-5 5M6 7l5 5-5 5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.sp-i--quote { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5 17v-4.5C5 9.5 6.6 7.4 9.5 7v2.2c-1.3.3-2 1.2-2 2.3H10V17zM14 17v-4.5c0-3 1.6-5.1 4.5-5.5v2.2c-1.3.3-2 1.2-2 2.3H19V17z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.sp-i--mark { --i: var(--i-mark); }

/* ---------- page patterns ---------- */
.sp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; padding-block: var(--space-8) var(--space-7); }
.sp-hero__say { margin: 0; font: 400 clamp(38px, 3.8vw + 12px, 66px)/1.06 var(--font-serif); letter-spacing: -.018em; font-variation-settings: 'opsz' 60; text-wrap: balance; }
.sp-pile { position: relative; min-height: 410px; }
.sp-pile > * { position: absolute; }
.sp-section { padding-block: var(--space-7) var(--space-5); }   /* 48 over a kicker, 24 under a section: a 72px seam (#43) */
.sp-section__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); }
.sp-section__h h2 { margin: 0; font: 400 clamp(29px, 1.4vw + 18px, 38px)/1.12 var(--font-serif); letter-spacing: -.01em; font-variation-settings: 'opsz' 48; }
.sp-section__h > :last-child:not(h2) { margin-left: auto; }
.sp-more { font: 650 15px/1.3 var(--font-sans); color: var(--ink); text-underline-offset: .22em; }
.sp-more:hover { color: var(--link); }
.sp-grid { display: grid; gap: var(--space-5); }
.sp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-grid--side { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-7); align-items: start; }
.sp-entry { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--space-5); padding: 20px 0 22px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sp-entry:last-child { border-bottom: 1px solid var(--line); }
.sp-entry__date { font: 600 13px/2.3 var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sp-entry__t { margin: 0; font: 400 27px/1.2 var(--font-serif); font-variation-settings: 'opsz' 40; text-wrap: balance; }
.sp-entry:hover .sp-entry__t { color: var(--link); }
.sp-entry:hover { translate: 6px 0; }
.sp-entry__d { margin: 6px 0 0; font: 400 17px/1.5 var(--font-serif); color: var(--ink-soft); max-width: 40rem; }
.sp-entry__cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-foot__in { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--space-6); padding-block: var(--space-7) var(--space-6); }
.sp-foot h3 { margin: 0 0 10px; font: 700 12.5px/1.1 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; }
.sp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sp-foot a { text-decoration: none; }
.sp-foot a:hover { text-decoration: underline; }
.sp-foot__fine { margin: 14px 0 0; max-width: 30rem; opacity: .78; font-size: 13.5px; line-height: 1.5; }
.sp-foot__base { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 14px 22px; border-top: 1px solid rgb(239 230 210 / .22); font-size: 13px; opacity: .78; }

/* ---------- narrower roots ----------
   Container queries on .sp-root (or body), so a narrow panel folds the same way a narrow window does.
   Below 66rem the edges fold into the column. Below 44rem everything is one column and the masthead compacts. */
@container sp (max-width: 66rem) {
  .sp-reading { padding-inline: 0; max-width: var(--measure); }
  .sp-bleed { margin-inline: 0; }
  .sp-sidenote { float: none; width: auto; margin: 0 0 .7em; padding: 10px 12px; border-left: 3px solid var(--line-strong); background: var(--paper-sunk); }
  .sp-railnote { float: none; width: auto; margin: 0 0 .15em; text-align: left; }
  .sp-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6) var(--space-5); gap: var(--space-5); }
  .sp-pile { min-height: 250px; }
  .sp-grid--side { grid-template-columns: minmax(0, 1fr); }
  .sp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-section { padding-block: var(--space-6) var(--space-4); }
}
@container sp (max-width: 44rem) {
  .sp-page { padding-inline: 16px; }
  .sp-nav { gap: var(--space-2) var(--space-3); padding-block: 10px 4px; }
  .sp-nav__tools { margin-left: auto; }
  .sp-nav__links { order: 3; width: 100%; margin-left: 0; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .sp-toggle__label { display: none; }
  .sp-toggle button { padding: 0 10px; }
  .sp-brand img { width: 36px; height: 36px; }
  .sp-brand__name { font-size: 15.5px; letter-spacing: .12em; }
  .sp-grid--2, .sp-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .sp-links > li { grid-template-columns: 1.4em minmax(0, 1fr); }
  .sp-links__n { grid-column: 2; }
  .sp-entry { grid-template-columns: minmax(0, 1fr); }
  .sp-entry__date { line-height: 1.6; }
  .sp-entry__t { font-size: 23px; }
  .sp-day { padding: 18px 16px 16px; }
  .sp-day__h { padding-right: 70px; }
  .sp-asks > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sp-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-foot__in > :first-child { grid-column: 1 / -1; }
  .sp-tape { grid-template-columns: 58px minmax(0, 1fr); }
  .sp-tape__meta { display: none; }
  .sp-player { grid-template-columns: auto minmax(0, 1fr); }
  .sp-player__tools { grid-column: 1 / -1; justify-content: space-between; }
}
@media (pointer: coarse) { .sp-chip { min-height: 44px; } .sp-toggle button { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) {
  .sp-cite, .sp-btn, .sp-chip, .sp-nav__links a, .sp-ticker__i, .sp-tape__reels i { transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, opacity var(--t-fast) ease; }
  .sp-btn, a.sp-day, .sp-sheet, .sp-tape, .sp-entry, .sp-sheet::before, .sp-sheet::after { transition: translate var(--t-fast) var(--ease-out), rotate var(--t-base) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
  .sp-nav__links a::after { transition: scale var(--t-base) var(--ease-out), background-color var(--t-fast) ease; }
}

/* ---------- the sky: the weather at the top of a page ----------
   One element, first in the root, under everything: Morning's dawn fading into paper by the
   first section; at Night the desert sky with its stars in two layers, which twinkle out of
   phase when motion is on (in Morning the star colour is transparent, so the same markup is
   simply weather). The root isolates, so the layer sits above the paper and under the page. */
.sp-root { position: relative; isolation: isolate; }
.sp-sky { --sky-top: 86%; position: absolute; z-index: -1; inset: 0 0 auto; height: min(72vh, 640px); pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky) var(--sky-top), var(--paper)) 0%, color-mix(in srgb, var(--sky) 38%, var(--paper)) 46%, var(--paper) 100%); }
/* a reading page: lower and fainter, so the weather stays above the words */
.sp-sky--low { --sky-top: 52%; height: min(40vh, 360px); }
.sp-sky::before, .sp-sky::after { content: ""; position: absolute; inset: 0 0 14%; opacity: .6;
  -webkit-mask: linear-gradient(180deg, #000 50%, transparent); mask: linear-gradient(180deg, #000 50%, transparent); }
.sp-sky::before { background-image:
    radial-gradient(1px 1px at 19% 75%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 34% 18%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 59% 63%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 28% 15%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 5% 52%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 79% 3%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 36% 32%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 42% 6%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 5% 86%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 50% 90%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 56% 6%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 58% 66%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 46% 32%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 60% 40%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 88% 44%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 25% 83%, var(--star) 50%, transparent 55%); }
.sp-sky::after { opacity: .9; background-image:
    radial-gradient(1px 1px at 9% 14%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 48% 24%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 34% 80%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 79% 27%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 57% 84%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 94% 68%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 71% 59%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 6% 6%, var(--star) 50%, transparent 55%),
    radial-gradient(2px 2px at 91% 12%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 66% 70%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 73% 25%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 31% 6%, var(--star) 50%, transparent 55%),
    radial-gradient(1px 1px at 43% 25%, var(--star) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 84% 86%, var(--star) 50%, transparent 55%); }

/* ---------- kicker: the stencil line above a title, with the diamond ---------- */
.sp-kicker { display: block; margin: 0 0 8px; font: 700 11.5px/1.3 var(--font-stencil); letter-spacing: .16em; text-transform: uppercase; color: var(--book); }
.sp-kicker::before { content: "\25C6"; margin-right: .6em; font-size: .7em; vertical-align: .1em; }
.sp-section__h h2 .sp-kicker { margin-bottom: 6px; }

/* ---------- ticker: the Book's own lines, stamped, passing slowly ----------
   Two copies of the run. With motion on, the track slides one copy's width and loops, and
   a pointer over it pauses it; without motion the first copy wraps and the second is hidden.
   Every line is a link to the page it is on. */
.sp-ticker { overflow: hidden; padding-block: 11px; border-block: var(--hairline) solid var(--line); }
.sp-ticker__track { display: flex; width: max-content; }
.sp-ticker__run { display: flex; flex: none; align-items: baseline; gap: 10px 2.6em; padding-right: 2.6em; white-space: nowrap; font: 700 12.5px/1.3 var(--font-stencil); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sp-ticker__i { display: inline-flex; align-items: baseline; gap: .7em; color: inherit; text-decoration: none; }
.sp-ticker__i::before { content: "\25C6"; font-size: .7em; color: var(--book-fill); }
.sp-ticker__i small { font: 600 11px/1 var(--font-sans); letter-spacing: .02em; text-transform: none; color: var(--ink-muted); }
.sp-ticker__i:hover { color: var(--book); }
html:not([data-motion="on"]) .sp-ticker__track { width: auto; }
html:not([data-motion="on"]) .sp-ticker__run { flex-wrap: wrap; white-space: normal; padding-right: 0; }
html:not([data-motion="on"]) .sp-ticker__run + .sp-ticker__run { display: none; }
[data-motion="on"] .sp-ticker { -webkit-mask: linear-gradient(90deg, transparent, #000 6% 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6% 94%, transparent); }
[data-motion="on"] .sp-ticker__track { animation: sp-ticker 90s linear infinite; }
[data-motion="on"] .sp-ticker:hover .sp-ticker__track, [data-motion="on"] .sp-ticker:focus-within .sp-ticker__track { animation-play-state: paused; }

/* ---------- meeting: a weekly meeting as a block: the day stamped large, the hour, the group ---------- */
.sp-meeting { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(10rem, 14rem); gap: var(--space-6); align-items: start; padding-block: var(--space-7); border-top: var(--hairline) solid var(--line); }
.sp-meeting__day { display: grid; gap: 8px; justify-items: start; }
.sp-meeting__dow { font: 700 clamp(56px, 7vw, 104px)/.9 var(--font-stencil); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.sp-meeting__t { font: 700 14px/1.2 var(--font-stencil); letter-spacing: .1em; text-transform: uppercase; color: var(--book); }
.sp-meeting__body { display: grid; gap: var(--space-3); justify-items: start; }
.sp-meeting__body h2 { margin: 0; font: 400 clamp(29px, 2vw + 16px, 40px)/1.12 var(--font-serif); font-variation-settings: 'opsz' 48; text-wrap: balance; }
.sp-meeting__body > p { margin: 0; }
.sp-meeting__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sp-meeting__art { justify-self: end; width: 100%; }

/* ---------- next: when the next meeting is, kept by the page's clock (data-meet) ---------- */
.sp-next { display: inline-flex; align-items: flex-start; gap: .55em; margin: 0; font: 600 13.5px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--kit); text-wrap: balance; }
.sp-next::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .35em; border-radius: 50%; background: var(--kit-fill); }
.sp-next.is-live { color: var(--book); }
.sp-next.is-live::before { background: var(--book-fill); }

/* ---------- reels: the tape row's two spools, which turn under the pointer ---------- */
.sp-tape__reels { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; }
/* flex: none -- an empty flex item contributes no min-content, so a narrow row (a phone's) would
   shrink the spools to ovals; inflexible, each keeps its 22px (#36) */
.sp-tape__reels i { display: block; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, var(--ink) 2.5px, transparent 3px), repeating-conic-gradient(var(--ink) 0 12deg, transparent 12deg 60deg); }
.sp-tape:hover .sp-tape__reels i { opacity: 1; }

/* ---------- the footer's watermark: the name, stamped large and faint on the plate ---------- */
.sp-foot__mark { display: block; margin: 0 0 var(--space-3); padding-top: var(--space-5); font: 700 clamp(40px, 7.6vw, 108px)/.95 var(--font-stencil); letter-spacing: .04em; text-transform: uppercase; color: var(--on-plate); opacity: .12; text-wrap: balance; user-select: none; }

/* ---------- motion ----------
   Gated by data-motion="on" on the root, which a page sets only when the device allows motion
   and the script has run; without it everything below is simply there. The reading column never
   moves: what moves is the edge, and only on arrival (a reveal, a slap, a word rising) or on a
   slow clock (the float, the stars, the ticker). The theme switch crossfades through
   document.startViewTransition where the browser has it. */
@keyframes sp-rise { from { opacity: 0; translate: 0 .45em; } to { opacity: 1; translate: 0 0; } }
@keyframes sp-slap { 0% { opacity: 0; scale: 1.4; } 55% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes sp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sp-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes sp-ticker { to { translate: -50% 0; } }
@keyframes sp-reel { to { rotate: 360deg; } }
[data-motion="on"] [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-motion="on"] [data-reveal].is-in { opacity: 1; translate: none; }
[data-motion="on"] .sp-hero__say .sp-w { display: inline-block; animation: sp-rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + .1s); }
[data-motion="on"] .sp-pile .sp-sticker { animation: sp-slap var(--t-slow) var(--ease-slap) both; animation-delay: calc(var(--i, 0) * .14s + .35s); }
[data-motion="on"] .sp-pile .sp-sticker img { animation: sp-float var(--t-drift) var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
/* the shine (#69): drawn only where motion is on. Arrival: the rays and the glow burst as the
   sticker slaps on and the sparks wink out in turn (--d); the burst keyframes end on the resting
   values and fill backwards only, so what follows is the base rule or the hover's transition.
   Between: the rays turn once in ninety seconds, the glow breathes on the drift clock (its
   animation waits past the burst and fills nothing, so the burst shows first). Under the pointer:
   the rays flare, the glow brightens, the sticker pops, and the sparks wink on -- the same
   keyframes, now repeating, which does not restart a finished animation when the pointer leaves. */
@keyframes sp-burst { 0% { opacity: 0; scale: .5; } 38% { opacity: .95; scale: 1.14; } 100% { opacity: .22; scale: 1; } }
@keyframes sp-burst-glow { 0% { opacity: 0; scale: .7; } 38% { opacity: 1; scale: 1.12; } 100% { opacity: .5; scale: 1; } }
@keyframes sp-glow { 0%, 100% { opacity: .5; scale: .97; } 50% { opacity: .7; scale: 1.04; } }
@keyframes sp-sparkle { 0% { opacity: 0; scale: 0; rotate: 0deg; } 45% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .2; rotate: 90deg; } }
[data-motion="on"] .sp-shine::before, [data-motion="on"] .sp-shine::after, [data-motion="on"] .sp-spark, [data-motion="on"] .sp-brand::before, [data-motion="on"] .sp-brand__badge::before { display: block; }
[data-motion="on"] .sp-shine > .sp-sticker { animation: sp-slap var(--t-slow) var(--ease-slap) .2s backwards; }
[data-motion="on"] .sp-shine::before { animation: sp-burst 1.8s var(--ease-out) .25s backwards, sp-reel 90s linear infinite; }
[data-motion="on"] .sp-shine::after { animation: sp-burst-glow 1.8s var(--ease-out) .25s backwards, sp-glow var(--t-drift) var(--ease-in-out) 2.05s infinite; }
[data-motion="on"] .sp-spark { animation: sp-sparkle 1.1s var(--ease-out) calc(.35s + var(--d, 0s)) backwards; }
[data-motion="on"] :is(.sp-shine:hover, a:hover .sp-shine, a:focus-visible .sp-shine) > .sp-sticker { scale: 1.07; }
[data-motion="on"] :is(.sp-shine:hover, a:hover .sp-shine, a:focus-visible .sp-shine)::before { opacity: .85; scale: 1.12; }
[data-motion="on"] :is(.sp-shine:hover, a:hover .sp-shine, a:focus-visible .sp-shine)::after { filter: blur(2px) brightness(1.5); }
[data-motion="on"] :is(.sp-shine:hover, a:hover .sp-shine, a:focus-visible .sp-shine) .sp-spark { animation-iteration-count: infinite; animation-duration: 1.4s; }
/* the masthead's mark and badge: the halo bursts as the page comes up and flares under the pointer */
[data-motion="on"] .sp-brand::before, [data-motion="on"] .sp-brand__badge::before { animation: sp-burst 1.8s var(--ease-out) .25s backwards, sp-reel 90s linear infinite; }
[data-motion="on"] .sp-brand__badge .sp-spark { animation: sp-sparkle 1.1s var(--ease-out) calc(.35s + var(--d, 0s)) backwards; }
[data-motion="on"] .sp-brand:hover::before, [data-motion="on"] .sp-brand:focus-visible::before, [data-motion="on"] .sp-brand:hover .sp-brand__badge::before, [data-motion="on"] .sp-brand:focus-visible .sp-brand__badge::before { opacity: .85; scale: 1.12; }
[data-motion="on"] .sp-brand:hover .sp-brand__badge img, [data-motion="on"] .sp-brand:focus-visible .sp-brand__badge img { scale: 1.07; }
[data-motion="on"] .sp-brand:hover .sp-brand__badge .sp-spark, [data-motion="on"] .sp-brand:focus-visible .sp-brand__badge .sp-spark { animation-iteration-count: infinite; animation-duration: 1.4s; }
[data-motion="on"] .sp-sky::before { animation: sp-twinkle var(--t-drift) var(--ease-in-out) infinite; }
[data-motion="on"] .sp-sky::after { animation: sp-twinkle var(--t-drift) var(--ease-in-out) infinite; animation-delay: calc(var(--t-drift) / -2); }
[data-motion="on"] .sp-next.is-live::before { animation: sp-twinkle 1.6s var(--ease-in-out) infinite; }
[data-motion="on"] .sp-tape:hover .sp-tape__reels i { animation: sp-reel 1.6s linear infinite; }
/* the pile follows a fine pointer a little: --mx and --my are set on the pile by the page, each sticker at its own --depth */
.sp-pile { --mx: 0; --my: 0; }
.sp-pile .sp-sticker { --depth: 1; }
.sp-pile .sp-sticker { translate: calc(var(--mx, 0) * var(--depth, 1) * 16px) calc(var(--my, 0) * var(--depth, 1) * 16px); transition: translate .5s var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-base); }
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] *, [data-motion="on"] *::before, [data-motion="on"] *::after { animation: none !important; transition: none !important; }
  [data-motion="on"] [data-reveal] { opacity: 1; translate: none; }
}
@media print {
  [data-motion="on"] [data-reveal] { opacity: 1; translate: none; }
  .sp-sky, .sp-ticker { display: none; }
}
@container sp (max-width: 66rem) {
  .sp-meeting { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); }
  .sp-meeting__art { grid-column: 1 / -1; justify-self: start; max-width: 22rem; }
}
@container sp (max-width: 44rem) {
  .sp-meeting { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); }
  .sp-meeting__dow { font-size: 56px; }
  .sp-ticker__run { gap: 8px 1.8em; padding-right: 1.8em; }
  .sp-foot__mark { font-size: 40px; }
}

/* ---- site: design/system/site.css ---- */

/* ==========================================================================
   Spearhead: the site's own pieces
   Hand-written rules for what the site needs that the design system has no
   component for: the masthead's frame, the meetings pair and footer, the
   viewers' shell, the selection popup and toast, the logo plates, the fold
   under a "Linked from" block. Loads after tokens and spearhead.css and reads
   only their variables. Class names keep the sp- prefix.
   No rope and no keyed frames anywhere: a rule is a hairline in line or a
   keyline in ink.
   ========================================================================== */

/* ---------- ground ---------- */
/* spearhead.css makes body a size container, which also makes it the containing
   block for position: fixed. A scrolling page therefore keeps its fixed popup
   and toast outside .sp-root and lets the root be the container; a viewer,
   whose body is the viewport, opts back in with .sp-shell. */
body { container: none; }
.sp-root { container: sp / inline-size; }
body.sp-shell { container: sp / inline-size; }

/* ---------- rules ---------- */
.sp-hair { display: block; height: 0; margin: 0; border: 0; border-top: var(--hairline) solid var(--line); }

/* ---------- masthead: glass; stuck to the top only where a page is browsed, not read ----------
   Translucent paper over the sky (color-mix; the solid paper first for a browser without it) with
   the page blurred behind it. The home and meetings pages pin it (.sp-mast--stuck): there it opens
   as part of the weather and becomes a bar on the way down, its hairline drawn only once the page
   has scrolled (data-scrolled, set by the shared script). Everywhere reading happens -- the Book,
   the sallies, the readers, the guides, the players, the Kit -- it scrolls away with the page: on a
   phone its rows would otherwise take an eighth of the screen for the whole of a chapter (#35). */
.sp-mast { background: var(--paper); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.sp-mast--stuck { position: sticky; top: 0; z-index: 20; }
.sp-mast .sp-nav { padding-block: 12px 8px; }
.sp-mast--stuck .sp-hair { border-top-color: transparent; }
.sp-mast--stuck[data-scrolled] .sp-hair { border-top-color: var(--line); }
@media (prefers-reduced-motion: no-preference) { .sp-mast--stuck .sp-hair { transition: border-color var(--t-base) var(--ease-out); } }
/* the mark is inline in every page, so a page opened off the filesystem still carries it */
.sp-brand .sp-brand__mark { display: block; width: 42px; height: 42px; flex: none; }
.sp-mast .sp-brand .sp-brand__mark { width: 36px; height: 36px; }
/* the mark's sun turns, once in two minutes, and its rays reach a little when the brand is pointed
   at: the rays are a group of their own in the drawing (sp-mark__rays; build-design-emblems.py draws
   the Big Book on the sun), and the turn is gated on data-motion like every animation, so a device
   that asks for stillness has the mark still */
.sp-brand__mark .sp-mark__rays { transform-box: view-box; transform-origin: 50% 50%; }
[data-motion="on"] .sp-brand__mark .sp-mark__rays { animation: sp-sun 120s linear infinite; transition: scale var(--t-base) var(--ease-out); }
[data-motion="on"] .sp-brand:hover .sp-brand__mark .sp-mark__rays, [data-motion="on"] .sp-brand:focus-visible .sp-brand__mark .sp-mark__rays { scale: 1.07; }
@keyframes sp-sun { to { rotate: 360deg; } }
/* a pinned masthead's brand wears the Big Book sticker (BRAND_BADGE in build-site.py): full size at
   the top of the page, hanging over the sky, and shrunk into the mark's place
   as the page scrolls -- --mast-t runs 0 to 1 over the first 140px (MOTION_JS; two states where motion
   is off). The name and the mark come up as the badge goes down. */
.sp-brand--badge { position: relative; --badge: 120px; --mark: 36px; }
.sp-brand--badge .sp-brand__mark, .sp-brand--badge .sp-brand__name { opacity: var(--mast-t, 0); }
.sp-brand--badge .sp-brand__badge { position: absolute; left: 0; top: 50%; z-index: 1; width: calc(var(--mark) + (var(--badge) - var(--mark)) * (1 - var(--mast-t, 0))); line-height: 0; translate: 0 calc(var(--mark) / -2); opacity: calc(1 - var(--mast-t, 0) * var(--mast-t, 0)); filter: drop-shadow(0 1px 0 rgb(21 17 14 / .16)) drop-shadow(0 6px 6px rgb(21 17 14 / .22)); pointer-events: none; }
.sp-brand--badge .sp-brand__badge img { display: block; width: 100%; height: auto; }
@container sp (max-width: 44rem) {
  .sp-brand--badge { --badge: 88px; }
  .sp-mast--stuck .sp-nav__links { padding-left: calc((88px - 36px + 10px) * (1 - var(--mast-t, 0))); }   /* the links slide out from under it */
}
/* the tools wrap: on a phone the viewers' rules send the search (and the reader's date
   pager) to rows of their own, and a row that could not wrap would set the page's width */
.sp-nav__tools { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.sp-nav__tools .sp-search { flex: 1 1 9rem; min-width: 8rem; max-width: 14rem; min-height: 36px; }
/* the two weekly meetings: a pair of stamps beside the tools */
.sp-meets { display: inline-flex; gap: var(--space-2); }
.sp-meets .sp-stamp { color: var(--ink); cursor: pointer; }
.sp-meets .sp-stamp:hover, .sp-meets .sp-stamp:focus-visible { background: var(--ink); color: var(--paper); }

/* ---------- the meetings footer: on paper in a viewer, on the plate on the landing page ---------- */
.sp-meetfoot { margin-top: var(--space-7); padding: 14px 0 8px; border-top: var(--hairline) solid color-mix(in srgb, currentColor 28%, transparent); font: 400 15px/1.45 var(--font-sans); color: inherit; }
.sp-meetfoot__h { margin: 0 0 8px; font: 700 11px/1.3 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.sp-meetfoot a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 4px 0; color: inherit; text-decoration: none; }
.sp-meetfoot .d { flex: none; min-width: 15em; font: 700 11px/1.3 var(--font-stencil); letter-spacing: .08em; text-transform: uppercase; }
.sp-meetfoot .d::before { content: "\25C6"; display: inline-block; margin-right: 8px; font-size: 8px; vertical-align: 1px; color: var(--book-fill); }
.sp-meetfoot a:hover .t, .sp-meetfoot a:focus-visible .t { text-decoration: underline; }
.sp-foot .sp-meetfoot .d::before { color: var(--flash-red); }

/* ---------- the viewers' shell: masthead, then an index beside a column ---------- */
/* minmax(0, 1fr) for the one column: an auto column takes the widest row's min-content, so a
   masthead wider than a phone would lay the whole page out at its width and clip the rest */
body.sp-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; }
/* the viewers take the weather too: the sky's wash behind the masthead and the top of the index */
body.sp-shell { background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 62%, var(--paper)), var(--paper) 360px) no-repeat, var(--paper); }
.sp-shell main { display: grid; grid-template-columns: 19rem minmax(0, 1fr); min-height: 0; }
.sp-shell #sidebar { min-height: 0; overflow: auto; padding: var(--space-4); border-right: var(--hairline) solid var(--line); }
.sp-shell #content { min-height: 0; overflow: auto; padding: var(--space-5) clamp(16px, 4vw, 40px) var(--space-7); }
.sp-shell #index-toggle { display: none; }
.sp-side__h { display: block; margin: var(--space-4) 0 var(--space-2); font: 700 11px/1.2 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.sp-side__h:first-child { margin-top: 0; }
.sp-datenav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sp-hint { display: none; }
@container sp (min-width: 90rem) { .sp-hint { display: inline; } }
@container sp (max-width: 44rem) {
  .sp-shell main { grid-template-columns: minmax(0, 1fr); }
  .sp-shell #sidebar { display: none; border-right: 0; }
  body.browsing #sidebar { display: block; }
  body.browsing #content { display: none; }
  .sp-shell #index-toggle { display: inline-flex; }
  .sp-shell .sp-meets { display: none; }
}

/* ---------- the popover (SpPop in style/wordbook.js), the selection popup and the toast ---------- */
/* .sp-pop is the system's panel; the script appends one to body and floats it beside the
   measure. On a phone it is a sheet pinned to the bottom edge, whatever page opened it. */
.sp-pop, .sp-pop__body { box-sizing: border-box; }   /* the script sizes the body to the room under the word */
.sp-pop[hidden] { display: none; }
.sp-pop--sheet { position: fixed !important; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; z-index: 40; }
.sp-pop--sheet .sp-pop__body { max-height: 52vh; }

/* ---------- a dictionary entry in the popover (the Wordbook online, style/wordbook.js) ----------
   The classes are the Wordbook panel's own (scripts/wordbook.py print_entry_html), so an entry
   reads here as it does in the extensions: the head with its respelling, the numbered senses,
   a quotation set in, the Syn. note, then the entry as printed, cut from its column of the scan. */
.wb-entry { margin: 0 0 10px; }
.wb-entry + .wb-entry { padding-top: 10px; border-top: 1px dashed var(--line); }
.wb-entry-head { margin: 0 0 4px; }
.wb-hw { font-weight: 700; }
.wb-pron { color: var(--ink-soft); }
ol.wb-senses, ul.wb-senses { margin: 0 0 6px; padding-left: 1.4em; }
.wb-senses li { margin: 0 0 3px; }
.wb-quote { margin: 2px 0 4px 0; padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--ink-soft); font-style: italic; }
.wb-note, .wb-attrib, .wb-caveat, .wb-status, .wb-near { margin: 4px 0 6px; font: 400 13.5px/1.45 var(--font-sans); color: var(--ink-muted); }
.wb-near button, .wb-caveat button, .sp-pop__foot [data-wb], .wb-scan figcaption button { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-label); background: transparent; color: var(--link); font: inherit; cursor: pointer; }
.wb-near button:hover, .sp-pop__foot [data-wb]:hover, .wb-scan figcaption button:hover { background: var(--ink); color: var(--paper); }
.wb-scan { margin: 8px 0 6px; }
.wb-scan-offer { margin: 6px 0 14px; }
.wb-scan-offer .wb-status { display: inline; margin-left: 6px; }
.wb-scans { margin: 6px 0 16px; }
.wb-scan__view { overflow: auto; border: 1px solid var(--line-strong); background: #fff; }
.wb-scan__view img { display: block; max-width: none; }
.wb-scan__view .wb-status { padding: 8px 10px; }
.wb-scan figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 4px 0 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-muted); }
.wb-scan figcaption button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* the entry reads definition first: its numbers in the Book's ink, the forms and the origin after the
   senses in small sans; a dictionary entry gets a taller body before it scrolls */
ol.wb-senses li::marker { font-weight: 700; color: var(--book); }
.wb-etym { margin: 6px 0 4px; font: 400 13.5px/1.45 var(--font-sans); color: var(--ink-muted); }
.wb-etym__k { display: inline-block; margin-right: 6px; font: 700 10px/1.3 var(--font-stencil); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.sp-pop--tall .sp-pop__body { max-height: min(62vh, 34rem); }
.sp-pop--sheet.sp-pop--tall .sp-pop__body { max-height: 62vh; }
.wb-scan__view img { cursor: zoom-in; }
/* the dictionary page (bb/dictionary/): the same entries drawn into the page, at reading size */
.wb-page { margin: 24px 0 8px; }
.wb-page__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.wb-page__where { font: 600 14px/1.3 var(--font-sans); color: var(--ink-soft); }
.wb-page .wb-entry { margin: 0 0 22px; font: 400 18px/1.6 var(--font-serif); }
.wb-page .wb-entry + .wb-entry { padding-top: 18px; }
.wb-page .wb-scan { margin: 14px 0 8px; }
.wb-page__foot { margin: 8px 0 0; }
/* the full view: the column as printed, over the page, the entry's box marked; Esc or the ground closes it */
.wb-full { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(21 17 14 / .72); }
.wb-full__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 820px); max-height: 100%; background: var(--paper-raised); color: var(--ink); border: var(--keyline) solid var(--ink); border-radius: var(--radius-popup); box-shadow: var(--shadow-popup); overflow: hidden; }
.wb-full__bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 7px 14px; border-bottom: 1px solid var(--line); background: var(--paper-sunk); font: 600 13px/1.3 var(--font-sans); color: var(--ink-soft); }
.wb-full__where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-full__bar a { color: var(--link); white-space: nowrap; }
.wb-full__view { overflow: auto; background: #fff; }
.wb-full__strip { position: relative; margin: 0 auto; }
.wb-full__strip img { display: block; width: 100%; }
.wb-full__box { position: absolute; border: 2px solid var(--book-fill); border-radius: 3px; box-shadow: 0 0 0 3px rgb(255 255 255 / .6); pointer-events: none; }
body.wb-full-open { overflow: hidden; }
#pop { position: fixed; z-index: 40; display: none; gap: var(--space-1); padding: 5px; background: var(--paper-raised); color: var(--ink); border: var(--keyline) solid var(--ink); border-radius: var(--radius-popup); box-shadow: var(--shadow-popup); }
#pop.show { display: flex; flex-wrap: wrap; }
#pop button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-label); background: transparent; color: var(--ink); font: 600 13.5px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
#pop button:hover, #pop button:focus-visible { background: var(--ink); color: var(--paper); }
#pop button[hidden] { display: none; }
#toast { position: fixed; z-index: 41; left: 50%; bottom: 24px; translate: -50% 0; padding: 9px 14px; background: var(--ink); color: var(--paper); border-radius: var(--radius-label); font: 600 13.5px/1.3 var(--font-sans); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
#toast.show { opacity: 1; }
/* On a phone the popup is a bar along the bottom edge. A media query, not a container
   query: the popup sits outside .sp-root and body is no container (the shell rules above),
   so a container query here matched nothing and the bar rendered at the foot of the
   document, off every phone's screen. The page script asks the same media query. */
@media (max-width: 44rem) {
  #pop { left: 0 !important; right: 0; bottom: 0; top: auto !important; justify-content: center; border-radius: 14px 14px 0 0; border-bottom: 0; padding: 10px 8px; }
  #pop button { min-height: 44px; }
}

/* ---------- logo plates: a logo on white, a hairline round it ---------- */
.sp-plate { display: flex; align-items: center; justify-content: center; height: 108px; padding: 12px 16px; background: #fff; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-label); }
.sp-plate img { display: block; height: 100%; width: auto; }
.sp-plate--sq { padding: 10px; }

/* ---------- cards that wear a sticker at a corner ---------- */
.sp-root { overflow-x: clip; }   /* a tilted sticker at a corner never scrolls the page sideways */
.sp-sheet { position: relative; }
.sp-sheet__art, .sp-meet__art { position: absolute; top: -18px; right: -10px; z-index: 1; }
@container sp (max-width: 44rem) {
  .sp-sheet__art, .sp-meet__art, .sp-day__art { right: 2px; }
}
.sp-day--link { text-decoration: none; }
.sp-day--link:hover { border-color: var(--book-fill); }

/* ---------- Linked from: the rest of the list, folded ---------- */
/* the fold is a button and a span, phrasing content, so the note stays inside its <p> */
.sp-linked__more { display: block; margin: 2px 0 0; padding: 0; border: 0; background: none; font: 500 12px/1.3 var(--font-sans); color: var(--ink-muted); cursor: pointer; }
.sp-linked__more::before { content: "+ "; }
.sp-linked__more[aria-expanded="true"]::before { content: "\2013 "; }
.sp-linked__more:hover, .sp-linked__more:focus-visible { color: var(--link); }
.sp-linked__rest { display: block; }
.sp-linked__rest[hidden] { display: none; }
.sp-linked__rest a { display: block; padding: 2px 0; color: var(--ink-soft); text-decoration: none; }
.sp-linked__rest a:hover { color: var(--link); text-decoration: underline; }