/* ─── /seattle-house-history-records ──────────────────────────────────────────
   The records dossier's standalone landing page. It borrows the site's existing
   language — the neighborhood pages' section rhythm, the bronze eyebrow, sharp
   radii, Playfair display headings — and the hero's address lookup reuses the
   home page's .fs-lookup control verbatim (home.css is loaded alongside this
   file), so nothing here invents a second visual system. */

.records-page {
  --rp-gutter: clamp(20px, 5vw, 56px);
}

.rp-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--rp-gutter);
}

.rp-inner-narrow {
  max-width: 780px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.rp-hero {
  position: relative;
  /* The breadcrumb above already clears the fixed header, so the old
     header-height offset pushed the offer — the address box and the buy button
     — below the fold at 1440x900. */
  padding: 40px 0 56px;
  background: var(--color-ink, #17191c);
  color: #fff;
}

/* The hero was a flat dark box on a page whose whole subject is paper. It now
   carries a real archival scan as a FULL-BLEED background — `cover`, so it has
   no edge of its own and cannot read as a pasted rectangle, which is exactly
   how the previous masked-inset treatment read. Desaturated and held at low
   opacity; the gradient in ::after keeps the copy column at full contrast.
   No overflow:hidden here — the namespace guard below needs overflow visible so
   the address autocomplete is not clipped — so the layer is inset instead. */
.rp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The side-sewer card, not the microfilm permit. Texture, not a legible
     document: the permit scan sized to COVER filled the hero at about 1.4x and
     the words MASTER USE AND CONSTRUCTION — and the scan's black redaction bar
     — read straight through the headline; tiling it small fixed the type but
     repeated the redaction bar across the frame in a grid. The sewer card is
     surveyed linework with no headline type and no black bar, so it reads as a
     faint blueprint under the copy — which is what the headline is about. */
  background-image: url("/photos/records/side-sewer-card-detail.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.09;
  filter: grayscale(1) contrast(0.7) brightness(1.5);
  pointer-events: none;
  z-index: 0;
}

/* A warm wash so the headline never sits on the busiest part of the scan. */
.rp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(23, 25, 28, 0.94) 0%, rgba(23, 25, 28, 0.86) 40%, rgba(23, 25, 28, 0.55) 72%, rgba(23, 25, 28, 0.4) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Everything the reader touches sits above both layers. */
.rp-hero > * { position: relative; z-index: 1; }

@media (max-width: 860px) {
  .rp-hero::after {
    background:
      linear-gradient(180deg, rgba(23, 25, 28, 0.88) 0%, rgba(23, 25, 28, 0.9) 40%, rgba(23, 25, 28, 0.92) 100%);
  }
  .rp-hero::before { opacity: 0.075; }
}

.rp-hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--rp-gutter);
}

.rp-hero .eyebrow {
  /* The hero is ink: the accent bronze measured 3.74:1 on #17191c. 7.6:1. */
  color: var(--color-bronze-on-ink, #c9a476);
}

.rp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 3.6vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 10px 0 16px;
  max-width: 24ch;
}

.rp-hero-sub {
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 24px;
  max-width: 62ch;
}

.rp-lookup-zone {
  margin-bottom: 26px;
}

.rp-lookup-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

.rp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.rp-hero-secondary {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}

.rp-hero-secondary:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.rp-hero-trust {
  margin: 22px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.rp-section {
  padding: 64px 0;
}

.rp-section-tint {
  background: var(--color-surface-2, #faf8f5);
  border-top: 1px solid var(--color-border, #e3e0da);
  border-bottom: 1px solid var(--color-border, #e3e0da);
}

.rp-head {
  max-width: 76ch;
  margin-bottom: 8px;
}

.rp-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}

.rp-head p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted, #5f6168);
  margin: 0;
}

/* ── The six curiosities ──────────────────────────────────────────────────── */

.rp-curiosities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 32px;
  margin-top: 34px;
}

.rp-curiosity h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0 0 8px;
  padding-top: 14px;
  border-top: 2px solid var(--color-ink, #17191c);
}

.rp-curiosity p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5f6168);
}

/* ── Sample previews + chapter index ──────────────────────────────────────── */

.rp-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rp-preview {
  display: block;
  border: 1px solid var(--color-border, #e3e0da);
  background: #fff;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.rp-preview:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.rp-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.rp-toc-wrap {
  margin-top: 34px;
}

.rp-toc-wrap h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.12em);
  text-transform: uppercase;
  color: var(--color-text-muted, #5f6168);
  margin: 0 0 14px;
}

.rp-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 44px;
}

.rp-toc li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--color-border, #e3e0da);
  break-inside: avoid;
  font-size: 0.92rem;
}

.rp-toc-leader {
  flex: 1 1 auto;
}

.rp-toc-page {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #5f6168);
}

.rp-limit {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--color-accent-bronze, #b08d57);
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
}

.rp-sample-link {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 0.92rem;
}

/* ── What it is not ───────────────────────────────────────────────────────── */

.rp-nots {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.rp-nots li {
  padding: 16px 0;
  border-top: 1px solid var(--color-border, #e3e0da);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5f6168);
}

.rp-nots li strong {
  color: var(--color-heading, #17191c);
}

/* ── Related links + closing CTA ──────────────────────────────────────────── */

.rp-related {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border, #e3e0da);
  font-size: 0.9rem;
}

.rp-related-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.12em);
  text-transform: uppercase;
  color: var(--color-text-muted, #5f6168);
}

.rp-cta {
  padding: 64px 0 72px;
  background: var(--color-ink, #17191c);
  color: #fff;
  text-align: center;
}

.rp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}

.rp-cta p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
  margin: 0 auto 24px;
  max-width: 62ch;
}

.rp-cta-legal {
  margin-top: 26px !important;
  font-size: 0.78rem !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 760px) {
  .rp-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rp-toc {
    columns: 1;
  }
  .rp-hero-actions .button {
    width: 100%;
  }
}

/* ── The buried-tank cross-section ────────────────────────────────────────────
   The introduction's hero figure: two panels drawn identically except for the
   one thing that differs. The drawing is inline SVG in a 360 × 300 viewBox and
   scales with width:100%, so it is sharp at any size, prints, and cannot set a
   min-content width that scrolls the page sideways on a phone.

   Every colour is a token. The site pins `color-scheme: only light` on :root and
   has no page-wide dark theme, so the diagram must NOT flip on
   prefers-color-scheme by itself — a dark figure on a light page is a bug, not a
   dark mode. The dark values are defined under the [data-theme="dark"] hook so
   the figure follows the site the day the site adopts one, and the media query
   is there so it only ever applies when the reader also asks for dark. */

.records-page {
  --rp-dg-sky: #f3efe7;
  --rp-dg-soil: #ded5c4;
  --rp-dg-sand: #efe3c9;
  --rp-dg-sand-dot: #b39b6b;
  --rp-dg-hatch: #bfb29c;
  --rp-dg-ink: var(--color-ink, #17191c);
  --rp-dg-house: #ffffff;
  --rp-dg-roof: var(--color-ink, #17191c);
  --rp-dg-open: #cfc7b7;
  --rp-dg-basement: #efeae0;
  --rp-dg-accent: var(--color-accent-bronze, #8b6f47);
  --rp-dg-accent-dark: var(--color-accent-bronze-dark, #6f5633);
  --rp-dg-muted: #756b58;
  --rp-dg-text: var(--color-text, #1a1f26);
  --rp-dg-mini: #5a5346;
}

@media (prefers-color-scheme: dark) {
  .records-page[data-theme="dark"],
  [data-theme="dark"] .records-page {
    --rp-dg-sky: #171b21;
    --rp-dg-soil: #24282e;
    --rp-dg-sand: #3a3324;
    --rp-dg-sand-dot: #b8a074;
    --rp-dg-hatch: #4b5158;
    --rp-dg-ink: #f2efe9;
    --rp-dg-house: #2a2f36;
    --rp-dg-roof: #f2efe9;
    --rp-dg-open: #4a515a;
    --rp-dg-basement: #2f353d;
    --rp-dg-accent: var(--color-bronze-on-ink, #c9a476);
    --rp-dg-accent-dark: var(--color-bronze-on-ink, #c9a476);
    --rp-dg-muted: #8d94a0;
    --rp-dg-text: #f2efe9;
    --rp-dg-mini: #b3b9c2;
  }
}

.rp-dg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.rp-dg-panel {
  margin: 0;
  min-width: 0;
  padding: 18px 18px 4px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e0da);
  border-radius: var(--radius-sm, 12px);
}

.rp-dg-panel-alert {
  border-color: var(--rp-dg-accent);
  box-shadow: inset 3px 0 0 var(--rp-dg-accent);
}

.rp-dg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 14px;
}

.rp-dg-kicker {
  flex: 1 0 100%;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-text-muted, #5f6168);
}

.rp-dg-panel-alert .rp-dg-kicker {
  color: var(--color-bronze-text, #7f6540);
}

.rp-dg-head strong {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-heading, #17191c);
}

.rp-dg-share {
  font-size: 0.82rem;
  color: var(--color-text-muted, #5f6168);
}

.rp-dg {
  display: block;
  width: 100%;
  height: auto;
}

.rp-dg-sky { fill: var(--rp-dg-sky); }
.rp-dg-soil, .rp-dg-soilbg { fill: var(--rp-dg-soil); }
.rp-dg-sandbg { fill: var(--rp-dg-sand); }
.rp-dg-sanddot { fill: var(--rp-dg-sand-dot); }
.rp-dg-hatch { stroke: var(--rp-dg-hatch); stroke-width: 1.4; }
.rp-dg-roof { fill: var(--rp-dg-roof); }
.rp-dg-house { fill: var(--rp-dg-house); stroke: var(--rp-dg-ink); stroke-width: 1.6; }
.rp-dg-win, .rp-dg-door { fill: var(--rp-dg-open); }
.rp-dg-base { fill: var(--rp-dg-basement); stroke: var(--rp-dg-ink); stroke-width: 1.6; }
.rp-dg-furnace { fill: var(--rp-dg-ink); }
.rp-dg-grade { stroke: var(--rp-dg-ink); stroke-width: 2.6; fill: none; }
.rp-dg-pipe { stroke: var(--rp-dg-ink); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rp-dg-cap { fill: var(--rp-dg-ink); }
.rp-dg-oil { stroke: var(--rp-dg-accent); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.rp-dg-tankline { stroke: var(--rp-dg-accent-dark); stroke-width: 2.6; }
.rp-dg-ghost { stroke: var(--rp-dg-muted); stroke-width: 2; stroke-dasharray: 7 5; }
.rp-dg-ghostline { stroke: var(--rp-dg-muted); stroke-width: 3; stroke-dasharray: 5 5; fill: none; }
.rp-dg-dim { stroke: var(--rp-dg-mini); stroke-width: 1.2; fill: none; }
.rp-dg-dim-head { fill: var(--rp-dg-mini); }
.rp-dg-dim-ext { stroke: var(--rp-dg-mini); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }

.rp-dg text { font-family: var(--font-body); }
.rp-dg-mini { font-size: 11px; fill: var(--rp-dg-mini); }
.rp-dg-label { font-size: 12.5px; fill: var(--rp-dg-text); }
.rp-dg-label-strong { font-weight: 700; }
.rp-dg-inner { font-size: 13px; font-weight: 700; fill: var(--rp-dg-text); letter-spacing: 0.02em; }

.rp-dg-note {
  margin: 14px 0 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
}

.rp-dg-source {
  margin: 22px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
}

.rp-why {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.rp-why li {
  padding: 15px 0;
  border-top: 1px solid var(--color-border, #e3e0da);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5f6168);
}

.rp-why li strong { color: var(--color-heading, #17191c); }

.rp-tank-bridge {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--color-heading, #17191c);
}

/* ── The real artifacts ───────────────────────────────────────────────────── */

.rp-artifacts {
  margin-top: 42px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border, #e3e0da);
}

.rp-artifacts h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.18;
  margin: 0 0 8px;
}

.rp-artifacts-lede {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5f6168);
  max-width: 62ch;
}

.rp-artifact-grid {
  display: grid;
  gap: 28px;
  margin-top: 26px;
}

.rp-artifact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 22px 30px;
  /* Centring the caption against a tall scan left a 200px hole above the
     kicker; the two columns now start on the same line. */
  align-items: start;
  margin: 0;
}

.rp-artifact-shot {
  min-width: 0;
  padding: 10px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e0da);
  box-shadow: var(--shadow-1);
}

.rp-artifact-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.rp-artifact figcaption { min-width: 0; }

.rp-artifact-kicker {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-bronze-text, #7f6540);
  margin-bottom: 8px;
}

.rp-artifact figcaption p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5f6168);
}

.rp-artifacts-note {
  margin: 26px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--color-border-strong, #d4d0c8);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
}

@media (max-width: 860px) {
  .rp-dg-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-artifact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  /* Give the drawing back the padding on a phone: every unit of panel width is a
     unit of legibility in a viewBox that scales to fit. */
  .rp-dg-panel { padding: 14px 10px 4px; }
  .rp-dg-note { padding: 0 4px; }
}

/* ── Namespace collision guard ────────────────────────────────────────────────
   styles.css claims the .rp-* prefix for the delivered report page, and several
   of those rules are written unscoped, so they also land here: .rp-hero-inner
   turns the hero into a two-column grid (measured at 1440px: the eyebrow and the
   sub-head in a 312px column, the h1 in a 400px column beside them), .rp-hero
   adds a 14px radius and clips its overflow (which would also clip the address
   autocomplete list), .rp-section takes a width from a --content variable that
   only exists on the report page, .rp-hero-sub caps the measure at 58ch and
   .rp-hero-actions adds a top margin.

   Renaming belongs in styles.css, which this page does not own, so each leaked
   declaration is neutralised here instead — at .records-page specificity, which
   beats the single class without touching anything the report page relies on. */

.records-page .rp-hero {
  width: auto;
  margin: 0;
  border-radius: 0;
  overflow: visible;
}

.records-page .rp-hero-inner {
  display: block;
  width: auto;
}

.records-page .rp-hero-sub { max-width: 62ch; }

.records-page .rp-hero-actions { margin-top: 0; }

.records-page .rp-section {
  width: auto;
  margin: 0;
  scroll-margin-top: 0;
}

/* The lookup control is borrowed from the home page, where the hero is centred;
   this hero is left-aligned, so the form is pulled back onto the copy's axis. */
.records-page .rp-lookup {
  margin-left: 0;
  margin-right: auto;
}

/* The scans are evidence, and a phone renders a 1,144-pixel-wide permit card at
   about 300: the caption carries the content, and the shot links to the file so
   anyone who wants to read the paper itself can open it full size. */
a.rp-artifact-shot {
  display: block;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

a.rp-artifact-shot:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ── The offer block ──────────────────────────────────────────────────────────
   The page used to open with a seven-sentence narrative and never state the
   offer above the fold. The hero now runs two columns on a desktop: the offer
   on the left (headline, one-line subhead naming the format, the four facts,
   the free address search, the buy button) and, on the right, the three
   artifacts that prove it — the sample cover, a 1934 permit card the dossier
   attaches, and the cross-section of what "decommissioned" usually means.

   Class names here are deliberately NOT .rp-hero-copy / .rp-hero-media /
   .rp-stack / .rp-card: styles.css claims those unscoped for the delivered
   report page (see the namespace guard at the foot of this file). */

.rp-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (min-width: 1040px) {
  .rp-offer {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 24px 52px;
    align-items: center;
  }
}

.rp-offer-copy { min-width: 0; }

/* Four facts that are true for EVERY address: the price, the format, the
   turnaround and the fixed chapter count. The sample's own measured figures
   (records, documents) stay in the trust line below, labelled as the sample's. */
.rp-offerfacts {
  display: grid;
  /* Four facts in a tidy 2x2 rather than a 3 + 1 ragged row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 28px;
  padding: 18px 0 0;
  gap: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rp-offerfacts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rp-offerfacts strong {
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.rp-offerfacts span {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.rp-lookup-lead {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-bronze-on-ink, #c9a476);
}

/* ── The hero deck: three real artifacts, fanned ──────────────────────────── */

.rp-offer-visual { min-width: 0; }

.rp-deck {
  position: relative;
  margin: 0;
  /* A fixed ratio so the absolutely-positioned cards always have a box to sit
     in and the hero never jumps as the images decode. */
  aspect-ratio: 5 / 4;
  max-width: 560px;
}

.rp-deck img {
  position: absolute;
  display: block;
  height: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.rp-deck-scan {
  width: 64%;
  top: 2%;
  right: 0;
  transform: rotate(3.2deg);
}

.rp-deck-tank {
  width: 52%;
  bottom: 0;
  right: 6%;
  transform: rotate(-2.4deg);
}

.rp-deck-cover {
  width: 46%;
  top: 8%;
  left: 0;
  transform: rotate(-3.4deg);
  z-index: 2;
}

/* The cards are absolutely positioned, so a caption in normal flow would sit at
   the TOP of the figure, on top of them. It is pinned under the box instead,
   and the box reserves the room for it. */
.rp-deck figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1039px) {
  /* Below the two-column breakpoint the deck sits under the copy, smaller and
     centred. */
  .rp-deck {
    max-width: 460px;
    margin: 0 auto 62px;
  }
  .rp-deck figcaption { text-align: center; }
}

@media (max-width: 560px) {
  .rp-deck { aspect-ratio: 4 / 3; }
  .rp-deck figcaption { font-size: 0.75rem; }
}

/* ── Source strip: where the paper comes from ─────────────────────────────── */

.rp-srcstrip {
  background: var(--color-ink-soft, #22252a);
  color: #fff;
  padding: 22px 0;
}

.rp-srcstrip-label {
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-bronze-on-ink, #c9a476);
}

.rp-srcstrip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-srcstrip-list li {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}

/* ── Who it is for ────────────────────────────────────────────────────────── */

/* A faint ledger texture behind the audience cards: the same 1934 permit card,
   full-bleed and at 5% so it reads as paper, never as an image with an edge. */
.rp-whosec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.rp-whosec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/photos/records/permit-card-1934.jpg") center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

.rp-aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.rp-aud {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 20px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e0da);
  border-top: 3px solid var(--color-accent-bronze, #8b6f47);
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow-1);
}

.rp-aud-who {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-bronze-text, #7f6540);
}

.rp-aud h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--color-heading, #17191c);
}

.rp-aud-body {
  margin: 0 0 16px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
}

.rp-aud-ch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border, #e3e0da);
  font-size: 0.78rem;
}

.rp-aud-ch > span {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--color-text-muted, #5f6168);
}

.rp-aud-ch em {
  font-style: normal;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-accent-soft, #f0ede8);
  color: var(--color-heading, #17191c);
}

/* ── What you get + price ─────────────────────────────────────────────────── */

.rp-buygrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  margin-top: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .rp-buygrid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr); gap: 44px; }
  .rp-pricecard { position: sticky; top: calc(var(--header-h, 78px) + 18px); }
}

@media (max-width: 899px) {
  /* In one column the price card is what the reader came for: it leads, and the
     chapter list and the exclusions follow it. */
  .rp-pricecard { order: -1; }
}

.rp-buygrid-main { min-width: 0; }

.rp-buygrid h3,
.rp-nots-wrap h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.12em);
  text-transform: uppercase;
  color: var(--color-text-muted, #5f6168);
  margin: 0 0 14px;
}

.rp-incl,
.rp-nots-wrap {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border, #e3e0da);
}

.rp-incl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rp-incl-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text, #1a1f26);
}

.rp-incl-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent-bronze, #8b6f47);
}

.rp-nots-wrap .rp-nots { margin-top: 0; }

/* The price card. */
.rp-pricecard {
  min-width: 0;
  margin: 0;
  padding: 24px 22px 22px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-strong, #d4d0c8);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-2);
}

.rp-pricecard-name {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--track-nav, 0.11em);
  text-transform: uppercase;
  color: var(--color-bronze-text, #7f6540);
}

.rp-pricecard-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
}

.rp-pricecard-price strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  /* Playfair's dollar sign carries a full vertical stroke; at -0.03em it
     collided with the 1 in $13.99 on a phone. */
  letter-spacing: -0.005em;
  color: var(--color-heading, #17191c);
}

.rp-pricecard-price span {
  font-size: 0.86rem;
  color: var(--color-text-muted, #5f6168);
}

.rp-pricecard-facts {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid var(--color-border, #e3e0da);
}

.rp-pricecard-facts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #e3e0da);
  font-size: 0.88rem;
  line-height: 1.45;
}

.rp-pricecard-facts li > span { color: var(--color-text-muted, #5f6168); }

.rp-pricecard-facts li > strong {
  color: var(--color-heading, #17191c);
  text-align: right;
}

.rp-pricecard .button-block { width: 100%; }

.rp-pricecard-sample {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
}

.rp-refundbox {
  margin-top: 20px;
  padding: 16px 16px 14px;
  background: var(--color-surface-muted, #f5f3ee);
  border-left: 3px solid var(--color-accent-bronze, #8b6f47);
  border-radius: 0 var(--radius-xs, 8px) var(--radius-xs, 8px) 0;
}

.rp-refundbox-head {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--color-heading, #17191c);
}

.rp-refundbox p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.58;
  color: var(--color-text-muted, #5f6168);
}

.rp-refundbox-link {
  margin-top: 10px !important;
  font-weight: 700;
}

.rp-pricecard-legal {
  margin: 16px 0 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--color-text-muted, #5f6168);
}

/* ── Sample evidence stat row ─────────────────────────────────────────────────
   products.dossierStatsMarkup() emits .pp-records-stats, whose only stylesheet
   is dossier.css — which this page does not load. Unstyled, it rendered as the
   run-on line "42public records, itemised12County & City sources checked".
   The rules are mirrored here, scoped to this page. */

.records-page .pp-records-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  background: var(--color-border, #e3e0da);
  border: 1px solid var(--color-border, #e3e0da);
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
}

.records-page .pp-records-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--color-surface, #fff);
}

.records-page .pp-records-stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-heading, #17191c);
}

.records-page .pp-records-stat-label {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted, #5f6168);
}

/* ── The aerial ───────────────────────────────────────────────────────────── */

.rp-overhead {
  margin: 30px 0 6px;
}

.rp-overhead img {
  display: block;
  width: 100%;
  height: clamp(200px, 32vw, 360px);
  object-fit: cover;
  border-radius: var(--radius-sm, 12px);
}

.rp-overhead figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5f6168);
  max-width: 78ch;
}

.rp-overhead figcaption strong { color: var(--color-heading, #17191c); }

.rp-overhead-credit {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted, #5f6168);
}

/* ── Tank section lede ────────────────────────────────────────────────────── */

.rp-tank-lede {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--color-text, #1a1f26) !important;
  margin-bottom: 14px !important;
}

/* ── Section rhythm ───────────────────────────────────────────────────────── */

.rp-section { padding: 68px 0; }

@media (max-width: 760px) {
  .rp-section { padding: 48px 0; }
  .rp-offerfacts { gap: 14px 18px; margin-bottom: 22px; padding-top: 15px; }
  .rp-offerfacts strong { font-size: 1.24rem; }
  .rp-pricecard-price strong { font-size: 2.2rem; }
  /* Every pixel above the fold on a phone is one the address box needs. */
  .rp-hero { padding-top: 26px; }
  .rp-hero h1 { margin: 8px 0 12px; }
  .rp-hero-sub { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGIBILITY PASS — 2026-09-23
   Measured at 390px: the page's narrative copy ran 13.6–15.4px. Nothing a
   visitor is expected to READ is now under 16px, and the widest measures
   (.rp-why ran 968px at 15.4px on a 1920 viewport) are capped. Fine print —
   legal lines, photo credits, chip labels — is left small on purpose, but no
   smaller than 0.85rem. These rules sit after the originals in the same file,
   so they win on order without raising specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero lede: 15.7px -> 17px min, and it is the first thing read on the page. */
.rp-hero-sub {
  font-size: clamp(1.0625rem, 1.4vw, 1.15rem);
  line-height: 1.62;
}

.rp-lookup-note {
  font-size: 0.9rem;   /* 13.6 -> 14.4 */
}

/* Narrative body: everything below was 14.4–15.4px. */
.rp-nots li,
.rp-why li,
.rp-aud-body,
.rp-incl-list li,
.rp-limit,
.rp-artifact figcaption p,
.rp-curiosity p {
  font-size: 1rem;
  line-height: 1.65;
}

/* Measure. At 1920 these ran 968px wide — 120+ characters a line. */
.rp-why li,
.rp-limit,
.rp-nots li,
.rp-artifacts-note,
.rp-dg-source {
  max-width: 72ch;
}

.rp-artifacts-note {
  font-size: 0.95rem;  /* 13.6 -> 15.2; it is a caveat, not body copy */
  line-height: 1.65;
}

.rp-dg-source {
  font-size: 0.9rem;   /* 13.1 -> 14.4 */
}

/* ── Archival scans: make the tap target obvious ─────────────────────────────
   The three scans are the page's evidence, and on a phone the widest of them
   renders about 310x97 — a grey smear. The anchor always opened the full file;
   nothing said so. A persistent badge on the shot and a real link under the
   caption say it twice, and on a phone the frame gives up its padding so the
   paper gets every pixel of the column. */
a.rp-artifact-shot {
  position: relative;
}

.rp-artifact-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(23, 25, 28, 0.86);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(23, 25, 28, 0.35);
  pointer-events: none;
}

.rp-artifact-zoom svg {
  width: 14px;
  height: 14px;
}

a.rp-artifact-shot:hover .rp-artifact-zoom,
a.rp-artifact-shot:focus-visible .rp-artifact-zoom {
  background: var(--color-accent-bronze, #8b6f47);
}

.rp-artifact-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  /* 5.47:1 on the warm ground. */
  color: var(--color-bronze-text, #7a5f3a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rp-artifact-open:hover,
.rp-artifact-open:focus-visible {
  color: var(--color-accent-bronze-dark, #6f5633);
}

@media (max-width: 860px) {
  /* Every pixel of the column is a pixel of the document. */
  .rp-artifact-shot {
    padding: 5px;
  }

  /* The badge must point at the paper without sitting on it. */
  .rp-artifact-zoom {
    right: 7px;
    bottom: 7px;
    padding: 4px 8px;
    font-size: 0.6rem;
  }

  .rp-artifact-zoom svg {
    width: 12px;
    height: 12px;
  }
}

/* ── Legibility pass, round two ─────────────────────────────────────────────
   Set on the element that carries the text rather than its container. */
body .rp-artifacts-lede,
body .rp-dg-note,
body .rp-refundbox p {
  font-size: 1rem;        /* 13.4–15.4 -> 16 */
  line-height: 1.65;
}

/* Fine-print floor: 12.8px. */
body .rp-pricecard-legal,
body .rp-cta-legal,
body .rp-aud-ch {
  font-size: 0.8rem;      /* 11.8–12.5 -> 12.8 */
}