:root {
    --ground: #e7e9e7;        --raised: #f6f7f5;        --ink: #1f2528;           --muted: #4d5659;         --lead: #59626a;          --stone: #c6a971;         --rubric: #94301f;        --spring: #256b5c;        --on-spring: #f3f6f4;   
    --water: var(--spring);
  --located: var(--spring);
  --call: var(--spring);
  --focus: var(--spring);

    --face-display: "Marcellus", "Optima", "Candara", "Segoe UI", sans-serif;
  --face-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-h1: clamp(2.5rem, 1.6rem + 3.4vw, 4.6rem);
  --text-h1-long: clamp(2.25rem, 1.45rem + 2.5vw, 3.6rem);    --text-h2: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem);
  --text-h3: 1.2rem;
  --text-body: 1.0625rem;     --text-body-wide: 1.125rem;   --text-small: 0.9375rem;
  --text-label: 0.875rem;
  --leading-body: 1.6;
  --leading-heading: 1.1;
  --measure: 68ch;

    --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-pad: var(--space-7);
  --gutter: 16px;
  --content: 72rem;

    --line: 1px;
  --line-rubric: 2px;
  --radius: 0;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --water-run: 900ms;
  --state: 120ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-pad: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: var(--space-9);
  }
}


@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marcellus-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marcellus-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-5);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
}

@media (min-width: 1024px) {
  body {
    font-size: var(--text-body-wide);
  }
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
table {
  margin: 0;
}

h1,
h2 {
  font-family: var(--face-display);
  font-weight: 400;
  line-height: var(--leading-heading);
  text-wrap: balance;
}

h3 {
  font-family: var(--face-text);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.3;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--state) var(--ease-out);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.site-main:focus {
  outline: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--lead);
  color: var(--on-spring);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 50;
  background: var(--lead);
  color: var(--on-spring);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  --focus: var(--ink);
}

.skip-link:focus {
  top: var(--space-2);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



.site-header {
  position: relative;
  z-index: 20;
  background: var(--ground);
  border-bottom: var(--line) solid var(--lead);
}

.site-header__inner {
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 40px;
  height: 40px;
}

.brand-mark__lead {
  fill: var(--lead);
}

.brand-mark__water {
  fill: var(--water);
}

.brand-mark__seam {
  fill: none;
  stroke: var(--raised);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.brand-lockup__name {
  display: flex;
  flex-direction: column;
  font-family: var(--face-display);
  text-transform: uppercase;
  line-height: 1.08;
  white-space: nowrap;
}

.brand-lockup__first {
  font-size: 1.1875rem;
  letter-spacing: 0.07em;
}

.brand-lockup__rest {
  font-size: 0.75rem;
  letter-spacing: 0.235em;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  position: relative;
}

.site-nav__link,
.nav-menu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.site-nav__link:hover,
.nav-menu__toggle:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.nav-menu__toggle,
.phone-menu__toggle {
  list-style: none;
}

.nav-menu__toggle::-webkit-details-marker,
.phone-menu__toggle::-webkit-details-marker {
  display: none;
}

.nav-menu__toggle::after,
.phone-menu__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--state) var(--ease-out);
}

.nav-menu[open] > .nav-menu__toggle::after,
.phone-menu[open] > .phone-menu__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

.nav-menu__list {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 30;
  min-width: 19rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--raised);
  border: var(--line) solid var(--lead);
}

.nav-menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.nav-menu__link:hover,
.nav-menu__link[aria-current="page"] {
  background: var(--ground);
  text-decoration: underline;
}

.phone-menu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3) 0 var(--space-4);
  border: var(--line) solid var(--lead);
  font-weight: 600;
  cursor: pointer;
}

.phone-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
  background: var(--raised);
  border-bottom: var(--line) solid var(--lead);
}

.phone-menu__group {
  margin: var(--space-4) 0 var(--space-1);
  font-family: var(--face-display);
  font-size: 1.25rem;
}

.phone-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--line) solid var(--ground);
}

.phone-menu__link[aria-current="page"] {
  text-decoration: underline;
}

.site-header__call {
  display: none;
}

@media (max-width: 359px) {
  .site-header__inner {
    gap: var(--space-2);
  }

  .brand-lockup {
    gap: var(--space-2);
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-lockup__first {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  .brand-lockup__rest {
    font-size: 0.6875rem;
    letter-spacing: 0.17em;
  }

  .phone-menu__toggle {
    padding-left: var(--space-3);
  }
}

@media (min-width: 768px) {
  .site-nav {
    display: block;
  }

  .phone-menu {
    display: none;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    min-height: 76px;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
  }

  .brand-lockup__first {
    font-size: 1.375rem;
  }

  .brand-lockup__rest {
    font-size: 0.8125rem;
  }

  .site-header__call {
    display: block;
  }
}


.article-head {
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) 0;
}

.stone-panel {
  --focus: var(--ink);
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--stone);
  color: var(--ink);
  outline: var(--line) solid var(--lead);
  outline-offset: -9px;
}

.stone-panel__title {
  font-size: var(--text-h1);
  letter-spacing: -0.01em;
  line-height: 1.04;
}

.stone-panel--long-title .stone-panel__title {
  font-size: var(--text-h1-long);
  line-height: 1.07;
}

.stone-panel__answer {
  margin-top: var(--space-5);
  max-width: 60ch;
}

.stone-panel .fold-link {
  margin-top: var(--space-4);
}

.stone-panel .call-action {
  margin-top: var(--space-5);
}

.article-head--signature {
  display: grid;
  gap: var(--space-5);
}

.article-head--signature .lead-section {
  order: -1;
}

@media (max-width: 639px) {
  .article-head--signature {
    gap: 0;
    padding: 0;
  }

  .article-head--signature .stone-panel {
    padding: 20px var(--space-5);
  }

  .article-head--signature .lead-section__caption {
    margin: var(--space-2) var(--gutter) var(--space-3);
    font-size: var(--text-label);
  }

  .article-head + .question-section {
    padding-top: var(--space-6);
  }

  .article-head--page {
    padding-inline: 0;
    padding-top: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .article-head--signature .lead-section {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .article-head {
    padding-top: var(--space-7);
  }

  .article-head--signature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--space-7);
  }

  .article-head--signature .lead-section {
    order: 0;
  }

  .stone-panel {
    padding: var(--space-7) var(--space-6) var(--space-7) var(--space-7);
    outline-offset: -12px;
  }

  .article-head--page .stone-panel {
    max-width: 52rem;
  }
}

@media (min-width: 1280px) {
  .article-head--signature {
    max-width: none;
    padding-right: 0;
    padding-left: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
    grid-template-columns: calc((var(--content) - 2 * var(--gutter) - var(--space-7)) * 7 / 12) minmax(0, 1fr);
  }

    .article-head--signature .lead-section__art--plate {
    aspect-ratio: 800 / 560;
    max-height: 33rem;
  }
}

.fold-link__anchor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
}

.fold-link__anchor::after {
  content: "";
  width: 11px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


.lead-section,
.ownership-section,
.coverage-map,
.plate {
  margin: 0;
}

.lead-section__art,
.ownership-section__art,
.coverage-map__art {
  display: block;
  width: 100%;
  height: auto;
}

.lead-section__art--plate,
.ownership-section__art--plate,
.coverage-map__art--plate {
  display: none;
}

@media (min-width: 640px) {
  .lead-section__art--band,
  .ownership-section__art--band,
  .coverage-map__art--band {
    display: none;
  }

  .lead-section__art--plate,
  .ownership-section__art--plate,
  .coverage-map__art--plate {
    display: block;
  }
}

.lead-section__caption,
.ownership-section__caption,
.coverage-map__caption,
.plate__caption {
  margin-top: var(--space-3);
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.ownership-section,
.coverage-map,
.plate {
  margin-top: var(--space-6);
  max-width: 60rem;
}


.d-earth { fill: var(--ground); }
.d-hatch-line { fill: none; stroke: var(--lead); stroke-width: 1.1; opacity: 0.42; }
.d-room { fill: var(--raised); }
.d-stone { fill: var(--stone); }
.d-course { fill: none; stroke: var(--lead); stroke-width: 1; opacity: 0.6; }
.d-edge { fill: none; stroke: var(--lead); stroke-width: 1.4; }
.d-render { fill: var(--ground); }
.d-asphalt { fill: var(--lead); }
.d-sand,
.d-slab,
.d-screed,
.d-tile,
.d-glass { fill: var(--raised); }
.d-grain-dot,
.d-grain-chip { fill: var(--lead); opacity: 0.55; }
.d-surface,
.d-turf { fill: none; stroke: var(--lead); stroke-width: 1.4; stroke-linecap: round; }
.d-boards,
.d-roof,
.d-cover,
.d-worktop,
.d-screen { fill: var(--lead); }
.d-door { fill: var(--lead); }
.d-timber { fill: var(--stone); stroke: var(--lead); stroke-width: 1; }
.d-ceiling { fill: var(--raised); stroke: var(--lead); stroke-width: 1; }
.d-frame { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.d-loft { fill: var(--raised); stroke: var(--lead); stroke-width: 1; }
.d-stain { fill: var(--raised); }
.d-stain-line { fill: none; stroke: var(--lead); stroke-width: 1.6; }
.d-stain-edge { fill: none; stroke: var(--lead); stroke-width: 1.4; }
.d-boundary { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 7 6; }
.d-dimension { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-centre { fill: none; stroke: var(--raised); stroke-width: 2; stroke-dasharray: 9 8; }
.d-pipe { fill: none; stroke: var(--lead); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.d-pipe.d-pipe--thin { stroke-width: 10; }
.d-bore { fill: none; stroke: var(--raised); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.d-bore.d-pipe--thin { stroke-width: 4; }
.d-seam { fill: none; stroke: var(--lead); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 5.5; }
.d-pipe-cut { fill: var(--lead); }
.d-seam-cut { fill: none; stroke: var(--raised); stroke-width: 2; stroke-linecap: round; }
.d-valve { fill: var(--raised); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.d-handle { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.d-handle-block { fill: var(--ink); }
.d-dial { fill: var(--raised); stroke: var(--ink); stroke-width: 1.8; }
.d-ticks { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.d-needle { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.d-turning { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-fitting,
.d-unit,
.d-chamber { fill: var(--raised); stroke: var(--ink); stroke-width: 1.5; }
.d-thin { fill: none; stroke: var(--ink); stroke-width: 1; }
.d-bowl { fill: var(--ground); stroke: var(--ink); stroke-width: 1.2; }
.d-tap { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-screen-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.d-open { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.d-plumb { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 4; }
.d-span { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.d-tee { fill: var(--ink); }
.d-label {
  font-family: var(--face-text);
  font-weight: 600;
  fill: var(--ink);
  stroke: var(--ground);
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.d-leader { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.d-leader-dot { fill: var(--ink); }


.water {
  fill: none;
  stroke: var(--water);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.water--thin {
  stroke-width: 4;
}

.water--run {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: water-run var(--water-run) var(--ease-out) 150ms both;
}

.water-body {
  fill: var(--water);
}

.water-escape {
  fill: var(--water);
  animation: water-escape 420ms var(--ease-out) 860ms both;
}

.located-point {
  fill: var(--located);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: located-settle 360ms var(--ease-out) 860ms both;
}

@keyframes water-run {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes water-escape {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes located-settle {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .water--run,
  .water-escape,
  .located-point {
    animation: none;
  }
}


.map-dot {
  fill: var(--raised);
  stroke: var(--lead);
  stroke-width: 1.6;
}

.map-dot--place {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1;
}

.coverage-map .d-label {
  stroke: none;
}

.coverage-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
}

.coverage-map__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.coverage-map__key::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--lead);
  background: var(--raised);
}

.coverage-map__key--place::before {
  border-color: var(--ink);
  background: var(--ink);
}


.question-section {
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--section-pad) var(--gutter) 0;
}

.question-section--raised {
  max-width: none;
  margin-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
  background: var(--raised);
}

.article-head + .question-section,
.place-tablet + .question-section {
  padding-top: var(--space-7);
}

.page-article > :last-child:not(.question-section--raised) {
  padding-bottom: var(--section-pad);
}

.rubric-heading {
  max-width: 30ch;
  font-size: var(--text-h2);
}

.rubric-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: var(--line-rubric);
  margin-top: var(--space-4);
  background: var(--rubric);
}

.question-section__answer {
  margin-top: var(--space-5);
  max-width: var(--measure);
}

.question-section > p {
  max-width: var(--measure);
}

.question-section > * + * {
  margin-top: var(--space-5);
}

.question-section > .rubric-heading + .question-section__answer {
  margin-top: var(--space-5);
}

.question-section__subheading {
  margin-top: var(--space-7);
}

.question-section > .question-section__subheading + * {
  margin-top: var(--space-3);
}

.plain-list {
  max-width: var(--measure);
  padding-left: 1.25em;
}

.plain-list__item + .plain-list__item {
  margin-top: var(--space-2);
}

.plain-list__item::marker {
  color: var(--lead);
}


.conduit-router {
  position: relative;
  padding-top: var(--space-6);
  padding-left: 54px;
}

.conduit-router__cap {
  position: absolute;
  top: 0;
  left: 3px;
  width: 40px;
  height: 40px;
}

.conduit-router__cap-lead {
  fill: var(--lead);
}

.conduit-router__cap-water {
  fill: var(--water);
}

.conduit-router__cap-seam {
  fill: none;
  stroke: var(--raised);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.conduit-router__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.conduit-router__entry {
  position: relative;
  padding-bottom: var(--space-7);
}

.conduit-router__entry:last-child {
  padding-bottom: 0;
}

.conduit-router__pipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  width: 12px;
  background: var(--lead);
}

.conduit-router__entry:first-child .conduit-router__pipe {
  top: -8px;
}

.conduit-router__entry:last-child .conduit-router__pipe {
  bottom: auto;
  height: 19px;
}

.conduit-router__branch {
  position: absolute;
  top: 7px;
  left: -40px;
  width: 30px;
  height: 12px;
  background: var(--lead);
}

.conduit-router__pipe .conduit-router__water {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 4px;
  background: var(--water);
}

.conduit-router__branch .conduit-router__water {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 0;
  height: 4px;
  background: var(--water);
}


.conduit-router__sentence {
  margin-top: var(--space-2);
  max-width: var(--measure);
}

.conduit-router__more {
  margin-top: var(--space-2);
}

.conduit-router__more a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 600;
}

.conduit-router__facts {
  margin-top: var(--space-2);
  max-width: var(--measure);
  font-size: var(--text-small);
  border-top: var(--line) solid var(--lead);
}

.conduit-router__fact {
  display: grid;
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--line) solid var(--lead);
}

.conduit-router__fact dt {
  font-weight: 600;
}

@media (min-width: 768px) {
  .conduit-router__fact {
    grid-template-columns: 10.5rem minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .conduit-router__entry {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }

  .conduit-router__name,
  .conduit-router__sentence,
  .conduit-router__more {
    grid-column: 1;
  }

  .conduit-router__facts {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: var(--space-1);
  }
}


.method-tablet,
.data-table {
  max-width: 64rem;
}

.method-tablet__table,
.data-table__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--raised);
  border: var(--line) solid var(--lead);
  font-size: var(--text-small);
}

.method-tablet__caption,
.data-table__caption {
  padding-bottom: var(--space-3);
  text-align: left;
  color: var(--muted);
  font-size: var(--text-small);
}

.method-tablet__table th,
.method-tablet__table td,
.data-table__table th,
.data-table__table td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
}

.method-tablet__table thead th,
.data-table__table thead th {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 3px double var(--lead);
}

.method-tablet__table tbody tr + tr > *,
.data-table__table tbody tr + tr > * {
  border-top: var(--line) solid var(--lead);
}

.method-tablet__table tbody th,
.data-table__table tbody th {
  font-weight: 600;
}

.method-tablet__method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.method-tablet__name {
  font-family: var(--face-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
}

.method-glyph {
  flex: none;
  width: 44px;
  height: 44px;
}

.glyph__lead { fill: var(--lead); }
.glyph__water { fill: var(--water); }
.glyph__line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.glyph__wave { fill: none; stroke: var(--lead); stroke-width: 2.2; stroke-linecap: round; }
.glyph__dial { fill: var(--raised); stroke: var(--ink); stroke-width: 2.2; }
.glyph__surface { fill: none; stroke: var(--lead); stroke-width: 2; }
.glyph__wall { fill: var(--stone); stroke: var(--lead); stroke-width: 2; }
.glyph__pipe { fill: none; stroke: var(--lead); stroke-width: 9; stroke-linecap: round; }
.glyph__pipe-thin { fill: none; stroke: var(--lead); stroke-width: 6; stroke-linecap: round; }
.glyph__dot { fill: var(--lead); }
.glyph__cell { fill: var(--raised); stroke: var(--lead); stroke-width: 1.2; }
.glyph__cell-wet { fill: var(--lead); }

@media (max-width: 767px) {
  .method-tablet__table,
  .method-tablet__table tbody,
  .method-tablet__table tr,
  .method-tablet__table th,
  .method-tablet__table td,
  .data-table__table,
  .data-table__table tbody,
  .data-table__table tr,
  .data-table__table th,
  .data-table__table td {
    display: block;
  }

  .method-tablet__table thead,
  .data-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .method-tablet__table td,
  .data-table__table td {
    padding-top: 0;
  }

  .method-tablet__caption,
  .data-table__caption {
    display: block;
    padding: var(--space-3) var(--space-4) 0;
  }

  .method-tablet__table td::before,
  .data-table__table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: var(--text-label);
  }

  .method-tablet__table tbody tr + tr > *,
  .data-table__table tbody tr + tr > * {
    border-top: 0;
  }

  .method-tablet__table tbody tr + tr,
  .data-table__table tbody tr + tr {
    border-top: var(--line) solid var(--lead);
  }
}


.sequence {
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.sequence__step {
  position: relative;
  padding-left: 68px;
  counter-increment: step;
}

.sequence__step::before {
  content: counter(step);
  position: absolute;
  top: -6px;
  left: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--line) solid var(--lead);
  background: var(--raised);
  font-family: var(--face-display);
  font-size: 1.375rem;
  line-height: 1;
}

.sequence__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: calc(-1 * var(--space-6) - 6px);
  left: 22px;
  width: var(--line);
  background: var(--lead);
}

.sequence__body {
  margin-top: var(--space-2);
}


:where(.place-list) {
  margin: 0;
}

.place-list {
  display: grid;
  gap: 0 var(--space-6);
  max-width: 52rem;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--lead);
}

@media (min-width: 768px) {
  .place-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.place-list__item {
  border-bottom: var(--line) solid var(--lead);
}

.place-list__link {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--face-display);
  font-size: 1.25rem;
  text-decoration: none;
}

.place-list__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.coverage-list {
  display: grid;
  gap: var(--space-5);
  max-width: 60rem;
}

.coverage-list__term {
  font-weight: 600;
  font-size: var(--text-label);
}

.coverage-list dd {
  margin-top: var(--space-2);
}

.inscribed-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--face-display);
  font-size: 1.1875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inscribed-list__item {
  display: inline-flex;
  align-items: center;
}

.inscribed-list__item:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 6px;
  margin: 0 13px;
  background: var(--lead);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.inscribed-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.inscribed-list a:hover {
  text-decoration: underline;
}

.inscribed-list__code {
  margin-right: 0.4em;
  color: var(--lead);
}

.district-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-7) var(--space-6);
}

.district-index__title {
  padding-bottom: var(--space-2);
  border-bottom: var(--line) solid var(--lead);
  font-family: var(--face-display);
  font-weight: 400;
  font-size: 1.375rem;
}

.district-index__area-code {
  margin-right: 0.35em;
  color: var(--lead);
}

.district-index__list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-5);
  font-size: var(--text-small);
}

.district-index__list--place {
  max-width: 44rem;
  columns: 3 9rem;
}

.district-index__item {
  display: grid;
  grid-template-columns: 3.3em minmax(0, 1fr);
  column-gap: var(--space-1);
  break-inside: avoid;
  padding: 2px 0;
}

.district-index__code {
  font-weight: 600;
}

.district-index__note {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--text-label);
}

.town-districts {
  max-width: 60rem;
  columns: 2 22rem;
  column-gap: var(--space-7);
  font-size: var(--text-small);
}

.town-districts__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--line) solid var(--lead);
  break-inside: avoid;
}

.town-districts__town {
  font-weight: 600;
}


.place-tablet {
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter) 0;
}

.place-tablet__figures {
  max-width: 60rem;
  background: var(--raised);
  border: var(--line) solid var(--lead);
}

.place-tablet__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.place-tablet__row + .place-tablet__row {
  border-top: var(--line) solid var(--lead);
}

.place-tablet__term {
  font-weight: 600;
}

.place-tablet__value {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  font-family: var(--face-display);
  font-size: 1.75rem;
  line-height: 1;
}

.place-tablet__compare,
.place-tablet__source {
  color: var(--muted);
  font-size: var(--text-small);
}

.place-tablet__attribution {
  max-width: 80ch;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-label);
}


.source-note {
  max-width: var(--measure);
  padding: var(--space-4) var(--space-5);
  background: var(--raised);
  border: var(--line) solid var(--lead);
}

.source-note__source {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
}

.report-link {
  font-weight: 600;
}


.call-action {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4em;
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  background: var(--call);
  color: var(--on-spring);
  font-weight: 600;
  text-decoration: none;
}

.call-action:hover {
  text-decoration: underline;
}

.call-action__number {
  white-space: nowrap;
}

.call-action--block {
  display: flex;
  justify-content: center;
  width: 100%;
}

.call-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: var(--space-2) var(--gutter);
  background: var(--call);
}

@media (min-width: 1024px) {
  .call-bar {
    display: none;
  }
}

.phone-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4) var(--space-6);
  max-width: 60rem;
}

.phone-list__row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.phone-list__number {
  margin-top: var(--space-1);
}

.phone-link--inline {
  padding-block: 12px;
  white-space: nowrap;
}

.call-action--number {
  min-height: 44px;
  padding: 0 var(--space-3);
  vertical-align: middle;
  white-space: nowrap;
}

.site-footer .call-action {
  border: var(--line) solid var(--on-spring);
}


.legal-block {
  max-width: var(--measure);
  border-top: var(--line) solid var(--lead);
}

.legal-block__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--line) solid var(--lead);
}

.legal-block__term {
  font-weight: 600;
}


.breadcrumb {
  max-width: var(--content);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  border-top: var(--line) solid var(--lead);
  font-size: var(--text-small);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 7px;
  height: 6px;
  margin: 0 12px;
  background: var(--lead);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


.site-footer {
  --focus: var(--on-spring);
  margin-top: var(--space-8);
  background: var(--lead);
  color: var(--on-spring);
}

.breadcrumb + .site-footer {
  margin-top: var(--space-5);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-6);
}

.brand-lockup--footer {
  color: var(--on-spring);
}

.site-footer .brand-mark__lead {
  fill: var(--on-spring);
}

.site-footer .brand-mark__seam {
  stroke: var(--lead);
}

.site-footer__coverage {
  max-width: 40ch;
  margin-top: var(--space-4);
  font-size: var(--text-small);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-6);
}

.site-footer__heading {
  margin-bottom: var(--space-2);
  font-family: var(--face-display);
  font-size: 1.25rem;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-spring);
  text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link[aria-current="page"] {
  text-decoration: underline;
}

.site-footer__legal {
  padding-top: var(--space-4);
  border-top: var(--line) solid var(--on-spring);
  font-size: var(--text-small);
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  .site-footer__numbers,
  .site-footer__legal {
    grid-column: 1 / -1;
  }

  .site-footer__numbers .phone-list {
    max-width: none;
  }
}



.page-index {
  display: grid;
  max-width: 46rem;
  padding-left: 0;
  list-style: none;
  border-top: var(--line) solid var(--lead);
}

.page-index .plain-list__item + .plain-list__item {
  margin-top: 0;
}

.page-index .plain-list__item {
  border-bottom: var(--line) solid var(--lead);
}

.page-index a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) 0;
  font-family: var(--face-display);
  font-size: 1.1875rem;
  line-height: 1.3;
  text-decoration: none;
}

.page-index a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}


.page--about .method-tablet {
  max-width: 60rem;
}



@media (max-width: 639px) {
  .page--home .stone-panel {
    padding-block: var(--space-4);
  }

  .page--home .stone-panel__answer {
    margin-top: var(--space-4);
    line-height: 1.5;
  }

  .page--home .stone-panel .fold-link {
    margin-top: var(--space-2);
  }

  .page--home .article-head + .question-section {
    padding-top: var(--space-5);
  }
}


.page--home .question-section > .place-list {
  margin-top: var(--space-6);
}


.page--home .sign-list {
  display: grid;
  gap: 0 var(--space-7);
  max-width: none;
  padding: 0;
  list-style: none;
}

.page--home .sign-list .plain-list__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0 var(--space-5);
  border-top: var(--line) solid var(--lead);
}

.page--home .sign-list__points {
  font-weight: 600;
}

.page--home .sign-list__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 400;
}

@media (min-width: 768px) {
  .page--home .sign-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 64rem;
  }
}


@media (max-width: 767px) {
  .page--home .data-table__caption {
    display: block;
    padding: var(--space-3) var(--space-4) 0;
  }

  .page--home .data-table__table th[scope="row"] {
    padding-bottom: var(--space-2);
    font-family: var(--face-display);
    font-size: 1.125rem;
    font-weight: 400;
  }

  .page--home .data-table__table td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: 0 var(--space-3);
  }

  .page--home .data-table__table td::before {
    color: var(--muted);
  }

  .page--home .data-table__table tr > :last-child {
    padding-bottom: var(--space-4);
  }
}


.question-section > .districts-attribution {
  color: var(--muted);
  font-size: var(--text-label);
}

.question-section > .districts-attribution + .districts-attribution {
  margin-top: var(--space-1);
}

.district-index + .districts-attribution {
  margin-top: var(--space-6);
}

.place-coverage th a,
.supply-checks th a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.supply-checks th a {
  padding-inline: 4px;
  margin-inline: -4px;
}


.stone-panel .fold-link + .fold-link {
  margin-top: 0;
}

.fold-link--across a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.question-section > * + .sequence {
  margin-top: var(--space-6);
}

@media (max-width: 767px) {
  :is(.page--plumbing-leaks, .page--heating-pressure, .page--underground-supply, .page--leak-insurance)
    :is(.method-tablet__caption, .data-table__caption) {
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-2);
  }
}