/* Roofing, the pitch. Whole rows are cut on one real roof slope and the high side swaps row to row,
   so consecutive rows read as rooflines. The cut is the only device; type and color blocking do the rest.
   Every column stands clear of the cuts by arithmetic, not by eye: a block's --at says how many of the
   12 columns its low-side edge sits up the slope, and .hang works out the drop from that edge. */

:root {
  --pitch: 3; /* rise per 12 of run; every cut and offset reads this one number */
  --rise: calc(100vw * var(--pitch) / 12);
  --clear: clamp(1.5rem, 3.4vw, 3rem);
}

.at-0 { --at: 0; } .at-2 { --at: 2; } .at-3 { --at: 3; } .at-4 { --at: 4; }
.at-5 { --at: 5; } .at-6 { --at: 6; } .at-7 { --at: 7; } .at-8 { --at: 8; }

/* The third ground, in the same roles .night sets. */
.lit {
  --ground: var(--lit);
  --fg: var(--ink);
  --fg-muted: var(--muted-porch);
  --line: color-mix(in srgb, var(--ink) 22%, transparent);
  --press: var(--ink);
  --press-fg: var(--porch);
}

/* ---------- The cut ---------- */
.slope {
  position: relative;
  margin-top: calc((var(--rise) + 1px) * -1);
  padding-inline: var(--gutter);
  background: var(--ground);
  color: var(--fg);

  &.high-left { clip-path: polygon(0 0, 100% var(--rise), 100% 100%, 0 100%); }
  &.high-right { clip-path: polygon(0 var(--rise), 100% 0, 100% 100%, 0 100%); }
}
.site-footer {
  margin-top: calc((var(--rise) + 1px) * -1);
  padding-top: calc(var(--clear) * 1.5 + var(--rise));
  border-top: 0;
  clip-path: polygon(0 0, 100% var(--rise), 100% 100%, 0 100%);
}

/* ---------- Words ---------- */
/* The reveal's line masks overlap by 0.6em, and adjoining margins would give only 0.35em of that back, so a heading
   would stand taller until they come off and everything under it would jump. These two lines keep its height exact. */
.row-title { display: flow-root; text-wrap: balance; }
.row-title .split-mask-line-mask + .split-mask-line-mask { margin-top: -0.6em; }
.row-body, .inspect-scope, .inspect-near, .inspect-life, .costs-lead, .figure-lead {
  & p { max-width: 72ch; }
}
.row-body p + p, .inspect-scope p + p { margin-top: 0.9rem; }
.pulled-figure {
  font-family: var(--f-head);
  font-size: var(--t-mega);
  font-weight: var(--w-loud);
  letter-spacing: var(--track-mega);
  line-height: 0.9;
  font-variant-numeric: lining-nums proportional-nums;
}

/* ---------- Hero ---------- */
.pitch-hero {
  padding-inline: var(--gutter);
  padding-top: calc(var(--header-h) + 0.5rem);
}
.hero-greeting {
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
  font-family: var(--f-head);
  font-size: var(--t-mega);
  letter-spacing: var(--track-mega);
  line-height: 1;
}
.hero-hello { display: block; font-weight: var(--w-quiet); }
.hero-who { display: block; font-weight: var(--w-loud); }
.hero-count-where { font-weight: 650; line-height: 1.2; }
.hero-count-num {
  font-family: var(--f-head);
  font-size: var(--t-xl);
  font-weight: var(--w-loud);
  letter-spacing: var(--track-xl);
  line-height: 1.05;
  font-variant-numeric: lining-nums proportional-nums;
}
.hero-count-what { font-size: var(--t-s); color: var(--fg-muted); }
.hero-title {
  margin-top: clamp(1rem, 2.4vw, 1.75rem);
  font-size: var(--t-l);
  font-weight: var(--w-head);
  letter-spacing: var(--track-l);
  line-height: 1.05;
}
.hero-intro { margin-top: 0.75rem; font-size: var(--t-m); line-height: 1.32; max-width: 72ch; }
.hero-action { margin-top: 1.5rem; }

/* ---------- Where leads come from ---------- */
.sources-notes { font-size: var(--t-s); line-height: 1.45; & p + p { margin-top: 0.8rem; } }
.sources-close { font-size: var(--t-m); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.sources-table {
  & a { min-height: 1.5rem; }
  & tbody td:nth-of-type(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ---------- New homeowners: the figure stays inside its sentence ---------- */
.row-spend { --spend-gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.spend-sentence { margin-top: var(--spend-gap); }
.spend-lead, .spend-rest { display: block; max-width: 72ch; }
.spend-figure {
  display: block;
  font-family: var(--f-head);
  font-size: var(--t-mega);
  font-weight: var(--w-loud);
  letter-spacing: var(--track-mega);
  line-height: 0.95;
  word-spacing: -0.16em;
  white-space: nowrap;
  font-variant-numeric: lining-nums proportional-nums;

  & small { font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.01em; word-spacing: normal; }
}
.spend-on {
  display: block;
  font-family: var(--f-head);
  font-size: var(--t-l);
  font-weight: var(--w-head);
  letter-spacing: var(--track-l);
  line-height: 1.1;
}
.spend-rest { margin-top: 0.75rem; }

/* ---------- The inspection drawing ---------- */
.roof-drawing {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--fg);

  & path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  & circle { fill: currentColor; }
  & text { fill: currentColor; font-family: var(--f); font-size: 18px; font-weight: 650; letter-spacing: -0.005em; }
  & .rf-thin { stroke-width: 1.15; }
  & .rf-mid { stroke-width: 1.9; }
  & .rf-surface { stroke-width: 4; stroke-linecap: butt; }
  & .rf-flash { stroke-width: 2.4; }
  & .rf-leader { stroke-width: 1; }
  & .rf-tube { stroke-width: 6.5; stroke-linecap: butt; }
  & .rf-tube-core { stroke: var(--ground); stroke-width: 3.5; stroke-linecap: butt; }
}
.roof-drawing-phone { display: none; }
.inspect-scope { font-size: var(--t-m); line-height: 1.3; font-weight: 500; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.left-out {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  border-top: 2px solid var(--fg);
}
.left-out-item {
  display: block;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-head);
  font-size: var(--t-m);
  font-weight: var(--w-sub);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
/* The turn of the sentence carries the list's weight, so a skim lands on it and not on the four lines alone. */
.left-out-end {
  display: block;
  padding-block: 0.45rem;
  border-bottom: 2px solid var(--fg);
  font-family: var(--f-head);
  font-size: var(--t-m);
  font-weight: var(--w-sub);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.inspect-near { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.life-bars { display: grid; grid-template-rows: auto 1fr 1fr; gap: 1rem; }
.life-bars-caption { margin-bottom: -0.5rem; font-size: var(--t-xs); color: var(--fg-muted); }
.life-bar { display: grid; gap: 0.2rem; }
.life-bar-name { font-size: var(--t-s); font-weight: 650; }
.life-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3.25rem;
  padding-inline: 0.85rem;
  background: var(--fg);
  color: var(--ground);
  font-family: var(--f-head);
  font-size: var(--t-m);
  font-weight: var(--w-loud);
  letter-spacing: -0.02em;
  width: calc(var(--v, 1) * 100%);
  white-space: nowrap;
}

/* ---------- Permit history ---------- */
.permits-first { font-size: var(--t-m); line-height: 1.32; max-width: 62ch; }
.permits-line { font-size: var(--t-m); font-weight: 650; line-height: 1.28; letter-spacing: -0.01em; }

/* ---------- The permit count ---------- */
.figure-window { margin-top: 0.6rem; color: var(--fg-muted); }
.figure-lead > p:last-child { font-size: var(--t-m); line-height: 1.32; }
.figure-trade { margin-top: clamp(1.25rem, 3vw, 2.25rem); font-size: var(--t-m); font-weight: var(--w-sub); line-height: 1.2; }
.figure-count {
  display: grid;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);

  & strong {
    font-family: var(--f-head);
    font-size: var(--t-mega);
    font-weight: var(--w-loud);
    letter-spacing: var(--track-mega);
    line-height: 0.95;
    font-variant-numeric: lining-nums proportional-nums;
  }
  & span { margin-top: 0.35rem; font-weight: 650; font-size: var(--t-m); line-height: 1.2; }
  & small { margin-top: 0.15rem; font-size: var(--t-s); color: var(--fg-muted); }
}
.figure-line {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--f-head);
  font-size: var(--t-l);
  font-weight: var(--w-head);
  letter-spacing: var(--track-l);
  line-height: 1.1;
}
.figure-field {
  & .unit-field, html.js & .unit-field.is-columns {
    grid-template-columns: none;
    grid-template-rows: repeat(18, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 3px;
  }
  & .unit-field .dot { width: auto; height: auto; aspect-ratio: 1; }
  & .trade-key { font-size: var(--t-s); margin-top: 1rem; }
}

/* ---------- Sample plan ---------- */
.plan-steps {
  counter-reset: step;

  & li { counter-increment: step; max-width: 72ch; }
  & li::before {
    content: counter(step);
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--f-head);
    font-size: var(--t-xl);
    font-weight: var(--w-loud);
    letter-spacing: var(--track-xl);
    line-height: 1;
  }
}

/* ---------- Costs ---------- */
.costs-lead > p:first-of-type { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.costs-pull { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
.costs-pull-name { margin-top: 0.75rem; font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
.cost-table { max-width: none; }

/* ---------- Questions ---------- */
.faq-col {
  & div + div { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  & dt { font-weight: 750; font-size: var(--t-body); line-height: 1.25; }
  & dd { margin: 0.3rem 0 0; }
}

/* ---------- Cities, ZIPs and the other trades ---------- */
.places { display: contents; }
.places-head .caption { margin-top: 0.6rem; }
.places-table { margin-top: clamp(1rem, 2.4vw, 1.75rem); }
.places-zips .zips-title { margin-top: 0; color: var(--fg); font-size: var(--t-m); }
.others { background: transparent; }
.others .links-title { margin-bottom: 0.75rem; }
.link-group.trade-links { grid-column: auto; }

/* ---------- Close ---------- */
.close-title {
  font-size: var(--t-mega);
  font-weight: var(--w-loud);
  letter-spacing: var(--track-mega);
  line-height: 0.95;
}
.close-words { font-size: var(--t-m); line-height: 1.3; }
.close-action { margin-top: 1rem; }

/* ---------- Wide: rows become grids and the columns hang off the cut ---------- */
@media (min-width: 992px) {
  .slope, .pitch-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .hang, .hang-top { padding-top: calc(var(--clear) + var(--rise) * (12 - var(--at, 0)) / 12); }
  .hang, .hang-foot { padding-bottom: calc(var(--clear) + var(--rise) * (12 - var(--at, 0)) / 12); }

  .hero-lead { grid-column: 1 / span 7; }
  .hero-side { grid-column: 8 / -1; }

  .row-sources {
    grid-template-rows: auto auto minmax(0, 1fr);

    & .row-title { grid-column: 1 / span 6; grid-row: 1; }
    & .sources-table-wrap { grid-column: 1 / span 8; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
    & .sources-notes { grid-column: 9 / -1; grid-row: 1 / span 3; }
    & .sources-close { grid-column: 1 / span 8; grid-row: 3; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  }

  .row-spend {
    grid-template-rows: auto minmax(0, 1fr);

    /* The source goes straight under the heading; "The same research" starts a line below it, across the row. */
    & .row-title { grid-column: 6 / -1; grid-row: 1; }
    & .spend-sentence { grid-column: 6 / -1; grid-row: 2; }
    & .spend-more { grid-column: 1 / span 5; grid-row: 2; margin-top: calc(var(--spend-gap) + 1.75em); }
  }

  .row-inspect {
    grid-template-rows: auto minmax(0, 1fr);

    & .inspect-lead { grid-column: 1 / span 5; grid-row: 1 / span 2; }
    & .inspect-draw { grid-column: 6 / -1; grid-row: 1; }
    & .inspect-life { grid-column: 6 / -1; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
  }

  .row-permits {
    grid-template-rows: auto minmax(0, 1fr);

    & .row-title { grid-column: 8 / -1; grid-row: 1; }
    & .permits-first { grid-column: 1 / span 6; grid-row: 1 / span 2; }
    & .row-body { grid-column: 8 / -1; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  }

  .row-figure {
    & .figure-lead { grid-column: 1 / span 6; align-self: stretch; display: flex; flex-direction: column; }
    & .figure-trade { margin-top: auto; }
    & .figure-field { grid-column: 7 / -1; }
  }

  .row-plan {
    grid-template-rows: auto minmax(0, 1fr);

    & .row-title { grid-column: 8 / -1; grid-row: 1; }
    & .plan-steps { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
    & .plan-steps li:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / -1; }
    & .plan-steps li:nth-child(2) { grid-column: 4 / span 4; grid-row: 1; }
    & .plan-steps li:nth-child(3) { grid-column: 4 / span 4; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
    & .plan-steps li:nth-child(4) { grid-column: 8 / -1; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  }

  .row-costs {
    & .costs-lead { grid-column: 1 / span 6; align-self: stretch; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); }
  }

  .row-faq {
    grid-template-rows: auto minmax(0, 1fr);

    & .row-title { grid-column: 9 / -1; grid-row: 1; }
    & .faq-col:nth-of-type(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; }
    & .faq-col:nth-of-type(2) { grid-column: 5 / span 4; grid-row: 1 / span 2; }
    & .faq-col:nth-of-type(3) { grid-column: 9 / -1; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  }

  .row-places {
    grid-template-rows: auto minmax(0, 1fr);

    & .places-head { grid-column: 1 / span 6; grid-row: 1; }
    & .places-table { grid-column: 1 / span 7; grid-row: 2; }
    & .places-zips { grid-column: 8 / -1; grid-row: 1 / span 2; }
    & .others { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; }
  }

  .row-close {
    grid-template-rows: auto minmax(0, 1fr);

    & .close-title { grid-column: 4 / -1; grid-row: 1; text-align: right; }
    & .close-body { grid-column: 6 / -1; grid-row: 2; margin-top: clamp(1rem, 2vw, 1.5rem); text-align: right; }
  }
}

/* The figure and its qualifier share a line once there's room for both. */
@media (min-width: 1280px), (min-width: 768px) and (max-width: 991.98px) {
  .spend-sentence {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: center;
  }
  .spend-lead, .spend-rest { grid-column: 1 / -1; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .spend-on { font-size: var(--t-m); }
}

/* This narrow heading only fits its longest word from here up, and the drawing's words need a size up to stay readable. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .row-faq .row-title { font-size: var(--t-l); }
  .roof-drawing-wide text { font-size: 22px; }
  /* The cities table runs tall against this narrower column, so the ZIPs stack and close the gap above the other trades. */
  .places-zips .chip-list { display: grid; justify-items: start; }
}

/* ---------- Narrow: one column, so the padding clears the whole cut ---------- */
@media (max-width: 991.98px) {
  .pitch-hero { padding-bottom: calc(var(--clear) + var(--rise)); }
  .hero-greeting { margin-bottom: 1rem; }
  .slope {
    padding-top: calc(var(--clear) + var(--rise) * 0.8);
    padding-bottom: calc(var(--clear) + var(--rise));
  }
  /* The heading keeps to the high side, inside the part of the row the cut leaves open. */
  .slope .row-title { max-width: 80%; }
  .high-right .row-title { margin-left: auto; text-align: right; }
  .row-title + *, .sources-table-wrap + * { margin-top: 1.25rem; }
  .spend-sentence + .spend-more, .permits-first + .row-body, .sources-notes + .sources-close { margin-top: 1.25rem; }
  /* The words on the drawing sit right under the sentence that names them. */
  .row-inspect { display: flex; flex-direction: column; }
  .inspect-lead { display: contents; }
  .inspect-scope { order: 1; }
  .inspect-draw { order: 2; margin-block: 1.5rem 0.5rem; }
  .left-out { order: 3; }
  .inspect-near { order: 4; }
  .inspect-life { order: 5; margin-top: 1.25rem; }
  .inspect-life .life-bars { margin-top: 1.25rem; }
  .figure-field { margin-top: 1.5rem; }
  .plan-steps li + li { margin-top: 1.25rem; }
  .costs-table { margin-top: 1.25rem; }
  .row-faq .faq-col + .faq-col { margin-top: 1.25rem; }
  .others { margin-top: 2.5rem; }
  .places-zips { margin-top: 1.75rem; }
  .close-body { margin-top: 1rem; }
  .row-close .close-body { text-align: right; }
}

/* ---------- Tablet: the column is wide enough for two, so the words split under one full-width heading ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .pitch-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gutter);
    align-items: end;
  }
  .hero-side { display: contents; }
  .hero-lead { grid-column: 1; grid-row: 1; }
  .hero-count { grid-column: 2; grid-row: 1; padding-bottom: 1rem; }
  .hero-title, .hero-intro, .hero-action { grid-column: 1 / -1; }
  .hero-title { margin-top: 0; }

  /* A shorter heading box needs less drop: it stops further down the slope from the row's low side. */
  .slope {
    --head: 0.64;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
    padding-top: calc(var(--clear) + var(--rise) * var(--head));

    & > *, & .places-head, & .places-table { grid-column: 1 / -1; min-width: 0; }
  }
  .slope .row-title { max-width: calc(var(--head) * 100%); }

  .sources-notes {
    columns: 2;
    column-gap: var(--gutter);

    & p { break-inside: avoid; }
    & p + p { margin-top: 0; }
    & p:not(:last-child) { margin-bottom: 0.8rem; }
  }

  .spend-more { max-width: 72ch; }

  .row-inspect {
    display: grid;

    & .row-title, & .inspect-scope, & .inspect-draw, & .inspect-life { grid-column: 1 / -1; }
    & .left-out { grid-column: 1; }
    & .inspect-near { grid-column: 2; }
    & .inspect-life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
    & .life-bars { margin-top: 0; }
  }

  .row-permits {
    & .permits-first { grid-column: 1; }
    & .row-body { grid-column: 2; margin-top: 1.25rem; }
  }

  .row-figure {
    & .figure-lead { display: contents; }
    & .row-title, & .figure-window, & .figure-field { grid-column: 1 / -1; }
    & .figure-trade, & .figure-count { grid-column: 1; }
    & .figure-lead > p:last-child { grid-column: 2; grid-row: 3 / span 2; align-self: end; margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
  }

  .plan-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem var(--gutter);

    & li + li { margin-top: 0; }
  }

  .row-costs {
    & .costs-lead { display: contents; }
    & .row-title, & .costs-lead > p { grid-column: 1 / -1; }
  }

  .row-faq {
    & .faq-col:nth-of-type(1) { grid-column: 1; }
    & .faq-col:nth-of-type(2) { grid-column: 2; }
    & .faq-col:nth-of-type(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
    & .faq-col:nth-of-type(3) div + div { margin-top: 0; }
  }

  .row-places {
    & .places-zips { grid-column: 1; }
    & .others { grid-column: 2; margin-top: 1.75rem; }
  }
}

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
  .roof-drawing-wide { display: none; }
  .roof-drawing-phone { display: block; max-width: 30rem; margin-inline: auto; }
  .roof-drawing text { font-size: 15px; }
  .figure-field .unit-field, html.js .figure-field .unit-field.is-columns { grid-template-rows: repeat(28, auto); gap: 2px; }
  .close-title { font-size: var(--t-xl); }
  .sources-table {
    display: block;

    & thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    & tbody, & tr, & th, & td { display: block; }
    & tr { padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
    & tbody th, & tbody td { padding: 0; border: 0; }
    & tbody th { font-size: var(--t-body); }
    & tbody td { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 0.75rem; padding-top: 0.15rem; }
    & tbody td::before { content: attr(data-label); color: var(--fg-muted); }
    & tbody td:nth-of-type(2) { white-space: normal; }
  }
}

/* ---------- One authored moment: the first cut lifts from flat to pitch on load ---------- */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.reduced) .row-sources { animation: lift-to-pitch 0.5s var(--soft) both; }
    @keyframes lift-to-pitch {
      from { clip-path: polygon(0 var(--rise), 100% var(--rise), 100% 100%, 0 100%); }
    }
  }
}

/* ---------- The national guide names no place and shows no market's number (docs/plan-national-pages.md) ----------
   The rows changed with the national switch use class names the pages by place don't use: the night row holds the
   made-up sample row and, once nationalFigures.json has one, a national month chart; the costs row holds the cost
   calculator; the hero holds a national figure once there is one; the cities row lists the covered states. */

/* The hero's national figure: the number, what it counts, and its source. Its lines keep a short measure, so on a
   tablet, where the figure takes the hero's narrow second column, the greeting keeps its room. */
.hero-national .hero-count-where { margin-top: 0.35rem; }
.hero-national { max-width: 26rem; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-national { max-width: 16rem; }
}
.national-source {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  line-height: 1.35;

  & a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & .national-read { display: block; }
}

/* The national month chart: the chart's name on the high side and its source settling to the foot of the column, so
   the credit reads level with the chart's baseline across the row. No month is singled out; the bars carry the year. */
.month-lead .national-source { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); max-width: 52ch; }
.month-table { margin-top: 1rem; }
/* With no month marked, every bar is set in full ink rather than the chart's dimmed "not this one" tone. */
.national-months .big-col-bar { background: var(--fg); }

/* The sample row: one made-up row of the file, its fields read left to right the way a row of the file runs, ruled
   the way the inspection row rules its list. Each field shows its value in the heading face, then its label and the
   file's own column name under it. (The home page's sample uses .sample-*, so this one is .example-*.) */
.example, .national-months { display: contents; }
.example-note { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: var(--t-m); line-height: 1.32; max-width: 52ch; }
.example-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.example-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gutter);
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
}
.example-field {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.3rem;
  padding-block: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--line);

  & dt { display: grid; gap: 0.1rem; }
  & dd {
    margin: 0;
    font-family: var(--f-head);
    font-size: var(--t-m);
    font-weight: var(--w-sub);
    letter-spacing: -0.015em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    font-variant-numeric: lining-nums tabular-nums;
  }
}
.example-label { font-size: var(--t-s); font-weight: 650; line-height: 1.3; }
.example-column { font-size: var(--t-xs); color: var(--fg-muted); overflow-wrap: anywhere; }
/* Two fields a line on a tablet or a wide phone, four once the row is a twelve-column grid; the last line's rule is
   the ledger's own. */
@media (min-width: 576px) {
  .example-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example-field:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
  .example-field:last-child { border-bottom: 0; }
}
@media (min-width: 992px) {
  .example-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .example-field:nth-last-child(-n + 4) { border-bottom: 0; }
}

/* The cost calculator: the reader's two boxes at the foot of the high side, the results down the slope as a ruled
   ledger, each value over its formula. With no script the boxes stay hidden and the formulas do the explaining. */
.costs-how { margin-top: 0.9rem; max-width: 72ch; }
.calc-inputs {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 34rem;
}
.calc-field {
  & input { max-width: 16rem; font-size: var(--t-m); font-weight: 650; font-variant-numeric: tabular-nums; }
}
.calc-money {
  position: relative;
  display: block;
}
/* Past the house form rule's own padding (pages.css, .field input), so the dollar sign sits clear of the number. */
.field.calc-field .calc-money input { padding-left: 1.85rem; }
.calc-unit {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  font-size: var(--t-m);
  font-weight: 650;
  pointer-events: none;
}
.calc-help { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.35; max-width: 52ch; }
/* The ledger's rules sit on its first and last rows, not on the list: on a wide screen the list's box takes the slope's
   clearance as padding, and a rule on the box would float that far from the figures. */
.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: 1rem;
  align-items: baseline;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);

  &:first-child { border-top: 2px solid var(--fg); }
  &:last-child { border-bottom: 2px solid var(--fg); }
  & dt { font-size: var(--t-m); font-weight: 750; line-height: 1.25; }
  & dd { margin: 0; display: grid; justify-items: end; text-align: right; }
}
.calc-value {
  font-family: var(--f-head);
  font-size: var(--t-l);
  font-weight: var(--w-loud);
  letter-spacing: var(--track-l);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}
.calc-total .calc-value { font-size: var(--t-xl); letter-spacing: var(--track-xl); }
.calc-how {
  margin-top: 0.2rem;
  max-width: 30ch;
  font-size: var(--t-s);
  line-height: 1.35;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.calc-echo { color: var(--fg); font-weight: 650; }

/* The calculator's button, the example's tag and the prompt in roofing's look. The tag takes the sample row's tag
   style, since both mark something made up; the button is the house's round press. What the demo needs from any
   design (the cursor, the held room for the tag and prompt, the pressed and typing states) is in pages.css. */
.calc-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;

  & input { flex: 0 1 16rem; min-width: 0; }
}
.calc-example {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs);
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}
.calc-go {
  white-space: normal;
  text-align: left;
}
.calc-prompt { font-size: var(--t-m); font-weight: 650; line-height: 1.3; max-width: 34ch; }
.month-caption { margin-top: 1rem; max-width: 60ch; }

/* The covered states: a ruled ledger of big arrow links, one per state, the way the inspection row rules its list. */
.covered { display: contents; }
.covered-caption { margin-top: 0.6rem; max-width: 52ch; }
.covered-list {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);

  & li + li { border-top: 1px solid var(--line); }
}
.covered-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  font-family: var(--f-head);
  font-size: var(--t-l);
  font-weight: var(--w-head);
  letter-spacing: var(--track-l);
  line-height: 1.1;
  text-decoration: none;

  & .fa-solid { flex: none; font-size: 0.55em; transition: translate 0.45s var(--roll); }
  &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
}
@media (hover: hover) {
  a.covered-place:hover .fa-solid { translate: 6px 0; }
}

@media (min-width: 992px) {
  /* High-left, dark. The sample's heading on the high side, the file's fields across the whole row under it. With a
     national month chart, the chart does the same: its short heading and source on the high side, the bars across the
     whole row under them with the caption beneath (a short heading beside a half-row chart left a dead column, 2026-11-12),
     then the sample. The first line of the grid is at least as deep as the cut on the low side, so the bars always
     start clear of it, however short the heading. */
  .row-sample {
    grid-template-rows: auto minmax(0, 1fr);

    & .example-head { grid-column: 1 / span 6; grid-row: 1; }
    & .example-file { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  }
  .row-sample.has-months {
    grid-template-rows: minmax(calc(var(--clear) + var(--rise)), auto) auto auto minmax(0, 1fr);

    & .month-lead { grid-column: 1 / span 6; grid-row: 1; }
    & .month-chart { grid-column: 1 / -1; grid-row: 2; padding-top: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
    & .example-head { grid-row: 3; margin-top: clamp(3rem, 6vw, 5rem); }
    & .example-file { grid-row: 4; }
  }

  /* High-left, cream: the heading, its sentences and the reader's boxes on the high side, the results down the slope. */
  .row-costs {
    & .costs-inputs { align-self: end; }
    & .costs-results { grid-column: 7 / -1; }
  }

  /* High-left, yellow: the heading and the states on the high side, the other trades down the slope. */
  .row-covered {
    grid-template-rows: auto minmax(0, 1fr);

    & .covered-head { grid-column: 1 / span 6; grid-row: 1; }
    & .covered-list { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
    & .others { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; }
  }
}
@media (max-width: 991.98px) {
  .month-chart { margin-top: 1.75rem; }
  .row-sample.has-months .example-head { margin-top: 3rem; }
  .example-file { margin-top: 1.75rem; }
  .costs-results { margin-top: 1.75rem; }
  .row-covered .others { margin-top: 2.5rem; }
}
/* Tablet: the night row's blocks each take the full width (its sections are display: contents, so the row's own
   full-width rule for its children doesn't reach them); the boxes and the results sit side by side. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .row-sample {
    & .month-lead, & .month-chart, & .example-head, & .example-file { grid-column: 1 / -1; min-width: 0; }
  }
  .row-costs {
    & .costs-inputs { grid-column: 1; align-self: start; }
    & .costs-results { grid-column: 2; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  }
  .row-covered {
    & .covered-head, & .covered-list { grid-column: 1 / -1; }
    & .others { grid-column: 1 / -1; }
  }
}

/* ==================== Trade pages by place: /for/roofers/<state>/ and /for/roofers/<state>/<city>/ ====================
   The state and city pages keep the cut, the grounds and the type above, and lay out their own rows here
   (trades/local/roofers-local.njk). Every rule is scoped to those pages, so nothing above changes on the national guide.
   The at-N classes in the partial follow the same arithmetic: a block's low-side edge, in columns up the slope. */
[data-page="trade-local"] {
  /* The greeting fits its column by its longest word (the partial sets who-len-N), so a long city name steps the
     size down instead of running into the column beside it. 0.6em is a wide letter's share of Montserrat's width. */
  & .hero-lead { container-type: inline-size; }
  & .hero-greeting { font-size: min(var(--t-mega), calc(100cqi / var(--who-len, 7) / 0.6)); }
  & .who-len-6 { --who-len: 6; } & .who-len-7 { --who-len: 7; } & .who-len-8 { --who-len: 8; } & .who-len-9 { --who-len: 9; }
  & .who-len-10 { --who-len: 10; } & .who-len-11 { --who-len: 11; } & .who-len-12 { --who-len: 12; } & .who-len-13 { --who-len: 13; }
  & .who-len-14 { --who-len: 14; } & .who-len-15 { --who-len: 15; } & .who-len-16 { --who-len: 16; }

  /* Licensing: the paragraphs on the high side, the requirements down the slope as a ruled ledger. */
  & .license-body { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  & .license-body p { max-width: 64ch; }
  & .license-body p + p { margin-top: 0.9rem; }
  & .license-lead { font-size: var(--t-m); line-height: 1.32; font-weight: 500; }
  & .license-needs-title { font-size: var(--t-m); font-weight: var(--w-sub); line-height: 1.2; margin-bottom: 0.9rem; }
  & .license-list {
    counter-reset: need;
    border-top: 2px solid var(--fg);
    border-bottom: 2px solid var(--fg);

    & li {
      counter-increment: need;
      display: grid;
      grid-template-columns: 2.25rem minmax(0, 1fr);
      column-gap: 0.75rem;
      padding-block: 0.7rem;
      font-weight: 600;
      line-height: 1.32;
    }
    & li + li { border-top: 1px solid var(--line); }
    & li::before {
      content: counter(need);
      font-family: var(--f-head);
      font-size: var(--t-m);
      font-weight: var(--w-loud);
      line-height: 1.1;
      font-variant-numeric: lining-nums tabular-nums;
    }
  }

  /* What a row carries: the sentence about every row on the low side, the pulled figure under the heading. */
  & .rows-lead { font-size: var(--t-m); line-height: 1.32; max-width: 62ch; }
  & .rows-moving p + p { margin-top: 0.9rem; }
  & .rows-moving p:not(.rows-lead) { max-width: 64ch; }
  & .rows-pull { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  & .rows-pull-name { margin-top: 0.5rem; font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
  & .rows-fresh { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 60ch; }
  & .rows-line { margin-top: 0.9rem; font-size: var(--t-m); font-weight: 650; line-height: 1.28; letter-spacing: -0.01em; max-width: 60ch; }

  /* Places and the links out: big arrow links to the same trade elsewhere, chips for the other trades. */
  & .places-table { margin-top: clamp(1rem, 2.4vw, 1.75rem); }
  & .local-more .links-title, & .others .links-title { margin-bottom: 0.75rem; }
  & .more-links { border-top: 2px solid var(--fg); }
  & .more-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--f-head);
    font-size: var(--t-m);
    font-weight: var(--w-sub);
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-decoration: none;

    & .fa-solid { flex: none; font-size: 0.8em; transition: translate 0.45s var(--roll); }
    &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  }
  & .permits-license { margin-top: 1.25rem; max-width: 34rem; }
  & .permits-license .more-link { border-top: 2px solid var(--fg); border-bottom-width: 2px; border-bottom-color: var(--fg); }

  /* Permit records. */
  & .permits-lead .permits-first { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
  & .permits-rule p { max-width: 60ch; }
  & .permits-rule p + p { margin-top: 0.9rem; }

  /* The permit filter: one sentence set large, its caveat in the body face. */
  & .filter-use {
    font-family: var(--f-head);
    font-size: var(--t-l);
    font-weight: var(--w-head);
    letter-spacing: var(--track-l);
    line-height: 1.12;
    max-width: 30ch;
  }
  & .filter-left p { padding-top: 0.9rem; border-top: 2px solid var(--fg); font-size: var(--t-m); line-height: 1.32; max-width: 40ch; }

  /* ZIPs on a dark ground. The trade chips' block carries the spacing, so the national .others margin comes off. */
  & .zips-chips .zips-title { margin-top: 0; color: var(--fg); font-size: var(--t-m); }
  & .zips-trades .others { margin-top: 0; }
  & .zips { display: contents; }
}
@media (hover: hover) {
  [data-page="trade-local"] .more-link:hover .fa-solid { translate: 4px 0; }
}

/* Wide: each row's blocks hang off its own cut. */
@media (min-width: 992px) {
  [data-page="trade-local"] {
    /* High-left, dark. The heading and paragraphs take the high side; the ledger starts down the slope. */
    & .local-license {
      grid-template-rows: auto minmax(0, 1fr);

      & .row-title { grid-column: 1 / span 7; grid-row: 1; }
      & .license-body { grid-column: 1 / span 6; grid-row: 2; }
      & .license-needs { grid-column: 8 / -1; grid-row: 1 / span 2; }
    }

    /* High-right, cream. The heading on the high side with the figure under it; the row's sentence on the low side. */
    & .local-rows {
      grid-template-rows: auto minmax(0, 1fr);

      & .row-title { grid-column: 8 / -1; grid-row: 1; }
      & .rows-moving { grid-column: 1 / span 6; grid-row: 1 / span 2; }
      & .rows-facts { grid-column: 8 / -1; grid-row: 2; }
    }

    /* High-left, yellow: the national places row, with links where the ZIPs were. */
    & .local-places {
      grid-template-rows: auto minmax(0, 1fr);

      & .places-head { grid-column: 1 / span 6; grid-row: 1; }
      & .places-table { grid-column: 1 / span 7; grid-row: 2; }
      & .local-links { grid-column: 8 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
    }

    /* High-left, dark: the ZIPs and the other trades on the high side, the roofing links down the slope. */
    & .local-zips {
      grid-template-rows: auto auto minmax(0, 1fr);

      & .zips .row-title { grid-column: 1 / span 7; grid-row: 1; }
      & .zips-chips { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
      & .zips-trades { grid-column: 1 / span 7; grid-row: 3; margin-top: clamp(2rem, 4vw, 3rem); }
      & .local-links { grid-column: 8 / -1; grid-row: 1 / span 3; }
    }

    /* High-left, cream. */
    & .local-permits {
      grid-template-rows: auto minmax(0, 1fr);

      & .row-title { grid-column: 1 / span 7; grid-row: 1; }
      & .permits-lead { grid-column: 1 / span 6; grid-row: 2; }
      & .permits-rule { grid-column: 8 / -1; grid-row: 1 / span 2; }
    }

    /* High-right, dark: the national figure row turned around, its heading on the high side. */
    & .local-figure {
      & .figure-lead { grid-column: 7 / -1; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; }
      & .figure-trade { margin-top: auto; }
      & .figure-field { grid-column: 1 / span 6; grid-row: 1; }
    }

    /* High-left, yellow. */
    & .local-filter {
      grid-template-rows: auto minmax(0, 1fr);

      & .row-title { grid-column: 1 / span 6; grid-row: 1; }
      & .filter-use { grid-column: 1 / span 7; grid-row: 2; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
      & .filter-left { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; }
    }

    /* High-right, cream: the national costs row turned around. */
    & .local-costs {
      & .costs-lead { grid-column: 7 / -1; grid-row: 1; align-self: stretch; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
      & .costs-pull { align-self: end; }
      & .costs-table { grid-column: 1 / span 6; grid-row: 1; }
      & .cost-table { font-size: var(--t-m); }
    }
  }
}

/* Narrow: one column, so each block follows the one before it. */
@media (max-width: 991.98px) {
  [data-page="trade-local"] {
    & .license-needs, & .rows-facts, & .permits-rule, & .filter-left { margin-top: 1.75rem; }
    & .filter-use { margin-top: 1.25rem; }
    & .local-links { margin-top: 1.75rem; }
    & .local-links .others, & .zips-trades { margin-top: 2.5rem; }
    & .zips-chips { margin-top: 1.25rem; }
  }
}

/* Tablet: two columns under a full-width heading, as on the national guide. */
@media (min-width: 768px) and (max-width: 991.98px) {
  [data-page="trade-local"] {
    & .local-license {
      & .license-body { grid-column: 1; }
      & .license-needs { grid-column: 2; }
    }
    & .local-rows {
      & .rows-moving { grid-column: 1; }
      & .rows-facts { grid-column: 2; margin-top: 0; }
    }
    & .local-places .local-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
    & .local-links .others { margin-top: 0; }
    & .local-zips {
      /* The section is display: contents, so its heading and chips aren't the row's direct children. */
      & .zips .row-title, & .zips-chips { grid-column: 1 / -1; min-width: 0; }
      & .zips-trades { grid-column: 1; grid-row: 3; }
      & .local-links { grid-column: 2; grid-row: 3; margin-top: 2.5rem; }
    }
    & .local-permits {
      & .permits-lead { grid-column: 1; }
      & .permits-rule { grid-column: 2; margin-top: 1.25rem; }
    }
    & .local-figure {
      & .figure-lead { display: contents; }
      & .row-title, & .figure-window, & .figure-field { grid-column: 1 / -1; }
      & .figure-trade, & .figure-count { grid-column: 1; }
      & .figure-lead > p:last-child { grid-column: 2; grid-row: 3 / span 2; align-self: end; margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
    }
    & .local-filter .filter-left { grid-column: 2; }
    & .local-costs {
      & .costs-lead { display: contents; }
      & .row-title, & .costs-lead > p { grid-column: 1 / -1; }
      & .costs-pull { grid-column: 1; }
      & .costs-table { grid-column: 2; }
    }
  }
}