/* St. Louis Sewer Repair
   The site is a drawing sheet: a bordered sheet, a title block for the footer,
   hatching and leader lines in the figures. Limestone paper, graphite ink, and
   verdigris (aged copper) for the new pipe and the phone number. Calm on purpose:
   lining is planned work, not an emergency. */

@font-face { font-family: "Caslon Text"; src: url("/assets/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("/assets/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("/assets/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #eeede8;       /* limestone */
  --paper-deep: #dfded6;  /* schedule headers, the title block */
  --ink: #232528;         /* graphite: linework and text */
  --ink-soft: #55595e;    /* secondary text */
  --rule: #b6b6ae;        /* hairlines */
  --accent: #2f6f66;      /* verdigris: the phone number and the cured liner */
  --deep: #1f4a44;        /* deep verdigris: masthead, opening band, title block */
  --tint: #d9e6e1;        /* pale verdigris: table heads, the phone bar */
  --on-deep: #eeede8;     /* text on --deep */
  --on-deep-soft: #c9ddd6;
  --resin-wet: #9cc6bc;   /* liner before curing */
  --resin-cured: #2f6f66; /* liner after curing */

  --serif: "Caslon Text", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 38rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.05rem); line-height: 1.18; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 1em; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; z-index: 10; }
.preview { margin: 0; padding: 0.5rem var(--gutter); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.85rem; }

/* The sheet: a ruled border on wide screens, nothing on phones. */
.sheet { max-width: 76rem; margin: 0 auto; }
@media (min-width: 60rem) {
  .sheet {
    margin: 1.5rem auto 2rem;
    border: 1.5px solid var(--ink);
    outline: 1px solid var(--ink);
    outline-offset: 5px;
  }
}

/* Masthead */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: var(--deep);
  color: var(--on-deep);
  border-bottom: 1px solid rgba(238, 237, 232, 0.25);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem var(--gutter);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--on-deep);
  text-decoration: none;
}
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.brand-mark circle { fill: none; stroke: var(--on-deep); stroke-width: 2.5; }
.brand-mark circle + circle { stroke: #7fb3a6; stroke-width: 5; }

/* The call, quiet: a cell of the title block, not a button. */
.callcell {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem var(--gutter) 0.6rem 1.5rem;
  border-left: 1px solid rgba(238, 237, 232, 0.35);
  text-decoration: none;
  line-height: 1.25;
}
.callcell-label { font-style: italic; font-size: 0.9rem; color: var(--on-deep-soft); }
.callcell-number { font-size: 1.35rem; font-weight: 700; color: var(--on-deep); font-variant-numeric: lining-nums tabular-nums; }
.callcell:hover .callcell-number { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 40rem) { .callcell { display: flex; } }

/* On phones: a slim bar in the page's own paper, with the number in verdigris. */
.callbar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--tint);
  border-top: 1px solid var(--deep);
  text-decoration: none;
  line-height: 1.3;
}
.callbar-label { font-style: italic; font-size: 0.95rem; color: var(--deep); }
.callbar-number { font-weight: 700; font-size: 1.15rem; color: var(--deep); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 40rem) { .callbar { display: none; } }
.callbar { transition: transform 0.25s ease; }
.callbar.is-tucked { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }

/* On wider screens the masthead stays pinned, so the number never scrolls away. */
@media (min-width: 40rem) {
  .masthead { position: sticky; top: 0; z-index: 5; }
}

/* Sections */
.zone { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); }
.zone + .zone { border-top: 1px solid var(--rule); }
.zone-head { max-width: var(--measure); margin-bottom: 1.75rem; }
.zone-head p { margin-top: 0.75rem; color: var(--ink-soft); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

.opening { background: var(--deep); color: var(--on-deep); padding: clamp(2.25rem, 6vw, 4.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.75rem); }
.opening .lead { color: var(--on-deep-soft); }
.hero-text { display: grid; gap: 1.25rem; align-items: end; }
.lead { max-width: 34rem; font-size: 1.2rem; line-height: 1.6; }
@media (min-width: 60rem) {
  .hero-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; }
  .hero-text .lead { padding-bottom: 0.35rem; }
}
.fig-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 0.9rem; }
.fig-head h2 { font-size: 1.35rem; }
.fig-head p { font-size: 1rem; color: var(--ink-soft); }

/* Fig. 1 */
.fig { margin: 0; }
.fig-frame { border: 1px solid var(--ink); background: var(--paper); }
.lining { display: block; width: 100%; height: auto; }
.lining .paper { fill: var(--paper); }
.lining .hatch { stroke: var(--ink); stroke-width: 1; opacity: 0.16; }
.lining .speck { fill: var(--ink); opacity: 0.45; }
.lining .grade { stroke: var(--ink); stroke-width: 2; }
.lining .grass path { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.lining .line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lining .cut { stroke: var(--ink); stroke-width: 1.5; }
.lining .pave { fill: var(--ink); opacity: 0.8; }
.lining .root { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0.55; }
.lining .pipe-wall path { fill: none; stroke: var(--ink); stroke-width: 24; stroke-linejoin: round; }
.lining .pipe-bore path { fill: none; stroke: var(--paper); stroke-width: 19; stroke-linejoin: round; }
.lining .cap { fill: var(--ink); }
.lining .breakline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lining .joints path { stroke: var(--ink); stroke-width: 2; }
.lining .main-wall { fill: var(--ink); }
.lining .main-bore { fill: var(--paper); }
.lining .defect { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.lining .rootball path { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.lining .liner { fill: none; stroke-width: 15; stroke-linejoin: round; }
.lining .liner-wet { stroke: var(--resin-wet); }
.lining .liner-cured { stroke: var(--resin-cured); }
.lining .reopen { stroke: var(--paper); stroke-width: 15; }
.lining .cable { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 3; }
.lining .tool-body { fill: var(--ink); }
.lining .lens { fill: var(--resin-wet); }
.lining .beam { fill: var(--resin-wet); fill-opacity: 0.4; }
.lining .spin { stroke: var(--ink); stroke-width: 2; }
.lining .bit { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.lining .cure-front { fill: var(--accent); fill-opacity: 0.35; }
.lining .detail-frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.lining .tube { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lining .resin { fill: var(--resin-wet); }
.lining .roller { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.lining .dim path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.lining .callout path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.lining .lbl {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}
@media (max-width: 44rem) {
  .lining .lbl { display: none; }
  .lining .lbl-key { display: inline; font-size: 26px; stroke-width: 8px; }
  .lining .callout, .lining .dim text { display: none; }
}

.fig-caption {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Steps, as written in the page (no script) */
.fig-steps {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.fig-steps li { counter-increment: step; border-top: 1.5px solid var(--ink); padding-top: 0.6rem; }
.fig-steps h3::before { content: counter(step) ". "; }
.fig-steps p { margin-top: 0.35rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* Steps, once lining.js takes over: a scale bar of seven stations and one caption */
.fig.is-live .fig-steps {
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-left: 1.5px solid var(--ink);
}
.fig.is-live .fig-steps li { border-top-width: 0; padding: 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.fig.is-live .fig-steps p { display: none; }
.fig.is-live .fig-steps h3::before { content: none; }
.fig-steps button {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.55rem 0.6rem 0.6rem;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  position: relative;
}
.fig-steps button .n { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
.fig-steps button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: var(--progress, 0%);
  background: var(--resin-cured);
}
.fig-steps button[aria-current="step"] { background: var(--deep); color: var(--on-deep); }
.fig-steps button[aria-current="step"] .n { color: var(--on-deep-soft); }
.fig-steps button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
@media (max-width: 44rem) {
  .fig-steps button { font-size: 0; padding: 0.7rem 0; text-align: center; }
  .fig-steps button .n { font-size: 0.95rem; color: var(--ink); }
}

.fig-now {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
  min-height: 7.5rem;
}
.fig-now h3 { font-size: 1.2rem; }
.fig-now p { margin-top: 0.3rem; max-width: var(--measure); }
.fig-play {
  all: unset;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.fig-play svg { width: 1rem; height: 1rem; fill: var(--ink); }
.fig-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Schedule: a drawing's table */
.schedule { width: 100%; max-width: 56rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.schedule caption { text-align: left; font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); padding-bottom: 0.6rem; }
.schedule th, .schedule td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border: 1px solid var(--ink); }
.schedule thead th { background: var(--tint); font-weight: 700; }
.schedule tbody th { font-weight: 700; width: 34%; }
.schedule td.num, .schedule th.num { text-align: right; font-variant-numeric: tabular-nums; }
.schedule .yes { font-weight: 700; }
.source { margin-top: 0.75rem; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); max-width: 56rem; }
@media (max-width: 40rem) {
  .schedule.stack thead { display: none; }
  .schedule.stack tr { display: block; border: 1px solid var(--ink); border-top: 0; }
  .schedule.stack tr:first-child { border-top: 1px solid var(--ink); }
  .schedule.stack th, .schedule.stack td { display: block; border: 0; width: auto; }
  .schedule.stack tbody th { background: var(--tint); }
  .schedule.stack td::before { content: attr(data-col) ": "; font-weight: 700; }
}

/* Who calls: a two-column list with a rule, not cards */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; max-width: 64rem; margin: 0; }
.uses div { border-top: 1px solid var(--ink); padding: 0.8rem 0 1.4rem; }
.uses dt { font-weight: 700; }
.uses dd { margin: 0.25rem 0 0; font-size: 1rem; color: var(--ink-soft); }

/* Footer title block */
.titleblock {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--deep);
  color: var(--on-deep);
}
.titleblock a { color: var(--on-deep); }
.tb-cell { padding: 0.9rem var(--gutter) 1rem; border-bottom: 1px solid rgba(238, 237, 232, 0.25); }
.tb-label { font-family: var(--mono); font-size: 0.75rem; color: var(--on-deep-soft); }
.tb-value { font-weight: 700; font-size: 1.2rem; margin-top: 0.1rem; }
.tb-small { font-size: 0.9rem; line-height: 1.5; margin-top: 0.3rem; }
.tb-list { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.95rem; }
@media (min-width: 50rem) {
  .titleblock { grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1.1fr; }
  .tb-cell { border-bottom: 0; border-right: 1px solid rgba(238, 237, 232, 0.25); padding: 0.9rem 1.2rem 1.1rem; }
  .tb-cell:first-child { padding-left: var(--gutter); }
  .tb-cell:last-child { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media (max-width: 30rem) {
  .schedule { font-size: 0.95rem; }
  .schedule th, .schedule td { padding: 0.55rem 0.5rem; }
}

/* Town pages: prose beside a fact sheet */
.town-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .town-grid { grid-template-columns: minmax(0, 38rem) minmax(0, 22rem); justify-content: space-between; align-items: start; }
  .factsheet { position: sticky; top: 6rem; }
}
.factsheet .schedule { font-size: 0.95rem; }
.factsheet .schedule tbody th { width: 58%; }
.aside-link { margin-top: 0.75rem; font-size: 1rem; }
.prose ol { padding-left: 1.3em; }
.prose ol li + li { margin-top: 0.5em; }
.prose h2 + p, .prose h2 + ul, .prose h2 + ol { margin-top: 0; }
.prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 1em; }

/* Closing call: pale band, the number large and calm */
.closing { background: var(--tint); border-top: 1px solid var(--deep); padding: clamp(2rem, 5vw, 3.25rem) var(--gutter); }
.closing-inner { max-width: var(--measure); }
.closing h2 { color: var(--deep); }
.closing p { margin-top: 0.5rem; }
.closing-call { display: inline-block; margin-top: 0.9rem; font-weight: 700; font-size: 1.6rem; color: var(--deep); font-variant-numeric: lining-nums tabular-nums; }

/* Wide reference tables scroll inside their own box on small screens */
.table-scroll { overflow-x: auto; margin-top: 1.75rem; border: 0; }
.table-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.schedule.wide { max-width: none; min-width: 44rem; font-size: 0.95rem; }
.schedule.wide caption { position: sticky; left: 0; }
.schedule .detail { color: var(--ink-soft); font-size: 0.9rem; }
.schedule .srcs { font-size: 0.85rem; }
.method { font-weight: 700; }
.method-names { color: var(--accent); }

@media (max-width: 40rem) {
  .schedule.age { min-width: 0; }
  .schedule.age .opt { display: none; }
}
@media (max-width: 30rem) {
  .schedule.age { font-size: 0.88rem; }
  .schedule.age th, .schedule.age td { padding: 0.5rem 0.35rem; }
}

.lining .copy { font-family: var(--mono); font-size: 13px; fill: var(--ink-soft); }
.fig-copy { display: block; margin-top: 0.2rem; }

/* Sortable tables */
.sort-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
th.num .sort-btn { flex-direction: row-reverse; }
.sort-btn:hover span:first-child { text-decoration: underline; text-underline-offset: 0.2em; }
.sort-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sort-mark::after { content: "\2195"; color: var(--ink-soft); font-size: 0.8em; }
th[aria-sort="ascending"] .sort-mark::after { content: "\2191"; color: var(--deep); }
th[aria-sort="descending"] .sort-mark::after { content: "\2193"; color: var(--deep); }
th[aria-sort] { background: #cfe0da; }

/* Find your town */
.table-tools { margin-top: 1.5rem; display: grid; gap: 0.35rem; max-width: 26rem; }
.table-tools label { font-weight: 700; }
.table-tools input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  border-radius: 0;
}
.table-tools input:focus-visible { outline: 3px solid var(--deep); outline-offset: 1px; }
.table-count { font-size: 0.95rem; color: var(--ink-soft); min-height: 1.5em; }
.table-tools + .table-scroll { margin-top: 0.75rem; }