/* ============================================================
   APOLLO COUNSEL — style.css
   Rebuilt 2026-09-11 as a single design system.

   Replaces the previous sheet, which had grown through five
   appended override passes (2026-09-08 → 09-11) that redeclared
   the same properties at different values. Every class name,
   attribute hook and DOM assumption from that sheet is preserved
   verbatim, so all 21 pages and both n8n publishing pipelines
   (Hill Panel, Insights `Build Article Files`) render unchanged.

   Structure
     1. Tokens
     2. Reset & base
     3. Layout primitives
     4. Typography scale
     5. Chrome — topbar, footer
     6. Home — hero, convo, practices, issues, docket, signup
     7. Interior — phero, psection, hublist, biosplit
     8. Insights — list, article prose, cross-links
     9. Forms & buttons
    10. Decorative layers — grain, watermark
    11. Responsive
    12. Accessibility & motion
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */

:root {
  /* Paper — warmer and slightly deeper than the previous #f7f3ea */
  --paper:        #f6f1e5;
  --paper-raised: #fcfaf4;
  --paper-deep:   #efe7d5;
  --paper-ink:    #1b1912;

  /* Ink */
  --ink:         #12110b;
  --ink-soft:    #34322a;
  --body-muted:  #4a473c;
  --label-muted: #6b6759;
  --faint:       #696554;

  /* Accents */
  --rust:       #7f3a1f;
  --rust-deep:  #5e2a14;
  --rust-wash:  #f0e2d6;
  --brass:      #7d6028;
  --brass-soft: #bda877;

  /* Rules */
  --border:      #c9c1aa;
  --border-soft: #ddd5c0;
  --border-hair: #e7e0cf;

  /* Type families */
  --serif: 'Libre Caslon Text', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — one fluid ramp, used everywhere */
  --t-display: clamp(2.75rem, 1.35rem + 5.6vw, 5.5rem);   /*  44 → 88 */
  --t-h1:      clamp(2.375rem, 1.35rem + 4.1vw, 4rem);    /*  38 → 64 */
  --t-h2:      clamp(1.625rem, 1.22rem + 1.6vw, 2.25rem); /*  26 → 36 */
  --t-h3:      clamp(1.3125rem, 1.12rem + 0.78vw, 1.625rem); /* 21 → 26 */
  --t-lead:    clamp(1.125rem, 1.03rem + 0.38vw, 1.3125rem); /* 18 → 21 */
  --t-body:    clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);  /*  16 → 17 */
  --t-small:   0.96875rem;   /* 15.5 */
  --t-meta:    0.875rem;     /* 14   */
  --t-label:   0.75rem;      /* 12   */
  --t-micro:   0.6875rem;    /* 11   */

  --lh-display: 1.05;
  --lh-head:    1.14;
  --lh-lead:    1.62;
  --lh-body:    1.78;

  --track-label: 0.16em;
  --track-micro: 0.2em;

  /* Space scale */
  --s0: 0.375rem;  --s1: 0.625rem;  --s2: 1rem;    --s3: 1.5rem;
  --s4: 2.125rem;  --s5: 3rem;      --s6: 4.25rem; --s7: 6rem;

  /* Band = vertical rhythm of a full-width section */
  --band:      clamp(3.5rem, 1.9rem + 6.4vw, 6.75rem);
  --band-tight: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* Horizontal gutter + centred measure.
     `--pad-x` keeps rules full-bleed while the content inside
     stays centred and capped, which is what makes the wide-desktop
     view feel composed rather than stretched. */
  --gutter: clamp(1.375rem, 0.6rem + 3.1vw, 4.5rem);
  --maxw:   1220px;
  --pad-x:  max(var(--gutter), calc((100% - var(--maxw)) / 2));

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset & base -------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

::selection { background: var(--rust); color: var(--paper); }

/* ---------- 3. Layout primitives --------------------------- */

/* Every full-width band uses the same horizontal padding and the
   same hairline separator, so section edges line up down the page. */
.hero, .convo, .issues, .docket, .signup, .contactblock,
.phero, .psection, .biosplit, .crumb, .topbar, .footer,
.hubrow, .article, .practices, .pagenav, .secopen, .issuelist {
  padding-inline: var(--pad-x);
}

.hero, .convo, .practices, .issues, .docket, .signup,
.phero, .psection, .biosplit, .hublist, .articlelist {
  border-bottom: 1px solid var(--border-soft);
}

/* `.psection` and friends were previously capped with `max-width`,
   which left them flush-left on wide screens while their sibling
   bands were full-bleed. The measure is now enforced on the text
   itself, so every band spans the page identically. */
.psection > *, .signup > *, .convo > * { max-width: 68ch; }
.psection > .ctarow, .convo > .ctarow { max-width: none; }

/* ---------- 4. Typography scale ---------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}

p, li { text-wrap: pretty; }

/* The single eyebrow/label treatment. Everything that was a
   tracked mono micro-label — .pex, .crumb, .cityline, .adate,
   .dtag, .samplenote, .docketkicker, .portraitnote — now
   inherits from one place instead of five. */
.pex, .crumb, .cityline, .adate, .dtag, .samplenote,
.docketkicker, .portraitnote, .byline,
.inquiryform label, .signupform label {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}

/* ---------- 5. Chrome -------------------------------------- */

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-block: clamp(1.25rem, 0.9rem + 1.4vw, 1.875rem);
  border-bottom: 2px solid var(--ink);
}

.topbar a.brand,
.topbar a.wordmark {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 0.45rem + 0.6vw, 0.875rem);
  text-decoration: none;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.topbar a.brand:hover { color: var(--rust); }

.topbar .mark {
  width: clamp(34px, 2.6vw, 42px);
  height: clamp(34px, 2.6vw, 42px);
  flex-shrink: 0;
  color: currentColor;
  transition: transform .3s var(--ease);
}
.topbar a.brand:hover .mark { transform: rotate(-4deg) scale(1.04); }

.wordmark {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem); /* 22 → 28 */
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: clamp(1.125rem, 0.55rem + 1.6vw, 2.125rem);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-soft);
}
.navlinks a {
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.navlinks a:hover { color: var(--rust); border-bottom-color: var(--rust); }

.cityline {
  color: var(--label-muted);
  letter-spacing: var(--track-micro);
  font-size: var(--t-micro);
  white-space: nowrap;
}

/* Footer */
.footer {
  padding-block: var(--s3) var(--s6);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: var(--label-muted);
  background: var(--paper-deep);
}
.footer .rule {
  border-top: 2px solid var(--ink);
  margin-bottom: var(--s3);
}
.footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer a:hover { color: var(--rust); border-bottom-color: var(--rust); }

.footnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}
.footnav a { border-bottom-color: transparent; }
.footnav a:hover { color: var(--rust); border-bottom-color: var(--rust); }

.footer .mark {
  width: 17px; height: 17px;
  color: var(--rust);
  vertical-align: -3px;
  margin-right: 0.5rem;
  display: inline-block;
}

.disclaimer {
  color: var(--faint);
  max-width: 78ch;
  margin-top: var(--s2);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* Colophon -- the quiet line about how the site is made. Sits under the
   compliance disclaimer, one step further back in the footer hierarchy. */
.colophon {
  color: var(--faint);
  max-width: 78ch;
  margin-top: var(--s1);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* ---------- 6. Home ---------------------------------------- */

/* Hero */
.hero {
  padding-block: clamp(3.5rem, 1.5rem + 8vw, 8rem) clamp(3rem, 1.5rem + 6vw, 6.5rem);
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  max-width: 17ch;
}
.hero h1 .accent {
  font-style: italic;
  color: var(--rust);
  display: inline-block;
}
.machineline {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--body-muted);
  max-width: 58ch;
}
.machineline a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: border-color .18s var(--ease);
}
.machineline a:hover { border-bottom-color: var(--rust); }

/* Conversation block */
.convo { padding-block: var(--band); }
.line {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2rem);  /* 22 → 32 */
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: var(--s3);
  max-width: 30ch;
  text-wrap: balance;
}
.line.dim { color: var(--faint); font-style: italic; }
.convo .line:last-of-type { max-width: 46ch; margin-bottom: var(--s4); }

/* Practice grid */
/* Two columns at every width. The four practice areas read as 2 + 2; the
   fifth cell is the CTA, not a service, so it runs the full width beneath
   them instead of leaving a hole in a three-up second row (audit, Sep 14). */
.practices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--border);
}
/* The grid is padded as a whole so its columns sit inside the same
   measure as every other section; cells carry only internal padding and
   the hairlines that divide them. */
.pcell {
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  padding-inline: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background .22s var(--ease);
}
.practices > .pcell:nth-child(2n + 1) { padding-inline-start: 0; }
.practices > .pcell:nth-child(2n)     { padding-inline-end: 0; border-right: none; }
/* The CTA row: full width, no side padding, no rules of its own. The grid
   border closes the block underneath it. */
.practices > .pcell.pcta {
  grid-column: 1 / -1;
  padding-inline: 0;
  border-right: none;
  border-bottom: none;
  text-align: center;
}
/* Centred: the CTA runs the full grid width, so left-aligned copy left the
   right half of the row empty under the two columns above it (Andy, Sep 15). */
.practices > .pcta p { max-width: 62ch; margin-inline: auto; }
.pcell:hover { background: var(--paper-raised); }

.pex { color: var(--brass); margin-bottom: var(--s1); }
.pcell h3, .pcell h2 { font-size: var(--t-h3); margin-bottom: var(--s1); }
.pcell h3 a, .pcell h2 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
  transition: color .18s var(--ease), background-size .28s var(--ease), border-color .18s var(--ease);
}
.pcell:hover h3 a, .pcell:hover h2 a { color: var(--rust); border-bottom-color: transparent; background-size: 100% 1px; }
.pcell p {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--body-muted);
  max-width: 42ch;
}

/* Issue areas */
.issues {
  padding-block: var(--band);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--border);
}
.issues h2 { font-size: var(--t-h2); margin-bottom: var(--s0); }
/* The heading is a link, but an underlined heading reads as a mistake.
   It carries a small arrow instead, the signal "All Insights" already uses. */
.issues h2 a {
  color: inherit;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.issues h2 a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.62em;
  vertical-align: 0.14em;
  color: var(--rust);
  transition: transform .18s var(--ease);
}
.issues h2 a:hover { color: var(--rust); }
.issues h2 a:hover::after { transform: translateX(3px); }
.issuelede {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--body-muted);
  margin-bottom: var(--s4);
  max-width: 60ch;
}
.tagrow { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.tag {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rust);
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
}
a.tag {
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
a.tag:hover {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--rust);
  transform: translateY(-1px);
}
div.tag { border-color: var(--border); color: var(--body-muted); background: transparent; }
.issuemore { margin-top: var(--s3); font-size: var(--t-small); }
.issuemore a {
  color: var(--rust);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: border-color .18s var(--ease);
}
.issuemore a:hover { border-bottom-color: var(--rust); }

/* This Week on the Hill */
.docket { padding-block: var(--band); }
.dockethead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s1);
}
.docket h2 { font-size: var(--t-h2); }
.samplenote { color: var(--rust); letter-spacing: var(--track-micro); }
.docketkicker { color: var(--brass); margin-bottom: var(--s1); }

/* A docket heading that is also a link. The homepage "This Week on the Hill"
   heading became one when the /hill/ archive shipped; without this it renders
   with the browser-default underline L2.13 removed everywhere else. */
.docket h1 a,
.docket h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.docket h1 a:hover,
.docket h2 a:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* /hill/ archive hub (L2.27). Each row's right column carries the week's
   topic tags rather than an item count, so unlike a date it has to wrap; and
   a one-week archive is shorter than the viewport, which left the footer
   floating mid-screen until the body became a flex column. */
.insightlinks.hillweeks li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s0);
}
.insightlinks.hillweeks .adate {
  white-space: normal;
  text-align: left;
  max-width: none;
}
body.hill-hub { display: flex; flex-direction: column; min-height: 100vh; }
body.hill-hub main { flex: 1 0 auto; }
/* The .secopen above the list already supplies the top spacing; the band's
   own top padding on top of it left a dead gap under the lead rule. */
body.hill-hub .docket { padding-block: 0 var(--band); }
.docketsub {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: 72ch;
  margin-bottom: var(--s4);
}
/* Grid rather than flex: the optional `.dwhy` clause has to occupy its
   own row under the item text, and a flex-basis of 100% cannot survive
   the max-width that keeps that clause at a readable measure. */
.drow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s0) var(--s4);
  padding-block: var(--s2);
  border-top: 1px solid var(--border-soft);
  font-size: var(--t-small);
  line-height: 1.65;
  transition: background .2s var(--ease);
}
.drow:last-child { border-bottom: 1px solid var(--border-soft); }
.drow:hover { background: var(--paper-raised); }
.dwhat { grid-column: 1; grid-row: 1; max-width: 74ch; color: var(--ink); }
.dtag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--rust);
  white-space: nowrap;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
}
.dwhy {
  grid-column: 1;
  max-width: 70ch;
  margin-top: var(--s0);
  padding-left: 0.875rem;
  border-left: 2px solid var(--brass-soft);
  font-size: var(--t-meta);
  line-height: 1.65;
  color: var(--label-muted);
  font-style: italic;
}

/* Newsletter signup */
.signup { padding-block: var(--band); }
.signup h2 { font-size: var(--t-h2); margin-bottom: var(--s1); }
.signup p {
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--body-muted);
  margin-bottom: var(--s3);
  max-width: 62ch;
}
.signup .formnote { margin-top: var(--s2); margin-bottom: 0; }

/* ---------- 7. Interior pages ------------------------------ */

.crumb {
  color: var(--rust);
  letter-spacing: var(--track-micro);
  padding-top: var(--s4);
  padding-bottom: var(--s1);
}
.crumb a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); }
.crumb a:hover { border-bottom-color: var(--rust); }

.phero {
  padding-block: clamp(2.25rem, 1.2rem + 4vw, 4.25rem) var(--band-tight);
  border-bottom: 1px solid var(--border);
}
.phero h1 {
  font-size: var(--t-h1);
  max-width: 20ch;
  margin-bottom: var(--s3);
}
.crumb + .phero { padding-top: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem); }

.answerfirst {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: 58ch;
}

.byline {
  color: var(--label-muted);
  margin-bottom: var(--s3);
  letter-spacing: 0.12em;
}
.byline a { color: var(--rust); text-decoration: none; border-bottom: 1px solid var(--brass-soft); }
.byline a:hover { border-bottom-color: var(--rust); }

.psection { padding-block: var(--band-tight); }
.psection h2 {
  font-size: var(--t-h2);
  margin-bottom: var(--s2);
  max-width: 28ch;
}
.psection p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body-muted);
  margin-bottom: var(--s2);
}
.psection p:last-child { margin-bottom: 0; }
.psection p strong { color: var(--ink); font-weight: 600; }
.psection a:not(.cta):not(.tag) {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.psection a:not(.cta):not(.tag):hover { color: var(--rust-deep); border-bottom-color: var(--rust); }

/* Stacked link lists read as a block of rust rules if every item takes
   the inline-link treatment, so they stay ink until hover. */
/* Specificity matters here: `.psection a:not(.cta):not(.tag)` above is (0,3,1),
   so these have to reach at least that to win inside a prose section. */
.psection.sources ul a:not(.cta),
.psection.more-insights ul a:not(.cta),
.psection ul.insightlinks a:not(.cta) {
  color: var(--ink);
  border-bottom-color: var(--border);
}
/* The insight lists already separate their rows with a rule per <li>;
   an underline on top of that reads as clutter (Andy, 2026-09-11). This
   has to out-specify `.psection a:not(.cta):not(.tag)` (0,3,1) to win. */
.psection ul.insightlinks a:not(.cta) { border-bottom: none; }
.psection.sources ul a:not(.cta):hover,
.psection.more-insights ul a:not(.cta):hover,
.psection ul.insightlinks a:not(.cta):hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* Prose lists. The global reset zeroes list padding, which left
   markers clipped outside the box on the Sources and FAQ blocks. */
.psection ul, .psection ol { margin: 0 0 var(--s2); padding-left: 1.35rem; }
.psection li {
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--body-muted);
  margin-bottom: var(--s1);
}
.psection ul li::marker { color: var(--brass); }
.psection ol li::marker { color: var(--brass); font-family: var(--mono); font-size: .85em; }

.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  line-height: 1.5;
  color: var(--rust);
  border-left: 2px solid var(--rust);
  padding: var(--s0) 0 var(--s0) var(--s3);
  margin-block: var(--s4);
  max-width: 46ch;
  text-wrap: balance;
}
/* A pullquote immediately under a heading does not need its own top
   margin on top of the heading's margin-bottom -- together they read as
   a stray blank line before the quote (Andy, 2026-09-17). */
.psection h3 + .pullquote { margin-top: 0; }

/* Subheads inside a prose section. The Practice page nests five
   approach subsections under one section opener, so they need a
   level below .psection h2 rather than a flat run of h2s. */
.psection h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--s1);
  max-width: 32ch;
}

/* Page contents strip — the three movements of the Practice page.
   Deliberately quieter than the rust pill row it replaced: three
   pills sitting directly under the lede read as a second call to
   action and crowded the hero (Andy, 2026-09-12). */
.pagenav {
  padding-block: var(--s2);
  border-bottom: 1px solid var(--border-soft);
  background: var(--paper-raised);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
}
.pagenavlabel {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--brass);
}
.pagenav a {
  font-family: var(--sans);
  font-size: var(--t-meta);
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.pagenav a:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* Section opener — names each movement of a long interior page.
   Without these the nine issue rows ran straight into the approach
   copy with no change of register (Andy, 2026-09-12). */
.secopen { padding-block: var(--band-tight) var(--s3); }
.seclabel {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--s1);
}
.secopen h2 { font-size: var(--t-h2); margin-bottom: var(--s2); max-width: 26ch; }
/* The Practice page's lead opener now carries the page's h1: the standalone
   .phero hero was removed 2026-09-14 (Andy), so an opener must be able to
   hold an h1 at display weight as well as an h2. */
.secopen h1 { font-size: var(--t-h1); margin-bottom: var(--s2); max-width: 26ch; }
.secopen p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body-muted);
  max-width: 62ch;
  margin: 0;
}
/* An opener already carries the section's air; the first prose block
   under it does not need a full band of its own on top. */
.secopen + .psection { padding-top: var(--s4); }

/* Practice page, first movement. The four "The firm" notes are one movement,
   not four full bands stacked down two screens. Above 900px they run as a
   two-by-two grid inside the page measure, which pulls the practice-area grid
   up into the first scroll (audit, Sep 14); below that they stack, tightened.
   The h3 and the seclabel carry the separation the band hairlines used to. */
.firmrun .psection { padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }

@media (min-width: 900px) {
  .firmrun {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: clamp(2rem, 3vw, 3.25rem);
    padding-inline: var(--pad-x);
    padding-block: clamp(2rem, 1.2rem + 2vw, 3.25rem);
    border-bottom: 1px solid var(--border-soft);
  }
  .firmrun .psection { padding: 0; border-bottom: none; }
  .firmrun .psection > * { max-width: none; }
  /* The first cell carries the "The firm" seclabel, which pushes its h3 down
     by the label's line plus its margin. Without a matching offset the second
     cell's heading sits ~32px high against its neighbour (Andy, Sep 15).
     Cells 3 and 4 share a row and neither has a label, so they need nothing. */
  .firmrun .psection:nth-child(2) { padding-top: calc(var(--t-label) * var(--lh-body) + var(--s1)); }
  /* An odd fifth note (added 2026-09-17) left a hole in the right column; the
     trailing odd cell runs full width at the prose measure instead (audit, Sep 18). */
  .firmrun .psection:nth-child(odd):last-child { grid-column: 1 / -1; }
  .firmrun .psection:nth-child(odd):last-child > * { max-width: 68ch; }
}

/* The issue-area slab. Deep paper, same as the homepage issue band,
   so the middle movement of the page reads as its own surface and
   the last issue row cannot be mistaken for the start of the
   approach copy. */
.issueblock {
  background: var(--paper-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Issue-area accordion. Native <details>: the copy sits in the HTML
   whether a row is open or shut, so crawlers and LLM fetchers see all
   nine either way; it works with JavaScript off; and the keyboard and
   screen-reader handling is the browser's rather than ours. the name attribute
   makes the set exclusive where it is supported and degrades to
   multiple-open where it is not. */
.issuelist { padding-block: 0 var(--band-tight); }
.issueitem { border-top: 1px solid var(--border); }
.issueitem:last-child { border-bottom: 1px solid var(--border); }
.issueitem summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding-block: var(--s2);
}
.issueitem summary::-webkit-details-marker { display: none; }
.issueitem summary::marker { content: ""; }
.issuename {
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: var(--lh-head);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.issuewho {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--label-muted);
  justify-self: end;
  text-align: right;
}
.issuesign {
  justify-self: end;
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--rust);
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.issuesign::before { content: "+"; }
.issueitem[open] .issuesign::before { content: "−"; }
.issueitem[open] .issuesign { background: var(--rust); color: var(--paper); border-color: var(--rust); }
.issueitem summary:hover .issuename { color: var(--rust); }
.issueitem summary:hover .issuesign { border-color: var(--rust); }
.issueitem[open] .issuename { color: var(--rust); }
.issuebody { padding-bottom: var(--s3); }
.issuebody p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body-muted);
  max-width: 68ch;
  margin: 0 0 var(--s2);
}
.issuebody .insightlinks { margin-bottom: 0; }
.issuebody .insightlinks a { color: var(--ink); }
.issuebody .insightlinks a:hover { color: var(--rust); }

/* Selected matters, and the label above the Insights cross-links. The
   "Representations of" line says who the clients were; the matters list
   says what the work produced. Both labels share one treatment so the two
   blocks read as siblings, and the list text matches `.issuebody p` exactly
   in size, colour and leading — a smaller, lighter list read as a different
   kind of content rather than as more of the same prose. The block sits
   inside .issuebody, which is outside .psection, so §7's prose-list rules
   never reach it and the global reset would clip real markers — hence the
   rule-dash drawn with ::before. The list carries its own padding-left so
   the dashes sit inside the text margin instead of hanging off it.
   Specificity: the .issuebody p rule is (0,1,1), so the label has to be
   scoped to beat it. */
.issuebody .matterlabel {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--label-muted);
  margin: var(--s3) 0 var(--s1);
  max-width: none;
}
.issuebody .matters {
  list-style: none;
  padding-left: var(--s3);
  margin: 0 0 var(--s3);
  max-width: 68ch;
}
.issuebody .matters li {
  position: relative;
  padding-left: var(--s3);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body-muted);
  margin-bottom: var(--s1);
}
.issuebody .matters li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: var(--s2);
  height: 1px;
  background: var(--brass-soft);
}
.issuebody .matters li:last-child { margin-bottom: 0; }

/* The Recent Insights label lives in the HTML but deliberately OUTSIDE the
   RELATEDINSIGHTS markers, so the Insights pipeline's generated block can
   never overwrite it. It is hidden unless an .insightlinks list actually
   follows it, which is what makes it self-managing: the five areas with no
   articles yet show nothing, and any area the pipeline later fills gets its
   label for free. Comments are not elements, so the marker between the two
   does not break the sibling selector. If :has() is unsupported the label
   simply stays hidden — the safe way to fail. */
.issuebody .insightslabel { display: none; }
.issuebody .insightslabel:has(+ ul.insightlinks) { display: block; }

/* Hub rows — practice hub, issues hub, 404 */
.hublist { border-bottom: 1px solid var(--border); }
.hubrow {
  display: block;
  padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: background .22s var(--ease);
  position: relative;
}
.hublist > .hubrow:first-child { border-top: none; }
.hubrow:hover { background: var(--paper-raised); }
.hubrow .pex { margin-bottom: var(--s0); }
.hubrow h3, .hubrow h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s0);
  transition: color .18s var(--ease);
}
.hubrow:hover h3, .hubrow:hover h2 { color: var(--rust); }
.hubrow p {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--body-muted);
  max-width: 64ch;
}
/* A quiet chevron that only resolves on hover. */
.hubrow::after {
  content: "→";
  position: absolute;
  right: var(--pad-x);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--rust);
  font-size: 1.25rem;
  opacity: 0;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.hubrow:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Counsel page */
.biosplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 360px);
  gap: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  padding-block: var(--band-tight);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.biosplit h1 { font-size: var(--t-h1); margin-bottom: var(--s3); max-width: 18ch; }
.biosplit p.body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body-muted);
  margin-bottom: var(--s2);
  max-width: 62ch;
}
.biosplit p.body:first-of-type {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
}
.biosplit a { color: var(--rust); text-decoration: none; border-bottom: 1px solid var(--brass-soft); }
.biosplit a:hover { border-bottom-color: var(--rust); }

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: var(--s2);
  overflow: hidden;
  position: relative;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portraitnote { color: var(--faint); letter-spacing: var(--track-micro); }

.bardetail,
.ldanote {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--label-muted);
  margin-top: var(--s3);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s2);
}
.ldanote { color: var(--faint); }
.bardetail br + * , .bardetail { letter-spacing: 0.04em; }
.ldanote a, .bardetail a { color: var(--label-muted); }

/* ---------- 8. Insights ------------------------------------ */

.articlelist { border-bottom: 1px solid var(--border); }
.article {
  display: block;
  padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  border-top: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: background .22s var(--ease);
}
.articlelist > .article:first-child { border-top: none; }
.article:hover { background: var(--paper-raised); }
.adate { color: var(--rust); margin-bottom: var(--s1); }
.article h3, .article h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s0);
  max-width: 34ch;
  transition: color .18s var(--ease);
}
.article:hover h3, .article:hover h2 { color: var(--rust); }
.article p {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--body-muted);
  max-width: 64ch;
}
/* Older commentary (beyond the 5 most recent) renders as a compact
   title+date row instead of a full card, so the Insights index doesn't
   grow unbounded as more commentary publishes (Andy, 2026-09-17). */
.article.article-compact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: var(--s2);
}
.article.article-compact h3 {
  font-size: var(--t-body);
  margin-bottom: 0;
  max-width: 48ch;
}
.article.article-compact .adate {
  margin-bottom: 0;
  font-size: var(--t-label);
  white-space: nowrap;
}

/* Article pages set their own, narrower `--maxw`, which `--pad-x` picks
   up automatically. The headline, byline, lede, body, sources and
   cross-links therefore all sit in one centred column at a comfortable
   measure, while the topbar and footer keep the full site width. */
/* `--pad-x` resolves its var() references where it is *declared*, so a
   child that only redefines `--maxw` would keep the site-wide padding.
   Both are redeclared together here. */
article {
  --maxw: 50rem;
  --pad-x: max(var(--gutter), calc((100% - 50rem) / 2));
}
article .phero > *,
article .psection > * { max-width: none; }
article .phero h1 { max-width: 20ch; }
article .psection > h2 { margin-top: var(--s2); max-width: 32ch; }
article .psection:first-of-type > p:first-child {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
}
/* Keep the hero watermark out in the margin the narrower column creates. */
article .pagearea[data-mark]::before {
  right: 0;
  top: -10%;
  width: min(24vw, 290px);
}

/* Sources + More Insights blocks */
.sources, .more-insights { background: var(--paper-deep); }
.sources h2, .more-insights h2 { font-size: var(--t-h3); }
.sources ul, .more-insights ul { list-style: none; padding-left: 0; }
.sources li, .more-insights li {
  padding-block: var(--s2);
  border-top: 1px solid var(--border-soft);
  margin-bottom: 0;
}
.sources li:last-child, .more-insights li:last-child { border-bottom: 1px solid var(--border-soft); }
.more-insights li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
}
.more-insights a { font-family: var(--serif); font-size: var(--t-lead); }
.more-insights .adate { margin-bottom: 0; white-space: nowrap; }

/* Insight cross-links on issue pages */
.insightlinks { list-style: none; margin: var(--s0) 0 var(--s3); padding-left: 0; max-width: 66ch; }
.insightlinks li {
  padding-block: var(--s2);
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: 0;
}
.insightlinks li:last-child { border-bottom: 1px solid var(--border-soft); }
.insightlinks a {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.4;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.insightlinks a:hover { color: var(--rust); }
.insightlinks .adate { margin-bottom: 0; white-space: nowrap; }

/* ---------- 9. Forms & buttons ----------------------------- */

.cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  padding: 1.125rem 2.125rem;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.cta:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(18, 17, 11, .5);
}
.cta:active { transform: translateY(0); box-shadow: none; }

.ctaoutline { background: transparent; color: var(--ink); border-color: var(--ink); }
.ctaoutline:hover { background: var(--rust); color: var(--paper); border-color: var(--rust); }

.ctarow {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s3);
}
.ctanote {
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--label-muted);
  max-width: 60ch;
  margin-top: var(--s3);
}

/* Contact block. The extra tail padding only applies when nothing
   follows it; on /contact/ a form section does, and the gap read as a
   hole in the page. */
.contactblock { padding-block: var(--band); border-bottom: 1px solid var(--border); }
.contactblock:last-of-type { padding-bottom: calc(var(--band) * 1.15); border-bottom: none; }
.contactblock .line { max-width: 26ch; }
.contactblock .addr {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  line-height: 2.2;
  color: var(--label-muted);
}
.contactblock .addr a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--border); }
.contactblock .addr a:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* Inquiry form */
.inquiryform {
  max-width: 34rem;
  margin-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.inquiryform label,
.signupform label { color: var(--label-muted); letter-spacing: 0.12em; }

.inquiryform textarea,
.inquiryform input[type="text"],
.inquiryform input[type="email"],
.signupform input[type="email"] {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.6;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: 2px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.inquiryform textarea:focus,
.inquiryform input:focus,
.signupform input[type="email"]:focus {
  outline: none;
  background: #fff;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px var(--rust-wash);
}
.inquiryform textarea { resize: vertical; min-height: 7rem; }
.inquiryform .hp-field { position: absolute; left: -9999px; }
.inquiryform.done > *:not(.formnote) { display: none; }
.inquiryform button.formsubmit { align-self: flex-start; }

.formnote { font-size: var(--t-meta); color: var(--label-muted); min-height: 1.2em; line-height: 1.6; }
.formnote a { color: var(--rust); }

.signupform { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.signupform label { flex: 0 0 auto; align-self: center; line-height: 1; }
.signupform input[type="email"] { flex: 1 1 14rem; min-width: 0; }
.signupform input[type="submit"] { border: 1.5px solid var(--ink); }

/* ---------- 10. Decorative layers -------------------------- */

/* Paper grain — a few percent of monochrome noise, far below
   anything that touches text contrast. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
}

.pagearea { position: relative; overflow: hidden; }
.pagearea > * { position: relative; z-index: 1; }

/* Roman-numeral watermark (practice hub) */
.pagearea[data-numeral]::after {
  content: attr(data-numeral);
  position: absolute;
  top: -8%;
  right: max(2vw, calc((100% - var(--maxw)) / 2));
  font-family: var(--serif);
  font-weight: 400;
  font-size: min(26vw, 340px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-soft);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Apollo-mark watermark (everything else) */
.pagearea[data-mark]::before {
  content: "";
  position: absolute;
  top: -14%;
  right: calc(-3vw + max(0px, (100% - var(--maxw)) / 2));
  width: min(40vw, 440px);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 124' fill='none' stroke='%23c9c1aa' stroke-width='5' stroke-linecap='square'%3E%3Ccircle cx='66' cy='62' r='46'/%3E%3Cpath d='M66 22 L44 96'/%3E%3Cpath d='M66 22 L88 96'/%3E%3Cpath d='M6 80 L126 80'/%3E%3Cpath d='M88 96 Q 80 86 46 80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .3;
  z-index: 0;
  pointer-events: none;
}

/* Apollo dome - the home page illustration (L2.15). Fixed to the viewport
   rather than parked in the hero, so it stays behind the page as it
   scrolls. Only index.html carries .domeart; interior pages keep the
   Apollo-mark watermark above. z-index -1 sits above the paper and its
   grain but behind every band, so the two --paper-deep sections (Issue
   Areas and the footer) pass over it on purpose. */
.domeart {
  position: fixed;
  bottom: 8vh;
  right: calc(3.5vw + max(0px, (100% - var(--maxw)) / 2));
  width: min(30vw, 430px);
  height: auto;
  color: var(--border);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.domeart .finial { stroke: var(--rust); opacity: .55; }

/* Insights index: the firm mark stays fixed to the viewport and "moves
   down the page" as you scroll, the same treatment as the homepage dome,
   instead of scrolling away with the hero like other interior pages
   (Andy, 2026-09-17). */
body.insights-index .pagearea[data-mark]::before {
  position: fixed;
  top: auto;
  bottom: 8vh;
  right: calc(3.5vw + max(0px, (100% - var(--maxw)) / 2));
  width: min(30vw, 430px);
  opacity: .5;
  z-index: -1;
}

/* Rust rule anchoring the lead section of an interior page */
.pagearea.leadsection {
  border-top: 3px solid var(--rust);
  background: linear-gradient(to bottom, rgba(240, 226, 214, .42), transparent 58%);
}

/* ---------- 11. Responsive --------------------------------- */

/* Tablet: the grid is already two-up at every width, so only the internal
   gutters tighten here. */
@media (max-width: 1040px) {
  .practices > .pcell { padding-inline: clamp(1.25rem, 2.4vw, 2rem); }
  .practices > .pcell:nth-child(2n + 1) { padding-inline-start: 0; }
  .practices > .pcell:nth-child(2n)     { padding-inline-end: 0; }
  .practices > .pcell.pcta              { padding-inline: 0; }
}

@media (max-width: 1100px) {
  .pagearea[data-numeral]::after,
  .pagearea[data-mark]::before,
  .domeart { display: none; }
}

@media (max-width: 900px) {
  .biosplit { grid-template-columns: 1fr; }
  .biosplit h1 { max-width: none; }
  .portrait { max-width: 320px; }
  .topbar .cityline { display: none; }
}

@media (max-width: 720px) {
  .practices { grid-template-columns: 1fr; }
  .practices > .pcell,
  .practices > .pcell:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding-inline: 0;
  }
  .practices > .pcell:last-child { border-bottom: none; }

  .hubrow::after { display: none; }
  .issueitem summary { grid-template-columns: minmax(0, 1fr) auto; }
  .issuename { grid-column: 1; grid-row: 1; }
  .issuesign { grid-column: 2; grid-row: 1; }
  .issuewho {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    letter-spacing: 0.1em;
  }
  .pagenav { gap: var(--s1) var(--s3); }
  .insightlinks li,
  .more-insights li { flex-direction: column; gap: var(--s0); }
  .insightlinks .adate,
  .more-insights .adate { white-space: normal; }
  .article.article-compact { flex-direction: column; align-items: flex-start; gap: var(--s0); }
  .dockethead { gap: var(--s0); }
  .signupform label { flex-basis: 100%; }
  .signupform input[type="email"] { flex-basis: 100%; }
  .signupform input[type="submit"] { width: 100%; }
}

/* Phone: the brand lockup keeps its new size, the nav drops to its
   own full-width row beneath it, and the type ramp bottoms out at
   comfortable reading sizes rather than shrinking further. */
@media (max-width: 560px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: var(--s2);
    align-items: center;
    padding-block: var(--s3) var(--s2);
  }
  .topbar .navlinks {
    order: 3;
    width: 100%;
    gap: 0.875rem 1.125rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    padding-top: var(--s1);
    border-top: 1px solid var(--border-soft);
  }
  .topbar .mark { width: 30px; height: 30px; }
  .wordmark { font-size: 1.375rem; }
  .cityline { display: none; }

  .hero h1 { max-width: none; letter-spacing: -0.02em; }
  .line { max-width: none; }
  .convo .line:last-of-type { max-width: none; }
  .phero h1, .biosplit h1 { max-width: none; }
  .psection h2 { max-width: none; }
  .cta { width: 100%; text-align: center; padding-inline: var(--s3); }
  .ctarow { gap: var(--s1); }
  .footnav { line-height: 1.9; }
  .footer { letter-spacing: 0.04em; font-size: 0.75rem; line-height: 1.95; }
  .tag { font-size: 0.8125rem; padding: 0.625rem 1rem; }
  .drow { grid-template-columns: 1fr; gap: var(--s0); }
  .dwhat, .dtag, .dwhy { grid-column: 1; }
  .dwhat { grid-row: 1; }
  .dtag { grid-row: 2; justify-self: start; }
}

/* ---------- 12. Accessibility & motion --------------------- */

/* Skip link. Off-screen until focused, then pinned inside the page gutter,
   so the first Tab from the address bar lands on something visible. */
.skiplink { position: absolute; left: -9999px; }
.skiplink:focus {
  left: var(--gutter);
  top: var(--s2);
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s1) var(--s2);
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cta:hover, a.tag:hover, .topbar a.brand:hover .mark { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .topbar, .footer, .ctarow, .signup, .more-insights { display: none; }
  .pagearea[data-numeral]::after, .pagearea[data-mark]::before, .domeart { display: none; }
}