/* HelloSuey, "Hello, neighbors" (round 2, concept 03, owner pick 2026-10-24).
   Porch-light field, letters roll and settle. The design system is carried over from
   mockups/site-design-r2/03-hello-neighbors (DESIGN.md there explains every role).
   Type (owner, 2026-10-24): Montserrat for headings, the greeting, the big figures and the
   wordmark; Source Sans 3 for text, labels, buttons, nav and tables. Both self-hosted,
   latin only, OFL (licenses beside the files). New page types live in pages.css. */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette by role */
  --porch: #ffd23f;
  --ink: #1b1609;
  --muted-porch: #5e4b12;
  --mark-muted: #8a6f12;
  --muted-night: #c9b57a;
  --lit: #fff4cc;
  --ramp-1: #bc8b00;
  --ramp-2: #806522;
  --ramp-3: #574312;
  --ramp-4: #352808;
  --ramp-5: #130f06;
  --emphasis-off: #6b5716;
  --bar-off: var(--emphasis-off); /* 4.85:1 on porch */

  /* Section-scoped roles (porch by default, flipped by .night) */
  --ground: var(--porch);
  --fg: var(--ink);
  --fg-muted: var(--muted-porch);
  --line: rgb(27 22 9 / 0.22);
  --press: var(--ink);
  --press-fg: var(--porch);
  --dot-on: var(--ink);
  --dot-off: var(--ramp-1);

  --f: 'Source Sans 3', system-ui, sans-serif;
  --f-head: 'Montserrat', 'Source Sans 3', system-ui, sans-serif;

  /* Fluid scale. Montserrat is a wide face, so the display sizes sit a step below the
     mockup's and the place line fits by size alone (no width axis). */
  --t-mega: clamp(3.5rem, min(0.5rem + 12.5vw, 22svh), 14rem);
  --t-xl: clamp(2.125rem, 1.15rem + 3.7vw, 5rem);
  --t-l: clamp(1.45rem, 1.05rem + 1.55vw, 2.5rem);
  --t-m: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-s: 0.9375rem;
  --t-xs: 0.875rem;

  /* Display weights and tracking (Montserrat): the greeting's "Hello," stays quiet against
     the loud place name; headings are heavy but a step under the place line. */
  --w-quiet: 500;
  --w-loud: 800;
  --w-head: 750;
  --w-sub: 700;
  --track-mega: -0.035em;
  --track-xl: -0.03em;
  --track-l: -0.02em;

  --u: clamp(0.5rem, 0.35rem + 0.6vw, 1rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
  --header-h: 4rem;
  --stage-h: 100svh;
  --hero-top: calc(var(--header-h) + clamp(1.25rem, 5svh, 4rem));
  --roll: cubic-bezier(0.2, 1.3, 0.4, 1);
  --soft: cubic-bezier(0.16, 1, 0.3, 1);

  --z-stage: 3;
  --z-header: 50;
  --z-curtain: 90;
}

.night {
  --ground: var(--ink);
  --fg: var(--porch);
  --fg-muted: var(--muted-night);
  --line: rgb(255 210 63 / 0.24);
  --press: var(--porch);
  --press-fg: var(--ink);
  --dot-on: var(--porch);
  --dot-off: var(--mark-muted);
  --bar-off: var(--mark-muted); /* 3.74:1 on night */
}

/* ---------- Foundation ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--porch);
  color: var(--ink);
  scrollbar-color: var(--ink) var(--porch);
}
body {
  min-height: 100dvh;
  font-family: var(--f);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  background: var(--ground);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; text-wrap: balance; }
/* A hyphenated word in rolled text never breaks at its hyphen (engine.js, keepHyphenatedWhole). */
.keep-whole { white-space: nowrap; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
::selection { background: var(--ink); color: var(--porch); }
.night ::selection { background: var(--porch); color: var(--ink); }

:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
#main:focus { outline: none; }
.skip-link {
  position: fixed; left: var(--gutter); top: var(--gutter); z-index: 100;
  padding: 0.7em 1.1em; border-radius: 999px; background: var(--ink); color: var(--porch); font-weight: 700;
  translate: 0 -220%;

  &:focus-visible { translate: 0 0; outline-color: var(--ink); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

section, footer.site-footer { position: relative; background: var(--ground); color: var(--fg); }

/* Grid helper for compositions: 12 columns, 4 on phones */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--gutter);
}

/* Type roles */
.display { font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }
.h-xl { font-size: var(--t-xl); font-weight: 780; letter-spacing: -0.04em; line-height: 0.95; }
.h-l { font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.02; }
.lede { font-size: var(--t-m); line-height: 1.32; letter-spacing: -0.01em; font-weight: 430; max-width: 34ch; }
.small { font-size: var(--t-s); line-height: 1.45; }
.muted { color: var(--fg-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Letter roll labels (buttons, nav): built by js/engine.js ---------- */
/* The label box clips (the second row waits below it for the hover roll), so its line box
   must hold the font's full ink: 1.45 covers Source Sans 3's descenders on Windows and Mac.
   The negative margins keep buttons the height they were. */
.letters {
  position: relative; display: inline-flex; overflow: clip; vertical-align: top; line-height: 1.45; margin-block: -0.175em;
  /* Sideways room for letters whose ink overhangs their advance (the final "k" of a label). */
  padding-inline: 0.08em; margin-inline: -0.08em;

  & .ch { display: inline-block; transition: translate 0.55s var(--roll) calc(var(--i, 0) * 16ms); }
}
.letters-row {
  display: inline-flex; white-space: pre;

  & + .letters-row { position: absolute; left: 0; top: 0; }
  & + .letters-row .ch { translate: 0 112%; }
}
/* Per-letter stagger without style attributes: the engine tags each letter with ch-N. */
.ch-1 { --i: 1; } .ch-2 { --i: 2; } .ch-3 { --i: 3; } .ch-4 { --i: 4; } .ch-5 { --i: 5; } .ch-6 { --i: 6; }
.ch-7 { --i: 7; } .ch-8 { --i: 8; } .ch-9 { --i: 9; } .ch-10 { --i: 10; } .ch-11 { --i: 11; } .ch-12 { --i: 12; }
.ch-13 { --i: 13; } .ch-14 { --i: 14; } .ch-15 { --i: 15; } .ch-16 { --i: 16; } .ch-17 { --i: 17; } .ch-18 { --i: 18; }
.ch-19 { --i: 19; } .ch-20 { --i: 20; } .ch-21 { --i: 21; } .ch-22 { --i: 22; } .ch-23 { --i: 23; } .ch-24 { --i: 24; }
@media (hover: hover) {
  .rolls:hover .letters-row:first-child .ch { translate: 0 -112%; }
  .rolls:hover .letters-row + .letters-row .ch { translate: 0 0; }
}
.rolls:focus-visible {
  & .letters-row:first-child .ch { translate: 0 -112%; }
  & .letters-row + .letters-row .ch { translate: 0 0; }
}

/* ---------- Buttons (round: you press them) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 3rem; padding: 0.75em 1.35em; border-radius: 999px;
  background: var(--press); color: var(--press-fg);
  font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap;
  transition: scale 0.25s var(--soft);

  & .fa-solid { font-size: 0.85em; transition: translate 0.45s var(--roll); }
  &:focus-visible .fa-solid { translate: 0 -3px; }
  &:active { scale: 0.97; }
}
@media (hover: hover) { .btn:hover .fa-solid { translate: 0 -3px; } }
.btn-big { min-height: 3.75rem; font-size: 1.125rem; padding-inline: 1.7em; }
.text-link {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 3rem;
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;

  & .fa-solid { font-size: 0.85em; transition: translate 0.45s var(--roll); }
  &:focus-visible .fa-solid { translate: 4px 0; }
}
@media (hover: hover) { .text-link:hover .fa-solid { translate: 4px 0; } }

/* ---------- Header (four-corner frame, steps aside on scroll down) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--gutter);
  background: var(--porch); color: var(--ink);
  transition: translate 0.6s var(--soft), background-color 0.3s, color 0.3s;

  html.is-night &, body[data-header='night'] & { background: var(--ink); color: var(--porch); --press: var(--porch); --press-fg: var(--ink); }
  html.frame-away & { translate: 0 -105%; }
}
/* A page split down the middle: the logo sits on the ink half and the nav on the yellow half. */
@media (min-width: 992px) {
  body[data-header='split'] .site-header,
  html.is-night body[data-header='split'] .site-header {
    background: linear-gradient(to right, var(--ink) 50%, var(--porch) 50%);
    color: var(--ink); --press: var(--ink); --press-fg: var(--porch);
  }
  body[data-header='split'] .site-header .brand { --fg: var(--porch); }
}
@media (max-width: 991.98px) {
  body[data-header='split'] .site-header { background: var(--ink); color: var(--porch); --press: var(--porch); --press-fg: var(--ink); --fg: var(--porch); }
}
.site-nav {
  display: flex; align-items: center; gap: clamp(0.75rem, 0.3rem + 1.4vw, 2rem);

  & a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; font-size: 0.975rem; }
  & a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
  & .btn { min-height: 2.75rem; padding: 0.6em 1.15em; font-size: 0.95rem; }
  & a.show-phone { display: none; }
}

/* ---------- The greeting (hero + curtain share these rules) ---------- */
.greeting { display: block; font-size: var(--t-mega); letter-spacing: -0.045em; }
.greeting-hello { display: block; font-weight: 460; line-height: 1.04; padding-bottom: 0.06em; }
/* The rolling line clips (old text rolls out the top), so the box and the text's line box
   are sized to hold Montserrat's ink, descenders and commas included: 1.3em clears them with
   the Windows and the Mac metrics alike. */
.place-line {
  position: relative; display: block; height: 1.3em; margin-top: -0.32em;
  /* Sideways room for the first and last letters' overhang (the box clips on every side). */
  padding-inline: 0.06em; margin-inline: -0.06em;
  overflow: clip; font-weight: 800; line-height: 1.08;
}
.roll-text {
  /* left: auto keeps the static position, the box's content edge inside its side padding. */
  position: absolute; left: auto; bottom: 0;
  white-space: nowrap; line-height: 1.3;

  & .roll-char { display: inline-block; will-change: transform; }
}
/* Server-rendered long names start condensed; the roller refits them with script. */
.count-num {
  position: relative; display: block; height: 1.3em; overflow: clip; line-height: 1.3;
  padding-inline: 0.06em; margin-inline: -0.06em;
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; margin-top: -0.05em;

  & .roll-text { line-height: 1.3; }
}

/* Stage: the hero is a sticky stage; the greeting shrinks into the index header */
.greet { position: relative; }
.stage {
  position: sticky; top: 0; height: var(--stage-h); z-index: var(--z-stage); pointer-events: none;

  & a, & button { pointer-events: auto; }
  .reduced & { position: relative; }
}
.greeting-wrap { position: absolute; top: var(--hero-top); left: var(--gutter); right: var(--gutter); }
.greeting-scale { transform-origin: 0 0; }
.band {
  position: absolute; inset: 0 0 auto 0; height: 0; background: var(--ground);
  border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden;
}

.count {
  position: absolute; top: calc(var(--hero-top) + 0.6rem); right: var(--gutter);
  width: clamp(15rem, 22vw, 21rem);
  transform-origin: 0 0;
}
.count-label { font-weight: 650; font-size: 1rem; line-height: 1.2; }
.count-place { font-weight: 800; }
.count-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2rem; margin-top: 0.35rem;
  font-size: var(--t-s); color: var(--fg-muted);

  & strong { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
}
.count-window strong { font-size: 1.05rem; }
.pause {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 2rem; padding: 0.25em 0.8em;
  border-radius: 999px; background: rgb(27 22 9 / 0.1); color: var(--fg); font-weight: 650; font-size: var(--t-xs);

  &:focus-visible { background: var(--ink); color: var(--porch); }
  .reduced & { display: none; }
}
@media (hover: hover) { .pause:hover { background: var(--ink); color: var(--porch); } }
@media (scripting: none) { .pause { display: none; } }

/* The home hero's national figure, where the market's weekly count stood: the number, what it counts and its source,
   set to end above the greeting's place line, and under them the control that pauses the greeting. */
.stage { --figure-w: clamp(16rem, 25vw, 23rem); }
.hero-figure {
  position: absolute; top: calc(var(--hero-top) + 0.6rem); right: var(--gutter);
  width: var(--figure-w);
}
/* From tablet up the figure stands beside the greeting, and its label and source run taller than the old count, so a
   long place name is fitted to the room left of the figure (the roller reads the line's padding) instead of running
   under it. Short names keep their full size. */
@media (min-width: 768px) {
  .stage .greeting-place .place-line { padding-right: calc(var(--figure-w) + var(--gutter)); }
}
.hero-figure-num {
  font-family: var(--f-head); font-size: clamp(2.25rem, 1.2rem + 2.6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-figure-label { margin-top: 0.45rem; font-size: var(--t-s); font-weight: 650; line-height: 1.25; }
/* The pause control shares the source's short last line ("Read ..."), which keeps the control's height and leaves room
   on its right, so the block ends where its words end and no line runs under the control. */
.hero-figure-inner { display: grid; }
.hero-figure-body, .hero-figure-pause { grid-area: 1 / 1; }
.hero-figure-pause { align-self: end; justify-self: end; }
.hero-figure .national-source .national-read { display: flex; align-items: center; min-height: 2rem; padding-right: 6.5rem; }
[data-page="home"] .national-source {
  margin-top: 0.3rem; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.35;

  /* Each publisher's link keeps a 24px target. */
  & a { display: inline-block; padding-block: 0.2rem; color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  & .national-read { display: block; }
}

.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.5rem, 5svh, 3.5rem); }
.hero-foot-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.hero-sub { grid-column: 1 / span 5; font-size: clamp(1.1rem, 0.9rem + 0.55vw, 1.4rem); max-width: 38ch; }
/* The page's heading: the offer, under the greeting. */
.hero-headline { grid-column: 1 / span 6; margin-bottom: 0.5rem; font-size: clamp(1.35rem, 1rem + 1vw, 2.1rem); font-weight: var(--w-head); line-height: 1.08; max-width: 26ch; }
.hero-actions { grid-column: 1 / span 6; margin-top: 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) {
  .place-hero :is(.hero-sub, .hero-actions) { grid-column: 8 / -1; }
  .motion .index { margin-top: calc(var(--stage-h) * -0.33); }
}

/* ---------- Index of the week's places ---------- */
.index {
  position: relative; z-index: 2; margin-left: 41.6667%; padding: 0 var(--gutter) 0 calc(var(--gutter) * 0.5);

  .reduced & {
    margin-left: 0; padding: clamp(3rem, 8vw, 6rem) var(--gutter);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  }
}
.index-head {
  padding-top: 1rem; padding-bottom: 1.5rem; max-width: 40rem;

  & .h-l { margin-bottom: 0.6rem; }
  .reduced & { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); }
}
.index-tail {
  height: clamp(3rem, 8vw, 6rem);

  .reduced & { display: none; }
}
.reduced .place-index { grid-column: 6 / -1; }
/* Without script the index is an ordinary section under the hero. */
@media (scripting: none) {
  .stage { position: relative; }
  .index { margin-left: 0; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
}

/* Every covered place with a page, alphabetical within its state: a name per row, set large, each a link to its page.
   The row crossing the reading line, or under the pointer or focus, wears the ink band and takes the greeting. */
.place-group + .place-group { margin-top: clamp(2rem, 4vw, 3rem); }
.place-state {
  padding-bottom: 0.5rem; border-bottom: 2px solid var(--fg);
  font-size: var(--t-s); font-weight: 750; letter-spacing: 0;
}
.place-row {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: 3rem; padding-block: 0.4rem; border-bottom: 1px solid var(--line);
  transition: color 0.25s;

  &::before {
    content: ''; position: absolute; inset: -1px -0.75rem; z-index: -1; background: var(--ink);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.45s var(--soft);
  }
  &.is-lit { color: var(--porch); }
  &.is-lit::before { transform: scaleX(1); }
  &:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
}
.place-name {
  font-family: var(--f-head); font-size: var(--t-m); font-weight: 720; letter-spacing: -0.02em; line-height: 1.15;

  & a { display: inline-flex; align-items: center; min-height: 2rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & a .fa-solid { font-size: 0.6em; margin-left: 0.45em; }
}
.dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* With script, every width shows the first rows; "Show all" expands the list in place. A state whose rows all wait
   behind it waits with them. */
html.js .place-index:not(.is-expanded) {
  & .place-row.is-extra { display: none; }
  & .place-group:not(:has(.place-row:not(.is-extra))) { display: none; }
}
.show-all-wrap {
  margin-top: 1.5rem;

  &[hidden] { display: none; }
}
@media (scripting: none) { .show-all-wrap { display: none; } }

/* ---------- Sample row (a made-up buyer, real-shaped fields) ---------- */
.sample {
  padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--line);

  & .grid { align-items: start; row-gap: 2rem; }
}
.sample-head {
  grid-column: 1 / span 4;

  & .h-l { margin-bottom: 1rem; }
}
.sample-label { font-size: var(--t-body); font-weight: 520; max-width: 32ch; }
.sample-row {
  grid-column: 5 / -1; position: relative; background: var(--ink); color: var(--porch);
  padding: clamp(1.5rem, 3vw, 2.75rem);

  .night & { background: var(--porch); color: var(--ink); }
  .night & .sample-field dt { color: var(--muted-porch); }
  .night & .sample-tag { background: var(--ink); color: var(--porch); }
}
.sample-tag {
  position: absolute; top: clamp(1.5rem, 3vw, 2.75rem); right: clamp(1.5rem, 3vw, 2.75rem);
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.9em; border-radius: 999px;
  background: var(--porch); color: var(--ink); font-size: var(--t-xs); font-weight: 750;
}
/* Every column of the delivered file, in the file's order; the name leads in large type, set first by order alone, so
   a screen reader still reads the file's order. Each label carries the file's own column name under it. */
.sample-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--gutter); }
.sample-field {
  min-width: 0;

  & dt { display: grid; font-size: var(--t-xs); color: var(--muted-night); font-weight: 600; margin-bottom: 0.2rem; }
  & dd { margin: 0; font-size: var(--t-m); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
}
.sample-column { font-size: 0.75rem; font-weight: 500; }
.sample-buyer {
  order: -1; grid-column: 1 / -1; padding-right: 7rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgb(27 22 9 / 0.24);

  & dd { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
}
.sample-source { grid-column: auto; }

/* ---------- ZIP map (asymmetric pair) ---------- */
.map-section {
  padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 10vw, 9rem); border-top: 1px solid var(--line);

  & .grid { row-gap: 2rem; align-items: start; }
}
.map-figure {
  grid-column: 1 / span 6; position: relative;

  & svg { width: 100%; height: auto; max-height: calc(var(--stage-h) - 7rem); margin-inline: auto; }
}
.zip {
  stroke: var(--porch); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill 0.3s; cursor: pointer;

  &.bin-0 { fill: transparent; stroke: rgb(27 22 9 / 0.5); stroke-width: 1; }
  &.bin-1 { fill: var(--ramp-1); }
  &.bin-2 { fill: var(--ramp-2); }
  &.bin-3 { fill: var(--ramp-3); }
  &.bin-4 { fill: var(--ramp-4); }
  &.bin-5 { fill: var(--ramp-5); }
  /* The selected ZIP wears the selected-row treatment: ink fill, porch-yellow outline. */
  &.is-lit { fill: var(--ink); stroke: var(--porch); stroke-width: 7; stroke-linejoin: round; }
  /* The ZIP this page is about (place pages) stays lit. */
  &.is-here { fill: var(--ink); stroke: var(--porch); stroke-width: 5; stroke-linejoin: round; }
}
.zip-link:focus-visible { outline: none; }
.zip-link:focus-visible .zip { stroke: var(--ink); stroke-width: 6; }
.zip-callout-tip { fill: var(--ink); }
.zip-note { font-family: var(--f); font-size: 30px; font-weight: 650; fill: var(--muted-porch); pointer-events: none; }
.zip-callout { pointer-events: none; }
.zip-callout-bg { fill: var(--ink); }
.zip-callout-text { font-family: var(--f); font-weight: 800; font-size: 44px; fill: var(--porch); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zip-callout-count { font-weight: 560; }
.map-panel {
  grid-column: 7 / -1; display: grid; gap: 1.5rem; align-content: start;

  & .h-l { margin-bottom: 0.25rem; }
}
.zip-greeting {
  font-size: var(--t-xl); letter-spacing: -0.045em;

  & .greeting-hello { font-weight: 460; }
}
.zip-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.zip-figure {
  display: grid;

  & strong { font-size: var(--t-l); font-weight: 780; letter-spacing: -0.03em; line-height: 1.05; }
  & span { font-size: var(--t-s); color: var(--fg-muted); }
  &[hidden] { display: none; }
}
.legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: var(--t-xs); color: var(--fg-muted);

  & li { display: inline-flex; align-items: center; gap: 0.45rem; }
}
.swatch {
  width: 1rem; height: 0.75rem; border-radius: 2px;

  &.bin-0 { background: transparent; box-shadow: inset 0 0 0 1px rgb(27 22 9 / 0.55); }
  &.bin-1 { background: var(--ramp-1); }
  &.bin-2 { background: var(--ramp-2); }
  &.bin-3 { background: var(--ramp-3); }
  &.bin-4 { background: var(--ramp-4); }
  &.bin-5 { background: var(--ramp-5); }
}
.caption { font-size: var(--t-s); color: var(--fg-muted); max-width: 46ch; }

/* What's different, and coverage: a heading and a few paragraphs. */
.diff, .coverage { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.diff-title, .coverage-title { grid-column: 1 / span 8; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.diff-body, .coverage-body {
  grid-column: 1 / span 7; font-size: var(--t-m); line-height: 1.4; max-width: 60ch;
  & p + p { margin-top: 1rem; }
}
/* The home page's pointer to the Coverage page, under its lines. */
.coverage-body p.coverage-link { margin-top: 1.5rem; }
/* Trade guides (phase D2): prose sections with a table, numbered steps or questions. */
.guide-intro { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.guide-lede { grid-column: 1 / span 8; max-width: 52ch; }
.guide { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.guide-title { grid-column: 1 / span 8; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.guide-body {
  grid-column: 1 / span 8; font-size: var(--t-m); line-height: 1.45;
  & > p { max-width: 62ch; }
  & > p + p, & > * + p { margin-top: 1rem; }
  & > .guide-table-wrap, & > .guide-table, & > .guide-steps, & > .guide-faq { margin-block: clamp(1.5rem, 4vw, 2.5rem); }
}
.guide-table-wrap { overflow-x: auto; }
.guide-table {
  width: 100%; font-size: var(--t-s); line-height: 1.35;
  & th, & td { padding: 0.65rem 0.75rem 0.65rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  & thead th { font-size: var(--t-xs); font-weight: 650; color: var(--fg-muted); box-shadow: inset 0 -2px 0 var(--fg); }
  & tbody th { font-weight: 750; }
  & a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; display: inline-flex; min-height: 1.5rem; align-items: center; }
}
.cost-table {
  max-width: 40rem; font-size: var(--t-m);
  & td { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
}
.guide-steps {
  counter-reset: step; display: grid; gap: 1rem; max-width: 62ch;
  & li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; align-items: start; }
  & li::before { content: counter(step); font-weight: 800; font-variant-numeric: tabular-nums; }
}
.guide-faq {
  max-width: 62ch;
  & dt { font-weight: 750; margin-top: 1.5rem; }
  & dt:first-child { margin-top: 0; }
  & dd { margin-top: 0.4rem; }
  & dd p + p { margin-top: 0.75rem; }
}
.plans-founding { grid-column: 1 / span 8; margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 60ch; font-size: var(--t-m); line-height: 1.4; }

/* ---------- Trades (staggered gallery wall of text) ---------- */
.trades { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 5vw, 4.5rem); }
.trades-head { grid-column: 1 / span 8; margin-bottom: clamp(2rem, 5vw, 4rem); }
.trades-note {
  margin-top: 1rem; font-size: var(--t-m); line-height: 1.35; max-width: 44ch;

  &:empty { display: none; }
}
.trade {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: start; padding-block: clamp(1.75rem, 3.5vw, 3rem); border-top: 1px solid var(--line);

  &:last-of-type { border-bottom: 1px solid var(--line); }
}
.trade-name { grid-column: 1 / span 3; grid-row: 1 / span 2; font-size: var(--t-l); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.trade-name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.trade-figure {
  grid-column: 4 / span 3; grid-row: 1 / span 2; display: grid;

  & strong { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }
  & > span { margin-top: 0.5rem; font-size: var(--t-s); font-weight: 650; }
  & small { margin-top: 0.15rem; font-size: var(--t-xs); color: var(--fg-muted); }
}
.trade-visual { grid-column: 7 / -1; grid-row: 1; }
.trade-rest { grid-column: 7 / -1; grid-row: 2; margin-top: 1rem; font-size: var(--t-body); line-height: 1.45; max-width: 52ch; }
.trade-plain .trade-rest { grid-column: 4 / span 7; grid-row: 1; margin-top: 0; font-size: var(--t-m); line-height: 1.3; }
/* One row breaks the pattern: the pest chart runs wide on the left, words on the right. */
.trade-wide {
  & .trade-visual { grid-column: 1 / span 7; grid-row: 1 / span 3; }
  & .trade-name { grid-column: 9 / -1; grid-row: 1; }
  & .trade-figure { grid-column: 9 / -1; grid-row: 2; margin-top: 1rem; }
  & .trade-rest { grid-column: 9 / -1; grid-row: 3; }
  & .decade-strip { height: 12rem; gap: 4px; }
  & .strip-names { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 0.4rem; font-size: 0.6875rem; color: var(--fg-muted); text-align: center; }
  & .strip-ends span:first-child, & .strip-ends span:last-child { visibility: hidden; }
}
/* The home page's trade cards: the trade's name, its guide's figure from a national source with what it counts and
   its source, and what the trade gets from the list. One row on a wide screen; on a tablet the figure and the line
   share the right-hand column; on a phone they stack. */
[data-page="home"] .trade {
  & .trade-name { grid-row: 1; }
  & .trade-figure { grid-column: 4 / span 4; grid-row: 1; display: block; }
  & .trade-rest { grid-column: 8 / -1; grid-row: 1; margin-top: 0; font-size: var(--t-m); line-height: 1.35; max-width: 40ch; }

  @media (min-width: 768px) and (max-width: 991.98px) {
    & .trade-name { grid-column: 1 / span 4; grid-row: 1 / span 2; }
    & .trade-figure { grid-column: 5 / -1; grid-row: 1; }
    & .trade-rest { grid-column: 5 / -1; grid-row: 2; margin-top: 1.25rem; }
  }
  @media (max-width: 767.98px) {
    & :is(.trade-name, .trade-figure, .trade-rest) { grid-column: 1; grid-row: auto; margin-top: 0; }
  }
}
.trade-figure-num {
  font-family: var(--f-head); font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  font-variant-numeric: lining-nums tabular-nums;
}
.trade-figure-label { margin-top: 0.5rem; font-size: var(--t-s); font-weight: 650; line-height: 1.3; max-width: 36ch; }

/* Unit fields: one dot per new owner. Without script they wrap as rows; with script the
   engine sets --rows so the field fills column by column and the marked share reads as a block. */
.unit-field {
  display: grid; grid-template-columns: repeat(auto-fill, 7px); grid-auto-rows: 7px; gap: 2px;

  html.js &.is-columns { grid-template-columns: none; grid-template-rows: repeat(var(--rows, 12), 7px); grid-auto-flow: column; grid-auto-columns: 7px; }
  & .dot { width: 7px; height: 7px; background: var(--dot-off); }
  & .dot.is-on { background: var(--dot-on); }
}
/* A field's marked dots fill in column by column, left to right, when it scrolls into view (parts.js adds
   .is-filling and --lit-end, the right edge of the last marked column). One mask on the field sweeps across the marked
   block with a soft edge, and --fill doesn't inherit, so a frame repaints the field and restyles nothing inside it.
   A tween per dot stalled the page on script, and a CSS animation per dot on style (2026-11-09). */
@property --fill { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --lit-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fill-time { syntax: '<time>'; inherits: false; initial-value: 1.4s; }
@keyframes dot-fill {
  from { --fill: 0px; }
  to { --fill: calc(var(--lit-end) + 56px); }
}
:is(.unit-field, .permit-field).is-filling {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--fill) - 56px), transparent var(--fill), transparent var(--lit-end), #000 var(--lit-end));
  mask-image: linear-gradient(to right, #000 calc(var(--fill) - 56px), transparent var(--fill), transparent var(--lit-end), #000 var(--lit-end));
  animation: dot-fill var(--fill-time) cubic-bezier(0.3, 0.55, 0.35, 1) both;
}
.trade-key {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 0.75rem; font-size: var(--t-xs); color: var(--fg-muted);

  & li { display: inline-flex; align-items: center; gap: 0.4rem; }
  & strong { color: var(--fg); font-variant-numeric: tabular-nums; }
  & .dot { width: 8px; height: 8px; background: var(--dot-off); }
  & .dot.is-on { background: var(--dot-on); }
}
.decade-strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 6.5rem; border-bottom: 1px solid var(--ink); }
.night .decade-strip { border-bottom-color: var(--fg); }
.strip-item { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.strip-value { font-size: 0.6875rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; margin-bottom: 0.2rem; color: var(--fg); }
.strip-col {
  display: block; height: calc(var(--v, 0) * 80%); background: var(--dot-off); border-radius: 3px 3px 0 0; transform-origin: 50% 100%;

  &.is-on { background: var(--dot-on); }
}
.strip-names { display: none; }
.strip-mark { position: absolute; top: -0.4rem; bottom: -0.45rem; width: 2px; background: var(--fg); translate: -1.5px 0; left: calc(var(--v, 0) * 100%); }
.strip-ends { position: relative; display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: var(--t-xs); color: var(--fg-muted); }
.strip-split { position: absolute; top: 0; translate: -50% 0; color: var(--fg); font-weight: 750; left: calc(var(--v, 0) * 100%); }

/* ---------- Season (data facts) ---------- */
.season { padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--line); }
.season-title { grid-column: 1 / span 6; margin-bottom: 1.5rem; }
.big-number { display: block; font-size: var(--t-mega); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; }
.big-unit { display: block; font-size: var(--t-m); font-weight: 650; margin-top: 0.6rem; }
/* The home page's national month chart: the heading on the left, what is counted and its source on the right, level
   with the heading's foot, and the twelve months across the full width under them. */
.season-words { grid-column: 8 / -1; align-self: end; margin-bottom: 1.5rem; max-width: 46ch; }
.season-caption { font-size: var(--t-body); line-height: 1.45; }
.season-chart {
  grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem);

  /* No month is singled out, so every bar is in full ink, as on the trade guides, not the dimmed "not this one" tone
     (pages.css loads later, so the page scope outranks its .big-chart rule). */
  [data-page="home"] & .big-col-bar { background: var(--fg); }
}
.chart-label { font-size: var(--t-s); font-weight: 700; margin-bottom: 1rem; }
.columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; height: clamp(14rem, 30vw, 24rem); border-bottom: 1px solid var(--fg); }
.column {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: end; height: 100%; outline-offset: 2px;

  &.is-key .column-bar { background: var(--fg); }
  &:is(.is-key, .is-low) .column-value { font-weight: 800; }
  &:is(.is-labeled, .is-hot) .column-value { opacity: 1; }
  &.is-hot .column-bar { background: var(--fg); }
}
.column-bar { width: min(24px, 70%); height: calc(var(--v, 0) * 88%); border-radius: 4px 4px 0 0; background: var(--bar-off); transform-origin: 50% 100%; }
/* The end labels stay inside the chart: the first hangs right, the last hangs left. */
.columns:is(.is-dense, .is-money) .column:first-child .column-value { left: 0; }
.columns:is(.is-dense, .is-money) .column:last-child .column-value { right: 0; }
.columns:is(.is-dense, .is-money) + .column-axis span { justify-self: center; white-space: nowrap; }
.columns:is(.is-dense, .is-money) + .column-axis span:first-child { justify-self: start; }
.columns:is(.is-dense, .is-money) + .column-axis span:last-child { justify-self: end; }
.column-value { position: absolute; bottom: calc(var(--v, 0) * 88% + 0.4rem); font-size: var(--t-xs); font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.column-axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 0.5rem; font-size: var(--t-xs); color: var(--fg-muted); text-align: center;

  & .is-key { color: var(--fg); font-weight: 700; }
}
.data-table-toggle {
  margin-top: 1.25rem; font-size: var(--t-s);

  & summary { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.5rem; cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: 0.25em; }
  & summary::marker { content: ''; }
  & summary::-webkit-details-marker { display: none; }
  & summary .fa-solid { transition: rotate 0.3s var(--soft); }
  &[open] summary .fa-solid { rotate: 90deg; }
}
.data-table {
  width: 100%; max-width: 32rem; margin-top: 0.5rem; font-size: var(--t-s); font-variant-numeric: tabular-nums;

  & th, & td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: right; }
  & th:first-child, & td:first-child { text-align: left; }
  & thead th { color: var(--fg-muted); font-weight: 600; }
}

/* ---------- Plans (night; split statement) ---------- */
.plans { padding-block: clamp(5rem, 10vw, 9rem); }
.plans-title { grid-column: 1 / -1; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.plan-free {
  grid-column: 1 / span 5;

  & .plan-rest { font-size: var(--t-m); line-height: 1.35; max-width: 30ch; margin-bottom: 2rem; }
}
.plan-lead { display: block; font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 1rem; }
.plan-paid { grid-column: 7 / -1; display: grid; align-content: start; }
.plan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1.5rem; align-items: end; padding-block: 1.6rem; border-top: 1px solid var(--line);

  &:last-child { border-bottom: 1px solid var(--line); }
  & .plan-lead { font-size: var(--t-l); margin-bottom: 0.4rem; letter-spacing: -0.03em; }
  & .plan-rest { color: var(--fg-muted); max-width: 34ch; }
  & .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.plans-footnote { grid-column: 1 / span 7; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Footer (night finale) ---------- */
.site-footer { padding: clamp(5rem, 10vw, 9rem) 0 2rem; border-top: 1px solid var(--line); }
.footer-again { grid-column: 1 / -1; font-size: var(--t-mega); font-weight: 800; letter-spacing: -0.05em; line-height: 0.92; margin-bottom: clamp(3rem, 6vw, 5rem); }
.footer-nav {
  grid-column: 1 / span 3; grid-row: 2 / span 3; display: grid; gap: 0.25rem; align-content: start;

  & a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 650; font-size: 1.05rem; }
}
.footer-credit { grid-column: 5 / span 5; }
.footer-legal {
  grid-column: 5 / span 5; margin-top: 1rem; display: grid; gap: 0.75rem;

  & a { text-decoration: underline; text-underline-offset: 0.25em; display: inline-flex; min-height: 2rem; align-items: center; }
}
@media (hover: hover) { .footer-legal a:hover { text-decoration-thickness: 2px; } }
.footer-base { grid-column: 1 / -1; margin-top: clamp(3rem, 6vw, 5rem); display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: var(--fg-muted); }

/* ---------- Place hero (Chicago and every place page) ---------- */
.place-hero {
  height: max(calc(var(--stage-h) * 0.74), 38rem); position: relative;

  & :is(.greeting-hello, .place-line) { display: block; }
}
.zip-index {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 9vw, 8rem);

  & .grid { align-items: start; }
}
.zip-table-wrap {
  grid-column: 1 / span 6;

  & .h-l { margin-bottom: 1.5rem; }
}
.zip-table {
  width: 100%; font-variant-numeric: tabular-nums;

  & th, & td { padding: 0.55rem 0.5rem; text-align: right; border-bottom: 1px solid var(--line); }
  & th:first-child, & td:first-child { text-align: left; }
  & thead th {
    position: sticky; top: 0; z-index: 2; background: var(--ground); font-size: var(--t-xs); font-weight: 650; color: var(--fg-muted); vertical-align: bottom;
    box-shadow: inset 0 -2px 0 var(--fg); /* the rule that stays with the pinned header */
  }
  /* A band of ground under the rule, so rows slide under the header cleanly. */
  & thead th::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.75rem; background: var(--ground); pointer-events: none; }
  html:not(.frame-away) & thead th { top: var(--header-h); }
  & tfoot :is(th, td) { font-weight: 750; white-space: nowrap; }
  & tfoot tr:first-child :is(th, td) { border-top: 2px solid var(--fg); }
  & a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; display: inline-flex; min-height: 1.5rem; align-items: center; }
}
.th-short { display: none; }
.zip-row {
  position: relative; transition: color 0.25s;

  & td:first-child { font-weight: 750; }
  &.is-lit { background: var(--fg); color: var(--ground); }
  &.is-lit td { border-bottom-color: var(--fg); }
  &:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
}
.zip-sticky {
  grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 1rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;

  & .map-figure { grid-column: 1 / -1; }
  & .map-figure svg { max-height: calc(var(--stage-h) - 28rem); min-height: 16rem; }
  & .zip-greeting { font-size: clamp(2.5rem, 1rem + 4vw, 4.75rem); }
  .reduced & { top: 1rem; }
}
.phone-only { display: none; }
.ages { padding-block: clamp(4rem, 9vw, 8rem); }
.ages-title { grid-column: 1 / span 7; margin-bottom: 1rem; }
.ages-figure {
  grid-column: 9 / -1; align-self: end; text-align: right;

  & .big-number { font-size: var(--t-xl); }
}
.ages-window {
  grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 3.5rem); font-size: var(--t-s); color: var(--fg-muted);

  & + .ages-chart { margin-top: 1rem; }
}
.ages-chart { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 4rem); }
.decades { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; column-gap: 0.4rem; height: clamp(16rem, 32vw, 26rem); border-bottom: 1px solid var(--fg); }
.decade { position: relative; display: flex; flex-direction: column; justify-content: end; align-items: center; height: 100%; }
.decade-bar { width: min(24px, 60%); height: calc(var(--v, 0) * 86%); background: var(--fg); border-radius: 4px 4px 0 0; transform-origin: 50% 100%; }
.decade-value { position: absolute; bottom: calc(var(--v, 0) * 86% + 0.35rem); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.decade-label { display: none; }
.decade-axis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 0.4rem; margin-top: 0.5rem; font-size: var(--t-xs); color: var(--fg-muted); text-align: center; line-height: 1.2; }
.permits {
  padding-block: clamp(4rem, 9vw, 8rem);

  & .grid { row-gap: 1.5rem; }
}
.permit-title { grid-column: 1 / span 8; }
.permit-note { grid-column: 1 / span 7; font-size: var(--t-m); line-height: 1.35; max-width: 46ch; }
.permit-field {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, 8px); grid-auto-rows: 8px; gap: 3px; margin-block: 1rem;

  html.js &.is-columns { grid-template-columns: none; grid-template-rows: repeat(var(--rows, 9), 8px); grid-auto-flow: column; grid-auto-columns: 8px; }
  & .dot { background: var(--ramp-1); }
  & .dot.is-on { background: var(--fg); }
}
.permit-key {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--t-s); color: var(--fg-muted);

  & li { display: inline-flex; align-items: center; gap: 0.5rem; }
  & .dot { background: var(--ramp-1); }
  & .dot.is-on { background: var(--fg); }
}
.permit-cta { grid-column: 1 / -1; margin-top: 2rem; }

/* ---------- Curtain (page transition) ---------- */
#curtain {
  position: fixed; inset: 0; z-index: var(--z-curtain); pointer-events: none; visibility: hidden; overflow: clip; display: none;

  &.is-active { display: block; }
  html.is-entering & { visibility: visible; display: block; }
}
.curtain-panel { position: absolute; inset: 0; overflow: clip; background: var(--ink); color: var(--porch); --fg-muted: var(--muted-night); }
.curtain-inner { position: absolute; inset: 0; }

/* SplitText masks keep descender room (the mask class is the split class plus -mask) */
/* Reveal masks clip while letters roll in. They reach well past each line's ink (accents
   above, descenders and commas below), and the engine removes them once the reveal ends. */
.split-mask-line-mask { padding: 0.25em 0.12em 0.35em; margin: -0.25em -0.12em -0.35em; }
.hello-char-mask { padding: 0.25em 0.12em 0.35em; margin: -0.25em -0.12em -0.35em; }
/* The line masks overlap by 0.6em, but adjoining margins give back only 0.35em, so a split heading stood taller until
   its masks came off and everything below jumped mid-scroll. These two rules keep the heading's height exact. */
[data-roll]:not(span) { display: flow-root; }
.split-mask-line-mask + .split-mask-line-mask { margin-top: -0.6em; }

/* Hidden-before-intro (only with motion and script). If the intro never runs, a delayed
   reveal shows the blocks anyway, so a failed script never leaves the hero blank. */
.motion :is([data-intro], [data-intro-hello], [data-place-title]) { visibility: hidden; animation: intro-fallback 0s linear 4s forwards; }
@keyframes intro-fallback { to { visibility: visible; } }

/* ---------- Phone (below md 768) ---------- */
@media (max-width: 767.98px) {
  :root { --header-h: 3.5rem; --hero-top: calc(var(--header-h) + 1.75rem); --t-mega: clamp(4.25rem, 24vw, 7rem); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-nav .hide-phone, .site-nav a.hide-phone { display: none; }
  .site-nav a.show-phone { display: inline-flex; }
  .site-nav .btn-compact { min-height: 2.5rem; padding: 0.45em 0.95em; font-size: 0.875rem; }
  .site-nav { gap: 0.9rem; }
  .zip-index .zip-sticky .zip-note { display: none; }
  .strip-value { font-size: 0.5625rem; }

  .count { position: absolute; top: calc(var(--hero-top) + var(--t-mega) * 2.05 + 1.5rem); right: auto; left: var(--gutter); width: calc(100% - var(--gutter) * 2); }
  .count-num { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hero-figure { top: calc(var(--hero-top) + var(--t-mega) * 2.05 + 1.25rem); right: auto; left: var(--gutter); width: calc(100% - var(--gutter) * 2); }
  .hero-figure-num { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .hero-figure-label { font-size: var(--t-xs); }
  .hero-foot-inner { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .hero-headline { margin-bottom: 0; }
  .hero-actions .btn { min-width: 0; }
  .hero-sub, .hero-actions, .hero-headline { grid-column: 1 / -1; justify-self: stretch; }
  .diff-title, .diff-body, .coverage-title, .coverage-body { grid-column: 1 / -1; }
  .guide-title, .guide-body, .guide-lede { grid-column: 1 / -1; }
  .hero-actions { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .lede { font-size: 1.15rem; }
  .index { margin-left: 0; padding: 0 var(--gutter); }
  .reduced .index { display: block; }
  .reduced .index-head { position: static; }
  .place-row { min-height: 2.75rem; }
  .show-all { width: 100%; justify-content: center; }
  .sample-head, .sample-row { grid-column: 1 / -1; }
  .sample-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample-source { grid-column: 1 / -1; }
  .sample-buyer { padding-right: 0; padding-top: 2.25rem; }
  .trades-head { grid-column: 1 / -1; }
  .trade { grid-template-columns: minmax(0, 1fr); row-gap: 0.9rem; }
  .trade-wide :is(.trade-visual, .trade-name, .trade-figure, .trade-rest) { grid-column: 1; grid-row: auto; margin-top: 0; }
  .trade-wide .trade-name { order: 0; }
  .trade-wide .decade-strip { height: 8rem; }
  .trade-wide .strip-names { display: none; }
  .trade-wide .strip-ends span:first-child, .trade-wide .strip-ends span:last-child { visibility: visible; }
  .count-place { display: block; }
  .column-value { font-size: 0.5625rem; }
  .permit-title, .permit-note { grid-column: 1 / -1; }
  :is(.trade-name, .trade-figure, .trade-visual, .trade-rest), .trade-plain .trade-rest { grid-column: 1; grid-row: auto; margin-top: 0; }
  .trade-figure { order: 1; }
  .trade-visual { order: 2; }
  .trade-rest { order: 3; }
  .zip-index .zip-sticky {
    position: sticky; top: 0; z-index: 4; order: -1; margin: 0 calc(var(--gutter) * -1) 0; padding: 0.6rem var(--gutter);
    display: grid; grid-template-columns: minmax(0, 1fr) 6.75rem; column-gap: 0.75rem; row-gap: 0.25rem; align-items: start;
    background: var(--ground); border-bottom: 1px solid var(--line);
  }
  html:not(.frame-away) .zip-index .zip-sticky { top: var(--header-h); }
  .zip-index .zip-sticky .zip-greeting { grid-column: 1; font-size: 1.9rem; }
  .zip-index .zip-sticky .zip-figures { grid-column: 1; gap: 0 0.7rem; flex-wrap: nowrap; }
  .zip-index .zip-sticky .zip-figure strong { font-size: 1.05rem; white-space: nowrap; }
  .zip-index .zip-sticky .zip-figure span { font-size: 0.6875rem; white-space: nowrap; }
  .zip-index .zip-sticky .map-figure { grid-column: 2; grid-row: 1 / span 2; }
  .zip-index .zip-sticky .map-figure svg { min-height: 0; max-height: 8.75rem; }
  .zip-index .zip-sticky .zip-callout { display: none; }
  .zip-index .zip-table thead th { top: var(--zip-band-h, 0px); }
  html:not(.frame-away) .zip-index .zip-table thead th { top: calc(var(--header-h) + var(--zip-band-h, 0px)); }
  .th-long { display: none; }
  .th-short { display: inline; }
  .zip.is-lit { stroke-width: 3; }
  .phone-only { display: flex; }
  p.phone-only { display: block; }
  .wide-only { display: none; }
  .zip-table-wrap .legend, .zip-table-wrap .caption { margin-bottom: 1rem; }
  .place-name { font-size: 1.125rem; }
  .map-figure, .map-panel { grid-column: 1 / -1; }
  .map-section .map-panel { display: contents; }
  .map-section .map-panel > * { grid-column: 1 / -1; }
  .map-section .map-panel > .h-l { order: 1; }
  .map-section .zip-greeting { order: 2; }
  .map-section .zip-figures { order: 3; }
  .map-section .map-figure { order: 4; }
  .map-section .legend { order: 5; }
  .map-section .caption { order: 6; }
  .map-section .grid { row-gap: 1.25rem; }
  .map-figure svg { max-height: none; }
  .trades-title, .season-title, .season-words { grid-column: 1 / -1; }
  .season-words { margin-bottom: 0; }
  .column-axis { font-size: 0.6875rem; }
  .plan-free, .plan-paid, .plans-footnote, .plans-founding { grid-column: 1 / -1; }
  .plan-paid { margin-top: 3rem; }
  .plan { grid-template-columns: 1fr; }
  .plan .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .footer-nav, .footer-credit, .footer-legal { grid-column: 1 / -1; }
  .footer-nav { grid-row: auto; }
  .footer-credit { margin-top: 2rem; }
  .footer-base { flex-direction: column; }
  .zip-table-wrap, .zip-sticky { grid-column: 1 / -1; }

  .ages-title, .ages-figure { grid-column: 1 / -1; text-align: left; }
  .decades { grid-auto-flow: row; grid-auto-columns: auto; height: auto; border-bottom: 0; row-gap: 0.35rem; }
  .decade { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; column-gap: 0.75rem; height: auto; }
  .decade-label { display: block; font-size: var(--t-xs); color: var(--fg-muted); }
  .decade-bar { width: calc(var(--v, 0) * 82%); height: 0.9rem; border-radius: 0 4px 4px 0; transform-origin: 0 50%; }
  .decade-value { position: static; display: inline-block; }
  .decade-track { display: flex; align-items: center; gap: 0.5rem; }
  .decade-axis { display: none; }
  .permit-note { grid-column: 1 / -1; }

  .place-hero { height: max(calc(var(--stage-h) * 0.86), 44rem); }
}
@media (min-width: 768px) {
  .decade-track { display: contents; }
  .map-section .map-figure { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-sub { grid-column: 1 / span 7; }
  .hero-actions { grid-column: 1 / span 8; }
  .count { width: 14rem; }
  .stage { --figure-w: 16rem; }
  /* The home list rises into the hero's right side (from column 6), so the offer keeps to the first five columns. */
  .greet :is(.hero-headline, .hero-sub, .hero-actions) { grid-column: 1 / span 5; }
  .greet .hero-actions { flex-wrap: wrap; row-gap: 1rem; }
  .map-figure { grid-column: 1 / span 6; }
  .map-panel { grid-column: 7 / -1; }
  .trade-name { grid-column: 1 / span 4; }
  .trade-figure { grid-column: 5 / span 3; }
  .trade-wide :is(.trade-name, .trade-figure) { grid-row: 1 / span 2; margin-top: 0; }
  .trade-wide .trade-visual { grid-row: 1; }
  .trade-wide .trade-rest { grid-row: 2; }
  .trade-visual, .trade-rest { grid-column: 8 / -1; }
  .trade-plain .trade-rest { grid-column: 5 / -1; }
  .sample-head { grid-column: 1 / -1; }
  .sample-row { grid-column: 1 / -1; }
  .plan-free { grid-column: 1 / span 5; }
  .plan-paid { grid-column: 7 / -1; }
  .plan { grid-template-columns: 1fr; }
  .plan .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* Short screens keep the hero from colliding (measured 2026-10-28 at 1280x720, 1366x768, 360x780
   and 375x667): the greeting's height cap tightens on short laptops; on phones under 800px tall the
   counter and the hero text shrink, and under 740px the buttons share a row when they fit. */
@media (min-width: 768px) and (max-height: 800px) {
  :root { --t-mega: clamp(3.5rem, min(0.5rem + 12.5vw, 19svh), 14rem); }
}
@media (max-width: 767.98px) and (max-height: 800px) {
  .count-num { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .count-meta { min-height: 1.6rem; }
  .hero-headline { font-size: 1.2rem; }
  .hero-sub { font-size: 1rem; }
}
@media (max-width: 767.98px) and (max-height: 740px) {
  :root { --t-mega: clamp(4.25rem, 18vw, 6rem); }
  .count .count-running { display: none; }
  .hero-actions .btn { flex: 0 0 auto; min-height: 3.25rem; padding-inline: 1.1em; font-size: 1rem; }
  .hero-actions .text-link { white-space: nowrap; }
}

/* Reduced motion: no transitions at all, visible state changes instead of movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-delay: 0s !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
html.reduced *, html.reduced *::before, html.reduced *::after { transition: none !important; animation-delay: 0s !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; }
.reduced {
  & .letters-row + .letters-row { display: none; }
  & .rolls:focus-visible .letters-row:first-child .ch { translate: none; }
  & .rolls:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }
}
@media (hover: hover) {
  .reduced .rolls:hover .letters-row:first-child .ch { translate: none; }
  .reduced .rolls:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* ---------- Chart values without style attributes ----------
   Build-time charts tag each bar, tick or label with q-N (N = 0 to 1000, tenths of a percent),
   which sets --v to N/1000. Bars, ticks and labels read var(--v). */
.q-0{--v:0}.q-1{--v:0.001}.q-2{--v:0.002}.q-3{--v:0.003}.q-4{--v:0.004}.q-5{--v:0.005}.q-6{--v:0.006}.q-7{--v:0.007}.q-8{--v:0.008}.q-9{--v:0.009}
.q-10{--v:0.01}.q-11{--v:0.011}.q-12{--v:0.012}.q-13{--v:0.013}.q-14{--v:0.014}.q-15{--v:0.015}.q-16{--v:0.016}.q-17{--v:0.017}.q-18{--v:0.018}.q-19{--v:0.019}
.q-20{--v:0.02}.q-21{--v:0.021}.q-22{--v:0.022}.q-23{--v:0.023}.q-24{--v:0.024}.q-25{--v:0.025}.q-26{--v:0.026}.q-27{--v:0.027}.q-28{--v:0.028}.q-29{--v:0.029}
.q-30{--v:0.03}.q-31{--v:0.031}.q-32{--v:0.032}.q-33{--v:0.033}.q-34{--v:0.034}.q-35{--v:0.035}.q-36{--v:0.036}.q-37{--v:0.037}.q-38{--v:0.038}.q-39{--v:0.039}
.q-40{--v:0.04}.q-41{--v:0.041}.q-42{--v:0.042}.q-43{--v:0.043}.q-44{--v:0.044}.q-45{--v:0.045}.q-46{--v:0.046}.q-47{--v:0.047}.q-48{--v:0.048}.q-49{--v:0.049}
.q-50{--v:0.05}.q-51{--v:0.051}.q-52{--v:0.052}.q-53{--v:0.053}.q-54{--v:0.054}.q-55{--v:0.055}.q-56{--v:0.056}.q-57{--v:0.057}.q-58{--v:0.058}.q-59{--v:0.059}
.q-60{--v:0.06}.q-61{--v:0.061}.q-62{--v:0.062}.q-63{--v:0.063}.q-64{--v:0.064}.q-65{--v:0.065}.q-66{--v:0.066}.q-67{--v:0.067}.q-68{--v:0.068}.q-69{--v:0.069}
.q-70{--v:0.07}.q-71{--v:0.071}.q-72{--v:0.072}.q-73{--v:0.073}.q-74{--v:0.074}.q-75{--v:0.075}.q-76{--v:0.076}.q-77{--v:0.077}.q-78{--v:0.078}.q-79{--v:0.079}
.q-80{--v:0.08}.q-81{--v:0.081}.q-82{--v:0.082}.q-83{--v:0.083}.q-84{--v:0.084}.q-85{--v:0.085}.q-86{--v:0.086}.q-87{--v:0.087}.q-88{--v:0.088}.q-89{--v:0.089}
.q-90{--v:0.09}.q-91{--v:0.091}.q-92{--v:0.092}.q-93{--v:0.093}.q-94{--v:0.094}.q-95{--v:0.095}.q-96{--v:0.096}.q-97{--v:0.097}.q-98{--v:0.098}.q-99{--v:0.099}
.q-100{--v:0.1}.q-101{--v:0.101}.q-102{--v:0.102}.q-103{--v:0.103}.q-104{--v:0.104}.q-105{--v:0.105}.q-106{--v:0.106}.q-107{--v:0.107}.q-108{--v:0.108}.q-109{--v:0.109}
.q-110{--v:0.11}.q-111{--v:0.111}.q-112{--v:0.112}.q-113{--v:0.113}.q-114{--v:0.114}.q-115{--v:0.115}.q-116{--v:0.116}.q-117{--v:0.117}.q-118{--v:0.118}.q-119{--v:0.119}
.q-120{--v:0.12}.q-121{--v:0.121}.q-122{--v:0.122}.q-123{--v:0.123}.q-124{--v:0.124}.q-125{--v:0.125}.q-126{--v:0.126}.q-127{--v:0.127}.q-128{--v:0.128}.q-129{--v:0.129}
.q-130{--v:0.13}.q-131{--v:0.131}.q-132{--v:0.132}.q-133{--v:0.133}.q-134{--v:0.134}.q-135{--v:0.135}.q-136{--v:0.136}.q-137{--v:0.137}.q-138{--v:0.138}.q-139{--v:0.139}
.q-140{--v:0.14}.q-141{--v:0.141}.q-142{--v:0.142}.q-143{--v:0.143}.q-144{--v:0.144}.q-145{--v:0.145}.q-146{--v:0.146}.q-147{--v:0.147}.q-148{--v:0.148}.q-149{--v:0.149}
.q-150{--v:0.15}.q-151{--v:0.151}.q-152{--v:0.152}.q-153{--v:0.153}.q-154{--v:0.154}.q-155{--v:0.155}.q-156{--v:0.156}.q-157{--v:0.157}.q-158{--v:0.158}.q-159{--v:0.159}
.q-160{--v:0.16}.q-161{--v:0.161}.q-162{--v:0.162}.q-163{--v:0.163}.q-164{--v:0.164}.q-165{--v:0.165}.q-166{--v:0.166}.q-167{--v:0.167}.q-168{--v:0.168}.q-169{--v:0.169}
.q-170{--v:0.17}.q-171{--v:0.171}.q-172{--v:0.172}.q-173{--v:0.173}.q-174{--v:0.174}.q-175{--v:0.175}.q-176{--v:0.176}.q-177{--v:0.177}.q-178{--v:0.178}.q-179{--v:0.179}
.q-180{--v:0.18}.q-181{--v:0.181}.q-182{--v:0.182}.q-183{--v:0.183}.q-184{--v:0.184}.q-185{--v:0.185}.q-186{--v:0.186}.q-187{--v:0.187}.q-188{--v:0.188}.q-189{--v:0.189}
.q-190{--v:0.19}.q-191{--v:0.191}.q-192{--v:0.192}.q-193{--v:0.193}.q-194{--v:0.194}.q-195{--v:0.195}.q-196{--v:0.196}.q-197{--v:0.197}.q-198{--v:0.198}.q-199{--v:0.199}
.q-200{--v:0.2}.q-201{--v:0.201}.q-202{--v:0.202}.q-203{--v:0.203}.q-204{--v:0.204}.q-205{--v:0.205}.q-206{--v:0.206}.q-207{--v:0.207}.q-208{--v:0.208}.q-209{--v:0.209}
.q-210{--v:0.21}.q-211{--v:0.211}.q-212{--v:0.212}.q-213{--v:0.213}.q-214{--v:0.214}.q-215{--v:0.215}.q-216{--v:0.216}.q-217{--v:0.217}.q-218{--v:0.218}.q-219{--v:0.219}
.q-220{--v:0.22}.q-221{--v:0.221}.q-222{--v:0.222}.q-223{--v:0.223}.q-224{--v:0.224}.q-225{--v:0.225}.q-226{--v:0.226}.q-227{--v:0.227}.q-228{--v:0.228}.q-229{--v:0.229}
.q-230{--v:0.23}.q-231{--v:0.231}.q-232{--v:0.232}.q-233{--v:0.233}.q-234{--v:0.234}.q-235{--v:0.235}.q-236{--v:0.236}.q-237{--v:0.237}.q-238{--v:0.238}.q-239{--v:0.239}
.q-240{--v:0.24}.q-241{--v:0.241}.q-242{--v:0.242}.q-243{--v:0.243}.q-244{--v:0.244}.q-245{--v:0.245}.q-246{--v:0.246}.q-247{--v:0.247}.q-248{--v:0.248}.q-249{--v:0.249}
.q-250{--v:0.25}.q-251{--v:0.251}.q-252{--v:0.252}.q-253{--v:0.253}.q-254{--v:0.254}.q-255{--v:0.255}.q-256{--v:0.256}.q-257{--v:0.257}.q-258{--v:0.258}.q-259{--v:0.259}
.q-260{--v:0.26}.q-261{--v:0.261}.q-262{--v:0.262}.q-263{--v:0.263}.q-264{--v:0.264}.q-265{--v:0.265}.q-266{--v:0.266}.q-267{--v:0.267}.q-268{--v:0.268}.q-269{--v:0.269}
.q-270{--v:0.27}.q-271{--v:0.271}.q-272{--v:0.272}.q-273{--v:0.273}.q-274{--v:0.274}.q-275{--v:0.275}.q-276{--v:0.276}.q-277{--v:0.277}.q-278{--v:0.278}.q-279{--v:0.279}
.q-280{--v:0.28}.q-281{--v:0.281}.q-282{--v:0.282}.q-283{--v:0.283}.q-284{--v:0.284}.q-285{--v:0.285}.q-286{--v:0.286}.q-287{--v:0.287}.q-288{--v:0.288}.q-289{--v:0.289}
.q-290{--v:0.29}.q-291{--v:0.291}.q-292{--v:0.292}.q-293{--v:0.293}.q-294{--v:0.294}.q-295{--v:0.295}.q-296{--v:0.296}.q-297{--v:0.297}.q-298{--v:0.298}.q-299{--v:0.299}
.q-300{--v:0.3}.q-301{--v:0.301}.q-302{--v:0.302}.q-303{--v:0.303}.q-304{--v:0.304}.q-305{--v:0.305}.q-306{--v:0.306}.q-307{--v:0.307}.q-308{--v:0.308}.q-309{--v:0.309}
.q-310{--v:0.31}.q-311{--v:0.311}.q-312{--v:0.312}.q-313{--v:0.313}.q-314{--v:0.314}.q-315{--v:0.315}.q-316{--v:0.316}.q-317{--v:0.317}.q-318{--v:0.318}.q-319{--v:0.319}
.q-320{--v:0.32}.q-321{--v:0.321}.q-322{--v:0.322}.q-323{--v:0.323}.q-324{--v:0.324}.q-325{--v:0.325}.q-326{--v:0.326}.q-327{--v:0.327}.q-328{--v:0.328}.q-329{--v:0.329}
.q-330{--v:0.33}.q-331{--v:0.331}.q-332{--v:0.332}.q-333{--v:0.333}.q-334{--v:0.334}.q-335{--v:0.335}.q-336{--v:0.336}.q-337{--v:0.337}.q-338{--v:0.338}.q-339{--v:0.339}
.q-340{--v:0.34}.q-341{--v:0.341}.q-342{--v:0.342}.q-343{--v:0.343}.q-344{--v:0.344}.q-345{--v:0.345}.q-346{--v:0.346}.q-347{--v:0.347}.q-348{--v:0.348}.q-349{--v:0.349}
.q-350{--v:0.35}.q-351{--v:0.351}.q-352{--v:0.352}.q-353{--v:0.353}.q-354{--v:0.354}.q-355{--v:0.355}.q-356{--v:0.356}.q-357{--v:0.357}.q-358{--v:0.358}.q-359{--v:0.359}
.q-360{--v:0.36}.q-361{--v:0.361}.q-362{--v:0.362}.q-363{--v:0.363}.q-364{--v:0.364}.q-365{--v:0.365}.q-366{--v:0.366}.q-367{--v:0.367}.q-368{--v:0.368}.q-369{--v:0.369}
.q-370{--v:0.37}.q-371{--v:0.371}.q-372{--v:0.372}.q-373{--v:0.373}.q-374{--v:0.374}.q-375{--v:0.375}.q-376{--v:0.376}.q-377{--v:0.377}.q-378{--v:0.378}.q-379{--v:0.379}
.q-380{--v:0.38}.q-381{--v:0.381}.q-382{--v:0.382}.q-383{--v:0.383}.q-384{--v:0.384}.q-385{--v:0.385}.q-386{--v:0.386}.q-387{--v:0.387}.q-388{--v:0.388}.q-389{--v:0.389}
.q-390{--v:0.39}.q-391{--v:0.391}.q-392{--v:0.392}.q-393{--v:0.393}.q-394{--v:0.394}.q-395{--v:0.395}.q-396{--v:0.396}.q-397{--v:0.397}.q-398{--v:0.398}.q-399{--v:0.399}
.q-400{--v:0.4}.q-401{--v:0.401}.q-402{--v:0.402}.q-403{--v:0.403}.q-404{--v:0.404}.q-405{--v:0.405}.q-406{--v:0.406}.q-407{--v:0.407}.q-408{--v:0.408}.q-409{--v:0.409}
.q-410{--v:0.41}.q-411{--v:0.411}.q-412{--v:0.412}.q-413{--v:0.413}.q-414{--v:0.414}.q-415{--v:0.415}.q-416{--v:0.416}.q-417{--v:0.417}.q-418{--v:0.418}.q-419{--v:0.419}
.q-420{--v:0.42}.q-421{--v:0.421}.q-422{--v:0.422}.q-423{--v:0.423}.q-424{--v:0.424}.q-425{--v:0.425}.q-426{--v:0.426}.q-427{--v:0.427}.q-428{--v:0.428}.q-429{--v:0.429}
.q-430{--v:0.43}.q-431{--v:0.431}.q-432{--v:0.432}.q-433{--v:0.433}.q-434{--v:0.434}.q-435{--v:0.435}.q-436{--v:0.436}.q-437{--v:0.437}.q-438{--v:0.438}.q-439{--v:0.439}
.q-440{--v:0.44}.q-441{--v:0.441}.q-442{--v:0.442}.q-443{--v:0.443}.q-444{--v:0.444}.q-445{--v:0.445}.q-446{--v:0.446}.q-447{--v:0.447}.q-448{--v:0.448}.q-449{--v:0.449}
.q-450{--v:0.45}.q-451{--v:0.451}.q-452{--v:0.452}.q-453{--v:0.453}.q-454{--v:0.454}.q-455{--v:0.455}.q-456{--v:0.456}.q-457{--v:0.457}.q-458{--v:0.458}.q-459{--v:0.459}
.q-460{--v:0.46}.q-461{--v:0.461}.q-462{--v:0.462}.q-463{--v:0.463}.q-464{--v:0.464}.q-465{--v:0.465}.q-466{--v:0.466}.q-467{--v:0.467}.q-468{--v:0.468}.q-469{--v:0.469}
.q-470{--v:0.47}.q-471{--v:0.471}.q-472{--v:0.472}.q-473{--v:0.473}.q-474{--v:0.474}.q-475{--v:0.475}.q-476{--v:0.476}.q-477{--v:0.477}.q-478{--v:0.478}.q-479{--v:0.479}
.q-480{--v:0.48}.q-481{--v:0.481}.q-482{--v:0.482}.q-483{--v:0.483}.q-484{--v:0.484}.q-485{--v:0.485}.q-486{--v:0.486}.q-487{--v:0.487}.q-488{--v:0.488}.q-489{--v:0.489}
.q-490{--v:0.49}.q-491{--v:0.491}.q-492{--v:0.492}.q-493{--v:0.493}.q-494{--v:0.494}.q-495{--v:0.495}.q-496{--v:0.496}.q-497{--v:0.497}.q-498{--v:0.498}.q-499{--v:0.499}
.q-500{--v:0.5}.q-501{--v:0.501}.q-502{--v:0.502}.q-503{--v:0.503}.q-504{--v:0.504}.q-505{--v:0.505}.q-506{--v:0.506}.q-507{--v:0.507}.q-508{--v:0.508}.q-509{--v:0.509}
.q-510{--v:0.51}.q-511{--v:0.511}.q-512{--v:0.512}.q-513{--v:0.513}.q-514{--v:0.514}.q-515{--v:0.515}.q-516{--v:0.516}.q-517{--v:0.517}.q-518{--v:0.518}.q-519{--v:0.519}
.q-520{--v:0.52}.q-521{--v:0.521}.q-522{--v:0.522}.q-523{--v:0.523}.q-524{--v:0.524}.q-525{--v:0.525}.q-526{--v:0.526}.q-527{--v:0.527}.q-528{--v:0.528}.q-529{--v:0.529}
.q-530{--v:0.53}.q-531{--v:0.531}.q-532{--v:0.532}.q-533{--v:0.533}.q-534{--v:0.534}.q-535{--v:0.535}.q-536{--v:0.536}.q-537{--v:0.537}.q-538{--v:0.538}.q-539{--v:0.539}
.q-540{--v:0.54}.q-541{--v:0.541}.q-542{--v:0.542}.q-543{--v:0.543}.q-544{--v:0.544}.q-545{--v:0.545}.q-546{--v:0.546}.q-547{--v:0.547}.q-548{--v:0.548}.q-549{--v:0.549}
.q-550{--v:0.55}.q-551{--v:0.551}.q-552{--v:0.552}.q-553{--v:0.553}.q-554{--v:0.554}.q-555{--v:0.555}.q-556{--v:0.556}.q-557{--v:0.557}.q-558{--v:0.558}.q-559{--v:0.559}
.q-560{--v:0.56}.q-561{--v:0.561}.q-562{--v:0.562}.q-563{--v:0.563}.q-564{--v:0.564}.q-565{--v:0.565}.q-566{--v:0.566}.q-567{--v:0.567}.q-568{--v:0.568}.q-569{--v:0.569}
.q-570{--v:0.57}.q-571{--v:0.571}.q-572{--v:0.572}.q-573{--v:0.573}.q-574{--v:0.574}.q-575{--v:0.575}.q-576{--v:0.576}.q-577{--v:0.577}.q-578{--v:0.578}.q-579{--v:0.579}
.q-580{--v:0.58}.q-581{--v:0.581}.q-582{--v:0.582}.q-583{--v:0.583}.q-584{--v:0.584}.q-585{--v:0.585}.q-586{--v:0.586}.q-587{--v:0.587}.q-588{--v:0.588}.q-589{--v:0.589}
.q-590{--v:0.59}.q-591{--v:0.591}.q-592{--v:0.592}.q-593{--v:0.593}.q-594{--v:0.594}.q-595{--v:0.595}.q-596{--v:0.596}.q-597{--v:0.597}.q-598{--v:0.598}.q-599{--v:0.599}
.q-600{--v:0.6}.q-601{--v:0.601}.q-602{--v:0.602}.q-603{--v:0.603}.q-604{--v:0.604}.q-605{--v:0.605}.q-606{--v:0.606}.q-607{--v:0.607}.q-608{--v:0.608}.q-609{--v:0.609}
.q-610{--v:0.61}.q-611{--v:0.611}.q-612{--v:0.612}.q-613{--v:0.613}.q-614{--v:0.614}.q-615{--v:0.615}.q-616{--v:0.616}.q-617{--v:0.617}.q-618{--v:0.618}.q-619{--v:0.619}
.q-620{--v:0.62}.q-621{--v:0.621}.q-622{--v:0.622}.q-623{--v:0.623}.q-624{--v:0.624}.q-625{--v:0.625}.q-626{--v:0.626}.q-627{--v:0.627}.q-628{--v:0.628}.q-629{--v:0.629}
.q-630{--v:0.63}.q-631{--v:0.631}.q-632{--v:0.632}.q-633{--v:0.633}.q-634{--v:0.634}.q-635{--v:0.635}.q-636{--v:0.636}.q-637{--v:0.637}.q-638{--v:0.638}.q-639{--v:0.639}
.q-640{--v:0.64}.q-641{--v:0.641}.q-642{--v:0.642}.q-643{--v:0.643}.q-644{--v:0.644}.q-645{--v:0.645}.q-646{--v:0.646}.q-647{--v:0.647}.q-648{--v:0.648}.q-649{--v:0.649}
.q-650{--v:0.65}.q-651{--v:0.651}.q-652{--v:0.652}.q-653{--v:0.653}.q-654{--v:0.654}.q-655{--v:0.655}.q-656{--v:0.656}.q-657{--v:0.657}.q-658{--v:0.658}.q-659{--v:0.659}
.q-660{--v:0.66}.q-661{--v:0.661}.q-662{--v:0.662}.q-663{--v:0.663}.q-664{--v:0.664}.q-665{--v:0.665}.q-666{--v:0.666}.q-667{--v:0.667}.q-668{--v:0.668}.q-669{--v:0.669}
.q-670{--v:0.67}.q-671{--v:0.671}.q-672{--v:0.672}.q-673{--v:0.673}.q-674{--v:0.674}.q-675{--v:0.675}.q-676{--v:0.676}.q-677{--v:0.677}.q-678{--v:0.678}.q-679{--v:0.679}
.q-680{--v:0.68}.q-681{--v:0.681}.q-682{--v:0.682}.q-683{--v:0.683}.q-684{--v:0.684}.q-685{--v:0.685}.q-686{--v:0.686}.q-687{--v:0.687}.q-688{--v:0.688}.q-689{--v:0.689}
.q-690{--v:0.69}.q-691{--v:0.691}.q-692{--v:0.692}.q-693{--v:0.693}.q-694{--v:0.694}.q-695{--v:0.695}.q-696{--v:0.696}.q-697{--v:0.697}.q-698{--v:0.698}.q-699{--v:0.699}
.q-700{--v:0.7}.q-701{--v:0.701}.q-702{--v:0.702}.q-703{--v:0.703}.q-704{--v:0.704}.q-705{--v:0.705}.q-706{--v:0.706}.q-707{--v:0.707}.q-708{--v:0.708}.q-709{--v:0.709}
.q-710{--v:0.71}.q-711{--v:0.711}.q-712{--v:0.712}.q-713{--v:0.713}.q-714{--v:0.714}.q-715{--v:0.715}.q-716{--v:0.716}.q-717{--v:0.717}.q-718{--v:0.718}.q-719{--v:0.719}
.q-720{--v:0.72}.q-721{--v:0.721}.q-722{--v:0.722}.q-723{--v:0.723}.q-724{--v:0.724}.q-725{--v:0.725}.q-726{--v:0.726}.q-727{--v:0.727}.q-728{--v:0.728}.q-729{--v:0.729}
.q-730{--v:0.73}.q-731{--v:0.731}.q-732{--v:0.732}.q-733{--v:0.733}.q-734{--v:0.734}.q-735{--v:0.735}.q-736{--v:0.736}.q-737{--v:0.737}.q-738{--v:0.738}.q-739{--v:0.739}
.q-740{--v:0.74}.q-741{--v:0.741}.q-742{--v:0.742}.q-743{--v:0.743}.q-744{--v:0.744}.q-745{--v:0.745}.q-746{--v:0.746}.q-747{--v:0.747}.q-748{--v:0.748}.q-749{--v:0.749}
.q-750{--v:0.75}.q-751{--v:0.751}.q-752{--v:0.752}.q-753{--v:0.753}.q-754{--v:0.754}.q-755{--v:0.755}.q-756{--v:0.756}.q-757{--v:0.757}.q-758{--v:0.758}.q-759{--v:0.759}
.q-760{--v:0.76}.q-761{--v:0.761}.q-762{--v:0.762}.q-763{--v:0.763}.q-764{--v:0.764}.q-765{--v:0.765}.q-766{--v:0.766}.q-767{--v:0.767}.q-768{--v:0.768}.q-769{--v:0.769}
.q-770{--v:0.77}.q-771{--v:0.771}.q-772{--v:0.772}.q-773{--v:0.773}.q-774{--v:0.774}.q-775{--v:0.775}.q-776{--v:0.776}.q-777{--v:0.777}.q-778{--v:0.778}.q-779{--v:0.779}
.q-780{--v:0.78}.q-781{--v:0.781}.q-782{--v:0.782}.q-783{--v:0.783}.q-784{--v:0.784}.q-785{--v:0.785}.q-786{--v:0.786}.q-787{--v:0.787}.q-788{--v:0.788}.q-789{--v:0.789}
.q-790{--v:0.79}.q-791{--v:0.791}.q-792{--v:0.792}.q-793{--v:0.793}.q-794{--v:0.794}.q-795{--v:0.795}.q-796{--v:0.796}.q-797{--v:0.797}.q-798{--v:0.798}.q-799{--v:0.799}
.q-800{--v:0.8}.q-801{--v:0.801}.q-802{--v:0.802}.q-803{--v:0.803}.q-804{--v:0.804}.q-805{--v:0.805}.q-806{--v:0.806}.q-807{--v:0.807}.q-808{--v:0.808}.q-809{--v:0.809}
.q-810{--v:0.81}.q-811{--v:0.811}.q-812{--v:0.812}.q-813{--v:0.813}.q-814{--v:0.814}.q-815{--v:0.815}.q-816{--v:0.816}.q-817{--v:0.817}.q-818{--v:0.818}.q-819{--v:0.819}
.q-820{--v:0.82}.q-821{--v:0.821}.q-822{--v:0.822}.q-823{--v:0.823}.q-824{--v:0.824}.q-825{--v:0.825}.q-826{--v:0.826}.q-827{--v:0.827}.q-828{--v:0.828}.q-829{--v:0.829}
.q-830{--v:0.83}.q-831{--v:0.831}.q-832{--v:0.832}.q-833{--v:0.833}.q-834{--v:0.834}.q-835{--v:0.835}.q-836{--v:0.836}.q-837{--v:0.837}.q-838{--v:0.838}.q-839{--v:0.839}
.q-840{--v:0.84}.q-841{--v:0.841}.q-842{--v:0.842}.q-843{--v:0.843}.q-844{--v:0.844}.q-845{--v:0.845}.q-846{--v:0.846}.q-847{--v:0.847}.q-848{--v:0.848}.q-849{--v:0.849}
.q-850{--v:0.85}.q-851{--v:0.851}.q-852{--v:0.852}.q-853{--v:0.853}.q-854{--v:0.854}.q-855{--v:0.855}.q-856{--v:0.856}.q-857{--v:0.857}.q-858{--v:0.858}.q-859{--v:0.859}
.q-860{--v:0.86}.q-861{--v:0.861}.q-862{--v:0.862}.q-863{--v:0.863}.q-864{--v:0.864}.q-865{--v:0.865}.q-866{--v:0.866}.q-867{--v:0.867}.q-868{--v:0.868}.q-869{--v:0.869}
.q-870{--v:0.87}.q-871{--v:0.871}.q-872{--v:0.872}.q-873{--v:0.873}.q-874{--v:0.874}.q-875{--v:0.875}.q-876{--v:0.876}.q-877{--v:0.877}.q-878{--v:0.878}.q-879{--v:0.879}
.q-880{--v:0.88}.q-881{--v:0.881}.q-882{--v:0.882}.q-883{--v:0.883}.q-884{--v:0.884}.q-885{--v:0.885}.q-886{--v:0.886}.q-887{--v:0.887}.q-888{--v:0.888}.q-889{--v:0.889}
.q-890{--v:0.89}.q-891{--v:0.891}.q-892{--v:0.892}.q-893{--v:0.893}.q-894{--v:0.894}.q-895{--v:0.895}.q-896{--v:0.896}.q-897{--v:0.897}.q-898{--v:0.898}.q-899{--v:0.899}
.q-900{--v:0.9}.q-901{--v:0.901}.q-902{--v:0.902}.q-903{--v:0.903}.q-904{--v:0.904}.q-905{--v:0.905}.q-906{--v:0.906}.q-907{--v:0.907}.q-908{--v:0.908}.q-909{--v:0.909}
.q-910{--v:0.91}.q-911{--v:0.911}.q-912{--v:0.912}.q-913{--v:0.913}.q-914{--v:0.914}.q-915{--v:0.915}.q-916{--v:0.916}.q-917{--v:0.917}.q-918{--v:0.918}.q-919{--v:0.919}
.q-920{--v:0.92}.q-921{--v:0.921}.q-922{--v:0.922}.q-923{--v:0.923}.q-924{--v:0.924}.q-925{--v:0.925}.q-926{--v:0.926}.q-927{--v:0.927}.q-928{--v:0.928}.q-929{--v:0.929}
.q-930{--v:0.93}.q-931{--v:0.931}.q-932{--v:0.932}.q-933{--v:0.933}.q-934{--v:0.934}.q-935{--v:0.935}.q-936{--v:0.936}.q-937{--v:0.937}.q-938{--v:0.938}.q-939{--v:0.939}
.q-940{--v:0.94}.q-941{--v:0.941}.q-942{--v:0.942}.q-943{--v:0.943}.q-944{--v:0.944}.q-945{--v:0.945}.q-946{--v:0.946}.q-947{--v:0.947}.q-948{--v:0.948}.q-949{--v:0.949}
.q-950{--v:0.95}.q-951{--v:0.951}.q-952{--v:0.952}.q-953{--v:0.953}.q-954{--v:0.954}.q-955{--v:0.955}.q-956{--v:0.956}.q-957{--v:0.957}.q-958{--v:0.958}.q-959{--v:0.959}
.q-960{--v:0.96}.q-961{--v:0.961}.q-962{--v:0.962}.q-963{--v:0.963}.q-964{--v:0.964}.q-965{--v:0.965}.q-966{--v:0.966}.q-967{--v:0.967}.q-968{--v:0.968}.q-969{--v:0.969}
.q-970{--v:0.97}.q-971{--v:0.971}.q-972{--v:0.972}.q-973{--v:0.973}.q-974{--v:0.974}.q-975{--v:0.975}.q-976{--v:0.976}.q-977{--v:0.977}.q-978{--v:0.978}.q-979{--v:0.979}
.q-980{--v:0.98}.q-981{--v:0.981}.q-982{--v:0.982}.q-983{--v:0.983}.q-984{--v:0.984}.q-985{--v:0.985}.q-986{--v:0.986}.q-987{--v:0.987}.q-988{--v:0.988}.q-989{--v:0.989}
.q-990{--v:0.99}.q-991{--v:0.991}.q-992{--v:0.992}.q-993{--v:0.993}.q-994{--v:0.994}.q-995{--v:0.995}.q-996{--v:0.996}.q-997{--v:0.997}.q-998{--v:0.998}.q-999{--v:0.999}
.q-1000{--v:1}

/* ======================================================================
   Type (owner, 2026-10-24): Montserrat on every heading, the greeting, the big figures and
   the footer greeting; Source Sans 3 everywhere else (body, labels, buttons, nav, tables).
   This block owns family, weight, tracking and leading for the display roles; sizes stay
   with each component above.
   ====================================================================== */
h1, h2, h3, .h-xl, .h-l, .h-m, .page-title, .greeting, .zip-greeting, .count-num, .big-number,
.big-figure, .footer-again, .trade-name, .plan-lead, .sample-buyer dd,
.zip-figure strong, .trade-figure strong, .rule-list strong {
  font-family: var(--f-head);
  font-variant-numeric: lining-nums proportional-nums;
}
.greeting { letter-spacing: var(--track-mega); }
.greeting-hello { font-weight: var(--w-quiet); line-height: 1.1; padding-bottom: 0.04em; }
.place-line { font-weight: var(--w-loud); }
.zip-greeting { letter-spacing: var(--track-mega); }
.zip-greeting .greeting-hello { font-weight: var(--w-quiet); }
.h-xl { font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; }
.h-l { font-weight: var(--w-head); letter-spacing: var(--track-l); line-height: 1.05; }
.h-m { font-weight: var(--w-sub); letter-spacing: -0.01em; line-height: 1.15; }
.page-title { font-weight: var(--w-loud); letter-spacing: var(--track-mega); line-height: 0.98; }
.count-num { font-weight: var(--w-loud); letter-spacing: var(--track-xl); }
.big-number { font-weight: var(--w-loud); letter-spacing: var(--track-mega); line-height: 0.9; }
.big-figure { font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; }
.footer-again { font-weight: var(--w-loud); letter-spacing: var(--track-mega); line-height: 0.95; }
.trade-name { font-weight: var(--w-loud); letter-spacing: var(--track-l); line-height: 1.05; }
.trade-figure strong { font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 0.95; }
.plan-lead { font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; }
.plan .plan-lead { letter-spacing: var(--track-l); }
.sample-buyer dd { font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; }
.zip-figure strong { font-weight: var(--w-head); letter-spacing: var(--track-l); }
.rule-list strong { font-weight: var(--w-loud); letter-spacing: var(--track-l); }
/* Tables, columns and running figures in Source Sans 3 keep tabular figures. */
:is(table, .count-meta strong, .column-value, .decade-value, .strip-value, .trade-key strong, .permit-key strong) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Wordmark: the owner's Figma export, used as-is ----------
   On porch, logo-hellosuey.svg (porch-yellow letters, #222222 outline outside them); on night,
   logo-hellosuey-on-dark.svg (no outline; owner, 2026-10-26: the outline is only for yellow on
   yellow). Only the height is set here; the width follows the files' 2270 x 458 proportions.
   The header stacks both copies in one grid cell and crossfades them with its background
   (html.is-night, 0.3s); reduced motion drops the fade with every other transition.
   A logotype carries no contrast requirement (WCAG 1.4.3). */
.brand { display: inline-grid; align-items: center; min-height: 2.75rem; line-height: 1; }
.brand-mark { grid-area: 1 / 1; display: block; height: 2.6rem; width: auto; }
.brand-mark-porch, .brand-mark-night { transition: opacity 0.3s; }
.brand-mark-night { opacity: 0; }
html.is-night .site-header, body[data-header='night'] .site-header, body[data-header='split'] .site-header {
  & .brand-mark-porch { opacity: 0; }
  & .brand-mark-night { opacity: 1; }
}
.brand.is-footer .brand-mark { height: 4rem; }
.footer-base { align-items: center; }

@media (max-width: 767.98px) {
  :root { --t-mega: clamp(3.5rem, 19vw, 6rem); }
  .count { top: calc(var(--hero-top) + var(--t-mega) * 2.2 + 1.5rem); }
  .footer-again { font-size: clamp(2.75rem, 15vw, 4.25rem); }
  .brand-mark { height: 1.7rem; }
  .brand.is-footer .brand-mark { height: 3.25rem; }
  .footer-base { align-items: flex-start; }
}
@media (max-width: 767.98px) and (max-height: 740px) {
  :root { --t-mega: clamp(3.25rem, 16vw, 5.25rem); }
}