/* ============================================================
   CHRISTA Love — design system
   Type    : Marcellus (inscriptional display) / EB Garamond (body)
   Ground  : warm alabaster, like vellum
   Metal   : liturgical gold, bronze-leaning
   Night   : Marian blue, for the Beloved Sons chapter
   ============================================================ */

:root{
  --ivory:      #FAF7EF;
  --ivory-deep: #F2ECDD;
  --ink:        #23201A;
  --ink-soft:   #4E483E;
  --faded:      #857D6E;
  --gold:       #A2812F;
  --gold-soft:  #C4A96A;
  --gold-pale:  #E4D5AE;
  --pine:       #1B4232;   /* deep evergreen — hero & home-nav text */
  --pine-soft:  #3E5C4B;   /* softened pine, for the mission line   */
  --night:      #16222F;
  --night-deep: #0E1721;
  --line:       rgba(35,32,26,.16);
  --line-gold:  rgba(162,129,47,.35);
  --max:        1180px;
  --measure:    64ch;
  --ease:       cubic-bezier(.22,.8,.24,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, serif;
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.display{
  font-family:"Marcellus", "Times New Roman", serif;
  font-weight:400;
  line-height:1.14;
  letter-spacing:.015em;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--ivory);
  padding:.6rem 1.2rem; z-index:200;
  font-family:"Marcellus",serif; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- Navigation ---------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.4rem, 4vw, 3.2rem);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.nav.scrolled{
  background:rgba(250,247,239,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:.9rem; padding-bottom:.9rem;
}
.nav.on-night{ color:var(--ivory); }
.nav.on-night.scrolled{ color:var(--ink); }

/* Home: the nav sits over the hero — deep evergreen, not ink */
.nav.on-hero{ color:var(--pine); }
.nav.on-hero.scrolled{ color:var(--pine); }
.nav.on-hero .nav-links{ color:var(--pine); }

/* Language toggle — EN / DE */
.nav-lang{
  display:flex; align-items:center; gap:.7rem;
}
.nav-lang i{
  width:5px; height:5px; flex:none;
  rotate:45deg;
  background:var(--gold);
}
.nav-lang a{ letter-spacing:.2em; }
.nav-lang a[aria-current="true"]{
  opacity:1;
  border-bottom-color:var(--gold);
}

.nav-mark{
  font-family:"Marcellus",serif;
  font-size:1rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.nav-mark .amp{ color:var(--gold); letter-spacing:0; }

.nav-links{
  display:flex; gap:2.6rem; list-style:none;
}
.nav-links a{
  font-family:"Marcellus",serif;
  font-size:.74rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:.78;
  padding-bottom:.35rem;
  border-bottom:1px solid transparent;
  transition:opacity .3s, border-color .3s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a[aria-current="page"]{
  opacity:1;
  border-bottom-color:var(--gold);
}

.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  width:44px; height:44px;
  position:relative; z-index:130;
}
.nav-toggle span{
  display:block; width:26px; height:1px;
  background:currentColor;
  margin:7px auto;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

@media (max-width: 920px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0;
    background:var(--ivory);
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.4rem;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
    z-index:120;
    color:var(--ink);
  }
  .nav-links.open{ opacity:1; visibility:visible; }
  .nav-links a{ font-size:1rem; }
}

/* ---------- Hero (home) — the scroll-scrubbed nave ----------
   The words arrive on load; then the hero pins inside .hero-track
   and scroll position drives the dolly down the nave: main.js maps
   track progress onto a frame of the JPEG/WebP sequence painted to
   .hero-canvas. The text steps aside in the first breath of scroll,
   the veil lifts, and the scene washes into the page at the end of
   the track.                                                    */

.hero-track{
  position:relative;
  height:300svh;
}

.hero{
  position:sticky; top:0;
  height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}

/* Frame-sequence layer (scrubbed by scroll); still image for fallback */
.hero-media{
  position:absolute; inset:0; z-index:-6;
  overflow:hidden;
  pointer-events:none;
}
.hero-media canvas,
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.hero-still{ display:none; }
.hero-media.no-video .hero-canvas{ display:none; }
.hero-media.no-video .hero-still{ display:block; }

/* Curtain reveal — the page rises over the still-live dolly shot
   instead of the scene washing out to a blank viewport. The next
   section overlaps the last stretch of the hero track and covers
   the scene while the camera is still gliding. Scoped to pages
   with a pinned hero: subpages have no track to overlap. */
.hero-track ~ main{
  position:relative; z-index:2;
  background:var(--ivory);
  margin-top:-80svh;
}

/* Arrival sequence */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}
@keyframes titleIn{
  from{ opacity:0; transform:translateY(30px); letter-spacing:.3em; }
  to{ opacity:1; transform:none; letter-spacing:.14em; }
}
.hero-eyebrow{ animation:riseIn 1.1s var(--ease) .3s both; }
.hero-title{ animation:titleIn 1.7s var(--ease) .5s both; }
.hero-rule{ animation:riseIn 1.1s var(--ease) 1.05s both; }
.hero-mission{ animation:riseIn 1.1s var(--ease) 1.25s both; }
.scroll-cue{ animation:riseIn 1.1s var(--ease) 1.8s backwards; }

/* Alabaster veil — keeps ink text legible, melts the photo into the page */
.hero-veil{
  position:absolute; inset:0; z-index:-5;
  background:
    radial-gradient(46% 38% at 50% 54%, rgba(250,247,239,.5), rgba(250,247,239,0) 74%),
    linear-gradient(180deg,
      rgba(250,247,239,.22),
      rgba(250,247,239,.34) 46%,
      rgba(250,247,239,.66) 80%,
      var(--ivory) 100%);
}

.hero-light{
  position:absolute; inset:-12% -10% 0;
  z-index:-2;
  pointer-events:none;
  will-change:transform;
}
.hero-light svg{ width:100%; height:100%; }

.hero-glow{
  position:absolute; z-index:-3; inset:0;
  background:
    radial-gradient(58% 46% at 50% -4%, rgba(196,169,106,.34), rgba(196,169,106,0) 70%),
    radial-gradient(120% 90% at 50% 110%, rgba(242,236,221,.9), rgba(242,236,221,0) 60%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.8; }
  50%{ opacity:1; }
}

.hero-motes{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
}
.mote{
  position:absolute; bottom:-2vh;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold-soft);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.55; }
  85%{ opacity:.25; }
  100%{ transform:translateY(-104vh) translateX(var(--drift,0px)); opacity:0; }
}

.hero-inner{
  padding:0 1.5rem;
}
.hero-eyebrow{
  font-family:"Marcellus",serif;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2.6rem;
}
.page-hero.has-media:not(.night) .hero-eyebrow{
  color:#7E611E;
  text-shadow:0 0 16px rgba(250,247,239,.95), 0 0 2px rgba(250,247,239,.9);
}
/* Home hero eyebrow — deep evergreen, sized to carry the longer line */
.hero .hero-eyebrow{
  color:var(--pine);
  font-size:.82rem;
  letter-spacing:.3em;
  line-height:2.1;
  max-width:44ch;
  margin-inline:auto;
  text-shadow:0 0 18px rgba(250,247,239,1), 0 0 3px rgba(250,247,239,.95);
}
.hero-title{
  font-size:clamp(3rem, 9.5vw, 7.4rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-indent:.14em; /* optically recenter tracked caps */
  color:var(--pine);
  text-shadow:0 0 42px rgba(250,247,239,.85);
}
.hero-rule{
  width:1px; height:64px;
  background:linear-gradient(to bottom, var(--gold), rgba(162,129,47,0));
  margin:2.4rem auto;
}
.hero-mission{
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  font-style:italic;
  color:var(--pine-soft);
  max-width:34ch; margin:0 auto;
}

.scroll-cue{
  /* Centered via inset+margin, not transform: the riseIn entrance
     animates transform and would override a translateX(-50%). */
  position:absolute; bottom:2.2rem; left:0; right:0;
  width:max-content;
  margin-inline:auto;
  font-family:"Marcellus",serif;
  font-size:.62rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--pine-soft);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  text-decoration:none;
}
.scroll-cue::after{
  content:"";
  width:1px; height:38px;
  background:var(--line);
  animation:cue 2.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1) translateY(10px); opacity:0; }
}

/* Sub-page hero */
.page-hero{
  padding:clamp(9rem,18vh,13rem) 1.5rem clamp(3.4rem,8vh,5.5rem);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(52% 60% at 50% -12%, rgba(196,169,106,.26), rgba(196,169,106,0) 70%);
}
.page-hero .hero-eyebrow{ margin-bottom:1.6rem; }
.page-hero h1{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing:.06em;
}
.page-hero .lede{
  margin:1.6rem auto 0;
  max-width:46ch;
  font-style:italic;
  color:var(--ink-soft);
  font-size:1.15rem;
}
.page-hero.night{
  background:linear-gradient(var(--night-deep), var(--night));
  color:var(--ivory);
}
.page-hero.night::before{
  background:radial-gradient(50% 65% at 50% -10%, rgba(196,169,106,.3), rgba(196,169,106,0) 72%);
}
.page-hero.night .lede{ color:var(--gold-pale); }

/* Sub-page hero with a photographic plane */
.page-hero.has-media{ isolation:isolate; }
.page-hero.has-media::before{ z-index:2; }
.page-hero.has-media > :not(.media-layer):not(.media-veil){ position:relative; z-index:3; }
.page-hero.has-media .media-veil{ z-index:1; }
.page-hero.has-media:not(.night) .media-veil{
  background:
    radial-gradient(52% 60% at 50% 62%, rgba(250,247,239,.62), rgba(250,247,239,0) 78%),
    linear-gradient(180deg, rgba(250,247,239,.5), rgba(250,247,239,.42) 55%, var(--ivory) 100%);
}
.page-hero.night.has-media{ background:var(--night-deep); }
.page-hero.night.has-media .media-veil{
  background:
    radial-gradient(56% 64% at 50% 60%, rgba(14,23,33,.3), rgba(14,23,33,.86) 100%),
    linear-gradient(180deg, rgba(14,23,33,.72), rgba(14,23,33,.4) 55%, var(--night) 100%);
}

/* ---------- Motion-scroll media (site-wide) ----------
   .media-layer  full-bleed photographic plane behind a section
   .media-veil   tinted glass between photo and content
   [data-parallax] elements are moved by main.js at the given depth */

.media-layer{
  position:absolute; left:0; right:0; top:-18%; bottom:-18%;
  z-index:0; overflow:hidden; pointer-events:none;
}
.media-layer img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
.media-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}

/* Framed inline figure — hairline gold inset, like a plate in a folio */
.figure{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.figure::after{
  content:"";
  position:absolute; inset:14px;
  border:1px solid rgba(228,213,174,.55);
  pointer-events:none;
}
.figure img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
.figure.tall{ aspect-ratio:4/5; }
.figure.wide{ aspect-ratio:16/10; }
.figcap{
  margin-top:1rem;
  font-family:"Marcellus",serif;
  font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--faded);
  text-align:center;
}

/* Floated folio plate beside running prose */
.figure-float{
  float:right;
  width:min(360px, 42%);
  margin:0 0 1.6rem 2.4rem;
}
@media (max-width:640px){
  .figure-float{ float:none; width:100%; margin:0 0 2rem; }
}

/* Two-column split: prose beside a figure */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:center;
}
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
}

/* ---------- Layout primitives ---------- */

.wrap{
  width:min(var(--max), 100% - 3rem);
  margin-inline:auto;
}
.section{ padding:clamp(4.5rem, 11vh, 8.5rem) 0; }
.section.tight{ padding:clamp(3rem, 7vh, 5rem) 0; }

.eyebrow{
  font-family:"Marcellus",serif;
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:1.5rem;
}

.prose{ max-width:var(--measure); }
.prose p + p{ margin-top:1.3em; }
.prose em{ letter-spacing:.01em; }

.big-text{
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  line-height:1.55;
  max-width:30em;
}

/* Illuminated initial — after Hildegard's manuscripts */
.illuminate::first-letter{
  font-family:"Marcellus",serif;
  color:var(--gold);
  float:left;
  font-size:4.3em;
  line-height:.82;
  padding:.04em .12em 0 0;
}

.rule{ border:0; border-top:1px solid var(--line); }
.rule.gold{ border-top-color:var(--line-gold); width:72px; margin:2.2rem 0; }
.rule.gold.center{ margin-inline:auto; }

/* ---------- The litany: Healing · Peace · Prayer ----------
   A carved dedication in the alabaster — one inscriptional line,
   gold diamonds set between the words. Deliberately the quietest
   moment on the page: the night chapter that follows draws its
   weight from this stillness. */

.litany{
  text-align:center;
  padding:clamp(5.5rem,15vh,10.5rem) 1.5rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(242,236,221,.75), rgba(242,236,221,0));
}
.litany-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1.8rem, 4vw, 3.2rem);
}
.litany .word{
  font-family:"Marcellus",serif;
  font-size:clamp(1.9rem, 4.4vw, 3.5rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-indent:.3em; /* optically recenter tracked caps */
  line-height:1;
}
.litany .sep{
  width:7px; height:7px;
  flex:none;
  background:var(--gold);
  rotate:45deg;
}
@media (max-width:700px){
  .litany-line{ flex-direction:column; gap:2.1rem; }
}
.litany-note{
  margin-top:3rem;
  font-style:italic;
  color:var(--faded);
  font-size:1.05rem;
}

/* ---------- Night chapter (Beloved Sons) ---------- */

.night-section{
  background:linear-gradient(var(--night), var(--night-deep));
  color:var(--ivory);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.night-section::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(46% 52% at 50% 0%, rgba(196,169,106,.22), rgba(196,169,106,0) 70%);
  pointer-events:none;
  z-index:2;
}
.night-section .wrap{ position:relative; z-index:3; }
.night-section .media-veil{
  background:
    linear-gradient(100deg, rgba(14,23,33,.94) 30%, rgba(14,23,33,.55) 72%, rgba(14,23,33,.72)),
    linear-gradient(180deg, rgba(14,23,33,.6), rgba(14,23,33,.25) 45%, rgba(14,23,33,.7));
}
.night-section .eyebrow{ color:var(--gold-soft); }
.night-section .prose{ color:#E9E4D6; }
.night-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
  position:relative;
}
@media (max-width:860px){
  .night-grid{ grid-template-columns:1fr; }
}
.night-title{
  font-size:clamp(1.8rem, 3.6vw, 2.7rem);
  color:var(--gold-pale);
  margin-bottom:1.6rem;
  text-wrap:balance;
}
.night-list{
  list-style:none;
  margin-top:1.8rem;
}
.night-list li{
  padding:.85rem 0 .85rem 1.8rem;
  border-top:1px solid rgba(250,247,239,.14);
  position:relative;
  color:#DCD5C3;
}
.night-list li:last-child{ border-bottom:1px solid rgba(250,247,239,.14); }
.night-list li::before{
  content:"";
  position:absolute; left:.2rem; top:1.42rem;
  width:5px; height:5px; rotate:45deg;
  background:var(--gold);
}
.night-note{
  margin-top:1.6rem;
  font-size:.98rem;
  font-style:italic;
  color:#B9B29E;
}

/* ---------- Buttons & links ---------- */

.btn{
  display:inline-block;
  font-family:"Marcellus",serif;
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:1.05rem 2.4rem 1rem;
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:color .45s var(--ease);
  isolation:isolate;
}
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--ivory); }
.btn:hover::after{ transform:scaleX(1); }

.btn.gold{ color:var(--gold-pale); border-color:var(--gold-soft); }
.btn.gold::after{ background:var(--gold-soft); }
.btn.gold:hover{ color:var(--night-deep); }

.btn-row{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:2.2rem; }

.text-link{
  font-family:"Marcellus",serif;
  font-size:.76rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:.7rem;
}
.text-link::after{
  content:"→";
  transition:transform .35s var(--ease);
}
.text-link:hover::after{ transform:translateX(6px); }

/* ---------- Services index list ---------- */

.svc-list{ list-style:none; border-top:1px solid var(--line); }
.svc-item{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) 1.6fr auto;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  padding:clamp(2.2rem,5vh,3.4rem) 0;
  border-bottom:1px solid var(--line);
}
@media (max-width:820px){
  .svc-item{ grid-template-columns:1fr; gap:1rem; }
}
.svc-item h3{
  font-size:clamp(1.35rem, 2.4vw, 1.8rem);
  text-wrap:balance;
}
.svc-item h3 .de{
  display:block;
  font-size:.66em;
  color:var(--faded);
  letter-spacing:.08em;
  margin-top:.3rem;
}
.svc-item p{ color:var(--ink-soft); max-width:56ch; }
.svc-item p + p{ margin-top:.9em; }
.svc-item .text-link{ margin-top:.4rem; }

/* Pillars: how we do the what we do */
.pillars{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(1.4rem,5vw,3.5rem);
  flex-wrap:wrap;
  margin-top:3rem;
}
.pillars span{
  font-family:"Marcellus",serif;
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.pillars i{
  width:6px; height:6px; rotate:45deg;
  background:var(--gold);
  display:inline-block;
}

/* ---------- Course page ---------- */

.course-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 0 3rem;
}
.course-meta > div{
  padding:1.6rem 1.4rem;
  text-align:center;
}
.course-meta > div + div{ border-left:1px solid var(--line); }
@media (max-width:700px){
  .course-meta > div + div{ border-left:0; border-top:1px solid var(--line); }
}
.course-meta .k{
  font-family:"Marcellus",serif;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
  display:block; margin-bottom:.6rem;
}
.course-meta .v{ font-size:1.02rem; }

.module{ margin-top:3rem; }
.module-title{
  font-family:"Marcellus",serif;
  font-size:.8rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:1.2rem;
  margin-bottom:1.4rem;
}
.module-title::after{
  content:"";
  flex:1; height:1px;
  background:var(--line-gold);
}
.class-list{ list-style:none; }
.class-list li{
  display:grid;
  grid-template-columns:3.4rem 1fr;
  gap:1.2rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.class-list .no{
  font-family:"Marcellus",serif;
  font-size:1.5rem;
  color:var(--gold-soft);
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(2rem,4vw,3.5rem);
  margin-top:3rem;
}
.why-grid h3{
  font-size:1.25rem;
  margin-bottom:.9rem;
  padding-top:1.3rem;
  border-top:1px solid var(--gold);
}
.why-grid p{ color:var(--ink-soft); font-size:1.02rem; }

/* ---------- Previous courses ---------- */

.archive{ list-style:none; border-top:1px solid var(--line); }
.archive a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:clamp(1.4rem,4vw,3rem);
  padding:clamp(2rem,5vh,3rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:padding-left .4s var(--ease);
}
.archive a:hover{ padding-left:.8rem; }
.archive .year{
  font-family:"Marcellus",serif;
  font-size:clamp(1.9rem,4vw,2.8rem);
  color:var(--gold-soft);
}
.archive .name{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-style:italic;
}
.archive .kind{
  font-family:"Marcellus",serif;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--faded);
}
@media (max-width:640px){
  .archive a{ grid-template-columns:1fr; gap:.4rem; }
}

/* ---------- Founder ---------- */

.founder-head{
  display:flex; align-items:baseline; gap:1.6rem; flex-wrap:wrap;
  margin-bottom:.6rem;
}
.founder-head h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
.founder-role{
  font-family:"Marcellus",serif;
  font-size:.72rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------- Contact form ---------- */

.form{ max-width:620px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:1.9rem; }
.field label{
  display:block;
  font-family:"Marcellus",serif;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.55rem;
}
.field .req{ color:var(--gold); }
.field input, .field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:.55rem 0;
  font-family:"EB Garamond",Georgia,serif;
  font-size:1.1rem;
  color:var(--ink);
  transition:border-color .3s;
  border-radius:0;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.field textarea{ min-height:130px; resize:vertical; }
.form-status{
  margin-top:1.4rem;
  font-style:italic;
  color:var(--gold);
  min-height:1.4em;
}

/* ---------- CTA band ---------- */

.cta-band{
  text-align:center;
  padding:clamp(5rem,12vh,8.5rem) 1.5rem;
  border-top:1px solid var(--line);
}
.cta-band h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  max-width:22ch;
  margin:0 auto 2.4rem;
  text-wrap:balance;
}

/* ---------- Footer ---------- */

.footer{
  background:var(--ivory-deep);
  border-top:1px solid var(--line);
  padding:clamp(3.5rem,8vh,5.5rem) 0 2.6rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr;
  gap:clamp(2rem,5vw,4.5rem);
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h3{
  font-family:"Marcellus",serif;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.3rem;
}
.footer p{ color:var(--pine-soft); font-size:.98rem; line-height:1.75; }
.footer a{
  font-family:"Marcellus",serif;
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--pine);
  text-decoration:none;
  border-bottom:1px solid var(--line-gold);
  padding-bottom:.25rem;
  transition:border-color .3s, color .3s;
}
.footer a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.footer-base{
  margin-top:4rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-mark{
  font-family:"Marcellus",serif;
  letter-spacing:.42em; text-transform:uppercase;
  font-size:.8rem;
  color:var(--pine);
}
.footer-mission{
  font-size:.92rem; font-style:italic; color:var(--pine-soft);
}

/* ---------- Scroll reveals ---------- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-glow, .scroll-cue::after, .mote,
  .hero-eyebrow, .hero-title, .hero-rule, .hero-mission, .scroll-cue{ animation:none; }
  .mote{ display:none; }
  .media-layer{ top:0; bottom:0; }
  [data-parallax]{ transform:none !important; }
  .hero-track{ height:auto; }
  .hero{ position:relative; height:auto; min-height:100svh; }
  .hero-canvas{ display:none; }
  .hero-still{ display:block; }
  .hero-track ~ main{ margin-top:0; }
}