/* ============================================================
   LOVE CONQUERS ALL — Olana Carbaugh · "Tidewater" edition
   A distinct editorial design — stacked rounded panels,
   ripple motif, handwritten warmth.
   Fonts: DM Serif Display · Mulish · Sacramento
   ============================================================ */
:root{
  --gold:#C2A165; --gold-deep:#A5854C; --gold-lt:#E4D2A8; --glow:#FFE9B5;
  --ink:#3B2E1C; --ink-soft:#7A6A52;
  --cream:#FBF6EC; --cream-2:#F3E7D2; --paper:#FFFDF9;
  --espresso:#22180C; --espresso-2:#33240F;
  --line:#EADBC0;
  --shadow:rgba(74,56,30,.18);
  --sage-deep:#A5854C; /* success msg color for shared form JS */
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Mulish',sans-serif;color:var(--ink);background:var(--espresso);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
.dm,h1,h2,h3{font-family:'DM Serif Display',serif;font-weight:400;line-height:1.05}
.hand{font-family:'Sacramento',cursive;font-weight:400}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic}
.wrap{width:90%;max-width:var(--maxw);margin:0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Mulish',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:.01em;padding:1em 2.1em;border-radius:999px;border:none;cursor:pointer;background:linear-gradient(135deg,#CFAB6A,var(--gold-deep));color:#fff;box-shadow:0 12px 28px -10px rgba(165,133,76,.6);transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(165,133,76,.7)}
.btn-line{background:transparent;border:1.5px solid currentColor;color:var(--ink);box-shadow:none}
.btn-line:hover{background:rgba(194,161,101,.1)}
.btn-ivory{background:var(--paper);color:var(--ink)}
.btn.full{width:100%}
.dark .btn-line{color:#F0E6D2;border-color:rgba(240,230,210,.45)}

/* ---------- floating pill nav ---------- */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;width:min(1180px,94%);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .6rem .55rem 1.5rem;border-radius:999px;background:rgba(255,253,249,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(234,219,192,.8);box-shadow:0 18px 44px -26px var(--shadow);transition:top .4s,box-shadow .4s}
.nav.scrolled{top:10px;box-shadow:0 22px 50px -24px var(--shadow)}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--ink)}
.brand svg{width:28px;height:28px}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a.lk{font-size:.86rem;font-weight:700;color:var(--ink);opacity:.78;transition:.25s;position:relative}
.nav-links a.lk:hover{opacity:1;color:var(--gold-deep)}
.nav-cta{padding:.7em 1.4em;font-size:.82rem}
.has-sub{position:relative}
.submenu{position:absolute;top:130%;left:50%;transform:translateX(-50%) translateY(6px);background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:.5rem;min-width:185px;box-shadow:0 26px 54px -22px var(--shadow);opacity:0;visibility:hidden;transition:.25s;z-index:80}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:.55rem .9rem;border-radius:11px;font-size:.85rem;font-weight:700;color:var(--ink)}
.submenu a:hover{background:var(--cream-2);color:var(--gold-deep)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--ink);padding:.2rem .5rem}

/* ---------- stacked rounded panels ---------- */
.panel{position:relative;border-radius:56px 56px 0 0;margin-top:-48px;padding:7rem 0;z-index:1}
.panel.cream{background:var(--cream)}
.panel.paper{background:var(--paper)}
.panel.dark{background:radial-gradient(900px 520px at 80% 0,rgba(201,162,78,.16),transparent 60%),linear-gradient(170deg,var(--espresso),var(--espresso-2));color:#EFE3CC}
.panel.tint{background:radial-gradient(800px 460px at 50% 0,#FBEED6,transparent 70%),var(--cream)}
.panel:first-child{margin-top:0;border-radius:0}
.panel + .panel{box-shadow:0 -34px 50px -40px rgba(60,47,29,.4)}
.panel.dark h2,.panel.dark h3{color:#fff}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.panel.dark .eyebrow{color:var(--gold-lt)}
.lede{color:var(--ink-soft);font-size:1.06rem}
.panel.dark .lede{color:#CFC0A4}

/* section heading */
.shead{max-width:680px;margin:0 auto 3rem;text-align:center}
.shead h2{font-size:clamp(2.4rem,5vw,3.6rem);margin:.7rem 0 0}
.shead .hand{color:var(--gold-deep);font-size:1.5em;display:inline-block;line-height:.7}
.panel.dark .shead .hand{color:var(--gold-lt)}
.shead p{margin-top:1rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding:9.5rem 0 6rem;background:radial-gradient(1100px 700px at 78% 24%,#FFF6E2 0,#FBF1DF 42%,#F2E4C9 100%)}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.06fr .94fr;gap:2.5rem;align-items:center}
.hero h1{font-size:clamp(3.2rem,7vw,5.6rem);color:var(--ink);letter-spacing:-.01em}
.hero h1 .hand{display:block;color:var(--gold-deep);font-size:1.16em;line-height:.62;margin:.05em 0 .04em -.04em}
.hero .sub{font-size:1.16rem;color:var(--ink-soft);max-width:34ch;margin:1.4rem 0 0}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}
.hero-meta{margin-top:1.7rem;font-size:.82rem;color:var(--ink-soft);letter-spacing:.02em}

.hero-stage{position:relative;display:flex;justify-content:center;align-items:center}
.ripples{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.ripples i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(194,161,101,.32);transform:translate(-50%,-50%)}
.ripples i:nth-child(1){width:30%;height:30%}
.ripples i:nth-child(2){width:52%;height:52%;border-color:rgba(194,161,101,.24)}
.ripples i:nth-child(3){width:74%;height:74%;border-color:rgba(194,161,101,.18)}
.ripples i:nth-child(4){width:100%;height:100%;border-color:rgba(194,161,101,.1)}
.ripples b{position:absolute;left:50%;top:50%;width:30%;height:30%;border-radius:50%;border:1.5px solid var(--gold);transform:translate(-50%,-50%);animation:ripple 5.5s ease-out infinite}
.ripples b:nth-of-type(2){animation-delay:2.75s}
@keyframes ripple{0%{width:24%;height:24%;opacity:.7}100%{width:104%;height:104%;opacity:0}}
.hero-book{position:relative;z-index:2;width:min(330px,80%);filter:drop-shadow(0 40px 50px rgba(74,56,30,.4));animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.sticker{position:absolute;z-index:4;top:5%;right:1%;width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#EBD7A6 0,#C9A86A 52%,#9C7838 100%);
  border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.02rem;
  text-align:center;transform:rotate(-9deg);
  box-shadow:0 20px 40px -14px rgba(40,26,8,.65), inset 0 0 0 1.5px rgba(255,247,224,.55), inset 0 0 0 6px rgba(255,247,224,.16);
  animation:bob 7s ease-in-out .5s infinite}
.sticker .ss{color:#FFF6DC;font-size:.56rem;letter-spacing:1.5px;line-height:1;text-shadow:0 1px 1px rgba(60,40,15,.4)}
.sticker b{font-family:'DM Serif Display',serif;font-size:1.7rem;color:#fff;line-height:1;display:block;margin:0;text-shadow:0 2px 3px rgba(60,40,15,.45)}
.sticker span{font-size:.48rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#3A2A10;line-height:1}
.hero-note{position:absolute;z-index:4;bottom:8%;left:-2%;font-family:'Sacramento',cursive;font-size:1.6rem;color:var(--gold-deep);transform:rotate(-6deg)}
.hero-note::after{content:"";display:block;width:60px;height:18px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);border-radius:0 0 40px 0;margin-top:-6px}

/* ============================================================
   LETTER from Olana
   ============================================================ */
.letter{max-width:780px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:clamp(2.4rem,5vw,4rem);box-shadow:0 40px 80px -44px var(--shadow);position:relative}
.letter::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:linear-gradient(90deg,transparent,rgba(228,210,168,.7),transparent);border-radius:50%}
.letter .to{font-family:'Sacramento',cursive;font-size:2.4rem;color:var(--gold-deep);margin-bottom:.4rem}
.letter p{font-size:1.16rem;color:#4a3a26;margin-bottom:1.1rem}
.letter p.big{font-family:'DM Serif Display',serif;font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);line-height:1.3}
.letter .sign{font-family:'Sacramento',cursive;font-size:2.6rem;color:var(--gold-deep);margin-top:1.4rem;line-height:1}
.letter .sign small{display:block;font-family:'Mulish';font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3rem}

/* ============================================================
   FROM -> TO  transformation
   ============================================================ */
.shift{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1rem}
.shift .pair{background:rgba(255,255,255,.05);border:1px solid rgba(228,210,168,.22);border-radius:22px;padding:2rem 1.6rem;text-align:center}
.shift .from{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#B9A985;text-decoration:line-through;text-decoration-color:rgba(194,161,101,.5)}
.shift .arrow{font-family:'Sacramento',cursive;font-size:2.2rem;color:var(--gold-lt);line-height:.9;margin:.3rem 0}
.shift .to2{font-family:'DM Serif Display',serif;font-size:1.7rem;color:#fff}

/* ============================================================
   BENTO grid (what's inside)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:1.1rem;grid-auto-flow:row dense}
.cell{border-radius:24px;padding:1.7rem;background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.cell:hover{transform:translateY(-5px);box-shadow:0 24px 48px -28px var(--shadow)}
.cell h3{font-size:1.4rem;margin-bottom:.3rem}
.cell p{font-size:.92rem;color:var(--ink-soft)}
.cell .ic{font-size:1.7rem;margin-bottom:.5rem}
.cell.wide{grid-column:span 2}.cell.tall{grid-row:span 2}.cell.big{grid-column:span 2;grid-row:span 2}
.cell.gold{background:linear-gradient(150deg,#CFAB6A,var(--gold-deep));color:#fff;border:none}
.cell.gold h3,.cell.gold .num{color:#fff}
.cell.gold .num{font-family:'DM Serif Display',serif;font-size:3.4rem;line-height:1}
.cell.gold p{color:rgba(255,255,255,.85)}
.cell.photo{padding:0;border:none}
.cell.photo img{width:100%;height:100%;object-fit:cover}
.cell.quote{background:var(--espresso);color:#fff;border:none;display:flex;flex-direction:column;justify-content:center}
.cell.quote p{font-family:'DM Serif Display',serif;font-size:1.3rem;color:#fff;line-height:1.3}
.cell.quote span{font-size:.78rem;color:var(--gold-lt);margin-top:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}

/* ============================================================
   CHAPTER FILMSTRIP
   ============================================================ */
.strip-wrap{position:relative;margin:0 -5vw}
.strip{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 5vw 2rem;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.chap{scroll-snap-align:center;flex:0 0 290px;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:2rem 1.8rem;position:relative;transition:transform .35s,box-shadow .35s}
.chap:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px var(--shadow)}
.chap .no{font-family:'DM Serif Display',serif;font-size:3.4rem;color:var(--gold-lt);line-height:.8}
.chap h3{font-size:1.45rem;margin:.6rem 0 .5rem;color:var(--ink)}
.chap p{font-size:.92rem;color:var(--ink-soft)}
.chap .tab{position:absolute;top:1.6rem;right:0;background:var(--gold-deep);color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:8px 0 0 8px}
.strip-hint{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:.4rem}
.strip-hint .hand{font-size:1.5rem;color:var(--gold-deep);vertical-align:-.3em}

/* ============================================================
   EXCERPT — quote over photo
   ============================================================ */
.cinema{position:relative;border-radius:32px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end;box-shadow:0 40px 80px -44px var(--shadow)}
.cinema img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cinema::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(34,24,12,.82),rgba(34,24,12,.45) 55%,rgba(34,24,12,.2))}
.cinema .q{position:relative;z-index:2;padding:clamp(2.2rem,5vw,4rem);max-width:660px;color:#fff}
.cinema .label{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt)}
.cinema blockquote{font-family:'DM Serif Display',serif;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.28;margin:.8rem 0 1rem}
.cinema .src{font-size:.9rem;color:rgba(255,255,255,.8)}
.cinema .src em{color:var(--gold-lt)}

/* ============================================================
   AUTHOR — magazine spread
   ============================================================ */
.spread{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -44px var(--shadow)}
.spread .pic{position:relative;min-height:520px}
.spread .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spread .pic .vname{position:absolute;left:-.1em;bottom:.1em;font-family:'DM Serif Display',serif;font-size:5.5rem;color:rgba(255,255,255,.16);line-height:.8;writing-mode:vertical-rl;transform:rotate(180deg);padding:.3em}
.spread .txt{background:var(--paper);padding:clamp(2.2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center}
.spread .txt h2{font-size:clamp(2.2rem,4vw,3rem);margin:.5rem 0 1rem}
.spread .txt p{color:var(--ink-soft);margin-bottom:1rem}
.spread .txt p b{color:var(--ink)}
.spread .sig{font-family:'Sacramento',cursive;font-size:2.6rem;color:var(--gold-deep);margin-top:.4rem;line-height:1}
.spread .facts{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.spread .facts .n{font-family:'DM Serif Display',serif;font-size:1.9rem;color:var(--gold-deep);line-height:1}
.spread .facts .l{font-size:.74rem;color:var(--ink-soft)}

/* ============================================================
   PRAISE spotlight + review ribbon
   ============================================================ */
.spot{max-width:820px;margin:0 auto;text-align:center;position:relative;min-height:230px}
.spot .quote{font-family:'DM Serif Display',serif;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.32;color:#fff;opacity:0;position:absolute;inset:0;transition:opacity .6s;pointer-events:none}
.spot .quote.on{opacity:1;position:relative;pointer-events:auto}
.spot .quote .who{display:block;font-family:'Mulish';font-size:.95rem;font-weight:800;color:var(--gold-lt);margin-top:1.2rem;letter-spacing:.02em}
.spot .quote .who small{display:block;font-weight:600;font-size:.8rem;color:#B6A98C;text-transform:none;letter-spacing:0}
.spot-dots{display:flex;gap:.6rem;justify-content:center;margin-top:1.8rem}
.spot-dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:rgba(228,210,168,.3);transition:.3s}
.spot-dots button.on{background:var(--gold);transform:scale(1.3)}
.ribbon-wrap{overflow:hidden;margin-top:3rem;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon{display:flex;gap:1rem;width:max-content;animation:slide 40s linear infinite}
.rchip{display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.06);border:1px solid rgba(228,210,168,.2);border-radius:999px;padding:.7rem 1.2rem;white-space:nowrap}
.rchip .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lt),var(--gold-deep));color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:0 0 auto}
.rchip span{font-size:.86rem;color:#E7DBC2}.rchip b{color:#fff}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   BUY band
   ============================================================ */
.buy-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.buy-band .bk{position:relative;text-align:center}
.buy-band .bk img{width:min(240px,70%);margin:0 auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:bob 6s ease-in-out infinite}
.buy-band h2{font-size:clamp(2.4rem,5vw,3.6rem);color:#fff}
.buy-band h2 .hand{color:var(--gold-lt);font-size:1.3em}
.buy-band p{color:#CFC0A4;margin:1rem 0 1.6rem;max-width:46ch}
.formats{display:flex;gap:1rem;flex-wrap:wrap}
.fmt{flex:1;min-width:180px;background:rgba(255,255,255,.05);border:1px solid rgba(228,210,168,.25);border-radius:20px;padding:1.4rem 1.5rem}
.fmt.feat{border-color:var(--gold)}
.fmt .ft{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}
.fmt .pr{font-family:'DM Serif Display',serif;font-size:2rem;color:#fff;margin:.1rem 0 .8rem}
.fmt .btn{width:100%}

/* ============================================================
   NEWSLETTER + FAQ + FOOTER
   ============================================================ */
.signup{max-width:680px;margin:0 auto;text-align:center}
.signup h2{font-size:clamp(2rem,4vw,2.8rem)}
.signup p{margin:.8rem 0 1.6rem}
.mc-form{display:flex;gap:.7rem;max-width:520px;margin:0 auto;flex-wrap:wrap}
.mc-form input{flex:1;min-width:180px;padding:1em 1.4em;border-radius:999px;border:1px solid var(--line);font-family:'Mulish';font-size:1rem;background:var(--paper);color:var(--ink)}
.mc-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(194,161,101,.15)}
.mc-form .btn{flex:0 0 auto}
.mc-form .full{flex:1 1 100%}
.note{font-size:.78rem;color:var(--ink-soft);margin-top:1rem}
.hidden-pot{position:absolute;left:-5000px}

/* ---- newsletter signup card (two-column) ---- */
.su-card{display:grid;grid-template-columns:.8fr 1.2fr;max-width:1000px;margin:0 auto;
  background:var(--paper);border:1px solid var(--line);border-radius:34px;overflow:hidden;
  box-shadow:0 56px 110px -54px var(--shadow)}
.su-visual{position:relative;display:grid;place-items:center;padding:3rem 2rem;overflow:hidden;
  background:radial-gradient(560px 380px at 50% 6%,#FBEED6,transparent 70%),linear-gradient(158deg,#CFAB6A,var(--gold-deep))}
.su-rings{position:absolute;left:50%;top:54%;width:380px;height:380px;transform:translate(-50%,-50%);pointer-events:none}
.su-rings i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.22);transform:translate(-50%,-50%)}
.su-rings i:nth-child(1){width:46%;height:46%}
.su-rings i:nth-child(2){width:72%;height:72%;border-color:rgba(255,255,255,.16)}
.su-rings i:nth-child(3){width:100%;height:100%;border-color:rgba(255,255,255,.1)}
.su-book{position:relative;z-index:2;width:min(200px,62%);filter:drop-shadow(0 30px 42px rgba(74,56,30,.45));animation:bob 6s ease-in-out infinite}
.su-badge{position:absolute;z-index:3;top:1.4rem;right:1.4rem;background:var(--paper);border-radius:16px;
  padding:.55rem .9rem;text-align:center;box-shadow:0 16px 32px -14px rgba(0,0,0,.4);transform:rotate(6deg)}
.su-badge b{display:block;font-family:'DM Serif Display',serif;font-size:1.05rem;color:var(--ink);line-height:1}
.su-badge small{font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.su-form-side{padding:clamp(2.2rem,4vw,3.2rem);text-align:left}
.su-form-side h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:.5rem 0 .7rem}
.su-form-side h2 .hand{color:var(--gold-deep);font-size:1.25em}
.su-lede{color:var(--ink-soft);margin-bottom:1.2rem}
.su-perks{list-style:none;margin:0 0 1.6rem;display:grid;gap:.7rem}
.su-perks li{position:relative;padding-left:2rem;font-size:.94rem;color:var(--ink-soft);line-height:1.45}
.su-perks li::before{content:"";position:absolute;left:0;top:.05em;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lt),var(--gold-deep))}
.su-perks li::after{content:"";position:absolute;left:6px;top:.28em;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.su-perks b{color:var(--ink);font-weight:800}
.su-form-side .mc-form{max-width:none;margin:0;justify-content:flex-start}
.su-form-side .note{text-align:left}
@media(max-width:760px){
  .su-card{grid-template-columns:1fr}
  .su-visual{padding:2.4rem 1.5rem 1.8rem}
  .su-book{width:150px}
}

.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.4rem .4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--ink)}
.faq-q .pm{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:var(--gold-deep);font-size:1.4rem;transition:transform .35s}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s}
.faq-a p{padding:0 .4rem 1.4rem;color:var(--ink-soft)}

footer{background:var(--espresso);color:#B6A98C;text-align:center;padding:4rem 0 2.4rem;border-radius:56px 56px 0 0;margin-top:-48px;position:relative}
footer .fbrand{display:inline-flex;align-items:center;gap:.5rem;font-family:'DM Serif Display',serif;font-size:1.7rem;color:#fff;margin-bottom:.3rem}
footer .fbrand svg{width:34px;height:34px}
footer .fsub{font-family:'Sacramento',cursive;color:var(--gold-lt);font-size:1.4rem;margin-bottom:1.4rem}
.flinks{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.flinks a{font-size:.86rem;transition:.25s}.flinks a:hover{color:#fff}
.fcopy{font-size:.76rem;color:#8C7E62;border-top:1px solid rgba(228,210,168,.14);padding-top:1.5rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero-book,.sticker,.ripples b,.buy-band .bk img,.ribbon{animation:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:120%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:1rem 1.2rem;box-shadow:0 30px 60px -24px var(--shadow)}
  .nav-links.open a.lk{padding:.7rem .4rem}
  .nav-links.open .has-sub .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:.1rem 0 .3rem 1rem}
  .menu-btn{display:block}
  .hero-grid,.buy-band,.spread{grid-template-columns:1fr;gap:2.4rem}
  .hero h1{text-align:center}.hero .sub,.hero-cta{margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
  .hero-meta{text-align:center}
  .hero-stage{order:-1}
  .shift{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .cell.big{grid-column:span 2;grid-row:span 1}
  .spread .pic{min-height:380px}
  .spread .pic .vname{font-size:3.5rem}
}
@media(max-width:560px){
  .panel{padding:5rem 0;border-radius:40px 40px 0 0;margin-top:-36px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .cell{min-height:130px}.cell.big,.cell.wide,.cell.tall{grid-column:auto;grid-row:auto}
  .cell.photo{min-height:200px}
  .mc-form{flex-direction:column}.mc-form .btn{width:100%}
  .formats{flex-direction:column}
}

/* ============================================================
   FULL-HEIGHT SIMPLE SECTIONS — normal page flow (no sticky-stacking).
   Each section fills the viewport and centers its content; tall sections
   (e.g. the book-page excerpt) just grow past one screen — no clipping,
   because nothing pins anymore.
   ============================================================ */
.hero,.panel{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
@supports not (height:100svh){ .hero,.panel{min-height:100vh} }
.panel{padding-top:6rem;padding-bottom:6rem}
.hero{padding-top:8rem}
@media(max-width:760px){
  .hero,.panel{min-height:auto;padding-top:5rem;padding-bottom:5rem}
}

/* ===== bento rebalance: short wide gold box + big tall photo ===== */
.bento{grid-auto-rows:186px}
.cell.goldrow{display:flex;align-items:center;gap:1.3rem}
.cell.goldrow .num{font-size:3rem;flex:0 0 auto}
.cell.goldrow h3{font-size:1.5rem;margin-bottom:.2rem}
.cell.goldrow p{font-size:.92rem}
.cell.photo img{object-position:50% 22%}
@media(max-width:560px){ .cell.big.photo{min-height:300px} }

/* ===== chapters: 4-column grid (lays 11 cards as 4-4-3), no drag/scroll ===== */
.strip-wrap{position:relative;margin:0 auto;width:94%;max-width:1180px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;overflow:visible;scroll-snap-type:none;padding:0}
.chap{flex:none;scroll-snap-align:none}
.strip-hint{display:none}
@media(max-width:900px){ .strip{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .strip{grid-template-columns:1fr} }
/* fix: chapter card titles are dark on the light cards (dark panel was forcing them white) */
.panel.dark .chap h3{color:var(--ink)}

/* ============================================================
   EXCERPT — book-page manuscript (replaces photo overlay)
   ============================================================ */
.manuscript{max-width:760px;margin:0 auto;background:linear-gradient(#fff,#FFFDF7);border:1px solid var(--line);border-radius:26px;padding:clamp(2.4rem,5vw,3.8rem);box-shadow:0 44px 90px -46px var(--shadow);position:relative;text-align:center}
.ms-ornament{display:block;color:var(--gold);font-size:1.6rem;line-height:.6;margin-bottom:.6rem}
.ms-ch{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:800}
.ms-epi{font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--ink);line-height:1.3;margin:.7rem 0 1.6rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.ms-epi span{font-family:'Mulish',sans-serif;font-style:normal;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:inline-block;margin-top:.7rem}
.manuscript p{text-align:left;font-size:1.1rem;color:#4a3a26;line-height:1.75;margin-bottom:1.1rem}
.ms-drop::first-letter{font-family:'DM Serif Display',serif;font-size:3.6rem;float:left;line-height:.74;padding:.06em .14em 0 0;color:var(--gold-deep)}
.ms-pull{text-align:center !important;font-family:'DM Serif Display',serif;font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--gold-deep);line-height:1.35;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.3rem 0;margin:1.7rem 0}
.manuscript .btn{margin-top:.4rem}

/* The excerpt is a tall book-page — taller than one screen. With no sticky pinning
   it simply grows past the viewport in normal flow (nothing clips it). */
.panel#excerpt{padding-top:7rem;padding-bottom:7rem}
.panel#excerpt .shead{margin-bottom:2rem}

/* ============================================================
   DARK ANIMATED HERO — espresso night sky, drifting glow, gold embers
   ============================================================ */
.hero{background:linear-gradient(165deg,#1b1206 0%,#22180c 46%,#2d200f 100%);color:#F3E7CE}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(640px 440px at 80% 20%,rgba(201,162,78,.30),transparent 60%),
             radial-gradient(560px 420px at 12% 86%,rgba(120,86,40,.32),transparent 65%)}
.hero h1{color:#FBF3E2}
.hero h1 .hand{color:var(--gold-lt)}
.hero .eyebrow{color:var(--gold-lt)}
.hero .sub{color:#D9C9AC}
.hero-meta{color:#A9967A}
.hero .btn-line{color:#F0E6D2;border-color:rgba(240,230,210,.42)}
.hero .btn-line:hover{background:rgba(228,210,168,.12)}
.hero .ripples i{border-color:rgba(228,210,168,.16)!important}
.hero .ripples b{border-color:var(--gold-lt)}
.hero-note{color:var(--gold-lt)}
.hero-note::after{border-bottom-color:var(--gold-lt);border-right-color:var(--gold-lt)}

/* animated background layer */
.hero-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-fx .orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;mix-blend-mode:screen}
.hero-fx .o1{width:440px;height:440px;left:-6%;top:6%;background:radial-gradient(circle,#C2A165,transparent 70%);animation:drift1 19s ease-in-out infinite}
.hero-fx .o2{width:380px;height:380px;right:-5%;top:28%;background:radial-gradient(circle,#E4D2A8,transparent 70%);animation:drift2 23s ease-in-out infinite}
.hero-fx .o3{width:320px;height:320px;left:38%;bottom:-10%;background:radial-gradient(circle,#9a7536,transparent 70%);animation:drift3 27s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,34px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-54px,42px) scale(1.06)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-44px) scale(1.1)}}
.hero-fx .mote{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#FFE9B5 0,rgba(255,233,181,0) 70%);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.5);opacity:0}12%{opacity:.95}88%{opacity:.6}100%{transform:translateY(-94vh) scale(1.15);opacity:0}}
.hero-grid{z-index:3}
@media(prefers-reduced-motion:reduce){
  .hero-fx .orb{animation:none}
  .hero-fx .mote{display:none}
}

/* ============================================================
   IS THIS FOR YOU — accented two-column statement list (no icons)
   ============================================================ */
.who-intro{text-align:center;font-family:'DM Serif Display',serif;font-size:clamp(1.2rem,2.4vw,1.55rem);
  color:var(--ink-soft);max-width:600px;margin:0 auto 2.4rem}
.who-intro b{color:var(--gold-deep);font-style:normal}
.who-list{display:grid;grid-template-columns:1fr 1fr;column-gap:3.6rem;margin-top:.4rem;
  border-top:1px solid var(--line)}
.wrow{position:relative;padding:1.6rem 0 1.6rem 1.7rem;border-bottom:1px solid var(--line);transition:padding-left .35s}
.wrow::before{content:"";position:absolute;left:0;top:2rem;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(194,161,101,.14);transition:width .35s,border-radius .35s,background .35s}
.wrow:hover{padding-left:2.2rem}
.wrow:hover::before{width:24px;border-radius:7px;background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.wrow h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:1.4rem;color:var(--ink);margin:0 0 .2rem;line-height:1.15}
.wrow p{font-size:.95rem;color:var(--ink-soft);line-height:1.58;max-width:42ch}
.panel.dark .who-list,.panel.dark .wrow{border-color:rgba(228,210,168,.2)}
.panel.dark .wrow h3{color:#fff}.panel.dark .wrow p{color:#CFC0A4}

/* ============================================================
   WHAT YOU'LL DISCOVER — editorial numbered journey matrix
   (no icons — big ghosted serif numerals on a hairline grid)
   ============================================================ */
.path-rail{display:flex;align-items:center;gap:1.2rem;max-width:620px;margin:0 auto 2.2rem;
  font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt)}
.path-rail i{flex:1;height:1px;position:relative;background:linear-gradient(90deg,rgba(228,210,168,.12),var(--gold),rgba(228,210,168,.12))}
.path-rail i::before,.path-rail i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--gold-lt);transform:translateY(-50%)}
.path-rail i::before{left:0}.path-rail i::after{right:0}

.journey{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.5rem;
  border-top:1px solid rgba(228,210,168,.18)}
.jstep{position:relative;padding:2.5rem 1.9rem 2.7rem;overflow:hidden;
  border-bottom:1px solid rgba(228,210,168,.18);border-right:1px solid rgba(228,210,168,.18);
  transition:background .4s}
.jstep:nth-child(3n){border-right:none}
.jstep::before{content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:linear-gradient(var(--gold-lt),var(--gold-deep));transition:height .45s ease}
.jstep:hover{background:rgba(255,255,255,.035)}
.jstep:hover::before{height:100%}
.jstep .jn{position:absolute;top:.4rem;right:1.1rem;font-family:'DM Serif Display',serif;
  font-size:5.2rem;line-height:1;color:rgba(228,210,168,.13);pointer-events:none;transition:color .4s}
.jstep:hover .jn{color:rgba(228,210,168,.22)}
.jstep h3{position:relative;font-size:1.32rem;color:#fff;margin:0 0 .55rem;padding-right:2.6rem}
.jstep .jrule{display:block;width:32px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));margin:0 0 .85rem}
.jstep p{position:relative;font-size:.92rem;color:#CFC0A4;line-height:1.62;max-width:32ch}

/* ============================================================
   VIDEO INTRO — poster + play, click to load mp4
   ============================================================ */
.filmbox{position:relative;max-width:920px;margin:0 auto;border-radius:30px;overflow:hidden;aspect-ratio:16/9;background:#120c05;box-shadow:0 50px 100px -50px rgba(0,0,0,.7);cursor:pointer}
.filmbox img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .4s}
.filmbox:hover img.poster{transform:scale(1.04);filter:brightness(.9)}
.filmbox .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:rgba(255,253,249,.92);display:grid;place-items:center;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:transform .3s,background .3s}
.filmbox:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.filmbox .play::after{content:"";margin-left:5px;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--gold-deep)}
.filmbox .vlabel{position:absolute;left:0;bottom:0;z-index:2;padding:1.4rem 1.6rem;color:#fff;font-family:'DM Serif Display',serif;font-size:1.25rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.filmbox::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,12,5,.55),transparent 45%);pointer-events:none}
.filmbox.playing::after,.filmbox.playing .play,.filmbox.playing .vlabel{display:none}
.filmbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* ============================================================
   ENDORSED BY LEADERS — quote cards
   ============================================================ */
.endorse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1rem}
.endo{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:2.1rem 1.9rem;display:flex;flex-direction:column;box-shadow:0 30px 60px -40px var(--shadow);position:relative}
.endo .mk{font-family:'DM Serif Display',serif;font-size:3.4rem;color:var(--gold-lt);line-height:.4;height:1.1rem}
.endo blockquote{font-size:1rem;color:#4a3a26;line-height:1.65;margin:.6rem 0 1.4rem;flex:1}
.endo .by{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--line);padding-top:1.1rem}
.endo .av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lt),var(--gold-deep));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.endo .nm{font-family:'DM Serif Display',serif;font-size:1.08rem;color:var(--ink);line-height:1.1}
.endo .rl{font-size:.8rem;color:var(--ink-soft)}
.panel.dark .endo{background:rgba(255,255,255,.05);border-color:rgba(228,210,168,.2)}
.panel.dark .endo blockquote{color:#E7DBC2}.panel.dark .endo .nm{color:#fff}.panel.dark .endo .rl{color:#B6A98C}
.panel.dark .endo .by{border-top-color:rgba(228,210,168,.18)}

@media(max-width:880px){
  .endorse-grid{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr 1fr}
  .jstep:nth-child(3n){border-right:1px solid rgba(228,210,168,.18)}
  .jstep:nth-child(2n){border-right:none}
}
@media(max-width:560px){
  .endorse-grid,.who-list{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .jstep,.jstep:nth-child(3n){border-right:none}
}

/* ============================================================
   INNER PAGES (Tidewater) — content-height panels + page parts
   ============================================================ */
body.inner .hero,body.inner .panel{min-height:auto;display:block}
body.inner .panel{padding:5.5rem 0}
body.inner .panel.page-hero{padding:10rem 0 7.5rem}
.page-hero{text-align:center}
.page-hero .crumb{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.page-hero .crumb a{color:var(--gold-deep)}
.page-hero h1{font-size:clamp(2.5rem,5.5vw,3.9rem);margin:.9rem 0 0;color:var(--ink)}
.page-hero h1 .hand{color:var(--gold-deep);font-size:1.18em;display:inline-block;line-height:.8}
.panel.dark .page-hero h1{color:#fff}
.page-hero .sub{max-width:56ch;margin:1.3rem auto 0;color:var(--ink-soft);font-size:1.12rem}
.panel.dark .page-hero .sub{color:#CFC0A4}
.page-hero .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.9rem}

/* generic feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:2rem 1.8rem;transition:transform .35s,box-shadow .35s}
.feat:hover{transform:translateY(-5px);box-shadow:0 24px 48px -28px var(--shadow)}
.feat .fi{font-size:1.8rem;margin-bottom:.7rem}
.feat h3{font-size:1.25rem;margin-bottom:.4rem}
.feat p{color:var(--ink-soft);font-size:.95rem}
.panel.dark .feat{background:rgba(255,255,255,.05);border-color:rgba(228,210,168,.2)}
.panel.dark .feat h3{color:#fff}.panel.dark .feat p{color:#CFC0A4}

/* format cards (bookstore) */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
.fcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:2.2rem 1.9rem;text-align:center;transition:transform .35s,box-shadow .35s}
.fcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px var(--shadow)}
.fcard.feature{border-color:var(--gold)}
.fcard .tagp{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.fcard h3{font-size:1.5rem;margin:.3rem 0}
.fcard .price{font-family:'DM Serif Display',serif;font-size:2.4rem;color:var(--ink);margin:.2rem 0}
.fcard ul{list-style:none;margin:1rem 0 1.5rem;display:grid;gap:.5rem;text-align:left}
.fcard li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--ink-soft)}
.fcard li::before{content:"\2665";position:absolute;left:0;color:var(--gold)}
.fcard .btn{margin-top:auto}

/* posts (blog) */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.post:hover{transform:translateY(-6px);box-shadow:0 28px 56px -30px var(--shadow)}
.post .pimg{aspect-ratio:16/10;overflow:hidden}
.post .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.post:hover .pimg img{transform:scale(1.05)}
.post .pbody{padding:1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post .pcat{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.post h3{font-size:1.3rem;margin:.5rem 0}
.post p{color:var(--ink-soft);font-size:.93rem;flex:1}
.post .pmore{margin-top:1rem;font-weight:700;color:var(--gold-deep);font-size:.9rem}

/* article (blog-post) */
.article{max-width:720px;margin:0 auto}
.article p{font-size:1.12rem;color:#4a3a26;line-height:1.8;margin-bottom:1.3rem}
.article h2{font-size:1.7rem;margin:2rem 0 1rem}
.article .lead{font-size:1.3rem;color:var(--ink)}
.article blockquote{border-left:3px solid var(--gold);padding-left:1.3rem;font-family:'DM Serif Display',serif;font-size:1.4rem;color:var(--gold-deep);margin:1.6rem 0}

/* video embeds (podcast) */
.vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.vidcard{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.vidcard:hover{transform:translateY(-5px);box-shadow:0 26px 52px -30px var(--shadow)}
.vidembed{position:relative;aspect-ratio:16/9;background:var(--cream-2)}
.vidembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidembed::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(34,24,12,.35),rgba(34,24,12,.05) 50%);pointer-events:none}
.vidembed .ph{position:absolute;inset:0;z-index:2;display:grid;place-items:center;cursor:pointer}
.vidembed .ph .disc{position:relative;width:64px;height:64px;border-radius:50%;background:var(--gold-deep);display:grid;place-items:center;box-shadow:0 16px 32px -12px var(--shadow);transition:transform .3s}
.vidembed:hover .ph .disc{transform:scale(1.08)}
.vidembed .ph .disc::after{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.vidcard .vmeta{padding:1.1rem 1.3rem}
.vidcard .vmeta .ep{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.vidcard .vmeta h3{font-size:1.1rem;margin-top:.2rem}

/* steps (book club) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.step{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:2rem 1.8rem}
.step .sn{font-family:'DM Serif Display',serif;font-size:2.6rem;color:var(--gold-lt);line-height:.8}
.step h3{font-size:1.25rem;margin:.5rem 0 .4rem}
.step p{color:var(--ink-soft);font-size:.94rem}

/* split feature (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.split .simg{border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 40px 80px -44px var(--shadow)}
.split .simg img{width:100%;height:100%;object-fit:cover}
.split.rev .simg{order:2}
.split h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:1rem}
.split p{color:var(--ink-soft);margin-bottom:1rem}

@media(max-width:880px){
  .feat-grid,.fmt-grid,.post-grid,.vidgrid,.steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}.split.rev .simg{order:0}
}
@media(max-width:560px){
  .feat-grid,.fmt-grid,.post-grid,.vidgrid,.steps{grid-template-columns:1fr}
}