@font-face { font-family: Outfit; src: url('assets/Outfit-Regular.woff2') format('woff2'), url('assets/Outfit-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url('assets/Outfit-Medium.woff2') format('woff2'), url('assets/Outfit-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Outfit; src: url('assets/Outfit-Bold.woff2') format('woff2'), url('assets/Outfit-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Sequel; src: url('assets/Sequel-Wide.woff2') format('woff2'), url('assets/Sequel-Wide.otf') format('opentype'); font-weight: 400; font-display: swap; }

/* --blue/--pink are display and fill colours. --blue-ink/--pink-ink are their
   text-safe counterparts: both clear 4.5:1 on paper, cream, pink-soft and yellow. */
:root { color-scheme:light; --ink:#191518; --paper:#fffdf8; --cream:#fff5e7; --yellow:#ffca2c; --pink:#f4a5cd; --pink-ink:#c52675; --pink-soft:#fbe7f2; --blue:#2867dd; --blue-ink:#1551c1; --mint:#c7efc4; --orange:#ff7c43; --muted:#5f565c; --line:#ded7d0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Outfit,Arial,sans-serif; font-size:16px; line-height:1.5; }
img { display:block; max-width:100%; }
picture { display:contents; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--blue-ink); outline-offset:4px; border-radius:4px; }
.app :focus-visible,.today-card :focus-visible,.rhythm-intro :focus-visible,.site-footer :focus-visible { outline-color:var(--yellow); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; color:#fff; background:var(--ink); border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
main:focus { outline:none; }

.site-header { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:12px clamp(24px,5vw,82px); background:rgba(255,253,248,.92); border-bottom:1px solid transparent; backdrop-filter:blur(15px); transition:border-color .2s ease,box-shadow .2s ease; }
.site-header.is-scrolled { border-color:rgba(25,21,24,.1); box-shadow:0 8px 28px rgba(25,21,24,.07); }
.brand { display:flex; align-items:center; gap:9px; min-width:190px; }
.brand-icon { display:grid; place-items:center; width:34px; height:34px; color:var(--yellow); background:var(--ink); border-radius:11px 11px 11px 4px; font-size:20px; font-weight:700; }
.brand-type { font-family:Sequel,Georgia,serif; font-size:17px; line-height:.9; letter-spacing:-.05em; }
.brand-note { color:var(--muted); font-size:9px; line-height:1.08; text-transform:uppercase; letter-spacing:.06em; }
.main-nav { display:flex; align-items:center; gap:clamp(14px,2.2vw,38px); color:#453d43; font-size:13px; font-weight:500; }
.main-nav>a:not(.nav-button) { position:relative; padding:4px 0; }
.main-nav>a:not(.nav-button):hover { color:var(--blue-ink); }
.main-nav>a[aria-current='true'] { color:var(--blue-ink); font-weight:700; }
.main-nav>a[aria-current='true']::after { content:''; position:absolute; right:0; bottom:-2px; left:0; height:2px; background:var(--blue-ink); border-radius:999px; }
.nav-button,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; font-size:13px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease; }
.nav-button { padding:12px 17px; color:#fff; background:var(--ink); }
.nav-button:hover,.button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(25,21,24,.15); }
.menu-button { display:none; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; }
.menu-lines { display:grid; gap:5px; }
.menu-lines i { display:block; width:18px; height:2px; background:var(--ink); transition:transform .2s ease; }
.menu-button[aria-expanded='true'] .menu-lines i:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded='true'] .menu-lines i:last-child { transform:translateY(-3.5px) rotate(-45deg); }

.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:min(760px,calc(100vh - 76px)); background:var(--yellow); }
.hero-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(58px,7vw,104px) clamp(24px,5.2vw,84px); }
.eyebrow,.section-label { display:flex; align-items:center; gap:9px; margin:0 0 21px; color:var(--blue-ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; }
.eyebrow span { width:25px; height:3px; background:currentColor; border-radius:999px; }
h1,h2,h3 { margin:0; overflow-wrap:break-word; font-family:Sequel,Georgia,serif; font-weight:400; letter-spacing:-.01em; line-height:1.08; }
h1 { max-width:620px; font-size:clamp(40px,5.3vw,76px); line-height:1.08; }
h1 em { color:var(--blue); font-style:normal; }
.hero-intro { max-width:455px; margin:29px 0 0; color:rgba(25,21,24,.8); font-size:clamp(17px,1.55vw,21px); line-height:1.38; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:34px; }
.button { min-height:49px; padding:13px 20px; }
.button-ink { color:#fff; background:var(--ink); }
.button-ink:hover { background:var(--blue-ink); }
.button-yellow { color:var(--ink); background:var(--yellow); }
.button-paper { color:var(--ink); background:var(--paper); }
.plain-button { display:inline-flex; align-items:center; gap:8px; padding:10px 0; color:var(--ink); background:transparent; border:0; font-size:13px; font-weight:700; }
.plain-button:hover { color:var(--blue-ink); transform:translateX(3px); }
.play-dot { display:grid; place-items:center; width:20px; height:20px; padding-left:1px; color:#fff; background:var(--blue-ink); border-radius:50%; font-size:8px; }
.hero-footnote { display:flex; align-items:center; gap:8px; max-width:325px; margin:47px 0 0; color:rgba(25,21,24,.75); font-size:11px; line-height:1.35; }
.hero-footnote span { flex:0 0 auto; width:8px; height:8px; background:var(--blue-ink); border-radius:50%; }
.hero-media { position:relative; min-width:0; min-height:clamp(560px,calc(100vh - 76px),760px); overflow:hidden; background:#e3ad16; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }

.hero-carousel { position:absolute; inset:0; }
.hero-carousel-viewport { position:absolute; inset:0; overflow:hidden; }
.hero-slides { position:relative; height:100%; }
.hero-slide { position:absolute; inset:0; display:block; margin:0; opacity:0; visibility:hidden; background:#e3ad16; transform:scale(1.025); transition:opacity .55s ease,transform .7s ease,visibility 0s linear .55s; }
.hero-slide.is-active { opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; }
.hero-slide picture,.hero-slide img { display:block; width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; }
.hero-carousel-ui { position:absolute; z-index:5; left:clamp(22px,4vw,64px); right:auto; bottom:clamp(20px,3vw,44px); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 44px); padding:8px 10px; color:#fff; background:rgba(25,21,24,.78); border:1px solid rgba(255,255,255,.24); border-radius:999px; backdrop-filter:blur(10px); }
.hero-carousel-count { flex:0 0 auto; color:rgba(255,255,255,.78); font-size:10px; font-weight:700; letter-spacing:.11em; }
.hero-carousel-controls { display:flex; align-items:center; gap:6px; }
.carousel-button { display:grid; place-items:center; width:32px; height:32px; padding:0; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:50%; font-size:15px; line-height:1; }
.carousel-button:hover { color:var(--ink); background:var(--yellow); }
.carousel-button:focus-visible,.hero-carousel-dot:focus-visible { outline-color:#fff; outline-offset:3px; }
.hero-carousel-dots { display:flex; align-items:center; gap:6px; padding:0 3px; }
.hero-carousel-dot { width:7px; height:7px; padding:0; background:rgba(255,255,255,.45); border:0; border-radius:50%; }
.hero-carousel-dot[aria-selected="true"] { width:20px; background:var(--yellow); border-radius:999px; }

.sun-sticker { position:absolute; right:clamp(22px,4vw,64px); bottom:44px; display:flex; flex-direction:column; align-items:center; min-width:120px; padding:16px 13px; color:#fff; background:var(--blue-ink); border-radius:50%; text-align:center; transform:rotate(7deg); box-shadow:0 13px 23px rgba(25,21,24,.16); }
.sun-sticker strong { font-size:25px; line-height:1; }
.sun-sticker span,.sun-sticker small { font-size:9px; line-height:1.18; text-transform:uppercase; letter-spacing:.08em; }
.hero-side-note { position:absolute; top:31px; right:clamp(21px,4vw,64px); max-width:190px; margin:0; padding:13px 16px; color:#fff; background:var(--ink); border-radius:16px 16px 4px 16px; font-size:13px; line-height:1.25; text-align:right; box-shadow:0 12px 26px rgba(25,21,24,.22); }
.hero-side-note b { display:block; margin-top:2px; color:var(--yellow); font-size:16px; }

.ticker { overflow:hidden; padding:13px 0; color:#fff; background:var(--ink); white-space:nowrap; }
.ticker-track { display:inline-flex; align-items:center; gap:30px; min-width:max-content; animation:ticker 25s linear infinite; font-family:Sequel,Georgia,serif; font-size:17px; letter-spacing:-.01em; }
.ticker-track b { color:var(--yellow); font-family:Outfit,sans-serif; }
@keyframes ticker { to { transform:translateX(-25%); } }

.section { padding:clamp(84px,10vw,154px) clamp(24px,7.4vw,120px); }
.story { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:clamp(44px,9vw,145px); }
.story-copy { max-width:545px; }
h2 { font-size:clamp(37px,4.65vw,64px); }
.story h2 em,.gallery-caption em { color:var(--pink-ink); font-style:normal; }
.today h2 em,.app h2 em,.join h2 em { font-style:normal; }
.story-copy>p:not(.section-label),.family-copy>p:not(.section-label),.app-copy>p:not(.section-label),.join>p:not(.section-label):not(.form-note):not(.join-error) { max-width:515px; margin:27px 0 0; color:var(--muted); font-size:17px; line-height:1.56; }
.arrow-link { display:inline-flex; align-items:center; gap:9px; margin-top:29px; color:var(--blue-ink); font-size:13px; font-weight:700; }
.arrow-link:hover { gap:13px; text-decoration:underline; text-underline-offset:4px; }
.story-photo { margin:0; padding:12px; background:var(--pink-soft); border-radius:28px; }
.story-photo img { width:100%; aspect-ratio:1.77; object-fit:cover; border-radius:20px; }
.story-photo figcaption { display:flex; justify-content:space-between; gap:15px; padding:14px 6px 2px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.story-photo figcaption span:last-child { color:var(--pink-ink); }

.rhythm { background:var(--pink-soft); }
.centered { display:flex; flex-direction:column; align-items:center; text-align:center; }
.centered h2 em { color:var(--blue-ink); font-style:normal; }
.centered>p:last-child { max-width:545px; margin:25px 0 0; color:var(--muted); font-size:17px; }
.rhythm-layout { display:grid; grid-template-columns:.64fr 1.36fr; gap:clamp(35px,7.5vw,102px); max-width:1050px; margin:64px auto 0; }
.rhythm-intro { align-self:start; padding:29px; color:#fff; background:var(--ink); border-radius:25px; box-shadow:0 17px 31px rgba(25,21,24,.11); }
.tiny-number { color:var(--yellow); font-size:12px; font-weight:700; letter-spacing:.14em; }
.rhythm-intro h3 { max-width:260px; margin-top:51px; font-size:29px; }
.rhythm-intro>p { margin:22px 0 0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.55; }
.rhythm-total { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:42px; padding-top:17px; border-top:1px solid rgba(255,255,255,.18); }
.rhythm-total span { color:rgba(255,255,255,.66); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.rhythm-total strong { color:var(--yellow); font-size:18px; }
.rhythm-steps { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.rhythm-steps li { display:grid; grid-template-columns:46px minmax(min-content,1fr) minmax(0,.9fr) auto; align-items:center; gap:12px; min-height:70px; padding:11px 17px 11px 10px; background:#fff; border:1px solid rgba(25,21,24,.11); border-radius:999px; }
.number { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--ink); border-radius:50%; font-size:12px; font-weight:700; }
.rhythm-steps li:nth-child(even) .number { color:var(--ink); background:var(--yellow); }
.step-title { font-family:Sequel,Georgia,serif; font-size:16px; letter-spacing:-.02em; }
.step-detail,.step-time { color:var(--muted); font-size:12px; }
.step-time { color:var(--pink-ink); font-weight:700; }

.today { display:grid; grid-template-columns:.93fr 1.07fr; align-items:center; gap:clamp(43px,9vw,146px); background:var(--paper); }
.today-card { padding:clamp(28px,4vw,49px); background:var(--ink); border-radius:29px; }
.today-card .section-label { color:var(--yellow); }
.today-card h2 { color:#fff; }
.today-card h2 em { color:var(--pink); }
.scripture { margin:26px 0 0; padding:0 0 0 18px; border-left:3px solid var(--yellow); }
.scripture p { margin:0; font-family:Sequel,Georgia,serif; font-size:17px; line-height:1.36; letter-spacing:-.015em; }
.scripture cite { display:block; margin-top:10px; color:var(--blue-ink); font-size:11px; font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.today-card .scripture p { color:#fff; }
.today-card .scripture cite { color:var(--yellow); }
.today-copy { margin:24px 0 0; color:rgba(255,255,255,.76); font-size:16px; line-height:1.58; }
.today-prompt { display:flex; flex-direction:column; gap:4px; margin:29px 0; padding:17px; background:rgba(255,255,255,.09); border-radius:15px; }
.today-prompt span,.dialog-prompt span { color:var(--yellow); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.today-prompt strong { color:#fff; font-size:14px; }
.today-gallery { position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:17px; min-height:500px; }
.today-gallery figure { margin:0; overflow:hidden; border-radius:24px; }
.today-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.today-gallery figure:hover img { transform:scale(1.04); }
.gallery-large { height:440px; }
.gallery-small { height:270px; margin-bottom:25px!important; }
.gallery-small.pink { background:var(--pink-soft); }
.gallery-burst { position:absolute; top:15px; right:5%; display:grid; place-items:center; width:108px; height:108px; color:#fff; background:var(--blue-ink); border-radius:50%; font-family:Sequel,Georgia,serif; font-size:19px; line-height:1.02; letter-spacing:-.01em; text-align:center; transform:rotate(9deg); }

.gallery-section { padding:0 clamp(24px,7.4vw,120px) clamp(84px,10vw,150px); }
.gallery-caption { padding:clamp(50px,7vw,91px) 0 clamp(38px,5vw,67px); text-align:center; }
.gallery-caption p { margin:0; font-family:Sequel,Georgia,serif; font-size:clamp(28px,4vw,54px); line-height:1.1; letter-spacing:-.01em; }
.photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.photo-grid figure { position:relative; min-height:350px; margin:0; overflow:hidden; border-radius:24px; background:var(--cream); }
.photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.photo-grid figure:hover img { transform:scale(1.04); }
.photo-grid figcaption { position:absolute; bottom:15px; left:15px; padding:9px 12px; color:var(--ink); background:var(--paper); border-radius:999px; font-size:11px; font-weight:700; }

.family { display:grid; grid-template-columns:1.18fr .82fr; align-items:center; gap:clamp(42px,8vw,130px); background:var(--yellow); }
.family-images { position:relative; display:grid; place-items:center; min-height:440px; padding:44px 24px 54px; overflow:hidden; background:var(--pink-soft); border-radius:29px; }
/* The app screen is real text, not a screenshot: it stays sharp at any zoom,
   can be selected and translated, and is read out in full by a screen reader. */
.phone-wrap { display:flex; flex-direction:column; align-items:flex-end; width:min(100%,318px); }
.phone { width:100%; padding:9px; background:var(--ink); border-radius:34px; box-shadow:0 22px 44px rgba(25,21,24,.24); }
.phone-bar { display:grid; place-items:center; height:19px; }
.phone-bar span { width:74px; height:5px; background:rgba(255,255,255,.28); border-radius:999px; }
.phone-screen { padding:20px 19px 24px; background:var(--paper); border-radius:26px; }
.phone-day { margin:0; color:var(--blue-ink); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.phone-eyebrow { margin:16px 0 0; color:var(--muted); font-size:12px; }
.phone-topic { margin:5px 0 0; font-family:Sequel,Georgia,serif; font-size:22px; line-height:1.12; letter-spacing:-.01em; }
.phone-topic em { color:var(--pink-ink); font-style:normal; }
.phone-roles-label { margin:21px 0 0; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
.phone-roles { display:flex; flex-direction:column; gap:9px; margin:13px 0 0; padding:0; list-style:none; counter-reset:role; }
.phone-roles li { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; }
.phone-dot { display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; background:var(--yellow); border-radius:7px 7px 7px 2px; counter-increment:role; font-size:9px; font-weight:700; }
.phone-dot::before { content:counter(role,decimal-leading-zero); }
.phone-roles li:nth-child(even) .phone-dot { color:#fff; background:var(--blue-ink); }
.family-note { position:relative; z-index:1; margin:-18px -12px 0 0; display:flex; flex-direction:column; gap:3px; max-width:172px; padding:12px 15px; color:#fff; background:var(--blue-ink); border-radius:16px 16px 4px 16px; font-size:12px; line-height:1.35; box-shadow:0 12px 26px rgba(25,21,24,.22); }
.family-note b { color:var(--yellow); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.family-copy h2 { max-width:520px; }
.family-copy h2 em { color:var(--blue); font-style:normal; }
.family-copy>p:not(.section-label) { color:rgba(25,21,24,.78); }
.family-copy ul { display:flex; flex-direction:column; gap:12px; margin:28px 0 0; padding:0; list-style:none; font-size:14px; }
.family-copy li { display:flex; align-items:center; gap:10px; }
.family-copy li span { display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; color:#fff; background:var(--blue-ink); border-radius:50%; font-size:11px; font-weight:700; }

.app { display:grid; grid-template-columns:.84fr 1.16fr; align-items:center; gap:clamp(42px,8vw,130px); color:#fff; background:var(--ink); }
.app .section-label { color:var(--yellow); }
.app h2 em { color:var(--yellow); }
.app-copy>p:not(.section-label) { color:rgba(255,255,255,.75); }
.app-check { display:flex; align-items:flex-start; gap:13px; margin-top:27px; }
.app-check>span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:12px 12px 12px 4px; font-size:11px; font-weight:700; }
.app-check div { display:flex; flex-direction:column; gap:3px; }
.app-check b { font-size:14px; }
.app-check small { color:rgba(255,255,255,.68); font-size:12px; }
.app-copy .button { margin-top:33px; }
.app-image { overflow:hidden; border-radius:29px; background:#282228; }
.app-image img { width:100%; aspect-ratio:1.77; object-fit:cover; }

.faq { background:var(--cream); }
.faq .centered { margin-bottom:clamp(38px,5vw,60px); }
.faq-list { display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; }
.faq-list details { background:var(--paper); border:1px solid rgba(25,21,24,.1); border-radius:22px; transition:border-color .2s ease,box-shadow .2s ease; }
.faq-list details[open] { border-color:rgba(25,21,24,.16); box-shadow:0 12px 28px rgba(25,21,24,.07); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px,3vw,30px); font-family:Sequel,Georgia,serif; font-size:clamp(17px,1.7vw,21px); letter-spacing:-.015em; line-height:1.25; list-style:none; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:50%; font-family:Outfit,sans-serif; font-size:19px; font-weight:700; transition:transform .25s ease; }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list summary:hover { color:var(--blue-ink); }
.faq-list details>p { margin:0; padding:0 clamp(20px,3vw,30px) 25px; color:var(--muted); font-size:16px; line-height:1.6; }

.join { display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--pink-soft); }
.join-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:25px; color:var(--yellow); background:var(--ink); border-radius:16px 16px 16px 5px; font-size:24px; }
.join h2 em { color:var(--blue-ink); }
.join>p:not(.section-label):not(.form-note):not(.join-error) { max-width:510px; }
.join-form { display:flex; width:min(100%,540px); gap:10px; margin-top:33px; }
.join-form input { flex:1; min-width:0; padding:13px 17px; color:var(--ink); background:#fff; border:1px solid rgba(25,21,24,.28); border-radius:999px; }
.join-form input::placeholder { color:#6f666d; }
.join-form input[aria-invalid='true'] { border-color:var(--pink-ink); box-shadow:0 0 0 3px rgba(197,38,117,.16); }
.join-error { margin:14px 0 0; color:var(--pink-ink); font-size:13px; font-weight:700; }
.join-success { margin-top:33px; padding:14px 18px; color:var(--ink); background:var(--yellow); border-radius:999px; font-size:13px; font-weight:700; }
.form-note { margin:14px 0 0; color:var(--muted); font-size:11px; }

.site-footer { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:52px; padding:63px clamp(24px,7.4vw,120px) 25px; color:#fff; background:var(--ink); }
.footer-brand>p { margin:25px 0 0; color:var(--yellow); font-family:Sequel,Georgia,serif; font-size:19px; line-height:1.15; letter-spacing:-.015em; }
.site-footer .brand-icon { background:var(--yellow); color:var(--ink); }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.footer-links div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-links strong { margin-bottom:7px; color:var(--pink); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.footer-links a { color:rgba(255,255,255,.72); font-size:12px; }
.footer-links a:hover { color:var(--yellow); text-decoration:underline; text-underline-offset:3px; }
.footer-note { display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.footer-note p { max-width:260px; margin:0; color:rgba(255,255,255,.66); font-size:12px; line-height:1.55; }
.footer-note span { padding-top:18px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.2); font-size:10px; }

.sample-dialog { width:min(100% - 36px,550px); max-height:calc(100vh - 36px); padding:clamp(30px,5vw,48px); color:var(--ink); background:var(--paper); border:0; border-radius:27px; box-shadow:0 27px 75px rgba(25,21,24,.32); }
.sample-dialog::backdrop { background:rgba(25,21,24,.65); backdrop-filter:blur(7px); }
.sample-dialog h2 { font-size:clamp(34px,5vw,53px); }
.sample-dialog>p:not(.section-label) { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.58; }
.dialog-close { position:absolute; top:17px; right:17px; display:grid; place-items:center; width:34px; height:34px; padding:0; color:var(--ink); background:var(--pink-soft); border:0; border-radius:50%; font-size:24px; line-height:1; }
.dialog-close:hover { background:var(--yellow); }
.dialog-prompt { display:flex; flex-direction:column; gap:4px; margin-top:20px; padding:15px 16px; background:var(--pink-soft); border-radius:15px; }
.dialog-prompt span { color:var(--blue-ink); }
.dialog-prompt strong { font-size:14px; }
.sample-dialog .button { margin-top:28px; }

/* Reveal-on-scroll is opt-in: without JS (or with reduced motion) everything
   stays visible, so no content depends on the observer running. */
.js .reveal { opacity:0; transform:translateY(25px); transition:opacity .6s ease,transform .6s ease; }
.js .reveal-delay { transition-delay:.12s; }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }

.page-center { min-height:100vh; justify-content:center; }
.legal { max-width:760px; margin:0 auto; }
.legal h1 { margin-bottom:8px; font-size:clamp(29px,6.4vw,62px); }
.legal h2 { margin-top:48px; font-size:clamp(24px,2.6vw,32px); }
.legal p,.legal li { color:var(--muted); font-size:16px; line-height:1.68; }
.legal p { margin:18px 0 0; }
.legal ul { margin:18px 0 0; padding-left:22px; }
.legal li { margin-top:9px; }
.legal a:not(.button) { color:var(--blue-ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.legal .button { margin-top:44px; }
.legal .updated { margin-top:14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }

@media (max-width:920px) { .site-header { min-height:68px; } .brand-note { display:none; } .menu-button { display:grid; } .main-nav:not(.main-nav-plain) { position:absolute; top:calc(100% + 1px); right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 42px rgba(25,21,24,.13); } .main-nav.is-open { display:flex; } .main-nav>a:not(.nav-button) { padding:12px 10px; } .main-nav>a[aria-current='true']::after { display:none; } .main-nav:not(.main-nav-plain) .nav-button { justify-content:center; margin-top:5px; } .hero { grid-template-columns:1fr; } .hero-copy { min-height:575px; } .hero-media,.hero-media img { min-height:490px; } .story,.today,.family,.app { grid-template-columns:1fr; } .rhythm-layout { grid-template-columns:1fr; margin-top:48px; } .rhythm-intro h3 { margin-top:34px; } .photo-grid { grid-template-columns:repeat(2,1fr); } .site-footer { grid-template-columns:1fr 1fr; } .footer-note { grid-column:span 2; } }
@media (max-width:700px) { .section { padding:78px 24px; } h1 { font-size:clamp(34px,9.6vw,56px); } h2 { font-size:clamp(30px,8.4vw,48px); } .hero-copy { min-height:555px; padding:65px 24px 56px; } .hero-media,.hero-media img { min-height:365px; } .hero-media img { object-position:55% center; } .sun-sticker { right:18px; bottom:19px; min-width:98px; padding:12px 10px; } .hero-side-note { top:19px; right:20px; max-width:160px; padding:10px 13px; font-size:11px; } .hero-side-note b { font-size:13px; } .story,.today,.family,.app { gap:44px; } .rhythm-steps li { grid-template-columns:39px minmax(0,1fr) auto; gap:9px; min-height:65px; padding-right:13px; } .rhythm-steps .number { width:37px; height:37px; font-size:11px; } .step-detail { display:none; } .step-title { font-size:14px; } .step-time { font-size:10px; } .today-gallery { min-height:375px; } .gallery-large { height:337px; } .gallery-small { height:200px; margin-bottom:0!important; } .gallery-burst { width:86px; height:86px; font-size:16px; } .photo-grid { grid-template-columns:1fr; } .photo-grid figure,.photo-grid figure:last-child { grid-column:auto; min-height:325px; } .family-images { min-height:auto; padding:34px 18px 40px; } .family-note { margin-right:-4px; max-width:158px; } .app-image img { aspect-ratio:1.26; } .faq-list summary { padding:19px 20px; } .join-form { flex-direction:column; } .join-form input,.join-form .button { width:100%; } .site-footer { grid-template-columns:1fr; gap:42px; padding-top:53px; } .footer-note { grid-column:auto; } .footer-links { grid-template-columns:1fr 1fr; } }

@media (max-width:920px) {
  .hero-carousel-ui { left:22px; right:auto; bottom:22px; }
}
@media (max-width:700px) {
  .hero-carousel-ui { left:18px; right:auto; bottom:18px; max-width:calc(100% - 36px); padding:7px 8px; gap:8px; }
  .hero-carousel-count { font-size:9px; }
  .carousel-button { width:31px; height:31px; }
  .hero-carousel-controls { gap:5px; }
  .hero-carousel-dots { gap:5px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ticker-track { animation:none; } .js .reveal { opacity:1; transform:none; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* ---------------------------------------------------------------------------
   Generated pages: the 90-day journey and the library.
   Everything below is additive. The hand-written pages above are untouched.

   Colour rule from the accessibility audit still applies: --blue and --pink
   are display and fill colours only. Text on a light background uses
   --blue-ink and --pink-ink, which clear 4.5:1 on paper, cream, pink-soft
   and yellow.
   --------------------------------------------------------------------------- */

.lang-switch { display:flex; align-items:center; gap:2px; padding:3px; background:rgba(25,21,24,.06); border-radius:999px; }
.lang-switch a { padding:6px 11px; border-radius:999px; color:var(--muted); font-size:12px; font-weight:500; white-space:nowrap; }
.lang-switch a:hover { color:var(--ink); background:rgba(255,255,255,.75); }
.lang-switch a[aria-current='true'] { color:var(--ink); background:var(--paper); font-weight:700; box-shadow:0 1px 3px rgba(25,21,24,.14); }

/* --- A single day ------------------------------------------------------- */

.day { max-width:760px; margin:0 auto; padding:clamp(46px,6vw,84px) clamp(22px,5vw,40px) clamp(70px,8vw,120px); }
.day-head h1 { font-size:clamp(33px,5.4vw,58px); }
.day-minutes { margin:18px 0 0; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
.day-art { margin:34px 0 0; overflow:hidden; border-radius:24px; background:var(--cream); }
.day-art img { width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; }

/* Each step wears its number and its name, so the rhythm is legible on the
   page rather than only on the marketing home page. */
.day-step-tag { display:flex; align-items:center; gap:9px; margin:0 0 10px; color:var(--blue-ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.day-step-tag b { color:var(--muted); font-weight:500; letter-spacing:.09em; }
.day-step-num { display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; color:#fff; background:var(--ink); border-radius:8px 8px 8px 2px; font-size:10px; letter-spacing:0; }
.day-step-label { font-size:clamp(21px,2.5vw,27px); }

.day-scripture { margin:44px 0 0; padding:26px 26px 28px; background:var(--ink); border-radius:24px; }
.day-scripture .day-step-tag { color:var(--yellow); }
.day-scripture .day-step-tag b { color:rgba(255,255,255,.62); }
.day-scripture .day-step-num { color:var(--ink); background:var(--yellow); }
.day-scripture .scripture { margin:0; border-left-color:var(--yellow); }
.day-scripture .scripture p { color:#fff; font-size:clamp(18px,2.3vw,23px); }
.day-scripture .scripture cite { color:var(--yellow); }

.day-reflection { margin:46px 0 0; }
.day-reflection p { margin:19px 0 0; color:var(--muted); font-size:17px; line-height:1.68; }

.day-step { margin:20px 0 0; padding:22px 24px 24px; border-radius:22px; }
.day-step:first-of-type { margin-top:46px; }
.day-step .day-step-body { margin:0; font-size:17px; line-height:1.6; }
.day-step.is-talk { background:var(--pink-soft); }
.day-step.is-talk .day-step-tag { color:var(--pink-ink); }
.day-step.is-talk .day-step-num { background:var(--pink-ink); }
.day-step.is-thank { background:var(--cream); }
.day-step.is-ask { background:var(--pink-soft); }
.day-step.is-ask .day-step-tag { color:var(--pink-ink); }
.day-step.is-ask .day-step-num { background:var(--pink-ink); }
.day-step.is-begin { color:var(--ink); background:var(--yellow); }
.day-step.is-begin .day-step-tag { color:var(--blue-ink); }
.day-step.is-begin .day-step-tag b { color:rgba(25,21,24,.7); }

.scripture-credit { margin:34px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }

.day-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-top:46px; padding-top:26px; border-top:1px solid var(--line); }
.day-nav a { display:flex; flex-direction:column; gap:2px; }
.day-nav-next { text-align:right; }
.day-nav b { color:var(--blue-ink); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }
.day-nav small { color:var(--muted); font-size:13px; }
.day-nav a:hover small { color:var(--ink); }
.day-nav span[aria-hidden] { color:var(--muted); font-size:14px; }
.day-nav-all { align-self:center; padding:10px 16px; color:var(--ink); background:var(--cream); border-radius:999px; font-size:12px; font-weight:700; text-align:center; }
.day-nav-all:hover { background:var(--yellow); }

/* --- The journey index -------------------------------------------------- */

.journey { padding:clamp(52px,6vw,90px) clamp(22px,7vw,110px) clamp(80px,9vw,130px); }
.journey-head h1 { font-size:clamp(36px,5.6vw,64px); }
.journey-head .button { margin-top:32px; }
.journey-part { max-width:1120px; margin:clamp(56px,7vw,96px) auto 0; }
.journey-part-head { max-width:620px; }
/* .tiny-number is yellow because it was designed for the dark .rhythm-intro
   card. On paper it measures 1.5:1, so here it takes the ink blue that the
   colour rule reserves for text. */
.journey-part-head .tiny-number { color:var(--blue-ink); }
.journey-part-head h2 { margin-top:12px; font-size:clamp(30px,3.8vw,46px); }
.journey-part-tagline { margin:14px 0 0; color:var(--pink-ink); font-size:18px; }
.journey-part-blurb { margin:12px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }
.journey-part-count { margin:16px 0 0; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.journey-part-count strong { color:var(--ink); font-size:15px; }

.day-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; margin:28px 0 0; padding:0; list-style:none; }
.day-cards a { display:flex; flex-direction:column; gap:7px; height:100%; padding:17px 18px 19px; background:var(--paper); border:1px solid var(--line); border-radius:18px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.day-cards a:hover { transform:translateY(-3px); border-color:transparent; box-shadow:0 12px 26px rgba(25,21,24,.12); }
.day-card-num { color:var(--blue-ink); font-size:11px; font-weight:700; letter-spacing:.13em; }
.day-card-title { font-family:Sequel,Georgia,serif; font-size:16px; line-height:1.16; letter-spacing:-.01em; }
.day-card-ref { margin-top:auto; padding-top:6px; color:var(--muted); font-size:11px; }
.journey-part:nth-of-type(2) .day-cards a { background:var(--cream); }
.journey-part:nth-of-type(3) .day-cards a { background:var(--pink-soft); }

@media (max-width:920px) {
  .main-nav:not(.main-nav-plain) .lang-switch { justify-content:center; margin-top:8px; }
}
@media (max-width:700px) {
  .day { padding-left:20px; padding-right:20px; }
  .day-scripture,.day-step { padding-left:19px; padding-right:19px; }
  .day-nav { grid-template-columns:1fr; gap:14px; }
  .day-nav-next { text-align:left; }
  .day-nav-all { order:3; justify-self:start; }
  .day-cards { grid-template-columns:1fr; }
}
.day-center { margin:44px 0 0; padding:22px 24px 24px; background:var(--cream); border-radius:22px; }
.day-center .day-step-body { margin:0; font-size:17px; line-height:1.6; }
@media (max-width:700px) { .day-center { padding-left:19px; padding-right:19px; } }

/* --- The library: index, category, article ------------------------------ */

.library { max-width:1120px; margin:0 auto; padding:clamp(52px,6vw,90px) clamp(22px,5vw,44px) clamp(80px,9vw,130px); }
.library > .section-heading h1 { font-size:clamp(36px,5.4vw,60px); }
.library > .section-heading > p:last-child { max-width:560px; margin:24px 0 0; color:var(--muted); font-size:17px; }
.library .section-label a { text-decoration:underline; text-underline-offset:3px; }

.library-group { margin-top:clamp(46px,6vw,76px); }
.library-group > h2 { font-size:clamp(24px,3vw,34px); }

.lib-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; margin:24px 0 0; padding:0; list-style:none; }
.lib-cards a { display:flex; flex-direction:column; gap:8px; height:100%; padding:20px 21px 22px; background:var(--paper); border:1px solid var(--line); border-radius:20px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.lib-cards a:hover { transform:translateY(-3px); border-color:transparent; box-shadow:0 12px 26px rgba(25,21,24,.12); }
.lib-card-kind { color:var(--blue-ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.lib-card-title { font-family:Sequel,Georgia,serif; font-size:18px; line-height:1.14; letter-spacing:-.01em; }
.lib-card-desc { color:var(--muted); font-size:13px; line-height:1.5; }
.library-group:nth-of-type(even) .lib-cards a { background:var(--cream); }
.library-back { margin-top:clamp(40px,5vw,64px); }

/* An article is a reading column, like a day. Its h2 must not inherit the
   section-heading scale, which is sized for a full-width marketing band. */
.article { max-width:720px; margin:0 auto; padding:clamp(46px,6vw,84px) clamp(22px,5vw,40px) clamp(70px,8vw,120px); }
.article-head h1 { font-size:clamp(32px,5vw,54px); }
.article-lead { margin:24px 0 0; color:var(--muted); font-size:19px; line-height:1.58; }
.article-section { margin-top:clamp(36px,4vw,52px); }
.article-section h2 { font-size:clamp(23px,2.6vw,30px); }
.article-section p { margin:17px 0 0; color:var(--muted); font-size:17px; line-height:1.68; }
.article-section ul { display:flex; flex-direction:column; gap:11px; margin:19px 0 0; padding-left:22px; }
.article-section li { color:var(--muted); font-size:17px; line-height:1.6; }
.article-section strong { color:var(--ink); }

.article-verse { margin:22px 0 0; padding:18px 20px; background:var(--cream); border-left:3px solid var(--yellow); border-radius:0 16px 16px 0; }
.article-verse p { margin:0; color:var(--ink); font-size:17px; }
.article-verse cite { margin-top:9px; }

.article-closing { margin-top:clamp(34px,4vw,48px); padding:20px 22px; background:var(--pink-soft); border-radius:18px; font-size:17px; line-height:1.6; }

.article-related { margin-top:clamp(40px,5vw,60px); padding-top:26px; border-top:1px solid var(--line); }
.article-related h2 { font-size:16px; text-transform:uppercase; letter-spacing:.11em; }
.article-related ul { display:flex; flex-direction:column; gap:9px; margin:16px 0 0; padding:0; list-style:none; }
.article-related a { color:var(--blue-ink); font-size:16px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.article-related a:hover { color:var(--ink); }
.article > .arrow-link { margin-top:34px; }

/* The generated trust pages reuse .legal, which already sets the column, so
   they only need the section padding the hand-written ones get from markup. */
.page-legal .legal { padding-bottom:clamp(40px,5vw,70px); }

@media (max-width:700px) {
  .library,.article { padding-left:20px; padding-right:20px; }
  .lib-cards { grid-template-columns:1fr; }
}