/* Self-hosted, latin subset, only the weights actually used.
   Vendored from @fontsource (SIL OFL / IBM Plex OFL). No third-party
   requests: on a site about surveillance, leaking every visitor to a CDN
   would be an own-goal. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   Flock Out Biddeford
   Palette is drawn from the Maine license plate (pine green on cool white
   stock) rather than a generic brand ramp. The one warm accent is a records
   stamp red, used in exactly one place: the search-reason field of the
   read record. Everything else stays quiet.
   ========================================================================== */

:root {
  --stock:    #F4F5F1;  /* plate stock white, cool green tint */
  --stock-2:  #EAEDE6;  /* recessed panels */
  --ink:      #131A16;  /* pine black */
  --pine:     #1E4636;  /* Maine plate green, primary */
  --moss:     #4A6D5C;  /* secondary text */
  --rule:     #CBD1C9;  /* hairlines */
  --stamp:    #A82016;  /* records stamp red — ONE use only */

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --data:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.62;
  font-synthesis-weight: none;
}

/* --- accessibility floor ------------------------------------------------ */

.skip {
  position: absolute; left: -9999px;
  background: var(--pine); color: var(--stock);
  padding: 0.6rem 1rem; z-index: 10;
  font-family: var(--display); text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- masthead: logo centred, nav centred beneath ------------------------ */

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--gutter) clamp(1.3rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.masthead__mark { display: block; text-decoration: none; color: inherit; }

/* Width raised from 42vw/358px during the nav redesign: the mark grows so the
   nav strip can shrink to a small tab beneath it. The two are a pair - don't
   change one without the other. */
.masthead__logo {
  display: block;
  width: clamp(240px, 66vw, 520px);
  height: auto;
}

.masthead__place {
  display: block;
  font-family: var(--data);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin-top: 0.6rem;
}

/* --- shared layout ------------------------------------------------------ */

.band { padding: clamp(3rem, 8vw, 5.5rem) var(--gutter); }
.band + .band { border-top: 1px solid var(--rule); }
.band__inner { max-width: var(--measure); margin-inline: auto; }
.band--wide .band__inner { max-width: 46rem; }

.eyebrow {
  font-family: var(--data);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 1.1rem;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.12em; color: var(--ink); }
.note { font-size: 0.92rem; color: var(--moss); }

a { color: var(--pine); text-underline-offset: 0.16em; }

/* --- signature: the read record ----------------------------------------
   This is the one element the page should be remembered by. It reproduces
   the shape of a real ALPR audit row — timestamp, camera, plate, vehicle,
   and the free-text search-reason field. It is deliberately mundane.
   ------------------------------------------------------------------------ */

.record {
  font-family: var(--data);
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--stock-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine);
  padding: 1.15rem 1.25rem;
  margin: 2rem 0 1rem;
  overflow-x: auto;
}

.record__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--moss);
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}

.record__row { display: flex; gap: 0.9rem; }
.record__row + .record__row { margin-top: 0.28rem; }

.record__key {
  flex: 0 0 8.5rem;
  color: var(--moss);
  letter-spacing: 0.03em;
}
.record__val { color: var(--ink); }

/* the single use of the stamp colour */
.record__row--reason .record__val {
  color: var(--stamp);
  font-weight: 500;
}

.record__caption {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--moss);
  margin: 0 0 2rem;
}

/* --- argument list ------------------------------------------------------ */

/* P2 — hierarchy inside the bordered lists.
   The h3 was 1.12rem against body copy that reaches 1.18rem: at desktop the
   heading was smaller than the paragraph above it. It now scales past the
   body text at every width, and the optional counted variant puts an index in
   the margin so eleven consecutive rows read as an enumerated list rather
   than a wall. */

.points { list-style: none; margin: 0; padding: 0; counter-reset: point; }
.points > li { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.points > li:last-child { border-bottom: 1px solid var(--rule); }
.points h3 {
  font-size: clamp(1.18rem, 1.06rem + 0.6vw, 1.4rem);
  line-height: 1.16;
  margin-bottom: 0.45rem;
}
.points p { font-size: 0.98rem; color: var(--moss); margin: 0; }

.points--counted > li { position: relative; padding-left: 3.1rem; }
.points--counted > li::before {
  counter-increment: point;
  content: counter(point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.62rem;
  font-family: var(--data);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

@media (max-width: 34rem) {
  .points--counted > li { padding-left: 2.4rem; }
  .points--counted > li::before { font-size: 0.72rem; top: 1.68rem; }
}

/* --- action / form ------------------------------------------------------ */

.action { background: var(--pine); color: var(--stock); }
.action h2 { color: var(--stock); }
.action .eyebrow { color: rgba(244, 245, 241, 0.72); }
.action p { color: rgba(244, 245, 241, 0.9); }
.action a { color: var(--stock); }

.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block;
  font-family: var(--data);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.field__input {
  width: 100%;
  font: inherit;
  font-family: var(--body);
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: var(--stock);
  border: 1px solid transparent;
  border-radius: 2px;
}

.hp { position: absolute; left: -9999px; }

/* P3 — one button system, three tiers, defined once.
     .btn            solid      the one thing to do in this section
     .btn--outline   outlined   a real alternative to the primary
     .btn--text      type+rule  a link that happens to be an action
   Size is a separate axis (.btn--sm), never a colour. Ground is a separate
   axis too: on the pine band all three tiers invert, so nothing needs its own
   dark-ground class. This replaces .btn / .btn--ghost / .btn--sm(colour) /
   .btn--quiet. Every tier clears 44px. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  color: var(--stock);
  background: var(--pine);
  border: 1px solid var(--pine);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: #17372A; border-color: #17372A; color: var(--stock); }

.btn--outline {
  background: transparent;
  color: var(--pine);
  border-color: var(--pine);
}
.btn--outline:hover { background: var(--stock-2); color: var(--pine); border-color: var(--pine); }

.btn--text {
  padding: 0.6rem 0;
  background: transparent;
  color: var(--pine);
  border: 0;
  border-bottom: 1px solid var(--pine);
  border-radius: 0;
}
.btn--text:hover { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }

/* On the pine band, the same three tiers invert. */
.action .btn { background: var(--stock); color: var(--pine); border-color: var(--stock); }
.action .btn:hover { background: #fff; border-color: #fff; color: var(--pine); }
.action .btn--outline { background: transparent; color: var(--stock); border-color: rgba(244, 245, 241, 0.5); }
.action .btn--outline:hover { background: rgba(244, 245, 241, 0.1); color: var(--stock); border-color: var(--stock); }
.action .btn--text { background: transparent; color: var(--stock); border-bottom-color: rgba(244, 245, 241, 0.5); }
.action .btn--text:hover { color: var(--stock); border-bottom-color: var(--stock); }

/* --- footer ------------------------------------------------------------- */

.footer {
  padding: 2.5rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--rule);
}
.footer__line {
  max-width: var(--measure);
  margin: 0 auto 0.5rem;
  font-size: 0.85rem;
  color: var(--moss);
}
.footer__line--quiet { font-family: var(--data); font-size: 0.72rem; }

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 34rem) {
  .record { font-size: 0.74rem; padding: 1rem; }
  .record__row { flex-direction: column; gap: 0; }
  .record__key { flex: none; font-size: 0.64rem; letter-spacing: 0.1em; }
  .record__row + .record__row { margin-top: 0.7rem; }
}

/* ==========================================================================
   Take-action page
   ========================================================================== */

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

/* --- signature details box --------------------------------------------- */

.details {
  background: var(--stock-2);
  border: 1px solid var(--rule);
  padding: 1.4rem;
}
.details__intro { font-size: 0.94rem; color: var(--moss); margin-bottom: 1.1rem; }
.details__grid { display: grid; gap: 0.2rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.details .field__input { border-color: var(--rule); background: var(--stock); }

/* --- letter picker: two steps -------------------------------------------
   P4. Closed, the seven rows are an index: a number, one line of argument,
   one line of who it is for, 44px tall, nothing else. Open, the row becomes a
   document — a recessed folder holding a white sheet — so "I am in a letter
   now" is unmistakable rather than "row three got taller". The details
   elements share a name, so opening one closes the rest: only ever one letter
   is on screen.
   ------------------------------------------------------------------------ */

.letters { margin-top: 1.75rem; counter-reset: letter; }

.letter { border-top: 1px solid var(--rule); counter-increment: letter; }
.letter:last-child { border-bottom: 1px solid var(--rule); }

.letter__summary {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  grid-template-areas: "num head" "num gist";
  column-gap: 0.2rem;
  row-gap: 0.14rem;
  align-items: baseline;
  min-height: 44px;
  padding: 0.9rem 2.4rem 0.9rem 0;
  cursor: pointer;
  list-style: none;
}
.letter__summary::-webkit-details-marker { display: none; }
.letter__summary::before {
  grid-area: num;
  content: counter(letter, decimal-leading-zero);
  font-family: var(--data);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--moss);
}
.letter__summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 0.75rem;
  font-family: var(--data); font-size: 1.2rem; color: var(--pine);
}
.letter[open] > .letter__summary::after { content: "\2013"; }
.letter__summary:hover .letter__headline { color: var(--pine); }

.letter__headline {
  grid-area: head;
  display: block;
  font-family: var(--display); font-weight: 600; font-size: 1.14rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.letter__gist {
  grid-area: gist;
  display: block;
  font-family: var(--data); font-size: 0.76rem; color: var(--moss);
}

/* Step two: the chosen letter, as a document rather than a taller row. */
.letter[open] {
  background: var(--stock-2);
  border-top-color: var(--pine);
  border-left: 3px solid var(--pine);
  margin: 1rem 0;
}
.letter[open] + .letter { border-top-color: var(--rule); }
.letter[open] > .letter__summary {
  grid-template-columns: 2.7rem 1fr;
  padding: 1.05rem 2.4rem 0.85rem 1.1rem;
}
.letter[open] .letter__gist { display: none; }
.letter[open] .letter__headline { color: var(--ink); }

.letter__body { padding: 0 1.1rem 1.5rem; }

.letter__subject { font-size: 0.94rem; margin-bottom: 0.9rem; }
.letter__field {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin-right: 0.4rem;
}

/* The letter is a sheet sitting on the folder. */
.letter__text {
  font-family: var(--body);
  font-size: 0.97rem; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word;
  background: var(--stock);
  border: 1px solid var(--rule);
  padding: 1.15rem 1.2rem 0.9rem;
  margin: 0;
}
.letter__text--addresses { font-family: var(--data); font-size: 0.8rem; }

.letter__sig {
  font-family: var(--body); font-size: 0.97rem; color: var(--moss);
  background: var(--stock);
  border: 1px solid var(--rule);
  border-top: 0;
  padding: 0 1.2rem 1.1rem;
  margin: 0 0 1.1rem;
}

.letter__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.letter__fallback { font-size: 0.83rem; color: var(--moss); margin: 0.9rem 0 0; }

/* Size only — the tiers above carry the colour. */
.btn--sm { font-size: 0.9rem; padding: 0.6rem 1.1rem; }

/* --- ward picker + checkboxes (inside the green band) -------------------
   P9. The pills were 36px tall and 42px wide, under the 44px floor, and were
   spaced with margins that wrap unevenly. Now one wrapped flex row with gap,
   and every pill is at least 44px square. Needs one wrapper element around
   the eight labels: .wards__set.
   ------------------------------------------------------------------------ */

.wards { border: 0; padding: 0; margin: 0.4rem 0 1.2rem; }
.wards legend { padding: 0; margin-bottom: 0.55rem; }
.wards__set { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ward { display: block; }
.ward input { position: absolute; opacity: 0; width: 0; height: 0; }
.ward__pill {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  font-family: var(--data); font-size: 0.9rem;
  padding: 0 0.7rem; border-radius: 2px;
  background: rgba(244,245,241,0.14); color: var(--stock);
  border: 1px solid rgba(244,245,241,0.3);
  cursor: pointer;
}
.ward__pill--wide { min-width: 5.4rem; }
.ward input:checked + .ward__pill { background: var(--stock); color: var(--pine); border-color: var(--stock); }
.ward input:focus-visible + .ward__pill { outline: 3px solid var(--stamp); outline-offset: 2px; }

.check {
  display: flex; align-items: center;
  min-height: 44px;
  margin-bottom: 0.35rem;
  font-size: 0.96rem; color: rgba(244,245,241,0.92); cursor: pointer;
}
.check input { margin-right: 0.55rem; width: 1.05rem; height: 1.05rem; accent-color: var(--stock); }

.note--onDark { color: rgba(244,245,241,0.68); margin-top: 1.2rem; }

.action .details__grid .field__input { border-color: transparent; }
.action code, .band code { font-family: var(--data); font-size: 0.9em; }

@media (max-width: 34rem) {
  .letter__text, .letter__sig { font-size: 0.92rem; }
  .letter__actions .btn { flex: 1 1 100%; }
  .letter__summary { grid-template-columns: 2.4rem 1fr; }
  .letter[open] > .letter__summary { grid-template-columns: 2.2rem 1fr; padding-left: 0.9rem; }
  .letter__body { padding: 0 0.9rem 1.3rem; }
}

/* Flashed when someone tries to copy a letter before naming themselves. */
.field__input--wants {
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px rgba(168, 32, 22, 0.16);
}

/* Who receives the letter. Role leads, because the role is the point -
   two of these are staff who route mail, not people who vote. */
.who { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.who__row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
}
.who__row:last-child { border-bottom: 1px solid var(--rule); }
.who__role {
  grid-row: span 2;
  font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--moss); padding-top: 0.2rem;
}
.who__name { font-weight: 600; }
.who__mail { font-family: var(--data); font-size: 0.78rem; color: var(--moss); overflow-wrap: anywhere; }

/* P9: at 390 the row stacks — role, then name, then address. */
@media (max-width: 34rem) {
  .who__row { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.85rem 0; }
  .who__role { grid-row: auto; font-size: 0.66rem; margin-bottom: 0.1rem; }
  .who__mail { font-size: 0.74rem; }
}

/* Masthead nav — docket line, tuned: BIGGER MARK, SMALLER STRIP.
   Same object as direction A — one hairline frame, one internal divider, one
   filled end, current page marked by a 3px bar on the cell's top edge — but
   the cells are now shrink-to-fit and 30px tall of visible chrome (44px of
   touch target, extended invisibly), so the strip is a small tab under the
   mark rather than a band across it. The size comes out of height, padding
   and tracking, NOT out of the type: 0.66rem matches .record__head, so this
   label is no smaller than any other label on the site.
   Placement: still centred on the logo's axis, just much smaller than
   the mark above it.

   NOTE: the logo rule below is a change to .masthead__logo, which lives
   OUTSIDE this fence. It is written here so the sandbox shows the intent;
   mirror it into the live .masthead__logo rule rather than shipping it as an
   override.
   ------------------------------------------------------------------------ */


.nav {
  display: flex;
  border: 1px solid var(--rule);
  background: var(--stock);
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.25rem 0.7rem;
  font-family: var(--data);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}

.nav__link + .nav__link { border-left: 1px solid var(--rule); }
.nav__link:hover { background: var(--stock-2); }

/* The visible chrome is 30px tall; the touch target is not. This invisible
   extension takes each item to 44px without drawing 44px of furniture. It
   grows vertically only, so the two items never overlap each other. */
.nav__link::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

.nav__link--cta {
  margin: -1px -1px -1px 0;
  background: var(--pine);
  border-left-color: var(--pine);
  color: var(--stock);
}
.nav__link--cta:hover { background: #17372A; }

.nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink);
}
.nav__link--cta[aria-current="page"]::before { background: var(--stock); }

@media (max-width: 22rem) {
  .nav__link { font-size: 0.64rem; letter-spacing: 0.07em; padding: 0.25rem 0.5rem; }
}


/* ==========================================================================
   P1 — sectional variation on a long page
   Seven identically-built sections across 6,400px gave the eye nothing to
   hold on to. Alternating grounds mark the boundaries, and each section
   carries its number in the margin of its own eyebrow, so the page reads as a
   numbered sequence instead of a scroll. The numbers are chrome, not copy —
   CSS counters, nothing added to the text. Opt in per section with
   .band--step, so the three short pages are untouched.
   ========================================================================== */

main { counter-reset: step; }

.band--step { counter-increment: step; }
.band--step:nth-of-type(even) { background: var(--stock-2); }

.band--step .eyebrow { display: flex; align-items: baseline; gap: 0.75rem; }
.band--step .eyebrow::before {
  content: counter(step, decimal-leading-zero);
  color: var(--ink);
  border-right: 1px solid var(--rule);
  padding-right: 0.75rem;
}

/* The record stays a sheet, even on the tinted ground. */
.band--step:nth-of-type(even) .record { background: var(--stock); }


/* QR landing (/send/). One letter, no picker: the letter body is always open,
   so it borrows the open-state "sheet on the ground" without a <details>. */
.letter__body--solo {
  background: var(--stock-2);
  border-left: 3px solid var(--pine);
  padding: 1.15rem 1.15rem 1.4rem;
  margin-top: 1.25rem;
}
.letter__body--solo .letter__text {
  background: var(--stock);
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.letter__body--solo .letter__sig {
  background: var(--stock);
  border: 1px solid var(--rule);
  border-top: 0;
  border-left: 1px solid var(--rule);
  padding: 0 1.2rem 1rem;
}
.letter__body--solo .letter__actions { margin-top: 1.1rem; }
.letter__body--solo .letter__actions .btn { flex: 1 1 14rem; text-align: center; }

/* Scanned from a printed code: the visitor has no context, so the first
   screen carries more weight than elsewhere. */
.send h1 { margin-bottom: 0.75rem; }

/* --- two-part ask (ordinance hero) --------------------------------------
   Deliberately NOT the .record component. The detection record is the
   site's only audit-row object; reusing it for a summary weakens it. */
.twopart { margin: 1.9rem 0 0; }
.twopart__label {
  font-family: var(--data); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  padding-top: 0.9rem; border-top: 1px solid var(--rule);
}
.twopart__text { margin: 0.3rem 0 0; padding-bottom: 0.9rem; }
.twopart__text:last-child { border-bottom: 1px solid var(--rule); }

/* --- ordinary-life passage (homepage) ----------------------------------
   The site's emotional centre. Set apart from the lede so the hero keeps
   a single opening voice. */
.lifelist { margin: 2.2rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--pine); }
.lifelist__items {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.42rem);
  line-height: 1.35; letter-spacing: -0.012em; margin-bottom: 0.7rem;
}
.lifelist__point { margin: 0; color: var(--moss); }

/* Sub-heading intro line. Sits under an h2, quieter than .lede. */
.section-intro { font-size: 1.05em; color: var(--moss); margin-bottom: 1.4rem; }

.cta-row { margin-top: 1.6rem; }
.note--spaced { margin-top: 2.5rem; }

/* --- case status labels (/the-record/) ---------------------------------
   The page's credibility rests on saying what each record actually
   establishes. The label is therefore louder than the prose. */
.casestatus {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  margin: 0 0 1.3rem;
}
.casestatus__label {
  font-family: var(--data); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stock); background: var(--pine);
  padding: 0.32rem 0.6rem;
}
.casestatus__flag {
  font-family: var(--data); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid var(--stamp);
  padding: 0.3rem 0.6rem;
}
.casestatus__checked {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--moss);
}

.matters {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem;
  background: var(--stock-2); border-left: 3px solid var(--pine);
}
.band--step:nth-of-type(even) .matters { background: var(--stock); }
.matters__label {
  font-family: var(--data); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  margin-bottom: 0.4rem;
}
.matters__text { margin: 0; font-size: 0.98rem; }

/* --- two-case proof block (homepage) ----------------------------------- */
.proof { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
@media (min-width: 46rem) { .proof { grid-template-columns: 1fr 1fr; } }
.proof__case {
  border-top: 1px solid var(--rule); padding-top: 1.1rem;
}
.proof__kind {
  font-family: var(--data); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--moss);
}
.proof__place {
  font-family: var(--display); font-weight: 600; font-size: 1.14rem;
  letter-spacing: -0.015em; margin: 0.25rem 0 0.5rem;
}
.proof__text { font-size: 0.98rem; margin-bottom: 0.7rem; }
.proof__note { font-family: var(--data); font-size: 0.72rem; color: var(--moss); margin: 0; }