/* Stories view: story rows only. Series view: curved series carousel, the series row, then every shelf. */
html:not(.sv-on) #svBill, html:not(.sv-on) #view-library > section.sv { display: none !important; }
/* Stories view: the art story rows only (no series band, no explore section) */
html:not(.sv-on) #kseries, html:not(.sv-on) #view-library > section.xp { display: none !important; }
html.sv-on #view-library > :not(#svBill):not(section.sv) { display: none !important; }

.svh { --ink: #16202C; --muted: #5E6672; --teal: #145C63; position: relative; padding: 18px 0 8px; color: var(--ink); font-family: Inter, system-ui, sans-serif; }
.svh-top { text-align: center; display: flex; flex-direction: column; align-items: center; }
.svh-badge { margin: 0 0 16px; padding: 9px 18px; border-radius: 999px; background: #DAE7C7; color: #0B4A33; font: 500 15px/1 Inter, system-ui, sans-serif; }
.svh h1 { margin: 0; font: 700 clamp(38px, 6.4vw, 78px)/1.04 "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -.03em; color: #101410; }
.svh h1 span { display: block; }
.svh h1 span + span { letter-spacing: -.02em; }
.svh-sub { margin: 16px 0 0; max-width: 52ch; font: 400 clamp(15px, 1.5vw, 19px)/1.6 Inter, system-ui, sans-serif; color: var(--muted); }
.svh-frame { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1440 / 520; margin-top: 8px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.svh-frame.grab { cursor: grabbing; }
.svh-card { position: absolute; display: block; overflow: hidden; background: #E8E4D8; text-decoration: none; will-change: left, width, height, top, clip-path; -webkit-tap-highlight-color: transparent; }
.svh-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.svh-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(0deg, rgba(10,13,18,.62), transparent); pointer-events: none; }
.svh-cap { position: absolute; left: 12px; right: 10px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; min-width: 0; }
.svh-cap i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.svh-cap b { font: 600 14px/1.15 Inter, system-ui, sans-serif; text-shadow: 0 1px 8px rgba(0,0,0,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svh-cta { display: flex; justify-content: center; margin: 14px 0 4px; }
.svh-go { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; border-radius: 999px; background: var(--teal); color: #fff; font: 600 17px/1 Inter, system-ui, sans-serif; text-decoration: none; outline: 2px dashed rgba(20,92,99,.5); outline-offset: 7px; transition: transform .2s, background .2s; }
.svh-go:hover { transform: translateY(-2px); background: #11707F; }
.svh-note { position: absolute; margin: 0; font: 600 30px/1.05 Caveat, "Comic Sans MS", cursive; color: #0B4A33; pointer-events: none; }
.svh-note.n1 { right: 3%; top: 8%; transform: rotate(14deg); text-align: center; }
.svh-note.n2 { left: 22%; bottom: 14%; transform: rotate(-18deg); }
.svb-row { margin: 22px 0 6px; }
.svb-row h2 { margin: 0 0 12px; font: 500 22px/1.2 Fraunces, Georgia, serif; color: var(--ink); }
.svb-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x proximity; scrollbar-width: none; }
.svb-scroll::-webkit-scrollbar { display: none; }
.svb-card { flex: 0 0 clamp(160px, 19vw, 230px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.svb-art { display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #E8E4D8; box-shadow: 0 12px 30px rgba(22,32,44,.14); }
.svb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svb-t { font: 600 16px/1.25 Inter, system-ui, sans-serif; margin-top: 4px; }
.svb-d { font: 400 13px/1.4 Inter, system-ui, sans-serif; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .svb-card:hover, html.sv-on .sv .kr-card:hover { transform: translateY(-6px) scale(1.04); } }
html.sv-on section.sv { margin-top: 10px; }
html.sv-on .sv .kr-card { width: clamp(160px, 19vw, 230px); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 820px) {
  .svh { padding-top: 8px; }
  .svh h1 { font-size: clamp(38px, 11vw, 56px); }
  .svh-frame { aspect-ratio: auto; height: 250px; }
  .svh-note { display: none; }
  .svh-cap b { display: none; }
  .svh-cap { left: 8px; bottom: 8px; }
  .svh-cap i { width: 24px; height: 24px; }
  .svb-card, html.sv-on .sv .kr-card { width: 150px; flex-basis: 150px; }
}
@media (prefers-reduced-motion: reduce) { .svb-card, .svh-go, html.sv-on .sv .kr-card { transition: none; } }
/* Reload at /#series: until the Series hero exists, hide the bare page behind a soft skeleton (early.js sets sv-boot, seriesview.js clears it; after 4 s the page shows anyway). */
html.sv-boot { background: #FBF8F1; }
html.sv-boot body { visibility: hidden; animation: svShow 0s linear 4s forwards; }
@keyframes svShow { to { visibility: visible; } }
html.sv-boot::before { content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none; animation: svPulse 1.1s ease-in-out infinite alternate; background: linear-gradient(#E8E4D8, #E8E4D8) 50% 170px / 72% 34px no-repeat, linear-gradient(#E8E4D8, #E8E4D8) 50% 222px / 54% 34px no-repeat, linear-gradient(#EFEBDF, #EFEBDF) 50% 290px / 84% 14px no-repeat, linear-gradient(#EFEBDF, #EFEBDF) 50% 316px / 62% 14px no-repeat, linear-gradient(#E8E4D8, #E8E4D8) 8% 420px / 20% 230px no-repeat, linear-gradient(#E8E4D8, #E8E4D8) 31% 420px / 20% 230px no-repeat, linear-gradient(#E8E4D8, #E8E4D8) 54% 420px / 20% 230px no-repeat, linear-gradient(#E8E4D8, #E8E4D8) 77% 420px / 20% 230px no-repeat; }
@keyframes svPulse { from { opacity: .55; } to { opacity: 1; } }
/* Pictures on the Series page: a soft shimmer while one loads, then a quick wipe-in (~0.8 s, staggered). Classes are set by seriesview.js; without it nothing is hidden. */
html.sv-on #view-library img.rv-wait { opacity: 0; }
html.sv-on #view-library :has(> img.rv-wait) { background: linear-gradient(100deg, #ECE8DC 30%, #F8F5EC 50%, #ECE8DC 70%) 0 0 / 220% 100%; animation: rvShimmer 1.1s linear infinite; }
html.sv-on #view-library img.rv-in { animation: rvIn .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--rv-i, 0) * 90ms); }
@keyframes rvShimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes rvIn { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.1); filter: blur(10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { html.sv-on #view-library :has(> img.rv-wait) { animation: none; } html.sv-on #view-library img.rv-in { animation: rvFade .3s ease both; animation-delay: 0s; } @keyframes rvFade { from { opacity: 0; } to { opacity: 1; } } }