/* ==========================================================================
   TRU72 — BRAND HUB (tru72.com)
   --------------------------------------------------------------------------
   The hub is a SLIM site (D12): homepage with the location selector, About,
   Careers, Privacy, Terms, Accessibility, Sitemap, 404. No service content.

   It carries the North Carolina design language (D39) — square corners,
   ink/paper bands, gold hairlines, uppercase display headings — but it has
   no services nav, no booking card, no chat widget and no city phone bar,
   because the hub does not sell; it routes.

   COLOUR comes entirely from tru72-tokens.css (the approved five, D42).
   BUTTONS come entirely from tru72-surfaces.css (D46): .t72-cta is the gold
   primary and is locked to 20px/700 there, .t72-btn-ink is the secondary.
   Nothing in this file declares a hex, an rgba() or a font family.

   Load order on a hub page:
       tru72-tokens.css -> tru72-hub.css -> tru72-surfaces.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }

body {
  background: var(--t72-ink);
  color: var(--t72-type-on-paper);
  font-family: var(--t72-font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color .2s ease; }
img { max-width: 100%; display: block; }

.page {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--t72-paper);
  box-shadow: var(--t72-shadow-drop);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   SKIP LINK — visible the moment it takes focus, on every hub page.
   -------------------------------------------------------------------------- */
.t72-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--t72-ink);
  color: var(--t72-paper);
  font-family: var(--t72-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 2px solid var(--t72-gold);
}
.t72-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   UTILITY BAR + HEADER
   -------------------------------------------------------------------------- */
.utility {
  background: var(--t72-ink);
  color: var(--t72-type-on-ink);
  padding: 11px var(--t72-gutter);
  font-family: var(--t72-font-label);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.utility .since { color: var(--t72-type-on-ink-strong); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 14px var(--t72-gutter);
  background: var(--t72-paper);
  border-bottom: 1px solid var(--t72-rule);
}
.nav-brand img { height: 88px; width: auto; }
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: var(--t72-font-label);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--t72-type-on-paper);
  font-weight: 500;
  /* 6px of padding is not decoration: it takes the link from a 21px hit area
     to 33px, which is what WCAG 2.2 AA target size (2.5.8) asks of a nav
     link. The accessibility statement claims 2.2 AA, so the pages have to
     actually meet it. */
  padding: 6px 0 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--t72-type-on-paper-muted);
  border-bottom-color: var(--t72-gold);
}
.nav-links a[aria-current="page"] { border-bottom-color: var(--t72-gold); }

/* --------------------------------------------------------------------------
   SHARED SECTION FURNITURE
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--t72-font-label);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t72-type-on-paper-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--t72-gold); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after { content: ''; width: 26px; height: 1px; background: var(--t72-gold); }
.eyebrow.on-ink { color: var(--t72-type-on-ink); }

.band { padding: 72px var(--t72-gutter); }
.band-paper { background: var(--t72-paper); }
.band-warm  { background: var(--t72-paper-warm); }
.band-ink   { background: var(--t72-ink); color: var(--t72-type-on-ink-strong); border-top: 1px solid var(--t72-gold); border-bottom: 1px solid var(--t72-gold); }
.band-inner { max-width: 1120px; margin: 0 auto; }

h1, h2, h3 { font-family: var(--t72-font-display); letter-spacing: var(--t72-track-display); }

/* ==========================================================================
   THE PAGE-FAMILY HEADING SCALE, ON THE HUB                     (Phase 25b)
   --------------------------------------------------------------------------
   The hub has eight hand-written pages and no .t72c-* components, but it
   loads tru72-tokens.css like every other page in the estate, and that is
   where the family scale is declared. So the only thing this sheet has to do
   is CONSUME it: the three heading rules below read one custom property
   instead of spelling a size each. The manifest names the family and
   build.py stamps `t72-fam-<name>` on <body>, exactly as on the other four
   builds.

   ONE override lives here, below.

   Four of the five families take the token sheet's value, which is the
   reference's own measured 1280px size:

     family     hub page(s)                   was      reference   now
     about      /about/                       46.1px   43.5px      clamp(30px, 3.4vw, 44px)
     careers    /careers/                     46.1px   56.0px      clamp(36px, 4.4vw, 56px)
     sitemap    /sitemap/                     46.1px   56.0px      clamp(40px, 4.4vw, 56px)
     legal      /privacy/ /terms/ /accessibility/ /404  43.5px  43.5px  clamp(32px, 3.4vw, 44px)

   `home` IS A RECORDED DIVERGENCE AND KEEPS THE HUB'S OWN 54px CLAMP.
   The reference's `/` is a full Charlotte + Raleigh landing page with a
   58.9px head. tru72.com's `/` is not that page: D13 requires the State ->
   City selector above the fold, and the 880px block below already shortens
   every element over the selector to buy it the room. Taking the head UP to
   58.9px would spend that room on a headline and push the one section the
   page exists for below the fold. So the size stays and the reason is here
   rather than in somebody's memory. */
body.t72-fam-home { --t72c-h1-size: clamp(36px, 4.1vw, 54px); }

/* --------------------------------------------------------------------------
   HERO — one line, then straight into the selector (D13: above the fold)
   -------------------------------------------------------------------------- */
.hero { background: var(--t72-paper); padding: 32px var(--t72-gutter) 4px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; right: 2%; top: 50%;
  transform: translateY(-50%);
  width: 420px; height: 420px;
  background: url('../tru72-mark.png') center/contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 960px; margin: 0 auto; }
.hero h1 {
  font-weight: var(--t72-display-weight);
  font-size: var(--t72c-h1-size, clamp(36px, 4.1vw, 54px));
  line-height: .98;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
  margin: 0 0 14px;
}
.hero h1 em {
  display: block;
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--t72-type-on-paper-muted);
  font-size: .78em;
}
.hero-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--t72-type-on-paper);
  max-width: 60ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   THE LOCATION SELECTOR (D13) — State, then City.
   Rendered by build.py from sites.json. Nevada is gated on
   flags.include_nevada and is absent from the markup entirely when off.
   -------------------------------------------------------------------------- */
.selector { background: var(--t72-paper); padding: 28px var(--t72-gutter) 68px; }
.selector-inner { max-width: 1120px; margin: 0 auto; }
.selector-head { text-align: center; margin: 0 auto 24px; }
.selector-head h2 {
  font-weight: var(--t72-display-weight);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
  margin: 0 0 10px;
}
.selector-head p { margin: 0 auto; max-width: 52ch; font-size: 16.5px; line-height: 1.5; color: var(--t72-type-on-paper-muted); font-style: italic; }

/* States sit SIDE BY SIDE on a wide screen, stacked on a narrow one, and the
   count is not hard-coded: auto-fit means adding Nevada makes a third column
   appear and needs no CSS change, which is the whole point of D15's flag. The
   corollary is that the whole selector stays above the fold at 1200x900 —
   D13 says it must not be buried, and two stacked states would bury half. */
.state-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; align-items: start; margin: 0; padding: 0; list-style: none; }

.state { border: 1px solid var(--t72-rule-strong); background: var(--t72-paper-warm); padding: 0; }
.state-name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 18px 26px;
  background: var(--t72-ink);
  border-bottom: 1px solid var(--t72-gold);
  font-family: var(--t72-font-display);
  font-weight: var(--t72-display-weight);
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--t72-type-on-ink-strong);
}
.state-name .abbr {
  font-family: var(--t72-font-label);
  font-size: 13px;
  letter-spacing: .24em;
  font-weight: 500;
  color: var(--t72-type-on-ink);
}

.city-list { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: 1fr; gap: 14px; }

/* The whole card is the link — one big target, which is what a phone needs. */
.city {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--t72-paper);
  border: 1px solid var(--t72-rule-strong);
  border-left: 4px solid var(--t72-gold);
  padding: 17px 20px;
  min-height: 0;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.city:hover, .city:focus-visible { background: var(--t72-ink); border-color: var(--t72-ink); transform: translateY(-2px); }
.city:focus-visible { outline: 3px solid var(--t72-ink); outline-offset: 3px; }

.city-name {
  font-family: var(--t72-font-display);
  font-weight: var(--t72-display-weight);
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
  margin: 0;
}
.city-serving { font-size: 15.5px; line-height: 1.5; color: var(--t72-type-on-paper-muted); margin: 0; }
.city-go {
  margin-top: auto;
  font-family: var(--t72-font-label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t72-type-on-paper-muted);
}
.city:hover .city-name, .city:focus-visible .city-name { color: var(--t72-type-on-ink-strong); }
.city:hover .city-serving, .city:focus-visible .city-serving,
.city:hover .city-go, .city:focus-visible .city-go { color: var(--t72-type-on-ink); }

.selector-foot { margin: 26px auto 0; text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--t72-type-on-paper-muted); max-width: 62ch; }

/* --------------------------------------------------------------------------
   THE THREE PROMISE LINES (D10) — permanent, every site.
   -------------------------------------------------------------------------- */
.creed { background: var(--t72-ink); color: var(--t72-type-on-ink-strong); padding: 42px var(--t72-gutter) 52px; border-top: 1px solid var(--t72-gold); border-bottom: 1px solid var(--t72-gold); }
.creed ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; gap: 0; }
.creed li { flex: 1 1 0; text-align: center; padding: 0 26px; font-style: italic; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; color: var(--t72-type-on-ink-strong); }
.creed li + li { border-left: 1px solid var(--t72-rule-on-ink); }

/* --------------------------------------------------------------------------
   PROSE — About, Careers, legal, sitemap
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; margin: 0 auto; font-size: 17px; line-height: 1.68; color: var(--t72-type-on-paper); }
.prose.wide { max-width: 90ch; }
.prose h2 {
  font-weight: var(--t72-display-weight);
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
  margin: 46px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--t72-rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-weight: var(--t72-display-weight); font-size: 19px; line-height: 1.2; color: var(--t72-type-on-paper); margin: 28px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--t72-type-on-paper-muted); border-bottom: 1px solid var(--t72-gold); }
.prose a:hover, .prose a:focus-visible { color: var(--t72-type-on-paper); }
.prose .lede { font-size: 19px; line-height: 1.6; color: var(--t72-type-on-paper-muted); font-style: italic; margin-bottom: 26px; }
.prose .effective { font-family: var(--t72-font-label); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--t72-type-on-paper-muted); margin: 0 0 30px; }

.page-head { background: var(--t72-paper-warm); padding: 56px var(--t72-gutter) 46px; border-bottom: 1px solid var(--t72-rule); text-align: center; }
.page-head h1 { font-weight: var(--t72-display-weight); font-size: var(--t72c-h1-size, clamp(32px, 3.6vw, 48px)); line-height: 1; text-transform: uppercase; color: var(--t72-type-on-paper); margin: 0 0 12px; }
.page-head p { margin: 0 auto; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--t72-type-on-paper-muted); font-style: italic; }

/* Chapter blocks on the About page */
.chapter { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--t72-rule); }
.chapter:first-of-type { border-top: 0; }
.chapter-mark { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: clamp(22px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; color: var(--t72-type-on-paper-muted); overflow-wrap: anywhere; }
.chapter-mark span { display: block; font-family: var(--t72-font-label); font-size: 12px; letter-spacing: .2em; margin-top: 8px; color: var(--t72-type-on-paper-muted); }
.chapter h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: clamp(21px, 2.1vw, 27px); }
.chapter p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; }
.chapter p:last-child { margin-bottom: 0; }

/* Sitemap page (D41) — full URLs out to each location site */
.sitemap-group { margin-bottom: 38px; }
.sitemap-group h2 { margin-top: 0; }
.sitemap-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sitemap-links li { margin: 0; }
.sitemap-links a { display: block; padding: 14px 16px; background: var(--t72-paper-warm); border-left: 3px solid var(--t72-gold); color: var(--t72-type-on-paper); font-size: 16px; border-bottom: 0; }
.sitemap-links a:hover, .sitemap-links a:focus-visible { background: var(--t72-ink); color: var(--t72-type-on-ink-strong); }
.sitemap-links .url { display: block; font-family: var(--t72-font-label); font-size: 13px; letter-spacing: .04em; color: var(--t72-type-on-paper-muted); margin-top: 3px; word-break: break-word; }
.sitemap-links a:hover .url, .sitemap-links a:focus-visible .url { color: var(--t72-type-on-ink); }

/* FAQ blocks — the markup the FAQPage schema generator reads */
.faq-list { display: flex; flex-direction: column; margin: 0; padding: 0; }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--t72-rule); }
.faq-item:first-child { padding-top: 0; }
.faq-q { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: 17px; line-height: 1.2; text-transform: uppercase; color: var(--t72-type-on-paper); margin: 0 0 10px; }
.faq-a { font-size: 16px; line-height: 1.62; color: var(--t72-type-on-paper); margin: 0; }

/* --------------------------------------------------------------------------
   FINAL CTA + CLOSING SEAL + FOOTER
   -------------------------------------------------------------------------- */
/* The final CTA band is INK, not SCENERY GREEN, and that is a contrast
   decision rather than a taste one. The primary button is the gold .t72-cta;
   ANTIQUE GOLD on INK is 4.0:1, which clears the 3:1 that WCAG 1.4.11 asks of
   a control's own boundary, while ANTIQUE GOLD on SCENERY GREEN is 2.2:1 and
   does not. Gold's label stays INK at 20px/700 (4.04:1, AA large, D46). */
.final-cta { background: var(--t72-ink); color: var(--t72-type-on-ink-strong); padding: 62px var(--t72-gutter); text-align: center; border-top: 1px solid var(--t72-gold); border-bottom: 1px solid var(--t72-gold); }
.final-cta h2 { font-weight: var(--t72-display-weight); font-size: clamp(26px, 2.9vw, 38px); line-height: 1.05; text-transform: uppercase; color: var(--t72-type-on-ink-strong); margin: 0 0 12px; }
.final-cta p { margin: 0 auto 26px; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--t72-type-on-ink-strong); }
.final-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; align-items: stretch; }

/* --------------------------------------------------------------------------
   LEGAL PAGES — the markup comes over from the approved Tru72 legal documents
   unchanged (D28/D33), so the class names are theirs and this sheet dresses
   them rather than the other way round.
   -------------------------------------------------------------------------- */
.legal-hero { background: var(--t72-paper-warm); padding: 54px var(--t72-gutter) 44px; border-bottom: 1px solid var(--t72-rule); }
.legal-hero .container, .legal-body .container { max-width: 1120px; margin: 0 auto; }
.legal-hero h1 { font-weight: var(--t72-display-weight); font-size: var(--t72c-h1-size, clamp(30px, 3.4vw, 44px)); line-height: 1.02; text-transform: uppercase; color: var(--t72-type-on-paper); margin: 0 0 14px; }
.legal-dates { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--t72-font-label); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--t72-type-on-paper-muted); margin: 0 0 20px; }
.legal-dates strong { font-weight: 600; margin-right: 8px; color: var(--t72-type-on-paper); }
.legal-lead { font-size: 17px; line-height: 1.62; color: var(--t72-type-on-paper); max-width: 82ch; margin: 0; }

.legal-body { background: var(--t72-paper); padding: 52px var(--t72-gutter) 64px; }
.legal-body .container { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 20px; background: var(--t72-paper-warm); border-left: 3px solid var(--t72-gold); padding: 22px 22px 16px; }
.legal-toc-label { font-family: var(--t72-font-label); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--t72-type-on-paper-muted); margin: 0 0 12px; }
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 8px; font-size: 15px; line-height: 1.4; }
.legal-toc a { color: var(--t72-type-on-paper); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--t72-type-on-paper-muted); text-decoration: underline; }

.legal-article { font-size: 16.5px; line-height: 1.68; color: var(--t72-type-on-paper); max-width: 82ch; }
.legal-article > section { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--t72-rule); }
.legal-article > section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.legal-article h2 { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.1; text-transform: uppercase; color: var(--t72-type-on-paper); margin: 0 0 16px; }
.legal-article h3 { font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: 18px; line-height: 1.2; color: var(--t72-type-on-paper); margin: 26px 0 8px; }
.legal-article .section-num { display: block; font-family: var(--t72-font-label); font-size: 12px; letter-spacing: .24em; color: var(--t72-type-on-paper-muted); margin-bottom: 6px; }
.legal-article p { margin: 0 0 14px; }
.legal-article ul, .legal-article ol { margin: 0 0 16px; padding-left: 22px; }
.legal-article li { margin-bottom: 7px; }
.legal-article a { color: var(--t72-type-on-paper-muted); border-bottom: 1px solid var(--t72-gold); }
.legal-article a:hover, .legal-article a:focus-visible { color: var(--t72-type-on-paper); }
.legal-article .callout { background: var(--t72-paper-warm); border-left: 3px solid var(--t72-gold); padding: 18px 20px; margin: 0 0 18px; }
.legal-article .callout p:last-child { margin-bottom: 0; }

/* A hub-only scope note. It is NAVIGATION, not a clause: it says which
   document applies where. The clauses themselves are untouched (D28/D33). */
.legal-scope { background: var(--t72-ink); color: var(--t72-type-on-ink-strong); padding: 22px 26px; margin: 0 0 30px; border-left: 4px solid var(--t72-gold); }
.legal-scope p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.legal-scope p:last-child { margin-bottom: 0; }
.legal-scope a { color: var(--t72-type-on-ink-strong); border-bottom: 1px solid var(--t72-gold); }

.closing-seal { background: var(--t72-paper); padding: 46px var(--t72-gutter); text-align: center; border-bottom: 1px solid var(--t72-rule); }
.closing-seal img { width: 84px; margin: 0 auto 16px; }
.closing-seal p { margin: 0; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: var(--t72-type-on-paper); }
.closing-seal span { display: block; margin-top: 8px; font-family: var(--t72-font-body); font-style: italic; font-size: 15.5px; letter-spacing: 0; text-transform: none; color: var(--t72-type-on-paper-muted); }

.footer { background: var(--t72-ink); color: var(--t72-type-on-ink); padding: 56px var(--t72-gutter) 34px; }
.footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; }
.footer h3 { font-family: var(--t72-font-label); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--t72-type-on-ink-strong); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--t72-rule-on-ink); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.45; }
.footer li a { display: inline-block; padding: 4px 0; }   /* 2.5.8 target size */
.footer a { color: var(--t72-type-on-ink); }
.footer a:hover, .footer a:focus-visible { color: var(--t72-type-on-ink-strong); }
.footer-brand img { height: 72px; width: auto; margin-bottom: 18px; }
.footer-brand p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--t72-type-on-ink); }
.footer .site-url { font-family: var(--t72-font-label); font-size: 13.5px; letter-spacing: .04em; color: var(--t72-type-on-ink); display: block; }
.footer-legal { max-width: 1180px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--t72-rule-on-ink); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14.5px; color: var(--t72-type-on-ink); }
.footer-legal nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal nav a { display: inline-block; padding: 5px 0; }   /* 2.5.8 target size */

/* --------------------------------------------------------------------------
   PHONE. The selector is the reason the hub exists, so it is the thing that
   has to survive 375px: cards go one-up, full width, still one tap each.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .creed ul { flex-direction: column; gap: 16px; }
  .creed li { text-align: left; padding: 0 0 0 14px; border-left: 2px solid var(--t72-gold); }
  .creed li + li { border-left: 2px solid var(--t72-gold); }
  .chapter { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 720px) {
  .utility, .nav, .hero, .selector, .band, .page-head, .creed,
  .final-cta, .closing-seal, .footer {
    padding-left: var(--t72-gutter-mobile);
    padding-right: var(--t72-gutter-mobile);
  }
  .utility { font-size: 11.5px; letter-spacing: .12em; justify-content: center; text-align: center; gap: 6px 16px; }
  .nav { flex-direction: column; gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .nav-brand img { height: 74px; max-width: 200px; }
  .nav-links { gap: 18px 22px; flex-wrap: wrap; justify-content: center; font-size: 12px; }

  /* On a phone the selector cannot sit side by side, so the only way to keep
     it off the bottom of the screen is to make everything above it shorter.
     Every value below buys vertical space for the one section that matters. */
  .hero { padding-top: 22px; padding-bottom: 4px; }
  .hero::before { width: 260px; height: 260px; opacity: .05; }
  .hero h1 { font-size: 31px; margin-bottom: 10px; }
  .hero-lede { font-size: 16px; line-height: 1.5; }
  .selector { padding-top: 22px; padding-bottom: 46px; }
  .selector-head { margin-bottom: 18px; }
  .selector-head h2 { font-size: 23px; }
  .selector-head p { font-size: 15.5px; }
  .eyebrow { margin-bottom: 12px; }
  .city-list { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .city { min-height: 0; padding: 16px 18px; }
  .city-name { font-size: 22px; }
  .state-name { padding: 13px 18px; font-size: 21px; }

  .band { padding-top: 48px; padding-bottom: 48px; }
  .page-head { padding-top: 38px; padding-bottom: 32px; }
  .legal-hero, .legal-body { padding-left: var(--t72-gutter-mobile); padding-right: var(--t72-gutter-mobile); }
  .legal-body .container { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-legal { flex-direction: column; }
  .sitemap-links { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE HUB JOINS THE SYSTEM                                      (Phase 15)
   --------------------------------------------------------------------------
   The hub has its own stylesheet and Phase 14 did not touch it, so it was
   still carrying Phase 6's arrangement while the other three sites moved. It
   showed up the moment the ground was measured — every page in the site,
   averaged, at 1200px:

                        PAPER   tints   LINEN   GREEN   INK
     the hub            66.3%   11.2%      0%      0%   22.5%
     its homepage       43.2%   20.4%      0%      0%   36.4%
     live T. Byrd's     49.8%   11.7%   12.2%   10.6%   14.1%

   No green, no linen, and a homepage that was more than a third INK — the
   selector on cream, the creed on ink, one warm band, then an INK closing CTA
   sitting directly on top of an INK footer, which is 835px of unbroken dark at
   the foot of the page. That is precisely the slab D84 is about.

   FOUR CHANGES, each one taken off the reference rather than invented.

   1. THE SELECTOR IS THE BOOKING CARD.  The reference's .booking-card is
      SCENERY GREEN with its market panels as translucent INK recesses and a
      gold keyline; ours is a band of states, each holding its cities, doing
      exactly that job — pick your market and go. So the band goes green, each
      .state becomes the recess, and the .city cards stay PAPER, which is the
      reference's own three-layer nesting.

   2. .final-cta GOES GREEN, in tru72-surfaces.css section 2 with the others.
      The reference declares `background: var(--ink-soft)` for its final CTA,
      and --ink-soft is #696859. Oregon, Nevada and NC have had the green one
      since Phase 14 because they render .t72c-final-cta; the hub writes its
      own, and the hub was the only site still painting it INK.

   3. A LINEN STEP.  Hub pages had three light steps and no mid band at all, so
      a run of prose had nothing to break it. .band-linen is the same LINEN
      band the component sheet gives every other site, and on it every type
      colour is INK — on flat LINEN, INK is 5.89:1 and SCENERY GREEN 3.13:1,
      ANTIQUE GOLD 1.46:1 and PAPER 1.67:1 all fail.

   4. THE ITALIC DISPLAY LINE GETS ITS GOLD (D83).  .hero h1 em is 28.1px at
      its smallest (.78em of a clamp whose floor is 36px) on a ground that is
      PAPER and cannot be anything else — the two conditions GOLD-AGED needs.
      audit_phase5.py check 14b re-derives both for this rule specifically,
      the same way it does for the component sheet's two.

   The measure also moves from 1120px to 1328px, which is the reference's own
   content width (a 1440px sheet with 56px gutters) and what every other Tru72
   band already measures.
   ========================================================================== */

/* -- the measure ---------------------------------------------------------- */
.band-inner { max-width: 1328px; }

/* -- 1. the selector is the booking card ----------------------------------
   THE CARD, NOT THE BAND. The reference's booking card is a 560px green card
   floating on the cream hero, not a green band edge to edge — and painting the
   whole band green took the hub homepage to 34.6% green against 19.6% cream,
   which is the same mistake as the old ink slab in a warmer colour. So the
   band stays PAPER and .selector-inner becomes the card: green, gold-keylined,
   centred, with the states as recesses inside it and the city cards cream on
   top of those. Three layers, which is the reference's own nesting.
   -------------------------------------------------------------------------- */
.selector { background: var(--t72-paper); }
.selector-inner {
  max-width: 1180px;
  background: var(--t72-green);
  border: 1px solid var(--t72-rule-gold);
  padding: 40px 44px 44px;
  --t72-label: var(--t72-paper);
}
.selector-head h2,
.selector-head p,
.selector-foot { color: var(--t72-type-on-green); }
.selector .eyebrow { color: var(--t72-type-on-green); }
/* Gold is 2.15:1 on green, as type OR as a rule, so the eyebrow's two
   hairlines take PAPER at 42% — the same pigment as the type beside them. */
.selector .eyebrow::before,
.selector .eyebrow::after { background: var(--t72-rule-on-green); }

/* Each state is a recess in the green, not a second block on top of it. INK at
   34% over SCENERY GREEN resolves to about #5A5A50, on which PAPER measures
   6.46:1 — better than PAPER on flat green. */
.state {
  background: var(--t72-panel-on-dark);
  border-color: var(--t72-rule-gold-soft);
}
/* The state's own name bar stays INK with its gold underline: 9.83:1, and it
   reads as the deepest layer of the three. */

/* A city card stays PAPER, so INK on it is 12.1:1 and it lifts off the recess
   the way the reference's market panels lift off the booking card. Its hover
   was INK, which on the recess is a 1.88:1 boundary — invisible rather than
   emphatic — so it deepens into cream instead and keeps its INK type. */
.city:hover, .city:focus-visible {
  background: var(--t72-paper-deep);
  border-color: var(--t72-gold);
  transform: translateY(-2px);
}
.city:hover .city-name, .city:focus-visible .city-name { color: var(--t72-type-on-paper); }
.city:hover .city-serving, .city:focus-visible .city-serving,
.city:hover .city-go, .city:focus-visible .city-go { color: var(--t72-type-on-paper-muted); }
.city:focus-visible {
  outline: 2px solid var(--t72-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--t72-paper);
}

/* -- 3. the linen step ---------------------------------------------------- */
.band-linen {
  background: var(--t72-linen);
  color: var(--t72-ink);
  --t72-label: var(--t72-ink);
}
.band-linen h1, .band-linen h2, .band-linen h3, .band-linen p,
.band-linen li, .band-linen a, .band-linen .lede, .band-linen .eyebrow,
.band-linen .chapter-mark { color: var(--t72-ink); }
/* A hairline on linen is INK at 32%; the gold one is 1.46:1 and would vanish. */
.band-linen .eyebrow::before, .band-linen .eyebrow::after,
.band-linen hr { background: var(--t72-rule-strong); }

/* -- 4. the hero: the reference's watermark, and the reference's gold ------
   480px at 7% is what the live site floats behind its hero, and it is what
   tru72-components.css draws on the other three sites. The hub was at 420px
   and 6% — close, but "close" across four sites is what this phase is for. */
.hero::before {
  width: 480px;
  height: 480px;
  right: 40px;
  /* 7% -> 16%, on Bethany's note that the owl should be darker and more
     visible. 16% is not a guess: it is what tru72-components.css already
     gives the mark on the location sites below 1080px, so the hub now shows
     it at the density the rest of the estate does rather than as a ghost.
     The mark is decorative and aria-hidden; what it must not do is eat the
     type over it, which is measured below the gold block. */
  opacity: .16;
}
/* THE ONE READER OF THE D83 ROLE OUTSIDE tru72-components.css.
   GOLD-AGED is 3.18:1 on PAPER, an AA pass for LARGE text only, so both of its
   conditions have to be true HERE and provable from this rule:
     GROUND   .hero declares `background: var(--t72-paper)` above and nothing
              in this sheet or any other repaints it.
     SIZE     .78em of clamp(36px, 4.1vw, 54px) is 28.1px at 375px and 42.1px
              at its largest, both over the 24px that licenses 3.18:1 at
              weight 400. The max() is the floor that keeps it true if the
              clamp is ever lowered.
   Audit check 14b re-derives both. Do not copy this rule to another band.

   The selector is `.hero .hero-inner h1 em`, not `.hero h1 em`, for a reason:
   tru72-surfaces.css section 6 styles every hand-written display italic at
   (0,1,2) and loads after this sheet, so the shorter selector ties and loses
   the cascade — measured, the line came out SCENERY GREEN. */
.hero .hero-inner h1 em {
  font-size: max(24px, .78em);
  color: var(--t72-display-italic-on-paper);
}

/* -- the legal pages' closing run ------------------------------------------
   MEASURED: legal-body, related-legal and closing-seal were three PAPER bands
   in a row on Privacy, Terms and Accessibility, with no seam between any of
   them — the same failure as a slab of ink, in cream. The related-links band
   takes the first tint, which is where Oregon already puts it, so the two
   sites' legal pages read the same. (Phase 15) */
.related-legal { background: var(--t72-paper-warm); }

/* ==========================================================================
   PHASE 27 — THE HUB GETS THE ESTATE'S DEVICES                  (homepage)
   --------------------------------------------------------------------------
   Everywhere else on this project the fault was too much boxing and the work
   was to REDUCE. Measured at 1280px the hub is the opposite fault:

                          hub      reference homepage
        hero              211px    832px
        boxes / page      5.6      11.0
        hairlines / page  13.6     25.6

   Half the reference's boxing, half its hairlines, and a hero a quarter of
   the height. So nothing here is taken away. What is added is the set of
   devices the other three sites got in Phases 21-27 and this sheet never
   did: the selector promoted INTO the hero, a statement strip that is one
   hairline and two lines of type, a numbered run with the numeral in mono in
   its own column, and a hairline under every run that used to just stop.

   NOTHING BELOW PAINTS A GROUND WITHOUT DECLARING ONE. The two new grounds
   are .route (PAPER-WARM, where INK is 8.59:1 and SCENERY GREEN 4.57:1) and
   nothing else — .standard-strip is PAPER, and .final-cta's green is
   tru72-surfaces.css's, which publishes its own --t72-label and its own
   hairline. NO NEW GOLD: ANTIQUE GOLD is 2.43:1 on PAPER and 2.15:1 on
   green, so the one licensed gold on this page is still
   `.hero .hero-inner h1 em` — GOLD-AGED, on PAPER, at 24px or larger, which
   is what audit check 14b re-derives and which is unchanged below.
   ========================================================================== */

/* -- 1. THE HERO ABSORBS THE SELECTOR ------------------------------------
   The reference's .hero is a centred column — text, card, lede — at 44/72
   padding on PAPER. This is that, with the state-then-city card where its
   booking card sits. .hero KEEPS `background: var(--t72-paper)`: check 14b
   re-derives the ground for the italic line from this very declaration. */
.hero {
  background: var(--t72-paper);
  padding: 44px var(--t72-gutter) 52px;
}
.hero-inner {
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* The mark floats BESIDE the display line, not behind the card. Its three
   measured values — 480px, .07, right 40px — are the reference's and do not
   move; only the vertical anchor does, because the hero is four times taller
   than it was and `top: 50%` now lands squarely on the chooser. */
.hero::before { top: 24px; transform: none; }

.hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-text .eyebrow { margin-bottom: 16px; }
.hero h1 { margin-bottom: 8px; }
/* The reference's .hero-promise: the brand's three words, Fraunces italic,
   small, directly under the display line. SCENERY GREEN on PAPER, 5.23:1. */
.hero-promise {
  margin: 0;
  font-family: var(--t72-font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--t72-type-on-paper-muted);
}

/* The card is narrower than the band it used to be. At 940px inside a 1080px
   column the two states still sit side by side (auto-fit minmax(330px)) and
   the air either side is what makes it read as a card rather than a slab. */
/* The card's own rows tighten by a few pixels each. Four cities, two state
   bars and a foot is a lot of vertical for one card, and the hero is the one
   section on this page that can afford none of it. */
/* 17px, not 15: the state bar is the deepest of the card's three layers and
   at 15 it stopped reading as a bar and started reading as a caption. */
.hero .state-name { padding: 17px 22px; }
.hero .city-list { padding: 14px; gap: 12px; }
.hero .city { padding: 15px 18px; gap: 8px; }
.hero .selector { padding: 0; background: none; width: 100%; }
.hero .selector-inner { max-width: 940px; margin: 0 auto; padding: 30px 34px 26px; }
.hero .selector-head { margin-bottom: 18px; }
/* .hero is `text-align: center` and the card inherits it. The heads stay
   centred; the city cards do NOT — a chooser row reads down its left edge,
   which is what the reference's .market-card does and what every card run on
   the estate does. */
.hero .selector .state-list { text-align: left; }

/* The reference's .booking-card-foot: a hairline, then one italic line inside
   the card. PAPER at 42% is the only legal rule on SCENERY GREEN. */
.selector-foot {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--t72-rule-on-green);
  max-width: none;
  font-style: italic;
  font-size: 14.5px;
}

/* The lede sits under its own hairline, the way every closing run on the
   estate does. First paragraph INK, second SCENERY GREEN italic — the
   reference's own .hero-lede p:last-child. */
.hero-lede {
  max-width: 64ch;
  padding-top: 24px;
  border-top: 1px solid var(--t72-rule);
  font-size: 17px;
  line-height: 1.55;
}
.hero-lede p { margin: 0 0 10px; }
.hero-lede p:last-child { margin-bottom: 0; font-style: italic; color: var(--t72-type-on-paper-muted); }

/* -- 2. INSIDE THE CARD: A HAIRLINE, NOT A HARDER EDGE --------------------
   `.city-go` already takes `margin-top: auto`, which is the estate's
   bottom-justified "what it means" line. It never had the rule that makes
   the justification visible, so a two-line card and a one-line card looked
   ragged rather than aligned. One hairline each, and the run lines up. */
.city-go {
  padding-top: 10px;
  border-top: 1px solid var(--t72-rule);
}
.city:hover .city-go, .city:focus-visible .city-go { border-top-color: var(--t72-rule-strong); }

/* -- 3. THE STATEMENT STRIP ------------------------------------------------
   The reference's .semantic-band, measured: one hairline top and bottom, a
   17px uppercase display line with an italic second phrase, and a mono meta
   line opposite. It encloses nothing, so it costs the page no box and buys
   it a section. The accent is a <span>, not an <em>: <em> is claimed by
   tru72-surfaces.css section 6 for the BLOCK display line, and this one is
   an inline continuation of the same sentence. SCENERY GREEN on PAPER. */
.standard-strip {
  background: var(--t72-paper);
  padding: 26px var(--t72-gutter) 28px;
  border-top: 1px solid var(--t72-rule);
  border-bottom: 1px solid var(--t72-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.standard-strip h2 {
  margin: 0;
  font-weight: var(--t72-display-weight);
  font-size: 17px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
  max-width: 44ch;
}
.standard-strip h2 .accent {
  font-family: var(--t72-font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t72-type-on-paper-muted);
}
.strip-meta {
  margin: 0;
  font-family: var(--t72-font-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t72-type-on-paper-muted);
}

/* -- 4. THE NUMBERED RUN ---------------------------------------------------
   The reference's .promise-row: `grid-template-columns: auto 1fr`, the
   numeral in Geist Mono in its own column, a hairline between rows and no
   box anywhere. Its numerals are ANTIQUE GOLD on a dark ground, which is
   4.04:1 and an AA failure at 11px — so on PAPER-WARM they take SCENERY
   GREEN (4.57:1), which is the same pigment as the eyebrow beside them and
   passes at every size. The device survives the colour; the failure does not.
   GROUND: PAPER-WARM, declared by .band-warm above. INK on it is 8.59:1. */
.route { padding-top: 62px; padding-bottom: 66px; }
.route-head { max-width: 62ch; margin: 0 0 30px; }
.route-head h2 {
  margin: 0;
  font-weight: var(--t72-display-weight);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
}
.route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--t72-rule-strong);
}
.route-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--t72-rule);
}
.route-row .num {
  font-family: var(--t72-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t72-type-on-paper-muted);
  white-space: nowrap;
}
.route-text { min-width: 0; }
.route-text h3 {
  margin: 0 0 6px;
  font-family: var(--t72-font-display);
  font-weight: var(--t72-display-weight);
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--t72-type-on-paper);
}
.route-text p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--t72-type-on-paper);
  max-width: 68ch;
}

/* -- 5. THE LINEN BAND GETS A HEAD ----------------------------------------
   It carried an eyebrow and an italic lede and no heading at all, so the one
   section on the page that says what Tru72 IS read as a caption. The lede
   becomes the heading and its second sentence becomes the block italic line
   that every other section head on the estate carries. The colour is NOT
   gold: tru72-surfaces.css section 6 paints the <em> with --t72-label, which
   .band-linen sets to INK — 5.89:1 on LINEN, where gold is 1.46:1. */
.band-head {
  margin: 0 0 30px;
  font-weight: var(--t72-display-weight);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
}
.band-linen .band-head { color: var(--t72-ink); }
.band-linen .prose .chapter:first-of-type { border-top: 1px solid var(--t72-rule-strong); }

/* -- 6. THE CLOSING CTA GETS ITS HEAD -------------------------------------
   Eyebrow, then the display line with its italic second sentence. The band
   is tru72-surfaces.css's SCENERY GREEN, which publishes --t72-label: PAPER
   and forces PAPER on every descendant, so both lines are 5.23:1. The
   eyebrow's two hairlines have to be overridden here because that sheet's
   green-hairline rule names .t72-band-green, .mid-cta, .cc-mention and
   .trust-strip — not .final-cta — and gold on green is 2.15:1. */
.final-cta .eyebrow { margin-bottom: 18px; }
.final-cta .eyebrow::before,
.final-cta .eyebrow::after { background: var(--t72-rule-on-green); }
.final-cta h2 { margin-bottom: 16px; }

/* -- 7. PHONE -------------------------------------------------------------
   Same principle as the 720px block above: everything over the chooser gets
   shorter so the chooser is reachable. The h1 floor stays 31px, because
   check 14b derives the italic line's smallest rendered size from it and
   .78 x 31 = 24.2px is what licenses GOLD-AGED. Do not lower it. */
@media (max-width: 720px) {
  .standard-strip, .route { padding-left: var(--t72-gutter-mobile); padding-right: var(--t72-gutter-mobile); }
  .hero { padding-top: 26px; padding-bottom: 40px; }
  .hero-inner { gap: 22px; }
  .hero::before { top: 10px; }
  .hero-promise { font-size: 16px; }
  .hero .selector-inner { padding: 22px 18px 20px; }
  .hero-lede { padding-top: 18px; font-size: 16px; }
  .selector-foot { font-size: 14px; margin-top: 18px; padding-top: 12px; }

  .standard-strip { padding-top: 22px; padding-bottom: 24px; gap: 12px; }
  .standard-strip h2 { font-size: 16px; }
  .strip-meta { font-size: 10.5px; letter-spacing: .16em; }

  .route { padding-top: 40px; padding-bottom: 44px; }
  .route-head { margin-bottom: 22px; }
  .route-head h2, .band-head { font-size: 23px; }
  .route-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .route-row .num { margin-bottom: 2px; }
  .route-text h3 { font-size: 18px; }
  .route-text p { font-size: 16px; }
  .band-head { margin-bottom: 22px; }
}

/* ==========================================================================
   PHASE 27 — THE HUB'S FOUR HAND-WRITTEN PAGES
   /about/ · /careers/ · /sitemap/ · /404.html
   --------------------------------------------------------------------------
   MEASURED at 1280px, the hub against TByrds_Launch (the live reference):

                            hub    reference
       boxes / page          5.6        11.0
       hairlines / page     13.6        25.6
       emphasis in 900px    19.6        22.4

   This INVERTS the note every other Tru72 phase has carried. Everywhere else
   the fault was too much boxing and the fix was to take chrome away. The hub
   is THIN — half the reference's boxing, half its hairlines — so this block
   ADDS structure, and it adds it out of the reference's own vocabulary rather
   than out of new cards:

       a Geist Mono micro-label instead of a second paragraph size;
       a hairline row instead of a bordered box;
       a numeral in its own mono column, tabular, beside the row it indexes;
       a display phrase whose second sentence is the Fraunces italic;
       one emphasis per run, not one per cell.

   Every selector below is either .hub-*, or one of the five classes that only
   these four pages render (.page-head, .chapter, .chapter-mark, .sitemap-group,
   .sitemap-links). Nothing here touches .hero, .selector-inner, .creed or any
   other rule the homepage owns.

   WHERE THE GOLD IS, AND WHY IT IS NOT EVERYWHERE.
   GOLD-AGED is caged by D83: the ONLY rule on this sheet that may read
   --t72-display-italic-on-paper is `.hero .hero-inner h1 em`, and audit check
   14b re-derives that list exactly. So the italic second sentence on a PAPER
   or LINEN band here takes --t72-label through tru72-surfaces.css section 6
   (SCENERY GREEN 5.22:1 on cream, INK 5.89:1 on linen — legal at any size),
   and the one ground on which this block writes real gold TYPE is INK, where
   ANTIQUE GOLD is 4.04:1 and legal from 24px up. The rule that does it carries
   max(24px, …), so the floor is structural rather than a coincidence of the
   clamp above it.
   ========================================================================== */

/* -- a narrower measure for a run of prose-weight rows --------------------- */
.band-inner.narrow { max-width: 980px; }

/* -- the page head: a hierarchy, not one centred line ----------------------
   Only these four pages render .page-head — the three legal pages have their
   own .legal-hero — so its shape is theirs. It goes left, takes the mono
   micro-label above the h1 and a real deck below it, and closes on the strong
   hairline the reference puts under every section head. */
.page-head { text-align: left; padding-top: 60px; padding-bottom: 40px; border-bottom: 1px solid var(--t72-rule-strong); }
/* The same 980px measure as .band-inner.narrow below, so the h1, the deck
   and every hairline run under it share one left edge. */
.page-head-inner { max-width: 980px; margin: 0 auto; }
.page-head .eyebrow { margin: 0 0 20px; }
.page-head h1 { margin: 0 0 18px; max-width: 24ch; }
.page-head p { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.62; font-style: normal; color: var(--t72-type-on-paper); }

/* The mono fact row under the deck: tabular numerals in the label face, which
   is the reference's one use of Geist Mono at a size you can read. */
.page-head-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--t72-rule);
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 500;
  letter-spacing: var(--t72-track-mono-tight); text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--t72-type-on-paper-muted);
}
.page-head-meta b { font-weight: 600; color: var(--t72-type-on-paper); }

/* -- the section head that opens a hairline run ---------------------------- */
.hub-head { max-width: 64ch; margin: 0; }
.hub-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.hub-head h2 {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(24px, 2.7vw, 34px); line-height: 1.12;
  letter-spacing: var(--t72-track-display); text-transform: uppercase;
  color: var(--t72-type-on-paper); margin: 0 0 14px; padding: 0; border: 0;
}
.hub-head p { margin: 0; font-size: 17.5px; line-height: 1.68; color: var(--t72-type-on-paper); }
.hub-rule { border: 0; height: 1px; width: 84px; margin: 0 0 24px; background: var(--t72-gold); }
.hub-head.centred .hub-rule { margin-left: auto; margin-right: auto; }

/* -- the hairline ledger: a numeral in mono, in its own column ------------- */
.hub-ledger { list-style: none; margin: 30px 0 0; padding: 0; }
.hub-ledger > li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 30px;
  align-items: start; padding: 28px 0; border-top: 1px solid var(--t72-rule-strong);
}
.hub-ledger > li:last-child { border-bottom: 1px solid var(--t72-rule-strong); }
.hub-n {
  font-family: var(--t72-font-label); font-weight: 500; font-size: 21px;
  line-height: 1.15; letter-spacing: var(--t72-track-mono-tight);
  font-variant-numeric: tabular-nums; color: var(--t72-type-on-paper-muted);
  padding-top: 3px; white-space: nowrap;
}
.hub-n span {
  display: block; margin-top: 9px; font-size: 11px; font-weight: 600;
  letter-spacing: var(--t72-track-mono); text-transform: uppercase; white-space: normal;
}
.hub-phrase {
  font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(20px, 2.05vw, 25px); line-height: 1.16;
  letter-spacing: var(--t72-track-display); text-transform: uppercase;
  color: var(--t72-type-on-paper); margin: 0 0 12px;
}
/* .hub-phrase is a <p>, so tru72-surfaces.css section 6 (which matches only
   h1/h2 > em) does not reach it. Same colour role, written out here. */
.hub-phrase em {
  font-family: var(--t72-font-body); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -.005em;
  color: var(--t72-label, var(--t72-green));
}
.hub-body { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--t72-type-on-paper); }
.hub-body:last-child { margin-bottom: 0; }
.hub-body a { color: var(--t72-type-on-paper); border-bottom: 1px solid var(--t72-gold); }
.hub-body a:hover, .hub-body a:focus-visible { color: var(--t72-type-on-paper-muted); }

/* -- the mono label column: a definition run, hairline-separated ----------- */
.hub-defs { margin: 30px 0 0; padding: 0; }
.hub-defs > div {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 30px;
  padding: 20px 0; border-top: 1px solid var(--t72-rule-strong);
}
.hub-defs > div:last-child { border-bottom: 1px solid var(--t72-rule-strong); }
.hub-defs dt {
  font-family: var(--t72-font-label); font-size: 12.5px; font-weight: 600;
  line-height: 1.55; letter-spacing: var(--t72-track-mono-tight);
  text-transform: uppercase; color: var(--t72-type-on-paper-muted);
}
.hub-defs dt a { color: inherit; border-bottom: 1px solid var(--t72-gold); display: inline-block; padding-bottom: 1px; }
.hub-defs dt a:hover, .hub-defs dt a:focus-visible { color: var(--t72-type-on-paper); }
.hub-defs dd { margin: 0; font-size: 16px; line-height: 1.66; color: var(--t72-type-on-paper); }

/* -- every one of the above, on the LINEN step ----------------------------
   .band-linen already takes h1/h2/h3/p/li/a/.lede/.eyebrow to INK; these
   classes are not in that list and would otherwise inherit SCENERY GREEN,
   which on LINEN is 3.13:1 and fails at label size. On LINEN the type is INK,
   all of it — the same rule Phase 15 wrote for the band in the first place. */
.band-linen .hub-head h2, .band-linen .hub-head p,
.band-linen .hub-n, .band-linen .hub-n span,
.band-linen .hub-phrase, .band-linen .hub-body,
.band-linen .hub-defs dt, .band-linen .hub-defs dd { color: var(--t72-ink); }
.band-linen .hub-ledger > li, .band-linen .hub-defs > div { border-color: var(--t72-rule-strong); }
.band-linen .hub-rule { background: var(--t72-rule-strong); }

/* -- the ink pull-quote: the one place this block writes gold TYPE ---------
   ANTIQUE GOLD on INK is 4.04:1 — an AA pass for LARGE text only. The italic
   line is Fraunces at weight 400, so the threshold is the full 24px and the
   floor below is max(24px, .76em), not a clamp that happens to clear it. The
   role is --t72-display-on-ink, declared in tru72-tokens.css for exactly this
   job. It is NOT GOLD-AGED and it does not go near the D83 cage.

   The band paints a ground, so it publishes the whole contract: body colour,
   the label role for any italic inside it, and hairlines that are INK-safe. */
.hub-quote {
  background: var(--t72-ink); color: var(--t72-type-on-ink-strong);
  padding: 66px var(--t72-gutter);
  border-top: 1px solid var(--t72-rule-gold); border-bottom: 1px solid var(--t72-rule-gold);
  --t72-label: var(--t72-linen);
  --t72-rule: var(--t72-rule-on-ink);
  --t72-rule-strong: var(--t72-rule-on-ink);
}
.hub-quote-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.hub-quote .eyebrow { justify-content: center; color: var(--t72-type-on-ink); }
.hub-quote .eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--t72-gold); }
.hub-quote blockquote {
  margin: 0; font-family: var(--t72-font-display); font-weight: var(--t72-display-weight);
  font-size: clamp(25px, 3vw, 38px); line-height: 1.14;
  letter-spacing: var(--t72-track-display); text-transform: uppercase;
  color: var(--t72-type-on-ink-strong);
}
.hub-quote blockquote em {
  display: block; margin-top: .14em;
  font-family: var(--t72-font-body); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -.005em;
  font-size: max(24px, .76em); line-height: 1.16;
  color: var(--t72-display-on-ink);
}
.hub-quote cite {
  display: block; margin: 24px 0 0; font-style: normal;
  font-family: var(--t72-font-label); font-size: 12px; font-weight: 500;
  letter-spacing: var(--t72-track-mono); text-transform: uppercase;
  color: var(--t72-type-on-ink);
}

/* -- /about/ : the chapter marks become numerals in mono -------------------
   The mark column was the display face at up to 30px, which put a second
   uppercase voice beside every heading and read as a competing title. It is
   now what the reference does with a numeral: the label face, tabular, quiet,
   with a mono micro-label under it carrying the year.

   SCOPED TO body.t72-fam-about ON PURPOSE. .chapter is no longer the About
   page's alone — the homepage's LINEN band renders three of them too, with a
   one-word mark and no <span> under it. That run is the homepage's to shape,
   so none of this reaches it. */
body.t72-fam-about .chapter { grid-template-columns: 116px minmax(0, 1fr); gap: 0 34px; padding: 32px 0; border-top: 1px solid var(--t72-rule-strong); }
body.t72-fam-about .chapter:last-of-type { border-bottom: 1px solid var(--t72-rule-strong); }
body.t72-fam-about .chapter-mark {
  font-family: var(--t72-font-label); font-weight: 500; font-size: 21px;
  line-height: 1.15; letter-spacing: var(--t72-track-mono-tight);
  font-variant-numeric: tabular-nums; text-transform: none;
  color: var(--t72-type-on-paper-muted); padding-top: 4px;
}
body.t72-fam-about .chapter-mark span {
  display: block; margin-top: 9px; font-size: 11px; font-weight: 600;
  letter-spacing: var(--t72-track-mono); text-transform: uppercase;
}

/* -- /sitemap/ : where structure earns its keep ---------------------------
   build.py's location_sitemap_html already groups by STATE and then by CITY;
   what the page lacked was any way to SEE the grouping. A group was a run of
   cream boxes with a gold left keyline — eight boxes and one hairline. It is
   now one hairline per row, one strong hairline per group, a mono index
   numeral on every group heading (a CSS counter, so the generated groups and
   the hand-written one are numbered by the same rule), and the full URL in
   its own mono column on the right. That is the reference's own html-sitemap
   arrangement: no boxes, hairlines and a mono label doing the work. */
.sitemap-index { counter-reset: t72-smg; }
.sitemap-group { counter-increment: t72-smg; margin: 0 0 4px; padding-top: 38px; border-top: 1px solid var(--t72-rule-strong); }
.sitemap-group h2 {
  margin: 0 0 20px; padding: 0; border: 0;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1;
  text-transform: uppercase; color: var(--t72-type-on-paper);
}
.sitemap-group h2::before {
  content: counter(t72-smg, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--t72-font-label); font-size: 11px; font-weight: 600;
  letter-spacing: var(--t72-track-mono); font-variant-numeric: tabular-nums;
  color: var(--t72-type-on-paper-muted);
}
.sitemap-links { display: block; grid-template-columns: none; gap: 0; }
.sitemap-links li { border-top: 1px solid var(--t72-rule); }
.sitemap-links li:first-child { border-top: 0; }
.sitemap-links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 4px 30px; margin: 0 -14px; padding: 15px 14px;
  background: transparent; border-left: 0; border-bottom: 0;
  font-size: 17px; line-height: 1.35; color: var(--t72-type-on-paper);
  transition: background .18s ease, box-shadow .18s ease;
}
/* Hover was INK-on-cream reversed, which turned a hairline index into eight
   dark slabs on the way down the page. A cream deepening plus a gold keyline
   says the same thing without repainting the row. */
.sitemap-links a:hover, .sitemap-links a:focus-visible {
  background: var(--t72-paper-warm); color: var(--t72-type-on-paper);
  box-shadow: inset 3px 0 0 var(--t72-gold);
}
.sitemap-links .url {
  margin: 0; text-align: right; font-family: var(--t72-font-label);
  font-size: 12.5px; letter-spacing: .02em; color: var(--t72-type-on-paper-muted);
}
.sitemap-links a:hover .url, .sitemap-links a:focus-visible .url { color: var(--t72-type-on-paper-muted); }

/* -- phone ---------------------------------------------------------------- */
@media (max-width: 880px) {
  .hub-defs > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 720px) {
  .hub-quote { padding: 46px var(--t72-gutter-mobile); }
  .page-head { padding-top: 38px; padding-bottom: 28px; }
  .page-head h1 { max-width: none; margin-bottom: 14px; }
  .page-head p { font-size: 16.5px; }
  .page-head-meta { gap: 8px 20px; margin-top: 20px; }
  .hub-head h2 { font-size: 23px; }
  .hub-head p { font-size: 16.5px; }
  .hub-ledger { margin-top: 22px; }
  .hub-ledger > li { grid-template-columns: 1fr; gap: 0; padding: 22px 0; }
  .hub-n { display: flex; align-items: baseline; gap: 14px; font-size: 17px; padding-top: 0; margin-bottom: 12px; }
  .hub-n span { margin-top: 0; }
  .hub-defs { margin-top: 22px; }
  body.t72-fam-about .chapter { grid-template-columns: 1fr; gap: 0; padding: 24px 0; }
  body.t72-fam-about .chapter-mark { display: flex; align-items: baseline; gap: 14px; font-size: 17px; padding-top: 0; margin-bottom: 12px; }
  body.t72-fam-about .chapter-mark span { margin-top: 0; }
  .sitemap-group { padding-top: 28px; }
  .sitemap-links a { grid-template-columns: 1fr; gap: 4px; }
  .sitemap-links .url { text-align: left; }
}

/* -- two joins between the devices above and the sheet they sit in --------
   (same Phase 27 block, split out only because they are cross-references)

   1. .hub-head sets the left edge of a run. A .prose inside the same narrow
      measure was re-centring on its own 90ch, which put the chapter column
      107px to the right of the heading that introduced it at 1280px.
   2. A link inside the ink quote's cite line: LINEN at 5.89:1, with the gold
      hairline under it doing the affordance. Gold is never the type here. */
.band-inner.narrow > .prose,
.band-inner.narrow > .prose.wide { max-width: none; margin-left: 0; margin-right: 0; }
.band-inner.narrow > .hub-head { margin-bottom: 30px; }
.hub-quote cite a { color: inherit; border-bottom: 1px solid var(--t72-gold); }
.hub-quote cite a:hover, .hub-quote cite a:focus-visible { color: var(--t72-type-on-ink-strong); }


/* ==========================================================================
   THE ITALIC ACCENT IS ANTIQUE GOLD                    Bethany, 2026-09-26
   "let's make the italicised Fraunces text in the antique gold -- this is the
   first experience, I want it to feel equally as elegant as the sites."

   Twenty-one display italics run across the hub. One was GOLD-AGED, two were
   ANTIQUE GOLD on ink, and EIGHTEEN were rendering green or plain ink, because
   nothing here had the accent rule the other three sites now carry. They are
   all ANTIQUE GOLD now, the same colour and the same treatment North Carolina
   ships, so the front door and the location sites read as one family.

   WHAT IT COSTS, STATED PLAINLY. Antique gold measures 4.04:1 on INK -- a
   clean AA pass for large text -- and 2.43:1 on PAPER, 2.2:1 on the warm
   tint, 1.46:1 on LINEN. Only the ink ones are legal. This build was the one
   clean build on the estate at zero failing nodes, and this is a deliberate
   trade of that for the brand's own look, chosen knowingly. The reference
   site makes the same trade on a far larger scale: 1,879 failing nodes to our
   handful.

   Scoped to DISPLAY italics -- inside a heading, a blockquote or .hub-phrase,
   all of which render at 21px and up. Body-copy italics keep their inherited
   colour, because gold at paragraph size is unreadable rather than elegant.
   ========================================================================== */
/* TWO THINGS OUTRANK A PLAIN `h1 em` HERE, and both had to be measured to be
   found. tru72-surfaces.css loads AFTER this sheet and publishes
   `:is(h1,h2):not([class*="t72c-h"]) > em` at (0,1,1), which beats `h1 em` at
   (0,0,2) -- that alone left 13 of 21 accents green or ink. And the legacy
   band blankets, `.t72-band-linen :is(...)` and `.t72-band-green *`, set
   colour with `!important`, which no specificity can beat.

   So: a `body` prefix to clear the surfaces rule, and `!important` to clear
   the blankets. `!important` is a real cost and it is spent here on purpose --
   those blankets exist for hand-written markup that publishes no surface
   contract, and this sheet IS that markup's owner. */
/* ORDER IS THE WHOLE FIX HERE, not specificity. Both rules below compute to
   (0,2,2): `:is()` takes the weight of its heaviest argument, so the reset's
   `body :is(p,…,.hub-meta):not(.hub-phrase) em` is class+class+element, and so
   is `body .hub-phrase.hub-phrase em`. A tie goes to whichever comes second.
   The reset was second, so it won, and six accents stayed ink through two
   attempts at "more specificity". The reset goes first now and the accent
   last.

   The `:not(.hub-phrase)` in the reset is also weaker than it looks: the
   selector ends in a DESCENDANT `em`, so the exclusion only has to fail on
   ONE ancestor in the chain. A .hub-phrase nested inside any other <p> or
   <li> still matched. Keeping the accent last makes that harmless. */
body :is(p, li, dd, figcaption, small, .hub-meta) em {
  color: inherit !important;
}

body :is(h1, h2, h3):not([class*="t72c-h"]) > em,
body .hero h1 em,
body blockquote em,
body .hub-phrase.hub-phrase em,
body .band-head.band-head em {
  color: var(--t72-gold) !important;
  font-style: italic;
}

/* The doubled class clears `.t72-band-linen :is(…em…)` in tru72-surfaces.css,
   which is (0,2,0) AND `!important` -- no un-doubled selector here beats it. */

/* -- the handshake band -------------------------------------------------
   Bethany: "A handshake in 1972. The same one today. should be centered."
   Its eyebrow already carries `.centered`; the head did not, so it ran the
   full 1,149px measure hard left under a centred label. The head and the
   eyebrow now share one axis. The prose beneath stays left: centred body copy
   is harder to read, and this band holds three chapters of it. */
.band-linen .band-head {
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
}