/* ===== self-hosted fonts (src/build/selfHostFonts.js) =====
   Local woff2 replaces the Google Fonts stylesheet: no third-party origin,
   no CSS round trip before locked-family text can paint. font-display:swap
   is kept so text is never invisible while a face loads. Redistributed
   under the SIL OFL — see /fonts/OFL.txt. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-italic-6f2f5c3b.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-normal-d80df8ff.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-normal-d80df8ff.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-normal-d80df8ff.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/jost-normal-7726a5cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-normal-7726a5cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-normal-7726a5cd.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Spiritual Renaissance - "Daybreak"
   One stylesheet, one page-wide dawn gradient, one motif:
   the horizon rule and the morning rail.
   ============================================================ */
:root{--sky:#E3ECF0;--mist:#EFECE5;--sand:#F6F1E8;--sage-deep:#4A5745;--sage:#6F7D66;--sage-ink:#2E3A2B;--ink:#2A2E29;--muted:#4E5449;--glass:rgba(255,255,255,0.78);--panel-ink:#3A4037;--wrap:66rem;--display:'Cormorant Garamond',Georgia,'Times New Roman',serif;--body:'Jost','Helvetica Neue',Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--body);font-weight:300;font-size:1.08rem;line-height:1.8;color:var(--ink);background:linear-gradient(180deg,var(--sky) 0%,var(--mist) 38%,var(--sand) 100%);background-attachment:fixed;background-repeat:no-repeat;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;opacity:.55;background:radial-gradient(34rem 26rem at 16% 10%,rgba(255,251,242,.9),transparent 62%),radial-gradient(30rem 22rem at 84% 30%,rgba(227,236,240,.8),transparent 60%),radial-gradient(40rem 28rem at 55% 92%,rgba(246,241,232,.85),transparent 62%);animation:haze 32s ease-in-out infinite alternate}
@keyframes haze{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.06)}}
img{display:block;max-width:100%;height:auto}
svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);line-height:1.14;margin:0 0 .55em;letter-spacing:.005em}
h2{font-size:clamp(1.85rem,3.3vw,2.5rem)}
h3{font-size:1.15rem;font-weight:500}
p{margin:0 0 1.15em}
a{color:var(--sage-deep)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--sage-deep);color:#F6F1E8;padding:.7rem 1.1rem;border-radius:0 0 .6rem 0;text-decoration:none;font-size:.9rem}
.skip:focus{left:0}
.wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
.wrap.narrow{max-width:46rem}
.section{position:relative;z-index:1;padding:4.5rem 2rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease}
.site-header.is-scrolled{background:rgba(240,238,232,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:rgba(46,58,43,.14)}
.header-inner{max-width:var(--wrap);margin:0 auto;padding:1.05rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.wordmark{font-family:var(--display);font-weight:600;letter-spacing:.02em;font-size:1.22rem;color:var(--ink);text-decoration:none;border:0;line-height:1}
.wordmark:hover{color:var(--sage-deep)}
.site-nav{display:flex;gap:1.6rem}
.site-nav a:not(.btn){font-weight:400;font-size:.92rem;color:var(--muted);text-decoration:none;background-image:linear-gradient(var(--sage-deep),var(--sage-deep));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s ease,color .3s ease;padding-bottom:2px}
.site-nav a:not(.btn):hover{color:var(--sage-deep);background-size:100% 1px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-weight:400;font-size:.95rem;letter-spacing:.02em;line-height:1;padding:.95rem 1.7rem;border-radius:3rem;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.btn-primary{background:var(--sage-deep);color:#F6F1E8}
.btn-primary:hover{background:var(--sage);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(46,58,43,.9)}
.btn-quiet{background:var(--glass);color:var(--ink);border-color:rgba(46,58,43,.20);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-quiet:hover{transform:translateY(-1px);box-shadow:0 10px 24px -16px rgba(46,58,43,.8);border-color:rgba(46,58,43,.42)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}

/* ---------- the horizon motif ---------- */
.sec-rule{display:flex;align-items:center;gap:1rem;margin:0 0 2.2rem}


.sec-rule .line{flex:1 1 auto;height:1px;background:var(--sage-deep);opacity:.3}
.horizon{display:block;height:1px;max-width:56rem;background:linear-gradient(90deg,transparent,rgba(46,58,43,.35),transparent);margin-top:3rem}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:clamp(3rem,9vh,5.5rem) 2rem 3.5rem}
.hero-grid{display:grid;grid-template-columns:1.7fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sun-wrap{display:block;margin:0 0 1.6rem;will-change:transform}
.sun{display:block;width:clamp(6.5rem,11vw,10.5rem);height:clamp(6.5rem,11vw,10.5rem);border-radius:50%;background:radial-gradient(circle at 45% 38%,#FFFBF2,#F4DFC0 55%,#E6C39E);box-shadow:0 0 0 1.1rem rgba(255,255,255,.42),0 0 0 2.5rem rgba(255,255,255,.22)}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);max-width:19ch;margin-bottom:.35em}
.hero-sub{color:var(--panel-ink);font-size:1.12rem;max-width:33rem;margin-bottom:2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-photo{max-width:22rem;justify-self:end;border-radius:1.4rem;overflow:hidden;box-shadow:0 34px 60px -42px rgba(46,58,43,.85),inset 0 0 0 1px rgba(255,255,255,.55)}
.hero-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ---------- glass ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1.6rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 26px 50px -40px rgba(46,58,43,.7);padding:clamp(1.6rem,3.2vw,2.6rem);color:var(--panel-ink)}
.glass p{color:var(--panel-ink)}

/* ---------- about ---------- */
.about-grid{display:block;max-width:none}
.arch{position:relative;overflow:hidden;max-width:20rem;aspect-ratio:3/4;border-radius:50% 50% 1.2rem 1.2rem/40% 40% 1.2rem 1.2rem;box-shadow:0 30px 55px -40px rgba(46,58,43,.9)}
.arch img{width:100%;height:100%;object-fit:cover}
.arch::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%)}
.about-panel p:last-child{margin-bottom:0}
.about-close{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.5rem;line-height:1.4;color:var(--ink)}

/* ---------- teachings band ---------- */
.band-dark{position:relative;z-index:1;overflow:hidden;margin:2rem 0;padding:5.5rem 2rem;background:linear-gradient(160deg,var(--sage-deep),var(--sage-ink))}
.band-dark::before{content:"";position:absolute;inset:-25%;pointer-events:none;opacity:.08;background:radial-gradient(28rem 20rem at 22% 20%,#FFFBF2,transparent 60%),radial-gradient(30rem 22rem at 78% 78%,#D9E0CC,transparent 62%);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(-2%,0,0)}100%{transform:translate3d(3%,2%,0)}}
.band-lede{max-width:36rem;margin:0 auto 3rem;text-align:center;color:rgba(240,243,235,.92);font-size:1.15rem}
.channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.channel{background:rgba(255,255,255,.07);border-radius:1.4rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);padding:clamp(1.4rem,2.6vw,2rem);transition:transform .35s ease,background-color .35s ease}
.channel:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.channel h3{font-family:var(--display);font-weight:500;font-size:1.85rem;color:#F5F6F0;margin-bottom:.4em}
.channel p{color:rgba(240,243,235,.95)}
.channel hr,.band-dark hr{border:0;height:1px;background:rgba(255,255,255,.2)}
.band-dark a:not(.btn){color:#D9E0CC;text-decoration:none;border-bottom:1px solid rgba(217,224,204,.4);transition:border-color .3s ease,color .3s ease}
.band-dark a:not(.btn):hover{color:#F5F6F0;border-bottom-color:#F5F6F0}
.channel-link{display:inline-block;font-weight:400;font-size:.95rem;letter-spacing:.02em;margin-top:1rem}



/* ---------- books ---------- */
.section-books h2{text-align:center}
.books-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:64rem;margin:2.5rem auto 0}
.book{display:flex;flex-direction:column}
.cover{perspective:800px;animation:bob 7s ease-in-out infinite}
.book:nth-child(2) .cover{animation-delay:.7s}
.book:nth-child(3) .cover{animation-delay:1.4s}
.book:nth-child(4) .cover{animation-delay:2.1s}
.book:nth-child(5) .cover{animation-delay:2.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cover-frame{overflow:hidden;border-radius:.6rem;box-shadow:0 16px 32px -22px rgba(46,58,43,.75);transition:transform .4s ease,box-shadow .4s ease;transform-style:preserve-3d}
.cover-frame img{width:100%;aspect-ratio:97/100;object-fit:contain;display:block;background:#fff}
.book:hover .cover-frame,.book:focus-within .cover-frame{transform:rotateY(-7deg) rotateX(3deg) scale(1.02);box-shadow:0 26px 46px -24px rgba(46,58,43,.8)}
.book h3{margin:1.1rem 0 .4rem;font-size:1.15rem;line-height:1.25}
.book p{color:var(--panel-ink);font-size:.93rem;line-height:1.65;margin-bottom:1rem}
.book-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}


/* ---------- sessions + the morning rail ---------- */
.sessions-panel{max-width:42rem;margin:0 auto}
.sessions-panel h2{margin-bottom:.5em}









.facts{margin:0 0 1.4rem;padding:0}
.facts .row{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid rgba(46,58,43,.18)}
.facts dt{font-weight:500;font-size:.95rem;color:var(--ink)}
.facts dd{margin:0;text-align:right;color:var(--panel-ink);font-size:1rem}

.punctual{font-size:.95rem;color:var(--panel-ink)}
.session-form{display:grid;gap:1.05rem;margin-top:1.8rem;position:relative}
.field{display:grid;gap:.35rem}
.field label{font-weight:500;font-size:.88rem;color:var(--ink)}
input[type=text],input[type=email],textarea{font-family:var(--body);font-weight:300;font-size:1rem;line-height:1.6;color:var(--ink);background:rgba(255,255,255,.86);border:1px solid rgba(46,58,43,.22);border-radius:.7rem;padding:.75rem .9rem;width:100%;transition:border-color .3s ease,box-shadow .3s ease}
textarea{resize:vertical}
input[type=text]:hover,input[type=email]:hover,textarea:hover{border-color:rgba(46,58,43,.38)}
input[type=text]:focus,input[type=email]:focus,textarea:focus{border-color:var(--sage-deep);box-shadow:0 0 0 3px rgba(74,87,69,.14)}
.form-note{margin:.1rem 0 0;font-size:.9rem;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;padding:3rem 2rem 5.5rem;text-align:center;color:var(--panel-ink)}
.site-footer .wrap{max-width:44rem}
.foot-label{margin-bottom:.3rem;font-size:.95rem;color:var(--muted)}
.foot-email{margin:0 0 1.4rem;overflow-wrap:anywhere}
.foot-email a:not(.btn){font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--sage-deep);text-decoration:none;border-bottom:1px solid rgba(74,87,69,.35);transition:border-color .3s ease}
.foot-email a:not(.btn):hover{border-bottom-color:var(--sage-deep)}
.foot-note{font-size:.98rem;color:var(--panel-ink);max-width:34rem;margin:0 auto 1.8rem}



.copyright{font-size:.82rem;letter-spacing:.04em;color:var(--muted);margin:1.4rem 0 0}

/* ---------- body links ---------- */
main a:not(.btn):not(.wordmark):not(.channel-link),.site-footer a:not(.btn){color:var(--sage-deep)}
.prose-link{color:var(--sage-deep);text-decoration:none;border-bottom:1px solid rgba(74,87,69,.35);transition:border-color .3s ease}
.prose-link:hover{border-bottom-color:var(--sage-deep)}

/* ---------- thank you ---------- */
.thanks{padding:clamp(4rem,14vh,8rem) 2rem 5rem}
.thanks h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:18ch}
.thanks p{color:var(--panel-ink);max-width:34rem;font-size:1.1rem}
.thanks .btn{margin-top:1.2rem}

/* ---------- motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sunrise{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sheen{to{transform:translateX(130%)}}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*60ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .enter{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .e1{animation-delay:.7s}
.js .e2{animation-delay:.95s}
.js .e3{animation-delay:1.2s}
.js .e4{animation-delay:1.05s}
.js .sun{animation:sunrise 1.8s cubic-bezier(.2,.7,.2,1) both,floaty 8s ease-in-out 1.8s infinite}
.js .horizon{transform:scaleX(0);transform-origin:left;animation:drawX 1s ease 1.4s forwards}
.js .arch{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1)}
.js .arch.is-in{clip-path:inset(0 0 0 0)}
.js .arch.is-in::after{animation:sheen 1.6s ease 1.3s 1 forwards}

/* ---------- responsive ---------- */
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-photo{justify-self:start;max-width:18rem;margin-top:1rem}}
@media (max-width:840px){.about-grid{grid-template-columns:1fr}.arch{margin:0 auto}.channel-grid{grid-template-columns:1fr}.books-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.site-nav{display:none}.header-inner{padding:1rem 1.4rem}.section{padding:3.5rem 1.4rem}.hero{padding:2.5rem 1.4rem 3rem}.band-dark{padding:4rem 1.4rem}.site-footer{padding:2.5rem 1.4rem 4.5rem}.facts .row{grid-template-columns:1fr;gap:.2rem}.facts dd{text-align:left}}
@media (max-width:520px){.books-grid{grid-template-columns:1fr}.book{max-width:18rem;margin:0 auto}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .enter,.js .sun{opacity:1!important;transform:none!important}
  .js .horizon{transform:scaleX(1)!important}
  .js .arch{clip-path:none!important}
  .arch::after{display:none}
}


/* --- overlay mechanics (deterministic, src/build/components/modal.js) --- */
.sa-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem}
.sa-modal[open],.sa-modal.is-open{display:flex}
.sa-modal__scrim{position:absolute;inset:0;background:rgba(20,24,19,.55);backdrop-filter:blur(3px)}
.sa-modal__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:56rem;max-height:88vh;
  border-radius:1.2rem;overflow:hidden;background:#fff;box-shadow:0 40px 80px -30px rgba(20,24,19,.5)}
.sa-modal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;
  border-bottom:1px solid rgba(20,24,19,.12)}
.sa-modal__title{font-size:1.15rem;margin:0}
.sa-modal__close{appearance:none;border:none;background:transparent;cursor:pointer;font-size:1.5rem;line-height:1;
  padding:.35rem .6rem;border-radius:.5rem;color:inherit;font-family:inherit}
.sa-modal__close:hover{background:rgba(20,24,19,.08)}
.sa-modal__body{flex:1;min-height:0;overflow:auto}
.sa-modal__body iframe{display:block;width:100%;height:70vh;border:0}
.sa-modal__body-pad{padding:1.4rem 1.5rem 1.6rem}
.sa-modal-open,body.sa-modal-open{overflow:hidden}
[data-sa-modal-open][disabled],[data-sa-modal-open][aria-disabled="true"]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion: reduce){.sa-modal__scrim{backdrop-filter:none}}

/* --- VIDEO-EMBED click-to-load facade (deterministic, src/build/components/videoEmbed.js) --- */
.sa-video{position:relative;margin:1.4rem 0;border-radius:1rem;overflow:hidden;background:rgba(0,0,0,.35)}
.sa-video__facade{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;
  aspect-ratio:16/9}
.sa-video__poster{width:100%;height:100%;object-fit:cover;display:block}
.sa-video__play{position:absolute;inset:0;margin:auto;width:4.2rem;height:4.2rem;border-radius:50%;
  background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  display:grid;place-items:center;transition:transform .3s,background .3s}
.sa-video__play::after{content:"";border-left:1.15rem solid rgba(255,255,255,.95);
  border-top:.72rem solid transparent;border-bottom:.72rem solid transparent;margin-left:.3rem}
.sa-video__facade:hover .sa-video__play{transform:scale(1.08);background:rgba(0,0,0,.58)}
.sa-video__facade:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sa-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.sa-video__fallback{padding:1rem;margin:0}
@media (prefers-reduced-motion: reduce){.sa-video__facade:hover .sa-video__play{transform:none}}

/* --- PREVIEW-MODAL trigger (deterministic, src/build/components/previewModal.js) --- */
.sa-preview-trigger{appearance:none;border:none;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px solid currentColor;opacity:.85}
.sa-preview-trigger:hover{opacity:1}

/* --- ORDER-PANEL (deterministic, src/build/components/orderPanel.js) --- */
.sa-order-trigger{appearance:none;border:none;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px solid currentColor}
.sa-order__price{font-weight:500;font-size:1.15rem;margin:0 0 1rem}
.sa-order__line{margin:0 0 .85rem;font-size:.95rem;line-height:1.65}
.sa-order__line:last-child{margin-bottom:0}
.sa-order__line a{word-break:break-word}

/* --- FORM-STATUS (deterministic, src/build/components/formStatus.js) --- */
.sa-form-status{margin:0 0 1.1rem;padding:.85rem 1.1rem;border-radius:.7rem;font-size:.95rem;line-height:1.55}
.sa-form-status[hidden]{display:none}
.sa-form-status--error{background:rgba(140,58,42,.10);box-shadow:inset 0 0 0 1px rgba(140,58,42,.35);color:#6E2E22}
.sa-form-status--success{background:rgba(74,87,69,.10);box-shadow:inset 0 0 0 1px rgba(74,87,69,.35);color:#2E3A2B}


/* ---------- books grid: explicit column counts (5 books, no orphan row) ----
   auto-fit is avoided on purpose: at intermediate widths it settles on 4 or 2
   columns, which leaves a 1-book orphan row. 3-up (3+2) and 5-up (one row) are
   the only balanced arrangements for five items. */
@media (min-width:520px){.books-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.books-grid{grid-template-columns:repeat(5,1fr);gap:1.5rem}}




/* ===== design pass 2026-09-07 ===== */
/* Layout only. Appended so source order gives these precedence over the
   generated rules above, including the generated media queries. */

/* --- 1. About: heading column, story column ------------------------------
   The heading sits alone in the left column; ALL FOUR locked paragraphs run in
   the right column in document order, so the closing line "That journey
   changed everything." reads where the client wrote it — at the end of the
   story.

   A previous version of this pass pulled that line out as a large italic
   pull-quote in the left column. It looked fine and read wrong: it is the
   story's closing sentence, and in the left column it landed BEFORE the story
   it closes. Reading order beats visual interest; reverted at review
   2026-09-07. The line keeps only the italic the locked copy specifies. */
.about-panel{display:grid;grid-template-columns:1fr 2fr;column-gap:clamp(1.5rem,3vw,2.8rem);row-gap:0;align-items:start}
.about-panel>h2{grid-column:1;grid-row:1;align-self:start;position:sticky;top:5.5rem;margin:0;font-size:2.4rem;line-height:1.15}
.about-panel>p{grid-column:2;max-width:40rem;margin:0 0 1rem}
.about-panel>p:last-of-type{margin-bottom:0}
@media (max-width:840px){
  .about-panel{grid-template-columns:1fr}
  .about-panel>h2{grid-column:1;position:static;margin-bottom:1.1rem;font-size:2.1rem}
  .about-panel>p{grid-column:1}
}

/* --- 2/3. Books: list of rows, cover left ---------------------------------
   Two columns of ROWS at >=1000px, one below. The cover stays beside the text
   down to 400px and only stacks under it, so a narrow phone still reads as a
   list rather than a column of alternating images and paragraphs. */
.books-grid{display:grid;grid-template-columns:1fr;gap:1.9rem 2.6rem;max-width:72rem;margin:2.5rem auto 0}
@media (min-width:1000px){.books-grid{grid-template-columns:repeat(2,1fr)}}
/* grid-template-rows matters here. The cover spans all three text rows, and
   with every row sized `auto` the browser distributes the cover's 155px
   across them — which opened a visible gap between each title and its
   description. Rows 1-2 are pinned to their content and row 3 absorbs the
   slack instead. */
.book{display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto auto 1fr;
  column-gap:1.3rem;row-gap:.3rem;align-items:start;align-content:start;max-width:none;margin:0}
.book>.cover{grid-column:1;grid-row:1/-1;align-self:start;width:150px}
.book>h3{grid-column:2;margin:0;font-size:1.15rem;line-height:1.28}
.book>p{grid-column:2;margin:.15rem 0 0;font-size:1rem;line-height:1.6;max-width:36rem}
.book>.book-actions{grid-column:2;align-self:start;margin-top:.55rem}
/* the ~520px rule above pinned each card to 18rem and centred it — wrong for
   a row layout, so it is explicitly released at every width */
@media (max-width:520px){.book{max-width:none;margin:0}}
@media (max-width:399px){
  .book{grid-template-columns:1fr;row-gap:.5rem}
  .book>.cover{grid-row:auto;width:auto;max-width:11rem}
  .book>h3,.book>p,.book>.book-actions{grid-column:1}
}

/* --- 4. Hero portrait: the arch ------------------------------------------
   Same size and position; only the mask changes. This is the arch treatment
   the brand spec already describes, now on the hero portrait rather than on a
   second copy of it in About. */
.hero-photo{border-radius:50% 50% 1.2rem 1.2rem / 40% 40% 1.2rem 1.2rem}

/* --- 5. Sessions facts: values left-aligned ------------------------------
   A row whose value wraps gets label-above-value instead. CSS cannot detect
   wrapping, so the rows that actually wrap are measured in a real browser and
   marked with data-stacked (see scratch-yash-mark-wrapping-rows.mjs). */
.facts .row{grid-template-columns:7.5rem 1fr;align-items:baseline}
.facts dd{text-align:left}
.facts .row[data-stacked]{grid-template-columns:1fr;gap:.15rem}
.facts .row[data-stacked] dt{margin-bottom:.05rem}
/* re-assert the small-screen stack, which the left-align rule above would
   otherwise undo by restoring a two-column track */
@media (max-width:760px){.facts .row{grid-template-columns:1fr;gap:.2rem}}

/* --- 6. Section rhythm --------------------------------------------------- */
.section{padding:3.5rem 2rem}
.band-dark{padding:4.5rem 2rem}
@media (max-width:760px){.section{padding:2.75rem 1.4rem}}

/* --- 7. "Get the book" as an outlined pill; "Preview" stays a text link --- */
.book-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:auto}
.sa-order-trigger{border:1px solid var(--sage-deep);border-radius:3rem;padding:.5rem .95rem;
  color:var(--sage-deep);font-size:.9rem;line-height:1;background:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.sa-order-trigger:hover,.sa-order-trigger:focus-visible{background:var(--sage-deep);color:#F6F1E8;border-color:var(--sage-deep)}

/* ===== content round 2026-09-08 ===== */
/* The Preview trigger is an <a> now (see previewModal.js): keep it looking like
   the text link it already was, and keep it from picking up the generic body
   link colour by accident. */
.book-actions a.sa-preview-trigger{color:var(--sage-deep);text-decoration:none;border-bottom:1px solid currentColor;opacity:.85}
.book-actions a.sa-preview-trigger:hover{opacity:1}
/* the session address sits on its own line beneath the instruction, same row */
.facts .session-mail{display:inline-block;margin-top:.25rem;overflow-wrap:anywhere}
/* the new closing line matches the punctuality line it follows */
.reply-time{margin:.55rem 0 0;font-size:.95rem;color:var(--panel-ink)}

/* the third opening paragraph leads directly into the facts list */
.sessions-lead-in{margin-top:.9rem}