/* loukim.com — styles.css
   v0.3 — Phase 3 design system: reset, tokens, type atoms, components.
   Source of truth: SPEC.md §5 (Design System).
*/

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* Surfaces — warm, not cold */
  --c-cream:        #F7F1E6;
  --c-cream-deep:   #EFE7D6;
  --c-paper:        #FAF5EC;
  --c-ink:          #1B1A17;
  --c-ink-soft:     #4A4640;
  --c-ink-mute:     rgba(27, 26, 23, 0.55);
  --c-cream-mute:   rgba(247, 241, 230, 0.65);

  /* Accents */
  --c-ember:        #C04A2A;
  --c-ember-deep:   #963820;
  --c-ember-tint:   rgba(192, 74, 42, 0.04);
  --c-clay:         #5A6E4A;
  --c-sage:         #8A9A78;
  --c-marigold:     #D89A3C;
  --c-iris:         #7C3FAC;
  --c-iris-deep:    #5E2A87;
  --c-iris-tint:    rgba(124, 63, 172, 0.06);

  /* Functional */
  --c-line:         rgba(27, 26, 23, 0.10);
  --c-line-strong:  rgba(27, 26, 23, 0.20);
  --c-line-cream:   rgba(247, 241, 230, 0.20);

  /* Type families */
  --f-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (fluid) */
  --t-eyebrow: clamp(11px, 0.9vw, 13px);
  --t-caption: clamp(13px, 1vw, 15px);
  --t-body:    clamp(16px, 1.1vw, 18px);
  --t-lead:    clamp(19px, 1.5vw, 23px);
  --t-h3:      clamp(24px, 2vw, 32px);
  --t-h2:      clamp(36px, 5vw, 64px);
  --t-h1:      clamp(48px, 8vw, 112px);
  --t-mega:    clamp(56px, 9vw, 128px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --space-10: 152px;

  /* Layout */
  --gutter:      clamp(24px, 5vw, 80px);
  --section-pad: clamp(80px, 12vw, 168px);
  --max-w:       1240px;
  --prose-w:     680px;

  /* Motion */
  --t-fast:   150ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   2. RESET
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--c-ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-base) var(--ease);
}

a:hover { color: var(--c-ember-deep); }

ul, ol { list-style: none; }

::selection {
  background: var(--c-ember);
  color: var(--c-cream);
}

/* =========================================================================
   3. ACCESSIBILITY
   ========================================================================= */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-weight: 500;
  text-decoration: none;
  transition: top var(--t-base) var(--ease);
}

.skip-to-content:focus {
  top: var(--space-4);
  color: var(--c-cream);
}

:focus-visible {
  outline: 2px solid var(--c-ember);
  outline-offset: 3px;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   4. TYPOGRAPHY ATOMS
   ========================================================================= */

h1, .h1 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

h2, .h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

h3, .h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--c-ink);
}

.mega {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-mega);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.lead {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.caption {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

.body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-ink);
}

.eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow--rule::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
}

.eyebrow--clay { color: var(--c-clay); }
.eyebrow--sage { color: var(--c-sage); }
.eyebrow--iris { color: var(--c-iris); }

/* The italic accent word — brand signature.
   .alive defaults to ember; .alive--iris uses violet for moments of "magic" (Passion page, etc). */
.alive,
em.alive {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-ember);
}

.alive--iris,
em.alive--iris {
  color: var(--c-iris);
}

/* On inverted (ink) sections, accents shift to cream tints. */
.section--inverted h1,
.section--inverted h2,
.section--inverted h3,
.section--inverted .h1,
.section--inverted .h2,
.section--inverted .h3,
.section--inverted .mega { color: var(--c-cream); }
.section--inverted .lead { color: var(--c-cream-mute); }
.section--inverted .body { color: var(--c-cream); }
.section--inverted .caption { color: var(--c-cream-mute); }

/* =========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.section--cream      { background: var(--c-cream); color: var(--c-ink); }
.section--cream-deep { background: var(--c-cream-deep); color: var(--c-ink); }
.section--paper      { background: var(--c-paper); color: var(--c-ink); }
.section--inverted   { background: var(--c-ink); color: var(--c-cream); }

.prose {
  max-width: 64ch;
  margin-inline: auto;
}

.prose > * + * {
  margin-block-start: var(--space-5);
}

.prose .lead + p { margin-block-start: var(--space-6); }

/* =========================================================================
   6. BUTTONS + LINKS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 14px 28px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--c-ember);
  color: var(--c-cream);
}

.btn--primary:hover {
  background: var(--c-ember-deep);
  color: var(--c-cream);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: var(--c-ink-soft);
}

.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}

.section--inverted .btn--ghost {
  color: var(--c-cream);
  border-color: var(--c-cream);
}

.section--inverted .btn--ghost:hover {
  background: var(--c-cream);
  color: var(--c-ink);
}

.btn--small {
  padding: 12px 20px;
  font-size: 11px;
}

/* Text link — italic Fraunces, ember underline. */
.text-link {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  color: var(--c-ember);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  transition: color var(--t-base) var(--ease);
}

.text-link:hover {
  color: var(--c-ink);
}

.section--inverted .text-link {
  color: var(--c-ember);
}

.section--inverted .text-link:hover {
  color: var(--c-cream);
}

.text-link__arrow {
  font-style: normal;
  font-family: var(--f-body);
}

/* =========================================================================
   7. EYEBROWS / SECTION LABELS
   ========================================================================= */

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

/* =========================================================================
   8. PULL QUOTES
   ========================================================================= */

.pull-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.35;
  color: var(--c-ink);
  border-left: 3px solid var(--c-ember);
  padding: var(--space-5) var(--space-6);
  background: var(--c-ember-tint);
  margin-block: var(--space-7);
  max-width: 64ch;
}

.pull-quote--iris {
  border-left-color: var(--c-iris);
  background: var(--c-iris-tint);
}

/* Named villain attribution — "— The Boomer Trap" beneath the pull quote. */
.pull-quote__cite {
  display: block;
  margin-block-start: var(--space-4);
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
}

.pull-quote__cite::before {
  content: '— ';
}

.section--inverted .pull-quote {
  color: var(--c-cream);
  background: rgba(247, 241, 230, 0.04);
}

.section--inverted .pull-quote--iris {
  border-left-color: var(--c-iris);
  background: rgba(124, 63, 172, 0.10);
}

/* =========================================================================
   9. PHOTO FRAMES
   ========================================================================= */

.photo-frame {
  position: relative;
  overflow: hidden;
}

.photo-frame--portrait { aspect-ratio: 4 / 5; }
.photo-frame--landscape { aspect-ratio: 16 / 9; }
.photo-frame--square { aspect-ratio: 1 / 1; }
.photo-frame--4-3 { aspect-ratio: 4 / 3; }
.photo-frame--3-2 { aspect-ratio: 3 / 2; }

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04) brightness(0.98);
}

/* Film grain overlay (per SPEC §5.4.5, §7.7). */
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.photo-frame__caption {
  display: block;
  margin-block-start: var(--space-4);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-caption);
  color: var(--c-ink-mute);
}

.photo-frame__caption::before {
  content: '— ';
}

/* =========================================================================
   10. SECTION DIVIDERS
   ========================================================================= */

.divider {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: var(--space-8) auto;
}

.section--inverted .divider {
  background: var(--c-line-cream);
}

/* =========================================================================
   11. FORMS
   ========================================================================= */

.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
}

.subscribe-form__input {
  flex: 1 1 240px;
  padding: 14px 16px;
  background: transparent;
  color: inherit;
  border: 1px solid var(--c-cream-mute);
  border-radius: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  transition: border-color var(--t-base) var(--ease);
}

.subscribe-form__input::placeholder {
  color: var(--c-cream-mute);
}

.subscribe-form__input:focus {
  outline: 0;
  border-color: var(--c-ember);
}

.section--cream .subscribe-form__input,
.section--cream-deep .subscribe-form__input,
.section--paper .subscribe-form__input {
  border-color: var(--c-line-strong);
}

.section--cream .subscribe-form__input::placeholder,
.section--cream-deep .subscribe-form__input::placeholder,
.section--paper .subscribe-form__input::placeholder {
  color: var(--c-ink-mute);
}

.subscribe-confirmation {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  color: var(--c-cream);
  line-height: 1.55;
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.section--cream .subscribe-confirmation,
.section--cream-deep .subscribe-confirmation,
.section--paper .subscribe-confirmation {
  color: var(--c-ink);
}

/* =========================================================================
   12. UTILITY
   ========================================================================= */

.center { text-align: center; }
.stack-1 > * + * { margin-block-start: var(--space-1); }
.stack-2 > * + * { margin-block-start: var(--space-2); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.stack-7 > * + * { margin-block-start: var(--space-7); }
.stack-8 > * + * { margin-block-start: var(--space-8); }

/* Photo frame: edge-to-edge variant (no aspect ratio constraint). */
.photo-frame--full {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   13. NAV (per SPEC §5.4.1)
   ========================================================================= */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.site-nav.is-scrolled {
  background: var(--c-cream);
  border-bottom-color: var(--c-line);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--gutter);
  max-width: var(--max-w);
  margin-inline: auto;
}

.site-nav__brand {
  display: block;
  padding: 4px 0;
  margin-inline-end: auto;
  text-decoration: none;
}

.site-nav__logo {
  height: 32px;
  width: auto;
  display: block;
}

.site-nav__links {
  display: flex;
  gap: var(--space-6);
}

.site-nav__link {
  position: relative;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color var(--t-base) var(--ease);
}

.site-nav__link:hover { color: var(--c-ember); }

.site-nav[data-current="start-here"] .site-nav__link[data-page="start-here"]::after,
.site-nav[data-current="work"] .site-nav__link[data-page="work"]::after,
.site-nav[data-current="passion"] .site-nav__link[data-page="passion"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 16px;
  height: 1px;
  background: var(--c-ember);
}

.site-nav__cta {
  margin-inline-start: var(--space-5);
}

.site-nav__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-inline-start: auto;
}

.site-nav__menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--c-ink);
  transition: transform var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease);
}

.site-nav__menu-sheet {
  position: fixed;
  inset: 0;
  background: var(--c-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-9) var(--gutter) var(--space-6);
  gap: var(--space-4);
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease);
  z-index: 99;
  visibility: hidden;
}

.site-nav__menu-sheet.is-open {
  transform: translateY(0);
  visibility: visible;
}

.site-nav__menu-sheet a {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

@media (max-width: 860px) {
  .site-nav__links,
  .site-nav__cta {
    display: none;
  }
  .site-nav__menu-toggle {
    display: flex;
  }
}

/* =========================================================================
   14. HERO (per SPEC §6.1 §1)
   ========================================================================= */

.hero {
  min-height: 100vh;
  background: var(--c-cream);
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: stretch;
  padding-top: 88px; /* clearance for fixed nav */
}

.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--gutter);
  max-width: 640px;
  margin-inline-start: auto;
}

.hero__h1 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-mega);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.hero__sub {
  max-width: 38ch;
}

.hero__right {
  position: relative;
  overflow: hidden;
}

.hero__right .photo-frame {
  width: 100%;
  height: 100%;
}

.hero__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__right {
    height: 60vh;
    min-height: 400px;
    order: -1;
  }
  .hero__left {
    margin-inline: auto;
    padding-block: var(--space-7) var(--space-8);
  }
}

/* =========================================================================
   15. PROBLEM (per SPEC §6.1 §2) — inverted ink
   ========================================================================= */

.problem {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.problem__inner {
  max-width: 64ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

.problem h2 { color: var(--c-cream); max-width: 24ch; }

/* Centered pull quote variant: replaces left border with a top rule for visual symmetry. */
.problem .pull-quote {
  color: var(--c-cream);
  background: transparent;
  border-left: 0;
  border-top: 3px solid var(--c-ember);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  max-width: 56ch;
}

.problem .body { color: var(--c-cream); max-width: 56ch; }

/* =========================================================================
   16. GUIDE (per SPEC §6.1 §3)
   ========================================================================= */

.guide {
  background: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.guide__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 50fr 45fr;
  gap: var(--space-9);
  align-items: center;
}

.guide__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.guide__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

.guide__subhead {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-ink-soft);
  margin-block-start: calc(var(--space-2) * -1);
}

.guide__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (max-width: 860px) {
  .guide__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* =========================================================================
   16b. THE PLAN (restored per Lou's redline 2026-05-11)
   ========================================================================= */

.plan {
  background: var(--c-cream-deep);
  color: var(--c-ink);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.plan__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.plan__h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  max-width: 14ch;
  margin-block-end: var(--space-9);
}

.plan__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.plan__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan__numeral {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  color: var(--c-ember);
  margin-block-end: var(--space-2);
}

.plan__step-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--c-ink);
  margin-block-end: var(--space-2);
}

@media (max-width: 860px) {
  .plan__steps {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .plan__h2 {
    margin-block-end: var(--space-8);
  }
}

.plan__subtext {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin-block-start: var(--space-8);
}

.two-paths__subline {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-ember);
  margin-block: calc(var(--space-2) * -1) var(--space-2);
}

.two-paths__panel--passion .two-paths__subline {
  color: var(--c-clay);
}

.work-bonfire__links {
  margin-block-start: var(--space-3);
  line-height: 2.2;
}

.work-bonfire__link {
  color: var(--c-cream);
}

.work-bonfire__link:hover {
  color: var(--c-ember);
}

/* =========================================================================
   19b. NEWSLETTER BLOCK — shared CTA component used on all 4 main pages
   ========================================================================= */

.newsletter-block {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  text-align: center;
}

.newsletter-block--cream-deep {
  background: var(--c-cream-deep);
  color: var(--c-ink);
}

.newsletter-block__inner {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* Long-paragraph H2 — sized smaller than typical H2 so longform copy reads cleanly. */
.newsletter-block__h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.45;
  letter-spacing: 0;
  color: inherit;
  max-width: 60ch;
}

/* Imperative variant (Passion) — short, stacked lines, larger size. */
.newsletter-block__h2--imperative {
  font-style: normal;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

/* Italic iris line that follows the imperative (Passion only). */
.newsletter-block__declaration {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--c-iris);
}

.newsletter-block__body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: inherit;
  max-width: 56ch;
  opacity: 0.85;
}

.newsletter-block--cream-deep .newsletter-block__body { opacity: 1; color: var(--c-ink-soft); }

/* Uniform supporting line: "Subscribe to The Unfinished Letter." */
.newsletter-block__supporting {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  color: inherit;
}

.newsletter-block__secondary {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-caption);
  color: inherit;
  opacity: 0.7;
  margin-block-start: var(--space-3);
}

.newsletter-block .subscribe-form {
  margin-block-start: var(--space-3);
}

/* =========================================================================
   20. SUBSCRIBE MODAL (top-nav SUBSCRIBE opens this; in-page forms stay inline)
   ========================================================================= */

.modal-subscribe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.modal-subscribe.is-open {
  display: flex;
}

.modal-subscribe__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 26, 23, 0.7);
  cursor: pointer;
}

.modal-subscribe__panel {
  position: relative;
  z-index: 1;
  background: var(--c-ink);
  color: var(--c-cream);
  padding: var(--space-8) var(--space-7) var(--space-7);
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.modal-subscribe__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  color: var(--c-cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-base) var(--ease);
}

.modal-subscribe__close:hover {
  color: var(--c-ember);
}

.modal-subscribe__h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--c-cream);
}

.modal-subscribe__body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-cream-mute);
}

body.modal-open {
  overflow: hidden;
}

/* =========================================================================
   17. TWO PATHS (per SPEC §6.1 §4)
   ========================================================================= */

.two-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.two-paths::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c-line-strong);
  pointer-events: none;
}

.two-paths__panel {
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 60vh;
  justify-content: center;
}

.two-paths__panel--work {
  background: var(--c-cream);
  color: var(--c-ink);
}

.two-paths__panel--passion {
  background: var(--c-ink);
  color: var(--c-cream);
}

.two-paths__h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-ember);
}

.two-paths__panel--passion .two-paths__h3 {
  color: var(--c-clay);
}

.two-paths__numeral {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5vw, 80px);
  line-height: 1;
  color: var(--c-ember);
  opacity: 0.55;
  margin-block-end: var(--space-2);
}

.two-paths__panel--passion .two-paths__numeral {
  color: var(--c-clay);
}

.two-paths__panel--passion .body { color: var(--c-cream); }
.two-paths__panel--passion .text-link { color: var(--c-clay); }
.two-paths__panel--passion .text-link:hover { color: var(--c-cream); }

@media (max-width: 860px) {
  .two-paths {
    grid-template-columns: 1fr;
  }
  .two-paths::after {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .two-paths__panel { min-height: 50vh; }
}

/* =========================================================================
   18. SUBSCRIBE (per SPEC §6.1 §5) — inverted ink
   ========================================================================= */

.subscribe-block {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  text-align: center;
}

.subscribe-block__inner {
  max-width: 64ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.subscribe-block__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-cream);
}

.subscribe-block .body { color: var(--c-cream-mute); }
.subscribe-block .subscribe-form { margin-block-start: var(--space-5); }

/* =========================================================================
   18b. STORY PAGES (per SPEC §6.2 — start-here.html)
   ========================================================================= */

.story-open {
  background: var(--c-cream);
  padding-block: clamp(120px, 18vw, 200px) var(--space-8);
  padding-inline: var(--gutter);
}

.story__inner {
  max-width: 64ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.story-open h1 {
  max-width: 18ch;
  font-size: var(--t-h1);
  line-height: 1.05;
}

.story-open .lead {
  max-width: 38ch;
}

.story-beat {
  background: var(--c-cream);
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
  position: relative;
}

/* The journey rail — a thin ember line in the left margin connecting all 5 beats.
   Hidden on mobile to preserve column width. Editorial cue, not infographic. */
.story-beat::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) * 0.5);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-ember);
  opacity: 0.35;
}

.story-beat:last-of-type::before {
  bottom: 35%; /* rail fades out at the last beat instead of continuing into the coda */
}

.story-beat::after {
  content: '';
  position: absolute;
  left: calc(var(--gutter) * 0.5 - 4px);
  top: var(--space-9);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-ember);
  box-shadow: 0 0 0 4px var(--c-cream); /* clears the rail line behind the dot */
}

@media (max-width: 860px) {
  .story-beat::before,
  .story-beat::after {
    display: none;
  }
}

.story-beat__inner {
  max-width: 64ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.story-beat__tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* Chapter marker "01 / 05" — journey signal, not manifesto declaration. */
.story-beat__chapter {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ember);
  line-height: 1;
}

.story-beat__chapter-sep {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--c-ember);
  margin-inline: var(--space-2);
  transform: translateY(-3px);
}

.story-subtitle {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-caption);
  color: var(--c-ink-mute);
  letter-spacing: 0.04em;
  margin-block-start: var(--space-2);
}

/* Coda — the sign-off line that closes the journey. */
.story-coda {
  background: var(--c-cream);
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
  text-align: center;
  position: relative;
}

.story-coda::before,
.story-coda::after {
  content: '';
  display: block;
  width: 96px;
  height: 1px;
  background: var(--c-ember);
  margin-inline: auto;
  opacity: 0.5;
}

.story-coda::before { margin-block-end: var(--space-7); }
.story-coda::after  { margin-block-start: var(--space-7); }

.story-coda__line {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  letter-spacing: 0.02em;
  color: var(--c-ember);
  max-width: 32ch;
  margin-inline: auto;
}

.story-beat__h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--c-ink);
}

.story-photo {
  margin-block: var(--space-7) var(--space-5);
  max-width: 56ch;
  margin-inline: auto;
}

/* Beat-to-beat handoff — the page-turn signal at the end of each beat. */
.story-handoff {
  max-width: 64ch;
  margin: var(--space-7) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: flex-end;
}

.story-handoff__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--c-ember);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.3;
  transition: color var(--t-base) var(--ease);
}

.story-handoff__link:hover { color: var(--c-ember-deep); }

.story-handoff__label {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

.story-handoff__chapter {
  /* inherits the italic Fraunces from link */
}

.story-handoff__arrow {
  font-style: normal;
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--c-ember);
}

@media (max-width: 600px) {
  .story-handoff { justify-content: flex-start; }
  .story-handoff__link { font-size: var(--t-body); }
}

.story-photo .photo-frame img {
  filter: grayscale(0.75) saturate(1.1) contrast(1.05) brightness(0.97);
}

.story-question {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  text-align: center;
}

.story-question__inner {
  max-width: 64ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.story-question__h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  max-width: 22ch;
}

.story-question .body { color: var(--c-cream-mute); }
.story-question .subscribe-form { margin-block-start: var(--space-5); }

.story-resource {
  background: var(--c-cream);
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
  border-top: 4px solid var(--c-sage);
}

.story-resource__inner {
  max-width: 60ch;
  margin-inline: auto;
}

.story-resource__label {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sage);
  margin-block-end: var(--space-4);
}

.story-resource__body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.story-resource__body strong { color: var(--c-ink); }

/* =========================================================================
   18c. WORK PAGE (per SPEC §6.3) — strictly ember, no iris
   ========================================================================= */

.work-open {
  background: var(--c-cream);
  padding-block: clamp(120px, 18vw, 200px) var(--space-7);
  padding-inline: var(--gutter);
}

.work-open__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.work-open h1 { max-width: 28ch; }
.work-open .lead { max-width: 52ch; }

.work-philosophy {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.work-philosophy__inner {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.work-philosophy__h2,
.work-philosophy__line {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  max-width: 40ch;
}

.work-philosophy .body { color: var(--c-cream); max-width: 60ch; }

.work-venture {
  background: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.work-venture__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

.work-venture__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.work-venture__tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
}

.work-venture__h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  max-width: 18ch;
}

.work-venture__lockup {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-ember);
  border-top: 1px solid var(--c-line);
  padding-block-start: var(--space-5);
  margin-block-start: var(--space-3);
}

.work-venture__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-ink-soft);
  margin-block-start: calc(var(--space-2) * -1);
  margin-block-end: var(--space-2);
}

/* Venture brand logo (Yusan / Pansori) — sits as a capstone below the panel on each venture column.
   Strict aspect-ratio preservation: height is the only dimension; width auto-scales from natural proportions. */
.work-venture__logo {
  display: block;
  height: clamp(80px, 10vw, 120px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-inline: auto;
}

/* Column wrapper — stacks a panel and a logo within one half of the venture grid. */
.work-venture__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Paper-tone frame for the Pansori logo. Matches the Yusan principles panel bg
   so both ventures read as a parallel system (panel + logo card per side). */
.work-venture__logo-frame {
  background: var(--c-paper);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-venture__link-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-caption);
  color: var(--c-ink-mute);
  margin-block-start: var(--space-2);
}

.work-venture__cta-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-caption);
  color: var(--c-ink-mute);
  margin-block-start: var(--space-2);
}

/* Yusan principles panel (paper, ember accents) */
.work-principles {
  background: var(--c-paper);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.work-principles__heading {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
  margin-block-end: calc(var(--space-3) * -1);
}

.work-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.work-principle__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  color: var(--c-ember);
  line-height: 1;
  min-width: 2.2ch;
}

.work-principle__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--c-ink);
  margin-block-end: var(--space-2);
}

.work-principle__body {
  font-family: var(--f-body);
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

/* Pansori bonfire panel (inverted) */
.work-bonfire {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.work-bonfire__tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
}

.work-bonfire__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--c-cream);
}

.work-bonfire__symptoms {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.work-bonfire__symptoms li {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-cream);
  padding-inline-start: var(--space-4);
  position: relative;
}

.work-bonfire__symptoms li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-ember);
}

.work-bonfire .btn--ghost {
  color: var(--c-cream);
  border-color: var(--c-cream);
  align-self: flex-start;
  margin-block-start: var(--space-3);
}

/* Services list (Pansori right column) */
.work-services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.work-services li {
  border-top: 1px solid var(--c-line);
  padding-block-start: var(--space-4);
}

.work-services__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-lead);
  color: var(--c-ink);
  margin-block-end: var(--space-2);
  display: block;
}

.work-services__desc {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-body);
  color: var(--c-ink-soft);
}

/* Bridge section */
.work-bridge {
  background: var(--c-cream-deep);
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
  text-align: center;
}

.work-bridge__inner {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.work-bridge__h2 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--c-ink);
}

.work-bridge__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .work-venture__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* =========================================================================
   18d. PASSION PAGE (per SPEC §6.4)
   ========================================================================= */

.passion-open {
  background: var(--c-cream);
  padding-block: clamp(120px, 18vw, 200px) var(--space-7);
  padding-inline: var(--gutter);
}

.passion-open__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.passion-open h1 { max-width: 14ch; }

.passion-thread {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.passion-thread__inner {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.passion-thread__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  max-width: 20ch;
}

.passion-thread .body { color: var(--c-cream); }

.passion-insta {
  background: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.passion-insta__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.passion-insta__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.passion-insta__tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ember);
}

.passion-insta__h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  max-width: 16ch;
}

.passion-insta__cta-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-caption);
  color: var(--c-ink-mute);
  margin-block-start: var(--space-2);
}

.passion-insta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.insta-card {
  background: var(--c-paper);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.insta-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.insta-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-cream-deep);
  overflow: hidden;
  flex-shrink: 0;
}

.insta-card__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

.insta-card__handle {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink);
}

.insta-card__bio {
  font-family: var(--f-body);
  font-size: var(--t-caption);
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin-block-start: 2px;
}

.insta-card__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.insta-card__tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-cream-deep);
}

.insta-card__tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.passion-causes {
  background: var(--c-cream-deep);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.passion-causes__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

.cause-card {
  background: var(--c-cream);
  display: flex;
  flex-direction: column;
}

.cause-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cause-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.cause-card__badge {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  width: 48px;
  height: 48px;
  background: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.cause-card__badge img {
  width: 100%; height: 100%; object-fit: contain;
}

.cause-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.cause-card__tag {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cause-card--endurant .cause-card__tag { color: var(--c-sage); }
.cause-card--grace .cause-card__tag { color: var(--c-marigold); }

.cause-card__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--c-ink);
}

.cause-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}

.passion-close {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  text-align: center;
}

.passion-close__inner {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.passion-close__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.15;
  color: var(--c-cream);
  max-width: 22ch;
}

/* New three-line imperative headline at the close — stacked, equal weight, ends each with a period. */
.passion-close__h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  max-width: 24ch;
}

/* Italic iris declaration — the page's one magic moment, breathing room above & below. */
.passion-close__declaration {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.3;
  margin-block: var(--space-3) var(--space-3);
}

.passion-close__cta {
  margin-block-start: var(--space-3);
}

.passion-close__cta-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-caption);
  color: var(--c-cream-mute);
  margin-block-start: var(--space-3);
}

.passion-close .body { color: var(--c-cream-mute); }

.passion-close__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .passion-insta__inner,
  .passion-causes__inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* =========================================================================
   18e. 404 PAGE (per SPEC §6.5)
   ========================================================================= */

.not-found {
  background: var(--c-cream);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-pad) var(--gutter);
}

.not-found__inner {
  max-width: 56ch;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.not-found__h1 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-4);
}

/* =========================================================================
   19. FOOTER (per SPEC §6.6)
   ========================================================================= */

.site-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--c-line-cream);
}

.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__logo {
  height: 48px;
  width: auto;
  display: block;
}

.site-footer__northstar {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-caption);
  color: var(--c-cream-mute);
  line-height: 1.6;
  max-width: 36ch;
}

.site-footer__platforms {
  align-self: center;
}

.site-footer__platforms ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  list-style: none;
  align-items: center;
  justify-content: center;
}

.site-footer__platforms li {
  display: flex;
  align-items: center;
}

.site-footer__platforms li + li::before {
  content: '·';
  color: var(--c-ember);
  margin-inline-end: var(--space-4);
  font-size: 16px;
}

.site-footer__platforms a {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cream);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.site-footer__platforms a:hover { color: var(--c-ember); }

.site-footer__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-5);
}

.site-footer__copyright {
  font-family: var(--f-body);
  font-size: 10px;
  color: var(--c-cream-mute);
}

.site-footer__credit {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 11px;
  color: var(--c-cream-mute);
  opacity: 0.65;
  margin-block-start: var(--space-2);
}

.site-footer__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--c-cream-mute);
}

.site-footer__credit a:hover {
  color: var(--c-ember);
  border-bottom-color: var(--c-ember);
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-7);
  }
  .site-footer__brand,
  .site-footer__action {
    align-items: center;
  }
  .site-footer__northstar { text-align: center; }
}