/* ════════════════════════════════════════════════════════════════════════════
   THE FOUR SITELINK DESTINATION PAGES — the layer above site.css.
   ════════════════════════════════════════════════════════════════════════════

   These four answer one question each and are reached from a sitelink rather
   than from the ad's own headline. They load site.css for the design system —
   tokens, type, rules, tables, buttons, footer — and this file holds only what
   is genuinely particular to a long-form answer page: the masthead, the
   availability chips and the closer.

   EVERYTHING HERE PAINTS WITH THE CONTEXT TOKENS. --fg / --fg-soft /
   --fg-mute / --line / --accent are declared once per surface in site.css, and
   a rule that hard-codes a colour instead is how text ends up dark on a dark
   ground — five separate times before the tokens existed. A new block that
   changes its background declares the four; it does not recolour its children
   one by one.

   The measure is narrower than the main site (820px rather than 1120) because
   these are read rather than scanned, and a 16.5px serif wants about 70
   characters a line.
   ════════════════════════════════════════════════════════════════════════════ */

:root{ --max:860px }

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ── masthead ─────────────────────────────────────────────────────────── */
.head{background:var(--ink);--fg:#ffffff;--fg-soft:#c6d4de;--fg-mute:#afc5d4;
  --line:#2b4254;--accent:#9dc2dd;color:var(--fg);padding:54px 0 56px}
.head .eyebrow{margin-bottom:16px}
.head h1{margin:0 0 18px}
.head p{font-size:clamp(17px,2vw,20px);line-height:1.5;max-width:62ch;margin:0}
.head .r-short{margin:18px 0}

/* ── body ─────────────────────────────────────────────────────────────── */
main{padding:54px 0 10px}
main h2{margin:46px 0 14px}
main > .wrap > h2:first-child{margin-top:0}
main p{font-size:17px;line-height:1.62}
main ul,main ol{margin:0 0 20px;padding-left:22px}
main li{font-size:16.5px;line-height:1.55;color:var(--fg-soft);margin-bottom:10px}

/* ── the read / not-read table, which is the point of two of these pages ─ */
.tbl th{text-align:left;padding:11px 2px;border-bottom:2px solid var(--fg);
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);vertical-align:bottom}
.tbl td{vertical-align:top}
.tbl td:first-child{font-weight:600;color:var(--fg)}
/* NAME COLLISION, RESOLVED HERE DELIBERATELY. In site.css `.n` means numeric
   and right-aligns; on these pages it has always meant "the note column" and
   is prose. Left unresolved it right-aligned four tables of sentences. The
   class stays because the markup predates the system; the meaning is restored
   in the layer that owns these pages. */
.tbl td.n{text-align:left;font-family:var(--serif);font-size:16px;
  line-height:1.5;color:var(--fg-soft);font-weight:400}

/* Availability, stated rather than implied. "Granted", "pending" and "not
   available" are three different facts and the page never collapses them. */
.state{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  padding:3px 0 3px 15px;position:relative}
.state::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%}
.state.yes{color:var(--ok)}        .state.yes::before{background:var(--ok)}
.state.soon{color:#8a6a1f}         .state.soon::before{background:#8a6a1f}
.state.no{color:var(--mark)}       .state.no::before{background:var(--mark)}

/* ── a caveat worth stopping for ──────────────────────────────────────── */
.note{background:var(--tint);border-top:3px solid #8a6a1f;padding:22px 24px;
  margin:28px 0;--fg:#11212e;--fg-soft:#41566a;--fg-mute:#5e7080;--line:#d4dde4;
  color:var(--fg);font-family:var(--serif);font-size:17px;line-height:1.6}
.note h3{font-family:var(--sans);font-size:18px;margin:0 0 10px;color:var(--fg)}
.note p{font-size:16.5px}
.note p:last-child,.note ul:last-child{margin-bottom:0}

/* ── scope chips: a row of plain facts, not pills ─────────────────────── */
.chips{display:flex;gap:0;flex-wrap:wrap;margin:24px 0 6px;
  border-top:1px solid var(--line)}
.chip{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent);
  padding:10px 22px 10px 0;border-bottom:1px solid var(--line);flex:0 0 auto}

/* ── closer ───────────────────────────────────────────────────────────── */
.closer{background:var(--ink);--fg:#ffffff;--fg-soft:#c6d4de;--fg-mute:#afc5d4;
  --line:#2b4254;--accent:#9dc2dd;color:var(--fg);padding:56px 0;margin-top:58px}
.closer h2{margin:0 0 14px}
.closer p{font-size:17.5px;margin:0 0 26px;max-width:60ch}

/* ── foot of a detail page ────────────────────────────────────────────── */
footer{padding:30px 0 38px;font-family:var(--sans);font-size:13.5px;
  color:var(--fg-mute)}
.xref{font-size:14.5px;color:var(--fg-mute);margin-bottom:10px}
.xref a{margin-right:18px}