/* Marcella · the public page (/marcella) — everything around the "Try her." demo.
 * Loads after demo.css. Page-specific demo refinements are scoped to .pg-demo-panel.
 * The original Main.dc.html and Mobile.dc.html artboards establish the palette;
 * the editorial refinement joins the conversation and measurements beneath the hero.
 */

:root {
  --pg-ground: #f6f2ea;
  --pg-surface: #fcfaf5;
  --pg-surface-2: #f9f6ef;
  --pg-band: #efe9dd;
  --pg-rule: #e3dccd;
  --pg-rule-2: #ebe5d8;
  --pg-line: #d9d1c2;
  --pg-chip: #f1ebdf;
  --pg-ink: #1d1a16;
  --pg-ink-2: #514a41;
  --pg-ink-3: #70665b;
  --pg-accent: #9e4f43;
  --pg-deep: #8f4a41;
  --pg-sage: #6f8a76;
  --pg-rose-soft: #f3e2dd;
  --pg-tag-line: #c9b6b1;
  --pg-btn-ink: #fbf7f0;
  --pg-dark: #141413;
  --pg-dark-line: #2e2d2b;

  --pg-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --pg-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --pg-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* 120px at the 1440 artboard; the 640px query pins it to Mobile.dc.html's 20px */
  --pg-pad: clamp(20px, 6vw, 120px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--pg-ground);
  color: var(--pg-ink);
  font-family: var(--pg-sans);
  overflow-x: hidden;
}
.pg-page a { text-decoration: none; color: inherit; }
.pg-page :focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
.pg-page h1, .pg-page h2, .pg-page h3, .pg-page p { margin: 0; }
.pg-page button { font-family: inherit; }
.pg-page svg { flex-shrink: 0; }

/* the 1200px content column */
.pg-wrap {
  width: min(1200px, calc(100% - 2 * var(--pg-pad)));
  margin-inline: auto;
}

/* ============================== nav ============================== */
.pg-nav { padding-top: 24px; }
.pg-nav-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pg-line);
}
.pg-wordmark { display: flex; align-items: baseline; gap: 10px; color: var(--pg-ink); }
.pg-wm-name {
  font-family: var(--pg-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pg-wm-sub { font-size: 13px; color: var(--pg-ink-3); letter-spacing: 0.04em; white-space: nowrap; }
.pg-nav-menu { display: contents; }
.pg-nav-links { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; font-size: 14px; color: var(--pg-ink-2); }
.pg-nav-links a { color: var(--pg-ink-2); white-space: nowrap; transition: color .18s ease; }
.pg-nav-links a:hover { color: var(--pg-ink); }
.pg-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-ink);
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}
.pg-nav-cta:hover { border-color: var(--pg-ink-3); background: var(--pg-surface); }
.pg-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-ink);
  cursor: pointer;
}
.pg-menu svg { stroke: currentColor; }

/* A plain-English opening: three principles, set as one editorial headline. */
.pg-opening {
  padding: clamp(40px, 6vw, 80px) 0 36px;
  background: linear-gradient(180deg, var(--pg-ground), #efe9dd);
  border-bottom: 1px solid var(--pg-line);
}
.pg-page .pg-opening-title {
  margin: 24px 0 28px;
  max-width: 1160px;
  font: 400 clamp(36px, 4.5vw, 66px)/1.1 var(--pg-serif);
  letter-spacing: -.025em;
}
.pg-opening-title > span { display: block; }
.pg-opening-title > span + span { margin-top: .14em; }
.pg-opening-title em { color: var(--pg-accent); font-weight: 400; }
.pg-page .pg-opening-sgi {
  margin: 0 0 14px;
  max-width: 850px;
  font: 500 clamp(26px, 2.5vw, 34px)/1.2 var(--pg-serif);
  letter-spacing: -.015em;
}
.pg-opening-lede {
  max-width: 850px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.65;
  color: var(--pg-ink-2);
  text-wrap: pretty;
}
.pg-opening-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.pg-opening-principles article { border-top: 1px solid var(--pg-line); padding-top: 18px; }
.pg-opening-number { font: 400 13px/1.5 var(--pg-mono); color: var(--pg-ink-3); }
.pg-page .pg-opening-principles h2 {
  margin: 12px 0;
  font: 500 25px/1.2 var(--pg-serif);
  letter-spacing: -.015em;
}
.pg-opening-principles article > p:last-child { font-size: 16px; line-height: 1.65; color: var(--pg-ink-2); }
.pg-opening-foot { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.pg-opening-foot .pg-btn { height: auto; min-height: 50px; padding-block: 12px; white-space: normal; text-align: center; }
.pg-opening-foot p { max-width: 390px; font-size: 14px; line-height: 1.6; color: var(--pg-ink-2); }
.pg-opening-disclosure { margin-top: 24px; max-width: 850px; font-size: 14px; line-height: 1.65; color: var(--pg-ink-2); }
.pg-opening-disclosure summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.pg-page .pg-opening-disclosure p { margin-top: 8px; }
@media (max-width: 760px) {
  .pg-opening-principles { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 30px; }
  .pg-opening-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pg-page .pg-opening-title { font-size: clamp(32px, 6.8vw, 48px); }
  .pg-opening-title > span + span { margin-top: .28em; }
}

/* ============================== hero + "Try her." (one grid) ============================== */
/* Rows 1–2 hold the headline, actions, and single instrument. The evaluation strip spans
   row 3; the conversation and readouts share their own panel in row 4. Keep the canvas's
   560 × 440 ratio in sync with hero.js. */
.pg-hero { padding: 64px 0 88px; }
.pg-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 0;
  align-items: center;
}
/* the copy and the actions share the left column; the figure spans both rows so the
   left column reads as one block centred against it (Main.dc.html: align-items center) */
.pg-hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pg-hero-actions { grid-column: 1; grid-row: 2; align-self: start; margin-top: 28px; }
.pg-hero-figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.pg-eyebrow {
  font-family: var(--pg-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-ink-3);
}
.pg-h1 {
  font-family: var(--pg-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.7vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--pg-ink);
  text-wrap: balance;
}
.pg-h1 em { font-weight: 400; color: var(--pg-accent); }
.pg-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--pg-ink-2);
  max-width: 560px;
  text-wrap: pretty;
}
.pg-btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border: 1px solid var(--pg-line);
  border-radius: 8px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--pg-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.pg-btn:hover { border-color: var(--pg-ink-3); background: var(--pg-surface); }
.pg-btn svg { stroke: currentColor; }
.pg-btn .pg-ic-pause { display: none; }
.pg-btn.playing .pg-ic-play { display: none; }
.pg-btn.playing .pg-ic-pause { display: inline; }
.pg-page .pg-btn-primary {
  padding: 0 24px;
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: var(--pg-btn-ink);
}
.pg-page .pg-btn-primary:hover { background: var(--pg-deep); border-color: var(--pg-deep); color: var(--pg-btn-ink); }
.pg-proof {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0;
  padding: 24px 0;
  border-block: 1px solid var(--pg-line);
}
.pg-proof > div { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pg-proof > div + div { border-left: 1px solid var(--pg-line); padding-left: 24px; }
.pg-proof strong { font-family: var(--pg-serif); font-size: 36px; font-weight: 400; line-height: 1.1; white-space: nowrap; }
.pg-proof span { font-size: 14px; line-height: 1.45; color: var(--pg-ink-2); max-width: 180px; }
.pg-instrument-head { display: flex; justify-content: space-between; gap: 16px; width: 100%; max-width: 560px; font-family: var(--pg-mono); font-size: 12px; color: var(--pg-ink-3); }
.pg-instrument-head span:first-child { color: var(--pg-ink); }

/* the hero instrument: the design's 560×440 illustration, fluid.
   ACCEPTED DEPARTURE from Main.dc.html (decided 2026-09-09). The artboard drew this as an open
   illustration on the page ground (#f6f2ea, no frame: an #f1ebdf ellipse with a dashed #b8655a
   ring) and printed five labels on it — ““Explain holonomy simply.””, “0.618 · inside · answered”,
   ““Recommend a good restaurant.””, “0.883 · outside · declined” and “the border · 0.80”.
   The page mounts the live renderer here instead (hero.js) and this is the page's ONE
   instrument: the demo's readouts and chips (row 3 of this grid) drive and read it through
   window.MarcellaHero rather than mounting a second stage. The renderer fixes its stage to
   #141413 in constellation.js (background, fog, edge blend and label ink are all keyed to it);
   it is shared with the stand-alone demo page and not edited for this page, hence the dark
   card, its 1px #2e2d2b border and 18px radius (16px at 390). The renderer prints its own
   readout (“#holonomy · 0.618 · inside”) and question banner; the artboard's strings are
   carried by the canvas's accessible description (hero.js) and by the readouts card, where
   each question's receipt is shown in full. Revisit if constellation.js ever grows a
   light-stage option. */
.pg-hero-instrument {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: auto;
  background: var(--pg-dark);
  border: 1px solid var(--pg-dark-line);
  border-radius: 12px;
  box-shadow: 0 16px 36px -24px rgba(29, 26, 22, .5);
  overflow: hidden;
}
#heroMount { position: relative; width: 100%; aspect-ratio: 560 / 440; }
#heroMount canvas { display: block; touch-action: none; }
.pg-map-response { position: absolute; z-index: 2; bottom: 12px; left: 12px; right: 12px; padding: 14px 16px; border: 1px solid #514b41; border-radius: 10px; background: rgba(20, 20, 19, .94); color: #f6f2ea; }
.pg-map-response-label { display: block; margin-bottom: 8px; font-family: var(--pg-mono); font-size: 12px; color: #d6b4a3; }
.pg-map-response p { min-height: 3em; max-height: 6em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #70665b transparent; font-size: 15px; line-height: 1.5; padding-right: 8px; overscroll-behavior: contain; }
.pg-map-response .typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.15em; background: #d6b4a3; animation: blink 1s steps(2, start) infinite; }
/* the explanation under the instrument: what the picture is, what happens in it, and a mono
   line saying which measurements are the engine's own August receipts. The copy lives in
   marcella.html only (no #heroExplain, so hero.js never rewrites it) */
.pg-hero-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--pg-ink-3);
  text-align: left;
  max-width: 560px;
  line-height: 1.5;
  text-wrap: pretty;
}
.pg-hero-caption .pg-hero-legend {
  margin-top: 2px;
  font-family: var(--pg-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pg-ink-3);
  overflow-wrap: anywhere;
}

/* ============================== "Try her." — connected conversation and readouts ============================== */
.pg-demo-panel {
  --muted: var(--pg-ink-3);
  --rose: var(--pg-accent);
  --sage: #486650;
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--pg-line);
  border-radius: 16px;
  background: var(--pg-surface);
  overflow: clip;
}
.pg-try-conv,
.pg-try-readouts {
  grid-row: 1;
  align-self: stretch;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.pg-try-conv {
  grid-column: 1;
  gap: 22px;
  padding: 32px;
  background: var(--pg-surface);
}
.pg-try-readouts {
  grid-column: 2;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  gap: 20px;
  padding: 32px;
  border-left: 1px solid var(--pg-line);
  background: var(--pg-surface-2);
}
.pg-try-head { display: flex; flex-direction: column; gap: 10px; }
.pg-try-head .lede { max-width: none; }
.pg-try-head .tag { padding-bottom: 0; overflow-wrap: anywhere; }
.pg-demo-panel .chip { min-height: 88px; height: auto; padding-block: 12px; border-radius: 8px; }
.pg-demo-panel .thread { min-height: 280px; padding-top: 20px; border-top: 1px solid var(--pg-rule); }
.pg-demo-panel .ask { margin-top: auto; }
.pg-demo-panel .inst-title { font-size: 28px; font-weight: 400; }
.pg-demo-panel .inst-head { padding-bottom: 16px; border-bottom: 1px solid var(--pg-line); }
.pg-demo-panel .status { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.pg-demo-panel .readout .label, .pg-demo-panel .phrase, .pg-demo-panel .fam { font-size: 14px; }
.pg-demo-panel .fam { min-height: 36px; }
.pg-demo-panel .num { font-size: 32px; letter-spacing: -.04em; }
.pg-demo-panel .scale { padding-top: 8px; }
.pg-demo-panel .receipt, .pg-demo-panel .foot, .pg-demo-panel .ticks,
.pg-demo-panel .legend-label { font-size: 12px; }
.pg-demo-panel .receipt { overflow-wrap: anywhere; }
/* the tour's status pill ("● tour · #curvature-attention · inside", nowrap in demo.css) is
   longer than the pick wording it was sized for: between 900 and ~1200px the card is too
   narrow for it beside the title, and demo.css's no-wrap head would crush the title to three
   lines and then push the pill past the card's edge. Wrapping the head instead drops the
   pill to its own line when it does not fit and leaves the title whole. */
.pg-try-readouts .inst-head { flex-wrap: wrap; row-gap: 4px; }
/* the chips, and beside them (or under them, once they wrap) the small text button that
   hands the stage back to the rotation after a pick; demo.js shows it on the first pick */
.pg-try-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pg-tour-resume {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pg-deep);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pg-tag-line);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.pg-tour-resume:hover { color: var(--pg-accent); text-decoration-color: currentColor; }
/* the rows box keeps the height of three neighbour rows, so a decline (one dashed note)
   and an answer (three rows) leave the card the same height while the tour turns */
.pg-try-readouts .rows { min-height: 126px; }
/* the families legend and the hover line read the instrument above; a hairline sets them
   off from the readouts as the card's tail */
.pg-try-tail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--pg-rule-2);
}
/* the hover line was styled for the dark caption strip in demo.css (.caption .hover); on the
   light card it takes the page's ink */
.pg-try-hover {
  font-size: 12px;
  line-height: 1.55;
  color: var(--pg-ink-3);
  min-height: 1.55em;
  overflow-wrap: anywhere;
}
.pg-try-hover b { color: var(--pg-ink); font-weight: 500; }

/* ============================== shared section grammar ============================== */
/* copy variants: Mobile.dc.html carries shorter wording at 390 (the lede, the how-she-works
   lede and columns, the paper link, about, the footer brand). .pg-wide-only holds the
   Main.dc.html wording, .pg-stack-only the mobile one; the 640px query swaps them. */
.pg-stack-only { display: none; }
.pg-h2 {
  font-family: var(--pg-serif);
  font-weight: 400;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pg-ink);
}
.pg-sec-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pg-sec-lede { font-size: 17px; color: var(--pg-ink-2); line-height: 1.55; }
.pg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--pg-deep);
}
.pg-links a { color: var(--pg-deep); transition: color .18s ease; }
.pg-links a:hover { color: var(--pg-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================== how she works ============================== */
.pg-how { padding: 72px 0 96px; border-top: 1px solid var(--pg-rule); }
.pg-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 40px;
}
.pg-how-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pg-how-col > svg { width: 28px; height: 28px; }
.pg-h3 {
  font-family: var(--pg-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--pg-ink);
}
.pg-how-col p { font-size: 16px; line-height: 1.6; color: var(--pg-ink-2); text-wrap: pretty; }
.pg-how-col .pg-mono-line {
  font-family: var(--pg-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pg-ink-3);
  overflow-wrap: anywhere;
}

/* ============================== why it matters (the band) ============================== */
.pg-why {
  background: var(--pg-dark);
  padding: 88px 0;
  color: #f6f2ea;
  --pg-ink: #f6f2ea;
  --pg-ink-2: #c8c0b4;
  --pg-deep: #dda69b;
  --pg-tag-line: #655047;
  --pg-line: #49423b;
}
.pg-why-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}
.pg-why-copy { display: flex; flex-direction: column; gap: 22px; }
.pg-why-title {
  font-family: var(--pg-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.95vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.pg-why-text { font-size: 18px; line-height: 1.6; color: var(--pg-ink-2); max-width: 620px; text-wrap: pretty; }
.pg-paper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pg-deep);
}
.pg-why .pg-paper-subtitle { margin-top: -12px; font-family: var(--pg-serif); font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; color: #f6f2ea; }
.pg-tag {
  font-family: var(--pg-mono);
  font-size: 11px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--pg-tag-line);
  color: var(--pg-deep);
  white-space: nowrap;
}
.pg-why-nums {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 40px;
  border-left: 1px solid var(--pg-line);
}
.pg-num { display: flex; flex-direction: column; gap: 6px; }
.pg-num-big {
  font-family: var(--pg-serif);
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pg-ink);
}
.pg-num-sub { font-size: 14.5px; color: var(--pg-ink-2); line-height: 1.5; }

/* ============================== for the technical reader ============================== */
.pg-eng { padding: 88px 0 96px; }
.pg-eng-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}
.pg-pipeline { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* the diagram keeps its 660×250 drawing; below ~520px it scrolls in its own box */
.pg-pipeline-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-right: 32px; }
/* overflow visible: the "+ citations" label runs a little past the 660 viewBox */
.pg-pipeline-svg svg { display: block; width: 100%; max-width: 660px; min-width: 520px; height: auto; overflow: visible; }
.pg-pipeline p { font-size: 15px; line-height: 1.6; color: var(--pg-ink-2); max-width: 620px; text-wrap: pretty; }
.pg-receipts { display: flex; flex-direction: column; border-top: 1px solid var(--pg-rule); min-width: 0; }
.pg-receipt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pg-rule);
}
.pg-receipt-h { font-size: 15px; font-weight: 600; color: var(--pg-ink); }
.pg-receipt-p { font-size: 14px; color: var(--pg-ink-2); line-height: 1.5; }
.pg-receipts .pg-links { padding-top: 18px; }

/* ============================== for the technical reader · strip + figures (2026-09-09) ==============================
   The section's second build: a pipeline board with a travelling question, and the four receipts
   as figure cards drawn from receipts_charts.json. Scoped to the new markup in marcella.html
   (.pg-pipe*, .pg-station*, .pg-eng-text, .pg-figs, .pg-fig*, .pg-term*); the older
   .pg-eng-grid / .pg-pipeline / .pg-receipts rules above are no longer referenced by the page
   and are left as they were. Everything up to the next "about" banner belongs to this block. */
.pg-eng {
  --pg-sage-soft: #dfe8df;   /* demo.css --sage-soft: the answered ring, one code with the scorecard */
  --pg-term-ok: #9fbfa8;     /* the terminal's readout colours on the dark stage */
  --pg-term-recall: #e0b95f;
  --pg-term-dim: #a39a8d;
  --pg-pipe-gap: 24px;
  --pg-pipe-drop: 41px; /* card bottom → pill centre: 6px node + 16px branch + half of the 38px pill */
  /* station centres as fractions of the rail: five equal cards c and four gaps g on a rail of
     width W give c = (W − 4g)/5, so the k-th centre is (2k − 1)c/2 + (k − 1)g */
  --pg-pipe-q: calc(10% - 0.4 * var(--pg-pipe-gap));
  --pg-pipe-g: calc(30% - 0.2 * var(--pg-pipe-gap));
  --pg-pipe-r: 50%;
  --pg-pipe-m: calc(70% + 0.2 * var(--pg-pipe-gap));
  --pg-pipe-a: calc(90% + 0.4 * var(--pg-pipe-gap));
}

/* ---- the board: five stations standing on one rail, the decline lane hanging under the gate ---- */
.pg-pipe {
  margin-top: 40px;
  padding: 32px 28px 30px;
  background: var(--pg-surface);
  border: 1px solid var(--pg-rule);
  border-radius: 22px;
  overflow: hidden; /* the rail's translate would otherwise widen the page; clip keeps it a paint */
  overflow: clip;
}
.pg-pipe-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--pg-pipe-gap);
  row-gap: 0;
}
.pg-station {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 18px 22px;
  background: var(--pg-surface-2);
  border: 1px solid var(--pg-rule);
  border-radius: 16px;
}
/* the five stations are placed, not auto-flowed, so the rail can share row 1 without pushing them */
.pg-station-question  { grid-column: 1; grid-row: 1; }
.pg-station-gate      { grid-column: 2; grid-row: 1; }
.pg-station-retrieval { grid-column: 3; grid-row: 1; }
.pg-station-mouth     { grid-column: 4; grid-row: 1; }
.pg-station-answer    { grid-column: 5; grid-row: 1; }
/* the rail: each card after the first draws the segment across the gap to its left, on the
   cards' bottom edge; the chevron (rotated) is the arrowhead in the middle of that segment */
.pg-station + .pg-station::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--pg-pipe-gap) - 1px);
  bottom: -1px;
  width: calc(var(--pg-pipe-gap) + 2px);
  border-top: 1.5px solid var(--pg-line);
}
.pg-station-chev { display: none; position: absolute; color: var(--pg-ink-3); }
.pg-station + .pg-station .pg-station-chev {
  display: block;
  left: calc(-1 * var(--pg-pipe-gap) / 2 - 10px);
  bottom: -10.5px;
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}
/* the node: a ring on the rail under each card's centre */
.pg-station::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pg-surface);
  border: 1.5px solid var(--pg-line);
  transform: translateX(-50%);
}
.pg-station-n {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--pg-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pg-ink-3);
}
.pg-station-ic { display: block; width: 24px; height: 24px; color: var(--pg-accent); margin-bottom: 6px; }
.pg-station-ic svg { display: block; width: 24px; height: 24px; }
.pg-station-name {
  font-family: var(--pg-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pg-ink);
}
.pg-station-role { font-size: 14px; line-height: 1.4; color: var(--pg-ink-2); text-wrap: pretty; }
.pg-station-tag {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--pg-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--pg-ink-3);
  overflow-wrap: anywhere;
}
/* the decline lane: grid row 2, under the gate (column 2) */
.pg-pipe-decline {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  min-width: 0;
}
.pg-pipe-drop {
  position: relative;
  width: 0;
  height: 16px;
  border-left: 1.5px dashed var(--pg-accent);
}
.pg-pipe-drop::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--pg-accent);
  border-bottom: 1.5px solid var(--pg-accent);
  transform: rotate(45deg);
}
.pg-pipe-pill {
  position: relative;
  z-index: 3; /* above the dot, so the declined question lands behind the pill as it lights */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--pg-rose-soft);
  border: 1px solid #e5c9c3;
  color: var(--pg-deep);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pg-pipe-pill-arrow { color: var(--pg-accent); font-weight: 400; }
.pg-pipe-pill-b { font-family: var(--pg-mono); font-size: 11px; font-weight: 400; }

/* ---- the light-up: a ring laid over each card (and the pill) whose only animated property is
   opacity; its ::after is the lit node over the card's own. Colours: the question card in ink,
   the gate and the pill in rose, the through stations in sage — the scorecard's "answered". ---- */
.pg-station-glow, .pg-pipe-pill-glow {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border: 1px solid var(--pg-ink-3);
  border-radius: 17px;
  box-shadow: 0 0 0 4px var(--pg-band);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.pg-station-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pg-surface);
  border: 1.5px solid;
  border-color: inherit;
  box-shadow: inherit;
  transform: translateX(-50%);
}
.pg-station-question  .pg-station-glow { animation: pg-lit-q 9s ease-in-out infinite; }
.pg-station-gate      .pg-station-glow { border-color: var(--pg-accent); box-shadow: 0 0 0 4px var(--pg-rose-soft); animation: pg-lit-gate 9s ease-in-out infinite; }
.pg-station-retrieval .pg-station-glow { border-color: var(--pg-sage); box-shadow: 0 0 0 4px var(--pg-sage-soft); animation: pg-lit-ret 9s ease-in-out infinite; }
.pg-station-mouth     .pg-station-glow { border-color: var(--pg-sage); box-shadow: 0 0 0 4px var(--pg-sage-soft); animation: pg-lit-mouth 9s ease-in-out infinite; }
.pg-station-answer    .pg-station-glow { border-color: var(--pg-sage); box-shadow: 0 0 0 4px var(--pg-sage-soft); animation: pg-lit-ans 9s ease-in-out infinite; }
.pg-pipe-pill-glow { border-radius: 999px; border-color: var(--pg-accent); box-shadow: 0 0 0 4px rgba(184, 101, 90, 0.16); animation: pg-lit-pill 9s ease-in-out infinite; }
@keyframes pg-lit-q     { 0%, 4%, 100% { opacity: 1; } 8%, 53% { opacity: 0; } 56%, 59% { opacity: 1; } 63%, 96% { opacity: 0; } }
@keyframes pg-lit-gate  { 0%, 11%, 23%, 67%, 100% { opacity: 0; } 13%, 20% { opacity: 1; } 69%, 78% { opacity: 1; } 82% { opacity: 0; } }
@keyframes pg-lit-ret   { 0%, 26%, 35%, 100% { opacity: 0; } 28%, 32% { opacity: 1; } }
@keyframes pg-lit-mouth { 0%, 36%, 45%, 100% { opacity: 0; } 38%, 42% { opacity: 1; } }
@keyframes pg-lit-ans   { 0%, 46%, 56%, 100% { opacity: 0; } 48%, 53% { opacity: 1; } }
@keyframes pg-lit-pill  { 0%, 83%, 93%, 100% { opacity: 0; } 85%, 90% { opacity: 1; } }

/* ---- the travelling question: a pseudo on a rail. The rail is a zero-height grid item that
   spans row 1 (the five cards) and sits on their bottom edge, so it is W wide; it moves by
   transform only, to the station centres in --pg-pipe-q … --pg-pipe-a. One 9 s loop, two passes:
   first through (sage), then declined (rose, down the lane). The stations light on the same clock. ---- */
.pg-pipe-rail {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 0;
  margin-bottom: 1px;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  animation: pg-rail 9s ease-in-out infinite;
}
.pg-pipe-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pg-ink-3);
  box-shadow: 0 0 0 2px var(--pg-surface);
  transform: translate(-50%, -50%);
  animation: pg-dot 9s ease-in-out infinite;
}
@keyframes pg-rail {
  0%       { transform: translate(var(--pg-pipe-q), 0); }
  14%, 20% { transform: translate(var(--pg-pipe-g), 0); }
  30%      { transform: translate(var(--pg-pipe-r), 0); }
  40%      { transform: translate(var(--pg-pipe-m), 0); }
  50%, 53% { transform: translate(var(--pg-pipe-a), 0); }
  55%      { transform: translate(var(--pg-pipe-q), 0); }
  70%, 76% { transform: translate(var(--pg-pipe-g), 0); }
  86%, 90% { transform: translate(var(--pg-pipe-g), var(--pg-pipe-drop)); }
  100%     { transform: translate(var(--pg-pipe-q), 0); }
}
@keyframes pg-dot {
  0%       { opacity: 0; background-color: var(--pg-ink-3); }
  3%       { opacity: 1; }
  14%      { background-color: var(--pg-ink-3); }
  20%, 50% { opacity: 1; background-color: var(--pg-sage); }
  53%      { opacity: 0; background-color: var(--pg-sage); }
  55%      { opacity: 0; background-color: var(--pg-ink-3); }
  58%      { opacity: 1; }
  70%      { background-color: var(--pg-ink-3); }
  76%, 86% { opacity: 1; background-color: var(--pg-accent); }
  90%      { opacity: 0; }
  100%     { opacity: 0; background-color: var(--pg-ink-3); }
}

/* the paragraph under the strip: one measure, as in the design file */
.pg-eng .pg-eng-text {
  margin-top: 28px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pg-ink-2);
  text-wrap: pretty;
}

/* ---- the receipts: four figure cards ---- */
.pg-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.pg-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px 24px 20px;
  background: var(--pg-surface);
  border: 1px solid var(--pg-rule);
  border-radius: 22px;
}
.pg-fig-head { display: flex; flex-direction: column; gap: 4px; }
.pg-fig-h { font-size: 15px; font-weight: 600; color: var(--pg-ink); }
.pg-fig-p { font-size: 14px; line-height: 1.5; color: var(--pg-ink-2); text-wrap: pretty; }
.pg-fig-plot { margin-top: 8px; min-width: 0; }
.pg-fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-fig-svg text {
  font-family: var(--pg-mono);
  font-size: 11px;
  fill: var(--pg-ink-2);
  font-variant-numeric: tabular-nums;
}
.pg-fig-svg .pg-fig-ink { fill: var(--pg-ink); }
.pg-fig-svg .pg-fig-ink2 { fill: var(--pg-ink-2); }
.pg-fig-svg .pg-fig-deep { fill: var(--pg-deep); }
.pg-fig-svg .pg-fig-legend text { fill: var(--pg-ink-2); }
.pg-fig-note {
  font-family: var(--pg-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--pg-ink-2);
  overflow-wrap: anywhere;
}
.pg-fig-src {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--pg-rule-2);
  font-family: var(--pg-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--pg-ink-3);
  overflow-wrap: anywhere;
}
/* the terminal: the dark stage, the receipt's three rows in a labelled <pre> — the conversation
   in the left column wraps under itself, the instrument readout keeps the right column */
.pg-term {
  margin-top: 8px;
  background: var(--pg-dark);
  border: 1px solid var(--pg-dark-line);
  border-radius: 14px;
  color: #fbf7f0;
  font-family: var(--pg-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow: hidden;
}
.pg-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pg-dark-line);
}
.pg-term-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e2d2b; }
.pg-term-name { margin-left: 8px; font-size: 11px; letter-spacing: 0.04em; color: var(--pg-ink-3); }
.pg-term-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 14px 16px 12px;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pg-term-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: baseline; }
.pg-term-say { color: #fbf7f0; }
.pg-term-read { justify-self: end; color: var(--pg-term-dim); white-space: nowrap; }
.pg-term-gate { color: var(--pg-term-ok); font-weight: 500; }
.pg-term-recall { color: var(--pg-term-recall); font-weight: 500; }
/* the cursor line: decoration after the receipt's six lines, hidden from readers, blinking on opacity */
.pg-term-prompt { margin-top: 4px; }
.pg-term-prompt .pg-term-say { color: var(--pg-term-dim); }
.pg-term-prompt .pg-term-say::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.45em;
  vertical-align: -0.2em;
  background: var(--pg-term-dim);
  animation: pg-caret 1.1s linear infinite;
}
@keyframes pg-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.pg-eng-links { margin-top: 28px; }

/* ---- the strip between 901 and 1150: five columns hold, the cards tighten ---- */
@media (min-width: 901px) and (max-width: 1150px) {
  .pg-station { padding: 16px 14px 20px; }
  .pg-station-n { right: 12px; }
  .pg-station-name { font-size: 20px; }
  .pg-station-tag { font-size: 11px; }
}

/* ---- the receipts wrap. Chart text is set in viewBox units and scales with the plot (on screen
   ≈ font-size × plot width / 480), so each band picks the size that lands between 11 and 13px.
   Two columns hold to 1101; under that a card sets its caption beside the plot so the chart keeps
   its size; under 901 the card stacks, with the plot capped at 560. ---- */
@media (max-width: 1250px) {
  .pg-fig-svg text { font-size: 12.5px; }
}
@media (max-width: 1100px) {
  .pg-figs { grid-template-columns: minmax(0, 1fr); }
  .pg-fig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: 28px;
    row-gap: 10px;
    align-items: center;
  }
  .pg-fig-head { grid-column: 1; grid-row: 1; }
  .pg-fig-plot, .pg-term { grid-column: 2; grid-row: 1; margin-top: 0; }
  .pg-fig-note, .pg-fig-src { grid-column: 1 / -1; }
  .pg-fig-svg text { font-size: 11px; }
}
@media (max-width: 1000px) {
  .pg-fig-svg text { font-size: 12px; }
}

/* ---- the strip wraps: two columns under 900, one under 560; the rail, the dot and the light-up
   go, the chevrons come (single column only) ---- */
@media (max-width: 900px) {
  .pg-pipe { margin-top: 32px; padding: 22px 20px 20px; }
  .pg-pipe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pg-station { grid-column: auto; grid-row: auto; padding: 16px 16px 18px; }
  .pg-station + .pg-station::before, .pg-station::after { display: none; }
  .pg-station + .pg-station .pg-station-chev { display: none; }
  .pg-pipe-rail, .pg-station-glow, .pg-pipe-pill-glow { display: none; }
  .pg-pipe-decline { grid-column: 2; grid-row: 2; padding-top: 0; }
  .pg-pipe-drop { height: 18px; }
  .pg-pipe-pill {
    height: auto;
    min-height: 38px;
    max-width: 100%;
    padding: 7px 14px;
    white-space: normal;
    flex-wrap: wrap;
    text-align: center;
  }
  .pg-fig { display: flex; align-items: stretch; }
  .pg-fig-plot { margin-top: 8px; max-width: 560px; }
  .pg-term { margin-top: 8px; }
  .pg-fig-svg text { font-size: 11px; }
}
/* the pill no longer fits on one line: the two labels stack, the branch supplies the arrow */
@media (max-width: 840px) {
  .pg-pipe-pill { flex-direction: column; gap: 1px; padding: 6px 14px; }
  .pg-pipe-pill-arrow { display: none; }
}
@media (max-width: 640px) {
  .pg-pipe { margin-top: 28px; border-radius: 18px; }
  .pg-eng .pg-eng-text { margin-top: 22px; font-size: 14.5px; }
  .pg-figs { gap: 16px; margin-top: 28px; }
  .pg-fig { padding: 20px 18px 16px; border-radius: 18px; }
  .pg-term { font-size: 12px; }
  .pg-term-body { padding: 12px 14px 10px; }
  .pg-eng-links { margin-top: 22px; }
}
@media (max-width: 600px) {
  .pg-fig-svg text { font-size: 12px; }
}
@media (max-width: 560px) {
  .pg-pipe-row { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .pg-station + .pg-station .pg-station-chev {
    display: block;
    left: 50%;
    top: -27px;
    bottom: auto;
    transform: translateX(-50%);
  }
  /* the decline lane is a tray under the gate card — the gate's other exit, an elbow into the
     pill — so the chevron beneath still reads gate → retrieval */
  .pg-station-gate {
    padding-bottom: 8px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .pg-pipe-decline {
    grid-column: 1;
    grid-row: 3;
    margin-top: -30px;
    align-items: flex-start;
    padding: 4px 16px 16px 40px;
    background: var(--pg-surface-2);
    border: 1px solid var(--pg-rule);
    border-top: 0;
    border-radius: 0 0 16px 16px;
  }
  .pg-pipe-drop { display: none; }
  .pg-pipe-pill { align-items: flex-start; text-align: left; }
  .pg-pipe-pill::before {
    content: "";
    position: absolute;
    right: calc(100% + 7px);
    bottom: 50%;
    width: 14px;
    height: 30px;
    border-left: 1.5px dashed var(--pg-accent);
    border-bottom: 1.5px dashed var(--pg-accent);
    border-bottom-left-radius: 8px;
  }
  .pg-pipe-pill::after {
    content: "";
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid var(--pg-accent);
    border-bottom: 1.5px solid var(--pg-accent);
    transform: rotate(-45deg);
  }
  .pg-fig-svg text { font-size: 14px; }
  .pg-term-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .pg-term-read { justify-self: start; padding-left: 2ch; white-space: normal; }
}
@media (max-width: 480px) {
  .pg-fig-svg text { font-size: 16px; }
  .pg-fig-svg circle { r: 6px; }
  .pg-fig-svg .pg-fig-tail { display: none; } /* the two end-value tags; the note under the plot states both */
}
@media (prefers-reduced-motion: reduce) {
  .pg-pipe-rail, .pg-pipe-rail::before, .pg-station .pg-station-glow, .pg-pipe-pill-glow, .pg-term-prompt .pg-term-say::after { animation: none; }
  .pg-pipe-rail { transform: translate(var(--pg-pipe-g), 0); }
  .pg-pipe-rail::before { opacity: 1; background-color: var(--pg-ink-3); }
  .pg-station-gate .pg-station-glow { opacity: 1; }
}

/* ============================== about ============================== */
.pg-about { padding: 72px 0 96px; border-top: 1px solid var(--pg-rule); }
.pg-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: start;
}
.pg-about .pg-h2 { line-height: 1.12; max-width: 520px; text-wrap: pretty; }
.pg-about-body { display: flex; flex-direction: column; gap: 18px; }
.pg-about-body p { font-size: 17px; line-height: 1.6; color: var(--pg-ink-2); text-wrap: pretty; }

/* A photographic lineage: the archival portraits recede, the book keeps its color. */
.pg-about.pg-founder { padding: 88px 0 72px; background: var(--pg-band); border-top: 1px solid var(--pg-line); }
.pg-founder-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 52px; }
.pg-founder .pg-founder-head .pg-h2 { max-width: 900px; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.025em; }
.pg-founder-head .pg-h2 em { color: var(--pg-accent); font-weight: 400; }
.pg-founder-deck { font-size: 19px; line-height: 1.6; color: var(--pg-ink-2); }
.pg-founder-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.pg-founder-gallery { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: end; }
.pg-founder-gallery figure { margin: 0; min-width: 0; }
.pg-founder-photo { position: relative; overflow: hidden; background: #d8d0c2; aspect-ratio: 4 / 5; }
.pg-founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(.82); opacity: .68; }
.pg-founder-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, var(--pg-band)); pointer-events: none; }
.pg-founder-dorothy { padding-top: 38px; }
.pg-founder-book { padding-left: 4px; }
.pg-founder-cover { display: block; box-shadow: 0 16px 30px -15px #30221880; transition: transform .2s ease; }
.pg-founder-cover:hover { transform: translateY(-4px); }
.pg-founder-cover img { display: block; width: 100%; height: auto; }
.pg-founder-gallery figcaption { padding-top: 18px; font-size: 13px; line-height: 1.4; color: var(--pg-ink); min-height: 62px; }
.pg-founder-gallery figcaption > span { display: block; font-size: 11px; line-height: 1.6; color: var(--pg-ink-3); margin-top: 5px; }
.pg-founder-gallery figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-page .pg-founder-photo-credit { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--pg-ink-3); }
.pg-founder-photo-credit a { text-decoration: underline; text-underline-offset: 2px; }
.pg-founder-story { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pg-founder-story .pg-h3 { font-size: 34px; }
.pg-founder-story > p:not(.pg-eyebrow) { font-size: 16px; line-height: 1.7; color: var(--pg-ink-2); }
.pg-founder-story .pg-founder-closing { padding-top: 6px; }
.pg-founder-story .pg-links { margin-top: 8px; }
.pg-founder-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 52px 0 0; padding-top: 30px; border-top: 1px solid #cfc4b2; }
.pg-founder-stats > div { display: flex; flex-direction: column-reverse; gap: 10px; }
.pg-founder-stats > div + div { padding-left: 32px; border-left: 1px solid #cfc4b2; }
.pg-founder-stats dt { font-size: 14px; line-height: 1.5; color: var(--pg-ink-2); }
.pg-founder-stats dd { margin: 0; font-family: var(--pg-serif); font-size: 56px; line-height: 1; color: var(--pg-deep); }
.pg-founder-stats dd span { font-size: .68em; }
@media (max-width: 1050px) {
  .pg-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pg-founder-gallery { max-width: 680px; }
  .pg-founder-story { max-width: 720px; }
}
@media (max-width: 640px) {
  .pg-about.pg-founder { padding: 48px 0; }
  .pg-founder-head { margin-bottom: 32px; gap: 16px; }
  .pg-founder-deck { font-size: 17px; }
  .pg-founder-gallery { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-founder-book { grid-column: 1 / -1; justify-self: center; width: min(78%, 280px); padding: 12px 0 0; }
  .pg-founder-dorothy { padding-top: 0; }
  .pg-founder-gallery figcaption { min-height: 0; padding-top: 12px; font-size: 14px; }
  .pg-founder-gallery figcaption > span { font-size: 12px; }
  .pg-founder-story .pg-h3 { font-size: 30px; }
  .pg-founder-stats { gap: 12px; margin-top: 36px; padding-top: 24px; }
  .pg-founder-stats > div + div { padding-left: 12px; }
  .pg-founder-stats dd { font-size: 44px; }
  .pg-founder-stats dt { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-founder-cover { transition: none; }
  .pg-founder-cover:hover { transform: none; }
}

/* The closing argument uses a quiet sage tint, distinct from the biography. */
.pg-future { padding: 80px 0; background: #e9efe8; border-top: 1px solid #c9d3c5; --pg-accent: #3c634b; --pg-deep: #35563f; --pg-tag-line: #a7b9a6; }
.pg-future-head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.pg-future-head .pg-h2 { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.08; }
.pg-future-head .pg-sec-lede { max-width: 640px; font-size: 19px; }
.pg-savings { margin: 44px 0 48px; padding: 32px 0 0; border-top: 1px solid #b6c8b3; border-bottom: 1px solid #b6c8b3; }
.pg-savings-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 810px; }
.pg-savings-badge { display: inline-block; padding: 6px 11px; background: #35563f; border-radius: 4px; color: #f5f7f0; font: 500 12px/1.5 var(--pg-mono); }
.pg-savings-intro h3 { font: 400 clamp(25px, 2.7vw, 36px)/1.2 var(--pg-serif); color: var(--pg-deep); }
.pg-savings-intro p { font-size: 14px; line-height: 1.6; color: var(--pg-ink-2); }
.pg-savings-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 32px; padding: 0; gap: 28px; }
.pg-savings-numbers > div { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pg-savings-numbers > div + div { padding-left: 28px; border-left: 1px solid #b6c8b3; }
.pg-savings-numbers dd { order: -1; margin: 0; font: 400 clamp(76px, 9.4vw, 132px)/.95 var(--pg-serif); letter-spacing: -.065em; color: #35563f; white-space: nowrap; }
.pg-savings-numbers dd span { font-size: .72em; letter-spacing: -.035em; }
.pg-savings-numbers dt { max-width: 240px; font-size: 18px; line-height: 1.4; font-weight: 500; color: #35563f; }
.pg-savings-numbers dt > span { display: block; margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.65; color: var(--pg-ink-2); }
.pg-savings-math { border-top: 1px solid #b6c8b3; }
.pg-savings-math summary { cursor: pointer; padding: 18px 0; font-size: 14px; line-height: 1.5; color: #35563f; font-weight: 500; }
.pg-savings-math > div { display: flex; flex-direction: column; gap: 14px; max-width: 860px; padding-bottom: 24px; font-size: 14px; line-height: 1.75; color: var(--pg-ink-2); overflow-wrap: anywhere; }
.pg-savings-math strong { font-weight: 600; color: #35563f; }
@media (max-width: 640px) {
  .pg-savings { margin: 32px 0; padding-top: 24px; }
  .pg-savings-numbers { grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 28px 0; }
  .pg-savings-numbers > div + div { padding-left: 0; padding-top: 28px; border-left: 0; border-top: 1px solid #c4d2bf; }
  .pg-savings-numbers dd { font-size: clamp(88px, 25vw, 120px); }
  .pg-savings-numbers dt { max-width: none; }
}
.pg-architecture-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin-top: 36px; border: 1px solid #bfccba; border-radius: 12px; overflow: hidden; }
.pg-architecture-pair > div { padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.pg-architecture-pair h3 { font-size: 16px; line-height: 1.5; font-weight: 600; }
.pg-architecture-pair p { font-size: 15px; line-height: 1.7; color: var(--pg-ink-2); }
.pg-architecture-marcella { background: #f6f8f1; border-left: 1px solid #bfccba; }
.pg-responsibilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.pg-responsibilities li { border-left: 2px solid #92ad92; padding-left: 10px; }
.pg-responsibilities strong { display: block; font-weight: 500; font-size: 17px; color: var(--pg-deep); }
.pg-responsibilities span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--pg-ink-2); }
.pg-page .pg-future-context { margin-top: 18px; max-width: 920px; font-size: 13px; line-height: 1.7; color: var(--pg-ink-3); }
.pg-future-context a, .pg-future-evidence a { color: var(--pg-deep); text-decoration: underline; text-decoration-color: #a7b9a6; text-underline-offset: 3px; }
.pg-future-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.pg-future-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid #ccd7c7; border-radius: 12px; background: #f5f7f0; }
.pg-future-label { font-family: var(--pg-mono); color: var(--pg-deep); font-size: 12px; line-height: 1.5; }
.pg-future-card .pg-h3 { font-size: 29px; }
.pg-future-card > p { font-size: 16px; line-height: 1.7; color: var(--pg-ink-2); }
.pg-future-card > .pg-future-evidence { margin-top: auto; padding-top: 18px; border-top: 1px solid #d3ddcd; font-size: 13px; }
.pg-future-evidence strong { font-weight: 600; color: var(--pg-deep); }
.pg-future-evidence a { display: inline; }
.pg-future-close { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 40px; }
.pg-future-close p { font-family: var(--pg-serif); font-size: 28px; line-height: 1.25; max-width: 610px; }
.pg-future-close em { color: var(--pg-deep); }
.pg-future-close .pg-btn { flex-shrink: 0; border-color: #a7b9a6; }
@media (max-width: 900px) {
  .pg-architecture-pair { grid-template-columns: minmax(0, 1fr); }
  .pg-architecture-marcella { border-left: 0; border-top: 1px solid #bfccba; }
  .pg-future-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-future-close { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .pg-future { padding: 48px 0; }
  .pg-future-head .pg-sec-lede { font-size: 17px; }
  .pg-architecture-pair > div { padding: 22px 20px; }
  .pg-responsibilities { gap: 8px; }
  .pg-future-card { padding: 24px 20px; }
  .pg-future-card .pg-h3 { font-size: 26px; }
  .pg-future-grid { gap: 16px; margin-top: 28px; }
  .pg-future-close p { font-size: 25px; }
}

/* ============================== footer ============================== */
.pg-footer {
  border-top: 1px solid var(--pg-rule);
  padding: 28px 0 40px;
  font-size: 13.5px;
  color: var(--pg-ink-3);
}
.pg-footer-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.pg-footer-brand { display: flex; align-items: baseline; gap: 10px; }
.pg-footer-name { font-family: var(--pg-serif); font-size: 18px; color: var(--pg-ink); }
.pg-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pg-footer-links a { color: var(--pg-ink-3); transition: color .18s ease; }
.pg-footer-links a:hover { color: var(--pg-ink); }

/* The database primer and mathematical walkthrough share a reading rhythm. */
.pg-gigi { padding: 88px 0; background: var(--pg-surface-2); border-bottom: 1px solid var(--pg-rule); }
.pg-gigi .pg-sec-head { max-width: 760px; }
.pg-page .pg-gigi-priority { margin-top: 24px; max-width: 780px; padding-left: 20px; border-left: 2px solid var(--pg-accent); color: var(--pg-ink-2); font-size: 14px; line-height: 1.65; }
.pg-gigi-priority strong { font-weight: 500; color: var(--pg-ink); }
.pg-bundle-intro, .pg-gigi-operations { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin: 48px 0 32px; }
.pg-explain { min-width: 0; display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.7; color: var(--pg-ink-2); }
.pg-explain strong { font-weight: 600; color: var(--pg-ink); }
.pg-explain a, .pg-db-table a { color: var(--pg-accent); text-decoration: underline; text-decoration-color: var(--pg-tag-line); text-underline-offset: 3px; }
.pg-explain a:hover, .pg-db-table a:hover { text-decoration-color: currentColor; }
.pg-explain code { font-family: var(--pg-mono); font-size: .84em; color: var(--pg-deep); }
.pg-bundle-terms { display: grid; gap: 18px; margin: 4px 0 0; }
.pg-bundle-terms dt { font-family: var(--pg-mono); color: var(--pg-accent); font-size: 13px; margin-bottom: 4px; }
.pg-bundle-terms dd { margin: 0; }
.pg-bundle-figure { margin: 0; padding: 28px 20px 24px; background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: 16px; }
.pg-bundle-figure svg { display: block; width: 100%; height: auto; }
.pg-bundle-figure figcaption { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--pg-ink-3); }
.pg-math-detail { border-block: 1px solid var(--pg-line); }
.pg-math-detail summary { padding: 18px 0; cursor: pointer; color: var(--pg-ink); font-size: 16px; line-height: 1.5; font-weight: 500; }
.pg-math-detail summary::marker { color: var(--pg-accent); }
.pg-math-detail[open] > .pg-explain { padding: 4px 0 24px; }
.pg-gigi > .pg-wrap > .pg-math-detail > .pg-explain { max-width: 800px; }
.pg-gigi-operations { align-items: stretch; margin: 48px 0 56px; }
.pg-gigi-example { display: flex; flex-direction: column; justify-content: center; gap: 14px; background: var(--pg-band); padding: 32px; border-radius: 12px; }
.pg-gigi-example > p:not(.pg-eyebrow):not(.pg-gigi-example-note) { font-family: var(--pg-serif); font-size: 27px; line-height: 1.25; }
.pg-gigi-example > span { color: var(--pg-accent); font-size: 24px; }
.pg-gigi-example .pg-gigi-example-note { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--pg-ink-2); }
.pg-page .pg-comparison-intro { margin: 12px 0 24px; color: var(--pg-ink-2); font-size: 16px; line-height: 1.6; }
.pg-db-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--pg-line); border-radius: 12px; background: var(--pg-surface); }
.pg-db-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.6; }
.pg-db-table caption { caption-side: bottom; text-align: left; padding: 14px 20px; font-size: 12px; font-family: var(--pg-mono); color: var(--pg-ink-3); }
.pg-db-table th, .pg-db-table td { padding: 22px 20px; vertical-align: top; border-bottom: 1px solid var(--pg-line); }
.pg-db-table thead th { background: var(--pg-band); font-size: 12px; font-weight: 500; font-family: var(--pg-mono); color: var(--pg-ink-2); }
.pg-db-table th[scope="row"] { width: 18%; color: var(--pg-ink); font-weight: 500; }
.pg-db-table td { width: 27%; color: var(--pg-ink-2); }
.pg-db-table td:nth-child(3) { width: 23%; }
.pg-db-table td:last-child { width: 32%; }
.pg-db-table small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; }
.pg-db-table a { display: block; margin-top: 12px; font-size: 13px; }
.pg-db-gigi { background: #f3e8df; }
.pg-db-gigi th[scope="row"] { color: var(--pg-deep); box-shadow: inset 3px 0 var(--pg-accent); }
.pg-page .pg-comparison-note { max-width: 850px; font-size: 14px; line-height: 1.7; color: var(--pg-ink-3); margin: 20px 0 28px; }
.pg-math-walkthrough { margin-top: 44px; }
.pg-math-step { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.75fr); gap: 56px; padding: 44px 0; border-top: 1px solid var(--pg-line); scroll-margin-top: 24px; }
.pg-math-step > header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pg-math-step > header .pg-h3 { max-width: 300px; font-size: 30px; }
.pg-equation { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 20px 24px; background: var(--pg-band); border-left: 2px solid var(--pg-accent); color: var(--pg-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.85; }
.pg-equation > span { max-width: 100%; overflow-wrap: anywhere; }
.pg-equation sub, .pg-equation sup { font-size: .7em; }
.pg-math-note { padding: 18px 22px; border: 1px solid var(--pg-line); border-radius: 8px; font-size: 14px; line-height: 1.7; }
.pg-explain .pg-reading { font-size: 13px; line-height: 1.7; }
.pg-receipts-head { max-width: 760px; border-top: 1px solid var(--pg-line); padding-top: 36px; margin-top: 12px; }
@media (max-width: 900px) {
  .pg-bundle-intro, .pg-gigi-operations { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pg-bundle-figure { max-width: 600px; width: 100%; box-sizing: border-box; }
  .pg-math-step { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pg-math-step > header .pg-h3 { max-width: 600px; }
}
@media (max-width: 640px) {
  .pg-gigi { padding: 44px 0; }
  .pg-bundle-intro { margin-top: 32px; }
  .pg-gigi-operations { margin: 32px 0; }
  .pg-gigi-example { padding: 24px; }
  .pg-bundle-figure { padding: 18px 12px; }
  .pg-bundle-figure figcaption { padding-inline: 8px; }
  .pg-math-walkthrough { margin-top: 28px; }
  .pg-math-step { padding: 32px 0; }
  .pg-math-step > header .pg-h3 { font-size: 27px; }
  .pg-equation { padding: 16px; gap: 10px; }
  .pg-math-note { padding: 16px; }
}

/* Navigation folds before its links compete with the wordmark. */
@media (max-width: 1240px) {
  .pg-nav-in { flex-wrap: wrap; }
  .pg-menu { display: inline-flex; }
  .pg-nav-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0 4px;
    border-top: 1px solid var(--pg-rule);
    margin-top: 16px;
  }
  .pg-nav.open .pg-nav-menu { display: flex; }
  .pg-nav-links { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 16px; }
}

/* ============================== stacking (tablet and below) ============================== */
@media (max-width: 900px) {
  /* one column: headline → instrument → buttons → conversation → readouts — the cards in
     their DOM order, so the tab order (chips, resume, play, then the legend's family
     buttons) runs down the page as it reads and "Try her." with its chips comes before
     the readouts that say "pick a question". The instrument and both cards fill the
     column, so the stack reads as one width */
  .pg-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-hero-copy, .pg-hero-figure, .pg-hero-actions { grid-column: 1; align-self: auto; }
  .pg-hero-copy { grid-row: 1; }
  .pg-hero-figure { grid-row: 2; margin-top: 32px; align-items: flex-start; }
  .pg-hero-instrument { max-width: none; }
  .pg-hero-actions { grid-row: 3; margin-top: 32px; }
  .pg-hero-caption { text-align: left; }
  .pg-instrument-head { max-width: none; }
  .pg-proof { grid-row: 4; }
  .pg-proof > div { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pg-demo-panel { grid-row: 5; grid-template-columns: minmax(0, 1fr); }
  .pg-try-conv { grid-column: 1; grid-row: 1; }
  .pg-try-readouts { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--pg-line); }

  .pg-how-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pg-why-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pg-why-nums { padding-left: 24px; }
  .pg-eng-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pg-about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ============================== the 390 layout (Mobile.dc.html) ============================== */
@media (max-width: 640px) {
  /* 20px sides (a 350px column at 390) */
  :root { --pg-pad: 20px; }
  .pg-wide-only { display: none; }
  .pg-stack-only { display: inline; }

  .pg-nav { padding-top: 22px; }
  .pg-wm-name { font-size: 19px; }
  .pg-wm-sub { font-size: 12px; letter-spacing: 0; }
  .pg-wordmark { gap: 8px; }

  .pg-hero { padding: 36px 0 48px; }
  .pg-hero-copy { gap: 18px; }
  .pg-eyebrow { font-size: 12px; }
  .pg-h1 { font-size: 40px; line-height: 1.08; }
  .pg-lede { font-size: 17px; }
  .pg-hero-figure { margin-top: 24px; gap: 12px; }
  .pg-hero-instrument { border-radius: 16px; }
  .pg-map-response { position: relative; inset: auto; margin: 0; border: 0; border-top: 1px solid #514b41; border-radius: 0; }
  .pg-hero-actions { margin-top: 24px; }
  .pg-btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pg-btn { width: 100%; }
  .pg-proof { gap: 12px; margin: 32px 0; padding: 20px 0; }
  .pg-proof > div + div { padding-left: 12px; }
  .pg-proof strong { font-size: clamp(24px, 6vw, 32px); }
  .pg-proof span { font-size: 12px; }

  /* One panel with a horizontal divider on narrow screens. */
  .pg-try-readouts, .pg-try-conv { padding: 24px 20px; gap: 20px; }
  .pg-try-chips { gap: 8px 14px; }
  /* the tour's status ("● tour · #slug · inside") no longer fits beside the title at 350:
     it goes under it rather than breaking the title */
  .pg-try-readouts .inst-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .pg-how { padding: 40px 0 48px; }
  .pg-h2 { font-size: 30px; }
  .pg-sec-head { gap: 8px; }
  .pg-sec-lede { font-size: 16px; line-height: 1.5; }
  .pg-how-grid { gap: 28px; margin-top: 28px; }
  .pg-how-col { gap: 12px; }
  .pg-how-col > svg { width: 26px; height: 26px; }
  .pg-h3 { font-size: 23px; }
  .pg-how-col p { font-size: 16px; }

  .pg-why { padding: 44px 0; }
  .pg-why-copy { gap: 16px; }
  .pg-why-title { font-size: 28px; line-height: 1.18; }
  .pg-why-text { font-size: 16px; }
  .pg-paper { font-size: 14.5px; gap: 8px; }
  .pg-why-nums { gap: 20px; padding-left: 18px; }
  .pg-num-big { font-size: 36px; }

  .pg-eng { padding: 44px 0 48px; }
  .pg-eng-grid { margin-top: 28px; gap: 32px; }

  .pg-about { padding: 44px 0 48px; }
  .pg-about .pg-h2 { font-size: 28px; }
  .pg-about-body { gap: 14px; }
  .pg-about-body p { font-size: 16px; }

  .pg-footer { padding: 24px 0 36px; font-size: 13px; }
  .pg-footer-in { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .pg-footer-links { gap: 8px 18px; }
}

@media (max-width: 360px) {
  .pg-proof { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pg-proof > div { flex-direction: row; align-items: center; gap: 16px; }
  .pg-proof > div + div { padding-left: 0; border-left: 0; }
  .pg-proof strong { min-width: 84px; }
  .pg-proof span { font-size: 14px; }
  .pg-instrument-head { flex-wrap: wrap; gap: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pg-map-response .typing::after { animation: none; }
  .pg-nav-links a, .pg-nav-cta, .pg-btn, .pg-links a, .pg-footer-links a, .pg-tour-resume { transition: none; }
}