:root { --ink:#203a37; --muted:#63716d; --paper:#fbfaf5; --warm:#f3eee3; --line:#e7e1d5; --green:#2c655a; --sage:#dfe9dc; --peach:#f5dfd1; --yellow:#f7edc9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:0 28px; border-bottom:1px solid transparent; } .brand { color:var(--ink); font:700 23px "Playfair Display",serif; text-decoration:none; letter-spacing:-.7px; } .brand small { color:#a36850; font:600 10px "DM Sans",sans-serif; letter-spacing:.4px; margin-left:6px; white-space:nowrap; } .brand-mark { color:#bc774f; font:23px sans-serif; margin-right:7px; } nav { display:flex; gap:29px; margin-left:auto; margin-right:32px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; padding:7px 0; } nav a.active { color:var(--green); border-bottom:2px solid var(--green); } .profile,.avatar { border:0; border-radius:50%; background:#d9b088; color:#fff; width:34px; height:34px; font-weight:700; }
main { max-width:1124px; margin:auto; padding:0 28px 80px; }.hero { padding:100px 0 74px; max-width:750px; text-align:center; margin:auto; }.eyebrow { color:#b26b4a; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:1.55px; margin:0 0 13px; }.hero h1,.feed-header h2,.prayer-banner h2,.composer h2 { font:700 48px/1.12 "Playfair Display",serif; letter-spacing:-1.6px; margin:0; }.hero h1 em { color:#47776b; font-style:italic; }.intro { color:var(--muted); font-size:17px; line-height:1.65; max-width:580px; margin:21px auto 27px; }.share-button { border:0; border-radius:7px; background:var(--green); color:white; cursor:pointer; padding:14px 19px; font:600 14px "DM Sans",sans-serif; box-shadow:0 5px 10px #2c655a25; }.share-button span { font-size:19px; line-height:0; margin-left:9px; }.share-button:hover { background:#224f47; }.theme-verse { color:#9b715f; font:italic 13px/1.5 "Playfair Display",serif; margin:20px auto 0; }.theme-verse span { display:block; color:#9a9184; font:600 10px "DM Sans",sans-serif; letter-spacing:.8px; text-transform:uppercase; margin-top:3px; }
.topic-row { display:flex; gap:10px; overflow:auto; padding:2px 0 47px; scrollbar-width:none; }.topic { white-space:nowrap; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:22px; padding:9px 15px; font:500 13px "DM Sans",sans-serif; cursor:pointer; }.topic.selected,.topic:hover { background:var(--sage); border-color:var(--sage); color:var(--green); }.feed-header { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }.feed-header h2 { font-size:34px; letter-spacing:-1px; }.story-count { color:var(--muted); font-size:13px; margin:0 0 4px; }.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.story-card { display:flex; flex-direction:column; min-height:311px; border:1px solid var(--line); border-radius:9px; padding:20px; background:#fffefa; }.story-card:nth-child(3n+1) { background:#fbf5ed; }.story-card:nth-child(3n+2) { background:#f2f7ef; }.story-card:nth-child(3n) { background:#fdf8df; }.story-top { display:flex; justify-content:space-between; align-items:center; }.story-topic { color:#58726b; font-size:11px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; }.more { color:#7c8783; border:0; background:transparent; letter-spacing:2px; cursor:pointer; }.story-card h3 { font:700 22px/1.22 "Playfair Display",serif; letter-spacing:-.4px; margin:22px 0 11px; }.excerpt { color:#53615d; font-size:14px; line-height:1.55; margin:0; }.verse { color:#a36850; font:italic 12px "Playfair Display",serif; margin-top:14px; }.story-footer { margin-top:auto; padding-top:20px; display:flex; justify-content:space-between; align-items:center; }.person { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); font-weight:600; }.avatar { width:25px; height:25px; display:grid; place-items:center; font-size:10px; }.time { color:#8b9691; font-weight:400; }.pray { border:0; background:transparent; color:#66746f; font:600 11px "DM Sans",sans-serif; cursor:pointer; padding:5px; }.pray span { color:#b26b4a; font-size:18px; vertical-align:-2px; }.pray.active { color:var(--green); }.pray.active span { color:var(--green); }
.prayer-banner { max-width:1068px; margin:0 auto 70px; padding:39px 43px; border-radius:10px; background:#dfe9dc; display:flex; gap:22px; align-items:center; }.prayer-symbol { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#f5f9f2; color:var(--green); font-size:28px; }.prayer-banner h2 { font-size:28px; letter-spacing:-.7px; }.prayer-banner p:not(.eyebrow) { color:#536761; font-size:14px; margin:7px 0 0; }.soft-button { white-space:nowrap; margin-left:auto; border:1px solid #8eaca4; background:#f6fbf4; color:var(--green); border-radius:6px; cursor:pointer; padding:12px 14px; font:600 13px "DM Sans",sans-serif; }
.messages { max-width:1068px; margin:0 auto 80px; }.messages-intro { margin:0 0 21px; }.messages h2 { font:700 34px/1.12 "Playfair Display",serif; letter-spacing:-1px; margin:0; }.messages-intro > p:last-child { max-width:510px; color:var(--muted); font-size:14px; line-height:1.55; margin:10px 0 0; }.message-panel { min-height:455px; display:grid; grid-template-columns:285px 1fr; background:#fffefa; border:1px solid var(--line); border-radius:10px; overflow:hidden; }.conversation-list { border-right:1px solid var(--line); padding:10px; }.conversation { position:relative; width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:0; border-radius:6px; padding:12px 9px; background:transparent; color:var(--ink); cursor:pointer; }.conversation.active,.conversation:hover { background:#edf4eb; }.conversation .avatar { flex:0 0 auto; }.conversation b,.conversation small { display:block; }.conversation b { font-size:13px; }.conversation small { width:143px; color:var(--muted); font-size:11px; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.conversation time { position:absolute; right:8px; top:13px; color:#9aa39e; font-size:10px; }.avatar.lavender { background:#a59ab8; }.avatar.blue { background:#7aa6b1; }.avatar.rose { background:#c98983; }.chat { min-width:0; display:flex; flex-direction:column; }.chat-header { min-height:70px; display:flex; align-items:center; gap:10px; padding:12px 19px; border-bottom:1px solid var(--line); }.chat-header h3 { font:700 16px "DM Sans",sans-serif; margin:0; }.chat-header p { color:var(--muted); font-size:11px; margin:3px 0 0; }.chat-header .more { margin-left:auto; }.chat-notice { margin:15px 20px 2px; padding:8px 10px; border-radius:5px; background:#f8f4e8; color:#817866; font-size:11px; text-align:center; }.chat-body { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:20px; min-height:255px; }.bubble { max-width:72%; border-radius:11px; padding:10px 12px; color:#3e504b; background:#f0f3ed; font-size:13px; line-height:1.45; align-self:flex-start; }.bubble.mine { color:#fff; background:var(--green); align-self:flex-end; }.message-composer { display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line); }.message-composer input { flex:1; min-width:0; border:1px solid #d9dcd4; border-radius:6px; padding:10px 12px; color:var(--ink); font:13px "DM Sans",sans-serif; }.message-composer button { width:39px; border:0; border-radius:6px; background:var(--green); color:white; cursor:pointer; font-size:18px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.composer { width:min(620px,calc(100% - 28px)); border:0; border-radius:10px; padding:0; background:#fffefa; color:var(--ink); box-shadow:0 20px 80px #152c2760; }.composer::backdrop { background:#17312b88; backdrop-filter:blur(2px); }.composer form { padding:37px; position:relative; }.close { position:absolute; right:17px; top:14px; background:transparent; border:0; color:var(--muted); font-size:29px; cursor:pointer; }.composer h2 { font-size:32px; }.composer-intro { color:var(--muted); margin:10px 0 25px; font-size:14px; }.composer label { display:block; color:#43534f; font-size:12px; font-weight:700; margin:15px 0; }.optional { color:#89928e; font-size:11px; font-weight:400; margin-left:4px; }.composer input,.composer textarea,.composer select { width:100%; border:1px solid #d9dcd4; border-radius:5px; margin-top:7px; padding:11px; background:#fff; color:var(--ink); font:14px "DM Sans",sans-serif; }.composer textarea { min-height:112px; resize:vertical; line-height:1.45; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.custom-topic { display:none; }.full { width:100%; margin-top:8px; }
.form-status { min-height:18px; color:#a85d48; font-size:12px; margin:10px 0 -1px; }.text-button { display:block; margin:16px auto 0; color:var(--green); background:transparent; border:0; cursor:pointer; font:600 13px "DM Sans",sans-serif; }.empty-state { grid-column:1/-1; padding:36px 20px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); text-align:center; font-size:14px; }.conversation-empty { color:var(--muted); font-size:12px; line-height:1.5; padding:15px; }.conversation .avatar { display:grid; place-items:center; }
@media (max-width:760px) { .topbar { padding:0 18px; height:65px; } nav { display:none; }.hero { padding:65px 0 52px; }.hero h1 { font-size:38px; }.story-grid { grid-template-columns:1fr; }.prayer-banner { margin:0 16px 45px; padding:27px 23px; display:block; }.prayer-symbol { margin-bottom:16px; }.soft-button { margin:20px 0 0; }.story-card { min-height:270px; }.feed-header h2 { font-size:29px; }.story-count { display:none; }.composer form { padding:29px 22px; }.form-row { grid-template-columns:1fr; gap:0; }.messages { margin:0 16px 52px; }.message-panel { grid-template-columns:1fr; }.conversation-list { display:flex; overflow:auto; border-right:0; border-bottom:1px solid var(--line); padding:7px; }.conversation { min-width:155px; }.conversation small { width:85px; }.conversation time { display:none; }.chat-body { min-height:230px; } }