:root {
  --paper: #f3f0e7;
  --paper-deep: #e8e3d7;
  --ink: #111111;
  --muted: #77736b;
  --red: #b83423;
  --line: rgba(17, 17, 17, 0.2);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }

.page-shell { width: min(100%, 820px); margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-left)) 28px max(16px, env(safe-area-inset-right)); }
.masthead, .footer-note { display: flex; justify-content: space-between; gap: 14px; font-size: 9px; letter-spacing: .16em; line-height: 1.4; }
.masthead { padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
.footer-note { padding: 18px 0 4px; color: var(--muted); border-top: 1px solid var(--line); }

.page-index { position: relative; z-index: 4; width: max-content; margin: 10px 0 18px auto; font-size: 9px; letter-spacing: .18em; }
.page-index summary { min-height: 44px; padding: 14px 0 10px; cursor: pointer; list-style: none; }
.page-index summary::-webkit-details-marker { display: none; }
.page-index summary::after { content: ' +'; color: var(--red); }
.page-index[open] summary::after { content: ' −'; }
.page-index nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding-bottom: 8px; letter-spacing: .08em; }
.page-index nav a { text-decoration: none; border-bottom: 1px solid var(--line); }
.page-index summary:focus-visible, .page-index a:focus-visible, .phone-hotspot:focus-visible, .show-me:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.story { display: grid; gap: 34px; }
.panel { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); box-shadow: 6px 8px 0 rgba(17,17,17,.08); }
.panel::before { position: absolute; z-index: 2; inset: 15px; content: ''; border: 1px dashed rgba(17,17,17,.17); pointer-events: none; }
.panel::after { position: absolute; z-index: 2; inset: 0; content: ''; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(17,17,17,.075) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(17,17,17,.06) 50%, transparent 50.2%); background-size: 150px 150px; mix-blend-mode: multiply; opacity: .5; }
.panel--one { transform: rotate(-.7deg); }
.panel--two { transform: rotate(.75deg); margin-inline: 5px; }
.panel--three { transform: rotate(-.45deg); margin-inline: 10px 0; }
.panel-meta { position: absolute; z-index: 5; top: 19px; left: 21px; right: 21px; display: flex; justify-content: space-between; gap: 10px; font-size: 8px; letter-spacing: .15em; }
.panel-art { position: relative; z-index: 1; margin: 0; line-height: 0; }
.panel-art img { display: block; width: 100%; height: auto; }
.panel-copy { position: absolute; z-index: 5; background: rgba(243,240,231,.93); }
.panel-copy h1, .panel-copy h2, .panel-copy p { margin: 0; }
.panel-copy h1, .panel-copy h2 { font-family: var(--serif); font-weight: 400; line-height: .98; }
.panel-copy em { font-style: italic; }
.panel-copy--one { left: 8%; bottom: 8%; padding: 10px 12px; border-top: 1px solid var(--ink); }
.panel-copy--one h1 { font-size: clamp(23px, 6vw, 42px); }
.panel-copy--two { left: 8%; right: 8%; bottom: 7%; padding: 11px 13px 12px; border-top: 1px solid var(--ink); }
.panel-copy--two h2 { font-size: clamp(31px, 8vw, 54px); }
.panel-copy--two h2 span { color: var(--red); }
.panel-copy--two p { margin-top: 13px; font-family: var(--serif); font-size: clamp(18px, 4.7vw, 29px); line-height: 1.05; }
.panel-copy--two .small-copy { margin-top: 9px; font-family: var(--sans); font-size: clamp(12px, 3vw, 16px); line-height: 1.3; }
.panel-copy--three { top: 10%; right: 7%; width: 48%; padding: 10px 12px; }
.panel-copy--three h2 { font-size: clamp(25px, 6vw, 44px); }
.panel-copy--three p { margin-top: 12px; font-family: var(--serif); font-size: clamp(13px, 3.2vw, 18px); line-height: 1.15; }
.red-marker { position: absolute; z-index: 6; width: 13px; height: 13px; border-radius: 50%; background: var(--red); left: 8%; bottom: 11%; }

/* The hotspot follows the phone in panel 3. It is deliberately a large, forgiving mobile tap target. */
.phone-hotspot { position: absolute; z-index: 8; left: 12%; top: 32%; width: 40%; height: 45%; display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 20px; text-decoration: none; }
.hotspot-ring { width: 58px; height: 58px; border: 1px solid rgba(184,52,35,.65); border-radius: 50%; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.phone-hotspot:hover .hotspot-ring, .phone-hotspot:focus-visible .hotspot-ring { opacity: 1; transform: scale(1.06); }
.show-me { position: absolute; z-index: 9; right: 8%; bottom: 10%; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 15px; color: var(--paper); background: var(--ink); text-decoration: none; font-size: 10px; letter-spacing: .17em; transition: background-color .18s ease, transform .18s ease; }
.show-me:hover { background: var(--red); transform: translateY(-2px); }
.show-me span { font-size: 15px; line-height: 0; }

@media (min-width: 640px) {
  .page-shell { padding-top: 26px; }
  .story { gap: 52px; }
  .panel--two { margin-inline: 7%; }
  .panel--three { margin-inline: 14% 0; }
}
@media (pointer: coarse) { .phone-hotspot, .show-me, .page-index summary { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hotspot-ring, .show-me { transition: none; } }