/* skystaapp.com, the base sheet: every page loads this first.

   PAPER AND LIGHT. The whole site is the app's warm paper (SkystaTheme.paper)
   and the only colour on it is light: the skies inside prints, the coral arc
   of a score ring, coral dots and pins, the phase dots, and the soft dawn
   bloom behind the mark. Every word and every control stands on paper, so
   contrast and the focus ring are always measured against paper.

   What lives here: the tokens (every custom property any sheet or module
   reads is defined on :root below, or set through the CSSOM by a module, or
   declared by the component that owns it; js/tokens.test.mjs checks), the
   serif, the reset and type, the shell (skip link, header, menu, footer), the
   shared components, the mark and its motions, the reading, focus, the reveal
   classes, and the reduced motion, forced colours, contrast and transparency
   blocks. home.css holds the home page only; spots.css, suggest.css and
   pages.css hold their own pages.

   No dash in this file, comments included: build-pages --check sweeps it. */

@font-face {
  font-family: "Source Serif 4";
  /* The subset fonts/subset-serif.mjs cuts: Latin, the weights 400 to 650,
     the whole optical size axis, and the tnum and lnum features. block, not
     swap: a headline arrives in its own face or not at all, never in Georgia
     first. The file is preloaded by every page. */
  src: url("/fonts/SourceSerif4-latin.woff2") format("woff2");
  font-weight: 400 650;
  font-display: block;
}

/* The radius of the daybreak's hole (M19), registered so it can be animated. */
@property --r {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: -2%;
}

:root {
  color-scheme: light;

  /* ground */
  --paper: #FFFCF7;            /* SkystaTheme.paper: page ground, theme-color */
  --cream: #FFF7EF;            /* SkystaTheme.cream: footer band, FAQ open row */
  --cream-tint: #F6F1EB;       /* SkystaTheme.creamTint: hovered row, table head */
  --white: #FFFFFF;            /* field fill */
  --sand: #D8CEC3;             /* SkystaTheme.sand: grabber, decorative rules only */

  /* lines */
  --hair: rgba(14, 27, 50, 0.10);
  --hair-soft: rgba(14, 27, 50, 0.06);   /* inner edge on prints */
  --hair-strong: rgba(14, 27, 50, 0.18); /* secondary button edge */
  --field-edge: #8A8F9A;                 /* field borders: 3.24:1 on white (non text 3:1) */

  /* ink */
  --ink: #0E1B32;              /* 16.80:1 on paper */
  --ink-hover: #1B2A47;
  --ink-2: #545E72;            /* 6.37:1 on paper, 6.15 on cream, 5.81 on cream tint */
  --ink-3: #666E7E;            /* 5.01:1 on paper, 4.83 on cream, 4.56 on cream tint: the floor for any text */
  --on-sky: #FFFCF7;           /* only inside a sky print (the /s/ mark) */

  /* brand light: gold and coral are NEVER text */
  --coral: #FF6C65;            /* 2.71: arcs, dots, pins, current underline */
  --coral-warm: #FF8E63;       /* arc end */
  --coral-deep: #C5413D;       /* 4.89 on paper: error text, prose link underline, pin edge */
  --gold: #EBA835;             /* 2.01: golden hour dot, live arc start */
  --gold-deep: #9A6200;        /* 4.98 on paper: eyebrows, legal numerals */
  --dawn: #EAB79A;             /* SkystaTheme.dawnGlow: the mark's bloom */
  --pale-gold: #F7DAA9;        /* SunApproach paleGold: selection, :target wash */
  --peach: #F2D3BF;            /* SunApproach peach */
  --blush: #FFD6C3;            /* SunApproach blush */
  --twilight: #6D5A9C;
  --night-blue: #2A2D6F;
  --phase-golden: #EBA835;
  --phase-blue: #4E63A8;
  --phase-last: #2A3160;
  --ramp-evening: linear-gradient(90deg, #EBA835 0%, #FF6C65 38%, #6D5A9C 72%, #2A2D6F 100%);
  --ramp-card: linear-gradient(180deg, #151C3E 0%, #2E3463 28%, #5D4B78 50%, #9C6476 66%, #C9764F 78%, #6E3325 100%);

  /* THE SKY BEFORE THE SKY. js/tone.js overwrites these eight before the
     first paint with the clock sky for this minute, so a print holds the
     right colours before its canvas lands. These defaults are tone.js's own
     stops at a sun 2 degrees under (dayness 0.556) with no scrim: what a page
     with no script shows. tone.test.mjs works them out again. */
  --sky-0: #181B44; --sky-34: #3A3564; --sky-38: #463762; --sky-66: #994A55;
  --sky-70: #964C58; --sky-88: #8C5465; --sky-90: #8A5567; --sky-100: #805B73;

  /* type */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.375rem, 1.45rem + 3.8vw, 4.75rem);   /* 38 at 390, 76 at 1440: the home H1 only */
  --t-minute: clamp(4.5rem, 2.6rem + 7.2vw, 8.5rem);        /* 72 to 136: the live minute */
  --t-page: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);        /* 36 to 60: every other page's H1 */
  --t-sec: clamp(2rem, 1.45rem + 2.3vw, 3.5rem);            /* 32 to 56: section H2 */
  --t-sub: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);        /* 22 to 28: H3, legal h2, city name */
  --t-title: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);   /* 19 to 22: a row's title, FAQ summary */
  --t-stand: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);  /* 19 to 22: ledes, curator reasons (serif 400) */
  --t-num: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);        /* 22 to 28: figures in bare tables (serif, tabular) */
  --t-body: 1.0625rem;        /* 17px sans */
  --t-read: 1.125rem;         /* 18px serif reading; 1.1875rem from 1024 */
  --t-small: 0.9375rem;       /* 15px */
  --t-caption: 0.84375rem;    /* 13.5px, ink 3 */
  --t-eyebrow: 0.75rem;       /* 12px sans 650 caps, gold deep */
  --t-micro: 0.6875rem;       /* 11px sans 650 caps, ink 3 */
  --ls-eyebrow: 0.16em;
  --ls-micro: 0.12em;
  --lh-tight: 1.04;
  --lh-head: 1.1;
  --lh-body: 1.6;
  --lh-read: 1.7;
  --measure: 66ch;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px; --s-12: 128px;
  --band: clamp(4.5rem, 3rem + 6vw, 9rem);        /* 72 to 144 above and below every section */
  --gap-eyebrow: 12px;
  --gap-lede: 16px;
  --gap-thing: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  --gap-note: 28px;
  --gutter: 20px;              /* 32px from 600, 48px from 1024 */
  --col-gap: 16px;             /* 24px from 800, 32px from 1024 */
  --content: 1200px;
  --header-h: 60px;            /* 68px from 800 */

  /* corners */
  --r-print: 4px;              /* prints and stills from 800 up; 0 when full bleed on a phone */
  --r-thumb: 10px;
  --r-input: 14px;
  --r-button: 16px;            /* SkystaPrimaryButtonStyle */
  --r-float: 18px;
  --r-sheet: 22px;
  --r-device: 30px;            /* screenshots */
  --r-pill: 999px;

  /* shadows: only things that float or are objects */
  --shadow-float: 0 2px 6px rgba(14, 27, 50, 0.06), 0 18px 40px -12px rgba(14, 27, 50, 0.22);
  --shadow-sheet: 0 -6px 28px rgba(14, 27, 50, 0.12);
  --shadow-device: 0 30px 60px -30px rgba(14, 27, 50, 0.35);

  /* motion */
  --ease-beat: cubic-bezier(0, 0, 0.58, 1);          /* the app's skystaBeat (SwiftUI easeOut) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.075, 0.242, 0.437, 0.620, 0.773, 0.887, 0.965, 1.013, 1.037, 1.046, 1.044, 1.037, 1.028, 1.020, 1.012, 1.006, 1.002, 1, 0.998, 0.998, 0.998, 0.998, 0.999, 1); /* Spring(response 0.4, damping 0.7), settles in 655ms */
  --d-press: 150ms;
  --d-hover: 180ms;
  --d-beat: 350ms;
  --d-turn: 500ms;
  --d-rise: 600ms;
  --d-ring: 600ms;
  --d-spring: 655ms;
  --d-develop: 700ms;
  --d-city: 900ms;
  --d-tween: 1400ms;
  --d-approach: 1350ms;

  /* stacking */
  --z-sheet: 30; --z-float: 40; --z-header: 50; --z-menu: 60; --z-skip: 100;

  /* the mark's geometry, in its own 861 x 553 units: the point the launch
     veil scales the rays about (SkystaLaunchVeil.sunCentre). The ring itself
     is drawn at (433.4, 358.6), fitted to the artwork; see
     tools/skysta-admin/brand/build-mark.py. */
  --mark-sun-origin: 433.4px 356.4px;
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 800px) { :root { --header-h: 68px; --col-gap: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --col-gap: 32px; --t-read: 1.1875rem; } }

/* ============================================================ the reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Smooth only once the reader is on the page: html:focus-within matches
   after a press or a Tab, never during a load, so arriving at /#faq or
   /privacy/full/#s11 jumps straight there instead of animating through the
   whole document. */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  min-height: 100vh;
}
img, svg, canvas, video { display: block; max-width: 100%; }
/* Every picture with width and height attributes keeps its own shape. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
section[id] { scroll-margin-top: var(--header-h); }
/* A targeted section (a legal #s4) clears the header by 24px too: the more
   specific section[id] rule above would otherwise win and set it flush. */
:target, section[id]:target { scroll-margin-top: calc(var(--header-h) + 24px); }
::selection { background: var(--pale-gold); color: var(--ink); }

/* ================================================================= type */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  font-optical-sizing: auto;
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
p, li, dd, figcaption { text-wrap: pretty; }
strong, b { font-weight: 650; }
/* THE SERIF IS ROMAN ONLY, so nothing is slanted or thickened by the browser:
   an em reads in the same roman as the words around it. */
html { font-synthesis: none; }
em, i:not([class]) { font-style: normal; }
.serif { font-family: var(--serif); font-optical-sizing: auto; }
.num, .tabular { font-variant-numeric: tabular-nums lining-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.wrap {
  max-width: calc(var(--content) + 2 * var(--gutter));
  padding-inline: var(--gutter);
  margin-inline: auto;
}

/* ================================================================ focus */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ============================================================ skip link */
.skip {
  position: absolute; left: 12px; top: 10px;
  z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-small);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ================================================================ header */
header.top {
  position: sticky; top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--paper);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top {
    background: rgba(255, 252, 247, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
/* The hairline under the header: there once the page has moved (M17). */
header.top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--hair);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    header.top::after {
      animation: header-hair linear both;
      animation-timeline: scroll(root);
      animation-range: 0 48px;
    }
  }
}
@keyframes header-hair { from { opacity: 0; } to { opacity: 1; } }

header.top .wrap {
  height: 100%;
  display: flex; align-items: center; gap: 12px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-family: var(--serif);
  font-weight: 620;
  font-variation-settings: "wght" 620;
  font-size: 1.375rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .wordmark-mark { flex: none; width: 34px; height: 22px; }
.top-nav { display: none; }
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--d-hover) var(--ease-out);
}
.top-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline 2px var(--coral);
  text-underline-offset: 6px;
}
.pill {
  margin-left: auto;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-small); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out), opacity var(--d-press) var(--ease-out);
}
.pill::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pill:active { opacity: 0.82; }
@media (hover: hover) and (pointer: fine) {
  .top-nav a:hover { color: var(--ink); }
  .pill:hover { background: var(--ink-hover); }
}
@media (min-width: 800px) {
  .top-nav { display: flex; gap: 28px; margin-left: auto; }
  .pill { margin-left: 20px; }
  .wordmark { font-size: 1.4375rem; }
}

/* THE PHONE'S MENU: a details, so it works on the pages that ship no script. */
details.menu { position: static; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
details.menu[open] .menu-bars { background: transparent; }
details.menu[open] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
details.menu[open] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding: 8px var(--gutter) 20px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
}
.menu-panel a {
  display: flex; align-items: center;
  min-height: 56px;
  font-family: var(--serif); font-size: 1.625rem; font-weight: 500;
  font-variation-settings: "wght" 500;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { text-decoration: underline 2px var(--coral); text-underline-offset: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .menu-bars::before, .menu-bars::after { transition: transform 180ms var(--ease-beat); }
  details.menu[open] .menu-panel { animation: menu-in 220ms var(--ease-beat) both; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 800px) { details.menu { display: none; } }

/* ================================================================ footer */
body > footer {
  background: var(--cream);
  border-top: 1px solid var(--hair);
  padding-top: var(--s-10);
  padding-bottom: var(--s-7);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--col-gap);
}
.foot-brand { grid-column: 1 / -1; }
.foot-brand .wordmark .wordmark-mark { width: 40px; height: 26px; }
.foot-brand p {
  margin-top: 6px;
  font-family: var(--serif); font-size: var(--t-stand);
  color: var(--ink-2);
}
.foot-grid nav { display: flex; flex-direction: column; }
.foot-grid nav h2 {
  font-family: var(--sans);
  font-size: var(--t-micro); font-weight: 650;
  font-variation-settings: normal;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
/* 44px rows: the spec's 40px link and 4px gap, as one target. */
.foot-grid nav a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); color: var(--ink-2);
  text-decoration: none;
  transition: color var(--d-hover) var(--ease-out);
}
.foot-end { margin-top: var(--s-9); }
.foot-colophon {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
  font-size: var(--t-caption); color: var(--ink-3);
}
.foot-colophon a { color: var(--ink-2); text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .foot-grid nav a:hover { color: var(--ink); }
  .foot-colophon a:hover { color: var(--ink); }
}
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: auto; }
}

/* ============================================================ components */

/* The eyebrow, and the small capital label over a number. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: var(--t-eyebrow); font-weight: 650;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-deep);
}
.eyebrow--dot::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
}
.micro {
  font-family: var(--sans);
  font-size: var(--t-micro); font-weight: 650;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}
.caption {
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-3);
}
figure > .caption { margin-top: 10px; }

/* A section and its head: eyebrow, headline, one line, then the thing. */
.sec { padding-block: var(--band); }
/* Two sections in a row share most of one band rather than stacking two:
   288px of blank paper between them at 1440 read as a page that had ended. */
.sec + .sec { padding-top: calc(var(--band) * 0.25); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--gap-thing); }
.sec-head > h2 {
  margin-top: var(--gap-eyebrow);
  font-size: var(--t-sec);
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  max-width: 18em;
}
.sec-head > .lede, .lede {
  font-family: var(--serif);
  font-size: var(--t-stand);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
}
.sec-head > .lede { margin-top: var(--gap-lede); }

/* Buttons. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border-radius: var(--r-button);
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), opacity var(--d-press) var(--ease-out);
}
.btn:active { opacity: 0.82; }
.btn:disabled { cursor: default; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--secondary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.btn--small { min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--t-small); }
.btn--small::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.btn[aria-busy="true"] { cursor: progress; }
.btn svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--ink-hover); }
  .btn--secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
}

/* The quiet link, with its arrow. */
.link-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--ink);
  text-decoration: underline 2px var(--coral-deep);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: text-decoration-color var(--d-hover) var(--ease-out);
}
.link-quiet svg { width: 0.9em; height: 0.9em; flex: none; transition: transform var(--d-hover) var(--ease-out); }
.link-quiet .lq-text { text-decoration: inherit; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-quiet:hover { text-decoration-color: var(--ink); }
  .link-quiet:hover svg { transform: translateX(3px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .link-quiet:hover { text-decoration-color: var(--ink); }
}

/* Links in running text: paragraphs, table cells, captions, and the list
   items of a reading page (.doc-body, .prose). A list of links that is a
   list of things (a spot list, a nav) is not running text and is not here. */
:where(main) :where(p, dd, td, figcaption, blockquote) a:not([class]),
:where(.doc-body, .prose) li a:not([class]) {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--coral-deep);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :where(main) :where(p, dd, td, figcaption, blockquote) a:not([class]):hover,
  :where(.doc-body, .prose) li a:not([class]):hover {
    text-decoration-color: var(--ink);
    text-decoration-thickness: 2px;
  }
}

/* Fields. */
.field {
  display: block; width: 100%;
  min-height: 54px; padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--field-edge);
  border-radius: var(--r-input);
  font-size: 1.0625rem; color: var(--ink);
  transition: border-color var(--d-hover) var(--ease-out);
}
textarea.field { padding-block: 14px; line-height: 1.5; resize: vertical; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:focus { border-color: var(--ink); }
.field[aria-invalid="true"] { border-color: var(--coral-deep); }
.select { position: relative; display: block; }
.select select {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  min-height: 54px; padding: 0 44px 0 16px;
  background: var(--white);
  border: 1px solid var(--field-edge);
  border-radius: var(--r-input);
  font-size: 1rem; color: var(--ink);
  color-scheme: light;
  cursor: pointer;
}
.select select:focus { border-color: var(--ink); }
.select::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.error {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--t-small); line-height: 1.45;
  color: var(--coral-deep);
}
.error::before {
  content: "!"; content: "!" / ""; flex: none;
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%;
  background: var(--coral-deep); color: var(--paper);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.error:empty::before { display: none; }

/* A radio group drawn as segments. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 0; padding: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.seg label:first-of-type { border-radius: var(--r-input) 0 0 var(--r-input); }
.seg label:last-of-type { border-radius: 0 var(--r-input) var(--r-input) 0; }
.seg label + input + label, .seg label + label { margin-left: -1px; }
.seg input:checked + label { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; position: relative; }

/* Text buttons that say which one is pressed: a coral line slides under it. */
.toggle-text {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--d-hover) var(--ease-out);
}
.toggle-text::after {
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: 8px;
  height: 2px; border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
}
.toggle-text[aria-pressed="true"], .toggle-text[aria-current="true"], .toggle-text[aria-current="page"] { color: var(--ink); }
.toggle-text[aria-pressed="true"]::after, .toggle-text[aria-current="true"]::after, .toggle-text[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .toggle-text::after { transition: transform var(--d-beat) var(--ease-beat); } }
@media (hover: hover) and (pointer: fine) { .toggle-text:hover { color: var(--ink); } }

/* The combobox's popover. */
.drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: var(--z-float);
  padding: 6px;
  background: var(--paper);
  border-radius: var(--r-float);
  box-shadow: var(--shadow-float);
}
.drop [role="listbox"] { list-style: none; padding: 0; margin: 0; }
.drop [role="option"] {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 48px; padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--ink);
}
.drop [role="option"] > :first-child { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); line-height: 1.25; }
.drop [role="option"] > .where { font-size: 0.875rem; color: var(--ink-2); line-height: 1.35; }
.drop [role="option"][aria-selected="true"] { background: var(--cream-tint); box-shadow: inset 2px 0 0 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .drop [role="option"]:hover { background: var(--cream-tint); } }
.geo-credit { padding: 8px 14px 6px; font-size: var(--t-caption); color: var(--ink-3); }
.geo-credit a { color: var(--ink-2); text-underline-offset: 2px; }

/* A PRINT: a drawn sky, or a CSS sky where a page ships no script. It holds
   its box before anything paints, it is always aria-hidden, and it carries a
   faint inner edge so a pale sky never melts into the paper. */
.print {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg,
    var(--sky-0) 0%, var(--sky-34) 34%, var(--sky-38) 38%, var(--sky-66) 66%,
    var(--sky-70) 70%, var(--sky-88) 88%, var(--sky-90) 90%, var(--sky-100) 100%);
}
.print > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.print::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  pointer-events: none;
  z-index: 3;
}
@media (min-width: 800px) { .print { border-radius: var(--r-print); } }
/* M4: the light rises from the horizon as a print is first reached. The
   wait class goes on the print's PARENT: an element clipped to nothing is,
   to an IntersectionObserver, never in view, so it would wait for ever. */
@media (prefers-reduced-motion: no-preference) {
  .print--develop { transition: clip-path var(--d-develop) var(--ease-beat); }
  .print-wait > .print--develop, .print-wait > * > .print--develop { clip-path: inset(100% 0 0 0); }
}

/* THE RING: SVG, viewBox 64. The track in ink at 12%, the arc from twelve
   o'clock, its length set through the CSSOM (stroke-dashoffset against a
   pathLength of 100). Its gradient lives in its own defs, coral to warm
   coral, and gold to coral while the capture window is live (clock time,
   never the score). */
.ring { display: block; width: 56px; height: 56px; overflow: visible; }
.ring-track { fill: none; stroke: rgba(14, 27, 50, 0.12); stroke-width: 5; }
.ring-arc { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.ring-stop-a { stop-color: var(--coral); }
.ring-stop-b { stop-color: var(--coral-warm); }
.ring--live .ring-stop-a { stop-color: var(--gold); }
.ring--live .ring-stop-b { stop-color: var(--coral); }
.ring-num {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-variant-numeric: tabular-nums lining-nums;
}

/* THE CONSOLE: one score row, and the button that opens why. A hairline
   above and below, and nothing else around it. */
.console {
  display: grid;
  grid-template-columns: auto auto 1px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.console .ring { width: 56px; height: 56px; }
.console-num {
  min-width: 1.2em;
  font-family: var(--serif); font-size: 2.5rem; font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.console-num:empty { min-width: 0; }
.console-rule { align-self: stretch; width: 1px; margin-block: 6px; background: var(--hair); }
.console-say { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.console-action { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.console-second { font-size: 0.875rem; color: var(--ink-2); line-height: 1.35; font-variant-numeric: tabular-nums; }
.console-chev { width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--d-beat) var(--ease-beat); }
.console[aria-expanded="true"] .console-chev { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { .console:hover .console-chev { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .console-num { transition: opacity 200ms var(--ease-beat); }
}

/* A BARE TABLE: a small capital word over a serif figure, a hairline on top. */
.bare-table {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--col-gap);
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
/* The figures share one baseline even when a label wraps to two lines. */
.bt-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.bt-col .micro { display: inline-flex; align-items: center; gap: 6px; }
.bt-num {
  font-family: var(--serif); font-weight: 500; font-variation-settings: "wght" 500;
  font-size: var(--t-num); line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  white-space: nowrap;
}
.bt-col.is-next .micro { color: var(--ink); }
.bt-col.is-next .micro::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none; }
.bt-col.is-past .micro, .bt-col.is-past .bt-num { color: var(--ink-3); }

/* A DISCLOSURE: a details row with plus and minus drawn as two bars. */
.disclosure { border-bottom: 1px solid var(--hair); }
.disclosure:first-of-type { border-top: 1px solid var(--hair); }
.disclosure > summary {
  position: relative;
  display: flex; align-items: center;
  min-height: 56px; padding: 14px 48px 14px 0;
  list-style: none;
  font-family: var(--serif); font-size: var(--t-title); font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.3;
  cursor: pointer;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before, .disclosure > summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 16px; height: 2px; margin-top: -1px;
  border-radius: 2px;
  background: var(--ink);
}
.disclosure > summary::after { transform: rotate(90deg); }
.disclosure[open] > summary::after { transform: rotate(0deg); }
.disclosure > :not(summary) { padding-bottom: 20px; max-width: var(--measure); }
.disclosure > p + p { margin-top: 0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .disclosure > summary::after { transition: transform 180ms var(--ease-beat); }
  @supports (interpolate-size: allow-keywords) {
    .disclosure { interpolate-size: allow-keywords; }
    .disclosure::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 300ms var(--ease-beat), content-visibility 300ms allow-discrete;
    }
    .disclosure[open]::details-content { block-size: auto; }
  }
}

/* THE STORE CHIP: words only until launch day (shell.mjs storeChip). */
.store-chip {
  display: inline-flex; align-items: center;
  min-height: 54px; padding: 0 22px;
  border-radius: var(--r-button);
  box-shadow: inset 0 0 0 1.5px var(--hair-strong);
  background: var(--paper); color: var(--ink);
  text-decoration: none;
}
.store-chip > span { display: flex; flex-direction: column; line-height: 1.15; font-size: 1.0625rem; font-weight: 600; }
.store-chip small {
  font-size: var(--t-micro); font-weight: 650;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--ink-3);
}
a.store-chip { min-height: 40px; padding: 0; box-shadow: none; }

/* A ROW OF SHORT PROMISES, middots between ("Free · No ads, no tracking").
   Every item carries its own leading dot, and the row is set 22px to the
   left with that strip clipped away, so whichever item starts a line (the
   first, or one that wrapped) shows no dot before it, and no dot is ever
   left hanging at the end of a line. Used on home (#get), /s/ and the spots
   pages' app band. */
.mid-row {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  list-style: none; padding: 0; margin: 0 0 0 -22px;
  clip-path: inset(-6px -6px -6px 22px);
  font-size: var(--t-small); color: var(--ink-2);
}
.mid-row > li { display: inline-flex; align-items: baseline; }
.mid-row > li::before { content: "\00B7"; flex: none; width: 22px; text-align: center; color: var(--ink-3); }

/* THE WEATHER CREDIT: Apple's ink mark, its legal link, Open-Meteo when it
   supplied something, and the modified notice. Built only by js/credit.js. */
.credit-line { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-3); }
.credit-line a { color: var(--ink-2); text-decoration-color: var(--hair-strong); text-underline-offset: 2px; }
.wx-mark-link { display: inline-block; vertical-align: -2px; line-height: 0; text-decoration: none; }
.credit-line .wx-mark-link { text-decoration: none; }
img.wx-mark { display: inline-block; width: 77px; height: 14px; max-width: none; }

/* Breadcrumbs. */
.crumbs { padding-top: var(--s-5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; font-size: 0.875rem; color: var(--ink-2); }
.crumbs li { display: inline-flex; align-items: center; }
/* The chevron rides at the END of each step, so a trail that wraps on a
   phone ends its first line with one and starts the next with a name. */
.crumbs li:not(:last-child)::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 10px 0 6px;
  border-right: 1.5px solid var(--ink-3); border-top: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }

/* Phase dots. */
.phase-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.phase-dot--golden { background: var(--phase-golden); }
.phase-dot--blue { background: var(--phase-blue); }
.phase-dot--last { background: var(--phase-last); }

/* ============================================================== the mark
   One ink, always: ink on paper, paper only inside a sky print. Never coral,
   never two tone, no glow on the mark itself. markSVG() in shell.mjs writes
   it, the header and footer included (theirs never moves). */
.mark { display: block; height: auto; overflow: visible; color: var(--ink); }
.mark--on-sky { color: var(--on-sky); }
.mark .mark-rays, .mark .mark-sun {
  transform-box: view-box;
  transform-origin: var(--mark-sun-origin);
}
/* The bloom: the dawn glow behind the sun (the app's MarkBloom: 0.30 at the
   core, 0.10 at 45%, clear at its reach of 1.3 times the mark's width). Its
   owner sets --mark-w and positions it on the sun. */
.mark-bloom {
  position: absolute;
  width: calc(var(--mark-w, 64px) * 2.6);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 183, 154, 0.30), rgba(234, 183, 154, 0.10) 45%, rgba(234, 183, 154, 0) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* M1: the sun rises inside its clip, the rays draw in about it, the bloom opens. */
  .mark--rise .mark-sun { animation: mark-sun-rise var(--d-rise) var(--ease-beat) 100ms both; }
  .mark--rise .mark-rays { animation: mark-rays-in var(--d-beat) var(--ease-beat) 400ms both; }
  .mark-bloom--rise { animation: mark-bloom-in 450ms var(--ease-beat) 400ms both; }
  /* M20: the rays go, then the sun sinks behind the waves and stays set. */
  .mark--set .mark-rays { animation: mark-rays-out var(--d-beat) var(--ease-beat) both; }
  .mark--set .mark-sun { animation: mark-sun-set 900ms cubic-bezier(0.42, 0, 1, 1) 300ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .mark--set .mark-rays { opacity: 0; }
  .mark--set .mark-sun { transform: translateY(42%); }
}
@keyframes mark-sun-rise { from { transform: translateY(42%); } to { transform: none; } }
@keyframes mark-rays-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes mark-bloom-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes mark-rays-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mark-sun-set { from { transform: none; } to { transform: translateY(42%); } }

/* M19: DAYBREAK. A night overlay that parts as a hole grows from the mark's
   sun. Its owner sets --daybreak-x and --daybreak-y (the sun's place on the
   page); the words under it carry .daybreak-in (0.95s) or .daybreak-in--late
   (1.10s). */
.daybreak {
  position: fixed; inset: 0;
  z-index: var(--z-float);
  background: #1E2050;
  pointer-events: none;
  opacity: 0;
}
.daybreak::before { content: ""; position: absolute; inset: 0; background: var(--ramp-card); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .daybreak {
    opacity: 1;
    -webkit-mask-image: radial-gradient(circle at var(--daybreak-x, 50%) var(--daybreak-y, 38%), transparent var(--r), #000 calc(var(--r) + 2%));
    mask-image: radial-gradient(circle at var(--daybreak-x, 50%) var(--daybreak-y, 38%), transparent var(--r), #000 calc(var(--r) + 2%));
    animation: daybreak-part 600ms var(--ease-inout) 400ms both, daybreak-gone 1ms linear 1050ms both;
  }
  .daybreak-in { animation: daybreak-words 450ms var(--ease-beat) 950ms both; }
  .daybreak-in--late { animation-delay: 1100ms; }
}
@media (prefers-reduced-motion: reduce) {
  .daybreak { opacity: 1; animation: daybreak-fade 450ms var(--ease-beat) both; }
}
/* The hole starts CLOSED: at -2% its soft 2% edge ends at the centre, so no
   bright dot shows on the night during the 0.4s before it opens. */
@keyframes daybreak-part { from { --r: -2%; } to { --r: 150%; } }
@keyframes daybreak-gone { to { visibility: hidden; } }
@keyframes daybreak-fade { to { opacity: 0; visibility: hidden; } }
@keyframes daybreak-words { from { opacity: 0; transform: translateY(8px); } }

/* M18: arriving at an anchor. A pale gold wash on the heading, then gone.
   In a targeted section only its first heading lights up: an h3 that follows
   the section's h2 stays still. */
@media (prefers-reduced-motion: no-preference) {
  :is(h2, h3):target, section:target > :is(h2, h3):not(:is(h2, h3) ~ *) {
    animation: target-wash 1.6s var(--ease-out) both;
    border-radius: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(h2, h3):target, section:target > :is(h2, h3):not(:is(h2, h3) ~ *) {
    text-decoration: underline 2px var(--coral); text-underline-offset: 6px;
  }
}
@keyframes target-wash { from { background-color: var(--pale-gold); box-shadow: 0 0 0 8px var(--pale-gold); } to { background-color: rgba(247, 218, 169, 0); box-shadow: 0 0 0 8px rgba(247, 218, 169, 0); } }

/* =========================================================== the reveal
   M3, handed out by js/reveal.js only (a page with no script is whole). */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); }
  .reveal-on { transition: opacity 500ms var(--ease-beat), transform 500ms var(--ease-beat); }
  .reveal-on:not(.sec-head) { transition-delay: 140ms; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* =========================================================== the reading
   js/reading.js draws one place's reading as a face: a strip of its sky,
   the place, the eyebrow, the minute, the verdict, the phases, the console,
   then why, then where it all came from. */
.reading { display: grid; gap: var(--s-7); }
.reading-face { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.reading-sky { aspect-ratio: 16 / 5; width: 100%; }
.reading-place { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.reading-place svg { width: 16px; height: 16px; flex: none; }
.reading-time {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-weight: 500; font-variation-settings: "wght" 500;
  font-size: 4.5rem; line-height: 0.95; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.reading-time small { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }
.reading-verdict { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--ink); }
.reading-phases {
  margin-top: 6px;
  /* Four to six phases: they wrap into rows rather than squeeze. */
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.25rem), 1fr));
  row-gap: 14px;
}
.reading .console { margin-top: 4px; }
/* The console's own hairline closes the phases above it; no second line. */
.reading-phases + .console { border-top: 0; }
.why { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.why-wrap { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.why-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.why-head h3 { font-size: var(--t-sub); }
.why-switch { display: flex; gap: 18px; }
.why-caption { font-family: var(--serif); font-size: var(--t-stand); line-height: 1.45; color: var(--ink-2); max-width: 36em; }
.factors { list-style: none; padding: 0; border-top: 1px solid var(--hair); }
.factor {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "ic lab pull" "ic det pull";
  column-gap: 12px; row-gap: 2px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.factor-ic { grid-area: ic; color: var(--ink-2); }
.factor-ic svg { width: 22px; height: 22px; }
.factor-lab { grid-area: lab; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.factor-det { grid-area: det; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.factor-pull { grid-area: pull; display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.factor-pull svg { width: 16px; height: 16px; flex: none; }
.factor--lift .factor-pull { color: var(--ink); }
.factor--drag .factor-pull { color: var(--coral-deep); }
.why-limit, .why-confidence, .why-source { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.why-limit { color: var(--ink); font-weight: 600; }
.reading-meta { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-3); max-width: var(--measure); }
.reading-meta b { color: var(--ink-2); font-weight: 600; }
.reading-meta a { color: var(--ink-2); text-decoration-color: var(--hair-strong); text-underline-offset: 2px; }
.reading-empty { font-family: var(--serif); font-size: var(--t-stand); color: var(--ink-2); padding-block: 12px; }
@media (min-width: 1024px) {
  .reading--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-10); align-items: start; }
}

/* ========================================================= accessibility */
@media (prefers-reduced-transparency: reduce) {
  header.top { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink); --hair: rgba(14, 27, 50, 0.24); --hair-soft: rgba(14, 27, 50, 0.24); --hair-strong: rgba(14, 27, 50, 0.40); }
}
@media (forced-colors: active) {
  .print { border: 1px solid CanvasText; }
  .ring-track { stroke: GrayText; }
  .ring-arc { stroke: Highlight; }
  .ring-stop-a, .ring-stop-b { stop-color: Highlight; }
  .phase-dot, .eyebrow--dot::before, .bt-col.is-next .micro::before { background: CanvasText; forced-color-adjust: none; }
  .mark-bloom, .daybreak { display: none; }
  /* The mark is inline SVG in currentColor everywhere, so it takes the
     reader's own text colour here rather than vanishing as navy on black. */
  .mark { color: CanvasText; }
  .btn, .pill, .store-chip, .console { border: 1px solid ButtonText; }
  .toggle-text::after { background: Highlight; }
}

/* ================================================================= print */
@media print {
  header.top, body > footer, .skip, details.menu { display: none !important; }
  body { background: #fff; color: #000; }
  .print { break-inside: avoid; }
}