@layer reset, base, catalogue, components, product, responsive;
@layer catalogue {
/* Correctness only. Palette, type and spacing come from the site.
   Every interactive element here takes its height from the box rather than from
   inline padding: padding on a short nav link makes it paint past its <nav>,
   measured on the live site. */
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(100% - 2rem, 88rem);
  min-block-size: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* 44px minimum, from the box. WCAG 2.5.8 exempts an inline anchor inside a <p>
   or <li> and nothing else. */
.site-header nav a, .site-header .brand, footer a, footer .brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

footer {
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 1.4rem; }
.copyright { grid-column: 1 / -1; }

@media (max-width: 38rem) {
  .site-header { min-block-size: 4.5rem; }
  footer { grid-template-columns: 1fr; }
}

/* The form is the layout. `form-heading` spans every column so the title reads
   as the form's own header rather than a separate section above it. */
.tool-section {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 9rem) max(1rem, calc((100vw - 88rem) / 2));
  overflow: hidden;
}
.tool-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4rem;
}
.form-heading { grid-column: 1 / -1; max-width: 49rem; margin-block-end: 2.1rem; }
.form-action { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; margin-block-start: 1.2rem; }
/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

fieldset { min-inline-size: 0; }

@media (max-width: 52rem) {
  .tool-form { grid-template-columns: 1fr; }
}

/* Correctness only; the site owns colour, radius and typography. The label is
   the complete target and its 44px minimum comes from its box, not from a small
   radio padded beyond the layout. */
.choice-set {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice-set-options {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .5rem;
}
.choice-option {
  min-inline-size: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  cursor: pointer;
}
.choice-option input[type="radio"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}
.choice-option > :not(input) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.choice-option:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* WebKit will not give a <select> the height you ask for while it still owns
   the rendering. Measured on the catalogue proof page: `min-block-size: 3.4rem`
   was honoured in Chromium and Firefox and ignored in WebKit, which kept the
   native control under 44px on all eight phone descriptors -- the same class of
   defect as the date field, on the plainest control there is.
   `appearance: none` hands sizing back to CSS, and then the chevron has to be
   drawn, because removing the appearance removes the native one too. */
.select-field { position: relative; min-inline-size: 0; }
.select-field select {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: 3.4rem;
  padding-inline: .85rem 2.1rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  text-overflow: ellipsis;
  font: inherit;
}
/* The open list is drawn by the OS in the system palette; naming both keeps it
   readable on a dark page. */
.select-field option { background: var(--panel); color: var(--ink); }

/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

/* The card grid uses six tracks so five cards break 3 + 2 rather than leaving a
   hole in the second row. The border rules assume exactly five; adding or
   removing a card means revisiting them. */
.result { overflow: hidden; }
.result-intro { padding: clamp(1.5rem, 5vw, 3.5rem); }
.result-subject { margin-block: 1.4rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.score-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }

.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.result-grid article { grid-column: span 2; min-block-size: 15rem; padding: 2rem; }
.result-grid article:nth-child(4), .result-grid article:nth-child(5) { grid-column: span 3; }

.result-actions { padding: 1.2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 48rem) {
  /* Stacked, the 3 + 2 spans stop meaning anything, and `span 2` against a
     single track would invent columns. Undo both at the same specificity. */
  .result-grid { grid-template-columns: 1fr; }
  .result-grid article,
  .result-grid article:nth-child(4),
  .result-grid article:nth-child(5) { grid-column: auto; min-block-size: auto; }
  .score-wrap { grid-template-columns: 1fr; }
  /* Long subjects wrap: two long names plus a mark between them do not fit a
     phone, and the type is already at its floor. */
  .result-subject { flex-direction: column; align-items: stretch; gap: .5rem; }
  .result-actions { flex-direction: column; }
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-list li { display: inline-flex; min-inline-size: 0; align-items: center; }
.breadcrumb-list li + li::before { content: "/"; margin-inline-end: .45rem; }
.breadcrumb-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumb-list span { overflow-wrap: anywhere; }

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-section, 2rem);
}
.sitemap-group { min-inline-size: 0; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { min-inline-size: 0; }
.sitemap-group a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  overflow-wrap: anywhere;
}
.sitemap-group p { overflow-wrap: anywhere; }

/* Legal pages are long prose; the only rule that keeps them correct is measure.
   Anything past ~70 characters a line becomes unreadable, and these are the
   pages a reviewer actually reads. */
.legal-page { max-inline-size: 44rem; }
.legal-page h2 { margin-block-start: 2.5rem; }
.legal-page p + p { margin-block-start: 1rem; }

/* Reserved height per breakpoint, before anything loads.
   A slot with no unit wired yet renders nothing at all rather than an empty
   frame -- an ad-shaped hole reads as a broken page. */
.sf-adslot { display: block; margin-block: 2.5rem; }
.sf-adslot[data-ad-unit=""] { display: none; }
.sf-adslot ins { display: block; inline-size: 100%; }

/* Per-vertical schemes. Divergence is the product: a fleet that shares one look
   reads as spam, to people and to reviewers. Pick one set, then let the site
   diverge further.

   Every set defines the same names, so blocks never learn a site's colours. */

/* esoteric -- atmospheric, dark, warm accent against violet */
.palette-esoteric {
  --ink: #f8f0e7; --ink-muted: #bcb1c5;
  --surface: #17131f; --surface-deep: #0e0b14; --panel: #211a2b;
  --line: rgba(248, 240, 231, .14);
  --accent: #ff806a; --accent-bright: #ff9b86; --highlight: #f2d89c;
  --bg-a: rgba(255,128,106,.17); --bg-b: rgba(155,134,255,.16); --bg-c: rgba(242,216,156,.11);
  --bg-line: rgba(255,255,255,.025);
}
/* utilitarian -- converters, upscalers: light, fast, no atmosphere */
.palette-utility {
  --ink: #101418; --ink-muted: #5b6673;
  --surface: #ffffff; --surface-deep: #f4f6f8; --panel: #ffffff;
  --line: rgba(16, 20, 24, .12);
  --accent: #1f6feb; --accent-bright: #3b82f6; --highlight: #0ea5e9;
  --bg-a: rgba(31,111,235,.06); --bg-b: rgba(14,165,233,.05); --bg-c: transparent;
  --bg-line: rgba(16,20,24,.035);
}
/* data-dense -- finance: high contrast, restrained, numbers first */
.palette-data {
  --ink: #0b0f14; --ink-muted: #59636e;
  --surface: #f7f9fb; --surface-deep: #eef2f6; --panel: #ffffff;
  --line: rgba(11, 15, 20, .14);
  --accent: #0f766e; --accent-bright: #14b8a6; --highlight: #b45309;
  --bg-a: rgba(15,118,110,.05); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(11,15,20,.04);
}
/* documents -- invoices, quotes: clean, printable, trustworthy */
.palette-document {
  --ink: #1a1a1a; --ink-muted: #6b6b6b;
  --surface: #fbfaf7; --surface-deep: #f3f1ec; --panel: #ffffff;
  --line: rgba(26, 26, 26, .13);
  --accent: #1d4ed8; --accent-bright: #2563eb; --highlight: #92400e;
  --bg-a: rgba(29,78,216,.04); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(26,26,26,.03);
}

/* Font pairings that survive 320px and need no web font to look deliberate.
   System stacks on purpose: a webfont on a tool page costs the first paint the
   visitor came for, and every one of these renders on iOS and Android already.

   Pick one set. `--display` carries the personality, `--ui` carries the work. */

/* editorial -- esoteric, psychometrics: an old-style serif against a neutral UI */
.type-editorial {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-tracking: -.04em;
}
/* technical -- converters, upscalers: one family, tight, no ornament */
.type-technical {
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-tracking: -.02em;
}
/* ledger -- finance, documents: figures must align, so the numeric face matters */
.type-ledger {
  --display: ui-serif, Georgia, "Times New Roman", serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --numeric: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-tracking: -.01em;
}
/* Figures in tables and results must not dance as they change. */
.type-ledger .figure, .figure { font-variant-numeric: tabular-nums; }

/* 44px is the documented minimum. Inline anchors inside a <p> or <li> are
   exempt (WCAG 2.5.8) because padding them wrecks the surrounding line height. */
.text-button, nav a, footer a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* `[hidden]` LOSES TO AN AUTHOR `display` AT EQUAL SPECIFICITY.
 *
 * The user-agent rule is `[hidden] { display: none }`. An author rule such as
 * `.card { display: grid }` has the SAME specificity (0,1,0) and comes from a
 * later origin, so the element stays on screen with the attribute set. The DOM
 * inspector shows `hidden`. Every unit test that reads the markup passes. It is
 * visible in the browser and nowhere else.
 *
 * That cost one site three separate defects in one build:
 *
 *   1. a page-range field with `display: grid` stayed on screen in "every page"
 *      mode, in all three engines, with `hidden` set;
 *   2. a featured card with `display: grid` stayed on screen in every filtered
 *      view that excluded it -- caught in the first phone screenshot, not by any
 *      test;
 *   3. a group heading with `display: block` re-declared inside
 *      `@media (min-width: 64rem)` stayed on screen under a filter, because the
 *      site-wide guard had EQUAL specificity and appeared EARLIER in the file.
 *
 * Number 3 is the one that makes this a stylesheet rather than a habit: writing
 * the guard once at the top does not survive a media query.
 *
 * This declaration is the whole fix, and `!important` is the point of it -- it
 * is the one place in a stylesheet where a blanket win is the correct answer,
 * because there is no legitimate reading of `hidden` other than "not rendered".
 * A site that prefers per-class guards may do that instead; the block's
 * invariants accept either, and require the LIST OF HIDEABLE CLASSES TO BE
 * ASSERTED BY NAME, because remembering it is what failed three times. */
[hidden] { display: none !important; }

/* FULL BLEED IS A PROPERTY OF THE CONTAINER, NEVER OF THE CHILD.
 *
 * The tempting construction is a child that breaks out of its padded parent:
 *
 *     .page-image { inline-size: 100vw; margin-inline: calc(50% - 50vw); }
 *
 * That child is wider than its parent by construction, and the responsive
 * matrix reports it as a spill on every device in all three engines --
 * correctly, because it is also exactly how a page starts scrolling sideways.
 * `100vw` compounds it: on any platform that reserves a classic scrollbar
 * gutter, 100vw is WIDER THAN THE VIEWPORT, so the page overflows even when the
 * arithmetic looks symmetrical.
 *
 * The answer is the other way round: at the width where an element should reach
 * the edges, THE CONTAINER GIVES UP ITS GUTTERS, and the siblings that still
 * want them take them back. Nothing is ever wider than its parent, so there is
 * nothing for the matrix to report and nothing for a thumb to discover.
 *
 * A negative inline margin is still legitimate where it is paid straight back --
 * `margin-inline: -1rem; padding-inline: 1rem` inside a parent with a 1rem
 * gutter reaches the parent's padding box and no further. The invariants reject
 * the breakout idiom, not every negative margin. */
.bleed { --bleed-gutter: clamp(.85rem, 3vw, 1.5rem); padding-inline: var(--bleed-gutter); }
.bleed > * { max-inline-size: 100%; }

@media (max-width: 30rem) {
  /* The container drops its gutters... */
  .bleed[data-bleed="edge"] { padding-inline: 0; }
  /* ...and everything that is not the bleeding child takes them back. */
  .bleed[data-bleed="edge"] > :not([data-bleed-child]) { padding-inline: var(--bleed-gutter); }
}

}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; }
  body { margin: 0; }
  img { max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --ink: #102d28;
    --ink-soft: #3d514b;
    --paper: #f2ead8;
    --paper-bright: #fffaf0;
    --paper-deep: #ded0b5;
    --red: #a44834;
    --red-dark: #783426;
    --brass: #b68a45;
    --brass-light: #dfbd7d;
    --blue: #607d83;
    --line: rgba(16, 45, 40, .2);
    --shadow: 0 18px 60px rgba(17, 35, 31, .12);
    --radius: 1.15rem;
    --serif: Georgia, "Times New Roman", serif;
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  body { min-inline-size: 320px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.58; overflow-x: clip; }
  body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .32; background-image: radial-gradient(rgba(16,45,40,.12) .55px, transparent .65px); background-size: 5px 5px; z-index: -1; }
  h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
  h1 { font-size: clamp(3.1rem, 7.4vw, 7.8rem); }
  h2 { font-size: clamp(2rem, 4vw, 4.5rem); }
  h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.1; }
  p { margin-block: 0 1em; }
  a { color: currentColor; text-decoration-thickness: .08em; text-underline-offset: .18em; }
  code { padding: .08rem .32rem; background: rgba(16,45,40,.08); border-radius: .25rem; font-size: .92em; overflow-wrap: anywhere; }
  :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
  body { min-block-size: 100svh; display: flex; flex-direction: column; }
  body > main { flex: 1; }
}

@layer components {
  .site-header { position: relative; z-index: 5; inline-size: 100%; max-inline-size: none; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; margin: 0; padding: 1rem clamp(1rem, 4vw, 4.5rem); background: var(--ink); color: var(--paper-bright); border-block-end: 1px solid rgba(255,255,255,.16); }
  .site-header .brand { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--serif); font-size: 1.2rem; text-decoration: none; white-space: nowrap; }
  .brand-mark { inline-size: 2.3rem; block-size: 2.3rem; display: inline-grid; place-items: center; border: 1px solid var(--brass); border-radius: 50%; transform: rotate(-8deg); }
  .brand-mark::before { content: "✦"; color: var(--brass); font-size: 1.15rem; }
  .site-header nav { display: flex; align-items: center; gap: clamp(.8rem, 2.2vw, 2rem); font-size: .87rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .site-header nav a { text-decoration: none; }
  body > footer { inline-size: 100%; max-inline-size: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; margin: 0; padding: 3.5rem clamp(1rem, 5vw, 5rem); background: var(--ink); color: var(--paper); }
  body > footer a { color: var(--paper); }
  .field-card { min-inline-size: 0; background: rgba(255,250,240,.88); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .eyebrow, .card-kicker { margin: 0 0 .85rem; color: var(--red-dark); font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
  .primary-button, .quiet-button { min-block-size: 3rem; min-inline-size: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--ink); padding: .72rem 1.15rem; cursor: pointer; font-weight: 800; text-decoration: none; }
  .primary-button { background: var(--red); color: white; border-color: var(--red); box-shadow: 0 5px 0 var(--red-dark); transform: translateY(-2px); }
  .primary-button:hover { background: var(--red-dark); }
  .primary-button:active { box-shadow: 0 2px 0 var(--red-dark); transform: translateY(1px); }
  button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
  .quiet-button { background: transparent; color: var(--ink); }
  .quiet-button:hover { background: rgba(16,45,40,.08); }
  .text-link { min-block-size: 2.75rem; min-inline-size: 2.75rem; display: inline-flex; align-items: center; font-weight: 800; }
  .field { min-inline-size: 0; display: grid; gap: .42rem; font-weight: 750; }
  .field > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem; }
  .field small { color: var(--ink-soft); font-weight: 500; }
  .field input, .field select, .field textarea { inline-size: 100%; min-inline-size: 0; min-block-size: 3.15rem; border: 1px solid rgba(16,45,40,.36); border-radius: .62rem; background: var(--paper-bright); color: var(--ink); padding: .72rem .8rem; }
  .field [aria-invalid="true"] { border-color: #8a2019; box-shadow: 0 0 0 2px rgba(138,32,25,.16); }
  .field textarea { resize: vertical; }
  .field select { appearance: none; padding-inline-end: 2.7rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 52%, calc(100% - .85rem) 52%; background-size: .34rem .34rem; background-repeat: no-repeat; }
  .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .form-action { display: flex; justify-content: flex-start; margin-block-start: .4rem; }
  .form-error { min-block-size: 1.55rem; margin: .35rem 0; color: #8a2019; font-weight: 800; }
  .result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.2rem; }
  .result-status { min-block-size: 1.5rem; margin-block: 1rem 0; color: var(--ink-soft); font-size: .9rem; }
  .turn-badge { display: inline-flex; align-items: center; min-block-size: 2rem; padding: .28rem .72rem; border: 1px solid var(--brass); border-radius: 999px; background: #f3e4b6; font-size: .78rem; font-weight: 800; }
  .boot-failure { margin: 1rem; padding: 1rem; border: 2px solid #8a2019; background: #fff4ef; position: relative; z-index: 100; }
}

@layer product {
  .home-hero { min-block-size: min(760px, calc(100svh - 72px)); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; background: var(--ink); color: var(--paper-bright); overflow: clip; }
  .hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(3.5rem, 7vw, 8rem) clamp(1.2rem, 5vw, 6rem); }
  .home-hero .eyebrow, .route-intro .eyebrow { color: var(--brass-light); }
  .hero-copy h1 { max-inline-size: 13ch; font-size: clamp(3.2rem, 5.6vw, 6.3rem); }
  .hero-copy h1 em { color: var(--brass-light); font-weight: 400; }
  .hero-lede { max-inline-size: 43rem; margin-block: 1.6rem; color: #e2e8e3; font-size: clamp(1rem, 1.45vw, 1.18rem); }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.15rem; }
  .hero-actions .primary-button { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 5px 0 #b9aa8c; }
  .proof-row { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: #c6d0ca; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
  .proof-row li::before { content: "✓"; margin-inline-end: .42rem; color: var(--brass-light); }
  .hero-art { position: relative; min-inline-size: 0; margin: 0; overflow: hidden; }
  .hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ink) 0, transparent 22%), linear-gradient(0deg, rgba(16,45,40,.34), transparent 38%); pointer-events: none; }
  .hero-art img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 57% center; }
  .hero-art figcaption { position: absolute; z-index: 2; inset-inline-end: 1rem; inset-block-end: 1rem; color: rgba(255,255,255,.72); font-size: .67rem; }
  .readiness-quest { --readiness: 0%; display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); gap: 1.1rem 2rem; align-items: center; padding: 1.2rem clamp(1rem, 5vw, 5rem); background: #e9d39f; border-block: 1px solid rgba(16,45,40,.25); scroll-margin-block-start: 1rem; }
  .readiness-quest h2 { max-inline-size: 19ch; font-size: clamp(1.55rem, 2.7vw, 2.4rem); }
  .readiness-quest > div > p:last-child { margin: .7rem 0 0; color: var(--ink-soft); }
  .readiness-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
  .readiness-steps li { min-inline-size: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: center; padding: .75rem; border: 1px solid rgba(16,45,40,.2); border-radius: .75rem; background: rgba(255,250,240,.52); }
  .readiness-steps li > div { display: grid; }
  .readiness-steps small { color: var(--ink-soft); line-height: 1.25; }
  .readiness-node { inline-size: 1.55rem; block-size: 1.55rem; border: 2px solid var(--red-dark); border-radius: 50%; background: var(--paper); }
  .readiness-steps li[data-complete="true"] .readiness-node { display: grid; place-items: center; background: var(--red-dark); color: white; }
  .readiness-steps li[data-complete="true"] .readiness-node::before { content: "✓"; font-size: .78rem; font-weight: 900; }
  .readiness-meter { grid-column: 1 / -1; block-size: .42rem; overflow: hidden; border-radius: 999px; background: rgba(16,45,40,.16); }
  .readiness-meter span { display: block; inline-size: var(--readiness); block-size: 100%; background: var(--red-dark); transition: inline-size .18s ease; }
  .brief-deck { display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem); }
  .brief-panel { align-self: start; display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2.5rem); }
  .section-heading { max-inline-size: 52rem; }
  .section-heading > p:last-child { color: var(--ink-soft); }
  .brief-panel .section-heading h2 { font-size: clamp(2rem, 4vw, 3.7rem); margin-block-end: 1rem; }
  .choice-set { min-inline-size: 0; border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .choice-set legend { grid-column: 1 / -1; margin-block-end: .4rem; font-weight: 800; }
  .choice-set label { min-block-size: 2.75rem; display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--paper-bright); }
  .choice-set input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--red); }
  .deck-board { min-inline-size: 0; }
  .deck-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-block-end: 1.4rem; }
  .deck-toolbar h2 { font-size: clamp(2.1rem, 4vw, 4.5rem); }
  .deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .deck-grid:empty { min-block-size: 20rem; border: 1px dashed rgba(16,45,40,.38); border-radius: var(--radius); background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(16,45,40,.035) 14px, rgba(16,45,40,.035) 28px); }
  .deck-grid:empty::before { content: "Your six-card field deck will assemble here."; place-self: center; color: var(--ink-soft); }
  .deck-card { min-inline-size: 0; min-block-size: 19rem; display: flex; flex-direction: column; padding: 1.35rem; background: var(--paper-bright); border: 1px solid var(--line); border-block-start: 5px solid var(--red); border-radius: .85rem; box-shadow: 0 12px 30px rgba(16,45,40,.08); }
  .deck-card:nth-child(3n + 2) { transform: rotate(.35deg); border-block-start-color: var(--blue); }
  .deck-card:nth-child(3n) { transform: rotate(-.3deg); border-block-start-color: var(--brass); }
  .mini-lines { color: var(--ink-soft); font-size: .9rem; }
  .mini-lines p { margin: .65rem 0; }
  .mini-lines p, .pinned-note p, .result-line strong, .result-line p { overflow-wrap: anywhere; }
  .mini-lines strong { color: var(--ink); }
  .card-actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: 1rem; }
  .card-actions button { min-block-size: 2.75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .5rem .9rem; cursor: pointer; }
  .card-actions button[aria-pressed="true"] { background: var(--ink); color: white; }
  .pack-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block-start: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255,250,240,.72); }
  .pack-bar > div { display: grid; margin-inline-end: auto; }
  .share-fallback { inline-size: 100%; max-block-size: 8rem; margin-block-start: .75rem; font: .8rem/1.35 ui-monospace, monospace; overflow-wrap: anywhere; }
  .pack-bar small { color: var(--ink-soft); }
  .pinned-notes-shell { margin-block-start: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,250,240,.56); }
  .pinned-notes-shell > h3 { margin-block-end: 1rem; }
  .pinned-notes { display: grid; gap: .8rem; }
  .pinned-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper-bright); }
  .pinned-note > img { inline-size: 6rem; aspect-ratio: 1; object-fit: cover; }
  .pinned-note p { margin-block: .4rem; color: var(--ink-soft); }
  .tool-index { padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem); background: #e6d9c0; border-block-start: 1px solid var(--line); }
  .tool-index-grid { margin-block-start: 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .tool-index-group > h3 { margin-block-end: .8rem; }
  .tool-index-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .tool-index-group[data-tool-group="At the table"] .tool-index-group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-index-group[data-tool-group="Emergency pack"] .tool-index-group-grid { grid-template-columns: 1fr; }
  .tool-index-card { min-inline-size: 0; min-block-size: 17rem; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; padding: .75rem; border: 1px solid var(--line); border-block-start: 4px solid var(--brass); border-radius: .85rem; background: rgba(255,250,240,.38); text-decoration: none; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
  .tool-index-group[data-tool-group="At the table"] .tool-index-card { border-block-start-color: var(--blue); }
  .tool-index-group[data-tool-group="Emergency pack"] .tool-index-card { min-block-size: 0; grid-template-columns: minmax(14rem, .55fr) minmax(0, 1fr); grid-template-rows: 1fr; border-block-start-color: var(--red); }
  .tool-index-card:focus-visible { outline: 3px solid var(--red-dark); outline-offset: 3px; background: var(--paper-bright); box-shadow: var(--shadow); }
  .tool-card-art { min-inline-size: 0; display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; border-radius: .58rem; background: linear-gradient(145deg, rgba(255,250,240,.95), rgba(222,208,181,.78)); color: var(--red-dark); }
  .tool-index-group[data-tool-group="At the table"] .tool-card-art { color: #315b64; }
  .tool-index-group[data-tool-group="People & party"] .tool-index-card:nth-child(3n) .tool-card-art,
  .tool-index-group[data-tool-group="Story & session"] .tool-index-card:nth-child(3n) .tool-card-art { color: #75602e; }
  .tool-mini-illustration { inline-size: 88%; block-size: 88%; filter: drop-shadow(1px 2px 0 rgba(16,45,40,.08)); }
  .tool-mini-illustration .art-fill { fill: currentColor; stroke: none; opacity: .88; }
  .tool-card-copy { min-inline-size: 0; display: flex; flex-direction: column; gap: .65rem; padding: .2rem .35rem .45rem; }
  .tool-index-card strong { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.05; }
  .tool-index-card small { color: var(--ink-soft); line-height: 1.42; }
  .tool-card-action { min-block-size: 2.75rem; display: inline-flex; align-items: flex-end; gap: .35rem; margin-block-start: auto; color: var(--red-dark); font-size: .82rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
  @media (hover: hover) { .tool-index-card:hover { background: var(--paper-bright); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(16,45,40,.1); } }
  .route-intro { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 7vw, 8rem) 2rem; background: var(--ink); color: var(--paper); }
  .route-tool-art { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid rgba(223,189,125,.55); border-radius: 1rem; background: rgba(255,250,240,.07); color: var(--brass-light); transform: rotate(-1.5deg); }
  .route-intro h1 { max-inline-size: 14ch; font-size: clamp(3rem, 7vw, 7rem); }
  .route-intro > div > p:last-child { max-inline-size: 50rem; margin-block-end: 0; color: #dbe4df; font-size: 1.15rem; }
  .shared-strip { position: sticky; z-index: 4; inset-block-start: 0; display: flex; align-items: center; gap: .75rem; min-block-size: 3.4rem; padding: .65rem clamp(1rem, 5vw, 5rem); background: #e9d39f; border-block-end: 1px solid rgba(16,45,40,.25); font-size: .83rem; }
  .shared-strip a { min-block-size: 2.75rem; min-inline-size: 2.75rem; display: inline-flex; align-items: center; margin-inline-start: auto; font-weight: 800; }
  .shared-strip button { min-block-size: 2.75rem; min-inline-size: 2.75rem; border: 0; background: transparent; color: var(--ink); text-decoration: underline; cursor: pointer; }
  .signal-dot { inline-size: .65rem; block-size: .65rem; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 .25rem rgba(164,72,52,.18); }
  .generator-workspace { max-inline-size: 1100px; display: grid; grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.18fr); gap: clamp(1rem, 3vw, 2rem); margin: clamp(2rem, 5vw, 5rem) auto; padding: clamp(1rem, 3vw, 2rem); }
  .generator-workspace form { min-inline-size: 0; align-self: start; display: grid; gap: 1rem; padding: 1rem; border-inline-end: 1px solid var(--line); }
  .workspace-number { margin: 0; color: var(--red); font-family: var(--serif); font-size: 3.2rem; line-height: 1; }
  .result-panel { min-inline-size: 0; box-shadow: none; padding: clamp(1rem, 3vw, 2rem); background: #f9f0dc; }
  .result-panel[data-state="error"] { border-color: rgba(138,32,25,.55); }
  .result-panel[data-state="stale"]::before { content: "Last valid result · fix the fields to replace it"; display: block; margin-block-end: .8rem; color: #8a2019; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .result-panel h2 { font-size: clamp(2rem, 4vw, 3.7rem); }
  .result-line { display: grid; grid-template-columns: minmax(6rem, .34fr) minmax(0, 1fr); gap: 1rem; padding-block: .85rem; border-block-end: 1px solid var(--line); }
  .result-line p { margin: 0; color: var(--ink-soft); }
  .tracker-shell, .portrait-workspace { max-inline-size: 1180px; display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); gap: 1.5rem; margin: clamp(2rem, 5vw, 5rem) auto; padding-inline: 1rem; }
  .tracker-entry, .tracker-board, .portrait-filters, .portrait-stage { min-inline-size: 0; padding: clamp(1rem, 3vw, 2rem); }
  .portrait-filters { align-self: start; }
  .tracker-entry form { display: grid; gap: 1rem; }
  .tracker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .initiative-list { display: grid; gap: .55rem; padding: 0; list-style: none; }
  .initiative-list li { min-block-size: 4.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper-bright); }
  .initiative-list li[data-current="true"] { border: 2px solid var(--red); box-shadow: 4px 4px 0 rgba(164,72,52,.18); }
  .initiative-list li > div { display: grid; }
  .tracker-row-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
  .initiative-list li[data-editing="true"] { flex-wrap: wrap; }
  .tracker-inline-editor { flex: 1 0 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-block-start: .8rem; border-block-start: 1px solid var(--line); }
  .tracker-inline-editor .form-error, .tracker-editor-actions { grid-column: 1 / -1; }
  .tracker-editor-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
  .initiative-list span { color: var(--ink-soft); font-size: .84rem; }
  .initiative-list button { min-block-size: 2.75rem; border: 0; background: transparent; color: #842b23; text-decoration: underline; cursor: pointer; }
  .empty-state { padding: 2rem; border: 1px dashed var(--line); text-align: center; color: var(--ink-soft); }
  .portrait-feature { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: center; }
  .portrait-feature > img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border: .6rem solid var(--paper-bright); outline: 1px solid var(--line); border-radius: .45rem; box-shadow: var(--shadow); }
  .portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-block-start: 2rem; }
  .portrait-choice { min-inline-size: 0; min-block-size: 3rem; display: grid; gap: .35rem; border: 1px solid var(--line); background: var(--paper-bright); padding: .35rem; cursor: pointer; }
  .portrait-choice[aria-pressed="true"] { border: 3px solid var(--red); box-shadow: 0 0 0 3px rgba(164,72,52,.18); }
  .portrait-choice img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
  .portrait-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
  .portrait-more { margin-block-start: 1rem; }
  .prose-page { max-inline-size: 850px; margin: clamp(3rem, 7vw, 7rem) auto; padding-inline: 1rem; }
  .prose-page h1 { margin-block-end: 2.2rem; font-size: clamp(3rem, 7vw, 6.8rem); }
  .prose-page h2 { margin-block: 2.5rem 1rem; font-size: clamp(1.8rem, 4vw, 3.1rem); }
  .prose-page .lede { font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--ink-soft); }
  .sitemap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .sitemap-groups ul { padding: 0; list-style: none; }
  .sitemap-groups li { padding-block: .8rem; border-block-end: 1px solid var(--line); }
  .sitemap-groups li p { color: var(--ink-soft); font-size: .88rem; }
  .ad-zone { max-inline-size: 970px; margin: 4rem auto; }
}

@layer responsive {
  @media (max-width: 900px) {
    .home-hero { min-block-size: 0; grid-template-columns: 1fr; }
    .hero-copy { padding-block-end: 2.5rem; }
    .hero-art { min-block-size: 0; aspect-ratio: 16 / 9; }
    .hero-art::before { background: linear-gradient(0deg, var(--ink), transparent 45%); }
    .brief-deck, .tracker-shell, .portrait-workspace { grid-template-columns: 1fr; }
    .brief-panel { position: static; }
    .readiness-quest { grid-template-columns: 1fr; }
    .readiness-meter { grid-column: 1; }
    .tool-index-group-grid, .tool-index-group[data-tool-group="At the table"] .tool-index-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-index-group[data-tool-group="Emergency pack"] .tool-index-group-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 650px) {
    .site-header { align-items: center; flex-wrap: wrap; }
    .site-header nav { inline-size: 100%; max-inline-size: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; font-size: .64rem; }
    .site-header nav a { justify-content: center; text-align: center; }
    body > footer, .generator-workspace { grid-template-columns: 1fr; }
    .generator-workspace { margin: 1rem; }
    .generator-workspace form { padding: .4rem; border-inline-end: 0; border-block-end: 1px solid var(--line); padding-block-end: 1.4rem; }
    .field-grid, .deck-grid, .sitemap-groups { grid-template-columns: 1fr; }
    .hero-copy { padding: 1.5rem 1.125rem 1.25rem; }
    .hero-copy h1 { max-inline-size: 14ch; font-size: clamp(2.65rem, 13vw, 3.25rem); }
    .hero-lede { margin-block: 1rem 1.2rem; font-size: .98rem; }
    .hero-actions { align-items: stretch; gap: .35rem; }
    .hero-actions .primary-button, .hero-actions .text-link { inline-size: 100%; justify-content: center; }
    .proof-row { margin-block-start: 1rem; font-size: .7rem; }
    .hero-art { aspect-ratio: 16 / 9; }
    .readiness-quest { gap: .75rem; padding-block: .9rem; }
    .readiness-quest h2 { font-size: 1.35rem; }
    .readiness-quest > div > p:last-child { margin-block-start: .35rem; font-size: .85rem; }
    .readiness-steps { grid-template-columns: 1fr; gap: .45rem; }
    .readiness-steps li { padding: .42rem .6rem; }
    .readiness-steps small { font-size: .72rem; }
    .tool-index-group-grid, .tool-index-group[data-tool-group="At the table"] .tool-index-group-grid { grid-template-columns: 1fr; }
    .tool-index-group[data-tool-group="Emergency pack"] .tool-index-card, .tool-index-card { min-block-size: 6.5rem; grid-template-columns: 6rem minmax(0, 1fr); grid-template-rows: 1fr; gap: .8rem; }
    .tool-card-art { align-self: start; }
    .tool-card-action { min-block-size: 2.75rem; }
    .shared-strip { position: static; inset-block-start: auto; flex-wrap: wrap; padding-block: .45rem; }
    .shared-strip a { margin-inline-start: 0; }
    .route-intro { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .85rem; padding: 1.25rem 1rem; }
    .route-tool-art { border-radius: .7rem; }
    .route-intro h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
    .route-intro > div > p:last-child { margin: 0; font-size: 1rem; }
    .deck-card:nth-child(n) { transform: none; }
    .portrait-feature { grid-template-columns: 1fr; }
    .portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tracker-inline-editor { grid-template-columns: 1fr; }
    .tracker-inline-editor .form-error, .tracker-editor-actions { grid-column: 1; }
    .result-line { grid-template-columns: 1fr; gap: .2rem; }
    .pack-bar > div { flex-basis: 100%; }
  }
  @media (max-width: 360px) {
    .site-header { flex-wrap: nowrap; gap: .35rem; padding: .5rem; }
    .brand { min-inline-size: 2.75rem; justify-content: center; }
    .brand > span:last-child { display: none; }
    .site-header nav { inline-size: auto; flex: 1; }
    .shared-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .45rem; padding-block: .25rem; font-size: .72rem; }
    .shared-strip [data-shared-summary] { grid-column: 1 / -1; }
    .shared-strip a, .shared-strip button { margin: 0; min-block-size: 2.75rem; justify-content: flex-start; text-align: start; }
    .generator-workspace form { position: relative; }
    .workspace-number { display: none; }
    .tracker-shell, .portrait-workspace { margin-block: .5rem; }
    .route-intro { position: relative; display: block; padding: .85rem 1rem; }
    .route-tool-art { position: absolute; inset-block-start: .85rem; inset-inline-end: 1rem; inline-size: 3.25rem; }
    .route-intro .eyebrow { padding-inline-end: 4rem; }
    .route-intro h1 { max-inline-size: 100%; font-size: 2.1rem; line-height: .98; }
    .route-intro > div > p:last-child { font-size: .86rem; line-height: 1.4; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  }
  @media print {
    @page { size: auto; margin: 8mm; }
    body { background: white; color: black; font-size: 8pt; line-height: 1.2; }
    body::before, .skip-link, .site-header, body > footer, .home-hero, .hero-art, .readiness-quest, .brief-panel, .tool-index, .pack-bar, .shared-strip, .card-actions, .pinned-note button, .hero-actions, .proof-row, .ad-zone, [data-pack-status] { display: none !important; }
    .brief-deck { display: block; padding: 0; }
    .deck-toolbar { margin-block-end: 3mm; }
    .deck-toolbar h2 { font-size: 17pt; margin: 0; }
    .deck-toolbar p { margin: 1mm 0 0; }
    .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
    .deck-card, .pinned-note { min-block-size: 0; padding: 3mm; break-inside: avoid; box-shadow: none; border: 1px solid black; color: black; background: white; transform: none; }
    .deck-card h3, .pinned-note h3 { font-size: 12pt; line-height: 1.05; margin: 1mm 0; }
    .card-kicker { font-size: 7pt; margin: 0; }
    .mini-lines p, .pinned-note p { margin: .8mm 0; }
    .pinned-notes-shell { margin-block-start: 5mm; }
  }
}

/* Structural HTML invariant: unlayered so no component or responsive layer can
   make an element carrying the native hidden attribute visible. */
[hidden] { display: none !important; }