/* Straight Bible: near-black + ONE accent (flame orange #E76A1F, averaged from the flame pixels of the orange-flame badge + both banners) used only for
   main buttons, live badge and active tab. Everything else is greyscale. */
/* ---------- typography: display = Saira Condensed (closest free match to the squared, condensed, wide-tracked wordmark);
   body = Barlow. Both SIL OFL, self-hosted from /fonts (no Google Fonts calls). ---------- */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/saira-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/saira-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/saira-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
:root{--display:"Saira Condensed","Arial Narrow",sans-serif;--body:Barlow,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--bg:#0b0b0b;--fg:#eaeaea;--mut:#8f8f8f;--line:#262626;--accent:#e76a1f;--on-accent:#111;--nav:62px;--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--body)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ph-banner{font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--mut);padding:5px 8px;border-bottom:1px dashed #333}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;vertical-align:middle;color:var(--mut);border:1px dashed #555}
.tag.demo{color:#ccc;border-color:#777}
.tag.real{border-style:solid;border-color:#3a3a3a}
.tag.live{background:var(--accent);color:var(--on-accent);border:0}
.top{position:sticky;top:0;z-index:5;background:rgba(11,11,11,.94);backdrop-filter:blur(8px);padding:12px 18px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.top{align-items:center}
.top-logo img{height:40px;width:auto;display:block}
.screen{color:var(--mut);font-size:13px}
html.embedded .top,html.embedded .ph-banner{display:none}
html.embedded [data-hide-embed]{display:none!important}
main{padding:8px 18px calc(var(--nav) + 120px + var(--safe));max-width:720px;margin:0 auto}
h1{font-size:24px;line-height:1.2;margin:6px 0}
h2{font-size:16px;margin:0}
.sub{color:var(--mut);font-size:13px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;padding:11px 18px;border-radius:999px;text-decoration:none;border:0}
.btn.block{display:block;width:100%;text-align:center}
.link{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.hero{padding:18px 0 22px}
.hero.bg{position:relative;margin:0 -18px;padding:28px 18px 26px;overflow:hidden;isolation:isolate}
.hero.bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,11,.55),rgba(11,11,11,.8) 55%,var(--bg)),url(/img/brand/banner-leviathan-badge.jpg) center 30%/cover no-repeat;filter:saturate(.75)}
.hero .badge{width:56px;height:auto;display:block;margin-bottom:10px}
.about-banner{width:100%;aspect-ratio:1080/703;border-radius:12px;background:linear-gradient(180deg,rgba(11,11,11,.15),rgba(11,11,11,.55)),url(/img/brand/banner-leviathan-wordmark.jpg) center/cover;margin:4px 0 10px}
.slot{border:1px dashed #444;border-radius:12px;color:var(--mut);text-align:center;padding:26px 12px;font-size:12px;margin:14px 0}
.slot b{display:block;color:#bbb;font-size:13px;margin-bottom:2px}
.hero .art{width:100%;aspect-ratio:1/1;max-height:340px;object-fit:cover;border-radius:14px;background:#1a1a1a;display:block;margin-bottom:14px}
.count{display:flex;gap:18px;margin:14px 0 16px}
.count div{text-align:center}.count b{display:block;font-size:26px;font-variant-numeric:tabular-nums}.count small{color:var(--mut);font-size:11px;text-transform:uppercase}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 10px}
.sec a{color:var(--mut);font-size:13px;text-decoration:none}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.card{flex:0 0 140px;cursor:pointer}
.card img{width:140px;height:140px;object-fit:cover;border-radius:10px;background:#1a1a1a;display:block}
.card .t{font-size:13px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m,.ep .m{color:var(--mut);font-size:12px}
.search input{width:100%;background:#1b1b1b;border:0;border-radius:10px;color:var(--fg);padding:12px 14px;font:inherit}
.ep{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.ep img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#1a1a1a;flex:none}
.ep .info{flex:1;min-width:0}.ep .t{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep.playing .t{text-decoration:underline}
.ep .resume{color:var(--fg)}
.meta-line{color:var(--mut);font-size:12px;margin:8px 0}
.embed{aspect-ratio:16/9;width:100%;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut);text-align:center;gap:4px;overflow:hidden}
.embed iframe{width:100%;height:100%;border:0}
.sched{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sched .d{width:44px;text-align:center;color:var(--mut);font-size:11px;text-transform:uppercase}.sched .d b{display:block;color:var(--fg);font-size:18px}
.list a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.list a span:last-child{color:var(--mut)}
form label{display:block;font-size:12px;color:var(--mut);margin:12px 0 4px}
form input,form textarea,form select{width:100%;background:#1b1b1b;border:0;border-radius:10px;color:var(--fg);padding:11px 12px;font:inherit}
form textarea{min-height:110px;resize:vertical}
.lock{text-align:center;padding:40px 10px}
.lock .ic{font-size:40px;color:var(--mut)}
.note{color:var(--mut);font-size:12px;margin-top:10px}
.empty{color:var(--mut);padding:30px 0;text-align:center}
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav) + var(--safe));padding-bottom:var(--safe);background:#0c0c0c;display:flex;z-index:10}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--mut);font-size:11px}
.tabs a .ico{font-size:18px;line-height:1}
.tabs a.active{color:var(--accent)}
.tabs a.active span:last-child{font-weight:700}
.player{position:fixed;left:0;right:0;bottom:calc(var(--nav) + var(--safe));background:#181818;display:flex;gap:10px;align-items:center;padding:8px 12px;z-index:9}
.player img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.p-meta{flex:1;min-width:0}
.p-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ctrl{display:flex;align-items:center;gap:6px;margin-top:4px}
.p-ctrl button{padding:4px 7px;font-size:13px;color:var(--fg)}
.p-ctrl button.accent{background:var(--accent);color:var(--on-accent);border-radius:999px;width:34px;height:34px}
.p-time{color:var(--mut);font-size:11px;margin-left:auto;font-variant-numeric:tabular-nums}
#pSeek{width:100%;accent-color:#bdbdbd;height:14px;margin:2px 0 0}
.p-close{color:var(--mut);padding:6px;align-self:flex-start}
.install-chip{display:block;color:var(--mut);font-size:13px;margin:4px 0 0;text-decoration:none}
[hidden]{display:none!important}
/* ---------- phase 1 additions ---------- */
.top-right{display:flex;align-items:center;gap:12px}
.bell{position:relative;display:flex;width:28px;height:28px;align-items:center;justify-content:center;color:var(--mut)}
.bell svg{width:22px;height:22px;fill:currentColor}.bell.on{color:var(--fg)}
.bell i{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--bg)}
.loading{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--mut)}
.loading img{width:164px;height:auto;opacity:.95;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.chips{display:flex;gap:8px;overflow-x:auto;margin:12px -18px 0;padding:0 18px 4px;scrollbar-width:none}
.chip{flex:none;font-size:13px;padding:7px 12px;border-radius:999px;background:#1b1b1b;color:var(--mut)}
.chip.on{background:#eaeaea;color:#111;font-weight:700}
.play-sm{flex:none;width:34px;height:34px;border-radius:50%;background:#1f1f1f;color:var(--fg);font-size:12px}
.list .row,.row{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;text-align:left}
.row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .chev{color:var(--mut)}
.row[disabled]{cursor:default;opacity:.85}
.pill{flex:none;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#eaeaea;color:#111}
.nowrap{white-space:nowrap}
.msg .unread{flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
.msg .unread.on{background:#fff}
.msg-prev{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.art .noimg{width:56px;height:56px;border-radius:8px;background:#1a1a1a;flex:none}
.check{display:flex!important;gap:10px;align-items:center;font-size:14px!important;color:var(--fg)!important;margin:14px 0 0!important}
.check input{width:18px;height:18px;flex:none;accent-color:#bdbdbd}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.btn[disabled]{opacity:.6}
.btn-ghost{display:inline-block;background:transparent;color:var(--fg);border:1px solid #3a3a3a;font-weight:700;padding:10px 18px;border-radius:999px;text-decoration:none;text-align:center}
/* bottom sheet */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,0);transition:background .24s}
.sheet.open{background:rgba(0,0,0,.6)}
.sheet-card{position:absolute;left:0;right:0;bottom:0;max-height:90vh;overflow-y:auto;background:#141414;border-radius:18px 18px 0 0;padding:10px 18px calc(24px + var(--safe));transform:translateY(100%);transition:transform .24s ease;max-width:720px;margin:0 auto;overscroll-behavior:contain}
.sheet.open .sheet-card{transform:none}
.grab{width:40px;height:4px;border-radius:2px;background:#3a3a3a;margin:2px auto 10px}
.sheet-x{position:absolute;top:10px;right:12px;color:var(--mut);font-size:16px;padding:6px}
.d-head{display:flex;gap:12px;align-items:center;margin:4px 30px 14px 0}
.d-head img{width:84px;height:84px;border-radius:10px;object-fit:cover;flex:none}
.d-head h2{font-size:17px;line-height:1.3;margin:0 0 4px}
.d-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:16px}
.d-actions.one{grid-template-columns:1fr}
.d-actions .btn{text-align:center}
.d-body{color:#d5d5d5;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.d-body a{color:var(--fg)}
.d-body .ts{font:inherit;color:var(--fg);text-decoration:underline;text-underline-offset:2px;padding:0}
.msg-body{white-space:pre-line}
.a-cover{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin:4px 0 12px;display:block}
.article{font-size:16px;line-height:1.65;color:#e2e2e2}
.article img{max-width:100%;height:auto;border-radius:8px}
.article h2,.article h3{font-size:18px;margin:20px 0 8px;color:var(--fg)}
.article blockquote{margin:12px 0;padding-left:14px;border-left:2px solid #444;color:#cfcfcf}
.article figure{margin:14px 0}.article figcaption{color:var(--mut);font-size:12px}
/* display type: headings, section titles, tab labels, buttons, card titles (uppercase + wordmark-like tracking) */
h1,h2,h3,.sec h2,.d-head h2,.article h2,.article h3,.lock h1{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em}
h1{font-size:28px;line-height:1.12;letter-spacing:.1em}
h2,.sec h2{font-size:17px;letter-spacing:.16em}
.d-head h2{font-size:19px;line-height:1.2;letter-spacing:.08em}
.article h2,.article h3{font-size:19px;letter-spacing:.08em}
.screen{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:13px}
.tabs a{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.tabs a.active span:last-child{font-weight:700}
.btn,.btn-ghost,.chip,.pill,.tag,.sec a,.p-ctrl button.accent{font-family:var(--display);text-transform:uppercase}
.btn,.btn-ghost{font-weight:700;letter-spacing:.14em;font-size:15px}
.chip{font-weight:600;letter-spacing:.1em;font-size:13px}.chip.on{font-weight:700}
.pill{letter-spacing:.1em}
.tag{letter-spacing:.12em;font-size:11px;font-weight:600}
.sec a{letter-spacing:.14em;font-size:12px;font-weight:600}
.card .t,.ep .t,.p-title,.row .grow>b,.row .grow>strong{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.25}
.card .t{font-size:14px}.ep .t{font-size:15px}.p-title{font-size:14px}
.count b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:.04em}
.count small,.sched .d{font-family:var(--display);letter-spacing:.14em}
.sched .d b{font-family:var(--display);font-weight:600}
/* readable companion stays on body copy, show notes, articles, forms */
.d-body,.article,.msg-body,.sub,.meta-line,.note,form,.card .m,.ep .m{font-family:var(--body);text-transform:none}
.sched>div:last-child>b,.embed b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px}
/* countdown hero: wide leviathan banner behind the text, darkened and fading into the page (same treatment as the original hero) */
.hero.bg.bg-wide::before{background:linear-gradient(180deg,rgba(11,11,11,.55),rgba(11,11,11,.8) 55%,var(--bg)),url(/img/brand/banner-leviathan-wide.jpg) center 35%/cover no-repeat}