/* ==========================================================================
   Esateys — Beyond Achievement — "A Quiet Film"
   Full-bleed photographic scenes, silent-film intertitles, paper passages.
   Movements: Safety · Grounding · Peace · Empowerment.
   ========================================================================== */

/* self-hosted — no external font request, no render-blocking cross-origin fetch */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/inter.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   LIVING BEYOND ACHIEVEMENT — approved brand colour standard (2026-08-18)

   The seven --lba-* values below ARE the standard. Nothing anywhere in this
   site should introduce a colour outside them. Everything under them maps the
   stylesheet's working names onto that standard, so the whole site — every
   page, header, button and card — moves from this one block.

   Warmth is the invitation; sophistication is the container. Roughly 65–70%
   of any page is ivory/stone, 15–20% aubergine/plum, ~5% gold. Gold is
   jewellery, not wallpaper.
   -------------------------------------------------------------------------- */
:root {
  --lba-aubergine:  #332832;   /* primary authority: header, dark sections   */
  --lba-plum:       #72566F;   /* secondary accent: restrained femininity    */
  --lba-ivory:      #F7F2EA;   /* primary page background                    */
  --lba-stone:      #EDE5DC;   /* secondary light background, section rhythm */
  --lba-gold:       #B58B4A;   /* small accents, rules, selected highlights  */
  --lba-charcoal:   #292629;   /* primary body text                          */
  --lba-soft-ivory: #FAF7F2;   /* text on dark backgrounds                   */

  /* working names, mapped onto the standard above */
  --ink: var(--lba-aubergine);
  --ink-soft: #3B2F3A;     /* aubergine lifted one step — dark form sections */
  --paper: var(--lba-ivory);
  --paper-deep: var(--lba-stone);
  --plum: var(--lba-plum); /* headings on light + secondary dark surfaces    */
  --gold: var(--lba-gold);
  --gold-deep: #7E5E2C;    /* the only gold that clears AA as small text on
                              both ivory AND stone — do not lighten it       */
  --gold-soft: #D9BC86;    /* gold on aubergine                             */
  /* READABILITY STANDARD (2026-08-19). Readers reported the smaller muted
     paragraph text was hard to read, so substantive copy now uses the full
     Warm Charcoal at regular weight, and the muted treatment is reserved for
     genuinely secondary text. Do not soften --body again: if a paragraph is
     meant to be read, it gets --body; if it is a caption, label, date or
     attribution, it gets --meta. Nothing in between. */
  --body: var(--lba-charcoal); /* #292629 — every paragraph meant to be read */
  --meta: #514A50;         /* captions, labels, dates, attribution, metadata
                              ONLY — never a paragraph carrying meaning      */
  /* substantive copy on dark aubergine: near-ivory, not a whisper */
  --mist: rgba(250, 247, 242, 0.9);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* a slow, decelerating curve — the felt difference between "animated" and "premium" */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  /* Regular, not light. The whole site used to run at 300, which is elegant in
     a headline and tiring in a paragraph — the readability complaint that
     prompted the 2026-08-19 pass. Headings set their own weight below. */
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  animation: page-in 1s var(--ease) both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

img { display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.18;
  text-wrap: balance;
}
em { font-style: italic; }

/* ---------- header: a quiet title bar ----------
   ONE header colour for the whole site. It used to be nearly transparent, so
   each page's hero photograph tinted it a different shade and the brand drifted
   from page to page. It is now a stable aubergine bar — a whisper of the image
   still moves behind it, but the colour you see is the brand's, not the
   photo's. Do not reintroduce a per-page header treatment. */
.marquee {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem clamp(1.2rem, 4vw, 2.6rem);
  background: rgba(51, 40, 50, 0.88);
  border-bottom: 1px solid rgba(181, 139, 74, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.6s var(--ease), padding 0.6s var(--ease), border-color 0.6s var(--ease);
}
.marquee.scrolled {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: rgba(51, 40, 50, 0.97);
  border-bottom-color: rgba(181, 139, 74, 0.30);
}
.marquee .wordmark {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-decoration: none;
  transition: font-size 0.6s var(--ease);
}
/* the brand line, sitting quietly beneath her name */
.marquee .wordtag {
  display: block;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.85;
  margin-top: 0.34rem;
}
.marquee nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 2rem);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.marquee nav a {
  position: relative;
  text-decoration: none;
  color: rgba(250, 247, 242, 0.75);
  transition: color 0.3s ease;
  padding: 0.3rem 0;
}
.marquee nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold-soft);
  transition: right 0.45s var(--ease);
}
.marquee nav a:hover, .marquee nav a:focus-visible { color: var(--gold-soft); }
.marquee nav a:hover::after, .marquee nav a:focus-visible::after { right: 0; }
.marquee nav a.here { color: var(--gold); }
.marquee nav a.here::after { right: 0; background: var(--gold); }

/* ---------- programs dropdown ----------
   Opens on CLICK, never on hover. A hover menu has to be chased across the gap
   between the word and the panel; stray a few pixels and it shuts. Clicking
   opens it and it stays open until something deliberately closes it.

   It is also not a floating box — this design language has no cards in it.
   The menu is a band the full width of the bar, in the bar's own translucent
   ink, flush against its lower edge: the header continuing, not a panel
   arriving on top of the page.

   `.navdrop` is deliberately position:static so the band resolves against the
   fixed .marquee and can run edge to edge. */
.navdrop { position: static; display: flex; align-items: center; }
.navdrop-top { display: inline-flex; align-items: center; gap: 0.45em; cursor: pointer; }
/* a small caret, drawn rather than typed so it inherits colour cleanly.
   It has to be ::before because ::after already draws the gold underline
   sweep on every nav link — flex `order` moves it after the word. */
.navdrop-top::before {
  content: '';
  order: 2;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 3.5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.35s var(--ease);
}
.navdrop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(1.4rem, 3.5vw, 3.2rem);
  padding: 1.15rem clamp(1.2rem, 4vw, 2.6rem);
  /* Near-solid on purpose. The band opens over full-bleed photography, and a
     translucent one lets the hero headline ghost through it. Blur can't rescue
     that here: .marquee already has a backdrop-filter, and a nested
     backdrop-filter only samples its ancestor's backdrop, so it does nothing. */
  /* Lifted from near-black to a plum-leaning aubergine (2026-08-18). The old
     panel was the darkest surface on the site and read as a hole punched in the
     page; this keeps it clearly darker than the bar above it while staying
     inside the approved palette. */
  background: #453645;
  border-bottom: 1px solid rgba(181, 139, 74, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
/* :focus-within keeps it reachable by keyboard even before film.js loads */
.navdrop.open .navdrop-menu,
.navdrop:focus-within .navdrop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.navdrop.open .navdrop-top::before,
.navdrop:focus-within .navdrop-top::before { transform: rotate(180deg); }
/* the menu items are named things, not labels — serif, sentence case */
.navdrop-menu a {
  display: block;
  padding: 0.3rem 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  color: rgba(250, 247, 242, 0.82);
}
/* these get the header's own gold underline sweep, which the old boxed
   version had to suppress */
.navdrop-menu a::after { background: var(--gold-soft); }
.navdrop-menu a:hover,
.navdrop-menu a:focus-visible { color: var(--gold-soft); }
.navdrop-menu a.here { color: var(--gold); }
.navdrop-menu a.here::after { right: 0; background: var(--gold); }
/* a hairline holding the overview apart from the three programs it introduces */
.navdrop-menu .navdrop-rule {
  width: 1px;
  align-self: stretch;
  min-height: 1.1rem;
  background: rgba(181, 139, 74, 0.28);
}

/* ---------- film slate label ----------
   The small editorial label above a heading. Given a little more size and
   weight on 2026-08-19 — at 0.7rem/400 with a third of an em of tracking it
   was decorative rather than legible. It must still never compete with the
   heading under it, so this is a nudge, not a promotion.

   Colour: the bare rule only ever lands on a dark bed (the intertitle field
   and .ledger), where full-strength gold sits at ~4.1:1 — under AA for text
   this small. The softer gold clears 6.9:1 on the same ground and reads as
   the same jewellery. Light beds are handled by `.paper .slate` (plum) and
   photography by `.scene .slate` further down. */
.slate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
}
.slate::before, .slate::after {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  transition: width 1.6s var(--ease) 0.35s;
}
/* the small gold rules extend outward once the label is seen —
   a title card being set, not a page loading */
.slate.rise::before, .slate.rise::after { width: 0; }
.slate.rise.lit::before, .slate.rise.lit::after { width: 44px; }
.no-js .slate.rise::before, .no-js .slate.rise::after { width: 44px; }
.slate.start { justify-content: flex-start; }
.slate.start::after { display: none; }

/* ---------- scroll reveal ---------- */
.rise {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.rise.lit { opacity: 1; transform: none; }
/* graceful without JS */
.no-js .rise { opacity: 1; transform: none; }

/* ---------- scenes: full-bleed imagery, quiet drift + scroll parallax ---------- */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.scene.short { min-height: 78svh; }
/* Every page's opening hero is pinned to one height (2026-08-18) — the
   Programs page's, which Rafael confirmed is the right size. Before this,
   the homepage had its own page-local override shrinking it to 72svh and
   Beyond Achievement used the plain (non-"short") 100svh scene, so heroes
   varied page to page. `main .scene:first-of-type` outranks both a bare
   `.scene` and `.scene.short` rule by specificity, so it wins regardless of
   which class, or which page-local <style> block, a given page uses —
   without touching the height of any OTHER scene further down the page. */
main .scene:first-of-type { min-height: 78svh; }
/* the theater darkens, then the picture opens — first scene of every page */
main .scene:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--ink);
  pointer-events: none;
  animation: curtain 2.2s var(--ease) 0.15s both;
}
@keyframes curtain { from { opacity: 1; } to { opacity: 0; } }
.scene-bg {
  position: absolute;
  inset: -8%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  will-change: transform;
}
/* faint, static grain — the one texture reference to the film theme,
   deliberately near-invisible so it reads as quality, not decoration.
   Pre-baked noise, no per-frame filter recompute — kept light on purpose. */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-sea    { background-image: url(../assets/img/scene-sea.jpg); }
.bg-stones { background-image: url(../assets/img/scene-stones.jpg); }
.bg-forest { background-image: url(../assets/img/scene-forest.jpg); }
.bg-lake   { background-image: url(../assets/img/scene-lake.jpg); }
.bg-arms   { background-image: url(../assets/img/scene-arms.jpg); }

/* the scrim earns the type its legibility — deeper through the middle,
   where the words actually sit */
.scene-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(51, 40, 50, 0.62) 0%,
    rgba(51, 40, 50, 0.48) 45%,
    rgba(51, 40, 50, 0.72) 100%);
}
.scene-inner { max-width: 880px; padding: 7rem 2rem 6rem; text-align: center; }
/* movement labels sit on photography — they need weight and a ground
   under them, or they disappear into a bright frame */
.scene .slate {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  color: #E8CFA0;
  text-shadow: 0 1px 16px rgba(51, 40, 50, 0.95), 0 0 44px rgba(51, 40, 50, 0.8);
}
.scene .slate::before, .scene .slate::after {
  background: #E8CFA0;
  opacity: 0.75;
  height: 1.5px;
  box-shadow: 0 0 12px rgba(51, 40, 50, 0.7);
}
.scene h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.01em;
  color: var(--paper);
  text-shadow: 0 2px 40px rgba(51, 40, 50, 0.55);
  margin: 2.2rem 0 0;
}
.scene h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  color: var(--paper);
  text-shadow: 0 2px 36px rgba(51, 40, 50, 0.55);
  margin: 2.2rem 0 0;
}
.scene .line {
  margin: 2.4rem auto 0;
  max-width: 560px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: rgba(250, 247, 242, 0.94);
  text-shadow: 0 1px 20px rgba(51, 40, 50, 0.9), 0 0 42px rgba(51, 40, 50, 0.7);
}
.scene .line em { color: #E8CFA0; font-style: italic; }
.scene .cue {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  text-decoration: none;
  animation: cue-breathe 3.6s var(--ease) infinite;
}
.scene .cue:hover, .scene .cue:focus-visible { color: var(--gold-soft); animation-play-state: paused; }
@keyframes cue-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.85; }
}

/* ---------- word-by-word title reveal — reserved for the opening line only.
   Paced to spoken cadence: the line is said to her, not printed at her. ---------- */
.type-in .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(3px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.rise.lit .w, .no-js .type-in .w { opacity: 1; transform: none; filter: blur(0); }

/* ---------- intertitles: one thought at a time ---------- */
.intertitles { padding: 5.5rem 0; }
.intertitle {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.4rem 2rem;
}
.intertitle.compact { min-height: 0; padding: 1.8rem 2rem; }
/* the closing thought — quieter, held a little apart from the questions */
.intertitle p.soft {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.62;
  max-width: 660px;
  color: rgba(250, 247, 242, 0.9);
}
.intertitle p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.45;
  max-width: 720px;
  margin: 0;
  color: var(--paper);
}
.intertitle p em { color: var(--gold-soft); }
/* a thought surfaces the way a private realization does: slowly, alone */
.intertitle.rise {
  transform: translateY(18px);
  transition-duration: 2s;
}
.intertitle .orn {
  margin-top: 1.6rem;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.6em;
  opacity: 0.7;
}
/* ...and the ornament follows it, like a breath after the sentence */
.intertitle.rise .orn {
  opacity: 0;
  transition: opacity 1.6s var(--ease) 1.1s;
}
.intertitle.rise.lit .orn, .no-js .intertitle.rise .orn { opacity: 0.7; }
.intertitle .after {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--mist);
  max-width: 520px;
  margin-top: 2rem;
}

/* ---------- paper passages ---------- */
.paper {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(5rem, 12vh, 9rem) 2rem;
}
.paper .slate { color: var(--plum); }
.paper .slate::before, .paper .slate::after { background: var(--plum); }
.paper-inner { max-width: 660px; margin: 0 auto; }
.paper h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--plum); margin: 2rem 0 1.6rem; }
.paper h3 { color: var(--plum); }
.paper p { font-size: 1.08rem; color: var(--body); margin: 0 0 1.3rem; }
.paper .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--plum);
  margin: 2.4rem 0;
}

/* two horizons — the gap drawn as lines */
.horizons { margin: 3.4rem 0; }
.horizons .hz-label {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 0.55rem;
}
.horizons .hz { height: 1px; background: var(--ink); }
.horizons .hz.gold { background: var(--gold); }
/* the two lives draw themselves across the page while she watches —
   seeing the gap appear IS the recognition moment */
.horizons.rise .hz {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2s var(--ease) 0.3s;
}
.horizons.rise .hz.gold { transition-delay: 1.4s; }
.horizons.rise.lit .hz, .no-js .horizons.rise .hz { transform: scaleX(1); }
.horizons .between {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--meta);
  text-align: center;
  margin: 2.2rem 0;
}
/* the words naming the gap arrive only after both lines exist */
.horizons.rise .between {
  opacity: 0;
  transition: opacity 1.6s var(--ease) 2.4s;
}
.horizons.rise.lit .between, .no-js .horizons.rise .between { opacity: 1; }

/* stage lines — offers as a flowing ledger, not cards */
.stages { margin-top: 3.5rem; }
.stageline { padding: 2.6rem 0; }
.stageline + .stageline { border-top: 1px solid rgba(51, 40, 50, 0.14); }
.stageline .word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--plum);
}
.stageline .offer {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #7E5E2C;
  display: block;
  margin: 0.7rem 0 0.6rem;
}
.stageline p { margin: 0; max-width: 520px; }

/* ---------- the way through: three movements, set as a quiet table ---------- */
.meet {
  max-width: 1040px;
  margin: 6rem auto 0;
  padding-top: 4.5rem;
  border-top: 1px solid rgba(51, 40, 50, 0.16);
  text-align: center;
}
.meet-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  color: var(--plum);
  margin: 1.8rem 0 3.6rem;
}
.meet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
}
.meet-cell {
  padding: 0 2.4rem;
  border-left: 1px solid rgba(51, 40, 50, 0.14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.meet-cell:first-child { border-left: none; padding-left: 0; }
.meet-cell:last-child { padding-right: 0; }
.meet-cell .num {
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  display: block;
}
.meet-cell .word {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  color: var(--plum);
  display: block;
  margin: 0.7rem 0 0;
}
/* the offer names itself — darker, italic, held apart from the stage word */
.meet-cell .offer {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #7E5E2C;
  display: block;
  margin: 0.85rem 0 0.9rem;
}
.meet-cell p {
  margin: 0 0 auto;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}
.meet-cell .goto { margin-top: 1.8rem; }

/* quiet link — gold-underlined, italic, spoken rather than shouted */
.goto {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #3E2F3D;
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 139, 74, 0.55);
  padding-bottom: 3px;
  display: inline-block;
  margin-top: 1.1rem;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.goto:hover, .goto:focus-visible { color: var(--gold-deep); border-color: var(--gold); }
/* These read as quiet text links, but on the homepage they ARE the way into
   the three offers — and at ~32px tall they were under the 44px a thumb
   needs. This enlarges the tap area only; the gold underline must stay
   tight to the words, so padding is not an option. Nothing visual changes. */
.goto::after {
  content: '';
  position: absolute;
  inset: -8px -6px;
}

/* quiet list — a gold tick opens each line */
.quiet-list { list-style: none; margin: 2.6rem 0; padding: 0; display: grid; gap: 1.35rem; }
.quiet-list li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 1.06rem;
  color: var(--body);
}
.quiet-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.75em;
  width: 12px; height: 1px;
  background: var(--gold);
}

/* her — portrait + prose */
.her {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.her-photo {
  border-radius: 999px 999px 4px 4px; /* an arch — a doorway, a rising sun */
  overflow: hidden;
  aspect-ratio: 3/4;
}
.her-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) sepia(0.06); }
/* her portrait settles into stillness — a long, quiet arrival */
.her-photo.rise img { transform: scale(1.08); transition: transform 2.8s var(--ease); }
.her-photo.rise.lit img, .no-js .her-photo.rise img { transform: scale(1); }
.her h2 { margin-top: 1.4rem; }
.her .sig { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--plum); }

/* lens rows */
.lens-list { margin-top: 3rem; }
.lens-row { padding: 2.4rem 0; }
.lens-row + .lens-row { border-top: 1px solid rgba(51, 40, 50, 0.14); }
.lens-row h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: 0.5rem; }
.lens-row p { margin: 0; }
.tm { color: var(--gold); font-size: 0.72em; vertical-align: super; }

/* markers — credentials as quiet figures */
.markers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 880px;
  margin: 3.5rem auto 0;
  text-align: center;
}
.markers .marker-figure {
  font-family: var(--serif);
  /* the credential words are longer than the old "30+" / "Certified" pair,
     so this scales instead of overflowing its column */
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.15;
  color: var(--plum);
  display: block;
  margin-bottom: 0.5rem;
}
.markers p { font-size: 0.92rem; margin: 0; }

/* plate-wide — a wide photo with two corners cut, like a film frame or a stage light catching an edge */
.plate-wide {
  position: relative;
  max-width: 880px;
  margin: 4rem auto 0;
  overflow: hidden;
  aspect-ratio: 16/10;
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
  border: 1px solid rgba(181, 139, 74, 0.3);
}
.plate-wide img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(0.9) sepia(0.05); }
.plate-wide.rise img { transform: scale(1.06); transition: transform 2.8s var(--ease); }
.plate-wide.rise.lit img, .no-js .plate-wide.rise img { transform: scale(1); }
.plate-cap {
  text-align: center;
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--plum);
}

/* spot — a narrow, oval-topped column of light, for a portrait taken on stage */
.spot {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 3rem;
  align-items: center;
  max-width: 880px;
  margin: 4rem auto 0;
}
.spot-photo {
  border-radius: 50% 50% 8px 8px / 20% 20% 8px 8px;
  overflow: hidden;
  aspect-ratio: 260/458; /* matches the source crop exactly — no further cropping, so her head can't get clipped */
  box-shadow: 0 0 70px -12px rgba(181, 139, 74, 0.3);
}
.spot-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) sepia(0.05); }
.spot-photo.rise img { transform: scale(1.08); transition: transform 2.8s var(--ease); }
.spot-photo.rise.lit img, .no-js .spot-photo.rise img { transform: scale(1); }

/* a voice on paper — the counterpart to .scene blockquote below, which sits on
   photography. Used wherever a testimonial lands on a light section. No box:
   a gold hairline sets it apart, the same device .slate uses. */
.voice { max-width: 620px; margin: 0 auto; text-align: center; }
.voice::before {
  content: '';
  display: block;
  width: 44px; height: 1px;
  background: var(--gold);
  margin: 0 auto 2.2rem;
}
.voice p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  line-height: 1.55;
  color: var(--plum);
  margin: 0;
}
.voice cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--meta);
}

/* quotes over scenes */
.scene blockquote {
  margin: 2.4rem auto 0;
  max-width: 680px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.5;
  color: var(--paper);
  text-shadow: 0 2px 32px rgba(51, 40, 50, 0.65);
}
/* spoken words arrive slowly; the name follows, the way a voice is
   recognized a moment after it is heard */
blockquote.rise { transition-duration: 2.2s; }
.scene cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
blockquote.rise cite { opacity: 0; transition: opacity 1.8s var(--ease) 1.3s; }
blockquote.rise.lit cite, .no-js blockquote.rise cite { opacity: 1; }

/* insights — distinctions on paper */
.distinction { max-width: 660px; margin: 0 auto; padding: 4rem 0; }
.distinction + .distinction { border-top: 1px solid rgba(51, 40, 50, 0.14); }
.distinction .slate { margin-bottom: 1.6rem; }
.distinction h2 { margin-top: 0; }

/* ---------- ledger: dark form sections ---------- */
.ledger {
  background: var(--ink-soft);
  padding: clamp(5rem, 12vh, 8rem) 2rem;
  text-align: center;
}
.ledger h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--paper); margin: 2rem 0 1rem; }
.ledger > p { color: var(--mist); max-width: 480px; margin: 0 auto 1rem; }
.ledger .aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--paper);
  max-width: 560px;
  margin: 0 auto;
}

.form { max-width: 460px; margin: 3rem auto 0; text-align: left; }
.field { margin-bottom: 2.2rem; }
.field label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.78);
  margin-bottom: 0.6rem;
}
.field input, .field textarea {
  width: 100%;
  /* 44px is the smallest comfortable tap target; these measured 40px */
  min-height: 2.75rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--paper);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(250, 247, 242, 0.3);
  border-radius: 0;
  padding: 0.6rem 0;
  transition: border-color 0.3s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field textarea { resize: vertical; min-height: 110px; }
.form-note {
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.68);
  font-style: italic;
  text-align: center;
  margin-top: 1.6rem;
}
.form .center { text-align: center; }
.form-guard {
  display: none;
  margin-top: 1.6rem;
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  color: #E8CFA0;
  border: 1px solid rgba(181, 139, 74, 0.45);
  background: rgba(181, 139, 74, 0.08);
}

/* ---------- buttons ---------- */
.invite-btn {
  display: inline-block;
  margin-top: 2.6rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 1.15rem 2.9rem;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
  box-shadow: 0 0 0 rgba(181, 139, 74, 0);
  transition: background 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.invite-btn:hover {
  background: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(181, 139, 74, 0.28);
}
.invite-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* One button language for the whole site, in two directions:
   on a dark aubergine section the button is ivory with aubergine text (above);
   on ivory or stone it inverts. Never invent a third treatment. */
.invite-btn.on-light {
  background: var(--ink);
  color: var(--lba-soft-ivory);
}
.invite-btn.on-light:hover {
  background: var(--plum);
  box-shadow: 0 14px 34px rgba(51, 40, 50, 0.24);
}
.soft-exit {
  display: block;
  margin-top: 1.8rem;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mist);
  text-shadow: 0 1px 20px rgba(51, 40, 50, 0.6);
}

/* ---------- stay close: the quiet second path (2026-08-19) ----------
   Lead capture for the visitor who is not ready to register, and — the reason
   this exists at all — for anyone arriving AFTER a masterclass date has
   passed. Every call to action on this site points at a dated event; without
   this, the site has nothing to offer on September 10.

   It is deliberately lighter than .ledger. The masterclass is the primary
   call to action wherever it appears and this must never out-shout it: stone
   rather than aubergine, one short paragraph rather than a block, and the
   on-light button rather than the ivory one. It is also deliberately absent
   from masterclass.html and reset-experience.html — those pages have one job
   each, and a softer option beside a live CTA costs registrations. Those two
   are covered by the footer link instead, which sits below the fold after the
   page has already done its work. */
.stay-close {
  background: var(--paper-deep);
  color: var(--ink);
  padding: clamp(3rem, 7vh, 4.6rem) 2rem;
  text-align: center;
}
.stay-close-inner { max-width: 620px; margin: 0 auto; }
.stay-close .slate { color: var(--plum); }
.stay-close .slate::before, .stay-close .slate::after { background: var(--plum); }
.stay-close h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  color: var(--plum);
  margin: 1.3rem 0 1rem;
}
.stay-close p {
  font-size: 1.02rem;
  color: var(--body);
  max-width: 31rem;
  margin: 0 auto;
}
.stay-close .invite-btn { margin-top: 1.9rem; }
/* .soft-exit is built for photography — restate it for this light band */
.stay-close .soft-exit {
  color: var(--meta);
  text-shadow: none;
  margin-top: 1.4rem;
}

/* ---------- colophon (footer) ---------- */
/* the footer's route to the same form. On masterclass.html and
   reset-experience.html this is the ONLY stay-close link, by design. */
.colophon-stay {
  display: inline-block;
  margin: 0 0 1.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 188, 134, 0.45);
  padding-bottom: 3px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.colophon-stay:hover, .colophon-stay:focus-visible {
  color: var(--paper);
  border-color: var(--gold-soft);
}
/* enlarge the tap area without moving the underline — same device as .goto */
.colophon-stay { position: relative; }
.colophon-stay::after { content: ''; position: absolute; inset: -9px -10px; }

.colophon {
  padding: 3.4rem 2rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* 0.42 measured 3.6:1 against the aubergine bed — under AA at this size.
     0.62 clears it at ~6:1 and still reads as a footer, not a paragraph. */
  color: rgba(250, 247, 242, 0.62);
}
.colophon .mark {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  color: var(--paper);
  display: block;
  margin-bottom: 0.7rem;
}
.colophon nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
}
.colophon nav a { text-decoration: none; color: rgba(250, 247, 242, 0.75); }
.colophon nav a:hover { color: var(--gold-soft); }
.colophon .legal { display: block; margin-top: 1.1rem; font-size: 0.6rem; letter-spacing: 0.18em; }
.colophon .legal a { text-decoration: none; color: rgba(250, 247, 242, 0.68); }
.colophon .legal a:hover { color: var(--gold-soft); }

section[id], div[id] { scroll-margin-top: 70px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  main .scene:first-of-type::before { animation: none; opacity: 0; }
  .scene-bg { transform: none !important; }
  .scene::after { opacity: 0.03; }
  .scene .cue { animation: none; }
  .rise, .w { opacity: 1; transform: none; filter: none; transition: none; }
  .slate.rise::before, .slate.rise::after { width: 44px; transition: none; }
  .intertitle.rise .orn { opacity: 0.7; transition: none; }
  .horizons.rise .hz { transform: none; transition: none; }
  .horizons.rise .between { opacity: 1; transition: none; }
  .her-photo.rise img { transform: none; transition: none; }
  .plate-wide.rise img { transform: none; transition: none; }
  .spot-photo.rise img { transform: none; transition: none; }
  blockquote.rise cite { opacity: 1; transition: none; }
  .invite-btn:hover { transform: none; }
}

@media (max-width: 900px) {
  .meet-grid { grid-template-columns: 1fr; }
  .meet-cell {
    border-left: none;
    border-top: 1px solid rgba(51, 40, 50, 0.14);
    padding: 2.6rem 0 0;
    margin-top: 2.6rem;
  }
  .meet-cell:first-child { border-top: none; padding-top: 0; margin-top: 0; }
}

@media (max-width: 720px) {
  .marquee { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.8rem 1.2rem; }
  /* a row of four program names won't fit a phone — stack them, and turn the
     dividing hairline back through 90 degrees */
  .navdrop-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.9rem clamp(1.2rem, 4vw, 2.6rem);
  }
  .navdrop-menu a { padding: 0.6rem 0; font-size: 1.06rem; }
  .navdrop-menu .navdrop-rule {
    width: 100%;
    min-height: 0;
    height: 1px;
    align-self: auto;
    margin: 0.45rem 0;
  }
  .her { grid-template-columns: 1fr; text-align: center; }
  .her-photo { max-width: 260px; margin: 0 auto; }
  .her .slate.start { justify-content: center; }
  .her .slate.start::after { display: block; }
  .markers { grid-template-columns: 1fr; gap: 2rem; }
  .scene-inner { padding: 7rem 1.4rem 5rem; }
  .spot { grid-template-columns: 1fr; text-align: center; }
  .spot-photo { max-width: 190px; margin: 0 auto; order: -1; }
  .plate-wide { aspect-ratio: 4/3; }
}