/**
 * Hard Roads — trail layer on top of the kit.
 *
 * The palette is pulled from the trail's own photography: hot midday asphalt
 * and the green-black of shaded cemetery ground (8612, 8619), the sage of
 * wire grass and galvanized sign backs (6542, 26628), and the long-dusk gold
 * of the Raleigh sunflower field at sundown (14427). Contrast: --paper on
 * --ink is 15.16:1, --muted on --ink is 7.89:1.
 *
 * One bespoke set-piece: the Verge (#verge), a pinned 320vh drive along an
 * empty rural roadside between Chapter IV and the tally. The road, the
 * telephone-pole rhythm, the rising markers and the dusk are all
 * choreographed by hard-roads.js as pure functions of pin progress; this file
 * owns the stage, the marker furniture and the static/reduced-motion
 * fallbacks.
 */

/* ── palette ─────────────────────────────────────────────────────────────── */
.exp[data-trail="hard-roads"] {
  --ink: #141610;      /* asphalt after sundown, with the grass's green in it */
  --paper: #f0ead8;    /* sun-bleached bone — marker lettering */
  --muted: #a8ad97;    /* weathered sage, galvanized steel */
  --accent: #8fae8b;   /* wire grass, verdigris */
  --sodium: #d9a441;   /* long-dusk gold */

  --x-selection-bg: var(--sodium);
  --x-selection-color: #17130a;

  /* The trail's photography is hot flat daylight and glowing dusk — tint the
     kit's veil to the trail's own ink and deepen it, the way the other
     daylight trails do, so the copy never fights the backdrop. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(20,22,16,.92), rgba(20,22,16,.72) 42%, rgba(20,22,16,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(20,22,16,.64), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(20,22,16,.55), rgba(20,22,16,.78));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--sodium);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #17130a;
  --x-btn-s-color: var(--paper);
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the drive needs the
   full 320vh pin with an inner sticky stage, so the base rules are reset
   rather than extended. */
.scene.verge {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.vg-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #141610;
}

/* The dusk: JS raises --dusk over the last third of the pin, so the verge
   goes from hot midday to long gold and the last marker stands in evening
   light. Kept translucent — a gold cast over the scene, not a brownout.
   Sits above the scenery, below the furniture. */
.vg-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(38,32,22,.6) 0%,
    rgba(74,51,25,.68) 34%,
    rgba(122,77,28,.82) 58%,
    rgba(201,138,46,.92) 76%,
    rgba(58,44,20,.78) 100%);
  opacity: var(--dusk, 0);
  pointer-events: none;
}

/* ── sky ───────────────────────────────────────────────────────────────────
   Hot midday over open country: a hard glare low over the fields falling to
   a pale, washed blue at the zenith. The horizon sits at 56% so the road
   and the grass get the lower half of the frame. */
.vg-sky {
  position: absolute;
  inset: 0 0 44% 0;
  background:
    radial-gradient(70% 60% at 30% 100%, rgba(240,234,216,.55), transparent 70%),
    linear-gradient(180deg,
      #7d94a8 0%,
      #a8b4b4 38%,
      #cfd0bd 72%,
      #ede6cd 100%);
}

/* ── the field ─────────────────────────────────────────────────────────────
   Wire grass from the horizon down: dry olive with pale seed-head streaks.
   JS drags the streak layer as you scroll — the verge only moves when you
   do. */
.vg-field {
  position: absolute;
  inset: 56% 0 0 0;
  background:
    repeating-linear-gradient(94deg,
      rgba(240,234,216,.06) 0 1px,
      transparent 1px 7px),
    repeating-linear-gradient(86deg,
      rgba(20,22,16,.16) 0 2px,
      transparent 2px 11px),
    linear-gradient(180deg,
      #6a6f4a 0%,
      #565b3c 26%,
      #3f4430 62%,
      #2b2f22 100%);
  background-position:
    0 var(--drift, 0px),
    0 calc(var(--drift, 0px) * 0.6),
    0 0;
}

/* ── the road ──────────────────────────────────────────────────────────────
   The ribbon and the telephone poles are drawn on canvas (asphalt, edge
   line, dashes and poles flowing toward the viewer); the element below just
   gives them a frame. */
.vg-road {
  position: absolute;
  inset: 0;
}

.vg-road canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── the markers ───────────────────────────────────────────────────────────
   Historical markers, a granite stone and a roadside cross. Position,
   rotation, rise and etch are set by JS per frame as pure functions of pin
   progress; hidden until the JS places them. */
.vg-markers {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.vg-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 25vmin;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}

/* The post: a slim pole under the face. The cross type turns the post
   itself into the cross — a white upright with one crossarm. */
.vg-post {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.1vmin;
  height: 9vmin;
  margin-left: -0.55vmin;
  background: linear-gradient(90deg, #4c4f45, #6e7264 50%, #3a3d34);
}

/* The cross type turns the post itself into the memorial: a white upright
   standing ABOVE the small board, with one crossarm near its top. */
.vg-cross .vg-post {
  top: auto;
  bottom: 100%;
  width: 1.7vmin;
  height: 13vmin;
  margin-left: -0.85vmin;
  background: linear-gradient(90deg, #d8d3c2, #f2eee0 50%, #c9c4b2);
}

.vg-cross .vg-post::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 2.2vmin;
  width: 7.5vmin;
  height: 1.7vmin;
  margin-left: -3.75vmin;
  background: linear-gradient(180deg, #f2eee0, #c9c4b2);
  box-shadow: 0 0.3vmin 0.8vmin rgba(10,12,8,.35);
}

/* The face: the board that swings to face the reader. */
.vg-face {
  position: relative;
  border-radius: 0.8vmin;
  box-shadow: 0 1.6vmin 4vmin rgba(8,10,6,.5);
  overflow: hidden;
}

/* Cast-iron state marker: dark green, raised pale-gold lettering. */
.vg-iron .vg-face {
  background:
    linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.05) 100%),
    linear-gradient(180deg, #1e3327 0%, #16271d 60%, #101d15 100%);
  border: 0.4vmin solid #b99b4e;
}

.vg-iron .vg-plaque { color: #e6d9ae; }
.vg-iron .vg-plaque b { color: #f0e3b4; }
.vg-iron .vg-year { color: #c8b06a; }

/* Granite: grey stone, engraved dark lettering. */
.vg-stone .vg-face {
  background:
    linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(37deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #9b978b 0%, #7e7b70 55%, #625f56 100%);
  border: 0.3vmin solid #54524a;
}

.vg-stone .vg-plaque { color: #26251f; }
.vg-stone .vg-plaque b { color: #17160f; }
.vg-stone .vg-year { color: #4a463a; }
.vg-stone .vg-plate figcaption { color: #45423a; }

/* The white cross's small board: painted wood, dark lettering. */
.vg-cross .vg-face {
  background:
    linear-gradient(115deg, rgba(255,255,255,.2) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #ece7d6 0%, #d9d3bf 60%, #c4bda6 100%);
  border: 0.3vmin solid #a8a28c;
}

.vg-cross .vg-plaque { color: #2c2a22; }
.vg-cross .vg-plaque b { color: #1b1a12; }
.vg-cross .vg-year { color: #6b6450; }

/* The plaque: cast lettering. The paragraph etches in left to right behind
   a hard mask edge as --etch goes 0 → 1. */
.vg-plaque {
  padding: 1.5vmin 1.7vmin 1.7vmin;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.vg-plaque b {
  display: block;
  font-weight: 600;
  font-size: 2.6vmin;
  line-height: 1.08;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vg-year {
  display: block;
  margin-top: 0.5vmin;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.5vmin;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vg-plaque p {
  margin: 0.9vmin 0 0;
  font-size: 1.9vmin;
  line-height: 1.32;
  /* The etch: a soft 30%-wide feather sweeps left to right as --etch goes
     0 → 1, so mid-reveal text fades in instead of being sliced mid-word.
     At 1 the wipe is fully past the text (stops at 100%/130%). */
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--etch, 0) * 130% - 30%), transparent calc(var(--etch, 0) * 130%));
  mask-image: linear-gradient(100deg, #000 calc(var(--etch, 0) * 130% - 30%), transparent calc(var(--etch, 0) * 130%));
}

/* The archival plate: a sourced era photograph above the plaque, with its
   credit line in small print. Sourced frames are never presented as our own
   photography — the credit rides with the image. */
.vg-plate {
  margin: 0;
  padding: 1.1vmin 1.1vmin 0;
}

.vg-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: sepia(.28) contrast(.96);
  border: 1px solid rgba(10,12,8,.4);
}

.vg-plate figcaption {
  padding: 0.55vmin 0.2vmin 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.15vmin;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #b9a86e;
}

/* ── the ledger ────────────────────────────────────────────────────────────
   One mono line at the lower left: where the drive currently stands. JS
   swaps the text and toggles .show; at the last marker it lands on "The
   road keeps the names." */
.vg-ledger {
  position: absolute;
  z-index: 3;
  left: 8vw;
  bottom: 8vh;
  max-width: 46ch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.vg-ledger.show {
  opacity: 1;
}

.vg-ledger .vg-line {
  font-size: clamp(12px, 1.35vw, 15px);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-shadow: 0 1px 12px rgba(8,10,6,.8);
}

.vg-ledger .vg-line em {
  color: var(--sodium);
  font-style: normal;
}

/* ── reduced motion / static fallback ──────────────────────────────────────
   .vg-static (added by JS when api.reduced) parks the scene at its final
   state: dusk down, every marker up and etched, nothing moving, no audio.
   The markers become a quiet two-column reading list of their plaques; the
   era plates sit this mode out (their credits ride with them), every fact
   stays. */
.vg-static .vg-markers {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(2, 26vmin);
  gap: 1.6vmin;
  pointer-events: auto;
}

.vg-static .vg-marker {
  position: static;
  opacity: 1;
  width: auto;
}

.vg-static .vg-post {
  display: none;
}

.vg-static .vg-plaque p {
  -webkit-mask-image: none;
  mask-image: none;
}

.vg-static .vg-plate {
  display: none;
}

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .vg-marker {
    width: 44vmin;
  }

  .vg-plaque b { font-size: 3.6vmin; }
  .vg-year { font-size: 2.1vmin; }
  .vg-plaque p { font-size: 2.7vmin; }
  .vg-plate figcaption { font-size: 1.6vmin; }

  .vg-post { height: 7vmin; }

  .vg-ledger {
    left: 6vw;
    right: 6vw;
    bottom: 6vh;
    max-width: none;
  }

  .vg-static .vg-markers {
    grid-template-columns: repeat(2, 42vmin);
    max-height: 86vh;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* If JS is unavailable entirely, at least the plaques read. The JS adds
     .vg-static itself for the full static render; this covers no-JS. */
  .vg-marker { opacity: 1; }
  .vg-plaque p { -webkit-mask-image: none; mask-image: none; }
}