/* ==========================================================================
   PAGE STYLES  (design lane)

   Layout principle: <main class="page"> is full width. Every direct child,
   plus the site header and footer, carries the same inline padding, which
   is max(gutter, half the leftover beyond --page-max). That aligns every
   region to one column and lets any region paint its own full-width ground
   (the generator and footer are black) without a single vw measurement, so
   nothing can ever cause horizontal scroll.

   Reading column: prose is bound by --measure but the rules above h2s and
   the name lists span the full column. Narrow text, wide lists, long rules.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

::selection { background: var(--action); color: var(--ink); }

:focus-visible { outline: var(--focus); outline-offset: 3px; }
/* The focus ring is ink on the light sheet, because hi-vis against the grey
   ground is a chroma difference, not a luminance one (1.1 to 1). Inside the
   dark panel and footer the ring is hi-vis (14.5 to 1), and the paper slip
   that sits inside the panel goes back to ink. */
.generator,
.site-footer { --focus: 3px solid var(--action); }
.shortlist   { --focus: 3px solid var(--ink); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--action);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
/* The highlighter fill belongs to links in the body of the page only. It is
   scoped to .page (the <main>) so it never reaches the header or footer: the
   wordmark is identity and the nav is navigation, and neither takes the
   accent, which stays reserved for the control that does work. Their hovers
   are quiet and live with their own rules: the wordmark's tab goes to ink,
   the nav link's underline appears. */
.page a:hover {
  background: var(--action);
  color: var(--ink);
  text-decoration-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, button, select {
    transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  }
}

/* ---- one column for everything ----------------------------------------- */
.site-header,
.site-footer,
.page > * {
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
}

/* ==========================================================================
   Chrome
   ========================================================================== */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.1rem;
  border-bottom: 3px solid var(--ink);
}

/* ---- identity ------------------------------------------------------------
   The template inlines design/identity/wordmark.svg inside the header link
   and lockup.svg inside the footer paragraph (DESIGN-NOTES item 10). The SVG
   carries the accessible name, paints in currentColor, and its tab is a real
   rect, so the hover is one rule. Heights come from the tokens; widths follow
   the viewBox ratio. */
.site-wordmark {
  display: block;
  padding: 0.2rem 0.3rem;
  margin: 0.2rem -0.3rem;
  text-decoration: none;
  line-height: 0;
}
.site-wordmark svg {
  display: block;
  height: var(--wordmark-h);
  width: auto;
}
.site-wordmark:hover svg rect { fill: var(--ink); }

.site-nav {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.site-nav a {
  text-decoration: none;
  padding: 0.45rem 0.5rem;
  margin-inline: -0.5rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: currentColor; }

.site-footer {
  margin-top: clamp(3rem, 7vw, 6rem);
  background: var(--dark);
  color: var(--on-dark);
  padding-block: 2.5rem;
}
/* Scoped to the mark. This was .site-footer p, which was right when the mark
   was the only thing down here and collapsed the footer note to zero height
   the moment one was added. */
.site-footer__mark {
  margin: 0;
  line-height: 0;
}
/* The footer carries the full lockup, mark then name, in paper on ink. */
.site-footer__mark svg {
  display: block;
  height: var(--lockup-h);
  width: auto;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.6rem;
}
.site-footer__nav a {
  font-family: var(--font-ui);
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { border-bottom-color: var(--action); }

.site-footer__note {
  margin: 1.5rem 0 0;
  max-width: 44rem;
  font-family: var(--font-ui);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  padding-block: clamp(2.25rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: var(--size-h1);
  line-height: 0.92;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.masthead h1::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.55rem;
  background: var(--action);
  margin-bottom: 1.5rem;
}

.masthead__sub {
  display: block;
  margin-top: 1.4rem;
  max-width: 36rem;
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-size: var(--size-sub);
  line-height: 1.35;
  letter-spacing: 0;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 1;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ==========================================================================
   Generator: the instrument panel
   ========================================================================== */

.generator {
  background: var(--dark);
  color: var(--on-dark);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.75rem);
}

.generator h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: var(--size-h2);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.generator__lede {
  margin: 0;
  max-width: var(--measure);
  font-size: 1.05rem;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.generator__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dark-rule);
}
@media (min-width: 768px) {
  .generator__controls { grid-template-columns: 1fr 1fr auto; gap: 1.5rem; }
}

.generator__controls label {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-dark-muted);
}

.generator__controls select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.9rem 2.75rem 0.9rem 1rem;
  border: 1px solid var(--on-dark-muted);
  border-radius: 0;
  background-color: var(--dark-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ECEFF1' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.875rem auto;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
.generator__controls select:hover { border-color: var(--on-dark); }
.generator__controls select option { color: var(--ink); background: var(--paper); }

/* ---- the two button roles --------------------------------------------- */
.btn-primary,
.btn-quiet {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 1rem 1.5rem;
  border: 2px solid var(--action);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.btn-primary {
  background: var(--action);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}
.btn-quiet {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn-quiet:hover {
  background: var(--action);
  color: var(--ink);
  border-color: var(--action);
}

/* ---- results ---------------------------------------------------------- */
.generator__results {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
  border-top: 1px solid var(--on-dark-muted);
}
@media (min-width: 768px)  { .generator__results { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .generator__results { grid-template-columns: 1fr 1fr 1fr; } }

.generator__results li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--dark-rule);
}

.generator__name {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.generator__results button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.5rem 0.65rem;
  min-width: 4.4rem;
  border: 1px solid var(--on-dark-muted);
  border-radius: 0;
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.generator__results button:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
/* copy is the secondary of the two: same box, quieter ink and rule */
.generator__results .generator__copy {
  color: var(--on-dark-muted);
  border-color: var(--dark-rule);
}
.generator__results button[aria-pressed="true"] {
  background: var(--action);
  color: var(--ink);
  border-color: var(--action);
}

/* ---- shortlist: a paper slip inside the black panel ------------------- */
.shortlist {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--paper);
  color: var(--ink);
  border-left: 0.5rem solid var(--action);
}
.shortlist h3 {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.shortlist ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.shortlist li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
}
.shortlist .btn-primary,
.shortlist .btn-quiet {
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  margin: 0.25rem 0.5rem 0 0;
}
.shortlist .btn-quiet { color: var(--ink); }

.generator__note {
  margin: 1.75rem 0 0;
  max-width: var(--measure);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Prose sections
   ========================================================================== */

.prose,
.names {
  padding-top: var(--block);
}

.prose h2,
.names h2 {
  margin: 0 0 1.5rem;
  padding-top: 1.1rem;
  border-top: 4px solid var(--ink);
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: var(--size-h2);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.prose p {
  margin: 0 0 1.1em;
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose h3 {
  margin: 2.1rem 0 0.55rem;
  max-width: var(--measure);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1.28rem;
  line-height: 1.2;
  text-wrap: balance;
}
.prose h3 + p { margin-top: 0; }

/* trade vocabulary: a word bank with a gloss per root. Each item is the
   root in the headline face and, beside it, what that root signals. The
   two columns are fixed so the roots align down the bank; the gloss wraps
   in its own column and can never strand a last word against the root. */
.prose .terms {
  list-style: none;
  max-width: 44rem;
  margin: 0 0 1.75rem;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.prose .terms li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.15rem 1.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose .terms strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  /* At phone width the gloss column is about 230px, which is too narrow to
     avoid a one-word last line however the copy is written. Stacking gives
     the gloss the full measure and keeps the root-then-gloss reading order.
     This is the orphan rule from DESIGN-CONTRACT.md, not a taste change. */
  .prose .terms li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
    text-wrap: pretty;
  }
}

.prose .caution {
  max-width: 44rem;
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.35rem;
  border-left: 0.5rem solid var(--action);
  background: var(--paper-deep);
  font-weight: 500;
}

.prose .seealso {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-style: italic;
  color: var(--ink-2);
}

/* the availability section is the one that tells the reader what to do
   next, so it sits on a tinted band */
.prose--check {
  margin-top: var(--block);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  background: var(--paper-deep);
}
.prose--check h2 { padding-top: 0; border-top: 0; }
.prose--check .seealso { border-top-color: var(--ink); }
.prose--check + .prose { padding-top: var(--block); }

.related {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: var(--measure);
  border-top: 3px solid var(--ink);
}
.related li { border-bottom: 1px solid var(--rule); }
/* The label is a flex child, so it wraps inside the row and a long one
   ("Pressure washing business names") stranded its last word at 375.
   Balancing the label is the fix; the arrow stays pinned right. */
.related a > span,
.related a { text-wrap: balance; }
.related a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.4rem;
  margin-inline: -0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
}
.related a::after {
  content: "\2192";
  color: var(--action-text);
  font-weight: 500;
}
.related a:hover::after { color: var(--ink); }

/* ==========================================================================
   Name sections
   ========================================================================== */

.nameblock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding: 1.5rem 0 2.75rem;
  border-top: 1px solid var(--ink);
}
@media (min-width: 768px) {
  .nameblock { grid-template-columns: minmax(0, 1fr) auto; }
  .nameblock h3           { grid-column: 1; grid-row: 1; }
  .nameblock__count       { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0.35rem; }
  .nameblock__blurb       { grid-column: 1 / -1; grid-row: 2; }
  .namelist               { grid-column: 1 / -1; grid-row: 3; }
}

.nameblock h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: var(--size-h3);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.nameblock__blurb {
  margin: 0.55rem 0 0;
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}

.nameblock__count {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.namelist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  column-width: var(--namelist-col);
  column-gap: var(--namelist-gap);
  column-rule: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 1.05rem;
  line-height: 1.3;
}
.namelist li {
  break-inside: avoid;
  padding: 0.28rem 0 0.28rem 1em;
  text-indent: -1em;
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  .namelist {
    column-width: auto;
    column-count: var(--namelist-columns);
    column-gap: 1.25rem;
    font-size: 0.95rem;
  }
}

/* the two groups the h2 promises: by style, then by customer. The label
   is a mono caption with no heading role; the second one sits above the
   heavy rule that marks where the grouping changes. */
.names__grouplabel {
  margin: 3rem 0 0.75rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.names__jump + .names__grouplabel { margin-top: 2rem; }

/* where the grouping switches from style register to customer */
.nameblock--group-start {
  padding-top: 2rem;
  border-top: 0.5rem solid var(--ink);
}

/* ---- register voices ----------------------------------------------------
   Keyed on data-register, the fixed per-register key the template emits
   (DESIGN-NOTES item 2), so a register titled differently on one entity
   still gets its voice. The customer sections carry data-register="lane"
   and take the base voice above. */

[data-register="catchy"] h3,
[data-register="catchy"] .namelist {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
[data-register="catchy"] .namelist { font-size: 1rem; }

[data-register="professional"] h3,
[data-register="professional"] .namelist {
  font-family: var(--font-text);
  font-weight: 500;
  font-stretch: 100%;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  text-transform: none;
  letter-spacing: 0;
}
[data-register="professional"] .namelist { font-size: 1.15rem; }

[data-register="funny"] h3,
[data-register="funny"] .namelist {
  font-family: var(--font-text);
  font-weight: 900;
  font-stretch: 100%;
  font-variation-settings: "opsz" 9, "SOFT" 100, "WONK" 1;
  text-transform: none;
  letter-spacing: 0;
}
[data-register="funny"] .namelist { font-size: 1.15rem; }

[data-register="modern"] h3,
[data-register="modern"] .namelist {
  font-family: var(--font-display);
  font-weight: 300;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
[data-register="modern"] .namelist { font-size: 0.95rem; }

[data-register="short"] h3,
[data-register="short"] .namelist {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0;
}
[data-register="short"] .namelist {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1;
  column-width: 11ch;   /* wider than any one-word name at this size */
  column-gap: 1.75rem;
}
[data-register="short"] .namelist li {
  padding: 0.3rem 0;
  text-indent: 0;
  overflow-wrap: normal;   /* a one-word name must never break mid-word */
}
@media (max-width: 599px) {
  [data-register="short"] .namelist {
    column-width: auto;
    column-count: 2;
    column-gap: 1.25rem;
    font-size: 1.5rem;
  }
}

[data-register="luxury"] h3,
[data-register="luxury"] .namelist {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  text-transform: none;
  letter-spacing: 0.02em;
}
[data-register="luxury"] .namelist { font-size: 1.3rem; line-height: 1.25; }

[data-register="family"] h3,
[data-register="family"] .namelist {
  font-family: var(--font-text);
  font-weight: 600;
  font-stretch: 100%;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  text-transform: none;
  letter-spacing: 0;
}
[data-register="family"] .namelist { font-size: 1.12rem; }

[data-register="local"] h3,
[data-register="local"] .namelist {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
[data-register="local"] .namelist { font-size: 1.05rem; }

[data-register="trust"] h3,
[data-register="trust"] .namelist {
  font-family: var(--font-text);
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0;
  text-transform: none;
  letter-spacing: 0;
}
[data-register="trust"] .namelist { font-size: 1.08rem; }

[data-register="wordplay"] h3,
[data-register="wordplay"] .namelist {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 500;
  font-stretch: 100%;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 1;
  text-transform: none;
  letter-spacing: 0;
}
[data-register="wordplay"] .namelist { font-size: 1.15rem; }

/* ==========================================================================
   Tables
   ========================================================================== */

.tablewrap {
  margin: 1.5rem 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-picks,
.table-summary {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-picks th,
.table-picks td,
.table-summary th,
.table-summary td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.table-picks th:last-child,
.table-picks td:last-child,
.table-summary th:last-child,
.table-summary td:last-child { padding-right: 0; }

.table-picks thead th,
.table-summary thead th {
  padding-top: 0;
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.table-picks tbody th,
.table-summary tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
}
.table-picks tbody th { font-size: 1.35rem; white-space: nowrap; }

.table-picks .style {
  padding-top: 1.15rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  white-space: nowrap;
}
.table-picks td:last-child { max-width: 36rem; text-wrap: pretty; }

.table-summary { min-width: 46rem; }
.table-summary td { font-size: 1rem; }

/* quick picks stack on phones; the explicit ARIA roles in the markup keep
   the table semantics when display changes */
@media (max-width: 639px) {
  .table-picks,
  .table-picks thead,
  .table-picks tbody,
  .table-picks tr,
  .table-picks th,
  .table-picks td { display: block; }
  .table-picks thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table-picks tr { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
  .table-picks tr:first-child { border-top: 3px solid var(--ink); }
  .table-picks th,
  .table-picks td { padding: 0; border: 0; }
  .table-picks tbody th { white-space: normal; }
  .table-picks .style { padding: 0.35rem 0 0.5rem; }

  /* the summary table stacks the same way; each cell draws its column
     header from data-label as a mono caption (DESIGN-NOTES item 8) */
  .table-summary { min-width: 0; }
  .table-summary,
  .table-summary thead,
  .table-summary tbody,
  .table-summary tr,
  .table-summary th,
  .table-summary td { display: block; }
  .table-summary thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table-summary tr { padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
  .table-summary tr:first-child { border-top: 3px solid var(--ink); }
  .table-summary th,
  .table-summary td { padding: 0; border: 0; }
  .table-summary td { margin-top: 0.85rem; }
  .table-summary td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--size-label);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
  }
}

/* ==========================================================================
   Jump strip
   A mono strip of section links that sticks to the top of the viewport
   while the reader is inside the region it indexes. Sticky positioning is
   bounded by the containing block, so on entity pages (where the nav sits
   inside .names) it releases at the end of the names section by itself,
   and on the money pages (where it is a direct child of .page) it serves
   the whole article as a table of contents. The visible label is the
   nav's own aria-label, so each role names itself from the markup.

   Below 768px it is one row that scrolls sideways: thirteen links wrapped
   would be a 150px bar on a phone. The label is pinned at the left edge
   with sticky, and a paper fade at the right edge says there is more.
   From 768px up it wraps, because a mouse should never have to scroll a
   strip sideways.
   ========================================================================== */

.names__jump {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  column-gap: 1.5rem;
  margin: 1.5rem 0 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* a link brought into view by keyboard focus is scrolled clear of the
     pinned label on the left and the fade on the right */
  scroll-padding-inline: 8.5rem 3rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.names__jump::-webkit-scrollbar { display: none; }

.names__jump::before {
  content: attr(aria-label);
  position: sticky;
  left: 0;
  flex: 0 0 auto;
  padding: 0.85rem 1rem 0.85rem 0;
  margin-right: -0.5rem;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  color: var(--muted);
  white-space: nowrap;
}
/* the fade: a paper gradient pinned to the right edge of the scrollport
   while there is more to the right; at the end of the scroll it is only
   the trailing air after the last link */
.names__jump::after {
  content: "";
  position: sticky;
  right: 0;
  flex: 0 0 2.5rem;
  background: linear-gradient(to right, transparent, var(--paper));
  pointer-events: none;
}

.names__jump a {
  flex: 0 0 auto;
  padding: 0.85rem 0;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.names__jump a:hover { color: var(--ink); }
/* the outline is drawn inside the link box: an outward ring would be
   clipped by the scroll container's edge */
.names__jump a:focus-visible { outline-offset: -3px; }

@media (min-width: 768px) {
  .names__jump {
    flex-wrap: wrap;
    overflow: visible;
    column-gap: 1.75rem;
  }
  .names__jump::before { position: static; margin-right: 0; }
  .names__jump::after { display: none; }
  /* denser rows when wrapped: three rows of thirteen links stay inside
     the --jump-h reserve, so a followed link lands below the bar */
  .names__jump::before,
  .names__jump a { padding-block: 0.6rem; }
}

/* On the money pages the nav is a direct child of .page, so it inherits
   the column padding. Swap that for margin so the strip's rule is the
   column width, as it is on the entity pages. */
.page > .names__jump {
  padding-inline: 0;
  margin-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
}
.article__contents { margin-top: 1.75rem; }

/* Anchor targets land below the strip rather than under it. Focus
   scrolling honours scroll-margin too, so a link brought back into view
   with shift-tab is not hidden by the bar either. */
[id],
a,
button,
select { scroll-margin-top: var(--jump-h); }

/* the section a jump link landed on: its rule turns hi-vis */
.nameblock:target {
  border-top: 4px solid var(--action);
  padding-top: calc(1.5rem - 3px);
}
.nameblock--group-start:target {
  border-top: 0.5rem solid var(--action);
  padding-top: 2rem;
}
.prose:target > h2 { border-top-color: var(--action); }
.check:target { border-top-color: var(--action); }

/* ==========================================================================
   Money pages
   The same system as the entity pages with four additions: a masthead
   without a count, a table of contents (the jump strip above), the three
   availability checks, and a plain prose list.
   ========================================================================== */

/* No count and no black panel beneath, so the title is a sentence at a
   sentence's size, and the space below it is a rule rather than a gap. */
.masthead--article {
  padding-bottom: 0;
}
.masthead--article h1 {
  max-width: 22ch;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.5rem);
  line-height: 0.95;
}
.masthead--article .masthead__sub { max-width: 32rem; }

.article__intro { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); padding-top: 0; }
/* the rule sits on the paragraph, so it is bound to the measure like every
   other rule in the column rather than running edge to edge */
.article__intro p:first-child {
  margin-top: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

/* Plain prose list: on the measure, pretty wrap, square marker. */
.article__list {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
  list-style: square;
  text-wrap: pretty;
}
.article__list li { margin-bottom: 0.7rem; padding-left: 0.2rem; }
.article__list li::marker { color: var(--muted); }

/* ---- one availability check --------------------------------------------
   Three of these in a row. Each is a ruled block: a mono step counter, the
   check's name in the register-title voice, then the pair that is the
   substance of the page. What the search answers is a solid block, ink bar
   and tinted ground, because it is something the search proves. What it
   does not answer is a hollow box, ink outline on bare paper, because it is
   the shape of what is missing. The same solid-versus-hollow reading runs
   through the three-checks diagram. */
.check {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 3px solid var(--ink);
}
.check + .check { margin-top: 3.5rem; }
.check:last-child { padding-bottom: 1rem; }

.check__step {
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.prose .check__name {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.prose .check__answers,
.prose .check__limits {
  margin: 0 0 0.75rem;
  padding: 0.95rem 1.15rem 1rem;
  color: var(--ink);
}
.prose .check__answers {
  border-left: 0.5rem solid var(--ink);
  background: var(--paper-deep);
}
.prose .check__limits {
  margin-bottom: 1.5rem;
  border: 1px solid var(--ink);
  padding-left: calc(1.15rem + 0.5rem - 1px);
}
.check__answers strong,
.check__limits strong {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.check p strong { font-weight: 600; }

/* ---- the diagram -------------------------------------------------------
   design/diagrams/three-checks.svg, inlined inside a figure. It is sized
   to the reading column and never wider than the SVG's own width, so the
   type inside it stays at the size it was drawn at on desktop and scales
   with the column on a phone. */
.article__figure {
  max-width: 30rem;
  margin: 2rem 0 2.75rem;
}
.article__figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.article__figure figcaption {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--size-small);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- orphan control -------------------------------------------------------
   The client's rule is no single-word last line on ANY viewport, and
   build/tests/orphan_sweep.py enforces it. .prose p already sets
   text-wrap: pretty; these are the elements that were missed, found by
   sweeping all seventy one pages: 34 of them stranded a word.

   text-wrap: pretty does not GUARANTEE an orphan is avoided: it is best
   effort, and at narrow widths it cannot always pull a word down. The
   binding in the prose itself is what actually holds the rule. This just
   reduces how much binding is needed. */
.prose li,
.prose .terms li,
.article__list li,
.related li,
.nameblock__blurb,
.generator__lede,
.generator__note,
.summary td,
.quickpick td {
  text-wrap: pretty;
}


/* The last two words of a paragraph, list item or heading, wrapped by the
   template so they cannot be split across lines. A U+00A0 character does not
   hold: Chromium breaks at it anyway, measured on a live page under both
   text-wrap: pretty and the default. nowrap is not advisory. */
.nb { white-space: nowrap; }