/* ============================================================
   ORVANNA CONDUCTOR LIBRARY

   Shared by the two library pages, in the same way corporate.css
   is shared by the corporate pages:
     library.html        the index: a browsable grid of sixteen
     library-agent.html  the detail template, one agent per address

   The values here are the real design system tokens, taken from
   css/corporate.css and css/shop.css, not reinvented. This file
   is standalone: it does not load corporate.css, because the
   library is the one part of the site with a light theme and
   corporate.css hard-codes a dark field.

   THEMING, changed 2026-08-17 per docs/CORPORATE-CHROME-CONTRACT.md.

   These two pages used to follow the reader's operating system
   by default, which made the library the one part of the site
   that could open light while every other page opened dark. The
   site now behaves as one site:
     1. Bare :root carries the COMPLETE palette in its DARK form,
        because dark is the default on every corporate page.
     2. :root[data-theme="light"] RESTATES only what changes.
     3. No operating-system preference query is involved. The
        theme is a deliberate choice, made with the icon in the
        navigation, or it is dark.
   Noted rather than hidden: a reader whose machine is set to
   light, and who never touches the icon, now sees dark here
   where they used to see light. That is the point of one site
   with one default.

   One deliberate exception, unchanged and stated plainly: the
   navigation bar and the footer keep the brand's dark field in
   BOTH themes. Those tokens are declared once on bare :root and
   never restated. The reason is the logo. assets/logo-header-dark.svg
   draws its wordmark in white, the brand rules forbid recolouring
   a logo variant by hand, and no light variant is deployed in
   www/assets. A permanently dark chrome around a theme-aware
   reading surface is the honest way to hold that rule, and
   corporate.css now holds it the same way.
   ============================================================ */

:root {
  /* ---------- reading surface: the COMPLETE dark palette, the default ------- */
  --bg:            #EAE4D9;
  --bg-2:          #F1EDE6;
  --panel:         #F1EDE6;
  --panel-2:       #F1EDE6;
  --heading:       #1B1917;
  --text:          #4B453D;
  --muted:         #6B645A;
/* --quiet DARKENED 2026-08-19, from #8A8278 to #6B645A.

   #8A8278 on the paper ground measures 2.99:1. It is the handoff's --faint,
   the register for kickers, column headings and metadata, and at 10.5px it
   is normal-size text, so it wants 4.5:1 and was nowhere near it.

   The arithmetic says the step cannot be saved: 4.5:1 on #EAE4D9 needs a
   luminance at or below 0.1344, and --quiet at #6B645A is already 0.1298.
   The entire headroom between "passes" and "is --quiet" is 0.0046 of
   luminance, which nobody can see. So the three-step ink scale becomes two,
   deliberately.

   Nothing is lost that was doing work. A kicker was never distinguished from
   a caption by its colour alone: it is 10.5px, weight 700, tracked 0.2em and
   uppercase, against a caption at 12.5px, weight 400, untracked. The colour
   step was redundant differentiation bought at the price of readability.

   NOT changed: --shop-disabled-bg, which is the same hex used as a
   BACKGROUND with #1B1917 on it at 5.10:1. Darkening a disabled button's
   fill would push its own label the wrong way. */
  --quiet:         #6B645A;
  --line:          rgba(27, 25, 23, 0.18);
  --line-lit:      rgba(236, 48, 19, 0.38);
/* THE ACCENT IS A FILL, NOT A TEXT COLOUR ON PAPER. The handoff's own
   token table says so: "--accent is used for fills, large numerals and
   interface chrome, never for paragraph text on paper -- use
   --accent-deep there." Measured on the built pages, accent text on the
   paper grounds lands between 2.91:1 and 3.60:1 -- above gate one's 3:1
   floor on most of them, and under AA on all of them. The deep form is
   5.95:1 on paper and 6.36:1 on the raised panel. Swept 2026-08-19 after
   the owner reported text "blending too close to the page". */
  --accent:        #EC3013;   /* fills, chrome, large numerals */
  --accent-deep:   #A3220B;   /* the same accent AS TEXT on paper */
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(236, 48, 19, 0.08);
  --indigo-t:      #6B645A;
  --violet-t:      #1B1917;
  --icon:          #1B1917;
  --icon-lit:      #EC3013;
  --panel-shadow:  0 0 26px rgba(27, 25, 23, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --panel-lift:    0 0 38px rgba(236, 48, 19, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* A rule is a rule: 2px of ink, not a fade to nothing. The design
     asks for rules and alignment to do the organising, and a rule
     that dissolves halfway along organises only its first half. */
  --rule:          #1B1917;

  /* The --chrome-* tokens moved to css/site-chrome.css, which is
     now the single source of chrome presentation for all nine
     corporate pages. Rules in this file may still READ them. */

  --maxw:          1180px;   /* the design canvas, 2026-08-18 */
}

/* The light theme: a deliberate choice, never a system default. */
:root[data-theme="light"] {
  --bg:           #1B1917;
  --bg-2:         #EAE4D9;
  --panel:        #1B1917;
  --panel-2:      #1B1917;
  --heading:      #1B1917;
  --text:         #4B453D;   /* 12.63 to 1 on white */
  --muted:        #6B645A;   /* 6.03 to 1 on white */
  --quiet:        #6B7280;   /* 4.83 to 1 on white */
  --line:         rgba(27, 25, 23, 0.13);
  --line-lit:     rgba(27, 25, 23, 0.32);
  --accent:       #A3220B;   /* the single lit accent, light form. 5.36 to 1 on white */
  --accent-ink:   #1B1917;
  --accent-soft:  rgba(14, 116, 144, 0.08);
  --indigo-t:     #1B1917;   /* indigo as text on light. 7.40 to 1 on white */
  --violet-t:     #1B1917;
  --icon:         #1B1917;
  --icon-lit:     #A3220B;
  --panel-shadow: 0 4px 14px rgba(27, 25, 23, 0.10);
  --panel-lift:   0 10px 26px rgba(27, 25, 23, 0.14);
  --rule:         #1B1917;
}

/* ============================================================
   RESET AND PAGE FIELD
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;   /* the page itself never scrolls sideways */
}

img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

[hidden] { display: none !important; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* Available to a screen reader, absent from the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link, the navigation, the theme button, the Support
   button and the footer all moved to css/site-chrome.css on
   2026-08-17. They lived here and in corporate.css and inline in
   two more pages: four hand-maintained copies of one component,
   which is how the bar came to render at a different gap on the
   library pages than on the rest of the site. Do not reintroduce
   a chrome rule here; deploy/build_dist.py fails the build on it. */


/* ============================================================
   TYPE, per the design system scale
   ============================================================ */

.kicker {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--accent-deep);
  margin-bottom: 18px;
}

.page-title {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--heading);
  margin-bottom: 22px;
}

.section-title {
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--heading);
  margin-bottom: 18px;
}

.sub-title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 10px;
}

.lead {
  max-width: 46em;
  color: var(--muted);
  margin-bottom: 26px;
}

.body-copy { max-width: 48em; }
.body-copy + .body-copy { margin-top: 16px; }

.rule {
  height: 1px;
  border: 0;
  margin: 16px 0 36px;
  background: var(--rule);
}

.mt-lg { margin-top: 36px; }

/* ============================================================
   BANDS
   ============================================================ */

.band { padding: 84px 0; }
.band-alt { background: var(--bg-2); }
.band + .band { border-top: 1px solid var(--line); }

section { scroll-margin-top: 150px; }

.hero { padding: 76px 0 56px; border-bottom: 1px solid var(--line); }

.hero-sub {
  max-width: 44em;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- contents rail ---------- */

.rail {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.rail-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  gap: 8px;
  overflow-x: auto;         /* wide content scrolls inside its own container */
  scrollbar-width: thin;
}

.rail-link {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 14px 7px;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.rail-link:hover { color: var(--accent); border-color: var(--line-lit); }
.rail-link.is-current {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   PANELS
   ============================================================ */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 28px 26px;
}

.accent-bar {
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 0;
  background: #1B1917;
  opacity: 0.9;
}

.panel-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.panel-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 11px 5px;
  border-radius: 0;
  border: 1px solid var(--line-lit);
  color: var(--indigo-t);
  white-space: nowrap;
}

.badge-domain { border-color: var(--accent); color: var(--accent-deep); }
.badge-group  { border-color: var(--violet-t); color: var(--violet-t); }

.tag-soon {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 11px 5px;
  border-radius: 0;
  border: 1px solid var(--quiet);
  color: var(--quiet);
  white-space: nowrap;
}

/* ============================================================
   INDEX: filter pills and the card grid
   ============================================================ */

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 30px;
}

.filter-pill {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 20px;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.filter-pill:hover { border-color: var(--line-lit); color: var(--accent-deep); }
.filter-pill[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* the whole card is the link, so the target is the card, not a word in it */
.lib-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  color: inherit;            /* never fall back to the browser's link blue */
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lib-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-lit);
  box-shadow: none;
}

.lib-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* THE CELL REPLACES THE FRAME, 2026-08-19. The marks lost their shared
   hexagon so the sixteen could be told apart by shape; a ruled cell gives
   each glyph the same containment the polygon used to, without being the
   loudest shape in it. Rules and alignment, which is the system. */
.ico {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid rgba(27, 25, 23, 0.25);
  border-radius: 0;
  background: var(--bg-2);
}
.ico svg { width: 100%; height: 100%; display: block; }

/* THE CARD'S OWN ICON AND BADGE ARE SMALLER THAN THE PAGE'S.
   .ico and .badge are shared with the agent pages, where they sit
   alone at full size and should stay that way. Scoping the smaller
   sizes to .lib-card-top tightens the index grid without touching
   library-agent.html, which uses the same two class names. */
.lib-card-top .ico {
  width: 38px;
  height: 38px;
}

.lib-card-top .badge {
  /* Size held at the sheet's 0.62rem, same reason as the shop's
     .tier-badge: only the padding and the tracking come down. */
  letter-spacing: 0.13em;
  padding: 3px 9px 4px;
}

.lib-card-name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--heading);
  margin-bottom: 4px;
}

.lib-card:hover .lib-card-name { color: var(--accent-deep); }

.lib-card-blurb {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  flex-grow: 1;
  margin-bottom: 12px;
}

.lib-card-prices {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.lib-card-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lib-card-amt {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.lib-card-amt .per {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib-card-pv {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lib-card-once {
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lib-card-go {
  margin-top: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}

.lib-card-go svg { width: 11px; height: 11px; }

.filter-empty {
  padding: 30px 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ============================================================
   TABLES: wide content scrolls inside its own container
   ============================================================ */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--indigo-t);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tbody th {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}

/* Links inside tables. The packs-and-bundle rows on library.html are
   injected by that page's script as plain anchors with no class, so
   without this rule they fell back to the browser's default link
   blue: computed 1.84 to 1 on the dark panel, the exact washed-out
   class caught 2026-08-14 (quality assurance finding H1, fixed
   2026-08-16). The accent token computes 5.36 to 1 on the light
   panel and 9.57 to 1 on the dark panel; visited keeps the same
   colour, and the hover wash still computes 4.81 to 1 light and
   8.21 to 1 dark, so every state clears the 4.5 to 1 floor in both
   themes. Same treatment as .situation-a a below. */
table a,
table a:visited {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
table a:hover,
table a:focus-visible {
  background: var(--accent-soft);
}

.table-note { font-size: 0.82rem; color: var(--muted); margin-top: 12px; }

/* ============================================================
   HOW TO CHOOSE
   ============================================================ */

.situations { display: flex; flex-direction: column; gap: 18px; }

.situation {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 26px;
  padding: 24px 26px;
}

.situation-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.5;
}

.situation-a { font-size: 0.94rem; color: var(--text); }
.situation-a strong { color: var(--accent-deep); font-weight: 700; }
.situation-a p + p { margin-top: 10px; }
.situation-a a { color: var(--accent); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   PLACEHOLDERS AND CALLOUTS
   ============================================================ */

.soon-card {
  padding: 26px 26px 24px;
  border-style: dashed;
  background: var(--panel-2);
}

.soon-card .sub-title { margin-bottom: 6px; }
.soon-card p { font-size: 0.92rem; color: var(--muted); margin-top: 10px; }
.soon-card .tag-soon { margin-bottom: 12px; }

.callout {
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: var(--accent-soft);
  padding: 18px 22px;
  margin: 26px 0;
  max-width: 52em;
}

/* A callout's heading is a heading, not a label: it keeps the type
   system's negative tracking rather than the +0.16em it inherited
   from the old uppercase treatment. */
.callout .sub-title { font-size: 0.95rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.callout p { font-size: 0.92rem; }
.callout p + p { margin-top: 10px; }

/* ============================================================
   DETAIL PAGE (library-agent.html)
   ============================================================ */

.crumb-bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.crumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 28px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crumb a {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease;
}
.crumb a:hover { color: var(--accent-deep); }
.crumb a svg { width: 11px; height: 11px; }
.crumb .sep { color: var(--quiet); }
.crumb .here { color: var(--heading); }

.detail-hero { padding: 46px 0 40px; }

.detail-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.detail-mark {
  width: 96px;
  height: 96px;
  color: var(--icon);
}

.detail-name {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
  color: var(--heading);
  margin: 10px 0 8px;
}

.detail-blurb {
  color: var(--muted);
  max-width: 40em;
  font-size: 1.02rem;
}

/* ---------- price block ---------- */

.price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0;
  max-width: 520px;
}

.price-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--indigo-t);
}

.price-amt {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-amt .per {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-pv {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

.price-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 12px;
  max-width: 46em;
}

/* ---------- the six fields ---------- */

.fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.field-wide { grid-column: 1 / -1; }

.field h2, .field h3 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--indigo-t);
  margin-bottom: 10px;
}

.field p { font-size: 0.95rem; color: var(--text); }
.field p + p { margin-top: 12px; }

.handles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}

.handles li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--text);
}

.handles li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--accent);
}

/* ---------- what is inside (bundle and packs) ---------- */

.inside-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.inside-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.inside-chip:hover {
  transform: translateY(-3px);
  border-color: var(--line-lit);
  box-shadow: none;
}

.inside-chip .ico { width: 40px; height: 40px; }

.inside-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--heading);
}

.inside-blurb {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- shop link ---------- */

.buy-line {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
}

.buy-line a {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- walk the catalog: previous and next ---------- */

.walk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.walk-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.walk-link:hover {
  transform: translateY(-3px);
  border-color: var(--line-lit);
  box-shadow: none;
}

.walk-next { flex-direction: row-reverse; text-align: right; }

.walk-link .ico { width: 42px; height: 42px; }

.walk-body { min-width: 0; flex: 1; }

.walk-dir {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.walk-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading);
}

.walk-link:hover .walk-name { color: var(--accent-deep); }

/* ---------- the unknown agent view ---------- */

.notfound {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 34px 38px;
}

.notfound .ico { width: 72px; height: 72px; margin: 0 auto 20px; }
.notfound p { color: var(--muted); margin-bottom: 10px; }
.notfound .asked { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; color: var(--heading); }

.btn-back {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 26px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.btn-back:hover { transform: translateY(-2px); box-shadow: none; }

/* The footer moved to css/site-chrome.css. See the note above. */

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-row { grid-template-columns: 1fr; }
  .situation { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 760px) {
  .band { padding: 60px 0; }
  .hero { padding: 52px 0 40px; }
  .card-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .handles { grid-template-columns: 1fr; }
  .panel-row-2 { grid-template-columns: 1fr; }
  .inside-grid { grid-template-columns: 1fr; }
  .rail { top: 0; }
  .detail-head { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
  .detail-mark { width: 72px; height: 72px; }
  .walk { grid-template-columns: 1fr; }
  .walk-next { flex-direction: row; text-align: left; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .rail-inner, .crumb { padding-left: 20px; padding-right: 20px; }
  .price { grid-template-columns: 1fr; }
  .panel { padding: 24px 20px 22px; }
  .situation { padding: 20px; }
  .detail-head { grid-template-columns: 1fr; }
}

/* ============================================================
   THE CHOOSER, 2026-08-19.

   The ten situations used to be flat quote boxes at the FOOT of
   this page: a Conductor had to scroll past the whole catalog to
   reach the one part organised around what a customer actually
   said. They are the first thing now, and picking one drives a
   single answer rather than ten static paragraphs.

   NOT ONE PRICE IS TYPED HERE EITHER. The recommendation, both
   prices, both Personal Volume figures, the combined total and
   the qualification line are all read from js/catalog.js at load,
   exactly as the rest of this page already works. That is a
   deliberate difference from comp-plan.html, which ships its
   interactive state rendered: THIS page's whole contract is that
   no figure is duplicated anywhere in the file, and typing ten
   situations' worth of prices into the markup to survive a
   script-off load would break the one rule that keeps this page
   from drifting out of step with the shop.

   What IS in the markup is every word: the ten questions, the
   reasoning, the pairing note and the three cautions. A reader
   with no script gets all of the prose and none of the figures,
   which is the same bargain the rest of the page already makes.
   ============================================================ */
.chooser {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  border: 2px solid var(--heading);
  margin-top: 22px;
}
.ch-list { border-right: 1px solid var(--line, rgba(27, 25, 23, 0.25)); background: var(--panel); }
.ch-sit {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-bottom: 1px solid rgba(27, 25, 23, 0.22);
  border-radius: 0;
  font: inherit;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.ch-list .ch-sit:last-child { border-bottom: 0; }
.ch-sit:hover { background: #E6E0D6; }
.ch-sit.is-on { background: var(--heading); color: #F8F7F5; }
.ch-sit-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ch-sit.is-on .ch-sit-tag { color: #FF6A4A; }
.ch-sit-q { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; }

.ch-heads { display: grid; grid-template-columns: 1fr 1fr; }
.ch-head { padding: 22px 24px; background: var(--heading); color: #EAE4D9; }
.ch-head + .ch-head { border-left: 1px solid rgba(234, 228, 217, 0.28); }
.ch-head-k {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6A4A;
}
.ch-pick-name, .ch-qual {
  margin: 12px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #FFFFFF;
}
.ch-pick-price { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; }
.ch-per { margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #B6AE9F; }
.ch-pv { margin-left: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: #FF6A4A; }
.ch-once { margin: 8px 0 0; font-size: 12.5px; color: #B6AE9F; }
.ch-qual-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #D6CFC3; }

.ch-body { padding: 22px 24px 24px; }
.ch-why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.ch-then { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(27, 25, 23, 0.25); }
.ch-then-k, .ch-both-k, .ch-caution-k {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ch-then-line { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--heading); }
.ch-then-line span:not(.ch-pv) { margin-left: 10px; font-weight: 400; color: var(--text); }
.ch-then-line .ch-pv, .ch-both .ch-pv { color: #A3220B; }
.ch-then-why { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ch-both {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 25, 23, 0.25);
}
.ch-both b { font-size: 15px; font-weight: 700; color: var(--heading); }
.ch-caution { margin-top: 18px; padding: 14px 18px; border-left: 5px solid #B52309; background: rgba(236, 48, 19, 0.07); }
.ch-caution-k { color: #B52309; }
.ch-caution p:last-child { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.ch-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.ch-go, .ch-cart {
  display: inline-block;
  padding: 13px 18px;
  border: 2px solid var(--heading);
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.ch-go { background: var(--heading); color: #EAE4D9; }
.ch-go:hover { background: #2E2A26; color: #FFFFFF; }
.ch-cart { background: none; color: var(--heading); }
.ch-cart:hover { background: var(--heading); color: #EAE4D9; }

@media (max-width: 900px) {
  .chooser, .ch-heads { grid-template-columns: 1fr; }
  .ch-list { border-right: 0; border-bottom: 2px solid var(--heading); }
  .ch-head + .ch-head { border-left: 0; border-top: 1px solid rgba(234, 228, 217, 0.28); }
}

/* ---------- the hero's two-word panel ---------- */
.hero-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0; align-items: start; }
.hero-split > div:first-child { padding-right: 34px; }
.two-words { padding: 26px 28px; background: var(--panel); border-left: 1px solid rgba(27, 25, 23, 0.25); }
.tw-list { margin: 14px 0 0; border-top: 2px solid var(--heading); }
.tw-list > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(27, 25, 23, 0.22);
}
.tw-list > div:last-child { border-bottom: 0; }
.tw-list dt { font-size: 13px; font-weight: 700; color: var(--heading); }
.tw-list dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.tw-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- the sixteen, as an index ----------
   The container is a BLOCK, not the old .card-grid. That class is a
   multi-column grid built for cards; leaving the groups inside it laid
   two tier-groups side by side and squeezed every blurb to one word a
   line. A list of rows wants the full measure. */
.ix-index { display: block; }

.ix-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ix-group { margin-top: 26px; }
.ix-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--heading);
}
.ix-group-meta { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ix-rows { border-top: 2px solid var(--heading); }
.ix-row {
  display: grid;
  grid-template-columns: 44px 1.05fr 1.5fr 108px 68px 120px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(27, 25, 23, 0.22);
  text-decoration: none;
  color: inherit;
}
.ix-row:hover { background: var(--panel); }
.ix-row .ico { width: 34px; height: 34px; }
.ix-name { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--heading); }
.ix-blurb { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ix-price { font-size: 14.5px; font-weight: 700; color: var(--heading); white-space: nowrap; }
.ix-per { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ix-pv { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #A3220B; white-space: nowrap; }
.ix-once { font-size: 12px; line-height: 1.35; color: var(--muted); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split > div:first-child { padding-right: 0; }
  .two-words { margin-top: 24px; border-left: 0; border-top: 2px solid var(--heading); }
  .ix-row { grid-template-columns: 40px 1fr auto; row-gap: 6px; }
  .ix-blurb, .ix-once { display: none; }
}

/* ---------- 03 and 04 as one spread ---------- */
.pair-band { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--heading); }
.pair-band > .band { border-top: 0; }
.pair-band > .band + .band { border-left: 1px solid rgba(27, 25, 23, 0.25); }
.pair-band > .band > .wrap { max-width: none; padding-left: 34px; padding-right: 34px; }
@media (max-width: 900px) {
  .pair-band { grid-template-columns: 1fr; }
  .pair-band > .band + .band { border-left: 0; border-top: 2px solid var(--heading); }
}

/* ---------- the closing band is dark ----------
   The design closes on ink: what is not written yet, said plainly, against
   the one surface on this page that is not paper. A list of absences reads
   as an admission rather than an oversight when it is given its own ground. */
#coming { background: var(--heading); color: #C9C6C1; border-top: 2px solid var(--heading); }
#coming .section-title { color: #F8F7F5; }
#coming .rule { border-color: rgba(234, 228, 217, 0.28); }
#coming .lead, #coming p { color: #C9C6C1; }
#coming .kicker { color: #FF6A4A; }
/* The cards inside the closing band are paper panels on ink; their own
   text colour was set for the paper ground and measured 1.46:1 once the
   band went dark. Stated here rather than inherited: the same fault this
   redesign has now hit five times is a colour pair split across two
   rules that stopped being neighbours. */
#coming .soon-card { background: #232019; border-color: rgba(234, 228, 217, 0.28); }
#coming .soon-card .sub-title { color: #F8F7F5; }
#coming .soon-card p { color: #C9C6C1; }
#coming .tag-soon { color: #FF6A4A; border-color: rgba(255, 106, 74, 0.55); background: none; }