: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:clip}
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(180deg, #ece0c2 0%, #e3d3a8 52%, #d6c191 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,.28),
    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(120% 70% at 50% 100%, rgba(120,86,44,.10), transparent 62%);
}

/* ---------- 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:3.25rem 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 ---------- */
/* Parchment bar so the dark/purple logo reads; the logo hangs below the bar so its drips run onto the page. */
header.site{position:sticky; top:0; z-index:60; background:linear-gradient(155deg,#efdcb2 0%,#e6cf9c 100%); border-bottom:1px solid var(--gold-deep); box-shadow:0 6px 18px rgba(0,0,0,.35)}
.nav{display:flex; align-items:center; gap:14px; height:80px}
.brand{display:flex; align-items:center; text-decoration:none; align-self:center}
.brand-logo{height:58px; width:auto; display:block; position:relative; top:0; z-index:3; filter:drop-shadow(0 4px 7px rgba(0,0,0,.28))}
.navlinks{display:flex; gap:16px; margin-left:auto; align-items:center}
.navlinks a{color:var(--paper-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(--rust-deep)}
.nav .btn{padding:.5rem .9rem; font-size:.76rem; letter-spacing:.08em; white-space:nowrap}
.nav .btn-primary{border-color:var(--gold-deep); color:#3a2c10}
.nav .btn-primary:hover{background:var(--gold-deep); color:#1a1206}
details.menu{margin-left:auto; display:none; position:relative}
details.menu>summary{list-style:none; cursor:pointer; padding:.6rem .7rem; border:1px solid var(--gold-deep); 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(--paper-ink); 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; max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
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{flex-direction:column; align-items:stretch; width:min(320px,100%); margin-inline:auto}
.hero-cover .btns .btn{width:100%}
.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; pointer-events:none; 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.2s ease-in-out infinite; will-change:opacity,transform}
@keyframes flame{
  0%{opacity:.9; transform:translate(-50%,-50%) scale(1)}
  10%{opacity:1; transform:translate(-50.5%,-50.6%) scale(1.05)}
  20%{opacity:.76; transform:translate(-49.6%,-50%) scale(.965)}
  32%{opacity:.96; transform:translate(-50.3%,-50.5%) scale(1.035)}
  44%{opacity:.71; transform:translate(-50%,-49.5%) scale(.95)}
  56%{opacity:1; transform:translate(-50.5%,-50.7%) scale(1.055)}
  68%{opacity:.8; transform:translate(-49.7%,-50.2%) scale(.985)}
  80%{opacity:.94; transform:translate(-50.2%,-50.4%) scale(1.02)}
  90%{opacity:.74; transform:translate(-50%,-49.7%) scale(.96)}
  100%{opacity:.9; 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}
/* real cover art */
.cover-img{position:relative; z-index:1; display:block; margin:0 auto; width:min(250px,80%); height:auto; border-radius:6px;
  box-shadow:0 34px 60px rgba(0,0,0,.6), 0 0 62px rgba(238,203,114,.18), inset 0 0 0 1px rgba(238,203,114,.12)}

.tagline{font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.8vw,3rem); line-height:1.08; letter-spacing:.005em; color:var(--gold); max-width:20ch; text-wrap:balance}
.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}

/* inversion note — small quiet aside, no parchment card, sits tight above The Book */
.inversion-note{padding:1.9rem 0 1.4rem}
.inversion-note p{max-width:62ch; margin:0 auto; text-align:center; font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.6; color:var(--ink-soft)}
.inversion-note .flip{color:var(--rust); font-style:normal}

/* ---------- 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)}
/* The embedded beehiiv subscribe iframe reserves large empty padding above/below its single row; pull it closed. */
.signup iframe{margin-top:-48px; margin-bottom:-46px}
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 p.offer-note{flex:0 0 auto; color:var(--gold); font-weight:600; font-size:.94rem; margin-bottom:.4rem}
.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 (preface / 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:"Sacramento",cursive; font-size:2.6rem; color:#3a2c46; margin-top:.7rem; line-height:1}
@media(max-width:640px){ .sheet{padding:2.2rem 1.6rem} }

/* pre-order promo */
#preorder .feature, #preorder .feature > div{min-width:0}
.preorder-art{width:100%; max-width:480px; height:auto; aspect-ratio:1400/933; border-radius:10px; border:1px solid var(--hair); box-shadow:0 22px 46px rgba(0,0,0,.5); display:block; margin-inline:auto}
#preorder .btn-solid{margin-top:.6rem}

/* about */
.headshot{width:100%; height:auto; max-width:480px; 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}
  .nav{height:72px}
  .brand-logo{height:52px; top:0}
  .hero{padding:1rem 0 3.5rem}
  .hero-grid{grid-template-columns:1fr; gap:2.4rem}
  /* cover + CTA buttons lead on mobile, right under the nav */
  .hero-cover{order:-1}
  .hero-text{order:0}
  .announce{padding:.7rem 0 0}
  .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){
  .nav{height:64px}
  .brand-logo{height:46px; top:0}
  body{font-size:18px} section{padding:2.5rem 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}
  /* keep the lead cover from eating the whole first screen */
  .hero-cover{gap:1.1rem}
  .hero-cover .cover-img{width:min(210px,58%)}
  .hero-cover .btns{gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  .candle{opacity:.92 !important}
}