/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/LibreBaskerville-400.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/LibreBaskerville-400i.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mr De Haviland";
  src: url("../assets/fonts/MrDeHaviland-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Kolker Brush";
  src: url("../assets/fonts/KolkerBrush-400.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #efe8d8;
  --ink: #494333;
  --ink-soft: #7a725f;
  --line: rgba(140, 130, 108, .85);
  --sage: #8f9a78;
  --terracotta: #c0714f;
  /* the intro canopy stays dark, so its skip button keeps a light label */
  --canopy-text: #c9c0b1;

  --serif: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  --script: "Mr De Haviland", "Snell Roundhand", cursive;
  --brush: "Kolker Brush", "Mr De Haviland", cursive;

  --ease: cubic-bezier(.6, .05, .25, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* moment the foliage has cleared and the hero text starts to appear */
  --intro: 3s;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

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

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html.is-intro { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Paper backdrop ---------- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--grain),
    repeating-linear-gradient(0deg, rgba(90, 75, 50, .05) 0 1px, transparent 1px 4px),
    radial-gradient(60% 45% at 15% 35%, rgba(214, 196, 168, .45), transparent 70%),
    radial-gradient(55% 50% at 88% 22%, rgba(190, 198, 170, .4), transparent 70%),
    var(--paper);
  animation: settle 3.4s .4s var(--ease-out) both;
}
.page-bg__art { width: 100%; height: 100%; filter: blur(1.5px); }
.bg-leaf { fill: rgba(143, 154, 120, .17); }
.bg-shell { fill: none; stroke: rgba(190, 150, 112, .26); stroke-linecap: round; }

@keyframes settle {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

/* ---------- Intro ---------- */
/* Everything here animates transform, opacity or filter only, on elements whose
   pixels never change, so the browser can run it on the compositor. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  cursor: pointer;
}
.intro__veil,
.intro__vignette {
  position: absolute;
  inset: 0;
  will-change: opacity;
}
.intro__veil {
  background: #17170b;
  animation: veil-out 1.3s .8s ease both;
}
/* dark edges that widen and thin out, so the scene opens from the middle */
.intro__vignette {
  background: radial-gradient(ellipse 75% 60% at 50% 46%, transparent 15%, #131309 85%);
  will-change: transform, opacity;
  animation: vignette-out 2s 1.1s var(--ease) both;
}
@keyframes veil-out {
  to { opacity: 0; }
}
@keyframes vignette-out {
  to { transform: scale(2.4); opacity: 0; }
}

.intro__layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 46%;
  will-change: transform, opacity, filter;
  animation: layer-out var(--dur) var(--delay) var(--ease) both;
}
.intro__layer--back  { --dur: 2.3s; --delay: .95s; --zoom: 1.25; --blur: 0px; }
.intro__layer--mid   { --dur: 2.3s; --delay: .7s;  --zoom: 1.45; --blur: 6px; }
.intro__layer--front { --dur: 2.2s; --delay: .45s; --zoom: 1.7;  --blur: 9px; }

@keyframes layer-out {
  from { transform: scale(1); opacity: 1; filter: blur(0); }
  55% { opacity: 1; }
  to { transform: scale(var(--zoom)); opacity: 0; filter: blur(var(--blur)); }
}
.intro__layer--back { animation-name: layer-out-plain; }
@keyframes layer-out-plain {
  from { transform: scale(1); opacity: 1; }
  55% { opacity: 1; }
  to { transform: scale(var(--zoom)); opacity: 0; }
}

/* each frond is its own bitmap and swings aside around its base */
.intro .frond {
  position: absolute;
  transform: rotate(var(--a));
  will-change: transform;
  animation: frond-out var(--dur) calc(var(--delay) + var(--d, 0s)) var(--ease) both;
}
@keyframes frond-out {
  from { transform: translate(0, 0) rotate(var(--a)); }
  to { transform: translate(var(--tx), var(--ty)) rotate(calc(var(--a) + var(--rot))); }
}

.intro__skip {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 51;
  padding: .55em 1.1em;
  border: 1px solid rgba(201, 192, 177, .4);
  border-radius: 999px;
  background: rgba(30, 28, 16, .5);
  color: var(--canopy-text);
  font: 400 .72rem/1 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro__skip:hover { background: rgba(30, 28, 16, .8); }
.intro__skip:focus-visible, a:focus-visible, .map__scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
html:not(.is-intro) .intro__skip { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 9vh, 6rem) 1.25rem 0;
  overflow: hidden;
  text-align: center;
}

.hero__mist {
  position: absolute;
  inset: 0 -4%;
  background:
    radial-gradient(48% 30% at 50% 40%, rgba(250, 245, 232, .7), transparent 75%),
    radial-gradient(60% 22% at 68% 58%, rgba(250, 245, 232, .4), transparent 70%);
  animation: fade 2.6s calc(var(--intro) - .4s) ease both, drift 16s ease-in-out infinite alternate;
}
@keyframes fade { from { opacity: 0; } }
@keyframes drift {
  from { transform: translateX(-2.5%); }
  to { transform: translateX(2.5%); }
}

/* dinosaur tracks: prints land one after another along a route, then fade */
.hero__tracks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.track {
  position: absolute;
  height: auto;
  fill: rgba(94, 83, 53, .5);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r));
  animation: track calc(var(--n) * .45s + 6s) calc(var(--wait, var(--intro) + .8s) + var(--i) * .45s) infinite both;
}
@keyframes track {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.3); }
  2.5% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  30% { opacity: 1; }
  48%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}

/* foliage that stays behind, hanging in from the top corners */
.hero__corner {
  position: absolute;
  width: min(46vw, 52vh, 460px);
  aspect-ratio: 1;
  opacity: .8;
  pointer-events: none;
}
.hero__corner--tl { top: 0; left: 0; }
.hero__corner--tr { top: 0; right: 0; transform: scaleX(-1); }

.hero__corner .frond {
  position: absolute;
  width: 0;
  height: 0;
  animation: frond-in 2.4s calc(var(--intro) - .7s + var(--d, 0s)) var(--ease-out) both;
}
.hero__corner.is-settled .frond { animation: none; }
.hero__corner .sway {
  position: absolute;
  max-width: none;
  transform: rotate(var(--a));
  animation: sway var(--sway, 7s) ease-in-out infinite alternate;
}
@keyframes frond-in {
  from { transform: rotate(var(--from)) scale(.5); opacity: 0; }
}
@keyframes sway {
  from { transform: rotate(calc(var(--a) - 1.6deg)); }
  to { transform: rotate(calc(var(--a) + 1.6deg)); }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, 68rem);
}

/* staggered reveal after the intro: wipe in from the left, like the video's lettering */
.seq {
  animation: wipe 1.5s calc(var(--intro) + var(--i) * .38s) var(--ease-out) both;
}
@keyframes wipe {
  from {
    opacity: 0;
    filter: blur(6px);
    clip-path: inset(-40% 100% -40% -10%);
  }
  to {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(-40% -10% -40% -10%);
  }
}

.crest {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.crest__rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.crest__rule:last-child { transform: scaleX(-1); }
.crest__logo {
  width: clamp(4.5rem, 11vw, 7.5rem);
  filter: brightness(.45) drop-shadow(0 3px 5px rgba(73, 67, 51, .25));
}

.script {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.15;
  letter-spacing: .06em;
  color: var(--ink);
  text-shadow: 0 2px 5px rgba(73, 67, 51, .2);
}

.hero__title {
  margin: clamp(.6rem, 2.2vh, 1.4rem) 0 clamp(.3rem, 1.2vh, .8rem);
  font-size: clamp(1.55rem, 6.6vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 3px 5px rgba(73, 67, 51, .25);
}

/* index page only: one name at a time, the next rolling up from below */
.roll {
  display: block;
  position: relative;
  height: 1.3em;
  overflow: hidden;
}
.roll__name {
  position: absolute;
  inset: 0;
  line-height: 1.3;
  transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), opacity .35s ease;
}
.roll__name.is-below { transform: translateY(100%); opacity: 0; }
.roll__name.is-above { transform: translateY(-100%); opacity: 0; }

.hero__rule {
  display: block;
  width: min(100%, 46rem);
  height: 2px;
  margin: clamp(.8rem, 2.5vh, 1.6rem) auto clamp(1rem, 3.5vh, 2.4rem);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.hero__era {
  position: relative;
  z-index: 1;
  margin: -.12em 0 .04em;
  font-family: var(--brush);
  font-size: clamp(7.5rem, 31vw, 27rem);
  line-height: .85;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 .04em .08em rgba(73, 67, 51, .28);
  transform: rotate(-5deg);
  pointer-events: none;
  animation-duration: 3s;
}

.hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  color: var(--ink-soft);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
  50% { transform: translateY(5px); }
}

/* ---------- Details (sits straight on the paper, no separate card) ---------- */
.details {
  position: relative;
  z-index: 2;
  padding: 0 clamp(.75rem, 4.5vw, 4rem) clamp(2.5rem, 7vw, 5rem);
}

.card {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 3.5vw, 3rem) clamp(1.75rem, 4vw, 3rem);
  color: var(--ink);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  text-align: center;
}
.fact dt svg {
  width: clamp(1.9rem, 4vw, 2.6rem);
  height: auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fact dd {
  margin: .35rem 0 0;
  font-size: clamp(1.25rem, 3.3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 2px 4px 6px rgba(73, 67, 51, .22);
}

.map { margin: clamp(.5rem, 2vw, 1.25rem) 0 0; }
.map__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9bfa9 transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.map__scroll img {
  width: 100%;
  min-width: 40rem;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
.map figcaption {
  margin-top: .75rem;
  text-align: center;
}
.map__link {
  display: inline-block;
  padding: .7em 1.4em;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  color: #a85a3b;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.map__link:hover { background: var(--terracotta); color: var(--paper); }

.extras {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.extra:first-child { text-align: right; }
.extra h2 {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 1px 3px 5px rgba(60, 50, 35, .2);
}
.extra p {
  margin: .2rem 0 0;
  font-size: clamp(.85rem, 1.6vw, 1.2rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.qr {
  display: block;
  width: clamp(6.5rem, 14vw, 10rem);
}
.qr img { width: 100%; image-rendering: pixelated; }

/* scroll-in; only hidden when JS is there to show it again */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2.5rem, 6vw, 4rem);
}
.footer__logo { width: 2.75rem; filter: brightness(.45); opacity: .85; }

/* ---------- Small screens ---------- */
@media (max-width: 40rem) {
  .facts { gap: .4rem; }
  .fact dd { font-size: clamp(.95rem, 4.3vw, 1.25rem); }
  .extras {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .extra:first-child { text-align: center; }
  .qr { order: -1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro, .intro__skip { display: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .track { opacity: .45; }
}