@font-face { font-family: "Road Rage"; src: url("../fonts/RoadRage-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Amatic"; src: url("../fonts/AmaticSC-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "T700 Body"; src: url("../fonts/LiberationSans-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --paper: #f8f3e5;
  --ink: #243933;
  --body: #3b4d45;
  --muted: #667363;
  --gold: #edcb58;
  --rust: #a84f37;
  --sage: #dce5d1;
  --sand: #eeddb5;
  --sky: #d9e8e5;
  --header-height: 5.5rem;
  --footer-height: 3rem;
  --story-progress: 0%;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  color: var(--ink);
  background: var(--paper);
}

:where(body) {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "T700 Body", Arial, sans-serif;
  line-height: 1.5;
  transition: opacity .2s ease;
}

.js body:not(.is-ready) { opacity: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }

:focus-visible { outline: 3px solid var(--rust); outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: white;
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--header-height);
  padding: 1.15rem 4.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(248, 243, 229, .98), rgba(248, 243, 229, .82) 72%, transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font: 2.15rem/1 "Road Rage", sans-serif;
  text-decoration: none;
}

.brand img { width: 2rem; height: 2rem; object-fit: contain; }

.primary-menu {
  display: flex;
  align-items: center;
  gap: clamp(1.35rem, 3vw, 3.25rem);
  font: 1rem/1 "Oswald", sans-serif;
  text-transform: uppercase;
}

.primary-menu a {
  position: relative;
  padding: .7rem .1rem;
  text-decoration: none;
}

.primary-menu a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .25rem;
  height: .38rem;
  content: "";
  opacity: 0;
  border-radius: 50% 40% 56% 42%;
  background: var(--gold);
  transform: rotate(-2deg) scaleX(.45);
  transition: opacity .2s ease, transform .25s ease;
}

.primary-menu a:hover::after,
.primary-menu a[aria-current="page"]::after { opacity: 1; transform: rotate(-2deg) scaleX(1); }
.menu-toggle { display: none; }

main { min-height: calc(100svh - var(--footer-height)); transition: opacity .18s ease, transform .18s ease; }
body.route-fading main { opacity: 0; transform: translateY(.75rem); }

.js .view:not(.is-active) { display: none; }
.view { position: relative; min-height: calc(100svh - var(--footer-height)); overflow: hidden; }

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(105, 91, 57, .4) 0 .65px, transparent .9px),
    radial-gradient(circle at 76% 61%, rgba(105, 91, 57, .28) 0 .55px, transparent .8px);
  background-size: 31px 29px, 37px 41px;
}

.page-ground {
  position: absolute;
  z-index: 1;
  left: -4vw;
  right: -4vw;
  bottom: -6rem;
  height: 14rem;
  border-radius: 52% 44% 0 0 / 25% 30% 0 0;
  background: var(--sand);
  transform: rotate(-.6deg);
}

.page-ground::after {
  position: absolute;
  top: 3rem;
  left: 37%;
  width: 58%;
  height: 4rem;
  content: "";
  border-top: 2px dashed rgba(102, 115, 99, .55);
  border-radius: 50%;
  transform: rotate(1deg);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--muted);
  font: clamp(.82rem, 1.05vw, 1.05rem)/1.2 "Oswald", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.hand-note { font-family: "Amatic", cursive; }
.rust { color: var(--rust); }

.button {
  display: inline-flex;
  min-height: 3.7rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .9rem 1.5rem;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: var(--gold);
  box-shadow: 3px 4px 0 rgba(36, 57, 51, .12);
  font: 1.2rem/1 "Oswald", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(-.35deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.button:hover { box-shadow: 1px 2px 0 rgba(36, 57, 51, .15); transform: translateY(2px); }

.sprite { position: absolute; overflow: hidden; pointer-events: none; }
.sprite img { position: absolute; max-width: none; }
.sprite-rocks { width: min(15vw, 15rem); aspect-ratio: 740 / 390; }
.sprite-rocks img { width: 201.08%; left: -84.46%; top: -41.03%; }
.sprite-flower-cactus { width: min(14vw, 14rem); aspect-ratio: 914 / 1520; }
.sprite-flower-cactus img { width: 162.80%; left: -2.84%; top: -46.71%; }
.sprite-agave { width: min(9vw, 9rem); aspect-ratio: 362 / 481; }
.sprite-agave img { width: 625.97%; left: -189.23%; top: -9.15%; }
.sprite-barrel { width: min(9vw, 9rem); aspect-ratio: 485 / 398; }
.sprite-barrel img { width: 467.22%; left: -18.97%; top: -32.16%; }

/* Home */
.view-home { padding: calc(var(--header-height) + 2.5rem) 5vw 2rem; background: var(--paper); }

.home-copy {
  position: relative;
  z-index: 15;
  width: min(39vw, 39rem);
}

.home-copy h1 {
  margin: 0 0 2rem;
  font: clamp(7rem, 10.3vw, 10.5rem)/.72 "Road Rage", sans-serif;
  letter-spacing: -.014em;
  text-transform: uppercase;
}

.home-copy h1::after,
.static-heading h1::after,
.chapter-card h2::after,
.how-it-works h2::after {
  display: block;
  width: 58%;
  height: .75rem;
  margin: 1rem 0 0;
  content: "";
  border-radius: 60% 40% 54% 45%;
  background: var(--gold);
  transform: rotate(-1.4deg);
}

.lead {
  max-width: 34rem;
  margin: 0 0 2rem;
  color: var(--body);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
}

.home-art { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.home-map { position: absolute; top: 16vh; right: -7vw; width: min(70vw, 75rem); max-width: none; }
.home-foley { position: absolute; z-index: 7; right: 31vw; bottom: 8vh; width: min(27vw, 27rem); filter: drop-shadow(0 1.2rem .7rem rgba(36, 57, 51, .12)); }
.home-note { position: absolute; top: 12vh; right: 25vw; margin: 0; font-size: clamp(1.9rem, 2.8vw, 2.8rem); }
.home-rocks { z-index: 7; right: 15vw; bottom: -1rem; }
.home-cactus { z-index: 8; right: -2vw; bottom: -4rem; }
.home-agave { z-index: 8; right: 3vw; bottom: -1rem; }
.home-barrel { z-index: 8; right: 48vw; bottom: -.5rem; }

.home-journal {
  position: absolute;
  z-index: 16;
  left: 5vw;
  bottom: 1.2rem;
  display: grid;
  max-width: 31rem;
  text-decoration: none;
}

.home-journal span { color: var(--muted); font: .82rem/1.4 "Oswald", sans-serif; text-transform: uppercase; }
.home-journal strong { margin: .3rem 0; font-size: 1.35rem; font-weight: 400; }
.home-journal b { font: 1rem/1.3 "Oswald", sans-serif; }

/* About scroll sequence */
.view-about { overflow: visible; background: #f7f0e4; }
.about-story { position: relative; }
.about-stage {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #f7f0e4;
  transition: background-color .75s ease;
}

html[data-about="1"] .about-stage { background: #f7ecde; }
html[data-about="2"] .about-stage { background: #f2f1dc; }
html[data-about="3"] .about-stage { background: #dfe8d5; }

.about-stage .page-ground { background: #dde4c8; transition: background-color .75s ease; }
html[data-about="1"] .about-stage .page-ground { background: #eacbac; }
html[data-about="2"] .about-stage .page-ground { background: #d7ddc0; }
html[data-about="3"] .about-stage .page-ground { background: #c3d2b3; }

.about-map {
  position: absolute;
  z-index: 2;
  top: 13vh;
  right: -10vw;
  width: min(76vw, 80rem);
  max-width: none;
  opacity: .58;
  transform: translate(-2vw, 4vh) scale(.87);
  transform-origin: 70% 45%;
  transition: opacity .7s ease, transform .95s cubic-bezier(.2, .75, .25, 1);
}

html[data-about="1"] .about-map { opacity: .06; transform: translate(11vw, -2vh) scale(.66); }
html[data-about="2"] .about-map { opacity: .12; transform: translate(8vw, 6vh) scale(.72); }
html[data-about="3"] .about-map { opacity: 1; transform: translate(0, 0) scale(1); }

.about-pose {
  position: absolute;
  z-index: 8;
  max-width: none;
  opacity: 0;
  filter: drop-shadow(0 1.4rem .8rem rgba(36, 57, 51, .12));
  transform: translateY(2rem) scale(.96);
  transition: opacity .42s ease, transform .78s cubic-bezier(.2, .75, .25, 1);
}

.pose-0 { right: 9vw; bottom: 5vh; width: min(29vw, 29rem); }
.pose-1 { right: 24vw; bottom: 2vh; width: min(28vw, 28rem); }
.pose-2 { right: 9vw; bottom: 5vh; width: min(27vw, 27rem); }
.pose-3 { right: 31vw; bottom: 3vh; width: min(25vw, 25rem); }

html[data-about="0"] .pose-0,
html[data-about="1"] .pose-1,
html[data-about="2"] .pose-2,
html[data-about="3"] .pose-3 { opacity: 1; transform: translateY(0) scale(1); }

.film-frame {
  position: absolute;
  z-index: 6;
  top: 23vh;
  right: 6vw;
  width: min(48vw, 48rem);
  padding: 1.7rem 1.15rem 1rem;
  border: 1rem solid var(--ink);
  background: #fff8e8;
  opacity: 0;
  box-shadow: 0 1.5rem 3rem rgba(36, 57, 51, .09);
  transform: translateY(2rem) scale(.94);
  transition: opacity .45s ease, transform .75s ease;
}

.film-frame::before,
.film-frame::after {
  position: absolute;
  left: .5rem;
  right: .5rem;
  height: .45rem;
  content: "";
  background: repeating-linear-gradient(90deg, var(--paper) 0 .85rem, transparent .85rem 1.85rem);
}

.film-frame::before { top: -.75rem; }
.film-frame::after { bottom: -.75rem; }
.film-picture { height: min(36vh, 23rem); overflow: hidden; }
.film-picture img { width: 100%; height: 100%; object-fit: cover; }
.film-frame p { display: flex; justify-content: space-between; gap: 1rem; margin: .85rem .2rem 0; font: 1rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.film-frame strong { color: var(--rust); font-weight: 500; }
html[data-about="1"] .film-frame { opacity: 1; transform: translateY(0) scale(1); }

.about-rocks,
.about-cactus,
.about-agave { z-index: 7; opacity: 0; transform: translateY(2rem); transition: opacity .45s ease, transform .7s ease; }
.about-rocks { right: 27vw; bottom: 3vh; width: min(27vw, 27rem); }
.about-cactus { right: -2vw; bottom: -6vh; }
.about-agave { right: 2vw; bottom: 2vh; }
html[data-about="2"] .about-rocks,
html[data-about="2"] .about-agave,
html[data-about="3"] .about-cactus,
html[data-about="3"] .about-agave { opacity: 1; transform: translateY(0); }

.scene-note,
.scene-notes { position: absolute; z-index: 9; margin: 0; opacity: 0; font-size: clamp(1.7rem, 2.7vw, 2.7rem); transition: opacity .35s ease, transform .55s ease; }
.scene-note { transform: translateY(1rem) rotate(-2deg); }
.note-0 { top: 15vh; right: 18vw; }
.note-1 { top: 16vh; right: 17vw; color: var(--rust); }
.note-3 { top: 13vh; right: 15vw; }
.scene-notes { right: 21vw; bottom: 25vh; width: 31vw; display: flex; justify-content: space-between; color: var(--rust); }
html[data-about="0"] .note-0,
html[data-about="1"] .note-1,
html[data-about="2"] .note-2,
html[data-about="3"] .note-3 { opacity: 1; transform: translateY(0) rotate(-1deg); }

.about-copy { position: relative; z-index: 12; margin-top: -100svh; }
.about-chapter { min-height: 100svh; padding: 16vh 5vw 12rem; display: flex; align-items: center; }
.chapter-card { width: min(43vw, 46rem); padding: 2rem 2.5rem 2.25rem 0; background: linear-gradient(90deg, rgba(248, 243, 229, .98) 0 76%, rgba(248, 243, 229, .84) 88%, transparent); }
.chapter-card h2 { max-width: 8ch; margin: 0 0 2rem; font: clamp(5.1rem, 7.8vw, 8.6rem)/.8 "Road Rage", sans-serif; text-transform: uppercase; }
.chapter-card h2::after { width: 70%; height: .62rem; }
.chapter-card > p:not(.eyebrow):not(.hand-note) { max-width: 33rem; margin: 0; color: var(--body); font-size: clamp(1.18rem, 1.7vw, 1.6rem); }
.chapter-card .hand-note { margin: 2rem 0 0; font-size: clamp(2rem, 3vw, 3rem); }
.chapter-card .button { margin-top: 2.2rem; }

.story-rail {
  position: fixed;
  z-index: 40;
  left: 5vw;
  bottom: 1rem;
  width: min(43vw, 46rem);
  padding: .75rem .9rem .8rem;
  border: 1px solid rgba(102, 115, 99, .3);
  background: rgba(248, 243, 229, .92);
  backdrop-filter: blur(10px);
}

.story-rail[hidden] { display: none; }
.story-rail > p { margin: 0 0 .5rem; color: var(--muted); font: .75rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.story-rail ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; padding: 0; margin: 0; list-style: none; }
.story-rail a { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: baseline; color: var(--muted); font-size: .74rem; text-decoration: none; }
.story-rail a span { font: .9rem/1 "Oswald", sans-serif; }
.story-rail a b { font-weight: 400; }
.story-rail a[aria-current] { color: var(--ink); }
.story-rail a[aria-current] span { color: var(--rust); }
.rail-progress { display: block; height: .2rem; margin-top: .65rem; overflow: hidden; background: rgba(102, 115, 99, .2); }
.rail-progress span { display: block; width: var(--story-progress); height: 100%; background: var(--gold); }

.how-it-works { position: relative; z-index: 14; min-height: 92svh; padding: 9rem 5vw 7rem; background: var(--sage); }
.how-it-works > div:first-child { max-width: 68rem; }
.how-it-works h2 { margin: 0 0 2rem; font: clamp(5rem, 9vw, 9rem)/.82 "Road Rage", sans-serif; text-transform: uppercase; }
.how-it-works h2::after { width: 28%; }
.how-it-works > div:first-child > p:not(.eyebrow) { max-width: 48rem; color: var(--body); font-size: clamp(1.2rem, 1.7vw, 1.55rem); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.how-grid article { min-height: 16rem; padding: 2rem; border: 1px solid rgba(36, 57, 51, .55); background: rgba(255, 253, 244, .7); }
.how-grid span { color: var(--rust); font: 1rem/1 "Oswald", sans-serif; }
.how-grid h3 { margin: 1.2rem 0 1rem; font: 3rem/1 "Road Rage", sans-serif; text-transform: uppercase; }
.how-grid p { margin: 0; color: var(--body); }

/* Shared static destinations */
.static-view { padding: calc(var(--header-height) + 2rem) 5vw 2rem; background: var(--paper); }
.static-heading { position: relative; z-index: 12; max-width: 68rem; }
.static-heading h1 { margin: 0 0 1.8rem; font: clamp(6rem, 9vw, 9rem)/.78 "Road Rage", sans-serif; text-transform: uppercase; }
.static-heading h1::after { width: 35%; height: .62rem; }
.static-heading > p:not(.eyebrow) { max-width: 67rem; margin: 0; color: var(--body); font-size: clamp(1.08rem, 1.55vw, 1.45rem); }

/* Team */
.view-team .page-ground { background: #e3d6af; }
.team-grid {
  position: relative;
  z-index: 12;
  width: min(81vw, 81rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.member-card { min-height: 12.2rem; padding: .65rem 1rem 1rem; border: 1px solid #a5a994; background: #fffdf4; }
.member-card > div { position: relative; height: 5.6rem; margin: 0 -.35rem .7rem; display: grid; place-items: center; background: #e9d5b3; overflow: hidden; }
.member-card:nth-child(4n+2) > div { background: #c9dbd4; }
.member-card:nth-child(4n+3) > div { background: #e8c9c4; }
.member-card:nth-child(4n+4) > div { background: #d8d9b7; }
.member-card > div::after { position: absolute; top: 2.7rem; left: 10%; width: 80%; height: 2.8rem; content: ""; border-top: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; }
.member-card > div span { position: relative; z-index: 1; font: 3.5rem/1 "Road Rage", sans-serif; }
.member-card small { color: var(--muted); font: .78rem/1 "Oswald", sans-serif; }
.member-card h2 { margin: .15rem 0; font: 1.45rem/1.15 "Oswald", sans-serif; }
.member-card p { margin: 0; color: var(--muted); font-size: .87rem; }
.team-art { position: absolute; z-index: 10; right: 3vw; bottom: 0; width: 25vw; height: 38vh; pointer-events: none; }
.team-art > img { position: absolute; z-index: 3; right: 6vw; bottom: 0; width: min(18vw, 18rem); }
.team-art .sprite-rocks { z-index: 2; left: -3vw; bottom: 0; width: 9rem; }
.team-art .sprite-agave { z-index: 4; right: -1vw; bottom: -1rem; width: 7rem; }

/* Media */
.media-heading { max-width: 54rem; }
.media-filters { position: relative; z-index: 14; display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 1.5rem; }
.media-filters button,
.blog-filters span { min-height: 2.5rem; padding: .45rem 1.25rem; border: 1px solid #b1b4a2; color: var(--ink); background: #e5e2d3; font: .95rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.media-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--gold); }
.media-layout { position: relative; z-index: 14; display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 2.4vw; }
.media-feature { min-height: 20.5rem; padding: .75rem; border: 1.5px solid var(--ink); background: #fffdf4; }
.media-picture { position: relative; height: 16.5rem; overflow: hidden; background: #eff0dc; }
.media-picture img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.media-feature.is-placeholder .media-picture img { opacity: .12; }
.media-feature.is-placeholder .media-picture::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; content: attr(data-placeholder); color: var(--muted); font: 1.2rem/1.3 "Oswald", sans-serif; text-align: center; text-transform: uppercase; }
.media-feature footer { min-height: 3.1rem; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: .65rem .65rem 0; }
.media-feature footer span { color: var(--rust); font: .9rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.media-feature footer strong { font: 1.15rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.media-feature footer small { color: var(--muted); font: .75rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.audio-slot { position: relative; min-height: 20.5rem; overflow: hidden; padding: 1.5rem; border: 1.5px solid var(--ink); background: #e0e8da; }
.audio-slot > p { margin: 0; color: var(--muted); font: 1rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.audio-slot h2 { margin: 1.6rem 0; font: 3.9rem/.82 "Road Rage", sans-serif; text-transform: uppercase; }
.audio-slot svg { position: relative; z-index: 3; width: 68%; fill: none; stroke: var(--rust); stroke-width: 2.5; }
.audio-slot > span { position: absolute; left: 1.5rem; bottom: 1.5rem; color: var(--muted); font: .82rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.audio-slot > img { position: absolute; z-index: 2; right: -.5rem; bottom: .3rem; width: 48%; }

/* Blogs */
.view-blogs .page-ground { background: #e5d4b4; }
.blogs-heading { max-width: 41vw; }
.blogs-heading h1 { font-size: clamp(5.8rem, 8.5vw, 8.6rem); }
.blog-filters { position: relative; z-index: 14; width: 41vw; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.5rem; }
.blog-filters span { min-height: 2.2rem; padding: .4rem .8rem; font-size: .78rem; }
.blog-empty { position: relative; z-index: 14; width: 40vw; min-height: 8.5rem; margin-top: 1.6rem; padding: 1.2rem 1.7rem; border: 1.5px solid var(--ink); background: #fffdf4; }
.blog-empty h2 { margin: 0 0 .45rem; font: 1.8rem/1.1 "Oswald", sans-serif; text-transform: uppercase; }
.blog-empty p { margin: 0; color: var(--muted); }
.blog-empty > span { position: absolute; top: 2.4rem; right: 2rem; color: var(--rust); font-size: 2rem; }
.blogs-art { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.blogs-map { position: absolute; top: 18vh; right: -9vw; width: 60vw; opacity: .32; }
.blogs-foley { position: absolute; z-index: 5; right: 22vw; bottom: 5vh; width: 25vw; }
.blogs-art .sprite-rocks { z-index: 5; right: 43vw; bottom: 0; width: 12vw; }
.blogs-art .sprite-flower-cactus { z-index: 6; right: -2vw; bottom: -4rem; }

/* Contact */
.view-contact { background: #e8eee2; }
.view-contact .page-ground { background: #d5ddbd; }
.contact-heading { width: 31vw; }
.contact-heading h1 { font-size: clamp(6rem, 8.5vw, 8.6rem); }
.contact-heading address { margin-top: 3rem; color: var(--body); font-style: normal; }
.contact-heading address strong { color: var(--muted); font: 1rem/1.4 "Oswald", sans-serif; text-transform: uppercase; }
.contact-form { position: relative; z-index: 16; width: min(40vw, 40rem); margin: -27rem 0 0 36vw; padding: 1.8rem 2.5rem 2rem; border: 1.5px solid var(--ink); background: #f9f6ea; }
.contact-form h2 { margin: 0 0 1rem; font: 2rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.contact-form label { display: block; margin: .8rem 0 .25rem; color: var(--muted); font: .78rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.contact-form input,
.contact-form textarea { width: 100%; border: 1px solid #8e9683; border-radius: 0; color: var(--ink); background: #fffdf5; }
.contact-form input { min-height: 3.2rem; padding: .6rem .8rem; }
.contact-form textarea { min-height: 7rem; padding: .7rem .8rem; resize: vertical; }
.contact-form .button { margin-top: 1.3rem; }
.form-status { min-height: 1.4rem; margin: .7rem 0 0; color: var(--rust); font-size: .85rem; }
.contact-art { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.contact-map { position: absolute; top: 17vh; right: -9vw; width: 53vw; opacity: .31; }
.contact-foley { position: absolute; z-index: 7; right: 2vw; bottom: 1vh; width: 23vw; }
.contact-art .sprite-flower-cactus { z-index: 8; right: -3vw; bottom: -5rem; }
.contact-art .sprite-agave { z-index: 9; right: 3vw; bottom: -1rem; }

.site-footer {
  position: relative;
  z-index: 30;
  min-height: var(--footer-height);
  padding: .9rem 5vw;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: var(--muted);
  background: var(--paper);
  font: .72rem/1.3 "Oswald", sans-serif;
  text-transform: uppercase;
}

html[data-route="contact"] .site-footer { background: #e8eee2; }
html[data-route="about"] .site-footer { background: var(--sage); }

.noscript-note { position: fixed; z-index: 90; right: 1rem; bottom: 1rem; max-width: 26rem; padding: 1rem; border: 1px solid var(--ink); background: var(--paper); }

@keyframes route-out { to { opacity: 0; transform: translateY(.8rem) scale(.995); } }
@keyframes route-in { from { opacity: 0; transform: translateY(.8rem) scale(.995); } }
::view-transition-old(root) { animation: route-out .18s ease both; }
::view-transition-new(root) { animation: route-in .32s ease both; }

@media (max-width: 1100px) {
  .home-map { right: -20vw; width: 86vw; }
  .home-foley { right: 26vw; width: 32vw; }
  .home-copy { width: 44vw; }
  .home-note { right: 15vw; }
  .team-grid { width: 84vw; }
  .team-art { right: 0; width: 20vw; }
  .team-art > img { right: 1vw; width: 19vw; }
  .chapter-card, .story-rail { width: 49vw; }
  .about-map { right: -23vw; width: 91vw; }
  .pose-0 { right: 3vw; width: 36vw; }
  .pose-1 { right: 14vw; width: 35vw; }
  .pose-2 { right: 3vw; width: 33vw; }
  .pose-3 { right: 22vw; width: 30vw; }
  .film-frame { right: 3vw; width: 50vw; }
  .media-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .blogs-map { width: 67vw; }
  .contact-form { width: 42vw; margin-left: 34vw; }
}

@media (max-width: 800px) {
  :root { --header-height: 4.5rem; --footer-height: 5rem; }
  .site-header { padding: .85rem 1.25rem; background: rgba(248, 243, 229, .97); }
  .brand { font-size: 1.65rem; }
  .brand img { width: 1.65rem; height: 1.65rem; }

  .menu-toggle { display: inline-flex; align-items: center; gap: .7rem; padding: .65rem 0; border: 0; color: var(--ink); background: transparent; font: .95rem/1 "Oswald", sans-serif; text-transform: uppercase; }
  .menu-toggle i,
  .menu-toggle i::before,
  .menu-toggle i::after { display: block; width: 1.25rem; height: 2px; content: ""; background: currentColor; }
  .menu-toggle i { position: relative; }
  .menu-toggle i::before { position: absolute; top: -.38rem; }
  .menu-toggle i::after { position: absolute; top: .38rem; }

  .primary-menu { position: fixed; top: calc(var(--header-height) - .05rem); left: 1rem; right: 1rem; display: grid; gap: 0; padding: .6rem 1.2rem 1rem; border: 1px solid rgba(36, 57, 51, .55); background: var(--paper); box-shadow: 0 1rem 2.5rem rgba(36, 57, 51, .12); }
  .menu-toggle[aria-expanded="false"] + .primary-menu { display: none; }
  .primary-menu a { padding: .9rem 0; border-bottom: 1px solid rgba(102, 115, 99, .22); }
  .primary-menu a:last-child { border-bottom: 0; }
  .primary-menu a::after { right: auto; width: 3.5rem; }

  .view { min-height: calc(100svh - var(--footer-height)); }
  .view-home { min-height: 100svh; padding: 6.5rem 1.5rem 2rem; }
  .home-copy { width: 100%; }
  .home-copy h1 { max-width: 7ch; font-size: clamp(5.2rem, 22vw, 8.5rem); }
  .lead { max-width: 22rem; font-size: 1.08rem; }
  .home-art { top: 26rem; }
  .home-map { top: 7rem; right: -37vw; width: 126vw; }
  .home-foley { right: 17vw; bottom: 10vh; width: 46vw; }
  .home-note { display: none; }
  .home-rocks { right: 33vw; bottom: -1rem; width: 28vw; }
  .home-cactus { right: -8vw; bottom: -5rem; width: 28vw; }
  .home-agave { right: 1vw; width: 18vw; }
  .home-barrel { left: 1rem; right: auto; width: 20vw; }
  .home-journal { left: 1.5rem; bottom: 1rem; max-width: 17rem; }
  .home-journal strong { font-size: 1rem; }

  .about-stage { top: var(--header-height); height: 52svh; }
  .about-copy { margin-top: -52svh; }
  .about-chapter { min-height: 100svh; padding: 59svh 1.5rem 7.5rem; align-items: flex-start; }
  .chapter-card { width: 100%; padding: 1.4rem; border: 1px solid rgba(36, 57, 51, .35); background: rgba(248, 243, 229, .96); }
  .chapter-card h2 { font-size: clamp(4.1rem, 17vw, 6.2rem); }
  .chapter-card h2::after { height: .48rem; }
  .chapter-card > p:not(.eyebrow):not(.hand-note) { font-size: 1.08rem; }
  .about-map { top: 3vh; right: -46vw; width: 145vw; transform: translate(-3vw, 1vh) scale(.86); }
  html[data-about="1"] .about-map { transform: translate(16vw, -2vh) scale(.61); }
  html[data-about="2"] .about-map { transform: translate(16vw, 4vh) scale(.69); }
  html[data-about="3"] .about-map { transform: translate(0, 0) scale(1); }
  .about-stage .page-ground { height: 12vh; bottom: -2vh; }
  .pose-0 { right: 3vw; bottom: 0; width: 58vw; }
  .pose-1 { right: 18vw; bottom: -2vh; width: 60vw; }
  .pose-2 { right: 3vw; bottom: 0; width: 56vw; }
  .pose-3 { right: 29vw; bottom: -1vh; width: 53vw; }
  .film-frame { top: 6vh; right: 5vw; width: 90vw; padding: 1rem .7rem .7rem; border-width: .65rem; }
  .film-picture { height: 25svh; }
  .film-frame p { margin-top: .65rem; font-size: .72rem; }
  .about-rocks { right: 28vw; bottom: -1vh; width: 45vw; }
  .about-cactus { right: -6vw; bottom: -4vh; width: 26vw; }
  .about-agave { right: -2vw; width: 18vw; }
  .scene-note, .scene-notes { font-size: 1.6rem; }
  .note-0 { top: 7vh; right: 9vw; }
  .note-1 { top: 4vh; right: 10vw; }
  .note-3 { top: 4vh; right: 8vw; }
  .scene-notes { right: 21vw; bottom: 14vh; width: 55vw; }
  .story-rail { left: 1rem; right: 1rem; bottom: .75rem; width: auto; padding: .6rem .75rem; }
  .story-rail > p { display: none; }
  .story-rail ol { gap: .4rem; }
  .story-rail a { display: block; text-align: center; }
  .story-rail a b { display: none; }
  .how-it-works { padding: 7rem 1.5rem 5rem; }
  .how-it-works h2 { font-size: clamp(4.3rem, 18vw, 7rem); }
  .how-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .how-grid article { min-height: auto; }

  .static-view { padding: 6.5rem 1.5rem 3rem; overflow: visible; }
  .static-heading { max-width: none; }
  .static-heading h1 { font-size: clamp(4.8rem, 20vw, 7rem); }
  .static-heading > p:not(.eyebrow) { font-size: 1.03rem; }

  .team-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; padding-bottom: 12rem; }
  .member-card { min-height: 9.8rem; padding: .5rem .65rem .7rem; }
  .member-card > div { height: 4rem; }
  .member-card > div span { font-size: 2.5rem; }
  .member-card h2 { font-size: 1.05rem; }
  .member-card p { font-size: .72rem; }
  .team-art { right: 0; bottom: 0; width: 55vw; height: 14rem; }
  .team-art > img { right: 2vw; width: 42vw; }
  .team-art .sprite-rocks { left: -35vw; width: 26vw; }
  .team-art .sprite-agave { right: -2vw; width: 18vw; }

  .media-filters { gap: .4rem; }
  .media-filters button { min-height: 2.2rem; padding: .4rem .75rem; font-size: .78rem; }
  .media-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .media-feature, .audio-slot { min-height: 0; }
  .media-picture { height: 14rem; }
  .media-feature footer { grid-template-columns: auto 1fr; gap: .75rem; }
  .media-feature footer small { display: none; }
  .audio-slot { min-height: 14rem; }
  .audio-slot h2 { font-size: 3.3rem; }
  .audio-slot > img { width: 42%; }

  .blogs-heading { max-width: none; }
  .blogs-heading h1 { font-size: clamp(4.7rem, 18vw, 6.8rem); }
  .blog-filters, .blog-empty { width: 100%; }
  .blog-filters { margin-top: 2rem; }
  .blog-empty { margin-bottom: 18rem; }
  .blogs-map { top: auto; right: -36vw; bottom: 2rem; width: 125vw; }
  .blogs-foley { right: 10vw; bottom: 1rem; width: 50vw; }
  .blogs-art .sprite-rocks { left: 1rem; right: auto; width: 29vw; }
  .blogs-art .sprite-flower-cactus { right: -7vw; width: 28vw; }

  .contact-heading { width: 100%; }
  .contact-heading h1 { font-size: clamp(5rem, 20vw, 7rem); }
  .contact-heading address { margin-top: 2rem; font-size: .9rem; }
  .contact-form { width: 100%; margin: 2.5rem 0 18rem; padding: 1.4rem; }
  .contact-map { top: auto; right: -38vw; bottom: 1rem; width: 125vw; }
  .contact-foley { right: 2vw; bottom: 0; width: 52vw; }
  .contact-art .sprite-flower-cactus { right: -9vw; width: 29vw; }
  .contact-art .sprite-agave { right: 3vw; width: 18vw; }

  .site-footer { min-height: var(--footer-height); padding: 1rem 1.5rem; display: grid; gap: .35rem; }
}

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

/* Keep the supplied three-line Home title intact on narrow screens. */
@media(max-width:760px){.home-copy h1{max-width:100%;font-size:clamp(4.6rem,20vw,7.5rem)}}
@media(max-width:760px){.chapter-card h2{max-width:100%;font-size:clamp(2.8rem,13vw,4.8rem);overflow-wrap:anywhere;line-height:.9}}
.static-view:not(.log-view){overflow-x:clip}
.media-layout>*,.audio-slot{min-width:0}
.media-item{overflow-wrap:anywhere}