.story-view { background: #f1ead9; color: #17352f; }
.story-hero { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 76vh; background: #17352f; color: #fffaf0; }
.story-hero-copy { align-self: end; padding: clamp(3rem, 7vw, 7rem); }
.story-hero h1 { margin: .5rem 0 1.5rem; font-size: clamp(3.6rem, 7.2vw, 8rem); line-height: .86; letter-spacing: -.055em; }
.story-deck { max-width: 41rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.55; }
.story-hero figure { min-height: 76vh; margin: 0; display: flex; flex-direction: column; background: #0b2823; }
.story-hero img { width: 100%; flex: 1; min-height: 0; object-fit: contain; }
.story-hero figcaption { padding: 1rem 1.5rem; color: #e7bd63; font: 800 .72rem Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.story-key { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 1.2rem clamp(1.5rem, 6vw, 6rem); border-bottom: 1px solid #b6a985; font: .78rem/1.4 Arial,sans-serif; }
.story-key p { margin: 0; }.story-key span { display: flex; align-items: center; gap: .45rem; }.story-key i { width: .65rem; height: .65rem; border-radius: 50%; background: #cf7040; }.story-key .meaning-dot { background: #e0b44f; }.story-key .later-dot { background: #587565; }.story-key .story-caveat { margin-left: auto; max-width: 29rem; color: #587065; }
.story-prologue { display: grid; grid-template-columns: minmax(300px,.85fr) 1.15fr; max-width: 1450px; margin: 0 auto; padding: clamp(4rem,8vw,9rem) clamp(1.5rem,6vw,6rem); gap: clamp(2rem,6vw,7rem); align-items: center; }
.story-prologue figure { margin: 0; background: #17352f; }.story-prologue img { display: block; width: 100%; height: min(68vh,760px); object-fit: contain; }
.story-prologue h2,.story-chapter > header h2,.story-threshold h2 { font-size: clamp(2.7rem,5vw,5.8rem); line-height: .95; letter-spacing: -.04em; margin: .5rem 0 1.5rem; }
.story-prologue article > p { font-size: 1.12rem; line-height: 1.7; }.story-date { color: #ad542f; font: 800 .74rem Arial,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.story-dropcap:first-letter { float: left; font-size: 5.3rem; line-height: .72; padding: .15rem .5rem 0 0; color: #ad542f; }
.later-language { border-left: 4px solid #587565; padding: 1rem 0 1rem 1.25rem; color: #415c50; }
.story-chapter { max-width: 1450px; margin: 0 auto; padding: 0 clamp(1.5rem,6vw,6rem) clamp(5rem,9vw,10rem); }.story-chapter > header { max-width: 980px; margin: 0 auto clamp(4rem,8vw,8rem); text-align: center; }.story-chapter > header > p:last-child { max-width: 780px; margin: 1.5rem auto; font-size: 1.2rem; line-height: 1.65; }
.story-beat-wide,.story-beat-reverse { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem,5vw,6rem); align-items: center; margin: 0 0 clamp(4rem,8vw,9rem); }.story-beat-reverse { grid-template-columns: .88fr 1.12fr; }.story-beat-reverse .story-painting { order: 2; }
.story-painting { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #17352f; color: #f3c963; cursor: pointer; text-align: left; }.story-painting img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; transition: transform .35s ease; }.story-painting span { display: block; padding: .85rem 1rem; font: 800 .7rem Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; }.story-painting:hover img { transform: scale(1.018); }
.story-beat h3 { margin: .35rem 0 1rem; font-size: clamp(2.1rem,3.6vw,4.2rem); line-height: .96; letter-spacing: -.035em; }.story-beat p { font-size: 1.06rem; line-height: 1.65; }.story-beat blockquote { margin: 2rem 0; padding: 1.3rem 0 1.3rem 1.5rem; border-left: 4px solid #d7a93d; font-size: clamp(1.3rem,2vw,2rem); line-height: 1.35; font-style: italic; }
.story-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); margin-bottom: clamp(4rem,7vw,7rem); }.story-pair .story-beat:nth-child(2) { margin-top: 9rem; }.story-pair .story-painting img { aspect-ratio: 5/4; }.story-effect { border-top: 1px solid #b6a985; padding-top: 1rem; }
.story-interlude { margin: clamp(4rem,8vw,9rem) auto; max-width: 1050px; padding: clamp(2rem,5vw,5rem); background: #d5b75e; }.story-interlude h3 { margin: .3rem 0 1rem; font-size: clamp(2.2rem,4.6vw,5.2rem); line-height: .96; }.story-interlude p:last-child { max-width: 760px; font-size: 1.15rem; line-height: 1.6; }
.story-pair-final { margin-top: 7rem; }.story-climax { background: #17352f; color: #fffaf0; padding-bottom: 1.5rem; }.story-climax > p,.story-climax > h3 { margin-left: 1.5rem; margin-right: 1.5rem; }.story-climax .story-date { color: #e7bd63; }.story-climax .story-effect { border-color: #587065; }
.story-threshold { display: grid; grid-template-columns: 1.1fr .9fr; background: #6b7554; color: #fffaf0; }.story-threshold figure { margin: 0; min-height: 680px; background: #17352f; }.story-threshold img { width: 100%; height: 100%; object-fit: contain; }.story-threshold > div { align-self: center; padding: clamp(3rem,6vw,7rem); }.story-threshold .story-date { color: #f3c963; }.story-threshold p { font-size: 1.12rem; line-height: 1.65; }.next-question { margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); font-style: italic; }.story-next { padding: 1rem 1.3rem; border: 1px solid #f3c963; background: transparent; color: #f3c963; font-weight: 800; cursor: pointer; }
@media (max-width: 850px) { .story-hero,.story-prologue,.story-beat-wide,.story-beat-reverse,.story-threshold { grid-template-columns: 1fr; }.story-hero figure { min-height: 55vh; }.story-beat-reverse .story-painting { order: 0; }.story-pair { grid-template-columns: 1fr; }.story-pair .story-beat:nth-child(2) { margin-top: 0; }.story-threshold figure { min-height: 480px; }.story-key .story-caveat { margin-left: 0; width: 100%; } }
@media (max-width: 560px) { .story-hero-copy { padding: 4rem 1.3rem 2.5rem; }.story-hero h1 { font-size: 3.5rem; }.story-hero figure { min-height: 42vh; }.story-prologue,.story-chapter { padding-left: 1.1rem; padding-right: 1.1rem; }.story-prologue img { height: auto; }.story-pair-final { margin-top: 3rem; }.story-threshold figure { min-height: 340px; } }

/* The Story: a lived chapter rather than a chronological summary. */
.story-feature { background: #efe7d3; }
.chapter-cover { display: grid; grid-template-columns: .88fr 1.12fr; min-height: calc(100vh - 78px); background: #102e29; color: #fffaf0; }
.chapter-cover-copy { align-self: end; padding: clamp(3rem, 6vw, 7rem); }
.chapter-date,.chapter-kicker { color: #dcae4c; font: 800 .78rem/1.35 Arial,sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.chapter-cover h1 { margin: .65rem 0 1.7rem; font-size: clamp(4.5rem, 8.5vw, 10rem); line-height: .78; letter-spacing: -.07em; }
.chapter-deck { max-width: 44rem; font-size: clamp(1.15rem, 1.55vw, 1.5rem); line-height: 1.55; }
.chapter-status { max-width: 38rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.22); color: #b9cabf; font: .88rem/1.55 Arial,sans-serif; }
.cover-painting { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: #0a211e; color: #edc66b; cursor: pointer; text-align: left; }
.cover-painting img { width: 100%; flex: 1; min-height: 0; object-fit: contain; }
.cover-painting span { padding: 1rem 1.5rem; font: 800 .75rem Arial,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.chapter-ledger { display: grid; grid-template-columns: repeat(4,1fr); background: #d7b45c; color: #17352f; }
.chapter-ledger span { padding: 1.25rem 1.5rem; border-right: 1px solid rgba(23,53,47,.28); font: .9rem/1.45 Arial,sans-serif; }
.chapter-ledger b { display: block; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .08em; }
.chapter-body > section { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 7vw, 8rem); }
.chapter-body h2,.chapter-evidence h2 { margin: .4rem 0 1.5rem; font-size: clamp(3rem, 6vw, 7rem); line-height: .9; letter-spacing: -.055em; }
.chapter-body p { font-size: 1.12rem; line-height: 1.7; }
.chapter-opening { max-width: 1450px; margin: 0 auto; }
.chapter-opening > h2 { max-width: 1100px; }
.chapter-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,7rem); margin-top: 3rem; }
.attic-scene,.lantern-reveal,.mystery-spread { display: grid; grid-template-columns: .92fr 1.08fr; gap: 0; padding: 0 !important; background: #294a40; color: #fffaf0; }
.attic-copy,.lantern-reveal > div,.mystery-spread > div { align-self: center; padding: clamp(3rem,7vw,8rem); }
.attic-scene figure,.lantern-reveal figure,.mystery-spread figure { margin: 0; min-height: 740px; display: flex; flex-direction: column; background: #0e2924; }
.attic-scene img,.lantern-reveal img,.mystery-spread img { width: 100%; flex: 1; min-height: 0; object-fit: contain; }
.attic-scene figcaption { padding: 1rem 1.4rem; color: #d8cdae; font: .86rem/1.5 Arial,sans-serif; }
.attic-scene blockquote { margin: 2rem 0; color: #f1c75f; font-size: clamp(1.6rem,2.8vw,3.2rem); line-height: 1.08; font-style: italic; }
.account-note { padding: 1.25rem; border: 1px solid rgba(255,255,255,.25); }
.search-litany { background: #d4b457; }
.search-litany .chapter-kicker { color: #17352f; }
.litany-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 3rem; max-width: 1400px; margin: 2.5rem auto; }
.litany-grid h3 { margin: 0; padding: 1.25rem 0; border-bottom: 1px solid rgba(23,53,47,.35); font-size: clamp(1.6rem,3vw,3.4rem); font-style: italic; }
.litany-caption { max-width: 700px; margin: 2rem auto 0; text-align: center; }
.reversal-spread { text-align: center; background: #f8f2e5; }
.reversal-spread > h2 { max-width: 1100px; margin-left: auto; margin-right: auto; }
.reversal-answer { margin: 1rem 0 4rem; color: #ac4f2b; font: italic 700 clamp(4rem,11vw,12rem)/.8 Georgia,serif !important; }
.reversal-evidence { display: grid; grid-template-columns: repeat(2,1fr); max-width: 1100px; margin: 0 auto; text-align: left; }
.reversal-evidence p { margin: 0; padding: 1.6rem; border: 1px solid #c8bfa9; }
.reversal-spread blockquote { margin: 5rem auto 0; font-size: clamp(1.8rem,3.2vw,3.8rem); line-height: 1.25; }
.reversal-spread blockquote strong { color: #ac4f2b; }
.lantern-reveal { grid-template-columns: 1.08fr .92fr; background: #6d7655; }
.not-cheap-answer { margin-top: 2rem; padding: 1.5rem; background: #102e29; }
.not-cheap-answer b { color: #f1c75f; text-transform: uppercase; letter-spacing: .08em; }.not-cheap-answer strong { font-size: 3rem; color: #f1c75f; }
.grief-spread { max-width: 1300px; margin: 0 auto; text-align: center; }
.grief-spread > p:not(.chapter-kicker,.grief-line) { max-width: 900px; margin-left: auto; margin-right: auto; }
.double-truth { display: grid; grid-template-columns: 1fr 1fr; margin: 4rem auto; max-width: 1100px; }
.double-truth p { padding: clamp(2rem,4vw,4rem); margin: 0; border: 1px solid #9d9177; font-size: clamp(1.4rem,2.4vw,2.7rem); line-height: 1.3; }.double-truth b { color: #a84d2b; font: 800 .75rem Arial,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.grief-line { font-style: italic; font-size: 1.35rem !important; }
.path-backward { background: #17352f; color: #fffaf0; }
.path-backward header { max-width: 1050px; }.path-items { display: grid; grid-template-columns: repeat(4,1fr); margin: 4rem 0; }.path-items span { padding: 1.5rem; border: 1px solid rgba(255,255,255,.22); font-size: 1.05rem; line-height: 1.45; }.path-backward > p { max-width: 850px; color: #d7dfd8; }
.homecoming-spread { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(3rem,8vw,9rem); background: #d6aa43; }
.homecoming-spread .chapter-kicker { color: #17352f; }.homecoming-spread blockquote { align-self: center; margin: 0; padding: 2rem 0 2rem 2rem; border-left: 5px solid #17352f; font-size: clamp(1.5rem,2.8vw,3.1rem); line-height: 1.25; font-style: italic; }.homecoming-spread strong { color: #17352f; }
.mystery-spread { grid-template-columns: .95fr 1.05fr; background: #486252; }.mystery-spread blockquote { margin: 2.5rem 0 0; color: #f1c75f; font-size: clamp(1.8rem,3vw,3.5rem); font-style: italic; }
.chapter-evidence { display: grid; grid-template-columns: repeat(5,1fr); padding: clamp(4rem,7vw,8rem); gap: 1px; background: #102e29; }.chapter-evidence header { grid-column: 1/-1; color: #fffaf0; max-width: 1000px; margin-bottom: 3rem; }.chapter-evidence a,.chapter-evidence button { display: flex; flex-direction: column; min-height: 220px; padding: 1.4rem; border: 0; background: #f4eddd; color: #17352f; text-align: left; text-decoration: none; cursor: pointer; }.chapter-evidence span { color: #a84d2b; font: 800 .72rem Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; }.chapter-evidence strong { margin: .8rem 0; font-size: 1.55rem; }.chapter-evidence b { margin-top: auto; font: 800 .72rem Arial,sans-serif; text-transform: uppercase; }
@media (max-width: 900px) { .chapter-cover,.attic-scene,.lantern-reveal,.mystery-spread,.homecoming-spread { grid-template-columns: 1fr; }.chapter-cover { min-height: 0; }.cover-painting { min-height: 65vh; }.chapter-ledger { grid-template-columns: 1fr 1fr; }.chapter-columns { grid-template-columns: 1fr; }.attic-scene figure,.lantern-reveal figure,.mystery-spread figure { min-height: 520px; }.lantern-reveal figure { order: 2; }.path-items { grid-template-columns: 1fr 1fr; }.chapter-evidence { grid-template-columns: 1fr 1fr; }.chapter-evidence a:last-child { grid-column: 1/-1; } }
@media (max-width: 560px) { .chapter-cover h1 { font-size: 4.2rem; }.chapter-cover-copy { padding: 4rem 1.25rem 2.5rem; }.cover-painting { min-height: 48vh; }.chapter-ledger,.litany-grid,.reversal-evidence,.double-truth,.path-items,.chapter-evidence { grid-template-columns: 1fr; }.chapter-body > section { padding: 4.5rem 1.25rem; }.attic-copy,.lantern-reveal > div,.mystery-spread > div { padding: 4.5rem 1.25rem; }.attic-scene figure,.lantern-reveal figure,.mystery-spread figure { min-height: 360px; }.chapter-evidence { padding: 4rem 1.25rem; }.chapter-evidence a:last-child { grid-column: auto; } }
.story-shelf { position: sticky; top: 77px; z-index: 8; display: grid; grid-template-columns: 1fr auto; align-items: stretch; background: #f4eddd; border-bottom: 1px solid #978d75; box-shadow: 0 5px 18px rgba(16,46,41,.12); }
.story-shelf p { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: .8rem 1.5rem; }.story-shelf p b { font-size: 1.25rem; }.story-shelf p span { color: #587065; font: .72rem Arial,sans-serif; }
.story-shelf button { min-width: 240px; padding: .85rem 1.2rem; border: 0; border-left: 1px solid #b9ad90; background: transparent; color: #17352f; text-align: left; cursor: pointer; font: 700 .95rem Georgia,serif; }.story-shelf button span { display: block; margin-bottom: .25rem; color: #a84d2b; font: 800 .65rem Arial,sans-serif; letter-spacing: .08em; text-transform: uppercase; }.story-shelf button.active { background: #17352f; color: #fffaf0; }.story-shelf button.active span { color: #f1c75f; }
@media (max-width: 900px) { .story-shelf { top: 65px; grid-template-columns: 1fr; }.story-shelf p { grid-column: 1/-1; }.story-shelf button { min-width: 0; } }
@media (max-width: 560px) { .story-shelf { position: static; }.story-shelf button { font-size: .78rem; padding: .75rem; }.story-shelf p span { display: none; } }