:root{--ink:#2b3127;--soft:#5d6656;--sage:#7d8b6f;--sage2:#e3e8d8;--sage3:#9daa8c;--gold:#a8823a;--gold2:#d9bf86;--red:#9b2c22;--paper:#f7f2e7;--card:#fffdf7;--line:#e2dac4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 "EB Garamond",Georgia,serif}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
#app{max-width:640px;margin:0 auto;padding:0 18px 30px}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;margin:0}
h1{font-size:34px;line-height:1.1}
h2{font-size:26px;line-height:1.15}
button{font:inherit;color:inherit;cursor:pointer}
.kick{font:600 12px "Cinzel",serif;letter-spacing:.2em;color:var(--sage);text-transform:uppercase}
.gold{color:var(--gold)}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 8px;position:sticky;top:0;background:var(--paper);z-index:5}
.brand{font:600 13px "Cinzel";letter-spacing:.28em;color:var(--sage)}
.back{border:0;background:none;font:600 13px "Cinzel";letter-spacing:.12em;color:var(--gold);padding:6px 0}
.orn{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--gold);margin:12px 0}
.orn:before,.orn:after{content:"";height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 6px 18px #3a42340d}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px;background:var(--sage);color:#fff;font:700 16px "EB Garamond";letter-spacing:.02em;text-align:center;text-decoration:none}
.btn.gold{background:linear-gradient(180deg,#c49a4a,#a8823a);color:#fff}
.btn.ghost{background:var(--sage2);color:var(--ink)}
.row{display:flex;gap:10px}
.row>*{flex:1}
.cover{position:relative;width:min(270px,70vw);aspect-ratio:900/1408;margin:10px auto;border-radius:4px 10px 10px 4px;background:#8f9c87 url(../img/cover-blank.jpg) center/cover;box-shadow:0 18px 40px #3a423444,inset 6px 0 10px #0002}
.cover .nm{position:absolute;left:0;right:0;top:75.4%;text-align:center;font:600 calc(min(270px,70vw)*.043) "Cinzel";letter-spacing:.22em}
.cover .nm2{position:absolute;left:0;right:0;top:78.3%;text-align:center;font:600 calc(min(270px,70vw)*.075) "Cinzel";letter-spacing:.1em}
.foil{background:linear-gradient(180deg,#d9b76a 0%,#a67b30 45%,#7a561c 72%,#b8923f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{text-align:center;padding:6px 0 4px}
.hero p{color:var(--soft);margin:6px 0 0}
.today{background:linear-gradient(160deg,#fffdf7,#f3efe2);border:1px solid var(--gold2)}
.today .t{font:600 26px/1.15 "Cormorant Garamond";margin:6px 0}
.verse{background:#f3efe2;border-left:3px solid var(--gold);padding:12px 16px;margin:12px 0;font-style:italic;border-radius:0 10px 10px 0}
.verse cite{display:block;font:600 12px "Cinzel";letter-spacing:.14em;font-style:normal;color:var(--gold);margin-top:6px}
.box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--card)}
.box b{display:block;font:600 11.5px "Cinzel";letter-spacing:.16em;color:var(--sage);margin-bottom:3px;font-weight:600}
.h{font:600 14px "Cinzel";letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin:18px 0 6px}
.chk{list-style:none;padding:0;margin:6px 0}
.chk li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.chk input{appearance:none;width:22px;height:22px;flex:0 0 22px;border:2px solid var(--sage);border-radius:6px;margin-top:2px;display:grid;place-content:center;background:#fff}
.chk input:checked{background:var(--sage)}
.chk input:checked:after{content:"✓";color:#fff;font:700 15px sans-serif}
textarea,input[type=text]{width:100%;font:400 18px "EB Garamond";border:1.5px solid var(--line);border-radius:12px;padding:12px;background:#fff;color:var(--ink);resize:vertical}
textarea:focus,input[type=text]:focus{outline:none;border-color:var(--sage)}
.saved{font:italic 14px "EB Garamond";color:var(--sage);min-height:18px}
.dropcap:first-letter{float:left;font:600 58px/0.8 "Cormorant Garamond";color:var(--gold);padding:6px 8px 0 0}
.garden{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin:10px 0}
.garden i{aspect-ratio:1;border-radius:50% 0;background:#e6e1d1}
.garden i.on{background:var(--sage3)}
.garden i.on.g{background:var(--gold2)}
.list a,.list button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;border-bottom:1px solid var(--line);padding:12px 2px;color:var(--ink);text-decoration:none}
.list .n{font:600 12px "Cinzel";color:var(--gold);min-width:46px;letter-spacing:.08em}
.list .ok{margin-left:auto;color:var(--sage)}
.sec{position:relative;border-radius:18px;overflow:hidden;margin:12px 0;min-height:130px;display:flex;align-items:flex-end;background:#ccc center/cover;color:#fff;border:0;width:100%;text-align:left;padding:0}
.sec:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#2b3127cc,#2b312711 70%)}
.sec div{position:relative;padding:14px 16px}
.sec small{font:600 11px "Cinzel";letter-spacing:.2em;opacity:.9}
.sec b{display:block;font:600 24px/1.1 "Cormorant Garamond"}
.pill{display:inline-block;padding:7px 13px;border-radius:99px;background:var(--sage2);margin:4px 4px 0 0;font-size:15px;border:0}
.pill.on{background:var(--sage);color:#fff}
.img{width:100%;border-radius:16px;display:block;margin:10px 0}
.vig{width:150px;display:block;margin:6px auto;mix-blend-mode:multiply}
.scrip{columns:1;text-align:left}
.scrip sup{font:600 .62em "Cinzel";color:var(--gold);margin-right:2px}
.scrip .red{color:var(--red)}
.chap{float:left;font:600 54px/0.82 "Cormorant Garamond";color:var(--gold);margin:4px 8px 0 0}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.bgrid button{border:0;padding:0;background:none;text-align:left}
.bgrid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:0 8px 18px #3a42341f;display:block}
.bgrid span{display:block;font:600 16px/1.2 "Cormorant Garamond";margin-top:6px}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
.vcard{border:1.5px solid var(--gold);border-radius:14px;padding:16px;background:#fffdf7;text-align:center}
.vcard .tg{font:600 11px "Cinzel";letter-spacing:.16em;color:var(--sage)}
.vcard p{font-style:italic;margin:8px 0}
.vcard cite{font:600 11px "Cinzel";letter-spacing:.12em;color:var(--gold);font-style:normal}
.vcard .ln{border-top:1px solid var(--line);margin-top:8px;padding-top:6px;font-size:16px}
table{width:100%;border-collapse:collapse;font-size:16px}
th{font:600 11px "Cinzel";letter-spacing:.1em;color:#fff;background:var(--sage);padding:7px 6px;text-align:left}
td{border-bottom:1px solid var(--line);padding:7px 6px;vertical-align:top}
.steps .s{display:flex;gap:12px;margin:10px 0}
.steps .s i{flex:0 0 40px;height:30px;border-radius:50%/60%;background:radial-gradient(ellipse at 35% 30%,#e9d9ad,#b8923f 70%,#8a6a2a);display:grid;place-content:center;font:600 14px "Cinzel";color:#fff;font-style:normal}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.walls a img{width:100%;border-radius:10px;display:block;aspect-ratio:9/16;object-fit:cover}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fffdf7f2;backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:9}
.tabs button{flex:1;border:0;background:none;font:600 11px "Cinzel";letter-spacing:.06em;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0}
.tabs button i{font-style:normal;font-size:20px;line-height:1}
.tabs button.on{color:var(--gold)}
.center{text-align:center}
.muted{color:var(--soft)}
.sp{height:10px}
.search{margin:8px 0}
.lettercard{background:#fffdf7 repeating-linear-gradient(#fffdf7 0 33px,#e6dfca 33px 34px);border:1px solid var(--line);border-radius:14px;padding:16px}
.lettercard h3{font:italic 600 30px "Cormorant Garamond"}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-size:15px;opacity:0;transition:.3s;z-index:20}
.toast.on{opacity:.92}