/* Law site, revision 5: the brief. A memo-style reading grid with a margin column, Caslon display on white paper, verdigris links and gold rules. See DESIGN.md. */
:root {
  --glass: #0f1b18;
  --glass-2: #162622;
  --glass-3: #22342f;
  --line-dark: rgba(233, 236, 230, 0.16);
  --on-dark: #eef0ea;
  --on-dark-2: #b6beb8;
  --gold: #c9a24e;
  --gold-hi: #f2dfa2;
  --verdigris: #2c6b5e;
  --verdigris-deep: #1f5248;
  --verdigris-soft: #9fcdbf;
  --ink: #1b2326;
  --ink-2: #4a5457;
  --ink-3: #646d70;
  --limestone: #e8e8e1;
  --limestone-2: #d4d6cc;
  --paper: #ffffff;
  --memo: #fdfcf9;
  --mark: rgba(44, 107, 94, 0.17);

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Public Sans Variable", "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  --step-4: clamp(2.25rem, 1.35rem + 3.1vw, 3.9rem);
  --step-5: clamp(2.85rem, 1.25rem + 5.8vw, 6.6rem);

  --measure: 36rem;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (min-width: 960px) {
  :root { --step-0: 1.125rem; }
}

/* Fonts (self-hosted, SIL Open Font License) */
@font-face { font-family: "Libre Caslon Display"; src: url(fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans Variable"; src: url(fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans Variable"; src: url(fonts/public-sans-latin-wght-italic.woff2) format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--glass); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0) / 1.62 var(--sans);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page { background: var(--paper); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font: 400 var(--step-5) / 0.98 var(--display); letter-spacing: -0.012em; }
h2 { font: 400 var(--step-4) / 1.04 var(--display); letter-spacing: -0.008em; }
h3 { font: 400 var(--step-2) / 1.22 var(--serif); }
h4 { font: 600 var(--step-0) / 1.35 var(--sans); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--verdigris-deep); }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }
.band--glass :focus-visible, .hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .page-head :focus-visible, .cta-photo :focus-visible { outline-color: var(--gold-hi); }
::selection { background: rgba(44, 107, 94, 0.22); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { max-width: min(1320px, calc(100% - 64px)); }
}
.band { position: relative; padding-block: clamp(4.5rem, 2.6rem + 6.4vw, 9rem); }
.band--white { background: var(--paper); color: var(--ink); }
.band--stone { background: var(--limestone); color: var(--ink); }
.band--glass { background: var(--glass); color: var(--on-dark); }
.band--glass a:not(.btn) { color: var(--verdigris-soft); }
.band--glass a:not(.btn):hover { color: var(--on-dark); }
.band--tight { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }

.section-head { display: grid; gap: 1.1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; max-width: var(--measure); }
.band--glass .section-head p, .band--glass .lede { color: var(--on-dark-2); }
.facts--plain { margin-top: 0; padding-top: 0; border-top: 0; }
.h-small { font: 400 var(--step-2) / 1.25 var(--serif); }
.page-head--short .page-head__inner { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-head--tall .page-head__inner { min-height: min(760px, 88vh); justify-content: center; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.stack--lg { gap: 1.6rem; }
.measure { max-width: var(--measure); }
.small { font-size: var(--step--1); line-height: 1.5; }
.muted { color: var(--ink-2); }
.muted { color: var(--ink-2); }
.source { font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.band--glass .source, .hero .source { color: var(--on-dark-2); }

/* Buttons and links */
.btn {
  --btn-bg: var(--verdigris); --btn-fg: #fff; --btn-fill: var(--verdigris-deep); --btn-fill-fg: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.85rem 1.45rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 1rem / 1.2 var(--sans); letter-spacing: 0.005em; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill);
  transform: scaleX(0); transform-origin: right center; transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--btn-fill-fg); }
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--glass); --btn-fill: var(--verdigris); --btn-fill-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-fill: var(--on-dark); --btn-fill-fg: var(--glass); border-color: rgba(238, 240, 234, 0.55); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: #fff; border-color: var(--ink); }
.btn--small { min-height: 42px; padding: 0.6rem 1.05rem; font-size: 0.94rem; }

.link-draw {
  color: inherit; text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px; transition: background-size 0.4s var(--ease), color 0.3s;
}
.link-draw:hover { background-size: 0 1px; background-position: 100% 100%; color: inherit; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* Copy-to-clipboard email line */
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.email-line__addr { font-weight: 600; word-break: break-all; }
.copy-btn {
  font: 600 0.85rem / 1 var(--sans); padding: 0.55rem 0.8rem; border-radius: 2px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0.85;
  transition: opacity 0.2s, background-color 0.2s;
}
.copy-btn:hover { opacity: 1; }
.copy-btn[data-copied] { opacity: 1; }

/* Photos: one grade and one grain across every shot */
.ph--4x5 { aspect-ratio: 4 / 5; }
.ph { position: relative; overflow: hidden; background: var(--glass-3) center / cover no-repeat; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.06) brightness(0.97); }
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(242, 223, 162, 0.22), rgba(15, 27, 24, 0.42));
  mix-blend-mode: soft-light;
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 180px; opacity: 0.32; mix-blend-mode: overlay;
}
.ph--hero { background-image: url(photos/hero-lqip.webp); }
.ph--main-street { background-image: url(photos/main-street-lqip.webp); }
.ph--storefront { background-image: url(photos/storefront-lqip.webp); }
.ph--desk { background-image: url(photos/desk-lqip.webp); }
.ph--phone { background-image: url(photos/phone-lqip.webp); }
.ph--courthouse-detail { background-image: url(photos/courthouse-detail-lqip.webp); }
.figure { display: grid; gap: 0.7rem; }
.figure figcaption, figcaption.cap { font-size: var(--step--1); line-height: 1.45; color: var(--ink-3); }
figcaption:empty { display: none; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--on-dark);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(8, 15, 13, 0.62), rgba(8, 15, 13, 0));
  transition: opacity 0.35s var(--ease);
}
.site-header.is-solid { background: rgba(15, 27, 24, 0.94); box-shadow: 0 1px 0 var(--line-dark); }
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-solid { background: rgba(15, 27, 24, 0.82); backdrop-filter: blur(12px) saturate(1.15); }
}
.site-header.is-solid::before { opacity: 0; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h); transition: min-height 0.35s var(--ease);
}
.site-header.is-solid .site-header__inner { min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.monogram { width: 38px; height: 38px; flex: none; }
.brand__name { display: grid; line-height: 1.05; }
.brand__line { font: 400 1.08rem / 1.1 var(--serif); letter-spacing: 0.01em; }
.brand__sub { font: italic 400 0.86rem / 1.2 var(--serif); color: inherit; letter-spacing: 0.04em; }
.nav { display: none; align-items: center; gap: 1.5rem; }
.nav__link {
  color: inherit; text-decoration: none; font-weight: 500; font-size: 0.97rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-block: 4px; transition: background-size 0.35s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: inherit; background-size: 100% 1px; }
@media (min-width: 940px) {
  .nav { display: flex; }
  .menu { display: none; }
}
.menu { position: static; }
.menu__toggle {
  list-style: none; display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-weight: 600; font-size: 0.97rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line-dark); border-radius: 2px;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__icon { position: relative; width: 16px; height: 10px; }
.menu__icon::before, .menu__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.menu__icon::before { top: 0; }
.menu__icon::after { bottom: 0; }
.menu[open] .menu__icon::before { transform: translateY(4.25px) rotate(45deg); }
.menu[open] .menu__icon::after { transform: translateY(-4.25px) rotate(-45deg); }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; gap: 0.2rem; padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 1.6rem max(16px, env(safe-area-inset-left, 0px));
  background: var(--glass); border-top: 1px solid var(--line-dark); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.5);
}
.menu__panel a { color: var(--on-dark); text-decoration: none; font: 400 1.6rem / 1.25 var(--serif); padding: 0.55rem 0; border-bottom: 1px solid var(--line-dark); }
.menu__panel a:last-child { border-bottom: 0; }

/* Hero (home) */
.site-footer { background: var(--glass); color: var(--on-dark-2); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0; border-top: 1px solid var(--line-dark); }
.site-footer a { color: var(--on-dark); }
.site-footer__grid { display: grid; gap: 2.6rem; padding-bottom: 3rem; }
.site-footer__brand { display: grid; gap: 1.1rem; max-width: 26rem; }
.brand--footer { color: var(--on-dark); }
.site-footer__nav { display: grid; gap: 0.6rem; align-content: start; }
.site-footer__nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; justify-self: start; transition: background-size 0.35s var(--ease); }
.site-footer__nav a:hover { background-size: 100% 1px; color: var(--on-dark); }
.site-footer__h { font: 600 0.92rem / 1.3 var(--sans); color: var(--on-dark-2); margin-bottom: 0.3rem; }
.site-footer__legal { border-top: 1px solid var(--line-dark); padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); font-size: 0.82rem; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1fr); } }

/* ===== Revision 4: the brief ===== */

/* Reading grid: a margin column for memo numerals, labels and source notes, and a reading column. */
.doc { padding-block: clamp(3rem, 2rem + 3vw, 5.5rem); }
.doc--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.part { display: grid; gap: 0.9rem 3rem; align-items: start; margin-bottom: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.part:last-child { margin-bottom: 0; }
.part__margin { display: grid; gap: 0.45rem; align-content: start; }
.part__num { font: 400 clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem) / 1 var(--display); color: var(--gold); }
.part__label { font: italic 400 1.05rem / 1.35 var(--serif); color: var(--ink-2); }
.part__note { font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.part__note a { color: var(--ink-2); }
.part__body a, .qa a, .memo a { overflow-wrap: anywhere; }
.part__body { min-width: 0; display: grid; gap: 1.15rem; max-width: 44rem; }
.part__body > p, .part__body > ul, .part__body > ol, .part__body > blockquote { max-width: var(--measure); }
.part__body h2 { font: 400 var(--step-3) / 1.08 var(--display); max-width: 20ch; margin-bottom: 0.35rem; }
.part__body h3 { margin-top: 0.8rem; }
.part__body ul, .part__body ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.part__body li::marker { color: var(--gold); }
.part--wide .part__body { max-width: 62rem; }
@media (min-width: 1000px) {
  .part { grid-template-columns: 11rem minmax(0, 1fr); }
  .part__margin { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.rule { height: 1px; background: var(--limestone-2); border: 0; margin: 0; }
.rule--gold { background: var(--gold); height: 1.5px; }

/* Cover: full-bleed courthouse photo with the memo card */
.cover { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; color: var(--ink); padding-top: calc(var(--header-h) + 2rem); }
.cover__media { position: absolute; inset: 0; z-index: 0; }
.cover__media .ph { height: 100%; }
.cover__media img { object-position: 50% 40%; }
.cover__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(rgba(15, 27, 24, 0), rgba(15, 27, 24, 0.55)); z-index: 3; pointer-events: none; }
.cover__inner { position: relative; z-index: 2; padding-block: clamp(1.5rem, 1rem + 3vw, 4rem); }
.memo-card { background: var(--memo); max-width: 44rem; padding: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); display: grid; gap: 1rem; }
.memo-head { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.28rem 1rem; font-size: 0.98rem; line-height: 1.35; }
.memo-head dt { font: 600 0.78rem / 1.6 var(--sans); letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.memo-head dd { margin: 0; }
.memo-head dd.re { font: 400 var(--step-1) / 1.35 var(--serif); }
.memo-rule { height: 1.5px; background: var(--gold); transform-origin: left center; }
.memo-card h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.04; }
.memo-card .lede { font-size: var(--step-0); }
.memo-card .actions { margin-top: 0.4rem; }
.cover__cap { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 0.8rem; z-index: 3; font-size: 0.8rem; color: rgba(238, 240, 234, 0.85); }
@media (min-width: 1000px) { .cover__cap { bottom: 1.1rem; } }

/* Wide photo band with caption */
.band-photo { position: relative; }
.band-photo .ph { width: 100%; height: clamp(240px, 38vw, 560px); }
.band-photo figcaption { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 0.8rem; font-size: 0.8rem; color: rgba(238, 240, 234, 0.85); z-index: 3; }
.margin-photo { display: grid; gap: 0.55rem; }
.margin-photo .ph { aspect-ratio: 1; }
.margin-photo figcaption { font-size: 0.8rem; color: var(--ink-3); line-height: 1.4; }

/* Page heads for inner pages */
.doc-head { padding-top: calc(var(--header-h) + clamp(2rem, 1.5rem + 2vw, 3.5rem)); padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--paper); }
.doc-head__inner { display: grid; gap: 1rem; max-width: 46rem; }
.doc-head h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem); line-height: 1.02; }
.doc-head .lede { font-size: var(--step-1); }
.crumbs { font-size: var(--step--1); color: var(--ink-3); display: flex; gap: 0.5rem; }
.crumbs a { color: var(--ink-2); }
.doc-head--dark { background: var(--glass); color: var(--on-dark); }
.doc-head--dark .lede, .doc-head--dark .crumbs, .doc-head--dark .crumbs a { color: var(--on-dark-2); }
.doc-head--photo { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1000px) { .doc-head--photo { grid-template-columns: minmax(0, 1fr) 22rem; } }
.doc-head--photo .ph { width: 100%; aspect-ratio: 4 / 5; max-height: 420px; }
@media (min-width: 1000px) { .doc-head--photo .ph { height: 420px; aspect-ratio: auto; } }
.light .site-header { color: var(--ink); }
.light .site-header::before { display: none; }
.light .site-header .brand__sub { color: inherit; }
.light .site-header .btn--light { --btn-bg: var(--glass); --btn-fg: var(--on-dark); }
.light .site-header .menu__toggle { border-color: var(--limestone-2); }
.light .site-header.is-solid { background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 1px 0 var(--limestone-2); }
@supports (backdrop-filter: blur(8px)) { .light .site-header.is-solid { background: rgba(255, 255, 255, 0.84); } }
.light .site-header :focus-visible { outline-color: var(--verdigris); }

/* Tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: 16px; }
@media (min-width: 720px) { .tbl-wrap { margin-inline: 0; padding-inline: 0; } }
table.tbl { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
table.tbl caption { text-align: left; font: italic 400 1rem / 1.4 var(--serif); color: var(--ink-2); padding-bottom: 0.7rem; caption-side: top; }
table.tbl th, table.tbl td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--limestone-2); vertical-align: top; }
table.tbl th { font-weight: 600; background: var(--limestone); }
table.tbl td.n, table.tbl th.n { text-align: right; }
table.tbl tfoot td { font-size: 0.85rem; color: var(--ink-3); border-bottom: 0; padding-top: 0.6rem; }
table.tbl--plain { min-width: 0; }
@media (max-width: 640px) {
  .tbl-wrap:has(.tbl--stack) { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
  table.tbl--stack { min-width: 0; display: block; }
  table.tbl--stack thead { display: none; }
  table.tbl--stack tbody, table.tbl--stack tfoot, table.tbl--stack tr { display: block; }
  table.tbl--stack tr { padding: 0.7rem 0; border-bottom: 1px solid var(--limestone-2); }
  table.tbl--stack td { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; padding: 0.2rem 0; border: 0; }
  table.tbl--stack td::before { content: attr(data-label); font-weight: 600; color: var(--ink-2); font-size: 0.85rem; }
  table.tbl--stack td:first-child { font-weight: 600; }
  table.tbl--stack tfoot td { display: block; }
}

/* Figures and charts */
.fig { display: grid; gap: 0.8rem; max-width: 62rem; }
.fig h3 { font: 600 var(--step-0) / 1.35 var(--sans); }
.fig svg { width: 100%; height: auto; overflow: visible; }
.fig--mob { display: none; }
@media (max-width: 640px) { .fig--desk { display: none; } .fig--mob { display: block; } }
.fig .cap { font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; max-width: 44rem; }
.fig text { font-family: var(--sans); }
.fig .lbl { font-size: 13px; fill: var(--ink-2); }
.fig .lbl--b { font-size: 13px; fill: var(--ink); font-weight: 600; }
.fig .ax { stroke: var(--ink-2); stroke-width: 1; }
.fig .grid line { stroke: var(--limestone-2); stroke-width: 1; }
.fig .s-dir { fill: #cfd3c7; }
.fig .s-chain { fill: var(--gold); }
.fig .s-own { fill: var(--verdigris); }
.fig .s-aio { fill: var(--verdigris); }
.fig .s-no { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: var(--step--1); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend i { width: 14px; height: 14px; display: inline-block; }
.legend .s-dir { background: #cfd3c7; } .legend .s-chain { background: var(--gold); } .legend .s-own { background: var(--verdigris); }
.marks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.marks li { width: 22px; height: 30px; border: 1.3px solid var(--ink-2); position: relative; }
.marks li.on { background: var(--verdigris); border-color: var(--verdigris); }

/* Quotes and sources */
.pull { font: italic 400 var(--step-2) / 1.35 var(--serif); color: var(--ink); max-width: 30rem; padding-left: 1.1rem; border-left: 2px solid var(--gold); }
.pull cite { display: block; font: 400 var(--step--1) / 1.4 var(--sans); color: var(--ink-3); margin-top: 0.6rem; font-style: normal; }
.src { font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.src a { color: var(--ink-2); }
.srcs { list-style: none; display: grid; gap: 0.5rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); counter-reset: s; }
.srcs li { padding-left: 2rem; position: relative; }
.srcs li::before { counter-increment: s; content: counter(s) "."; position: absolute; left: 0; color: var(--gold); font-family: var(--serif); }
.srcs a { word-break: break-word; }

/* Dark closing band */
.close { background: var(--glass); color: var(--on-dark); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.close__inner { display: grid; gap: 1.4rem; max-width: 44rem; }
.close h2 { font-size: var(--step-3); }
.close p { color: var(--on-dark-2); max-width: var(--measure); }
.close a:not(.btn) { color: var(--verdigris-soft); }

/* The memorandum (sample report and ranking check) */
.memo { background: var(--memo); border: 1px solid var(--limestone-2); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.35); padding: clamp(1.4rem, 1rem + 2.6vw, 3rem); display: grid; gap: 1.4rem; max-width: 52rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; }
.memo__ex { justify-self: start; font: 600 0.74rem / 1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--verdigris-deep); border: 1px solid var(--verdigris); padding: 0.35rem 0.55rem; border-radius: 2px; }
.memo__title { font: 400 1.6rem / 1.1 var(--display); letter-spacing: 0.02em; }
.memo .memo-head { font-family: var(--serif); }
.memo h2 { font: 700 1rem / 1.4 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.6rem; border-bottom: 1px solid var(--limestone-2); padding-bottom: 0.3rem; }
.memo h3 { font: 700 1.02rem / 1.4 var(--serif); margin-top: 0.4rem; }
.memo p, .memo li { max-width: none; }
.memo ol, .memo ul { padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.memo .tbl { font-family: var(--sans); }
.memo .note { font-size: 0.9rem; color: var(--ink-2); font-style: italic; }
.memo__foot { font-size: 0.85rem; color: var(--ink-3); border-top: 1px solid var(--limestone-2); padding-top: 0.8rem; font-family: var(--sans); }
.memo details { border: 1px solid var(--limestone-2); padding: 0.6rem 0.9rem; }
.memo details summary { cursor: pointer; font-weight: 700; }
.memo details[open] summary { margin-bottom: 0.6rem; }
.memo .flag { color: var(--verdigris-deep); font-weight: 700; }
.memo .tbl th { background: var(--limestone); }
.print-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Guides index and articles */
.guide-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--limestone-2); max-width: 52rem; }
.guide-list li { display: grid; gap: 0.4rem; padding: 1.4rem 0; border-bottom: 1px solid var(--limestone-2); }
.guide-list h2 { font: 400 var(--step-2) / 1.2 var(--display); }
.guide-list h2 a { color: inherit; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1.5px no-repeat; transition: background-size 0.35s var(--ease); }
.guide-list h2 a:hover { background-size: 100% 1.5px; }
.guide-list p { color: var(--ink-2); max-width: var(--measure); }
.guide-list .meta { font-size: var(--step--1); color: var(--ink-3); }
.article { display: grid; gap: 2rem 3rem; align-items: start; }
.article__body { min-width: 0; max-width: 44rem; display: grid; gap: 1.1rem; }
.article__body > p, .article__body > ul, .article__body > ol, .article__body > blockquote { max-width: var(--measure); }
.article__body h2 { font: 400 var(--step-3) / 1.1 var(--display); margin-top: 1.6rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.article__body h3 { font: 700 var(--step-0) / 1.35 var(--sans); margin-top: 0.8rem; }
.article__body ul, .article__body ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.article__body li::marker { color: var(--gold); }
.article__body a { overflow-wrap: anywhere; }
.article__body .tbl-wrap { max-width: 56rem; }
.article__body figure { max-width: 56rem; }
.toc { display: grid; gap: 0.5rem; align-content: start; font-size: var(--step--1); }
.toc h2 { font: 600 0.8rem / 1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; display: grid; gap: 0.35rem; }
.toc a { color: var(--ink-2); text-decoration: none; display: block; padding-left: 0.8rem; border-left: 2px solid transparent; line-height: 1.4; }
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--gold); }
.toc .meta { color: var(--ink-3); margin-top: 0.6rem; }
@media (min-width: 1000px) {
  .article { grid-template-columns: 13rem minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.do { border: 1px solid var(--limestone-2); border-left: 3px solid var(--gold); padding: 1rem 1.2rem; display: grid; gap: 0.6rem; background: var(--memo); }
.do h3 { margin-top: 0; }
.do ol { padding-left: 1.2rem; }
.callout { background: var(--limestone); padding: 1rem 1.2rem; display: grid; gap: 0.5rem; }
.byline { font-size: var(--step--1); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

/* Questions page */
.qa { display: grid; gap: 0; max-width: 44rem; border-top: 1px solid var(--limestone-2); }
.qa > div { padding: 1.6rem 0; border-bottom: 1px solid var(--limestone-2); display: grid; gap: 0.7rem; }
.qa dt { font: 400 var(--step-2) / 1.25 var(--display); }
.qa dd { margin: 0; display: grid; gap: 0.7rem; color: var(--ink); }
.qa dd p { max-width: var(--measure); }

/* Opinions on the About page */
.opinions { list-style: none; counter-reset: op; display: grid; gap: 1.4rem; max-width: 44rem; }
.opinions li { display: grid; gap: 0.4rem; padding-left: 3rem; position: relative; }
.opinions li::before { counter-increment: op; content: counter(op); position: absolute; left: 0; top: -0.1rem; font: 400 1.9rem / 1 var(--display); color: var(--gold); }
.opinions b { font: 400 var(--step-1) / 1.3 var(--serif); }
.opinions p { color: var(--ink-2); max-width: var(--measure); }

/* 90-day plan */
.plan { display: grid; gap: 1.2rem; max-width: 44rem; counter-reset: pl; }
.plan > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.4rem 1.2rem; padding: 1rem 0; border-top: 1px solid var(--limestone-2); }
.plan .when { font: italic 400 1rem / 1.4 var(--serif); color: var(--ink-2); }
.plan h3 { margin-top: 0; }
.plan p { color: var(--ink); max-width: var(--measure); }
@media (max-width: 560px) { .plan > div { grid-template-columns: 1fr; } }

/* Home: the four-town marks */
.sample { display: grid; gap: 0.6rem; }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; gap: 1rem; max-width: 40rem; }

/* Motion scaffolding: nothing hides unless the script is ready, and reduced motion shows the finished state */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.reveal-all) [data-fade] { opacity: 0; }
  .js:not(.reveal-all) .memo-card [data-rise] { opacity: 0; }
  .js:not(.reveal-all) .memo-card .memo-rule { transform: scaleX(0); }
}
.reveal-all [data-fade], .reveal-all [data-rise] { opacity: 1 !important; transform: none !important; }

/* Print: the sample report prints as the memo alone */
@media print {
  .site-header, .site-footer, .close, .print-row, .crumbs, .doc-head .actions { display: none !important; }
  .doc-head { padding-top: 0; }
  .memo { box-shadow: none; border: 0; padding: 0; max-width: none; font-size: 11pt; }
  .memo details { border: 0; padding: 0; }
  .memo details:not([open]) > *:not(summary) { display: block; }
  a { color: inherit; text-decoration: none; }
  body { background: #fff; }
}

/* v5: launch pass */
.cs-img { display: grid; gap: 0.6rem; margin-block: 0.4rem; }
.cs-img img { width: 100%; height: auto; display: block; border: 1px solid var(--limestone-2); border-radius: 4px; background: #fff; }
.cs-img--small, .article__body .cs-img--small { max-width: 500px; }
.cs h2:first-child { margin-top: 0; }
.terms li { padding-left: 0.1rem; }
.site-footer__credit { margin-top: 0.35rem; opacity: 0.85; }
@media (max-width: 640px) {
  .memo-head .memo-head__opt { display: none; }
  .memo-card h1 { font-size: 2rem; }
  .memo-card { gap: 0.8rem; }
}
.cs-img__link { display: block; }
@media (min-width: 1000px) { .cs .cs-img--wide { width: min(70rem, calc(100vw - 128px)); max-width: none; } }
.fig--small { max-width: 40rem; }

/* ranking check lead form */
.lf { margin: 1.25rem 0 2rem; }
.lf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lf__grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.25rem; }
@media (min-width: 640px) { .lf__grid { grid-template-columns: 1fr 1fr; } .lf__wide { grid-column: 1 / -1; } }
.lf__field { display: block; margin: 0; }
.lf__label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.lf__label small { font-weight: 400; opacity: .75; }
.lf input:not([type=hidden]):not([type=checkbox]), .lf textarea {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; line-height: 1.4;
  color: #16191d; background: #fff; border: 1px solid rgba(20, 25, 30, .28); border-radius: 4px; padding: .7rem .8rem; }
.lf textarea { resize: vertical; min-height: 5.5rem; }
.lf input:focus-visible, .lf textarea:focus-visible { outline: 3px solid rgba(30, 90, 200, .35); outline-offset: 1px; border-color: rgba(20, 25, 30, .55); }
.lf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.lf__actions .btn { cursor: pointer; }
.lf__actions .btn[disabled] { opacity: .6; cursor: progress; }
.lf__note { margin: 0; font-size: .92rem; opacity: .8; max-width: 34rem; }
.lf__status { margin: 1rem 0 0; font-weight: 600; }
.lf__status:empty { display: none; }