.sec-sub{max-width: 44ch; font-weight: 600; color: var(--mist);}
.perks{display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none;}
.perks li{display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 700;}
.perks .icon{width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: rgba(255, 46, 126, .16); color: var(--rose-2);}
.card-lede{margin-top: 10px; max-width: 44ch; font-weight: 600; color: var(--mist);}
.file-item{display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line);}
@media (max-width: 1180px){
.perks{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 760px){
.perks{grid-template-columns: 1fr 1fr; gap: 8px;}
.perks li{font-size: .8rem; gap: 8px;}
.perks .icon{width: 24px; height: 24px; padding: 5px;}
.bottom-nav a .icon{width: 22px; height: 22px;}
.bottom-nav a[aria-current="page"] .icon{color: var(--rose-2); filter: drop-shadow(0 0 8px var(--rose));}
}
.char-grid-row{grid-template-columns: repeat(6, minmax(0, 1fr));}
.char-hero{position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); align-items: center; gap: 28px clamp(28px, 4vw, 56px); max-width: var(--max); margin: 18px auto 0; padding: clamp(22px, 3vw, 36px) clamp(20px, 4vw, 48px); border-radius: 32px; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(50, 26, 61, .9), rgba(21, 11, 26, .9));}
.char-hero-bg{position: absolute; inset: 0; z-index: -1; opacity: .45;}
.char-hero-bg img{width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.6); transform: scale(1.4);}
.char-figure{margin: 0;}
.char-figure img{display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; object-position: top; border-radius: 26px; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(255, 46, 126, .75);}
.char-figure figcaption{margin-top: 10px; font-size: .74rem; line-height: 1.4; color: var(--dim); text-align: center;}
.char-hero h1{margin-top: 10px; font-size: clamp(2.6rem, 5.4vw, 4.6rem);}
.char-intro{margin: 14px 0 0; max-width: 56ch; color: var(--mist);}
.char-cols{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0;}
.char-cols span{font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);}
.char-cols a{padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(12, 6, 16, .55); font: 700 .78rem/1.2 var(--ui); color: var(--cream);}
.char-cols a:hover{border-color: var(--rose); color: #fff;}
.char-pills{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;}
.char-pills .tag-new{position: static; box-shadow: none;}
.stat-row{display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0;}
.stat-row div{display: grid;}
.stat-row dt{font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);}
.stat-row dd{margin: 2px 0 0; font: 800 1.2rem/1.2 var(--display);}
.char-actions{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;}
.char-actions .btn.is-done{background: linear-gradient(135deg, #b8f5d6, #4cd59a); color: #06291a;}
.char-watch.is-watching{border-color: var(--rose); color: var(--cream); background: rgba(255, 79, 139, .18);}
.char-watch[aria-busy="true"]{opacity: .6; cursor: progress;}
.char-action-status{min-height: 1.3em; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--mist);}
.char-action-status:empty{display: none;}
.perks-inline{display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;}
.fav-btn[aria-pressed="true"]{border-color: var(--rose); color: var(--cream); background: rgba(255, 79, 139, .2);}
.voice-player{display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 520px; margin-top: 24px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid rgba(255, 79, 139, .4); background: rgba(255, 79, 139, .08);}
.preview-grid{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none;}
.preview-grid li{position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 18px; background: var(--plum);}
.preview-grid img{width: 100%; height: 100%; object-fit: cover; filter: saturate(1.4);}
.preview-grid li.is-free img{filter: none; object-position: top;}
.preview-grid.preview-grid-hub{grid-template-columns: repeat(5, minmax(0, 1fr));}
.preview-grid .tag{position: absolute; top: 10px; left: 10px;}
.preview-grid b{position: absolute; inset: auto 8px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; border-radius: 999px; background: rgba(12, 6, 16, .72); font: 800 .7rem/1 var(--ui); letter-spacing: .06em; backdrop-filter: blur(6px);}
.preview-grid b .icon{width: 13px; height: 13px;}
.preview-grid .more b{inset: 0; border-radius: 0; background: rgba(12, 6, 16, .55); font-size: .86rem;}
.vote-cta{display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 28px; border-radius: 28px; border: 1px solid rgba(255, 161, 51, .35); background: linear-gradient(120deg, rgba(255, 161, 51, .1), rgba(255, 46, 126, .1));}
.vote-cta > img{width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold);}
.vote-cta h2{margin-top: 8px; font-size: clamp(1.5rem, 2.6vw, 2.2rem);}
.vote-cta .card-lede{margin-top: 6px; color: var(--mist);}
.vote-cta .hero-actions{margin: 0;}
.coin-pill{display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 161, 51, .14); border: 1px solid var(--gold-dim); color: var(--gold); font-weight: 700; font-size: .86rem;}
.coin-pill b{color: #ffe08a; font-size: 1rem;}
.coin-pill .icon{width: 18px; height: 18px;}
.reactions b{font-weight: 800; color: var(--cream);}
.reactions [aria-pressed="true"]{background: rgba(255, 79, 139, .14);}
.settings-nav a{display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; border-radius: 14px; font-weight: 700; color: var(--mist); text-decoration: none;}
.settings-nav a:hover{background: rgba(247, 236, 226, .05); color: var(--cream);}
.settings-nav a[aria-current="true"]{color: var(--cream); background: linear-gradient(90deg, rgba(255, 46, 126, .28), rgba(255, 46, 126, .04));}
@media (max-width: 1180px){
.char-grid-row{grid-template-columns: repeat(3, minmax(0, 1fr));}
.preview-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
.masthead .nav-right .nav-link[data-nav="community"]{display: none;}
}
@media (max-width: 960px){
.masthead .me-btn{display: inline-grid;}
.vote-cta{grid-template-columns: auto minmax(0, 1fr);}
.vote-cta .hero-actions{grid-column: 1 / -1;}
}
@media (max-width: 760px){
.char-grid, .char-grid-row{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.char-card{padding: 14px 8px 12px;}
.char-card img, .char-initial{width: 72px; height: 72px;}
.char-hero{grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin: 12px 12px 0; padding: 26px 18px; border-radius: 26px;}
.char-hero .kicker, .char-pills, .stat-row, .char-cols{justify-content: center;}
.char-figure{width: min(100%, 300px);}
.char-figure img{max-height: 60vh;}
.char-intro{margin-inline: auto;}
.char-actions{width: 100%;}
.char-actions .btn:not(.btn-icon){flex: 1 1 100%;}
.char-actions .btn.btn-ghost:not(.btn-icon){flex: 1 1 auto; min-width: 0; padding: 0 14px; white-space: nowrap;}
.preview-grid.preview-grid-hub{grid-template-columns: repeat(2, minmax(0, 1fr));}
.preview-grid-hub .is-free{display: none;}
.voice-player{grid-template-columns: auto minmax(0, 1fr); border-radius: 22px;}
.preview-grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.preview-grid b{font-size: .6rem; inset: auto 4px 4px; min-height: 24px;}
.vote-cta{grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 22px 18px;}
.vote-cta .kicker{justify-content: center;}
.vote-cta .hero-actions{width: 100%;}
.vote-cta .hero-actions .btn{flex: 1 1 0;}
.settings-nav a{flex: none; border: 1px solid var(--line); border-radius: 999px;}
.bottom-nav a{font-size: .66rem;}
}
.sec-head-tight h2, .panel > h2{font-size: 1.35rem;}
[data-watch][aria-pressed="true"]{border-color: var(--rose); color: var(--cream);}
.inbox-list li{display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;}
.inbox-list .is-unread{background: rgba(255, 79, 139, .07);}
.continuity{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;}
.continuity h2{font-size: 1.35rem;}
.continuity-bar{max-width: var(--max); margin: 18px auto 0; padding: 12px 16px;}
.continuity-bar > a{display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;}
.continuity-bar small{display: block; color: var(--mist); font-size: .74rem; font-weight: 700;}
.continuity-bar .cont-next{text-align: right;}
.continuity-bar .icon{width: 20px; height: 20px; color: var(--rose-2);}
[data-save-place][aria-pressed="true"]{border-color: var(--gold); color: var(--gold);}
.zb-footer-social a{display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mist); text-decoration: none;}
.zb-footer-social a:hover{color: var(--cream);}
body[data-page="agegate"] .topbar, body[data-page="agegate"] .masthead, body[data-page="agegate"] .zb-footer, body[data-page="agegate"] .bottom-nav{display: none;}
@media (max-width: 760px){
.continuity-bar{margin: 14px 12px 0;}
.continuity-bar .cont-prev small, .continuity-bar .cont-next small{font-size: .68rem;}
}
@media (pointer: coarse){
.letter-jump a{min-width: 44px; height: 44px;}
}
.tier-backstage{color: #ffc6dd; background: rgba(255, 79, 139, .14); border: 1px solid rgba(255, 138, 180, .45);}
.char-grid .char-card img{object-position: 50% 18%;}
.char-grid .char-card[aria-current="page"]{border-color: var(--rose);}
.char-pills .tag{position: static; box-shadow: none;}
.char-progress{overflow: hidden; max-width: 420px; height: 8px; margin-top: 14px; border-radius: 999px; background: rgba(247, 236, 226, .1);}
.char-progress span{display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--rose));}
.char-actions .btn-icon{width: 48px; padding: 0; justify-content: center;}
.continuity-bar .cont-prev, .continuity-bar .cont-next{display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;}
.continuity-bar .cont-mid{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;}
.continuity-bar .cont-mid small{width: 100%; text-align: center;}
.continuity-bar .cont-status{flex-basis: 100%; margin: 0; font-size: .8rem; font-weight: 700; color: var(--mist); text-align: center;}
.continuity-bar .cont-status:empty{display: none;}
.continuity-bar [data-series-progress-save][data-saved="true"]{border-color: var(--gold); color: var(--gold);}
.char-notes{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px;}
.char-note h2{margin-top: 8px; font-size: 1.35rem;}
.char-note p:not(.kicker){margin: 10px 0 0; color: var(--mist);}
.char-note .link-arrow{margin-top: 12px;}
.char-explore .char-cols{margin-top: 0;}
.char-explore .char-cols + .char-cols{margin-top: 12px;}
.char-facts{display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 24px; margin: 14px 0 0;}
.char-facts div{display: grid; align-content: start;}
.char-facts dt{font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);}
.char-facts dd{margin: 2px 0 0; font: 700 1rem/1.3 var(--ui); color: var(--cream);}
.char-facts a{color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;}
.char-facts a:hover{color: var(--rose-2);}
@media (max-width: 760px){
.char-progress{margin-inline: auto;}
.char-actions{justify-content: center;}
.char-actions .btn-icon{flex: 0 0 48px;}
.continuity-bar .cont-prev, .continuity-bar .cont-next{flex: 1 1 40%;}
.continuity-bar .cont-mid{order: 3; flex-basis: 100%;}
}
.char-hero-side{display: none;}
@media (min-width: 1181px){
.char-hero.has-side{grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) 230px;}
.char-hero-side{display: grid; align-content: center; gap: 10px;}
.char-hero-side ul{display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;}
.char-hero-side li a{position: relative; display: block; overflow: hidden; height: 104px; border-radius: 16px; border: 1px solid var(--line-2); text-decoration: none;}
.char-hero-side img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform .6s var(--ease);}
.char-hero-side li a:hover{border-color: var(--rose);}
.char-hero-side li a:hover img{transform: scale(1.05);}
.char-hero-side li a::after{content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 6, 16, .86), rgba(12, 6, 16, 0) 72%);}
.char-hero-side span{position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font: 800 .92rem/1.15 var(--ui); color: var(--cream);}
}
@media (min-width: 1181px){
.char-duo{display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 0 48px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);}
.char-duo > .section{max-width: none; margin: 0; padding-left: 0; padding-right: 0;}
.char-duo .sec-head h2{font-size: clamp(1.8rem, 2.6vw, 2.4rem);}
.char-duo > .section:first-child .sec-sub{display: none;}
.char-duo > .section:first-child .char-grid.is-art.char-grid-row{grid-template-columns: repeat(var(--versions), 170px);}
.char-duo > .section:last-child .char-grid.is-art.char-grid-row{grid-template-columns: repeat(4, minmax(0, 1fr));}
.char-duo > .section:last-child .char-grid-row > li:nth-child(n+5){display: none;}
}
/* 44 px tap targets on touch (2026-10-09) */
@media (pointer: coarse){
.char-cols{row-gap: 16px;}
.char-cols a{position: relative;}
.char-cols a::before{content: ""; position: absolute; inset: -8px 0;}
.char-facts a{position: relative;}
.char-facts a::before{content: ""; position: absolute; inset: -12px 0;}
.continuity-bar .cont-prev, .continuity-bar .cont-next{min-height: 44px;}
}
/* Public hub (no age cookie): the preview card in the hero; a letter when there is no card. On a phone the
   picture is kept small so the main button sits above the bottom nav. */
.char-figure-initial{display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 26px; border: 1px solid var(--line-2); background: radial-gradient(circle at 30% 30%, var(--plum-2), var(--night-2)); font: 800 5rem/1 var(--display); color: var(--rose-2);}
.char-hero-public .card-lede{margin-top: 14px;}
@media (max-width: 760px){
.char-hero-public .char-figure{width: min(100%, 170px);}
.char-hero-public .char-figure-initial{width: 120px; margin-inline: auto; aspect-ratio: 1 / 1; border-radius: 22px; font-size: 3.2rem;}
.char-hero-public .card-lede{margin-inline: auto;}
}