/* The Long Ride East · torn paper + mosaic
   Palette is closed: these eight colours and mixes between them, nothing else. */
:root {
  --cream: #E6DACB; --light: #F9E7D5; --terra: #C5764F; --red: #9C5745;
  --green: #2C372D; --olive: #736C51; --umber: #5C4139; --ink: #1F100D;
  --gutter: clamp(16px, 5.5vw, 88px);
  --bar: 28px;
  --barH: calc(var(--bar) + 14px);
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream); color: var(--ink); overflow-x: clip;
  font: 400 17px/1.55 Jost, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* paper grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--light); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }

/* ── type ─────────────────────────────────── */
.label { font: 500 12px/1.4 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.heading { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: .92; letter-spacing: -.012em; }
h1.heading { font-size: clamp(54px, 8.6vw, 136px); margin: 14px 0 6px; max-width: 8ch; }
h2.heading { font-size: clamp(40px, 5.4vw, 84px); margin: 12px 0 18px; max-width: 11ch; }
.copy { font-size: clamp(16px, 1.22vw, 19px); line-height: 1.6; max-width: 35ch; }
.script {
  font-family: 'Mrs Saint Delafield', cursive; font-size: clamp(38px, 3.7vw, 60px); line-height: 1.05;
  color: var(--red); display: inline-block; transform: rotate(-5deg); transform-origin: left center; margin-top: 18px;
}
.attribution { font-size: 13px; letter-spacing: .04em; color: var(--umber); margin-top: 2px; }

/* ── stages: sticky panels that tear in over each other ── */
main { position: relative; }
.stage { position: relative; height: calc((var(--hold) + 200) * var(--vh)); }
.stage + .stage { margin-top: calc(-100 * var(--vh)); }
.stage--last { height: calc((var(--hold) + 100) * var(--vh)); }

.panel {
  position: sticky; top: 0; height: calc(100 * var(--vh)); min-height: 520px;
  /* clip the sides and bottom, let the torn top edge poke 40px above */
  clip-path: inset(-44px 0 0 0);
}
.panel > * { position: absolute; }
.base { left: 0; top: -40px; width: 100%; height: calc(100% + 40px); overflow: visible; }
.base { z-index: 0; }
.scene { z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.veil { inset: 0; background: var(--ink); opacity: 0; pointer-events: none; z-index: 9; }

.panel__text { left: var(--gutter); top: 47%; transform: translateY(-50%); z-index: 6; max-width: min(36vw, 520px); }
.panel--hero .panel__text { top: clamp(70px, 13vh, 150px); transform: none; max-width: 760px; }
.panel--dark { color: var(--light); }
.panel--dark .script { color: var(--terra); }
.panel--dark .copy { max-width: 30ch; }
.panel--dark .panel__text { top: clamp(48px, 8vh, 96px); transform: none; max-width: min(60vw, 820px); }
@media (min-width: 900px) { .panel--dark .script { white-space: nowrap; } }

/* ── video windows: torn-paper frames ─────── */
.clip {
  right: 4vw; bottom: calc(var(--bar) + 9vh); z-index: 2;
  width: min(50vw, calc(48 * var(--vh) * 16 / 9)); aspect-ratio: 16 / 9;
  transform: rotate(-1.4deg); filter: drop-shadow(0 10px 14px rgb(31 16 13 / .28));
}
.clip::before { /* light fibre border behind the torn photo */
  content: ""; position: absolute; inset: -9px; background: var(--light); clip-path: var(--edge-outer, none);
}
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; clip-path: var(--edge-inner, none); }
.panel--hero .clip { inset: 0; width: auto; aspect-ratio: auto; transform: none; filter: none; z-index: 1; }
.panel--hero .clip::before { display: none; }
.panel--hero .clip video { clip-path: none; object-position: 72% 50%; }

/* ── mosaic figures ───────────────────────── */
.figure { left: 0; z-index: 5; pointer-events: none; will-change: transform; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figure--rider { width: clamp(150px, 22vw, 330px); bottom: 12vh; }
.figure--horse { width: clamp(220px, 30vw, 440px); left: 50%; bottom: calc(var(--barH) + 13 * var(--vh) - 6px); }
.scrap { position: absolute; left: 0; top: 0; width: 11px; height: 7px; background: var(--light); z-index: 4; pointer-events: none;
  clip-path: polygon(0 20%, 60% 0, 100% 45%, 80% 100%, 15% 85%); }
.scrap--terra { background: var(--terra); }
.scrap--red { background: var(--red); }

.scroll-cue { left: 50%; bottom: calc(var(--bar) + 34px); transform: translateX(-50%); z-index: 6; color: var(--light);
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-shadow: 0 1px 2px rgb(31 16 13 / .5); }
.scroll-cue i { width: 1px; height: 38px; background: currentColor; transform-origin: top; animation: cue 2.4s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.closing { left: var(--gutter); bottom: calc(var(--bar) + 7vh); z-index: 7; padding: 16px 28px; background: var(--cream);
  font: 500 13px/1.4 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  clip-path: polygon(1% 8%, 34% 0, 67% 6%, 99% 0, 100% 92%, 62% 100%, 30% 94%, 0 100%);
  filter: drop-shadow(0 8px 12px rgb(31 16 13 / .2)); }

/* ── props: scene pieces that move ─────── */
.prop { pointer-events: none; }
.prop svg { display: block; width: 100%; height: auto; overflow: visible; }
.prop--sun { left: 44vw; top: 30%; width: 15vw; z-index: 4; }
.prop--shadow { left: 63vw; width: 28vw; height: calc(4 * var(--vh)); bottom: calc(var(--barH) + 11 * var(--vh) - 6px); z-index: 4; transform-origin: 0 50%; }
.prop--shadow svg { height: 100%; }
.prop--sword { width: 32vw; top: calc(72% - 3.2vw); z-index: 5; }
.prop--sword-l { left: 44.2vw; transform-origin: 12% 50%; }
.prop--sword-l svg { transform-origin: 12% 50%; }
.prop--sword-r { left: 59.8vw; transform-origin: 88% 50%; }
.prop--sword-r svg { transform-origin: 88% 50%; }
.prop--spark { left: 68vw; top: calc(72% - 11.5vw); width: 1px; height: 1px; }
.prop--col { width: 4.6vw; bottom: calc(var(--barH) + 4 * var(--vh)); z-index: 5; }
.prop--col-0 { left: 40vw; } .prop--col-1 { left: 46.5vw; } .prop--col-2 { left: 53vw; }
.prop--eleph { left: 0; width: 17vw; bottom: calc(var(--barH) + 1 * var(--vh)); z-index: 5; }
.prop--eleph-1 { width: 12.5vw; bottom: calc(var(--barH) + 4 * var(--vh)); z-index: 4; }
.prop--rain { inset: 0; z-index: 4; overflow: hidden; }
.drop { position: absolute; top: 0; width: 2px; background: var(--light); opacity: .62; transform: rotate(8deg); }

/* ── map ──────────────────────────────────── */
.map {
  position: fixed; z-index: 30; top: 22px; right: 2vw; width: 30vw; max-width: 520px;
  opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 100% 0;
}
.map__paper { position: relative; padding: 12px 14px 10px; background: var(--light);
  clip-path: polygon(0 2%, 12% 0, 27% 1.6%, 44% 0, 61% 1.4%, 78% 0, 100% 1.8%, 99.4% 34%, 100% 66%, 99.2% 100%, 76% 98.6%, 52% 100%, 29% 98.4%, 0 100%, .8% 64%, 0 33%);
  filter: drop-shadow(0 10px 14px rgb(31 16 13 / .26)); }
.map__title { font: 500 10px/1 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--umber); margin-bottom: 8px; }
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 500 9.5px/1.3 Jost, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.map__legend span { display: inline-flex; align-items: center; gap: 6px; }
.map__legend i { width: 16px; height: 10px; display: inline-block; clip-path: polygon(0 15%, 100% 0, 92% 100%, 6% 88%); }
.map.is-on { visibility: visible; }

/* ── slim timeline bar ────────────────────── */
.timebar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + 14px); z-index: 40; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 6px var(--gutter) 8px; color: var(--ink); }
.timebar__paper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.timebar__end { position: relative; font: 500 10px/1 Jost, sans-serif; letter-spacing: .2em; white-space: nowrap; }
.timebar__track { position: relative; flex: 1; height: 6px; background: var(--cream); }
.timebar__fill { position: absolute; inset: 0; background: var(--terra); transform: scaleX(0); transform-origin: left center; }
.timebar__tick { position: absolute; top: -5px; width: 2px; height: 16px; background: var(--umber); }
.timebar__chip { position: absolute; left: var(--gutter); bottom: calc(100% + 6px); padding: 6px 12px 5px; background: var(--light);
  font: 500 10px/1.2 Jost, sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 10%, 98% 0, 100% 88%, 3% 100%); filter: drop-shadow(0 3px 4px rgb(31 16 13 / .18)); }

/* ── timeline takeover (section 6) ────────── */
.timebig { position: fixed; z-index: 35; left: 3vw; right: 3vw; bottom: 3vh; height: 46vh; min-height: 300px;
  padding: 5vh calc(var(--gutter) - 3vw + 8px) 4vh; color: var(--ink);
  opacity: 0; visibility: hidden; transform-origin: 50% 100%; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; }
.timebig.is-on { visibility: visible; }
.timebig__paper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
.timebig__year { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(64px, 11vw, 176px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.timebig__label { margin-top: 12px; color: var(--umber); min-height: 1.4em; }
.timebig__track { position: relative; height: 8px; background: var(--cream); margin: 0 4px 40px; }
.timebig__fill { position: absolute; inset: 0; background: var(--terra); transform: scaleX(0); transform-origin: left center; }
.timebig__marks { position: absolute; inset: 0; }
.timebig__marks span { position: absolute; top: -8px; width: 2px; height: 24px; background: var(--umber); }
.timebig__marks b { position: absolute; top: 30px; left: 0; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 Jost, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.timebig__marks span:first-child b { transform: none; }
.timebig__marks span:last-child b { transform: translateX(-100%); }
.timebig__stamp { position: absolute; right: calc(var(--gutter) - 3vw + 8px); top: 5vh; padding: 12px 22px; background: var(--terra); color: var(--light);
  font-size: 14px; clip-path: polygon(2% 8%, 98% 0, 100% 90%, 4% 100%); opacity: 0; }

/* ── phones ───────────────────────────────── */
@media (max-width: 899px) {
  :root { --bar: 24px; }
  body { font-size: 16px; }
  .panel__text { max-width: none; right: var(--gutter); top: auto; bottom: auto; transform: none; }
  .panel:not(.panel--hero):not(.panel--dark) .panel__text {
    top: 22%; padding: 18px 18px 14px; margin-left: -8px; margin-right: -8px; background: var(--light);
    clip-path: polygon(0 1.5%, 30% 0, 64% 1.2%, 100% 0, 99% 50%, 100% 100%, 70% 98.6%, 35% 100%, 0 99%, 1% 50%);
  }
  #s2 .panel__text { top: 9%; }
  #s7 .panel__text { top: 9%; }
  h2.heading { font-size: clamp(38px, 10.5vw, 56px); margin: 8px 0 10px; max-width: none; }
  .script { font-size: clamp(34px, 9vw, 46px); margin-top: 8px; }
  .clip { width: calc(100vw - 2 * var(--gutter)); right: var(--gutter); bottom: calc(var(--bar) + 26px); }
  .panel--hero .panel__text { top: 74px; right: var(--gutter); }
  .panel--hero .clip video { object-position: 76% 50%; }
  .figure--rider { width: clamp(120px, 34vw, 190px); }
  .figure--horse { width: clamp(170px, 50vw, 260px); left: auto; right: 4vw; }
  .prop--sun { left: 22vw; top: 44%; width: 26vw; }
  .prop--shadow { left: 68vw; width: 30vw; }
  .prop--sword { width: 60vw; top: 74%; }
  .prop--sword { top: 76%; }
  .prop--sword-l { left: -3vw; } .prop--sword-r { left: 34vw; }
  .prop--spark { left: 45.5vw; top: calc(76% - 17.8vw); }
  .prop--col { width: 8vw; bottom: calc(var(--barH) + 10px); }
  .prop--col-0 { left: 9vw; } .prop--col-1 { left: 20vw; } .prop--col-2 { left: 31vw; }
  .prop--eleph { width: 36vw; } .prop--eleph-1 { width: 27vw; }
  .map { left: var(--gutter); right: var(--gutter); top: 10px; width: auto; max-width: none; }
  .map__paper { padding: 8px 10px 6px; }
  .map__title { font-size: 9px; margin-bottom: 4px; }
  .map__legend { font-size: 8.5px; gap: 2px 10px; margin-top: 4px; }
  .timebar__end { display: none; }
  .timebig { left: 0; right: 0; bottom: 0; height: 52vh; padding: 28px var(--gutter) 22px; }
  .timebig__marks b { display: none; }
  .timebig__track { margin-bottom: 18px; }
  .timebig__stamp { right: var(--gutter); top: 28px; }
  .closing { right: var(--gutter); text-align: center; bottom: calc(var(--bar) + 30px); font-size: 11px; padding: 12px 14px; }
}
/* with the map strip on screen, sections 3–5 start lower on phones */
@media (max-width: 899px) {
  .has-map #s4 .panel__text, .has-map #s5 .panel__text { top: calc(var(--map-h, 180px) + 22px); }
}
@media (max-height: 700px) and (max-width: 899px) {
  .copy { font-size: 15px; line-height: 1.5; }
  .clip { width: 62vw; }
}

/* ── reduced motion: still collages ───────── */
.rm .scroll-cue i { animation: none; transform: none; }
@media (min-width: 900px) { #s7 .panel__text { top: 40%; } }