:root {
  --forest: #09130f;
  --forest-soft: #102018;
  --forest-moss: #17271d;
  --bark: #8c4f2f;
  --bark-light: #b36d42;
  --bark-dark: #492719;
  --gold: #d6ad65;
  --gold-bright: #efd18b;
  --fog: #c5c9b6;
  --paper: #e8e0ca;
  --paper-dim: #b8b49f;
  --scar: #201711;
  --serif-display: 'Fraunces', serif;
  --serif-body: 'Crimson Pro', serif;
  --pad: clamp(1.35rem, 5vw, 5.75rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--forest);
  color-scheme: dark;
  scrollbar-color: var(--bark-light) #06100c;
  scrollbar-width: thin;
}

html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #06100c; }
html::-webkit-scrollbar-thumb {
  border: 2px solid #06100c;
  border-radius: 999px;
  background: linear-gradient(var(--bark-light), var(--gold));
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--paper);
  background:
    radial-gradient(circle at 72% 8%, rgba(66, 96, 67, .15), transparent 23rem),
    var(--forest);
  font-family: var(--serif-body);
  font-size: clamp(1.04rem, 1.2vw, 1.27rem);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body.is-paused * { animation-play-state: paused !important; }

::selection {
  color: var(--forest);
  background: var(--gold);
}

a {
  color: inherit;
}

p { text-wrap: pretty; }

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  touch-action: manipulation;
}

h1,
h2,
h3,
[id] {
  scroll-margin-top: 5rem;
}

h1,
h2,
h3 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  color: var(--forest);
  background: var(--gold-bright);
  transform: translateY(-180%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: none;
}

.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;
}

.grain {
  position: fixed;
  z-index: 90;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.site-header {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--pad);
  border-bottom: 1px solid rgba(232, 224, 202, .16);
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .7rem;
  font-family: var(--serif-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .045em;
  text-decoration: none;
}

.wordmark svg {
  width: 25px;
  height: 30px;
  fill: var(--gold);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3.5rem);
}

.site-nav a,
.guide-return {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after,
.guide-return::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  content: '';
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.guide-return:focus-visible::after,
.guide-return:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.wordmark { transition: color .3s var(--ease-out); }
.wordmark:hover,
.wordmark:focus-visible { color: var(--gold-bright); }

.menu-toggle {
  display: none;
}

.height-gauge {
  position: fixed;
  z-index: 75;
  top: 18vh;
  right: max(.75rem, 2vw);
  display: flex;
  height: 64vh;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  color: rgba(232, 224, 202, .78);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  pointer-events: none;
  writing-mode: vertical-rl;
}

.height-gauge__line {
  position: relative;
  width: 1px;
  flex: 1;
  overflow: visible;
  background: rgba(232, 224, 202, .38);
}

.height-gauge__line i {
  position: absolute;
  top: var(--page-progress, 0%);
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 18px var(--gold);
  transform: translateY(-50%);
  transition: top .18s linear;
}

.height-gauge__line i b {
  position: absolute;
  top: 50%;
  right: 1rem;
  min-width: 3.5rem;
  color: var(--gold-bright);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: right;
  transform: translateY(-50%);
  writing-mode: horizontal-tb;
}

.hero {
  position: relative;
  display: grid;
  min-height: max(760px, 100svh);
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8, 17, 13, .2) 0%, rgba(8, 17, 13, .18) 52%, #09130f 100%),
    radial-gradient(ellipse at 51% -2%, rgba(206, 207, 173, .25), transparent 38%),
    #0b1711;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background:
    repeating-linear-gradient(92deg, transparent 0 11%, rgba(0, 0, 0, .15) 11.2% 11.5%, transparent 11.8% 18%),
    linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 29% 72%, rgba(0, 0, 0, .52));
}

.hero__trunk {
  position: absolute;
  z-index: -1;
  top: -18%;
  height: 122%;
  background:
    repeating-linear-gradient(89deg, transparent 0 8px, rgba(20, 9, 5, .42) 9px 12px, transparent 14px 31px),
    linear-gradient(90deg, #321a10, var(--bark) 44%, #5d321e 73%, #24140d);
  box-shadow: 0 0 70px rgba(0, 0, 0, .65);
  filter: saturate(.75) brightness(.66);
  transition: transform 1.65s var(--ease-out);
}

.trunk--left {
  left: -7vw;
  width: clamp(140px, 19vw, 310px);
  transform: rotate(-1.8deg);
}

.trunk--right {
  right: -8vw;
  width: clamp(120px, 17vw, 280px);
  transform: rotate(2.1deg);
}

.canopy {
  position: absolute;
  z-index: -1;
  top: -2rem;
  width: 44vw;
  height: 44vh;
  filter: blur(.3px);
  transition: opacity 1.55s var(--ease-out);
}

.canopy i {
  position: absolute;
  display: block;
  width: clamp(110px, 17vw, 270px);
  aspect-ratio: 1.8 / 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(5deg, transparent 0 12px, rgba(105, 135, 89, .08) 13px 14px),
    radial-gradient(ellipse at 55% 55%, #29472e 0%, #102016 56%, rgba(5, 13, 9, .2) 73%);
  transform: rotate(var(--r, 0deg));
}

.canopy i::before,
.canopy i::after {
  position: absolute;
  top: 51%;
  left: 8%;
  width: 86%;
  height: 1px;
  content: '';
  opacity: .32;
  background: linear-gradient(90deg, transparent, #82936e 15% 82%, transparent);
  box-shadow: 0 -10px 0 rgba(110, 135, 91, .18), 0 11px 0 rgba(110, 135, 91, .14);
  transform: rotate(-4deg);
}

.canopy i::after {
  top: 47%;
  left: 19%;
  width: 67%;
  transform: rotate(18deg);
}

.canopy--left {
  left: -5%;
}

.canopy--right {
  right: -7%;
  transform: scaleX(-1);
}

.canopy i:nth-child(1) { top: -3%; left: 2%; --r: 8deg; }
.canopy i:nth-child(2) { top: 15%; left: 23%; --r: -16deg; }
.canopy i:nth-child(3) { top: -10%; left: 43%; --r: 12deg; }
.canopy i:nth-child(4) { top: 32%; left: -7%; --r: 19deg; }
.canopy i:nth-child(5) { top: 38%; left: 48%; --r: -5deg; }

.light-shaft {
  position: absolute;
  z-index: -1;
  top: -16%;
  width: 15vw;
  height: 122%;
  opacity: .27;
  background: linear-gradient(180deg, rgba(243, 220, 153, .9), rgba(214, 173, 101, .05) 72%, transparent);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform: skewX(-12deg);
  transform-origin: top;
  transition: opacity 1.8s var(--ease-out);
}

.shaft--one { left: 37%; }
.shaft--two { right: 19%; width: 8vw; opacity: .13; transform: skewX(11deg); }

.hero__fog,
.fog-bank {
  position: absolute;
  border-radius: 50%;
  background: rgba(197, 201, 182, .12);
  filter: blur(34px);
  animation: fogDrift 14s ease-in-out infinite alternate;
  transition: opacity 1.9s var(--ease-out);
}

.fog--one {
  right: -8%;
  bottom: 27%;
  width: 65%;
  height: 10%;
}

.fog--two {
  bottom: 11%;
  left: -10%;
  width: 57%;
  height: 13%;
  animation-delay: -7s;
}

@keyframes fogDrift {
  to { transform: translate3d(4vw, 1.5rem, 0) scale(1.06); }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(1060px, 78vw);
  padding-top: 3rem;
  text-align: center;
}

.eyebrow,
.kicker {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--serif-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(5.5rem, 14vw, 13.4rem);
  font-weight: 250;
  letter-spacing: -.07em;
  line-height: .68;
  text-shadow: 0 10px 46px rgba(0, 0, 0, .62);
}

.hero h1 span {
  display: block;
  margin: 0 0 .2em;
  color: var(--gold-bright);
  font-size: .18em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .08em;
  line-height: 1;
}

.hero__declaration {
  display: flex;
  width: min(640px, 76%);
  align-items: flex-end;
  justify-content: center;
  gap: 1.4rem;
  margin: clamp(2rem, 5vh, 4rem) auto 0;
}

.hero__declaration p {
  max-width: 190px;
  margin: 0 0 .55rem;
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1.25;
  text-align: right;
}

.hero__declaration strong {
  color: var(--gold-bright);
  font-family: var(--serif-display);
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
  font-weight: 350;
  letter-spacing: -.045em;
  line-height: .86;
}

.hero__declaration strong i {
  display: block;
  color: var(--paper);
  font-size: .31em;
  font-weight: 300;
  letter-spacing: .07em;
  text-align: left;
}

.hero__specimen {
  position: absolute;
  bottom: 1.7rem;
  left: var(--pad);
  display: flex;
  gap: 1.4rem;
  color: rgba(232, 224, 202, .66);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.descent-cue {
  position: absolute;
  right: calc(var(--pad) + 1.2rem);
  bottom: 1.2rem;
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: .9rem;
  color: var(--paper-dim);
  font-size: .72rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.descent-cue svg {
  width: 18px;
  height: 44px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  transition: transform .3s ease;
}

.descent-cue:hover svg,
.descent-cue:focus-visible svg { transform: translateY(5px); }

body:not(.is-ready) .trunk--left { transform: translate3d(18vw, 0, 0) rotate(-1.8deg); }
body:not(.is-ready) .trunk--right { transform: translate3d(-18vw, 0, 0) rotate(2.1deg); }
body:not(.is-ready) .canopy,
body:not(.is-ready) .light-shaft,
body:not(.is-ready) .hero__fog { opacity: 0; }

.load {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

body.is-ready .load { opacity: 1; transform: none; }
body.is-ready .load--1 { transition-delay: .12s; }
body.is-ready .load--2 { transition-delay: .25s; }
body.is-ready .load--3 { transition-delay: .52s; }
body.is-ready .load--4 { transition-delay: .72s; }
body.is-ready .load--5 { transition-delay: .84s; }

.reveal {
  opacity: .72;
  transform: translateY(22px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}

@media (min-width: 981px) {
  .hero__content {
    width: min(1120px, 78vw);
    text-align: left;
    transform: translateX(-3vw);
  }

  .hero__content .eyebrow { margin-left: 12%; }
  .hero h1 { margin-left: 7%; }
  .hero__declaration { width: min(610px, 57%); margin-right: 0; margin-left: 49%; }
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.section-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-areas: 'kicker lede' 'title lede';
  gap: 0 10vw;
  align-items: end;
  padding: 0 var(--pad);
}

.section-intro .kicker { grid-area: kicker; }
.section-intro h2 { grid-area: title; }
.section-intro .lede { grid-area: lede; }

.section-intro h2,
.scars h2,
.grove h2,
.ledger h2,
.closing h2 {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(3.6rem, 7.5vw, 8rem);
  font-weight: 250;
  letter-spacing: -.055em;
  line-height: .84;
}

h2 em {
  color: var(--gold-bright);
  font-weight: 260;
}

.lede {
  max-width: 31rem;
  margin: 0;
  color: var(--paper-dim);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  line-height: 1.42;
}

.transect {
  position: relative;
  padding: clamp(8rem, 15vw, 14rem) 0 clamp(8rem, 14vw, 13rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 52%, rgba(128, 145, 113, .12), transparent 30%),
    linear-gradient(180deg, #09130f, #0d1c15 50%, #09130f);
}

.transect::before {
  position: absolute;
  top: 27rem;
  bottom: -5rem;
  left: 50%;
  width: clamp(72px, 10vw, 150px);
  content: '';
  background:
    repeating-linear-gradient(91deg, transparent 0 9px, rgba(15, 8, 5, .35) 10px 13px, transparent 15px 29px),
    linear-gradient(90deg, #4b281a, #895036 45%, #432419);
  box-shadow: inset 1rem 0 2rem rgba(0, 0, 0, .3), inset -1rem 0 2rem rgba(0, 0, 0, .45), 0 0 80px rgba(0, 0, 0, .45);
  transform: translateX(-50%) perspective(300px) rotateX(-.5deg);
}

.transect__rule {
  position: absolute;
  top: 28rem;
  bottom: 0;
  left: calc(var(--pad) / 2);
  width: 1px;
  background: rgba(214, 173, 101, .2);
}

.transect__rule span {
  position: absolute;
  left: -.25rem;
  width: .55rem;
  height: 1px;
  background: var(--gold);
}

.transect__rule span:nth-child(1) { top: 0; }
.transect__rule span:nth-child(2) { top: 34%; }
.transect__rule span:nth-child(3) { top: 68%; }
.transect__rule span:nth-child(4) { bottom: 0; }

.transect__levels {
  position: relative;
  margin-top: clamp(9rem, 16vw, 17rem);
}

.level {
  position: relative;
  display: grid;
  min-height: 34rem;
  grid-template-columns: 10% minmax(260px, 35%) 1fr;
  gap: 3vw;
  align-items: center;
  padding: 4rem calc(var(--pad) + 3vw);
  border-top: 1px solid rgba(232, 224, 202, .12);
}

.level:nth-child(even) {
  grid-template-columns: 10% 1fr minmax(260px, 35%);
}

.level:nth-child(even) > div:nth-child(2) { grid-column: 3; }

.level__height {
  color: var(--gold);
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 250;
  letter-spacing: -.05em;
}

.level h3 {
  max-width: 24rem;
  margin: 0 0 1rem;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 3vw, 3.3rem);
  font-weight: 350;
  letter-spacing: -.035em;
  line-height: 1;
}

.level p:last-child {
  max-width: 27rem;
  margin: 0;
  color: var(--paper-dim);
}

.branch-illustration,
.epiphytes {
  position: absolute;
  right: 7vw;
  bottom: 20%;
  width: 28vw;
  height: 14rem;
  pointer-events: none;
}

.branch-illustration::before,
.epiphytes::before {
  position: absolute;
  right: 0;
  bottom: 2rem;
  width: 100%;
  height: 1rem;
  border-radius: 70% 5% 60% 35%;
  content: '';
  background: linear-gradient(180deg, #70422c, #321d14);
  transform: rotate(-5deg);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .4);
}

.branch-illustration i {
  position: absolute;
  right: var(--r);
  bottom: 3rem;
  width: .35rem;
  height: var(--h);
  border-radius: 50% 50% 0 0;
  background: #395d3b;
  transform: rotate(var(--rot));
  transform-origin: bottom;
  box-shadow: .7rem -.4rem 0 -.1rem #25432d, -.55rem -.9rem 0 -.12rem #456246;
}

.branch-illustration i:nth-child(1) { --r: 8%; --h: 8rem; --rot: 13deg; }
.branch-illustration i:nth-child(2) { --r: 25%; --h: 11rem; --rot: -8deg; }
.branch-illustration i:nth-child(3) { --r: 45%; --h: 7rem; --rot: 5deg; }
.branch-illustration b {
  position: absolute;
  right: 35%;
  bottom: 2.8rem;
  width: 4rem;
  height: 2rem;
  border-radius: 50%;
  background: #90956f;
  filter: blur(3px);
}

.branch-illustration b:last-child { right: 64%; width: 2.7rem; opacity: .7; }

.epiphytes {
  right: auto;
  left: 16vw;
  transform: scaleX(-1);
}

.epiphytes i {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 2.3rem;
  height: 7rem;
  margin: 5rem .1rem 0;
  border: solid #78906c;
  border-width: 0 1px;
  border-radius: 70% 5%;
  transform: rotate(var(--rot, 0deg));
}

.epiphytes i:nth-child(1) { --rot: -25deg; height: 5rem; }
.epiphytes i:nth-child(2) { --rot: -7deg; height: 8rem; }
.epiphytes i:nth-child(3) { --rot: 15deg; height: 6rem; }
.epiphytes i:nth-child(4) { --rot: 31deg; height: 4rem; }
.epiphytes i:nth-child(5) { --rot: 42deg; height: 6rem; }

.level--fog .fog-bank {
  z-index: -1;
  right: 2%;
  bottom: 28%;
  width: 60%;
  height: 8rem;
  background: rgba(197, 201, 182, .14);
}

.ring-vault {
  position: relative;
  height: 610vh;
  background:
    radial-gradient(circle at 22% 46%, rgba(140, 79, 47, .13), transparent 33%),
    linear-gradient(180deg, #080b09 0%, #16110d 45%, #070b08 100%);
}

.ring-vault__sticky {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  min-height: 680px;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .65fr);
  align-items: center;
  overflow: hidden;
}

.ring-vault__sticky::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  box-shadow: inset 0 5rem 7rem rgba(0, 0, 0, .35), inset 0 -5rem 7rem rgba(0, 0, 0, .45);
}

.ring-canvas-wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 50%, rgba(214, 173, 101, .07), transparent 37%),
    linear-gradient(90deg, transparent 97%, rgba(232, 224, 202, .05));
}

#ringCanvas {
  position: absolute;
  top: 50%;
  left: 42%;
  width: min(78vw, 920px);
  height: min(78vw, 920px);
  filter: saturate(.88) contrast(1.04);
  transform: translate(-50%, -50%);
}

.ring-canvas__center {
  position: absolute;
  top: 50%;
  left: 42%;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  opacity: .6;
  transform: translate(-50%, -50%);
}

.ring-canvas__center::before,
.ring-canvas__center::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  background: var(--gold-bright);
  transform: translate(-50%, -50%);
}

.ring-canvas__center::before { width: 28px; height: 1px; }
.ring-canvas__center::after { width: 1px; height: 28px; }

.ring-caption {
  position: absolute;
  bottom: 2.2rem;
  left: var(--pad);
  display: flex;
  width: min(42vw, 590px);
  justify-content: space-between;
  color: rgba(232, 224, 202, .55);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ring-caption::before {
  position: absolute;
  top: -.65rem;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, var(--bark-light), var(--gold-bright));
}

.ring-caption b {
  color: var(--paper);
  font-weight: 500;
}

.ring-story {
  position: relative;
  z-index: 3;
  padding: 3rem calc(var(--pad) + 2rem) 3rem 1rem;
}

.ring-story h2 {
  margin: 0 0 1.35rem;
  font-family: var(--serif-display);
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 250;
  letter-spacing: -.055em;
  line-height: .84;
}

.ring-story h2 em { color: var(--bark-light); }

.ring-jumps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 0 1.25rem;
}

.ring-jumps::before {
  position: absolute;
  top: 21px;
  right: 9%;
  left: 9%;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, var(--bark-light), rgba(214, 173, 101, .35));
}

.ring-jumps button {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: rgba(232, 224, 202, .58);
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.ring-jumps button::before {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  content: '';
  background: var(--forest);
  transform: scale(1);
  transition: transform .35s var(--ease-out), background-color .3s ease, box-shadow .3s ease;
}

.ring-jumps button span {
  position: absolute;
  top: 2.1rem;
  opacity: 0;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .3s var(--ease-out);
}

.ring-jumps button:hover,
.ring-jumps button.is-active { color: var(--gold-bright); }
.ring-jumps button:hover::before,
.ring-jumps button.is-active::before {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(214, 173, 101, .12);
  transform: scale(2);
}
.ring-jumps button:hover span,
.ring-jumps button:focus-visible span,
.ring-jumps button.is-active span { opacity: 1; transform: none; }

.ring-story__chapter {
  min-height: 14.25rem;
}

.ring-story__date {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(232, 224, 202, .2);
}

.ring-story__date span {
  color: var(--gold-bright);
  font-family: var(--serif-display);
  font-size: clamp(3.3rem, 6vw, 6.7rem);
  font-weight: 250;
  letter-spacing: -.06em;
  line-height: .9;
  font-variant-numeric: tabular-nums lining-nums;
}

.ring-story__date small {
  color: var(--paper-dim);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ring-story h3 {
  margin: 0 0 .6rem;
  font-family: var(--serif-display);
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 350;
  line-height: 1.05;
}

.ring-story__chapter > p {
  max-width: 28rem;
  min-height: 6.1rem;
  margin: 0;
  color: var(--paper-dim);
  font-size: 1.1rem;
}

.ring-story__measure {
  display: flex;
  justify-content: space-between;
  margin-top: 1.8rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(232, 224, 202, .2);
  border-bottom: 1px solid rgba(232, 224, 202, .2);
  color: var(--gold);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
}

.ring-instruction {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.5rem 0 0;
  color: rgba(232, 224, 202, .54);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ring-instruction i {
  display: block;
  width: 1.8rem;
  height: 1px;
  background: var(--gold);
}

.rome-marker {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 61%;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 5vw;
  opacity: 0;
  background: linear-gradient(90deg, rgba(5, 9, 7, .97) 0%, rgba(5, 9, 7, .88) 62%, transparent 100%);
  pointer-events: none;
  transform: translateX(-2rem);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}

.rome-marker.is-active {
  opacity: 1;
  transform: none;
}

.rome-marker span {
  display: block;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rome-marker strong {
  display: block;
  margin: 1rem 0;
  font-family: var(--serif-display);
  font-size: clamp(5.5rem, 10vw, 9rem);
  font-weight: 230;
  letter-spacing: -.07em;
  line-height: .72;
}

.rome-marker b {
  color: var(--gold-bright);
  font-family: var(--serif-display);
  font-size: clamp(1.8rem, 3vw, 3.25rem);
  font-style: italic;
  font-weight: 300;
}

.rome-marker p {
  max-width: 21rem;
  margin: 1rem 0 0;
  color: var(--paper-dim);
  font-style: italic;
}

.scars {
  position: relative;
  padding: clamp(8rem, 14vw, 15rem) var(--pad);
  background:
    radial-gradient(ellipse at 78% 14%, rgba(140, 79, 47, .18), transparent 29%),
    linear-gradient(180deg, #080c09, #0e1711 56%, #08100c);
}

.scars__opening,
.ledger__header {
  display: grid;
  grid-template-columns: 1.1fr .7fr;
  gap: 8vw;
  align-items: end;
}

.scars__opening .lede {
  margin-bottom: .25rem;
}

.scar-sequence {
  margin-top: clamp(8rem, 15vw, 14rem);
}

.scar-card {
  display: grid;
  min-height: 29rem;
  grid-template-columns: minmax(280px, .9fr) minmax(300px, .8fr);
  gap: 8vw;
  align-items: center;
  padding: 3.8rem 6vw;
  border-top: 1px solid rgba(232, 224, 202, .12);
}

.scar-card:nth-child(even) .scar-shape { order: 2; }

.scar-shape {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1.18 / 1;
  margin: auto;
  overflow: hidden;
  border-radius: 48% 52% 45% 55% / 58% 43% 57% 42%;
  background:
    repeating-radial-gradient(ellipse at 60% 43%, transparent 0 8px, rgba(230, 178, 107, .14) 9px 11px, transparent 12px 18px),
    radial-gradient(ellipse at 62% 46%, #9f5b36, #62341f 53%, #301a12 79%);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .65), 0 2.5rem 5rem rgba(0, 0, 0, .25);
  transform: rotate(-4deg);
}

.scar-shape::before {
  position: absolute;
  inset: 9% 13%;
  border: 2px solid rgba(234, 185, 111, .25);
  border-radius: inherit;
  content: '';
  transform: rotate(4deg);
}

.scar-shape span {
  position: absolute;
  top: 4%;
  bottom: 2%;
  left: 14%;
  width: 39%;
  border-radius: 50% 36% 58% 42% / 30% 48% 52% 70%;
  background:
    radial-gradient(ellipse at 70% 55%, rgba(107, 58, 35, .85), transparent 38%),
    repeating-linear-gradient(78deg, transparent 0 11px, rgba(239, 191, 120, .08) 12px 13px),
    #140f0c;
  box-shadow: inset -1.6rem 0 2rem #080706, inset 1.2rem 0 2rem rgba(147, 75, 38, .45), 0 0 1.5rem #120c08;
  transform: rotate(7deg);
}

.scar-card--two .scar-shape { transform: rotate(5deg) scale(.9); }
.scar-card--two .scar-shape span { left: 47%; width: 28%; transform: rotate(-5deg); }
.scar-card--three .scar-shape { transform: rotate(-1deg) scale(.82); }
.scar-card--three .scar-shape span { top: 27%; bottom: 8%; left: 21%; width: 48%; }

.scar-card--one .scar-shape {
  border-radius: 43% 57% 49% 51% / 55% 41% 59% 45%;
  clip-path: polygon(7% 27%, 19% 8%, 55% 1%, 89% 15%, 100% 49%, 90% 80%, 59% 98%, 23% 92%, 2% 66%);
}

.scar-card--two .scar-shape {
  aspect-ratio: 1.45 / 1;
  border-radius: 55% 45% 52% 48% / 43% 57% 45% 55%;
  clip-path: polygon(3% 42%, 13% 13%, 45% 2%, 82% 8%, 99% 35%, 95% 70%, 69% 96%, 30% 91%, 6% 70%);
}

.scar-card--three .scar-shape {
  width: min(82%, 390px);
  aspect-ratio: .88 / 1;
  border-radius: 46% 54% 39% 61% / 50% 43% 57% 50%;
  clip-path: polygon(19% 5%, 63% 0, 91% 19%, 98% 60%, 77% 94%, 41% 100%, 9% 79%, 1% 37%);
}

.scar-card__copy > span,
.tree-record > div span,
.tree-record dt {
  color: var(--gold);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.scar-card h3,
.tree-record h3 {
  margin: .9rem 0 1rem;
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: .95;
}

.scar-card p {
  max-width: 29rem;
  margin: 0;
  color: var(--paper-dim);
}

.scar-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 29rem;
  margin: 2rem 0 0;
  border-top: 1px solid rgba(214, 173, 101, .28);
}

.scar-stats div { padding: .8rem .8rem 0 0; }
.scar-stats dt {
  color: var(--paper-dim);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.scar-stats dd {
  margin: .15rem 0 0;
  color: var(--gold-bright);
  font-family: var(--serif-display);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.fire-chamber {
  position: relative;
  display: grid;
  min-height: 42rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(21rem, .72fr);
  margin-top: clamp(7rem, 12vw, 11rem);
  overflow: hidden;
  border: 1px solid rgba(214, 173, 101, .25);
  background: #070c09;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, .32), inset 0 1px rgba(232, 224, 202, .04);
  isolation: isolate;
}

.fire-chamber::after {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 60%;
  width: 1px;
  content: '';
  opacity: .3;
  background: linear-gradient(transparent, var(--gold), transparent);
  pointer-events: none;
}

.fire-chamber__visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.fire-scene {
  position: absolute;
  inset: 0;
  min-height: 42rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 36%, rgba(214, 173, 101, .11), transparent 19rem),
    linear-gradient(180deg, #102218 0%, #0b1912 55%, #15130d 100%);
  box-shadow: inset 0 0 7rem rgba(0, 0, 0, .42);
}

.fire-scene::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  content: '';
  background:
    repeating-linear-gradient(92deg, transparent 0 4.8rem, rgba(232, 224, 202, .025) 4.85rem 4.9rem),
    linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 35% 70%, rgba(0, 0, 0, .35));
  pointer-events: none;
}

.fire-scene__light {
  position: absolute;
  z-index: 1;
  top: -16%;
  left: 53%;
  width: 37%;
  height: 116%;
  opacity: .08;
  background: linear-gradient(180deg, rgba(255, 228, 151, .88), rgba(214, 173, 101, .13) 66%, transparent);
  filter: blur(8px);
  transform: skewX(-13deg) scaleX(.48);
  transform-origin: top;
  transition: opacity .9s var(--ease-out), transform 1.15s var(--ease-out);
}

.fire-scene__canopy {
  position: absolute;
  z-index: 3;
  top: -4%;
  left: -8%;
  width: 116%;
  height: 31%;
  opacity: .96;
  background:
    repeating-linear-gradient(8deg, transparent 0 12px, rgba(115, 145, 97, .09) 13px 14px),
    radial-gradient(ellipse at 28% 100%, #29462d 0 22%, transparent 23%),
    radial-gradient(ellipse at 58% 90%, #213b27 0 27%, transparent 28%),
    radial-gradient(ellipse at 87% 100%, #162d1d 0 26%, transparent 27%);
  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .38));
  transform-origin: top;
  transition: opacity 1s var(--ease-out), transform 1.15s var(--ease-out);
}

.fire-scene__trunk {
  position: absolute;
  z-index: 2;
  top: 3%;
  bottom: 11%;
  display: block;
  width: 16%;
  background:
    repeating-linear-gradient(91deg, transparent 0 9px, rgba(24, 11, 7, .42) 10px 13px, transparent 15px 25px),
    linear-gradient(90deg, #3b2015, #8c4f2f 47%, #4c291b);
  box-shadow: inset 1.4rem 0 2rem rgba(0, 0, 0, .28), inset -1rem 0 1.6rem rgba(0, 0, 0, .42), 0 0 3rem rgba(0, 0, 0, .4);
  opacity: .8;
  filter: brightness(.68) saturate(.78);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}

.fire-scene__trunk--one { left: 12%; transform: rotate(-1.5deg); }
.fire-scene__trunk--two { right: 10%; width: 19%; transform: rotate(2deg); }

.fire-scene__scar {
  position: absolute;
  z-index: 6;
  top: 24%;
  right: 4.5%;
  width: min(23vw, 15rem);
  aspect-ratio: 1;
  border-radius: 49% 51% 44% 56%;
  opacity: .18;
  background: radial-gradient(circle at 47% 48%, #b97649 0 9%, #8d4d2e 10% 49%, #43251a 50% 76%, #160f0b 77%);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .48), inset 0 0 2.7rem rgba(0, 0, 0, .52), 0 0 0 1px rgba(239, 209, 139, .2);
  transform: scale(.72) rotate(7deg);
  transition: opacity .85s var(--ease-out), transform 1.1s var(--ease-out);
}

.fire-scene__scar::before {
  position: absolute;
  top: 8%;
  right: 5%;
  bottom: 11%;
  width: 34%;
  border-radius: 57% 35% 53% 45%;
  content: '';
  background: #110d0a;
  box-shadow: -5px 0 0 rgba(191, 105, 57, .8), inset 10px 0 1rem #050504;
  transform: rotate(-7deg);
}

.fire-scene__scar i {
  position: absolute;
  inset: var(--inset);
  border: 1px solid rgba(44, 22, 14, .45);
  border-radius: 50% 47% 52% 45%;
}

.fire-scene__scar i:nth-child(1) { --inset: 17%; }
.fire-scene__scar i:nth-child(2) { --inset: 30%; }
.fire-scene__scar i:nth-child(3) { --inset: 41%; }

.fire-scene__ground {
  position: absolute;
  z-index: 4;
  right: -5%;
  bottom: -4%;
  left: -5%;
  height: 22%;
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  background:
    repeating-linear-gradient(7deg, transparent 0 14px, rgba(216, 157, 86, .06) 15px 16px),
    linear-gradient(180deg, #2c2116, #0f0d09 62%);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, .4), inset 0 1px rgba(214, 173, 101, .22);
}

.fire-scene__flames,
.fire-scene__ash,
.fire-scene__seedlings {
  position: absolute;
  z-index: 7;
  right: 8%;
  bottom: 10%;
  left: 7%;
  height: 24%;
  pointer-events: none;
}

.fire-scene__flames i {
  position: absolute;
  bottom: 0;
  left: var(--left);
  display: block;
  width: var(--width);
  height: var(--height);
  opacity: .86;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(99, 39, 20, .9), transparent 48%),
    linear-gradient(165deg, var(--gold-bright), #c56935 52%, rgba(79, 30, 17, .34));
  clip-path: polygon(50% 0, 62% 20%, 59% 35%, 77% 48%, 94% 70%, 82% 100%, 17% 100%, 5% 73%, 22% 49%, 27% 28%);
  filter: drop-shadow(0 0 .8rem rgba(226, 130, 56, .34));
  transform: scaleY(1) rotate(var(--lean));
  transform-origin: bottom;
  transition: opacity .65s var(--ease-out), transform .9s var(--ease-out);
  animation: flameLean 1.8s ease-in-out infinite alternate;
}

.fire-scene__flames i::after {
  position: absolute;
  right: 24%;
  bottom: 0;
  left: 24%;
  height: 56%;
  content: '';
  opacity: .7;
  background: linear-gradient(180deg, #f3d390, #db8447);
  clip-path: polygon(50% 0, 72% 34%, 92% 65%, 75% 100%, 20% 100%, 7% 62%, 30% 38%);
}

.fire-scene__flames i:nth-child(1) { --left: 2%; --width: 2.6rem; --height: 5.2rem; --lean: -5deg; }
.fire-scene__flames i:nth-child(2) { --left: 22%; --width: 3.2rem; --height: 7rem; --lean: 4deg; animation-delay: -.7s; }
.fire-scene__flames i:nth-child(3) { --left: 46%; --width: 2.4rem; --height: 4.3rem; --lean: -3deg; animation-delay: -1.1s; }
.fire-scene__flames i:nth-child(4) { --left: 67%; --width: 3rem; --height: 6.4rem; --lean: 6deg; animation-delay: -.3s; }
.fire-scene__flames i:nth-child(5) { --left: 87%; --width: 2rem; --height: 3.7rem; --lean: -4deg; animation-delay: -1.4s; }

@keyframes flameLean {
  to { transform: scaleY(.91) translateX(.25rem) rotate(-2deg); }
}

.fire-scene__ash { z-index: 6; bottom: 16%; height: 52%; }
.fire-scene__ash i {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  background: var(--paper-dim);
  box-shadow: 0 0 .5rem rgba(232, 224, 202, .35);
  transform: translateY(2rem);
  transition: opacity .8s var(--ease-out), transform 1.3s var(--ease-out);
}

.fire-scene__ash i:nth-child(1) { --left: 14%; --top: 56%; }
.fire-scene__ash i:nth-child(2) { --left: 31%; --top: 24%; }
.fire-scene__ash i:nth-child(3) { --left: 48%; --top: 67%; }
.fire-scene__ash i:nth-child(4) { --left: 63%; --top: 18%; }
.fire-scene__ash i:nth-child(5) { --left: 77%; --top: 48%; }
.fire-scene__ash i:nth-child(6) { --left: 89%; --top: 30%; }

.fire-scene__seedlings { bottom: 10%; height: 16%; }
.fire-scene__seedlings i {
  position: absolute;
  bottom: 0;
  left: var(--left);
  width: 2px;
  height: var(--height);
  opacity: 0;
  background: #91a86e;
  box-shadow: 0 0 .8rem rgba(150, 178, 104, .28);
  transform: scaleY(.08);
  transform-origin: bottom;
  transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out);
}

.fire-scene__seedlings i::before,
.fire-scene__seedlings i::after {
  position: absolute;
  top: 23%;
  width: 1.25rem;
  height: .55rem;
  border-radius: 100% 0 100% 0;
  content: '';
  background: #789360;
  transform: rotate(22deg);
  transform-origin: left;
}

.fire-scene__seedlings i::after { right: 0; transform: scaleX(-1) rotate(22deg); transform-origin: right; }
.fire-scene__seedlings i:nth-child(1) { --left: 11%; --height: 4.4rem; }
.fire-scene__seedlings i:nth-child(2) { --left: 29%; --height: 3.1rem; }
.fire-scene__seedlings i:nth-child(3) { --left: 51%; --height: 5.2rem; }
.fire-scene__seedlings i:nth-child(4) { --left: 72%; --height: 3.8rem; }
.fire-scene__seedlings i:nth-child(5) { --left: 89%; --height: 4.7rem; }

.fire-scene__phase {
  position: absolute;
  z-index: 9;
  top: 1.4rem;
  left: 1.5rem;
  color: rgba(232, 224, 202, .68);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

.fire-scene__phase b { color: var(--gold-bright); font-weight: 600; }

.fire-chamber[data-stage="1"] .fire-scene__flames i,
.fire-chamber[data-stage="2"] .fire-scene__flames i,
.fire-chamber[data-stage="3"] .fire-scene__flames i { opacity: 0; transform: scaleY(.06); animation-play-state: paused; }

.fire-chamber[data-stage="1"] .fire-scene__ash i { opacity: .76; transform: none; }
.fire-chamber[data-stage="2"] .fire-scene__light { opacity: .76; transform: skewX(-13deg) scaleX(1.18); }
.fire-chamber[data-stage="2"] .fire-scene__canopy { opacity: .5; transform: translateY(-18%) scale(.93); }
.fire-chamber[data-stage="2"] .fire-scene__seedlings i { opacity: 1; transform: scaleY(1); }
.fire-chamber[data-stage="3"] .fire-scene__scar { opacity: 1; transform: scale(1) rotate(2deg); }
.fire-chamber[data-stage="3"] .fire-scene__trunk { opacity: 1; }
.fire-chamber[data-stage="3"] .fire-scene__trunk--two { transform: rotate(1deg) scaleX(1.08); }

.fire-chamber__copy {
  position: relative;
  z-index: 6;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 4vw, 4.5rem);
  background:
    radial-gradient(circle at 0 50%, rgba(140, 79, 47, .14), transparent 17rem),
    linear-gradient(145deg, #0a120e, #070c09);
}

.fire-chamber__copy h3 {
  max-width: 8.5ch;
  margin: .25rem 0 1rem;
  font-family: var(--serif-display);
  font-size: clamp(3rem, 4.8vw, 5.2rem);
  font-weight: 270;
  letter-spacing: -.05em;
  line-height: .9;
  text-wrap: balance;
}

.fire-chamber__copy > p:not(.kicker) {
  max-width: 28rem;
  min-height: 7.2rem;
  margin: 0;
  color: var(--paper-dim);
  font-size: 1.05rem;
}

.fire-stage-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.2rem 0 1.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(214, 173, 101, .26);
}

.fire-stage-data dt {
  color: var(--paper-dim);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.fire-stage-data dd {
  margin: .25rem 0 0;
  color: var(--gold-bright);
  font-family: var(--serif-display);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}

.fire-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(232, 224, 202, .18);
  border-bottom: 1px solid rgba(232, 224, 202, .18);
}

.fire-controls button {
  min-width: 0;
  min-height: 66px;
  padding: .7rem .45rem;
  border: 0;
  border-right: 1px solid rgba(232, 224, 202, .16);
  color: var(--paper-dim);
  background: transparent;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.1;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .3s var(--ease-out), background-color .4s var(--ease-out);
}

.fire-controls button:last-child { border-right: 0; }
.fire-controls button span {
  display: block;
  margin-bottom: .4rem;
  color: var(--gold);
  font-size: .55rem;
  letter-spacing: .14em;
  transition: color .3s var(--ease-out);
}

.fire-controls button:hover,
.fire-controls button:focus-visible,
.fire-controls button.is-active {
  color: var(--forest);
  background: var(--gold-bright);
}

.fire-controls button:hover span,
.fire-controls button:focus-visible span,
.fire-controls button.is-active span { color: var(--bark-dark); }

.grove {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(275px, .34fr);
  gap: 4vw;
  padding: clamp(8rem, 14vw, 14rem) var(--pad);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 46%, rgba(197, 201, 182, .08), transparent 30%),
    #0f1c15;
}

.grove__heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.grove__heading > p:last-child {
  max-width: 16rem;
  margin: 0;
  color: var(--paper-dim);
  font-style: italic;
}

.grove-map {
  grid-column: 1;
  position: relative;
  margin-top: 7rem;
  border: 1px solid rgba(214, 173, 101, .22);
  background: #13231a;
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .26), 0 2rem 5rem rgba(0, 0, 0, .18);
}

.grove-index {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-right: 1px solid rgba(214, 173, 101, .22);
  border-bottom: 1px solid rgba(214, 173, 101, .22);
  border-left: 1px solid rgba(214, 173, 101, .22);
}

.grove-index button {
  min-width: 0;
  min-height: 58px;
  padding: .8rem;
  border: 0;
  border-right: 1px solid rgba(232, 224, 202, .12);
  color: var(--paper-dim);
  background: rgba(7, 15, 11, .48);
  font-size: .7rem;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}

.grove-index button:last-child { border-right: 0; }
.grove-index button span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.grove-index button:hover,
.grove-index button.is-active {
  color: var(--forest);
  background: var(--gold-bright);
}
.grove-index button.is-active span { color: var(--bark-dark); }

.grove-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.contour {
  fill: none;
  stroke: rgba(214, 173, 101, .32);
  stroke-width: 1.2;
}

.contour--minor { stroke-dasharray: 3 6; opacity: .6; }
.creek { fill: none; stroke: rgba(152, 181, 173, .6); stroke-width: 4; }
.trail { fill: none; stroke: rgba(232, 224, 202, .5); stroke-width: 2; stroke-dasharray: 8 12; }
.map-fog { fill: rgba(197, 201, 182, .07); }
.tree-symbols circle { fill: none; stroke: rgba(214, 173, 101, .43); stroke-width: 1; }
.grove-map text { fill: rgba(232, 224, 202, .48); font-family: var(--serif-body); font-size: 13px; letter-spacing: 2px; }
.grove-map text { fill: rgba(232, 224, 202, .67); font-weight: 600; }

.map-pin {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.map-pin span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  background: var(--forest);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(214, 173, 101, .25);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.map-pin b {
  position: absolute;
  left: 100%;
  width: 10rem;
  opacity: 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-.2rem) scaleX(.9);
  transform-origin: left;
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out);
}

.map-pin:hover b,
.map-pin:focus-visible b,
.map-pin.is-active b {
  opacity: 1;
  transform: translateX(.6rem) scaleX(1);
}

.map-pin.is-active span {
  color: var(--forest);
  background: var(--gold-bright);
  box-shadow: 0 0 0 .55rem rgba(214, 173, 101, .12);
}

.tree-record {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  margin-bottom: 3rem;
  padding: 2rem;
  border-top: 2px solid var(--bark-light);
  background: rgba(7, 15, 11, .74);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .25);
}

.tree-record > div:first-child {
  display: flex;
  justify-content: space-between;
}

.tree-record > div strong {
  color: var(--paper-dim);
  font-size: .8rem;
  letter-spacing: .1em;
}

.tree-record h3 { font-size: clamp(2.2rem, 3.5vw, 3.8rem); }

.tree-record > p {
  min-height: 8.5rem;
  color: var(--paper-dim);
  font-size: 1rem;
}

.tree-record dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 224, 202, .18);
}

.tree-record dl div { display: flex; flex-direction: column; }
.tree-record dt { font-size: .56rem; }
.tree-record dd { margin: .2rem 0 0; font-family: var(--serif-display); font-size: 1.25rem; }

.height-gauge,
.hero__specimen,
.ring-caption,
.ring-story__measure,
.scar-stats dd,
.tree-record dd,
.ledger__row b,
.guide-hero__metrics dd { font-variant-numeric: tabular-nums lining-nums; }

.ledger {
  padding: clamp(8rem, 14vw, 14rem) var(--pad);
  color: var(--forest);
  background:
    linear-gradient(90deg, rgba(140, 79, 47, .06) 1px, transparent 1px) 0 0 / 8vw 100%,
    var(--paper);
}

.ledger h2 em { color: var(--bark); }

.ledger__header > p {
  max-width: 25rem;
  margin: 0;
  color: #495048;
  font-size: 1.18rem;
}

.ledger .kicker { color: var(--bark); }

.ledger__table {
  margin-top: clamp(6rem, 10vw, 10rem);
  border-top: 2px solid var(--forest);
}

.ledger__row {
  display: grid;
  grid-template-columns: 1.1fr .85fr .65fr 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.6rem .5rem;
  border-bottom: 1px solid rgba(9, 19, 15, .3);
}

.ledger__row strong {
  font-family: var(--serif-display);
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  font-weight: 400;
}

.ledger__row b {
  color: var(--bark-dark);
  font-family: var(--serif-display);
  font-size: 1.35rem;
  font-weight: 500;
}

.ledger__row span {
  color: #445047;
}

.ledger__row--head {
  padding-top: .8rem;
  padding-bottom: .8rem;
  color: var(--bark-dark);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ledger__row--focus {
  margin: 0 -.9rem;
  padding-right: 1.4rem;
  padding-left: 1.4rem;
  color: var(--paper);
  background: var(--bark);
}

.ledger__row--focus span,
.ledger__row--focus b { color: var(--paper); }

.ledger__note {
  max-width: 36rem;
  margin: 2rem 0 0 auto;
  color: #50594f;
  font-size: .88rem;
  font-style: italic;
}

.closing {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(140, 79, 47, .22), transparent 38%),
    var(--forest);
}

.closing__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86vw, 1050px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.closing__rings i {
  position: absolute;
  inset: var(--inset);
  border: 1px solid rgba(214, 173, 101, .14);
  border-radius: 50% 48% 52% 46%;
  transform: rotate(var(--r));
}

.closing__rings i:nth-child(1) { --inset: 0%; --r: 3deg; }
.closing__rings i:nth-child(2) { --inset: 10%; --r: -5deg; }
.closing__rings i:nth-child(3) { --inset: 21%; --r: 7deg; }
.closing__rings i:nth-child(4) { --inset: 33%; --r: -8deg; }
.closing__rings i:nth-child(5) { --inset: 45%; --r: 4deg; }

.closing__copy {
  position: relative;
  z-index: 2;
  max-width: 57rem;
  padding: 8rem var(--pad);
  text-align: center;
}

.closing__copy p:not(.kicker) {
  max-width: 38rem;
  margin: 2.2rem auto;
  color: var(--paper-dim);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--gold);
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link span { color: var(--gold); font-size: 1.1rem; }
.text-link { transition: color .25s ease; }
.text-link span { transition: transform .3s var(--ease-out); }
.text-link:hover,
.text-link:focus-visible { color: var(--gold-bright); }
.text-link:hover span,
.text-link:focus-visible span { transform: translateY(-4px); }

.site-footer {
  position: relative;
  display: grid;
  min-height: 15rem;
  grid-template-columns: 1fr auto 80px;
  gap: 3rem;
  align-items: center;
  padding: 3rem var(--pad);
  border-top: 1px solid rgba(232, 224, 202, .16);
  color: var(--paper-dim);
  background: #060d0a;
  font-size: .75rem;
  letter-spacing: .07em;
}

.site-footer p { margin: 0; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem 2rem;
}

.site-footer nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-underline-offset: .3rem;
  transition: color .25s ease;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible { color: var(--gold-bright); }

.footer-mark {
  display: grid;
  width: 60px;
  height: 70px;
  place-items: center;
}

.footer-mark svg { width: 32px; height: 42px; fill: var(--bark-light); transition: fill .3s ease; }
.footer-mark:hover svg,
.footer-mark:focus-visible svg { fill: var(--gold); }

/* Field guide */
.guide-page {
  background:
    linear-gradient(90deg, rgba(214, 173, 101, .025) 1px, transparent 1px) 0 0 / 8vw 100%,
    var(--forest);
}

.guide-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--pad);
  border-bottom: 1px solid rgba(232, 224, 202, .15);
}

.guide-return { gap: .6rem; }
.guide-return span { color: var(--gold); font-size: 1rem; }

.guide-main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.guide-hero {
  position: relative;
  display: flex;
  min-height: 78svh;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 224, 202, .18);
}

.guide-hero h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(4.5rem, 10vw, 10rem);
  font-weight: 250;
  letter-spacing: -.065em;
  line-height: .76;
}

.guide-hero h1 em { color: var(--gold-bright); font-weight: 250; }

.guide-hero__dek {
  position: relative;
  z-index: 2;
  max-width: 32rem;
  margin: 3rem 0 0 40%;
  color: var(--paper-dim);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.35;
}

.guide-hero__metrics {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2.5rem;
  margin: 0;
}

.guide-hero__metrics div { display: flex; flex-direction: column; }
.guide-hero__metrics dt {
  color: var(--gold);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.guide-hero__metrics dd { margin: .15rem 0 0; color: var(--paper-dim); font-size: .82rem; }

.guide-hero__rings {
  position: absolute;
  top: 50%;
  right: -8%;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.guide-hero__rings i {
  position: absolute;
  inset: var(--inset);
  border: 1px solid rgba(214, 173, 101, .16);
  border-radius: 48% 52% 45% 55%;
  transform: rotate(var(--r));
}

.guide-hero__rings i:nth-child(1) { --inset: 0; --r: 0deg; }
.guide-hero__rings i:nth-child(2) { --inset: 8%; --r: 7deg; }
.guide-hero__rings i:nth-child(3) { --inset: 17%; --r: -5deg; }
.guide-hero__rings i:nth-child(4) { --inset: 27%; --r: 9deg; }
.guide-hero__rings i:nth-child(5) { --inset: 38%; --r: -8deg; }
.guide-hero__rings i:nth-child(6) { --inset: 47%; --r: 2deg; background: var(--bark); box-shadow: 0 0 4rem rgba(140, 79, 47, .35); }

.guide-article {
  width: min(930px, 100%);
  margin: 0 auto;
  padding: 5rem 0 10rem;
}

.guide-article section {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) 1fr;
  gap: 0 3rem;
  padding: 5rem 0;
  border-bottom: 1px solid rgba(232, 224, 202, .16);
}

.guide-num {
  grid-row: 1 / 5;
  margin: .75rem 0 0;
  color: var(--gold);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.guide-article h2 {
  margin: 0 0 1.7rem;
  font-family: var(--serif-display);
  font-size: clamp(2.3rem, 4.5vw, 4.3rem);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: .95;
}

.guide-article section > p:not(.guide-num) {
  grid-column: 2;
  margin: 0 0 1.2rem;
  color: var(--paper-dim);
  font-size: 1.16rem;
}

.guide-article code {
  padding: .05rem .3rem;
  color: var(--gold-bright);
  background: rgba(140, 79, 47, .18);
  font-family: var(--serif-body);
  font-size: .87em;
}

.guide-ring-schematic {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: 2rem;
  align-items: center;
  margin: .7rem 0 2rem;
  padding: 1.3rem;
  border: 1px solid rgba(214, 173, 101, .18);
  background: rgba(140, 79, 47, .07);
}

.guide-ring-schematic > div {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50% 48% 52% 45%;
  background: radial-gradient(circle, #d3a06b 0 19%, #9d5c38 20% 52%, #673620 53% 79%, #291710 80%);
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, .42);
}
.guide-ring-schematic i {
  position: absolute;
  inset: var(--i);
  border: 1px solid rgba(45, 22, 13, .48);
  border-radius: 48% 52% 47% 53%;
}
.guide-ring-schematic i:nth-child(1) { --i: 8%; }
.guide-ring-schematic i:nth-child(2) { --i: 21%; border-width: 3px; }
.guide-ring-schematic i:nth-child(3) { --i: 35%; }
.guide-ring-schematic b {
  position: absolute;
  top: 26%;
  right: 4%;
  bottom: 16%;
  width: 28%;
  border-radius: 50%;
  background: #17100c;
  box-shadow: -5px 0 0 rgba(177, 91, 47, .75);
  transform: rotate(-18deg);
}
.guide-ring-schematic figcaption { display: grid; gap: .65rem; }
.guide-ring-schematic figcaption span {
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(232, 224, 202, .14);
  color: var(--paper-dim);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.swatches {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
  margin-bottom: 2rem;
}

.swatches span {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  justify-content: flex-end;
  padding: .75rem;
  color: var(--paper);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(232, 224, 202, .18);
}

.swatches b { font-size: .72rem; font-weight: 600; line-height: 1.1; }
.swatches small { margin-top: .35rem; font-size: .58rem; letter-spacing: .08em; opacity: .75; }
.swatches span:nth-child(3),
.swatches span:nth-child(4) { color: var(--forest); }

.guide-prompt {
  position: relative;
}

.guide-prompt::before {
  position: absolute;
  z-index: -1;
  inset: 1.5rem -4rem;
  content: '';
  background: linear-gradient(135deg, rgba(140, 79, 47, .22), transparent 65%);
}

.guide-footer { margin-top: 0; }

@media (max-width: 980px) {
  .height-gauge { right: .65rem; }
  .site-nav { gap: 1.2rem; }
  .site-nav a { font-size: .7rem; }
  .section-intro { gap: 0 5vw; }
  .level { grid-template-columns: 12% minmax(240px, 42%) 1fr; padding-right: 3rem; }
  .level:nth-child(even) { grid-template-columns: 12% 1fr minmax(240px, 42%); }
  .ring-vault__sticky { grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); }
  #ringCanvas { left: 35%; width: 82vw; height: 82vw; }
  .ring-canvas__center { left: 35%; }
  .ring-story { padding-right: 2.5rem; }
  .scar-card { min-height: 25rem; gap: 4vw; padding: 2.8rem 3vw; }
  .fire-chamber { grid-template-columns: 1fr; }
  .fire-chamber::after { display: none; }
  .fire-chamber__visual { min-height: 32rem; }
  .fire-scene { min-height: 32rem; }
  .fire-scene__scar { width: min(30vw, 14rem); }
  .fire-chamber__copy { min-height: 34rem; }
  .grove { grid-template-columns: 1fr; }
  .grove-map { margin-top: 5rem; }
  .grove-map,
  .grove-index,
  .tree-record { grid-column: 1; grid-row: auto; }
  .tree-record { width: min(100%, 35rem); margin: 1rem 0 0 auto; }
  .site-footer { grid-template-columns: 1fr auto; }
  .footer-mark { display: none; }
  .guide-hero__rings { right: 0; }
  .guide-prompt::before { inset: 1rem -1.25rem; }
}

@media (max-width: 860px) {
  .site-header {
    align-items: flex-start;
    padding-top: .9rem;
    padding-bottom: .9rem;
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 84px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    padding: 0;
    border: 0;
    color: var(--paper);
    background: transparent;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .menu-toggle i,
  .menu-toggle i::before {
    display: block;
    width: 1.1rem;
    height: 1px;
    content: '';
    background: var(--gold);
    transition: transform .25s ease;
  }

  .menu-toggle i::before { transform: translateY(-5px); }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::before { transform: rotate(90deg); }

  .site-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(82vw, 360px);
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .4rem;
    padding: 5rem 2rem;
    visibility: hidden;
    opacity: 0;
    background: rgba(6, 14, 10, .98);
    box-shadow: -2rem 0 5rem rgba(0, 0, 0, .4);
    transform: scaleX(0);
    transform-origin: right;
    transition: opacity .35s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s;
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: scaleX(1);
    transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
  }

  .site-nav a {
    min-height: 58px;
    border-bottom: 1px solid rgba(232, 224, 202, .15);
    font-family: var(--serif-display);
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
  }

  .site-nav a::after { display: none; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  :root { --pad: 1.35rem; }

  body { font-size: 1.04rem; }

  .site-header {
    position: absolute;
    align-items: flex-start;
    padding-top: .9rem;
    padding-bottom: .9rem;
  }

  .wordmark span { font-size: .84rem; }

  .menu-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 84px;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    padding: 0;
    border: 0;
    color: var(--paper);
    background: transparent;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .menu-toggle i,
  .menu-toggle i::before {
    display: block;
    width: 1.1rem;
    height: 1px;
    content: '';
    background: var(--gold);
    transition: transform .25s ease;
  }

  .menu-toggle i::before { transform: translateY(-5px); }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::before { transform: rotate(90deg); }

  .site-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(82vw, 330px);
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .4rem;
    padding: 5rem 2rem;
    visibility: hidden;
    opacity: 0;
    background: rgba(6, 14, 10, .97);
    box-shadow: -2rem 0 5rem rgba(0, 0, 0, .4);
    transform: scaleX(0);
    transform-origin: right;
    transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s;
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: scaleX(1);
    transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
  }

  .site-nav a {
    min-height: 58px;
    border-bottom: 1px solid rgba(232, 224, 202, .15);
    font-family: var(--serif-display);
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
  }

  .height-gauge { display: none; }

  .hero { min-height: 760px; }
  .trunk--left { left: -15%; width: 36vw; }
  .trunk--right { right: -19%; width: 35vw; }
  .light-shaft { left: 45%; width: 27vw; opacity: .17; }
  .shaft--two { display: none; }
  .canopy { width: 65vw; }
  .canopy--left { left: -23%; }
  .canopy--right { right: -26%; }

  .hero__content { width: 100%; padding: 0 1.4rem 3rem; }
  .eyebrow { margin-bottom: 2.3rem; font-size: .61rem; }
  .hero h1 { font-size: clamp(4.8rem, 27vw, 7.2rem); line-height: .7; }
  .hero__declaration { width: 88%; gap: .85rem; }
  .hero__declaration p { max-width: 132px; font-size: .9rem; }
  .hero__declaration strong { font-size: 2.8rem; }
  .hero__specimen { bottom: 1.3rem; gap: .7rem; font-size: .48rem; }
  .hero__specimen span:nth-child(3) { display: none; }
  .descent-cue { right: 1.2rem; bottom: .7rem; }
  .descent-cue span { display: none; }

  .section-intro {
    display: block;
  }

  .section-intro h2,
  .scars h2,
  .grove h2,
  .ledger h2,
  .closing h2 { font-size: clamp(3.5rem, 17vw, 5rem); }

  .section-intro .lede { margin-top: 2.5rem; }
  .transect { padding-top: 7rem; }
  .transect::before { top: 34rem; left: 79%; width: 24vw; }
  .transect__rule { display: none; }
  .transect__levels { margin-top: 7rem; }

  .level,
  .level:nth-child(even) {
    display: block;
    min-height: 28rem;
    padding: 3.2rem calc(var(--pad) + 1.5rem) 3.2rem var(--pad);
  }

  .level:nth-child(even) > div:nth-child(2) { grid-column: auto; }
  .level__height { display: block; margin-bottom: 3.4rem; font-size: 3.7rem; }
  .level h3 { max-width: 18rem; font-size: 2.3rem; }
  .level p:last-child { max-width: 17rem; }
  .branch-illustration, .epiphytes { right: -7%; bottom: auto; top: 3.2rem; left: auto; width: 51vw; transform: none; }
  .epiphytes { right: -10%; }
  .level--fog .fog-bank { width: 100%; }

  .ring-vault { height: 660vh; }
  .ring-vault__sticky {
    display: block;
    min-height: 620px;
  }

  .ring-canvas-wrap { position: absolute; inset: 0; }
  #ringCanvas { top: 25%; left: 50%; width: 112vw; height: 112vw; opacity: .9; }
  .ring-canvas__center { top: 25%; left: 50%; }
  .ring-caption { top: 47%; bottom: auto; left: 1.35rem; width: calc(100% - 2.7rem); color: rgba(232, 224, 202, .72); font-size: .58rem; }

  .ring-story {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 54%;
    padding: 4rem 1.35rem 1.15rem;
    background: linear-gradient(180deg, transparent, rgba(7, 10, 8, .96) 17%, #080b09 36%);
  }

  .ring-story .kicker { margin-bottom: .55rem; font-size: .56rem; }
  .ring-story h2 { display: none; }
  .ring-jumps { margin-bottom: .5rem; }
  .ring-jumps button span { font-size: .53rem; }
  .ring-story__chapter { min-height: 9.7rem; }
  .ring-story__date { margin-bottom: .35rem; padding-top: .65rem; }
  .ring-story__date span { font-size: 3.7rem; }
  .ring-story h3 { font-size: 1.75rem; }
  .ring-story__chapter > p { min-height: 4.65rem; font-size: .91rem; line-height: 1.35; }
  .ring-story__measure { margin-top: .6rem; padding: .5rem 0; font-size: .6rem; }
  .ring-instruction { margin-top: .7rem; color: rgba(232, 224, 202, .72); font-size: .57rem; }

  .rome-marker {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 48%;
    padding: 5rem 1.35rem 2rem;
    background: linear-gradient(180deg, rgba(5, 9, 7, .98), rgba(5, 9, 7, .9) 72%, transparent);
  }
  .rome-marker strong { margin: .65rem 0; font-size: clamp(4.4rem, 22vw, 6rem); }
  .rome-marker b { font-size: 1.55rem; }
  .rome-marker p { max-width: 18rem; margin-top: .45rem; font-size: .83rem; }

  .scars { padding-top: 8rem; }
  .scars__opening,
  .ledger__header { display: block; }
  .scars__opening .lede { margin-top: 2.3rem; }
  .scar-sequence { margin-top: 6rem; }
  .scar-card {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 3rem;
    padding: 4rem 0;
  }
  .scar-card:nth-child(even) .scar-shape { order: 0; }
  .scar-shape { width: 86%; }
  .scar-card h3 { font-size: 2.7rem; }
  .fire-chamber { margin-top: 5rem; }
  .fire-chamber__visual { min-height: 27rem; }
  .fire-scene { min-height: 27rem; }
  .fire-scene__scar { top: 20%; width: 10rem; }
  .fire-chamber__copy { min-height: 34rem; padding: 2.4rem 1.35rem; }
  .fire-chamber__copy h3 { font-size: 3.4rem; }
  .fire-chamber__copy > p:not(.kicker) { min-height: 6.5rem; font-size: 1rem; }
  .fire-controls { grid-template-columns: repeat(2, 1fr); }
  .fire-controls button:nth-child(2) { border-right: 0; }
  .fire-controls button:nth-child(-n + 2) { border-bottom: 1px solid rgba(232, 224, 202, .16); }

  .grove { padding-top: 8rem; }
  .grove__heading { display: block; }
  .grove__heading > p:last-child { margin-top: 2rem; }
  .grove-map { margin-top: 4rem; }
  .grove-map text { font-size: 16px; }
  .map-pin b { display: none; }
  .map-pin span { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
  .grove-index { grid-template-columns: 1fr 1fr; }
  .grove-index button { min-height: 66px; font-size: .76rem; }
  .grove-index button:nth-child(2n) { border-right: 0; }
  .grove-index button:last-child { grid-column: 1 / -1; }
  .tree-record { padding: 1.4rem; }
  .tree-record > p { min-height: 0; }
  .tree-record dl { gap: .5rem; }
  .tree-record dd { font-size: 1rem; }

  .ledger__header > p { margin-top: 2.2rem; }
  .ledger__table { margin-top: 5rem; }
  .ledger__row {
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    padding: 1.3rem .35rem;
  }
  .ledger__row strong { font-size: 1.45rem; }
  .ledger__row b { grid-column: 2; grid-row: 1; font-size: 1.1rem; }
  .ledger__row span:last-child { grid-column: 1 / -1; font-size: .84rem; }
  .ledger__row--head { display: none; }
  .ledger__row--focus { margin: 0 -.5rem; padding-right: .85rem; padding-left: .85rem; }
  .ledger__note { font-size: .8rem; }

  .closing { min-height: 790px; }
  .closing__rings { width: 150vw; }
  .closing__copy { padding-right: 1.4rem; padding-left: 1.4rem; }

  .site-footer {
    display: flex;
    min-height: 21rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
  }
  .site-footer nav { flex-direction: column; align-items: flex-start; gap: .1rem; }

  .guide-header { padding-top: .9rem; padding-bottom: .9rem; }
  .guide-return { font-size: .59rem; }
  .guide-hero { min-height: 700px; padding: 7rem 0 4rem; }
  .guide-hero h1 { font-size: clamp(4.2rem, 22vw, 6.4rem); }
  .guide-hero__dek { max-width: 19rem; margin: 3rem 0 0; }
  .guide-hero__metrics {
    position: relative;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(232, 224, 202, .16);
  }
  .guide-hero__metrics dd { font-size: .7rem; }
  .guide-hero__rings { right: -55%; width: 140vw; opacity: .75; }
  .guide-article { padding-top: 2rem; }
  .guide-article section { display: block; padding: 4rem 0; }
  .guide-num { margin-bottom: 1.5rem; }
  .guide-article section > p:not(.guide-num) { margin-bottom: 1.1rem; font-size: 1.04rem; }
  .guide-ring-schematic { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
  .swatches { grid-template-columns: 1fr 1fr; }
  .swatches span { min-height: 7rem; }
  .swatches span:last-child { grid-column: 1 / -1; }
  .guide-prompt::before { inset: 1rem -.7rem; }
}

@media (max-width: 430px) {
  .hero__specimen { font-size: .56rem; letter-spacing: .12em; }
  .guide-ring-schematic { grid-template-columns: 1fr; }
  .guide-ring-schematic > div { width: 11rem; }
  .guide-ring-schematic figcaption { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .load, .reveal { opacity: 1; transform: none; }
  .height-gauge__line i { transition: none; }
}