/* Epistula · epistula.app
   Colour blocks with their text pairs, condensed caps headlines ending in one upright Fraunces word,
   engravings in halos and arches, and the moving tide for pen pals. Fonts are served from this domain. */

@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --page:#FFFFFF; --ink:#1D1B18; --muted:#5E574D; --amuted:#8C8273;
  --sky:#BFE1F1; --petrol:#0E3C4A; --pink:#F6CFC6; --coral:#D6492A; --coral-deep:#9E3019;
  --mint:#CDEBD9; --forest:#1E5A45; --night:#1A140F; --night-raised:#261D16; --night-line:#3A2E24; --night-muted:#CDBFA8;
  --candle:#F0B85A; --walnut:#3B2A1F; --cream:#F6EAD6; --tan:#E8C89B; --cobalt:#2846B8;
  --ocean:#144F4D; --app-prompt:#264E4C; --app-paper:#EFECE8; --app-card:#FCFBF8; --app-line:#E6DCC9; --sage:#E3E9DC;
  --tide-deep:#0A2F3B; --tide-wave:#14495A; --tide-line:#7FB6CC; --moon:#9CC3D2;
  --headline:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ui:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,8.3vw,120px);
  --sec-top:clamp(64px,8.3vw,120px);
  --sec-bottom:clamp(72px,9vw,130px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
p{max-width:62ch}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type */
.hl{font-family:var(--headline);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em;text-wrap:balance}
.hl em{font-family:var(--display);font-style:normal;font-weight:600;text-transform:none;letter-spacing:-.025em;font-size:.92em;line-height:.95;font-variation-settings:"opsz" 144}
.hl-xl{font-size:clamp(46px,5vw,76px);line-height:.9}
.hl-l{font-size:clamp(50px,5.9vw,86px)}
.hl-m{font-size:clamp(34px,3.4vw,50px);line-height:.94}
.label{font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.5}
.note{font-style:italic;font-size:16px;line-height:1.5}
.title{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.caption{font-family:var(--ui);font-size:12px;line-height:1.4}
.wordmark{font-family:var(--display);font-style:italic;font-weight:600;letter-spacing:-.02em;text-decoration:none;line-height:1}

/* Stickers, buttons, cards */
.sticker{display:inline-block;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:9px 16px;border-radius:999px;transform:rotate(var(--tilt,-3deg));width:max-content;max-width:100%}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;padding:14px 26px 14px 20px;border-radius:16px;text-decoration:none;font-family:var(--ui);color:#FFFFFF;transition:transform .15s ease}
.store:hover{transform:translateY(-2px) rotate(-1deg)}
.store svg{width:26px;height:26px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.08}
.store small{font-size:12px;font-weight:500}
.store b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.store.ios{background:var(--coral);box-shadow:0 5px 0 var(--coral-deep)}
.store.android{background:var(--petrol);box-shadow:0 5px 0 #06222B}
.store.light{background:var(--page);color:var(--forest);box-shadow:0 5px 0 #0C2B21}
.card{background:var(--app-card);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:20px 22px}

/* Phone */
.phone{position:relative;width:var(--pw,310px);padding:8px;background:#0B0A09;border-radius:calc(var(--pw,310px)*.14);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.phone img{width:100%;height:auto;border-radius:calc(var(--pw,310px)*.14 - 8px);aspect-ratio:390/846}
.phone::after{content:"";position:absolute;top:calc(8px + var(--pw,310px)*.03);left:50%;width:24%;height:calc(var(--pw,310px)*.068);transform:translateX(-50%);background:#000;border-radius:99px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:var(--sky);padding-top:env(safe-area-inset-top,0px);transition:box-shadow .2s}
.top.scrolled{box-shadow:0 1px 0 rgba(14,60,74,.18)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.top .wordmark{font-size:clamp(26px,2.3vw,32px);color:var(--petrol)}
.top nav{display:flex;align-items:center;gap:28px;font-family:var(--ui);font-weight:500;font-size:15px;color:var(--petrol)}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}
.top nav .pill{background:var(--petrol);color:#FFFFFF;padding:10px 18px;border-radius:999px;font-weight:700}
.top nav .pill:hover{text-decoration:none}
@media (max-width:820px){.top nav a:not(.pill){display:none}}

/* Hero */
.hero{background:var(--sky);color:var(--petrol);overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:56px;align-items:start;padding-top:44px}
.hero .copy{display:flex;flex-direction:column;gap:24px;padding-bottom:100px}
.hero .sticker{background:var(--petrol);color:var(--sky);--tilt:3deg}
.hero h1 em{color:var(--coral)}
.hero-art{position:relative;height:600px;margin-bottom:-1px}
.hero-art .phone{--pw:310px;position:absolute;left:50%;top:6px;margin-left:-163px;transform:rotate(-4deg);animation:float 7s ease-in-out infinite}
.hero-art .scribble{position:absolute;left:calc(50% + 175px);top:200px;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;transform:rotate(4deg);color:var(--petrol)}
.hero-art .arrow{position:absolute;left:calc(50% + 150px);top:280px;width:80px;height:60px}
@keyframes float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)}}
@media (max-width:1180px){.hero-art .scribble,.hero-art .arrow{display:none}}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .hero .copy{padding-bottom:0;gap:20px}
  .hero .stores{flex-direction:column}
  .hero .store{justify-content:center}
  .hero-art{height:470px}
  .hero-art .phone{--pw:240px;margin-left:-128px;top:20px;transform:none;animation:float-m 7s ease-in-out infinite}
}
@keyframes float-m{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Birds */
.birds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bird{position:absolute;left:-60px;width:34px;height:16px;color:var(--petrol);animation:fly linear infinite}
.bird svg{width:100%;height:100%;animation:flap .9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes fly{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}

/* Marquee */
.marquee{background:var(--petrol);color:var(--sky);border-block:3px solid var(--ink);overflow:hidden;padding-block:16px}
.marquee .track{display:flex;width:max-content;animation:roll 34s linear infinite}
.marquee span{font-family:var(--headline);font-weight:900;font-size:clamp(28px,3vw,44px);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:36px;padding-right:36px}
.marquee span::after{content:"✦";color:var(--candle);font-family:var(--ui);font-size:.55em}
@keyframes roll{to{transform:translateX(-50%)}}

/* Popes */
.popes{background:var(--walnut);color:var(--cream);padding-block:clamp(56px,6.7vw,96px)}
.popes .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.popes figure{display:flex;flex-direction:column;gap:12px}
.popes .q{font-family:var(--display);font-weight:600;font-size:clamp(72px,6.7vw,96px);line-height:.7;color:var(--candle);height:.5em}
.popes blockquote{font-family:var(--display);font-weight:600;font-size:clamp(23px,2vw,28px);line-height:1.22}
.popes cite{font-style:normal;font-family:var(--ui);font-size:13px;color:var(--tan);line-height:1.5}
.popes cite b{display:block;color:var(--cream);font-weight:700;letter-spacing:.12em}
@media (max-width:820px){.popes .wrap{grid-template-columns:1fr;gap:40px}}

/* Thesis */
.thesis{padding-block:var(--sec-top) var(--sec-bottom)}
.thesis .wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:80px;align-items:center}
.thesis .text{display:flex;flex-direction:column;gap:28px}
.thesis h2 em{color:var(--ocean)}
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 16px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s}
.tabs a:hover{transform:translateY(-2px) rotate(-2deg)}
.tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.arch{position:relative;width:min(400px,100%);margin:0}
.arch .frame{aspect-ratio:400/480;border-top-left-radius:50% 41.7%;border-top-right-radius:50% 41.7%;border-radius:200px 200px 16px 16px;overflow:hidden;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--coral);background:var(--ink)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.arch .pill{position:absolute;left:12%;bottom:44px;background:var(--ink);color:var(--cream);font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.04em;padding:8px 14px;border-radius:999px;transform:rotate(3deg)}
.arch figcaption{margin-top:26px;color:var(--muted)}
@media (max-width:900px){.thesis .wrap{grid-template-columns:1fr;gap:44px}.arch{width:min(300px,100%);justify-self:center}.arch .frame{border-radius:150px 150px 16px 16px}}

/* Place sections */
.place{padding-block:var(--sec-top) var(--sec-bottom);overflow:hidden}
.place .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.place .text{display:flex;flex-direction:column;gap:24px}
@media (max-width:900px){.place .wrap{grid-template-columns:1fr;gap:40px}}

.feed{background:var(--pink)}
.feed .label,.feed h2 em{color:var(--coral)}
.kinds{display:flex;flex-direction:column;gap:14px;list-style:none}
.kinds li{display:flex;gap:14px;align-items:center}
.kinds .ic{width:44px;height:44px;border-radius:50%;background:var(--page);border:2px solid var(--ink);display:grid;place-items:center;flex:none}
.kinds .ic svg{width:22px;height:22px;fill:none;stroke:var(--coral);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kinds b{display:block;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25}
.kinds i{font-size:15px;color:var(--muted)}
.feed .stage{position:relative;display:flex;flex-direction:column;gap:18px}
.feed .stage .sticker{position:absolute;right:24px;top:-18px;z-index:2;background:var(--coral);color:#FFFFFF;--tilt:4deg}
.prompt-card{background:var(--app-prompt);color:var(--app-paper);border-radius:22px;padding:24px 26px 26px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:16px}
.prompt-card .k{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.16em;color:#A9BDBA}
.prompt-card .k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prompt-card .p{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.1vw,30px);line-height:1.2}
.prompt-card .btns{display:flex;gap:10px}
.prompt-card .btns span{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:.12em}
.prompt-card .btns svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prompt-card .b1{background:var(--app-paper);color:var(--app-prompt)}
.prompt-card .b2{border:1.5px solid rgba(239,236,232,.45)}
.answer{transform:rotate(-1.2deg);display:flex;flex-direction:column;gap:12px}
.answer .who{display:flex;gap:12px;align-items:center;font-family:var(--body);font-size:17px}
.answer .who img{width:40px;height:40px;border-radius:50%}
.answer .who small{display:block;font-family:var(--ui);font-size:12px;color:var(--amuted)}
.answer .q{border-left:2px solid var(--app-prompt);padding-left:12px;font-style:italic;font-size:15px;color:var(--amuted);line-height:1.4}
.answer .meta{display:flex;gap:16px;align-items:center;font-family:var(--ui);font-size:14px;color:var(--amuted)}
.answer .meta svg{width:20px;height:20px}
.heart{fill:var(--coral);animation:pop 3.2s ease infinite;transform-origin:center}
@keyframes pop{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.35)}86%{transform:scale(.92)}}
@media (max-width:900px){.feed .stage .sticker{right:auto;left:110px}.answer{transform:none}}

.forum{background:var(--mint);color:var(--forest)}
.forum .label{color:var(--forest)}
.forum h2 em{color:var(--ink)}
.forum .stage{display:flex;flex-direction:column;gap:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips li{font-family:var(--ui);font-weight:500;font-size:14px;padding:8px 14px;border-radius:999px;background:var(--page);border:2px solid var(--forest)}
.chips li.on{background:var(--forest);color:var(--mint);transform:rotate(-3deg)}
.chips li.more{background:none;border:0;font-weight:700;padding-left:6px}
.thread{border-color:var(--forest);box-shadow:6px 6px 0 var(--forest);color:var(--ink);display:flex;flex-direction:column;gap:10px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-family:var(--ui);font-weight:500;font-size:12px;color:var(--ocean);background:var(--sage);padding:4px 10px;border-radius:999px}
.thread p{font-size:16px;color:var(--muted);line-height:1.5}
.thread .meta{font-family:var(--ui);font-size:13px;color:var(--amuted)}
@media (min-width:901px){.forum .stage{order:-1}}

/* Pen pals and the tide */
.penpals{background:var(--petrol);color:var(--sky);padding-block:var(--sec-top) calc(var(--sec-bottom) + 40px);overflow:hidden}
.penpals .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:64px}
.penpals .top-row{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:72px;align-items:center}
.penpals .text{display:flex;flex-direction:column;gap:24px}
.penpals .sticker{background:var(--candle);color:var(--petrol)}
.penpals h2 em{color:var(--page)}
.steps{list-style:none;display:flex;flex-direction:column;gap:18px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.steps .n{font-family:var(--headline);font-weight:900;font-size:48px;line-height:.85;color:var(--candle)}
.steps b{display:block;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;color:var(--page)}
.steps span{font-size:16px;line-height:1.48}
.tide-art{position:relative;height:720px}
.tide-art .phone{--pw:310px;position:absolute;left:50%;top:20px;margin-left:-163px;transform:rotate(3deg)}
.tide-art .postcard{position:absolute;left:-60px;bottom:40px;width:150px;height:auto;transform:rotate(-16deg);border-radius:4px;box-shadow:0 12px 24px rgba(0,0,0,.3);animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-16deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-12px)}}
.therese{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
.halo{width:96px;height:96px;border-radius:50%;overflow:hidden;border:3px solid var(--candle);background:var(--sky)}
.halo img{width:100%;height:auto;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.2);margin-top:4px}
.therese p{font-style:italic;font-size:17px;line-height:1.5;max-width:none}
.slow{background:var(--sky);color:var(--petrol);border-radius:24px;padding:26px 32px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:center}
.slow .label{font-size:12px;letter-spacing:.14em;display:block;margin-bottom:6px}
.transit{background:var(--page);border:2px solid var(--petrol);border-radius:16px;box-shadow:5px 5px 0 var(--petrol);padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.transit .label{font-size:10px}
.route{position:relative;height:32px}
.route::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(14,60,74,.4)}
.route .dove{position:absolute;top:50%;left:0;width:34px;height:34px;margin-top:-17px;animation:carry 9s ease-in-out infinite}
.route .dove svg{width:100%;height:100%;animation:flap 1s ease-in-out infinite}
.route .end{position:absolute;right:-2px;top:50%;width:18px;height:14px;margin-top:-7px;border:2px solid var(--petrol);border-radius:3px;background:var(--cream)}
@keyframes carry{0%{left:0;opacity:0}8%{opacity:1}80%{left:calc(100% - 52px);opacity:1}90%,100%{left:calc(100% - 52px);opacity:0}}
.transit small{font-family:var(--ui);font-size:12px;color:var(--muted)}
@media (max-width:1100px){.penpals .top-row{grid-template-columns:1fr;gap:36px}.tide-art{height:600px;max-width:480px;width:100%;justify-self:center}.tide-art .phone{--pw:250px;margin-left:-133px;transform:none}.tide-art .postcard{left:-6px;width:100px;bottom:6px}}
@media (max-width:700px){.slow{grid-template-columns:1fr;padding:22px 20px}.therese{grid-template-columns:80px 1fr}.halo{width:80px;height:80px}.therese p{font-size:15px}}

.sky-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.sky-deco .moon{position:absolute;top:28px;right:clamp(24px,10vw,150px);width:112px;height:112px}
.sky-deco .moon i{position:absolute;inset:0;border-radius:50%}
.sky-deco .moon i:first-child{background:var(--cream);transform:translateX(12px)}
.sky-deco .moon i:last-child{background:var(--moon)}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--sky);animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.85}}
.mark{position:absolute;width:28px;height:10px;animation:bobmark 5s ease-in-out infinite}
.mark path{fill:none;stroke:var(--sky);stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}
@keyframes bobmark{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.wave-line{position:absolute;left:0;width:200%;height:24px;animation:drift 32s linear infinite}
.wave-line path{fill:none;stroke:var(--tide-line);stroke-opacity:.35;stroke-width:1.6}
.sea{position:absolute;left:0;bottom:0;width:200%;height:150px;animation:drift 28s linear infinite}
.sea.back{bottom:30px;animation-duration:40s;animation-direction:reverse}
.sea path{fill:var(--tide-wave)}
.sea.back path{fill:var(--tide-deep)}
@keyframes drift{to{transform:translateX(-50%)}}
.penpals .birds .bird{color:var(--sky)}
@media (max-width:700px){.sky-deco .moon{width:64px;height:64px;top:26px}.sky-deco .moon i:first-child{transform:translateX(8px)}.sea{height:110px}}

/* Journal */
.journal{background:var(--night);color:var(--cream);padding-block:var(--sec-top) var(--sec-bottom);overflow:hidden}
.journal .wrap{position:relative;display:flex;flex-direction:column;gap:64px}
.burst{position:absolute;width:620px;height:620px;right:-200px;top:-220px;opacity:.08;color:var(--candle);animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.journal .intro{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:80px;align-items:end}
.journal .intro > div{display:flex;flex-direction:column;gap:22px}
.journal .sticker{background:var(--candle);color:var(--night);--tilt:3deg}
.journal h2 em{color:var(--candle)}
.journal .intro .note{color:var(--night-muted);font-size:17px}
.jrow{display:grid;grid-template-columns:420px minmax(0,1fr);gap:56px;align-items:center}
.jart{position:relative;height:700px}
.jart .glow{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-230px 0 0 -210px;border-radius:50%;background:var(--candle);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
.jart .phone{--pw:300px;position:absolute;left:50%;top:10px;margin-left:-158px;transform:rotate(-3deg)}
.practices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.practice{border-radius:22px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.practice .k{display:flex;gap:10px;align-items:center;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.practice .k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.practice b{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2}
.practice p{font-size:15px;line-height:1.48;opacity:.88}
.pr-verse{background:var(--walnut);color:var(--cream)} .pr-verse .k{color:var(--candle)}
.pr-lectio{background:var(--cream);color:var(--ink)} .pr-lectio .k{color:var(--coral)}
.pr-photo{background:var(--pink);color:var(--ink)} .pr-photo .k{color:var(--ink)}
.pr-examen{background:var(--petrol);color:var(--sky)} .pr-examen .k{color:var(--candle)}
.visio{background:var(--night-raised);border:1px solid var(--night-line);border-radius:28px;padding:36px 44px 36px 36px;display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:52px;align-items:center}
.painting{position:relative;aspect-ratio:1400/999;border-radius:16px;background:#000}
.painting .canvas{position:absolute;inset:0;border-radius:16px;overflow:hidden}
.painting .canvas img{width:100%;height:100%;object-fit:cover;animation:pan 18s ease-in-out infinite;transform-origin:20% 40%}
@keyframes pan{0%,100%{transform:scale(1)}45%,60%{transform:scale(1.12) translate(2%,1%)}}
.painting .markbox{position:absolute;left:8.8%;top:26.2%;width:18.3%;height:25.7%;border:2px solid var(--cream);border-radius:4px;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(246,234,214,.5)}50%{box-shadow:0 0 0 8px rgba(246,234,214,0)}}
.painting .zoom{position:absolute;right:-30px;bottom:-42px;width:35%;aspect-ratio:1;border-radius:14px;border:3px solid var(--candle);box-shadow:6px 6px 0 #000;background:url(img/jerome.webp) 11.45% 35.4%/588% auto no-repeat}
.visio .text{display:flex;flex-direction:column;gap:18px}
.visio .k{display:flex;gap:10px;align-items:center;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--candle)}
.visio .k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.visio p{color:var(--night-muted);font-size:17px}
.visio .caption{color:#9C8C74}
.dictate{background:var(--candle);color:var(--night);border-radius:28px;padding:28px 44px 28px 36px;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:32px;align-items:center}
.cath{position:relative;width:150px;height:150px}
.cath::before{content:"";position:absolute;left:5px;top:12px;width:140px;height:140px;border-radius:50%;background:var(--coral);border:3px solid var(--night)}
.cath img{position:absolute;left:15px;top:-30px;width:120px;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.2)}
.dictate .text{display:flex;flex-direction:column;gap:10px}
.dictate .note{color:var(--walnut);font-size:15px}
.mic{display:flex;align-items:center;gap:14px}
.bars{display:flex;align-items:center;gap:6px;height:44px}
.bars i{display:block;width:4px;height:100%;border-radius:4px;background:var(--night);animation:sound 1.1s ease-in-out infinite;transform-origin:center}
.bars i:nth-child(1){animation-delay:-.2s}.bars i:nth-child(2){animation-delay:-.6s}.bars i:nth-child(3){animation-delay:-.1s}.bars i:nth-child(4){animation-delay:-.8s}.bars i:nth-child(5){animation-delay:-.4s}.bars i:nth-child(6){animation-delay:-.7s}
@keyframes sound{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.mic-btn{position:relative;width:84px;height:84px;border-radius:50%;background:var(--ocean);border:3px solid var(--night);box-shadow:5px 5px 0 var(--night);display:grid;place-items:center}
.mic-btn::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--ocean);animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.5);opacity:0}}
.mic-btn svg{width:38px;height:38px;fill:none;stroke:var(--cream);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){.jrow{grid-template-columns:1fr;gap:32px}.jart{height:600px;max-width:420px;width:100%;justify-self:center}.jart .phone{--pw:250px;margin-left:-133px;transform:none}.jart .glow{width:340px;height:340px;margin:-190px 0 0 -170px}}
@media (max-width:900px){.journal .intro{grid-template-columns:1fr;gap:20px}.visio{grid-template-columns:1fr;padding:20px 20px 24px;gap:28px}.painting .zoom{right:-6px;bottom:-6px;width:38%}.dictate{grid-template-columns:1fr;padding:24px 22px 26px;gap:18px}.cath{width:120px;height:120px}.cath::before{width:112px;height:112px}.cath img{width:96px;left:12px;top:-24px}.burst{width:420px;height:420px;right:-140px;top:-160px}}
@media (max-width:640px){.practices{grid-template-columns:1fr}}

/* Download */
.download{background:var(--forest);color:var(--mint);padding-block:var(--sec-top) var(--sec-bottom);overflow:hidden}
.download .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:start}
.download .text{display:flex;flex-direction:column;gap:26px}
.download .label{color:var(--page)}
.download h2 em{color:var(--page)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{border-radius:22px;padding:22px;font-family:var(--ui)}
.plan h3{font-family:var(--headline);font-weight:900;font-size:38px;line-height:1;text-transform:uppercase}
.plan ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px;font-size:15px;line-height:1.4}
.plan li::before{content:"✦ ";color:var(--forest)}
.plan.plus{background:var(--cream);color:var(--ink);transform:rotate(-1.5deg)}
.plan.plus li::before{color:var(--coral)}
.plan.free{background:var(--mint);color:var(--forest)}
.plan .price{font-size:12px;margin-top:14px;opacity:.85;line-height:1.45}
.waitlist{position:relative;background:var(--sky);color:var(--petrol);border:3px solid var(--petrol);border-radius:28px;box-shadow:10px 10px 0 var(--petrol);padding:44px 40px 40px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:90px}
.waitlist .sticker{position:absolute;top:-18px;right:30px;background:var(--cobalt);color:#FFFFFF;--tilt:-5deg}
.waitlist p{font-size:18px}
.waitlist form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.field{display:flex;gap:10px;flex-wrap:wrap}
.field input{flex:1 1 220px;min-width:0;font-family:var(--ui);font-size:16px;padding:15px 16px;border-radius:14px;border:2px solid var(--petrol);background:var(--page);color:var(--ink)}
.field button{font-family:var(--ui);font-weight:700;font-size:15px;padding:15px 20px;border-radius:14px;border:0;background:var(--petrol);color:var(--sky);cursor:pointer}
.field button[disabled]{opacity:.6;cursor:default}
.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--ui);font-size:13px;line-height:1.5;cursor:pointer}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--petrol);flex:none}
.hp{position:absolute;left:-9999px}
.status{font-family:var(--ui);font-size:14px;font-weight:500;min-height:1.4em}
.status.err{color:#8E2A14}
@media (max-width:900px){.download .wrap{grid-template-columns:1fr;gap:56px}.waitlist{padding:36px 22px 28px;box-shadow:7px 7px 0 var(--petrol)}.waitlist .sticker{right:16px}.field button{flex:1 1 100%}}
@media (max-width:460px){.plans{grid-template-columns:1fr}.plan.plus{transform:none}}

/* FAQ */
.faq{padding-block:var(--sec-top) var(--sec-bottom)}
.faq .wrap{display:grid;grid-template-columns:380px minmax(0,1fr);gap:88px}
.faq h2 em{color:var(--cobalt)}
details{border-top:2px solid var(--ink);padding-block:18px}
details:last-child{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,22px);line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--petrol);font-family:var(--ui);font-weight:500;font-size:18px}
details[open] summary::after{content:"–";background:var(--petrol);color:var(--sky)}
details p{margin-top:10px;font-size:17px}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr;gap:28px}}

/* Footer */
footer{background:var(--ink);color:var(--tan);padding-block:52px calc(52px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 40px;font-family:var(--ui);font-size:14px}
footer .wordmark{color:var(--cream);font-size:30px}
footer small{display:block;margin-top:8px;font-size:12px;opacity:.7}
footer nav{display:flex;flex-wrap:wrap;gap:10px 26px}
footer a{text-decoration:none}
footer a:hover{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .birds{display:none}
}

/* Cookie question */
.consent{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;max-width:420px;background:var(--petrol);color:var(--sky);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:20px 22px;display:flex;flex-direction:column;gap:14px;font-family:var(--ui);font-size:14px;line-height:1.5}
.consent[hidden]{display:none}
.consent b{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.25;color:var(--page);margin-bottom:4px}
.consent a{color:var(--sky)}
.consent-btns{display:flex;gap:10px}
.consent-btns button{flex:1;font-family:var(--ui);font-weight:700;font-size:15px;padding:12px 14px;border-radius:12px;cursor:pointer;border:2px solid var(--sky)}
.consent-btns [data-consent="no"]{background:transparent;color:var(--sky)}
.consent-btns [data-consent="yes"]{background:var(--sky);color:var(--petrol)}
@media (max-width:600px){.consent{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* John Paul II beside the Journal intro */
.jp2{display:flex;flex-direction:column;gap:18px;margin:0}
.jp2 .frame{width:200px;aspect-ratio:5/6;border-radius:100px 100px 14px 14px;overflow:hidden;border:3px solid var(--candle);box-shadow:8px 8px 0 var(--walnut);transform:rotate(2deg);background:var(--cream)}
.jp2 img{width:100%;height:100%;object-fit:cover;object-position:30% 20%}
.jp2 figcaption{color:var(--night-muted);font-size:17px}
@media (max-width:900px){.jp2{flex-direction:row;align-items:center;gap:18px}.jp2 .frame{width:110px;flex:none;border-radius:55px 55px 10px 10px}.jp2 figcaption{font-size:15px}}

.answer .who .initials{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-family:var(--ui);font-weight:700;font-size:14px;flex:none}