:root { --ink:#183d37; --cream:#f9f5ed; --sand:#ede4d5; --gold:#c78e4b; --sage:#b8c7ac; --white:#fffdf9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.6; }
main { overflow:hidden; }
nav { width:min(1160px,calc(100% - 48px)); margin:auto; height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-size:19px; font-weight:700; letter-spacing:-.5px; text-decoration:none; }.brand span { color:var(--gold); margin-right:5px; }.nav-link { color:var(--ink); font-size:14px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.hero { min-height:660px; position:relative; text-align:center; display:flex; align-items:center; flex-direction:column; padding:104px 24px 50px; background:radial-gradient(ellipse at 50% 100%,#e1ead7 0,rgba(225,234,215,0) 54%),linear-gradient(105deg,#f6f0e5,#fbf8f1 60%,#ecdfcc); }
.hero:before,.hero:after { content:""; position:absolute; width:310px; height:310px; border:1px solid rgba(199,142,75,.22); border-radius:50%; }.hero:before { left:-148px; top:165px; }.hero:after { right:-155px; bottom:-105px; width:370px; height:370px; }
.eyebrow { color:#a76e2f; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:2.1px; margin:0 0 18px; }.hero h1 { font-family:"Playfair Display",serif; font-size:clamp(57px,9vw,104px); letter-spacing:-4px; line-height:.92; margin:0; font-weight:600; }.hero h1 em { color:var(--gold); font-weight:600; }.intro { max-width:475px; margin:31px auto 28px; font-size:18px; color:#37554e; }.button { background:var(--ink); color:white; display:inline-flex; align-items:center; gap:24px; padding:15px 21px; border:1px solid var(--ink); border-radius:2px; font:600 14px "DM Sans",sans-serif; text-decoration:none; cursor:pointer; transition:.2s; }.button:hover { transform:translateY(-2px); background:#28564e; }.button span { font-size:18px; }.verse-mini { position:absolute; bottom:23px; margin:0; font:italic 13px "Playfair Display",serif; color:#547069; }.verse-mini strong { font-family:"DM Sans",sans-serif; font-size:10px; font-style:normal; letter-spacing:.4px; margin-left:4px; }
.scripture { padding:110px 24px 120px; max-width:1010px; margin:auto; }.section-head { display:flex; justify-content:space-between; align-items:start; }.date { margin:0; font-size:13px; color:#668078; }.scripture-card { padding:46px 9% 42px; margin-top:18px; position:relative; text-align:center; background:var(--white); border:1px solid #eee5d9; box-shadow:0 16px 45px rgba(30,54,47,.05); }.quote-mark { display:block; font:76px/.55 "Playfair Display",serif; color:#d5b17d; }.scripture blockquote { max-width:700px; margin:20px auto 17px; font:600 clamp(27px,4vw,45px)/1.18 "Playfair Display",serif; letter-spacing:-1.2px; }.reference { color:#a76e2f; font-size:12px; text-transform:uppercase; font-weight:700; letter-spacing:1.6px; }.text-button { color:var(--ink); border:0; border-bottom:1px solid #b3c1b6; background:none; padding:7px 0 4px; margin-top:22px; font:600 13px "DM Sans",sans-serif; cursor:pointer; }.text-button span { margin-left:8px; }
.prayer { background:var(--ink); color:#f9f5ed; padding:105px max(24px,calc((100% - 960px)/2)); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:85px; }.prayer .eyebrow { color:#e1b577; }.prayer h2,.closing h2 { font:600 clamp(38px,4vw,55px)/1.04 "Playfair Display",serif; letter-spacing:-1.5px; margin:0 0 23px; }.prayer-copy>p:last-child { max-width:450px; color:#c6d3cc; }.prayer-card { background:#255047; text-align:center; padding:44px 25px 32px; }.breath { height:67px; width:67px; display:grid; place-items:center; border:1px solid #a9bfaa; border-radius:50%; margin:auto; color:#e1b577; font-size:23px; animation:pulse 4s infinite ease-in-out; }.timer-label { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#b9d0c2; margin:22px 0 0; }.timer { font:600 50px/1 "Playfair Display",serif; letter-spacing:1px; margin:8px 0 23px; }.light { background:#f7f1e8; color:var(--ink); border-color:#f7f1e8; }.timer-note { color:#c6d3cc; font-size:12px; margin:16px 0 0; } @keyframes pulse { 50% { transform:scale(1.12); box-shadow:0 0 0 13px rgba(184,199,172,.11); } }
.closing { text-align:center; padding:115px 24px; background:#e8dfcf; }.closing h2 { font-size:clamp(37px,5vw,60px); }.closing>p:last-child { color:#49635d; margin:0; } footer { padding:22px 24px; text-align:center; color:#779087; background:var(--cream); font-size:12px; } footer span { color:#c78e4b; margin:0 7px; }
@media (max-width:680px) { nav { width:calc(100% - 32px); height:70px; }.nav-link { display:none; }.hero { min-height:610px; padding-top:115px; }.hero h1 { letter-spacing:-2.6px; }.intro { font-size:16px; }.scripture { padding:75px 20px; }.scripture-card { padding:39px 22px 32px; }.prayer { grid-template-columns:1fr; gap:38px; padding:75px 24px; }.prayer-card { padding:37px 20px 28px; }.closing { padding:80px 24px; } }