/* duncan.beer — Field Record styles. Tokens match web/src/fieldRecord.css in the app. */

@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --ground: #0a110e;            /* darkened 31 Oct 2026 for section surfaces */
  --ground-inset: #0b1411;
  --surface-block: #172820;     /* every major section */
  --surface-focal: #21362c;     /* the one thing that matters now (closing signup) */
  --rule-ground: #1a2621;       /* rules on bare page: header, footer */
  --rule-row: #2b3b33;          /* rules inside a surface */
  --rule-section: #304339;      /* rules inside the focal surface */
  --rule-strong: #43534b;
  --ink: #ece4d2;
  --ink-2: #bdb6a3;
  --ink-3: #8f9a90;
  --ink-4: #6e7a72;
  --duncan: #cda75e;
  --duncan-voice: #e9dfc6;
  --duncan-quiet-rule: #3a3220;
  --data-temp: #7fb0a0;
  --destructive: #e3a193;
  --body-soft: #d9d0bb;
  --button-border: #4a574f;
  --font-serif: 'Newsreader Variable', Georgia, serif;
  --font-sans: 'Instrument Sans Variable', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--button-border); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type roles */
.serif { font-family: var(--font-serif); font-weight: 400; }
.cap { margin: 0; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.voice { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--duncan-voice); }
.stamp { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.planned { border-bottom: 1px dashed var(--ink-2); padding-bottom: 1px; }
.waiting { border-bottom: 1px dotted var(--ink-2); padding-bottom: 1px; }


/* ---------- Frame ---------- */
/* --pad: page gutter. --bx/--bt/--bb: block padding (DESIGN §6 Section surfaces: 32 sides, 28 top, 32 bottom). */
.wrap { --pad: 56px; --bx: 32px; --bt: 28px; --bb: 32px; width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 var(--pad); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: var(--rule-ground); }
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 18px; }
.wordmark { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--ink); text-decoration: none; }
.site-header nav { display: flex; gap: 24px; font-size: 15px; }
html { scroll-padding-top: 72px; }

/* Record column + 56 gutter + 256 Duncan margin */
:root { --fig-align: 135px; }
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 256px; column-gap: 56px; max-width: 1040px; }
.margin-head { display: flex; align-items: center; gap: 12px; }
.margin-head .cap { color: var(--duncan); letter-spacing: .2em; }
.margin-head span { flex: 1; height: 1px; background: var(--duncan-quiet-rule); }
.note { display: flex; gap: 12px; align-items: flex-start; }
.hook { flex: none; width: 20px; height: 1px; margin-top: 13px; background: var(--duncan); }
.note.to-figure .hook { width: 76px; margin-left: -56px; }

/* ---------- Section surfaces ----------
   Page (ground) → block → focal. Duncan's margin stays on bare ground beside the block it speaks
   to, so on desktop a block covers the record column only. No borders, no shadows, radius 2. */
.block { background: var(--surface-block); border-radius: 2px; padding: var(--bt) var(--bx) var(--bb); margin-left: calc(-1 * var(--bx)); margin-right: calc(-1 * var(--bx)); }
.focal { background: var(--surface-focal); border-radius: 2px; padding: 32px var(--bx) 36px; margin-left: calc(-1 * var(--bx)); }
/* --here: the background a hollow mark sits on, so planned/waiting marks punch through cleanly */
:root { --here: var(--ground); }
.story .wrap { --here: var(--surface-block); }

/* ---------- Hero ---------- */
.hero { padding: 120px 0 40px; }
.hero h1 { margin: 16px 0 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(52px, 7.4vw, 96px); line-height: 1; letter-spacing: -.01em; }
.hero .subtitle { margin: 16px 0 0; font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--ink-2); }
.hero .tagline { margin: 40px 0 0; font-family: var(--font-serif); font-size: 21px; line-height: 1.3; }
.hero .margin.r1 { padding-top: 10px; }
.hero .margin.r2 { padding-top: 40px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; padding: 10px 0; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
.scroll-cue .arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--button-border); border-radius: 50%; font-size: 15px; animation: cue-nudge 2.2s ease-in-out infinite; }
.scroll-cue:hover .arrow { border-color: var(--ink-2); }
@keyframes cue-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } }

/* ---------- Signup ---------- */
.signup { margin-top: 32px; max-width: 520px; }
.signup > label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.signup .row { display: flex; gap: 12px; }
.signup input[type=email] { flex: 1; min-width: 0; height: 42px; padding: 0 12px; background: var(--ground-inset); border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink); font: 15px var(--font-sans); }
.signup input[type=email]::placeholder { color: var(--ink-4); }
.btn-primary { flex: none; height: 42px; padding: 0 16px; border: 0; border-radius: 2px; background: var(--ink); color: var(--ground); font: 500 14px var(--font-sans); cursor: pointer; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.signup .hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.signup .error { margin: 8px 0 0; font-size: 13px; color: var(--destructive); }
.signup .error:empty { display: none; }
.signup .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.signup .consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.signup-done { margin-top: 32px; max-width: 520px; padding-top: 12px; border-top: 1px solid var(--ink); }
.signup-done p { margin: 0; font-family: var(--font-serif); font-size: 21px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Story: batch line ---------- */
.stage { padding: 72px 0; }
/* The stage's record column is one block. It's drawn behind the wrap, so it rises and fades with
   the stage as one unit and stays put while scenes change inside it. */
.stage > .wrap { position: relative; isolation: isolate; }
.stage > .wrap::before { content: ''; position: absolute; z-index: -1; border-radius: 2px; background: var(--surface-block);
  top: calc(-1 * var(--bt)); bottom: calc(-1 * var(--bb)); left: calc(var(--pad) - var(--bx));
  width: calc(min(100% - 2 * var(--pad), 1040px) - 312px + 2 * var(--bx)); }
.stage-top h2.cap { margin: 0; }
.stage-margin-head { padding-top: 2px; }
.bline { position: relative; margin-top: 34px; height: 60px; }
.bline .track { position: absolute; left: 0; right: 0; top: 24px; border-top: 1px dashed var(--ink-4); }
.bline .done { position: absolute; left: 0; top: 23px; height: 2px; background: var(--ink-2); width: 0; }
.bline .cur  { position: absolute; top: 22.5px; height: 3px; background: var(--ink); width: 0; }
.bline .now  { position: absolute; top: 8px; width: 1px; height: 34px; background: var(--ink); left: 0; }
.bline .now span { position: absolute; top: -18px; left: 6px; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.bline .now.flip span { left: auto; right: 6px; }
.bline ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.bline li { position: absolute; top: 0; height: 60px; }
.bline .mark { position: absolute; top: 20px; left: -4px; width: 9px; height: 9px; box-sizing: border-box; border: 1px dashed var(--ink-2); background: var(--here); }
.bline li.reached .mark { border: 0; border-radius: 50%; background: var(--ink-2); }
.bline li.current .mark { border: 0; border-radius: 50%; background: var(--ink); }
.bline .label { position: absolute; top: 40px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.bline li:first-child .label { transform: none; }
.bline li:last-child .label { transform: translateX(-100%); }
.bline li.reached .label { color: var(--ink-3); }
.bline li.current .label { color: var(--ink); }

/* ---------- Story: scenes ---------- */
.scenes { margin-top: 36px; }
.scene .copy h3 { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; }
.scene .copy .body { margin: 10px 0 0; max-width: 600px; font-size: 16px; line-height: 1.55; color: var(--body-soft); }
.specimen { margin-top: 24px; border-top: 1px solid var(--rule-row); padding-top: 16px; }
.specimen > .cap:first-child { margin-bottom: 12px; }
.scene-margin { grid-column: 2; grid-row: 2; margin-top: 24px; padding-top: var(--align, 0); }

/* Spec sheet rows (DESIGN §18) */
.equip-head .cap { margin-bottom: 4px; }
.equip-head .name { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; }
.equip-head .model { font-size: 13px; color: var(--ink-3); }
dl { margin: 0; }
.fact { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule-row); }
.fact:first-of-type { margin-top: 12px; border-top: 1px solid var(--rule-row); }
.fact dt { font-size: 14px; color: var(--ink-2); }
.fact dd { margin: 0; font-family: var(--font-serif); font-size: 21px; }
.fact .source { font-size: 13px; color: var(--ink-3); }
.words { margin: 6px 0 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.4; }
.tasting { margin-top: 16px; }

/* Journal spine (DESIGN §11) */
.entry { display: grid; grid-template-columns: 96px 28px minmax(0, 1fr); }
.entry time { padding-top: 2px; font-size: 13px; color: var(--ink-3); }
.spine { position: relative; }
.spine::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--rule-strong); }
.node { position: absolute; left: 9px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.node.dotted { background: var(--here); border: 1px dotted var(--ink); }
.entry .body { padding-bottom: 18px; }
.entry .title { margin: 0; font-size: 16px; font-weight: 600; }
.entry .words { margin-top: 4px; }
.entry .meta { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }

/* Telemetry: readings + chart on the batch line's own time scale */
.readings { display: flex; flex-wrap: wrap; gap: 12px 48px; align-items: flex-end; }
.reading strong { display: block; font-family: var(--font-serif); font-weight: 300; font-size: 56px; line-height: .95; }
.reading strong small { margin-left: 6px; font-size: 20px; color: var(--ink-2); }
.reading > span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.reading.target strong { font-size: 40px; }
.reading.target strong em { font-style: normal; border-bottom: 1px dashed var(--ink-2); }
.chart { position: relative; margin-top: 24px; height: 190px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lane-label { position: absolute; left: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ink-4); }
.lane-temp { top: 58%; }
.bracket { position: absolute; left: 60%; width: 10%; top: 30px; height: 6px; border: 1.2px solid var(--duncan); border-bottom: 0; }
.thread { position: absolute; left: 70%; right: -56px; top: 30px; height: 0; border-top: 1px solid var(--duncan); }
.rail { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; }
.cp { position: absolute; top: 0; width: 8px; height: 8px; margin-left: -4px; box-sizing: border-box; border: 1px dashed var(--ink-2); background: var(--here); }
.cp.done { border: 0; background: var(--ink-2); }
.chart-cap { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }

/* Brew plan list (static fallback for Conditioning) */
.plan { list-style: none; margin: 0; padding: 0; }
.plan li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-row); font-size: 16px; }
.plan .sq { width: 10px; height: 10px; border: 1px dashed var(--ink-2); box-sizing: border-box; }
.plan li.done .sq { border: 0; background: var(--ink-2); }
.plan .meta { color: var(--ink-3); }

/* ----- Static (no JS or reduced motion): scenes listed in order, line fully recorded ----- */
.story:not(.live) .bline .done { width: 100%; }
.story:not(.live) .bline .now { display: none; }
.story:not(.live) .bline li .mark { border: 0; border-radius: 50%; background: var(--ink-2); }
.story:not(.live) .bline li .label { color: var(--ink-3); }
.story:not(.live) .scene { padding: 40px 0; border-top: 1px solid var(--rule-row); }
.story:not(.live) .bracket, .story:not(.live) .thread { display: none; }

/* ----- Live: one pinned stage; scroll scrubs through the scenes ----- */
.story.live { height: 410vh; }
.story.live .stage { position: sticky; top: 0; height: 100svh; padding: 104px 0 24px; overflow: hidden; }
.story.live .scenes { position: relative; height: var(--scenes-h, auto); }
.story.live .scene { position: absolute; top: 0; left: 0; right: 0; }
.story.live .scene .copy,
.story.live .scene .scene-margin,
.story.live .scene .specimen { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.story.live .scene.on .copy,
.story.live .scene.on .scene-margin,
.story.live .scene.on .specimen { opacity: 1; visibility: visible; transition: opacity .3s ease .05s, visibility 0s; }
/* Fermenting's chart stays on stage through Conditioning: same timeline, still recording */
.story.live[data-at-scene="3"] .scene[data-scene="2"] .specimen { opacity: 1; visibility: visible; transition: none; }
.story.live[data-at-scene="3"] .scene[data-scene="2"] .scene-margin { opacity: 0; }
.story.live .scene[data-scene="3"] .static-only { visibility: hidden !important; opacity: 0 !important; overflow: hidden; border: 0; padding: 0; }
.story.live .scene[data-scene="3"] .static-only > * { display: none; }
/* Items record in as the scene's local progress passes their mark */
.story.live [data-at] { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.story.live [data-at].in { opacity: 1; transform: none; }
.story.live .bracket, .story.live .thread { opacity: 0; transition: opacity .3s ease; }
.story.live .show-bracket .bracket, .story.live .show-bracket .thread { opacity: 1; }

/* Tight: a scene wouldn't fit the window, so drop its sentence and shrink a little */
.story.live.tight .scene .copy .body { display: none; }
.story.live.tight .scene .copy h3 { font-size: 26px; }
.story.live.tight .chart { height: 120px; }
.story.live.tight .reading strong { font-size: 40px; }
.story.live.tight .bline { margin-top: 26px; }
.story.live.tight .scenes { margin-top: 16px; }
.story.live.tight .fact { padding: 7px 0; }
.story.live.tight .entry .body { padding-bottom: 8px; }
.story.live.tight .specimen { margin-top: 14px; }

/* ---------- Closing + footer ---------- */
.closing { padding: 24px 0 96px; }
.closing .focal { max-width: calc(1040px - 312px + 2 * var(--bx)); }
.closing h2 { margin: 12px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; }
.lede { margin: 14px 0 0; max-width: 580px; font-size: 16px; line-height: 1.55; color: var(--body-soft); }
.site-footer { border-top: 1px solid var(--rule-ground); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 20px; padding-bottom: 36px; font-size: 12px; color: var(--ink-3); }
.site-footer a { color: var(--ink-3); }

/* About page */
.page { padding: 152px 0 112px; }
.page h1 { margin: 12px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1.05; }
.page .prose { margin-top: 36px; max-width: calc(620px + 2 * var(--bx)); }
.page .prose p:last-child { margin-bottom: 0; }
.page .prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--body-soft); }
.page .prose p.lead { font-family: var(--font-serif); font-size: 24px; line-height: 1.35; color: var(--ink); }

/* Short desktop windows: tighten the stage so the scene fits */
@media (min-width: 961px) and (max-height: 820px) {
  .story.live .stage { padding-top: 100px; }
  .scenes { margin-top: 24px; }
  .scene .copy h3 { font-size: 30px; }
  .chart { height: 150px; }
  .reading strong { font-size: 48px; }
  :root { --fig-align: 128px; }
}

/* ≤960: margin collapses; notes sit under their item with the hook turned down */
@media (max-width: 960px) {
  .wrap { --pad: 36px; --bx: 20px; --bt: 24px; --bb: 24px; }
  .rec { grid-template-columns: minmax(0, 1fr); }
  .stage > .wrap::before { width: calc(min(100% - 2 * var(--pad), 1040px) + 2 * var(--bx)); }
  .focal { margin-right: calc(-1 * var(--bx)); padding: 24px var(--bx); }
  .closing .focal { max-width: none; }
  .margin-head, .stage-margin-head { display: none; }
  .hero .margin.r1 { display: none; }
  .hero .margin, .scene-margin { padding-top: 0 !important; margin-top: 0; grid-column: 1; grid-row: auto; }
  .note { gap: 0; margin-top: 12px; }
  .note .hook, .note.to-figure .hook { position: relative; width: 24px; height: 20px; margin: 0; background: none; }
  .note .hook::before { content: ''; position: absolute; left: 6px; top: 0; height: 10px; border-left: 1px solid var(--duncan); }
  .note .hook::after { content: ''; position: absolute; left: 6px; top: 10px; width: 12px; border-top: 1px solid var(--duncan); }
  .note > div { padding-left: 4px; }
  .thread { right: 0; }
}

/* ≤640: phone */
@media (max-width: 640px) {
  .wrap { --pad: 16px; --bx: 16px; --bt: 20px; --bb: 20px; }
  .stage > .wrap::before, .block, .focal { border-radius: 0; }
  .site-header .wrap { padding-top: 16px; padding-bottom: 14px; }
  html { scroll-padding-top: 60px; }
  .hero { padding-top: 96px; padding-bottom: 40px; }
  .signup .row { flex-direction: column; }
  .signup input[type=email], .btn-primary { flex: none; height: 44px; width: 100%; }
  .signup .consent { min-height: 44px; }
  .bline .label { display: none; }
  .bline li.current .label { display: block; }
  .story.live .stage { padding-top: 88px; }
  .scenes { margin-top: 20px; }
  .scene .copy h3 { font-size: 26px; }
  .scene .copy .body { font-size: 14px; line-height: 1.5; }
  .specimen { margin-top: 16px; padding-top: 12px; }
  .fact { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
  .fact dt { grid-column: 1 / -1; font-size: 12px; }
  .fact dd { font-size: 19px; }
  .entry { grid-template-columns: 60px 24px minmax(0, 1fr); }
  .entry .body { padding-bottom: 12px; }
  .entry .words { font-size: 16px; }
  .reading strong { font-size: 40px; }
  .reading.target { display: none; }
  .chart { height: 130px; margin-top: 16px; }
  .chart-cap { display: none; }
  .note .voice { font-size: 15px; }
  .page { padding-top: 112px; }
  .page h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}