@layer reset, tokens, base, layout, components, motion;

@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../assets/fonts/dancing-script.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 77%;
  ascent-override: 128.5%;
  descent-override: 40.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 79.3%;
  ascent-override: 124.8%;
  descent-override: 39.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101.2%;
  ascent-override: 98.8%;
  descent-override: 29.9%;
  line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; }
  button { font: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    --paper: #f7f1e6;
    --paper-2: #efe6d3;
    --paper-3: #e6dac1;
    --ink: #2b1d16;
    --ink-soft: #4f3e33;
    --ganga: #1c6a61;
    --ganga-deep: #0f3a36;
    --ganga-mist: #d9e6df;
    --saffron: #e28a22;
    --saffron-text: #a85608;
    --saffron-ink: #9a5008;
    --saffron-wash: #f3d6a0;
    --cream-on-dark: #f6efe0;
    --rule: color-mix(in oklab, var(--ink) 22%, transparent);
    --rule-strong: color-mix(in oklab, var(--ink) 55%, transparent);
    --scrim: color-mix(in oklab, var(--ganga-deep) 78%, transparent);

    --serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Hanken Grotesk", "Hanken Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --script: "Dancing Script", "Snell Roundhand", cursive;

    --fs-label: clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem);
    --fs-small: clamp(0.9rem, 0.88rem + 0.1vw, 0.98rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-story: clamp(1.03rem, 0.98rem + 0.25vw, 1.2rem);
    --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
    --fs-pull: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
    --fs-h4: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    --fs-h3: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
    --fs-h2-m: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
    --fs-h2: clamp(3.4rem, 2rem + 6.6vw, 8.5rem);
    --fs-h1-page: clamp(3.6rem, 2rem + 8vw, 9.5rem);
    --fs-h1-essay: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem);
    --fs-name: clamp(5.5rem, 3.4rem + 14.5vw, 18rem);
    --fs-quote: clamp(2.5rem, 1.2rem + 5.4vw, 6.6rem);
    --fs-numeral: clamp(4.5rem, 3rem + 6vw, 9rem);
    --fs-price: clamp(3.8rem, 3rem + 3vw, 6rem);
    --fs-stat: clamp(3rem, 2rem + 3vw, 4.5rem);
    --fs-contact: clamp(1.9rem, 1rem + 3.8vw, 3.6rem);
    --fs-wordmark-foot: clamp(3.5rem, 2rem + 6vw, 7rem);

    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
    --frame: clamp(0.75rem, 1.4vw, 1.5rem);
    --section: clamp(5rem, 11vw, 11rem);
    --section-s: clamp(3.5rem, 7vw, 6.5rem);
    --max: 96rem;
    --measure: 62ch;
    --measure-essay: 68ch;
    --bar-h: 4.25rem;
    --arch-hang: 12rem;

    --r-xs: 2px;
    --r-pill: 99px;
    --r-arch: 999px 999px 0 0;

    --sh-card: 0 1.5rem 3rem -1.5rem color-mix(in oklab, var(--ink) 35%, transparent);
    --sh-dot: 0 0 0 4px var(--paper);
    --sh-lightbox: 0 2rem 6rem -1rem color-mix(in oklab, #000 60%, transparent);

    --t-fast: 0.2s;
    --t-base: 0.35s;
    --t-image: 0.8s;
    --ease: cubic-bezier(0.22, 0.8, 0.24, 1);

    --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
    --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
    --i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
    --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4M6 10l6-6 6 6'/%3E%3C/svg%3E");
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  }
}

@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  body:has(#menu:target) { overflow: hidden; }
  body:has(.lightbox:target) { overflow: hidden; }

  :focus-visible { outline: 3px solid var(--ganga); outline-offset: 4px; border-radius: var(--r-xs); }
  .band--deep :focus-visible, .band--photo :focus-visible, .foot :focus-visible, .lightbox :focus-visible { outline-color: var(--saffron); }
  .band--saffron :focus-visible { outline-color: var(--ink); }

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

  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; }
  h1 em, h2 em, h3 em { color: var(--ganga); font-style: italic; }
  p { text-wrap: pretty; max-width: var(--measure); }
  strong, b { font-weight: 600; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip {
    position: fixed; z-index: 100; left: 1rem; top: -4rem;
    background: var(--ink); color: var(--paper);
    padding: 0.75rem 1.25rem; border-radius: var(--r-pill); text-decoration: none; font-weight: 600;
    transition: top var(--t-fast);
  }
  .skip:focus-visible { top: 1rem; outline-color: var(--saffron); }

  .eyebrow { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--ganga); line-height: 1.4; }
  .eyebrow a { text-decoration: none; }
  .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .label { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; line-height: 1.4; }
  .lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 36ch; }
  .lede--serif { font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.15; color: var(--ink); max-width: 24ch; letter-spacing: -0.012em; }
  .lead { font-size: var(--fs-lead); line-height: 1.55; }
  .small { font-size: var(--fs-small); }
  .soft { color: var(--ink-soft); }
  .stack-5 > * + * { margin-top: var(--sp-5); }

  .ico-arrow::after, .ico-out::after, .ico-down::after, .ico-up::after {
    content: ""; display: inline-block; width: 1rem; height: 1rem; background: currentColor; flex: none;
    -webkit-mask: var(--i-arrow) center / contain no-repeat;
    mask: var(--i-arrow) center / contain no-repeat;
  }
  .ico-out::after { -webkit-mask-image: var(--i-out); mask-image: var(--i-out); }
  .ico-down::after { width: 0.9rem; height: 0.9rem; -webkit-mask-image: var(--i-down); mask-image: var(--i-down); }
  .ico-up::after { width: 0.9rem; height: 0.9rem; -webkit-mask-image: var(--i-up); mask-image: var(--i-up); }

  main { counter-reset: fig; }
  main:focus { outline: none; }
  figcaption.fig::before { counter-increment: fig; content: "Fig. " counter(fig, decimal-leading-zero) " \2014  "; }
  figcaption.fig, .ph figcaption {
    font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5;
    color: var(--ink-soft); margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); max-width: none; text-wrap: balance;
  }

  .frame { overflow: clip; background: var(--paper-3); }
  .frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .ph-natural .frame img { height: auto; }
  .ar-4-5 { aspect-ratio: 4 / 5; }
  .ar-3-4 { aspect-ratio: 3 / 4; }
  .ar-3-2 { aspect-ratio: 3 / 2; }
  .ar-1-1 { aspect-ratio: 1 / 1; }
}

@layer layout {
  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

  .band { position: relative; padding-block: var(--section); }
  .band--s { padding-block: var(--section-s); }
  .band--tight { padding-top: clamp(2rem, 4vw, 3.5rem); }
  .band--paper { background: var(--paper); }
  .band--paper-2 { background: var(--paper-2); }
  .band--mist { background: var(--ganga-mist); }
  .band--deep {
    background-color: var(--ganga-deep); color: var(--cream-on-dark);
    background-image: radial-gradient(70rem 40rem at 90% -10%, color-mix(in oklab, var(--ganga) 60%, transparent), transparent 70%);
  }
  .band--saffron {
    background-color: var(--saffron-wash); color: var(--ink);
    background-image: radial-gradient(64rem 38rem at -12% 118%, color-mix(in oklab, var(--saffron) 16%, transparent), transparent 72%);
  }
  .band--photo { background: var(--ganga-deep); color: var(--cream-on-dark); isolation: isolate; overflow: clip; }
  .band--photo > .band-bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
  .band--photo > .band-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .band--photo::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, color-mix(in oklab, var(--ganga-deep) 88%, transparent) 0%, var(--scrim) 55%, color-mix(in oklab, var(--ganga-deep) 48%, transparent) 100%);
  }
  @media (max-width: 59.99rem) {
    .band--photo::after { background: color-mix(in oklab, var(--ganga-deep) 82%, transparent); }
  }

  .masthead {
    display: flex; align-items: center; gap: 1.25rem;
    font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-soft); line-height: 1.4;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }
  .masthead .rule { flex: 1; height: 1px; background: var(--rule-strong); transform-origin: left; }
  .masthead .tag { text-align: right; }
  .band--deep .masthead, .band--photo .masthead { color: color-mix(in oklab, var(--cream-on-dark) 85%, transparent); }
  .band--deep .masthead .rule, .band--photo .masthead .rule { background: color-mix(in oklab, var(--cream-on-dark) 45%, transparent); }
  .band--saffron .masthead { color: var(--ink); }
  .band--saffron .masthead .rule { background: color-mix(in oklab, var(--ink) 60%, transparent); }

  .band-head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
  .band-head h2 { font-size: var(--fs-h2); line-height: 0.88; letter-spacing: -0.02em; max-width: 14ch; }
  .band-head--m h2 { font-size: var(--fs-h2-m); line-height: 0.95; max-width: 18ch; }
  .band-head .lede { max-width: 36ch; }
  .band-head .pull { margin: 0 0 1.5rem; }
  .band-head .lede--serif { max-width: 24ch; }
  @media (min-width: 44rem) and (max-width: 59.99rem) {
    .band-head { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); align-items: end; gap: 2.5rem; }
  }
  @media (min-width: 60rem) {
    .band-head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; gap: 4rem; }
  }
  .band--deep h2 em, .band--photo h2 em, .band--deep h1 em { color: var(--saffron); }
  .band--deep .lede, .band--photo .lede { color: color-mix(in oklab, var(--cream-on-dark) 88%, transparent); }
  .band--saffron h2 em { color: var(--ink); }

  .page-head { padding-top: calc(var(--bar-h) + clamp(2.5rem, 5vw, 5rem)); padding-bottom: var(--section-s); }
  .page-head h1 { font-size: var(--fs-h1-page); line-height: 0.88; letter-spacing: -0.02em; max-width: 12ch; }
  .page-head h1 em { color: var(--ganga); font-style: italic; white-space: nowrap; }
  .page-head .lede { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 36ch; }
  .page-head .lede--serif { color: var(--ink); font-size: var(--fs-pull); max-width: 24ch; }
  .page-head .wrap > h1 + .lede, .page-head-grid > div > h1 + .lede { margin-top: 1.75rem; }
  .page-head .stamp { margin-top: 1.5rem; }
  .page-head .jump { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
  .page-head-grid { display: grid; gap: 1.5rem; }
  @media (min-width: 44rem) and (max-width: 59.99rem) {
    .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: end; gap: 2.5rem; }
  }
  @media (min-width: 60rem) {
    .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 4rem; }
  }
  .page-head-photo { width: min(100%, 24rem); }

  .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .split > .ph { width: min(100%, 26rem); }
  @media (min-width: 44rem) and (max-width: 59.99rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2.5rem; }
    .split > .ph { width: 100%; }
  }
  @media (min-width: 60rem) {
    .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
    .split > .ph { grid-column: 1 / 6; width: auto; }
    .split > .split-text { grid-column: 7 / 13; }
  }
  .split-text h2 { font-size: var(--fs-h2-m); line-height: 0.95; margin-bottom: 1.5rem; }
  .split-text p + p { margin-top: 1.25rem; }
  .split-text .lead { max-width: 34ch; }
  @media (min-width: 34rem) and (max-width: 43.99rem) {
    .split--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.75rem; }
    .split--side > .ph { width: 100%; }
  }
}

@layer components {

  .bar {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding-inline: calc(var(--frame) + 0.5rem);
    isolation: isolate;
  }
  .bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--paper);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--rule);
  }
  .bar .mark { font-family: var(--serif); font-size: 1.85rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; min-height: 2.75rem; }
  .bar .burger {
    display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem;
    font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    text-decoration: none; padding: 0.65rem 1.1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--paper) 70%, transparent);
  }
  .burger-lines { width: 1.1rem; height: 0.55rem; position: relative; display: inline-block; }
  .burger-lines::before, .burger-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
  .burger-lines::before { top: 0; }
  .burger-lines::after { bottom: 0; }

  #menu {
    position: fixed; inset: 0; z-index: 60;
    padding: calc(var(--bar-h) + 1.5rem) var(--gutter) 2rem;
    display: flex; flex-direction: column; justify-content: space-between;
    visibility: hidden; opacity: 0; translate: 0 -1.5rem;
    transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease), visibility 0s var(--t-base);
    background-color: var(--paper);
    background-image: radial-gradient(60rem 30rem at 100% 0%, color-mix(in oklab, var(--saffron-wash) 70%, transparent), transparent 70%);
    overflow-y: auto; overscroll-behavior: contain;
  }
  #menu:target { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  #menu .close {
    position: absolute; top: calc((var(--bar-h) - 2.75rem) / 2); right: calc(var(--frame) + 0.5rem);
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
    font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    text-decoration: none; padding: 0.65rem 1.1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  }
  #menu ul { display: grid; }
  #menu li { border-top: 1px solid var(--rule); }
  #menu li:last-child { border-bottom: 1px solid var(--rule); }
  #menu li a {
    display: flex; align-items: baseline; text-decoration: none;
    font-family: var(--serif); font-size: clamp(2.4rem, 9.5vw, 3.6rem); line-height: 1; padding: 0.7rem 0;
  }
  #menu .menu-note { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
  #menu .nav-cta a { color: var(--ganga); }
  #menu li a[aria-current="page"] { color: var(--ganga); }

  @media (max-width: 67.99rem) and (max-height: 40rem) {
    #menu { padding-top: calc(var(--bar-h) + 0.5rem); padding-bottom: 1rem; }
    #menu li a { font-size: clamp(1.8rem, 7vh, 3.6rem); padding: 0.3rem 0; }
    #menu .menu-note { display: none; }
  }

  @media (max-width: 67.99rem) {
    body:has(#menu:target) :is(main, footer, .skip, .bar .mark, .bar .burger) { visibility: hidden; }
  }
  @media (min-width: 68rem) {
    .bar .burger, #menu .close, #menu .menu-note { display: none; }
    #menu {
      position: static; inset: auto; padding: 0; background: none; visibility: visible; opacity: 1; translate: none;
      display: block; transition: none; overflow: visible;
    }
    #menu ul { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.25rem); }
    #menu li, #menu li:last-child { border: 0; }
    #menu li a { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding: 0.5rem 0; position: relative; }
    #menu li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--t-base) var(--ease); }
    #menu li a:hover::after, #menu li a:focus-visible::after { scale: 1 1; }
    #menu li a[aria-current="page"]::after { scale: 1 1; }
    #menu .nav-cta a { background: var(--ganga); color: #fff; padding: 0.7rem 1.2rem; border-radius: var(--r-pill); font-weight: 600; transition: background var(--t-base); }
    #menu .nav-cta a[aria-current="page"] { color: #fff; }
    #menu .nav-cta a::after { display: none; }
    #menu .nav-cta a:hover { background: var(--ganga-deep); }
    body:has(#menu:target) { overflow: auto; }
  }

  .hero { position: relative; display: grid; padding-top: var(--bar-h); }
  .hero-name { position: relative; z-index: 2; padding: clamp(0.9rem, 2.4vw, 2rem) var(--gutter) 0; pointer-events: none; }
  .hero-name .kicker {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--ink);
    max-width: none; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-strong); line-height: 1.4;
  }
  .hero-name h1 { font-size: min(var(--fs-name), 28svh); line-height: 0.82; letter-spacing: -0.02em; color: var(--ink); margin-top: clamp(0.5rem, 1.6vw, 1.5rem); padding-bottom: 0.18em; }
  .hero-name h1 span, .hero-name h1 em { display: block; }
  .hero-name h1 em { margin-top: -0.04em; color: var(--ganga-deep); }
  .hero-stage { position: relative; overflow: clip; margin: 0; width: 100%; background: var(--ganga-mist); aspect-ratio: 1 / 1; max-height: max(15rem, calc(100svh - 33rem)); }
  .hero-stage picture, .hero-stage img { width: 100%; height: 100%; display: block; }
  .hero-stage img { object-fit: cover; object-position: 50% 88%; transform-origin: 50% 60%; }
  .hero-stage figcaption {
    display: none; position: absolute; z-index: 1; right: 1rem; bottom: 0.85rem; max-width: none;
    font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; line-height: 1.4;
    color: var(--ink); background: color-mix(in oklab, var(--paper) 80%, transparent);
    padding: 0.35rem 0.7rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hero-card { position: relative; z-index: 3; display: grid; gap: 1rem; padding: 1.25rem var(--gutter) 1.75rem; background: var(--paper); border-top: 3px solid var(--saffron); }
  .hero-card .voice { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.14; letter-spacing: -0.012em; max-width: 44ch; text-wrap: balance; }
  .hero-actions, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
  @media (max-width: 43.74rem) {
    .hero-name { overflow: clip; }
    .hero-name .kicker span + span { display: none; }
    .hero-name h1 em { margin-left: 0.05em; }
    .hero-card .voice { max-width: none; }
    .hero-actions .btn { width: 100%; justify-content: space-between; }
  }
  @media (min-width: 44rem) {
    .hero { padding: calc(var(--bar-h) + var(--frame)) var(--frame) 0; }
    .hero > * { grid-area: 1 / 1; }
    .hero-name { align-self: start; padding-inline: calc(var(--gutter) - var(--frame)); }
    .hero-name h1 { display: flex; align-items: baseline; gap: 0.18em; padding-bottom: 0; }
    .hero-name h1 span, .hero-name h1 em { display: inline; }
    .hero-name h1 em { margin-top: 0; }
    .hero-stage { aspect-ratio: auto; max-height: none; }
    .hero-stage img { object-position: 52% 82%; }
    .hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, color-mix(in oklab, var(--paper) 62%, transparent) 0%, transparent 46%); }
    .hero-stage figcaption { display: block; }
  }

  @media (min-width: 44rem) {
    .hero-stage { height: clamp(26rem, 72vw, 40rem); }
    .hero-card {
      grid-area: 2 / 1; margin: 0; padding: 1.5rem calc(var(--gutter) - var(--frame)) 1.75rem;
      grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem;
    }
  }
  @media (min-width: 44rem) and (max-width: 71.99rem) {
    .hero-card { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; padding-block: 1.75rem 2rem; }
    .hero-card .voice { max-width: 44ch; font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.1rem); }
  }
  @media (min-width: 72rem) and (min-height: 46rem) {
    .hero-stage { height: clamp(34rem, calc(100svh - var(--bar-h) - var(--frame) - 1.25rem), 60rem); }
    .hero-card {
      grid-area: 1 / 1; align-self: end; justify-self: start;
      margin: 0 0 clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 1.2vw, 1.25rem);
      padding: 1.7rem 1.6rem 1.8rem; width: min(25rem, 31%); gap: 1.6rem; grid-template-columns: none; align-items: stretch;
      background: color-mix(in oklab, var(--paper) 96%, transparent);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
    .hero-card .voice { max-width: none; font-size: clamp(1.45rem, 1.1rem + 0.75vw, 1.75rem); }
    .hero-stage img { width: 126%; max-width: none; object-position: 0% 88%; }
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem; min-height: 3.25rem;
    background: var(--ganga); color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25;
    padding: 0.85rem 1.6rem 0.85rem 1.8rem; border-radius: var(--r-pill); border: 1px solid var(--ganga);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), translate var(--t-base) var(--ease);
  }
  .btn::after { transition: translate var(--t-base) var(--ease); width: 1.1rem; height: 1.1rem; }
  .btn:hover { background: var(--ganga-deep); border-color: var(--ganga-deep); }
  .btn:hover::after { translate: 0.25rem 0; }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); border-color: var(--ink); }
  .band--deep .btn, .band--photo .btn { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
  .band--deep .btn:hover, .band--photo .btn:hover { background: var(--saffron-wash); border-color: var(--saffron-wash); }
  .band--deep .btn--ghost, .band--photo .btn--ghost { background: transparent; color: var(--cream-on-dark); border-color: color-mix(in oklab, var(--cream-on-dark) 55%, transparent); }
  .band--deep .btn--ghost:hover, .band--photo .btn--ghost:hover { background: color-mix(in oklab, var(--cream-on-dark) 12%, transparent); border-color: var(--cream-on-dark); }
  .band--saffron .btn { background: var(--ink); border-color: var(--ink); color: var(--cream-on-dark); }
  .band--saffron .btn:hover { background: var(--ganga-deep); border-color: var(--ganga-deep); }
  .band--saffron .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

  .textlink {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
    font-weight: 600; text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--rule-strong); padding-block: 0.4rem 0.2rem; line-height: 1.3;
    transition: border-color var(--t-base);
  }
  .textlink:hover { border-color: var(--ink); }
  .band--deep .textlink, .band--photo .textlink { color: var(--cream-on-dark); border-color: color-mix(in oklab, var(--cream-on-dark) 55%, transparent); }
  .link-row { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
  .link-stack { display: grid; gap: 0; margin-top: 1rem; justify-items: start; }
  .link-stack a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.4rem; }
  .prose a, .inline-link { color: var(--ganga); font-weight: 600; text-underline-offset: 3px; }
  .compare td .inline-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.7rem; }
  .lead .inline-link, .note .inline-link, .list-end .inline-link, .fold-body p a { display: inline; padding-block: 0; position: relative; }
  .lead .inline-link::after, .note .inline-link::after, .list-end .inline-link::after, .fold-body p a::after { content: ""; position: absolute; inset: -0.75rem -0.25rem; }

  .pill {
    display: inline-flex; align-items: center; gap: 0.9rem; min-height: 3.5rem; padding: 0.8rem 1.6rem;
    border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-small); line-height: 1.25;
    transition: background var(--t-base), translate var(--t-base) var(--ease);
  }
  .pill svg { flex: none; }
  .pill span { display: flex; flex-direction: column; min-width: 0; }
  .pill b { font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; overflow-wrap: anywhere; }
  .pill--wa { background: var(--ink); color: var(--cream-on-dark); border: 1px solid var(--ink); }
  .pill--mail { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .pill:hover { translate: 0 -2px; }
  .pill--wa:hover { background: var(--ganga-deep); }
  .pill--mail:hover { background: color-mix(in oklab, var(--paper) 55%, transparent); }
  .band--deep .pill--wa, .band--photo .pill--wa { background: var(--saffron); color: var(--ink); border-color: var(--saffron); }
  .band--deep .pill--mail, .band--photo .pill--mail { color: var(--cream-on-dark); border-color: var(--cream-on-dark); }
  .pill-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; }
  @media (max-width: 43.74rem) { .pill-row .pill { width: 100%; justify-content: flex-start; } }

  .chip {
    display: inline-block; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    padding: 0.25rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--ink-soft); line-height: 1.3; text-decoration: none;
  }
  .chip--eur { border-color: var(--saffron-ink); color: var(--saffron-ink); }
  .chip--usd { border-color: var(--ganga); color: var(--ganga); }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .jump { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .jump a.chip, a.chip { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 1rem; transition: background var(--t-base), color var(--t-base); }
  .jump a.chip:hover, a.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .statement { display: grid; gap: 1.5rem; }
  .statement h2 { font-size: var(--fs-h2-m); line-height: 0.95; letter-spacing: -0.02em; max-width: 14ch; }
  .statement .lede { max-width: 36ch; }
  @media (min-width: 60rem) {
    .statement { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; gap: 4rem; }
    .statement .link-row { grid-column: 1 / -1; }
  }

  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
  @media (min-width: 52rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .facts > div { border-top: 1px solid var(--rule-strong); padding: 1.1rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .facts dt { order: 2; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.5; }
  .facts dd { order: 1; font-family: var(--serif); line-height: 0.95; font-size: min(var(--fs-stat), 12vw); letter-spacing: -0.03em; color: var(--ink); }
  @media (min-width: 52rem) { .facts dd { font-size: clamp(3.4rem, 1.4rem + 4.6vw, 6.2rem); } }

  .path-line { display: grid; gap: 0; margin: 0 0 clamp(4rem, 8vw, 7rem); }
  .path-line li { position: relative; padding: 0 0 1.5rem 1.6rem; border-left: 1px solid var(--rule-strong); }
  .path-line li::before { content: ""; position: absolute; left: -0.36rem; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--saffron); box-shadow: var(--sh-dot); }
  .path-line b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.01em; }
  .path-line span { display: block; margin-top: 0.3rem; font-size: var(--fs-small); color: var(--ink-soft); max-width: 26ch; line-height: 1.45; text-wrap: balance; }
  @media (min-width: 52rem) {
    .path-line { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--rule-strong); }
    .path-line li { border-left: 0; padding: 1.75rem 0 0; }
    .path-line li::before { left: 0; top: -0.36rem; }
    .path-line b { font-size: clamp(1.4rem, 0.9rem + 1.2vw, 2rem); }
  }

  .ph { margin: 0; }

  .chapter { display: grid; gap: 1.75rem; margin-bottom: clamp(4.5rem, 8vw, 7.5rem); }
  .chapter-text { position: relative; }
  .chapter-text .num { font-family: var(--serif); font-size: var(--fs-numeral); line-height: 0.8; color: var(--saffron-text); display: block; letter-spacing: -0.04em; }
  .chapter-text h3 { font-size: var(--fs-h3); line-height: 1; margin: 0.9rem 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
  .chapter-text p { font-size: var(--fs-story); line-height: 1.7; color: var(--ink); }
  .chapter-text p + p { margin-top: 1.5rem; }
  .sign { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-soft); margin-top: 2.25rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
  .sign span { font-family: var(--script); font-weight: 600; font-size: 2.8rem; line-height: 1.2; color: var(--ganga); }
  .chapter:last-child { margin-bottom: 0; }
  .chapter-text .actions { margin-top: 2rem; }
  @media (max-width: 59.99rem) {
    .chapter > .ph { width: min(100%, 22rem); margin-left: 0; order: 2; }
    .chapter > .ph .frame { aspect-ratio: 4 / 5; }
  }
  @media (min-width: 44rem) and (max-width: 59.99rem) {
    .chapter { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 2.5rem; align-items: start; }
    .chapter > .ph { width: 100%; margin: 0; }
    .chapter .chapter-text { grid-column: 1; grid-row: 1; align-self: start; }
    .chapter .ph-a, .chapter .ph-b, .chapter .ph-c, .chapter .ph-e { grid-column: 2; grid-row: 1; }
    .c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c3 .chapter-text { grid-column: 1 / 3; grid-row: 1; max-width: 42rem; }
    .c3 .ph-c { grid-column: 1; grid-row: 2; }
    .c3 .ph-d { grid-column: 2; grid-row: 2; margin-top: 0; }
    .chapter-text h3 { margin-top: 0.6rem; }
    .chapter-text p { font-size: 1.05rem; line-height: 1.65; }
  }
  @media (min-width: 60rem) {
    .chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
    .c1 .ph-a { grid-column: 1 / 6; grid-row: 1; }
    .c1 .ph-a .frame { aspect-ratio: 4 / 5; }
    .c1 .chapter-text { grid-column: 7 / 13; grid-row: 1; align-self: center; }
    .c2 .ph-b, .c2 .chapter-text, .c4 .ph-e, .c4 .chapter-text { grid-row: 1; }
    .c2 .chapter-text { grid-column: 1 / 7; align-self: center; }
    .c2 .ph-b { grid-column: 8 / 13; }
    .c2 .ph-b .frame { aspect-ratio: 4 / 5; }
    .c3 { grid-template-rows: auto auto; }
    .c3 .ph-c { grid-column: 1 / 6; grid-row: 1 / 3; }
    .c3 .ph-c .frame { aspect-ratio: 5 / 8.6; }
    .c3 .chapter-text { grid-column: 7 / 13; grid-row: 1; padding-top: 0; align-self: start; }
    .c3 .ph-d { grid-column: 9 / 13; grid-row: 2; align-self: end; margin-top: 2rem; }
    .c3 .ph-d .frame { aspect-ratio: 1 / 1; }
    .c4 .chapter-text { grid-column: 1 / 7; align-self: center; }
    .c4 .ph-e { grid-column: 8 / 13; }
    .c4 .ph-e .frame { aspect-ratio: 4 / 5; }
    .c2 + .pull { margin-left: calc((100% + 2rem) / 12); }
    .c3 { margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
    .timeline > .c3 + .pull { margin: 0 auto clamp(2.25rem, 4vw, 3.75rem); max-width: 30ch; font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem); line-height: 1.1; }
  }

  .timeline { position: relative; padding-left: 1.75rem; }
  .timeline::before { content: ""; position: absolute; left: 0.3rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--rule-strong); transform-origin: top; }
  .timeline > .chapter { position: relative; }
  .timeline > .pull { margin: 0 0 clamp(4.5rem, 8vw, 7.5rem); font-size: var(--fs-h4); line-height: 1.12; max-width: 26ch; }
  .timeline > .chapter::before { content: ""; position: absolute; left: -1.75rem; top: calc(var(--fs-numeral) * 0.4 - 0.35rem); width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--saffron); box-shadow: var(--sh-dot); }
  @media (min-width: 60rem) {
    .timeline { padding-left: 0; }
    .timeline::before { left: calc(var(--gutter) * -0.5); }
    .timeline > .chapter::before { left: calc(var(--gutter) * -0.5 - 0.35rem); }
  }

  .quote-deep { z-index: 2; padding-block: clamp(4.5rem, 8vw, 8rem) clamp(4rem, 7vw, 7rem); }
  .quote-inner { display: grid; gap: 2.5rem; position: relative; }
  .signature-quote { margin: 0; }
  .signature-quote .big { font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.02; letter-spacing: -0.025em; max-width: 17ch; text-wrap: balance; }
  .signature-quote .big em { color: var(--saffron); font-style: italic; }
  .signature-quote .small { margin-top: 2rem; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.65; max-width: 40ch; color: color-mix(in oklab, var(--cream-on-dark) 88%, transparent); border-left: 2px solid var(--saffron); padding-left: 1.25rem; }
  .signature-quote figcaption { margin-top: 2rem; font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--saffron-wash); max-width: none; }
  .arch { position: relative; z-index: 3; margin: 0 auto 0 0; width: min(66%, 19rem); order: -1; }
  .arch .frame { aspect-ratio: 4 / 5; border-radius: var(--r-arch); background: var(--paper-3); }
  .after-arch { padding-top: var(--section); }
  @media (min-width: 44rem) and (max-width: 59.99rem) {
    .quote-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); column-gap: 2.5rem; align-items: center; }
    .signature-quote { grid-column: 1; }
    .arch { order: 0; grid-column: 2; width: 100%; margin: 0; }
    .arch .frame { aspect-ratio: 4 / 5.4; }
  }
  @media (min-width: 60rem) {
    .quote-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; }
    .signature-quote { grid-column: 1 / 9; align-self: center; }
    .arch { order: 0; grid-column: 9 / 13; width: 100%; margin: 0; align-self: center; }
    .arch .frame { aspect-ratio: 4 / 5.6; }
    .after-arch { padding-top: var(--section); }
  }

  .quote-photo { padding-block: clamp(6rem, 14vw, 13rem); }
  @media (min-width: 60rem) {
    .quote-photo > .band-bg { left: 38%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
    .quote-photo::after { background: linear-gradient(90deg, color-mix(in oklab, var(--ganga-deep) 85%, transparent) 0%, color-mix(in oklab, var(--ganga-deep) 55%, transparent) 50%, color-mix(in oklab, var(--ganga-deep) 30%, transparent) 100%); }
  }
  .quote-photo .big { font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; text-wrap: balance; }
  .quote-photo .big em { color: var(--saffron); font-style: italic; }
  .quote-photo .sign { margin-top: 2rem; }
  .quote-photo .big--long { font-size: clamp(2rem, 1.1rem + 3.6vw, 4.6rem); line-height: 1.08; max-width: 24ch; }
  .quote-photo .lede { margin-top: 1.75rem; }
  .quote-photo .sign span { font-family: var(--script); font-weight: 600; font-size: 3rem; line-height: 1.2; color: var(--saffron-wash); }

  .pull { margin: 2.5rem 0; border-left: 2px solid var(--saffron); padding-left: 1.25rem; font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.18; max-width: 28ch; color: var(--ink); }
  .pull p { font-size: inherit; max-width: none; }
  .band--deep .pull { color: var(--cream-on-dark); }
  .split-text .pull { margin-block: 2rem; }
  .before-body .pull, .end-note .pull { margin: 0; }
  .quote-strip { display: grid; gap: 2.5rem; }
  .quote-strip > * { border-top: 2px solid var(--saffron); padding-top: 1.25rem; }
  .quote-strip blockquote { font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); line-height: 1.18; max-width: 26ch; }
  .quote-strip blockquote p { font-size: inherit; max-width: none; }
  .quote-strip figcaption { margin-top: 1rem; padding: 0; border: 0; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--saffron-wash); max-width: none; }
  @media (min-width: 44rem) { .quote-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }

  .teach-body { display: grid; gap: 3rem; }
  .teach-list { min-width: 0; }
  .practice-list li { border-top: 1px solid var(--rule-strong); padding: 1.5rem 0 2rem; }
  .practice-list li:last-child { border-bottom: 1px solid var(--rule-strong); }
  .practice-list h3 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); line-height: 1.02; }
  .practice-list p { margin-top: 0.7rem; color: var(--ink-soft); max-width: 46ch; }
  .practice-list .note { font-size: var(--fs-small); margin-top: 0.9rem; max-width: 44ch; }
  .practice-list .note--care { color: var(--ink); font-weight: 500; border-left: 2px solid var(--saffron); padding-left: 1rem; }
  .list-end { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; }
  .practice-list .textlink { margin-top: 0.75rem; }
  .teach-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; }
  .teach-photos .list-end { margin: 0.5rem 0 0; max-width: 46ch; }
  @media (min-width: 34rem) {
    .teach-photos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 1.25rem; align-items: start; }
    .teach-photos .list-end { grid-column: 1 / -1; }
    .teach-body--home .teach-photos { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 60rem) {
    .teach-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
    .teach-photos { position: sticky; top: 6rem; }
    .teach-body--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: start; }
    .teach-body--home .teach-photos { grid-template-columns: minmax(0, 1fr); }
    .teach-body--home .ph-natural .frame { aspect-ratio: 4 / 3; }
    .teach-body--home .ph-natural .frame img { height: 100%; }
    .teach-body--home .teach-photos { position: sticky; top: 6rem; }
    .teach-body--home .practice-list li { padding: 1.15rem 0 1.4rem; }
  }
  @media (min-width: 75rem) {
    .teach-body--home { align-items: center; }
    .teach-body--home .teach-photos { position: static; }
  }

  .lineage { margin-top: clamp(4rem, 8vw, 8rem); display: grid; gap: 2.5rem; border-top: 1px solid var(--rule-strong); padding-top: 1.5rem; }
  .lineage-main { display: grid; gap: 1.5rem; }
  .lineage .label { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.18em; line-height: 1.4; max-width: none; padding-top: 0.5rem; }
  .lineage-body p { font-family: var(--sans); font-size: var(--fs-lead); line-height: 1.6; letter-spacing: 0; max-width: 46ch; color: color-mix(in oklab, var(--cream-on-dark) 92%, transparent); }
  .lineage-body p + p { margin-top: 1.25rem; }
  .band--deep .lineage { margin-top: 0; border-top-color: color-mix(in oklab, var(--cream-on-dark) 45%, transparent); }
  .band--deep .lineage .label { color: color-mix(in oklab, var(--cream-on-dark) 85%, transparent); }
  .lineage-pull { margin: 0; max-width: 22ch; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.9rem); line-height: 1.1; }
  .lineage-pull p { max-width: none; }
  @media (min-width: 60rem) {
    .lineage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
    .lineage-pull { align-self: center; justify-self: start; padding-left: 2rem; }
  }

  .principles { display: grid; gap: 2.5rem; }
  .principles > * { border-top: 3px solid var(--saffron); padding-top: 1.5rem; }
  .principles > :nth-child(2) { border-color: var(--ganga); }
  .principles > :nth-child(3) { border-color: var(--ink); }
  .principles h3 { font-size: var(--fs-h4); line-height: 1.05; margin-bottom: 0.9rem; }
  .principles p { color: var(--ink); }
  @media (min-width: 44rem) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } }
  @media (min-width: 44rem) { .principles > * { min-width: 0; } .principles h3 { min-height: 2.2em; } @supports (grid-template-rows: subgrid) { .principles { grid-template-rows: auto auto; row-gap: 0; } .principles > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; } .principles h3 { min-height: 0; } } }

  .letter { display: grid; gap: 2.5rem; }
  .letter-hi { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1; color: var(--ganga); margin-bottom: 1.25rem; }
  .letter-body p { font-family: var(--sans); font-size: var(--fs-story); line-height: 1.7; color: var(--ink); max-width: 62ch; }
  .letter-body p + p { margin-top: 1.25rem; }
  .letter-photo { width: min(100%, 24rem); }
  @media (min-width: 60rem) {
    .letter { grid-template-columns: minmax(0, 41rem) minmax(0, 26rem); gap: clamp(3rem, 5vw, 5rem); justify-content: center; align-items: center; }
    .letter-photo { width: 100%; }
  }

  .row-title {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem;
    font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 1.75rem;
  }
  .row-title .cur { font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.02em; color: var(--ink-soft); }
  .row-title h2 { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
  .card-row { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
  @media (min-width: 44rem) { .trainings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
  @media (min-width: 44rem) { @supports (grid-template-rows: subgrid) { .trainings { grid-template-rows: auto repeat(7, auto); row-gap: 0; column-gap: 2rem; } .trainings > .card { container-type: normal; display: grid; grid-row: span 8; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); } .trainings > .card > .card-body { display: grid; grid-row: span 7; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; } } }
  @media (min-width: 82rem) { @supports (grid-template-rows: subgrid) { .trainings > .card .card-img { aspect-ratio: 4 / 5; } .trainings > .card .card-body { padding: 2rem 2.25rem 2.25rem; } } }
  .trainings > .card .card-img { aspect-ratio: 4 / 5; }
  @media (min-width: 44rem) and (max-width: 59.99rem) { .retreats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .retreats > .card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } .retreats > .card:last-child:nth-child(odd) .card-img { aspect-ratio: auto; min-height: 100%; height: 100%; } .retreats > .card:last-child:nth-child(odd) .card-body { justify-content: center; padding: 2rem 2.25rem 2.25rem; } }
  @media (min-width: 60rem) { .retreats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
  @media (min-width: 60rem) { @supports (grid-template-rows: subgrid) { .retreats { grid-template-rows: auto repeat(6, auto); row-gap: 0; column-gap: 2rem; } .retreats > .card { container-type: normal; display: grid; grid-row: span 7; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); } .retreats > .card > .card-body { display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; } } }

  .card {
    position: relative; container-type: inline-size;
    background: var(--paper); border: 1px solid var(--rule);
    display: flex; flex-direction: column;
    transition: translate var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base);
  }
  .card:hover, .card:has(a:focus-visible) { translate: 0 -4px; box-shadow: var(--sh-card); border-color: var(--rule-strong); }
  .card:has(a:focus-visible) { outline: 3px solid var(--ganga); outline-offset: 4px; }
  .card a.stretch { text-decoration: none; outline: none; }
  .card a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .card h3, .card h4 { font-size: var(--fs-h4); line-height: 1.02; margin: 0.6rem 0 1.5rem; }
  .card .price { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
  .price b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-price); line-height: 0.9; letter-spacing: -0.03em; }
  .price span:not(.chip) { font-size: var(--fs-small); letter-spacing: 0.01em; color: var(--ink-soft); }
  .price .chip { align-self: center; }
  .retreats .price, .trainings .price { row-gap: 0.55rem; }
  .retreats .price span:not(.chip), .trainings .price span:not(.chip) { order: 3; flex: 1 0 100%; }
  .card-body p + .price { margin-top: 1.5rem; }
  .card-photo .price span:not(.chip) { order: 2; }
  .price-sub { margin-top: 0.7rem; font-size: var(--fs-small); color: var(--ink-soft); }
  .card .dates { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 500; }
  .card .dates a { position: relative; z-index: 3; display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; padding-inline: 0.25rem; margin-inline: -0.25rem; color: var(--ganga); font-weight: 600; text-underline-offset: 3px; }
  .go { margin-top: auto; padding-top: 1.5rem; font-size: 1rem; font-weight: 600; color: var(--ganga); display: flex; align-items: center; gap: 0.6rem; line-height: 1.3; }
  .go::after { transition: translate var(--t-base) var(--ease); }
  .card:hover .go::after, .essay-card:hover .go::after { translate: 0.2rem 0; }
  .card:hover .go.ico-out::after { translate: 0.2rem -0.2rem; }
  .card .go.ico-out { display: block; }
  .card .go.ico-out::after { margin-left: 0.5rem; vertical-align: -0.12em; }
  .card-photo .card-img { margin: 0; overflow: clip; position: relative; aspect-ratio: 16 / 10; background: var(--paper-3); }
  .card-photo .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale var(--t-image) var(--ease); }
  .card-photo:hover .card-img img { scale: 1.04; }
  .card-photo .card-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
  @container (min-width: 36rem) {
    .card-photo .card-img { aspect-ratio: 16 / 9; }
    .card-photo .card-body { padding: 2rem 2.25rem 2.25rem; }
  }
  .tile { padding: 1.75rem 1.5rem; border-top: 3px solid var(--tone, var(--saffron)); }
  .tile .eyebrow { color: var(--tone-ink, var(--ganga)); }
  .tone-a { --tone: var(--ganga); background: color-mix(in oklab, var(--ganga-mist) 55%, var(--paper)); }
  .tone-b { --tone: var(--saffron); --tone-ink: var(--saffron-ink); background: color-mix(in oklab, var(--saffron-wash) 40%, var(--paper)); }
  .tone-c { --tone: var(--ink); --tone-ink: var(--ink); background: var(--paper); }
  .retreats .card-photo { border-top: 3px solid var(--tone, var(--saffron)); }
  .retreats .card-photo .eyebrow { color: var(--tone-ink, var(--ganga)); }

  .price-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1.5rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--rule-strong); }
  .price-row:last-child { border-bottom: 1px solid var(--rule-strong); }
  .pr-main h3 { font-size: var(--fs-h4); line-height: 1.05; }
  .pr-main h3 + p { margin-top: 0.6rem; }
  .pr-main p { font-size: var(--fs-small); color: var(--ink-soft); }
  .pr-main p b { font-weight: 600; color: var(--ink); }
  .pr-price { display: flex; align-items: center; gap: 0.5rem; }
  .pr-price b { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; margin-right: 0.25rem; }
  .pr-price span:not(.chip) { font-size: var(--fs-small); color: var(--ink-soft); }
  .pr-link { grid-column: 1 / -1; display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--ganga); text-decoration: none; }
  .pr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 43.99rem) {
    .price-row { column-gap: 1rem; }
    .pr-main { grid-column: 1 / -1; }
    .pr-link { grid-column: 2; grid-row: 2; justify-self: end; }
    .pr-main + .pr-link { grid-column: 1 / -1; justify-self: start; }
    .pr-price { flex-wrap: wrap; gap: 0.35rem 0.5rem; }
    .pr-price b { font-size: 2.2rem; margin-right: 0; }
  }
  @media (min-width: 44rem) {
    .price-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2rem; }
    .pr-link { grid-column: auto; }
  }
  .date-group { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
  .date-group:last-child { margin-bottom: 0; }
  .date-group > header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1.5rem; }
  .date-group h2 { font-size: var(--fs-h2-m); line-height: 1; }
  .date-group .group-note { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 1.25rem; }
  .date-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-top: 0.75rem; }
  .date-price { display: grid; gap: 0.5rem; align-content: start; }
  .date-price .group-note { margin: 0.75rem 0 0; max-width: 36ch; }
  .dp-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
  .dp-main b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-price); line-height: 0.95; letter-spacing: -0.02em; }
  .dp-main span { font-size: var(--fs-small); letter-spacing: 0.01em; font-weight: 500; color: var(--ink-soft); }
  .dp-alt { font-size: var(--fs-body); color: var(--ink); }
  .date-price--row { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); gap: 1.25rem 3rem; align-items: end; }
  .date-price--row .group-note { margin: 0; }
  .date-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 3.5rem); align-content: start; border-bottom: 1px solid var(--rule-strong); }
  .date-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: 0.3rem 0; border-top: 1px solid var(--rule-strong); }
  .date-cell h3 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem); line-height: 1.1; }
  .date-cell h3 span { display: inline-block; margin-left: 0.4rem; font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); }
  .dc-link { display: inline-flex; gap: 0.5rem; align-items: center; justify-self: start; min-height: 2.75rem; font-weight: 600; color: var(--ganga); text-decoration: none; }
  .dc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .date-photo { width: min(100%, 24rem); }
  @media (min-width: 34rem) and (max-width: 59.99rem) {
    .date-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); column-gap: clamp(1.5rem, 5vw, 3rem); align-items: start; }
    .date-layout .date-price { grid-column: 1; grid-row: 1; align-self: center; }
    .date-layout .date-photo { grid-column: 2; grid-row: 1; width: 100%; }
    .date-layout .date-grid { grid-column: 1 / -1; grid-row: 2; }
  }
  @media (min-width: 44rem) {
    .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 52rem) {
    .date-price--row { grid-template-columns: auto minmax(0, 36ch); }
  }
  @media (min-width: 60rem) {
    .date-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
    .date-layout .date-price { grid-column: 1; grid-row: 1; }
    .date-layout .date-photo { grid-column: 1; grid-row: 2; width: 100%; }
    .date-layout .date-grid { grid-column: 2; grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr); }
  }
  .date-layout--short .date-cell { padding: 0.9rem 0; }
  @media (min-width: 60rem) {
    .date-layout--short .date-grid { align-content: start; }
    .date-layout--short .date-cell { padding: 0.3rem 0; }
    .date-layout--short .date-photo { width: min(100%, 20rem); }
    .date-layout--short .date-cell h3 { font-size: clamp(1.85rem, 1.2rem + 1.2vw, 2.4rem); }
  }
  .band--deep .date-group .group-note { color: color-mix(in oklab, var(--cream-on-dark) 82%, transparent); }
  .band--deep .price-row, .band--deep .price-row:last-child { border-color: color-mix(in oklab, var(--cream-on-dark) 35%, transparent); }
  .band--deep .pr-main p, .band--deep .pr-price span:not(.chip) { color: color-mix(in oklab, var(--cream-on-dark) 82%, transparent); }
  .band--deep .pr-main p b { color: var(--cream-on-dark); }
  .band--deep .pr-link { color: var(--saffron); }
  .band--deep .chip { border-color: color-mix(in oklab, var(--cream-on-dark) 55%, transparent); color: var(--cream-on-dark); }
  .band--deep .chip--eur { border-color: var(--saffron); color: var(--saffron); }
  .workshop-note { margin-top: 1.25rem; }
  .stamp { font-size: var(--fs-small); letter-spacing: 0.02em; color: var(--ink-soft); border-top: 1px solid var(--rule-strong); padding-top: 0.9rem; max-width: 44ch; }
  .stamp--big { font-family: var(--serif); font-size: var(--fs-pull); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }

  .fold { border-top: 1px solid var(--rule-strong); }
  .fold:last-of-type { border-bottom: 1px solid var(--rule-strong); }
  .fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-family: var(--serif); font-size: var(--fs-h4); line-height: 1.1; min-height: 3rem; }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary::after { content: ""; width: 1.1rem; height: 1.1rem; background: currentColor; flex: none; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; transition: rotate var(--t-base) var(--ease); }
  .fold[open] summary::after { rotate: 45deg; }
  .fold-body { padding: 0 0 1.5rem; display: grid; gap: 1rem; max-width: 62ch; }
  .fold-body ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
  .fold-body h3 { font-size: var(--fs-h4); }
  .band--deep .fold, .band--deep .fold:last-of-type { border-color: color-mix(in oklab, var(--cream-on-dark) 40%, transparent); }
  .band--deep .fold-body a { color: var(--saffron-wash); font-weight: 600; text-underline-offset: 3px; }

  .table-scroll { overflow-x: auto; margin: 2rem 0; }
  .compare { width: 100%; min-width: 34rem; font-size: var(--fs-small); text-align: left; }
  .compare th, .compare td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; line-height: 1.45; }
  .compare thead th { background: var(--paper-2); font-weight: 600; border-bottom: 1px solid var(--rule-strong); }
  .compare tbody th { font-weight: 500; color: var(--ink); }
  .compare .price-cell { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
  .compare--narrow { min-width: 0; }
  @media (max-width: 43.74rem) {
    .compare--stack { min-width: 0; }
    .compare--stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
    .compare--stack tbody tr { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
    .compare--stack tbody tr:first-child { border-top: 1px solid var(--rule-strong); }
    .compare--stack tbody th, .compare--stack tbody td { display: block; padding: 0; border: 0; }
    .compare--stack tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-bottom: 0.6rem; }
    .compare--stack tbody td + td { margin-top: 0.75rem; }
    .compare--stack td::before { content: attr(data-label); display: block; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ganga); margin-bottom: 0.15rem; }
  }

  .essay-head { padding-top: calc(var(--bar-h) + clamp(2.5rem, 5vw, 5rem)); padding-bottom: var(--section-s); }
  .essay-head h1 { font-size: var(--fs-h1-essay); line-height: 0.96; letter-spacing: -0.02em; max-width: 18ch; margin-top: 1rem; }
  .essay-head h1 em { color: var(--ganga); }
  .essay-head .dek { margin-top: 1.5rem; font-family: var(--serif); font-style: italic; font-size: var(--fs-pull); max-width: 34ch; line-height: 1.2; }
  .byline { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--ink-soft); }
  .essay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: var(--section-s); }
  .essay-grid > * { min-width: 0; }
  .prose { max-width: var(--measure-essay); font-size: var(--fs-body); line-height: 1.75; }
  .prose p { max-width: none; }
  .prose h2 { font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.75rem); line-height: 1.02; margin: clamp(3.5rem, 6vw, 4.5rem) 0 1.25rem; }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { font-size: var(--fs-h3); line-height: 1.05; margin: 2.5rem 0 1rem; }
  .prose p + p { margin-top: 1.25rem; }
  .prose ul, .prose ol { margin: 1.25rem 0; padding-left: 1.4rem; list-style: revert; display: grid; gap: 0.6rem; }
  .prose .lead { font-size: var(--fs-lead); line-height: 1.55; }
  .takeaway { margin-top: 3.5rem; padding: 2rem; background: var(--ganga-mist); border-top: 3px solid var(--ganga); }
  .takeaway h2 { margin-top: 0; }
  .faq { margin-top: 3.5rem; }
  .faq .fold { margin: 0; }
  .faq .fold summary { text-wrap: balance; }
  .nw { white-space: nowrap; }
  .toc { font-size: var(--fs-small); }
  .toc ol { display: grid; gap: 0; margin-top: 0.75rem; padding-left: 1.25rem; list-style: decimal; }
  .toc a { display: block; padding-block: 0.75rem; text-decoration: none; color: var(--ink-soft); }
  .essay-head .eyebrow a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }
  .toc a:hover { color: var(--ganga); }
  .toc details.fold summary { font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 1rem 0; }
  .toc .fold, .toc .fold:last-of-type { border: 0; }
  .toc .fold ol { margin-top: 0; padding-bottom: 0.75rem; }
  @media (min-width: 60rem) {
    .essay-grid { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
    .toc { position: sticky; top: 6rem; }
  }
  @supports selector(::details-content) {
    @media (min-width: 60rem) {
      .toc .fold::details-content { content-visibility: visible; display: block; }
      .toc details.fold summary { padding-top: 0; cursor: default; pointer-events: none; }
      .toc .fold summary::after { display: none; }
    }
  }
  @media (max-width: 59.99rem) {
    .toc { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding-block: 0; }
    .essay-head { padding-bottom: 2rem; }
    .essay-grid { padding-top: 0; }
  }
  @media (max-width: 43.99rem) {
    .essay-head .page-head-photo { width: 100%; }
    .essay-head .page-head-photo .frame { aspect-ratio: 4 / 3; }
  }
  .essay-end { text-align: left; }
  .essay-end .author { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
  .essay-end .author p { font-family: var(--serif); font-size: var(--fs-h4); line-height: 1.1; max-width: 22ch; }
  .round-s { width: 6rem; height: 6rem; border-radius: 50%; overflow: clip; flex: none; background: var(--paper-3); }
  .round-s img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
  .keep-reading { display: grid; gap: 0.5rem; }
  .essay-end .keep-reading { margin-top: 0.5rem; }
  .essay-end .essay-card { border-top: 0; padding-block: 0 2.5rem; }
  .essay-end .keep-reading ~ .author { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-strong); }
  .essay-end-grid { display: grid; gap: 2.5rem; }
  .essay-end-grid .keep-reading-nav { padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }
  .essay-end-grid .essay-card { display: block; padding-block: 0; border-bottom: 0; }
  .essay-end-grid .essay-card .essay-card-text { grid-column: auto; }
  .essay-end-grid .essay-card ~ .author { grid-column: 1 / -1; margin: clamp(0.5rem, 2vw, 1.5rem) 0 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-strong); }
  @media (min-width: 60rem) {
    .essay-end-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 9rem); align-items: start; }
    .essay-end-grid .keep-reading-nav { padding: 0 0 0 clamp(2rem, 4vw, 4rem); border-top: 0; border-left: 1px solid var(--rule-strong); }
  }
  @media (min-width: 80rem) {
    .essay-end .author .pill-row { margin-left: auto; }
  }
  .keep-reading li a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 600; color: var(--ganga); text-underline-offset: 3px; }

  .essay-card { position: relative; display: grid; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--rule-strong); }
  .essay-card:last-child { border-bottom: 1px solid var(--rule-strong); }
  .essay-card .card-img { margin: 0; overflow: clip; background: var(--paper-3); aspect-ratio: 4 / 3; }
  .essay-card .card-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale var(--t-image) var(--ease); }
  .essay-card:hover .card-img img { scale: 1.04; }
  .essay-card h2, .essay-card h3 { font-size: var(--fs-h3); line-height: 1; margin: 0.5rem 0 1rem; }
  .essay-card a.stretch { text-decoration: none; }
  .essay-card a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .essay-card .dek { color: var(--ink-soft); max-width: 44ch; }
  .essay-card .meta { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-soft); }
  .essay-card .go { margin-top: 1rem; padding-top: 0; }
  @media (min-width: 60rem) {
    .essay-card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: center; padding-block: 3rem; }
    .essay-card .card-img { grid-column: 1 / 6; }
    .essay-card .essay-card-text { grid-column: 7 / 13; }
  }

  .gallery-band { padding-top: 0; }
  .gallery { columns: 2; column-gap: 0.75rem; }
  .gallery > h2, .gallery > .group-note { column-span: all; }
  .grid-photos { display: contents; }
  .grid-photos li { display: block; break-inside: avoid; margin: 0 0 0.75rem; }
  .grid-photos .thumb img { display: block; width: 100%; height: auto; }
  .r60 { --ar: 0.6; }
  .r65 { --ar: 0.65; }
  .r67 { --ar: 0.67; }
  .r71 { --ar: 0.71; }
  .r74 { --ar: 0.74; }
  .r75 { --ar: 0.75; }
  .r80 { --ar: 0.8; }
  .r85 { --ar: 0.85; }
  .r91 { --ar: 0.91; }
  .r98 { --ar: 0.98; }
  .r100 { --ar: 1; }
  .r150 { --ar: 1.5; }
  @media (min-width: 40rem) {
    .gallery { columns: 3; column-gap: 1rem; }
    .grid-photos li { margin-bottom: 1rem; }
  }
  @media (min-width: 64rem) {
    .gallery { columns: auto; }
    .grid-photos { --h: 16rem; display: flex; gap: 1rem; }
    .grid-photos + .grid-photos { margin-top: 1rem; }
    .grid-photos li { display: flex; flex: var(--ar, 1) 1 calc(var(--ar, 1) * var(--h)); min-width: 0; margin: 0; }
    .grid-photos .thumb { flex: 1; min-width: 0; }
    .grid-photos .thumb img { height: 100%; object-fit: cover; }
  }
  .gallery + .gallery { margin-top: clamp(3.5rem, 7vw, 6rem); }
  .gallery > h2 { font-size: var(--fs-h2-m); line-height: 1; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 1.75rem; }
  .gallery > .group-note { margin: -0.75rem 0 1.5rem; font-size: var(--fs-small); color: var(--ink-soft); }
  .thumb { display: block; position: relative; overflow: clip; background: var(--paper-3); scroll-margin-top: 30vh; }
  .thumb img { width: 100%; height: auto; transition: scale var(--t-image) var(--ease); }
  .thumb:hover img, .thumb:focus-visible img { scale: 1.04; }
  .lightbox { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: color-mix(in oklab, var(--ink) 98%, transparent); padding: 4rem 1rem 5rem; }
  .lightbox:target { display: grid; }
  body:has(.lightbox:target) :is(.bar, .bar #menu, .skip, footer, main > :not(.lightbox)) { visibility: hidden; }
  .lightbox figure { position: relative; z-index: 1; margin: 0; max-width: min(92vw, 70rem); display: grid; gap: 0.75rem; background: var(--ink); border: 1px solid color-mix(in oklab, var(--cream-on-dark) 28%, transparent); min-width: min(80vw, 18rem); min-height: 14rem; align-content: start; box-shadow: var(--sh-lightbox); }
  .lightbox img { max-width: 100%; max-height: min(78svh, calc(100svh - 14rem)); width: auto; height: auto; margin-inline: auto; object-fit: contain; background: var(--paper-3); }
  .lightbox figcaption { color: var(--cream-on-dark); font-size: var(--fs-small); text-align: center; max-width: none; padding: 0.25rem 1rem 1rem; }
  .lb-back { position: absolute; inset: 0; z-index: 0; cursor: default; }
  .lb-close, .lb-prev, .lb-next {
    position: fixed; z-index: 2; display: inline-flex; align-items: center; color: var(--cream-on-dark);
    background: color-mix(in oklab, var(--ink) 70%, transparent); border: 1px solid color-mix(in oklab, var(--cream-on-dark) 45%, transparent);
    border-radius: var(--r-pill); padding: 0.75rem 1.25rem; min-height: 3rem; text-decoration: none; font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
    transition: background var(--t-base);
  }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--ink); }
  .lb-close { top: 1rem; right: 1rem; }
  .lb-prev { bottom: 1rem; left: 1rem; }
  .lb-next { bottom: 1rem; right: 1rem; }
  @media (max-height: 30rem) {
    .lightbox { padding: 0.75rem 6.5rem; }
    .lightbox figure { gap: 0.25rem; min-height: 0; max-width: 100%; }
    .lightbox img { max-height: calc(100svh - 7rem); }
    .lightbox figcaption { padding: 0.25rem 0.75rem 0.5rem; }
    .lb-close { top: 0.5rem; right: 0.5rem; }
    .lb-prev, .lb-next { top: 50%; bottom: auto; translate: 0 -50%; padding-inline: 1rem; }
    .lb-prev { left: 0.5rem; }
    .lb-next { right: 0.5rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox:target figure { animation: lb-in var(--t-base) var(--ease) both; }
    @keyframes lb-in { from { opacity: 0; scale: 0.98; } to { opacity: 1; scale: 1; } }
  }
  @supports not selector(:target) {
    .lightbox { position: static; display: block; background: none; padding: 0 0 1.5rem; }
    .lightbox figure { background: none; border: 0; min-width: 0; min-height: 0; box-shadow: none; max-width: 70rem; margin-inline: auto; }
    .lightbox figcaption { color: var(--ink); }
    .lb-back, .lb-close, .lb-prev, .lb-next { display: none; }
  }

  .contact { padding-block: var(--section); }
  .contact-inner { display: grid; gap: 3rem; }
  .contact .masthead { margin-bottom: 0; }
  .contact-copy h2 { font-size: clamp(4.4rem, 2.4rem + 10vw, 13rem); line-height: 0.84; letter-spacing: -0.015em; }
  .contact-copy h2 em { color: var(--ink); }
  .contact--page .contact-copy h2 { font-size: var(--fs-h2-m); line-height: 0.95; max-width: 12ch; letter-spacing: -0.02em; }
  .contact-copy .lede { margin-top: 1.75rem; font-size: 1.12rem; max-width: 40ch; color: var(--ink); }
  .contact--page { padding-block: clamp(3rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem); }
  .contact--page .contact-copy .lede { margin-top: 0; }
  .contact-copy .where { margin-top: 2.5rem; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
  .contact-links { margin-top: 2.5rem; display: grid; border-top: 1px solid var(--ink); }
  .contact-links li { border-bottom: 1px solid var(--ink); }
  .contact-links a { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; padding: 1.2rem 0; transition: padding var(--t-base) var(--ease), background var(--t-base); }
  .contact-links a:hover { padding-inline: 1rem; background: color-mix(in oklab, var(--paper) 45%, transparent); }
  .contact-links .k { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
  .contact-links .v { font-family: var(--serif); font-size: var(--fs-contact); line-height: 1.05; letter-spacing: -0.015em; overflow-wrap: anywhere; }
  .contact-photo { margin: 0; width: min(78%, 21rem); padding: 0.9rem; }
  .contact-photo .round { position: relative; aspect-ratio: 1; }
  .contact-photo .round::before { content: ""; position: absolute; inset: -0.9rem; border: 1px solid var(--ink); border-radius: 50%; }
  .contact-photo .round img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .contact-photo figcaption { margin-top: 2rem; padding-top: 0.6rem; border-top: 1px solid color-mix(in oklab, var(--ink) 45%, transparent); color: var(--ink); }
  @media (min-width: 60rem) {
    .contact-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3.5rem; }
    .contact .masthead { grid-column: 1 / -1; }
    .contact-copy { grid-column: 1 / 9; }
    .contact-photo { grid-column: 9 / 13; width: 100%; align-self: end; margin: 0 0 0.5rem; }
    .contact--solo .contact-copy { grid-column: 1 / -1; }
  }
  @media (min-width: 75rem) {
    .contact--solo .contact-copy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
    .contact--solo .contact-copy h2 { grid-column: 1 / -1; }
    .contact--solo .contact-copy .lede, .contact--solo .contact-copy .where { grid-column: 1 / 7; }
    .contact--solo .contact-copy .contact-links { grid-column: 8 / 13; grid-row: 2 / span 3; margin-top: 1.75rem; }
    .contact--solo .contact-copy .where { margin-top: 2rem; }
  }

  .split--where > .ph { max-width: 26rem; }
  .before-body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 52rem) {
    .practice-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
    .practice-list--grid li:nth-last-child(2) { border-bottom: 1px solid var(--rule-strong); }
    .practice-list--grid p { max-width: 40ch; }
  }

  .day { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
  .day-intro h2 { font-size: var(--fs-h2-m); line-height: 0.95; letter-spacing: -0.02em; max-width: 12ch; }
  .day-intro .lede { margin-top: 1.5rem; max-width: 32ch; }
  .day-intro .small { margin-top: 1.25rem; max-width: 40ch; }
  .day-intro .link-row { margin-top: 1.5rem; }
  .day-list { border-bottom: 1px solid var(--rule-strong); }
  .day-list li { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: baseline; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
  .day-list li:first-child { border-top-color: var(--rule-strong); }
  .day-list .at { font-family: var(--serif); font-size: clamp(1.75rem, 1.45rem + 1vw, 2.3rem); line-height: 1; letter-spacing: -0.02em; }
  .day-list .until { display: block; margin-top: 0.35rem; font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.01em; color: var(--ink-soft); }
  .day-list .what { font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem); line-height: 1.1; letter-spacing: -0.012em; }
  .day-list .is-rest .what { font-style: italic; color: var(--ink-soft); }
  @media (min-width: 60rem) {
    .day { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
    .day-intro { position: sticky; top: 6rem; }
  }

  .end-note .band-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: start; }
  .end-note .band-head h2 { max-width: 20ch; }

  .nf { padding-top: calc(var(--bar-h) + clamp(3rem, 6vw, 6rem)); padding-bottom: var(--section); }
  .nf-num { font-family: var(--serif); font-size: var(--fs-numeral); line-height: 0.8; color: var(--saffron-text); letter-spacing: -0.04em; display: block; }
  .nf h1 { font-size: calc(var(--fs-h1-page) * 0.6); line-height: 0.92; letter-spacing: -0.02em; margin: 1rem 0 1.25rem; max-width: 14ch; }
  .nf-grid { display: grid; gap: 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .big-list { display: grid; }
  .big-list li { border-top: 1px solid var(--rule); }
  .big-list li:last-child { border-bottom: 1px solid var(--rule); }
  .big-list a { display: flex; text-decoration: none; font-family: var(--serif); font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem); line-height: 1; padding: 0.75rem 0; transition: color var(--t-base), padding var(--t-base) var(--ease); }
  .big-list a:hover { color: var(--ganga); padding-left: 0.75rem; }
  .nf-photo { width: min(100%, 18rem); }
  @media (min-width: 60rem) { .nf-grid { grid-template-columns: minmax(0, 1fr) 18rem; gap: clamp(3rem, 8vw, 8rem); align-items: start; } }
  @media (min-width: 68.75rem) {
    .nf { padding-top: calc(var(--bar-h) + clamp(2rem, 4vw, 4rem)); }
    .nf > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 8rem); align-content: start; }
    .nf-grid { display: contents; }
    .nf-num, .nf h1, .nf .lede { grid-column: 1; }
    .nf-grid nav { grid-column: 2; grid-row: 1 / span 4; align-self: start; padding-top: 0.75rem; }
    .nf-photo { grid-column: 1; grid-row: 4; margin-top: 2.5rem; }
    .nf .big-list a { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); padding: 0.6rem 0; }
  }

  .foot { background: var(--ink); color: var(--cream-on-dark); padding: clamp(4rem, 7vw, 6rem) 0 2rem; }
  .foot a { text-decoration-color: color-mix(in oklab, var(--cream-on-dark) 40%, transparent); text-underline-offset: 4px; }
  .foot a:hover { text-decoration-color: var(--saffron); }
  .foot-inner { display: grid; gap: 3rem; }
  .foot-mark { font-family: var(--serif); font-size: var(--fs-wordmark-foot); line-height: 1.05; padding-bottom: 0.1em; letter-spacing: -0.02em; }
  .foot-sign span { font-family: var(--script); font-weight: 600; font-size: 2rem; line-height: 1.3; color: var(--saffron-wash); }
  .foot-bio { margin-top: 1.25rem; color: color-mix(in oklab, var(--cream-on-dark) 80%, transparent); max-width: 36ch; font-size: var(--fs-small); text-wrap: balance; }
  .foot-bio .nb { white-space: nowrap; }
  .foot-nav { display: grid; gap: 2rem; align-content: start; font-size: 0.98rem; }
  .foot-nav ul { display: grid; gap: 0; align-content: start; }
  .foot-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.4rem; }
  .foot-base {
    margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem;
    background: linear-gradient(color-mix(in oklab, var(--cream-on-dark) 28%, transparent), color-mix(in oklab, var(--cream-on-dark) 28%, transparent)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
    display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; font-size: var(--fs-small);
    color: color-mix(in oklab, var(--cream-on-dark) 75%, transparent);
  }
  .foot-base p { max-width: none; }
  .foot-base a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
  @media (min-width: 40rem) { .foot-nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 4rem; } }
  @media (min-width: 60rem) {
    .foot-inner { grid-template-columns: 1.2fr 1.4fr; }
    .foot-nav { justify-content: end; }
    .foot-nav ul:first-child { grid-template-columns: repeat(2, auto); column-gap: 3rem; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
  }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise-in {
      from { opacity: 0; translate: 0 1.5rem; }
      to { opacity: 1; translate: 0 0; }
    }
    .page-head > .wrap, .essay-head > .wrap, .nf > .wrap { animation: rise-in 0.6s var(--ease) both; }

    @supports (animation-timeline: view()) {
      @keyframes rise {
        from { opacity: 0; translate: 0 3rem; }
        to { opacity: 1; translate: 0 0; }
      }
      @keyframes unveil {
        from { clip-path: inset(0 0 24% 0); opacity: 0.25; }
        to { clip-path: inset(0 0 0 0); opacity: 1; }
      }
      @keyframes drift {
        from { translate: 0 -4%; }
        to { translate: 0 4%; }
      }
      @keyframes bar-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes hero-zoom {
        from { scale: 1; }
        to { scale: 1.12; }
      }
      @keyframes name-up {
        from { translate: 0 0; opacity: 1; }
        to { translate: 0 -3.5rem; opacity: 0; }
      }
      @keyframes card-away {
        from { translate: 0 0; opacity: 1; }
        to { translate: 0 2rem; opacity: 0; }
      }
      @keyframes progress {
        from { scale: 0 1; }
        to { scale: 1 1; }
      }
      @keyframes draw-y {
        from { scale: 1 0; }
        to { scale: 1 1; }
      }
      @keyframes arch-open {
        from { clip-path: inset(38% 12% 0 12% round 999px 999px 0 0); }
        to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
      }
      @keyframes dot-on {
        from { scale: 0; }
        to { scale: 1; }
      }
      @keyframes ring {
        from { scale: 0.94; }
        to { scale: 1; }
      }

      .chapter-text, .practice-list li, .lineage, .card-row, .contact-links li, .band-head, .essay-card, .principles > *, .quote-strip > *, .date-group, .letter-body, .day-list li {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 65%;
      }
      .ph .frame {
        animation: unveil linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
      }
      .ph .frame img { scale: 1.14; }
      .ph .frame img {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      .arch .frame {
        animation: arch-open linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
      }
      .masthead .rule {
        animation: progress linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
      }
      .timeline::before {
        animation: draw-y linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
      }
      .path-line li::before, .timeline > .chapter::before {
        animation: dot-on linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 100%;
      }
      .contact-photo .round::before {
        animation: ring linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
      }

      .bar::before {
        animation: bar-in linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 5rem;
      }
      .hero-stage img {
        animation: hero-zoom linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100vh;
      }
      .hero-name h1 {
        animation: name-up linear both;
        animation-timeline: scroll(root block);
        animation-range: 14rem 52rem;
      }
      .hero-card {
        animation: card-away linear both;
        animation-timeline: scroll(root block);
        animation-range: 22rem 56rem;
      }
      body::before {
        content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70;
        background: linear-gradient(90deg, var(--saffron), var(--ganga));
        transform-origin: left;
        animation: progress linear both;
        animation-timeline: scroll(root block);
      }
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar { view-transition-name: site-bar; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
}

@media print {
  .bar, #menu, .lightbox, .band-bg, .btn, .pill, .skip, .pill-row, .hero-actions, .actions { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::before { display: none; }
  .ph .frame img { scale: none !important; }
  body { background: #fff; color: #000; }
  .band, .band--deep, .band--saffron, .band--photo, .band--mist, .band--paper-2, .foot { background: #fff; color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; word-break: break-all; }
}