@font-face { font-family:'Cinzel'; src:url('assets/fonts/cinzel.woff2') format('woff2'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Lora'; src:url('assets/fonts/lora.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('assets/fonts/lora-italic.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap; }

@property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@view-transition { navigation:auto; }

:root {
  --bg:#0a0806;
  --bg-2:#110d09;
  --panel:#16110b;
  --ink:#f5e9cc;
  --body:#d8cbae;
  --muted:#9a8b6d;
  --gold:#b08d57;
  --gold-bright:#e6c27a;
  --gold-hot:#ffdf9a;
  --line:rgba(230,194,122,.2);
  --display:'Cinzel', 'Trajan Pro', Georgia, serif;
  --text:'Lora', Georgia, 'Times New Roman', serif;
  --wrap:1200px;
  --head-h:76px;
  --ease:cubic-bezier(.2,.75,.15,1);
  --veil:10,8,6;
  --tint:rgba(255,255,255,.02);
  --tint-2:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.6);
  --photo:brightness(.8) saturate(.9);
  --grain:.55;
  color-scheme:dark;
}

/* Light theme: warm parchment instead of night */
:root[data-theme="light"] {
  --bg:#f7f0e3;
  --bg-2:#efe4d0;
  --panel:#fffaf1;
  --ink:#1f160c;
  --body:#3e3121;
  --muted:#7a6a4f;
  --gold:#a07a3c;
  --gold-bright:#8a6226;
  --gold-hot:#9a5f12;
  --line:rgba(130,95,40,.24);
  --veil:247,240,227;
  --tint:rgba(120,90,40,.04);
  --tint-2:rgba(120,90,40,.06);
  --shadow:rgba(80,55,20,.22);
  --photo:brightness(1) saturate(1);
  --grain:.35;
  color-scheme:light;
}

*, *::before, *::after { box-sizing:border-box; }
html { transition:background-color .4s; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 10px); -webkit-text-size-adjust:100%; background:var(--bg); }
body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--text); font-size:18px; line-height:1.72;
  overflow-x:clip;
}
/* Fine film grain over everything for a printed, tactile feel */
body::after {
  content:''; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:url('assets/img/grain.png'); opacity:var(--grain); mix-blend-mode:overlay;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--gold-bright); }
h1, h2, h3 { font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:.01em; margin:0 0 .55em; text-wrap:balance; }
h1 { font-size:clamp(42px, 6.4vw, 92px); }
h2 { font-size:clamp(30px, 3.8vw, 52px); }
h3 { font-size:clamp(22px, 2.2vw, 30px); }
p { margin:0 0 1.05em; text-wrap:pretty; }
figure { margin:0; }
::selection { background:var(--gold); color:#120c05; }
.wrap { width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
.narrow { width:min(820px, 100% - 48px); }
.center { text-align:center; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; z-index:200; background:var(--gold-bright); color:#160f07; padding:10px 16px; border-radius:8px; }
.skip:focus { left:12px; }
:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.eyebrow { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:18px; }
.lead { font-size:clamp(20px, 2vw, 25px); font-style:italic; color:var(--ink); }
.muted { color:var(--muted); }
.pull { color:var(--ink); font-style:italic; font-size:1.08em; border-left:2px solid var(--gold); padding-left:18px; }

/* Reading progress bar */
.progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.progress span { display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-hot)); transform-origin:0 50%; transform:scaleX(var(--p, 0)); box-shadow:0 0 12px rgba(255,214,140,.7); }

/* Header */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:background .4s, border-color .4s, transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(var(--veil),.84); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); opacity:0; transition:opacity .4s; }
.site-header.solid::before { opacity:1; }
.site-header.solid { border-color:var(--line); }
.site-header.menu-open { transform:none; }
.site-header.away { transform:translateY(-110%); }
.brand { position:relative; z-index:2; }
.brand img { height:46px; width:auto; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { position:relative; color:var(--body); text-decoration:none; font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.12em; transition:color .25s; }
.nav a:not(.nav-cta)::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold-bright); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav a:not(.nav-cta):hover { color:var(--gold-bright); }
.nav a:not(.nav-cta):hover::after { transform:scaleX(1); transform-origin:left; }
.nav .nav-cta { color:#170f06; background:linear-gradient(180deg, #ecd08f, #c69a55); padding:11px 20px; border-radius:999px; box-shadow:0 6px 24px rgba(198,154,85,.3); }
.menu-btn { display:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(var(--veil),.5); cursor:pointer; position:relative; z-index:2; }
.menu-icon, .menu-icon::before, .menu-icon::after { position:absolute; left:50%; width:18px; height:2px; background:var(--ink); transform:translateX(-50%); transition:transform .3s var(--ease), background .3s; content:''; }
.menu-icon { top:50%; margin-top:-1px; }
.menu-icon::before { top:-6px; }
.menu-icon::after { top:6px; }
.menu-open .menu-icon { background:transparent; }
.menu-open .menu-icon::before { transform:translateX(-50%) translateY(6px) rotate(45deg); }
.menu-open .menu-icon::after { transform:translateX(-50%) translateY(-6px) rotate(-45deg); }

/* Buttons */
.btn {
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:15px 30px;
  border-radius:999px; text-decoration:none; text-align:center; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.1em; line-height:1.3;
  transition:transform .35s var(--ease), box-shadow .35s, background .3s, color .3s;
}
.btn:hover { transform:translateY(-2px); }
.btn-gold { color:#170f06; background:linear-gradient(180deg, #ecd08f, #c69a55); box-shadow:0 12px 34px rgba(198,154,85,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-gold:hover { box-shadow:0 18px 44px rgba(230,194,122,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-line { color:var(--ink); border:1px solid rgba(230,194,122,.55); background:rgba(var(--veil),.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn-line:hover { background:rgba(230,194,122,.1); border-color:var(--gold-bright); }
/* A glint of light sweeps across the main buttons now and then */
.btn-shine::before {
  content:''; position:absolute; top:-2px; bottom:-2px; left:-60%; width:45%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg); animation:glint 5.5s var(--ease) infinite 2s;
}
@keyframes glint { 0%, 70% { left:-60%; } 100% { left:130%; } }
.btn-big { min-height:64px; padding:18px 46px; font-size:16px; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hint { margin-top:18px; font-size:15px; font-style:italic; color:var(--muted); }

/* HERO */
.hero { position:relative; min-height:100vh; min-height:100svh; display:grid; align-items:center; overflow:hidden; padding:calc(var(--head-h) + 40px) 0 90px; }
.hero-bg { position:absolute; inset:-8% -4%; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; animation:kenburns 26s ease-in-out infinite alternate; filter:var(--photo); }
@keyframes kenburns { from { transform:scale(1.04); } to { transform:scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero-shade { position:absolute; inset:0; z-index:1; background:
  radial-gradient(ellipse 50% 60% at 72% 48%, rgba(230,180,90,.18), transparent 70%),
  linear-gradient(90deg, rgba(var(--veil),.94) 0%, rgba(var(--veil),.78) 38%, rgba(var(--veil),.35) 70%, rgba(var(--veil),.55) 100%),
  linear-gradient(0deg, var(--bg) 0%, transparent 28%); }
.dust { position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.hero-grid { position:relative; z-index:3; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px, 5vw, 80px); align-items:center; }
.hero-copy h1 { margin-bottom:.5em; }
.hero-lines p { font-size:clamp(18px, 1.55vw, 21px); max-width:33em; margin-bottom:.6em; }
.hero-book { position:relative; display:block; justify-self:center; width:min(430px, 100%); perspective:1200px; text-decoration:none; }
.hero-book img { position:relative; z-index:1; view-transition-name:book-cover; filter:drop-shadow(0 50px 60px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(255,220,150,.3));
  transform:rotateY(var(--ry, -8deg)) rotateX(var(--rx, 2deg)); transition:transform .6s var(--ease); animation:float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate:0 0; } 50% { translate:0 -14px; } }
.book-glow { position:absolute; inset:12% 0 6%; border-radius:50%; background:radial-gradient(circle, rgba(255,205,120,.45), transparent 65%); filter:blur(30px); animation:pulse 5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.55; transform:scale(.92); } }
.book-tag { position:absolute; z-index:2; right:-6%; bottom:14%; padding:10px 16px; border-radius:999px; background:rgba(var(--veil),.78); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--gold-bright); transition:transform .4s var(--ease), background .3s; }
.hero-book:hover .book-tag { transform:translateY(-4px) scale(1.04); background:rgba(var(--veil),.95); }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:26px; width:28px; height:46px; margin-left:-14px; border:1px solid rgba(230,194,122,.5); border-radius:20px; }
.scroll-cue span { position:absolute; left:50%; top:9px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--gold-bright); animation:cue 2s var(--ease) infinite; }
@keyframes cue { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(16px); } }

/* Entrance animations for the hero */
.js .rise { opacity:0; transform:translateY(24px); animation:rise 1s var(--ease) forwards; animation-delay:calc(var(--d, 0) * 110ms + 250ms); }
@keyframes rise { to { opacity:1; transform:none; } }
.split .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.split .w > span { display:inline-block; }
.js .split .w > span { transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 55ms); }
.js .split.in .w > span { transform:none; }
.js .hero .split .w > span { animation:wordup 1.1s var(--ease) forwards; animation-delay:calc(var(--i) * 80ms + 350ms); transition:none; }
@keyframes wordup { to { transform:none; } }

/* Scroll reveals */
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal-img { clip-path:inset(12% 12% 12% 12% round 18px); transition:clip-path 1.4s var(--ease); }
.js .reveal-img.in { clip-path:inset(0 0 0 0 round 18px); }
.js .reveal-img img { transform:scale(1.25); transition:transform 1.8s var(--ease); }
.js .reveal-img.in img { transform:scale(1.08); }

/* Marquee of the four questions */
.marquee { position:relative; z-index:4; overflow:hidden; border-block:1px solid var(--line); background:linear-gradient(90deg, var(--bg), var(--bg-2), var(--bg)); padding:22px 0; }
.marquee-track { display:flex; align-items:center; gap:34px; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee span { font-family:var(--display); font-weight:600; font-size:clamp(18px, 2.2vw, 28px); letter-spacing:.06em; color:transparent; -webkit-text-stroke:1px rgba(230,194,122,.75); white-space:nowrap; }
.marquee span:nth-of-type(odd) { color:var(--ink); -webkit-text-stroke:0; }
.marquee i { width:9px; height:9px; transform:rotate(45deg); background:var(--gold); flex:none; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* Chapters */
.chapters { position:relative; background:linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg)); }
.chapter { padding:clamp(70px, 10vw, 140px) 0; }
.chapter-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 7vw, 110px); align-items:center; }
.flip .chapter-img { order:2; }
.chapter-img { position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; box-shadow:0 40px 90px var(--shadow); }
.chapter-img::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(230,194,122,.18), inset 0 -80px 120px rgba(var(--veil),.45); pointer-events:none; }
.parallax { position:absolute; top:-9%; bottom:-9%; left:0; right:0; will-change:transform; }
.parallax img { width:100%; height:100%; object-fit:cover; }
.num { display:block; font-family:var(--display); font-weight:700; font-size:clamp(64px, 8vw, 120px); line-height:.9; margin-bottom:10px;
  background:linear-gradient(180deg, rgba(230,194,122,.55), rgba(230,194,122,0)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Quote with words that light up as you scroll */
.quote { position:relative; overflow:hidden; padding:clamp(110px, 16vw, 220px) 0; text-align:center; }
.quote-bg { position:absolute; top:-15%; bottom:-15%; left:0; right:0; }
.quote-bg img { width:100%; height:100%; object-fit:cover; }
.quote::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--veil),.72), rgba(var(--veil),.94)); }
.quote .wrap { position:relative; z-index:2; }
blockquote { margin:0; }
.lit { font-size:clamp(24px, 3vw, 40px); line-height:1.5; font-style:italic; color:var(--ink); }
.js .lit .lw { opacity:.16; transition:opacity .35s, color .35s, text-shadow .35s; }
.js .lit .lw.on { opacity:1; }
.js .lit .lw.glow { color:var(--gold-hot); text-shadow:0 0 22px rgba(255,210,130,.45); }
cite { display:block; margin-top:26px; font-family:var(--display); font-style:normal; font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--gold-bright); }

/* Author */
.author { position:relative; padding:clamp(80px, 11vw, 150px) 0; background:radial-gradient(ellipse 60% 70% at 25% 50%, rgba(176,141,87,.14), transparent 70%), var(--bg); }
.author-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 7vw, 100px); align-items:center; }
.author-img { position:relative; aspect-ratio:4 / 5; border-radius:220px 220px 18px 18px; overflow:hidden; box-shadow:0 40px 90px var(--shadow); }
.author-img::before { content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; background:conic-gradient(from var(--angle), transparent 0 60%, var(--gold-hot) 75%, transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 6s linear infinite; pointer-events:none; }
@keyframes spin { to { --angle:360deg; } }
.js .author-img.reveal-img { clip-path:inset(12% 12% 12% 12% round 220px 220px 18px 18px); }
.js .author-img.reveal-img.in { clip-path:inset(0 0 0 0 round 220px 220px 18px 18px); }

/* Journey: full screen images change behind the words as you scroll */
.story { position:relative; display:grid; background:var(--bg); }
.story-media, .story-steps { grid-area:1 / 1; }
.story-media { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.story-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.12); transition:opacity 1.2s ease, transform 8s ease-out; filter:var(--photo); }
.story-media img.on { opacity:1; transform:scale(1.02); }
.story-media::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--veil),.88) 0%, rgba(var(--veil),.55) 55%, rgba(var(--veil),.25) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.story-dots { position:absolute; z-index:2; right:max(24px, calc((100vw - var(--wrap)) / 2)); top:50%; transform:translateY(-50%); display:grid; gap:14px; }
.story-dots i { display:block; width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-bright); transition:background .4s, transform .4s var(--ease), height .4s var(--ease); }
.story-dots i.on { background:var(--gold-bright); height:28px; border-radius:6px; }
.story-cue { position:absolute; z-index:2; left:50%; bottom:28px; transform:translateX(-50%); display:grid; justify-items:center; gap:8px; font-family:var(--display); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright); transition:opacity .5s; }
.story-cue b { width:14px; height:14px; border-right:2px solid var(--gold-bright); border-bottom:2px solid var(--gold-bright); transform:rotate(45deg); animation:nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { translate:0 -4px; opacity:.4; } 50% { translate:0 4px; opacity:1; } }
.story.at-end .story-cue { opacity:0; }
.story-steps { position:relative; z-index:2; width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
.step { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; max-width:720px; padding:15vh 0; }
.step-intro h2 { font-size:clamp(40px, 6vw, 84px); }
.step-text { font-size:clamp(20px, 2.1vw, 27px); line-height:1.6; color:var(--ink); margin:0; opacity:.25; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.step-big { font-family:var(--display); font-weight:600; font-size:clamp(28px, 3.6vw, 52px); line-height:1.22; }
.step.active .step-text { opacity:1; transform:none; }
.step mark { color:var(--ink); background:linear-gradient(90deg, rgba(230,194,122,.0), rgba(230,194,122,0)) no-repeat; background-image:linear-gradient(transparent 62%, rgba(230,194,122,.45) 62%, rgba(230,194,122,.45) 92%, transparent 92%); background-size:0% 100%; transition:background-size 1.2s var(--ease) .35s, color .6s; }
.step.active mark { background-size:100% 100%; color:var(--gold-hot); }
.step-end .btn { margin-top:30px; align-self:flex-start; }

/* Sample CTA */
.sample-cta { position:relative; overflow:hidden; padding:clamp(120px, 16vw, 220px) 0; text-align:center; }
.sample-bg { position:absolute; top:-15%; bottom:-15%; left:0; right:0; }
.sample-bg img { width:100%; height:100%; object-fit:cover; }
.sample-cta::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, var(--bg), rgba(var(--veil),.55) 30%, rgba(var(--veil),.62) 70%, var(--bg)); }
.sample-inner { position:relative; z-index:2; max-width:760px; }
.sample-inner p:not(.eyebrow) { font-size:clamp(18px, 1.7vw, 21px); color:var(--ink); }
.sample-inner .btn { margin-top:18px; }

/* Formats */
.formats { padding:clamp(80px, 11vw, 150px) 0; }
.format-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(20px, 3vw, 40px); max-width:940px; margin:clamp(30px, 5vw, 60px) auto 0; }
.format { position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .5s var(--ease), border-color .3s, box-shadow .5s, opacity 1s var(--ease); }
.format:hover { border-color:rgba(230,194,122,.5); box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(230,194,122,.08); }
.format::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,220,150,.16), transparent 45%); opacity:0; transition:opacity .4s; }
.format:hover::after { opacity:1; }
.format img { aspect-ratio:1; object-fit:cover; width:100%; transition:transform 1s var(--ease); }
.format:hover img { transform:scale(1.05); }
.format-body { padding:28px 28px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.format-body h3 { margin-bottom:.15em; }


/* Updates */
.updates { padding:clamp(80px, 10vw, 130px) 0; background:var(--bg-2); border-block:1px solid rgba(230,194,122,.08); }
.updates-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px, 6vw, 90px); align-items:center; }
.updates .btn { margin-top:8px; }
.socials { display:grid; gap:14px; }
.social { position:relative; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 16px; padding:22px 26px; border:1px solid var(--line); border-radius:16px; text-decoration:none; overflow:hidden; transition:border-color .3s, transform .4s var(--ease), opacity 1s var(--ease); }
.social::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(230,194,122,.12), transparent); transform:translateX(-101%); transition:transform .6s var(--ease); }
.social:hover { border-color:var(--gold); }
.social:hover::before { transform:none; }
.social span { position:relative; font-family:var(--display); font-weight:700; letter-spacing:.12em; color:var(--ink); }
.social small { position:relative; color:var(--muted); font-size:14px; }

/* Signup */
.signup { position:relative; overflow:hidden; padding:clamp(100px, 13vw, 180px) 0; }
.signup-bg { position:absolute; top:-15%; bottom:-15%; left:0; right:0; }
.signup-bg img { width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.signup::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(var(--veil),.95) 20%, rgba(var(--veil),.7) 60%, rgba(var(--veil),.85)), linear-gradient(180deg, var(--bg), transparent 25%, transparent 75%, var(--bg)); }
.signup-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 80px); align-items:center; }
.signup-strap { font-family:var(--display); font-weight:600; font-size:clamp(19px, 2vw, 24px); color:var(--gold-bright); letter-spacing:.04em; }
.kit-card { position:relative; min-height:140px; padding:clamp(22px, 3vw, 34px); border-radius:22px; background:rgba(var(--veil),.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); box-shadow:0 30px 80px var(--shadow); }
.kit-card::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:conic-gradient(from var(--angle), transparent 0 70%, var(--gold-hot) 82%, transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 7s linear infinite; pointer-events:none; }
.kit-fallback { margin:16px 0 0; font-size:14px; color:var(--muted); text-align:center; }
/* Bring the Kit form into the site's look */
.kit-card .formkit-form { max-width:none !important; background:transparent !important; border:0 !important; box-shadow:none !important; font-family:var(--text) !important; }
.kit-card .formkit-form [data-style="clean"], .kit-card .formkit-background { padding:0 !important; background:transparent !important; }
.kit-card .formkit-input { background:var(--tint-2) !important; border:1px solid rgba(230,194,122,.35) !important; color:var(--ink) !important; border-radius:999px !important; font-family:var(--text) !important; font-size:16px !important; padding:14px 20px !important; }
.kit-card .formkit-input::placeholder { color:var(--muted) !important; }
.kit-card .formkit-submit { background:linear-gradient(180deg, #ecd08f, #c69a55) !important; color:#170f06 !important; border-radius:999px !important; font-family:var(--display) !important; font-weight:700 !important; letter-spacing:.1em !important; }
.kit-card .formkit-submit > span { padding:14px 22px !important; }
.kit-card .formkit-powered-by-convertkit-container { opacity:.5; }

/* Footer */
.site-footer { border-top:1px solid var(--line); padding:50px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font-size:15px; color:var(--muted); text-align:center; }
.footer-grid { display:grid; justify-items:center; gap:22px; }
.footer-mark { width:min(320px, 70vw); }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; }
.site-footer nav a { color:var(--body); text-decoration:none; font-family:var(--display); font-size:13px; letter-spacing:.12em; }
.site-footer nav a:hover { color:var(--gold-bright); }
.site-footer p { margin:0; }

/* Tablet and phone */
@media (max-width: 1020px) {
  .menu-btn { display:block; }
  .nav {
    position:fixed; inset:0; z-index:1; flex-direction:column; justify-content:center; gap:6px; padding:90px 30px 40px;
    background:var(--bg);
    clip-path:circle(0 at calc(100% - 52px) 38px); transition:clip-path .7s var(--ease), visibility .7s; visibility:hidden;
  }
  .menu-open .nav { clip-path:circle(150% at calc(100% - 52px) 38px); visibility:visible; }
  .nav a { font-size:20px; padding:14px; opacity:0; transform:translateY(16px); transition:opacity .5s, transform .6s var(--ease); }
  .menu-open .nav a { opacity:1; transform:none; }
  .menu-open .nav a:nth-child(2) { transition-delay:.05s; } .menu-open .nav a:nth-child(3) { transition-delay:.1s; }
  .menu-open .nav a:nth-child(4) { transition-delay:.15s; } .menu-open .nav a:nth-child(5) { transition-delay:.2s; } .menu-open .nav a:nth-child(6) { transition-delay:.25s; }
  .nav .nav-cta { margin-top:16px; padding:16px 30px; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-book { order:-1; width:min(290px, 64vw); }
  .hero-lines p { margin-inline:auto; }
  .actions { justify-content:center; }
  .book-tag { right:-4%; }
  .hero-shade { background:radial-gradient(ellipse 70% 40% at 50% 28%, rgba(230,180,90,.18), transparent 70%), linear-gradient(0deg, var(--bg) 0%, rgba(var(--veil),.8) 50%, rgba(var(--veil),.6) 100%); }
}
@media (max-width: 760px) {
  :root { --head-h:66px; }
  body { font-size:17px; }
  .brand img { height:36px; }
  .hero { padding-top:calc(var(--head-h) + 24px); }
  .actions .btn { width:100%; }
  .scroll-cue { display:none; }
  .chapter-grid, .author-grid, .updates-grid, .signup-grid { grid-template-columns:1fr; }
  .flip .chapter-img { order:0; }
  .author-img { max-width:340px; width:100%; margin:0 auto; }
  .format-grid { grid-template-columns:1fr; max-width:440px; }
  .pull { border-left:0; padding-left:0; }
  .story-media::after { background:linear-gradient(180deg, var(--bg) 0%, rgba(var(--veil),.35) 18%, rgba(var(--veil),.55) 82%, var(--bg) 100%); }
  .story-dots { right:14px; gap:10px; }
  .step { padding:12vh 26px 12vh 0; }
  .step-text { font-size:20px; }
  .step-big { font-size:clamp(26px, 7.4vw, 34px); }
  .step-end .btn { align-self:stretch; }
  .lit { font-size:24px; }
}
@media (hover: none) { .hero-book img { transform:none; } .format { transform:none; } }

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .rise, .js .reveal { opacity:1; transform:none; }
  .js .split .w > span { transform:none; }
  .js .reveal-img { clip-path:none; }
  .js .lit .lw { opacity:1; }
  .step-text { opacity:1; transform:none; }
  .step mark { background-size:100% 100%; }
}

/* 404 page */
.page-404 { min-height:100vh; display:grid; place-items:center; text-align:center; }
.actions.center { justify-content:center; }

/* Hero emphasis line */
.hero-lines .hero-strong { font-family:var(--display); font-weight:600; color:var(--gold-hot); font-size:clamp(22px, 2.2vw, 30px); letter-spacing:.02em; }

/* Manifesto */
.manifesto { position:relative; overflow:hidden; padding:clamp(100px, 13vw, 180px) 0; }
.manifesto-bg { position:absolute; top:-15%; bottom:-15%; left:0; right:0; opacity:.35; }
.manifesto-bg img { width:100%; height:100%; object-fit:cover; }
.manifesto::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, var(--bg), rgba(var(--veil),.75) 20%, rgba(var(--veil),.75) 80%, var(--bg)); }
.manifesto .wrap { position:relative; z-index:2; }
.statement { font-size:clamp(32px, 4.6vw, 64px); margin-bottom:.7em; }
.manifesto p:not(.eyebrow) { font-size:clamp(18px, 1.6vw, 21px); }
.punch { font-family:var(--display); font-weight:600; color:var(--ink); font-size:clamp(22px, 2.4vw, 32px) !important; line-height:1.3; margin:1.4em 0 1.1em; }
.punch-gold { color:var(--gold-hot); }
.signoff { margin-top:2.2em; font-style:italic; color:var(--gold-bright); font-size:clamp(22px, 2.4vw, 30px) !important; }

/* Long chapter keeps its picture in view while you read */
.chapter-long .chapter-grid { align-items:start; }
.sticky-img { position:sticky; top:calc(var(--head-h) + 40px); }
.chapter-long .punch { font-size:clamp(21px, 2vw, 28px) !important; }

/* Format quips */
.format-body .format-type { color:var(--muted); font-style:italic; margin-bottom:.3em; }
.format-body .format-quip { color:var(--ink); font-size:clamp(17px, 1.5vw, 19px); margin-bottom:1.3em; min-height:2.6em; }

/* Drongo Books */
.drongo { position:relative; padding:clamp(80px, 10vw, 140px) 0; border-top:1px solid var(--line); background:radial-gradient(ellipse 50% 70% at 30% 50%, rgba(230,194,122,.1), transparent 70%), var(--bg); }
.drongo-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 6vw, 90px); align-items:center; max-width:980px; }
.drongo-mark { width:min(340px, 100%); justify-self:center; filter:drop-shadow(0 0 40px rgba(230,194,122,.18)); animation:float 8s ease-in-out infinite; }
.drongo-copy p:not(.eyebrow) { font-size:clamp(18px, 1.6vw, 21px); }

@media (max-width: 760px) {
  .sticky-img { position:relative; top:auto; }
  .drongo-grid { grid-template-columns:1fr; text-align:center; }
  .drongo-mark { width:220px; }
  .format-body .format-quip { min-height:0; }
}

/* Mid page sample band */
.midcta { padding:0 0 clamp(70px, 9vw, 120px); }
.midcta-inner { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px, 3vw, 40px); align-items:center; padding:clamp(20px, 3vw, 34px) clamp(24px, 4vw, 50px); border:1px solid var(--line); border-radius:24px;
  background:radial-gradient(ellipse 60% 120% at 10% 50%, rgba(230,194,122,.16), transparent 70%), var(--panel); box-shadow:0 30px 70px var(--shadow); }
.midcta-inner img { width:clamp(70px, 8vw, 110px); filter:drop-shadow(0 18px 24px rgba(0,0,0,.6)); transform:rotate(-6deg); }
.midcta-title { font-family:var(--display); font-weight:600; color:var(--ink); font-size:clamp(22px, 2.4vw, 32px); line-height:1.2; margin:0 0 .3em; }
.midcta-sub { margin:0; color:var(--muted); font-style:italic; }

/* Book facts */
.facts { list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(24px, 6vw, 80px); padding:0; margin:10px auto 0; }
.facts li { display:grid; justify-items:center; }
.facts strong { font-family:var(--display); font-weight:700; font-size:clamp(40px, 5vw, 64px); line-height:1; background:linear-gradient(180deg, var(--gold-hot), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.facts span { font-family:var(--display); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* Drongo aside */
.drongo-aside { color:var(--muted); font-style:italic; font-size:16px !important; margin-top:1.4em; }
.drongo-grid { max-width:1100px; }
.drongo-copy .punch { margin:.6em 0 .9em; }

@media (max-width: 760px) {
  .midcta-inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .midcta-inner .btn { width:100%; }
}

/* Hero description */
.hero-desc { max-width:34em; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); font-size:clamp(16px, 1.3vw, 18px); color:var(--body); font-style:italic; }

/* Not blasphemy band */
.faithband { position:relative; padding:clamp(80px, 10vw, 130px) 0; background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(230,194,122,.12), transparent 70%), var(--bg-2); border-block:1px solid var(--line); }
.faithband h2 { font-size:clamp(34px, 4.6vw, 62px); }
.faith-line { font-size:clamp(20px, 2.2vw, 28px); color:var(--ink); }
.faith-line span { display:block; font-family:var(--display); font-weight:600; color:var(--gold-hot); margin-top:.3em; }
.faith-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 3vw, 40px); margin-top:clamp(30px, 4vw, 50px); text-align:left; }
.faith-pair p { margin:0; padding:24px 26px; border:1px solid var(--line); border-radius:16px; background:var(--tint); font-size:clamp(17px, 1.5vw, 19px); color:var(--ink); }
.faith-pair .scripture { font-style:italic; }
.faith-pair cite { margin-top:12px; }

/* What's inside */
.inside { padding:clamp(90px, 12vw, 160px) 0; }
.inside-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); margin-top:clamp(30px, 5vw, 60px); }
.inside-card { position:relative; padding:30px 26px 32px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(230,194,122,.07), rgba(230,194,122,0) 60%), var(--panel); overflow:hidden; transition:border-color .3s, transform .5s var(--ease), opacity 1s var(--ease); }
.inside-card:hover { border-color:rgba(230,194,122,.5); }
.roman { display:block; font-family:var(--display); font-weight:700; font-size:44px; line-height:1; margin-bottom:18px; background:linear-gradient(180deg, var(--gold-hot), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.inside-card h3 { font-size:clamp(19px, 1.6vw, 22px); line-height:1.25; }
.inside-card p { margin:0; font-size:16px; }
.takeaways { max-width:820px; margin:clamp(70px, 9vw, 120px) auto 0; }
.takeaways h3 { font-size:clamp(26px, 3vw, 40px); margin-bottom:1em; }
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.ticks li { position:relative; padding:18px 22px 18px 64px; border:1px solid var(--line); border-radius:14px; background:var(--tint); font-size:clamp(16px, 1.4vw, 18px); }
.ticks li::before { content:''; position:absolute; left:22px; top:22px; width:24px; height:24px; border-radius:50%; background:linear-gradient(180deg, #ecd08f, #c69a55); box-shadow:0 0 18px rgba(230,194,122,.35); }
.ticks li::after { content:''; position:absolute; left:30px; top:27px; width:6px; height:11px; border-right:2px solid #170f06; border-bottom:2px solid #170f06; transform:rotate(45deg); }
.ticks strong { font-family:var(--display); color:var(--ink); letter-spacing:.02em; margin-right:4px; }
.reassure { margin:clamp(40px, 5vw, 60px) 0 0; text-align:center; font-size:clamp(20px, 2vw, 26px); font-style:italic; color:var(--ink); }
.reassure span { display:block; margin-top:.4em; font-family:var(--display); font-style:normal; font-weight:600; color:var(--gold-hot); font-size:.95em; line-height:1.35; }
.takeaways .actions { margin-top:30px; }

@media (max-width: 1020px) { .inside-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .faith-pair { grid-template-columns:1fr; }
  .inside-grid { grid-template-columns:1fr; }
  .ticks li { padding-left:58px; }
  .hero-desc { margin-inline:auto; }
}

/* Theme switch */
.theme-btn { position:relative; z-index:2; display:grid; place-items:center; width:44px; height:44px; flex:none; margin-left:auto; border-radius:50%; border:1px solid var(--line); background:rgba(var(--veil),.5); cursor:pointer; color:var(--gold-bright); transition:transform .5s var(--ease), border-color .3s; }
.theme-btn:hover { border-color:var(--gold-bright); transform:rotate(25deg); }
.theme-btn svg { position:absolute; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; transition:opacity .4s, transform .6s var(--ease); }
.theme-btn .i-moon { fill:currentColor; stroke:none; }
:root:not([data-theme="light"]) .theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { opacity:0; transform:rotate(-90deg) scale(.5); }
.site-header .nav { margin-left:auto; }
.site-header .theme-btn { order:3; margin-left:0; }
.site-header .menu-btn { order:4; }

/* Light theme fine tuning */
:root[data-theme="light"] .btn-gold { box-shadow:0 10px 26px rgba(160,122,60,.3), inset 0 1px 0 rgba(255,255,255,.5); }
:root[data-theme="light"] .btn-line { color:var(--ink); border-color:rgba(138,98,38,.55); }
:root[data-theme="light"] .hero-book img { filter:drop-shadow(0 40px 40px rgba(80,55,20,.35)); }
:root[data-theme="light"] .book-glow { background:radial-gradient(circle, rgba(230,170,80,.35), transparent 65%); }
:root[data-theme="light"] .num, :root[data-theme="light"] .roman { background-image:linear-gradient(180deg, #b8872f, rgba(184,135,47,.15)); }
:root[data-theme="light"] .facts strong { background-image:linear-gradient(180deg, #b8872f, #7a5520); }
:root[data-theme="light"] .step mark { background-image:linear-gradient(transparent 62%, rgba(214,160,70,.35) 62%, rgba(214,160,70,.35) 92%, transparent 92%); }
:root[data-theme="light"] .lit .lw.glow { text-shadow:none; }
:root[data-theme="light"] .drongo-mark { filter:drop-shadow(0 6px 18px rgba(80,55,20,.25)); }
:root[data-theme="light"] .format:hover { box-shadow:0 26px 60px var(--shadow); }
:root[data-theme="light"] .progress span { box-shadow:none; }
:root[data-theme="light"] .hero-shade { background:
  radial-gradient(ellipse 50% 60% at 72% 48%, rgba(255,214,140,.35), transparent 70%),
  linear-gradient(90deg, rgba(var(--veil),.96) 0%, rgba(var(--veil),.86) 40%, rgba(var(--veil),.45) 72%, rgba(var(--veil),.6) 100%),
  linear-gradient(0deg, var(--bg) 0%, transparent 28%); }

/* What's inside: the reader photo beside the four cards */
.inside-split { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px, 3vw, 40px); align-items:center; margin-top:clamp(30px, 5vw, 60px); }
.inside-split .inside-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:0; }
.inside-photo { position:relative; aspect-ratio:4 / 5; border-radius:20px; overflow:hidden; box-shadow:0 40px 90px var(--shadow); }
.inside-photo img { width:100%; height:100%; object-fit:cover; }
.js .inside-photo.reveal-img.in img { transform:none; }
.inside-photo::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(230,194,122,.2); pointer-events:none; }

@media (max-width: 1020px) {
  :root[data-theme="light"] .hero-shade { background:radial-gradient(ellipse 70% 40% at 50% 28%, rgba(255,214,140,.35), transparent 70%), linear-gradient(0deg, var(--bg) 0%, rgba(var(--veil),.86) 50%, rgba(var(--veil),.7) 100%); }
  .inside-split { grid-template-columns:1fr; }
  .inside-photo { max-width:460px; width:100%; margin:0 auto; }
}
@media (max-width: 760px) {
  .inside-split .inside-grid { grid-template-columns:1fr; }
  .theme-btn { width:42px; height:42px; }
}
@media (max-width: 1020px) { .site-header { gap:10px; } .site-header .theme-btn { margin-left:auto; } }
@media (max-width: 760px) {
  :root[data-theme="light"] .story-media::after { background:linear-gradient(180deg, var(--bg) 0%, rgba(var(--veil),.72) 18%, rgba(var(--veil),.82) 82%, var(--bg) 100%); }
}

/* It's not just the church: the places the book travels */
.world { position:relative; padding:clamp(80px, 11vw, 150px) 0; background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(230,194,122,.1), transparent 70%), var(--bg-2); border-block:1px solid var(--line); }
.world-head { max-width:760px; margin:0 auto; text-align:center; }
.world-head h2 { font-size:clamp(34px, 4.6vw, 62px); }
.places { list-style:none; padding:0; margin:clamp(36px, 5vw, 64px) 0 0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; counter-reset:place; }
.place { position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 20px 26px; border:1px solid var(--line); border-radius:16px; background:var(--tint); overflow:hidden; counter-increment:place; transition:border-color .3s, transform .5s var(--ease), opacity 1s var(--ease); }
.place::before { content:counter(place, decimal-leading-zero); position:absolute; right:14px; top:12px; font-family:var(--display); font-size:12px; letter-spacing:.14em; color:var(--muted); }
.place::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--gold), var(--gold-hot)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.place:hover { border-color:rgba(230,194,122,.5); }
.place:hover::after { transform:scaleX(1); }
.place-name { font-family:var(--display); font-weight:700; font-size:clamp(17px, 1.4vw, 20px); letter-spacing:.06em; color:var(--gold-bright); }
.place-line { font-size:15px; line-height:1.55; color:var(--body); }
.world-close { margin:clamp(40px, 5vw, 64px) 0 0; text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(28px, 3.6vw, 50px); color:var(--ink); line-height:1.15; }
.world-close span { color:var(--gold-hot); }
@media (max-width: 1020px) { .places { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .places { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .place { padding:20px 16px 22px; } .place-line { font-size:14px; } }

/* Portrait chapter image with words baked in: show it whole */
.chapter-img-tall { aspect-ratio:4 / 5; max-width:520px; justify-self:center; width:100%; }
.parallax.still { inset:0; }
.js .chapter-img-tall.reveal-img.in img { transform:none; }

/* Invitation */
.invite { padding:clamp(90px, 12vw, 160px) 0; background:radial-gradient(ellipse 55% 70% at 75% 50%, rgba(230,194,122,.12), transparent 70%), var(--bg); }
.invite-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 7vw, 100px); align-items:center; }
.invite-img { position:relative; aspect-ratio:4 / 5; border-radius:200px 200px 18px 18px; overflow:hidden; box-shadow:0 40px 90px var(--shadow); }
.js .invite-img.reveal-img { clip-path:inset(12% 12% 12% 12% round 200px 200px 18px 18px); }
.js .invite-img.reveal-img.in { clip-path:inset(0 0 0 0 round 200px 200px 18px 18px); }
.invite-copy h2 { font-size:clamp(30px, 3.6vw, 50px); }
.invite-copy p:not(.pull) { font-size:clamp(18px, 1.6vw, 21px); }

/* Bridge before the manifesto */
.bridge { position:relative; overflow:hidden; padding:clamp(100px, 13vw, 170px) 0; }
.bridge-bg { position:absolute; top:-15%; bottom:-15%; left:0; right:0; opacity:.5; }
.bridge-bg img { width:100%; height:100%; object-fit:cover; }
.bridge::before { content:''; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(var(--veil),.7), rgba(var(--veil),.95)), linear-gradient(180deg, var(--bg), transparent 20%, transparent 80%, var(--bg)); }
.bridge .wrap { position:relative; z-index:2; }
.bridge-lead { font-family:var(--display); font-weight:600; color:var(--ink); font-size:clamp(32px, 4.4vw, 60px); line-height:1.12; margin-bottom:.6em; }
.bridge p:not(.bridge-lead) { font-size:clamp(19px, 1.9vw, 24px); color:var(--ink); font-style:italic; }
.bridge-gold { color:var(--gold-hot) !important; }

/* Stone behind the ten places */
.world { overflow:hidden; }
.world-bg { position:absolute; inset:0; opacity:.14; }
.world-bg img { width:100%; height:100%; object-fit:cover; }
.world .wrap { position:relative; }
:root[data-theme="light"] .world-bg { opacity:.1; mix-blend-mode:multiply; }
:root[data-theme="light"] .bridge-bg { opacity:.35; }

@media (max-width: 760px) {
  .invite-grid { grid-template-columns:1fr; }
  .invite-img { max-width:340px; width:100%; margin:0 auto; }
  .chapter-img-tall { max-width:420px; }
}
.invite-img img { object-position:78% 50%; }