/* Verso Vivo — warm terracotta + cream, reverent editorial */
:root{
  --terra:#7c2d12; --terra2:#9a3412; --terra3:#c2410c;
  --gold:#b45309; --gold2:#d97706; --gold-soft:#fde9c8;
  --cream:#fef7ed; --paper:#fffdf8; --ink:#3b2a1e; --muted:#8a7360;
  --line:#ead9c2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);line-height:1.75}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif}
a{color:var(--terra3)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.site-header{background:var(--terra);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(124,45,18,.35)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 22px}
.brand{font-family:Georgia,serif;font-size:1.5rem;color:var(--gold-soft);text-decoration:none;letter-spacing:.5px}
.brand small{display:block;font-size:.68rem;color:#f3d9b8;letter-spacing:2.5px;font-family:'Segoe UI',sans-serif}
.nav a{color:#fde9c8;text-decoration:none;margin-left:22px;font-size:.95rem}
.nav a:hover{color:#fff}
.hero{background:linear-gradient(160deg,var(--terra) 0%,var(--terra2) 60%,#a8491a 100%);color:#fff;text-align:center;padding:84px 22px 70px;position:relative;overflow:hidden}
.hero::after{content:"\271D";position:absolute;font-size:22rem;color:rgba(217,119,6,.08);top:-60px;left:50%;transform:translateX(-50%);pointer-events:none}
.hero h1{font-size:2.9rem;font-weight:400;margin-bottom:14px;color:#fff}
.hero h1 em{color:var(--gold-soft);font-style:italic}
.hero p{max-width:640px;margin:0 auto;color:#f7e3c3;font-size:1.12rem}
.verse-of-day{margin:34px auto 0;max-width:620px;background:rgba(255,255,255,.06);border:1px solid rgba(217,119,6,.45);border-radius:14px;padding:26px 30px}
.verse-of-day blockquote{font-family:Georgia,serif;font-size:1.25rem;font-style:italic;color:var(--gold-soft);line-height:1.6}
.verse-of-day cite{display:block;margin-top:12px;color:var(--gold-soft);font-style:normal;font-size:.92rem;letter-spacing:1px}
.section{padding:64px 0}
.section h2{font-size:2rem;text-align:center;margin-bottom:8px;color:var(--terra)}
.section .sub{text-align:center;color:var(--muted);margin-bottom:38px;max-width:620px;margin-left:auto;margin-right:auto}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.topic-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;display:block}
.topic-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(124,45,18,.14)}
.topic-card .timg{height:150px;display:flex;align-items:center;justify-content:center;font-size:3.2rem;background:linear-gradient(140deg,var(--terra2),#d2691e)}
.topic-card .tbody{padding:22px 24px}
.topic-card h3{font-size:1.28rem;color:var(--terra);margin-bottom:8px}
.topic-card p{font-size:.94rem;color:var(--muted)}
.topic-card .count{display:inline-block;margin-top:12px;font-size:.8rem;color:var(--gold);letter-spacing:1px;font-weight:600}
.article-hero{background:linear-gradient(160deg,var(--terra),var(--terra2));color:#fff;padding:60px 22px 46px;text-align:center}
.article-hero h1{font-size:2.3rem;max-width:800px;margin:0 auto 12px;color:#fff;font-weight:400}
.article-hero .meta{color:#f3d9b8;font-size:.92rem}
.article-body{max-width:760px;margin:0 auto;padding:46px 22px}
.article-body .intro{font-size:1.12rem;color:#5c4632;margin-bottom:34px}
.verse-card{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold2);border-radius:10px;padding:20px 24px;margin-bottom:20px}
.verse-card blockquote{font-family:Georgia,serif;font-size:1.12rem;font-style:italic;color:var(--terra);line-height:1.65;margin-bottom:8px}
.verse-card .ref{font-size:.85rem;color:var(--gold);font-weight:700;letter-spacing:.8px}
.verse-card .note{font-size:.95rem;color:var(--muted);margin-top:8px}
.faq{margin-top:44px}
.faq h2{font-size:1.6rem;color:var(--terra);margin-bottom:18px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:12px}
.faq summary{font-weight:600;color:var(--terra);cursor:pointer}
.faq p{margin-top:10px;color:var(--muted)}
.verses-h2{font-size:1.5rem;color:var(--terra);margin:40px 0 20px;text-align:center}
.related{margin-top:52px;padding:32px 26px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.related h2{font-size:1.4rem;color:var(--terra);text-align:center;margin-bottom:18px}
.rel-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.rel-card{display:inline-block;padding:10px 18px;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--terra);text-decoration:none;font-weight:600;font-size:.92rem}
.rel-card:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.back-link{display:inline-block;margin:34px 0 8px;color:var(--terra3);text-decoration:none;font-weight:600}
.about{background:var(--terra);color:#f7e3c3;padding:56px 0}
.about h2{color:var(--gold-soft);text-align:center;margin-bottom:16px}
.about p{max-width:680px;margin:0 auto 14px;text-align:center}
footer{background:#3d1e0c;color:#c9a37e;text-align:center;padding:28px 20px;font-size:.88rem}
footer a{color:var(--gold-soft);text-decoration:none}
@media(max-width:640px){.hero h1{font-size:2.1rem}.article-hero h1{font-size:1.7rem}.nav{display:none}}