:root{
  --bg:#15111f; --bg-2:#120e1b; --bg-3:#1a1430;
  --panel:#211b33; --panel-2:#1a1528;
  --ink:#ece3cf; --ink-soft:#cbc0aa;
  --gold:#eecb72; --gold-deep:#cf9a35;
  --rust:#d0803f; --rust-deep:#8c3d1c;
  --hair:#39304f; --muted:#a99c86;
  --paper-ink:#2a2233; --paper-muted:#5c5064; --paper-rust:#8c3d1c;
  --serif:"EB Garamond", Georgia, serif;
  --display:"Cormorant Garamond", serif;
  --maxw:1060px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; font-size:18px}
body{background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:20px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px; position:relative; z-index:1}

/* ---------- ancient paper sheet (consistent parchment tone across sizes) ---------- */
.paper{position:relative; color:var(--paper-ink); z-index:0; border-radius:3px}
.paper::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:3px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"),
    linear-gradient(155deg, #e9dcbc 0%, #e1d2a9 100%);
  background-blend-mode:multiply, normal;
  box-shadow:
    0 24px 46px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 0 44px rgba(120,90,50,.10);
}
.paper::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:3px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(120,92,54,.14);
  background:radial-gradient(100% 80% at 85% 100%, rgba(120,86,44,.09), transparent 55%);
}

/* ---------- ornaments ---------- */
.fleuron{display:flex; align-items:center; justify-content:center; gap:1.1rem; color:var(--gold-deep)}
.fleuron::before,.fleuron::after{content:""; height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--gold-deep))}
.fleuron::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.fleuron span{font-size:1.25rem; line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.92rem; font-weight:600;
  text-decoration:none; padding:.75rem 1.5rem; border-radius:4px; cursor:pointer; text-align:center;
  transition:background .2s, color .2s, border-color .2s; border:1px solid transparent; background:none}
.btn-primary{border-color:var(--gold); color:var(--gold)}
.btn-primary:hover{background:var(--gold); color:#20180a}
.btn-solid{background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#221806; border-color:var(--gold-deep)}
.btn-solid:hover{filter:brightness(1.06)}
.btn-quiet{border-color:var(--hair); color:var(--ink)}
.btn-quiet:hover{border-color:var(--muted)}
.btn-soon{border-color:var(--hair); color:var(--muted); cursor:default; pointer-events:none}

/* ---------- section scaffolding ---------- */
section{position:relative; padding:5.5rem 0}
.alt{background:var(--bg-2)}
.kicker{font-family:var(--display); text-transform:uppercase; letter-spacing:.28em; font-size:.9rem; font-weight:700; color:var(--rust); margin-bottom:1rem}
h2{font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4.4vw,2.8rem); line-height:1.08; color:var(--gold); margin-bottom:1rem; text-wrap:balance; max-width:28ch}
h2.on-paper{color:#1e1836}
h3{font-family:var(--display); font-weight:600; font-size:1.4rem; color:var(--gold); margin-bottom:.5rem; text-wrap:balance}
p{margin:0 0 1rem; text-wrap:pretty}
.lead{max-width:60ch; color:var(--ink-soft); text-wrap:pretty}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- page head (subpages) ---------- */
.page-head{padding:3rem 0 0}
.pagetitle{font-family:var(--display); font-weight:600; font-size:clamp(2.1rem,5vw,3.1rem); color:var(--gold); line-height:1.05; text-wrap:balance; margin-bottom:.5rem; max-width:26ch}
.backlink{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; color:var(--muted); text-decoration:none; margin-bottom:1.2rem}
.backlink:hover{color:var(--gold)}

/* ---------- header / nav ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(21,17,31,.82); backdrop-filter:blur(9px); border-bottom:1px solid var(--hair)}
.nav{display:flex; align-items:center; gap:14px; height:62px}
.brand{font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:.03em; color:var(--gold); text-decoration:none; white-space:nowrap}
.navlinks{display:flex; gap:16px; margin-left:auto; align-items:center}
.navlinks a{color:var(--ink); text-decoration:none; font-size:.82rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.navlinks a:hover{color:var(--gold)}
.nav .btn{padding:.5rem .9rem; font-size:.76rem; letter-spacing:.08em; white-space:nowrap}
details.menu{margin-left:auto; display:none; position:relative}
details.menu>summary{list-style:none; cursor:pointer; padding:.6rem .7rem; border:1px solid var(--hair); border-radius:8px; display:inline-flex; align-items:center; justify-content:center}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary::marker{content:""}
.bars, .bars::before, .bars::after{display:block; width:22px; height:2px; background:var(--gold); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.bars{position:relative}
.bars::before,.bars::after{content:""; position:absolute; left:0}
.bars::before{top:-7px}
.bars::after{top:7px}
details.menu[open]>summary .bars{background:transparent}
details.menu[open]>summary .bars::before{transform:translateY(7px) rotate(45deg)}
details.menu[open]>summary .bars::after{transform:translateY(-7px) rotate(-45deg)}
details.menu .sheet{position:absolute; right:0; top:52px; background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:8px; min-width:240px; box-shadow:0 18px 44px rgba(0,0,0,.5); display:flex; flex-direction:column}
details.menu .sheet a{padding:.65rem .7rem; text-decoration:none; color:var(--ink); font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; border-radius:6px}
details.menu .sheet a:hover{background:var(--bg-3); color:var(--gold)}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:auto; display:flex; align-items:center; padding:1.8rem 0 4rem; isolation:isolate}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3.2rem; align-items:center; width:100%}
.hero-text{display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:1.3rem}
.hero-cover{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5rem}
.hero-cover .btns{justify-content:center}
.hero-text .cd-grid{justify-content:flex-start}
.announce{background:transparent; text-align:center; padding:1rem 0 0}
.announce .wrap{font-family:var(--display); text-transform:uppercase; letter-spacing:.24em; font-size:.8rem; color:var(--muted)}
.hero::before{content:""; position:absolute; inset:0; z-index:-3; background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"),
    radial-gradient(130% 100% at 50% 40%, #2a2246 0%, #1a1530 46%, #120d1c 78%, #0c0813 100%)}
.candle{position:absolute; z-index:0; left:50%; top:44%; width:min(560px,116vw); height:min(560px,116vw); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,224,150,.40) 0%, rgba(238,203,114,.22) 22%, rgba(207,154,53,.11) 42%, rgba(207,154,53,0) 66%);
  filter:blur(26px); animation:flame 4.8s ease-in-out infinite; will-change:opacity,transform}
@keyframes flame{0%{opacity:.92;transform:translate(-50%,-50%) scale(1)}18%{opacity:1;transform:translate(-50.6%,-50.4%) scale(1.03)}34%{opacity:.86;transform:translate(-49.6%,-50%) scale(.985)}52%{opacity:.97;transform:translate(-50.2%,-50.6%) scale(1.02)}70%{opacity:.83;transform:translate(-50%,-49.6%) scale(.99)}86%{opacity:.95;transform:translate(-50.3%,-50.2%) scale(1.015)}100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(78% 62% at 50% 42%, transparent 52%, rgba(6,4,12,.62) 100%)}

/* handwritten book title (elegant copperplate placeholder, ink fade-in) */
.booktitle{font-family:"Pinyon Script", cursive; font-weight:400; color:var(--gold); line-height:1.02;
  font-size:clamp(2.8rem,7vw,4.6rem); text-align:left; text-shadow:0 3px 22px rgba(238,203,114,.25);
  animation:inkin 1.3s ease .15s both}
@keyframes inkin{from{opacity:0; filter:blur(7px)} to{opacity:1; filter:blur(0)}}

/* cover in the candlelight — the real cover drops in here */
.cover{position:relative; z-index:1; width:250px; aspect-ratio:2/3; border-radius:4px; margin:0 auto;
  background:linear-gradient(160deg,#2b2348,#191228); border:1px solid var(--hair);
  box-shadow:0 34px 60px rgba(0,0,0,.6), 0 0 60px rgba(238,203,114,.16), inset 0 0 0 1px rgba(238,203,114,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.4rem 1rem; overflow:hidden}
.cover::before{content:""; position:absolute; left:12px; top:8px; bottom:8px; width:3px; border-radius:2px; background:linear-gradient(180deg, rgba(238,203,114,.5), rgba(238,203,114,.1))}
.cover .badge{font-family:var(--display); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--gold-deep); position:absolute; top:12px; left:0; right:0}
.cover .ct{font-family:var(--display); font-size:1.35rem; line-height:1.1; color:var(--gold)}
.cover .cs{font-family:"Petit Formal Script",cursive; font-size:1.1rem; color:var(--ink-soft); margin-top:.6rem}

.tagline{font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,2.5vw,1.55rem); color:var(--ink); max-width:36ch}
.hero .lede{max-width:60ch; color:var(--ink-soft); font-size:1.12rem}

/* countdown */
.countdown{margin-top:.2rem}
.cd-label{font-family:var(--display); text-transform:uppercase; letter-spacing:.22em; font-size:.82rem; color:var(--rust); margin-bottom:.7rem}
.cd-grid{display:flex; gap:.7rem; justify-content:center}
.cd-unit{min-width:66px; padding:.6rem .35rem; border:1px solid var(--hair); border-radius:6px; background:rgba(33,27,51,.55)}
.cd-num{display:block; font-family:var(--display); font-size:1.9rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums}
.cd-word{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-top:.45rem}
.countdown.sm .cd-num{font-size:1.5rem}
.countdown.sm .cd-unit{min-width:54px}

.btns{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-start}

/* ---------- inversion letter ---------- */
.letter-wrap{max-width:700px; margin:0 auto; position:relative; z-index:1}
.letter{padding:3.2rem 3rem 2.6rem; transform:rotate(-.5deg)}
.letter .dropcap{float:left; font-family:"UnifrakturMaguntia",cursive; font-size:4rem; line-height:.72; padding:.3rem .45rem 0 0; color:var(--paper-rust)}
.letter p{font-size:1.12rem; color:var(--paper-ink)}
.letter .flip{color:var(--paper-rust); font-style:italic}

/* ---------- feature split ---------- */
.feature{display:grid; grid-template-columns:1.12fr .88fr; gap:2.8rem; align-items:start}
.feature.center-y{align-items:center}
.note-card{padding:2rem 1.9rem; transform:rotate(.6deg)}
.note-card h3{color:#1e1836}
.note-card p{color:var(--paper-ink); margin:0; font-size:1.02rem}
.byline{color:var(--muted); font-style:italic; font-size:.95rem}

/* ---------- card/note grids ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.4rem}
.note{padding:1.9rem 1.8rem}
.note:nth-child(1){transform:rotate(-1.2deg)} .note:nth-child(2){transform:rotate(.7deg)} .note:nth-child(3){transform:rotate(-.5deg)}
.note h3{color:#1e1836; font-size:1.1rem; line-height:1.2; text-wrap:balance}
.note p{color:var(--paper-ink); margin:0; font-size:1rem}

/* ---------- dark panels (functional sections) ---------- */
.panel{background:var(--panel); border:1px solid var(--hair); border-radius:12px; padding:2rem}
.signup{max-width:640px; margin:0 auto; text-align:center; box-shadow:0 18px 44px rgba(0,0,0,.4)}
.signup h2{color:var(--gold); max-width:none; margin-inline:auto}
.signup form{display:flex; gap:.7rem; max-width:470px; margin:1.2rem auto .5rem; flex-wrap:wrap}
.signup .fine{font-size:.9rem; color:var(--muted)}
input,select,textarea{font-family:inherit; font-size:1rem; color:var(--ink); background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:.7rem .85rem; width:100%}
input:focus,select,textarea:focus{outline:none; border-color:var(--gold-deep)}
input::placeholder,textarea::placeholder{color:#7c7188}
input[type=checkbox],input[type=radio]{accent-color:var(--gold-deep)}
.signup input{flex:1; min-width:210px}

/* offers */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.2rem}
.offers.four{grid-template-columns:repeat(4,1fr)}
.offer{display:flex; flex-direction:column}
.offer p{color:var(--ink-soft); font-size:.98rem; flex:1}
.offer .btn{margin-top:1rem; width:100%}

/* quotes */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.2rem}
.quote{padding:1.7rem 1.6rem}
.quote:nth-child(2){transform:rotate(.6deg)} .quote:nth-child(1){transform:rotate(-1deg)} .quote:nth-child(3){transform:rotate(.4deg)}
.quote p{font-family:var(--display); font-style:italic; font-size:1.18rem; color:var(--paper-ink)}
.quote .by{font-style:normal; font-family:var(--serif); font-weight:600; font-size:.92rem; color:var(--paper-muted); margin:0}
.ph-tag{display:inline-block; font-family:var(--display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-rust); border:1px solid rgba(140,61,28,.4); border-radius:999px; padding:.2rem .65rem; margin-bottom:.7rem}

/* forms */
.formcard{max-width:760px; margin:2rem auto 0}
.recform{max-width:560px; margin:1.2rem auto 0; text-align:left}
.recform.wide{max-width:100%}
.field-label{display:block; font-family:var(--display); text-transform:uppercase; font-size:.82rem; letter-spacing:.08em; font-weight:600; color:var(--muted); margin:0 0 .35rem}
.recgrid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.7rem}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem; margin-bottom:.7rem}
.recform textarea{resize:vertical}
.reccheck{display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem; color:var(--muted); margin:.8rem 0; line-height:1.45}
.reccheck input{width:auto; margin-top:.25rem; flex-shrink:0}
.recform .btn{width:100%; margin-top:.3rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.recmsg{min-height:1.2em; margin:.8rem 0 0; font-weight:600; color:var(--gold); text-align:center; font-size:.95rem}
.packs{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.3rem 0}
.pack{display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--hair); border-radius:9px; padding:.7rem .85rem; cursor:pointer; background:var(--panel-2)}
.pack:hover{border-color:var(--gold-deep)}
.pack input{width:auto; margin-top:.25rem; flex-shrink:0}
.pack:has(input:checked){border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.pk-name{font-weight:600; color:var(--ink)}
.pk-price{color:var(--gold); font-weight:700}
.pk-sub{display:block; font-size:.88rem; color:var(--muted); margin-top:.15rem}
.subtle{color:var(--muted); font-size:.98rem}
.center{text-align:center}
.mt0{margin-top:0}

/* review links */
.review-links{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; max-width:640px; margin:1rem 0 0}
.review-links .btn{width:100%}

/* events */
.event{display:flex; gap:1.2rem; padding:1.1rem 0; border-bottom:1px dashed var(--hair)}
.event .date{font-family:var(--display); font-weight:700; color:var(--rust); min-width:96px; letter-spacing:.05em}
.event strong{color:var(--gold); font-weight:600}

/* faq */
.faq{max-width:800px; margin-top:1.6rem}
.faq details{background:var(--panel); border:1px solid var(--hair); border-radius:10px; margin-bottom:.8rem; padding:.2rem 1.2rem}
.faq summary{cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--gold); padding:.9rem 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--rust); font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:.4rem 0 1rem; color:var(--ink-soft)}

/* reading sheet (introduction / long-form) */
.sheet{max-width:720px; margin:0 auto; padding:3.2rem 3.2rem 2.8rem}
.sheet p{font-size:1.12rem; margin-bottom:1.1em; color:var(--paper-ink)}
.sheet .sign{font-family:"Petit Formal Script",cursive; font-size:1.7rem; color:var(--paper-muted); margin-top:.4rem}
@media(max-width:640px){ .sheet{padding:2.2rem 1.6rem} }

/* about */
.headshot{width:100%; height:auto; max-width:320px; border-radius:10px; border:1px solid var(--hair); box-shadow:0 20px 44px rgba(0,0,0,.45); display:block; margin-inline:auto}
.speaker-photo{width:100%; height:auto; border-radius:10px; border:1px solid var(--hair); box-shadow:0 18px 40px rgba(0,0,0,.4); display:block}

/* footer */
footer.site{background:var(--bg-2); border-top:1px solid var(--hair); padding:3.5rem 0 2.8rem; color:var(--ink-soft)}
footer.site .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.4rem}
footer.site h4{font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:.86rem; color:var(--rust); margin-bottom:.8rem}
footer.site ul{list-style:none; line-height:2.1}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--gold)}
.footbrand{font-family:var(--display); font-size:1.4rem; color:var(--gold); margin-bottom:.4rem}
.fine-print{border-top:1px solid var(--hair); margin-top:2.2rem; padding-top:1.2rem; font-size:.9rem; color:var(--muted)}

/* responsive */
@media(max-width:860px){
  .navlinks{display:none} details.menu{display:block}
  .hero{padding:1.5rem 0 3.5rem}
  .hero-grid{grid-template-columns:1fr; gap:2.4rem}
  .hero-cover{order:2}
  .feature{grid-template-columns:1fr; gap:2rem}
  .grid3,.offers,.offers.four,.quotes{grid-template-columns:1fr}
  .note,.note-card,.quote,.letter{transform:none}
}
@media(max-width:640px){
  body{font-size:18px} section{padding:4rem 0}
  .letter{padding:2.3rem 1.6rem}
  .recgrid,.row3,.packs{grid-template-columns:1fr}
  .review-links{grid-template-columns:1fr 1fr}
  .cd-grid{gap:.45rem} .cd-unit{min-width:52px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  .candle{opacity:.92 !important}
}