.series-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 9vw, 108px) 36px; }
.series-hero h1 { margin: .2em 0; font: 600 clamp(2rem, 6vw, 5rem)/1.25 var(--serif); overflow-wrap: anywhere; }
.series-cover { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgba(199,154,59,.65); border-radius: 20px; }
.series-reader-actions, .series-progress-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block: 20px; padding: 20px; border: 1px solid rgba(199,154,59,.35); border-radius: 18px; }
.series-reader-actions form, .series-progress-actions form { margin: 0; }
.series-entry-list { padding-block: 36px 80px; }
.series-entry { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; margin-block: 24px; align-items: start; }
.series-entry-index { font: 700 1.25rem/1 serif; color: #c79a3b; padding-top: 18px; }
.series-progress-actions { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.series-reader-actions .button, .series-progress-actions .button { min-height: 44px; padding: 12px 20px; background: var(--red); color: #fff8ef; border: 1px solid var(--red); font: inherit; cursor: pointer; transition: background .2s, transform .2s; }
.series-reader-actions .button-secondary, .series-progress-actions .button-secondary { background: transparent; color: var(--red); }
.series-reader-actions .button:hover, .series-progress-actions .button:hover { background: #8f1931; color: #fff8ef; transform: translateY(-2px); }
.series-progress-note h2 { margin: 0; font: 600 24px/1.4 var(--serif); }
.series-progress-note a, .series-byline a { color: var(--red); text-underline-offset: 5px; }
.series-progress-actions .text-button { padding: 10px; min-height: 44px; border: 0; background: transparent; color: var(--red); cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: reduce) { .series-reader-actions .button, .series-progress-actions .button { transition: none; } .series-reader-actions .button:hover, .series-progress-actions .button:hover { transform: none; } }
@media (max-width: 640px) { .series-hero { grid-template-columns: 1fr; } .series-cover { max-width: 280px; } .series-entry { grid-template-columns: 38px minmax(0,1fr); } }