/* =========================================================
   Will Cady — v3
   Direction: full-bleed photography, a giant wordmark over the
   hero, warm bone/blush/sage colour blocks, Cormorant serif with
   italic lines, one script accent. See docs/brand-guidelines.md.
   ========================================================= */
:root {
  --bone: #f3eee6;
  --paper: #faf7f2;
  --blush: #e8d4c8;
  --sage: #d5d8c6;
  --espresso: #221a16;
  --ink: #1c1714;
  --muted: #6b6057;
  --muted-on-dark: #b5aa9e;
  --teal: #58b1ad;
  --teal-deep: #2e6f6b;
  --line: rgba(28, 23, 20, .16);
  --line-light: rgba(243, 238, 230, .28);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --max: 90rem;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--espresso); } /* dark canvas: overscroll past the footer or above the hero shows espresso, not the cream page */
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font: 400 1rem/1.7 var(--sans); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
::selection { background: var(--blush); color: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
em, .it { font-family: var(--serif); font-style: italic; }
body em { font-size: 1.1em; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--bone); padding: .75rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Small type ---------- */
.label { font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.caps { font: 500 .8125rem/1.6 var(--sans); text-transform: uppercase; letter-spacing: .2em; }
.lede { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.75rem)/1.4 var(--serif); }
.muted { color: var(--muted); }

/* ---------- Links & buttons ---------- */
.link-plus { display: inline-flex; align-items: center; gap: .6rem; font: 500 .8125rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-block: .75rem; border-bottom: 1px solid currentColor; }
.link-plus::after { content: "+"; font-size: 1.1rem; letter-spacing: 0; transition: transform .4s var(--ease-out); }
.link-plus:hover::after { transform: rotate(90deg); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem; border-radius: 999px;
  font: 500 .875rem/1 var(--sans); letter-spacing: .06em; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--bone); border: 1px solid var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pill:hover { background: transparent; color: var(--ink); }
.pill-light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pill-light:hover { background: transparent; color: var(--bone); }
.pill-outline { background: transparent; color: inherit; border-color: currentColor; }
.pill-outline:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .bar { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.site-header.over-hero { color: var(--bone); }
.site-header.scrolled { background: rgba(243, 238, 230, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); border-bottom-color: var(--line); }
.site-header.hidden { transform: translateY(-100%); }
.nav-left, .nav-right { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a:not(.pill) { font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-block: .8rem; position: relative; }
.nav-left a::after, .nav-right a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav-left a:hover::after, .nav-right a:not(.pill):hover::after, .nav-left a[aria-current="page"]::after, .nav-right a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.mark { display: inline-flex; align-items: center; gap: .55rem; font: 400 1.5rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding-left: .28em; white-space: nowrap; }
.site-header .pill { min-height: 40px; padding: .65rem 1.2rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.over-hero:not(.scrolled) .pill { background: transparent; color: var(--bone); border-color: rgba(243,238,230,.7); }
.over-hero:not(.scrolled) .pill:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.menu-btn { display: none; }

/* Full-screen menu (mobile) */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--espresso); color: var(--bone);
  display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--gutter) 2rem;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.menu-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu nav { display: flex; flex-direction: column; justify-content: center; gap: .25rem; }
.menu nav a { font: 400 clamp(2.6rem, 11vw, 4.5rem)/1.1 var(--serif); text-decoration: none; }
.menu nav a em { font-size: 1em; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-on-dark); }
.menu-foot a { text-decoration: none; }
.menu-close, .menu-btn {
  font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: inherit;
  background: none; border: 1px solid currentColor; border-radius: 999px; min-height: 44px; padding: 0 1.1rem; cursor: pointer;
}

/* ---------- Home hero ---------- */
.hero { position: relative; height: 100svh; min-height: 38rem; color: var(--bone); overflow: hidden; isolation: isolate; background: var(--espresso); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,15,12,.45) 0%, rgba(20,15,12,0) 22%, rgba(20,15,12,0) 36%, rgba(20,15,12,.5) 58%, rgba(20,15,12,.8) 100%); }
.hero-inner { position: absolute; inset: auto 0 0 0; padding-bottom: clamp(.5rem, 1.6vw, 1.5rem); }
.hero-taglines { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-light); }
.hero-taglines p { margin: 0; font: italic 400 clamp(1.25rem, .9rem + 1.3vw, 2.1rem)/1.15 var(--serif); }
.hero-taglines p:last-child { text-align: right; }
.hero-taglines p { text-shadow: 0 1px 18px rgba(20,15,12,.55); }
/* Home: a title (serif italic) and a promise (sans), so the two lines read as different things */
.hero-taglines.titled { flex-direction: column; align-items: flex-start; gap: .75rem; }
.hero-taglines.titled p + p { text-align: left; font: 400 clamp(.95rem, .8rem + .5vw, 1.2rem)/1.4 var(--sans); letter-spacing: .01em; color: rgba(243,238,230,.88); }
.wordmark { display: block; width: 100%; height: auto; margin-top: .4rem; overflow: visible; }
.wordmark text { font-family: var(--serif); font-weight: 400; fill: currentColor; }

/* ---------- Page heroes (inner pages) ---------- */
.page-hero { position: relative; min-height: 92svh; display: grid; place-items: end center; text-align: center; color: var(--bone); overflow: hidden; isolation: isolate; background: var(--espresso); padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem; }
.page-hero .hero-media img { object-position: 50% 35%; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,15,12,.62) 0%, rgba(20,15,12,.12) 26%, rgba(20,15,12,.2) 50%, rgba(20,15,12,.75) 100%); }
.page-hero h1 { font-size: clamp(3.2rem, 1.5rem + 7.5vw, 9rem); font-weight: 400; line-height: .95; }
.page-hero h1 em { display: block; font-size: .55em; margin-top: .25em; }
.page-hero .label { margin-bottom: 1.5rem; }
.page-hero .pill { margin-top: 2.5rem; }

/* ---------- Intro (atelier) ---------- */
.intro { padding-block: clamp(6rem, 13vw, 11rem); text-align: center; }
.intro h2 { font: 400 clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem)/1 var(--serif); letter-spacing: -.02em; }
.intro .line { font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.25 var(--serif); margin: .6rem 0 0; }
.intro-images { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; gap: clamp(1rem, 2.5vw, 2rem); margin: clamp(2.5rem, 5vw, 4rem) auto; }
.intro-images img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.intro .rule-line { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.25 var(--serif); }
.intro .rule-line::before { content: ""; order: 1; width: clamp(4rem, 18vw, 18rem); height: 1px; background: var(--ink); }
.intro .rule-line span:last-child { order: 2; }
.intro .body { max-width: 36rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; color: var(--muted); }
/* Home: the practice (interventional storytelling) and the three places Will steps in */
.practice .label { margin-bottom: 1.25rem; }
.practice h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem); line-height: 1.04; max-width: 15ch; margin: 0 auto; text-wrap: balance; }
.practice-lede { max-width: 42rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; }
.places { list-style: none; padding: 0; margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; max-width: 52rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); text-align: left; }
.places li { border-top: 1px solid var(--ink); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.places h3 { font: italic 400 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--serif); margin: 0; }
.places p { margin: 0; color: var(--muted); flex: 1; }
.places .link-plus { align-self: flex-start; }
.practice-close { font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.25 var(--serif); margin: clamp(3.5rem, 7vw, 5rem) auto 0; max-width: 34ch; text-wrap: balance; }
@media (max-width: 820px) { .places { grid-template-columns: 1fr; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; }
.marquee .label { flex: none; padding: 1.6rem var(--gutter); border-right: 1px solid var(--line); background: var(--bone); position: relative; z-index: 1; }
.marquee-track { display: flex; flex: none; gap: 3.5rem; padding-left: 3.5rem; animation: marquee 48s linear infinite; }
.marquee-track span { font: italic 400 clamp(1.4rem, 1.1rem + .9vw, 2rem)/1 var(--serif); white-space: nowrap; }
.marquee-track span::after { content: ""; display: inline-block; width: .32rem; height: .32rem; border-radius: 50%; background: var(--ink); margin-left: 3.5rem; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 50/50 tiles ---------- */
.tile { display: grid; grid-template-columns: 1fr 1fr; }
.tile > * { min-height: min(100svh, 50vw); }
.tile-photo { position: relative; overflow: hidden; }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(3rem, 6vw, 6rem) var(--gutter); }
.tile-text h2 { font: 400 clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem)/1 var(--serif); letter-spacing: -.02em; }
.tile-text .it { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); margin: .7rem 0 0; }
.tile-text .thumb { width: clamp(8rem, 13vw, 12rem); margin: clamp(2rem, 4vw, 3.25rem) auto; }
.tile-text .thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile-text .thumb.book img { aspect-ratio: auto; box-shadow: 0 24px 40px -22px rgba(28,23,20,.6); }
.tile-text p.body { max-width: 26rem; color: var(--muted); font-size: 1rem; margin-bottom: 2rem; }
.bg-blush { background: var(--blush); }
.bg-sage { background: var(--sage); }
.bg-paper { background: var(--paper); }
.bg-espresso { background: var(--espresso); color: var(--bone); }
.bg-espresso .muted, .bg-espresso p.body { color: var(--muted-on-dark); }

/* ---------- Script band ---------- */
.script-band { background: var(--espresso); color: var(--bone); text-align: center; padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; }
.script-band .caps { font-size: clamp(1.05rem, .8rem + 1vw, 1.75rem); line-height: 1.35; max-width: 56rem; padding-inline: var(--gutter); margin: 0 auto; }

/* ---------- Ways to work (accordion row) ---------- */
.ways { border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.ways details { border-right: 1px solid var(--line); }
.ways details:last-child { border-right: 0; }
.ways summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.75rem clamp(1rem, 2vw, 2rem); font: 400 clamp(1.35rem, 1.1rem + .6vw, 1.75rem)/1.1 var(--serif); }
.ways summary::-webkit-details-marker { display: none; }
.ways summary::after { content: "+"; font: 300 1.5rem/1 var(--sans); transition: transform .4s var(--ease-out); }
.ways details[open] summary::after { transform: rotate(45deg); }
.ways summary:hover { background: var(--paper); }
.ways .panel { padding: 0 clamp(1rem, 2vw, 2rem) 2rem; color: var(--muted); font-size: 1rem; }

/* ---------- Full-bleed quote ---------- */
.quote-photo { position: relative; min-height: 100svh; color: var(--bone); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.quote-photo .hero-media img { object-position: 50% 40%; }
.quote-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,15,12,.7) 0%, rgba(20,15,12,.25) 55%, rgba(20,15,12,0) 100%); }
.quote-photo blockquote { margin: 0; padding-block: clamp(4rem, 8vw, 7rem); max-width: 42rem; }
.quote-photo blockquote p { font: 400 clamp(2.1rem, 1.3rem + 3vw, 4.4rem)/1.08 var(--serif); margin-bottom: 1.5rem; }
.quote-photo cite { font: 500 .75rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal; }

/* ---------- Centered CTA (Domitur) ---------- */
.cta { text-align: center; padding-block: clamp(7rem, 15vw, 13rem); }
.cta h2 { font-size: clamp(3rem, 1.4rem + 6.5vw, 8rem); line-height: .95; }
.cta h2 em { display: block; }
.cta p { max-width: 32rem; margin: 2rem auto 2.5rem; color: var(--muted); }

/* ---------- Editorial content blocks ---------- */
.section { padding-block: clamp(5rem, 10vw, 9rem); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.split h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); }
.split h2 em { display: block; }
.prose { max-width: 38rem; }
.prose p { color: var(--muted); }
.prose p.lede { color: var(--ink); }
.bg-espresso .prose p.lede { color: var(--bone); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 6vw, 7rem); padding-block: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.rows h3 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1; }
.rows h3 em { display: block; font-size: .5em; margin-top: .55em; line-height: 1.3; color: var(--muted); }
.rows ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.rows li li { margin-bottom: .3rem; }
.rows .label { display: inline-block; margin-bottom: 1rem; color: var(--teal-deep); }
.bg-espresso .rows, .bg-espresso .rows > li { border-color: var(--line-light); }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts li { padding: 1.75rem clamp(1rem, 2vw, 2rem) 1.75rem 0; border-right: 1px solid var(--line); }
.facts li + li { padding-left: clamp(1rem, 2vw, 2rem); }
.facts li:last-child { border-right: 0; }
.facts strong { display: block; font: 400 clamp(1.5rem, 1.2rem + .9vw, 2.1rem)/1.1 var(--serif); margin-bottom: .5rem; }
.facts span { font-size: .9375rem; color: var(--muted); }

.directions { list-style: none; margin: 0; padding: 0; counter-reset: d; border-top: 1px solid var(--line-light); }
.directions li { counter-increment: d; display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line-light); }
.directions li::before { content: counter(d, upper-roman); font: italic 400 1.1rem/1 var(--serif); color: var(--teal); }
.directions li span:first-child { font: 400 clamp(1.4rem, 1.1rem + .9vw, 2rem)/1.15 var(--serif); }
.directions li span:last-child { font-size: .9375rem; color: var(--muted-on-dark); font-style: italic; font-family: var(--serif); font-size: 1.15rem; }

.chapter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.chapter-row .tile-photo { min-height: min(90svh, 46vw); }
.chapter-row .chapter-text { padding: clamp(3rem, 7vw, 7rem) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.chapter-row h2 { font-size: clamp(2.6rem, 1.5rem + 4vw, 5.5rem); margin-bottom: 1.5rem; }
.chapter-row.flip .tile-photo { order: 2; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label { font: 500 .75rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.field .hint { font-size: .85rem; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 50px; padding: .8rem 0; font: 400 1.0625rem/1.4 var(--sans); color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem; }
select option { color: var(--ink); }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-width: 2px; border-bottom-color: var(--teal-deep); }
.bg-espresso input:focus, .bg-espresso select:focus, .bg-espresso textarea:focus { border-bottom-color: var(--teal); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.bg-espresso input::placeholder, .bg-espresso textarea::placeholder { color: var(--muted-on-dark); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-bottom-color: #a83a1d; }
.field .error { font-size: .875rem; color: #a83a1d; }
.bg-espresso .field .error { color: #f1b49d; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; max-width: 32rem; }
.inline-form .field { flex: 1 1 14rem; }
.form-status { flex-basis: 100%; min-height: 1.5em; margin: 0; font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); color: var(--bone); padding-top: clamp(4rem, 8vw, 7rem); overflow: hidden; box-shadow: 0 2px 0 var(--espresso); }
.footer-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 3rem; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-light); }
.footer-top h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin-bottom: .75rem; }
.footer-top p { color: var(--muted-on-dark); max-width: 28rem; }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-top ul a { text-decoration: none; font: 400 1.35rem/1.2 var(--serif); }
.footer-top ul a:hover { color: var(--teal); }
.footer-top .label { color: var(--muted-on-dark); margin-bottom: 1.25rem; }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; font-size: .8125rem; color: var(--muted-on-dark); }
.footer-mark { display: block; width: 100%; height: auto; margin-bottom: -2.2%; color: var(--bone); }
.footer-mark text { font-family: var(--serif); fill: currentColor; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: settle 2.4s var(--ease-out) both; }
  .wordmark { clip-path: inset(0 0 100% 0); animation: unveil 1.4s var(--ease-out) .35s forwards; }
  .hero-taglines { opacity: 0; animation: fadeIn 1.2s var(--ease) 1.1s forwards; }
  .reveal { clip-path: inset(12% 0 12% 0); transition: clip-path 1.4s var(--ease-out); }
  .reveal img { transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
  .reveal.in { clip-path: inset(0 0 0 0); }
  .reveal.in img { transform: scale(1); }
}
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes unveil { to { clip-path: inset(0 0 -10% 0); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-left, .nav-right a:not(.pill) { display: none; }
  .site-header .bar { grid-template-columns: auto 1fr auto; }
  .site-header .mark { order: -1; justify-self: start; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav-right { gap: .75rem; }
  .ways { grid-template-columns: 1fr 1fr; }
  .ways details:nth-child(2) { border-right: 0; }
  .ways details:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(2) { border-right: 0; }
  .facts li:nth-child(3) { padding-left: 0; }
  .facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .tile, .chapter-row, .split, .rows > li, .footer-top { grid-template-columns: 1fr; }
  .tile > * { min-height: 0; }
  .tile-photo { aspect-ratio: 4 / 5; }
  .tile.flip-mobile .tile-photo { order: -1; }
  .chapter-row.flip .tile-photo { order: 0; }
  .chapter-row .tile-photo { min-height: 0; aspect-ratio: 4 / 5; }
  .hero-taglines { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .hero-taglines p:last-child { text-align: left; }
  .form-row { grid-template-columns: 1fr; }
  .marquee .label { display: none; }
  .quote-photo::after { background: linear-gradient(0deg, rgba(20,15,12,.75) 0%, rgba(20,15,12,.15) 70%); }
  .site-header .pill { display: none; }
}
@media (max-width: 560px) {
  .ways { grid-template-columns: 1fr; }
  .ways details { border-right: 0; border-bottom: 1px solid var(--line); }
  .ways details:last-child { border-bottom: 0; }
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .intro-images { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
}

/* Fixes */
.chapter-text .facts { grid-template-columns: 1fr 1fr !important; border-top: 1px solid var(--line); }
.chapter-text .facts li, .chapter-text .facts li + li { padding: 1.4rem 1.5rem 1.4rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
.bg-espresso .prose p { color: var(--muted-on-dark); }
.bg-espresso input, .bg-espresso select { color-scheme: dark; }
@media (max-width: 560px) { .chapter-text .facts { grid-template-columns: 1fr !important; } }

/* =========================================================
   v4: icons (Point, Vision, Compass, Star, Journey, Lesson)
   ========================================================= */
.icon { display: block; width: 72px; height: auto; aspect-ratio: 1; }
.mark .icon { width: 44px; transform: translateY(-3px); } /* centers the eye on the signature's midline (cap tops to baseline) */
.mark .signature { transition: opacity .8s ease .15s; }
.mark .signature.sig-waiting { opacity: 0; transition: none; }
.mark .i-bone { display: none; }
.over-hero:not(.scrolled) .mark .i-ink { display: none; }
.over-hero:not(.scrolled) .mark .i-bone, .menu .mark .i-bone { display: block; }
.menu .mark .i-ink { display: none; }
.tile-text .icon { width: clamp(6rem, 9vw, 8.5rem); margin: clamp(2rem, 4vw, 3rem) auto; }

.steps-band { background: var(--espresso); color: var(--bone); padding-block: clamp(5.5rem, 11vw, 10rem); }
.steps-head { text-align: center; max-width: 52rem; margin: 0 auto clamp(3.5rem, 7vw, 6rem); }
.steps-head h2 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem); line-height: 1.02; }
.steps-head h2 em { color: var(--teal); }
.steps-head .label { color: var(--muted-on-dark); margin-bottom: 1.5rem; display: block; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.steps li { padding: 2rem clamp(.75rem, 1.4vw, 1.5rem) 0; border-right: 1px solid var(--line-light); text-align: center; }
.steps li:last-child { border-right: 0; }
.steps .icon { width: clamp(4.5rem, 7vw, 6.5rem); margin: 0 auto 1.75rem; transition: transform .8s var(--ease-out); }
.steps li:hover .icon { transform: rotate(-8deg) scale(1.04); }
.steps .num { display: block; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; color: var(--muted-on-dark); margin-bottom: .75rem; }
.steps h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); margin-bottom: .6rem; }
.steps p { font-size: .9375rem; color: var(--muted-on-dark); margin: 0; }

.icon-band { background: var(--espresso); color: var(--bone); text-align: center; padding-block: clamp(5.5rem, 11vw, 10rem); }
.icon-band .icon { width: clamp(6rem, 10vw, 9rem); margin: 0 auto 2.5rem; }
.icon-band blockquote { margin: 0 auto; max-width: 54rem; padding-inline: var(--gutter); }
.icon-band blockquote p { font: 400 clamp(2.3rem, 1.3rem + 3.6vw, 5rem)/1.04 var(--serif); letter-spacing: -.02em; margin-bottom: 1.5rem; }
.icon-band blockquote p em { color: var(--teal); }
.icon-band cite { font: 500 .75rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--muted-on-dark); }

.ways summary .icon { width: 34px; margin-right: auto; }
.ways summary { justify-content: flex-start; gap: .9rem; }
.ways summary::after { margin-left: auto; }
.rows h3 .icon { width: 56px; margin-bottom: 1.5rem; }
.chapter-row h2 .icon { width: 64px; margin-bottom: 1.5rem; }
.cta .icon { width: clamp(5rem, 8vw, 7rem); margin: 0 auto 2rem; }
.quote-photo .q-label { position: absolute; top: clamp(2rem, 5vw, 4rem); left: var(--gutter); display: flex; align-items: center; gap: .8rem; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.quote-photo .q-label .icon { width: 40px; }
.photo-label { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; font: 500 .6875rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 8px rgba(0,0,0,.4); }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li:nth-child(3) { border-right: 0; }
  .steps li { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-light); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { border-right: 1px solid var(--line-light); }
  .steps li:nth-child(2n) { border-right: 0; }
}

/* v5 copy components */
.footer-question { font: italic 400 1.35rem/1.3 var(--serif); color: var(--bone) !important; margin-bottom: 1.5rem; }
.scene { max-width: 46rem; margin: 0 auto; }
.scene p.scene-text { font: 400 clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: 1.5rem; }
.scene p.scene-text em { font-size: 1em; }
.entry { font: italic 400 clamp(1.4rem, 1rem + 1.3vw, 2.1rem)/1.3 var(--serif); margin: 2.5rem auto 0; max-width: 40rem; }
.proofs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proofs li { padding: 2.25rem clamp(1rem, 2.5vw, 2.5rem); border-right: 1px solid var(--line); display: grid; gap: .6rem; align-content: start; }
.proofs li:last-child { border-right: 0; }
.proofs .icon { width: 44px; margin-bottom: .5rem; }
.proofs strong { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--serif); }
.proofs span { color: var(--muted); font-size: .9375rem; }
.angles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.angles li { padding: 2.25rem clamp(1rem, 2.4vw, 2.4rem) 2.5rem 0; border-bottom: 1px solid var(--line); }
.angles li:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.angles li:not(:nth-child(3n+1)) { padding-left: clamp(1rem, 2.4vw, 2.4rem); }
.angles .icon { width: 48px; margin-bottom: 1.25rem; }
.angles h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); margin-bottom: .6rem; }
.angles p { color: var(--muted); font-size: .9375rem; margin: 0; }
.heal-band { background: var(--sage); padding-block: clamp(5rem, 10vw, 9rem); text-align: center; }
.heal-band h2 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 6rem); line-height: 1; }
.heal-band h2 em { display: block; }
.heal-band .letters { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem clamp(1.5rem, 4vw, 3.5rem); margin: 2.5rem 0; font: 500 .8125rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.heal-band p.body { max-width: 38rem; margin: 0 auto 2rem; color: var(--muted); }
.close-q { font: italic 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.3 var(--serif); margin: 2.5rem auto 0; max-width: 36rem; }
@media (max-width: 820px) {
  .proofs, .angles { grid-template-columns: 1fr; }
  .proofs li, .angles li, .angles li:not(:nth-child(3n)), .angles li:not(:nth-child(3n+1)) { border-right: 0; padding-left: 0; }
  .proofs li { border-bottom: 1px solid var(--line); padding-inline: 0; }
}

/* v6: press list, endorsements, videos */
.press { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press li { border-bottom: 1px solid var(--line); }
.press a { display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 7fr) auto; gap: .5rem 2rem; align-items: baseline; padding: 1.25rem 0; text-decoration: none; transition: padding .4s var(--ease-out), background-color .3s var(--ease); }
.press a:hover { padding-left: 1rem; background: var(--paper); }
.press .outlet { font: 500 .75rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.press .headline { font: 400 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.25 var(--serif); }
.press .year { font-size: .875rem; color: var(--muted); }
.endorse { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.endorse figure { margin: 0; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--line); }
.endorse figure:nth-child(odd) { border-right: 1px solid var(--line); }
.endorse figure:nth-child(even) { padding-left: clamp(1rem, 3vw, 3rem); }
.endorse blockquote { margin: 0 0 1.25rem; font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.9rem)/1.3 var(--serif); }
.endorse figcaption strong { display: block; font-weight: 500; }
.endorse figcaption span { color: var(--muted); font-size: .9375rem; }
.feature-quote { text-align: center; padding-block: clamp(5rem, 10vw, 8.5rem); }
.feature-quote blockquote { margin: 0 auto; max-width: 52rem; padding-inline: var(--gutter); }
.feature-quote blockquote p { font: 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem)/1.12 var(--serif); letter-spacing: -.015em; margin-bottom: 1.75rem; }
.feature-quote cite { font-style: normal; display: block; }
.feature-quote cite strong { display: block; font: 500 .8125rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.feature-quote cite span { color: var(--muted); font-size: .9375rem; }
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.videos a { display: block; text-decoration: none; }
.videos .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--espresso); margin-bottom: 1rem; }
.videos .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.videos a:hover .thumb img { transform: scale(1.04); }
.videos .thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(243,238,230,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%231c1714'/%3E%3C/svg%3E") center/28px no-repeat; }
.videos .label { color: var(--muted); display: block; margin-bottom: .4rem; }
.videos h3 { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem); line-height: 1.2; }
.videos:has(> li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) {
  .endorse, .videos { grid-template-columns: 1fr; }
  .endorse figure, .endorse figure:nth-child(even) { border-right: 0; padding-left: 0; }
  .press a { grid-template-columns: 1fr; gap: .3rem; }
}

/* Press clippings */
.clippings { padding-block: 0 clamp(5rem, 10vw, 8rem); }
.clippings .grid { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.clippings figure { margin: 0; text-align: left; }
.clippings a { display: block; text-decoration: none; }
.clippings img { display: block; height: auto; background: #fff; box-shadow: 0 30px 60px -30px rgba(28,23,20,.45), 0 0 0 1px var(--line); transition: transform .8s var(--ease-out); }
.clippings a:hover img { transform: translateY(-6px); }
.clippings .mw img { width: clamp(12rem, 22vw, 18rem); transform: rotate(-2deg); }
.clippings .li img { width: clamp(17rem, 38vw, 32rem); transform: rotate(1.5deg); margin-top: clamp(1rem, 4vw, 3rem); }
.clippings .mw a:hover img { transform: rotate(-2deg) translateY(-6px); }
.clippings .li a:hover img { transform: rotate(1.5deg) translateY(-6px); }
.clippings figcaption { margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }
.clippings figcaption strong { display: block; font: 500 .75rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.clippings .credit { text-align: center; font-size: .8125rem; color: var(--muted); margin-top: 2.5rem; }

/* Black-line icons on dark grounds sit on a bone disc */
.icon.disc { background: var(--bone); border-radius: 50%; box-shadow: 0 0 0 var(--ring, 14px) var(--bone); }
.mark .icon.disc { --ring: 4px; }
.steps .icon.disc { --ring: 12px; }
.tile-text .icon.disc, .icon-band .icon.disc { --ring: 18px; }
.q-label .icon.disc { --ring: 6px; }
.site-footer .icon.disc { --ring: 9px; margin-left: 9px; }

/* Speaker kit */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.kit-item { padding: 2rem clamp(1rem, 2.4vw, 2.4rem) 2.25rem 0; border-bottom: 1px solid var(--line); }
.kit-item:not(.kit-wide):not(:nth-child(3)) { border-right: 1px solid var(--line); }
.kit-item:nth-child(2), .kit-item:nth-child(3) { padding-left: clamp(1rem, 2.4vw, 2.4rem); }
.kit-wide { grid-column: 1 / -1; padding-right: 0; }
.kit-wide .kit-text { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 5rem); }
.kit-wide .kit-text p { break-inside: avoid; }
.kit-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.kit-head h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.kit-text p { color: var(--muted); font-size: .9375rem; }
.kit-copy { font: 500 .6875rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 999px; min-height: 36px; padding: 0 1rem; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); flex: none; }
.kit-copy:hover, .kit-copy.done { background: var(--ink); color: var(--bone); }
@media (max-width: 960px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-item, .kit-item:nth-child(2), .kit-item:nth-child(3) { padding-left: 0; padding-right: 0; border-right: 0 !important; }
}

/* About: the equation heading */
.intro h2.equation { font-size: clamp(2.2rem, 1.1rem + 4vw, 5.2rem); line-height: 1.05; }
.equation .op { color: var(--muted); font-style: normal; padding-inline: .12em; }
.equation em { font-size: 1em; }
.myth h2 { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 6rem); }
.myth h2 em { color: var(--teal); }

/* Home: the oracle opener */
.oracle { padding-block: clamp(6rem, 13vw, 11rem); text-align: center; }
.oracle .wrap { max-width: 56rem; }
.oracle .icon.disc { width: clamp(4rem, 6vw, 5.5rem); --ring: 16px; margin: 0 auto 3rem; }
.oracle .label { color: var(--muted-on-dark); margin-bottom: 2.5rem; }
.oracle-line { font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.35rem)/1.3 var(--serif); letter-spacing: -.01em; margin: 0 auto 1.75rem; max-width: 46rem; }
.oracle-line em { font-size: 1em; }
.oracle-q { font: italic 400 clamp(3.4rem, 1.6rem + 7vw, 8.5rem)/1 var(--serif); color: var(--teal); letter-spacing: -.02em; margin: 1rem 0 3rem; }
.oracle-close { font-size: 1.0625rem; color: var(--muted-on-dark); max-width: 36rem; margin: 2.5rem auto 2.5rem; }
.oracle-actions { display: flex; gap: 1.5rem 2.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .oracle-q { opacity: 0; transform: translateY(.3em); transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out); }
  .oracle-q.in { opacity: 1; transform: none; }
}

/* Four-identity proofs */
.proofs-4 { grid-template-columns: repeat(4, 1fr); }
.proof-heading { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1.05 var(--serif); letter-spacing: -.01em; }
.proofs-4 li { gap: .75rem; }
.proofs-4 .icon { margin-bottom: .25rem; }
.proofs-4 .who { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .02em; color: var(--muted); }
.proofs-4 strong { font-size: clamp(1.45rem, 1.15rem + .9vw, 2rem); line-height: 1.12; text-wrap: balance; }
@media (max-width: 1080px) { .proofs-4 { grid-template-columns: 1fr 1fr; } .proofs-4 li:nth-child(2) { border-right: 0; } .proofs-4 li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 820px) { .proofs-4 { grid-template-columns: 1fr; } .proofs-4 li { padding-inline: var(--gutter); } }
.nowrap { white-space: nowrap; }
.proofs strong span { font: inherit; color: inherit; }

/* Carousels */
.carousel .slides { display: grid; }
.carousel .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; margin: 0; }
.carousel .slide.active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.feature-quote.carousel .slide p { font: 400 clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 auto 1.75rem; max-width: 52rem; }
.feature-quote.carousel .slide cite { font-style: normal; display: block; }
.feature-quote.carousel .slide cite strong { display: block; font: 500 .8125rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.feature-quote.carousel .slide cite span { color: var(--muted); font-size: .9375rem; }
.feature-quote.carousel .slides { padding-inline: var(--gutter); }
.quote-photo.carousel .slides { padding-block: clamp(4rem, 8vw, 6rem) 1.5rem; max-width: 46rem; }
.quote-photo.carousel .slide p { font: 400 clamp(1.8rem, 1.2rem + 2.4vw, 3.6rem)/1.1 var(--serif); margin-bottom: 1.25rem; }
.quote-photo.carousel .slide cite { font: 500 .75rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; }
.quote-photo.carousel .slide cite a { color: inherit; text-underline-offset: .3em; }
.quote-photo.carousel .slide cite em { font-family: var(--sans); font-style: normal; }
.carousel-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.feature-quote .carousel-nav { justify-content: center; }
.quote-photo .carousel-nav { padding-bottom: clamp(3rem, 6vw, 5rem); }
.carousel-nav button.c-prev, .carousel-nav button.c-next { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font: 400 1.4rem/1 var(--serif); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.feature-quote .carousel-nav button.c-prev:hover, .feature-quote .carousel-nav button.c-next:hover { background: var(--ink); color: var(--bone); }
.quote-photo .carousel-nav button.c-prev:hover, .quote-photo .carousel-nav button.c-next:hover { background: var(--bone); color: var(--ink); }
.dots { display: flex; gap: .5rem; }
.dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s, transform .3s; }
.dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.3); }
.feature-quote.carousel .slides { max-width: 58rem; margin: 0 auto; }
.feature-quote.carousel .slide { justify-self: center; width: 100%; max-width: 52rem; align-self: center; }

.oracle-q.oracle-word { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); margin: 0 0 2rem; }

/* Opener chapters and reflection */
.oracle .label.oracle-chapter { margin-top: clamp(3.5rem, 7vw, 5.5rem); position: relative; padding-top: clamp(3rem, 6vw, 4.5rem); }
.oracle .label.oracle-chapter::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: clamp(2rem, 4vw, 3rem); background: var(--line-light); }
.oracle-reflect { margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding-top: clamp(3rem, 6vw, 4rem); border-top: 1px solid var(--line-light); max-width: 46rem; }
.oracle-reflect .oracle-line { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem); color: var(--bone); }
.oracle-reflect .oracle-line:last-child { color: var(--muted-on-dark); }

.oracle .label.oracle-kicker { margin-bottom: 1.25rem; }
.oracle-title { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); line-height: 1; margin: 0 auto clamp(3.5rem, 7vw, 5rem); color: var(--bone); }
.oracle-title em { color: var(--teal); }
.oracle-kicker + .oracle-title + .label { margin-top: 0; }

.oracle h2.oracle-kicker { font: italic 400 clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem)/1.1 var(--serif); color: var(--teal); letter-spacing: -.01em; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }

.oracle h2.oracle-kicker { margin-bottom: .9rem; }
.oracle .label.oracle-source { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.oracle-source a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-light); }
.oracle-source a:hover { border-bottom-color: var(--bone); }
.oracle-source em { font-family: var(--serif); font-size: 1.35em; letter-spacing: .02em; text-transform: none; }

.oracle-epigraph { font: italic 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.35 var(--serif); color: var(--muted-on-dark); max-width: 38rem; margin: 0 auto clamp(3.5rem, 7vw, 5rem); }
.oracle .label.oracle-source { margin-bottom: clamp(2rem, 4vw, 3rem); }
.oracle h2.oracle-kicker { font: 400 clamp(2rem, 1.35rem + 2vw, 3rem)/1.1 var(--serif); font-style: normal; color: var(--bone); letter-spacing: -.015em; }

/* Single-line scribbles that draw themselves in (dash length set in js/site.js) */
.scribble { display: block; width: min(100%, 34rem); height: auto; margin: clamp(2rem, 4vw, 3rem) auto; overflow: visible; }
.scribble path { fill: none; stroke: var(--bone); stroke-opacity: .85; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scribble.drawing path { transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .25, 1); }
.oracle .label + .scribble { margin-top: 1rem; }
.oracle-reflect .scribble-hand { margin-top: -1rem; width: min(100%, 30rem); }
.scribble-hand path + path { transition-delay: .5s; }

/* Signature: "Will Cady" in Herr Von Muellerhoff, written stroke by stroke by js/site.js.
   .sig-ink is the finished lettering; .sig-pen is a thick line masked by the lettering that
   travels the pen route. While writing, the ink layer is hidden and the pen reveals it. */
.signature { display: block; height: auto; overflow: visible; }
.signature text { font-family: 'Herr Von Muellerhoff', cursive; font-size: 100px; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; word-spacing: 0; stroke-width: var(--sig-ink, 0); stroke-linejoin: round; }
.signature .sig-ink { fill: currentColor; stroke: currentColor; }
.signature mask text { fill: #fff; stroke: #fff; }
.signature .pen { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.signature .sig-pen { display: none; }
.signature.armed .sig-pen { display: inline; }
.signature.armed .sig-ink { opacity: 0; }
.signature.armed.done .sig-ink { opacity: 1; transition: opacity .4s ease; }
/* small sizes get a touch more ink so the hairlines survive */
.mark .signature { height: 40px; width: auto; --sig-ink: 1.2; }
.mark .icon { width: 44px; transform: translateY(-3px); } /* centers the eye on the signature's midline (cap tops to baseline) */
.mark .signature { transition: opacity .8s ease .15s; }
.mark .signature.sig-waiting { opacity: 0; transition: none; }
.sig-hero { width: min(100%, 46rem); margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.sig-footer { width: min(100%, 50rem); margin: 0 auto clamp(1.5rem, 4vw, 3rem); color: var(--bone); }
.oracle > .wrap > .icon:first-child { width: clamp(7rem, 11vw, 9.5rem); margin: 0 auto 2.5rem; }
/* Book: audiobook preview inside the buy section */
.listen { max-width: 40rem; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.listen h3 { font: italic 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1.1 var(--serif); margin: 0 0 1.75rem; }
.listen-player { display: block; border: 0; border-radius: 12px; background: var(--espresso); }
.listen-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.75rem; }
/* Book: heading that frames the Zen master scene */
.scene-title { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1.05 var(--serif); margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 18ch; text-wrap: balance; }
/* Book: chapter and page citation under a quoted passage */
.prose .book-cite { margin-top: -.5rem; font: 400 .8125rem/1.4 var(--sans); letter-spacing: .02em; color: var(--muted); }

/* Book: the compass illustrations, building direction by direction into the Heart */
.dir-col { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-content: start; }
.compass-anim { margin: 0; display: grid; justify-items: center; gap: 1.5rem; }
.ca-stage { position: relative; width: min(100%, 21rem); aspect-ratio: 547.73 / 896.57; }
.ca-stage img { position: absolute; display: block; height: auto; max-width: none; transition: opacity 1.3s ease, filter 1.3s ease; }
.ca-bg { left: 0; top: 0; width: 100%; opacity: .16; }
.ca-layer { opacity: 0; }
.ca-layer.lit { opacity: .45; }
.ca-layer.glow { opacity: 1; filter: drop-shadow(0 0 3px rgba(88, 177, 173, .95)) drop-shadow(0 0 12px rgba(88, 177, 173, .55)); }
.ca-stage.whole .ca-bg { opacity: 1; filter: drop-shadow(0 0 2px rgba(88, 177, 173, .8)) drop-shadow(0 0 14px rgba(88, 177, 173, .35)); transition-duration: 2s; }
.ca-stage.whole .ca-layer { opacity: 0; }
.ca-cap { min-height: 1.5em; font: italic 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.3 var(--serif); color: var(--muted-on-dark); text-align: center; transition: opacity .5s ease; }
.ca-cap.fade { opacity: 0; }
.directions li { transition: color .6s ease; }
.directions.playing li { color: var(--muted-on-dark); }
.directions.playing li.on { color: var(--bone); }
.directions.playing li.on::before { text-shadow: 0 0 12px rgba(88, 177, 173, .8); }

/* Book: the three facets of reading the book as an oracle */
.facets { margin: 2rem 0 0; display: grid; gap: 1.6rem; }
.facets div { display: grid; gap: .45rem; padding-left: 1.25rem; border-left: 1px solid rgba(88, 177, 173, .45); }
.facets dt { font: italic 400 clamp(1.35rem, 1.1rem + .6vw, 1.7rem)/1.1 var(--serif); color: var(--teal); }
.facets dd { margin: 0; color: var(--muted-on-dark); }
.facets-close { margin-top: 2rem; font: italic 400 clamp(1.15rem, 1rem + .45vw, 1.4rem)/1.45 var(--serif); color: var(--bone); }

/* Travel photos by Will: small place-and-year captions in the label style */
.travel-photo { margin: 0; }
.travel-photo img { display: block; width: 100%; height: auto; }
.travel-photo figcaption, .photo-cap { margin-top: .75rem; font: 400 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bg-espresso .travel-photo figcaption, .oracle .travel-photo figcaption { color: var(--muted-on-dark); }
/* Book threshold: heading | Tikal photo | text across on desktop; stacked and centered on phones */
.threshold-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.5fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
.threshold h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); }
.threshold h2 em { display: block; }
.threshold-head .icon { margin: 0 0 2.5rem; }
.threshold-head { align-self: start; }
.threshold-quote { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-left: 1.25rem; border-left: 1px solid rgba(88, 177, 173, .55); }
.threshold-quote p { margin: 0 0 .75rem; font: italic 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 var(--serif); color: var(--teal); }
.threshold-quote cite { font: 400 .75rem/1.4 var(--sans); font-style: normal; letter-spacing: .02em; color: var(--muted-on-dark); }
/* the photo fills the row, so it always stands as tall as the text beside it */
.threshold-photo { margin: 0; mix-blend-mode: lighten; position: relative; align-self: stretch; min-height: 24rem; }
.threshold-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.threshold-text { margin: 0; }
@media (max-width: 820px) {
  .threshold-grid { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .threshold-head .icon { margin: 0 auto 2.5rem; }
  .threshold-quote { border-left: 0; padding-left: 0; }
  .threshold h2 em { display: inline; }
  .threshold-photo { max-width: 26rem; margin: 0 auto; min-height: 0; align-self: auto; }
  .threshold-photo img { position: static; height: auto; }
  .threshold-text { text-align: left; }
}
/* feather the Tikal passage into the dark section: soft edges, and its blacks take on the espresso */
.threshold-photo img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
  mask-composite: intersect;
}
.photo-cap { position: absolute; left: 1.25rem; bottom: 1.1rem; margin: 0; color: rgba(243, 238, 230, .9); text-shadow: 0 1px 10px rgba(20, 15, 12, .6); z-index: 1; }
.travel-band { position: relative; min-height: min(78svh, 46rem); display: grid; place-items: end start; overflow: hidden; background: var(--espresso); }
.travel-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.travel-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,12,0) 40%, rgba(20,15,12,.55) 100%); }
.travel-band-text { position: relative; z-index: 1; padding: clamp(2rem, 5vw, 4rem) var(--gutter); color: var(--bone); max-width: 40rem; }
.travel-band-text p { margin: 0 0 1rem; font: italic 400 clamp(1.7rem, 1.2rem + 1.8vw, 3rem)/1.15 var(--serif); text-wrap: balance; }
.travel-band-text span { font: 400 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 238, 230, .8); }

/* Speaking: "Why organizers book Will" with the laughing portrait beside it */
.creds-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.creds-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.creds-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.creds-text .facts { grid-template-columns: 1fr 1fr; }
.creds-text .facts li, .creds-text .facts li + li { padding: 1.5rem 1.5rem 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) {
  .creds-grid { grid-template-columns: 1fr; }
  .creds-photo { max-width: 26rem; }
}
@media (max-width: 560px) { .creds-text .facts { grid-template-columns: 1fr; } }

@media (max-width: 820px) { .videos:has(> li:nth-child(4)) { grid-template-columns: 1fr; } }

/* Speaking hero sub-line */
.page-hero .hero-sub { max-width: 38rem; margin: 1.75rem auto 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: rgba(243,238,230,.95); text-shadow: 0 1px 14px rgba(20,15,12,.85), 0 0 2px rgba(20,15,12,.6); }

/* Course page: storyteller types, lesson outline, TAROT wheel */
.kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.kinds li { padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.kinds h3 { font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.15 var(--serif); margin-bottom: .4rem; }
.kinds p { font-size: .9375rem; color: var(--muted); margin: 0; }
.syllabus { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.syllabus li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: baseline; padding-block: 1.2rem; border-bottom: 1px solid var(--line); }
.syllabus .n { font: italic 400 1.15rem/1 var(--serif); color: var(--teal-deep); }
.syllabus h3 { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.9rem)/1.15 var(--serif); margin-bottom: .35rem; }
.syllabus p { font-size: .9375rem; color: var(--muted); margin: 0; }
.wheel-band { background: var(--espresso); color: var(--bone); padding-block: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--line-light); }
.wheel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.wheel-grid h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); }
.wheel-grid h2 em { display: block; }
.wheel-lede { color: var(--muted-on-dark); max-width: 30rem; margin: 1.5rem 0 2rem; }
.tarot-wheel { margin: 0; position: relative; max-width: 30rem; width: 100%; justify-self: center; }
.tarot-wheel svg { width: 100%; height: auto; display: block; overflow: visible; }
.tw-ring { fill: none; stroke: var(--line-light); stroke-width: 1; }
.tw-ring-inner { stroke-dasharray: 2 6; }
.tw-l { font: 400 64px/1 var(--serif); fill: var(--muted-on-dark); text-anchor: middle; dominant-baseline: central; transition: fill .5s var(--ease), opacity .5s var(--ease); }
.tw-l.lit { fill: var(--teal); }
.tarot-wheel.running .tw-l:not(.lit) { opacity: .45; }
.tw-word { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: italic 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--serif); letter-spacing: .12em; color: var(--bone); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.tw-word.show { opacity: 1; }
.wheel-words { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.wheel-words li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; padding-block: .9rem; border-bottom: 1px solid var(--line-light); transition: color .5s var(--ease); }
.wheel-words strong { font: italic 400 1.5rem/1 var(--serif); letter-spacing: .06em; color: var(--muted-on-dark); transition: color .5s var(--ease); }
.wheel-words span { color: var(--muted-on-dark); transition: color .5s var(--ease); }
.wheel-words li.on strong { color: var(--teal); }
.wheel-words li.on span { color: var(--bone); }
@media (max-width: 820px) {
  .kinds { grid-template-columns: 1fr; }
  .wheel-grid { grid-template-columns: 1fr; }
  .tarot-wheel { max-width: 20rem; }
}

/* Home hero: extra shade on the left, where the title and promise sit over the busiest part of the photo */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,15,12,.62) 0%, rgba(20,15,12,.4) 32%, rgba(20,15,12,0) 62%); }
.hero-taglines.titled p { text-shadow: 0 1px 2px rgba(20,15,12,.75), 0 2px 26px rgba(20,15,12,.85); }
.hero-taglines.titled p + p { color: var(--bone); font-weight: 500; }
@media (max-width: 820px) {
  .hero::before { background: linear-gradient(180deg, rgba(20,15,12,0) 40%, rgba(20,15,12,.45) 70%, rgba(20,15,12,.2) 100%); }
}

/* Course page: the flame photo with the course promise set into its lower right corner */
.flame-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 72rem; margin: clamp(3.5rem, 7vw, 6rem) auto 0; text-align: left; }
.flame-feature figure { grid-column: 1 / 10; grid-row: 1; margin: 0; overflow: hidden; }
.flame-feature figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.flame-text { grid-column: 8 / 13; grid-row: 1; align-self: end; position: relative; z-index: 1; background: var(--paper); padding: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: clamp(-4rem, -5vw, -2rem); box-shadow: 0 1px 0 var(--line); }
.flame-lead { font: 400 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem)/1.15 var(--serif); margin: 0 0 1.1rem; }
.flame-text p:last-child { font-size: .98rem; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 820px) {
  .flame-feature { grid-template-columns: 1fr; }
  .flame-feature figure, .flame-text { grid-column: 1; }
  .flame-text { grid-row: 2; margin: -1.25rem 1rem 0; }
}

/* Speaking: the signature talks open with a split band, headline on espresso beside a photo of Will in a room */
.talks-section { padding-top: 0; }
.talks-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--espresso); color: var(--bone); margin: 0 0 clamp(2.5rem, 5vw, 4rem); min-height: clamp(26rem, 42vw, 38rem); }
.talks-head-text { align-self: center; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4.5rem) clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.talks-head .label { color: var(--muted-on-dark); margin-bottom: 1.5rem; }
.talks-head h2 { font: 400 clamp(2.8rem, 1.5rem + 4.2vw, 6rem)/.98 var(--serif); letter-spacing: -.02em; }
.talks-head h2 em { display: block; color: var(--teal); }
.talks-sub { margin: 1.75rem 0 0; max-width: 26rem; color: var(--muted-on-dark); }
.talks-head-photo { margin: 0; position: relative; overflow: hidden; }
.talks-head-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.talks-head-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--espresso) 0%, rgba(34,26,22,0) 22%); }
@media (max-width: 820px) {
  .talks-head { grid-template-columns: 1fr; }
  .talks-head-photo { order: -1; aspect-ratio: 4 / 3; }
  .talks-head-photo::after { background: linear-gradient(0deg, var(--espresso) 0%, rgba(34,26,22,0) 30%); }
  .talks-head-text { padding: 2rem var(--gutter) 3.5rem; }
}

/* Speaking talk list: the takeaway line and who each talk is for */
.rows .prose p strong { font-weight: 600; color: var(--ink); }
.rows .talk-for { font-size: .9375rem; font-weight: 500; color: var(--teal-deep); margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rows .talk-for a { color: inherit; }

/* Speaking videos: with five, the newest leads full width and the rest sit two by two */
.videos:has(> li:nth-child(5)) > li:first-child { grid-column: 1 / -1; }
.videos:has(> li:nth-child(5)) > li:first-child .thumb { aspect-ratio: 21 / 9; }
.videos:has(> li:nth-child(5)) > li:first-child h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
.pods-title { font: 400 clamp(2.4rem, 1.4rem + 3.6vw, 5rem)/1 var(--serif); margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* Readability: supporting text a touch larger and darker across the site */
:root { --muted: #5d534b; }
.prose p:not(.lede):not(.close-q) { font-size: 1.0625rem; line-height: 1.7; }
.rows .talk-for { font-size: 1rem; }
.rows .talk-ask { margin-top: 1.25rem; }
.kit-text p { font-size: 1rem; }
.facts span { font-size: 1rem; }
.kinds p, .syllabus p { font-size: 1rem; }
.steps-head h2 em { display: block; }

/* Small labels: Marcellus SC (Roman inscriptional small caps) replaces tracked uppercase sans everywhere.
   Text keeps its natural case so capitals stand tall over the small caps. Buttons stay in the sans. */
:root { --label: "Marcellus SC", "Instrument Serif", serif; }
.label, .caps, .link-plus, .nav-left a, .nav-right a:not(.pill), .menu-foot, .menu-close, .menu-btn,
.quote-photo cite, .field label, .icon-band cite, .quote-photo .q-label, .photo-label, .heal-band .letters,
.press .outlet, .feature-quote cite strong, .clippings figcaption strong, .kit-copy,
.feature-quote.carousel .slide cite strong, .quote-photo.carousel .slide cite,
.travel-photo figcaption, .photo-cap, .travel-band-text span, .steps .num {
  font-family: var(--label); font-weight: 400; text-transform: none; letter-spacing: .12em;
}
.label, .press .outlet, .field label, .quote-photo cite, .icon-band cite, .quote-photo .q-label { font-size: .875rem; }
.link-plus, .nav-left a, .nav-right a:not(.pill), .menu-close, .menu-btn, .heal-band .letters { font-size: .9375rem; }
.steps .num { font-size: .875rem; letter-spacing: .16em; }
.site-header .pill { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
.proofs .who, .proofs-4 .who { font-family: var(--label); font-weight: 400; letter-spacing: .12em; font-size: .875rem; text-transform: none; }

/* ---------- Course page (sales layout) ---------- */
.course-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 100svh; background: var(--espresso); color: var(--bone); }
.course-hero-text { align-self: center; padding: calc(var(--header-h) + 3rem) clamp(1.5rem, 5vw, 5rem) 4rem var(--gutter); }
.course-hero .label { color: var(--muted-on-dark); margin-bottom: 1.75rem; }
.course-hero h1 { font-size: clamp(3.4rem, 1.6rem + 6.4vw, 8.5rem); line-height: .92; }
.course-hero h1 em { display: block; color: var(--teal); }
.course-hero-sub { max-width: 30rem; margin: 2rem 0 2.5rem; font: 400 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.35 var(--serif); color: var(--bone); }
.course-hero-note { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--muted-on-dark); }
.course-hero-photo { margin: 0; position: relative; overflow: hidden; }
.course-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.course-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--espresso) 0%, rgba(34,26,22,0) 18%); }

.outcomes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.outcomes li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.o-n { font: italic 400 1.2rem/1 var(--serif); color: var(--teal-deep); }
.outcomes h3 { font: 400 clamp(1.45rem, 1.15rem + .9vw, 2rem)/1.15 var(--serif); margin-bottom: .4rem; }
.outcomes p { margin: 0; color: var(--muted); }

.mid-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.mid-cta p { margin: 0; font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.2 var(--serif); }

.included-band { background: var(--espresso); color: var(--bone); }
.included-band h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.included-band h2 em { color: var(--teal); }
.included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-light); }
.included li { padding: 1.75rem clamp(1rem, 2.5vw, 2.5rem) 2rem 0; border-bottom: 1px solid var(--line-light); }
.included li:not(:nth-child(3n+1)) { padding-left: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--line-light); }
.included h3 { font: 400 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.15 var(--serif); margin-bottom: .6rem; }
.included p { margin: 0; color: var(--muted-on-dark); }

.teacher-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.teacher-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.teacher h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.5rem); margin-bottom: 1.5rem; }
.teacher-lede { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.9rem)/1.3 var(--serif); }
.teacher-grid p:not(.teacher-lede):not(.label) { color: var(--muted); max-width: 38rem; }
.testimonials-label { margin: clamp(4rem, 8vw, 6rem) 0 1.5rem; }
.testimonials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.testimonials blockquote { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.testimonials p { font: 400 clamp(1.15rem, 1rem + .4vw, 1.35rem)/1.4 var(--serif); }
.testimonials cite { font-family: var(--label); font-style: normal; letter-spacing: .12em; font-size: .875rem; color: var(--teal-deep); }

.offer { background: var(--espresso) url("../img/t/orsay-clock.jpg") center 40% / cover no-repeat; position: relative; isolation: isolate; padding: clamp(5rem, 10vw, 9rem) var(--gutter); color: var(--bone); }
.offer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(28, 21, 18, .9) 0%, rgba(28, 21, 18, .8) 60%, rgba(28, 21, 18, .7) 100%); }
.offer-card { max-width: 40rem; margin: 0 auto; text-align: center; }
.offer .label { color: var(--muted-on-dark); margin-bottom: 1.5rem; }
.offer h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.offer .price { display: block; font-size: clamp(5rem, 3rem + 7vw, 9rem); line-height: .9; }
.offer h2 em { display: block; color: var(--teal); margin-top: .5rem; }
.offer-body { margin: 2rem auto; color: var(--muted-on-dark); max-width: 34rem; }
.offer .inline-form { text-align: left; max-width: 30rem; margin: 0 auto; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 1.35rem; font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.4rem/1 var(--sans); color: var(--teal-deep); transition: transform .4s var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.5rem; color: var(--muted); max-width: 40rem; }

@media (max-width: 820px) {
  .course-hero { grid-template-columns: 1fr; min-height: 0; }
  .course-hero-photo { order: -1; aspect-ratio: 4 / 5; }
  .course-hero-photo::after { background: linear-gradient(0deg, var(--espresso) 0%, rgba(34,26,22,0) 30%); }
  .course-hero-text { padding: 1.5rem var(--gutter) 3.5rem; }
  .included { grid-template-columns: 1fr; }
  .included li, .included li:not(:nth-child(3n+1)) { padding: 1.5rem 0; border-left: 0; }
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-photo { max-width: 26rem; }
  .testimonials { grid-template-columns: 1fr; }
}

/* TAROT wheel, tightened: Marcellus letters, a soft flame glow for the lit word, narrower unit */
:root { --flame: #f4a259; }
.wheel-band { padding-block: clamp(4rem, 8vw, 6.5rem); }
.wheel-grid { max-width: 60rem; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); }
.wheel-grid h2 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); }
.wheel-lede { margin: 1.25rem 0 1.5rem; }
.tarot-wheel { max-width: 21rem; }
.tw-l { font-family: var(--label); font-size: 60px; }
.tw-l.lit { fill: var(--flame); filter: drop-shadow(0 0 6px rgba(244, 140, 60, .75)) drop-shadow(0 0 20px rgba(244, 110, 40, .4)); }
.tw-word { font: 400 clamp(1.3rem, 1.05rem + .9vw, 1.8rem)/1 var(--label); letter-spacing: .2em; text-shadow: 0 0 14px rgba(244, 140, 60, .45); }
.wheel-words li { grid-template-columns: 5rem 1fr; padding-block: .75rem; }
.wheel-words strong { font: 400 1.15rem/1 var(--label); letter-spacing: .12em; font-style: normal; }
.wheel-words li.on strong { color: var(--flame); text-shadow: 0 0 12px rgba(244, 140, 60, .55); }
@media (max-width: 820px) { .tarot-wheel { max-width: 17rem; } }
/* Wheel geometry: the faint square every spelling travels, and the glowing path of the current word */
.tw-ring-inner { display: none; }
.tw-square { fill: none; stroke: rgba(243, 238, 230, .14); stroke-width: 1; stroke-dasharray: 3 7; }
.tw-path { fill: none; stroke: var(--flame); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(244, 140, 60, .8)) drop-shadow(0 0 12px rgba(244, 110, 40, .35)); }
.tw-nodes circle { fill: var(--espresso); stroke: rgba(243, 238, 230, .35); stroke-width: 1; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.tw-nodes circle.lit { fill: var(--flame); stroke: var(--flame); filter: drop-shadow(0 0 5px rgba(244, 140, 60, .8)); }
.tw-nodes circle.start { r: 6; }
/* Wheel of Fortune details: inner band, spokes, hub and alchemical symbols, turning very slowly */
.tw-card { fill: none; stroke: rgba(243, 238, 230, .22); stroke-width: 1; transform-origin: 200px 200px; animation: tw-turn 120s linear infinite; }
.tw-alch { stroke: rgba(243, 238, 230, .45); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tw-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-card { animation: none; } }
/* The four creatures from the card's corners, in the site's single-line sketch style */
.tw-const path { fill: none; stroke: var(--bone); stroke-opacity: .4; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.tw-const circle { fill: var(--bone); fill-opacity: .75; }
.tw-const circle.b { fill: #ffd9b0; fill-opacity: 1; filter: drop-shadow(0 0 3px rgba(244, 160, 90, .9)) drop-shadow(0 0 8px rgba(244, 120, 50, .45)); animation: tw-twinkle 4.5s ease-in-out infinite; }
.tw-const:nth-child(2) circle.b { animation-delay: -1.2s; } .tw-const:nth-child(3) circle.b { animation-delay: -2.6s; } .tw-const:nth-child(4) circle.b { animation-delay: -3.4s; }
@keyframes tw-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tw-const circle.b { animation: none; } }
/* Faint figure outlines around each constellation, like a stargazing app */
.tw-fig path, .tw-fig circle { fill: none !important; stroke: var(--bone); stroke-opacity: .34; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; filter: none; animation: none; }
/* Zodiac glyph beside each constellation */
.tw-glyph { fill: none; stroke: var(--bone); stroke-opacity: .45; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
/* Yod He Vav He on the turning inner wheel */
.tw-heb text { font: 500 19px/1 "Frank Ruhl Libre", "Times New Roman", serif; fill: var(--bone); fill-opacity: .62; stroke: none; text-anchor: middle; dominant-baseline: central; }

/* Course: small single-line drawings for each kind of storyteller */
.kinds .k-ico { display: block; width: 40px; height: 40px; margin-bottom: .9rem; overflow: visible; }
.kinds .k-ico path { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* Course page polish: headings travel with their lists, a photo fills the lessons column, testimonial names align */
@media (min-width: 821px) {
  .course-split > div:first-child { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}
.testimonials li, .testimonials blockquote { height: 100%; }
.testimonials blockquote { display: flex; flex-direction: column; }
.testimonials cite { margin-top: auto; padding-top: .5rem; }

/* Course: closing call to action */
.course-close .close-kicker { margin: 0 0 1rem; font: italic 400 clamp(1.3rem, 1.1rem + .7vw, 1.8rem)/1.2 var(--serif); color: var(--teal); }
.course-close h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.5rem); margin-bottom: 2.5rem; }

/* Chapter rows: on desktop the photo keeps a screen-height frame and stays in view while longer text scrolls,
   instead of stretching to the text's height and cropping tighter */
@media (min-width: 821px) {
  .chapter-row .tile-photo { position: sticky; top: var(--header-h); height: min(calc(100svh - var(--header-h)), 60rem); min-height: 0; align-self: start; }
}

/* Press and writing lists: fixed date column so every title starts on the same line */
@media (min-width: 821px) { .press a { grid-template-columns: minmax(8rem, 2fr) minmax(0, 7fr) 4rem; } .press .year { text-align: right; } }
.topic-label { color: var(--teal-deep); margin: 2.25rem 0 .75rem; }
.press .oped { font-family: var(--label); font-size: .8em; letter-spacing: .1em; color: var(--teal-deep); margin-right: .35em; }

/* Words by Will: larger subheadings and topic labels */
.writing-sub { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem)/1.1 var(--serif); margin: clamp(3rem, 6vw, 4.5rem) 0 1rem; }
.writing-sub em { font-size: 1em; }
.topic-label { font-size: 1.15rem; letter-spacing: .1em; margin: 2.5rem 0 .9rem; }

/* Writing page */
.subscribe-band .close-kicker { margin: 0 0 1rem; font: italic 400 clamp(1.2rem, 1.05rem + .5vw, 1.6rem)/1.2 var(--serif); color: var(--teal); }
.subscribe-band h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); }
.subscribe-band h2 em { display: block; }
.subscribe-body { max-width: 32rem; margin: 1.75rem auto 2.5rem; color: var(--muted-on-dark); }
.writing-hero::after { background: linear-gradient(180deg, rgba(20,15,12,.6) 0%, rgba(20,15,12,.35) 30%, rgba(20,15,12,.55) 60%, rgba(20,15,12,.8) 100%); }
.heal-bridge { margin: 0 0 2rem; font: italic 400 clamp(1.3rem, 1.1rem + .7vw, 1.8rem)/1.2 var(--serif); color: var(--teal-deep); }
.heal-name { font-family: var(--label); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); letter-spacing: .22em; margin: 0 0 1.5rem; color: var(--ink); }

/* 404 */
.lost { text-align: center; padding: clamp(9rem, 18vw, 13rem) 0 clamp(5rem, 10vw, 8rem); max-width: 40rem; }
.lost .icon { width: clamp(4.5rem, 7vw, 6rem); margin: 0 auto 2rem; }
.lost h1 { font-family: var(--serif, "Instrument Serif", serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.05; margin: .6rem 0 1.25rem; }
.lost .muted { max-width: 32rem; margin: 0 auto 2.5rem; }
.lost-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.75rem; }
.lost-links a { color: var(--espresso); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: .3em; text-decoration-thickness: 1px; }
.lost-links a:hover { color: var(--teal-deep); }

/* ---------- Hover and reveal polish ---------- */
/* Home tiles: the photo leans in slowly while the tile is hovered */
.tile .tile-photo img { transition: transform 1.8s var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile:hover .tile-photo img, .tile:hover .tile-photo.reveal.in img { transform: scale(1.045); }
}
/* Talk rows: a soft paper tint behind the hovered talk, and its "+" turns */
.rows > li { position: relative; isolation: isolate; }
.rows > li::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(1rem, 2.5vw, 2rem)); background: var(--paper); opacity: 0; z-index: -1; transition: opacity .5s var(--ease); pointer-events: none; }
@media (hover: hover) {
  .rows > li:hover::before { opacity: .7; }
  .rows > li:hover .talk-ask::after { transform: rotate(90deg); }
}
/* Course "who it's for" icons redraw themselves on hover */
.kinds .k-ico path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kinds li:hover .k-ico path { animation: k-redraw 1.3s var(--ease-out); }
}
@keyframes k-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Writing page: headings and lists rise gently into place */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(1.25rem); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
  .rise.in { opacity: 1; transform: none; }
}

/* Let the hidden attribute win over display rules (inquiry form hides event-only fields) */
[hidden] { display: none !important; }

/* Audiobook: a button stands in for Spotify's player until a visitor asks for it */
.listen-load { width: 100%; height: 232px; display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); padding: 1.25rem clamp(1.25rem, 4vw, 2rem); color: var(--bone); text-align: left; cursor: pointer; font: inherit; transition: background-color .3s var(--ease); }
.listen-load img { width: auto; height: 100%; max-height: 176px; border-radius: 4px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.8); }
.listen-load-text { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.listen-load-text strong { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--serif); }
.listen-load-text span { font-size: .875rem; color: var(--muted-on-dark); }
.listen-play { width: 3.25rem; height: 3.25rem; flex: none; }
.listen-play circle { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.listen-play path { fill: var(--teal); }
.listen-load:hover { background: #2e241f; }
.listen-load:hover .listen-play path { fill: var(--bone); }
.listen-load:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (max-width: 30rem) { .listen-load { height: auto; } .listen-load img { height: 120px; } .listen-play { display: none; } }

/* Privacy page and footer link */
.footer-privacy { margin-left: 1.5rem; color: inherit; text-underline-offset: .25em; }
.footer-privacy:hover { color: var(--bone); }
.legal { max-width: 42rem; padding: calc(var(--header-h) + clamp(3rem, 7vw, 5rem)) 0 clamp(4rem, 9vw, 7rem); }
.legal h1 { font: 400 clamp(2.6rem, 1.6rem + 4vw, 4.5rem)/1.02 var(--serif); letter-spacing: -.02em; margin: .75rem 0 .75rem; }
.legal-date { color: var(--muted); font-size: .9375rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal .legal-lede { font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.4 var(--serif); margin-bottom: 1rem; }
.legal h2 { font: 400 clamp(1.5rem, 1.25rem + .8vw, 2rem)/1.15 var(--serif); margin: clamp(2.25rem, 4vw, 3rem) 0 .75rem; }
.legal p { color: var(--ink, var(--espresso)); line-height: 1.7; margin: 0 0 1rem; }
.legal a { color: var(--teal-deep); text-underline-offset: .2em; }

/* Where the IPO photo ran: headline cards that link out to the coverage */
.ran { list-style: none; margin: 0 auto; padding: 0; max-width: 54rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.ran li > a, .ran li > div { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; color: var(--espresso); text-decoration: none; }
.ran li > a { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ran li > a:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(28,23,20,.45); }
.ran-outlet { font: 400 .875rem/1.2 var(--label); letter-spacing: .12em; color: var(--muted); }
.ran-headline { font: 400 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.2 var(--serif); text-wrap: balance; }
.ran-date { font-size: .9375rem; color: var(--muted); }
.ran .link-plus { align-self: flex-start; margin-top: auto; }
.ran li > a:hover .link-plus::after { transform: rotate(90deg); }
@media (max-width: 40rem) { .ran { grid-template-columns: 1fr; } }

/* Home hero: a plain booking line under the taglines */
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: .5rem; }
.hero-cta span { font: 400 clamp(.9rem, .8rem + .3vw, 1.05rem)/1.45 var(--sans); color: rgba(243,238,230,.8); max-width: 34rem; text-shadow: 0 1px 14px rgba(20,15,12,.6); }

/* Quote carousels: keep the single grid column to the screen width so long quotes wrap on phones */
.quote-photo { grid-template-columns: minmax(0, 1fr); }
.quote-photo > * { min-width: 0; }
.carousel .slides { grid-template-columns: minmax(0, 1fr); }
.carousel .slide { min-width: 0; }

/* "In his words": a dark, softly frosted panel behind the quote so it reads over the busy artwork */
.quote-photo.carousel .slides { margin-top: clamp(5rem, 9vw, 7rem); padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); background: rgba(20, 15, 12, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.quote-photo.carousel .slide p { text-shadow: none; }
.quote-photo.carousel .slide cite { color: rgba(243, 238, 230, .78); }
.quote-photo.carousel::after { background: linear-gradient(90deg, rgba(20,15,12,.55) 0%, rgba(20,15,12,.3) 60%, rgba(20,15,12,.15) 100%); }
@media (max-width: 820px) { .quote-photo.carousel::after { background: rgba(20, 15, 12, .35); } }
.quote-photo.carousel .slide { align-self: center; }
/* Each quote carries its own panel, sized to that quote; the row keeps the tallest quote's height so the page doesn't jump */
.quote-photo.carousel .slides { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
.quote-photo.carousel .slide { align-self: end; justify-self: start; padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); background: rgba(20, 15, 12, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.quote-photo.carousel .slide { width: fit-content; max-width: 100%; }
/* Center the quote panel over the image, horizontally and vertically */
.quote-photo.carousel { align-items: center; }
.quote-photo.carousel .slides { margin-inline: auto; }
.quote-photo.carousel .slide { justify-self: center; align-self: center; text-align: center; }
.quote-photo.carousel .carousel-nav { justify-content: center; }