.series-page { --series-glow: #263a52; --series-shade: #142130; }
.theme-bone-covenant { --series-glow: #304751; --series-shade: #182630; }
.theme-cathedral-of-the-crows { --series-glow: #34304b; --series-shade: #1a1b2b; }
.theme-veilkeepers { --series-glow: #294657; --series-shade: #152633; }

.series-hero { position: relative; overflow: hidden; min-height: 720px; background: radial-gradient(ellipse at 78% 42%, var(--series-glow), transparent 48%), linear-gradient(110deg, #0b111a 8%, var(--series-shade) 64%, #0b111a); border-bottom: 1px solid var(--line); }
.series-hero::after { content: ''; position: absolute; inset: 18% -15% -50% 52%; border: 1px solid rgba(185,202,216,.09); border-radius: 50%; box-shadow: 0 0 0 7rem rgba(185,202,216,.025), 0 0 0 15rem rgba(185,202,216,.012); pointer-events: none; }
.series-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 53% 47%; align-items: center; gap: 1rem; min-height: 720px; padding-top: 7rem; padding-bottom: 4rem; }
.series-hero-copy { max-width: 650px; }
.back-link { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 4rem; color: #b8cad7; font: 700 .63rem/1 var(--sans); letter-spacing: .18em; text-decoration: none; }
.back-link:hover { color: #fff; }
.series-hero h1 { margin: 1rem 0 1.4rem; max-width: 740px; font: 500 clamp(5rem,8vw,8.7rem)/.83 var(--serif); letter-spacing: -.06em; }
.theme-cathedral-of-the-crows .series-hero h1 { font-size: clamp(4.7rem,7.1vw,7.6rem); }
.series-headline { margin: 0; color: #d0dce5; font: italic 500 clamp(1.7rem,2.5vw,2.6rem)/1.12 var(--serif); }
.series-lead { max-width: 480px; margin: 1.4rem 0 2.2rem; color: #b9c8d3; font: 400 .97rem/1.8 var(--sans); }
.series-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 590px; }
.series-art img { display: block; max-width: min(78%,380px); max-height: 530px; width: auto; height: auto; object-fit: contain; box-shadow: 18px 28px 50px rgba(0,0,0,.5); }
.art-count-1 img { transform: rotate(3deg); }
.theme-cathedral-of-the-crows .art-count-1 img { max-width: min(90%,500px); }
.art-count-2 img { position: absolute; max-width: 52%; max-height: 500px; }
.art-count-2 img:first-child { z-index: 2; transform: translate(-22%, 25px) rotate(-8deg); }
.art-count-2 img:last-child { z-index: 1; transform: translate(31%, -20px) rotate(7deg); }
.art-count-3 img { position: absolute; max-width: 39%; max-height: 480px; }
.art-count-3 img:first-child { z-index: 3; transform: translate(-62%, 10px) rotate(-8deg); }
.art-count-3 img:nth-child(2) { z-index: 2; transform: translate(0, -18px); }
.art-count-3 img:last-child { z-index: 1; transform: translate(62%, 18px) rotate(8deg); }

.series-story { display: grid; grid-template-columns: 28% 72%; gap: 2rem; padding-block: 7.5rem 8.5rem; }
.story-label { display: flex; align-items: start; gap: 1rem; padding-top: 1.2rem; }
.story-label .eyebrow { flex: none; }
.story-rule { width: 2.8rem; height: 1px; margin-top: .4rem; background: var(--accent-dark); }
.story-body { max-width: 720px; }
.story-body h2, .reading-intro h2, .more-worlds h2, .series-dispatch h2 { margin: 0 0 2rem; font: 500 clamp(3.1rem,5vw,5.5rem)/.96 var(--serif); letter-spacing: -.045em; }
.story-body > p { max-width: 650px; margin: 0 0 1.2rem; color: #b9c8d3; font: 400 .96rem/1.9 var(--sans); }
.genre-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.genre-tags li { padding: .55rem .8rem; border: 1px solid rgba(185,202,216,.26); color: #c9d5df; font: 600 .64rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.reading-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #121b29; }
.reading-inner { padding-block: 7rem 7.5rem; }
.reading-intro h2 { margin: 1rem 0 1.4rem; }
.reading-intro h2 em, .more-worlds h2 em { color: var(--accent); font-weight: 400; }
.reading-intro > p:last-child { max-width: 650px; color: #a9bac7; font: 400 .9rem/1.8 var(--sans); }
.cover-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(1rem,2vw,2rem); margin: 3.3rem 0 0; padding: 0; list-style: none; }
.cover-count-1 { grid-template-columns: minmax(0,240px); }
.cover-count-2 { grid-template-columns: repeat(2,minmax(0,240px)); }
.cover-count-3 { grid-template-columns: repeat(3,minmax(0,240px)); }
.cover-grid li { min-width: 0; }
.book-cover { overflow: hidden; aspect-ratio: 2 / 3; padding: .3rem; background: #0b111a; box-shadow: 10px 18px 28px rgba(0,0,0,.3); }
.book-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.book-caption { position: relative; min-height: 7rem; padding: 1.2rem 0 0 2.3rem; }
.reading-number { position: absolute; top: 1.1rem; left: 0; color: #8ca3b5; font: 500 1.65rem/1 var(--serif); }
.book-caption h3 { margin: 0; font: 500 clamp(1.4rem,2vw,1.8rem)/1.03 var(--serif); }
.book-caption p { margin: .55rem 0 0; color: #9aaebb; font: 600 .59rem/1.45 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.book-read-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.05rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(202,220,232,.55); color: #e1edf5; font: 700 .64rem/1.3 var(--sans); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.book-read-link:hover { color: #fff; border-bottom-color: #fff; }
.reading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2.2rem; }
.reading-actions .button { gap: 1rem; }
.reading-actions .button + .button { color: var(--paper); background: transparent; }
.reading-actions .button + .button:hover { color: var(--ink); background: var(--accent); }

.more-worlds { padding-block: 7.5rem 8.5rem; }
.more-worlds h2 { margin: 1rem 0 2.8rem; }
.more-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.more-grid a { position: relative; display: flex; flex-direction: column; min-height: 175px; padding: 1.5rem; border: 1px solid var(--line); background: #17212f; text-decoration: none; transition: transform .2s, background .2s; }
.more-grid a:hover { transform: translateY(-4px); background: #202d3e; }
.more-grid span { max-width: 85%; color: #a9bdcb; font: 700 .57rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.more-grid strong { margin-top: auto; font: 500 2.1rem/1 var(--serif); }
.more-grid b { position: absolute; bottom: 1.4rem; right: 1.5rem; color: var(--accent); font: 400 1.2rem/1 var(--serif); }
.series-dispatch { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 7rem; padding: 2.4rem 3rem; border: 1px solid rgba(185,202,216,.3); background: linear-gradient(110deg,#1a2736,#121d2b); }
.series-dispatch img { margin-bottom: 1rem; }
.series-dispatch h2 { margin: .3rem 0 .35rem; font-size: 3rem; }
.series-dispatch p:last-child { margin: 0; color: #aebfcb; font: .84rem/1.6 var(--sans); }
.series-dispatch .button { flex: none; }

@media (max-width: 1080px) {
  .series-hero h1 { font-size: clamp(4.6rem,7vw,7rem); }
  .series-art { min-height: 500px; }
  .series-art img { max-height: 460px; }
  .art-count-2 img, .art-count-3 img { max-height: 390px; }
  .cover-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cover-count-1 { grid-template-columns: minmax(0,240px); }
  .cover-count-2 { grid-template-columns: repeat(2,minmax(0,240px)); }
  .cover-count-3 { grid-template-columns: repeat(3,minmax(0,240px)); }
}
@media (max-width: 760px) {
  .series-hero-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 8.2rem; padding-bottom: 4rem; }
  .back-link { margin-bottom: 2.7rem; }
  .series-hero h1, .theme-cathedral-of-the-crows .series-hero h1 { font-size: clamp(4.3rem,11vw,6rem); }
  .series-art { min-height: 490px; margin-top: 1rem; }
  .series-art img { max-height: 435px; }
  .series-story { grid-template-columns: 1fr; gap: 1.3rem; padding-block: 5.5rem 6rem; }
  .story-body h2 { margin-bottom: 1.5rem; }
  .reading-inner { padding-block: 5.5rem 6rem; }
  .more-worlds { padding-block: 5.5rem 6rem; }
  .more-grid { grid-template-columns: 1fr; }
  .more-grid a { min-height: 145px; }
  .series-dispatch { flex-direction: column; align-items: start; padding: 2rem; margin-bottom: 5.5rem; }
}
@media (max-width: 540px) {
  .series-hero h1, .theme-cathedral-of-the-crows .series-hero h1 { font-size: clamp(3.7rem,13vw,5rem); }
  .series-art { min-height: 385px; }
  .series-art img { max-width: 70%; max-height: 360px; }
  .theme-cathedral-of-the-crows .series-art img { max-width: 94%; }
  .art-count-2 img { max-width: 53%; max-height: 320px; }
  .art-count-3 img { max-width: 39%; max-height: 300px; }
  .story-body h2, .reading-intro h2, .more-worlds h2 { font-size: 3.5rem; }
  .cover-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 2.5rem; }
  .cover-count-1 { grid-template-columns: minmax(0,220px); }
  .cover-count-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .book-caption { min-height: 8rem; padding-left: 1.8rem; }
  .book-caption h3 { font-size: 1.45rem; }
  .reading-number { font-size: 1.35rem; }
  .reading-actions .button { width: 100%; justify-content: space-between; }
  .series-dispatch h2 { font-size: 2.8rem; }
}