/* The story shares the existing warm-paper drawer; the map remains the stage. */
#story-announcement{position:fixed;top:0;left:0}
.letter-atlas .story-open .place-panel{background:#fff5e1f5;border:1px solid #c6a46a;color:#79572c;box-shadow:0 20px 70px #6c554455}
.letter-atlas .drawer-tabs{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid #b8955d44;background:#fff3dd}
.letter-atlas .drawer-tabs button{flex:1;min-height:44px;background:transparent;color:#79572c;border-bottom:2px solid transparent;font-size:14px}
.letter-atlas .drawer-tabs button[aria-pressed=true]{border-color:#96703b;color:#60401c}
.letter-atlas .drawer-heading .icon-button{width:44px;height:44px}
.letter-atlas .story-panel{padding:18px 24px 28px;color:#684b2b;font-size:16px;line-height:1.85}
.letter-atlas .story-panel:focus{outline-offset:-4px}
.letter-atlas .story-panel h2{font:400 28px/1.5 var(--serif);margin:10px 0}
.letter-atlas .story-panel h3{font:400 21px/1.5 var(--serif);margin:18px 0 10px}
.letter-atlas .story-eyebrow{font-size:12px;letter-spacing:2px;color:#836133;margin-top:10px}
.letter-atlas .story-fiction,.letter-atlas .story-hint,.letter-atlas .story-storage{font-size:12px;line-height:1.8;color:#806442}
.letter-atlas .story-lead{margin:18px 0;font:18px/1.9 var(--serif)}
.letter-atlas .story-archive{border-block:1px solid #b8955d55;padding:8px 0;margin:20px 0}
.letter-atlas .story-archive summary{min-height:44px;cursor:pointer;line-height:44px;font-size:14px}
.letter-atlas .story-archive p{margin:10px 0}
.letter-atlas .story-source{display:block;min-height:44px;padding:10px 0;font-size:12px;line-height:1.7;text-decoration:underline;text-underline-offset:4px;color:#795426}
.letter-atlas .story-task{margin:10px 0 16px}
.letter-atlas .story-button,.letter-atlas .story-primary,.letter-atlas .story-related{min-height:44px;border:1px solid #b18b534d;background:#f7e9cb;color:#68451f;padding:12px 14px;font-size:14px;line-height:1.7;text-align:left}
.letter-atlas .story-button:hover:not(:disabled),.letter-atlas .story-related:hover{background:#ead4a6}
.letter-atlas .story-primary{display:block;width:100%;background:#866234;color:#fff9eb;border-color:#866234;margin:12px 0;text-align:center}
.letter-atlas .story-primary:hover:not(:disabled){background:#704d26}
.letter-atlas .story-primary:disabled{opacity:.5;cursor:not-allowed}
.letter-atlas .story-back{min-height:44px;background:transparent;text-align:left;font-size:14px;padding:8px 0;color:#795426;text-decoration:underline;text-underline-offset:4px}
.letter-atlas .story-choices{border:0;padding:0;margin:20px 0 8px;min-width:0}
.letter-atlas .story-choices legend{font-size:16px;margin-bottom:12px}
.letter-atlas .story-choices button{display:block;width:100%;margin:8px 0}
.letter-atlas .story-choices [aria-pressed=true]{background:#876537;color:#fff7e4;border-color:#876537}
.letter-atlas .story-choices:disabled button{opacity:.65}
.letter-atlas .story-explanation{border-left:2px solid #b59255;padding:8px 0 8px 14px;font-size:14px}
.letter-atlas .story-feedback{min-height:26px;font-size:13px;color:#7a4e25;margin-top:12px}
.letter-atlas .story-earned{background:#fff7e2;border:1px solid #b39159;padding:22px 18px;margin:16px 0}
.letter-atlas .story-stamp{display:inline-block;border:1px solid #a46b43;color:#8a512e;padding:3px 10px;margin-bottom:14px;font:14px var(--serif)}
.letter-atlas .story-earned p{font:19px/1.85 var(--serif)}
.letter-atlas .story-earned small{display:block;font-size:11px;margin-top:12px}
.letter-atlas .story-boundary{margin:22px 0;border-top:1px solid #b8955d66;font-size:14px}
.letter-atlas .story-actions{display:flex;flex-direction:column;border-top:1px solid #b8955d44;margin:20px 0 12px;padding-top:10px}
.letter-atlas .storage-warning{padding:12px;background:#f1dfb8;border-left:3px solid #977343;color:#674a26}
.letter-atlas .story-directory{list-style:none;padding:0;margin:18px 0}
.letter-atlas .story-directory li{padding:14px 0;border-bottom:1px solid #b8955d44;font-size:14px}
.letter-atlas .story-directory small{display:block;font-size:12px;color:#836340;margin-top:4px}
.letter-atlas .story-directory-entry{width:100%;min-height:60px;text-align:left;padding:10px;background:#f4e3bd;color:#68451f}
.letter-atlas .story-directory-entry[aria-current=true]{border-left:3px solid #906839}
.letter-atlas .story-beacon{position:absolute;left:4%;bottom:116px;z-index:17;min-height:44px;max-width:320px;padding:10px 16px;background:#fff3dbe8;color:#705027;border:1px solid #b8955d77;font:14px var(--serif);box-shadow:0 4px 20px #71552e15}
.letter-atlas .selected-anchor .point-core{fill:#8b5423;stroke:#fff7df;stroke-width:2}
.letter-atlas .selected-anchor .point-halo{fill:#f8df9d77;stroke:#8c622a;stroke-width:2}
.letter-atlas .story-open .atlas-pin[aria-pressed=true]{background:#fff4dcf5;border:1px solid #a77d40}
.letter-atlas .just-earned{animation:page-arrive .45s ease-out}
@media(min-width:701px){
  .letter-atlas .drawer-open .map-regions{top:100px;left:auto;right:calc(4% + 400px);transform:none}
  .letter-atlas .drawer-open .map-caption{right:calc(4% + 395px);bottom:160px}
}
@keyframes page-arrive{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]):not([data-motion=gentle]) .letter-atlas .just-earned,html:not([data-motion=full]):not([data-motion=gentle]) .letter-atlas dialog[open]{animation:none}}

/* Connected letters: route index, three reading stops and a personal closing. */
.story-route-line{stroke:#956c2e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 6;pointer-events:none;opacity:.85;vector-effect:non-scaling-stroke}
.letter-atlas .story-directory li{padding:20px 0}
.letter-atlas .story-directory h3{margin:6px 0;font-size:23px}
.letter-atlas .story-directory p{margin:8px 0;font-size:14px;line-height:1.8}
.letter-atlas .story-directory .route-stops{font-size:12px;opacity:.8}
.route-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.route-actions .story-button{border-radius:22px;padding:9px 16px}
.story-stops{display:flex;flex-wrap:wrap;gap:5px;border-bottom:1px solid #d7b77a42;padding-bottom:16px;margin-bottom:22px}
#chapter-cinema .story-stop{font-size:11px;min-height:44px;padding:7px 10px;max-width:100%;border:1px solid transparent;border-radius:18px;background:transparent;color:#b9b5aa}
#chapter-cinema .story-stop[aria-current=true]{color:#ffe3ae;border-color:#d5b47c70;background:#d7b77a14}
.story-stop[data-read=true]::after{content:' · ✓'}
#chapter-cinema .story-question{font:13px/1.8 var(--sans);letter-spacing:1px;color:#d8bc8b;margin:0 0 10px}
#chapter-cinema .story-scene-title{font:28px/1.55 var(--serif);margin:0 0 24px}
.story-prose p{margin:0 0 22px}
.story-observation{margin:22px 0;color:#d8c7a9;font-size:14px}
.story-observation summary{cursor:pointer;min-height:44px;padding:10px 0;list-style-position:inside}
.story-route-ending{font:18px/2 var(--serif);margin:22px 0}
#chapter-cinema .story-selected-line{margin:22px 0;padding:18px 0 18px 18px;border-left:2px solid #bc985c;font:21px/1.8 var(--serif);color:#f1d8ac}
#chapter-cinema .story-bridge{font:14px/1.9 var(--serif);color:#c9b99c;margin:18px 0}
#chapter-cinema:not(.place-cinema) #cinema-title{font-size:clamp(44px,4.6vw,86px);letter-spacing:.08em;max-width:700px}
#chapter-cinema:not(.place-cinema) #cinema-opening{max-width:500px}
#chapter-cinema .story-choices button{border-radius:18px}
#chapter-cinema .story-primary{border-radius:24px}
#chapter-cinema .story-letter-section{padding:15px 0;border-bottom:1px solid #d7b77a33}
.story-letter-section small{color:#d9b678;letter-spacing:4px}
.story-letter-section p{font:19px/1.9 var(--serif)}
.letter-message-label{display:block;margin:24px 0 8px;font-size:14px}
#letter-message{width:100%;resize:vertical;min-height:88px;max-height:180px;border:1px solid #d7b77a55;border-radius:14px;background:#fff2d80c;color:#fff1d7;padding:12px;font:16px/1.8 var(--serif)}
#letter-message-count{display:block;text-align:right;font-size:12px;color:#c7b696}
.letter-summary #cinema-places{visibility:hidden;pointer-events:none}
#chapter-cinema button:disabled{cursor:not-allowed;opacity:.45}
@media(max-height:820px){#chapter-cinema:not(.place-cinema) #cinema-title{font-size:52px}#chapter-cinema .story-scene-title{font-size:25px}.story-stops{margin-bottom:16px;padding-bottom:12px}}

/* A desk of historical evidence, kept within the existing photographic stage. */
#cinema-era{font:400 clamp(38px,5vw,72px)/1.1 var(--serif);color:#e7c58b;letter-spacing:.03em;margin:12px 0 20px}
#chapter-cinema:not(.place-cinema) #cinema-title{font-size:clamp(36px,3.5vw,64px);letter-spacing:.04em}
#cinema-observe{display:block;min-height:44px;margin-top:12px;padding:9px 0;background:transparent;border:0;color:#ecdbba;font-size:13px;text-decoration:underline;text-underline-offset:5px}
#chapter-cinema.photo-observing #cinema-scroll{visibility:hidden;pointer-events:none}
#chapter-cinema.photo-observing .cinema-grade{opacity:.2}
#chapter-cinema.photo-observing .cinema-hero{background:#101e2960;border-radius:20px;padding:24px;backdrop-filter:blur(2px)}
.journey-status{display:flex;justify-content:space-between;gap:14px;margin-bottom:20px;font-size:11px;color:#cbb991}
.journey-meter{padding:12px 14px;border:1px solid #b8955d55;border-radius:12px;font-size:13px}
.journey-step{display:block;font:11px/1.6 var(--sans);letter-spacing:2px;color:#cfad72;margin:18px 0 12px}
.evidence-cards{display:grid;gap:10px}
#chapter-cinema .evidence-card{display:grid;grid-template-columns:28px 1fr;gap:6px 12px;width:100%;min-height:72px;padding:16px;text-align:left;border:1px solid #d4b78355;border-radius:12px;background:linear-gradient(120deg,#d1af6e1a,#fff0d305);color:#eee1c9}
.evidence-number{font:20px/1.4 var(--serif);color:#cfa96a;grid-row:span 2}
.evidence-card strong{font-size:15px;font-weight:500}.evidence-text{font-size:15px;line-height:1.85;color:#d2cab8}
#chapter-cinema .evidence-card.is-inspected{border-color:#b8a57588;background:#a5ba9b10}
.evidence-card.is-inspected .evidence-number::after{content:' ✓';font-size:10px}
.journey-mission{padding:0 0 18px;border-bottom:1px solid #d7b77a44;margin:28px 0}
.mission-prompt{font-size:16px;line-height:1.9}.mission-locked{padding:14px;border:1px dashed #ae957555;border-radius:10px;color:#b8b3a6;font-size:13px}
.mission-sequence{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}
.mission-sequence li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;padding:10px 10px 10px 14px;border:1px solid #b69e7755;border-radius:10px;background:#e7d1a50a;cursor:grab}
.sequence-number{color:#bb9a66;font-size:12px}.sequence-label{font-size:14px;line-height:1.65}.sequence-controls{display:flex;gap:3px}
#chapter-cinema .mission-move{width:44px;min-height:44px;background:#e3ca9b10;border:1px solid #d4b68638;border-radius:8px;color:#f8e4bd;font-size:18px}
.mission-match{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.mission-match>div,.mission-options{display:grid;gap:9px}
#chapter-cinema .match-card{min-height:64px;width:100%;padding:12px;text-align:left;border:1px solid #b69e7755;border-radius:10px;background:#f4debb09;color:#efe1c7;font-size:14px;line-height:1.7}
.match-card small{display:block;font-size:11px;line-height:1.7;margin-top:6px;color:#cbb891}
#chapter-cinema .match-card[aria-pressed=true]{border-color:#edd5a5;background:#d3ae6c30;box-shadow:inset 3px 0 #d8b576}
#chapter-cinema .match-card.is-paired{border-color:#a9bd9970;background:#97b99514}
.mission-feedback{font-size:13px;line-height:1.8;color:#e9cc98}.mission-help{font-size:13px;line-height:1.9}.mission-help summary{cursor:pointer;min-height:44px;padding:10px 0}
.journey-seal{display:inline-block;border:1px solid #a9bd9980;color:#d6e6c6;border-radius:6px;padding:7px 13px;font-size:13px;margin:14px 0 8px}
.mission-explanation{font-size:15px;line-height:1.9}.mission-reward{font:17px/1.8 var(--serif);color:#e9cd9e}
.archive-stamps{display:grid;gap:8px;margin:12px 0;font-size:11px;line-height:1.7;color:#d1c1a0}
@media(max-height:820px){#cinema-era{font-size:42px;margin:8px 0 14px}#chapter-cinema:not(.place-cinema) #cinema-title{font-size:42px}#cinema-observe{margin-top:4px}}
@media(max-width:700px){
  #chapter-cinema .cinema-header{height:68px;padding:12px 16px;gap:8px}#chapter-cinema .cinema-brand{display:none}
  #chapter-cinema .cinema-layout{display:flex;flex-direction:column;height:calc(100% - 168px);gap:0;padding:0 16px}
  #chapter-cinema .cinema-hero{padding:10px 0;align-self:stretch;max-width:none;flex:none}
  #chapter-cinema #cinema-number{font-size:9px;letter-spacing:1px;margin:0}#cinema-era{font-size:25px;display:inline-block;margin:6px 0}
  #chapter-cinema:not(.place-cinema) #cinema-title,#chapter-cinema #cinema-title{font-size:25px;line-height:1.35;margin:0 0 6px}
  #chapter-cinema #cinema-place{font-size:12px;margin:0 0 5px}#chapter-cinema #cinema-opening{font-size:12px;line-height:1.7;margin:0;max-width:none}
  #chapter-cinema .cinema-rule,#chapter-cinema .cinema-fiction,#cinema-read{display:none}#cinema-observe{font-size:11px;margin:4px 0 0;padding:6px 0;min-height:44px}
  #chapter-cinema #cinema-scroll{flex:1;min-height:0;margin:8px 0 0;width:100%}#chapter-cinema .story-panel{padding:16px 16px 24px}
  #chapter-cinema .story-scene-title{font-size:23px;margin-bottom:16px}.story-prose p{font-size:15px;line-height:1.85}
  #chapter-cinema .cinema-footer{height:100px;padding:10px 16px;gap:8px}#chapter-cinema .cinema-photo-note{max-width:43%;font-size:8px;line-height:1.5}#chapter-cinema #cinema-progress{display:none}
  #chapter-cinema #cinema-places{max-width:54%;gap:6px}#chapter-cinema #cinema-places button{min-width:0;max-width:90px;padding:6px;font-size:10px}#chapter-cinema #cinema-place-index{display:none}
  .mission-match{gap:8px}.sequence-controls{flex-direction:column}.journey-status{font-size:10px}.story-stops{margin-bottom:12px;padding-bottom:10px}
}

.journey-stage-nav{display:flex;gap:7px;margin:0 0 18px;border-bottom:1px solid #d7b77a33;padding-bottom:9px}
#chapter-cinema .journey-stage{flex:1;font-size:12px;min-height:44px;border:1px solid #d4b78333;border-radius:7px;background:#dfc48b0a;color:#e7d5b3}
#chapter-cinema .journey-stage:hover{background:#dfc48b22;border-color:#d4b78388}
#journey-narrative,#journey-evidence,#journey-mission{scroll-margin-top:18px}
@media(max-width:700px){
 .letter-atlas .story-open #place-panel{display:block;position:fixed;left:12px;right:12px;top:88px;bottom:20px;width:auto;height:auto;max-height:none;overflow:auto;overscroll-behavior:contain;z-index:30}
 .letter-atlas .story-open .story-panel{padding:16px 20px 28px}
 .letter-atlas .story-open .route-actions{flex-wrap:wrap}
}
@media(max-width:700px){
 #chapter-cinema #cinema-read{display:none}
 #chapter-cinema #cinema-places{display:flex;width:54%;flex-shrink:0;gap:6px}
 #chapter-cinema #cinema-places button{flex:1;width:0;max-width:none;min-width:0;border-radius:12px;padding:8px 6px}
 #chapter-cinema #cinema-places button small{white-space:nowrap;font-size:9px;letter-spacing:0}
}

