:root {
  /* Compliance note: Space Mono** for judge.club wordmark; IBM Plex Mono** for evidence snippets. */
  --lichen-ink: #10251D;
  --copper-verdict: #C46A2B;
  --alpine-violet: #6956B8;
  --moss-signal: #78A642;
  --shale-paper: #D8C7A3;
  --cold-mist: #B7D3D0;
  --basalt-black: #060A08;
  --depth-blur: 10px;
  --token-rotation: 0deg;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--shale-paper);
  background: var(--basalt-black);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, a { font: inherit; }

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(105, 86, 184, 0.28), transparent 28rem),
    radial-gradient(circle at 80% 12%, rgba(120, 166, 66, 0.15), transparent 22rem),
    linear-gradient(180deg, var(--basalt-black) 0%, var(--lichen-ink) 36%, #0b1712 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(216, 199, 163, .55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 65% 70%, rgba(183, 211, 208, .3) 0 1px, transparent 1.5px);
  background-size: 31px 37px, 43px 47px;
  mix-blend-mode: overlay;
}

.ambient-fog {
  position: fixed;
  left: -20vw;
  width: 140vw;
  height: 30vh;
  pointer-events: none;
  z-index: 3;
  filter: blur(28px);
  opacity: .38;
  animation: fogDrift 24s linear infinite alternate;
}

.fog-a { top: 18vh; background: linear-gradient(90deg, transparent, rgba(183, 211, 208, .42), rgba(105, 86, 184, .25), transparent); }
.fog-b { top: 58vh; background: linear-gradient(90deg, transparent, rgba(105, 86, 184, .24), rgba(183, 211, 208, .30), transparent); animation-duration: 31s; }

.trail-markers {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .65rem;
  z-index: 40;
}

.trail-markers a {
  position: relative;
  width: 7.8rem;
  padding: .5rem .75rem .5rem 2rem;
  color: var(--shale-paper);
  text-decoration: none;
  font-family: "Space Mono", "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(16, 37, 29, .72);
  border: 1px solid rgba(196, 106, 43, .45);
  clip-path: polygon(8% 0, 100% 0, 93% 100%, 0 100%);
  backdrop-filter: blur(12px);
}

.trail-markers a::before {
  content: attr(data-marker);
  position: absolute;
  left: .45rem;
  color: var(--copper-verdict);
}

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 8rem clamp(1.4rem, 6vw, 7rem);
  isolation: isolate;
}

.hero {
  display: grid;
  place-items: center;
  text-align: center;
}

.mountain-stack { position: absolute; inset: 0; overflow: hidden; z-index: -2; }

.ridge {
  position: absolute;
  left: -5vw;
  width: 110vw;
  clip-path: polygon(0 78%, 8% 58%, 16% 66%, 28% 38%, 39% 62%, 52% 31%, 63% 60%, 75% 42%, 89% 68%, 100% 50%, 100% 100%, 0 100%);
}

.ridge-back { bottom: 22vh; height: 60vh; background: rgba(105, 86, 184, .42); filter: blur(var(--depth-blur)); animation: focusIn 2.4s ease forwards; }
.ridge-mid { bottom: 8vh; height: 58vh; background: #13281f; filter: blur(6px); animation: focusIn 2s .25s ease forwards; }
.ridge-front { bottom: -6vh; height: 54vh; background: linear-gradient(180deg, #183428, var(--basalt-black)); filter: blur(3px); animation: focusIn 1.7s .45s ease forwards; }

.fog-shelf {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 29vh;
  height: 18vh;
  background: rgba(183, 211, 208, .25);
  filter: blur(22px);
}

.basalt-slab {
  position: relative;
  max-width: 760px;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(145deg, rgba(6, 10, 8, .94), rgba(16, 37, 29, .88));
  border: 1px solid rgba(183, 211, 208, .22);
  box-shadow: 0 3rem 8rem rgba(0,0,0,.62), inset 0 0 0 1px rgba(216,199,163,.08);
  clip-path: polygon(3% 0, 96% 4%, 100% 83%, 91% 100%, 8% 96%, 0 14%);
  transform: translateY(18px);
  opacity: 0;
  animation: slabArrive 1.25s .55s ease forwards;
}

.docket-code, .chapter-label, .tag, .mono-snippet, .scroll-note, .scrap, .evidence-thread, .bronze-marker, .trail-tag {
  font-family: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;
}

.docket-code, .chapter-label, .tag {
  color: var(--moss-signal);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .76rem;
}

h1, h2 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-family: "Space Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(3.4rem, 10vw, 9rem);
  letter-spacing: -.08em;
  line-height: .9;
  color: var(--shale-paper);
  text-shadow: .08em .08em 0 rgba(196, 106, 43, .22);
}

h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2.15rem, 5vw, 5.7rem);
  line-height: .92;
  color: var(--shale-paper);
}

p { font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.7; color: rgba(216, 199, 163, .86); }

.hero-copy { max-width: 46rem; margin: 1.2rem auto 0; }

.orbit-stones { position: absolute; inset: 0; pointer-events: none; }

.judgment-stone {
  position: absolute;
  pointer-events: auto;
  width: 8.5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(216, 199, 163, .24);
  color: var(--cold-mist);
  background: radial-gradient(circle at 35% 25%, #283d34, #0d1712 58%, #050806);
  border-radius: 44% 56% 51% 49%;
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  box-shadow: 0 2rem 4rem rgba(0,0,0,.45);
  filter: blur(2px);
  transition: filter .35s ease, transform .35s ease, color .35s ease;
  animation: stoneFloat 7s ease-in-out infinite;
}

.judgment-stone:hover, .judgment-stone.is-focused { filter: blur(0); transform: scale(1.08) rotate(5deg); color: var(--moss-signal); }
.stone-one { left: 13vw; top: 24vh; }
.stone-two { right: 14vw; top: 18vh; animation-delay: -2s; }
.stone-three { left: 61vw; bottom: 14vh; animation-delay: -4s; }

.scrap {
  position: absolute;
  z-index: 6;
  padding: .9rem 1rem;
  color: var(--basalt-black);
  background: var(--shale-paper);
  box-shadow: 0 1rem 2.2rem rgba(0,0,0,.28);
  clip-path: polygon(0 7%, 91% 0, 100% 82%, 12% 100%);
  filter: blur(7px);
  opacity: 0;
  animation: scrapAdmit 1.4s ease forwards;
}
.scrap-hero.one { left: 9vw; bottom: 18vh; animation-delay: 1.1s; }
.scrap-hero.two { right: 9vw; bottom: 32vh; animation-delay: 1.45s; }
.scroll-note { position: absolute; bottom: 2.2rem; color: var(--cold-mist); letter-spacing: .13em; text-transform: uppercase; font-size: .7rem; }

.chapter-label { position: relative; z-index: 4; margin-bottom: 2rem; }

.claims { background: linear-gradient(145deg, rgba(16, 37, 29, .1), rgba(105,86,184,.12)); }
.claims::before, .ledger::before, .bench::before, .verdict::before, .seal::before {
  content: "";
  position: absolute;
  inset: 8% -6% auto -6%;
  height: 42%;
  background: linear-gradient(120deg, transparent 8%, rgba(183, 211, 208, .12), transparent 74%);
  transform: skewY(-7deg);
  z-index: -1;
  filter: blur(2px);
}

.ravine-column { width: min(980px, 78vw); margin-left: 6vw; display: grid; grid-template-columns: minmax(280px, 1.1fr) .8fr; gap: clamp(1rem, 4vw, 4rem); align-items: end; }
.topo-slip, .ledger-card, .echo-basin, .split-copy, .seal-plate {
  background: rgba(216, 199, 163, .92);
  color: var(--basalt-black);
  border: 1px solid rgba(196, 106, 43, .48);
  box-shadow: 1.6rem 1.8rem 0 rgba(105, 86, 184, .22), 0 2rem 5rem rgba(0,0,0,.38);
}
.topo-slip { padding: clamp(1.5rem, 4vw, 3rem); clip-path: polygon(0 0, 94% 4%, 100% 87%, 78% 100%, 7% 95%); }
.topo-slip h2, .ledger-card h2, .echo-basin h2, .split-copy h2, .seal-plate h2 { color: var(--lichen-ink); }
.topo-slip p, .ledger-card p, .echo-basin p, .split-copy p, .seal-plate p { color: rgba(6, 10, 8, .76); }
.tilted-left { transform: rotate(-2.5deg); }
.evidence-thread { display: grid; gap: 1rem; color: var(--cold-mist); text-transform: uppercase; letter-spacing: .12em; }
.evidence-thread span { padding: .75rem 1rem; border-left: 2px solid var(--copper-verdict); background: rgba(6,10,8,.34); backdrop-filter: blur(10px); }

.bronze-marker, .trail-tag {
  display: inline-block;
  margin-top: 2rem;
  border: 1px solid rgba(196, 106, 43, .8);
  color: var(--shale-paper);
  background: linear-gradient(135deg, rgba(196, 106, 43, .72), rgba(16, 37, 29, .82));
  padding: .8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .13em;
  cursor: pointer;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.ledger-wall { display: grid; grid-template-columns: 1fr .72fr; gap: 2rem; align-items: center; max-width: 1050px; margin: 0 auto; }
.ledger-card { padding: clamp(1.4rem, 3vw, 2.6rem); clip-path: polygon(5% 0, 100% 8%, 94% 100%, 0 91%); transition: filter .35s ease, transform .35s ease; }
.vellum-card { background: rgba(183, 211, 208, .72); transform: rotate(3deg); backdrop-filter: blur(14px); }
.sharpable.is-sharp { filter: contrast(1.08) saturate(1.08); transform: translateY(-8px) rotate(-1deg); }
.mono-snippet { color: var(--lichen-ink); font-size: 1rem; }
.mushroom-stamp { width: 7rem; aspect-ratio: 1; display: grid; place-items: center; justify-self: center; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 25%, var(--moss-signal), #426221 65%); color: var(--basalt-black); font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .12em; transform: rotate(-12deg); }

.bench { display: grid; place-items: center; }
.echo-basin { max-width: 820px; padding: clamp(2rem, 5vw, 4rem); background: rgba(183, 211, 208, .78); backdrop-filter: blur(18px); clip-path: polygon(2% 11%, 92% 0, 100% 78%, 84% 100%, 0 91%); }
.echo-lines { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.echo-chip { border: 1px solid var(--alpine-violet); background: rgba(16,37,29,.9); color: var(--cold-mist); padding: .7rem 1rem; text-transform: uppercase; letter-spacing: .16em; font-family: "IBM Plex Mono", monospace; cursor: pointer; transition: filter .3s, transform .3s; }
.echo-chip.is-active { color: var(--moss-signal); filter: drop-shadow(0 0 1rem rgba(120,166,66,.45)); transform: translateY(-4px); }

.verdict-stage { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 1100px; margin: 0 auto; }
.verdict-token { width: min(58vw, 330px); aspect-ratio: 1; position: relative; transform-style: preserve-3d; transform: rotateY(var(--token-rotation)); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.token-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; background: radial-gradient(circle at 35% 25%, #d38c45, var(--copper-verdict) 42%, #5b2a16 100%); color: var(--basalt-black); font-family: "Space Mono", monospace; font-size: clamp(1.5rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: .15em; box-shadow: 0 2rem 5rem rgba(0,0,0,.48), inset 0 0 0 13px rgba(6,10,8,.25); }
.token-back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 25%, #9ecf5a, var(--moss-signal) 45%, #203911 100%); }
.split-copy { padding: clamp(1.5rem, 4vw, 3.2rem); clip-path: polygon(0 0, 95% 6%, 100% 100%, 10% 92%); }

.seal { display: grid; place-items: center; min-height: 90vh; }
.seal-plate { max-width: 790px; padding: clamp(2rem, 5vw, 4rem); text-align: center; clip-path: polygon(9% 0, 100% 10%, 92% 100%, 0 88%); }
.wax-seal { width: 7rem; aspect-ratio: 1; margin: 0 auto 1.2rem; display: grid; place-items: center; border-radius: 48% 52% 43% 57%; background: var(--copper-verdict); color: var(--basalt-black); font-family: "Space Mono", monospace; font-size: 2rem; box-shadow: inset 0 0 0 8px rgba(6,10,8,.18); }

.fog-parted .ambient-fog { opacity: .12; filter: blur(42px); }
.stone-soften .basalt-slab, .stone-soften .scrap { filter: blur(3px); }

@keyframes fogDrift { from { transform: translateX(-6vw); } to { transform: translateX(9vw); } }
@keyframes focusIn { to { filter: blur(0); } }
@keyframes slabArrive { to { opacity: 1; transform: translateY(0); } }
@keyframes scrapAdmit { to { opacity: 1; filter: blur(0); transform: translateY(-10px) rotate(-1deg); } }
@keyframes stoneFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }

@media (max-width: 820px) {
  .trail-markers { right: .5rem; transform: translateY(-50%) scale(.82); transform-origin: right center; }
  .ravine-column, .ledger-wall, .verdict-stage { grid-template-columns: 1fr; width: 100%; }
  .judgment-stone { width: 6rem; }
  .stone-one { left: 4vw; top: 18vh; }
  .stone-two { right: 5vw; top: 17vh; }
  .stone-three { left: 62vw; bottom: 10vh; }
}