/* Pitch deck: the launcher in the page and the viewer over it (Matt, 2026-10-18).
   Behavior follows Matt's lightbox brief; every color, font, radius and timing comes from
   theme.css tokens (alpha variants of Cream and Deep Coastal Blue for the scrim and buttons,
   as theme.css itself does). Loaded only on the pages that show the deck, after theme.css. */

/* ---------------------------------------------------------------- launcher */

.slide-deck { max-width: var(--measure-default, 52rem); margin-top: 1.5rem; } /* the paragraphs' reading measure, so its right edge lines up with the text above (2026-10-19) */
.slide-deck:not(:last-child) { margin-bottom: 2rem; } /* inside an article the next block gets the air the deck has above it, not a 16px squeeze */
.slide-deck__spoiler { max-width: none; margin: 0 0 1.5rem; } /* the editorial-note panel, as wide as the cover below it; the gap groups the hint with the cover */
.section--band .slide-deck__spoiler { background: var(--t-cream); } /* sand on a sand band would vanish; theme.css does the same for .book-thumb */
.slide-deck__hint { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--t-seaglass-text); } /* a caption for the cover, so it sits close to it */
.slide-deck:not(.is-enhanced) .slide-deck__hint { display: none; } /* names the cover, which only opens the deck with the script */

.slide-deck__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slide-deck__item { margin: 0; }
.slide-deck__item--cover { flex: 1 1 100%; }

/* Without the script, every slide is a plain link to its full image (the cover is slide 1). */
.slide-deck__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.5rem;
  border: 1px solid var(--t-seaglass-dark); border-radius: var(--t-radius);
  color: var(--t-blue); text-decoration: none; font-variant-numeric: tabular-nums;
}
.slide-deck__link:hover { background: var(--t-seaglass-tint); }
/* With it, the links stay in the page as the viewer's data, and only the cover shows. */
.slide-deck.is-enhanced .slide-deck__item:not(.slide-deck__item--cover) { display: none; }

.slide-deck__cover {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--t-radius); background: var(--t-blue); box-shadow: var(--shadow-low);
  color: var(--t-cream); text-decoration: none;
}
.slide-deck .slide-deck__img { display: block; width: 100%; height: auto; border-radius: 0; }
.slide-deck__cue {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 2.75rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(14, 32, 36, 0.78), rgba(14, 32, 36, 0));
  color: var(--t-cream); font-weight: 600; letter-spacing: 0.01em;
}
.slide-deck__cue::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-style: solid; border-width: 0.4rem 0 0.4rem 0.65rem;
  border-color: transparent transparent transparent currentColor;
}

/* Phones: the cue would cover the slide's own small type, so it becomes a bar under the cover. */
@media (max-width: 40rem) {
  .slide-deck__cue { position: static; padding: 0.75rem 1rem; background: var(--t-blue); }
}

@media (prefers-reduced-motion: no-preference) {
  .slide-deck .slide-deck__img { transition: transform var(--t-reveal-duration) var(--t-motion-ease-out); }
  .slide-deck__cue { transition: padding-bottom var(--t-hover-duration) var(--t-motion-ease-out); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .slide-deck__cover:hover .slide-deck__img { transform: scale(1.03); }
  .slide-deck__cover:hover .slide-deck__cue { padding-bottom: 1.25rem; }
  @media (max-width: 40rem) { .slide-deck__cover:hover .slide-deck__cue { padding-bottom: 0.75rem; } }
}
@media (prefers-reduced-motion: no-preference) {
  .slide-deck__cover:focus-visible .slide-deck__img { transform: scale(1.03); }
}

/* ------------------------------------------------------------------ viewer */

body.deck-viewer-open { overflow: hidden; }
body.deck-viewer-open .ahm-consent { visibility: hidden; } /* the cookie banner, inert while the deck is open, showed faintly through the viewer; it returns when the deck closes (2026-10-20 verification) */

.deck-viewer {
  position: fixed; inset: 0; z-index: 1100; /* above the sticky header (80), its menus (60) and the cookie banner (1000): the banner, made inert while the deck is open, painted over the filmstrip and hid the focused thumbnail, and clicks on it fell through to a thumbnail (2026-10-20 verification) */
  display: flex; flex-direction: column;
  background: rgba(14, 32, 36, 0.95);
  color: var(--t-cream);
  opacity: 0; pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .deck-viewer { background: rgba(14, 32, 36, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.deck-viewer.is-open { opacity: 1; pointer-events: auto; }
.deck-viewer:focus { outline: none; } /* tabindex -1: a click on the slide keeps focus in the dialog; it is never a tab stop */
@media (prefers-reduced-motion: no-preference) {
  .deck-viewer { transition: opacity 200ms var(--t-motion-ease-out); }
}

.deck-viewer__backdrop { position: absolute; inset: 0; cursor: zoom-out; }

.deck-viewer__stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 4.25rem 1rem 0.75rem; /* the top clears the fixed close button */
  pointer-events: none;
}
.deck-viewer__figure, .deck-viewer__picture { display: contents; }
.deck-viewer__figure { pointer-events: auto; }
.deck-viewer__img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--t-radius);
  box-shadow: 0 1rem 3rem rgba(14, 32, 36, 0.5);
}
.deck-viewer__caption { display: none; } /* the slides carry no captions */

.deck-viewer__bar {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0.75rem 1rem 0.25rem;
  pointer-events: none;
}
.deck-viewer__bar > * { pointer-events: auto; }
.deck-viewer__bar-inner { flex: 0 1 12rem; min-width: 0; text-align: center; } /* shrinks before the arrows reach the screen edge */
.deck-viewer__title { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.125rem; line-height: 1.3; }
.deck-viewer__counter { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--t-seaglass-tint); font-variant-numeric: tabular-nums; }
/* A slide's own link (the dream-cast IMDb pages, on the photo panel at Matt's request, 2026-10-19): the script pins it
   to its spot on the slide and sets --slide-w to the slide's drawn width, so it scales with the slide like the slide's
   own type, never below 11px. A light outline on the dark panel; a longer label wraps inside the panel. */
.deck-viewer__slide-link {
  position: absolute; z-index: 1; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: max-content; min-height: 24px; /* 2.5.8 at the smallest size */
  padding: 0.55em 1.2em;
  border: 1px solid rgba(251, 248, 243, 0.55); border-radius: 0.45em;
  background: rgba(251, 248, 243, 0.06);
  color: var(--t-cream); text-decoration: none; text-align: center;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.6875rem, calc(var(--slide-w, 1000px) * 0.0135), 1.0625rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.01em;
  pointer-events: auto; /* the stage passes clicks through to the backdrop */
}
.deck-viewer__slide-link[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .deck-viewer__slide-link { transition: background-color var(--t-hover-duration) ease, border-color var(--t-hover-duration) ease; }
}
@media (hover: hover) {
  .deck-viewer__slide-link:hover { background: rgba(251, 248, 243, 0.16); border-color: var(--t-cream); }
}
.deck-viewer .deck-viewer__slide-link:focus-visible { outline: 2px solid var(--t-cream); outline-offset: 3px; }

.deck-viewer__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(251, 248, 243, 0.4); border-radius: 50%;
  background: rgba(251, 248, 243, 0.08); color: var(--t-cream);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .deck-viewer__btn { transition: background-color var(--t-hover-duration) ease, border-color var(--t-hover-duration) ease; }
}
@media (hover: hover) {
  .deck-viewer__btn:hover { background: rgba(251, 248, 243, 0.18); border-color: var(--t-cream); }
}
.deck-viewer__close { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1; }

/* Filmstrip: every slide, the current one ringed in Terracotta; one tab stop (roving), arrows move. */
.deck-viewer__strip { position: relative; flex: 0 0 auto; padding: 0.5rem 0 max(0.75rem, env(safe-area-inset-bottom)); pointer-events: none; }
.deck-viewer__thumbs {
  list-style: none; margin: 0 auto; padding: 0.375rem 1rem;
  display: flex; gap: 0.5rem; width: fit-content; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(251, 248, 243, 0.4) transparent;
  pointer-events: auto;
  /* Fades where the strip is cut off rather than ending hard at the screen edge (2026-10-19); 2rem from 48rem. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.deck-viewer__thumbs li { flex: 0 0 auto; margin: 0; }
.deck-viewer__thumb {
  display: block; padding: 0; border: 0; background: none; line-height: 0;
  border-radius: calc(var(--t-radius) - 3px); cursor: pointer; opacity: 0.55;
}
.deck-viewer__thumb img { display: block; width: 4.5rem; height: auto; border-radius: inherit; }
.deck-viewer__thumb[aria-current="true"] { opacity: 1; }
.deck-viewer__thumb[aria-current="true"] img { box-shadow: 0 0 0 2px var(--t-terracotta); }
@media (prefers-reduced-motion: no-preference) {
  .deck-viewer__thumb { transition: opacity var(--t-hover-duration) ease; }
}
@media (hover: hover) {
  .deck-viewer__thumb:hover { opacity: 0.9; }
}

/* Light focus ring with strong contrast on the scrim (the site's ring is Sea Glass on cream). */
.deck-viewer .deck-viewer__btn:focus-visible,
.deck-viewer .deck-viewer__thumb:focus-visible { outline: 2px solid var(--t-cream); outline-offset: 3px; }
.deck-viewer .deck-viewer__thumb:focus-visible { opacity: 1; }

@media (min-width: 48rem) {
  .deck-viewer__stage { padding: 4.75rem 2rem 1rem; }
  .deck-viewer__close { top: 1.25rem; right: 1.25rem; }
  .deck-viewer__thumb img { width: 6rem; }
  /* Layout pass (2026-10-19): the title fits on one line between the arrows; the filmstrip is inset from the screen
     edges, fades where it is cut off instead of ending hard against them, and sits clear of the bottom edge. */
  .deck-viewer__bar-inner { flex-basis: 18rem; }
  .deck-viewer__strip { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .deck-viewer__thumbs {
    padding: 0.375rem 2rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  }
}
/* Portrait screens (2026-10-19): a 16:9 slide is bound by the width, so it floated mid-screen with its arrows and title
   ~200px below it on a phone. The slide and its controls now sit together in the middle; the filmstrip stays at the foot. */
@media (orientation: portrait) {
  .deck-viewer__stage { flex: 0 1 auto; margin-top: auto; padding-top: 1rem; } /* centred, the slide is far below the close button, so the clearance padding would only push the group low */
  .deck-viewer__bar { margin-bottom: auto; }
}
/* Small phones: a smaller title, so the arrows keep their margin. */
@media (max-width: 24rem) {
  .deck-viewer__bar { gap: 0.5rem; }
  .deck-viewer__title { font-size: 1rem; }
}
/* Short screens (phones held sideways): the slide takes the full height. The arrows move to the
   side gutters (the close button already sits in the right one) and the counter to the bottom.
   Landscape only (2026-10-20 verification): with a 32px browser text size, 30rem is 960px, so a
   portrait phone matched too and drew the slide about 100px wide. */
@media (max-height: 30rem) and (orientation: landscape) {
  .deck-viewer__stage { padding: 0.75rem 4.5rem 2.25rem; }
  .deck-viewer__bar { position: absolute; inset: 0; padding: 0 0.75rem; justify-content: space-between; }
  .deck-viewer__bar-inner { position: absolute; left: 50%; bottom: 0.5rem; transform: translateX(-50%); display: flex; align-items: baseline; gap: 0.75rem; white-space: nowrap; }
  .deck-viewer__counter { margin: 0; }
  .deck-viewer__title { display: none; }
  .deck-viewer__strip { display: none; }
}