:root { --brand: #7d2235; --brand-ink: #fff; --accent: #d9a441; }
/* Each holiday edition page wears its own edition color; the brand stays oxblood in the header mark. */
.ed-christmas { --brand: #1b5a3e; --accent: #d23c4f; --brand-soft: color-mix(in oklab, #1b5a3e 12%, var(--bg)); --brand-text: color-mix(in oklab, #1b5a3e 85%, black); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-christmas { --brand-soft: color-mix(in oklab, #1b5a3e 22%, var(--bg)); --brand-text: color-mix(in oklab, #1b5a3e 55%, white); } }
:root[data-theme="dark"] .ed-christmas { --brand-soft: color-mix(in oklab, #1b5a3e 22%, var(--bg)); --brand-text: color-mix(in oklab, #1b5a3e 55%, white); }
.hero-title { font-weight: 650; letter-spacing: -0.025em; }
.hero-title em { font-style: italic; color: var(--brand-text); }
.hero { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); }
.stack { position: relative; aspect-ratio: 1 / 1.08; max-width: 30rem; margin-inline: auto; width: 100%; }
.page-shot { position: absolute; width: 72%; height: auto; border-radius: 6px; box-shadow: var(--shadow-3); background: #fff; border: 1px solid var(--line); }
.page-shot.back { right: 0; top: 0; transform: rotate(4deg); }
.page-shot.front { left: 0; top: 1.5rem; transform: rotate(-3deg); }
.narrow { max-width: 46rem; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.cast { list-style: none; padding: 0; margin: var(--s5) 0 var(--s3); display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cast li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.cast b { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--brand-text); }
.cast span { display: block; color: var(--ink-2); }
.cast small { display: block; margin-top: var(--s1); color: var(--ink-2); }
.get { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 760px) { .get { grid-template-columns: 1.2fr 1fr; } }
.faq details { margin-bottom: var(--s3); }
.guide h2 { margin-top: var(--s6); }
.guide p, .guide li { max-width: 66ch; }
.guide .card { margin-block: var(--s5); }
.timeline td:first-child { white-space: nowrap; font-weight: 700; }
.brand { white-space: nowrap; }
.site-header nav a { white-space: nowrap; }
@media (max-width: 480px) { .site-header nav .wide { display: none; } }
.after { margin-top: var(--s5); }
.card-note { margin: var(--s3) 0 0; }
.card-lead { margin: 0 0 var(--s3); }
@media (max-width: 480px) { .stack { max-width: 15rem; } .site-header nav { gap: var(--s3); } }
.ed-mark { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -0.35em; margin-right: var(--s1); border-radius: 4px; }
.edition { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s4); align-items: center; margin-top: var(--s5); text-decoration: none; color: inherit; max-width: 46rem; }
.edition img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.edition b { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--brand-text); margin-bottom: var(--s1); }
.edition span span { display: block; color: var(--ink-2); }
.edition .edition-price { margin-top: var(--s2); font-weight: 700; color: var(--ink); }
.edition:hover b { text-decoration: underline; }
@media (max-width: 480px) { .edition { grid-template-columns: 5rem 1fr; gap: var(--s3); } }