/* Verse-of-the-day pages: the app's card drawn in HTML, over articles.css. */
.vod .crumbs{font-size:13px;color:var(--muted);margin:0 0 14px}
.vod .crumbs a{color:var(--muted);text-decoration:none}
.vod .crumbs a:hover{color:var(--accent)}
.vod h1 .sub,.vod h2 .sub{display:block;font-weight:600;font-size:.55em;color:var(--muted);letter-spacing:0;line-height:1.4;margin-top:4px}
.vod h2 .sub{display:inline;font-size:.7em;margin-left:6px}
.wrap.wide{max-width:1040px}
.hero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start;margin:0 0 20px}
.hero .text{min-width:0}
.verse,.tl{overflow-wrap:anywhere}
@media (max-width:640px){.hero{grid-template-columns:minmax(0,1fr)}.hero .vcard.hero{margin:0 auto}}
.vcard.hero{width:min(320px,100%)}
.vcard{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:22px;background:#1B1636;color:#fff;container-type:inline-size;box-shadow:0 20px 40px -24px rgba(27,11,54,.6);text-decoration:none}
.vcard.tile{border-radius:14px;box-shadow:0 10px 24px -16px rgba(27,11,54,.5)}
.vcard img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vcard .wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,24,.4) 0%,rgba(8,8,24,.65) 50%,rgba(8,8,24,.86) 100%)}
.vcard.tone-light .wash{background:linear-gradient(180deg,rgba(8,8,24,.3) 0%,rgba(8,8,24,.6) 50%,rgba(8,8,24,.82) 100%)}
.vcard.tone-busy .wash{background:linear-gradient(180deg,rgba(8,8,24,.5) 0%,rgba(8,8,24,.72) 50%,rgba(8,8,24,.9) 100%)}
.vcard .in{position:absolute;inset:0;padding:8cqw;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--sans)}
.vcard .kicker{font-size:3.4cqw;letter-spacing:0;font-weight:600;color:rgba(255,255,255,.85)}
.vcard .mid{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0}
.vcard .q{font-size:13cqw;line-height:1;color:rgba(255,255,255,.5);margin-bottom:-3cqw;font-family:Georgia,serif}
.vcard .v{font-weight:700;line-height:1.5;text-shadow:0 2px 6px rgba(0,0,0,.7);color:#fff}
.vcard .r{margin-top:4cqw;font-size:4.2cqw;font-weight:700;color:#FFD98A;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vcard .foot{display:flex;align-items:center;gap:3cqw}
.vcard .rule{flex:1;height:1px;background:rgba(255,255,255,.35)}
.vcard .site{font-size:3.3cqw;color:rgba(255,255,255,.75);font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
.vcard.rendered .in,.vcard.rendered .wash{display:none}
.hero .text .verse{font-size:20px;line-height:1.9;margin:0 0 18px}
.hero .text .verse cite{font-size:15px}
.tl-head{font-size:13px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 6px!important}
.tl{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;font-style:italic;min-height:1em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.actions .wa{background:#1DA851}
.actions .btn{font-size:14px}
.hint{font-size:14px;color:var(--muted)}
.daynav{display:flex;justify-content:space-between;gap:12px;margin:8px 0 36px;font-size:14px}
.daynav a{text-decoration:none;color:var(--accent-2);font-weight:600;padding:8px 12px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin:0 0 16px}
.tiles.gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.tile-wrap .cap{display:block;text-decoration:none;color:var(--ink);font-size:13px;line-height:1.4;margin-top:8px}
.tile-wrap .cap b{display:block;font-family:var(--scripture);font-weight:400;font-size:14px}
.tile-wrap .cap span{color:var(--muted)}
.strip h2,.about h2{font-size:20px}
.months,.books{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font-size:14px}
.months a,.books a{text-decoration:none;color:var(--ink-soft);padding:6px 12px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface)}
.months a[aria-current],.books a:hover,.months a:hover{border-color:var(--accent);color:var(--accent-2)}
.book h2{margin-top:36px}
.pv{margin:0 0 22px}
.pv .verse{margin:0 0 6px}
.pv .tl{margin:0 0 4px;font-size:15px}
.pv .shown{font-size:13px;color:var(--muted);margin:0}
.pv .shown a{color:var(--muted)}