.companion-page { background: var(--paper); }
.companion-main { width: min(100% - 3rem, var(--max)); margin: 0 auto; }
.companion-intro { max-width: 800px; padding: 4rem 0 2rem; }
.companion-intro h1 { font-size: clamp(3rem, 8vw, 6rem); }
.companion-intro > p:not(.eyebrow) { max-width: 700px; font: 1.15rem/1.45 var(--display); }
.territory-note, .companion-rights { color: var(--muted); font-size: .85rem !important; }
.companion-status { min-height: 1.5rem; padding: .75rem 0; border-block: 1px solid var(--line); color: var(--muted); }
.companion-book-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 0 3rem; }
.companion-book-card { min-width: 0; padding: 1.35rem; background: var(--paper-warm); border: 1px solid var(--line); }
.companion-book-card h2 { margin: .2rem 0; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.companion-author { margin: 0 0 .75rem; font: 1.2rem var(--display); }
.companion-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin: 1rem 0; }
.companion-actions a, .companion-actions button, .companion-detail-heading button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: .55rem .8rem; border: 1px solid var(--line); background: transparent; border-radius: 4px; color: var(--ink); text-decoration: none; cursor: pointer; }
.companion-actions a:first-of-type { background: var(--ink); color: white; }
.companion-actions a { min-width: 8rem; }
.comparison-link { display: inline-flex; min-height: 40px; align-items: center; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: var(--red-dark); color: white; text-decoration: none; }
.companion-detail { margin: 1rem 0 4rem; padding: clamp(1rem, 3vw, 2.4rem); background: #fffdfa; border: 1px solid var(--line); scroll-margin-top: 5rem; }
.companion-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.companion-detail-heading h2 { margin: 0 0 .75rem; }
.companion-tabs { display: flex; gap: .5rem; padding: 1rem 0; }
.companion-tabs button { padding: .65rem .9rem; background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.companion-tabs button[aria-selected="true"] { color: white; background: var(--red-dark); border-color: var(--red-dark); }
.reader-controls, .spoiler-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; padding: 1rem; background: var(--paper); }
.reader-controls p, .spoiler-controls p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .86rem; }
.reader-controls select, .spoiler-controls select { min-width: 0; max-width: 100%; min-height: 40px; padding: .3rem .6rem; }
.original-page { max-width: 850px; margin: 2rem auto; padding: clamp(1rem, 5vw, 3.5rem); background: #fff; box-shadow: 0 4px 22px rgba(23,24,24,.08); }
.original-page h3 { margin: 0 0 1.5rem; text-align: center; }
.original-page pre, .companion-comparison pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.7 var(--display); }
.source-citation { color: var(--muted); font-size: .82rem; }
.companion-comparison-list { display: grid; gap: .65rem; }
.companion-comparison { border: 1px solid var(--line); background: var(--paper-warm); }
.companion-comparison summary { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; align-items: center; padding: 1rem; cursor: pointer; }
.companion-comparison summary span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.companion-comparison summary strong { font: 1.2rem var(--display); }
.companion-comparison-body { padding: 0 1rem 1rem; }
.comparison-stable-link { margin: 0; padding: 0 .9rem .7rem; font-size: .78rem; }
.comparison-stable-link a { color: var(--muted); }
.spoiler-hidden-note { padding: .8rem; border-left: 3px solid var(--red-dark); background: var(--paper-warm); }
.original-opening { max-width: 850px; margin: 1.5rem auto; padding: 1.2rem; background: var(--paper-warm); border-inline-start: 3px solid var(--line); }
.original-opening h3 { font: 1.15rem var(--display); }
.original-opening pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.65 var(--display); }
.comparison-passages { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.comparison-passages article { min-width: 0; padding: 1rem; background: white; border: 1px solid var(--line); }
.comparison-reader-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comparison-reader-text h1, .comparison-reader-text h2, .comparison-reader-text h3,
.comparison-reader-text h4, .comparison-reader-text h5, .comparison-reader-text h6 { margin: 0 0 .65rem; }
.comparison-reader-text p { margin: 0; }
.companion-comparison-body > p { font: 1rem/1.4 var(--display); }
.companion-comparison-body small { color: var(--muted); }
.companion-error { padding: 1rem; background: #fff0ed; }
.companion-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem max(1.5rem, calc((100vw - var(--max)) / 2)); color: #eee; background: var(--dark); font-size: .8rem; }
@media (max-width: 850px) { .companion-book-list { grid-template-columns: 1fr 1fr; } .site-header { grid-template-columns: 1fr auto; } .site-header nav { grid-column: 1 / -1; order: 2; flex-wrap: wrap; gap: 1rem; } .comparison-passages { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .companion-book-list { grid-template-columns: 1fr; } .companion-main { width: min(100% - 1.5rem, var(--max)); } .companion-detail-heading { display: block; padding-bottom: 1rem; } .companion-detail-heading button { margin-top: .75rem; } .companion-comparison summary { grid-template-columns: 1fr; gap: .25rem; } .companion-footer { display: grid; } }