/* ==========================================================================
   Self-hosted fonts — no third-party requests, nothing sent to Google
   ========================================================================== */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/newsreader-v26-latin-200.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader-v26-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-v26-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader-v26-latin-300italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-v26-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-v25-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/bitter-v42-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/bitter-v42-latin-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-v17-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-v16-latin-regular.woff2") format("woff2");
}

/* ==========================================================================
   Speak the Unspoken — Design System
   Editorial, restrained, typographic. Tokens from Brand Bible Appendix A.
   ========================================================================== */

:root {
  /* Brand tokens */
  --ink: #0F0F0D;
  --warm-off: #F5F2EC;
  --paper: #FAF8F4;
  --stone: #C5C8C7;   /* neutral, was warm beige #C8C3B8 */

  /* Ice — the platform colour */
  --ice: #D3DEE0;
  --ice-deep: #8FA9AE;
  --deepink: #16242F;
  --hair: rgba(15, 15, 13, 0.085);   /* every secondary rule on the site */
  --mid: #7A7672;
  --deep: #2A2925;
  --accent: #8FA9AE;
  --accent-light: #DCE6E8;

  /* Semantic (light mode) */
  --bg: var(--paper);
  --bg-alt: var(--warm-off);
  --bg-inverse: var(--ink);
  --text: var(--deep);
  --text-strong: var(--ink);
  --text-quiet: var(--mid);
  --rule: var(--stone);
  --rule-soft: color-mix(in srgb, var(--stone) 45%, transparent);
  --link: var(--ink);
  --btn-bg: var(--ink);
  --btn-text: var(--warm-off);
  --logo-accent: #5F7C84;   /* "Unspoken." in the wordmark */

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SF Mono", Menlo, monospace;

  /* Scale */
  --measure: 62ch;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

[data-theme="dark"] {
  --bg: #080807;            /* matched to the photographs' own black */
  --bg-alt: #101010;
  --bg-inverse: var(--warm-off);
  --text: #D4D8D8;
  --text-strong: var(--warm-off);
  --text-quiet: #8A8F90;
  --rule: #2E2E2B;
  --rule-soft: #1D1D1B;
  --stone: #3A3A37;
  --hair: rgba(211, 222, 224, 0.11);
  --link: var(--warm-off);
  --btn-bg: var(--warm-off);
  --btn-text: var(--ink);
  --logo-accent: var(--ice);   /* accent lifts one step on dark */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }  /* no sideways scroll, ever */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; display: block; }

::selection { background: var(--accent-light); color: var(--ink); }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--warm-off); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text-strong);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 300; }
h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 300; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.4em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.45;
  color: var(--text-strong);
}

.quiet { color: var(--text-quiet); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-quiet);
  display: block;
  margin-bottom: var(--space-3);
}

.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.35;
  color: var(--text-strong);
  border: 0;
  margin: var(--space-4) 0;
  padding: 0;
  max-width: 30ch;
}

.pullquote--wide { /* spread variant: spans the full prose column, stays left-aligned with the text */
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: none;
  margin: var(--space-5) 0;
}

.brand-name { font-style: normal; } /* the name is never italicised inside sentences */

/* --------------------------------------------------------------------------
   Masthead / Navigation
   -------------------------------------------------------------------------- */

.site-header {
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--rule-soft);
}

/* Wordmark (final): Bitter 500 — "Speak the" roman + "Unspoken" italic, plain ink.
   The logo uses its own cut (Bitter); site text stays Newsreader/DM Sans.
   One line in headers; stacked in footer/masthead contexts. */
.masthead {
  font-family: "Bitter", Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1;
  white-space: nowrap;
}
.masthead em { font-style: italic; font-weight: 500; }

/* Wordmark used as a section heading (e.g. the Newsletter block, mirroring Substack) */
.wordmark-heading {
  font-family: "Bitter", Georgia, serif !important;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.wordmark-heading em { font-style: italic; font-weight: 500; }

.site-nav {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  flex-wrap: wrap;
  margin-left: auto;   /* pushes nav right, next to the theme toggle */
}

.site-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.site-nav a:hover, .site-nav a[aria-current="page"] {
  border-bottom-color: var(--text-strong);
  color: var(--text-strong);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.2s ease;
  flex: none;
  align-self: center;
}
.theme-toggle:hover { border-color: var(--text-quiet); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Mobile nav */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-strong);
    cursor: pointer;
    padding: 0.5rem;
    order: 2;
    margin-left: auto;   /* pushes hamburger + toggle to the right, together */
  }
  .theme-toggle { order: 3; }
  .site-nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: var(--space-3);
  }
  .site-nav.open { display: flex; }
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-6) var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.section:last-of-type { border-bottom: none; }

.section--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.section--inverse {
  background: var(--bg-inverse);
  color: var(--warm-off);
}
.section--inverse h1, .section--inverse h2, .section--inverse h3,
.section--inverse .lede, .section--inverse .pullquote { color: var(--warm-off); }
.section--inverse .eyebrow { color: color-mix(in srgb, var(--warm-off) 55%, transparent); }
.section--inverse p { color: color-mix(in srgb, var(--warm-off) 82%, transparent); }
.section--inverse a { color: var(--warm-off); }
[data-theme="dark"] .section--inverse {
  background: var(--warm-off);
}
[data-theme="dark"] .section--inverse h1, [data-theme="dark"] .section--inverse h2,
[data-theme="dark"] .section--inverse h3, [data-theme="dark"] .section--inverse .lede,
[data-theme="dark"] .section--inverse .pullquote { color: var(--ink); }
[data-theme="dark"] .section--inverse p { color: var(--deep); }
[data-theme="dark"] .section--inverse .eyebrow { color: var(--mid); }
[data-theme="dark"] .section--inverse a { color: var(--ink); }

/* Asymmetric editorial grid: label column + content column */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--space-4) var(--space-5);
  max-width: 1200px;
}

.grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }

@media (max-width: 820px) {
  .grid, .grid--flip { grid-template-columns: 1fr; }
}

.grid-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-top: 0.5rem;
}
.grid-label a {
  color: inherit;                      /* stays quiet grey, not link-ink */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.grid-label a:hover {
  color: var(--text-strong);
  border-bottom-color: var(--text-quiet);
}
/* Inverse (dark) sections: hover must brighten, not sink into the ink */
.section--inverse .grid-label a:hover {
  color: var(--warm-off);
  border-bottom-color: color-mix(in srgb, var(--warm-off) 50%, transparent);
}
[data-theme="dark"] .section--inverse .grid-label a:hover {
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0.9rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-align: center;
}
.btn:hover { opacity: 0.85; }

.btn--ghost {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--rule);
}
.btn--ghost:hover { border-color: var(--text-strong); opacity: 1; }

.section--inverse .btn { background: var(--warm-off); color: var(--ink); border-color: var(--warm-off); }
.section--inverse .btn--ghost { background: transparent; color: var(--warm-off); border-color: color-mix(in srgb, var(--warm-off) 40%, transparent); }
.section--inverse .btn--ghost:hover { border-color: var(--warm-off); }
[data-theme="dark"] .section--inverse .btn { background: var(--ink); color: var(--warm-off); border-color: var(--ink); }
[data-theme="dark"] .section--inverse .btn--ghost { color: var(--ink); border-color: var(--stone); }
[data-theme="dark"] .section--inverse .btn--ghost:hover { border-color: var(--ink); }

.cta-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* Inline newsletter signup (dark Newsletter section, mirrors Substack) */
.newsletter-form {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  max-width: 560px;
  margin-top: var(--space-4);
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  padding: 0.65rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: inherit;
}
.newsletter-form input::placeholder { color: var(--text-quiet); }
.newsletter-form input:focus { outline: none; border-bottom-color: currentColor; }
.section--inverse .newsletter-form input {
  color: var(--warm-off);
  border-bottom-color: color-mix(in srgb, var(--warm-off) 35%, transparent);
}
.section--inverse .newsletter-form input::placeholder { color: color-mix(in srgb, var(--warm-off) 45%, transparent); }
.newsletter-more { margin-top: var(--space-3); }
.newsletter-more a {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 2px;
}
.newsletter-more a:hover { border-bottom-color: currentColor; }
.section--inverse .microcopy { color: color-mix(in srgb, var(--warm-off) 55%, transparent); }
@media (max-width: 640px) {
  .newsletter-form { flex-direction: column; gap: 1rem; }
  .newsletter-form .btn { width: 100%; text-align: center; }
}

.microcopy {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-quiet);
  margin-top: var(--space-2);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(4rem, 12vh, 9rem) var(--gutter) var(--space-6);
  border-bottom: 1px solid var(--rule-soft);
}

.hero-inner { max-width: 1200px; }

.hero h1 {
  font-size: clamp(3.2rem, 7.5vw, 6.75rem);
  max-width: 20ch;               /* was 12ch, which forced three lines */
  margin-bottom: var(--space-4);
}

.hero-body {
  max-width: 46ch;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);   /* hero runs one step larger — deliberate */
  line-height: 1.6;
}
.hero-body .lede {
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);   /* hero lede: one step above standard lede */
  margin-bottom: 0.9em;
}

.hero-body .turn { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Editorial photography
   -------------------------------------------------------------------------- */

/* Hero with portrait: asymmetric text / image split */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  max-width: 1200px;
  align-items: center;
}
.hero-figure { margin: 0; }
.hero-figure img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  object-position: top;   /* if cropping ever occurs, it takes from the bottom — never the head */
  filter: grayscale(1) contrast(1.02);
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: none; }    /* photo first on mobile */
  .hero-figure img {
    width: 100%;
    height: auto;        /* full image, natural ratio, never cropped */
    max-height: none;
    object-fit: unset;
  }
  .photo-band img {
    height: auto;        /* full-width band shows the whole photo */
    max-height: none;
  }
}

/* Full-width photo band between sections */
.photo-band {
  padding: 0;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 0;
}
.photo-band img {
  width: 100%;
  height: clamp(320px, 58vh, 620px);
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1);
}

/* Portrait inside a text section (About) */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: start;
}
.media-split figure { margin: 0; }
.media-split img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
}
@media (max-width: 820px) {
  .media-split { grid-template-columns: 1fr; }
  .media-split figure { max-width: 420px; }
}

/* Photo-led split (Audit section): image left, text right */
.split-photo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: start;
  max-width: 1200px;
}
/* mirrored: text left, photograph right */
.split-photo--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-photo--flip > figure { order: 2; }

.split-photo figure { margin: 0; }
.split-photo img {
  width: 100%;
  height: auto;
  filter: grayscale(1);
}
@media (max-width: 820px) {
  .split-photo,
  .split-photo--flip { grid-template-columns: 1fr; }
  .split-photo--flip > figure { order: 0; }        /* photo leads on mobile */
  .split-photo img { width: 100%; height: auto; }  /* full image, never cropped */
}

/* Quote band: image with overlaid line */
.quote-band {
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--rule-soft);
  overflow: hidden;
}
.quote-band img {
  width: 100%;
  height: clamp(520px, 92vh, 960px);
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(1);
  display: block;
}
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,15,13,0.05), rgba(15,15,13,0.45));
}
.quote-band blockquote {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--gutter);
  text-align: center;
}
.quote-band blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.3;
  color: #FDFCFA;
  max-width: 24ch;
  margin: 0;
  text-shadow: 0 1px 24px rgba(15,15,13,0.35);
}
.quote-band--full img { height: auto; }  /* the photo uncropped, full width, natural height */
.quote-band--light::after { background: none; }  /* light photo: no dark scrim */
.quote-band--light blockquote p { color: var(--ink); text-shadow: none; }

/* Discreet typographic quotation marks on every pulled quote */
.pullquote::before, .quote-band blockquote p::before { content: "\201C"; }
.pullquote::after, .quote-band blockquote p::after { content: "\201D"; }

@media (max-width: 640px) {
  .quote-band img { height: clamp(480px, 80vh, 720px); object-position: center 12%; }
  .quote-band--full img { height: auto; }
  .quote-band blockquote p { max-width: 22ch; }
}

/* --------------------------------------------------------------------------
   Framework — editorial grid (giant letters, hairline cells)
   -------------------------------------------------------------------------- */

.fw-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-4) var(--space-5);
  align-items: start;
  max-width: 1200px;
  margin-bottom: var(--space-5);
}
.fw-head h2 { margin-bottom: 0.4em; max-width: 22ch; }
.fw-head h2 em { font-style: italic; }
.fw-sub {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--accent);
  margin: 0;
}
/* Intro column mirrors the Diagnostic: serif lede line + sans body */
.fw-intro .lede { margin-bottom: var(--space-3); }
@media (max-width: 820px) {
  .fw-head { grid-template-columns: 1fr; align-items: start; }
}

.fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  border-top: 1px solid var(--rule-soft);
}
.fw-cell {
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.75rem, 3vw, 3rem) 0;
}
.fw-cell:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
.fw-cell:nth-child(n + 4) { border-top: 1px solid var(--rule-soft); }

/* Full-bleed edges: align the outer letters with the page gutter */
.fw-cell:nth-child(3n + 1) { padding-left: var(--gutter); }
.fw-cell:nth-child(3n) { padding-right: var(--gutter); }

/* Hover: subtle warm highlight + a slight zoom on the letter */
.fw-cell { transition: background-color 0.4s ease; }
.fw-cell:hover { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }
.fw-cell:hover .fw-letter { transform: scale(1.09); }

.fw-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.fw-letter {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 6.5vw, 6rem);
  line-height: 0.9;
  color: var(--accent);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: left center;
}
.fw-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-quiet);
  padding-top: 0.4rem;
}
[data-theme="dark"] .fw-letter,
[data-theme="dark"] .fw-sub { color: var(--ice-deep); }  /* palette accent, dark-mode variant */
.fw-cell h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin-bottom: 0.6rem;
}
.fw-cell p { font-size: 1rem; color: var(--text-quiet); margin-bottom: 0; }

@media (max-width: 820px) {
  .fw-grid { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .fw-cell,
  .fw-cell:not(:nth-child(3n + 1)),
  .fw-cell:nth-child(3n + 1),
  .fw-cell:nth-child(3n) {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule-soft);
  }
  .fw-cell:first-child { border-top: none; }
  .fw-letter { font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   Offers — three hairline columns (Work section)
   -------------------------------------------------------------------------- */

.offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin-top: var(--space-5);
}
.offer { padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) 0 0; }
.offer:not(:first-child) {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
.offer h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 0.7rem; }
.offer p { font-size: 1rem; color: var(--text-quiet); margin-bottom: 0; }

@media (max-width: 820px) {
  .offers { grid-template-columns: 1fr; }
  .offer,
  .offer:not(:first-child) {
    border-left: none;
    padding: 1.5rem 0;
    border-top: 1px solid var(--rule-soft);
  }
  .offer:first-child { border-top: none; padding-top: 0; }
}

/* Offers — three hairline columns (Work section) */
.offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin-top: var(--space-5);
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(1.75rem, 3vw, 3rem);
}
.offers .offer { padding-right: clamp(0.9rem, 1.5vw, 1.25rem); }
.offers .offer:not(:first-child) {
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(0.9rem, 1.5vw, 1.25rem);
}
.offers h3 { font-size: clamp(1.3rem, 1.6vw, 1.55rem); margin-bottom: 0.6rem; }
.offers p { font-size: 1rem; color: var(--text-quiet); margin-bottom: 0; }

/* Hover: the title underlines itself, the text steps forward, the cell lifts */
.offers .offer {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.offers .offer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
/* target offset so the anchor doesn't hide under the header */
.format { scroll-margin-top: var(--space-4); }
.offers .offer h3 {
  display: inline-block;
  position: relative;
}
.offers .offer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.offers .offer:hover { transform: translateY(-5px); }
.offers .offer:hover h3::after { transform: scaleX(1); }
.offers .offer p { transition: color 0.4s ease; }
.offers .offer:hover p { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .offers .offer,
  .offers .offer h3::after,
  .offers .offer p { transition: none; }
  .offers .offer:hover { transform: none; }
}
@media (max-width: 820px) {
  .offers { grid-template-columns: 1fr; padding-top: 0; }
  .offers .offer,
  .offers .offer:not(:first-child) {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule-soft);
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   Framework letters (legacy list style)
   -------------------------------------------------------------------------- */

.framework-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; max-width: 900px; }

.framework-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}

.framework-letter {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}

.framework-item h3 { margin-bottom: 0.35rem; }
.framework-item p { margin-bottom: 0; color: var(--text-quiet); }

@media (max-width: 600px) {
  .framework-item { grid-template-columns: 3.2rem 1fr; }
  .framework-letter { font-size: 1.9rem; }
}

/* --------------------------------------------------------------------------
   Cards (articles, offers)
   -------------------------------------------------------------------------- */

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  max-width: 1200px;
  margin-top: var(--space-4);
}

.card {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}

.card .meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  display: block;
  margin-bottom: var(--space-2);
}

.card h3 { margin-bottom: var(--space-2); }
.card h3 a { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.card h3 a:hover { border-bottom-color: var(--text-strong); }
.card p { font-size: 0.95rem; color: var(--text-quiet); }

.card .readmore {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.card .readmore:hover { border-bottom-color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { max-width: 640px; }

.form-field { margin-bottom: var(--space-3); }

.form-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.2s ease;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mid) 50%),
                    linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--text-strong);
}

.form-field textarea { min-height: 9rem; resize: vertical; }

.form-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text-quiet);
  margin-bottom: var(--space-3);
}
.form-check input { margin-top: 0.3rem; width: auto; appearance: auto; -webkit-appearance: auto; }

.form-note {
  font-size: 0.85rem;
  color: var(--text-quiet);
  margin-top: var(--space-2);
}

.inline-form {
  display: flex;
  gap: var(--space-2);
  max-width: 520px;
  flex-wrap: wrap;
}
.inline-form input {
  flex: 1 1 260px;
  padding: 0.85rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 1rem;
  border-radius: 0;
}
.inline-form input:focus { outline: none; border-color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Audit
   -------------------------------------------------------------------------- */

.audit-shell { max-width: 760px; }
.audit-shell h1 { font-size: clamp(2.4rem, 5vw, 4rem); }  /* result headlines match page headers */

.audit-progress {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: var(--space-3);
}

.audit-bar {
  height: 1px;
  background: var(--rule-soft);
  margin-bottom: var(--space-4);
  position: relative;
}
.audit-bar span {
  position: absolute;
  left: 0; top: -1px;
  height: 3px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.audit-question h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 24ch; }

.audit-options { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

.audit-option {
  text-align: left;
  padding: 1.1rem 1.3rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Touch devices leave :hover stuck on the last element tapped, which made the
   option in that position look pre-selected on the next question. */
@media (hover: hover) {
  .audit-option:hover { border-color: var(--text-strong); }
}
.audit-option.selected { border-color: var(--text-strong); background: var(--bg-alt); }

.audit-nav { display: flex; justify-content: space-between; margin-top: var(--space-4); }

.audit-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-quiet); padding: 0.5rem 0;
}
.audit-back:hover { color: var(--text-strong); }
.audit-back[disabled] { visibility: hidden; }

.result-block { border-top: 1px solid var(--rule); padding-top: var(--space-3); margin-top: var(--space-4); }
.result-block h4 {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-quiet); margin: 0 0 0.6rem;
}
.result-block p { margin-bottom: 0; }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid var(--rule-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--space-4);
  max-width: 1200px;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }

/* Wordmark — stacked (footer): "Speak the" over italic "Unspoken" */
.footer-masthead {
  font-family: "Bitter", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.12;
  margin-bottom: var(--space-2);
}
.footer-masthead em { display: block; font-style: italic; font-weight: 500; }

.footer-tagline { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text); margin-bottom: 0.4rem; }
.footer-desc { font-size: 0.85rem; color: var(--text-quiet); max-width: 34ch; }

.footer-col h4 {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-quiet); margin: 0 0 var(--space-2);
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { font-size: 0.9rem; color: var(--text); border-bottom: 1px solid transparent; }
.footer-col a:hover { border-bottom-color: var(--text-strong); }

.footer-bottom {
  max-width: 1200px;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-quiet);
}
.footer-bottom a { color: var(--text-quiet); }
.footer-bottom a:hover { color: var(--text-strong); }
.footer-line { font-family: var(--serif); font-style: italic; color: var(--text-quiet); }
.footer-col-sub { margin-top: var(--space-3) !important; }

/* --------------------------------------------------------------------------
   Page intro (inner pages)
   -------------------------------------------------------------------------- */

.page-intro {
  /* top padding matches the Philosophy hero's text position for cross-page rhythm */
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) var(--space-5);
  border-bottom: 1px solid var(--rule-soft);
}
.page-intro h1 { max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4rem); }  /* the one inner-page H1 size, everywhere */
.page-intro .lede { max-width: 42ch; }

/* Prose pages */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-5); }
.prose h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Mobile refinements
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Header: keep the lockup + Menu + toggle on one comfortable row */
  .masthead { font-size: 1.35rem; }

  /* Hero display type: large but never overflowing a narrow column */
  .hero h1 { font-size: clamp(2.7rem, 13vw, 3.4rem); }
  .hero { padding-top: 3rem; }

  /* Full-width buttons feel intentional on phones */
  .cta-row .btn { flex: 1 1 100%; }

  /* Quote band: keep the line readable, not cinematic-huge */
  .quote-band img { height: 70vh; }

  /* Sections breathe a little less on small screens */
  .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  /* Section titles: large, but not overwhelming on a phone */
  h2 { font-size: clamp(1.85rem, 7.5vw, 2.3rem); }
  .page-intro h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }

  /* Founder signature block stays comfortable */
  .founder-link { max-width: 100%; }
  /* The signature's one-line rule lives further down, after
     `.founder-feature .founder-caption`, which would otherwise outrank it. */
}

/* Reveal on scroll — restrained */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Entrance rise — the site-wide signature motion (from the Philosophy header)
   Applies on load to every page header and the homepage hero: each element
   rises in sequence — eyebrow, title, lede, body, CTA.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.page-intro > *,
.hero-inner > * {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 1s ease forwards;
}
.page-intro > *:nth-child(1), .hero-inner > *:nth-child(1) { animation-delay: 0.2s; }
.page-intro > *:nth-child(2), .hero-inner > *:nth-child(2) { animation-delay: 0.38s; }
.page-intro > *:nth-child(3), .hero-inner > *:nth-child(3) { animation-delay: 0.6s; }
.page-intro > *:nth-child(4), .hero-inner > *:nth-child(4) { animation-delay: 0.78s; }
.page-intro > *:nth-child(5), .hero-inner > *:nth-child(5) { animation-delay: 0.95s; }

/* Homepage hero portrait: quiet settle, timed with the text.
   The initial state lives in the keyframes, not on the element, so if the
   animation never runs the photograph is simply visible rather than invisible. */
.hero-figure img {
  animation: heroSettle 1.8s ease 0.35s forwards;
}
@keyframes heroSettle {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .page-intro > *, .hero-inner > *, .hero-figure img { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Hero vision line — the platform's one-sentence claim */
.hero-vision {
  margin-top: 1.2em;
  margin-bottom: 0;
  max-width: 44ch;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--text);
}

/* Hero platform marks — mono labels under drawn hairlines */
.hero-marks {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 42rem;
}
.hero-marks li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.83rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  opacity: 0;
  transform: translateY(6px);
  animation: markRise 0.8s ease forwards;
  transition: color 0.35s ease;
}
/* each item carries its own rule, drawn beneath the word */
.hero-marks li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: markDraw 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero-marks li:nth-child(1)::after { animation-delay: 0.60s; }
.hero-marks li:nth-child(2)::after { animation-delay: 0.75s; }
.hero-marks li:nth-child(3)::after { animation-delay: 0.90s; }
.mark-num {
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}
[data-theme="dark"] .mark-num { color: var(--ice-deep); }

.hero-marks li:nth-child(1) { animation-delay: 0.45s; }
.hero-marks li:nth-child(2) { animation-delay: 0.60s; }
.hero-marks li:nth-child(3) { animation-delay: 0.75s; }
.hero-marks li:hover { color: var(--text-strong); }

@keyframes markRise { to { opacity: 1; transform: none; } }
@keyframes markDraw { to { transform: scaleX(1); } }

@media (max-width: 700px) {
  .hero-marks { grid-template-columns: 1fr; gap: 0.9rem; max-width: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marks li { animation: none; opacity: 1; transform: none; }
  .hero-marks li::after { animation: none; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Founder feature — full-bleed portrait, editorial text beneath
   -------------------------------------------------------------------------- */

.founder-caption {
  margin-top: var(--space-4);
  margin-bottom: 0.4rem;
  max-width: none;
  white-space: nowrap;   /* released below 820px — see the media query */
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.founder-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 22rem;
  margin-top: var(--space-4);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--text-strong);
  transition: border-color 0.3s ease;
}
.founder-link span:last-child { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.founder-link:hover { border-color: var(--text-strong); }
.founder-link:hover span:last-child { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .founder-link:hover span:last-child { transform: none; }
}

/* --------------------------------------------------------------------------
   Formats — full-width editorial rows with oversized numerals
   -------------------------------------------------------------------------- */

.formats {
  max-width: 1200px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.formats .format:last-child { border-bottom: none; }

.format {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);   /* mirrors .grid */
  gap: var(--space-4) var(--space-5);
  padding: clamp(2.25rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color 0.45s ease;
}
.format:hover { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }

.format-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 4.75rem);
  line-height: 0.85;
  color: var(--accent);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: left center;
}
.format:hover .format-num { transform: scale(1.08); }
[data-theme="dark"] .format-num { color: var(--ice-deep); }

.format-body .meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .format-body .meta { color: var(--ice-deep); }
.format-body h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  max-width: none;          /* was 26ch, which wrapped every heading over 26 characters */
  /* Not balance. Balance evens the line lengths, which is right for a short
     label and wrong for a full sentence: it produced two matching stubs.
     pretty fills the first line and leaves the remainder short. */
  text-wrap: pretty;
  margin-bottom: var(--space-3);
}
.format-body p { max-width: 62ch; }
.format-body .format-lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-strong);
}
.format-body p:not(.format-lede) {
  font-size: 0.98rem;
  color: var(--text-quiet);
}

@media (max-width: 820px) {
  .format { grid-template-columns: 1fr; gap: var(--space-2); }
  .format-num { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .format, .format-num { transition: none; }
  .format:hover .format-num { transform: none; }
}

/* Private Advisory — quiet closing note beneath the formats */
/* --------------------------------------------------------------------------
   Questions (FAQ)
   -------------------------------------------------------------------------- */

.faq-list { border-top: 0; }   /* the section above already draws a rule */
.faq {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.faq h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  max-width: none;
  margin-bottom: var(--space-2);
}
.faq p {
  color: var(--text-quiet);
  margin-bottom: 0;
}
.faq a { border-bottom: 1px solid var(--rule); }
.faq a:hover { border-bottom-color: var(--text-strong); }

/* --------------------------------------------------------------------------
   Newsletter hero — the wordmark as the field
   -------------------------------------------------------------------------- */

/* Full height, so this page opens like Philosophy, Audit, Framework, Work
   and The Founder rather than sitting shorter than all of them. Content is
   top-aligned on the same measure as .philo-hero-inner. */
.nl-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) clamp(4rem, 10vh, 7rem);
  border-bottom: 1px solid var(--rule-soft);
}
.nl-hero-mark {
  position: absolute;
  left: -4vw;
  top: 50%;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(12rem, 34vw, 30rem);
  line-height: 0.8;
  white-space: nowrap;
  color: var(--accent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(-50%) translateX(-2.5rem);
  animation: nlMarkIn 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s forwards;
}
@keyframes nlMarkIn {
  to { opacity: 0.10; transform: translateY(-50%) translateX(0); }
}
[data-theme="dark"] .nl-hero-mark { animation-name: nlMarkInDark; }
@keyframes nlMarkInDark {
  to { opacity: 0.15; transform: translateY(-50%) translateX(0); }
}

.nl-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}
.nl-hero-inner h1 { max-width: 16ch; }
.nl-hero-inner .lede { max-width: 44ch; }

@media (max-width: 700px) {
  .nl-hero-mark { font-size: 40vw; left: -8vw; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-hero-mark {
    animation: none;
    opacity: 0.10;
    transform: translateY(-50%);
  }
}

/* --------------------------------------------------------------------------
   Framework page — the letters, larger and alive
   -------------------------------------------------------------------------- */

/* the section above already draws the rule — sit straight under it */
.section--flush-top { padding-top: 0; }
.fw-grid--feature { border-top: none; }

.fw-grid--feature .fw-cell {
  padding-top: clamp(0.9rem, 1.6vw, 1.4rem);   /* letters begin at the rule */
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  transition: background-color 0.5s ease;
}
.fw-grid--feature .fw-cell:hover {
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
}

.fw-grid--feature .fw-top {
  align-items: baseline;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.fw-grid--feature .fw-letter {
  font-size: clamp(4.2rem, 9vw, 7.8rem);   /* was 9.5rem: it hit the cell ceiling on hover */
  line-height: 0.82;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  transition:
    color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    letter-spacing 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.fw-grid--feature .fw-cell:hover .fw-letter {
  color: var(--accent);
  transform: translateY(-5px) scale(1.03);   /* a smaller lift, so it stays inside */
  letter-spacing: 0.02em;
}
[data-theme="dark"] .fw-grid--feature .fw-letter {
  color: color-mix(in srgb, var(--ice-deep) 48%, transparent);
}
[data-theme="dark"] .fw-grid--feature .fw-cell:hover .fw-letter { color: var(--ice-deep); }

/* the number steps forward with the letter */
.fw-grid--feature .fw-num { transition: color 0.5s ease; }
.fw-grid--feature .fw-cell:hover .fw-num { color: var(--text-strong); }

/* the title and text lift a touch */
.fw-grid--feature .fw-cell h3 { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fw-grid--feature .fw-cell:hover h3 { transform: translateX(4px); }
.fw-grid--feature .fw-cell p { transition: color 0.5s ease; }
.fw-grid--feature .fw-cell:hover p { color: var(--text); }

/* staggered arrival as each row scrolls in */
.fw-grid--feature .fw-cell.reveal { transition-duration: 0.85s; }
.fw-grid--feature .fw-cell:nth-child(3n + 2) { transition-delay: 0.12s; }
.fw-grid--feature .fw-cell:nth-child(3n) { transition-delay: 0.24s; }

@media (max-width: 820px) {
  .fw-grid--feature .fw-letter { font-size: clamp(4rem, 18vw, 5.5rem); }
  .fw-grid--feature .fw-cell { transition-delay: 0s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-grid--feature .fw-letter,
  .fw-grid--feature .fw-cell h3,
  .fw-grid--feature .fw-cell p { transition: none; }
  .fw-grid--feature .fw-cell:hover .fw-letter { transform: none; }
}

/* Text-only dark quote band (Founder page) — aligned with the page column */
.quote-band-text .pullquote {
  max-width: none;
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

/* Private Advisory — quiet inset within Strategic Advisory */
/* The insets sit on full ice rather than a 6% tint, which was invisible
   against paper. Their text is then set explicitly, the same way the Audit
   and Founder fields set theirs, since the page defaults are tuned for paper. */
.private-inset {
  margin-top: var(--space-5);
  padding: var(--space-4) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--ice);
  border-left: 2px solid var(--ice-deep);
}
[data-theme="dark"] .private-inset { background: var(--ice); }
.private-inset .meta,
[data-theme="dark"] .private-inset .meta { color: #3A5560; }
.private-inset .private-lede,
[data-theme="dark"] .private-inset .private-lede { color: var(--deepink); }
.private-inset p,
[data-theme="dark"] .private-inset p { color: #243840; }
.private-inset .meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: var(--space-2);
}
.private-inset .private-lede {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.45;
  color: var(--text-strong);
  max-width: 62ch;
  margin-bottom: 0.5em;
}
.private-inset p {
  max-width: 62ch;
  font-size: 0.92rem;
  color: var(--text-quiet);
  margin-bottom: 0;
}

/* Signature talks list inside a format card */
.card-sublabel {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 0.6rem;
}
.talk-list {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
}
.talk-list li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-strong);
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule-soft);
}
.talk-list li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Founder credentials — quiet proof, sits after the story */
.founder-credentials {
  margin-top: 0;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-quiet);
}

/* --------------------------------------------------------------------------
   The Unspoken Question — participation moment
   -------------------------------------------------------------------------- */

.unspoken-question {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Oversized serif question mark, same motif as the UNMUTE letters */
.question-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16rem, 38vw, 30rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
[data-theme="dark"] .question-mark { opacity: 0.13; }

.question-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.question-content h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.question-content .lede { max-width: 42ch; margin-left: auto; margin-right: auto; }
.question-content .eyebrow { margin-bottom: var(--space-3); }
.question-content .microcopy {
  margin-top: var(--space-3);
  max-width: none;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .question-content .microcopy { white-space: normal; font-size: 0.6rem; }
}

/* Disclosure — the summary is styled as a button */
.question-response { margin-top: var(--space-4); }
.question-response > summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}
.question-response > summary::-webkit-details-marker { display: none; }
.question-response > summary::marker { content: ""; }
.question-response[open] > summary { display: none; }

.question-response form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.question-response label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 0.5rem;
}
.question-response textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.question-response textarea:focus { outline: none; border-color: var(--text-strong); }

.question-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: var(--space-3) 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-quiet);
}
.question-consent input { margin-top: 0.25rem; width: auto; flex: none; }

.question-response button[type="submit"] { width: 100%; }

.question-success {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--text-strong);
  margin-top: var(--space-3);
}

@media (max-width: 600px) {
  .question-mark { font-size: 15rem; }
}

/* --------------------------------------------------------------------------
   Philosophy — full-screen atmospheric hero
   -------------------------------------------------------------------------- */

.philo-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
}
.philo-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  z-index: 0;
  transform: scale(1.08);
  animation: philoZoom 24s ease-out forwards;
}
@keyframes philoZoom { to { transform: scale(1); } }

.philo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(15,15,13,0.48) 0%, rgba(15,15,13,0) 55%),
    linear-gradient(to bottom, rgba(15,15,13,0.48) 0%, rgba(15,15,13,0.16) 42%, rgba(15,15,13,0.38) 100%);
}

/* lighter scrim when the photograph is already dark on the text side */
.philo-hero--soft::after {
  background:
    linear-gradient(to right, rgba(15,15,13,0.18) 0%, rgba(15,15,13,0) 55%),
    linear-gradient(to bottom, rgba(15,15,13,0.20) 0%, rgba(15,15,13,0.04) 45%, rgba(15,15,13,0.22) 100%);
}

/* stronger scrim when the photograph itself is light */
.philo-hero--light::after {
  background:
    linear-gradient(to right, rgba(15,15,13,0.72) 0%, rgba(15,15,13,0.34) 42%, rgba(15,15,13,0.05) 72%),
    linear-gradient(to bottom, rgba(15,15,13,0.42) 0%, rgba(15,15,13,0.18) 45%, rgba(15,15,13,0.30) 100%);
}

.philo-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  padding: var(--gutter);
  padding-top: clamp(3rem, 9vh, 6rem);
}
.philo-hero-inner .eyebrow { color: color-mix(in srgb, #FDFCFA 68%, transparent); }
.philo-hero-inner h1 {
  color: #FDFCFA;
  max-width: 16ch;
  font-size: clamp(2.4rem, 5vw, 4rem);   /* matches every other page header */
  text-shadow: 0 1px 40px rgba(15,15,13,0.4);
}
.philo-hero-inner .lede {
  color: color-mix(in srgb, #FDFCFA 88%, transparent);
  max-width: 42ch;
}

/* Words rise on load — uses the site-wide `rise` keyframe */
/* The initial state lives in the keyframes, not on the element, so if the
   animation never runs the words are simply visible rather than invisible. */
.philo-hero-inner > * {
  animation: rise 1s ease backwards;
}
.philo-hero-inner .eyebrow { animation-delay: 0.2s; }
.philo-hero-inner h1 { animation-delay: 0.38s; }
.philo-hero-inner .lede { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .philo-hero-img { animation: none; transform: none; }
  .philo-hero-inner > * { animation: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   Featured essays — homepage newsletter section (one lead, two beside)
   ========================================================================== */
.ed-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.ed-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}
.ed-lead { text-decoration: none; color: inherit; display: block; }
.ed-lead h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  margin: 0.7rem 0 var(--space-2);
  color: var(--text-strong);
}
.ed-lead p {
  font-size: 1.02rem;
  color: var(--text-quiet);
  max-width: 44ch;
  margin: 0;
}
.ed-lead .readmore {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ed-lead:hover .readmore { border-bottom-color: var(--text-strong); }
.ed-side {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  padding-left: var(--space-4);
}
.ed-side a {
  text-decoration: none;
  color: inherit;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ed-side a:first-child { padding-top: 0; }
.ed-side a:last-child { border-bottom: 0; }
.ed-side h4 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.4rem;
  color: var(--text-quiet);
  transition: color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ed-side a:hover h4 { color: var(--text-strong); }
.ed-side p { font-size: 0.88rem; color: var(--text-quiet); margin: 0; }

@media (max-width: 820px) {
  .ed-feature { grid-template-columns: 1fr; gap: var(--space-4); }
  .ed-side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ed-side h4, .ed-lead .readmore { transition: none; }
}

/* Featured block sits inside the inverse newsletter section: give the form air */
.ed-feature + .newsletter-form { margin-top: var(--space-5); }

/* Featured block on the inverse (dark) newsletter panel */
.section--inverse .ed-lead h3 { color: var(--warm-off); }
.section--inverse .ed-lead p,
.section--inverse .ed-side p { color: color-mix(in srgb, var(--warm-off) 72%, transparent); }
.section--inverse .ed-side h4 { color: color-mix(in srgb, var(--warm-off) 62%, transparent); }
.section--inverse .ed-side a:hover h4 { color: var(--warm-off); }
.section--inverse .ed-meta { color: color-mix(in srgb, var(--warm-off) 55%, transparent); }
.section--inverse .ed-lead .readmore {
  color: var(--warm-off);
  border-bottom-color: color-mix(in srgb, var(--warm-off) 40%, transparent);
}
.section--inverse .ed-lead:hover .readmore { border-bottom-color: var(--warm-off); }
.section--inverse .ed-feature { border-top-color: color-mix(in srgb, var(--warm-off) 30%, transparent); }
.section--inverse .ed-side {
  border-left-color: color-mix(in srgb, var(--warm-off) 30%, transparent);
  border-top-color: color-mix(in srgb, var(--warm-off) 30%, transparent);
}
.section--inverse .ed-side a { border-bottom-color: color-mix(in srgb, var(--warm-off) 18%, transparent); }

/* Dark mode flips the inverse panel to light */
[data-theme="dark"] .section--inverse .ed-lead h3 { color: var(--ink); }
[data-theme="dark"] .section--inverse .ed-lead p,
[data-theme="dark"] .section--inverse .ed-side p { color: var(--deep); }
[data-theme="dark"] .section--inverse .ed-side h4 { color: var(--mid); }
[data-theme="dark"] .section--inverse .ed-side a:hover h4 { color: var(--ink); }
[data-theme="dark"] .section--inverse .ed-meta { color: var(--mid); }
[data-theme="dark"] .section--inverse .ed-lead .readmore {
  color: var(--ink);
  border-bottom-color: var(--stone);
}
[data-theme="dark"] .section--inverse .ed-lead:hover .readmore { border-bottom-color: var(--ink); }
[data-theme="dark"] .section--inverse .ed-feature { border-top-color: var(--stone); }
[data-theme="dark"] .section--inverse .ed-side {
  border-left-color: var(--stone);
  border-top-color: var(--stone);
}
[data-theme="dark"] .section--inverse .ed-side a {
  border-bottom-color: color-mix(in srgb, var(--stone) 45%, transparent);
}

/* Newsletter triad — the memorable line, set larger than the lede above it */
.nl-triad {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1.85vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  max-width: none;
  margin-top: var(--space-2);
}
@media (min-width: 760px) { .nl-triad { white-space: nowrap; } }
.section--inverse .nl-triad { color: var(--warm-off); }
[data-theme="dark"] .section--inverse .nl-triad { color: var(--ink); }

/* Work page: the line that frames the three offers */
.work-intro {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-strong);
  max-width: 34ch;
  margin: 0;
}

/* Homepage Work lede: hold it to two balanced lines */
.work-lede {
  max-width: 72ch;
  text-wrap: balance;
}


/* ==========================================================================
   THE ICE SYSTEM
   Palette, typography and section colour applied over the base above.
   Section map: header ice · hero paper · philosophy paper · audit ice ·
   framework paper · work paper · newsletter ink · question paper ·
   founder ice-deep · contact paper · footer ink.
   ========================================================================== */

/* Newsreader runs heavier than the old serif, so every weight steps down */
h1,h2,h3,.lede,.pullquote,.fw-letter{ font-weight:300; letter-spacing:-.015em; }
h1{ font-weight:200; }
.pullquote{ font-weight:300; font-style:normal; }
.lede,.fw-sub,.founder-caption,.nl-triad{ font-style:normal; }

/* paper grain */
.section,.hero,.philo-hero,.nl-hero,.page-intro{ position:relative; }
/* NOTE: .philo-hero::after is the base stylesheet's darkening scrim for white
   text over photography. It must not be given grain, or the text stops reading. */
.section::after,.hero::after,.nl-hero::after,.page-intro::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.055; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
/* Content sits above the grain. The grain never blocks clicks.
   Images are excluded: the photo heroes position theirs absolutely, and
   forcing position:relative on them turns them into flex items and pushes
   the headline off the screen. .philo-hero-inner already carries its own
   position and z-index in the base, so the hero needs nothing here. */
/* .philo-hero and .nl-hero are excluded entirely: both position a child
   absolutely (the photograph, the giant wordmark) and forcing it to relative
   drops it into the flow. Their inner blocks already carry their own
   position and z-index in the base rules above. */
.section > *:not(img),
.hero > *:not(img),
.page-intro > *:not(img){
  position:relative; z-index:2;
}

/* ── HEADER on ice ─────────────────────────────────────────────── */
.site-header{
  background:var(--ice) !important;
  border-bottom:1px solid rgba(15,15,13,.16);
}
.site-header .masthead{ color:var(--deepink); }
.site-nav a{ color:#3A5560; }
.site-nav a:hover,.site-nav a[aria-current="page"]{ color:var(--deepink); }
.theme-toggle{ border-color:rgba(15,15,13,.22); color:var(--deepink); }

/* ── PHOTOGRAPHY · all three step up to ~46% of the row ────────── */
.hero-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
.hero-figure img{ max-height:86vh; }
.split-photo{ grid-template-columns:minmax(0,6fr) minmax(0,7fr); }
.split-photo--flip{ grid-template-columns:minmax(0,7fr) minmax(0,6fr); }
@media (max-width:820px){
  .hero-grid,.split-photo,.split-photo--flip{ grid-template-columns:1fr; }
}

/* ── THE AUDIT · ice field, capitals, photo untouched ──────────── */
.section--inverse:has(> .grid-label a[href*="audit"]){ background-color:var(--ice); color:var(--deepink); }
.section--inverse:has(> .grid-label a[href*="audit"]) h2{
  font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.94; font-size:clamp(1.9rem,3.6vw,3rem); color:var(--deepink);
}
.section--inverse:has(> .grid-label a[href*="audit"]) .lede{ color:var(--deepink); }
.section--inverse:has(> .grid-label a[href*="audit"]) p{ color:#243840; }
.section--inverse:has(> .grid-label a[href*="audit"]) .microcopy,
.section--inverse:has(> .grid-label a[href*="audit"]) .grid-label a{ color:#3A5560; }
/* the Audit CTA: identical and legible in both themes, since the field is
   ice in both. Stated explicitly so no base dark-mode rule can reach it. */
.section--inverse:has(> .grid-label a[href*="audit"]) .btn,
[data-theme="dark"] .section--inverse:has(> .grid-label a[href*="audit"]) .btn{
  background:#0F0F0D !important; color:#FAF8F4 !important;
  border-color:#0F0F0D !important; opacity:1;
}
.section--inverse:has(> .grid-label a[href*="audit"]) .btn:hover,
[data-theme="dark"] .section--inverse:has(> .grid-label a[href*="audit"]) .btn:hover{
  background:var(--deepink) !important; border-color:var(--deepink) !important;
}
.section--inverse:has(> .grid-label a[href*="audit"]) .btn--ghost,
[data-theme="dark"] .section--inverse:has(> .grid-label a[href*="audit"]) .btn--ghost{
  background:transparent !important; color:var(--deepink) !important;
  border-color:rgba(15,15,13,.35) !important;
}

/* ── THE FRAMEWORK · paper, neutral, better motion ─────────────── */
.fw-letter{ color:var(--ice-deep); transition:color .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.fw-cell{ position:relative; overflow:hidden; transition:background-color .5s cubic-bezier(.2,.8,.2,1); }
.fw-cell::before{
  content:""; position:absolute; left:0; top:0; height:1px; width:0; background:var(--ice-deep);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.fw-cell:hover::before{ width:100%; }
.fw-cell:hover{ background-color:rgba(211,222,224,.18); }
.fw-cell:hover .fw-letter{ color:var(--deepink); transform:translateY(-3px); }
.fw-cell .fw-num{ transition:opacity .5s ease; opacity:.55; }
.fw-cell:hover .fw-num{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .fw-cell::before,.fw-letter,.fw-cell{ transition:none; }
  .fw-cell:hover .fw-letter{ transform:none; }
}

/* ── THE WORK · same layout, numbered and ruled ────────────────── */
/* one rule across the top. Nothing else. The grid gap does the separating. */
.offers{ border-top:1px solid var(--hair); counter-reset:offer; }
.offers .offer{
  border-bottom:0;
  padding-top:3.4rem; padding-bottom:3.6rem;   /* room for the number, air beneath */
  position:relative; transition:background-color .45s cubic-bezier(.2,.8,.2,1);
}
.offers .offer:hover{ background-color:rgba(211,222,224,.4); }
/* the number, drawn from a counter so the markup never changes */
.offers .offer::after{
  counter-increment:offer;
  content:"0" counter(offer);
  position:absolute; left:0; top:1.7rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--mid);
  transition:color .45s cubic-bezier(.2,.8,.2,1);
}
.offers .offer:hover::after{ color:var(--ink); }
/* the hairline that draws across on hover */
.offers .offer::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--ice-deep);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.offers .offer:hover::before{ width:100%; }
/* the base draws a line under each title on hover. Remove it. */
.offers .offer h3::after{ display:none !important; }
.offers .offer:hover{ transform:none; }
/* With the dividers gone the columns had nothing holding them apart, so the
   gap does it instead. The first offer stays flush with the page's left axis;
   the other two are inset, and their numerals move with them. */
/* Every offer gets air inside its own box, so the hover wash has room around
   the text. The grid is then pulled left by exactly that padding, which puts
   01's text back on the page's left axis with the label and heading above it.
   All three are padded identically, so the columns stay on one rhythm. */
.offers{ --offer-pad:clamp(1rem,2.2vw,2rem); column-gap:clamp(1.5rem,3vw,3rem); }
@media (min-width:820px){
  .offers{ margin-left:calc(var(--offer-pad) * -1); }
  .offers .offer,
  .offers .offer:not(:first-child),
  .offers .offer + .offer{
    border-left:0 !important;
    padding-left:var(--offer-pad);
    padding-right:var(--offer-pad);
  }
  .offers .offer::after{ left:var(--offer-pad); }
}
@media (prefers-reduced-motion:reduce){
  .offers .offer,.offers .offer::before,.offers .offer::after{ transition:none; }
}

/* ── THE NEWSLETTER · ink, typographic ─────────────────────────── */
.section--inverse .ed-lead h3{ color:#F4F1EB; }
.section--inverse .ed-lead .readmore{ color:var(--ice); border-bottom-color:rgba(211,222,224,.5); }
.section--inverse .ed-side h4{ color:rgba(244,241,235,.72); }
.section--inverse .ed-side a:hover h4{ color:#F4F1EB; }
.section--inverse .ed-meta{ color:var(--ice-deep); }
.section--inverse .ed-feature{ border-top-color:rgba(234,241,243,.22); }
.section--inverse .ed-side{ border-left-color:rgba(234,241,243,.22); }

/* ── THE UNSPOKEN QUESTION · paper, centred, the mark leads ────── */
.unspoken-question{
  background:var(--paper) !important;
  padding-top:clamp(4.5rem,9vw,7.5rem); padding-bottom:clamp(4.5rem,9vw,7.5rem);
  border-top:0; border-bottom:0;
  overflow:hidden;
  text-align:center;                 /* one axis: everything on the centre line */
}
/* the mark leads the section instead of hiding behind it. nothing overlaps. */
.unspoken-question .question-mark{
  position:static; transform:none;
  display:block; margin:0 auto var(--space-3);
  font-family:var(--serif); font-weight:200; line-height:.78;
  font-size:clamp(5.5rem,11vw,9rem);
  color:var(--ice-deep); opacity:1; pointer-events:none; user-select:none;
}
.unspoken-question .question-content{
  position:relative; z-index:2;
  max-width:660px; margin-left:auto; margin-right:auto; text-align:center;
}
.unspoken-question .question-content > *{ margin-left:auto; margin-right:auto; }
.unspoken-question .question-content .eyebrow{
  display:block; color:var(--mid); margin-bottom:var(--space-3);
}
.unspoken-question h2{
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.04; max-width:18ch;
  color:var(--ink); margin-top:0;
}
.unspoken-question .lede{ max-width:40ch; margin-top:1.2rem; }
.unspoken-question .question-response{ margin-top:var(--space-4); }
.unspoken-question .question-content .microcopy{ white-space:normal; max-width:46ch; }
.unspoken-question summary.btn{ background:var(--ink); color:var(--warm-off); border-color:var(--ink); }

/* ── THE FOUNDER · two panels, edge to edge, photo floor to ceiling ─ */
.founder-feature{
  background-color:var(--ice-deep);
  padding:0 !important;
  overflow:hidden;
}
/* the label moves inside the colour panel */
.founder-feature > .grid-label{
  position:absolute; z-index:3;
  top:clamp(1.6rem,3vw,2.6rem); left:var(--gutter);
  margin:0 !important;
}
.founder-feature .split-photo--flip{
  grid-template-columns:1fr 1fr;
  gap:0; max-width:none; align-items:stretch;
  min-height:min(84vh,860px);
}
/* left: the deeper blue, type centred vertically */
.founder-feature .split-photo--flip > div{
  background:var(--ice-deep);
  padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) clamp(2.5rem,5vw,4rem);
  display:flex; flex-direction:column; justify-content:center;
}
.founder-feature .split-photo--flip > div > *{ max-width:22ch; }
.founder-feature .split-photo--flip > div > p{ max-width:40ch; }
/* right: the photograph, full bleed */
.founder-feature .split-photo--flip > figure{ margin:0; height:100%; }
.founder-feature .split-photo--flip > figure img{
  width:100%; height:100%; object-fit:cover; object-position:center 16%;
  filter:grayscale(1) contrast(1.06);
}
.founder-feature h2{ font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.04; }
@media (max-width:820px){
  .founder-feature .split-photo--flip{ grid-template-columns:1fr; min-height:0; }
  .founder-feature .split-photo--flip > figure{ height:auto; }
  .founder-feature .split-photo--flip > figure img{ height:auto; min-height:60vh; }
  .founder-feature > .grid-label{ position:static; padding:var(--gutter) var(--gutter) 0; }
}
.founder-feature .grid-label a{ color:#20323A; }
.founder-feature h2{ color:var(--deepink); }
.founder-feature p{ color:#243840; }
.founder-feature .founder-caption{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:#3A5560; border-top:1px solid rgba(15,15,13,.2); padding-top:1rem; margin-top:2rem;
}
.founder-feature .founder-credentials{ color:#3A5560; }
.founder-feature .founder-link{ border-color:rgba(15,15,13,.3); color:var(--deepink); }
.founder-feature .founder-link:hover{ border-color:var(--deepink); }
.founder-feature figure img{ filter:grayscale(1) contrast(1.06); }

/* ── CONTACT stays paper. FOOTER goes ink. ─────────────────────── */
.site-footer{
  background:var(--ink); color:rgba(244,241,235,.72);
  border-top:0;
}
.site-footer .footer-masthead{ color:#F4F1EB; }
.site-footer .footer-tagline,
.site-footer .footer-line{ color:var(--ice); }
.site-footer .footer-desc,
.site-footer .footer-bottom{ color:rgba(244,241,235,.6); }
.site-footer h4,
.site-footer .footer-col-sub{ color:rgba(244,241,235,.55); }
.site-footer a{ color:rgba(244,241,235,.78); }
.site-footer a:hover{ color:#F4F1EB; border-bottom-color:var(--ice-deep); }
.site-footer .footer-bottom{ border-top-color:rgba(244,241,235,.16); }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE
   The page black is matched to the photographs' own black, so the
   hero and the full-bleed images bleed into the page with no edge.
   Sampled: hero.jpg edge = #060606, work-hero.jpg edge = #0A0A0A.
   ══════════════════════════════════════════════════════════════════ */

/* photographs sit on the page black, so no edge shows */
[data-theme="dark"] .hero-figure img,
[data-theme="dark"] .quote-band img,
[data-theme="dark"] .philo-hero img{ background:var(--bg); }

/* --- the inverse sections. The base flips these to LIGHT on a dark page,
       and sets their text to ink. So they must stay light, not go dark. --- */
[data-theme="dark"] .section--inverse{ background-color:#EDF1F1; }   /* pale ice, not warm cream */
[data-theme="dark"] .section--inverse:has(> .grid-label a[href*="audit"]){
  background-color:var(--ice);
}
[data-theme="dark"] .section--inverse .ed-meta,
[data-theme="dark"] .section--inverse .nl-triad{ color:#3A5560; }
[data-theme="dark"] .section--inverse .ed-feature{ border-top-color:rgba(15,15,13,.18); }
[data-theme="dark"] .section--inverse .ed-side{ border-left-color:rgba(15,15,13,.18); }
[data-theme="dark"] .section--inverse .ed-lead .readmore{ color:var(--deepink); }
/* the sign-up form: the base paints it cream, which vanishes on a light band */
[data-theme="dark"] .section--inverse .newsletter-form input{
  color:var(--ink);
  border-bottom-color:rgba(15,15,13,.28);
}
[data-theme="dark"] .section--inverse .newsletter-form input::placeholder{
  color:rgba(15,15,13,.45);
}
[data-theme="dark"] .section--inverse .newsletter-form input:focus{
  border-bottom-color:var(--ink);
}
[data-theme="dark"] .section--inverse .newsletter-more a{
  color:var(--ink); border-bottom-color:rgba(15,15,13,.28);
}
[data-theme="dark"] .section--inverse .newsletter-more a:hover{
  border-bottom-color:var(--ink);
}
[data-theme="dark"] .section--inverse .microcopy{ color:rgba(15,15,13,.55); }

/* --- header, founder and footer hold their colour in both modes --- */
[data-theme="dark"] .site-header{ background:var(--ice) !important; }
[data-theme="dark"] .founder-feature{ background-color:var(--ice-deep); }
[data-theme="dark"] .site-footer{
  background:#0D0D0C; border-top:1px solid rgba(211,222,224,.14);
}

/* --- the question section: dark page, so everything lifts --- */
[data-theme="dark"] .unspoken-question{ background:var(--bg) !important; }
[data-theme="dark"] .unspoken-question h2{ color:#EDEAE4; }
[data-theme="dark"] .question-mark{ color:var(--ice-deep); opacity:1; }
[data-theme="dark"] .unspoken-question summary.btn{
  background:var(--ice); color:var(--deepink); border-color:var(--ice);
}

/* --- hover on dark: no wash anywhere.
       A lit panel on a black page reads as a flash. The hairline and the
       text lift carry the whole interaction instead. --- */
[data-theme="dark"] .fw-cell:hover,
[data-theme="dark"] .offers .offer:hover,
[data-theme="dark"] .format:hover{ background-color:transparent; }
[data-theme="dark"] .offers .offer::after{ color:var(--text-quiet); }
[data-theme="dark"] .offers .offer:hover::after{ color:var(--ice); }
/* the hairline is the signal, so it steps back a little in weight */
[data-theme="dark"] .offers .offer::before,
[data-theme="dark"] .fw-cell::before{ height:1px; background:var(--ice); }

/* hairlines and hovers move into the blue family */
.format:hover{ background-color:rgba(211,222,224,.35); }
.faq a:hover,.card h3 a:hover{ border-bottom-color:var(--ice-deep); }

/* --------------------------------------------------------------------------
   Ice heroes — full-screen fields instead of photography.
   Used on the Framework and the Audit so the platform colour reaches the
   inner pages. Philosophy, Work and The Founder keep their photographs.
   -------------------------------------------------------------------------- */

.philo-hero--ice {
  background: var(--ice);
  border-bottom: 0;
}
.philo-hero--ice::after {
  /* no photograph to darken, so this pseudo-element carries the grain instead */
  background: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity: 0.055;
}
/* the ice fields are deeper than they were, so the eyebrow steps down with
   them: #3A5560 fell to 3.3:1 against the Audit field, below the 4.5:1 floor */
.philo-hero--ice .philo-hero-inner .eyebrow { color: #223A44; }
.philo-hero--ice .philo-hero-inner h1 {
  color: var(--deepink);
  text-shadow: none;
}
.philo-hero--ice .philo-hero-inner .lede { color: #243840; }

[data-theme="dark"] .philo-hero--ice { background: var(--ice); }

/* Small numerals sat on the accent, which is too pale to read at 0.6rem.
   They take the darker ice tone instead. */
.mark-num,
.format-num { color: var(--logo-accent); }
[data-theme="dark"] .mark-num,
[data-theme="dark"] .format-num { color: var(--ice); }

/* The hero lede holds on one line from tablet up. It is 48 characters, so it
   fits once the size is capped; below 1024px it wraps normally. */
@media (min-width: 1024px) {
  .hero-inner .hero-body .lede {
    white-space: nowrap;
    max-width: none;
    font-size: clamp(1.05rem, 1.62vw, 1.5rem);
  }
}

/* --------------------------------------------------------------------------
   The Audit block (homepage) — no photograph. The headline carries the
   section and the three movements sit beneath it as a progression, not a
   score. The Audit places people in three profiles, never a number.
   -------------------------------------------------------------------------- */

.audit-block { max-width: 1200px; }
.audit-intro { max-width: 62ch; }

.audit-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.audit-line {
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 1px;
  background: rgba(15, 15, 13, 0.22);
}
.audit-dot {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--deepink);
  margin-bottom: 1.4rem;
  position: relative;
}
.audit-step:nth-child(3) .audit-dot { background: #4E6B74; }
.audit-step:nth-child(4) .audit-dot { background: rgba(15, 15, 13, 0.28); }
.audit-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: #3A5560;
  margin-bottom: 0.4rem;
}
.audit-step p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  color: var(--deepink);
  margin: 0;
  max-width: none;
  white-space: nowrap;   /* each movement holds one line */
}
.audit-foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.audit-foot .cta-row { margin-top: var(--space-3); }

@media (max-width: 640px) {
  .audit-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .audit-line { display: none; }
  .audit-dot { margin-bottom: 0.9rem; }
}

/* The one loud typeface, now given the room to be loud */
.section--inverse:has(> .grid-label a[href*="audit"]) h2 {
  font-size: clamp(2.1rem, 5.6vw, 5rem);
  max-width: none;
  margin-bottom: var(--space-4);
}
/* "The Emotional Fluency" holds one line, "Audit" drops beneath it */
.section--inverse:has(> .grid-label a[href*="audit"]) h2 span { display: block; }

/* --------------------------------------------------------------------------
   The hero, full bleed — same construction as The Founder panel.
   Text left on paper, photograph filling the right half floor to ceiling.
   -------------------------------------------------------------------------- */

.hero--bleed { padding: 0 !important; overflow: hidden; }
.hero--bleed .hero-grid {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 0;
  max-width: none;
  align-items: stretch;
  min-height: calc(100vh - 68px);
}
.hero--bleed .hero-inner {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--bleed .hero-figure { margin: 0; height: 100%; }
.hero--bleed .hero-figure img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 12%;   /* crops from the bottom, never the head */
}
@media (max-width: 820px) {
  .hero--bleed .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero--bleed .hero-inner { padding: var(--gutter); }
  .hero--bleed .hero-figure { height: auto; }
  .hero--bleed .hero-figure img { height: auto; min-height: 62vh; }
}

/* The three movements, on a phone: the line turns vertical and runs through
   the dots, so it reads as one progression instead of three stacked labels. */
@media (max-width: 640px) {
  .audit-steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 1.6rem;
  }
  .audit-line {
    display: block;
    left: 5px; right: auto;
    top: 6px; bottom: 6px;
    width: 1px; height: auto;
  }
  .audit-step {
    position: relative;
    padding: 0 0 1.9rem 0;
  }
  .audit-step:last-child { padding-bottom: 0; }
  .audit-dot {
    position: absolute;
    left: -1.6rem; top: 1px;
    margin-bottom: 0;
  }
  .audit-step p { max-width: none; white-space: normal; }
}

/* The section closes on its centre line */
.audit-foot { text-align: center; }
.audit-foot .cta-row { justify-content: center; }

/* Sections close on their centre line only where the content above them is
   full width: the Audit, the Framework, the Work, the Newsletter. Philosophy
   and Contact are short left-aligned columns, so their buttons stay on the
   left axis — centred, they read as drifted rather than placed. */
/* The Newsletter stays left. Centring a closing button works; centring a
   closing field does not, because the placeholder text sits hard against the
   field's left edge and reads as the alignment, not the box it sits in. */

/* A section that closes on a button doesn't need the full 8rem beneath it —
   the button is already a full stop. One value, applied everywhere, so the
   rhythm stays even from page to page. */
.section:has(.cta-row),
.section:has(.newsletter-more) { padding-bottom: var(--space-5); }

/* With "Words and conversations." gone from the homepage, the triad steps up
   to carry the section on its own rather than reading as a caption. */
.section--inverse:has(> .grid-label a[href*="newsletter"]) .nl-triad {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  margin-top: var(--space-3);
}

/* Section labels inside an inverse band. In dark mode that band becomes a
   pale field, and --text-quiet is a light grey on it. */
[data-theme="dark"] .section--inverse .grid-label,
[data-theme="dark"] .section--inverse .grid-label a { color: #3A5560; }
[data-theme="dark"] .section--inverse .grid-label a:hover { color: var(--deepink); }

/* The ice heroes may carry a duotone field rather than a flat colour. It is
   already mapped into the sage range, so the base greyscale filter must not
   run over it. */
.philo-hero--ice .philo-hero-img { filter: none; }

/* The UNMUTE letters on hover. In light mode they deepen to --deepink; on a
   black page that is invisible, so they lift to ice instead. */
[data-theme="dark"] .fw-cell:hover .fw-letter { color: var(--ice); }
[data-theme="dark"] .fw-grid--feature .fw-cell:hover .fw-letter { color: var(--ice); }





/* Work's hero has a figure entering the frame from the middle, so the text is
   held to a narrower measure and breaks before it reaches her. The photograph
   is untouched; only the column width changes. */
@media (min-width: 900px) {
  .philo-hero--figure .philo-hero-inner h1 { max-width: 13ch; }
  .philo-hero--figure .philo-hero-inner .lede { max-width: none; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   The essay index (Newsletter). A list, not a grid: it reads as an archive
   and works the same with three essays or thirty. The grid version fitted
   two columns inside the page's right-hand column, so a third essay wrapped
   and left a hole beside it.
   -------------------------------------------------------------------------- */

.card-row[data-articles] {
  display: block;
  max-width: 62rem;
  margin-top: 0;
}
/* one column per entry: title, excerpt and link read as a single essay,
   not as two things sitting side by side */
.card-row[data-articles] .card {
  border-top: 1px solid var(--hair);
  padding: var(--space-4) 0;
  display: block;
  max-width: 58ch;
}
.card-row[data-articles] .card .meta { margin-bottom: 0; }
.card-row[data-articles] .card h3 {
  margin: 0.9rem 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}
.card-row[data-articles] .card p {
  margin: 0.9rem 0 0;
  font-size: 1rem;
}
.card-row[data-articles] .card .readmore {
  margin-top: 1.1rem;
  display: inline-block;
  justify-self: start;
}


/* --------------------------------------------------------------------------
   The Founder's pullquote band. Ice-deep, the same field as the Founder panel
   on the homepage, so the colour means "this is her" rather than appearing
   once and never again. Ink was the site's generic inverse: the Newsletter
   band and the footer wear it too.
   -------------------------------------------------------------------------- */

.quote-band-text,
[data-theme="dark"] .quote-band-text {
  background: var(--ice-deep);
  color: var(--deepink);
}
.quote-band-text .pullquote,
[data-theme="dark"] .quote-band-text .pullquote { color: var(--deepink); }
.quote-band-text .grid-label,
[data-theme="dark"] .quote-band-text .grid-label { color: #223A44; }

/* "Eleni Rizopoulou · Founder, speaker, moderator" STAYS ON ONE LINE on a
   phone. Eleni's call, 26 Sept 2026: wrapped, it split the name from the roles
   and read as two unrelated fragments.

   The earlier fix here let it wrap, because at the desktop size it overflows.
   Scaling the type is the better answer, and the numbers are measured rather
   than guessed: DM Mono's advance is exactly 0.600em, the string is 46
   characters, and --gutter is 20px a side below 400px. At 0.62rem with 0.10em
   tracking that needs 319px inside the 320px a 360px handset offers — one
   pixel, which is not a margin. The clamp scales with the viewport instead:
   ~302px at 360, and it stops growing at the desktop 0.62rem.

   SPECIFICITY: this must outrank `.founder-feature .founder-caption` (0,2,0)
   further up, so it is written at the same weight and placed after it. */
@media (max-width: 820px) {
  .founder-feature .founder-caption,
  .founder-caption {
    white-space: nowrap;
    font-size: clamp(0.5rem, 2.6vw, 0.62rem);
    letter-spacing: 0.10em;
  }
}

/* Pull quotes carry a hard <br> placed for a wide screen. On a phone that
   break lands mid-thought and the centred lines come out ragged, so the
   break is dropped and the browser balances the lines instead. */
@media (max-width: 820px) {
  .pullquote br { display: none; }
  .pullquote {
    text-wrap: balance;          /* even line lengths where supported */
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   MOBILE CORRECTIONS
   ========================================================================== */

@media (max-width: 820px) {

  /* The Newsletter hero was given 100vh to match the other pages. On a phone
     that is a screen of near-emptiness before the first word. */
  .nl-hero {
    min-height: 0;
    padding-top: clamp(3rem, 8vh, 5rem);
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
  }
  .nl-hero-mark { font-size: 34vw; }

  /* The Founder panel on the homepage: tighten the sage band above the photo
     so it reads as a label, not a block of colour. */
  .founder-feature > .grid-label {
    padding: clamp(1.1rem, 4vw, 1.6rem) var(--gutter) clamp(0.9rem, 3vw, 1.2rem);
  }

  /* The Founder page hero. At 68% the crop cut her in half once the frame
     narrowed; the figure sits left of that on a portrait screen. */
  .philo-hero--soft .philo-hero-img,
  .philo-hero .philo-hero-img[style*="68%"] { object-position: 76% center !important; }

  /* The sage quote band ran the full section padding, 8rem top and bottom,
     which made it an enormous field for one sentence. */
  .quote-band-text { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .quote-band-text .pullquote {
    font-size: clamp(1.45rem, 6.4vw, 1.9rem);
    text-wrap: balance;
    max-width: 22ch;
  }
}

/* ==========================================================================
   MOBILE CORRECTIONS · second pass
   ========================================================================== */

@media (max-width: 820px) {

  /* The offer numerals are absolutely placed 1.7rem down, which on a phone is
     exactly where the title begins. Lift them and make room. */
  .offers .offer { padding-top: 3rem; }
  .offers .offer::after { top: 0.5rem; }
  .offers .offer:first-child { padding-top: 3rem; }

  /* The Founder quote keeps its line break: it is written to fall after
     "room." so the second "I" starts a line rather than ending one. The
     other two quotes still drop theirs, which is what this undoes. */
  .quote-band-text .pullquote br { display: inline; }
  .quote-band-text .pullquote {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
  }
  .quote-band-text .grid-label { text-align: center; }
}

/* The hero marks sat on a rule the same weight as the section divider below
   them, so three labels read as heavily as the structure of the page. They
   drop to --hair, the same whisper every other secondary rule uses. */
.hero-marks li::after { background: var(--hair); }
.hero-marks li { color: var(--text-quiet); }

@media (max-width: 820px) {
  /* The quote band sits inside the page grid, so on a phone it was centred
     within the content column rather than across the band itself. */
  .quote-band-text .grid { display: block; }
  .quote-band-text .grid > * { max-width: none; }
}

/* The Founder quote band, at every width. It sat inside the page grid, so on
   a wide screen the quote was indented into the content column and adrift in
   a very tall field. It now centres on the band and the band closes around it. */
.quote-band-text {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.quote-band-text .pullquote {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.25;
  max-width: 30ch;
}
/* On a wide screen it sits on the same axis as every paragraph on the page,
   inside the grid's content column. Only on a phone, where the grid collapses
   and there is no column to align to, does it centre. */
@media (min-width: 821px) {
  .quote-band-text .pullquote { text-align: left; margin-left: 0; }
}

/* Hanging punctuation. The opening quote mark was sitting inside the measure,
   so the "I" on line one started further right than the "I" on line two. It
   now hangs into the margin and the two lines begin on the same letter. */
@media (min-width: 821px) {
  .quote-band-text .pullquote { text-indent: -0.38em; }
}

/* --------------------------------------------------------------------------
   The Work offers. The numerals were 0.62rem mono, the quietest type on the
   page, on the section that has to sell. They now take the same treatment as
   the UNMUTE letters: large, in the display serif, ice-deep, lifting on
   hover. It ties Work to the Framework and gives the section a scale of its
   own instead of three paragraphs under a rule.
   -------------------------------------------------------------------------- */

.offers .offer::after {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(3.4rem, 5vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 0.8;
  color: var(--ice-deep);
  top: 0;
  transition: color 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.offers .offer { padding-top: 5.2rem; }
.offers .offer:hover::after {
  color: var(--deepink);
  transform: translateY(-3px);
}
[data-theme="dark"] .offers .offer::after { color: var(--ice-deep); }
[data-theme="dark"] .offers .offer:hover::after { color: var(--ice); }

@media (max-width: 820px) {
  .offers .offer { padding-top: 4.4rem; }
  .offers .offer::after { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .offers .offer:hover::after { transform: none; }
}

/* The Work lede is now a claim rather than a description, so it sits closer
   to the headline it extends and holds a short measure. */
.work-lede {
  margin-top: var(--space-2);
  max-width: 34ch;
}

/* The offers had a background wash on hover, which drew the box outline on a
   section that otherwise has no boxes. The hairline and the numeral do the
   work instead, the same way the Framework cells behave. */
.offers .offer:hover { background-color: transparent; }

/* The lede reads better as one long line and one short one, so the measure
   widens to hold the first sentence whole. */
.work-lede { max-width: 68ch; }

/* The numeral sat flush against the section's top rule, and its box height was
   0.8, which is unpredictable: the glyph overflows its own line box by an
   amount that changes with the font size, so the clearance above the title
   moved between desktop and phone. Locking line-height to 1 makes the box
   the font size, and the small top offset lifts the numeral off the rule. */
.offers .offer::after { line-height: 1; top: 0.55rem; }
.offers .offer { padding-top: 5.8rem; }

@media (max-width: 820px) {
  .offers .offer,
  .offers .offer:first-child { padding-top: 4.6rem; }
  .offers .offer::after { top: 0.35rem; font-size: 3rem; }
}

/* The sage wash on hover goes back. It is the section's signature and it was
   right; only the numeral had changed underneath it. Dark mode still has no
   wash, because a lit panel on a black page reads as a flash. */
.offers .offer:hover { background-color: rgba(211, 222, 224, 0.4); }
[data-theme="dark"] .offers .offer:hover { background-color: transparent; }

/* On mobile, 02 and 03 were still colliding with their titles while 01 was
   clear. An earlier rule sets padding-top on `.offers .offer:not(:first-child)`,
   which outranks a plain `.offers .offer`, so only the first offer was taking
   the new spacing. Matching that specificity fixes the other two. */
@media (max-width: 820px) {
  .offers .offer,
  .offers .offer:first-child,
  .offers .offer:not(:first-child) { padding-top: 4.6rem; }
}

/* ==========================================================================
   PRINT · the audit profile is never emailed, so saving it as a PDF is how
   people keep it. Everything that is not the profile comes off the page, and
   dark mode is overridden, because a black page prints as a black page.
   ========================================================================== */

@media print {
  .site-header, .site-footer, .cta-row, #result-keep, .audit-org, .audit-nl,
  .theme-toggle, .nav-toggle, .site-nav { display: none !important; }

  /* the grain overlays are images: they would print as grey haze */
  .section::after, .hero::after, .nl-hero::after, .page-intro::after { display: none !important; }

  html, body,
  [data-theme="dark"] html, [data-theme="dark"] body {
    background: #fff !important;
    color: #000 !important;
  }
  [data-theme="dark"] * { color: #000 !important; background-color: transparent !important; }

  /* scroll reveal leaves elements at opacity 0 until they are seen */
  .reveal, [class*="reveal"] { opacity: 1 !important; transform: none !important; }

  .section { padding: 0 !important; }
  .audit-shell { max-width: none !important; }

  #audit-result::before {
    content: "Speak the Unspoken \2022  The Emotional Fluency Audit";
    display: block;
    font-family: var(--mono);
    font-size: 8pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }

  .result-block { break-inside: avoid; page-break-inside: avoid; }
  h2, h4 { break-after: avoid; page-break-after: avoid; }

  /* ── TYPE FOR PAPER, NOT FOR A SCREEN. Added 29 Sept 2026. ───────────────
     Eleni saved her profile and got a two-page document with the type at
     display size and a paragraph torn across the page break.

     THE CAUSE IS THAT EVERY SIZE ON THIS SITE IS A `clamp()` WITH A `vw`
     TERM, and in a print context vw resolves against the PAPER width, not a
     browser window. So the profile name printed at roughly its full hero
     size and the body ran long enough to break badly. `break-inside: avoid`
     could not save it, because a single paragraph taller than the remaining
     page has nowhere to go.

     Fixed pt values, because paper has no viewport. Nothing here affects
     the screen: this whole block is inside `@media print`.
     -------------------------------------------------------------------- */
  #audit-result .eyebrow { font-size: 7.5pt !important; letter-spacing: 0.18em; }
  #audit-result h2 {
    font-size: 21pt !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem !important;
  }
  #audit-result .lede {
    font-size: 11.5pt !important;
    line-height: 1.42 !important;
    max-width: none !important;
    margin-bottom: 0 !important;
  }
  #audit-result .result-block h4 { font-size: 7.5pt !important; margin-bottom: 0.35rem; }
  #audit-result .result-block p,
  #audit-result p {
    font-size: 10pt !important;
    line-height: 1.45 !important;
    max-width: none !important;
  }
  /* the blocks were spaced for a scrolling page, which on paper is what
     pushed the last two onto a second sheet */
  #audit-result .result-block { padding-top: 0.5rem !important; margin-top: 0.85rem !important; }
  #audit-result .audit-shell { padding: 0 !important; }

  @page { margin: 16mm; }
}

/* The audit result used to end on three buttons, which asked a reader who had
   just read something personal to become a client. The organisational ask is
   now a line rather than a button, so the right reader self-selects and
   everyone else is left with the Framework. */
.audit-org {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 56ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-quiet);
}
.audit-org a {
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .audit-org a:hover { border-bottom-color: var(--text-strong); }
}
[data-theme="dark"] .audit-org a { color: var(--text); border-bottom-color: rgba(211, 222, 224, 0.4); }

/* Shown only to the people who ticked the newsletter box on the way in. The
   rule down the left marks it as an aside rather than part of the profile. */
/* This line only appears for people who ticked the box, so it is the one
   thing on the results page they actually asked for. As quiet grey at
   0.93rem behind a hairline it read as a footnote and got scrolled past.
   It is now a tinted block in full body colour, with the link carrying a
   2px ice rule and the 500 weight so it reads as the action it is. */
.audit-nl {
  margin: 2rem 0 0;
  max-width: 56ch;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--ice-deep);
  background-color: rgba(143, 169, 174, 0.10);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text);
}
[data-theme="dark"] .audit-nl {
  background-color: rgba(211, 222, 224, 0.06);
  border-left-color: var(--ice);
}
.audit-nl a {
  color: var(--text-strong);
  font-weight: 500;
  border-bottom: 2px solid var(--ice-deep);
  padding-bottom: 1px;
  transition: border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .audit-nl a:hover { border-bottom-color: var(--text-strong); }
}
[data-theme="dark"] .audit-nl a { color: var(--text-strong); border-bottom-color: var(--ice); }
[data-theme="dark"] .audit-nl a:hover { border-bottom-color: var(--warm-off); }

/* --------------------------------------------------------------------------
   Dark mode headings. h1/h2/h3 carry no colour of their own, so on dark they
   inherited --text and landed on exactly the same value as body copy. At
   weight 300 on black that leaves size as the only signal, and a section title
   reads as a large paragraph. --text-strong exists for this; it was never
   applied. The inverse sections set their own colours at higher specificity
   and are unaffected.
   -------------------------------------------------------------------------- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   The hero marks. On desktop they stay three columns with a hairline under
   each, which is where the hero gets its structure. Below 820px that layout
   collapsed to three full-width stacked rows with rules, which reads as a
   menu rather than a hero. On a phone they become one middot line with a
   single rule, the same device the Work and Founder heroes use.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    max-width: none;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--hair);
  }
  .hero-marks li {
    padding-bottom: 0;
    font-size: clamp(0.62rem, 3vw, 0.75rem);
    letter-spacing: 0.1em;
  }
  .hero-marks li::after { display: none; }   /* the per-item rule goes */
  /* TWO RULES WERE STACKING under the three marks, 26 Sept 2026. `.hero-marks`
     draws one tight beneath the strip (above), and `.hero` draws its own
     border-bottom further down, so a phone showed two full-width lines a
     centimetre apart before The Philosophy. The tight one closes the strip and
     is the deliberate device; the hero's is redundant once it is there. */
  .hero--bleed { border-bottom: 0; }
  .hero-marks li + li::before {
    content: "\00B7";
    margin: 0 0.5rem;
    color: var(--logo-accent);
  }
}

/* --------------------------------------------------------------------------
   The practical line at the foot of each offer. Formats, durations, how a
   thing runs. Set quiet and in the mono face so the prose above it stays
   literary and the facts are findable without reading it.
   -------------------------------------------------------------------------- */
/* A list, not a sentence. As a flex row the items wrap as whole units, so a
   narrow window breaks it between formats instead of mid-phrase. Uppercase
   because DM Mono is monospaced, so capitals cost no extra width and read
   larger at the same size. */
.format-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  max-width: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
  /* Not --text-quiet. At this size that grey measured 3.83:1 on the deepest
     tinted offer, under the 4.5:1 floor, and it read as a caption rather than
     as content. One step darker than quiet, still well clear of body copy.
     Only DM Mono 400 is self-hosted, so weight is not available as a lever. */
  color: #5F5C58;
}
[data-theme="dark"] .format-detail { color: #A3A8A9; }
.format-detail li { display: inline-flex; align-items: baseline; }
.format-detail li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--ice-deep);
}
[data-theme="dark"] .format-detail li:not(:last-child)::after { color: var(--ice); opacity: 0.5; }
@media (max-width: 900px) {
  .format-detail { font-size: 0.64rem; letter-spacing: 0.06em; gap: 0.1rem 0.4rem; }
  .format-detail li:not(:last-child)::after { margin-left: 0.4rem; }
}
/* .prose p sets a reading measure and outranks .format-detail, so the line
   inside the Experience section needs the constraint lifted explicitly. */
.prose .format-detail { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Homepage Work — five standing panels.

   The section becomes one object: five columns in the same ice ladder the
   Work page uses, so the whole gradient is visible at once instead of five
   rows in a list. Hovering a panel opens it and compresses the rest.

   Built on a transitioned grid-template-columns rather than five animated
   flex children. One property interpolates for the whole row, so the motion
   is a single smooth movement instead of five that fight each other at the
   sub-pixel level. No JavaScript: :has() carries the state, which is the
   same technique the Audit and Newsletter sections already use.

   Direction means the same thing as on the Work page. 01 is the most public
   work, 05 is the smallest room, and the field darkens as the room shrinks.
   -------------------------------------------------------------------------- */

.wk-panels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  transition: grid-template-columns 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: var(--space-5) calc(-1 * var(--gutter)) 0;
  min-height: clamp(26rem, 42vw, 34rem);
}

@media (hover: hover) {
  .wk-panels:has(.wk-panel:nth-child(1):hover) { grid-template-columns: 3.1fr 1fr 1fr 1fr 1fr; }
  .wk-panels:has(.wk-panel:nth-child(2):hover) { grid-template-columns: 1fr 3.1fr 1fr 1fr 1fr; }
  .wk-panels:has(.wk-panel:nth-child(3):hover) { grid-template-columns: 1fr 1fr 3.1fr 1fr 1fr; }
  .wk-panels:has(.wk-panel:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 3.1fr 1fr; }
  .wk-panels:has(.wk-panel:nth-child(5):hover) { grid-template-columns: 1fr 1fr 1fr 1fr 3.1fr; }
}

.wk-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.9rem) clamp(0.95rem, 1.4vw, 1.4rem);
  color: inherit;
  text-decoration: none;
  background-color: var(--wk-tone);
  border-left: 1px solid rgba(15, 15, 13, 0.09);
}
.wk-panel:first-child { border-left: 0; }
[data-theme="dark"] .wk-panel { border-left-color: rgba(211, 222, 224, 0.11); }

/* Deeper than the Work page tints: at this scale a whisper reads as nothing */
.wk-panel:nth-child(1) { --wk-tone: #EFF1F0; }
.wk-panel:nth-child(2) { --wk-tone: #E5EAEB; }
.wk-panel:nth-child(3) { --wk-tone: #DAE2E3; }
.wk-panel:nth-child(4) { --wk-tone: #CCD8DA; }
.wk-panel:nth-child(5) { --wk-tone: #BCCCCF; }

[data-theme="dark"] .wk-panel:nth-child(1) { --wk-tone: #121415; }
[data-theme="dark"] .wk-panel:nth-child(2) { --wk-tone: #171B1C; }
[data-theme="dark"] .wk-panel:nth-child(3) { --wk-tone: #1D2223; }
[data-theme="dark"] .wk-panel:nth-child(4) { --wk-tone: #242A2B; }
[data-theme="dark"] .wk-panel:nth-child(5) { --wk-tone: #2C3436; }

.wk-pnum {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1;
  color: var(--logo-accent);
}
[data-theme="dark"] .wk-pnum { color: var(--ice-deep); }

/* The closed state: the name stands on its edge and runs the column. Top and
   bottom are both set so the text begins at the floor, climbs, and stops
   short of the numeral rather than colliding with it. */
.wk-pspine {
  position: absolute;
  left: clamp(0.95rem, 1.4vw, 1.4rem);
  top: clamp(3.4rem, 4.6vw, 4.3rem);
  bottom: clamp(1.2rem, 2vw, 1.9rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 300;
  /* Sized so the longest name, Moderation & Live Conversations, climbs to
     just under the numeral. The shorter names stop where they stop: one
     size across five different lengths is the only version that reads as
     typography rather than as a mistake. */
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
  color: var(--text-strong);
  /* Closing: the spine waits for the open block to clear before returning,
     so the two never overlap. Opening, the hover rule below overrides this
     with a fast exit and no delay. */
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.wk-popen {
  position: absolute;
  left: clamp(0.95rem, 1.4vw, 1.4rem);
  right: clamp(0.95rem, 1.4vw, 1.4rem);
  bottom: clamp(1.2rem, 2vw, 1.9rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0.35s;
}
.wk-pname {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.18;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
  text-wrap: pretty;
}
.wk-pline {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4A4A46;
  max-width: 44ch;
}
[data-theme="dark"] .wk-pline { color: var(--text-quiet); }

/* The choreography is timed against the 0.65s column move, so the text lands
   as the width settles rather than arriving into a column still travelling.
   Opening: the spine clears in 0.22s, the block starts at 0.2s and finishes
   at 0.7s. Closing runs the other way, block out first, spine back after. */
@media (hover: hover) {
  .wk-panel:hover .wk-pspine {
    opacity: 0;
    transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .wk-panel:hover .wk-popen {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s,
                transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s,
                visibility 0s;
  }
}
.wk-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.wk-panel:focus-visible .wk-pspine { opacity: 0; transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wk-panel:focus-visible .wk-popen {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s,
              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s,
              visibility 0s;
}

/* A phone cannot hold five columns, and rotated names on a narrow screen are
   unreadable. Below 820px the panels stack and everything is simply open. */
@media (max-width: 820px) {
  .wk-panels { grid-template-columns: 1fr; min-height: 0; }
  .wk-panel {
    border-left: 0;
    border-top: 1px solid rgba(15, 15, 13, 0.09);
    padding: 1.35rem var(--gutter) 1.5rem;
  }
  [data-theme="dark"] .wk-panel { border-top-color: rgba(211, 222, 224, 0.11); }
  .wk-panel:first-child { border-top: 0; }
  .wk-pspine { display: none; }
  .wk-popen {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    margin-top: 0.55rem;
  }
  .wk-pname { font-size: 1.2rem; }
  .wk-pline { font-size: 0.9rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-panels, .wk-pspine, .wk-popen { transition: none; }
}

/* --------------------------------------------------------------------------
   The five offers. Each one carries a faint ice tint at rest, deepening down
   the section. That gradient is not decoration: 01 is the most public work
   and 06 is the smallest room, so the page darkens as the room shrinks.

   On hover the tint steps once more and a hairline draws across the top,
   the same gesture the homepage offers use. Dark mode runs the same idea at
   roughly a third of the strength, because a wash on black reads as a flash.
   -------------------------------------------------------------------------- */

.formats { --tint-rgb: 143, 169, 174; }               /* ice-deep */
[data-theme="dark"] .formats { --tint-rgb: 211, 222, 224; }   /* ice */

.format { position: relative; }

/* Raised to roughly half the homepage panel depth. The tints were faded
   once because they fought the section rules above and below; those rules
   are now gone and the field bleeds instead, so the tone can carry weight.
   The deepest step holds 4.97:1 against the body colour, above the 4.5
   floor, which is what sets the ceiling. */
.formats .format:nth-child(1) { --band: #CFD8D8; --band-hover: #CAD5D5; }
.formats .format:nth-child(2) { --band: #D8DFDE; --band-hover: #D3DBDA; }
.formats .format:nth-child(3) { --band: #E1E6E4; --band-hover: #DDE2E1; }
.formats .format:nth-child(4) { --band: #EBEDEA; --band-hover: #E6E9E7; }
.formats .format:nth-child(5) { --band: #F5F4F0; --band-hover: #F0F0ED; }

[data-theme="dark"] .formats .format:nth-child(1) { --band: #222423; --band-hover: #272929; }
[data-theme="dark"] .formats .format:nth-child(2) { --band: #1D1E1D; --band-hover: #222323; }
[data-theme="dark"] .formats .format:nth-child(3) { --band: #171817; --band-hover: #1C1D1D; }
[data-theme="dark"] .formats .format:nth-child(4) { --band: #121211; --band-hover: #171817; }
[data-theme="dark"] .formats .format:nth-child(5) { --band: #0C0C0B; --band-hover: #111211; }

.formats .format {
  /* Solid, not rgba. The section carries band 01's colour so the field can
     start at the boundary, and a translucent band would then composite over
     that tint instead of over paper: every band came out deeper than set and
     the ladder collapsed into one tone. */
  background-color: var(--band);
  transition: background-color 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   The offers bleed, the way the homepage panels do.

   The field runs to both window edges and straight into the sections above
   and below, with no rules anywhere: the tone steps do the separating, so a
   hairline between bands would only be a seam. The section's own bottom
   padding and border go with them, which is what closes the paper gap.

   Reading position is unchanged. Each band pads by the gutter on the left
   and absorbs everything past 1200px on the right, so the text column sits
   exactly where it sits on every other page.
   -------------------------------------------------------------------------- */

/* The section itself carries the first band's tone, so the field begins at
   the section boundary instead of after a strip of paper. That strip was
   what put a second edge under the one the previous section already draws.
   The Work label now sits inside the field rather than above it, and band
   01 is the same value as the section, so there is no seam where it starts. */
.section:has(+ .section--formats) { border-bottom: 0; }
/* No top padding and no background of its own. The section used to carry
   band 01's colour so the field could start at the boundary, but that left a
   strip above the first offer holding the label, and the strip read as a
   sixth tone: the bands sit above the paper grain and the strip sat under
   it, so the same hex looked greyer there. The label now sits inside the
   field, the way it does on the homepage Founder panel, and the strip is
   gone entirely. */
.section--formats {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
/* Child combinator, deliberately. The base rule `.section > *:not(img)` is
   (0,1,1) and forces position:relative with z-index 2 on every direct child
   of a section. A single class loses to it, so the label stayed in flow, the
   top and left became relative offsets that shifted it a gutter too far
   right, and the field painted over it because .formats comes later at the
   same z-index. Two classes outrank it. */
.section--formats > .formats-label {
  position: absolute;
  z-index: 4;
  top: clamp(1.5rem, 3vw, 2.4rem);
  left: var(--gutter);
  margin: 0;
  padding: 0;
  /* Not the quiet grey the other labels use, and not the eyebrow tone either.
     Sitting on the deepest band this label has to hold its own, so it takes
     deepink on light and ice on dark. 10.90:1 and 11.37:1, near enough
     identical weight in both themes. */
  color: var(--deepink);
}
[data-theme="dark"] .section--formats > .formats-label { color: var(--ice); }
/* room for the label inside the first band */
.formats .format:first-child { padding-top: clamp(4.25rem, 7.5vw, 6.5rem); }

.formats {
  max-width: none;
  margin-inline: calc(-1 * var(--gutter));
  border-top: 0;
  border-bottom: 0;
}
.formats .format {
  border-bottom: 0;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), calc(100% - 1200px - var(--gutter)));
}
@media (max-width: 820px) {
  .formats .format { padding-right: var(--gutter); }
}

/* --------------------------------------------------------------------------
   The numerals: outlined at rest, filled on hover.

   Newsreader 200, the one weight the site owns and never spends, at a size
   the page has not used before. Drawn as an outline so a very large numeral
   can sit on a tinted band without shouting, then filling as the band
   deepens under the cursor. No new typeface and no new colour: the gesture
   is entirely weight and fill.

   Gated behind @supports because a browser without text-stroke would render
   transparent text on transparent, and the numeral would simply vanish.
   -------------------------------------------------------------------------- */

.formats .format-num {
  font-weight: 200;
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  letter-spacing: -0.01em;
  /* Newsreader's ascender clears its cap-height, and at 0.85 line-height the
     glyph overflows the top of its own box, so the numeral sat above the
     first line of text rather than beside it. The offset is in em so it
     tracks the clamp instead of drifting apart at one screen width. */
  margin-top: 0.12em;
}

@supports (-webkit-text-stroke: 1px currentColor) {
  @media (hover: hover) {
    .formats .format-num {
      color: transparent;
      -webkit-text-stroke: 1px var(--logo-accent);
      transition: color 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                  -webkit-text-stroke-color 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                  transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                  opacity 0.45s ease;
    }
    [data-theme="dark"] .formats .format-num { -webkit-text-stroke-color: var(--ice); }

    .formats .format:hover .format-num {
      color: var(--logo-accent);
      transform: translateY(-5px);
    }
    [data-theme="dark"] .formats .format:hover .format-num { color: var(--ice); }
  }
}

/* --------------------------------------------------------------------------
   The ladder, widened.

   Five steps across a 0.20 range put about 5 RGB points between neighbours,
   which is below what the eye separates: only the first band and the last
   read as different. The range is now 0.05 to 0.40, and the body text steps
   darker with it.

   Reversing the direction would not have helped. The step size is the
   problem, and it is the same in either direction. What actually caps the
   range is contrast, so the text has to move too. Because it darkens faster
   than the field does, legibility improves down the ladder rather than
   degrading: 5.84:1 at the top, 7.87:1 at the bottom.
   -------------------------------------------------------------------------- */

.formats .format-body .meta { color: #3F5C64; }
[data-theme="dark"] .formats .format-body .meta { color: var(--ice-deep); }

.formats .format:nth-child(1) .format-body p { color: #3A3A36; }
.formats .format:nth-child(2) .format-body p { color: #464642; }
.formats .format:nth-child(3) .format-body p { color: #50504C; }
.formats .format:nth-child(4) .format-body p { color: #585853; }
.formats .format:nth-child(5) .format-body p { color: #5F5F59; }

.formats .format:nth-child(1) .format-detail { color: #3A3835; }
.formats .format:nth-child(2) .format-detail { color: #464440; }
.formats .format:nth-child(3) .format-detail { color: #504E4A; }
.formats .format:nth-child(4) .format-detail { color: #585551; }
.formats .format:nth-child(5) .format-detail { color: #5F5C58; }

/* Dark mode inverts the relationship: the field lightens as it descends, so
   the quiet grey holds throughout and only the range widens. */
[data-theme="dark"] .formats .format .format-body p,
[data-theme="dark"] .formats .format .format-detail { color: var(--text-quiet); }

@media (prefers-reduced-motion: reduce) {
  .formats .format:hover .format-num { transform: none; }
}
@media (hover: hover) {
  .formats .format:hover { background-color: var(--band-hover); }
}

/* the hairline, drawn left to right, as everywhere else on the site */
.formats .format::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 1px; width: 0;
  background: var(--ice-deep);
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme="dark"] .formats .format::before { background: var(--ice); }
@media (hover: hover) {
  .formats .format:hover::before { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .formats .format, .formats .format::before { transition: none; }
}

/* The tint is now strong enough that the quiet body colour would drop under
   4.5:1 on the lower offers, so it steps one notch darker inside the blocks.
   Measured: #66665F holds 4.53:1 on the darkest row. */
.formats .format-body p:not(.format-lede) { color: #5F5F59; }
[data-theme="dark"] .formats .format-body p:not(.format-lede) { color: var(--text-quiet); }

/* the numeral deepens down the list too, so the gradient reads twice */
.formats .format:nth-child(1) .format-num { opacity: 1; }
.formats .format:nth-child(2) .format-num { opacity: 0.90; }
.formats .format:nth-child(3) .format-num { opacity: 0.80; }
.formats .format:nth-child(4) .format-num { opacity: 0.70; }
.formats .format:nth-child(5) .format-num { opacity: 0.60; }
.formats .format .format-num { transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), opacity 0.45s ease; }
@media (hover: hover) {
  .formats .format:hover .format-num { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Peers and Collaborators — the ink band on the Work page.

   It sits between the offers field and The Record for two reasons. The field
   ends at near-paper and The Record is paper, so without an interruption the
   two run together. And other people's words are the right thing to put
   between what Eleni claims about the work and what she claims about herself.

   Built as its own band rather than with .section--inverse. That class flips
   to a light field in dark mode and repaints everything inside it, which has
   caught this site twice. Here the band is dark in both themes: ink on paper
   pages, deepink on the black page so it still reads as a distinct field.

   The names are always visible and the quote is the thing that changes. All
   quotes are in the markup and render stacked with no script; the selector
   only exists once JS has added .tm--ready, so nothing depends on it.
   -------------------------------------------------------------------------- */

.tm-band { background: var(--ink); }
[data-theme="dark"] .tm-band { background: var(--deepink); }
.tm-band .grid-label,
[data-theme="dark"] .tm-band .grid-label { color: var(--ice-deep); }

.tm-item { margin: 0 0 var(--space-4); border: 0; padding: 0; }
.tm-item:last-child { margin-bottom: 0; }

.tm-item p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.4;
  color: var(--warm-off);
  max-width: 46ch;
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
.tm-cite { display: block; font-style: normal; }
.tm-name {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--warm-off);
}
.tm-role {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ice-deep);
  margin-top: 0.15rem;
}

/* --- once the script has run ------------------------------------------- */

/* The floor exists so the picker does not move when you switch quote. Measured at
   the widest desktop type (28.8px, 46ch): the quotes run 161px to 242px and the
   cite adds 35px, so the tallest is 277px. The old 13rem floor was BELOW that, and
   the row was already jumping before the role moved down here. 17.5rem covers it.
   RE-DERIVE THIS if a longer quote is added: _working/testimonials-eight.html. */
.tm--ready .tm-stage {
  min-height: clamp(12rem, 24vw, 17.5rem);
  margin-bottom: var(--space-4);
}
.tm--ready .tm-item { display: none; margin: 0; }
.tm--ready .tm-item.is-on { display: block; }
.tm--ready .tm-item p { margin-bottom: 0; }
/* THE PICKER CARRIES NAMES ONLY, and the role moves under the live quote, which is
   where a pull quote sets it anyway. This is what lets the row hold eight and scale
   to twelve: a role renders up to 314px against 134px for the widest name, so the
   role was setting every pick's width, never the name. Measured in
   _working/testimonials-eight.html, which runs this file and the real script. */
.tm-names .tm-role { display: none; }
.tm--ready .tm-cite { display: block; margin-top: var(--space-3); }

.tm-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(211, 222, 224, 0.2);
  padding-top: var(--space-3);
}
.tm-pick {
  background: transparent;
  border: 0;
  padding: 0.15rem 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
/* Resting states are dimmed, not faded out. At 0.45 the inactive names
   measured 4.15:1 on ink, under the floor, and the roles were far worse at
   1.73:1. These sit at 5.66:1 and 4.55:1, so every name in the row is
   readable whether or not it is the one being shown. */
.tm-pick .tm-name { color: rgba(244, 241, 235, 0.55); transition: color 0.35s ease; }
.tm-pick .tm-role { color: rgba(211, 222, 224, 0.62); transition: color 0.35s ease; }
.tm-pick[aria-selected="true"] .tm-name { color: var(--warm-off); }
.tm-pick[aria-selected="true"] .tm-role { color: var(--ice-deep); }
@media (hover: hover) {
  .tm-pick:hover .tm-name { color: var(--warm-off); }
  .tm-pick:hover .tm-role { color: var(--ice-deep); }
}
.tm-pick:focus-visible { outline: 2px solid var(--ice-deep); outline-offset: 4px; }

.tm--ready .tm-item p { transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tm--ready.is-swapping .tm-item p { opacity: 0; }

@media (max-width: 640px) {
  .tm--ready .tm-stage { min-height: clamp(12rem, 40vw, 16rem); }
  .tm-names { gap: 0.9rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tm--ready .tm-item p, .tm-pick .tm-name, .tm-pick .tm-role { transition: none; }
}

/* --------------------------------------------------------------------------
   The emotional fluency definition, homepage Framework section.

   It follows a personal paragraph and a claim about leaders, so as plain body
   copy it read as a third opinion rather than as the one fixed thing in the
   section. A hairline and the serif set it apart as a definition without
   inventing a new device: the rule is --hair, the same whisper every other
   secondary rule on the site uses.
   -------------------------------------------------------------------------- */

.fw-def {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hair);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-strong);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Homepage Work panels on a phone — the lit panel.

   Touch has no hover, so on a phone the five panels were inert while the
   desktop ones answered the cursor. initPanelFocus() in main.js adds .is-lit
   to whichever panel is crossing the middle of the screen, and this lights
   it: the tint deepens one step, the name steps to full tone and the hairline
   draws across the top. Exactly the desktop hover, driven by scroll position.

   Everything here is behind (hover: none) and 820px, so a desktop browser
   never applies it even if the class were somehow present. The JS also exits
   on coarse-pointer, width and reduced-motion checks before it observes
   anything, so this is inert on every other surface.
   -------------------------------------------------------------------------- */

@media (hover: none) and (max-width: 820px) {
  .wk-panel {
    position: relative;
    transition: background-color 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .wk-panel::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 1px; width: 0;
    background: var(--ice-deep);
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  [data-theme="dark"] .wk-panel::after { background: var(--ice); }
  .wk-panel:first-child::after { display: none; }

  .wk-pname,
  .wk-pline,
  .wk-pnum {
    transition: color 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* at rest the panel sits back a step */
  .wk-pname { color: var(--text); }
  .wk-pnum { opacity: 0.55; }

  .wk-panel.is-lit { background-color: var(--band-lit, var(--wk-tone)); }
  .wk-panel.is-lit::after { width: 100%; }
  .wk-panel.is-lit .wk-pname { color: var(--text-strong); }
  .wk-panel.is-lit .wk-pnum { opacity: 1; }

  /* one step deeper than the panel's own tone, matching the desktop hover */
  .wk-panel:nth-child(1).is-lit { --band-lit: #E9ECEB; }
  .wk-panel:nth-child(2).is-lit { --band-lit: #DFE5E4; }
  .wk-panel:nth-child(3).is-lit { --band-lit: #D5DDDD; }
  .wk-panel:nth-child(4).is-lit { --band-lit: #C9D5D6; }
  .wk-panel:nth-child(5).is-lit { --band-lit: #B7C7CA; }

  [data-theme="dark"] .wk-panel:nth-child(1).is-lit { --band-lit: #1A1C1B; }
  [data-theme="dark"] .wk-panel:nth-child(2).is-lit { --band-lit: #1F2120; }
  [data-theme="dark"] .wk-panel:nth-child(3).is-lit { --band-lit: #242726; }
  [data-theme="dark"] .wk-panel:nth-child(4).is-lit { --band-lit: #2A2E2E; }
  [data-theme="dark"] .wk-panel:nth-child(5).is-lit { --band-lit: #333B3C; }
}


/* ==========================================================================
   THE UNSPOKEN PHRASEBOOK
   Renders inside #audit-result, below the profile. No separate page.
   Screen: one continuous band on ice. Print (body.pbk-printing): five pages,
   profile hidden. Every colour is a palette value or a tested ice-deep value.
   ========================================================================== */

.pbk {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.75rem);
  background: var(--ice);
  position: relative;
}
[data-theme="dark"] .pbk { background: var(--deepink); }

.pbk-page + .pbk-page { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pbk-print { display: none; }          /* cover + print-only eyebrows */

.pbk-eyebrow {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--deepink); margin: 0 0 2rem;
}
[data-theme="dark"] .pbk-eyebrow { color: var(--ice); }

.pbk-title {
  font-family: var(--serif); font-weight: 200; font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.98; letter-spacing: -0.025em; color: var(--deepink);
  margin: 0 0 1.2rem; max-width: 12ch;
}
.pbk-title em { font-style: italic; font-weight: 300; }
.pbk-sub, .pbk-standfirst {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.42;
  color: var(--deepink); margin: 0 0 2.5rem; max-width: 34ch;
}
[data-theme="dark"] .pbk-title,
[data-theme="dark"] .pbk-sub,
[data-theme="dark"] .pbk-standfirst { color: var(--warm-off); }

/* --- the pairs ----------------------------------------------------------- */
.pbk-row, .pbk-q {
  display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem;
  padding-top: 1rem; border-top: 1px solid rgba(22, 36, 47, 0.16);
}
.pbk-row + .pbk-row, .pbk-q + .pbk-q { margin-top: 1.4rem; }
[data-theme="dark"] .pbk-row,
[data-theme="dark"] .pbk-q { border-top-color: rgba(211, 222, 224, 0.18); }

.pbk-num {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  color: var(--logo-accent); padding-top: 0.3rem;
}
[data-theme="dark"] .pbk-num { color: var(--ice-deep); }

.pbk-when {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.55;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deepink); margin: 0 0 1.05rem;
}
[data-theme="dark"] .pbk-when { color: var(--ice); }

.pbk-pair {
  display: grid; grid-template-columns: 7.2rem 1fr; column-gap: 1rem; row-gap: 0.95rem;
  align-items: baseline;
}
.pbk-lab {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--deepink); padding-top: 0.3rem;
}
[data-theme="dark"] .pbk-lab { color: var(--ice-deep); }

/* The one move. Same size, italic against roman, tone against ink. The rule
   runs down both, faint on the reflex and solid on the one to use. */
.pbk-said, .pbk-instead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.32rem); line-height: 1.32;
  letter-spacing: -0.009em; margin: 0;
  padding-left: 1rem; border-left: 2px solid;
}
.pbk-said {
  font-style: italic; color: var(--deep);
  border-left-color: rgba(22, 36, 47, 0.22);
  font-size: clamp(1.13rem, 2.16vw, 1.36rem);   /* 3% optical, italics read small */
}
.pbk-instead { color: var(--ink); border-left-color: var(--deepink); }
[data-theme="dark"] .pbk-said {
  color: var(--stone); border-left-color: rgba(211, 222, 224, 0.25);
}
[data-theme="dark"] .pbk-instead { color: var(--warm-off); border-left-color: var(--ice); }

.pbk-q-text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.32rem); line-height: 1.32;
  letter-spacing: -0.012em; color: var(--deepink); margin: 0;
}
[data-theme="dark"] .pbk-q-text { color: var(--warm-off); }

/* --- the outro ----------------------------------------------------------- */
.pbk-outro { background: var(--ice-deep); margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * clamp(1.5rem, 4vw, 2.75rem)) calc(-1 * clamp(2.25rem, 5vw, 3.25rem)); padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.75rem); }
.pbk-outro .pbk-eyebrow { color: #20323A; }
.pbk-ask {
  font-family: var(--serif); font-weight: 200; font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.04; letter-spacing: -0.024em; color: var(--deepink);
  margin: 0 0 1.1rem; max-width: 15ch;
}
.pbk-ask em { font-style: italic; font-weight: 300; }
.pbk-turn {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.42;
  color: var(--deepink); margin: 0 0 2rem; max-width: 32ch;
}
.pbk-keep {
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.7;
  color: var(--deepink); margin: 0 0 2.4rem; max-width: 36ch;
}
.pbk-line {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.25; letter-spacing: -0.012em; color: var(--deepink); margin: 0;
}
/* The outro keeps ice-deep in dark mode: it is the Founder panel's own field,
   and the tested values are all dark type, so it must not be flipped. */
[data-theme="dark"] .pbk-outro { background: var(--ice-deep); }
[data-theme="dark"] .pbk-outro .pbk-ask,
[data-theme="dark"] .pbk-outro .pbk-turn,
[data-theme="dark"] .pbk-outro .pbk-keep,
[data-theme="dark"] .pbk-outro .pbk-line { color: var(--deepink); }
[data-theme="dark"] .pbk-outro .pbk-eyebrow { color: #20323A; }

@media (max-width: 640px) {
  .pbk-pair { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .pbk-lab { padding-top: 0.6rem; }
}

/* ==========================================================================
   PRINT. Two modes, decided by body.pbk-printing, which audit.js sets before
   window.print() and clears afterwards.
   ========================================================================== */
@media print {
  /* default: the profile prints, the Phrasebook does not */
  body:not(.pbk-printing) .pbk { display: none !important; }

  /* card mode: only the Phrasebook prints */
  body.pbk-printing .audit-shell > *:not(.pbk) { display: none !important; }
  body.pbk-printing #audit-result::before { content: none !important; }

  body.pbk-printing .pbk {
    display: block !important; background: transparent !important;
    margin: 0 !important; padding: 0 !important;
  }
  body.pbk-printing .pbk-print { display: block !important; }
  body.pbk-printing .pbk-screen-head { display: none !important; }

  /* five pages */
  body.pbk-printing .pbk-page { break-after: page; page-break-after: always; margin: 0 !important; }
  body.pbk-printing .pbk-page:last-child { break-after: auto; page-break-after: auto; }
  body.pbk-printing .pbk-row,
  body.pbk-printing .pbk-q { break-inside: avoid; page-break-inside: avoid; }

  /* the cover drops its title a quarter down, as on screen it sits inline */
  body.pbk-printing .pbk-cover-body { margin-top: 28%; }

  /* fields print only if the reader ticks Background graphics. The type is
     deepink and ink throughout, so it stays readable on white either way. */
  body.pbk-printing .pbk-outro {
    background: var(--ice-deep) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    margin: 0 !important; padding: 2rem !important;
  }
  body.pbk-printing .pbk, body.pbk-printing .pbk * { color: #16242F !important; }
  body.pbk-printing .pbk-instead { color: #0F0F0D !important; }
}


/* The Phrasebook is the newsletter's gift, so this block shows to everyone and
   the copy changes for people who ticked the box. It is the only place on the
   result that asks for anything, and it is a link rather than a button, in
   keeping with .audit-org below it. */
.audit-nl-lede { margin: 0 0 0.85rem; }
.audit-nl-lede em { font-style: italic; }
.audit-nl-act { margin: 0; }
.audit-nl-act a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}