:root { --paper:#fdfaf7; --white:#fff8ef; --ink:#4b1624; --muted:#75666a; --line:#decfca; --wine:#800000; --wine-dark:#4b1624; --selection:#f3e9e2; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 "DM Sans",sans-serif; }
a { color:inherit; }
.site-header { height:86px; padding:0 max(5vw,28px); display:flex; justify-content:space-between; align-items:center; background:var(--wine-dark); color:#fff8ef; position:sticky; top:0; z-index:10; box-shadow:0 2px 16px #3d0e1a33; font-family:"DM Sans",sans-serif; }
.brand { display:flex; align-items:center; color:inherit; text-decoration:none; line-height:1.1; flex:0 0 auto; }
.brand img { display:block; width:64px; height:64px; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { color:#fff8ef; text-decoration:none; font-size:14px; font-weight:600; }
.site-header nav a:hover,.footer-bottom a:hover { color:#f1cfd3; }
.menu-button { display:none; background:transparent; border:0; color:#fff8ef; font:600 14px "DM Sans",sans-serif; cursor:pointer; }
.container { width:min(1100px, calc(100% - 48px)); margin:0 auto; min-height:600px; }
.hero { padding:84px 0 62px; }
.eyebrow { margin:0 0 12px; color:var(--wine); font:700 12px/1.2 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.hero h1,.book-header h1,.chapter-header h1 { font-family:"Playfair Display",serif; margin-bottom:17px; font-size:clamp(46px, 6vw, 72px); line-height:1; font-weight:400; letter-spacing:-.045em; }
.hero-copy { max-width:580px; color:var(--muted); font-size:19px; }
.reference-search { max-width:610px; margin-top:34px; display:grid; gap:8px; font-family:Arial,sans-serif; }
.reference-search label { color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.search-row { display:flex; }
.reference-search input { min-width:0; flex:1; padding:16px 17px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:0; outline:none; font:17px Georgia,serif; }
.reference-search input:focus { border-color:var(--wine); }
.reference-search button { padding:0 25px; border:1px solid var(--wine); color:#fff; background:var(--wine); cursor:pointer; font:700 13px Arial,sans-serif; letter-spacing:.04em; }
.reference-search button:hover { background:var(--wine-dark); }
.search-error { margin:8px 0 0; color:var(--wine); font:14px Arial,sans-serif; }
.testaments { padding:0 0 88px; display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.testament { border-top:1px solid var(--line); padding-top:21px; }
.testament h2 { font-family:"Playfair Display",serif; margin-bottom:22px; font:400 31px/1.1 Georgia,serif; }
.book-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.book-grid a { padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:17px; }
.book-grid a:hover { color:var(--wine); }
.book-header { padding:75px 0 40px; border-bottom:1px solid var(--line); }
.book-header p { max-width:620px; color:var(--muted); font-size:18px; }
.chapters-index { padding:40px 0 80px; }
.chapters-index h2 { margin-bottom:22px; font:400 30px "Playfair Display",serif; }
.chapter-jump-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:9px; }
.chapter-jump-link { min-height:43px; display:grid; place-items:center; border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; font:15px Arial,sans-serif; }
.chapter-jump-link:hover,.chapter-jump-link.current { color:#fff; border-color:var(--wine); background:var(--wine); }
.chapter { width:min(780px,100%); margin:0 auto; padding:75px 0 82px; }
.chapter-header { padding-bottom:30px; border-bottom:1px solid var(--line); }
.chapter-reading-area { min-height:1px; }
.chapter-text { padding:34px 0 38px; }
.verse { display:block; width:100%; padding:7px 12px; border:0; border-radius:2px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; font:20px/1.85 Georgia,serif; }
.verse:hover,.verse.selected { background:var(--selection); }
.verse:focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
.verse-number { display:inline-block; min-width:28px; color:var(--wine); vertical-align:top; font:700 11px/2.8 Arial,sans-serif; }
.verse-text { display:inline; }
.floating-chapter-button { position:sticky; top:50vh; z-index:20; display:flex; align-items:center; justify-content:center; width:48px; height:64px; margin-top:-32px; border:1px solid #fff8ef55; background:#4b162466; backdrop-filter:blur(3px); color:#fff8efcc; font:2.4rem/1 Georgia,serif; text-decoration:none; opacity:.58; transition:opacity .15s ease,background .15s ease,border-color .15s ease; }
.floating-chapter-button:hover,.floating-chapter-button:focus-visible { opacity:.95; background:#4b1624dd; border-color:#fff8ef99; }
.floating-chapter-previous { float:left; margin-left:calc((100vw - 100%) / -2); border-radius:0 14px 14px 0; }
.floating-chapter-next { float:right; margin-right:calc((100vw - 100%) / -2); border-radius:14px 0 0 14px; }
.chapter-jump { padding-top:28px; border-top:1px solid var(--line); }.chapter-jump-title { margin-bottom:15px; font:700 12px Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.empty-state,.loading { padding:72px 0; color:var(--muted); font-size:18px; }.loading { text-align:center; }
.site-footer { padding-top:45px; color:#fff8ef; background:var(--wine); font-family:"DM Sans",sans-serif; }
.footer-container { width:min(1100px, calc(100% - 48px)); margin:0 auto; padding-bottom:37px; display:grid; grid-template-columns:1fr 1fr; gap:55px; }
.footer-testament h2 { margin-bottom:13px; color:#fff8ef; font:400 19px "Playfair Display",serif; }.footer-books { columns:3; gap:18px; }
.footer-books a { display:block; padding:3px 0; color:#f1cfd3; text-decoration:none; font-size:12px; }.footer-books a:hover { color:#fff8ef; }
.footer-bottom { padding:17px max(24px, calc((100vw - 1100px)/2)); display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff2b; color:#f1cfd3; font-size:12px; }.footer-bottom a { color:inherit; text-decoration:none; }
@media (max-width:700px) { .floating-chapter-button { width:38px; height:56px; font-size:2rem; opacity:.45; } }
@media (max-width:760px) { .site-header { height:72px; } .brand img { width:52px; height:52px; } .menu-button { display:block; } .menu-button span { display:inline-block; width:15px; border-top:1px solid; margin-left:7px; vertical-align:middle; } .site-header nav { display:none; position:absolute; left:0; right:0; top:71px; padding:20px 28px; background:var(--wine-dark); border-top:1px solid #ffffff2b; flex-direction:column; align-items:flex-start; gap:17px; } .site-header nav.open { display:flex; }.container { width:min(100% - 32px, 1100px); }.hero { padding:58px 0 50px; }.testaments,.footer-container { grid-template-columns:1fr; gap:43px; }.testaments { padding-bottom:60px; }.book-grid { grid-template-columns:1fr 1fr; }.chapter { padding:51px 0 60px; }.verse { padding:7px 4px; font-size:18px; }.chapter-text { padding-top:10px; }.footer-container { width:min(100% - 32px,1100px); }.footer-books { columns:2; }.search-row { display:grid; gap:8px; }.reference-search button { min-height:48px; }.footer-bottom { padding:17px 16px; } }




