/* Plumbing, the run: one pipe from the hero to the closing button, one CSS segment per row.
   Each segment takes --fg from its own ground, so the walls are ink on yellow and yellow on night.
   Straights are banded gradients. Elbows are nine-slice border images (the pipe-*.svg files), so the
   run stays joined at any width and any row height, and the bands carry round every bend.
   The water in assets/js/trades/plumbing.js fills the bore on top of all this; the page is complete without it. */
:root {
  /* Whole-pixel gauge. A fluid value rounds differently in each half of a bend and leaves a step in the pipe.
     The art is drawn at 24 wide and 88 outer radius, with 4 of margin for the collars; these scale it. */
  --p: 1.5rem;
  --r: 5.5rem;
  --art-w: calc(var(--p) * 92 / 24);
  --art-o: calc(var(--p) * 4 / 24);
  --wall: calc(var(--p) * 5 / 24);
  --flange: calc(var(--p) * 56 / 24);
  --bore: var(--ramp-4);
  --shine: var(--ramp-2);
  --art: url('/assets/img/trades/plumbing/pipe-ink.svg');
  --rail: var(--gutter);
  --collar: 0.3rem;
  --rail-gap: calc(var(--r) - var(--p) + 1.25rem);
  --hang: calc(var(--r) - var(--p) - 1.75rem);
  --row-end: clamp(3rem, 5vw, 5rem);
  --pad: calc(var(--rail) + var(--p) + var(--rail-gap));
}

/* ---------- The pipe ---------- */
.night { --art: url('/assets/img/trades/plumbing/pipe-yellow.svg'); }
.row { position: relative; }
.lit-row { --ground: var(--lit); }
.row, .older-block {
  --bands: var(--fg) var(--wall), var(--bore) 0 calc(50% - 1px), var(--shine) 0 calc(50% + 1px), var(--bore) 0 calc(100% - var(--wall)), var(--fg) 0;
}

.row-body {
  position: relative;
  margin-top: calc(var(--hang) * -1);
  padding-bottom: var(--row-end);

  &::before { content: ''; position: absolute; top: var(--hang); bottom: 0; width: var(--p); background: linear-gradient(90deg, var(--bands)); }
  /* Wall straps at intervals down the rail. The tile is a mask, so each strap takes its row's color. */
  &::after {
    content: ''; position: absolute; z-index: 3; top: var(--hang); bottom: 0; width: var(--flange); background: var(--fg); pointer-events: none;
    mask: url('/assets/img/trades/plumbing/strap.svg') center top / 100% 25rem no-repeat;
    mask-repeat: no-repeat round;
  }
  .rail-left & { padding-inline: var(--pad) var(--gutter); }
  .rail-left &::before { left: var(--rail); }
  .rail-left &::after { left: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
  .rail-right & { padding-inline: var(--gutter) var(--pad); }
  .rail-right &::before { right: var(--rail); }
  .rail-right &::after { right: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
}

/* Every elbow is one corner of the ring art: the box says which sides show. */
.bend::before, .bend::after, .hero-main, .cut-box, .cut-elbow, .plan-trap, .trap-in, .trap-out, .run-tail::after {
  border: 0 solid; border-image-source: var(--art); border-image-slice: 92; border-image-repeat: stretch;
}
.bend {
  position: relative;
  height: calc(var(--r) * 2 - var(--p));

  &::before, &::after { content: ''; position: absolute; height: var(--r); }
  &::before { top: 0; }
  &::after { top: calc(var(--r) - var(--p)); }
}
.bend-to-left {
  &::before {
    right: var(--rail); left: calc(50% - 1px); border-width: 0 var(--p) var(--p) 0;
    border-image-width: 0 var(--art-w) var(--art-w) 0; border-image-outset: 0 var(--art-o) var(--art-o) 0;
  }
  &::after {
    left: var(--rail); right: 50%; border-width: var(--p) 0 0 var(--p);
    border-image-width: var(--art-w) 0 0 var(--art-w); border-image-outset: var(--art-o) 0 0 var(--art-o);
  }
  & .part-flange { right: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
}
.bend-to-right {
  &::before {
    left: var(--rail); right: calc(50% - 1px); border-width: 0 0 var(--p) var(--p);
    border-image-width: 0 0 var(--art-w) var(--art-w); border-image-outset: 0 0 var(--art-o) var(--art-o);
  }
  &::after {
    right: var(--rail); left: 50%; border-width: var(--p) var(--p) 0 0;
    border-image-width: var(--art-w) var(--art-w) 0 0; border-image-outset: var(--art-o) var(--art-o) 0 0;
  }
  & .part-flange { left: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
}

/* Fittings sit above the water, so it runs under them. */
.part { position: absolute; z-index: 3; display: block; max-width: none; overflow: visible; color: var(--fg); fill: currentColor; pointer-events: none; }
.part-flange { top: 0; width: var(--flange); height: calc(var(--p) * 20 / 24); }
.part-cross-strap {
  left: 50%; top: calc(var(--r) - var(--p) / 2); width: var(--flange); height: calc(var(--p) * 14 / 24);
  translate: -50% -50%; rotate: 90deg;
}
.plan-row > .part-flange, .run-cta > .part-flange { right: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
.part-valve { width: 6rem; height: 7.75rem; }
.part-gauge { width: 5.5rem; height: 7.75rem; }

/* ---------- Shared type ---------- */
.run-title {
  font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-head);
  letter-spacing: var(--track-xl); line-height: 1.02;
}
.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.95; font-variant-numeric: tabular-nums;
}
.pulled-figure-small { font-size: var(--t-xl); line-height: 1; }

/* ---------- Hero: one beat between every step, from the greeting down to the intro ---------- */
.run-hero { --beat: clamp(1.75rem, 2.8vw, 2.5rem); padding-top: calc(var(--header-h) + 0.5rem); }
.hero-top {
  /* Same three columns as the sentences under the pipe. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  padding: 0 var(--pad) var(--beat) var(--gutter);

  & .crumbs { grid-column: 1 / -1; }
}
.run-greeting {
  grid-column: 1 / -1; margin-right: calc(var(--gutter) - var(--pad)); padding-block: calc(var(--beat) / 2) var(--beat);
  font-family: var(--f-head); font-size: min(var(--t-mega), 11.9vw); letter-spacing: var(--track-mega); line-height: 1.06; white-space: nowrap;

  & .run-hello { font-weight: var(--w-quiet); }
  & .run-place { font-weight: var(--w-loud); }
}
.hero-offer { display: grid; gap: calc(var(--beat) / 2); justify-items: start; }
.run-headline {
  font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head);
  letter-spacing: var(--track-l); line-height: 1.06;
}
.run-count-label { font-size: var(--t-body); font-weight: 650; line-height: 1.2; }
.run-count-num {
  font-family: var(--f-head); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: var(--w-loud);
  letter-spacing: var(--track-xl); line-height: 1; font-variant-numeric: tabular-nums; margin-left: -0.08em;
}
.run-count-unit { margin-top: 0.45rem; font-size: var(--t-body); color: var(--fg-muted); line-height: 1.2; }
.hero-main {
  position: relative; margin-right: var(--rail);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
  border-width: var(--p) var(--p) 0 0;
  border-image-width: var(--art-w) var(--art-w) 0 0; border-image-outset: var(--art-o) var(--art-o) 0 0;
  padding: var(--beat) var(--rail-gap) var(--beat) var(--gutter);
  font-size: var(--t-m); line-height: 1.38;
}
/* The shutoff, then a gauge just past it, where the service line comes in. Both stand on the pipe. */
.hero-fittings {
  position: absolute; z-index: 3; top: calc(var(--p) / -2 - 6.5rem); right: calc(var(--rail-gap) + 2rem);
  display: flex; gap: 4rem;

  & .part { position: static; }
}

/* ---------- Where leads come from: the table takes the row ---------- */
.sources-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);

  & .run-title { grid-column: 1 / span 6; }
}
.sources-lead { grid-column: 7 / -1; align-self: end; font-size: var(--t-m); line-height: 1.35; }
.sources-table-wrap { grid-column: 1 / -1; min-width: 0; }
.run-sources-table {
  width: 100%; font-size: var(--t-body); line-height: 1.3;

  & :is(th, td) { padding: 0.7rem 1.5rem 0.7rem 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; }
  & td:nth-child(3) { color: var(--fg-muted); }
  & td.has-price { color: var(--fg); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
}
.sources-notes {
  grid-column: 1 / -1; columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); font-size: var(--t-body);

  & p { break-inside: avoid; margin-bottom: 0.9rem; }
}

/* ---------- New homeowners ---------- */
.owners-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;

  & .run-title { grid-column: 1 / span 5; }
}
.owners-spend { grid-column: 6 / -1; font-size: var(--t-m); line-height: 1.38; display: grid; gap: 0.5rem; }
/* The figure stays inside its sentence, so its qualifiers sit against it and it can't read as a plumbing share. */
.spend { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: end; }
.spend-lead { grid-column: 1 / -1; }
.spend-figure {
  grid-column: 1; font-family: var(--f-head); font-size: min(var(--t-mega), 9.5vw); font-weight: var(--w-loud);
  letter-spacing: var(--track-mega); line-height: 1.02; white-space: nowrap; font-variant-numeric: tabular-nums;

  & small { font-size: var(--t-l); font-weight: var(--w-sub); letter-spacing: var(--track-l); }
}
.spend-more {
  grid-column: 2; padding-bottom: 0.45em; font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub);
  letter-spacing: -0.015em; line-height: 1.15;
}
.spend-rest { grid-column: 1 / -1; margin-top: 0.5rem; }
.spend-scope { font-weight: 650; }
.owners-inspection {
  grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--ink); color: var(--porch);
}
.inspection-side {
  padding: clamp(1rem, 2vw, 1.5rem);

  & + .inspection-side { background: var(--lit); color: var(--ink); }
  & ul { margin-top: 0.75rem; display: grid; gap: 0.15rem; }
  & li { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; }
}
.inspection-lead { line-height: 1.3; }
.owners-heater { grid-column: 6 / span 3; }
.signs-lead { margin-top: 0.75rem; }
.signs-list { font-weight: 650; }
.owners-leaks { grid-column: 9 / -1; display: grid; gap: 0.25rem; }

/* ---------- Older homes and the lead pipe cutoff: the pipe lies down and becomes the timeline ---------- */
.older-block { position: relative; overflow: clip; background: var(--ground); color: var(--fg); padding-bottom: var(--row-end); }
.older-grid {
  display: grid; grid-template-columns: var(--p) minmax(0, 1fr); column-gap: var(--rail-gap);
  margin-top: calc(var(--hang) * -1); padding-inline: var(--rail);

  &::before { content: ''; grid-column: 1; grid-row: 1 / 3; margin-top: var(--hang); background: linear-gradient(90deg, var(--bands)); }
  &::after {
    content: ''; position: relative; z-index: 3; grid-column: 1; grid-row: 1 / 3; justify-self: center; width: var(--flange); margin-top: var(--hang);
    background: var(--fg); pointer-events: none;
    mask: url('/assets/img/trades/plumbing/strap.svg') center top / 100% 25rem no-repeat;
    mask-repeat: no-repeat round;
  }
}
.older-words {
  grid-column: 2; grid-row: 1; padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;

  & .run-title { margin-bottom: 0.75rem; }
  & .older-more p + p { margin-top: 0.75rem; }
}
.figure-section { display: contents; }
.figure-words {
  grid-column: 2; grid-row: 2; padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: end;
}
.figure-note { font-size: var(--t-s); color: var(--fg-muted); }
.figure-trade { margin-top: 0.4rem; font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); line-height: 1.2; }
.figure-rest { margin-top: 0.25rem; }
/* The count sits over the bars it adds up. */
.figure-count {
  position: absolute; z-index: 1; top: 0; left: calc(var(--r) + 0.25rem); display: grid;

  & strong {
    font-family: var(--f-head); font-size: min(var(--t-mega), 10.5vw); font-weight: var(--w-loud);
    letter-spacing: var(--track-mega); line-height: 1; font-variant-numeric: tabular-nums; margin-left: -0.09em;
  }
  & span { margin-top: 0.5rem; font-weight: 650; line-height: 1.2; }
  & small { font-size: var(--t-xs); color: var(--fg-muted); }
}
.cut-caveat {
  position: absolute; z-index: 1; top: calc(var(--t-l) + 0.75rem); right: 0.25rem;
  left: calc(var(--r) + (100% - var(--r)) * var(--v) + 0.75rem);
  font-size: var(--t-s); line-height: 1.35;
}

.cut-chart { position: relative; grid-column: 1 / -1; grid-row: 3; margin-right: var(--r); min-width: 0; --cut-gap: 4px; }
.cut-box {
  position: relative; height: clamp(22rem, 34vw, 31rem); margin-bottom: 3.5rem;
  padding-left: calc(var(--r) - var(--p));
  border-width: 0 0 var(--p) var(--p);
  border-image-width: 0 0 var(--art-w) var(--art-w); border-image-outset: 0 0 var(--art-o) var(--art-o);
}
.cut-cols {
  position: relative; height: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--cut-gap); align-items: end;
}
.cut-col { --h: var(--v, 0); position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cut-bar { display: block; height: calc(var(--h) * 88%); background: var(--porch); border-radius: 3px 3px 0 0; }
.cut-value { padding-bottom: 0.2rem; text-align: center; font-size: var(--t-s); font-weight: 700; font-variant-numeric: tabular-nums; }
.cut-year {
  position: absolute; top: calc(100% + var(--p) + 0.45rem); left: 0; right: 0;
  text-align: center; font-size: var(--t-xs); line-height: 1.15; color: var(--fg-muted);
}
.is-after {
  & .cut-bar { background: var(--mark-muted); }
  & .cut-value { color: var(--muted-night); }
}
/* In the cutoff's column the marker shows the year and the fill shows the count: the bar's --v is the share of the
   decade built before the cutoff (Tr.figure.cutoffBar), so the lit bars add up to the page's figure. */
.is-cut .cut-bar { background: linear-gradient(0deg, var(--porch) calc(var(--v) * 100%), var(--mark-muted) 0); }
.is-cut .cut-value { align-self: flex-start; padding-left: 0.25rem; }
.cut-mark {
  position: absolute; left: calc(var(--v) * 100%); top: 0; bottom: 0; width: 3px; translate: -50% 0; background: var(--porch);

  &::after {
    content: ''; position: absolute; z-index: 3; left: 50%; bottom: calc(var(--p) * -1 - var(--collar)); translate: -50% 0;
    width: calc(var(--p) * 0.8); height: calc(var(--p) + var(--collar) * 2); background: var(--porch); border-radius: 2px;
  }
}
.cut-year-label {
  position: absolute; left: 0.6rem; top: -0.35rem;
  font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-loud); letter-spacing: var(--track-l); line-height: 1;
}
.cut-after {
  position: absolute; left: calc(var(--v) * 100%); right: 0; bottom: calc(var(--p) * -1);
  height: var(--p);
  background: linear-gradient(180deg, var(--mark-muted) var(--wall), var(--bore) 0 calc(50% - 1px), var(--shine) 0 calc(50% + 1px), var(--bore) 0 calc(100% - var(--wall)), var(--mark-muted) 0);
}
.cut-elbow {
  position: absolute; top: 100%; left: 100%; width: var(--r); height: 200vh;
  border-width: var(--p) var(--p) 0 0;
  border-image-width: var(--art-w) var(--art-w) 0 0; border-image-outset: var(--art-o) var(--art-o) 0 0;
}
.cut-twin { margin-left: var(--r); margin-top: 0; }

/* ---------- Mail plan: the steps sit on the pipe in the order the pipe runs ---------- */
.plan-row { display: flow-root; overflow: clip; padding-bottom: var(--row-end); }
.plan-trap {
  position: relative;
  margin: calc(var(--r) - var(--p)) calc(var(--rail) + var(--r)) 0 var(--rail);
  border-width: var(--p) 0 var(--p) var(--p);
  border-image-width: var(--art-w) 0 var(--art-w) var(--art-w); border-image-outset: var(--art-o) 0 var(--art-o) var(--art-o);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem) calc(var(--r) - var(--p) + 1rem);
}
.trap-in, .trap-out { position: absolute; left: 100%; width: var(--r); }
.trap-in {
  top: calc(var(--r) * -1); height: var(--r); border-width: 0 var(--p) var(--p) 0;
  border-image-width: 0 var(--art-w) var(--art-w) 0; border-image-outset: 0 var(--art-o) var(--art-o) 0;
}
.trap-out {
  top: 100%; height: 200vh; border-width: var(--p) var(--p) 0 0;
  border-image-width: var(--art-w) var(--art-w) 0 0; border-image-outset: var(--art-o) var(--art-o) 0 0;
}
.plan-steps {
  counter-reset: plan-step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-inline: calc(var(--rail) + var(--r)) var(--pad);

  & li { counter-increment: plan-step; position: relative; padding-top: calc(var(--collar) + 0.75rem); }
  & li::before {
    content: counter(plan-step); display: block; margin-bottom: 0.5rem;
    font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud); letter-spacing: var(--track-xl);
    line-height: 1; font-variant-numeric: tabular-nums;
  }
  & li::after {
    content: ''; position: absolute; z-index: 3; left: 0; top: calc((var(--p) + var(--collar)) * -1);
    width: calc(var(--p) * 0.7); height: calc(var(--p) + var(--collar) * 2); background: var(--fg); border-radius: 2px;
  }
}

/* ---------- Costs ---------- */
.costs-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: start;
}
.costs-words {
  grid-column: 1 / span 5; font-size: var(--t-body);

  & .run-title { margin-bottom: 1rem; }
}
.run-cost-table {
  grid-column: 6 / -1; width: 100%; max-width: none; font-size: var(--t-body); line-height: 1.25;

  & :is(th, td) { padding: 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
  & tbody th { text-align: left; font-weight: 500; padding-right: 1.5rem; }
  & td { text-align: right; font-size: var(--t-m); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
  & tbody .cost-mailedperowner th { font-weight: 750; }
  & .cost-mailedperowner td {
    font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1.05;
  }
}

/* ---------- Questions ---------- */
/* The heading takes the first cell of a two-column run, so nothing sits empty beside it. */
.faq-body {
  --faq-gap: clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr);

  & .run-title { grid-area: 1 / 1; width: calc(50% - var(--faq-gap) / 2); }
}
.run-faq {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) var(--faq-gap);

  & > div { padding-top: 0.9rem; border-top: 2px solid var(--fg); }
  & > div:nth-child(-n + 2) { grid-column: 2; }
  & dt { font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2; }
  & dd { margin: 0.5rem 0 0; }
  & dd p + p { margin-top: 0.75rem; }
}

/* ---------- Cities and ZIPs ---------- */
.row.trade-places, .row.place-links { padding-block: 0; border-top: 0; }
.places-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch;
}
.places-words { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.places-words .run-title { grid-column: 1 / span 6; }
.places-words .caption { grid-column: 7 / -1; font-size: var(--t-m); line-height: 1.35; max-width: none; }
.places-table { grid-column: 1 / span 8; min-width: 0; }
.places-zips {
  /* The six ZIPs stretch to the height of the cities table beside them. */
  grid-column: 9 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr);

  & .zips-title { margin: 0; padding-block: 0.3rem 0.45rem; box-shadow: inset 0 -2px 0 var(--fg); }
  & .chip-list { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0; }
  & li { display: grid; }
  & .chip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.75rem;
    padding: 0.25rem 0.5rem 0.25rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head); letter-spacing: var(--track-l);
    font-variant-numeric: tabular-nums;
  }
  & .chip-count { font-family: var(--f); font-size: var(--t-body); letter-spacing: 0; }
  & .chip .fa-solid { font-size: 1rem; }
}

/* ---------- Other trades ---------- */
.trades-body {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem var(--gutter);

  & .run-title { font-size: var(--t-l); }
}

/* ---------- Close: the pipe runs into the button ---------- */
.run-cta { overflow: clip; padding-bottom: clamp(4rem, 8vw, 7rem); }
.run-cta-words {
  padding: clamp(3rem, 6vw, 5rem) var(--pad) 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem var(--gutter);
}
.run-cta-title { font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1; }
.run-cta-body { font-size: var(--t-m); line-height: 1.32; }
.run-cta-line { display: flex; align-items: center; margin-top: 6rem; padding-inline: var(--gutter) var(--rail); }
.run-cta-line .btn { z-index: 3; }
.run-tail {
  position: relative; flex: 1 1 auto; height: var(--p); margin-left: -0.25rem; margin-right: var(--r);
  background: linear-gradient(180deg, var(--bands));

  &::after {
    content: ''; position: absolute; left: 100%; bottom: 0; width: var(--r); height: 200vh;
    border-width: 0 var(--p) var(--p) 0;
    border-image-width: 0 var(--art-w) var(--art-w) 0; border-image-outset: 0 var(--art-o) var(--art-o) 0;
  }
  /* A last shutoff before the run ends at the button. */
  & .part-valve { left: 40%; bottom: calc(var(--p) / 2 - 1.25rem); }
}

/* The water, added by the script. It fills the bore and nothing else. */
.flow {
  position: absolute; z-index: 2; top: 0; left: 0; max-width: none; overflow: visible; pointer-events: none;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Pale at the walls with a yellow core: the core keeps it reading as filled on the pale rows, where a plain pale fill looks hollow. */
.flow-water { stroke: var(--lit); }
.flow-core { stroke: var(--porch); }
.flow-crest { stroke: var(--porch); }
.flow-streak { stroke: var(--lit); }
@media print { .flow { display: none; } }

/* ---------- Tablet and phone: one straight run down the left edge ---------- */
@media (max-width: 1199.98px) {
  :root {
    --p: 1rem; --r: calc(var(--p) * 88 / 24); --rail: 0.75rem; --rail-gap: 1rem; --hang: 0rem; --collar: 0.2rem; --row-end: 2.5rem;
  }

  /* The rail belongs to the row here, so every bend, elbow and border pipe stands down. */
  .row::before, .older-block::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--rail); width: var(--p); background: linear-gradient(90deg, var(--bands));
  }
  /* A flange at every seam; the mask gives each one its row's color. */
  .row::after, .older-block::after {
    content: ''; position: absolute; z-index: 3; top: 0; left: calc(var(--rail) + (var(--p) - var(--flange)) / 2);
    width: var(--flange); height: calc(var(--p) * 20 / 24); background: var(--fg); pointer-events: none;
    mask: url('/assets/img/trades/plumbing/flange.svg') center / 100% 100% no-repeat;
  }
  .run-hero::after { content: none; }
  .bend, .cut-elbow, .trap-in, .trap-out, .hero-fittings, .run-tail .part-valve, .row > .part-flange { display: none; }
  .row-body { margin-top: 0; padding-top: 2.5rem; }
  .row-body::before, .older-grid::before, .older-grid::after { content: none; }
  .rail-left .row-body::after, .rail-right .row-body::after { top: 2.5rem; right: auto; left: calc(var(--rail) + (var(--p) - var(--flange)) / 2); }
  .row-body, .rail-left .row-body, .rail-right .row-body { padding-inline: var(--pad) var(--gutter); }

  .run-hero { --beat: 1.75rem; padding-top: calc(var(--header-h) + 0.5rem); }
  .run-hero::before { top: var(--header-h); }
  .hero-top { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--gutter) var(--beat) var(--pad); }
  .run-greeting { margin-right: 0; font-size: 11.2vw; }
  .hero-main {
    margin-right: 0; border: 0; border-image: none; padding: 0 var(--gutter) var(--row-end) var(--pad);
    font-size: var(--t-body);
  }

  /* Tablet keeps the columns; the phone block below folds them. Beside big type or a table, these columns can't hold
     a full-size heading (its longest word alone overruns them), so the heading takes its own line. */
  .owners-body .run-title { grid-column: 1 / -1; }
  .owners-spend { grid-column: 1 / -1; }
  .spend-figure { font-size: var(--t-mega); }
  .spend-rest, .spend-scope { max-width: 68ch; }
  .costs-words {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;

    & .run-title { margin-bottom: 0; }
  }
  .run-cost-table { grid-column: 1 / -1; }
  .owners-inspection { grid-column: 1 / -1; }
  /* Flowed columns, so the shorter side doesn't leave a gap under the heading. */
  .older-words {
    display: block; columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem);

    & .older-lead { margin-bottom: 0.75rem; }
    & p { break-inside: avoid; }
  }
  .owners-heater { grid-column: 1 / span 6; }
  .owners-leaks { grid-column: 7 / -1; }

  .older-block { padding-bottom: var(--row-end); }
  .older-grid { display: block; margin-top: 0; padding: 2.5rem var(--gutter) 0 var(--pad); }
  .figure-section { display: block; }
  .figure-count { position: static; margin-bottom: 1rem; }
  .figure-count strong { font-size: clamp(3.5rem, 19vw, 7rem); }
  .cut-caveat { position: static; margin-top: 1rem; font-size: var(--t-body); max-width: 68ch; }
  .cut-chart { margin-right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
  .figure-count, .cut-box { grid-column: 1 / -1; }
  .cut-box { height: auto; margin-bottom: 0; padding-left: 0; border: 0; border-image: none; }
  /* Time runs down the pipe; each decade is a fixed-height step, so 1986 can be placed exactly. */
  .cut-chart { --step: 2.75rem; --bar: 0.9rem; --text: 1.45rem; }
  .cut-cols { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); height: auto; }
  .cut-col {
    height: var(--step);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--text) var(--bar); align-content: start;
  }
  .cut-year { position: static; text-align: left; font-size: var(--t-xs); line-height: var(--text); }
  .cut-value { padding: 0; font-size: var(--t-s); line-height: var(--text); }
  .cut-bar {
    grid-column: 1 / -1; height: var(--bar); border-radius: 0 3px 3px 0;
    margin-left: calc(var(--rail-gap) * -1); width: calc(var(--rail-gap) + var(--h) * 100%);
  }
  .is-cut .cut-bar {
    background: linear-gradient(90deg, var(--porch) calc(var(--rail-gap) + (100% - var(--rail-gap)) * var(--v)), var(--mark-muted) 0);
  }
  .cut-mark {
    left: calc(var(--rail-gap) * -1 - var(--p) - var(--collar)); right: 0; top: calc(var(--text) + var(--bar) * var(--v) - 1px); bottom: auto;
    width: auto; height: 2px; translate: 0 0;

    &::after {
      left: 0; bottom: 50%; translate: 0 50%; width: calc(var(--p) + var(--collar) * 2); height: 0.5rem;
    }
  }
  .cut-year-label { left: 50%; top: calc(var(--text) * -1 - 2px); font-size: var(--t-m); line-height: var(--text); }
  .cut-after {
    left: calc(var(--rail-gap) * -1 - var(--p)); right: auto; width: var(--p);
    top: calc(var(--v) * 100% + 0.35rem); bottom: 0; height: auto;
    background: linear-gradient(90deg, var(--mark-muted) var(--wall), var(--bore) 0 calc(50% - 1px), var(--shine) 0 calc(50% + 1px), var(--bore) 0 calc(100% - var(--wall)), var(--mark-muted) 0);
  }
  .cut-twin { margin-left: 0; margin-top: 1rem; }

  .plan-row { padding-bottom: var(--row-end); }
  .plan-trap { margin: 0; padding: 2.5rem var(--gutter) 1.5rem var(--pad); border: 0; border-image: none; }
  .plan-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 4vw, 3rem); padding-inline: var(--pad) var(--gutter);

    & li { padding-top: 0; }
    & li:nth-child(even)::after { content: none; }
    & li::before { font-size: var(--t-l); margin-bottom: 0.25rem; }
    & li::after { left: calc(var(--rail-gap) * -1 - var(--p) - var(--collar)); top: 0.6rem; width: calc(var(--p) + var(--collar) * 2); height: 0.5rem; }
  }

  /* The run ends by turning into the button. */
  .run-cta::before { content: none; }
  .run-cta-words { padding: 2.5rem var(--gutter) 0 var(--pad); }
  .run-cta-line { position: relative; margin-top: 1.25rem; padding-inline: calc(var(--rail) + var(--r) - 0.25rem) var(--gutter); }
  .run-tail {
    position: absolute; left: var(--rail); bottom: calc(50% - var(--p) / 2); width: var(--r); height: 200vh;
    flex: none; margin: 0; background: none;
    border: 0 solid; border-image-source: var(--art); border-image-slice: 92; border-image-repeat: stretch;
    border-width: 0 0 var(--p) var(--p);
    border-image-width: 0 0 var(--art-w) var(--art-w); border-image-outset: 0 0 var(--art-o) var(--art-o);

    &::after { content: none; }
  }

  .faq-body .run-title { grid-area: auto; width: auto; margin-bottom: 1.5rem; }
  .run-faq { grid-area: auto; }
  .run-faq > div:nth-child(-n + 2) { grid-column: auto; }
}

/* ---------- Phone: everything folds to one column beside the pipe ---------- */
@media (max-width: 767.98px) {
  .run-hero { --beat: 1.25rem; }
  .hero-top { display: block; }
  .run-greeting { padding-block: var(--beat); font-size: clamp(2.75rem, 14.5vw, 5.5rem); line-height: 1; white-space: normal; }
  .run-greeting .run-hello, .run-greeting .run-place { display: block; }
  .run-count { margin-top: var(--beat); }
  .hero-main { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .spend { display: block; }
  .spend-lead, .spend-figure, .spend-more, .spend-rest { display: block; }
  .spend-figure { font-size: clamp(3.5rem, 19vw, 7rem); }
  .spend-more { padding-bottom: 0; }
  .costs-words { display: block; }
  .costs-words .run-title { margin-bottom: 1rem; }
  .older-words { display: grid; columns: auto; }
  .older-words .older-lead { margin-bottom: 0; }

  :is(.sources-body, .owners-body, .costs-body, .places-body) { grid-template-columns: minmax(0, 1fr); }
  :is(.sources-body, .owners-body, .places-body) .run-title,
  .sources-lead, .sources-table-wrap, .sources-notes,
  .owners-spend, .owners-inspection, .owners-heater, .owners-leaks,
  .costs-words, .run-cost-table, .places-words, .places-table, .places-zips { grid-column: 1 / -1; }
  .sources-notes { columns: 1; }

  /* The sources table stacks; each cell carries its own column name. */
  .run-sources-table {
    display: block; font-size: var(--t-body);

    & thead { display: none; }
    & tbody, & tr, & th, & td { display: block; }
    & tr { padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
    & :is(th, td) { padding: 0; border: 0; }
    & tbody th { font-size: var(--t-m); line-height: 1.2; margin-bottom: 0.35rem; }
    & td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.75rem; padding-block: 0.1rem; }
    & td::before { content: attr(data-label); font-size: var(--t-xs); font-weight: 450; line-height: 1.5; color: var(--fg-muted); }
    & td.has-price { white-space: normal; }
  }

  .owners-inspection { grid-template-columns: minmax(0, 1fr); }

  .older-words, .figure-words { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .cut-chart { display: block; }
  .plan-steps { grid-template-columns: minmax(0, 1fr); }
  .plan-steps li:nth-child(even)::after { content: ''; }
  .places-words { display: block; }
  .places-words .caption { margin-top: 0.5rem; }
  .places-zips .chip { min-height: 3rem; font-size: var(--t-m); }
  .trades-body { display: grid; }

  .run-faq { grid-template-columns: minmax(0, 1fr); }
  .run-cta-words { display: grid; }
}

/* ==================== The national guide names no place and shows no market's number (docs/plan-national-pages.md) ====
   The rows the national switch changed: a national figure in the hero, the testing caveat beside the lead line rule, the
   national month chart lying on the pipe where the decade bars did, the cost calculator where the cost table was, and
   the made-up sample row with the Coverage pointer where the cities and ZIPs were. The pages by place share this
   stylesheet, so every rule here is scoped to the national guide ([data-page="trade"]) and the rules above stay as
   they were for them. */
[data-page="trade"] {
  /* The source line under a national figure: the publisher, linked, and the day it was read. */
  & .national-source {
    margin-top: 0.5rem; font-size: var(--t-xs); line-height: 1.35; color: var(--fg-muted);

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

  /* ---------- Hero: the national figure takes the count's place, its label under it at a short measure ---------- */
  & .run-national { max-width: 24rem; }
  & .run-national .run-count-unit { color: var(--fg); font-weight: 650; }

  /* ---------- Older homes: the testing caveat answers the lead, on a rule like the questions' ---------- */
  & .older-test {
    padding-top: 0.9rem; border-top: 2px solid var(--fg); font-size: var(--t-m); line-height: 1.38;
  }

  /* ---------- The national month chart, lying on the pipe where the decade bars did ---------- */
  & .months-about { display: grid; gap: 0.25rem; }
  & .months-caption { font-size: var(--t-body); line-height: 1.35; max-width: 52ch; }
  & .months-box .big-chart {
    border-bottom: 0;
    & .big-col { position: relative; }
    & .big-col-value { color: var(--fg); font-weight: 700; }
    & .big-col-bar { background: var(--porch); }
  }
  & .months-box.is-empty { height: calc(var(--r) * 1.5); }

  /* ---------- Costs: the words and the reader's boxes beside the run, the results in a ruled ledger ---------- */
  & .calc-words {
    grid-column: 1 / span 5; font-size: var(--t-body);

    & .run-title { margin-bottom: 1rem; }
  }
  & .costs-how { margin-top: 0.75rem; }
  & .run-calc-inputs:not([hidden]) { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 30rem; }
  & .calc-field input { font-size: var(--t-m); font-weight: 650; font-variant-numeric: tabular-nums; }
  & .calc-entry {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;

    & input { flex: 0 1 14rem; min-width: 0; }
  }
  & .calc-money { position: relative; display: block; max-width: 14rem; }
  & .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); line-height: 1.35; color: var(--fg-muted); max-width: 52ch; }
  /* The example's tag is marked like the sample row's: something made up, in a bordered tag. */
  & :is(.calc-example, .example-tag) {
    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; }
  /* The ledger takes the cost table's look: thin rules, the value at the right, the monthly total in the heading face. */
  & .run-calc-results { grid-column: 6 / -1; border-top: 2px solid var(--fg); font-size: var(--t-body); line-height: 1.25; }
  & .calc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: 1.5rem; align-items: baseline;
    padding-block: 0.7rem; border-bottom: 1px solid var(--line);

    & dt { font-weight: 500; }
    & dd { margin: 0; display: grid; justify-items: end; text-align: right; }
  }
  & .calc-value { font-size: var(--t-m); font-weight: 750; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
  & .calc-total {
    & dt { font-weight: 750; }
    & .calc-value { font-family: var(--f-head); font-size: var(--t-xl); font-weight: var(--w-loud); letter-spacing: var(--track-xl); line-height: 1.05; }
  }
  & .calc-how { margin-top: 0.15rem; 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; }

  /* ---------- Sample row and coverage: the night row where the cities and ZIPs were ---------- */
  /* The row holds two sections, so it paints its own ground (only a section does by default) and, like the cities row
     it replaces, takes no night padding: the bend and the run set its spacing. */
  & .file-row { padding-block: 0; border-top: 0; background: var(--ground); color: var(--fg); }
  & .file-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  }
  & :is(.example, .covered) { display: contents; }
  & .file-head { grid-column: 1 / span 7; }
  & .example-note { margin-top: 0.75rem; font-size: var(--t-m); line-height: 1.35; max-width: 52ch; }
  & .file-fields { grid-column: 1 / -1; min-width: 0; }
  & .example-tag { margin-bottom: 0.75rem; }
  & .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);
  }
  /* Each field: its value in the heading face, then its label and the file's own column name under it. */
  & .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; }
  /* The Coverage pointer closes the row the way the other trades close theirs: its heading at the left, the link at the
     right on the run's two rules. */
  & .file-covered-head { grid-column: 1 / span 6; padding-top: clamp(0.5rem, 1.5vw, 1.25rem); }
  & .covered-run-title {
    font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head); letter-spacing: var(--track-l); line-height: 1.06;
  }
  & .covered-caption { margin-top: 0.5rem; max-width: 52ch; }
  & .file-covered-list { grid-column: 7 / -1; align-self: end; border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); }
  & .covered-place {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; 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) {
  [data-page="trade"] a.covered-place:hover .fa-solid { translate: 6px 0; }
}
html.reduced [data-page="trade"] .covered-place .fa-solid { transition: none; }
/* Two fields a line on a tablet or a wide phone, four on a wide screen; the last line's rule is the ledger's own. */
@media (min-width: 576px) {
  [data-page="trade"] .example-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="trade"] .example-field:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 575.98px) {
  [data-page="trade"] .example-field:last-child { border-bottom: 0; }
}
@media (min-width: 992px) {
  [data-page="trade"] .example-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-page="trade"] .example-field:nth-last-child(-n + 4) { border-bottom: 0; }
}

/* Wide: the caveat sits level with the lead line; the bars stand on the pipe's run, their months under it, as the
   decade bars did, in a lower box, since twelve months of one survey vary less than a city's decades. */
@media (min-width: 1200px) {
  [data-page="trade"] .older-test { align-self: end; }
  [data-page="trade"] .run-months .figure-words { padding-top: clamp(1.5rem, 3.5vw, 3.5rem); }
  [data-page="trade"] .months-box { height: clamp(16rem, 24vw, 22rem); }
  /* The words and the boxes run longer than the ledger, so the ledger stays in view beside the boxes as they pass. */
  [data-page="trade"] .run-calc-results { position: sticky; top: calc(var(--header-h) + 2rem); }
  [data-page="trade"] .months-box .big-chart {
    height: 100%; column-gap: clamp(0.4rem, 0.8vw, 0.75rem);

    & .big-col-value { padding-bottom: 0.2rem; margin-bottom: 0; text-align: center; font-size: var(--t-s); }
    & .big-col-bar { height: calc(var(--v, 0) * 88%); border-radius: 3px 3px 0 0; }
    & .big-col-month {
      position: absolute; top: calc(100% + var(--p) + 0.45rem); left: 0; right: 0;
      font-family: var(--f); font-size: var(--t-xs); font-weight: 650; line-height: 1.15; text-align: center; color: var(--fg-muted);
    }
  }
}

/* Tablet: the chart stands on its own baseline beside the rail, its months under it. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  [data-page="trade"] {
    & .months-box { margin-bottom: 2.25rem; }
    & .months-box .big-chart {
      height: clamp(15rem, 40svh, 22rem); border-bottom: 2px solid var(--fg);

      & .big-col-value { text-align: center; }
      & .big-col-bar { border-radius: 3px 3px 0 0; }
      & .big-col-month {
        position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0;
        font-family: var(--f); font-size: var(--t-xs); font-weight: 650; text-align: center; color: var(--fg-muted);
      }
    }

    /* The heading takes its own line; the reader's boxes and the results sit side by side under the words. */
    & .calc-words { display: contents; }
    & .calc-words > * { grid-column: 1 / -1; }
    & .calc-words .run-title { margin-bottom: 0; }
    & .calc-words > p { max-width: 68ch; }
    & .costs-how { margin-top: 0; }
    & .run-calc-inputs:not([hidden]) { grid-column: 1 / span 6; grid-row: 4; margin-top: 0.5rem; }
    & .run-calc-results { grid-column: 7 / -1; grid-row: 4; margin-top: 0.5rem; }
    & .costs-body:has(.run-calc-inputs[hidden]) .run-calc-results { grid-column: 1 / -1; }

    & .file-head { grid-column: 1 / -1; }
    & .file-covered-head { grid-column: 1 / span 7; }
    & .file-covered-list { grid-column: 8 / -1; }
  }
}

/* Phone: one column beside the pipe; the month chart turns into labeled rows (pages.css). */
@media (max-width: 767.98px) {
  [data-page="trade"] {
    & .run-national { max-width: none; }
    & .older-test { margin-top: 0.5rem; }
    & .run-months .figure-words { padding-top: 1.75rem; }
    & :is(.calc-words, .run-calc-results, .file-head, .file-fields, .file-covered-head, .file-covered-list) { grid-column: 1 / -1; }
    & .file-body { grid-template-columns: minmax(0, 1fr); }
    & .run-calc-results { margin-top: 0.5rem; }
    & .file-covered-list { align-self: start; }
  }
}

/* ==================== Trade pages by place: /for/plumbing/<state>/ and /for/plumbing/<state>/<city>/ ====================
   The state and city pages keep the run, its fittings, the grounds and the type above, and lay out their own rows here
   (trades/local/plumbing-local.njk). Every rule is scoped to those pages, so nothing above changes on the national guide.
   The state page puts the license inside the U-trap and lays the pipe down under the decade chart; the city page runs
   a branch off the main to the city's year and sets its two programs side by side. */
[data-page="trade-local"] {
  /* The greeting sets the place on a line of its own, sized by that line's length (the partial sets greet-len-N), so a
     longer place steps down instead of running off the page. 0.6em is a wide letter's share of Montserrat's width. */
  & .hero-top { container-type: inline-size; }
  & .run-greeting {
    font-size: min(var(--t-mega), calc(100cqi / var(--greet-len, 12) / 0.6));

    & .run-hello, & .run-place { display: block; }
  }
  & .greet-len-8 { --greet-len: 8; } & .greet-len-9 { --greet-len: 9; } & .greet-len-10 { --greet-len: 10; }
  & .greet-len-11 { --greet-len: 11; } & .greet-len-12 { --greet-len: 12; } & .greet-len-13 { --greet-len: 13; }
  & .greet-len-14 { --greet-len: 14; } & .greet-len-15 { --greet-len: 15; } & .greet-len-16 { --greet-len: 16; }
  & .greet-len-17 { --greet-len: 17; } & .greet-len-18 { --greet-len: 18; } & .greet-len-19 { --greet-len: 19; }
  & .greet-len-20 { --greet-len: 20; } & .greet-len-21 { --greet-len: 21; } & .greet-len-22 { --greet-len: 22; }
  & .greet-len-23 { --greet-len: 23; } & .greet-len-24 { --greet-len: 24; }
  & .hero-intro { grid-column: 1 / span 2; max-width: 56ch; font-size: var(--t-m); line-height: 1.38; }

  /* Links to the same trade elsewhere: ruled rows with an arrow, the trade's heading face. */
  & .more-title {
    margin-bottom: 0.75rem; font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head);
    letter-spacing: var(--track-l); line-height: 1.06;
  }
  & .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; }
  }
  & :is(.license-city, .lines-law) { margin-top: 1.1rem; max-width: 34rem; }
  & :is(.license-city, .lines-law) .more-link { border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); }
  & .local-others .chip-list { margin-top: 0.25rem; }

  /* ---------- State: the license inside the trap, what a business needs standing on the pipe below it ---------- */
  & .license-trap { padding-right: 1rem; }
  & .license-words {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: start;

    & > * { grid-column: 1 / -1; }
  }
  & .license-lead { font-size: var(--t-m); line-height: 1.35; font-weight: 500; }
  & .license-more p:not(.license-city) + p { margin-top: 0.9rem; }
  & .license-more p:not(.license-city) { max-width: 62ch; }
  & .license-city + p { margin-top: 1.1rem; }
  & .license-needs-title {
    margin-top: 0.5rem; font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-sub); letter-spacing: -0.015em; line-height: 1.2;
  }
  & .license-steps li { line-height: 1.4; overflow-wrap: break-word; }

  /* ---------- State: what a row carries ---------- */
  & .rows-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start;
  }
  & .rows-body .run-title, & .rows-words { grid-column: 1 / span 6; }
  & .rows-words { display: grid; gap: 0.9rem; font-size: var(--t-m); line-height: 1.38; }
  & .rows-year { font-weight: 650; }
  & .rows-fresh { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; padding-top: 0.9rem; border-top: 2px solid var(--fg); }
  & .rows-fresh .pulled-figure { font-size: min(var(--t-mega), 11rem); }
  & .rows-fresh-label { margin-top: 0.4rem; font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
  & .rows-fresh-line { margin-top: 0.9rem; max-width: 44ch; }

  /* ---------- State: places, with the plumbing links where the national row has its ZIPs ---------- */
  & .places-more { grid-column: 9 / -1; min-width: 0; }

  /* ---------- City: the city's own license, each requirement on a branch off the main ---------- */
  & .city-license-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  }
  & .city-license-body .run-title { grid-column: 1 / span 7; }
  & .city-license-lead { grid-column: 8 / -1; align-self: end; font-size: var(--t-m); line-height: 1.35; font-weight: 500; }
  & .city-license-needs { --tee-in: 0rem; grid-column: 1 / span 7; grid-row: 2; padding-left: var(--tee-in); }
  & .city-license-more {
    grid-column: 8 / -1;
    grid-row: 2;

    & p:not(.license-city) { max-width: 62ch; }
    & p + p { margin-top: 0.9rem; }
  }
  & .riser-list {
    counter-reset: riser; margin-top: 0.75rem; border-top: 2px solid var(--fg);

    & li {
      counter-increment: riser; position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem;
      padding-block: 0.8rem; border-bottom: 1px solid var(--line); line-height: 1.4; overflow-wrap: break-word;
    }
    & li::before {
      content: counter(riser); font-family: var(--f-head); font-size: var(--t-m); font-weight: var(--w-loud); line-height: 1.2;
      font-variant-numeric: lining-nums tabular-nums;
    }
  }
  /* A branch from the main's wall to the item's first line, with a collar at each end. */
  & .riser-branch {
    position: absolute; z-index: 1; left: calc((var(--rail-gap) + var(--tee-in)) * -1); width: calc(var(--rail-gap) + var(--tee-in) - 0.6rem);
    top: calc(0.8rem + 0.7em - var(--p) / 2); height: var(--p);
    background: linear-gradient(180deg, var(--bands));

    &::before, &::after {
      content: ''; position: absolute; top: calc(var(--collar) * -1); width: calc(var(--p) * 0.6); height: calc(var(--p) + var(--collar) * 2);
      background: var(--fg); border-radius: 2px;
    }
    &::before { left: 0; }
    &::after { right: 0; }
  }

  /* ---------- City: lead lines, with a branch off the main to the city's year ---------- */
  & .lines-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  }
  & .lines-body .run-title { grid-column: 1 / span 7; }
  & .lines-year { --year: min(var(--t-mega), 15vw); --tee-in: 0rem; position: relative; grid-column: 1 / span 7; padding-left: var(--tee-in); }
  & .lines-year-num {
    font-family: var(--f-head); font-size: var(--year); font-weight: var(--w-loud); letter-spacing: var(--track-mega);
    line-height: 0.95; font-variant-numeric: tabular-nums; margin-left: -0.06em;
  }
  & .lines-year-label { margin-top: 0.6rem; max-width: 36ch; font-size: var(--t-m); font-weight: 650; line-height: 1.25; }
  /* The branch: a straight from the main's wall to the year, with a collar at each end. */
  & .lines-tee {
    position: absolute; z-index: 1; left: calc(var(--rail-gap) * -1); width: calc(var(--rail-gap) + var(--tee-in) - 0.6rem);
    top: calc(var(--year) * 0.95 / 2 - var(--p) / 2); height: var(--p);
    background: linear-gradient(180deg, var(--bands));

    &::before, &::after {
      content: ''; position: absolute; top: calc(var(--collar) * -1); width: calc(var(--p) * 0.6); height: calc(var(--p) + var(--collar) * 2);
      background: var(--fg); border-radius: 2px;
    }
    &::before { left: 0; }
    &::after { right: 0; }
  }
  & .lines-words { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; display: grid; gap: 0.9rem; }
  & .lines-likely { font-size: var(--t-m); line-height: 1.35; font-weight: 500; }

  /* ---------- City: the two programs, one ink and one porch, each led by its value ---------- */
  & .programs-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch;
  }
  & .programs-body .run-title { grid-column: 1 / span 7; align-self: end; }
  & .program {
    grid-row: 2; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--ground); color: var(--fg);
  }
  & .program-waiver { grid-column: 1 / span 5; --ground: var(--ink); --fg: var(--porch); --fg-muted: var(--muted-night); --line: rgb(255 210 63 / 0.24); }
  & .program-equity { grid-column: 6 / -1; --ground: var(--porch); --fg: var(--ink); --fg-muted: var(--muted-porch); }
  & .program-figure {
    font-family: var(--f-head); font-size: clamp(2.25rem, 1rem + 2.8vw, 3.75rem); font-weight: var(--w-loud);
    letter-spacing: var(--track-xl); line-height: 1; font-variant-numeric: tabular-nums;
  }
  /* The range: its two values stand at the ends of a length of pipe, so it reads as a span from one to the other. */
  & .program-range .program-figure { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0.2em 0.75em; }
  & .range-run {
    position: relative; display: block; height: var(--p); margin-block: 0.55rem 0.35rem;
    background: linear-gradient(180deg, var(--fg) var(--wall), var(--bore) 0 calc(50% - 1px), var(--shine) 0 calc(50% + 1px), var(--bore) 0 calc(100% - var(--wall)), var(--fg) 0);

    &::before, &::after {
      content: ''; position: absolute; top: calc(var(--collar) * -1); width: calc(var(--p) * 0.6); height: calc(var(--p) + var(--collar) * 2);
      background: var(--fg); border-radius: 2px;
    }
    &::before { left: 0; }
    &::after { right: 0; }
  }
  & .program-label { font-size: var(--t-m); font-weight: 650; line-height: 1.25; }
  & .program-line { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }

  /* ---------- City: the busiest ZIPs, set like the national row's, two to a line ---------- */
  & .zips-body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  }
  & .zips-body .run-title, & .zips-chips { grid-column: 1 / span 7; }
  & .zips-chips {
    min-width: 0;

    & .zips-title { margin: 0; padding-block: 0.3rem 0.45rem; box-shadow: inset 0 -2px 0 var(--fg); font-size: var(--t-s); }
    & .chip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
    & li { display: grid; }
    & .chip {
      display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.75rem; min-height: 4rem;
      padding: 0.25rem 0.5rem 0.25rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
      font-family: var(--f-head); font-size: var(--t-l); font-weight: var(--w-head); letter-spacing: var(--track-l);
      font-variant-numeric: tabular-nums;
    }
    & .chip-count { font-family: var(--f); font-size: var(--t-body); letter-spacing: 0; }
    & .chip .fa-solid { font-size: 1rem; }
  }
  & .zips-more { grid-column: 9 / -1; grid-row: 1 / span 2; display: grid; gap: clamp(2rem, 4vw, 3rem); min-width: 0; }
}
@media (hover: hover) {
  [data-page="trade-local"] .more-link:hover .fa-solid { translate: 4px 0; }
}
html.reduced [data-page="trade-local"] .more-link .fa-solid { transition: none; }

/* Wide: the pipe's own geometry. */
@media (min-width: 1200px) {
  [data-page="trade-local"] {
    /* The paragraphs beside the title can run longer than the left column; the slack goes above the list heading,
       which stays on the trap's bottom run. */
    & .license-words { grid-template-rows: auto auto minmax(0, 1fr); }
    & .license-title { grid-column: 1 / span 7; grid-row: 1; }
    & .license-lead { grid-column: 1 / span 6; grid-row: 2; }
    & .license-more { grid-column: 8 / -1; grid-row: 1 / span 3; align-self: end; }
    & .license-needs-title { grid-column: 1 / span 6; grid-row: 3; align-self: end; }
    & .license-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    /* A block that takes the pipe straight down from the row above has no bend: its rail starts at the top. */
    & .local-law .older-grid { margin-top: 0; }
    & .local-law .older-grid::before, & .local-law .older-grid::after { margin-top: 0; }
    & .local-law .older-words { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
    & .no-bend > .row-body { margin-top: 0; padding-top: clamp(3.5rem, 6vw, 5.5rem); }
    & .no-bend > .row-body::before, & .no-bend > .row-body::after { top: 0; }
  }
}

/* Tablet and phone: one straight run down the left edge. */
@media (max-width: 1199.98px) {
  [data-page="trade-local"] {
    & :is(.lines-year, .city-license-needs) { --tee-in: 2.5rem; }
    /* The range's two values stay on one line over their pipe, so it still reads as a span. */
    & .program-range .program-figure { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
    & .license-trap { padding-right: var(--gutter); }
  }
}

/* Tablet: headings take their own line, the blocks under them sit in two columns. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  [data-page="trade-local"] {
    & .license-lead { grid-column: 1 / span 6; grid-row: 2; }
    & .license-more { grid-column: 7 / -1; grid-row: 2; }
    & :is(.rows-body, .lines-body, .programs-body, .zips-body, .city-license-body) .run-title { grid-column: 1 / -1; }
    & .city-license-lead { grid-column: 1 / -1; grid-row: 2; max-width: 62ch; }
    & .city-license-needs { grid-column: 1 / span 7; grid-row: 3; }
    & .city-license-more { grid-column: 8 / -1; grid-row: 3; }
    & .rows-words { grid-column: 1 / span 7; grid-row: 2; }
    & .rows-fresh { grid-column: 8 / -1; grid-row: 2; align-self: start; }
    & .lines-year { grid-column: 1 / span 6; grid-row: 2; }
    & .lines-words { grid-column: 7 / -1; grid-row: 2; align-self: start; }
    & .program-waiver { grid-column: 1 / span 6; }
    & .program-equity { grid-column: 7 / -1; }
    & .zips-chips { grid-column: 1 / span 7; grid-row: 2; }
    & .zips-more { grid-column: 8 / -1; grid-row: 2; }
  }
}

/* Phone: one column beside the pipe. */
@media (max-width: 767.98px) {
  [data-page="trade-local"] {
    & .run-greeting { font-size: clamp(2.75rem, 14.5vw, 5.5rem); white-space: normal; }
    & .hero-intro { grid-column: 1 / -1; }
    & :is(.license-words, .rows-body, .lines-body, .programs-body, .zips-body, .city-license-body) { grid-template-columns: minmax(0, 1fr); }
    & :is(.license-words, .rows-body, .lines-body, .programs-body, .zips-body, .city-license-body) > *,
    & :is(.rows-body, .lines-body, .programs-body, .zips-body, .city-license-body) .run-title { grid-column: 1 / -1; grid-row: auto; }
    & .places-more { grid-column: 1 / -1; }
    & .rows-fresh { margin-top: 0.5rem; }
    & .program-range .program-figure { font-size: clamp(1.5rem, 7.2vw, 2.25rem); }
    & .zips-chips .chip-list { grid-template-columns: minmax(0, 1fr); }
    & .zips-chips .chip { min-height: 3rem; font-size: var(--t-m); }
  }
}