:root {
  /* Compliance tokens from DESIGN.md typography parser: Sans* Grotesk* */
  --frost: #EAF0EC;
  --paper: #D8CDB9;
  --glass: #9FB4B8;
  --ink: #26302E;
  --green: #6F8A75;
  --umber: #8B6F5A;
  --amber: #C99D62;
  --light: #F6F0E3;
  --smoke: rgba(38, 48, 46, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.paper-field,
body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.paper-field {
  z-index: -4;
  background:
    radial-gradient(circle at 18% 16%, rgba(201, 157, 98, .32), transparent 18rem),
    radial-gradient(circle at 82% 9%, rgba(111, 138, 117, .26), transparent 16rem),
    radial-gradient(circle at 70% 72%, rgba(139, 111, 90, .22), transparent 24rem),
    linear-gradient(125deg, var(--light), var(--paper) 45%, var(--frost));
}

body::before {
  content: "";
  z-index: -3;
  opacity: .42;
  background-image:
    repeating-linear-gradient(83deg, rgba(38, 48, 46, .055) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(7deg, rgba(246, 240, 227, .18) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

body::after {
  content: "";
  z-index: -2;
  background:
    radial-gradient(ellipse at 8% 92%, rgba(139, 111, 90, .18), transparent 20rem),
    radial-gradient(ellipse at 92% 30%, rgba(234, 240, 236, .64), transparent 34rem),
    linear-gradient(rgba(234, 240, 236, .32), rgba(234, 240, 236, .12));
  backdrop-filter: blur(2px);
}

.treaty-routes {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  opacity: .74;
}

.route {
  fill: none;
  stroke: rgba(111, 138, 117, .44);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 18 22;
  filter: blur(3px);
  transition: filter .7s ease, stroke .7s ease, opacity .7s ease;
}

body.focused .route {
  filter: blur(.5px);
  stroke: rgba(38, 48, 46, .42);
}

.tab-stack {
  position: fixed;
  top: 14vh;
  right: max(1rem, 3vw);
  z-index: 8;
  display: grid;
  gap: .55rem;
  transform: rotate(-7deg);
}

.tab-stack a {
  display: block;
  padding: .52rem .78rem;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .18em;
  font: 700 .66rem Archivo, system-ui, sans-serif;
  background: rgba(234, 240, 236, .58);
  border: 1px solid rgba(38, 48, 46, .14);
  border-radius: 50% 45% 48% 46% / 42% 50% 44% 52%;
  backdrop-filter: blur(13px);
  box-shadow: 0 12px 28px rgba(38, 48, 46, .09);
  transition: transform .25s ease, background .25s ease;
}

.tab-stack a:hover,
.tab-stack a.active { transform: translateX(-.45rem); background: rgba(201, 157, 98, .32); }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 11vh 8vw;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 5vh -10vw;
  z-index: -1;
  background: rgba(234, 240, 236, .36);
  border: 1px solid var(--smoke);
  clip-path: polygon(0 19%, 100% 0, 100% 78%, 0 100%);
  transform: rotate(-1.5deg);
  backdrop-filter: blur(9px);
}

.slant-left::before { clip-path: polygon(0 0, 100% 16%, 92% 100%, 0 82%); transform: rotate(2deg); }
.slant-right::before { clip-path: polygon(9% 13%, 100% 0, 100% 88%, 0 100%); transform: rotate(-3deg); }
.curve-interlude::before { clip-path: polygon(0 24%, 92% 0, 100% 70%, 12% 100%); }
.final-tableau::before { clip-path: polygon(5% 8%, 95% 0, 100% 92%, 0 100%); background: rgba(246, 240, 227, .48); }

.diagonal-pane {
  position: relative;
  width: min(760px, 86vw);
  padding: clamp(2rem, 5vw, 5rem);
  background: rgba(234, 240, 236, .58);
  border: 1px solid rgba(38, 48, 46, .16);
  box-shadow: 0 32px 70px rgba(38, 48, 46, .14), inset 0 0 60px rgba(246, 240, 227, .35);
  backdrop-filter: blur(18px);
  clip-path: polygon(5% 0, 100% 10%, 94% 100%, 0 88%);
  transform: rotate(-5deg) translateY(44px);
  opacity: .2;
  filter: blur(10px);
  transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}

.scene.active .diagonal-pane { opacity: 1; filter: blur(0); transform: rotate(-5deg) translateY(0); }
.slant-left .diagonal-pane { margin-left: 8vw; transform: rotate(4deg) translateY(44px); }
.slant-left.active .diagonal-pane { transform: rotate(4deg) translateY(0); }
.slant-right .diagonal-pane { margin-left: auto; transform: rotate(-7deg) translateY(44px); }
.slant-right.active .diagonal-pane { transform: rotate(-7deg) translateY(0); }
.compact-pane { width: min(650px, 82vw); margin-left: 18vw; }
.toast-pane { margin: 10vh auto 0; text-align: center; transform: rotate(2deg) translateY(44px); }
.final-tableau.active .toast-pane { transform: rotate(2deg) translateY(0); }

.diagonal-pane::before,
.diagonal-pane::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.diagonal-pane::before {
  inset: 1rem;
  border: 1px dashed rgba(139, 111, 90, .22);
  clip-path: inherit;
}

.diagonal-pane::after {
  width: 9rem;
  height: 9rem;
  right: 9%;
  bottom: 8%;
  border-radius: 50%;
  border: 1px solid rgba(201, 157, 98, .28);
  background: radial-gradient(circle, rgba(201, 157, 98, .2), transparent 65%);
  filter: blur(.7px);
}

.stamp {
  margin: 0 0 1.1rem;
  color: var(--umber);
  font: 700 .72rem Archivo, system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  line-height: .92;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(4rem, 12vw, 11.5rem); }
h2 { font-size: clamp(2.6rem, 7vw, 7.2rem); max-width: 11ch; }
p { font-size: clamp(1.05rem, 1.7vw, 1.42rem); line-height: 1.62; }
.lede { max-width: 36rem; margin-top: 1.5rem; }

.marginal {
  position: absolute;
  max-width: 14rem;
  color: rgba(38, 48, 46, .68);
  font: 600 .72rem Archivo, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-9deg);
  filter: blur(1.7px);
  transition: filter .35s ease, transform .35s ease;
}

.marginal:hover { filter: blur(0); transform: rotate(-6deg) scale(1.03); }
.note-one { left: 8vw; bottom: 12vh; }
.slant-left .marginal { right: 11vw; bottom: 18vh; }
.curve-interlude .marginal { right: 8vw; top: 21vh; }

.ink-mark {
  position: absolute;
  top: 45vh;
  width: clamp(10rem, 21vw, 22rem);
  height: clamp(10rem, 21vw, 22rem);
  border-radius: 47% 53% 49% 51% / 52% 44% 56% 48%;
  filter: blur(24px);
  opacity: .45;
  animation: approach 8s ease-in-out infinite alternate;
}

.ink-left { left: 11vw; background: rgba(111, 138, 117, .55); }
.ink-right { right: 13vw; background: rgba(201, 157, 98, .55); animation-delay: -1.8s; }

@keyframes approach {
  from { transform: translateX(0) scale(.88) rotate(0deg); }
  to { transform: translateX(18vw) scale(1.04) rotate(12deg); }
}

.ink-right { animation-name: approach-right; }
@keyframes approach-right {
  from { transform: translateX(0) scale(.9) rotate(0deg); }
  to { transform: translateX(-18vw) scale(1.04) rotate(-11deg); }
}

.coaster.half {
  position: absolute;
  right: 18vw;
  top: 24vh;
  width: 13rem;
  height: 6.5rem;
  border-radius: 13rem 13rem 0 0;
  background: rgba(201, 157, 98, .2);
  border: 1px solid rgba(139, 111, 90, .2);
  transform: rotate(23deg);
}

.tabs-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.tabs-row span,
.coaster-button {
  padding: .7rem 1rem;
  border-radius: 50% 45% 48% 46% / 42% 50% 44% 52%;
  border: 1px solid rgba(38, 48, 46, .16);
  background: rgba(246, 240, 227, .52);
  color: var(--ink);
  font: 700 .72rem Archivo, system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.coaster-button { display: inline-block; margin-top: 1.2rem; text-decoration: none; background: rgba(201, 157, 98, .34); }

.tape {
  position: absolute;
  width: 13rem;
  height: 2.4rem;
  background: rgba(234, 240, 236, .44);
  border: 1px solid rgba(246, 240, 227, .65);
  backdrop-filter: blur(6px);
}
.tape-a { left: 18vw; top: 17vh; transform: rotate(-17deg); }
.tape-b { right: 15vw; bottom: 18vh; transform: rotate(13deg); }

.seal-field {
  position: absolute;
  inset: auto 8vw 9vh auto;
  width: min(34rem, 70vw);
  height: 18rem;
}
.seal-field span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 157, 98, .34);
  background: radial-gradient(circle, rgba(201, 157, 98, .25), rgba(111, 138, 117, .12) 58%, transparent 60%);
  animation: seal 5.8s ease-in-out infinite;
}
.seal-field span:nth-child(1) { width: 13rem; height: 13rem; left: 0; top: 1rem; }
.seal-field span:nth-child(2) { width: 10rem; height: 10rem; left: 9rem; top: 4rem; animation-delay: -1.2s; }
.seal-field span:nth-child(3) { width: 15rem; height: 15rem; right: 0; top: 0; animation-delay: -2.3s; }
@keyframes seal { 50% { transform: scale(1.08); filter: blur(2px); opacity: .62; } }

.table-circle {
  position: relative;
  width: min(42rem, 86vw);
  height: min(42rem, 86vw);
  margin: 0 auto -18vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 111, 90, .18), transparent 61%);
}
.settled-sheet {
  position: absolute;
  width: 15rem;
  min-height: 8rem;
  padding: 1.2rem;
  background: rgba(234, 240, 236, .55);
  border: 1px solid var(--smoke);
  clip-path: polygon(6% 0, 100% 8%, 92% 100%, 0 87%);
  backdrop-filter: blur(13px);
}
.settled-sheet span { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.5rem; }
.sheet-a { left: 2rem; top: 11rem; transform: rotate(-18deg); }
.sheet-b { right: 2rem; top: 8rem; transform: rotate(15deg); }
.sheet-c { left: 13rem; bottom: 4rem; transform: rotate(3deg); }

@media (max-width: 760px) {
  .tab-stack { top: auto; right: 1rem; bottom: 1rem; transform: rotate(-3deg); grid-template-columns: repeat(5, auto); gap: .25rem; }
  .tab-stack a { padding: .46rem .5rem; font-size: .54rem; }
  .scene { padding: 12vh 5vw; }
  .diagonal-pane, .slant-left .diagonal-pane, .slant-right .diagonal-pane, .compact-pane { margin: 0; width: 100%; }
  .marginal, .coaster.half, .tape { display: none; }
  h1 { font-size: clamp(3.3rem, 17vw, 6rem); }
  .table-circle { margin-bottom: -8vh; }
  .settled-sheet { width: 11rem; }
  .sheet-c { left: 7rem; }
}