/* Reading surfaces: board lessons, field notes, and a card-table column. */
.editorial { --story-accent: #e6c478; }
.theme-ink { --story-accent: #a9c6de; }
.theme-bird { --story-accent: #a7ccaf; }
.theme-card { --story-accent: #d8b3ec; }
.story-head { padding: 60px 0 32px; border-bottom: 1px solid var(--line-2); margin-bottom: 34px; }
.editorial-story { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 70px; }
.story-head .eyebrow { color: var(--story-accent); }
.story-head h1 { font-size: clamp(2.8rem, 6vw, 4.9rem); line-height: 1.04; margin: 20px 0 24px; max-width: 15ch; text-wrap: balance; }
.story-credit { font-size: .84rem; color: var(--soft); line-height: 1.9; }
.editorial-story p, .editorial-story li { font-size: 1.08rem; line-height: 1.8; color: var(--soft); }
.editorial-story strong, .editorial-story b { color: var(--text); }
.editorial-story .story-deck { font-family: var(--display); color: var(--text); font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.5; }
.editorial-story h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 52px 0 20px; line-height: 1.15; text-wrap: balance; }
.editorial-story h3 { font-size: 1.4rem; line-height: 1.2; margin: 30px 0 16px; }
.editorial-story p a, .editorial-story li a, .story-footer a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--story-accent); }
.editorial-story .eyebrow { font-size: .75rem; color: var(--story-accent); margin-top: 40px; }
.story-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.story-actions .btn { white-space: normal; text-align: center; }
.story-contents { display:flex; flex-wrap:wrap; gap: 12px 24px; padding: 22px 0; border-block: 1px solid var(--line-2); margin: 36px 0; font-size: .9rem; }
.story-contents a { text-decoration: underline; text-underline-offset: 5px; }
.margin-note { padding: 22px 26px; border-left: 3px solid var(--story-accent); background: var(--panel); margin: 28px 0; }
.margin-note p { margin-bottom: 0; font-size: .98rem; }
.story-figure { margin: 30px 0; }
.story-figure img { width: min(100%, 510px); height:auto; margin:auto; border-radius: 18px; }
.theme-card .story-figure img { width:100%; }
.story-figure.interface-shot img { max-height: 440px; width:auto; max-width:100%; object-fit:contain; }
.story-figure figcaption { font-size: .9rem; color: var(--soft); margin: 14px auto 0; max-width: 65ch; line-height: 1.6; }
.move-list { padding-left: 30px; }
.move-list li { padding-left: 7px; margin: 17px 0; font-size: 1rem; }
.move-list li::marker { color: var(--story-accent); font-variant-numeric: tabular-nums; }
.answer-lines { background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; font-size: 1.1rem; line-height: 2; text-align:center; letter-spacing: .13em; }
.editorial details { margin: 24px 0; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.editorial summary { cursor:pointer; padding: 22px; color: var(--text); background:var(--panel); font-weight:650; line-height:1.5; }
.editorial details > p { padding:0 22px; }
.editorial :focus-visible { outline: 3px solid var(--story-accent); outline-offset: 4px; }
.editorial details[open] > summary { border-bottom:1px solid var(--line-2); }
.notebook-content { padding: 0 26px 28px; background: #151c20; }
.case-clues { padding-left:25px; }
.case-clues li { margin-bottom:16px; }
.case-clues li::marker { color:var(--story-accent); }
.table-scroll { overflow:auto; margin:28px 0; }
.table-scroll table { width:100%; border-collapse:collapse; min-width:570px; font-size:.92rem; }
.table-scroll caption { text-align:left; padding:12px 0; color:var(--story-accent); }
.table-scroll th, .table-scroll td { padding:13px 10px; border-bottom:1px solid #455157; text-align:left; }
.table-scroll th { font-weight:600; color:#f1f0e8; }
.table-scroll td { color:#d3dbda; }
.your-move { border-left:3px solid var(--story-accent); padding:12px 20px; background:var(--panel); }
.story-footer { display:flex; flex-wrap:wrap; gap:16px 24px; font-size:.9rem; }
.editorial-story section { scroll-margin-top:95px; }
.game-intro { border-top:1px solid var(--line-2); }
.game-intro h2 { margin-bottom:24px; }
.game-intro .feature p { color:var(--soft); line-height:1.7; }
.game-intro a:not(.btn) { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:600px) {
 .story-head { padding-top:36px; }
 .editorial-story { width:calc(100% - 32px); }
 .editorial-story p, .editorial-story li { font-size:1rem; }
 .notebook-content { padding-inline:14px; }
 .story-actions .btn { width:100%; }
 .editorial .nav-inner { flex-wrap:wrap; padding-block:12px; gap:10px; }
 .editorial .nav-links { display:flex; width:100%; justify-content:space-between; gap:2px; margin-left:0; }
 .editorial .nav-links a { padding:8px 6px; font-size:.82rem; }
 .editorial .nav { position:relative; }
 .margin-note { padding:18px; }
 .table-scroll { overflow:visible; }
 .table-scroll table { display:block; min-width:0; }
 .table-scroll caption { display:block; }
 .table-scroll thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .table-scroll tbody { display:block; }
 .table-scroll tr { display:block; border:1px solid #455157; border-radius:10px; margin-bottom:16px; overflow:hidden; }
 .table-scroll th[scope="row"] { display:block; background:#253239; padding:12px; }
 .table-scroll td { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:12px; }
 .table-scroll td::before { content:attr(data-label); color:#b7c9d6; font-size:.82rem; }
 .table-scroll td:last-child { border-bottom:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }