/* ============================================================================
   Amee Hardy, LLC — ameehardy.com
   ============================================================================

   VISUAL LANGUAGE — five named compositional moves, applied consistently to
   create identity through composition rather than decoration. Together they
   form the site's signature vocabulary.

   STRATUM
     Horizontal tonal layering. Every page is composed of paper-tone strata
     (paper-soft / paper / paper-deep / cream-warm) that have meaningful
     relationship to content. Lighter tones for breath and clearing; deeper
     tones for substance and close. The eye traverses the page through
     atmospheric layers, not through stacked rectangles.

   APERTURE
     Asymmetric tonal panels that open into a different tonal layer at
     moments of intellectual emphasis. The hero panel, the Framework section,
     the pull quote — all are apertures. Each carries the same atmospheric
     treatment: subtle light direction, soft edge fading, paper texture.
     Apertures are how the site reveals its depth.

   THRESHOLD
     A small typographic anchor that opens each section: a 24px hairline
     followed by the section numeral in italic Fraunces. Marks transitions
     between strata. Recurring across every page; the signature visual
     punctuation of the site.

   PACING
     Variable section heights (sm / base / lg / breath / cinematic) compose
     the page's emotional arc. Apertures plus cinematic-scale sections form
     the page's apex; tighter sections form opening and close. No two
     adjacent sections share the same weight.

   ITALIC AS CONCEPT
     Italic Fraunces is reserved exclusively for developmental concept words:
     capacity, skill, ownership, structure, growth, emergence. Italic carries
     meaning, not decoration. When the reader sees italic, they are reading
     a load-bearing term of the framework.

   INTERIOR
     The atmospheric layer. The page is not a screen — it is a series of
     rooms. A single light source enters from the upper left (135°) and
     governs every shadow on the site. Tonal panels read as alcoves recessed
     into the page wall (not cards raised above it). Shadows are long, soft,
     and warm-tinted; hairlines fade at their edges; the body carries a
     barely-perceptible diurnal grade — warmer at the upper left, cooler at
     the lower right. Cumulative, not declarative. Defined at the end of
     this file under "INTERIOR — environmental philosophy".

   ----------------------------------------------------------------------------
   Brand accents (sage / slate / terracotta) extracted from the CSO Framework
   logo. Paper palette in warm cream tones. Fraunces (display) + Source Serif
   4 (body) + Inter (UI).
============================================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces — light */
  --color-paper:        #F5EFE6;
  --color-paper-deep:   #EDE4D2;
  --color-paper-soft:   #FAF6EE;
  --color-white:        #FFFFFF;

  /* Surfaces — saturated (editorial color blocks) */
  --color-olive-deep:   #3D4A38;
  --color-olive:        #586249;
  --color-burgundy:     #5E2A26;
  --color-burgundy-warm: #6E3530;
  --color-terra-deep:   #A05333;
  --color-cream-warm:   #E8DCC4;

  /* Ink (text) */
  --color-ink:          #2A2724;
  --color-ink-muted:    #5A554D;
  --color-ink-subtle:   #877F73;
  --color-paper-muted:  rgba(245, 239, 230, 0.78);

  /* Rules and borders */
  --color-rule:         #D6CDBA;
  --color-rule-soft:    #E5DDCB;

  /* Brand accents — decorative use */
  --color-sage:         #8A9A7B;
  --color-slate:        #5B7A8A;
  --color-terra:        #C97B5E;

  /* Brand accents — text use (darker, AA-compliant on paper) */
  --color-sage-ink:     #5D6E4F;
  --color-slate-ink:    #355160;
  --color-terra-ink:    #9E4F30;

  /* Typography */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-serif:  "Source Serif 4", "Source Serif Pro", Iowan, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-xs:      0.8125rem;   /* 13px */
  --text-sm:      0.9375rem;   /* 15px */
  --text-base:    1.0625rem;   /* 17px */
  --text-lg:      1.1875rem;   /* 19px */
  --text-xl:      1.4375rem;   /* 23px */
  --text-2xl:     1.875rem;    /* 30px */
  --text-3xl:     2.5rem;      /* 40px */
  --text-4xl:     3.25rem;     /* 52px */
  --text-display: 4rem;        /* 64px */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 9rem;

  /* Layout */
  --container-max: 1180px;
  --container-narrow: 760px;
  --container-text: 640px;

  /* Misc */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --duration: 220ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, picture, svg { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Base ---------- */
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 600; }

p { line-height: var(--leading-relaxed); }
p + p { margin-top: var(--space-3); }

a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-terra);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
a:hover { text-decoration-color: var(--color-ink); }
a:focus-visible { outline: 2px solid var(--color-slate-ink); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--color-sage); color: var(--color-ink); }

/* ============================================================================
   SIGNATURE — the vertical line system. A single 1px hairline running the
   full height of <main> on every page, positioned at the left content area
   (approximately the column 2/3 boundary of the editorial grid).

   Manuscript-margin treatment. Functions like the rule in a printed book
   where marginalia would be written. Almost subconscious — visitors who
   look closely will see it; casual scrollers feel it as "something holding
   the page together" without knowing what.

   Site-wide: applies to every page with a <main>. Desktop only.
============================================================================ */

main {
  position: relative;
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(20px, calc(50% - 372px));
  width: 1px;
  background: rgba(42, 39, 36, 0.05);
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 899px) {
  main::before { display: none; }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus-visible { left: var(--space-3); top: var(--space-3); outline: 2px solid var(--color-terra); }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--space-7); }
.section--lg { padding-block: var(--space-8); }
.section--sm { padding-block: var(--space-6); }
.section--deep { background: var(--color-paper-deep); }
.section--soft { background: var(--color-paper-soft); }
.section--ink { background: var(--color-ink); color: var(--color-paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--color-paper); }

@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
  .section { padding-block: var(--space-8); }
  .section--lg { padding-block: var(--space-9); }
}

/* ---------- Type utilities ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
  display: inline-block;
}
.eyebrow--sage { color: var(--color-sage-ink); }
.eyebrow--slate { color: var(--color-slate-ink); }
.eyebrow--terra { color: var(--color-terra-ink); }

.display {
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  .display { font-size: var(--text-display); }
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 60ch;
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose li { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-ink); }
.prose ul, .prose ol { padding-left: var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  border-left: 3px solid var(--color-sage);
  padding-left: var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
}

/* ---------- Buttons ----------
   Softer wellness treatment: terracotta fill, gentle 10px radius, lighter
   weight, more generous padding, calm hover (no aggressive color invert). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.85rem;
  border: 1.5px solid var(--color-terra-ink);
  background: var(--color-terra-ink);
  color: var(--color-paper);
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing), border-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}
.btn:hover {
  background: #8B4327;
  border-color: #8B4327;
  transform: translateY(-1px);
}
.btn:focus-visible { outline: 2px solid var(--color-slate-ink); outline-offset: 3px; }

/* Ghost — outlined, no fill. Used for secondary actions. */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
  transform: translateY(-1px);
}

/* Olive — for secondary CTAs that want warmth without competing with terra */
.btn--olive {
  background: var(--color-olive-deep);
  border-color: var(--color-olive-deep);
  color: var(--color-paper);
}
.btn--olive:hover {
  background: #2E382B;
  border-color: #2E382B;
}

/* Ink — for moments where dark is right. Kept as an option. */
.btn--ink {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

/* Terra alias kept for backward-compat. Primary is already terra. */
.btn--terra { /* same as base */ }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--color-terra);
}
.link-arrow::after { content: "→"; transition: transform var(--duration) var(--easing); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow:hover { border-bottom-color: var(--color-ink); }

/* ---------- Forms ---------- */
.form-stack { display: grid; gap: var(--space-3); }

.field { display: grid; gap: var(--space-2); }
.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}
.field .hint { font-size: var(--text-xs); color: var(--color-ink-muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
  background: var(--color-white);
  border: 1.5px solid var(--color-rule);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-slate-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 122, 138, 0.18);
}

.newsletter {
  display: grid;
  gap: var(--space-3);
}
.newsletter__row {
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .newsletter__row {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
  .newsletter__row .btn { padding-block: 0.85rem; }
}

.newsletter input[type="email"] {
  background: var(--color-white);
  border: 1.5px solid var(--color-rule);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  font-size: var(--text-base);
}
.newsletter input[type="email"]:focus {
  border-color: var(--color-slate-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 122, 138, 0.18);
}
.newsletter__note { font-size: var(--text-xs); color: var(--color-ink-muted); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-rule-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-4);
}
/* Typography-only identity. The wordmark carries the authority — no graphic
   mark. Inspired by literary publication mastheads (The Paris Review,
   The New Yorker, Knopf): deliberate type, refined spacing, restrained
   size. The work is the brand. */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--color-ink);
}
.site-logo:hover { text-decoration: none; }
.site-wordmark {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: var(--text-xl);
  letter-spacing: 0.08em;
  color: var(--color-ink);
  line-height: 1;
}

.site-nav { display: none; }
.site-nav__list {
  display: flex;
  list-style: none;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  align-items: center;
}
.site-nav__list a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--duration) var(--easing);
}
.site-nav__list a:hover { border-bottom-color: var(--color-terra); }
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--color-ink); }

@media (min-width: 880px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
}

.nav-toggle {
  background: transparent;
  border: 1.5px solid var(--color-rule);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.nav-toggle:focus-visible { outline: 2px solid var(--color-slate-ink); outline-offset: 2px; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-rule-soft);
  background: var(--color-paper);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__list {
  list-style: none;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.mobile-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule-soft);
}
.mobile-nav__list li:last-child a { border-bottom: none; }
@media (min-width: 880px) { .mobile-nav, .nav-toggle { display: none !important; } }

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-8) var(--space-7);
  position: relative;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--color-terra);
  display: inline-block;
}
.hero__title { max-width: 18ch; margin-bottom: var(--space-4); }
.hero__lede { max-width: 56ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 768px) {
  .hero { padding-block: var(--space-9) var(--space-8); }
}

/* ---------- Page header (non-home) ---------- */
.page-header {
  padding-block: var(--space-7) var(--space-5);
  border-bottom: 1px solid var(--color-rule-soft);
}
.page-header__title { margin-bottom: var(--space-4); }
.page-header__lede { max-width: 56ch; }
@media (min-width: 768px) {
  .page-header { padding-block: var(--space-8) var(--space-6); }
  .page-header__title { font-size: var(--text-4xl); line-height: 1.08; }
}

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-asymmetric { grid-template-columns: 5fr 7fr; gap: var(--space-7); }
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-paper-soft);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card--bordered {
  background: transparent;
  border-color: var(--color-rule);
}

/* Layer cards (Capacity / Skill / Ownership) */
.layer-card {
  background: var(--color-paper-soft);
  border-top: 4px solid var(--color-rule);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.layer-card--capacity { border-top-color: var(--color-sage); }
.layer-card--skill    { border-top-color: var(--color-slate); }
.layer-card--ownership { border-top-color: var(--color-terra); }
.layer-card h3 { margin-bottom: var(--space-2); }
.layer-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.layer-card--capacity .layer-card__label { color: var(--color-sage-ink); }
.layer-card--skill .layer-card__label    { color: var(--color-slate-ink); }
.layer-card--ownership .layer-card__label { color: var(--color-terra-ink); }

/* Domain list (the 14 skill domains) */
.domain-group { margin-top: var(--space-5); }
.domain-group__heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-slate-ink);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.domain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 600px) {
  .domain-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-5); }
}
.domain-list li {
  font-size: var(--text-base);
  color: var(--color-ink);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-slate);
  line-height: var(--leading-snug);
  padding-block: var(--space-1);
}

/* ---------- Credential strip ---------- */
.creds {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .creds { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.cred__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}
.cred__value { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-snug); }

/* ---------- Writing list ---------- */
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-rule-soft);
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .entry { grid-template-columns: 180px 1fr; gap: var(--space-5); }
}
.entry__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.entry__category--essay   { color: var(--color-sage-ink); }
.entry__category--podcast { color: var(--color-slate-ink); }
.entry__category--press   { color: var(--color-terra-ink); }
.entry__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.entry__title a { text-decoration: none; }
.entry__title a:hover { text-decoration: underline; text-decoration-color: var(--color-terra); }
.entry__excerpt { color: var(--color-ink-muted); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-3);
}
.filter-bar button {
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: all var(--duration) var(--easing);
}
.filter-bar button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.filter-bar button:hover:not([aria-pressed="true"]) { border-color: var(--color-ink); color: var(--color-ink); }

/* ---------- Speaking ---------- */
.speaking-topics {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 768px) { .speaking-topics { grid-template-columns: repeat(2, 1fr); } }
.speaking-topics li {
  background: var(--color-paper-soft);
  border-left: 3px solid var(--color-slate);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}
.speaking-topics h4 { margin-bottom: var(--space-2); }
.speaking-topics p { color: var(--color-ink-muted); font-size: var(--text-sm); }

.appearance-list { list-style: none; padding: 0; }
.appearance-list li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule-soft);
  display: grid;
  gap: var(--space-1);
}
@media (min-width: 600px) {
  .appearance-list li { grid-template-columns: 140px 1fr; gap: var(--space-4); }
}
.appearance-list time {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.appearance-list strong { display: block; font-weight: 600; }
.appearance-list .venue { color: var(--color-ink-muted); font-size: var(--text-sm); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-7) var(--space-5);
  margin-top: var(--space-8);
}
.site-footer a { color: var(--color-paper); text-decoration-color: var(--color-terra); }
.site-footer a:hover { text-decoration-color: var(--color-paper); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--color-paper); }

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-7); }
}

.footer__sub {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(245, 239, 230, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  letter-spacing: 0.02em;
}

.footer-nav { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer-nav a {
  text-decoration: none;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.footer-nav a:hover { border-bottom-color: var(--color-terra); }

.footer .newsletter input[type="email"] {
  background: rgba(245, 239, 230, 0.08);
  border-color: rgba(245, 239, 230, 0.25);
  color: var(--color-paper);
}
.footer .newsletter input[type="email"]::placeholder { color: rgba(245, 239, 230, 0.55); }
.footer .newsletter input[type="email"]:focus {
  border-color: var(--color-paper);
  box-shadow: 0 0 0 3px rgba(245, 239, 230, 0.18);
}
.footer .btn {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.footer .btn:hover { background: transparent; color: var(--color-paper); }
.footer .newsletter__note { color: var(--color-ink-subtle); }

/* ---------- Inline framework mark (small SVG) ---------- */
.framework-mark {
  display: grid;
  place-items: center;
  margin-block: var(--space-5);
}

/* ---------- Misc utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ---------- Pull-quote ---------- */
.pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  max-width: 30ch;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-terra);
}

/* ---------- Note box ---------- */
.note {
  background: var(--color-paper-soft);
  border: 1px solid var(--color-rule-soft);
  border-left: 3px solid var(--color-slate);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.note strong { color: var(--color-ink); }


/* ============================================================================
   EDITORIAL LAYER — saturated color blocks, big display type, paper texture
============================================================================ */

/* Paper texture overlay — subtle fractal noise on the body. Slightly pushed
   from earlier so the paper feel is felt without being seen. */
body {
  background-color: var(--color-paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* Subtle page-level vignette — fixed to the viewport, follows the scroll.
   Almost imperceptible darkening at the page edges, like a printed page
   resting on a slightly darker surface. z-index sits below the header (50)
   so the sticky nav doesn't get darkened at its top edge. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px rgba(42, 39, 36, 0.045);
  z-index: 49;
}

/* Apply the same paper texture to colored sections so they read as paper
   surfaces, not flat color fields. Plus a subtle vertical light gradient
   (lighter at top, slightly darker at bottom) — suggests overhead light
   falling on the surface, like the hero panel. Atmospheric consistency
   across all colored zones. */
.section--paper-soft,
.section--paper-deep,
.section--cream-warm {
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 248, 235, 0.04) 0%,
      transparent 28%,
      transparent 72%,
      rgba(42, 39, 36, 0.022) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, repeat;
  background-blend-mode: normal, multiply;
  position: relative;
}

/* Soft top + bottom fades on colored sections — blurs hard section boundaries
   so the page reads as continuous paper, not stacked color blocks. The fade
   uses --color-paper as a default bleed; works because adjacent sections are
   mostly paper-toned. */
.section--paper-soft::before,
.section--paper-deep::before,
.section--cream-warm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: linear-gradient(to bottom, var(--color-paper) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.section--paper-soft::after,
.section--paper-deep::after,
.section--cream-warm::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: linear-gradient(to top, var(--color-paper) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.section--paper-soft > *,
.section--paper-deep > *,
.section--cream-warm > * {
  position: relative;
  z-index: 1;
}

/* Saturated section backgrounds (Vibrant Tapestry style) */
/* Subtle paper-tone variations — used to create dimensional layering through
   a page. Each step is 3-5% lightness apart; collectively they make the page
   feel like multiple subtly different surfaces rather than one flat field. */
.section--paper-soft { background-color: var(--color-paper-soft); }
.section--paper-deep { background-color: var(--color-paper-deep); }

/* Elevated card — a paper-tone plane that sits visibly above a colored
   section background. Used inside cream-warm sections to give content
   spatial layering. Quiet shadow tier, not card UI. */
.card-elevated {
  background: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow:
    0 10px 32px rgba(42, 39, 36, 0.06),
    0 2px 4px rgba(42, 39, 36, 0.04),
    inset 0 0 0 1px rgba(42, 39, 36, 0.03);
}
@media (min-width: 768px) {
  .card-elevated { padding: var(--space-6); }
}

/* On cream-warm sections, the placeholder uses the same typographic treatment
   as elsewhere — no card, no container. The slightly darker text color carries
   contrast against the warmer ground without needing a backing surface. */
.section--cream-warm .placeholder-block {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: rgba(42, 39, 36, 0.72);
}

.section--olive {
  background-color: var(--color-olive-deep);
  color: var(--color-paper);
  position: relative;
}
.section--burgundy {
  background-color: var(--color-burgundy);
  color: var(--color-paper);
  position: relative;
}
.section--terra-deep {
  background-color: var(--color-terra-deep);
  color: var(--color-paper);
  position: relative;
}
.section--cream-warm {
  background-color: var(--color-cream-warm);
  color: var(--color-ink);
  position: relative;
}
.section--olive h1, .section--olive h2, .section--olive h3, .section--olive h4,
.section--burgundy h1, .section--burgundy h2, .section--burgundy h3, .section--burgundy h4,
.section--terra-deep h1, .section--terra-deep h2, .section--terra-deep h3, .section--terra-deep h4 {
  color: var(--color-paper);
}
.section--olive .lede, .section--burgundy .lede, .section--terra-deep .lede {
  color: var(--color-paper-muted);
}
.section--olive a, .section--burgundy a, .section--terra-deep a {
  color: var(--color-paper);
  text-decoration-color: var(--color-cream-warm);
}

/* Display type — variable Fraunces, dramatic at large sizes */
.display-xl {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 50;
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
}
.display-xl em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 80;
}

.display-lg {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 120, "wght" 500;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}

.display-md {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 500;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Bracketed eyebrow (the [ A MODERN APPROACH TO... ] treatment) */
.bracket-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: currentColor;
  margin-bottom: var(--space-5);
}
.bracket-eyebrow::before,
.bracket-eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.5;
}
.bracket-eyebrow--mark::after { display: none; }

/* Wordmark/monogram for the brand mark used like Vibrant Tapestry's "TVT" */
.brand-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: currentColor;
  flex-shrink: 0;
}

/* Editorial mosaic grid — for photo + text + color block arrangements */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .editorial-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
  }
  .editorial-grid .col-3 { grid-column: span 3; }
  .editorial-grid .col-4 { grid-column: span 4; }
  .editorial-grid .col-5 { grid-column: span 5; }
  .editorial-grid .col-6 { grid-column: span 6; }
  .editorial-grid .col-7 { grid-column: span 7; }
  .editorial-grid .col-8 { grid-column: span 8; }
  .editorial-grid .col-9 { grid-column: span 9; }
  .editorial-grid .col-12 { grid-column: 1 / -1; }
}

/* Photo block — fully embedded. No shadow, no hairline. The photo's edge
   is defined only by the natural boundary between its content and the
   surface it sits on. Reads as part of the environment, not as an object
   placed on it. */
.photo-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-paper-deep);
}

/* Photo mat — kept available as a quieter alternative. Currently superseded
   by .image-anchor (architectural treatment) on the home hero. */
.photo-mat {
  display: block;
  padding: var(--space-3);
  background: var(--color-paper-soft);
  border-radius: var(--radius-sm);
  box-shadow:
    0 8px 24px rgba(42, 39, 36, 0.06),
    0 2px 4px rgba(42, 39, 36, 0.05),
    inset 0 0 0 1px rgba(42, 39, 36, 0.04);
  max-width: 100%;
  box-sizing: border-box;
}
.photo-mat .photo-block {
  box-shadow: inset 0 0 0 1px rgba(42, 39, 36, 0.05);
  border-radius: 2px;
}

/* Image anchor — architectural treatment for portraits. The photo is mounted
   on a paper-deep tonal panel that extends past the column to the right
   viewport edge (via box-shadow), grounding the image to a structural
   element of the page rather than floating it in a frame.

   Asymmetric integration: the page becomes "light left, deep right" in the
   sections where this treatment lives. The photo is no longer decorative —
   it's part of the page's tonal architecture. */
.image-anchor {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5) var(--space-5);
  background: var(--color-paper-deep);
  box-shadow: 100vw 0 0 var(--color-paper-deep);
}
.image-anchor figure {
  margin: 0;
}
.image-anchor .photo-block {
  box-shadow:
    0 4px 12px rgba(42, 39, 36, 0.10),
    inset 0 0 0 1px rgba(42, 39, 36, 0.06);
  border-radius: 2px;
}
.image-anchor figcaption {
  margin-top: var(--space-3);
  text-align: left;
}

/* Clip horizontal overflow so the right-bleed shadow doesn't cause scroll */
html, body {
  overflow-x: clip;
}

/* Hero background panel — extends paper-deep tone from viewport center to
   the right edge, spanning the FULL hero section height. Replaces the
   .image-anchor approach (which was bounded by photo content) with a panel
   bounded by the section. The portrait then sits IN this architectural
   zone rather than IN a card. Hidden below 900px (single-column mobile). */
.hero-bg-panel {
  display: none;
}
@media (min-width: 900px) {
  .hero-bg-panel {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    background-color: var(--color-paper-deep);
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
    /* Panel fades atmospherically at the bottom — doesn't end with a hard
       horizontal line. The page continues without a visible "chunk break." */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  /* Soft atmospheric fade at the panel's left edge. The hard color boundary
     between paper and paper-deep becomes a gentle 40px transition zone. */
  .hero-bg-panel::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    background: linear-gradient(
      to right,
      var(--color-paper) 0%,
      transparent 100%
    );
    pointer-events: none;
  }
  /* Diagonal atmospheric light — barely-perceptible gradient suggests a
     window-light source from the upper left. Replaces the previous vertical
     gradient. The panel now reads as an environment with directional light,
     not a uniformly-toned surface. The photo embedded within the panel
     sits in a particular light, not in front of a flat zone. */
  .hero-bg-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 248, 235, 0.05) 0%,
      transparent 40%,
      transparent 75%,
      rgba(42, 39, 36, 0.03) 100%
    );
    pointer-events: none;
  }
}

/* Ensure hero content sits above the panel */
.hero.hero--restrained > .container {
  position: relative;
  z-index: 1;
}
.photo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-block--portrait { aspect-ratio: 4 / 5; }
.photo-block--square { aspect-ratio: 1 / 1; }
.photo-block--landscape { aspect-ratio: 4 / 3; }
.photo-block--tall { aspect-ratio: 3 / 4; }
.photo-block--hero { aspect-ratio: 5 / 6; }
@media (min-width: 768px) {
  .photo-block--hero { aspect-ratio: 4 / 5; }
}

/* Placeholder photo block (for when commissioned photography arrives) */
.photo-placeholder {
  background: var(--color-cream-warm);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border: 1px dashed var(--color-rule);
}
.photo-placeholder span { max-width: 22ch; line-height: var(--leading-snug); }

/* Quiet block — a tonal panel used in place of imagery. Acts as a designed
   moment in its own right; not labeled as a placeholder. Swap the markup for
   <img> when commissioned photography arrives. */
.quiet-block {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.quiet-block--cream { background: var(--color-cream-warm); color: var(--color-ink); }
.quiet-block--sage  { background: var(--color-olive); color: var(--color-paper); }
.quiet-block--ink   { background: var(--color-ink); color: var(--color-paper); }
.quiet-block--portrait  { aspect-ratio: 4 / 5; }
.quiet-block--tall      { aspect-ratio: 3 / 4; }
.quiet-block--square    { aspect-ratio: 1 / 1; }

.quiet-block__phrase {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 80;
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  text-align: center;
  max-width: 16ch;
  margin: 0;
}

/* Optional ghosted rings ornament inside a quiet block */
.quiet-block__rings {
  position: absolute;
  inset: 0;
  background: url('cso-rings-small.png') center / 60% no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

/* Topographic contour decoration — positioned absolutely in a section corner.
   One canonical SVG; the corner classes flip it via CSS transforms. */
.botanical {
  position: absolute;
  pointer-events: none;
  opacity: 0.14;
  z-index: 0;
  overflow: hidden;
}
.botanical--top-right    { top: 0; right: 0; }
.botanical--top-left     { top: 0; left: 0; transform: scaleX(-1); }
.botanical--bottom-right { bottom: 0; right: 0; transform: scaleY(-1); }
.botanical--bottom-left  { bottom: 0; left: 0; transform: scale(-1, -1); }
.botanical svg {
  display: block;
  width: clamp(220px, 36vw, 460px);
  height: auto;
}
@media (max-width: 600px) {
  .botanical { display: none; }
}

/* Content layered above the botanical decoration */
.layer-content { position: relative; z-index: 1; }

/* Tagline pair — "ONLINE COUNSELING FOR..." stack used under display title */
.tagline-pair {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.7;
  color: currentColor;
}

/* Editorial pull-quote (large, in color block) */
.pull-quote-xl {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 50;
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

/* Override base h1 on editorial pages — let display utility classes do the work */
.section--olive h1, .section--burgundy h1, .section--terra-deep h1 {
  font-family: var(--font-display);
}

/* Numbered process steps (the "01 / 02 / 03" treatment) */
.process-step__number {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 400;
  font-size: var(--text-3xl);
  color: var(--color-terra);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}

/* Editorial card — text block with cream background sitting on color section */
.editorial-card {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
}
.editorial-card h2, .editorial-card h3 { color: var(--color-ink); }
.editorial-card .lede { color: var(--color-ink-muted); }
@media (min-width: 768px) {
  .editorial-card { padding: var(--space-6); }
}

/* Sticky-feeling section with photo + text side-by-side on the home hero */
.hero--editorial {
  padding-block: var(--space-6);
  position: relative;
}
@media (min-width: 900px) {
  .hero--editorial { padding-block: var(--space-7); }
}

/* Interlude band — a slim paper-toned section that gives the eye rest between
   saturated color blocks. Used for emotional pacing on dense pages. */
.section--interlude {
  background: var(--color-paper);
  padding-block: var(--space-6);
  text-align: center;
  position: relative;
}
@media (min-width: 768px) {
  .section--interlude { padding-block: var(--space-7); }
}
.interlude-phrase {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 80;
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-ink-muted);
  max-width: 28ch;
  margin-inline: auto;
}
.interlude-rule {
  width: 32px;
  height: 1px;
  background: var(--color-terra);
  margin: 0 auto var(--space-4);
  display: block;
}


/* ============================================================================
   RESTRAINED CALIBRATION (Delahooke + Siegel)
   Quieter components for the authority-site pass. Used opt-in alongside the
   existing editorial components so we can A/B before propagating.
============================================================================ */

/* Body served as serif for prose-forward pages. Opt-in via <body class="body-serif"> */
body.body-serif {
  font-family: var(--font-serif);
}

/* Plain eyebrow — small caps, no brackets, no decoration, modest weight */
.eyebrow-quiet {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* Restrained text-link CTA — primary visual is the underline + arrow, no chrome */
.link-quiet {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink-subtle);
  padding-bottom: 2px;
  transition: border-color var(--duration) var(--easing);
}
.link-quiet:hover { border-bottom-color: var(--color-ink); }
.link-quiet::after { content: "→"; transition: transform var(--duration) var(--easing); }
.link-quiet:hover::after { transform: translateX(2px); }

/* Restrained button — thin border, no fill, no terracotta */
.btn--quiet {
  background: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.7rem 1.4rem;
  border-radius: 2px;
  font-size: var(--text-sm);
}
.btn--quiet:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
  transform: none;
}

/* Restrained display heading — quieter than display-xl/lg, no extreme italics */
.display-restrained {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 500;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Quiet hero — text-only page headers for the non-Home pages. Moderate
   asymmetric padding (more top, less bottom) — substantial but not
   excessive for a hero that's just an eyebrow + headline + optional lede. */
.hero.hero--restrained {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  position: relative;
}
@media (min-width: 900px) {
  .hero.hero--restrained {
    padding-top: var(--space-8);
    padding-bottom: var(--space-7);
  }
}

/* Framework row — quiet layer treatment for prose-forward presentation */
.framework-rows {
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-5);
}
.framework-row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 600px) {
  .framework-row {
    grid-template-columns: 7rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}
.framework-row__label {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 400;
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-ink-muted);
  line-height: 1;
}
.framework-row__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: var(--text-lg);
  color: var(--color-ink);
  display: block;
  margin-bottom: var(--space-1);
}
.framework-row__desc {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Plain entry list — like a journal table of contents (no cards, no color) */
.entry-list--quiet .entry {
  border-bottom: 1px solid var(--color-rule);
}
.entry-list--quiet .entry:first-child { border-top: 1px solid var(--color-rule); }
.entry-list--quiet .entry__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-size: var(--text-xl);
}
.entry-list--quiet .entry__meta {
  color: var(--color-ink-subtle);
}
.entry-list--quiet .entry__category {
  color: var(--color-ink-muted) !important;
}

/* Quiet section transitions — single hairline rule above for section separation */
.section--quiet-rule {
  border-top: 1px solid var(--color-rule);
}

/* Visibly placeholder content. Used to mark text the founder will supply. */
.placeholder {
  color: var(--color-ink-subtle);
  font-style: italic;
}

/* Placeholder block — pure typographic treatment, no box.
   The small uppercase label says "this is placeholder"; the italic body
   does the work of being draft prose. Containment lives in the typography,
   not in a visible container. Editorial composition over interface design. */
.placeholder-block {
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  color: var(--color-ink-muted);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.placeholder-block strong {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-3);
}

/* Trust anchor — small italic line below the hero lede with one specific
   recent appearance/publication. Placeholder until the founder supplies a
   real reference. */
.trust-anchor {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-3);
}

/* ============================================================================
   STRATA — visual system devices for the restrained calibration.
   The work is about what supports what. Each device operates analogously to
   the framework's themes: layering, structure, relational architecture.
============================================================================ */

/* THRESHOLD — the site's signature section opener.
   A 24px horizontal hairline followed by an italic Fraunces section numeral.
   Marks every major transition between strata. Recurs across all pages as
   the site's recognizable typographic punctuation. References the apparatus
   of serious nonfiction without becoming decorative. */
.section-numeral {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wght" 400;
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-subtle);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--space-3);
}
.section-numeral::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}
.section-numeral .symbol {
  font-style: normal;
  margin-right: 0.2em;
}
.section--olive .section-numeral,
.section--burgundy .section-numeral,
.section--terra-deep .section-numeral,
.section--ink .section-numeral {
  color: var(--color-paper-muted);
}
.section--tone-capacity .section-numeral,
.section--tone-skill .section-numeral,
.section--tone-ownership .section-numeral {
  color: var(--color-ink-muted);
}

/* Vertical rule — single hairline alongside long-form content, echoing
   marginal commentary in classical texts. Subtle architectural support. */
.has-vertical-rule {
  position: relative;
}
.has-vertical-rule::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-rule);
}
@media (max-width: 768px) {
  .has-vertical-rule::before { left: -0.75rem; }
}

/* Tonal layering — faint background washes for the three CSO colors.
   Applied to the three layer sections on the Framework page. Almost invisible. */
.section--tone-capacity { background: rgba(138, 154, 123, 0.07); }
.section--tone-skill    { background: rgba(91, 122, 138, 0.07); }
.section--tone-ownership { background: rgba(201, 123, 94, 0.07); }
.section--tone-capacity .section-numeral,
.section--tone-skill .section-numeral,
.section--tone-ownership .section-numeral {
  color: var(--color-ink-muted);
}

/* Concept marker — italic Fraunces used ONLY for developmental terms.
   When italic appears, it means "this word names a developmental concept." */
.concept {
  font-style: italic;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
}

/* Editorial pacing — section with extra vertical breath. Used to slow
   the page's reveal and create gradual unfolding. */
.section--breath {
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .section--breath { padding-block: var(--space-9); }
}

/* Cinematic section — substantial vertical weight. Used sparingly for
   scene-break moments: a pull quote, a chapter opener, a featured display.
   Creates the sensation of "now we move to a different scene" rather than
   "another section below." Variation in scale = editorial rhythm. */
.section--cinematic {
  padding-block: var(--space-9);
}
@media (min-width: 768px) {
  .section--cinematic { padding-block: max(11rem, 14vh); }
}
@media (min-width: 1200px) {
  .section--cinematic { padding-block: max(13rem, 16vh); }
}

/* Interlude — a deliberate pause between sections. A single italic line
   alone on the page. Tightened from the previous breath-scale padding so
   the interlude is a quick pause, not a long breath. Creates rhythmic
   variation against the surrounding breath-scale sections. */
.interlude-single {
  padding-block: var(--space-6);
  text-align: center;
}
@media (min-width: 768px) {
  .interlude-single { padding-block: var(--space-7); }
}
.interlude-single__phrase {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 80;
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.35;
  color: var(--color-ink);
  max-width: 36ch;
  margin: 0 auto;
}

/* Spacious entry list — each entry gets more vertical breath. */
.entry-list--spacious .entry {
  padding-block: var(--space-5);
}
@media (min-width: 768px) {
  .entry-list--spacious .entry { padding-block: var(--space-6); }
}

/* Featured entry — the first entry in a list gets visibly more weight,
   creating internal hierarchy. Used to break uniform list rhythm. */
.entry--featured .entry__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 500;
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.entry--featured .entry__excerpt {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  max-width: 52ch;
}
.entry-list--spacious .entry--featured {
  padding-block: var(--space-6);
}
@media (min-width: 768px) {
  .entry-list--spacious .entry--featured { padding-block: var(--space-7); }
}


/* ============================================================================
   RIGOR — typographic apparatus for careful thinking.
   Added to support the test on the Framework page: definitions, counted
   structure, and proper bibliography. None should push the page academic.
============================================================================ */

/* Definitions list — dictionary-entry treatment. Bold term, italic part-of-
   speech, definition. Used to define key terminology with precision. */
.definitions-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
}
.definitions-list__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  margin: 0;
}
.definitions-list__item:first-child { border-top: 1px solid var(--color-rule); }
@media (min-width: 640px) {
  .definitions-list__item {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}
.definitions-list__term {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0;
}
.definitions-list__pos {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-subtle);
  margin-left: 0.3em;
}
.definitions-list__def {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.definitions-list__def em,
.definitions-list__def strong {
  font-style: normal;
}
.definitions-list__def strong {
  color: var(--color-ink);
}

/* Bibliography — numbered, hanging-indent reference list in APA-style */
.bibliography {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  counter-reset: bib;
}
.bibliography li {
  counter-increment: bib;
  padding-block: var(--space-3);
  padding-left: 3rem;
  position: relative;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-rule-soft);
}
.bibliography li:first-child { border-top: 1px solid var(--color-rule); }
.bibliography li::before {
  content: counter(bib, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-subtle);
  font-variation-settings: "opsz" 14, "wght" 400;
  width: 2.25rem;
  text-align: right;
}
.bibliography em,
.bibliography cite {
  font-style: italic;
  font-family: var(--font-serif);
}

/* Domain count — small fraction prefix on each domain item ("01 / 14") */
.domain-count {
  display: inline-block;
  width: 3.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-subtle);
  font-weight: 500;
  margin-right: 0.5rem;
  vertical-align: baseline;
}
.domain-list--counted li {
  border-left: none;
  padding-left: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.domain-list--counted li strong {
  color: var(--color-ink);
  font-weight: 600;
}
.domain-desc {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-muted);
}

/* ============================================================================
   TRUST SIGNALS — subtle, threaded into the page rhythm
============================================================================ */

/* Photo caption — small line beneath portrait. Credential + specific year. */
.photo-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
  line-height: var(--leading-snug);
  text-align: right;
}

/* Venue list — inline named venues, separated by middle dots. Replaces the
   single trust-anchor line; reads as a quiet CV listing, not a logo wall. */
.venue-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}
.venue-list li {
  display: inline;
}
.venue-list li:not(:last-child)::after {
  content: "·";
  margin: 0 0.45em;
  color: var(--color-ink-subtle);
  font-style: normal;
}

/* Footer affiliations — quiet single-line credential floor in the footer */
.footer__affiliations {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: rgba(245, 239, 230, 0.55);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
  border-top: 1px solid rgba(245, 239, 230, 0.12);
  line-height: var(--leading-snug);
}

/* ============================================================================
   PHOTO-FORWARD HERO (v2) — full-bleed portrait on the right, content on the
   left. The portrait fills the right half of the viewport from header to
   the bottom of the hero, extending edge-to-edge. Inspired by editorial /
   magazine cover treatments where the photo is co-equal with the type.
============================================================================ */

.hero-v2 {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: stretch;
  padding-block: 0;
  overflow: visible; /* allow photo to bleed past hero boundaries */
}

/* Asymmetric column split — photo slightly wider than content, breaking
   the geometric 50/50 balance without starving the text column. */
.hero-v2__content {
  flex: 1 1 46%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-7) var(--space-5) var(--space-7) max(var(--space-5), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
  max-width: 60%;
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .hero-v2__content {
    /* Vertical asymmetry — headline group anchored at top, supporting
       group anchored at the bottom. Creates intentional vertical tension
       within the content column. */
    justify-content: space-between;
    padding-top: max(8vh, 5rem);
    padding-bottom: var(--space-8);
    padding-right: var(--space-7);
    min-height: 88vh;
  }
}

.hero-v2__photo {
  flex: 1 1 54%;
  position: relative;
  background: var(--color-paper-deep);
  overflow: hidden;
}

/* Photo bleeds more dramatically below the hero — visually crosses the
   section boundary. Image dominates the right side and extends past the
   editorial container's bottom edge. */
@media (min-width: 900px) {
  .hero-v2__photo {
    transform: translateY(4rem);
    z-index: 3;
  }
}

/* Irregular alignment within the content column — eyebrow sits at slight
   indent, headline + lede + buttons flush left. Creates "layered alignment"
   without compounding the lede's column constraint into cramped wrapping. */
@media (min-width: 900px) {
  .hero-v2__eyebrow { padding-left: 2rem; }
  .hero-v2__lede { padding-left: 0; }
  .hero-v2__actions { padding-left: 0; }
}
.hero-v2__photo img {
  /* Strong film/cinematic grade — pushed further from corporate headshot
     toward editorial monograph portrait. Lower contrast, lower saturation,
     warmer tonal cast, slightly darker. Less digital, more printed-page. */
  filter: contrast(0.88) saturate(0.72) brightness(0.94) sepia(0.08);
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Original framing — face in upper third, slightly off-centered. The
     atmospheric treatment + vignette do the editorial work; the crop
     itself stays at the natural portrait composition. */
  object-position: center 30%;
  display: block;
}

/* Stronger paper-fiber/grain texture — more visible film grain quality.
   Pushed from 45% to 60% opacity for more pronounced atmosphere. */
.hero-v2__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
  z-index: 1;
}

/* Three-layer atmospheric overlay:
   1. Dramatic vignette — pronounced edge darkening for cinematic depth
   2. Left-edge soft fade — image dissolves into paper area at boundary,
      creating environmental integration with the content column
   3. Diagonal warm-to-shadow cast — suggests directional environmental light */
.hero-v2__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 110% 88% at center 45%,
      transparent 35%,
      rgba(42, 39, 36, 0.32) 100%
    ),
    linear-gradient(
      to right,
      rgba(245, 239, 230, 0.32) 0%,
      transparent 80px
    ),
    linear-gradient(
      135deg,
      rgba(245, 239, 230, 0.06) 0%,
      transparent 40%,
      rgba(42, 39, 36, 0.08) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* On mobile: stack vertically — photo on top (shorter), content below */
@media (max-width: 899px) {
  .hero-v2 {
    flex-direction: column;
    min-height: 0;
  }
  .hero-v2__content {
    max-width: 100%;
    padding: var(--space-7) var(--space-4);
    order: 2;
  }
  .hero-v2__photo {
    order: 1;
    min-height: 50vh;
  }
}

/* Hero typography — bolder than the restrained calibration */
.hero-v2__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
  display: inline-block;
}

.hero-v2__headline {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
  max-width: 14ch;
}
.hero-v2__headline em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 80;
}

/* Literary lede — set in Fraunces (display) at a sub-display size, weight 400.
   Wider max-width and reduced indent so prose can breathe without cramped
   wrapping. Cadence comes from line-height and margin, not from forced narrowness. */
.hero-v2__lede {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, "wght" 400;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--color-ink);
  margin-top: var(--space-6);
  max-width: 46ch;
  letter-spacing: -0.005em;
}

/* Small typographic anchor placed before the lede — a quiet 32px hairline
   that functions as compositional punctuation between the headline and the
   supporting text. Signals "now we shift voice." Editorial convention. */
.hero-v2__lede-mark {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-ink-subtle);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.hero-v2__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}


/* ============================================================================
   TRUST STRIP — quiet line of named venues / press / institutions below
   the hero. Typographic only — no logos. Reads as a CV line, not an "as
   seen in" marketing strip.
============================================================================ */

.trust-strip {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.trust-strip__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-3);
  display: block;
}
.trust-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-ink);
}
.trust-strip__list li {
  position: relative;
}
.trust-strip__list li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: calc(-1 * var(--space-3) - 0.2em);
  color: var(--color-ink-subtle);
}


/* ============================================================================
   LAYER CARDS (v2) — the three CSO Framework layers as a visual triptych.
   Each card carries its layer's brand color as a tonal accent. Visual
   presence without crossing into startup-card territory.
============================================================================ */

.layer-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .layer-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.layer-card-v2 {
  padding: var(--space-5);
  background: var(--color-paper);
  border-top: 3px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 200px;
}
.layer-card-v2--capacity { border-top-color: var(--color-sage); }
.layer-card-v2--skill { border-top-color: var(--color-slate); }
.layer-card-v2--ownership { border-top-color: var(--color-terra); }

.layer-card-v2__count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}
.layer-card-v2--capacity .layer-card-v2__count { color: var(--color-sage-ink); }
.layer-card-v2--skill .layer-card-v2__count { color: var(--color-slate-ink); }
.layer-card-v2--ownership .layer-card-v2__count { color: var(--color-terra-ink); }

.layer-card-v2__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 500;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0;
}
.layer-card-v2__desc {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
  flex-grow: 1;
}


/* ============================================================================
   WRITING CARD GRID — three card layout for selected writing entries.
   Each card has visual presence; the grid feels editorial, not list-like.
============================================================================ */

.writing-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .writing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.writing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-paper-soft);
  border: 1px solid var(--color-rule-soft);
  transition: border-color var(--duration) var(--easing);
}
.writing-card:hover { border-color: var(--color-rule); }

.writing-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}
.writing-card__category {
  color: var(--color-terra-ink);
  font-weight: 500;
}
.writing-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-ink);
}
.writing-card__title a { color: inherit; text-decoration: none; }
.writing-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.writing-card__excerpt {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
}


/* ============================================================================
   SECTION HEAD V2 — visible label + larger headline, more present than the
   restrained section-numeral approach. For sections that need editorial weight.
============================================================================ */

.section-head-v2 {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .section-head-v2 {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }
}
.section-head-v2__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 500;
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-head-v2__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-2);
  display: block;
}


/* Currently — small "what's in development" close. Replaces the SaaS-style
   newsletter close. Three short lines, quiet. */
.currently-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}
.currently-list li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}
.currently-list li:first-child { border-top: 1px solid var(--color-rule); }
@media (min-width: 600px) {
  .currently-list li {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}
.currently-list__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.currently-list__detail {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

/* Adapt restrained components for use on dark/saturated sections */
.section--olive .eyebrow-quiet,
.section--burgundy .eyebrow-quiet,
.section--terra-deep .eyebrow-quiet,
.section--ink .eyebrow-quiet {
  color: var(--color-paper-muted);
}
.section--olive .newsletter input[type="email"],
.section--burgundy .newsletter input[type="email"],
.section--terra-deep .newsletter input[type="email"],
.section--ink .newsletter input[type="email"] {
  background: rgba(245, 239, 230, 0.08);
  border-color: rgba(245, 239, 230, 0.28);
  color: var(--color-paper);
}
.section--olive .newsletter input[type="email"]::placeholder,
.section--burgundy .newsletter input[type="email"]::placeholder,
.section--terra-deep .newsletter input[type="email"]::placeholder,
.section--ink .newsletter input[type="email"]::placeholder {
  color: rgba(245, 239, 230, 0.55);
}
.section--olive .newsletter input[type="email"]:focus,
.section--burgundy .newsletter input[type="email"]:focus,
.section--terra-deep .newsletter input[type="email"]:focus,
.section--ink .newsletter input[type="email"]:focus {
  border-color: var(--color-paper);
  box-shadow: 0 0 0 3px rgba(245, 239, 230, 0.15);
}
.section--olive .newsletter__note,
.section--burgundy .newsletter__note,
.section--terra-deep .newsletter__note,
.section--ink .newsletter__note {
  color: var(--color-paper-muted);
}
.section--olive .btn--quiet,
.section--burgundy .btn--quiet,
.section--terra-deep .btn--quiet,
.section--ink .btn--quiet {
  border-color: var(--color-paper);
  color: var(--color-paper);
}
.section--olive .btn--quiet:hover,
.section--burgundy .btn--quiet:hover,
.section--terra-deep .btn--quiet:hover,
.section--ink .btn--quiet:hover {
  background: var(--color-paper);
  color: var(--color-ink);
}
.section--olive .link-quiet,
.section--burgundy .link-quiet,
.section--terra-deep .link-quiet,
.section--ink .link-quiet {
  color: var(--color-paper);
  border-bottom-color: rgba(245, 239, 230, 0.4);
}
.section--olive .link-quiet:hover,
.section--burgundy .link-quiet:hover,
.section--terra-deep .link-quiet:hover,
.section--ink .link-quiet:hover {
  border-bottom-color: var(--color-paper);
}

/* Wordmark used in section corners like a magazine masthead */
.section-mark {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "wght" 500;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  color: currentColor;
  z-index: 2;
}


/* ============================================================================
   INTERIOR — environmental philosophy
   ----------------------------------------------------------------------------
   The site is not a screen. It is a series of rooms in a clinician's working
   life. You move through them in a slow, deliberate sequence. This layer
   gives the page material depth: a single light source, long soft shadows,
   tonal alcoves recessed into the page wall, and a barely-perceptible
   atmospheric grade across the body.

   Five operating principles:

   1. ONE LIGHT SOURCE
      All shadows fall the same way: 135° (upper-left light, lower-right
      shadow). No competing lights. No glows. Nothing lit from below.

   2. RECESS OVER ELEVATE
      Where a zone needs to be marked (a tonal panel, a definitions block,
      the hero), it reads as an alcove pressed slightly INTO the page —
      subtle inner vignettes, top-edge highlights, bottom-right inner
      shadow. Not a card raised above the page.

   3. LONG, SOFT CAST SHADOWS
      Outer shadows (used sparingly — only on objects like photos that
      genuinely sit on the page) are long, low-opacity, warm-tinted. Like
      the shadow paper casts on a desk in afternoon light. Never the
      shadow a notification casts.

   4. ROOMS WITH WEATHER
      Each tonal section carries its own atmospheric character — a quiet
      diagonal grade from warm highlight to cool shadow. Cumulative, never
      declarative. The reader senses temperature without naming it.

   5. HAIRLINES FADE AT EDGES
      Rules don't terminate hard against their containers; they soften at
      the margins. A pencil mark that runs out of pressure, not a printed
      line that snaps off.

   All variables are scoped to --interior-* so the system is greppable and
   the existing palette tokens remain untouched.
============================================================================ */

:root {
  /* The single light angle. Used by every directional gradient and shadow. */
  --interior-light-angle: 135deg;

  /* Shadow vocabulary — all warm-tinted (uses ink, not pure black). */
  --interior-shadow-rest:
    18px 28px 64px -16px rgba(42, 39, 36, 0.14),
    4px 6px 14px -4px rgba(42, 39, 36, 0.06);
  --interior-shadow-deep:
    28px 44px 96px -20px rgba(42, 39, 36, 0.20),
    6px 10px 20px -6px rgba(42, 39, 36, 0.08);
  --interior-shadow-quiet:
    10px 16px 40px -12px rgba(42, 39, 36, 0.08);

  /* Alcove — inset shadow vocabulary. Reads as a recess pressed into the
     page wall: top-left highlight catching the light, bottom-right corner
     holding deeper shadow. */
  --interior-alcove:
    inset 1px 1px 0 0 rgba(255, 248, 235, 0.10),
    inset -1px -1px 0 0 rgba(42, 39, 36, 0.05),
    inset -40px -60px 120px -60px rgba(42, 39, 36, 0.08);
  --interior-alcove-deep:
    inset 1px 1px 0 0 rgba(255, 248, 235, 0.12),
    inset -1px -1px 0 0 rgba(42, 39, 36, 0.07),
    inset -50px -80px 140px -60px rgba(42, 39, 36, 0.12);

  /* Directional atmospheric grade — the diagonal "weather" across a room. */
  --interior-grade-paper: linear-gradient(
    var(--interior-light-angle),
    rgba(255, 248, 235, 0.10) 0%,
    rgba(255, 248, 235, 0.04) 22%,
    transparent 50%,
    rgba(42, 39, 36, 0.02) 78%,
    rgba(42, 39, 36, 0.05) 100%
  );
  --interior-grade-warm: linear-gradient(
    var(--interior-light-angle),
    rgba(255, 244, 222, 0.14) 0%,
    transparent 45%,
    rgba(94, 60, 38, 0.04) 100%
  );
  --interior-grade-cool: linear-gradient(
    var(--interior-light-angle),
    rgba(248, 250, 255, 0.10) 0%,
    transparent 45%,
    rgba(28, 36, 48, 0.05) 100%
  );

  /* Hairline-with-fade — use as background on a 1px-tall element. The line
     softens at both ends instead of terminating hard. */
  --interior-hairline-fade: linear-gradient(
    to right,
    transparent 0%,
    var(--color-rule) 12%,
    var(--color-rule) 88%,
    transparent 100%
  );
}


/* ----------------------------------------------------------------------------
   DIURNAL GRADE — the fixed atmospheric overlay above the page texture.
   A single barely-perceptible diagonal cast across the entire viewport.
   Suggests one room, one window, one source. Z-index 48 sits below the
   existing edge vignette (49) and the header (50).
---------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 60% at 18% 12%,
      rgba(255, 244, 222, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 55% at 92% 96%,
      rgba(42, 39, 36, 0.045) 0%,
      transparent 65%
    );
  z-index: 48;
}


/* ----------------------------------------------------------------------------
   ALCOVE — tonal sections read as recessed planes, not raised cards.
   Applies to every tonal panel that currently exists. The directional inset
   shadow draws the eye toward the upper-left highlight; the lower-right
   carries the deeper shadow of the recess.

   Stacked carefully: existing ::before and ::after on these sections handle
   top/bottom paper fades — this rule adds the alcove via box-shadow, which
   layers above the existing texture without disturbing it.
---------------------------------------------------------------------------- */
.section--paper-soft,
.section--paper-deep,
.section--cream-warm {
  box-shadow: var(--interior-alcove);
}

/* The three tone sections on the Framework page — currently flat 7% washes.
   The alcove and a directional grade turn each into a small room. */
.section--tone-capacity,
.section--tone-skill,
.section--tone-ownership {
  position: relative;
  box-shadow: var(--interior-alcove);
  overflow: hidden;
}
.section--tone-capacity::before,
.section--tone-skill::before,
.section--tone-ownership::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--interior-grade-paper);
  pointer-events: none;
  z-index: 0;
}
.section--tone-capacity > *,
.section--tone-skill > *,
.section--tone-ownership > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
   ROOM WEATHER — directional grade on tonal panels. The atmospheric cast
   sits above the panel's existing color + texture but below its content.
   On paper-deep we use the warm grade; on paper-soft a softer cast; on
   cream-warm a more pronounced warm grade since cream is the warmest room.
---------------------------------------------------------------------------- */
.section--paper-soft {
  background-image:
    var(--interior-grade-paper),
    linear-gradient(
      to bottom,
      rgba(255, 248, 235, 0.04) 0%,
      transparent 28%,
      transparent 72%,
      rgba(42, 39, 36, 0.022) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
}
.section--paper-deep {
  background-image:
    var(--interior-grade-warm),
    linear-gradient(
      to bottom,
      rgba(255, 248, 235, 0.04) 0%,
      transparent 28%,
      transparent 72%,
      rgba(42, 39, 36, 0.025) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
}
.section--cream-warm {
  background-image:
    var(--interior-grade-warm),
    linear-gradient(
      to bottom,
      rgba(255, 248, 235, 0.05) 0%,
      transparent 28%,
      transparent 72%,
      rgba(42, 39, 36, 0.028) 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, multiply;
}


/* ----------------------------------------------------------------------------
   SATURATED ROOMS — the same single-light treatment for dark sections.
   Olive, burgundy, and ink sections feel like the same building with the
   walls painted and the lights dimmed, not a different structure entirely.
---------------------------------------------------------------------------- */
.section--olive,
.section--burgundy,
.section--ink {
  position: relative;
  box-shadow: var(--interior-alcove-deep);
}
.section--olive::after,
.section--burgundy::after,
.section--ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--interior-light-angle),
    rgba(255, 244, 222, 0.06) 0%,
    transparent 38%,
    transparent 70%,
    rgba(0, 0, 0, 0.18) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.section--olive > *,
.section--burgundy > *,
.section--ink > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
   PHOTOGRAPH AS OBJECT — the headshot is the only place a real cast shadow
   is earned. A long, soft, warm-tinted shadow makes the photo sit on the
   page rather than float inside the screen. Direction: 135° (same as the
   light governing every other shadow on the site).

   Two targets:
     .photo-block (used on About/Speaking quiet-block style placements)
     .hero-v2__photo (the photo-forward hero on Home and Speaking)
---------------------------------------------------------------------------- */
.photo-block {
  position: relative;
}
.photo-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: var(--interior-shadow-rest);
  border-radius: inherit;
  z-index: -1;
}

/* Hero-v2 photo: already has its own atmospheric overlay; this adds the
   external cast shadow that ties it to the page surface. The shadow lives
   on a pseudo-element layered behind the photo so it doesn't compete with
   the photo's existing inner treatment. */
.hero-v2__photo {
  position: relative;
}
.hero-v2 {
  position: relative;
}
.hero-v2::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 4%;
  right: 0;
  width: 54%;
  pointer-events: none;
  box-shadow: var(--interior-shadow-deep);
  z-index: 0;
}
@media (max-width: 899px) {
  .hero-v2::before { display: none; }
}


/* ----------------------------------------------------------------------------
   ELEVATED CARD — re-tune to single-light direction. Cards still cast a
   shadow (they sit on the wall), but the shadow now matches the room's
   light angle rather than radiating uniformly.
---------------------------------------------------------------------------- */
.card-elevated {
  box-shadow:
    18px 26px 56px -18px rgba(42, 39, 36, 0.12),
    4px 6px 12px -4px rgba(42, 39, 36, 0.05),
    inset 1px 1px 0 0 rgba(255, 248, 235, 0.18),
    inset 0 0 0 1px rgba(42, 39, 36, 0.03);
}


/* ----------------------------------------------------------------------------
   HAIRLINE EDGE FADE — rules soften at the margins instead of terminating
   hard. Applied to the section-divider rules above sections with the
   .section--quiet-rule class.
---------------------------------------------------------------------------- */
.section--quiet-rule {
  position: relative;
}
.section--quiet-rule::before {
  /* If the original ::before exists (paper-soft/deep/cream-warm fades), this
     selector targets only sections that are quiet-rule WITHOUT a colored
     parent treatment. For colored quiet-rules, the original ::before
     already handles the fade. */
}
/* A new top-edge faded hairline for any section that wants explicit
   above-rule separation without a hard line. Stand-alone utility. */
.rule-fade-top {
  position: relative;
}
.rule-fade-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--interior-hairline-fade);
  pointer-events: none;
}


/* ----------------------------------------------------------------------------
   MANUSCRIPT MARGIN RULE — extend the existing main::before signature line
   with vertical edge-fading. The line no longer terminates at the top of
   <main> and the bottom of the page; it dissolves at both ends.
---------------------------------------------------------------------------- */
main::before {
  /* Mask fades the line at top and bottom so it doesn't end with a hard
     terminus. The line carries the page; the page is not terminated by
     the line. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}


/* ----------------------------------------------------------------------------
   QUIET-BLOCK ALCOVE — placeholder photo block and quiet block carry the
   same recessed treatment as tonal sections. They read as small windows
   set into the page wall.
---------------------------------------------------------------------------- */
.quiet-block {
  box-shadow: var(--interior-alcove);
}

.quiet-block .ghost-rings {
  /* if rings exist inside a quiet-block, ensure they don't darken under
     the new inset vignette */
  z-index: 1;
}


/* ----------------------------------------------------------------------------
   FOOTER — the page closes in the deepest room of the building. Inherits
   the single-light angle so the footer feels like an evening study, not a
   separate page.
---------------------------------------------------------------------------- */
.site-footer {
  position: relative;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--interior-light-angle),
    rgba(255, 244, 222, 0.04) 0%,
    transparent 35%,
    transparent 70%,
    rgba(0, 0, 0, 0.22) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.site-footer > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
   REDUCED MOTION / PERFORMANCE — the interior layer is purely visual; no
   animation is added by this section. The only motion-sensitive consideration
   is the diurnal grade overlay (body::before) which is fixed-position. We
   keep it on for reduced-motion users since it doesn't move; but we surface
   the variable so a future opt-out is trivial.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* no-op; placeholder for future calibration */
}

/* ============================================================================
   END INTERIOR
============================================================================ */


/* ============================================================================
   WHITEPAPER — long-form editorial styling for monograph-scale pieces.
   First use: cso-framework.html (the CSO Framework v9 whitepaper).
============================================================================ */

/* Whitepaper hero — eyebrow, large display title, subtitle, byline, epigraph. */
.whitepaper-hero {
  padding-block: var(--space-7) var(--space-6);
}
@media (min-width: 768px) {
  .whitepaper-hero { padding-block: var(--space-9) var(--space-7); }
}
.whitepaper-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: var(--space-4);
}
.whitepaper-hero__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 500;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 18ch;
}
.whitepaper-hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 80;
}
.whitepaper-hero__subtitle {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 400;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.32;
  color: var(--color-ink);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 48ch;
}
.whitepaper-hero__byline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
  margin: 0;
}
.whitepaper-hero__byline strong {
  font-weight: 600;
  color: var(--color-ink);
}
.whitepaper-hero__epigraph {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-soft);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 400;
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 40ch;
}

/* Whitepaper meta — read time, date, download link */
.whitepaper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule-soft);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.whitepaper-meta > span:not(:last-child)::after {
  content: " ·";
  margin-left: var(--space-4);
  color: var(--color-rule);
}
.whitepaper-meta a {
  color: var(--color-ink);
  text-decoration-color: var(--color-terra);
}

/* Whitepaper body — long-form prose container. */
.whitepaper-body {
  max-width: 64ch;
  margin-inline: auto;
}
.whitepaper-body p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .whitepaper-body p {
    font-size: var(--text-lg);
    line-height: 1.65;
  }
}
.whitepaper-body p + p { margin-top: 0; }

/* Section headings inside the whitepaper */
.whitepaper-section {
  margin-top: var(--space-8);
}
.whitepaper-section__numeral {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}
.whitepaper-section__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  max-width: 26ch;
}
.whitepaper-section__title em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 60;
}
.whitepaper-subsection__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.25;
  color: var(--color-ink);
  margin: var(--space-6) 0 var(--space-3);
  max-width: 32ch;
}
.whitepaper-subsection__title em {
  font-style: italic;
  font-variation-settings: "opsz" 48, "wght" 400, "SOFT" 60;
}

/* Callout — a short pull-quote-style block for principles and definitions */
.whitepaper-callout {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 2px solid var(--color-terra);
  background: rgba(245, 239, 230, 0.5);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 400;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.whitepaper-callout strong {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  display: block;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

/* Whitepaper list — slightly larger and more breathable than default ul/ol */
.whitepaper-body ol,
.whitepaper-body ul {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}
.whitepaper-body ol li,
.whitepaper-body ul li {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.65;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .whitepaper-body ol li,
  .whitepaper-body ul li { font-size: var(--text-lg); }
}

/* Domain card — used for each of the 14 Skill domains. Capacity question
   prominent at top; two-column "skill indicators" + "development focus";
   four-stage ownership arc at the bottom. Recessed alcove treatment. */
.domain-card {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--interior-alcove);
  position: relative;
}
@media (min-width: 768px) {
  .domain-card { padding: var(--space-6) var(--space-7); }
}
.domain-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.domain-card__num {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.domain-card__group {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terra-ink);
}
.domain-card__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "wght" 500;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
.domain-card__question {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 400;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-rule-soft);
  max-width: 56ch;
}
.domain-card__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .domain-card__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.domain-card__col-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: var(--space-3);
}
.domain-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.domain-card__list li {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
  position: relative;
  color: var(--color-ink);
}
.domain-card__list li::before {
  content: "·";
  position: absolute;
  left: var(--space-2);
  color: var(--color-terra);
  font-weight: 700;
}

/* Ownership arc — four stages, equal widths, recessed sub-panel */
.domain-card__arc {
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-soft);
}
.domain-card__arc-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: var(--space-4);
}
.domain-card__arc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .domain-card__arc-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}
.domain-card__stage {
  padding: var(--space-3) var(--space-3);
  background: rgba(232, 220, 196, 0.35);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-sage-ink);
}
.domain-card__stage:nth-child(2) { border-left-color: var(--color-slate-ink); }
.domain-card__stage:nth-child(3) { border-left-color: var(--color-terra); }
.domain-card__stage:nth-child(4) { border-left-color: var(--color-terra-ink); }
.domain-card__stage-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  display: block;
  margin-bottom: var(--space-2);
}
.domain-card__stage-desc {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0;
}

/* Assessment-architecture table */
.whitepaper-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
}
.whitepaper-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: bottom;
}
.whitepaper-table tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-rule-soft);
  vertical-align: top;
  line-height: 1.55;
}
.whitepaper-table tbody td:first-child {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 600;
  font-size: var(--text-lg);
  color: var(--color-ink);
  width: 3rem;
}

/* ICF competency block — practitioner-facing alignment list */
.icf-block {
  margin: var(--space-5) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-rule-soft);
}
.icf-block__competency {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "wght" 500;
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}
.icf-block__competency em {
  font-style: italic;
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
}

/* Bibliography in the whitepaper body */
.whitepaper-body .bibliography {
  margin-top: var(--space-5);
}

/* Section-break rule used inside essay body — a faded centered hairline
   that punctuates major scene shifts. Used by writing-*.html essays. */
.whitepaper-rule {
  border: 0;
  height: 1px;
  background: var(--interior-hairline-fade);
  margin: var(--space-7) auto;
  width: 100%;
  max-width: 12rem;
}

/* Editorial prose — softer, italic, slightly muted typographic treatment
   matching the placeholder-block visual register, but used for final copy.
   This is the founder voice in body sections: italic body with roman
   emphasis (italic-on-italic would lose its accent). Use on <p> elements
   inside about.html and framework.html prose sections. */
.editorial-prose {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
  max-width: 56ch;
}
.editorial-prose em {
  font-style: normal;
}
.editorial-prose strong {
  font-style: normal;
  color: var(--color-ink);
}

/* End-of-document fine print */
.whitepaper-coda {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  text-align: center;
}
.whitepaper-coda strong {
  display: block;
  margin-bottom: var(--space-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: var(--color-ink);
}

/* ============================================================================
   END WHITEPAPER
============================================================================ */


/* ============================================================================
   CSO SUMMARY CARDS — PDF one-pager-style C/S/O variable cards. Three
   tinted cards across the top of framework.html, immediately after the
   hero, so a reader sees the framework's three variables before any
   scroll. Mirrors the PDF: giant letter as visual anchor, bold layer
   name, short description.
============================================================================ */
.cso-summary-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (min-width: 700px) {
  .cso-summary-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.cso-summary-card {
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 240px;
}
.cso-summary-card--capacity {
  background: rgba(155, 178, 138, 0.18);
  border-top: 4px solid var(--color-sage-ink);
}
.cso-summary-card--skill {
  background: rgba(120, 152, 173, 0.16);
  border-top: 4px solid var(--color-slate-ink);
}
.cso-summary-card--ownership {
  background: rgba(232, 195, 175, 0.32);
  border-top: 4px solid var(--color-terra);
}

.cso-summary-card__letter {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 600;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
}
.cso-summary-card--capacity .cso-summary-card__letter { color: var(--color-sage-ink); }
.cso-summary-card--skill .cso-summary-card__letter { color: var(--color-slate-ink); }
.cso-summary-card--ownership .cso-summary-card__letter { color: var(--color-terra-ink); }

.cso-summary-card__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 600;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.1;
  margin: 0;
}
.cso-summary-card--capacity .cso-summary-card__name { color: var(--color-sage-ink); }
.cso-summary-card--skill .cso-summary-card__name { color: var(--color-slate-ink); }
.cso-summary-card--ownership .cso-summary-card__name { color: var(--color-terra-ink); }

.cso-summary-card__desc {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
}


/* ============================================================================
   DOMAIN GRID — PDF one-pager-style domain cards. Used in framework.html
   §04 to render all 14 Skill domains as a visual reference grid. Each card
   carries: a small uppercase label (D1 · Activation Capacity), a bold display
   subtitle ("Getting started"), and a short italic-muted description.
   Color-coded left border cycles through the brand palette per card.
============================================================================ */
.domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 700px) {
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .domain-grid { grid-template-columns: repeat(3, 1fr); }
}

.domain-grid__card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule-soft);
  border-left: 3px solid var(--color-sage-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--interior-alcove);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.domain-grid__card:nth-child(3n+2) { border-left-color: var(--color-slate-ink); }
.domain-grid__card:nth-child(3n+3) { border-left-color: var(--color-terra); }

.domain-grid__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}
.domain-grid__card:nth-child(3n+1) .domain-grid__label { color: var(--color-sage-ink); }
.domain-grid__card:nth-child(3n+2) .domain-grid__label { color: var(--color-slate-ink); }
.domain-grid__card:nth-child(3n+3) .domain-grid__label { color: var(--color-terra-ink); }

.domain-grid__subtitle {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}
.domain-grid__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
}

.domain-grid-group {
  margin-top: var(--space-7);
}
.domain-grid-group + .domain-grid-group {
  margin-top: var(--space-8);
}
.domain-grid-group__heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.domain-grid-group__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}


/* ============================================================================
   OWNERSHIP STAGES — four-stage arc card grid used inside the §03 Ownership
   section on framework.html. Lifts the inner-domain stage treatment up to a
   top-level component, giving the four stages (Activate / Stabilize /
   Empower / Sustain) their own visual presence on the page.
============================================================================ */
.ownership-stages {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .ownership-stages {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-5);
  }
}
@media (min-width: 1000px) {
  .ownership-stages {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.ownership-stage {
  padding: var(--space-5) var(--space-5);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-sage-ink);
  box-shadow: var(--interior-alcove);
  position: relative;
}
.ownership-stage:nth-child(2) { border-left-color: var(--color-slate-ink); }
.ownership-stage:nth-child(3) { border-left-color: var(--color-terra); }
.ownership-stage:nth-child(4) { border-left-color: var(--color-terra-ink); }

.ownership-stage__num {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: var(--space-2);
}
.ownership-stage__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}
.ownership-stage__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  margin: 0;
}
.ownership-stage__desc strong {
  font-style: normal;
  color: var(--color-ink);
}

/* ============================================================================
   NEWSLETTER POP-UP (MailerLite)
   Custom-styled overlay in the site's design language. Wired to MailerLite
   via fetch in main.js. Shows once per visitor. Honors reduced-motion.
============================================================================ */
.ml-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 39, 36, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ml-popup[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
.ml-popup__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-paper-soft);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(42, 39, 36, 0.45);
  padding: 40px 36px 34px;
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.4s ease;
}
.ml-popup[data-open="true"] .ml-popup__card {
  transform: translateY(0) scale(1);
}
.ml-popup__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--color-ink-subtle);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.ml-popup__close:hover { color: var(--color-ink); }
.ml-popup__close:focus-visible { outline: 2px solid var(--color-sage-ink); outline-offset: 2px; }
.ml-popup__rings {
  width: 56px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}
.ml-popup__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.72rem;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.ml-popup__title em {
  font-style: italic;
  color: var(--color-sage-ink);
}
.ml-popup__body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0 0 22px;
}
.ml-popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ml-popup__input {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 13px 14px;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  width: 100%;
  box-sizing: border-box;
}
.ml-popup__input:focus-visible {
  outline: none;
  border-color: var(--color-sage-ink);
  box-shadow: 0 0 0 3px rgba(93, 110, 79, 0.18);
}
.ml-popup__button {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 13px 18px;
  border: 1.5px solid var(--color-sage-ink);
  border-radius: var(--radius-sm);
  background: var(--color-sage-ink);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ml-popup__button:hover { background: #47543c; border-color: #47543c; }
.ml-popup__button:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.ml-popup__button[disabled] { opacity: 0.6; cursor: default; }
.ml-popup__fine {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-ink-subtle);
  margin: 12px 0 0;
}
.ml-popup__error {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #b3261e;
  margin: 8px 0 0;
  min-height: 1em;
}
.ml-popup__success {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.ml-popup__success strong {
  font-family: var(--font-display);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .ml-popup,
  .ml-popup__card { transition: none; }
  .ml-popup__card { transform: none; }
}

/* ============================================================================
   LETTER CUES — quoted example phrases inside long-form letters/essays
============================================================================ */
.letter-cues {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-sage-ink);
  background: var(--color-paper-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  list-style: none;
}
.letter-cues li {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-2);
}
.letter-cues li:last-child { margin-bottom: 0; }