/* På djupet (djupet.html): the list of deep dives, and the reader, where
   the picture and the map sit as two rounded surfaces on the page, as in
   the journey reader. The picture leads: it takes about two thirds of the
   width, and the map keeps at least 400px. Everything is prefixed deep- so
   nothing here leaks into the atlas. */

.in-depth {
  --own: #1f5aa6;
  --other: #3b2f22;
  --gold: #f2c230;
  --battle: #9a3a2c;
  --fire: #d0631b;
  --ink-card: #0d1212;
  --gap: clamp(12px, 1.4vw, 20px);
  --round: 22px;
  --card-w: max(calc((100vw - 3 * var(--gap)) * 0.56),
    min(calc((100vw - 3 * var(--gap)) * 0.64), calc(100vw - 3 * var(--gap) - 400px)));
  /* The way on sits this far in from the picture's corner. */
  --deep-edge: clamp(20px, 2.4vw, 36px);
  --map-left: calc(var(--card-w) + 2 * var(--gap));
  background: var(--bg);
}

/* ---------- the list ---------- */

.deep-list { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) 64px; }
.deep-list-head h1 { margin: 0 0 12px; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.045em; }
.deep-list-head p { margin: 0 0 32px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); }
.deep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.deep-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--round); background: var(--ink-card); color: #fff; text-decoration: none; box-shadow: var(--sh); }
.deep-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.deep-cover:hover img { transform: scale(1.03); }
.deep-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 12 12 / 76%), rgb(8 12 12 / 24%) 45%, transparent 70%); }
.deep-cover > span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 20px); }
.deep-cover small { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.deep-cover small i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--battle); }
.deep-cover strong { font-size: clamp(22px, 1.9vw, 26px); line-height: 1; letter-spacing: -0.04em; }

/* ---------- the reader ---------- */

.in-depth.is-reading { height: 100%; overflow: hidden; }
.in-depth.is-reading .site-nav { display: none; }
.deep-reader[hidden] { display: none; }

.deep-card { touch-action: pan-y; position: fixed; z-index: 4; top: var(--gap); left: var(--gap); bottom: var(--gap); width: var(--card-w); overflow: hidden; border-radius: var(--round); background: var(--ink-card); color: #fff; }
.deep-map { position: fixed; top: var(--gap); right: var(--gap); bottom: var(--gap); left: var(--map-left); overflow: hidden; border-radius: var(--round); box-shadow: 0 10px 34px rgb(24 32 44 / 8%); background: #dfe7ea; }

.deep-back { position: fixed; z-index: 6; top: calc(var(--gap) + 16px); left: calc(var(--gap) + 16px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(15 20 20 / 45%); color: #fff; backdrop-filter: blur(10px); }
.deep-back:hover { background: rgb(15 20 20 / 65%); }
.deep-back svg { width: 20px; height: 20px; }

/* A new picture fades in while it settles from a slight zoom, as on a journey. */
.deep-picture { position: absolute; inset: 0; overflow: hidden; transition: opacity 0.7s ease; }
.deep-picture.arriving { opacity: 0; }
.deep-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
video.deep-photo { pointer-events: none; background: #0d1212; }
.deep-picture.arriving .deep-photo { transform: scale(1.05); }
.deep-picture::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(8 12 12 / 22%), transparent 18%, transparent 42%, rgb(8 12 12 / 48%) 68%, rgb(8 12 12 / 78%)); }
/* A beat is the picture's own moment: less shade, so more of it shows. */
.deep-picture.beat::after { background: linear-gradient(180deg, rgb(8 12 12 / 20%), transparent 16%, transparent 60%, rgb(8 12 12 / 52%) 84%, rgb(8 12 12 / 76%)); }
.deep-beat .deep-copy { max-width: 34rem; }
.deep-picture.map-only { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 18vh; background: radial-gradient(circle at 50% 30%, rgb(208 99 27 / 22%), transparent 60%), #1c2424; color: rgb(255 255 255 / 65%); text-align: center; }
.deep-picture.map-only::after { display: none; }
.deep-picture.map-only > span:not(.deep-badge) { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 8%); color: var(--fire); }
.deep-picture.map-only svg { width: 30px; height: 30px; }
.deep-picture.map-only p { margin: 0; font-size: 14px; max-width: 24ch; }
.deep-badge { position: absolute; z-index: 2; top: 20px; left: 72px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgb(15 20 20 / 45%); backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: 650; }
.deep-badge b { padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / 20%); font-variant-numeric: tabular-nums; }

.deep-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; max-height: 100%; box-sizing: border-box; overflow-y: auto; scrollbar-width: none; padding: 0 clamp(28px, 4vw, 64px) clamp(28px, 4.5vh, 48px); transition: opacity 0.45s ease 0.15s, transform 0.45s cubic-bezier(.2,.7,.2,1) 0.15s; }
.deep-text.arriving { opacity: 0; transform: translateY(10px); transition: none; }
.deep-text h1 { margin: 0 0 14px; font-size: clamp(44px, 4.8vw, 88px); line-height: 0.98; letter-spacing: -0.05em; max-width: 12ch; text-wrap: balance; }
.deep-text h2 { margin: 0 0 18px; font-size: clamp(38px, 4vw, 72px); line-height: 0.98; letter-spacing: -0.05em; max-width: 14ch; text-wrap: balance; }
.deep-travel { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / 60%); }
/* The small line over the title sits where the picture's shade is thinnest:
   on bright sails (Götheborg) it vanished. It gets the words' own shade,
   and a closer one, as small type needs. */
.deep-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 650; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 84%); text-shadow: 0 1px 14px rgb(0 0 0 / 30%), 0 0 3px rgb(0 0 0 / 45%); }
.deep-eyebrow .win { color: #f5c46b; white-space: nowrap; }
.deep-eyebrow .loss { color: #ff9c86; white-space: nowrap; }
.deep-kind { display: inline-flex; margin-right: 8px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--battle) 12%, #fff); color: var(--battle); font-size: 11px; font-weight: 700; text-shadow: none; }
.deep-lead, .deep-copy { margin: 0; max-width: 36ch; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; color: rgb(255 255 255 / 92%); text-shadow: 0 1px 14px rgb(0 0 0 / 30%); text-wrap: pretty; }
.deep-credit { margin: 0; padding-top: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: rgb(255 255 255 / 42%); }
.deep-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 32rem; margin: 20px 0 0; }
.deep-totals div { padding: 12px; border-radius: 12px; background: rgb(255 255 255 / 8%); }
.deep-totals dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 60%); }
.deep-totals dd { margin: 4px 0 0; white-space: nowrap; font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; letter-spacing: -0.02em; }
.deep-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / 75%); }
.deep-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.deep-links a { padding: 10px 15px; border-radius: 999px; background: #fff; color: var(--ink-card); font-size: 14px; font-weight: 650; text-decoration: none; }

/* ---------- inside the map frame: legend, overview, rail ---------- */

.deep-corner { position: fixed; z-index: 5; top: calc(var(--gap) + 12px); left: calc(var(--map-left) + 12px); right: calc(var(--gap) + 12px); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.deep-corner > * { pointer-events: auto; }
.deep-legend { display: flex; gap: 12px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 90%); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--sh-sm); font-size: 12px; }
.deep-pill { margin-left: auto; white-space: nowrap; border: 0; border-radius: 999px; padding: 8px 14px; background: rgb(255 255 255 / 90%); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--sh-sm); color: var(--brand); font: 600 13px var(--font); cursor: pointer; }
.deep-pill:hover { background: #fff; }
.deep-key { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; color: var(--text); }
.deep-key::before { content: ''; flex: 0 0 auto; }
.deep-key.own::before { width: 22px; height: 4px; border-radius: 2px; background: var(--own); }
.deep-key.other::before { width: 22px; height: 0; border-top: 3px dashed var(--other); }
.deep-key.battle::before { width: 14px; height: 14px; background: var(--battle); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l10 10M20 4L10 14M8 17l-3 3M16 17l3 3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.deep-rail { position: fixed; z-index: 5; left: calc(var(--map-left) + 12px); right: calc(var(--gap) + 12px); bottom: calc(var(--gap) + 12px); display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(16px) saturate(1.5); box-shadow: var(--sh); }
.deep-prev { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 5%); color: var(--text); font-size: 18px; cursor: pointer; }
.deep-prev:hover:not(:disabled) { background: rgb(0 0 0 / 9%); }
.deep-prev:disabled { opacity: 0.3; cursor: default; }
.deep-next { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ui-action); color: var(--ui-action-ink); font: 650 15px var(--font); white-space: nowrap; cursor: pointer; }
.deep-next:hover { filter: brightness(1.1); }
.deep-track { position: relative; height: 52px; margin: 0 14px; }
.deep-line { position: absolute; left: 0; right: 0; top: 26px; height: 2px; border-radius: 1px; background: rgb(0 0 0 / 10%); overflow: hidden; }
.deep-line i { display: block; height: 100%; width: 0; background: var(--own); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.deep-dot { position: absolute; top: 22px; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 0; border-radius: 50%; background: #cdd2c8; cursor: pointer; transition: background 0.2s; }
.deep-dot::before { content: ''; position: absolute; inset: -10px; }
.deep-dot.past { background: var(--own); }
.deep-dot.active { top: 20px; width: 14px; height: 14px; margin-left: -7px; background: var(--own); box-shadow: 0 0 0 5px color-mix(in srgb, var(--own) 18%, transparent); }
.deep-dot span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.deep-dot.active span, .deep-dot:hover span { opacity: 1; }

.deep-map .maplibregl-ctrl-bottom-right { bottom: 84px; right: 12px; }
.deep-map .maplibregl-ctrl-group { border-radius: 999px !important; overflow: hidden; box-shadow: var(--sh) !important; }
.deep-map .maplibregl-ctrl-attrib { font-size: 10px; }
.deep-map-error { position: fixed; z-index: 7; top: 90px; left: calc(var(--map-left) + 24px); padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: var(--sh); }

/* ---------- on the map ---------- */

.deep-region { font: 700 11px var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: rgb(60 72 58 / 50%); pointer-events: none; }
.deep-region.sea, .deep-region.river { font-style: italic; text-transform: none; letter-spacing: 0.08em; color: rgb(40 90 140 / 55%); font-weight: 600; }
.deep-region.sea { font-size: 14px; }

.deep-place { border: 0; background: none; padding: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; cursor: pointer; transition: opacity 0.4s; }
.deep-place.below { flex-direction: column; }
.deep-place span { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--own); box-shadow: 0 1px 4px rgb(0 0 0 / 20%); }
.deep-place.battle span, .deep-place.fire span { width: 30px; height: 30px; border: 0; color: var(--battle); }
.deep-place.fire span { color: var(--fire); }
.deep-place svg { width: 18px; height: 18px; }
.deep-place b { font: 650 13px var(--font); background: #fffef9; color: var(--text); padding: 4px 9px; border-radius: 999px; box-shadow: var(--sh-sm); white-space: nowrap; }
/* City interest points name the place on hover/focus or selection. Their
   transparent hit area is large enough to tap without enlarging the dot. */
.deep-place.poi { width: 44px; height: 44px; justify-content: center; }
.deep-place.poi b { display: none; position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); }
.deep-place.poi:is(:hover, :focus-visible, .active) b { display: block; }
.deep-place.poi:focus-visible { outline: 2px solid var(--own); outline-offset: 3px; border-radius: 8px; }
.deep-place.future { opacity: 0.4; }
.deep-place.future b { display: none; }
.deep-place.past { opacity: 0.75; }
.deep-place.past b { display: none; }
.deep-place.active b { background: var(--ink-card); color: #fff; }
.deep-place.active span { transform: scale(1.15); box-shadow: 0 0 0 6px rgb(255 255 255 / 55%), 0 2px 8px rgb(0 0 0 / 25%); }

.deep-token { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.deep-token i { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 35%); }
.deep-token b { font: 700 11px var(--font); padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap; box-shadow: var(--sh-sm); }
.deep-token.own i { background: var(--own); }
/* A crowned king standing on the point — opt in with own.marker: 'king'. */
.deep-token.own.king i { width: 38px; height: 46px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 30%)); }
.deep-token.own.king svg { display: block; width: 100%; height: 100%; }
.deep-token.own b { background: var(--own); }
.deep-token.other { flex-direction: row-reverse; }
.deep-token.other i { background: radial-gradient(circle, #e0b23a 0 30%, var(--other) 32%); }
.deep-token.other b { background: var(--other); }
.deep-token.fallen { filter: grayscale(1); opacity: 0.7; }
.deep-token.fallen b::after { content: ' †'; }

/* The battle, zoomed in: the campaign's markers step aside. */
.deep-reader.in-battle :is(.deep-place, .deep-token, .deep-region) { display: none; }
.deep-battle-label { pointer-events: none; font: 650 13px var(--font); white-space: nowrap; }
.deep-battle-label.town { font-size: 15px; font-weight: 750; letter-spacing: 0.04em; color: #5a4632; text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.deep-battle-label:is(.road, .river) { font-size: 12px; font-style: italic; color: #7a6647; text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.deep-battle-label.river { font-size: 13px; color: rgb(40 90 140 / 80%); }
.deep-battle-label.mill { padding: 4px 9px; border-radius: 999px; background: #fffef9; color: var(--text); box-shadow: var(--sh-sm); }
.deep-battle-label.mill::before { content: '✣ '; color: #8a6a3a; }
.deep-battle-label.own, .deep-battle-label.other { padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 12px; box-shadow: var(--sh-sm); }
.deep-battle-label.own { background: var(--own); }
.deep-battle-label.other { background: var(--other); }
.deep-battle-label.side { background: none; box-shadow: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 6px #fff, 0 0 3px #fff; }
.deep-battle-label.own.side { color: var(--own); }
.deep-battle-label.other.side { color: var(--other); }
.deep-battle-label.stone { transform: translateY(-18px); padding: 6px 12px; border-radius: 999px; background: var(--ink-card); color: #fff; box-shadow: var(--sh-lg); }
.deep-battle-label.stone::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; background: #9aa0a6; transform: rotate(45deg); }
.deep-battle-label.stone::after { content: ''; position: absolute; left: 50%; bottom: -14px; width: 2px; height: 12px; margin-left: -1px; background: var(--ink-card); }
.deep-battle-label.note { font-style: italic; color: var(--other); text-shadow: 0 0 6px #fff; }

.deep-picture-dialog { width: min(1200px, 94vw); padding: 50px 20px 20px; border: 0; border-radius: 20px; background: #111a14; color: #fff; }
.deep-picture-dialog::backdrop { background: rgb(20 30 22 / 60%); backdrop-filter: blur(6px); }
.deep-picture-dialog img { display: block; width: 100%; max-height: 78dvh; object-fit: contain; }
.deep-picture-dialog p { margin: 12px 0 0; font-size: 13px; color: rgb(255 255 255 / 70%); }
.deep-close-dialog { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surf); color: var(--text); font-size: 22px; cursor: pointer; }

/* Read more: a round + on the step, opening a sheet over the page. */

@keyframes deep-sheet-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.deep-more-body { padding: clamp(24px, 4vw, 48px); }
.deep-more-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.deep-more-body h2 { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.04em; }
.deep-more-body p { margin: 0 0 16px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.deep-more-note { margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--surf); font-size: 14px; line-height: 1.5; color: var(--muted); }
.deep-more-note b { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .deep-photo { transition: none; } }
@media (max-width: 1300px) { .deep-key.battle { display: none; } }
@media (max-width: 1100px) { .deep-legend { display: none; } }

/* ---------- phone: the picture, the text under it, the map below ---------- */
@media (max-width: 700px) {
  .in-depth { --gap: 8px; --card-w: calc(100vw - 2 * var(--gap)); }
  .deep-card { right: var(--gap); bottom: auto; width: auto; height: 56dvh; overflow-y: auto; }
  .deep-picture, .deep-picture.map-only { bottom: auto; height: 24dvh; padding-top: 0; justify-content: center; }
  .deep-picture::after, .deep-picture.beat::after { background: linear-gradient(180deg, rgb(8 12 12 / 20%), transparent 30%, transparent 70%, rgb(8 12 12 / 30%)); }
  .deep-text { position: static; max-height: none; overflow: visible; margin-top: 24dvh; padding: 18px 20px 20px; }
  .deep-text h1 { font-size: 32px; }
  .deep-text h2 { font-size: 28px; margin-bottom: 10px; }
  .deep-lead, .deep-copy { font-size: 16px; }
  .deep-badge { top: 14px; left: 62px; font-size: 11px; }
  .deep-back { top: calc(var(--gap) + 10px); left: calc(var(--gap) + 10px); }
  .deep-map { top: calc(56dvh + 2 * var(--gap)); left: var(--gap); }
  .deep-corner { top: calc(56dvh + 2 * var(--gap) + 8px); left: calc(var(--gap) + 8px); right: calc(var(--gap) + 8px); }
  .deep-rail { left: calc(var(--gap) + 8px); right: calc(var(--gap) + 8px); bottom: calc(var(--gap) + 8px); padding: 6px; gap: 8px; }
  .deep-next { height: 40px; padding: 0 16px; }
  .deep-dot span { display: none; }
  .deep-track { margin: 0 4px; }
  .deep-token b { display: none; }
  .deep-place:not(.active) b { display: none; }
  .deep-map .maplibregl-ctrl-group { display: none; }
  .deep-cover { aspect-ratio: 4 / 5; }
  /* More words below the card's fold: its foot fades, so a line cut in half
     reads as a card to scroll, not as the end (reader.js sets more-below). */
  .deep-reader:not(.film) .deep-card::after { content: ''; position: sticky; z-index: 2; bottom: 0; display: block; height: 64px; margin-top: -64px; pointer-events: none; background: linear-gradient(180deg, rgb(13 18 18 / 0%), var(--ink-card) 82%); opacity: 0; transition: opacity 0.25s ease; }
  .deep-reader:not(.film) .deep-card.more-below::after { opacity: 1; }
}

/* ---------- clean controls: white glass, small, quiet ---------- */
.deep-glass, .deep-legend, .deep-pill, .deep-map .maplibregl-ctrl-group {
  background: rgb(255 255 255 / 88%) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 0 !important;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%) !important;
}
.deep-legend { padding: 7px 14px; gap: 14px; font-size: 12px; border-radius: 999px; }
.deep-icon { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #1c1c1e; }
.deep-icon svg { width: 18px; height: 18px; }
/* Each step frames its own map, so a whole-map button was one choice too
   many. The element stays, as a place other readers anchor to. */
#deep-overview { display: none; }

.deep-map .maplibregl-ctrl-bottom-right { bottom: 98px; right: 16px; }
.deep-map .maplibregl-ctrl-group { border-radius: 18px !important; overflow: hidden; }
.deep-map .maplibregl-ctrl-group button { width: 36px; height: 36px; background: transparent; }
.deep-map .maplibregl-ctrl-group button + button { border-top: 1px solid rgb(0 0 0 / 6%); }
.deep-map .maplibregl-ctrl-icon { transform: scale(0.85); }
.deep-map .maplibregl-ctrl-bottom-left { left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.deep-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { float: none; margin: 0 16px 4px; padding: 0; background: none; font-size: 10px; line-height: 14px; color: rgb(0 0 0 / 50%); pointer-events: auto; }
.deep-map .maplibregl-ctrl-attrib a { color: inherit; }

/* The rail: back, where we are, next. */
.deep-rail { bottom: calc(var(--gap) + 22px); padding: 0; gap: 8px; background: none !important; backdrop-filter: none; box-shadow: none !important; border-radius: 0; align-items: center; grid-template-columns: auto 1fr auto; }
.deep-prev { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #1c1c1e; }
.deep-prev svg { width: 18px; height: 18px; }
.deep-prev:disabled { opacity: 0.4; }
.deep-track-wrap { min-width: 0; height: 44px; padding: 0 18px; border-radius: 22px; display: flex; align-items: center; gap: 16px; }
.deep-now { flex: 0 0 auto; margin: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 14px; color: #1c1c1e; }
.deep-now b { font-weight: 650; }
.deep-now span { color: #8e8e93; font-size: 13px; }
.deep-track { position: relative; flex: 1; height: 44px; margin: 0; }
.deep-line { position: absolute; left: 0; right: 0; top: 21px; height: 2px; border-radius: 1px; background: rgb(0 0 0 / 8%); overflow: hidden; }
.deep-line i { display: block; height: 100%; background: #1c1c1e; transition: width 0.8s cubic-bezier(.2,.7,.2,1); }
.deep-dot, .deep-dot.battle, .deep-dot.active, .deep-dot.battle.active { position: absolute; top: 18px; width: 8px; height: 8px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%; background: #d1d1d6; box-shadow: none; transform: none; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.deep-dot::before { content: ''; position: absolute; inset: -12px; }
.deep-dot.past { background: #1c1c1e; }
.deep-dot.active { background: #1c1c1e; transform: scale(1.6); box-shadow: 0 0 0 3px #fff; }
.deep-dot.battle.past, .deep-dot.battle.active { background: var(--battle); }
.deep-dot:hover:not(.active) { transform: scale(1.3); }
.deep-next { height: 44px; padding: 0 20px; border-radius: 22px; background: #1c1c1e !important; color: #fff; font: 600 15px var(--font); box-shadow: 0 2px 12px rgb(0 0 0 / 18%) !important; }
.deep-next:hover { filter: none; background: #000 !important; }

@media (max-width: 1000px) { .deep-now span { display: none; } }
@media (max-width: 700px) {
  .deep-rail { gap: 6px; }
  .deep-prev { width: 40px; height: 40px; }
  .deep-track-wrap { height: 40px; padding: 0 12px; }
  .deep-now { display: none; }
  .deep-next { height: 40px; padding: 0 16px; }
}
.deep-dot.battle.active { transform: scale(1.6); box-shadow: 0 0 0 3px #fff; }

/* The picture's own controls: small, light, out of the picture's way. */
.deep-back { width: 32px; height: 32px; background: rgb(0 0 0 / 22%); backdrop-filter: blur(12px); }
.deep-back:hover { background: rgb(0 0 0 / 38%); }
.deep-back svg { width: 16px; height: 16px; }
.deep-badge { top: calc(16px + (32px - 26px) / 2); left: 60px; height: 26px; box-sizing: border-box; padding: 0 10px; gap: 6px; background: rgb(0 0 0 / 22%); backdrop-filter: blur(12px); font-size: 11px; font-weight: 600; }
.deep-badge b { padding: 0; background: none; font-weight: 500; opacity: 0.7; }
/* One tray for the picture's tools, symbols only, in the same glass as back. */
.deep-tools { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgb(0 0 0 / 22%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.deep-tools button { position: relative; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background 0.15s; }
.deep-tools button:hover { background: rgb(255 255 255 / 16%); }
.deep-tools button:active { background: rgb(255 255 255 / 26%); }
.deep-tools button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.deep-tools svg { width: 15px; height: 15px; }
.deep-tools [data-state="playing"] .on-paused, .deep-tools [data-state="paused"] .on-playing,
.deep-tools [data-state="muted"] .on-sound, .deep-tools [data-state="sound"] .on-muted { display: none; }
/* A finger gets a taller target than the eye sees. */
@media (pointer: coarse) { .deep-tools button::after { content: ''; position: absolute; inset: -8px 0; } }
/* The reader pressed play: the words over the picture and their shade step
   aside until the film stops. On a phone the words sit under the picture. */
.deep-picture::after { transition: opacity 0.45s ease; }
@media (min-width: 701px) {
  .deep-card.watching .deep-text { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
  .deep-card.watching .deep-picture::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .deep-picture::after, .deep-card.watching .deep-text { transition: none; } }
.deep-more-note small { display: block; margin-top: 6px; font-size: 12px; opacity: 0.8; }
@media (max-width: 700px) {
  .deep-badge { top: calc(10px + 3px); left: 50px; }
  .deep-tools { top: 10px; right: 10px; }
}

@media (max-width: 700px) {
  /* The battlefield on a phone: its own names are few, the rest step aside. */
  .deep-battle-label:is(.side, .road, .note) { display: none; }
}

/* ---------- the way on, inside the card ---------- */
/* Read more on the left as a quiet link; back and forward at the card's right
   edge. The opening has one clear start button instead, so nobody wonders
   how to begin, and it stands where the forward arrow will stand on every
   step after it. The text keeps its own measure (its lines are set in ch), so
   the block can span the card and the arrows reach its edge. */
.deep-card-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 3vh, 32px); }
.deep-card-steps { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.deep-more { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; color: rgb(255 255 255 / 82%); font: 600 15px var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 35%); text-underline-offset: 4px; }
.deep-more:hover { color: #fff; text-decoration-color: #fff; }
.deep-more i { position: relative; width: 12px; height: 12px; }
.deep-more i::before, .deep-more i::after { content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; }
.deep-more i::after { transform: rotate(90deg); }
.deep-arrow { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink-card); cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / 25%); transition: transform 0.2s; }
.deep-arrow svg { width: 22px; height: 22px; }
.deep-arrow:hover { transform: translateX(2px); }
.deep-arrow-back { width: 44px; height: 44px; background: rgb(255 255 255 / 14%); color: #fff; box-shadow: none; }
.deep-arrow-back:hover { background: rgb(255 255 255 / 24%); transform: translateX(-2px); }
.deep-arrow-close:hover { transform: scale(1.06); }
.deep-start { height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: #fff; color: var(--ink-card); font: 700 18px var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 22px rgb(0 0 0 / 30%); transition: transform 0.2s; }
.deep-start:hover { transform: scale(1.03); }
.deep-arrow:focus-visible, .deep-start:focus-visible, .deep-more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* On a large screen the card leads, so the rail on the map only shows where we are. */
@media (min-width: 701px) {
  .deep-rail { grid-template-columns: 1fr; }
  .deep-rail .deep-prev, .deep-rail .deep-next { display: none; }
}
/* On a phone the rail at the bottom is always in view and under the thumb, so
   it keeps the way on, start included; a start inside the card would sit below
   the fold of its scrolling text. */
@media (max-width: 700px) {
  .deep-card-steps { display: none; }
}
/* On a wide card the way on leaves the text: Read more and the arrows sit
   together in the picture's bottom-right corner, and the text drops to the
   foot of the picture, a row lower, with more of the picture above it. The
   text keeps clear of the corner. */
@media (min-width: 1180px) {
  .deep-text:not(.deep-read):has(> .deep-card-nav) {
    padding-bottom: calc(var(--deep-edge) + 6px);
    padding-right: calc(var(--deep-edge) + 17rem);
  }
  .deep-text:not(.deep-read) > .deep-card-nav {
    position: absolute;
    right: var(--deep-edge);
    bottom: var(--deep-edge);
    margin: 0;
    gap: 20px;
  }
  /* The opening's start is wider than the arrows, so there the lead and the
     way on share the foot side by side: the text lands where every step's
     text lands and the start stands where the arrows stand. Should a long
     label squeeze the lead on a narrower card, the way on drops to a row of
     its own instead. */
  .deep-text:not(.deep-read):has(.deep-start-foot) {
    padding-bottom: calc(var(--deep-edge) + 6px);
    padding-right: var(--deep-edge);
  }
  .deep-start-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 3vh, 32px) 24px; }
  .deep-start-foot > .deep-lead { flex: 1 1 32ch; }
  .deep-start-foot > .deep-card-nav { margin: 0 0 -6px auto; gap: 20px; }
}

/* ---------- how sure we are, and the longer reading ---------- */
.deep-grade { display: inline-flex; margin-left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.deep-grade.documented { background: #d7f0df; color: #1d5a33; }
.deep-grade.likely { background: #fbe9c7; color: #7a4e0c; }
.deep-grade.legend { background: #ecdff7; color: #5b2d82; }
.deep-more-grade { display: flex; align-items: baseline; gap: 10px; margin: -6px 0 22px !important; font-size: 15px !important; color: var(--muted); }
.deep-more-grade .deep-grade { margin-left: 0; }
.deep-more-body h3 { margin: 28px 0 10px; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.deep-more-quote { margin: 22px 0; padding: 18px 20px; border-left: 4px solid var(--own, #8a5a1e); border-radius: 0 14px 14px 0; background: var(--surf); }
.deep-more-quote blockquote { margin: 0; }
.deep-more-quote blockquote p { margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; font-weight: 550; }
.deep-more-quote .deep-more-original { font-size: 14px !important; font-weight: 400 !important; font-style: italic; color: var(--muted); }
.deep-more-quote figcaption { font-size: 13px; color: var(--muted); }
.deep-more-people, .deep-more-told, .deep-more-sources { margin: 10px 0 18px; padding: 0; list-style: none; }
.deep-more-people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line, rgb(0 0 0 / 8%)); font-size: 16px; line-height: 1.45; }
.deep-more-people li span:not(.deep-grade) { flex: 1 1 16rem; color: var(--muted); }
.deep-more-people .deep-grade { margin-left: auto; }
.deep-more-told li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, rgb(0 0 0 / 8%)); }
.deep-more-told time { font-weight: 700; font-variant-numeric: tabular-nums; }
.deep-more-told div { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.45; }
.deep-more-told span { color: var(--muted); }
.deep-more-sources li { padding: 6px 0; font-size: 15px; }
.deep-more-sources a { color: inherit; }
/* On a phone the card's text scrolls under the picture, so Read more sits on
   the picture, where it is always in view. */
@media (max-width: 700px) {
  .deep-card-nav:has(.deep-more) { margin-top: 0; }
  .deep-more { position: absolute; z-index: 3; top: calc(24dvh - 46px); right: 12px; padding: 7px 12px; border-radius: 999px; background: rgb(15 20 20 / 55%); backdrop-filter: blur(10px); color: #fff; text-decoration: none; font-size: 14px; }
}

/* ---------- Read more, inside the card ---------- */
/* The picture shrinks to a strip and the longer story scrolls under it, on the
   card's own dark ground, so the map beside it stays fully in view. */
.deep-card.reading .deep-picture { bottom: auto; height: 30%; }
.deep-card.reading .deep-picture::after { background: linear-gradient(180deg, rgb(8 12 12 / 20%), transparent 35%, transparent 55%, var(--ink-card)); }
.deep-read-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink-card); font: 400 26px/1 var(--font); cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
.deep-read-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Beyond a phone the cross stands where the arrows do, and the corner's goes. */
@media (min-width: 701px) { .deep-read-close { display: none; } }
.deep-card.reading .deep-text.deep-read { top: 30%; bottom: 0; max-width: none; max-height: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 25%) transparent; padding: 0 clamp(28px, 4vw, 56px); }
.deep-read .deep-more-body { max-width: 40rem; padding: 4px 0 0; }
.deep-read .deep-more-eyebrow { color: rgb(255 255 255 / 65%); }
.deep-read .deep-more-body h2 { color: #fff; }
.deep-read .deep-more-body h3 { color: #fff; }
.deep-read .deep-more-body p, .deep-read .deep-more-body li { color: rgb(255 255 255 / 86%); }
.deep-read .deep-more-grade { color: rgb(255 255 255 / 70%) !important; }
.deep-read .deep-more-quote { background: rgb(255 255 255 / 7%); }
.deep-read .deep-more-quote blockquote p { color: #fff; }
.deep-read .deep-more-quote .deep-more-original, .deep-read .deep-more-quote figcaption,
.deep-read .deep-more-people li span:not(.deep-grade), .deep-read .deep-more-told span { color: rgb(255 255 255 / 62%); }
.deep-read .deep-more-people li, .deep-read .deep-more-told li { border-color: rgb(255 255 255 / 12%); }
.deep-read .deep-more-note { background: rgb(255 255 255 / 6%); color: rgb(255 255 255 / 70%); }
.deep-read .deep-more-note b { color: #fff; }
.deep-read .deep-more-sources a { color: #fff; }
/* What each side of a question said, side by side, each under its own colour. */
.deep-more-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin: 18px 0 24px; }
.deep-more-sides section { padding: 14px 18px 8px; border-radius: 16px; border-top: 5px solid var(--side); background: rgb(255 255 255 / 7%); }
.deep-more-sides h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; color: #fff; }
.deep-more-sides h4::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--side); box-shadow: 0 0 0 2px rgb(255 255 255 / 70%); }
.deep-more-sides ul { margin: 0; padding-left: 1.1em; }
.deep-more-sides li { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
/* A question to take home: the reading turns into a conversation. */
.deep-more-ask { display: flex; flex-direction: column; gap: 4px; margin: 22px 0; padding: 16px 18px; border-radius: 16px; background: rgb(255 255 255 / 10%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); }
.deep-more-ask b { font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / 62%); }
.deep-read .deep-more-ask p { margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: #fff; }
/* The way on stays at the foot while the text scrolls. */
.deep-read .deep-card-nav { position: sticky; bottom: 0; margin-top: 8px; padding: 28px 0 clamp(20px, 4vh, 36px); background: linear-gradient(180deg, transparent, var(--ink-card) 40%); }
@media (max-width: 700px) {
  .deep-card.reading .deep-picture { height: 14dvh; }
  .deep-card.reading .deep-text.deep-read { position: static; margin-top: 14dvh; padding: 16px 20px 24px; overflow: visible; }
  .deep-read .deep-card-nav { display: none; }
  /* The card scrolls on a phone, so the close button stays put in its corner. */
  .deep-read-close { position: fixed; top: calc(var(--gap) + 10px); right: calc(var(--gap) + 10px); width: 36px; height: 36px; font-size: 22px; }
}

/* ---------- a drawn stage where the map would be (stage.js) ---------- */
.deep-map.deep-stage { background: #e9e4d8; }
.deep-stage-drawing { display: block; width: 100%; height: 100%; font-family: var(--font); }
.deep-stage-person { opacity: 0; transition: transform 1.5s cubic-bezier(.3,.7,.2,1), opacity .6s ease; }
.deep-stage-person.on { opacity: 1; }
.deep-stage-person circle { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%)); }
.deep-stage-person text { font-size: 14px; font-weight: 800; fill: #fff; pointer-events: none; }
.deep-stage-person .deep-stage-name { font-size: 10px; font-weight: 650; fill: #1c1c1e; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.deep-stage-person.robber circle { fill: var(--stage-robber); }
.deep-stage-person.hostage circle { fill: var(--stage-hostage); }
.deep-stage-person.hostage text:not(.deep-stage-name) { fill: #1c1c1e; }
.deep-stage-person.police circle { fill: var(--stage-police); }
.deep-stage-person.watch circle { fill: var(--stage-watch); }
.deep-stage-person.hands circle { fill: var(--stage-hands); }
.deep-stage-person.safe circle { fill: var(--stage-safe); }

.deep-stage-key { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; color: var(--text); }
.deep-stage-key::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--side); border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 12%); }
/* The clock: days and hours counting up, the stage's own distance. */
.deep-stage-clock { display: flex; align-items: baseline; gap: 6px; margin-left: auto; padding: 7px 16px; border-radius: 999px; font-variant-numeric: tabular-nums; color: #1c1c1e; }
.deep-stage-clock small { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; }
.deep-stage-clock b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.deep-stage-clock span { font-size: 12px; color: #8e8e93; }
.deep-stage-clock i { width: 1px; height: 16px; margin: 0 6px; align-self: center; background: rgb(0 0 0 / 12%); }
.deep-stage ~ .deep-corner .deep-pill { margin-left: 0; flex: none; }
/* The frame beside the wide picture is narrow. Where the stage's legend, its
   clock and the overview button cannot share one line, the clock drops its
   "of 131", as on a phone, and past that takes a line of its own. */
.deep-stage ~ .deep-corner { container-type: inline-size; flex-wrap: wrap; gap: 8px; }
.deep-stage-clock { white-space: nowrap; }
@container (max-width: 520px) {
  .deep-stage-clock span { display: none; }
  .deep-stage ~ .deep-corner .deep-legend { padding-inline: 10px; gap: 10px; }
  .deep-stage-clock { padding-inline: 10px; }
  .deep-stage-clock i { margin: 0 3px; }
}
/* A stage that counts something else: a symbol, the number, what it counts. */
.deep-stage-key[hidden], .deep-stage ~ .deep-corner .deep-legend[hidden] { display: none; }
.deep-stage-counter { align-items: center; gap: 8px; }
.deep-stage-counter svg { flex: none; width: 30px; height: 20px; border-radius: 3px; }
.deep-stage-counter small { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #6b6a64; }
/* A step on a stage without a picture: its moment, large, instead of an empty frame. */
.deep-picture.deep-moment { justify-content: flex-start; align-items: flex-start; gap: 6px; padding: 22vh clamp(28px, 4vw, 64px) 0; background: radial-gradient(circle at 70% 20%, rgb(154 58 44 / 30%), transparent 60%), #151b1b; text-align: left; }
.deep-picture.deep-moment p { max-width: none; font-size: 14px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / 55%); }
.deep-picture.deep-moment strong { font-size: clamp(48px, 6vw, 110px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgb(255 255 255 / 18%); }
/* Or its one fact, bright and large enough to retell at dinner. */
.deep-picture.deep-moment.deep-fact { gap: 14px; background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--own) 60%, transparent), transparent 62%), #0f1629; }
.deep-picture.deep-moment.deep-fact.no { background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--stage-no, var(--own)) 55%, transparent), transparent 62%), #1f160f; }
.deep-picture.deep-moment.deep-fact strong { font-size: clamp(64px, 8.5vw, 150px); color: #fff; }
.deep-picture.deep-moment.deep-fact em { max-width: 22ch; font-size: clamp(20px, 1.9vw, 30px); font-style: normal; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; color: rgb(255 255 255 / 80%); }
@media (max-width: 1100px) { .deep-stage ~ .deep-corner .deep-legend { display: flex; } }
@media (max-width: 700px) {
  .deep-stage ~ .deep-corner { flex-wrap: wrap; }
  .deep-stage ~ .deep-corner .deep-legend { padding: 5px 10px; gap: 10px; font-size: 11px; }
  .deep-stage-clock { padding: 5px 12px; }
  .deep-stage-clock b { font-size: 17px; }
  .deep-stage-clock span { display: none; }
  .deep-picture.deep-moment { padding-top: 7dvh; }
  .deep-picture.deep-moment strong { font-size: 40px; }
  /* The date is in the text below already; the fact keeps clear of Read more. */
  .deep-picture.deep-moment.deep-fact { gap: 6px; }
  .deep-picture.deep-moment.deep-fact p { display: none; }
  .deep-picture.deep-moment.deep-fact strong { font-size: 52px; }
  .deep-picture.deep-moment.deep-fact em { max-width: 58%; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .deep-stage-person { transition: none; } }


/* ---------- map mood atmosphere (optional step.mood) ---------- */
/* Soft tint over the live MapLibre dive. School-safe; no gore. Peak steps
   on Third Crusade set mood: smoke (Acre), dust (Arsuf), hold (Jerusalem),
   storm (Adriatic return), cold (Dürnstein). Cleared on other steps. */
.deep-map::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.7s ease, background 0.7s ease, box-shadow 0.7s ease;
}
.deep-map[data-mood="smoke"]::after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 48% 38%, rgb(196 98 42 / 32%), rgb(60 28 12 / 10%) 52%, transparent 78%),
    linear-gradient(180deg, rgb(40 18 8 / 8%), transparent 40%);
  animation: deep-mood-pulse 2.6s ease-in-out infinite;
}
.deep-map[data-mood="dust"]::after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 55% 55%, rgb(196 168 96 / 34%), rgb(120 90 40 / 12%) 50%, transparent 76%);
  animation: deep-mood-urgency 1.8s ease-in-out infinite;
}
.deep-map[data-mood="hold"]::after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 28%, rgb(24 28 40 / 22%) 72%, rgb(12 14 22 / 34%) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}
.deep-map[data-mood="storm"]::after {
  opacity: 1;
  background:
    linear-gradient(165deg, rgb(70 82 96 / 38%), rgb(40 48 58 / 22%) 45%, rgb(28 34 42 / 30%));
}
.deep-map[data-mood="cold"]::after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(140 168 196 / 18%), transparent 55%),
    linear-gradient(180deg, rgb(20 32 52 / 28%), rgb(12 18 28 / 16%) 60%, transparent);
}
@keyframes deep-mood-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes deep-mood-urgency {
  0%, 100% { opacity: 0.8; filter: saturate(1); }
  50% { opacity: 1; filter: saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .deep-map[data-mood]::after { animation: none; }
}


/* Live path choice (Silk Road fork): story buttons, not quiz scoring. */
.deep-card-nav-choice {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.deep-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 10px;
  flex: 1 1 100%;
}
.deep-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 16px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.deep-choice b { font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; letter-spacing: -0.01em; }
.deep-choice span { font-size: 13px; line-height: 1.35; color: rgb(255 255 255 / 78%); }
.deep-choice:hover { transform: translateY(-1px); background: rgb(255 255 255 / 20%); border-color: rgb(255 255 255 / 55%); }
.deep-choice.on { background: #fff; color: var(--ink-card); border-color: #fff; }
.deep-choice.on span { color: rgb(0 0 0 / 58%); }
.deep-choice:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .deep-choices { grid-template-columns: 1fr; }
  .deep-choice { padding: 12px 14px; }
}
/* The options are wider than the arrows, so on a wide card they stay under
   the text as a row of their own instead of moving into the picture's corner,
   and frosted glass keeps their words clear of a busy picture. */
.deep-choice { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (min-width: 701px) {
  .deep-choices { display: flex; flex-wrap: wrap; }
  .deep-choice { flex: 1 1 12rem; max-width: 20rem; }
}
@media (min-width: 1180px) {
  .deep-text:not(.deep-read):has(> .deep-card-nav-choice) { padding-right: var(--deep-edge); }
  .deep-text:not(.deep-read) > .deep-card-nav-choice { position: static; margin-top: clamp(20px, 3vh, 32px); }
}

/* ---------- the lens: what a step shows on the map (lens.js) ---------- */
.deep-lens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; font-family: var(--font); --tone: #1c1c1e; }
.deep-lens .own { --tone: var(--own); }
.deep-lens .other { --tone: var(--other); }
.deep-lens .water { --tone: #3f86c4; }
.deep-lens .quiet { --tone: #6b6a64; }
.lens-pill, .lens-icon { transition: opacity .4s ease; }
/* One label at a time: the one leaving is gone before the next comes, so two
   labels never stand on top of each other while they cross. */
.lens-pill { transition: opacity .15s ease; }
.lens-pill.on { transition: opacity .35s ease .15s; }
.lens-halo { fill: none; stroke: #fff; stroke-opacity: .8; stroke-linecap: round; stroke-linejoin: round; }
.lens-route.water .lens-line { stroke-opacity: .6; }
.lens-route.water .lens-halo { stroke-opacity: .5; }
.lens-line { fill: none; stroke: var(--tone); stroke-linecap: round; stroke-linejoin: round; }
.lens-line.dash { stroke-dasharray: 9 7; }
.lens-head { fill: var(--tone); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.lens-dot { fill: var(--tone); stroke: #fff; stroke-width: 2.5; }
.lens-lead { stroke: var(--tone); stroke-width: 1.6; stroke-opacity: .75; }
.lens-pill rect { fill: var(--tone); filter: drop-shadow(0 2px 5px rgb(0 0 0 / 22%)); }
.lens-pill text { font-size: 13.5px; font-weight: 700; fill: #fff; letter-spacing: -.005em; }
.lens-pill.quiet rect { fill: rgb(255 255 255 / 92%); }
.lens-pill.quiet text { fill: #55534c; font-style: italic; font-weight: 600; }
.lens-num { fill: #fff; }
.lens-pill .lens-num-text { font-size: 12.5px; font-weight: 800; fill: var(--tone); }
/* A film's outcome: a bigger pill that pops in when it appears. */
.lens-pill.stamp text { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.lens-pill.stamp rect { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 30%)); }
.lens-stamp-in { transform-box: fill-box; transform-origin: center; }
.lens-pill.stamp.on .lens-stamp-in { animation: lens-stamp .55s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes lens-stamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1) rotate(-3deg); } }
.lens-glyph { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #fff; }
.lens-icon circle { fill: var(--tone); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 25%)); }

.deep-lens-tally { gap: 4px; padding-inline: 12px; }
.deep-lens-tally[hidden] { display: none; }
.deep-corner:has(> .deep-lens-tally:not([hidden]), > .deep-balance:not([hidden])) { flex-wrap: wrap; gap: 8px; }
.deep-lens-tally .deep-lens-tally-item { display: inline-flex; align-items: center; gap: 5px; }
.deep-lens-tally-item svg { width: 18px; height: 18px; align-self: center; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--own); }
.deep-lens-tally-item b { font-size: 17px; }
.deep-lens-tally-item.other svg { color: var(--other); }
.deep-lens-tally-item.sun svg { color: #d08a1c; }
/* The light that is left needs its words: a bare number beside a sun says nothing. */
.deep-lens-tally-item:is(.sun, .say) small { display: inline; }
.deep-lens-tally i { width: 1px; height: 16px; margin: 0 6px; align-self: center; background: rgb(0 0 0 / 12%); }
@media (max-width: 1700px) { .deep-lens-tally small { display: none; } }
@media (max-width: 700px) {
  .lens-pill text { font-size: 12px; }
}
/* A band of people on the move, a raft under elephants, the night, and play. */
/* MapLibre sets opacity on its markers itself, so a film hides them outright. */
.lens-film :is(.deep-place, .deep-token) { display: none; }
.lens-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* A figure wears its side's colour. */
.lens-band { --team: var(--own); }
.lens-band.other { --team: var(--other); }
.lens-band.ink { --team: #7d6f5f; }
/* Snow falls, stones tumble, mist drifts. */
.lf-flake { transform-box: fill-box; animation: lf-snow 2.6s linear infinite; }
.lf-flake:nth-child(2n) { animation-delay: -.9s; } .lf-flake:nth-child(3n) { animation-delay: -1.7s; }
@keyframes lf-snow { 0% { transform: translate(0, -4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-4px, 24px); opacity: 0; } }
.lf-fall-rock { transform-box: fill-box; transform-origin: center; animation: lf-tumble 1.9s ease-in infinite; }
.lf-fall-rock:nth-of-type(2n) { animation-delay: -.8s; }
@keyframes lf-tumble { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-9px, 20px) rotate(170deg); opacity: 0; } }
.lf-mist { animation: lf-drift 7s ease-in-out infinite alternate; }
.lf-mist:nth-of-type(2) { animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes lf-drift { from { transform: translateX(-5px); } to { transform: translateX(6px); } }
/* A signal fire: flames flicker, smoke rises in puffs. */
.lf-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: lf-flicker .5s ease-in-out infinite alternate; }
.lf-flame-in { animation-duration: .37s; }
@keyframes lf-flicker { to { transform: scale(.9, 1.12) skewX(-3deg); } }
.lf-puff { transform-box: fill-box; transform-origin: center; opacity: 0; animation: lf-rise 2.8s ease-out infinite; }
.lf-puff:nth-child(2) { animation-delay: .7s; }
.lf-puff:nth-child(3) { animation-delay: 1.4s; }
.lf-puff:nth-child(4) { animation-delay: 2.1s; }
@keyframes lf-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(7px, -50px) scale(2.2); } }
@media (prefers-reduced-motion: reduce) {
  .lf-flame, .lf-puff, .lf-flake, .lf-fall-rock, .lf-mist { animation: none; }
  .lf-puff { opacity: .8; }
  .lf-puff:nth-child(2) { transform: translate(3px, -16px) scale(1.4); opacity: .6; }
  .lf-puff:nth-child(3) { transform: translate(6px, -32px) scale(1.9); opacity: .4; }
  .lf-puff:nth-child(4) { opacity: 0; }
}
.lens-band { transition: opacity .5s ease; }
/* Hidden in a stream bed or behind a hill: drawn faint until they come out. */
.lens-band.ghost > svg { opacity: .5; }
/* Where lines meet: dust swells, blades strike, sparks flash. */
.lf-dust { transform-box: fill-box; transform-origin: center; animation: lf-swell 1.1s ease-in-out infinite alternate; }
.lf-dust:nth-child(2) { animation-delay: -.4s; } .lf-dust:nth-child(3) { animation-delay: -.8s; }
@keyframes lf-swell { from { transform: scale(.82); opacity: .75; } to { transform: scale(1.08); opacity: .95; } }
.lf-clang { transform-box: fill-box; transform-origin: 50% 70%; animation: lf-clang .55s ease-in-out infinite alternate; }
@keyframes lf-clang { from { transform: scale(.9) rotate(-4deg); } to { transform: scale(1.04) rotate(3deg); } }
.lf-spark { animation: lf-spark .55s steps(2, jump-none) infinite; }
@keyframes lf-spark { from { opacity: 0; } to { opacity: 1; } }
/* Gold coins fall, turning as they go. */
.lf-coin { transform-box: fill-box; transform-origin: center; animation: lf-coin 1.9s linear infinite; }
.lf-coin:nth-child(2n) { animation-delay: -.7s; } .lf-coin:nth-child(3n) { animation-delay: -1.3s; }
@keyframes lf-coin { 0% { transform: translateY(-10px) scaleX(1); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateY(12px) scaleX(.35); } 90% { opacity: 1; } 100% { transform: translateY(34px) scaleX(1); opacity: 0; } }
/* The nine white tails of the banner sway in the wind. */
.lf-tail { transform-box: fill-box; transform-origin: 50% 0; animation: lf-sway 1.8s ease-in-out infinite alternate; }
.lf-tail:nth-of-type(2n) { animation-delay: -.6s; } .lf-tail:nth-of-type(3n) { animation-delay: -1.2s; }
@keyframes lf-sway { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
/* A trumpet's sound goes out in rings. */
.lf-sound { animation: lf-sound 1s ease-out infinite; }
.lf-sound:nth-child(2) { animation-delay: .3s; }
@keyframes lf-sound { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* Weather over the whole map, under the figures: snow falling, mist off a lake. */
.lens-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lens-weather { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.lens-weather.on { opacity: 1; }
.lens-weather.snow { background: rgb(222 230 239 / 36%); }
.lens-weather.snow::before, .lens-weather.snow::after { content: ''; position: absolute; inset: -280px -140px 0 0; will-change: transform; }
.lens-weather.snow::before {
  background:
    radial-gradient(circle at 12% 18%, #fff 0 2px, rgb(96 116 140 / 55%) 2.6px, transparent 3.2px),
    radial-gradient(circle at 58% 46%, #fff 0 1.8px, rgb(96 116 140 / 55%) 2.4px, transparent 3px),
    radial-gradient(circle at 84% 84%, #fff 0 2px, rgb(96 116 140 / 55%) 2.6px, transparent 3.2px),
    radial-gradient(circle at 34% 78%, #fff 0 1.6px, rgb(96 116 140 / 50%) 2.2px, transparent 2.8px),
    radial-gradient(circle at 76% 12%, #fff 0 1.7px, rgb(96 116 140 / 50%) 2.3px, transparent 2.9px),
    radial-gradient(circle at 30% 50%, #fff 0 1.5px, rgb(96 116 140 / 50%) 2.1px, transparent 2.7px);
  background-size: 140px 140px;
  animation: lens-snow-small 12s linear infinite;
}
.lens-weather.snow::after {
  background:
    radial-gradient(circle at 22% 30%, #fff 0 3px, rgb(96 116 140 / 55%) 3.7px, transparent 4.4px),
    radial-gradient(circle at 70% 62%, #fff 0 2.8px, rgb(96 116 140 / 55%) 3.5px, transparent 4.2px),
    radial-gradient(circle at 46% 88%, #fff 0 3.2px, rgb(96 116 140 / 50%) 3.9px, transparent 4.6px),
    radial-gradient(circle at 88% 20%, #fff 0 2.6px, rgb(96 116 140 / 50%) 3.3px, transparent 4px);
  background-size: 280px 280px;
  animation: lens-snow-big 9s linear infinite;
}
@keyframes lens-snow-small { from { transform: translate(0, 0); } to { transform: translate(-140px, 280px); } }
@keyframes lens-snow-big { from { transform: translate(0, 0); } to { transform: translate(0, 280px); } }
.lens-weather.mist {
  inset: 0 -14%;
  background:
    radial-gradient(42% 20% at 26% 64%, rgb(245 247 250 / 92%), transparent 72%),
    radial-gradient(38% 18% at 70% 70%, rgb(245 247 250 / 88%), transparent 72%),
    radial-gradient(60% 24% at 48% 50%, rgb(245 247 250 / 70%), transparent 74%),
    rgb(236 240 245 / 38%);
  animation: lens-mist 12s ease-in-out infinite alternate;
}
.lens-weather.mist.on { opacity: .95; }
/* Rain driving across the map in a storm. */
.lens-weather.rain { background: rgb(40 56 76 / 22%); }
.lens-weather.rain::before, .lens-weather.rain::after { content: ''; position: absolute; inset: -240px -240px 0 0; will-change: transform; }
.lens-weather.rain::before {
  background: repeating-linear-gradient(105deg, transparent 0 9px, rgb(220 232 245 / 55%) 9px 10.4px, transparent 10.4px 26px);
  background-size: 120px 120px;
  animation: lens-rain 0.55s linear infinite;
}
.lens-weather.rain::after {
  background: repeating-linear-gradient(100deg, transparent 0 16px, rgb(235 242 250 / 45%) 16px 17.6px, transparent 17.6px 44px);
  background-size: 200px 200px;
  animation: lens-rain-far 0.9s linear infinite;
}
@keyframes lens-rain { from { transform: translate(0, 0); } to { transform: translate(-32px, 120px); } }
@keyframes lens-rain-far { from { transform: translate(0, 0); } to { transform: translate(-36px, 200px); } }
@keyframes lens-mist { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
/* Dust blowing across the steppe: tan particles drifting in wind. */
.lens-weather.dust {
  inset: 0 -20%;
  background: rgb(205 188 160 / 22%);
}
.lens-weather.dust::before, .lens-weather.dust::after { content: ''; position: absolute; inset: -180px -200px 0 0; will-change: transform; }
.lens-weather.dust::before {
  background:
    radial-gradient(ellipse 20px 8px at 18% 24%, rgb(194 162 118 / 65%), transparent 60%),
    radial-gradient(ellipse 16px 6px at 52% 58%, rgb(194 162 118 / 58%), transparent 62%),
    radial-gradient(ellipse 22px 9px at 82% 78%, rgb(194 162 118 / 62%), transparent 58%),
    radial-gradient(ellipse 14px 5px at 38% 82%, rgb(205 178 140 / 55%), transparent 64%),
    radial-gradient(ellipse 18px 7px at 72% 16%, rgb(205 178 140 / 60%), transparent 60%),
    radial-gradient(ellipse 12px 5px at 28% 48%, rgb(205 178 140 / 52%), transparent 66%);
  background-size: 160px 120px;
  animation: lens-dust-drift 8s linear infinite;
}
.lens-weather.dust::after {
  background:
    radial-gradient(ellipse 28px 11px at 26% 36%, rgb(180 150 108 / 48%), transparent 58%),
    radial-gradient(ellipse 24px 10px at 68% 64%, rgb(180 150 108 / 45%), transparent 60%),
    radial-gradient(ellipse 32px 13px at 44% 86%, rgb(194 162 118 / 50%), transparent 56%),
    radial-gradient(ellipse 20px 8px at 84% 22%, rgb(194 162 118 / 46%), transparent 62%);
  background-size: 240px 180px;
  animation: lens-dust-slow 11s linear infinite;
}
@keyframes lens-dust-drift { from { transform: translate(0, 0); } to { transform: translate(320px, 60px); } }
@keyframes lens-dust-slow { from { transform: translate(0, 0); } to { transform: translate(240px, 40px); } }
.lens-weather.dust.on { opacity: .88; }
/* Ash and pumice falling: grey grains and pale stones, heavier and slower
   than snow, over a dimmed sky. */
.lens-weather.ash { background: rgb(70 66 62 / 30%); }
.lens-weather.ash::before, .lens-weather.ash::after { content: ''; position: absolute; inset: -260px -120px 0 0; will-change: transform; }
.lens-weather.ash::before {
  background:
    radial-gradient(circle at 14% 22%, #8a847c 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 56% 48%, #6f6a63 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 82% 80%, #8a847c 0 1.9px, transparent 2.5px),
    radial-gradient(circle at 36% 74%, #6f6a63 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 72% 14%, #9a948b 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 28% 46%, #6f6a63 0 1.4px, transparent 2px);
  background-size: 120px 120px;
  animation: lens-ash-small 7s linear infinite;
}
.lens-weather.ash::after {
  background:
    radial-gradient(circle at 24% 32%, #d8d2c6 0 3px, #8f887e 3.6px, transparent 4.2px),
    radial-gradient(circle at 68% 64%, #cfc8bb 0 2.6px, #8f887e 3.2px, transparent 3.8px),
    radial-gradient(circle at 48% 88%, #d8d2c6 0 3.2px, #8f887e 3.8px, transparent 4.4px);
  background-size: 260px 260px;
  animation: lens-ash-big 5s linear infinite;
}
@keyframes lens-ash-small { from { transform: translate(0, 0); } to { transform: translate(-60px, 240px); } }
@keyframes lens-ash-big { from { transform: translate(0, 0); } to { transform: translate(-20px, 260px); } }
/* An eruption column that billows, and a hot cloud that rolls along the ground. */
.lf-billow { transform-box: fill-box; transform-origin: 50% 100%; animation: lf-billow 2.4s ease-in-out infinite alternate; }
.lf-billow:nth-child(2n) { animation-delay: -.8s; } .lf-billow:nth-child(3n) { animation-delay: -1.6s; }
@keyframes lf-billow { from { transform: scale(.94, .96); } to { transform: scale(1.05, 1.03); } }
.lf-roll { transform-box: fill-box; transform-origin: center; animation: lf-roll 1.1s linear infinite; }
.lf-roll:nth-child(2n) { animation-direction: reverse; animation-duration: 1.5s; }
@keyframes lf-roll { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lf-billow, .lf-roll, .lens-weather.ash::before, .lens-weather.ash::after { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .lf-dust, .lf-clang, .lf-spark, .lf-sound, .lf-tail, .lf-coin, .lens-weather, .lens-weather::before, .lens-weather::after { animation: none; }
  .lf-sound, .lf-spark { opacity: 1; }
}
.lens-night { fill: #0d1b2e; fill-opacity: .34; opacity: 0; transition: opacity .9s ease; }
.deep-lens-play { position: absolute; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 20px 6px 8px; border: 0; border-radius: 999px; background: var(--ink-card); color: #fff; font: 700 15px var(--font); cursor: pointer; box-shadow: 0 6px 22px rgb(0 0 0 / 28%); }
.deep-lens-play[hidden] { display: none; }
.deep-lens-play svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: var(--own); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.deep-lens-play[data-kind="play"] { animation: lens-invite 2.4s ease-in-out infinite; }
@keyframes lens-invite { 50% { box-shadow: 0 6px 22px rgb(0 0 0 / 28%), 0 0 0 9px rgb(255 255 255 / 45%); } }
.deep-lens-play:focus-visible { outline: 2px solid var(--own); outline-offset: 3px; }
/* On a phone the button waits in the free corner above the rail, clear of the figures. */
@media (max-width: 700px) { .deep-lens-play { left: auto; right: 10px; bottom: 62px; transform: none; min-height: 40px; padding-right: 14px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .lens-pill, .lens-pill.on, .lens-icon, .lens-band, .lens-night, .lens-weather { transition: none; } .deep-lens-play, .lens-pill.stamp.on .lens-stamp-in { animation: none; } }

/* ---------- a story told to make the pupil click on ---------- */
/* The light over the map turns through a day: a soft wash, multiplied into
   the land so the fields darken rather than fog over. */
.lens-wash { fill: #0d1b2e; opacity: 0; mix-blend-mode: multiply; transition: opacity 1.8s ease, fill 1.8s ease; }
.lens-wash[data-sky="night"] { fill: #1d2c4c; opacity: .62; }
.lens-wash[data-sky="dawn"] { fill: #6d7fa6; opacity: .42; }
.lens-wash[data-sky="day"] { opacity: 0; }
.lens-wash[data-sky="dusk"] { fill: #c9764a; opacity: .42; }
.lens-wash[data-sky="dark"] { fill: #2a2346; opacity: .6; }
/* Frozen water: pale, with a white edge, so the river reads as ice. */
.deep-lens .ice { --tone: #b9d7ec; }
.lens-route.ice .lens-halo { stroke: #f4f9fd; stroke-opacity: .95; }
.lens-route.ice .lens-line { stroke-dasharray: 2 10 14 6; stroke-opacity: .95; }

/* Figures on the move step or gallop: the body bobs, the legs swing, each
   figure a little out of time with the next. Standing, they stand still. */
.lf-fig { transform-box: fill-box; transform-origin: 50% 100%; }
.lens-band.moving .lf-fig { animation: lf-step .34s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -.13s); }
/* Ships and boats a deep dive names in lens.glide move straight, like ships, not with a step. */
.lens-band.glide.moving .lf-fig { animation: none; }
@keyframes lf-step { from { transform: translateY(0); } to { transform: translateY(-2.6px) rotate(-1.2deg); } }
.lf-leg, .lf-leg2 { transform-box: fill-box; transform-origin: 50% 0; }
.lens-band.moving .lf-leg { animation: lf-swing .34s ease-in-out infinite alternate; }
.lens-band.moving .lf-leg2 { animation: lf-swing .34s ease-in-out infinite alternate-reverse; }
@keyframes lf-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
/* A volley or a cannon's shot: a flash at the muzzle, then smoke. */
.lf-flash { opacity: 0; animation: lf-flash 1.9s steps(1, end) infinite; animation-delay: calc(var(--k, 0) * -.6s); }
@keyframes lf-flash { 0% { opacity: 1; } 9% { opacity: 0; } }
/* Cracks running out over the ice under the weight of an army. */
.lf-crack { stroke-dasharray: 60; stroke-dashoffset: 60; animation: lf-crack 2.4s ease-out forwards; }
.lf-crack:nth-of-type(2) { animation-delay: .5s; } .lf-crack:nth-of-type(3) { animation-delay: 1s; }
@keyframes lf-crack { to { stroke-dashoffset: 0; } }
/* A ship rocking on the swell. */
.lf-rock { transform-box: fill-box; transform-origin: 50% 90%; animation: lf-rock 2.6s ease-in-out infinite alternate; }
@keyframes lf-rock { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg) translateY(-.6px); } }
/* A banner in the wind. */
.lf-flag { transform-box: fill-box; transform-origin: 0 50%; animation: lf-flap 1.1s ease-in-out infinite alternate; }
@keyframes lf-flap { from { transform: skewY(-5deg) scaleX(.94); } to { transform: skewY(4deg) scaleX(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .lens-band.moving .lf-fig, .lens-band.moving .lf-leg, .lens-band.moving .lf-leg2, .lf-flash, .lf-flag, .lf-rock { animation: none; }
  .lf-crack { animation: none; stroke-dashoffset: 0; }
  .lens-wash { transition: none; }
}

/* Who has the upper hand: a rope between the two colours, its knot where the
   story stands. It springs past and settles, so a turn of the day is felt. */
.deep-balance { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 650 13px var(--font); color: #1c1c1e; white-space: nowrap; --lead: .5; }
.deep-balance[hidden] { display: none; }
.deep-balance small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; }
.deep-balance-side { color: #8e8e93; transition: color .6s ease; }
.deep-balance[data-lead="own"] .deep-balance-side.own { color: var(--own); }
.deep-balance[data-lead="other"] .deep-balance-side.other { color: var(--other); }
.deep-balance-bar { position: relative; width: 112px; height: 8px; border-radius: 4px; background: var(--other); overflow: visible; }
.deep-balance-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px 0 0 4px; }
.deep-balance-bar i.own { width: calc(var(--lead) * 100%); background: var(--own); transition: width 1.3s cubic-bezier(.34, 1.56, .64, 1); }
.deep-balance-bar i.other { display: none; }
.deep-balance-bar b { position: absolute; top: 50%; left: calc(var(--lead) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 35%), inset 0 0 0 3px #1c1c1e; transition: left 1.3s cubic-bezier(.34, 1.56, .64, 1); }
.deep-balance.instant :is(i, b) { transition: none; }
@media (max-width: 700px) {
  .deep-balance { gap: 6px; padding: 5px 10px; font-size: 12px; }
  .deep-balance small { display: none; }
  .deep-balance-bar { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .deep-balance :is(i, b) { transition: none; } }

/* The way on asks what happens next: the forward arrow carries the question. */
.deep-hook { width: auto; padding: 0 12px 0 22px; gap: 10px; display: inline-flex; align-items: center; border-radius: 999px; font: 700 16px var(--font); white-space: nowrap; }
.deep-hook svg { flex: none; }
.deep-hook:hover { transform: translateX(3px); }
/* On a phone the question rides on the rail's next button, beside the
   day's line: it wraps to two lines rather than push the line away. */
@media (max-width: 700px) {
  .deep-next.hooked { height: auto; min-height: 40px; max-width: 62vw; padding: 6px 14px; white-space: normal; line-height: 1.2; font-size: 14px; text-wrap: balance; }
}
/* When the map has played its moment, the way on calls once, softly. */
.deep-go.ready { animation: deep-call 1.5s ease-in-out 2; }
@keyframes deep-call { 0%, 100% { box-shadow: 0 4px 16px rgb(0 0 0 / 25%), 0 0 0 0 rgb(255 255 255 / 55%); } 50% { box-shadow: 0 4px 16px rgb(0 0 0 / 25%), 0 0 0 12px rgb(255 255 255 / 0%); } }
@media (prefers-reduced-motion: reduce) { .deep-go.ready { animation: none; } }
/* On a wide card the question needs room: the way on takes a row of its own
   under the text instead of the picture's corner. */
@media (min-width: 1180px) {
  .deep-text:not(.deep-read):has(.deep-hook) { padding-right: var(--deep-edge); }
  .deep-text:not(.deep-read):has(.deep-hook) > .deep-card-nav { position: static; margin-top: clamp(18px, 2.6vh, 28px); }
}

/* The day on the rail: night before sunrise and after sunset, so the pupil
   sees how little light is left. */
.deep-track[data-mode="day"] .deep-line { height: 4px; top: 20px; border-radius: 2px; background: linear-gradient(90deg, #26324d 0 var(--rise), rgb(0 0 0 / 8%) var(--rise) var(--set), #26324d var(--set) 100%); }
.deep-sun { position: absolute; top: 2px; width: 16px; height: 16px; margin-left: -8px; color: #d08a1c; pointer-events: none; }
.deep-sun svg { width: 100%; height: 100%; display: block; }

/* ---------- film mode ---------- */
/* For the pupil who watches more than reads (reader.js, `&film`): the map
   fills the screen to its edges, each step opens on its picture, whole, and
   the card's words and the rail become one light plate at the foot: the
   picture small and edge to edge at its left, the words and the way on
   beside it, and the timeline along its bottom, so the eye stays on the map.
   Read more still opens the card as usual. */
.deep-reader.film { --gap: 0px; --round: 0px; --map-left: var(--gap); --film-pic: clamp(140px, 13vw, 200px); --film-gap: clamp(16px, 1.6vw, 24px); --film-glass: rgb(255 255 255 / 60%); --film-frost: blur(28px) saturate(1.8); }
/* Everything that floats on the map is the same frosted glass, as on Apple's
   maps: the map shows through, softly, so the plate feels part of it. */
.deep-reader.film .deep-legend { background: var(--film-glass) !important; backdrop-filter: var(--film-frost); -webkit-backdrop-filter: var(--film-frost); }
/* On the opening card, Play the film stands above the way to read: white
   and first, with the start under it as quieter glass. The corner's own
   way in steps aside while the card offers it. */
.deep-start-pair { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
@media (min-width: 701px) { .deep-start-pair > .deep-card-steps { display: flex; } }
.deep-start-pair .deep-start { flex: 1; height: 48px; background: rgb(255 255 255 / 14%); color: #fff; font-size: 16px; box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.deep-start-pair .deep-start:hover { background: rgb(255 255 255 / 22%); transform: none; }
.deep-watch { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 28px 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--ink-card); font: 700 18px var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 22px rgb(0 0 0 / 30%); transition: transform 0.2s; }
.deep-watch:hover { transform: scale(1.03); }
.deep-watch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.deep-watch svg { width: 36px; height: 36px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--own); color: #fff; }
.deep-reader:has(.deep-watch) .deep-film-toggle { display: none; }
/* A phone has no room under the text: play stands on the picture, at the
   left of Read more, as on a video. */
@media (max-width: 700px) {
  .deep-watch { position: absolute; z-index: 3; top: calc(24dvh - 49px); left: 12px; height: 40px; padding: 0 16px 0 5px; gap: 8px; font-size: 15px; }
  .deep-watch svg { width: 30px; height: 30px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { .deep-watch { transition: none; } }
/* The way in is dark, so the pupil sees it; the way out is the back arrow. */
.deep-film-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--ink-card) !important; color: #fff; }
.deep-film-toggle svg { width: 14px; height: 14px; flex: none; }
.deep-reader.film .deep-film-toggle { display: none; }
.deep-reader.film .maplibregl-ctrl-bottom-right { display: none; }
.deep-reader.film .deep-lens-play { top: 8px; right: 12px; min-height: 40px; padding: 3px 16px 3px 3px; bottom: auto; left: auto; transform: none; background: var(--film-glass); backdrop-filter: var(--film-frost); -webkit-backdrop-filter: var(--film-frost); color: #1c1c1e; box-shadow: 0 2px 12px rgb(0 0 0 / 12%); }
/* The back arrow is film mode's only way out, so it wears the same glass as the legend. */
.deep-reader.film .deep-back { z-index: 8; top: 12px; left: 12px; background: var(--film-glass); backdrop-filter: var(--film-frost); -webkit-backdrop-filter: var(--film-frost); color: #1c1c1e; box-shadow: 0 1px 6px rgb(0 0 0 / 12%); }
.deep-reader.film .deep-back:hover { background: rgb(255 255 255 / 92%); }
/* The legend steps right of the back button, which now stands on the map. */
.deep-reader.film .deep-corner { left: 56px; }
/* A stage in film mode ends above the strip of words, so nothing of the
   drawing stands behind it; its paper colour runs on under the strip. */
.deep-reader.film .deep-map.deep-stage { bottom: var(--deep-strip, 0px); box-shadow: 0 0 0 100vmax #e9e4d8; }

/* The plate is the card; the rail stands on its foot, inside it, below a hairline. */
.deep-reader.film .deep-card:not(.reading) {
  top: auto; left: 12px; right: 12px; bottom: 12px;
  width: auto; height: auto; box-sizing: border-box;
  display: grid; grid-template-columns: var(--film-pic) minmax(0, 1fr); align-items: stretch; gap: 0 var(--film-gap);
  padding: 0 0 44px; border-radius: 20px; overflow: hidden; color: #1c1c1e;
  background: var(--film-glass); backdrop-filter: var(--film-frost); -webkit-backdrop-filter: var(--film-frost); box-shadow: 0 6px 24px rgb(0 0 0 / 12%), inset 0 0 0 0.5px rgb(255 255 255 / 60%);
}
.deep-reader.film .deep-rail { bottom: 12px; }
.deep-reader.film:has(> #deep-card:not(.reading)) .deep-rail { border-top: 1px solid rgb(0 0 0 / 8%); }
.deep-reader.film:has(> #deep-card:not(.reading)) .deep-track-wrap { background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.deep-reader.film .deep-card:not(.reading) .deep-picture { position: relative; inset: auto; grid-area: 1 / 1; min-height: 100px; border-radius: 0; }
/* On a computer the picture runs down to the plate's foot, and the timeline starts beside it, where the words start. */
@media (min-width: 701px) {
  .deep-reader.film .deep-card:not(.reading) .deep-picture { margin-bottom: -44px; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-rail { left: calc(12px + var(--film-pic)); }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-track-wrap { padding-left: var(--film-gap); }
}
.deep-reader.film .deep-card:not(.reading) .deep-picture::after,
.deep-reader.film .deep-card:not(.reading) .deep-badge { display: none; }
.deep-reader.film .deep-card:not(.reading) .deep-tools { top: 6px; right: 6px; }
.deep-reader.film .deep-card:not(.reading) .deep-text {
  position: relative; inset: auto; grid-area: 1 / 2; max-height: 34vh; overflow-y: auto; padding: 14px 16px 12px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 2vw, 32px);
}
.deep-reader.film .deep-card:not(.reading) .deep-text > *,
.deep-reader.film .deep-card:not(.reading) .deep-start-foot > * { grid-column: 1; }
.deep-reader.film .deep-card:not(.reading) .deep-start-foot { display: contents; }
.deep-reader.film .deep-card:not(.reading) .deep-card-nav { grid-column: 2; grid-row: 1 / span 9; position: static; margin: 0; gap: 16px; }
.deep-reader.film .deep-card:not(.reading) :is(h1, h2) { margin: 0 0 6px; max-width: none; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.08; letter-spacing: -0.03em; }
.deep-reader.film .deep-card:not(.reading) .deep-eyebrow { margin: 0 0 4px; font-size: 11px; }
/* One line above the title says where and when; the travel line and the
   timeline's own place and date would only say it again. The timeline's
   words stay for a screen reader, which hears each step's place. */
.deep-reader.film .deep-card:not(.reading) .deep-travel { display: none; }
.deep-reader.film .deep-now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) { max-width: 76ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; text-shadow: none; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-totals, .deep-note) { display: none; }
.deep-reader.film .deep-card:not(.reading) .deep-links { margin-top: 10px; }
/* Dark words and a dark way on, on the light strip. */
.deep-reader.film .deep-card:not(.reading) .deep-eyebrow { color: #6e6e73; text-shadow: none; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) { color: #2c2c2e; }
.deep-reader.film .deep-card:not(.reading) .deep-more { color: #3a3a3c; text-decoration-color: rgb(0 0 0 / 25%); }
.deep-reader.film .deep-card:not(.reading) .deep-more:hover { color: #000; text-decoration-color: #000; }
/* The way on is quiet: a grey pill of the plate's own kind, not a black one,
   so the eye stays on the map until the film is done and the pill calls. */
.deep-reader.film .deep-card:not(.reading) :is(.deep-arrow, .deep-start) { width: auto; min-width: 40px; height: 40px; background: rgb(0 0 0 / 7%); color: #1c1c1e; box-shadow: none; font: 600 15px var(--font); }
.deep-reader.film .deep-card:not(.reading) .deep-start { padding: 0 18px; }
.deep-reader.film .deep-card:not(.reading) .deep-hook { gap: 8px; padding: 0 12px 0 16px; }
.deep-reader.film .deep-card:not(.reading) .deep-arrow svg { width: 17px; height: 17px; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-arrow, .deep-start):hover { background: rgb(0 0 0 / 12%); }
.deep-reader.film:has(> #deep-card:not(.reading)) .deep-next { background: rgb(0 0 0 / 7%) !important; color: #1c1c1e; box-shadow: none !important; }
.deep-reader.film .deep-card:not(.reading) .deep-links a { background: rgb(0 0 0 / 6%); color: #1c1c1e; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-arrow, .deep-start, .deep-more):focus-visible { outline-color: #1c1c1e; }
/* When the film is done, the way on turns dark and calls once: now it may
   take the eye from the map. */
.deep-reader.film .deep-card:not(.reading) .deep-go,
.deep-reader.film:has(> #deep-card:not(.reading)) .deep-next { transition: transform 0.2s, background-color 0.5s ease, color 0.5s ease; }
.deep-reader.film .deep-card:not(.reading) .deep-go.ready,
.deep-reader.film:has(> #deep-card:not(.reading)) .deep-next.ready { background: #1c1c1e !important; color: #fff; animation: deep-call-dark 1.5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .deep-reader.film .deep-card:not(.reading) .deep-go.ready, .deep-reader.film:has(> #deep-card:not(.reading)) .deep-next.ready { animation: none; } }
/* A choice on the light strip: two options of the plate's own kind, dark
   words on grey, which turn dark when the film is done, as the way on does. */
.deep-reader.film .deep-card:not(.reading) .deep-choice { background: rgb(0 0 0 / 6%); border-color: rgb(0 0 0 / 8%); color: #1c1c1e; box-shadow: none; transition: transform 0.2s, background-color 0.5s ease, color 0.5s ease; }
.deep-reader.film .deep-card:not(.reading) .deep-choice span { color: #6e6e73; transition: color 0.5s ease; }
.deep-reader.film .deep-card:not(.reading) .deep-choice:hover { background: rgb(0 0 0 / 11%); border-color: rgb(0 0 0 / 14%); }
.deep-reader.film .deep-card:not(.reading) .deep-choice:is(.ready, .on) { background: #1c1c1e; border-color: #1c1c1e; color: #fff; }
.deep-reader.film .deep-card:not(.reading) .deep-choice:is(.ready, .on) span { color: rgb(255 255 255 / 72%); }
.deep-reader.film .deep-card:not(.reading) .deep-choice.ready:hover { background: #000; }
.deep-reader.film .deep-card:not(.reading) .deep-choice:focus-visible { outline-color: #1c1c1e; }
/* On a phone the two options stand side by side, so neither hides under the other. */
@media (max-width: 700px) {
  .deep-reader.film .deep-card:not(.reading) .deep-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .deep-reader.film .deep-card:not(.reading) .deep-choice { padding: 10px 12px; border-radius: 14px; }
  .deep-reader.film .deep-card:not(.reading) .deep-choice b { font-size: 15px; }
  .deep-reader.film .deep-card:not(.reading) .deep-choice span { font-size: 12px; }
}
/* Read more ends the text, small, on its last line. */
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) > .deep-more { position: static; display: inline-flex; gap: 6px; margin: 0 0 0 6px; padding: 0; background: none; font-size: 0.9em; vertical-align: baseline; white-space: nowrap; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) > .deep-more i { width: 10px; height: 10px; }
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) > .deep-more i::before,
.deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) > .deep-more i::after { width: 10px; }
@keyframes deep-call-dark { 0%, 100% { box-shadow: 0 0 0 0 rgb(28 28 30 / 22%); } 50% { box-shadow: 0 0 0 9px rgb(28 28 30 / 0%); } }
/* Read more in film mode opens the card down the left side, over the map;
   the legend and the timeline move over beside it. */
.deep-reader.film .deep-card.reading { width: min(620px, 46vw); }
@media (min-width: 701px) {
  .deep-reader.film:has(> #deep-card.reading) :is(.deep-corner, .deep-rail) { left: calc(min(620px, 46vw) + 12px); }
}

/* The cut: a step's picture over the whole frame, slowly closing in, with
   where and when and the step's title; a line along the foot runs out the
   seconds before the map. The opening holds it as a cover, with play. */
.deep-cut { position: fixed; z-index: 7; inset: var(--gap); overflow: hidden; border-radius: var(--round); background: var(--ink-card); color: #fff; cursor: pointer; animation: deep-cut-in 0.45s ease both; }
.deep-cut[hidden] { display: none; }
.deep-cut.leaving { opacity: 0; transition: opacity 0.45s ease; }
.deep-cut > img { display: block; width: 100%; height: 100%; object-fit: cover; animation: deep-cut-push 7s cubic-bezier(.2,.6,.3,1) both; }
.deep-cut::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(8 12 12 / 18%), transparent 22%, transparent 48%, rgb(8 12 12 / 72%)); }
.deep-cut-words { position: absolute; z-index: 1; left: clamp(28px, 4.5vw, 72px); right: clamp(28px, 4.5vw, 72px); bottom: clamp(36px, 8vh, 80px); }
.deep-cut-words > p { margin: 0 0 12px; font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 82%); }
.deep-cut-words :is(h1, h2) { margin: 0; max-width: 15ch; font-size: clamp(48px, 6vw, 104px); line-height: 0.96; letter-spacing: -0.05em; text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / 35%); }
.deep-cut-words > .deep-cut-lead { margin: 18px 0 0; max-width: 46ch; font-size: clamp(18px, 1.5vw, 23px); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / 92%); }
.deep-cut-play { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 28px 0 13px; border: 0; border-radius: 999px; background: #fff; color: var(--ink-card); font: 700 19px var(--font); cursor: pointer; box-shadow: 0 6px 22px rgb(0 0 0 / 30%); animation: lens-invite 2.4s ease-in-out infinite; }
.deep-cut-play svg { width: 36px; height: 36px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--own); color: #fff; }
.deep-cut-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.deep-cut-time { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(255 255 255 / 85%); transform-origin: left; animation: deep-cut-time linear both; }
/* The opening: a Scener film in the cut's frame, black like a cinema, with
   one quiet way past it where film mode keeps its play button. */
.deep-cut.opening { background: #000; }
.deep-cut.opening::after { display: none; }
.deep-opening { position: absolute; inset: 0; }
.deep-skip { position: absolute; z-index: 2; top: 8px; right: 12px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: rgb(46 46 50 / 46%); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgb(255 255 255 / 14%); color: #fff; font: 600 15px var(--font); cursor: pointer; }
.deep-skip:hover { background: rgb(46 46 50 / 62%); }
.deep-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The credit reads beside the back arrow, the way out of film mode. */
.deep-opening .sc-top { padding: 22px 140px 0 max(var(--pad), 64px); }
.deep-opening .sc-credit { margin: 0 auto 0 0; line-height: 1.35; }
@keyframes deep-cut-in { from { opacity: 0; } }
@keyframes deep-cut-push { from { transform: scale(1.08); } }
@keyframes deep-cut-time { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .deep-cut, .deep-cut > img, .deep-cut-play { animation: none; } .deep-cut.leaving { transition: none; } }

/* On a phone the map fills the screen too; the strip is shorter and scrolls,
   and the rail keeps the way on. */
@media (max-width: 700px) {
  .deep-reader.film .deep-map { top: var(--gap); }
  .deep-reader.film .deep-corner { top: calc(var(--gap) + 8px); left: calc(var(--gap) + 52px); }
  .deep-reader.film .deep-card:not(.reading) { left: 8px; right: 8px; bottom: 8px; max-height: 46dvh; grid-template-columns: 92px minmax(0, 1fr); gap: 0 12px; padding: 0 0 72px; border-radius: 16px; }
  .deep-reader.film .deep-rail { bottom: 8px; }
  /* The question on the way on takes most of a phone's width, so the dots
     get a row of their own, the plate's whole width, above back and the question. */
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-rail { grid-template-columns: auto 1fr; grid-template-areas: "track track" "prev next"; row-gap: 0; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-track-wrap { grid-area: track; height: 24px; padding: 0 16px; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-track { height: 24px; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-line { top: 11px; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-dot { top: 8px; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-prev { grid-area: prev; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-next { grid-area: next; justify-self: end; }
  .deep-reader.film:has(> #deep-card:not(.reading)) .deep-prev { background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .deep-reader.film .deep-card:not(.reading) .deep-picture { height: auto; min-height: 0; }
  .deep-reader.film .deep-card:not(.reading) .deep-text { max-height: calc(46dvh - 72px); overflow-y: auto; display: block; margin: 0; padding: 10px 12px 8px 0; }
  .deep-reader.film .deep-card:not(.reading) :is(h1, h2) { font-size: 19px; }
  .deep-reader.film .deep-card:not(.reading) :is(.deep-copy, .deep-lead) { font-size: 14px; }
  .deep-reader.film .deep-card:not(.reading) .deep-tools { display: none; }
  .deep-reader.film .deep-card:not(.reading) .deep-more { position: static; margin-top: 6px; padding: 0; background: none; backdrop-filter: none; font-size: 13px; text-decoration: underline; }
  .deep-reader.film .deep-card.reading { width: auto; }
  .deep-reader.film .deep-lens-play { top: 8px; right: 12px; }
  .deep-cut-words :is(h1, h2) { font-size: clamp(34px, 10vw, 48px); }
  .deep-cut-words > .deep-cut-lead { font-size: 16px; }
  /* "Close the picture" leaves the credit no room in the cut's top row, so
     it takes a line of its own just below, at the right, as Scener's does. */
  .deep-opening .sc-top { padding: 50px 14px 0; }
  .deep-opening .sc-credit { flex-basis: 100%; margin: 0; text-align: right; }
}