:root {
  /* Typography compliance: IBM Plex Sans Condensed* Condensed** in Medium */
  --pearl: #EAF1EE;
  --glass: #BFD8DA;
  --aqua: #7FAFB0;
  --sage: #8D9D91;
  --green: #173B38;
  --champagne: #D8C99B;
  --lavender: #C8C3D7;
  --seam-x: 50%;
  --orb-y: 21vh;
  --chapter-progress: 0;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--pearl);
  color: var(--green);
  font-family: "Noto Sans", Inter, system-ui, sans-serif;
}

button { font: inherit; }

.pavilion {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 17% 14%, rgba(216, 201, 155, .34), transparent 31%),
    radial-gradient(circle at 83% 18%, rgba(200, 195, 215, .46), transparent 36%),
    radial-gradient(circle at 63% 78%, rgba(127, 175, 176, .42), transparent 42%),
    linear-gradient(135deg, rgba(234,241,238,.92), rgba(191,216,218,.58), rgba(200,195,215,.32));
}

.atmosphere,
.grain,
.caustic,
.glass-seam,
.travel-orb,
.ripple-field,
.wordmark-stage,
.edge-tabs,
.hover-caption { position: absolute; }

.atmosphere {
  inset: -12%;
  background:
    radial-gradient(ellipse at 25% 65%, rgba(255,255,255,.76), transparent 36%),
    radial-gradient(ellipse at 72% 42%, rgba(191,216,218,.5), transparent 32%);
  filter: blur(22px);
  animation: breathe 18s ease-in-out infinite alternate;
  z-index: 0;
}

.grain {
  inset: 0;
  pointer-events: none;
  opacity: .45;
  z-index: 12;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(23,59,56,.13) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 42%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 82%, rgba(216,201,155,.35) 0 1px, transparent 1.6px);
  background-size: 17px 19px, 23px 29px, 31px 37px;
  mix-blend-mode: soft-light;
}

.caustic {
  height: 22vh;
  width: 78vw;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .33;
  mix-blend-mode: screen;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), rgba(216,201,155,.32), transparent);
}

.caustic-one { left: -12vw; top: 19vh; transform: rotate(-18deg); animation: causticDrift 16s ease-in-out infinite; }
.caustic-two { right: -20vw; bottom: 15vh; transform: rotate(22deg); animation: causticDrift 21s ease-in-out infinite reverse; }

.wordmark-stage {
  top: 5.6vh;
  left: 5.8vw;
  z-index: 9;
  padding: 22px 28px 18px;
  border-radius: 30px;
  background: rgba(234,241,238,.34);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 70px rgba(23,59,56,.08);
  backdrop-filter: blur(18px) saturate(122%);
  overflow: hidden;
}

.condensation {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255,255,255,.72), rgba(191,216,218,.32), rgba(255,255,255,.18)),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.7) 0 1px, transparent 1.5px);
  background-size: auto, 26px 23px, 19px 21px;
  animation: clearGlass 2.2s ease forwards;
  z-index: 2;
}

.wordmark {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  color: var(--green);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  font-size: clamp(42px, 7vw, 94px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .82;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.domain-dot {
  width: .18em;
  height: .18em;
  margin: 0 .055em .075em .085em;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, #EAF1EE 0 13%, #BFD8DA 29%, #7FAFB0 66%, #173B38 122%);
  box-shadow: 0 0 0 8px rgba(191,216,218,.28), 0 10px 25px rgba(127,175,176,.56), inset -2px -4px 8px rgba(23,59,56,.16);
  animation: dotRelease 4.2s ease-in-out infinite alternate;
}

.wordmark-caption,
.micro,
.specimen-label,
.edge-tab,
.hover-caption {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
}

.wordmark-caption { margin: 12px 0 0; font-size: 11px; color: rgba(23,59,56,.58); }

.glass-seam {
  top: -5vh;
  bottom: -5vh;
  left: var(--seam-x);
  width: 46px;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  border-left: 1px solid rgba(255,255,255,.8);
  border-right: 1px solid rgba(23,59,56,.1);
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(191,216,218,.48), rgba(255,255,255,.16));
  box-shadow: 0 0 38px rgba(127,175,176,.42), inset 11px 0 18px rgba(255,255,255,.34), inset -10px 0 19px rgba(23,59,56,.04);
  backdrop-filter: blur(14px) saturate(145%);
  animation: seamSway 8s ease-in-out infinite alternate;
}

.seam-bow {
  position: absolute;
  inset: 5vh 11px;
  border-radius: 55% 45% 48% 52% / 35% 60% 40% 65%;
  border: 1px solid rgba(255,255,255,.42);
  filter: blur(.2px);
}

.seam-ticks { position: absolute; inset: 14vh 0 12vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.seam-ticks span { width: 17px; height: 1px; background: rgba(216,201,155,.74); box-shadow: 0 0 12px rgba(216,201,155,.56); }

.travel-orb {
  left: var(--seam-x);
  top: var(--orb-y);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: radial-gradient(circle at 34% 26%, #FFFFFF 0 12%, #EAF1EE 20%, #7FAFB0 62%, #173B38 145%);
  box-shadow: 0 0 0 11px rgba(191,216,218,.22), 0 19px 38px rgba(23,59,56,.18), inset -3px -5px 9px rgba(23,59,56,.18);
}

.ripple-field { inset: 0; z-index: 6; pointer-events: none; }
.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(127,175,176,.5);
  transform: translate(-50%, -50%) scale(.4);
  opacity: .75;
  animation: rippleOut 1.55s ease-out forwards;
}

.edge-tabs {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 11px;
  z-index: 11;
}

.edge-tab {
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  padding: 9px 13px;
  color: rgba(23,59,56,.55);
  background: rgba(234,241,238,.26);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-size: 10px;
  transition: color .35s ease, background .35s ease, transform .35s ease;
}
.edge-tab.active { color: var(--green); background: rgba(216,201,155,.36); transform: translateX(-8px); }

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--left, 50%) 1fr;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity .9s ease, transform 1.1s ease;
  z-index: 3;
}
.chapter.active { opacity: 1; pointer-events: auto; transform: scale(1); }
.chapter-waterline { --left: 27%; }
.chapter-manifesto { --left: 69%; }
.chapter-mirror { --left: 50%; }

.left-pane,
.right-pane { position: relative; min-width: 0; }
.left-pane { padding: 30vh 8vw 10vh 6vw; }
.right-pane { margin: 12vh 7vw 10vh 5vw; }

.text-sheet {
  position: relative;
  max-width: 590px;
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(234,241,238,.68), rgba(191,216,218,.3), rgba(200,195,215,.18));
  box-shadow: 0 28px 75px rgba(23,59,56,.1), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(22px) saturate(126%);
  overflow: hidden;
}
.text-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.4px);
  background-size: 18px 22px;
  mix-blend-mode: screen;
}
.text-sheet > * { position: relative; z-index: 1; }
.micro { display: block; margin-bottom: 22px; color: rgba(23,59,56,.5); font-size: 12px; }
h2 { margin: 0; font-family: "Nunito Sans", Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.042em; line-height: .95; font-size: clamp(35px, 5.8vw, 78px); }
p { margin: 25px 0 0; max-width: 52ch; color: rgba(23,59,56,.72); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.75; }

.shelf,
.water-level,
.column-glass,
.final-emblem,
.shape {
  position: absolute;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(135deg, rgba(234,241,238,.72), rgba(191,216,218,.44), rgba(200,195,215,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 30px 80px rgba(23,59,56,.12);
  backdrop-filter: blur(18px) saturate(135%);
}

.specimen-window,
.wide-canvas,
.specimen-column,
.mirror-right {
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 46px;
  background:
    radial-gradient(circle at 36% 22%, rgba(255,255,255,.8), transparent 18%),
    radial-gradient(circle at 72% 70%, rgba(127,175,176,.42), transparent 32%),
    linear-gradient(135deg, rgba(234,241,238,.48), rgba(191,216,218,.22), rgba(200,195,215,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 35px 100px rgba(23,59,56,.1);
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.specimen-label { position: absolute; top: 28px; right: 32px; color: rgba(23,59,56,.45); font-size: 11px; z-index: 4; }
.shape { cursor: crosshair; transition: filter .4s ease, box-shadow .4s ease; }
.shape.fogged { filter: blur(1px) saturate(115%); box-shadow: inset 0 0 40px rgba(255,255,255,.68), 0 35px 90px rgba(127,175,176,.28); }

.shape-window { width: 31vmin; height: 31vmin; left: 18%; top: 24%; border-radius: 34% 46% 38% 42%; animation: morphWindow 9s ease-in-out infinite alternate; }
.shape-capsule { width: 34vmin; height: 12vmin; right: 10%; bottom: 19%; border-radius: 999px; background: linear-gradient(90deg, rgba(127,175,176,.48), rgba(234,241,238,.74), rgba(216,201,155,.3)); animation: floatA 8s ease-in-out infinite alternate; }
.shape-lens { width: 19vmin; height: 19vmin; right: 18%; top: 20%; border-radius: 53% 47% 62% 38%; background: radial-gradient(circle at 35% 30%, #EAF1EE, #BFD8DA 42%, #C8C3D7 78%); clip-path: polygon(50% 0, 93% 25%, 82% 82%, 24% 94%, 0 42%); animation: spinFacet 16s linear infinite; }
.shape-orb { width: 34vmin; height: 34vmin; left: 20%; top: 19%; border-radius: 48% 52% 44% 56%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.88), rgba(191,216,218,.58), rgba(200,195,215,.48)); animation: morphOrb 10s ease-in-out infinite alternate; }
.shape-prism { width: 27vmin; height: 24vmin; right: 16%; bottom: 18%; clip-path: polygon(52% 0, 100% 74%, 18% 100%, 0 28%); border-radius: 26px; animation: floatB 9s ease-in-out infinite alternate; }
.shape-diamond { width: 16vmin; height: 16vmin; left: 50%; top: 20%; transform: translateX(-50%) rotate(45deg); border-radius: 20%; background: linear-gradient(135deg, rgba(216,201,155,.44), rgba(234,241,238,.72)); animation: diamondPulse 6s ease-in-out infinite alternate; }
.shape-lozenge { width: 12vmin; height: 43vmin; left: 50%; bottom: 10%; transform: translateX(-50%); border-radius: 999px; background: linear-gradient(180deg, rgba(234,241,238,.75), rgba(127,175,176,.34), rgba(216,201,155,.28)); animation: floatA 7s ease-in-out infinite alternate; }

.bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #FFFFFF, rgba(191,216,218,.52) 52%, transparent 72%); box-shadow: 0 13px 34px rgba(23,59,56,.08); }
.bead-one { width: 42px; height: 42px; left: 12%; bottom: 14%; animation: floatB 7s ease-in-out infinite; }
.bead-two { width: 24px; height: 24px; right: 33%; top: 14%; animation: floatA 6s ease-in-out infinite; }

.water-level { left: 7%; right: 7%; top: 52%; height: 14vmin; border-radius: 999px; background: linear-gradient(90deg, rgba(127,175,176,.62), rgba(234,241,238,.44), rgba(200,195,215,.38)); }
.arc { position: absolute; border: 1px solid rgba(216,201,155,.48); border-radius: 50%; }
.arc-one { width: 42vmin; height: 42vmin; left: 8%; bottom: 6%; border-left-color: transparent; animation: spinFacet 24s linear infinite; }
.arc-two { width: 26vmin; height: 26vmin; right: 11%; top: 12%; border-bottom-color: transparent; animation: spinFacet 18s linear infinite reverse; }

.caption-rail { padding-right: 2vw; }
.rail-sheet h2 { font-size: clamp(28px, 3.3vw, 52px); }
.manifesto-pane { padding-top: 27vh; }
.manifesto-sheet { max-width: 760px; }
.specimen-column { margin-left: 0; margin-right: 7vw; }
.column-glass { inset: 8%; border-radius: 999px; background: linear-gradient(180deg, rgba(234,241,238,.46), rgba(191,216,218,.36), rgba(200,195,215,.24)); }
.calibration-row { position: absolute; left: 6vw; bottom: 17vh; display: flex; gap: 24px; }
.calibration-row i { width: 10px; height: 10px; transform: rotate(45deg); background: var(--champagne); box-shadow: 0 0 18px rgba(216,201,155,.65); }

.mirror-left { padding-top: 34vh; }
.mirror-right { margin-left: -8vw; display: grid; place-items: center; }
.final-emblem { position: relative; width: min(46vw, 540px); height: min(46vw, 540px); border-radius: 39% 61% 48% 52%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.78), rgba(191,216,218,.48), rgba(23,59,56,.08)); animation: finalMorph 10s ease-in-out infinite alternate; }
.final-emblem span { position: absolute; border-radius: inherit; inset: 12%; border: 1px solid rgba(255,255,255,.55); transform: rotate(calc(var(--r, 0) * 1deg)); }
.final-emblem span:nth-child(2) { --r: 34; inset: 22%; background: rgba(216,201,155,.16); }
.final-emblem span:nth-child(3) { --r: -28; inset: 35%; background: rgba(200,195,215,.18); }

.shelf-short { width: 34vw; height: 1px; left: 9vw; bottom: 20vh; background: linear-gradient(90deg, transparent, rgba(216,201,155,.88), transparent); box-shadow: 0 0 20px rgba(216,201,155,.5); }

.hover-caption {
  z-index: 15;
  left: 0;
  top: 0;
  transform: translate(-50%, -140%);
  opacity: 0;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(234,241,238,.62);
  border: 1px solid rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
  font-size: 10px;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hover-caption.visible { opacity: 1; }

@keyframes breathe { from { transform: translate3d(-1%, 0, 0) scale(1); } to { transform: translate3d(1%, -1%, 0) scale(1.04); } }
@keyframes clearGlass { 0% { transform: translateX(0); opacity: 1; } 72% { opacity: .75; } 100% { transform: translateX(108%); opacity: 0; } }
@keyframes dotRelease { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes seamSway { from { border-radius: 45% 55% 52% 48% / 15% 30% 70% 85%; } to { border-radius: 55% 45% 47% 53% / 78% 55% 45% 22%; } }
@keyframes causticDrift { 0%,100% { translate: 0 0; opacity: .22; } 50% { translate: 7vw 3vh; opacity: .42; } }
@keyframes rippleOut { to { transform: translate(-50%, -50%) scale(5.8); opacity: 0; } }
@keyframes morphWindow { from { border-radius: 34% 46% 38% 42%; transform: translateY(0) rotate(0deg); } to { border-radius: 999px 45% 60% 999px; transform: translateY(-18px) rotate(7deg); } }
@keyframes morphOrb { from { border-radius: 48% 52% 44% 56%; } to { border-radius: 28% 72% 63% 37%; transform: translate(18px, -10px); } }
@keyframes floatA { from { translate: 0 0; } to { translate: 0 -26px; } }
@keyframes floatB { from { translate: 0 0; } to { translate: 18px 22px; } }
@keyframes spinFacet { to { rotate: 360deg; } }
@keyframes diamondPulse { from { scale: .92; opacity: .7; } to { scale: 1.07; opacity: 1; } }
@keyframes finalMorph { from { border-radius: 39% 61% 48% 52%; rotate: -3deg; } to { border-radius: 60% 40% 54% 46%; rotate: 4deg; } }

@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .left-pane { padding: 25vh 7vw 0; }
  .right-pane { margin: 48vh 7vw 8vh; }
  .edge-tabs { right: 10px; }
  .wordmark-stage { left: 4vw; right: 4vw; }
  .specimen-column { margin-left: 7vw; }
  .mirror-right { margin-left: 7vw; }
}