/* ==========================================================================
   ATOMIC SHELF — READING NOOK TOKENS v2
   Canonical token layer. Supplied design system, implemented verbatim.

   Layering: primitives (below) -> theme semantics (.theme-dark/.theme-light)
   -> components, which consume ONLY the semantic layer. A component should not
   need to know whether it sits on espresso or oat.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES ---------- */
  --espresso:   #231712;
  --roast:      #35241C;
  --parchment:  #E6D7C0;
  --oat:        #F3E9DB;

  --berry:      #A81F52;
  --berry-deep: #8F1944;
  --raspberry:  #E85A8F;
  --raspberry-hi: #EC6598;

  --sea-glass:  #8FD3C4;
  --sea-deep:   #1F6F63;

  --cocoa:      #5B463A;
  --dust:       #BFAE9B;

  --brick:      #A8301A;
  --brick-light:#FF9577;
  --amber-deep: #7A5000;
  --amber:      #E8A33D;

  --edge-light: #857060;
  --edge-dark:  #857565;

  /* ---------- 2. SURFACES ---------- */
  --surface-dark:         var(--espresso);
  --surface-dark-raised:  var(--roast);
  --surface-light:        var(--oat);
  --surface-light-raised: var(--parchment);

  /* ---------- 3. TEXT ---------- */
  --text-on-dark:            var(--oat);
  --text-on-dark-secondary:  var(--dust);
  --text-on-dark-link:       var(--raspberry);
  --text-on-dark-free:       var(--sea-glass);
  --text-on-dark-error:      var(--brick-light);
  --text-on-dark-warning:    var(--amber);

  --text-on-light:           var(--espresso);
  --text-on-light-secondary: var(--cocoa);
  --text-on-light-link:      var(--berry);
  --text-on-light-free:      var(--sea-deep);
  --text-on-light-error:     var(--brick);
  --text-on-light-warning:   var(--amber-deep);

  /* ---------- 4. ACTIONS ---------- */
  --action-fill-on-light:        var(--berry);
  --action-fill-on-light-text:   var(--oat);
  --action-fill-on-light-hover:  var(--berry-deep);

  --action-fill-on-dark:         var(--raspberry);
  --action-fill-on-dark-text:    var(--espresso);
  --action-fill-on-dark-hover:   var(--raspberry-hi);

  --action-outline-on-light: var(--espresso);
  --action-outline-on-dark:  var(--sea-glass);

  /* ---------- 5. PATHS ---------- */
  --path-free-on-dark:  var(--sea-glass);
  --path-free-on-light: var(--sea-deep);
  --path-paid:          var(--berry);

  /* ---------- 6. LINES & FOCUS ---------- */
  --divider-on-dark:  var(--roast);
  --divider-on-light: var(--dust);

  --input-edge-on-light: var(--edge-light);
  --input-edge-on-dark:  var(--edge-dark);

  --focus-ring-on-light: var(--berry);
  --focus-ring-on-dark:  var(--sea-glass);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* ---------- 7. TYPE ----------
     Instrument Serif / Instrument Sans / IBM Plex Mono are NOT loaded: the site
     removed Google Fonts in 696f607 after measuring 7.4-9.6s of render-blocking
     CSS, and no self-hosted copy exists in the repo. The declared fallbacks are
     the spec's own. Loading the named faces needs a self-host or CDN decision. */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, monospace;

  --fs-display:  clamp(3.5rem, 2.2rem + 5.5vw, 6rem);
  --fs-h2:       clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --fs-h3:       clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-body-lg:  1.375rem;
  --fs-body:     1.25rem;
  --fs-caption:  1.0625rem;
  --fs-label:    0.875rem;
  --fs-button:   1.125rem;

  --lh-display: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.15;
  --lh-body-lg: 1.55;
  --lh-body: 1.6;
  --lh-caption: 1.5;
  --lh-label: 1.3;

  --tracking-label: 0.1em;
  --measure-nook: 62ch;

  /* ---------- 8. SPACE, SHAPE, MOTION ---------- */
  --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-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --control-height: 52px;
  --shadow-none: none;

  --dur-fast: 150ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 9. SEMANTIC MAPPINGS ---------- */
.theme-dark {
  --bg: var(--surface-dark);
  --bg-raised: var(--surface-dark-raised);
  --fg: var(--text-on-dark);
  --fg-muted: var(--text-on-dark-secondary);
  --fg-link: var(--text-on-dark-link);
  --fg-free: var(--text-on-dark-free);
  --fg-error: var(--text-on-dark-error);
  --fg-warning: var(--text-on-dark-warning);
  --divider: var(--divider-on-dark);
  --input-edge: var(--input-edge-on-dark);
  --focus: var(--focus-ring-on-dark);
  --outline: var(--action-outline-on-dark);
  --cta-bg: var(--action-fill-on-dark);
  --cta-fg: var(--action-fill-on-dark-text);
  --cta-bg-hover: var(--action-fill-on-dark-hover);
}

.theme-light {
  --bg: var(--surface-light);
  --bg-raised: var(--surface-light-raised);
  --fg: var(--text-on-light);
  --fg-muted: var(--text-on-light-secondary);
  --fg-link: var(--text-on-light-link);
  --fg-free: var(--text-on-light-free);
  --fg-error: var(--text-on-light-error);
  --fg-warning: var(--text-on-light-warning);
  --divider: var(--divider-on-light);
  --input-edge: var(--input-edge-on-light);
  --focus: var(--focus-ring-on-light);
  --outline: var(--action-outline-on-light);
  --cta-bg: var(--action-fill-on-light);
  --cta-fg: var(--action-fill-on-light-text);
  --cta-bg-hover: var(--action-fill-on-light-hover);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

/* ==========================================================================
   Atomic Shelf — editorial production system
   --------------------------------------------------------------------------
   One layer. No override stack, no inline-style fights.

   The premise: Atomic Shelf is a working studio through which books move.
   The visual reference is an editorial production surface - a galley, a
   running schedule, a spec sheet - not a moodboard and not a bookshop.

   Rules this file exists to enforce:

     - Paper and ink. One base, one text colour, one rule colour.
     - Colour is SEMANTIC. The single accent marks the free Shelf path.
       Marketing is ink. If everything is accented, nothing is important.
     - Type carries the hierarchy. Not colour, not containers.
     - Sections are separated by rules and space, never by alternating
       full-bleed background bands. Bands are the clearest signal of a
       generated landing page.
     - Monospace is metadata only: labels, counts, references, plan names.
   ========================================================================== */

:root {
  /* Paper and ink ------------------------------------------------------- */
  --paper:        var(--oat);   /* warm white, deliberately not beige */
  --paper-sunk:   var(--parchment);   /* one step down, for spec tables */
  --ink:          var(--espresso);
  --ink-soft:     var(--cocoa);
  --ink-mute:     var(--cocoa);
  --rule:         var(--dust);
  --rule-strong:  var(--espresso);

  /* The one accent. It means: the free path. Never decoration. --------- */
  --shelf:        var(--sea-deep);   /* deep green - the free Shelf */
  --shelf-tint:   var(--surface-dark-raised);

  /* Type ---------------------------------------------------------------- */
  --face-text: var(--font-body);
  --face-meta: var(--font-label);

  /* Rhythm -------------------------------------------------------------- */
  --measure: var(--measure-nook);          /* comfortable reading width */
  --page:    74rem;          /* page container */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --gap:     clamp(3rem, 7vw, 6rem);   /* between major sections */
}

/* ---- reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---- shared primitives ----------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 99; font-family: var(--face-meta);
  font-size: 0.8125rem;
}
.skip-link:focus { left: 0; }

/* Section rhythm: separated by space and a hairline, not by a colour band. */
.section { padding-block: var(--gap); border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }

/* Labels: the only place monospace is used. They name things. */
.label {
  font-family: var(--face-meta);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 0.75rem;
}
.label--shelf { color: var(--shelf); }

h1, h2, h3 { line-height: 1.14; margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.625rem); }
h3 { font-size: clamp(1.125rem, 1.2vw, 1.3125rem); line-height: 1.3; }
h1 + p, h2 + p { margin-top: 1rem; }

.lede {
  font-size: clamp(1.1875rem, 0.9vw + 1.05rem, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32rem;
}

/* ---- navigation ------------------------------------------------------ */
.nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.nav__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.25rem;
}
.logo {
  font-family: var(--face-text); font-size: 1.25rem; font-weight: 600;
  text-decoration: none; letter-spacing: -0.02em; margin-right: auto;
}
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); }
.nav__links a {
  text-decoration: none; font-size: 0.9375rem; color: var(--ink-soft);
  padding-block: 0.35rem;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--rule-strong); }

/* The two doors, in the nav. Colour separates them before you read them. */
.nav__shelf, .nav__marketing {
  font-family: var(--face-meta); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.55rem 0.9rem; text-decoration: none; border: 1px solid;
}
.nav__shelf   { color: var(--shelf); border-color: var(--shelf); background: var(--shelf-tint); }
.nav__marketing { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.nav__marketing:hover { background: var(--ink-soft); }
.nav__shelf:hover { background: var(--shelf); color: var(--paper); }

/* ---- buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--face-meta); font-size: 0.8125rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.9rem 1.4rem; text-decoration: none;
  border: 1px solid var(--rule-strong); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--shelf { background: var(--shelf); color: var(--paper); border-color: var(--shelf); }
.btn--shelf:hover { background: var(--berry-deep); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-soft); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--paper-sunk); }

:focus-visible { outline: 2px solid var(--shelf); outline-offset: 3px; }

/* ---- the two doors (hero) ------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4rem); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: 1.5rem; }

.doors {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule-strong);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 62rem) { .doors { grid-template-columns: 1fr 1fr; } }

.door { padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; gap: 1rem; }
.door + .door { border-top: 1px solid var(--rule-strong); }
@media (min-width: 62rem) { .door + .door { border-top: 0; border-left: 1px solid var(--rule-strong); } }
.door--shelf { background: var(--shelf-tint); }
.door h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.door p { margin: 0; color: var(--ink-soft); max-width: 34ch; }
.door .btn { align-self: flex-start; margin-top: auto; }

/* ---- spec list: services as a table, not a card grid ----------------- */
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; min-width: 34rem; border-collapse: collapse; margin-top: 2rem; text-align: left; }
@media (max-width: 48rem) { .spec { min-width: 0; font-size: 0.9375rem; } }
.spec caption { text-align: left; color: var(--ink-mute); font-family: var(--face-meta); font-size: 0.75rem; padding-bottom: 0.6rem; }
.spec th, .spec td { padding: 0.95rem 1rem 0.95rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec thead th {
  font-family: var(--face-meta); font-size: 0.6875rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
  border-bottom: 1px solid var(--rule-strong);
}
.spec td:first-child { font-weight: 600; white-space: nowrap; }
.spec .num { font-family: var(--face-meta); font-size: 0.8125rem; color: var(--ink-mute); white-space: nowrap; }
.spec tbody tr:hover { background: var(--paper-sunk); }

/* ---- steps: the journey, as a numbered run -------------------------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding-block: 1.35rem; border-top: 1px solid var(--rule);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--face-meta); font-size: 0.8125rem; color: var(--ink-mute);
}
.steps h3 { margin-bottom: 0.35rem; }
.steps p { margin: 0; color: var(--ink-soft); max-width: 52ch; }

/* ---- pricing --------------------------------------------------------- */
.plans { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule-strong); margin-top: 2rem; }
@media (min-width: 48rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--paper); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.plan__name { font-size: 1.1875rem; font-weight: 600; }
.plan__price { font-family: var(--face-meta); font-size: 1.5rem; }
.plan__price small { font-size: 0.75rem; color: var(--ink-mute); }
.plan__for { color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }
.plan ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }

/* ---- proof ----------------------------------------------------------- */
.proof-note { border-left: 2px solid var(--rule-strong); padding-left: 1.25rem; color: var(--ink-soft); max-width: 44rem; }

/* ---- faq ------------------------------------------------------------- */
.faq { margin-top: 2rem; }
.faq details { border-top: 1px solid var(--rule); padding-block: 1.1rem; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 0.75rem 0 0; color: var(--ink-soft); max-width: 58ch; }

/* ---- final call ------------------------------------------------------ */
.final { text-align: left; }
.final .doors { margin-top: 2.5rem; }

/* ---- footer ---------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule-strong); padding-block: 3rem 3.5rem; margin-top: var(--gap); }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot h3 { font-size: 0.9375rem; margin-bottom: 0.75rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot small { color: var(--ink-mute); display: block; margin-top: 1rem; }

/* ---- forms (submit-book) --------------------------------------------- */
.form { margin-top: 2rem; max-width: 40rem; }
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-family: var(--face-meta); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.45rem; }
.field .hint { font-family: var(--face-text); font-size: 0.875rem; text-transform: none; letter-spacing: 0; color: var(--ink-mute); display: block; margin-top: 0.3rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--face-text); font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); padding: 0.7rem 0.8rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--shelf); outline-offset: 1px; border-color: var(--shelf); }
.form__note { font-size: 0.9375rem; color: var(--ink-mute); margin-top: 1rem; max-width: 46ch; }
.form .consent { margin: 1.25rem 0 .75rem; font-size: 0.9375rem; color: var(--ink-mute); margin: 1.25rem 0 1rem; max-width: 46ch; }
.form .consent a { color: var(--ink); }
.form__status { margin-top: 1rem; font-family: var(--face-meta); font-size: 0.8125rem; }
.form__status[data-state="error"] { color: var(--brick); }
.form__status[data-state="ok"] { color: var(--shelf); }

/* ---- responsive nav -------------------------------------------------- */
.nav__toggle { display: none; }
@media (max-width: 61.99rem) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent; border: 1px solid var(--rule-strong);
    font-family: var(--face-meta); font-size: 0.75rem; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 0.5rem 0.75rem; cursor: pointer; color: var(--ink);
  }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule-strong);
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0;
  }
  .nav__links[data-open="true"] { display: flex; }
  .nav__links a { padding: 0.85rem var(--gutter); border-bottom: 1px solid var(--rule); }
  .nav__links .nav__shelf, .nav__links .nav__marketing { border: 0; text-align: left; }
  .nav__links .nav__shelf { background: var(--shelf-tint); }
  .nav__links .nav__marketing { background: var(--paper-sunk); color: var(--ink); }
  .nav { position: relative; }
  .nav__links { position: absolute; }
}


/* ---- commitment toggle (pricing) ----------------------------------- */
.commit { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2rem; border: 1px solid var(--rule-strong); width: fit-content; max-width: 100%; }
.commit button {
  font-family: var(--face-meta); font-size: 0.75rem; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.7rem 1rem; background: transparent;
  border: 0; border-right: 1px solid var(--rule-strong); cursor: pointer;
  color: var(--ink-soft);
}
.commit button:last-child { border-right: 0; }
.commit button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.commit button:hover:not([aria-pressed="true"]) { background: var(--paper-sunk); }

.spec-note { font-size: 0.9375rem; color: var(--ink-mute); max-width: 52ch; }
.spec-note a { color: var(--ink); }

/* ---- approved proof rows ------------------------------------------- */
.spec-row { display: flex; gap: 1rem; align-items: baseline; padding-block: 0.9rem; border-top: 1px solid var(--rule); }
.spec-num { font-family: var(--face-meta); font-size: 1.25rem; white-space: nowrap; }

.plan__save { font-family: var(--face-meta); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); }
.plan__cta { margin-top: auto; align-self: flex-start; }


/* ---- contract classes -------------------------------------------------
   nav-cta and nav-cta-start are asserted by the public QA suite: the free
   path must be the loud nav CTA, and Start Here must be quieter but present.
   They are therefore load-bearing names, not decoration - so they get real
   rules rather than sitting on the element as a dead marker. */
.nav__shelf.nav-cta, .nav__marketing.nav-cta { font-weight: 600; }
.nav__marketing.nav-cta-start { font-weight: 400; opacity: .82; }
.nav__marketing.nav-cta-start:hover { opacity: 1; }

/* The full detail list that stays below the spec tables on /services. */
.service-full-list { margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--rule-strong); }


/* ==========================================================================
   COMPATIBILITY TOKENS
   --------------------------------------------------------------------------
   Ten public pages still carry composition CSS written against two dead
   systems: the original design-system tokens (--color-*, --space-*) and the
   pin-board palette (--board, --card-*, --copper, --gold). Their markup and
   layout are sound; only their colour and type references are stale.

   These aliases point every one of those names at THIS palette, so those pages
   render in the editorial system without a rewrite. board.css and
   board-rollout.css are then deletable rather than loadable.

   This is a translation table, not a second system: every value below is an
   editorial token or a spacing step from this file. Nothing here invents a
   colour, and nothing here can drift from the palette because it has no
   values of its own.
   ========================================================================== */
:root {
  /* original design system -> editorial */
  --color-bg-dark:            var(--ink);
  --color-bg-light:           var(--paper);
  --color-surface-dark:       var(--ink-soft);
  --color-surface-light:      var(--paper-sunk);
  --color-surface-mid:        var(--paper-sunk);
  --color-accent-primary:     var(--shelf);
  --color-accent-primary-hover:var(--berry-deep);
  --color-accent-primary-pressed:var(--berry-deep);
  --color-accent-secondary:   var(--ink-mute);
  --color-text-primary-dark:  var(--paper);
  --color-text-secondary-dark:var(--rule);
  --color-text-primary-light: var(--ink);
  --color-text-secondary-light: var(--ink-mute);
  --color-border-dark:        var(--ink);
  --color-border-light:       var(--rule);
  --color-success:            var(--shelf);
  --color-error:              var(--brick);

  --font-family-display: var(--face-text);
  --font-family-body:    var(--face-text);
  --font-family-mono:    var(--face-meta);
  --font-size-display-xl: clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
  --font-size-display-l:  clamp(1.75rem, 1.1rem + 2.6vw, 2.625rem);
  --font-size-display-m:  clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem);
  --font-size-heading:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --font-size-body-l:     clamp(1.0625rem, 1rem + 0.24vw, 1.1875rem);
  --font-size-body:       1.0625rem;
  --font-size-body-s:     0.9375rem;
  --font-size-label:      0.6875rem;
  --font-size-mono:       0.8125rem;
  --line-height-display:  1.14;
  --line-height-body:     1.62;
  --letter-spacing-label: 0.09em;

  --space-section-xl: clamp(3rem, 1.5rem + 7vw, 6rem);
  --space-section-l:  clamp(2.5rem, 1.4rem + 5vw, 5rem);
  --space-section-m:  clamp(2rem, 1.2rem + 4vw, 4rem);
  --space-component:  clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  --space-inner:      clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --space-xs: 8px; --space-s: 12px; --space-m: 20px;
  --space-l: 32px; --space-xl: 48px;

  --grid-max-width: var(--page);
  --grid-margin-desktop: var(--gutter);
  --grid-margin-tablet:  var(--gutter);
  --grid-margin-mobile:  var(--gutter);
  --border-radius-button: 0; --border-radius-card: 0; --border-radius-badge: 0;
  --border-width-default: 1px; --border-width-accent: 1px;
  --motion-duration-fast: 120ms; --motion-duration-standard: 200ms;
  --motion-duration-slow: 300ms;
  --motion-easing-standard: ease; --motion-easing-decelerate: ease-out;
  --motion-easing-accelerate: ease-in;
  --z-navigation: 20; --z-modal: 90; --topnav-h: 4.25rem;

  /* pin-board palette -> editorial. The board, the card stocks and the pins
     are gone; what survives is the idea of a labelled region. */
  --board: var(--paper); --board-deep: var(--ink); --board-grain: var(--paper-sunk);
  --card-ledger: var(--shelf-tint); --card-salmon: var(--paper-sunk);
  --card-blue: var(--paper-sunk); --card-kraft: var(--paper-sunk);
  --card-manila: var(--paper-sunk); --card: var(--paper-sunk);
  --panel: var(--paper-sunk); --surface: var(--paper-sunk);
  --ivory: var(--paper); --ivory-2: var(--paper); --ivory-3: var(--paper-sunk);
  --cream: var(--paper); --paper-2: var(--paper-sunk); --paper-deep: var(--paper-sunk);
  --stone: var(--ink-mute); --stone-2: var(--ink-soft);
  /* --gold carried two jobs at once, which is what put label text on light
     surfaces at 4.23:1 (sea-deep on parchment, below AA 4.5). The roles are
     split rather than remapped, because both usages are legitimate:
       --gold      LABEL TEXT on light grounds -> cocoa (6.23:1 parchment,
                   7.34:1 oat). The board assigns secondary text on Oat and
                   Parchment to Cocoa, verbatim.
       --gold-fill  the same accent used as a FILL, rule or outline, on
                   whichever ground it sits -> berry on light, sea-glass on
                   dark. Both are declared by the board for exactly this.
     Pages that need a filled button use --gold-fill; pages that need a
     small-caps label keep --gold. Computed, not assumed:
       cocoa   on parchment 6.23:1   cocoa   on oat  7.34:1
       berry   on oat      5.86:1   sea-glass on espresso 10.21:1 */
  --gold: var(--ink-soft); --gold-light: var(--berry); --gold-soft: var(--shelf-tint);
  --gold-fill: var(--berry);
  --gold-deep: var(--berry-deep); --amber: var(--shelf); --amber-pale: var(--shelf-tint);
  --copper: var(--ink); --copper-2: var(--ink-soft); --copper-l: var(--ink-mute);
  --copper-pale: var(--paper-sunk); --copper-text: var(--ink); --copper-strong: var(--ink);
  --mint: var(--shelf-tint); --teal: var(--shelf); --rose: var(--brick); --rose-soft: var(--paper-sunk);
  --success: var(--shelf); --danger: var(--brick);
  /* the board's tension marker - a single signal red, used sparingly */
  --string: var(--brick); --string-deep: var(--brick);
  --ink-on-dark: var(--paper); --ink-on-card: var(--ink);
  --ink-dim: var(--ink-soft); --ink-dimmer: var(--ink-mute); --muted: var(--ink-mute);
  /* .dark sections resolve --surface to Parchment (line 585), so their ink has
     to be a LIGHT-ground ink, not the oat these aliases default to. Left as
     --paper, a .dark section rendered oat on parchment and measured 1.18:1.
     On Parchment the board allows espresso 12.34:1 and cocoa 6.23:1.
     --ink-on-dark is the same job and was already correct. */
  --muted-dark: var(--rule); --light: var(--ink); --body: var(--ink); --line: var(--rule);
  --line-dark: var(--ink); --border: var(--rule);
  --shadow: none; --shadow-sm: none; --shadow-card: none; --shadow-lg: none; --shadow-soft: none;
  --lift-1: 0 1px 0 var(--rule); --lift-2: 0 2px 0 var(--rule); --lift-3: 0 3px 0 var(--rule);
  --face-display: var(--font-display); --face-spine: var(--face-text);
  --face-body: var(--face-text); --face-typed: var(--face-meta);
  --radius-card: 0; --radius-chip: 0;
  --max: 74rem; --r: 0; --r-sm: 0; --r-xs: 0; --hair: 1px;
  --board-max: 74rem; --ease: ease; --dur: 180ms;
}


/* ---- shared chrome carried over from the old boards ---------------------
   These ten class names appear across the migrated pages and were styled by
   board.css. They are re-expressed here so that stylesheet can be deleted
   rather than left loadable. */
.brand { font-family: var(--face-text); font-size: 1.25rem; font-weight: 600; text-decoration: none; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); }
.nav-start, .btn-free {
  font-family: var(--face-meta); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  padding: 0.55rem 0.9rem; border: 1px solid;
}
.nav-start { color: var(--ink); border-color: var(--rule-strong); }
.btn-free { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.btn-quiet {
  display: inline-flex; align-items: center; font-family: var(--face-meta);
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.9rem 1.4rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule-strong); background: transparent;
}
.btn-quiet:hover { background: var(--paper-sunk); }
.eyebrow {
  display: block; font-family: var(--face-meta); font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 0.75rem;
}
.card { background: var(--paper-sunk); border: 1px solid var(--rule); padding: 1.25rem; }
.card--manila { background: var(--paper); }
.footer { border-top: 1px solid var(--rule-strong); margin-top: var(--gap); padding-block: 3rem; }
.footer-cols { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer-cols { grid-template-columns: 2fr 1fr 1fr; } }
.dispatch-article-head { margin-bottom: 1.5rem; }
.dispatch-card--service { background: var(--paper-sunk); border: 1px solid var(--rule); }

.payment-guidance { border-left: 2px solid var(--rule-strong); padding-left: 1.25rem; color: var(--ink-soft); max-width: 46rem; }
.language-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---- the 90-day journey ------------------------------------------------
   A time axis, not three cards: the phases read as a sequence, so they are
   marked up as an ordered list and drawn as one continuous rule with the day
   range sitting on it. */
.journey-steps {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.phase {
  padding: 1.75rem 0 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.phase-label { margin: 0 0 0.4rem; }
.phase-day {
  font-family: var(--face-meta); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
}
.phase h3 { margin: 0 0 0.6rem; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
.phase p { margin: 0 0 0.75rem; max-width: 46rem; }
.phase p:last-child { margin-bottom: 0; }
.phase-note {
  font-size: 0.9375rem; color: var(--ink-mute);
  border-left: 2px solid var(--rule); padding-left: 1rem;
}
.journey-core { margin-top: 2rem; max-width: 46rem; }
/* Stacked on a phone the day range stays above its heading, so the sequence
   still reads top to bottom without the columns compressing. */
@media (min-width: 60rem) {
  .phase {
    display: grid; grid-template-columns: 9rem minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 2rem; align-items: start;
  }
  .phase-label { grid-column: 1; grid-row: 1; }
  .phase h3 { grid-column: 2; grid-row: 1; }
  .phase > p:not(.phase-label) { grid-column: 3; }
  .phase-note { grid-column: 3; }
  .phase > p:not(.phase-label):not(.phase-note) { grid-row: 1; }
  .phase-note { grid-row: 2; }
}

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