/* The story map: a real map pinned full-bleed behind scrolling chapter cards. */
.story{position:relative;margin:30px 0 10px}
.story-map{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#e9e3d8}
#story-map{position:absolute;inset:0}
#story-map canvas{filter:saturate(.88) sepia(.08)}
.story-hud{position:absolute;right:18px;top:18px;z-index:3;background:rgba(250,247,241,.95);
  border-radius:12px;padding:10px 15px;box-shadow:0 8px 24px rgba(39,18,42,.16);pointer-events:none}
.story-hud b{display:block;font:600 17px/1.1 var(--serif);color:var(--plum)}
.story-hud span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7a6f79}
.story-chapters{position:relative;z-index:2;margin-top:-100vh;padding:40vh 0 50vh;pointer-events:none}
.chapter{min-height:92vh;display:flex;align-items:center;padding:0 4vw}
.ch-card{pointer-events:auto;width:min(440px,92vw);background:rgba(250,247,241,.97);border-radius:18px;
  overflow:hidden;box-shadow:0 22px 50px rgba(39,18,42,.24);opacity:.35;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease}
.chapter.active .ch-card{opacity:1;transform:none}
.ch-img{display:block;width:100%;height:170px;object-fit:cover;background:var(--plum)}
.ch-text{padding:18px 22px 22px}
.ch-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--copper)}
.ch-text h3{font:600 26px/1.12 var(--serif);color:var(--plum);margin:0 0 10px}
.ch-text p{font-size:15px;line-height:1.6;margin:0 0 12px}
.ch-fact{background:#f3ebe1;border-radius:11px;padding:11px 13px;font-size:14px!important;line-height:1.55!important;margin:4px 0 0!important}
.ch-fact b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:3px}

/* markers: campuses carry their own illustration, sites their icon */
/* no position here: MapLibre places each marker with position:absolute on .maplibregl-marker, and
   setting position:relative put every marker back into normal flow, stacked in a column. */
.mk{display:flex;flex-direction:column;align-items:center;cursor:default}
.mk-disc{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;border:3px solid #faf7f1;
  box-shadow:0 6px 16px rgba(39,18,42,.35);background:#41203c;transition:transform .35s ease,border-color .35s}
.mk-disc img{width:100%;height:100%;object-fit:cover;display:block}
.mk b{position:absolute;top:-6px;right:-8px;min-width:19px;height:19px;border-radius:10px;background:#41203c;
  color:#faf7f1;font:600 11px/19px var(--serif);text-align:center;border:2px solid #faf7f1}
.mk em{margin-top:4px;font:600 11px var(--sans);font-style:normal;color:#231c30;background:rgba(250,247,241,.92);
  border-radius:6px;padding:2px 7px;white-space:nowrap;opacity:0;transition:opacity .3s}
.mk-site .mk-disc,.mk-air .mk-disc{width:32px;height:32px;background:#faf7f1}
.mk-night i{display:block;width:9px;height:9px;border-radius:50%;background:#41203c;border:2px solid #faf7f1}
.mk-night em{opacity:.85;font-weight:500}
/* The focused marker draws above its neighbours. Markers stack in the order they were added, so on the
   Chicago arrival the Capitol and museum icons, added later, covered Union Station. z-index only:
   MapLibre owns the marker's position (never set it, see CLAUDE.md). */
.mk.on{z-index:5}
.mk.on .mk-disc{transform:scale(1.9);border-color:#f0b27a}
.mk.on em{opacity:1;transform:translateY(20px)}
.mk.on b{transform:translate(14px,-14px);background:#bd7150}
.mk.visited .mk-disc{border-color:#d9a98c}
.mk-campus em{opacity:.0}
.story .maplibregl-ctrl-attrib{font-size:10px}

/* no WebGL: the chapters still read as a plain list */
.story.no-map .story-map{display:none}
.story.no-map .story-chapters{margin-top:0;padding:0}
.story.no-map .chapter{min-height:0;padding:14px 0}
.story.no-map .ch-card{opacity:1;transform:none;margin:0 auto}

@media (max-width:760px){
  .chapter{align-items:flex-end;padding:0 4vw 6vh}
  .ch-img{height:120px}
  .ch-text h3{font-size:22px}
  .story-hud{right:10px;top:10px;padding:8px 12px}
  .mk-disc{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.ch-card,.mk-disc{transition:none}}

/* Card legibility and safe phone gutters; pinning and chapter timing are unchanged. */
.ch-card{background:var(--paper);opacity:1}
.ch-text{padding:22px 24px 24px}
.ch-text .ch-kicker{font-size:11px;line-height:1.5;margin-bottom:10px}
.ch-text h3{line-height:1.2;letter-spacing:-.6px}
.ch-text>p:last-child{margin-bottom:0}
.story-hud{max-width:calc(100% - 40px)}
.story-hud span{display:block;line-height:1.5;margin-top:4px}
@media(max-width:760px){
  .chapter{padding-inline:20px}
  .ch-card{width:100%}
  .ch-text{padding:20px}
  .story-hud{right:20px;top:12px;padding:10px 12px}
  .story-hud span{font-size:10px;letter-spacing:.04em}
}


/* ---- Phone: split screen. The map is pinned in the top panel and the story scrolls beneath it, so
   a card can never cover the place it describes. Replaces the full-screen overlay on phones only. */
@media (max-width:760px){
  .story-map{height:52vh;height:52svh;border-bottom:1px solid var(--line);z-index:3}
  .story-chapters{z-index:1}
  .story-chapters{margin-top:0;padding:18px 0 34vh;background:var(--paper)}
  .chapter{min-height:46vh;min-height:46svh;align-items:flex-start;padding:0 20px 18px}
  .ch-card{width:100%;box-shadow:none;border:1px solid var(--line);border-radius:16px;opacity:.45;transform:none}
  .chapter.active .ch-card{opacity:1;border-color:#e2c4b0}
  .ch-img{height:96px}
  .ch-text{padding:16px 18px 18px}
  .ch-text h3{font-size:21px;margin-bottom:8px}
  .ch-text p{font-size:14px;line-height:1.55;margin-bottom:10px}
  .ch-fact{font-size:13px!important;padding:10px 12px}
  .story-hud{top:10px;right:12px;left:auto;padding:7px 11px}
  .story-hud b{font-size:15px}
  .mk.on .mk-disc{transform:scale(1.6)}
}

/* Phone cards: the illustration becomes a thumbnail beside the heading, so a whole card fits in the
   text panel under the map instead of scrolling behind it half read. */
@media (max-width:760px){
  .ch-card{display:grid;grid-template-columns:64px 1fr;column-gap:14px;padding:16px 16px 16px}
  .ch-img{width:64px;height:64px;border-radius:12px;grid-row:1}
  .ch-text{padding:0;grid-column:2;grid-row:1 / span 2}
  .ch-text .ch-kicker{margin:2px 0 4px}
  .ch-text h3{font-size:20px;margin-bottom:8px}
  .ch-fact{margin-top:10px!important}
}

/* Short phones (iPhone SE, 375x667): at 52% the map left a 320px text panel and 8 of 16 cards did
   not fit. The map gives up a little height and the card type tightens a step. */
@media (max-width:760px) and (max-height:720px){
  .story-map{height:45vh;height:45svh}
  .ch-text h3{font-size:19px;margin-bottom:6px}
  .ch-text p{font-size:13.5px;line-height:1.5;margin-bottom:8px}
  .ch-fact{font-size:12.5px!important;line-height:1.45!important;padding:8px 10px}
  .ch-card{padding:14px}
}