:root {
  /* Interface / annotations:** annotations* "Inter Tight" (Google Fonts) keeps annotations crisp. Interactions should reward lingering: hovering over a tile might reveal a pressed leaf shadow. */
  --persimmon: #C85F2A;
  --umber: #241812;
  --paper: #F1E2C6;
  --moss: #50624A;
  --ash: #8C8172;
  --oxide: #8F3324;
  --river: #172B30;
  --grid: rgba(241, 226, 198, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--umber);
  font-family: "Inter Tight", sans-serif;
}

.map-table {
  position: relative;
  background:
    radial-gradient(circle at 24% 14%, rgba(200, 95, 42, 0.22), transparent 31rem),
    radial-gradient(circle at 82% 36%, rgba(80, 98, 74, 0.18), transparent 26rem),
    linear-gradient(180deg, #241812 0%, #172B30 48%, #241812 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(241,226,198,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 40%, rgba(36,24,18,.42) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(241,226,198,.04), rgba(0,0,0,.08));
  background-size: 19px 23px, 31px 29px, 100% 100%;
}

.seed-field {
  position: fixed;
  inset: -10vh 0 0;
  z-index: 2;
  pointer-events: none;
  opacity: .36;
  background-image: radial-gradient(circle, var(--paper) 0 1px, transparent 1.8px);
  background-size: 11vw 13vh;
  animation: seedFall 24s linear infinite;
}

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 3rem);
}

.arrival {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(200,95,42,.18), transparent 34rem),
    radial-gradient(circle at 15% 80%, rgba(23,43,48,.62), transparent 30rem),
    var(--umber);
}

.survey-grid,
.contours::before,
.contours::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.survey-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 7.4vw 7.4vw;
  mask-image: radial-gradient(circle at center, black 0 64%, transparent 88%);
  transform: translate(var(--grid-x, 0), var(--grid-y, 0));
}

.contours::before {
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 28% 45%, transparent 0 24px, rgba(241,226,198,.17) 25px 26px, transparent 27px 44px),
    repeating-radial-gradient(ellipse at 75% 62%, transparent 0 38px, rgba(200,95,42,.14) 39px 40px, transparent 41px 65px);
  animation: breathe 8s ease-in-out infinite alternate;
}

.contours::after {
  opacity: .18;
  background: repeating-linear-gradient(112deg, transparent 0 27px, rgba(140,129,114,.28) 28px 29px, transparent 30px 73px);
}

.hero-copy {
  position: relative;
  z-index: 8;
  max-width: 96vw;
  text-align: center;
}

.wordmark {
  position: relative;
  margin: 0;
  color: var(--paper);
  font-family: "Fraunces", serif;
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 780;
  font-variation-settings: "opsz" 120;
  letter-spacing: -0.055em;
  line-height: .82;
  text-shadow: 0 1.2rem 2rem rgba(0,0,0,.34), .035em .025em 0 rgba(200,95,42,.34);
}

.glitch-word::before,
.glitch-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.glitching .glitch-word::before,
.glitching .glitch-word::after,
.glitching::before,
.glitching::after {
  opacity: .85;
  animation: glitchTear 150ms steps(2, end) 2;
}

.glitch-word::before { color: var(--persimmon); clip-path: inset(14% 0 58% 0); transform: translate(4px, -2px); }
.glitch-word::after { color: var(--oxide); clip-path: inset(58% 0 18% 0); transform: translate(-3px, 2px); }

.field-note {
  max-width: 47rem;
  margin: 1.4rem auto 0;
  color: rgba(241,226,198,.78);
  font-family: "Newsreader", serif;
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
  line-height: 1.35;
}

.chapter-label,
.inscription {
  color: var(--persimmon);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.arrival-bento {
  position: absolute;
  inset: clamp(1rem, 3vw, 3rem);
  z-index: 4;
  pointer-events: none;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241,226,198,.22);
  background: rgba(241,226,198,.08);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.26), inset 0 0 0 1px rgba(36,24,18,.28);
  backdrop-filter: blur(1px);
  transition: transform 500ms ease, border-color 300ms ease, background 300ms ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(241,226,198,.08) 50%, transparent 51%),
    linear-gradient(0deg, transparent 0 49%, rgba(241,226,198,.08) 50%, transparent 51%);
  background-size: 3.7rem 3.7rem;
  opacity: .45;
}

.tile::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: .16;
  background: radial-gradient(circle at 20% 20%, var(--paper) 0 1px, transparent 2px);
  background-size: 17px 19px;
  transform: rotate(9deg);
}

.relic-tile { cursor: crosshair; }
.relic-tile:hover { transform: translateY(-7px) rotate(-.35deg); border-color: rgba(200,95,42,.72); background: rgba(241,226,198,.12); }

.fragment { position: absolute; padding: 1rem; pointer-events: auto; }
.fragment-map { width: min(23rem, 32vw); height: 12rem; left: 4vw; top: 8vh; transform: rotate(-1.5deg); }
.fragment-river { width: min(18rem, 24vw); height: 24rem; right: 7vw; top: 12vh; background: rgba(23,43,48,.58); transform: translateY(7px) rotate(1deg); }
.fragment-moon { width: 13rem; height: 13rem; left: 14vw; bottom: 10vh; transform: rotate(.8deg); }
.fragment-seed { width: 10rem; height: 8rem; right: 18vw; bottom: 13vh; transform: rotate(-2deg); }

h2, h3 {
  position: relative;
  z-index: 1;
  margin: .6rem 0;
  font-family: "Newsreader", serif;
  font-weight: 560;
  line-height: .96;
}

h2 { font-size: clamp(2.6rem, 7vw, 6.3rem); letter-spacing: -.045em; }
h3 { font-size: clamp(1.8rem, 3.8vw, 3.6rem); letter-spacing: -.035em; }
p { position: relative; z-index: 1; }

.crack { position: absolute; inset: auto 5% 8% 5%; width: 90%; height: 55%; z-index: 1; }
.crack path { fill: none; stroke: rgba(241,226,198,.42); stroke-width: 2; stroke-linecap: round; }

.river-line, .stone-arc, .moon-gate, .pressed-leaf, .bamboo-lines { position: absolute; z-index: 1; }
.river-line { inset: 16% 14%; border-left: 3px solid var(--persimmon); border-radius: 54% 46% 42% 58%; transform: rotate(22deg); box-shadow: 2rem 4rem 0 -1.85rem rgba(241,226,198,.55), 4rem 8rem 0 -1.75rem rgba(200,95,42,.7); }
.moon-gate { width: 8rem; height: 8rem; left: 50%; top: 54%; border: 2px solid rgba(241,226,198,.46); border-bottom-color: transparent; border-radius: 50% 50% 8% 8%; transform: translate(-50%, -50%); }
.stone-arc { width: 80%; height: 70%; left: 12%; bottom: -8%; border: 1px solid rgba(241,226,198,.35); border-radius: 50% 50% 0 0; }

.pilgrim-mark { position: relative; z-index: 1; display: grid; width: 4.2rem; height: 3.4rem; place-items: center; margin: 1rem; }
.pilgrim-mark i { width: 2.1rem; height: 2.1rem; border: 1px solid var(--ash); transform: rotate(3deg); }
.pilgrim-mark b { position: absolute; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(241,226,198,.42); border-right-color: transparent; border-radius: 50%; }
.pilgrim-mark em { position: absolute; right: .2rem; bottom: .15rem; width: .65rem; height: .65rem; background: var(--persimmon); border-radius: 50%; }

.garden { background: linear-gradient(180deg, rgba(36,24,18,.96), rgba(23,43,48,.92)); }
.section-title { max-width: 70rem; margin: 0 auto 2rem; padding: 5vh 0 0; }

.bento-grid { display: grid; max-width: 1220px; margin: 0 auto; gap: .85rem; }
.garden-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, minmax(4.8rem, 1fr)); min-height: 72vh; }
.garden-grid .tile { padding: clamp(1rem, 2vw, 1.7rem); }
.grove { grid-column: 1 / 7; grid-row: 1 / 5; background: rgba(200,95,42,.16); transform: translateX(-6px); }
.water { grid-column: 7 / 13; grid-row: 1 / 4; background: rgba(23,43,48,.72); transform: translateY(5px); }
.threshold { grid-column: 2 / 5; grid-row: 5 / 9; background: rgba(80,98,74,.34); }
.cloud { grid-column: 5 / 9; grid-row: 4 / 8; background: rgba(140,129,114,.18); transform: translate(8px, -5px); }
.bamboo { grid-column: 9 / 13; grid-row: 4 / 9; background: rgba(80,98,74,.22); }
.shard { grid-column: 1 / 3; grid-row: 3 / 6; z-index: 4; transform: translate(-10px, 8px) rotate(-1deg); }

.route { position: absolute; inset: 12%; width: 76%; height: 76%; z-index: 2; }
.route path, .final-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route path { stroke: var(--persimmon); stroke-width: 3; stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1600ms ease; }
.is-visible .route path { stroke-dashoffset: 0; }
.weather { color: rgba(241,226,198,.72); font-family: "Newsreader", serif; font-size: 1.35rem; }
.bamboo-lines { inset: 8% 18%; background: repeating-linear-gradient(101deg, transparent 0 18px, rgba(241,226,198,.22) 20px 22px, transparent 24px 38px); }

.court { background: #172B30; display: grid; place-items: center; }
.court-grid { width: min(1180px, 100%); grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, minmax(5rem, 1fr)); min-height: 78vh; }
.court-main { grid-column: 2 / 10; grid-row: 1 / 7; padding: clamp(2rem, 4vw, 4rem); background: rgba(241,226,198,.1); }
.court-main p:not(.chapter-label) { max-width: 34rem; color: rgba(241,226,198,.76); font-family: "Newsreader", serif; font-size: 1.4rem; }
.annotation { padding: 1rem; background: rgba(36,24,18,.42); }
.court-grid .annotation:nth-of-type(2) { grid-column: 9 / 13; grid-row: 2 / 4; transform: translate(7px, 0); }
.small-a { grid-column: 10 / 12; grid-row: 4 / 5; transform: translate(-4px, 8px); }
.small-b { grid-column: 8 / 11; grid-row: 5 / 7; transform: translate(6px, -4px); }
.pressed-leaf { right: 7%; bottom: 10%; width: 13rem; height: 24rem; opacity: .28; background: var(--moss); border-radius: 80% 0 80% 0; transform: rotate(27deg); filter: blur(.2px); }

.final-map { padding: 0; background: var(--umber); }
.final-canvas { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(241,226,198,.09), transparent 36rem), var(--umber); }
.final-canvas::before { content: ""; position: absolute; inset: 5vw; border: 1px solid rgba(241,226,198,.16); transform: rotate(-.4deg); }
.final-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-shadow { stroke: rgba(241,226,198,.18); stroke-width: 14; }
.route-draw { stroke: var(--persimmon); stroke-width: 4; stroke-dasharray: 1800; stroke-dashoffset: 1800; transition: stroke-dashoffset 2200ms ease; filter: drop-shadow(0 0 10px rgba(200,95,42,.38)); }
.is-visible .route-draw { stroke-dashoffset: 0; }
.map-fragment { position: absolute; padding: 1rem; color: rgba(241,226,198,.72); border: 1px solid rgba(241,226,198,.18); font: 700 .72rem/1 "Inter Tight"; letter-spacing: .22em; text-transform: uppercase; background: rgba(36,24,18,.55); }
.final-one { left: 11%; top: 67%; transform: rotate(-1deg); }
.final-two { left: 48%; top: 34%; transform: rotate(1.5deg); }
.final-three { right: 9%; top: 22%; transform: rotate(-.7deg); }
.quiet-inscription { position: absolute; right: 7vw; bottom: 7vh; max-width: 37rem; text-align: right; }
.quiet-inscription h2 { margin: 0; font-family: "Fraunces", serif; font-size: clamp(3rem, 8vw, 8rem); font-weight: 720; letter-spacing: -.055em; }
.quiet-inscription p:last-child { color: rgba(241,226,198,.62); font-family: "Newsreader", serif; font-size: 1.2rem; }

.hover-note {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  max-width: 16rem;
  padding: .7rem .8rem;
  color: var(--paper);
  border: 1px solid rgba(200,95,42,.65);
  background: rgba(36,24,18,.86);
  font: 600 .74rem/1.25 "Inter Tight";
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -130%);
  pointer-events: none;
  transition: opacity 180ms ease;
}
.hover-note.visible { opacity: 1; }

.tile-settle { opacity: 0; transform: translateY(34px) rotate(var(--r, 0deg)); transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.8,.2,1); }
.tile-settle.is-visible { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

@keyframes seedFall { from { transform: translateY(-12vh); } to { transform: translateY(12vh); } }
@keyframes breathe { from { transform: scale(1) translate(0,0); } to { transform: scale(1.012) translate(2px,-2px); } }
@keyframes glitchTear { 0% { transform: translate(0); filter: none; } 50% { transform: translate(5px, -2px); filter: drop-shadow(-6px 0 var(--oxide)); } 100% { transform: translate(-3px, 1px); } }

@media (max-width: 820px) {
  .fragment-map { width: 45vw; left: 2vw; }
  .fragment-river { width: 34vw; right: 2vw; }
  .fragment-moon { left: 6vw; bottom: 7vh; }
  .fragment-seed { right: 4vw; }
  .garden-grid, .court-grid { display: block; min-height: auto; }
  .garden-grid .tile, .court-grid .tile { min-height: 14rem; margin: .8rem 0; transform: none; }
  .quiet-inscription { left: 8vw; right: 8vw; text-align: left; }
}