/* Shared article and library skin; loaded after site.css. */
:root {
  color-scheme: dark;
  --paper: #0b0f12;
  --ink: #f2f0e8;
  --muted: #abb1b1;
  --line: #ffffff24;
  --accent: #dfbf7c;
  --light: #151c21;
  --white: #10161b;
}
body { background: radial-gradient(ellipse at 85% 0, #24201555, transparent 620px), var(--paper); }
.edition, footer { background: #080c0f; color: var(--ink); }
.edition { border-bottom: 1px solid var(--line); }
.edition-mark { color: var(--muted); }
.site-header { background: #0c1115de; }
.masthead { min-height: 112px; }
.brand-mark { background: #d8b671; color: #151713; box-shadow: inset 0 0 0 3px #f1d39166; }
.brand strong, .footer-brand { color: var(--ink); }
.play-link { border-color: #dfbf7c55; color: var(--accent); }
.play-link:hover { border-color: var(--accent); background: #dfbf7c0b; }
.button, .prose .button { background: #d8b671; color: #151713; border-color: #d8b671; }
.button:hover, .prose .button:hover { background: #f1d391; color: #111713; border-color: #f1d391; }
.button.secondary, .prose .button.secondary { background: transparent; color: var(--ink); border-color: #ffffff45; }
.button.secondary:hover { background: #ffffff09; border-color: var(--accent); }
.author-dot { background: #d8b671; color: #13191e; }
.menu-toggle { color: var(--ink); }
.page-head h1, .article-head > h1 { text-wrap: balance; }
.article-head > h1 { max-width: 1050px; }
.breadcrumbs { flex-wrap: wrap; }
.card-image { background: #151d23; border: 1px solid var(--line); }
.abstract-art, .abstract-art.chart, .abstract-art.tape, .abstract-art.book { background: #1b2429; color: #c9b783; }
.toc { border-top-color: var(--accent); }
.toc a:hover, .prose a:hover { color: #f1d391; }
.callout, .editor-note, .verified { border-color: var(--accent); background: #1b211f; }
.source-list article { border-color: var(--line); }
.article-cover img { border: 1px solid var(--line); }
.footer-bottom { border-color: var(--line); }
footer .footer-top a, footer .footer-top p, footer .footer-bottom { color: #abb1b1; }
footer .footer-top a:hover { color: var(--accent); }
input, textarea { border-color: #ffffff40; color: var(--ink); background: var(--white); }
input::placeholder, textarea::placeholder { color: #949c9f; }
.skip { background: #d8b671; color: #151713; }

/* Images remain uncropped so dialogue and task indicators stay readable. */
.evidence-figure { margin: 28px 0 34px; border: 1px solid var(--line); background: #10161b; overflow: hidden; }
.evidence-figure > a { display: block; }
.evidence-figure img { display: block; width: 100%; max-width: 320px; margin-inline: auto; height: auto; object-fit: contain; background: #080b0e; }
.evidence-figure figcaption { padding: 15px 19px 17px; color: var(--muted); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.evidence-figure figcaption strong { color: var(--ink); }
.evidence-figure figcaption a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.evidence-figure figcaption p { margin: 6px 0 0; }
.figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block: 28px; align-items: start; }
.figure-pair > .evidence-figure { margin: 0; }
.figure-pair > * { min-width: 0; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 24px 36px; }
.scene-grid > * { min-width: 0; }
.scene-grid .evidence-figure { margin: 0; }
.scene-grid img { max-width: 100%; height: auto; }
.scene-grid h3 { font-size: 20px; }

/* Evidence, source attribution, and observed task steps. */
.evidence-note { padding: 18px 22px; border: 1px solid #dfbf7c38; border-inline-start: 3px solid var(--accent); background: #d8b67109; color: #c5c9c6; font-size: 14px; line-height: 1.95; margin-block: 22px 28px; }
.evidence-note strong { color: var(--ink); }
.evidence-note p:last-child { margin-bottom: 0; }
.source-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid #dfbf7c40; background: #d8b6710a; color: #e8cd95; font-size: 11px; line-height: 1.8; border-radius: 2px; vertical-align: middle; max-width: 100%; }
.timestamp-link { display: inline-block; color: var(--accent); border-bottom: 1px solid #dfbf7c55; font-size: .88em; text-decoration: none !important; text-underline-offset: 4px; overflow-wrap: anywhere; }
.timestamp-link:hover { border-color: var(--accent); }
.story-step { position: relative; padding: 4px 24px 26px 0; padding-inline: 24px 0; border-inline-start: 1px solid #dfbf7c42; margin-block: 0 26px; }
.story-step::before { content: ''; position: absolute; inset-inline-start: -4px; top: 13px; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 0 4px #0b0f12; }
.story-step > h2, .story-step > h3 { margin-top: 0; }
.story-step .evidence-figure { margin-bottom: 14px; }
.guide-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin-block: 24px 32px; list-style: none; }
.guide-path > * { min-width: 0; border: 1px solid var(--line); background: #12191e; padding: 17px 19px; }
.guide-path a { color: var(--accent); }
.guide-path strong { display: block; color: var(--ink); margin-bottom: 5px; }
.guide-path p, .guide-path small { font-size: 13px; line-height: 1.9; color: var(--muted); }
.guide-path p:last-child { margin-bottom: 0; }

/* Watch pages load third-party media only after the reader's action. */
.video-detail { padding: 24px; border: 1px solid var(--line); background: #11181d; margin-block: 24px 32px; min-width: 0; }
.video-detail > :first-child { margin-top: 0; }
.video-detail > :last-child { margin-bottom: 0; }
.video-load { position: relative; display: block; width: 100%; min-height: 180px; padding: 0; overflow: hidden; color: #fff; border: 1px solid #ffffff35; background: #060a0d; text-align: center; cursor: pointer; }
.video-load img { width: 100%; height: auto; display: block; opacity: .8; transition: opacity .2s; }
.video-load:hover img { opacity: 1; }
.video-load > span, .video-load > strong { display: block; padding: 14px 20px; color: #f1d391; font-weight: 600; }
.video-load:hover { border-color: var(--accent); }
.video-player { width: 100%; min-width: 0; aspect-ratio: 16/9; background: #05090b; border: 1px solid var(--line); }
.video-player iframe, iframe.video-player { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 0; }
.video-detail .video-player { margin-bottom: 20px; }
.video-detail h2, .video-detail h3 { margin-block: 16px 10px; }

/* Related reading cards and deliberately disclosed story spoilers. */
.article-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-block: 24px 42px; }
.article-shelf > * { min-width: 0; }
.article-shelf .card { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.article-shelf h3 { font-size: 21px; }
.article-shelf p { color: var(--muted); font-size: 14px; }
.spoiler-block { margin-block: 24px 30px; border: 1px solid #dfbf7c4d; background: #151b1d; }
.spoiler-block > summary { cursor: pointer; padding: 17px 21px; color: #f0d095; font-size: 16px; font-weight: 600; line-height: 1.8; }
.spoiler-block > summary::marker { color: #d8b671; }
.spoiler-block[open] > summary { border-bottom: 1px solid var(--line); }
.spoiler-block > :not(summary) { margin-inline: 21px; }
.spoiler-block > :nth-child(2) { margin-top: 22px; }
.spoiler-block > :last-child { margin-bottom: 23px; }

@media (max-width: 1000px) {
  .article-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .masthead { min-height: 95px; }
  .nav-row nav { background: #10161b; box-shadow: 0 12px 24px #0006; }
  .toc { padding: 17px; border: 1px solid var(--line); border-top: 2px solid var(--accent); background: #11181d; }
  .toc a { display: block; margin: 0; padding: 7px 0; font-size: 13px; }
  .evidence-figure { margin-block: 22px 27px; }
  .evidence-figure figcaption { padding: 12px 14px; font-size: 12px; }
  .scene-grid, .guide-path, .article-shelf { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .evidence-note { padding: 15px 16px; font-size: 13px; }
  .story-step { padding-inline-start: 18px; padding-bottom: 18px; }
  .video-detail { padding: 16px 13px; }
  .video-load { min-height: 130px; }
  .video-load > span, .video-load > strong { font-size: 13px; padding: 12px; }
  .spoiler-block > summary { padding: 15px; font-size: 14px; }
  .spoiler-block > :not(summary) { margin-inline: 14px; }
  .article-shelf h3 { font-size: 22px; }
}
@media (max-width: 360px) {
  .brand strong { font-size: 25px; }
  .brand-mark { width: 32px; height: 39px; font-size: 34px; }
  .brand { gap: 7px; }
  .masthead { gap: 9px; }
  .play-link { padding: 7px; font-size: 9px; }
  .article-head > h1, .page-head h1 { font-size: 28px; }
  .prose { font-size: 16px; }
  .guide-path > * { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-load img { transition: none; }
}