/* ============================================================
   After the Fire: A Landscape in Transition
   G06 - Kings Gate, Black River Ranch

   Palette is sampled from the project photography: sand road,
   charred wood, bleached snag, jack pine, September sky, bracken.
   No web fonts and no external requests -- the page must render
   identically on a classroom machine with no network.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink:        #1b1815;   /* charred wood */
  --char:       #2a2622;   /* dark section ground */
  --char-soft:  #3b3630;
  --paper:      #faf7f1;   /* bleached, sun-washed */
  --tint:       #f1eade;   /* sand */
  --sand:       #d8c6a4;
  --ash:        #6a645c;   /* body text on paper, 7:1 */
  --ash-light:  #a9a29a;   /* muted text on dark */
  --pine:       #2f4a34;   /* surviving canopy */
  --pine-mid:   #4c6b51;
  /* Bracken is the only accent. This value is dark enough to clear WCAG AA
     as text on BOTH --paper (5.5:1) and --tint (4.9:1); the brighter original
     failed on the tinted sections at 4.45:1. */
  --bracken:    #a04d16;
  --sky:        #5b83a8;

  /* Focus rings need 3:1 against whatever they sit on, so the colour flips
     by context rather than using one value everywhere. */
  --focus:      #a04d16;   /* on light ground: 5.5:1 */

  --rule:       rgba(27, 24, 21, 0.14);
  --rule-dark:  rgba(250, 247, 241, 0.16);

  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --t-hero:  clamp(3rem, 11vw, 8.5rem);
  --t-h2:    clamp(1.9rem, 4.2vw, 3.1rem);
  --t-h3:    clamp(1.2rem, 2.2vw, 1.55rem);
  --t-lede:  clamp(1.12rem, 1.9vw, 1.42rem);
  --t-body:  clamp(1.02rem, 1.25vw, 1.12rem);
  --t-small: 0.875rem;

  --space:      clamp(1rem, 3vw, 2rem);
  --space-sect: clamp(4.5rem, 11vh, 9rem);
  --measure:    34rem;   /* ~68 characters */
  --wrap:       76rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* ---------- Focus and skip link ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On dark ground the dark accent would only reach 2.6:1, so switch to a warm
   light tone (7.5:1 on --char, 9.3:1 inside the panorama). */
.section--dark,
.section--closing,
.section--sources,
.page-footer,
.pano,
.hero { --focus: #f5b877; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  text-decoration: none;
  border-radius: 3px;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Reading progress ----------
   Wayfinding only: it tells a visitor standing at the panorama that the page
   continues. Kept to 2px in bracken so it reads as a mark on the page rather
   than as an interface. The track is transparent, so nothing shows above the
   hero photograph until the visitor has actually begun to scroll. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: 2px;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: var(--bracken);
  transform-origin: 0 50%;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space);
}
.wrap--narrow { max-width: calc(var(--measure) + var(--space) * 2); }

.section { padding-block: var(--space-sect); }

.section--dark {
  background: var(--char);
  color: var(--paper);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); }
.section--dark a { color: var(--sand); }

.section--tint { background: var(--tint); }

/* Section numerals: quiet wayfinding, not decoration for its own sake */
.section__num {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-style: italic;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--bracken);
  margin-bottom: 0.9rem;
}
.section--dark .section__num { color: var(--sand); }

.section h2 {
  font-size: var(--t-h2);
  margin-bottom: 1.4rem;
  max-width: 26ch;
}

.section h3 {
  font-size: var(--t-h3);
  margin: 2.8rem 0 1rem;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.52;
  color: var(--ink);
}
.section--dark .lede { color: var(--paper); }

.section p { color: var(--ash); }
.section .lede { color: inherit; }
.section--dark p { color: var(--ash-light); }

/* ============================================================
   1 - Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Layered scrim. The vertical pass seats the text block; the horizontal pass
   darkens only the side the text occupies, so the snags on the right stay
   legible instead of the whole frame going flat. Both are needed -- the
   September sky behind the eyebrow is bright enough to swallow cream text. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 10, 9, 0.94) 0%,
      rgba(12, 10, 9, 0.74) 28%,
      rgba(12, 10, 9, 0.40) 56%,
      rgba(12, 10, 9, 0.24) 78%,
      rgba(12, 10, 9, 0.44) 100%),
    linear-gradient(to right,
      rgba(12, 10, 9, 0.58) 0%,
      rgba(12, 10, 9, 0.22) 52%,
      rgba(12, 10, 9, 0) 78%);
}

.hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--space) clamp(3rem, 9vh, 6rem);
}

.hero__eyebrow {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ecdcbe;
  margin-bottom: 1.1rem;
  text-shadow: 0 1px 10px rgba(12, 10, 9, 0.85);
}

.hero__title,
.hero__subtitle { text-shadow: 0 2px 26px rgba(12, 10, 9, 0.5); }

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 0.1em;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  font-style: italic;
  color: var(--sand);
  margin-bottom: 1.2rem;
}

/* The theme is the page's thesis, so after the title it is the largest,
   most deliberate text on the opening screen. */
.hero__theme-label {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ecdcbe;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 10px rgba(12, 10, 9, 0.85);
}

.hero__theme {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
  color: var(--paper);
  border-left: 3px solid var(--bracken);
  padding-left: 1.1rem;
  text-shadow: 0 2px 20px rgba(12, 10, 9, 0.7);
}

.hero__theme-by {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: #ecdcbe;
}

/* Sits over the image, bottom right, deliberately quiet. */
.hero__credit {
  position: absolute;
  right: var(--space);
  bottom: 0.9rem;
  z-index: 1;
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.72);
  text-shadow: 0 1px 8px rgba(12, 10, 9, 0.9);
}

.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.2rem;
  padding: 0.75rem 0;
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid rgba(250, 247, 241, 0.4);
  transition: border-color 0.2s var(--ease);
}
.hero__cue::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  animation: nudge 2.6s var(--ease) infinite;
}
.hero__cue:hover { border-color: var(--paper); }

@keyframes nudge {
  0%, 60%, 100% { transform: rotate(45deg) translateY(-0.1em); }
  30%           { transform: rotate(45deg) translateY(0.22em); }
}

/* ============================================================
   Shared text components
   ============================================================ */
.aside {
  margin-top: 2.4rem;
  padding: 1.2rem 1.4rem;
  background: var(--tint);
  border-left: 2px solid var(--sand);
  font-size: 0.97rem;
}
/* The ranch background, opening Section One: visitors wanted it before the
   rest of the story, not after. */
.aside--lead {
  margin: 0 0 2rem;
  padding: 1.3rem 1.5rem;
  border-left-width: 3px;
  border-left-color: var(--bracken);
  font-size: var(--t-body);
  line-height: 1.6;
}
/* Grey-on-sand at a reduced size read as faint beside the dark ledes around
   it; this box is essential context, so it gets full-strength ink. */
.section .aside--lead { color: var(--ink); }

.section--dark .aside,
.section--tint .aside {
  background: rgba(27, 24, 21, 0.05);
}

.caveat {
  margin-top: 1.8rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ash-light);
  font-size: 0.95rem;
  font-style: italic;
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.32;
  color: var(--ink) !important;
  margin: 2.8rem 0;
  text-wrap: balance;
}

.prompt-list,
.change-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.prompt-list li,
.change-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  color: var(--ash-light);
}
.prompt-list li::before,
.change-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.45rem; height: 1px;
  background: var(--bracken);
}
.change-list li { color: var(--ash); }

.prompt-list li {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin-bottom: 0.5rem;
}

/* ---------- Figures ---------- */
.figure {
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  max-width: var(--wrap);
  padding-inline: var(--space);
}
.figure img { width: 100%; height: auto; border-radius: 2px; }

.figure--wide { max-width: 100%; }
.figure--wide img { max-height: 78vh; object-fit: cover; }

.figure--bleed { padding-inline: 0; margin-top: 0; max-width: 100%; }
.figure--bleed img { max-height: 82vh; object-fit: cover; }

/* The DNR map is a 507px original with fine print on it. It is never scaled
   past its native width, or the labels turn to mush; below that it shrinks
   with the column like any other image. Caption stays under the map, not
   under the full text column. */
.figure--map {
  max-width: calc(507px + var(--space) * 2);
  text-align: center;
}
.figure--map img {
  max-width: 507px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.figure figcaption {
  margin-top: 0.9rem;
  max-width: 54ch;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ash);
}
.figure figcaption strong {
  color: var(--ink);
  font-weight: 600;
}
.section--dark .figure figcaption { color: var(--ash-light); }
.section--dark .figure figcaption strong { color: var(--paper); }
.figure--wide figcaption,
.figure--bleed figcaption {
  margin-inline: auto;
  padding-inline: var(--space);
  max-width: calc(var(--measure) + var(--space) * 2);
}
/* Must sit after `.figure figcaption`: same specificity (0,1,1), so source
   order decides which max-width wins. */
.figure--map figcaption {
  max-width: 507px;
  margin-inline: auto;
  text-align: left;
}

.grid-two {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
@media (min-width: 52rem) {
  .grid-two { grid-template-columns: 1fr 1fr; }
}
.grid-two .figure { margin-top: 0; padding-inline: 0; max-width: none; }
/* A caption and the paragraph after it are different kinds of text. Give the
   prose room so it does not read as a continuation of the caption. */
.grid-two + .wrap { margin-top: clamp(2.75rem, 7vh, 4.5rem); }

/* ---------- Then-and-now pair ----------
   Both frames are 4:3 -- the 2026 photograph was cropped to the shape of the
   2022 press photograph -- so equal columns land them on the same height with
   no per-image ratio maths. Capping the pair at 68rem keeps the 720px press
   photograph from being scaled past its own pixels; at that cap each column
   is about 31rem. The press photograph is never reframed: it is not ours to
   recompose, and the crop was applied to the frame the author took. */
.compare { max-width: 68rem; }

.compare__pair {
  display: grid;
  gap: clamp(0.85rem, 2.5vw, 1.5rem);
  align-items: start;
}
.compare__item { min-width: 0; margin: 0; }

@media (min-width: 44rem) {
  .compare__pair { grid-template-columns: 1fr 1fr; }
}

/* Photo credit inside a caption. Its own line so the credit never reads as
   part of the observation above it. */
.credit {
  display: block;
  margin-top: 0.5rem;
  font-style: italic;
  opacity: 0.85;
}

/* ---------- Fact list ---------- */
.facts {
  display: grid;
  gap: 0;
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--rule);
}
.facts__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .facts__item {
    grid-template-columns: 15rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}
.facts dt {
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
}

/* ---------- Timescales ---------- */
.timescale {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ts;
}
.timescale li {
  display: grid;
  gap: 0.1rem;
  padding: 1rem 0 1rem 0;
  border-top: 1px solid var(--rule);
}
.timescale li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) {
  .timescale li {
    grid-template-columns: 11rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}
.timescale__when {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--bracken);
}
.timescale__what { color: var(--ash); }

/* ---------- Arc: where this landscape sits in the sequence ----------
   A rail with a node per stage: vertical on narrow screens, horizontal
   from 60rem up. Stages already passed carry a filled node, the current
   stage is marked in bracken, and stages still ahead are left hollow --
   the shape of the list says "unfinished" before the text does.
   `.arc__here ~ li` picks out the future stages, so nothing has to be
   hard-coded to a position in the list. */
.arc {
  --arc-node: 0.72rem;
  --arc-rail: var(--sand);

  display: grid;
  margin: 2.8rem 0 3rem;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  line-height: 1.4;
}

.arc li {
  position: relative;
  padding: 0 0 1.5rem 1.85rem;
  color: var(--ash);
}
.arc li:last-child { padding-bottom: 0; }

/* Rail segment, drawn from this node towards the next one. */
.arc li::before {
  content: "";
  position: absolute;
  left: calc(var(--arc-node) / 2);
  top: calc(0.45rem + var(--arc-node));
  bottom: -0.45rem;
  width: 1px;
  margin-left: -0.5px;
  background: var(--arc-rail);
}
.arc li:last-child::before { display: none; }

/* Node. */
.arc li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: var(--arc-node);
  height: var(--arc-node);
  border-radius: 50%;
  background: var(--arc-rail);
  border: 1px solid var(--arc-rail);
}

/* The state rules are written `.arc li.arc__here` rather than `.arc__here`
   so they outrank `.arc li::after`, which would otherwise win on element
   count and repaint every node the same colour. */
.arc li.arc__here {
  color: var(--ink);
  font-weight: 600;
}
.arc li.arc__here::after {
  background: var(--bracken);
  border-color: var(--bracken);
  box-shadow: 0 0 0 4px rgba(160, 77, 22, 0.16);
}
.arc__here span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bracken);
}

/* Still ahead: a hollow node and a fainter rail. The label itself keeps full
   contrast -- dimming the text would push it under 4.5:1 on this tint. */
.arc li.arc__here ~ li::after { background: var(--tint); }
.arc li.arc__here::before,
.arc li.arc__here ~ li::before { background: rgba(216, 198, 164, 0.6); }

/* Six stages will not sit side by side in a 34rem text column, so the rail
   only turns horizontal once there is room for it to step outside that column
   -- 60rem viewport leaves a full gutter either side of the 54rem rail. */
@media (min-width: 60rem) {
  .arc {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    text-align: center;
    width: 54rem;
    margin-inline: -10rem;
  }
  .arc li {
    padding: calc(var(--arc-node) + 0.95rem) 0.5rem 0;
    text-wrap: balance;
  }
  .arc li:last-child { padding-bottom: 0; }

  /* The columns are flush, so a full-width segment per item reads as one
     continuous rail; the two end segments are cut back to their node. */
  .arc li::before,
  .arc li:last-child::before {
    display: block;
    left: 0;
    right: 0;
    top: calc(var(--arc-node) / 2);
    bottom: auto;
    width: auto;
    height: 1px;
    margin-left: 0;
  }
  .arc li:first-child::before { left: 50%; }
  .arc li:last-child::before { right: 50%; }

  .arc li::after {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

/* ---------- Quote ---------- */
.quote {
  margin: 2.4rem 0;
  padding: 1.6rem 0 0 1.5rem;
  border-left: 2px solid var(--bracken);
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink) !important;
  margin-bottom: 1rem;
}
.quote footer { font-size: var(--t-small); color: var(--ash); }
.quote cite { font-style: normal; }

/* ---------- Closing ---------- */
.section--closing {
  background: var(--char);
  color: var(--paper);
  padding-top: 0;
}
.section--closing .figure figcaption { color: var(--ash-light); }
.section--closing .figure figcaption strong { color: var(--paper); }

.provocation {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper) !important;
  margin: clamp(3.5rem, 9vh, 6rem) 0 1.6rem;
  text-wrap: balance;
}
.provocation__after {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--sand) !important;
}

/* ---------- Sources ---------- */
.section--sources {
  background: var(--ink);
  color: var(--ash-light);
  font-size: 0.95rem;
}
.section--sources h2 {
  font-size: var(--t-h3);
  color: var(--paper);
  margin-bottom: 0.5rem;
}
.section--sources h3 {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--sand);
  margin: 2.6rem 0 0.9rem;
}
.sources { margin: 0; padding: 0; list-style: none; }
.sources li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule-dark);
  line-height: 1.55;
}
.section--sources a { color: var(--paper); text-decoration-color: var(--sand); }
.section--sources a:hover { color: var(--sand); }
.sources__note { color: var(--ash-light); }
.nowrap { white-space: nowrap; }
.section--sources strong { color: var(--paper); }

.colophon {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-small);
  color: var(--ash-light);
}

/* ---------- Footer ---------- */
.page-footer {
  background: var(--ink);
  color: var(--ash-light);
  padding-block: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule-dark);
  font-size: 0.95rem;
}
.page-footer__contact {
  color: var(--paper);
  margin-bottom: 0.7rem;
}
.page-footer__legal {
  font-size: var(--t-small);
  line-height: 1.6;
}
.page-footer a { color: var(--paper); text-decoration-color: var(--sand); }
.page-footer a:hover { color: var(--sand); }

/* Keep the address on one line so it cannot be split mid-domain */
.email, .email__link { white-space: nowrap; }

/* ============================================================
   Panorama
   ============================================================ */
.pano {
  position: relative;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  background: #14120f;
}

.pano__viewer {
  position: relative;
  width: 100%;
  height: clamp(24rem, 72svh, 46rem);
  overflow: hidden;
  cursor: grab;
}
.pano__viewer:active { cursor: grabbing; }

/* pan-y, not none: a vertical swipe scrolls the page instead of being
   swallowed by the viewer. The viewer fills most of a phone screen, so
   "none" left thumbs panning the sky while the page refused to move, and
   visitors read that as the end of the page. Horizontal drag still turns
   the view and pinch still zooms, because neither gesture is listed here
   and so both are still delivered to the viewer.

   !important, and the descendant selector, are both load-bearing. Hammer.js
   -- bundled inside Marzipano -- writes touch-action as an INLINE style on
   its own generated elements, which an ordinary rule cannot outrank. It
   does not call preventDefault on any browser that supports the property
   (its preventDefaults() early-returns), so this value is the whole
   mechanism: change it and the gesture goes back to the page. */
.pano__viewer,
.pano__viewer * { touch-action: pan-y !important; }

.pano__viewer--failed { height: auto; cursor: auto; }
.pano__viewer--failed,
.pano__viewer--failed * { touch-action: auto !important; }

/* Full screen has nothing below it to scroll to, so the viewer takes the
   whole gesture back and vertical drag pans the view again. */
.pano:fullscreen .pano__viewer { height: 100vh; }
.pano:fullscreen .pano__viewer,
.pano:fullscreen .pano__viewer *,
.pano--expanded .pano__viewer,
.pano--expanded .pano__viewer * { touch-action: none !important; }

/* CSS stand-in for full screen, used where the Fullscreen API is missing
   (iPhone Safari). dvh, not vh: on iOS 100vh runs under the toolbar. */
.pano--expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  overscroll-behavior: none;
}
.pano--expanded .pano__viewer { height: 100vh; height: 100dvh; }
html.pano-locked,
html.pano-locked body { overflow: hidden; }

/* Touch-only suggestion laid over the top of the viewer. */
.pano__fs-cue {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  white-space: nowrap;
  color: var(--paper);
  background: rgba(20, 18, 15, 0.72);
  border: 1px solid rgba(216, 198, 164, 0.55);
  border-radius: 999px;
  cursor: pointer;
  animation: pano-cue-in 0.5s var(--ease) both;
}
.pano__fs-cue[hidden] { display: none; }
.pano__fs-cue span { font-size: 1.1em; color: var(--sand); }
@keyframes pano-cue-in { from { opacity: 0; } to { opacity: 1; } }

.pano__fallback { padding: 0 0 1.5rem; }
.pano__fallback img { width: 100%; height: auto; }
.pano__fallback p {
  max-width: var(--measure);
  margin: 1.2rem auto 0;
  padding-inline: var(--space);
  font-size: var(--t-small);
  color: var(--ash-light);
}
.pano__fallback a { color: var(--sand); }

.pano__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem var(--space);
  background: #14120f;
}
.pano:fullscreen .pano__controls,
.pano--expanded .pano__controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 18, 15, 0.8);
}

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.95rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--paper);
  background: rgba(250, 247, 241, 0.09);
  border: 1px solid rgba(250, 247, 241, 0.22);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.16s var(--ease);
}
.btn:hover { background: rgba(250, 247, 241, 0.18); }
.btn--primary {
  color: #14120f;
  font-weight: 600;
  background: var(--sand);
  border-color: var(--sand);
}
.btn--primary:hover { background: #e8dabf; }

.pano__hint {
  padding: 0 var(--space) 0.55rem;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ash-light) !important;
  background: #14120f;
}

/* Always visible, unlike the hint, which waits for the viewer to load. */
.pano__credit {
  padding: 0 var(--space) 1.4rem;
  margin: 0;
  font-size: var(--t-small);
  color: var(--ash-light) !important;
  background: #14120f;
}
.pano__credit span { font-style: italic; }
.pano:fullscreen .pano__credit,
.pano:fullscreen .pano__hint,
.pano--expanded .pano__credit,
.pano--expanded .pano__hint { display: none; }

.pano__picker {
  padding: 0.6rem var(--space);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: #ffd79a;
  background: #2b1a08;
}

/* ---------- Compass letters on the horizon ---------- */
.compass {
  display: block;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 241, 0.82);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.compass--north {
  font-size: 1.15rem;
  color: var(--sand);
}

/* ---------- Hotspots in the viewer ---------- */
.hs { position: relative; }

.hs__pin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.85rem 0 0.5rem;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(20, 18, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hs__pin:hover,
.hs__pin:focus-visible { background: rgba(168, 84, 26, 0.9); border-color: #fff; }

.hs__dot {
  flex: none;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--bracken);
  box-shadow: 0 0 0 3px rgba(168, 84, 26, 0.35);
}
.hs__pin:hover .hs__dot,
.hs__pin:focus-visible .hs__dot { background: #fff; box-shadow: none; }

.hs__label { white-space: nowrap; }

.hs__panel {
  position: absolute;
  left: 50%;
  top: calc(50% + 1.9rem);
  z-index: 5;
  width: min(21rem, 72vw);
  transform: translateX(-50%);
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  display: none;
}
.hs.is-open .hs__panel { display: block; }
.hs.is-open .hs__pin { background: var(--bracken); border-color: #fff; }

/* A <p> rather than a heading, to keep the document outline intact -- so the
   display face and weight have to be set explicitly here. */
.hs__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.5rem;
  padding-right: 1.4rem;
}
.hs__body { font-size: 0.92rem; line-height: 1.58; color: var(--ash); margin: 0.7rem 0 0; }

.hs__close {
  position: absolute;
  top: 0.35rem; right: 0.35rem;
  width: 2.1rem; height: 2.1rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ash);
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.hs__close:hover { color: var(--ink); background: var(--tint); }

/* ---------- Evidence badge ---------- */
/* Phone-sized screens: hotspot text docked over the bottom of the viewer
   (see panorama.js). Sits above Marzipano's own layers, which carry no
   z-index. JS sets bottom in full screen to clear the overlaid controls. */
.pano__sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  max-height: 55%;
  overflow-y: auto;
  padding: 1rem var(--space) 1.1rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  touch-action: pan-y !important;
  overscroll-behavior: contain;
}
.pano__sheet[hidden] { display: none; }
.pano__sheet .hs__title { padding-right: 2.8rem; }
.pano__sheet .hs__body { margin-top: 0.4rem; }
.pano__sheet-close { width: 44px; height: 44px; }

/* Full screen sets touch-action: none on everything in the viewer; the
   sheet still needs to scroll if its text runs long. */
.pano:fullscreen .pano__viewer .pano__sheet,
.pano--expanded .pano__viewer .pano__sheet,
.pano:fullscreen .pano__viewer .pano__sheet *,
.pano--expanded .pano__viewer .pano__sheet * { touch-action: pan-y !important; }

/* ---------- Hotspot transcript ---------- */
.hotspot-list {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hs;
}
.hotspot-list__item {
  counter-increment: hs;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule-dark);
}
.hotspot-list__item:last-child { border-bottom: 1px solid var(--rule-dark); }

.hotspot-list__title {
  display: inline;
  font-size: var(--t-h3);
  color: var(--paper);
  margin-right: 0.6rem;
}
.hotspot-list__title::before {
  content: counter(hs) ". ";
  color: var(--sand);
  font-style: italic;
}
.hotspot-list__body { margin: 0.8rem 0 0; color: var(--ash-light); }
.hotspot-list__note strong { font-style: normal; font-weight: 600; color: var(--sand); }

/* Back up to the panorama, turned to this spot. Only rendered when the
   viewer loaded. */
.hotspot-list__show {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.4rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--sand);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.hotspot-list__show:hover { color: var(--paper); }

.hotspot-list__note {
  margin: 0.7rem 0 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule-dark);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ash-light);
  opacity: 0.85;
}

/* ============================================================
   Motion
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Print -- a usable handout for the presentation
   ============================================================ */
@media print {
  .pano, .hero__cue, .hero__credit, .skip-link, .progress { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .section--dark, .section--tint,
  .section--closing, .section--sources, .page-footer {
    background: #fff !important;
    color: #000 !important;
    padding-block: 1.2rem;
  }
  .page-footer__contact { color: #000 !important; }
  .section--dark p, .section--dark .lede,
  .provocation, .provocation__after,
  .hotspot-list__title, .hotspot-list__body { color: #000 !important; }
  .hero { min-height: auto; }
  .hero::after { display: none; }
  .figure { break-inside: avoid; }
  .section--sources a::after { content: " (" attr(href) ")"; font-size: 8pt; }
}