:root {
  --ivory: #EFE8D8;
  --green: #24342D;
  --brass: #B2935B;
  --sepia: #9B9385;
  --teal: #3F7F7A;
  --ink: #101210;
  --display: "Space Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --micro: Archivo, "Arial Narrow", Arial, sans-serif;
  --design-token-sans: "Sans**";
  --design-token-grotesk: "Grotesk**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

.glass-noise,
.water-column,
.timeline,
.fish-field { position: fixed; pointer-events: none; z-index: 5; }

.glass-noise {
  inset: 0;
  opacity: .34;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 22%, rgba(178,147,91,.17) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 64%, rgba(16,18,16,.13) 0 1px, transparent 2px),
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.28) 19%, transparent 22% 52%, rgba(63,127,122,.12) 54%, transparent 58%);
  background-size: 41px 41px, 67px 67px, 100% 100%;
}

.water-column {
  top: 0;
  right: 0;
  bottom: 0;
  width: 39vw;
  background:
    linear-gradient(90deg, rgba(36,52,45,0), rgba(36,52,45,.86) 22%, rgba(16,18,16,.95)),
    repeating-linear-gradient(180deg, rgba(239,232,216,.06) 0 1px, transparent 1px 54px);
  z-index: 1;
}

.timeline {
  top: 0;
  bottom: 0;
  left: 38vw;
  width: 2px;
  background: rgba(178,147,91,.32);
  box-shadow: 0 0 0 1px rgba(178,147,91,.08), 0 0 30px rgba(178,147,91,.28);
  z-index: 8;
}

.timeline-fill {
  width: 100%;
  height: 0%;
  background: var(--brass);
  box-shadow: 0 0 22px rgba(178,147,91,.62);
}

.embassy { position: relative; z-index: 3; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 38vw 1fr;
  align-items: center;
  padding: 9vh 7vw 9vh 8vw;
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 10vh 4vw;
  border: 1px solid rgba(155,147,133,.16);
  opacity: 0;
  transform: scale(.985);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.chapter.active::before { opacity: 1; transform: scale(1); }

.chapter-copy {
  max-width: 31rem;
  transform: translateY(28px);
  opacity: .24;
  transition: opacity .95s ease, transform .95s ease;
}

.chapter.active .chapter-copy { opacity: 1; transform: translateY(0); }

.protocol,
figcaption,
.passport-ghost,
.banquet-table span,
.hidden-transcript span {
  font-family: var(--micro);
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .68rem;
}

.domain-title,
h2 {
  font-family: var(--display);
  margin: 0;
  color: var(--ink);
  letter-spacing: -.055em;
  line-height: .88;
}

.domain-title {
  font-size: clamp(3.4rem, 9.4vw, 9.7rem);
  max-width: 9ch;
  filter: url(#none);
  animation: titleBend 8.5s ease-in-out infinite;
}

h2 { font-size: clamp(3rem, 8.2vw, 8rem); color: var(--green); }

.counter {
  display: inline-block;
  min-width: 1.58em;
  color: var(--brass);
  font-family: var(--micro);
  font-size: .38em;
  letter-spacing: .08em;
  vertical-align: .35em;
}

.narrative {
  margin: 1.5rem 0 0;
  color: rgba(16,18,16,.74);
  font-size: clamp(1rem, 1.3vw, 1.28rem);
  line-height: 1.72;
}

.seal-pin {
  position: absolute;
  left: calc(38vw - 24px);
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brass);
  display: grid;
  place-items: center;
  color: var(--green);
  font: 600 .72rem var(--micro);
  letter-spacing: .08em;
  box-shadow: 0 0 0 10px rgba(239,232,216,.76), 0 0 34px rgba(178,147,91,.48);
  z-index: 10;
  transform: translateY(-50%) scale(.82);
  transition: transform .85s ease;
}

.chapter.active .seal-pin { transform: translateY(-50%) scale(1); }

.photo-evidence {
  justify-self: center;
  width: min(42vw, 520px);
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(155,147,133,.54);
  background: rgba(239,232,216,.7);
  box-shadow: 0 26px 80px rgba(16,18,16,.2);
  transform: translateX(22px) rotate(-1.3deg);
  opacity: .72;
  transition: filter 1.2s ease, opacity 1s ease, transform 1s ease;
}

.chapter.active .photo-evidence { opacity: 1; transform: translateX(0) rotate(-.35deg); }

.resolving { filter: blur(10px) saturate(.2); animation: developPhoto 4.8s ease forwards; }

.photo-inner {
  height: 48vh;
  min-height: 310px;
  background-blend-mode: multiply, normal;
  position: relative;
  overflow: hidden;
}

.photo-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16,18,16,.28), transparent 18% 70%, rgba(16,18,16,.38)),
    repeating-linear-gradient(0deg, rgba(239,232,216,.14) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.photo-reception {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(239,232,216,.75) 0 8%, transparent 9%),
    linear-gradient(90deg, transparent 0 18%, rgba(16,18,16,.5) 19% 21%, transparent 22% 78%, rgba(16,18,16,.44) 79% 81%, transparent 82%),
    linear-gradient(180deg, #9B9385, #EFE8D8 42%, #24342D);
}

.photo-handshake {
  background:
    radial-gradient(ellipse at 32% 55%, rgba(239,232,216,.8) 0 12%, transparent 13%),
    radial-gradient(ellipse at 62% 52%, rgba(239,232,216,.7) 0 13%, transparent 14%),
    linear-gradient(30deg, transparent 0 41%, rgba(16,18,16,.72) 42% 48%, transparent 49%),
    linear-gradient(150deg, transparent 0 41%, rgba(36,52,45,.8) 42% 49%, transparent 50%),
    linear-gradient(180deg, #EFE8D8, #9B9385 54%, #101210);
}

.photo-folder {
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(178,147,91,.55) 23% 56%, transparent 57%),
    linear-gradient(180deg, #EFE8D8, #9B9385 48%, #24342D);
}

figcaption { margin-top: 10px; color: var(--sepia); }

.refraction-band {
  position: absolute;
  left: 5vw;
  right: 20vw;
  top: 41%;
  height: 90px;
  background: linear-gradient(90deg, transparent, rgba(63,127,122,.18), rgba(239,232,216,.42), transparent);
  filter: blur(7px);
  animation: shimmer 7s ease-in-out infinite;
  z-index: -1;
}

.contact-sheet { display: grid; grid-template-columns: 1fr; gap: 10px; }
.credentials .photo-evidence { filter: sepia(.55) grayscale(.85); }

.passport-ghost {
  position: absolute;
  left: 12vw;
  bottom: 14vh;
  border: 1px solid rgba(178,147,91,.56);
  padding: 1rem 1.3rem;
  transform: rotate(-7deg);
  opacity: .38;
}

.negative-strip {
  grid-column: 2;
  justify-self: center;
  width: min(42vw, 560px);
  height: 58vh;
  border: 1px solid var(--sepia);
  padding: 18px;
  display: grid;
  gap: 14px;
  background: rgba(16,18,16,.86);
  box-shadow: 0 30px 90px rgba(16,18,16,.32);
}

.negative-strip span {
  border: 1px solid rgba(239,232,216,.2);
  background: linear-gradient(90deg, rgba(239,232,216,.1), rgba(155,147,133,.34), rgba(63,127,122,.18));
}

.bubbles { position: absolute; right: 12vw; top: 18vh; display: grid; gap: 24px; }
.bubbles span { width: 8px; height: 8px; border: 1px solid rgba(63,127,122,.7); border-radius: 50%; animation: bubbleRise 5s ease-in-out infinite; }
.bubbles span:nth-child(2n) { animation-delay: -2s; transform: scale(.62); }

.banquet-table {
  grid-column: 2;
  justify-self: center;
  width: min(48vw, 690px);
  height: 36vh;
  border-radius: 50%;
  border: 1px solid rgba(155,147,133,.36);
  background: radial-gradient(ellipse at center, rgba(36,52,45,.62), rgba(16,18,16,.9) 67%, transparent 68%);
  position: relative;
  box-shadow: inset 0 0 70px rgba(178,147,91,.18);
}

.banquet-table span { position: absolute; color: var(--ivory); opacity: .72; }
.banquet-table span:nth-child(1) { left: 13%; top: 30%; }
.banquet-table span:nth-child(2) { right: 16%; top: 48%; }
.banquet-table span:nth-child(3) { left: 42%; bottom: 18%; }

.hidden-transcript {
  grid-column: 2;
  justify-self: center;
  width: min(44vw, 600px);
  display: grid;
  gap: 1.2rem;
  padding: 2rem;
  border-left: 1px solid var(--brass);
  opacity: .42;
  transition: opacity .8s ease, filter .8s ease;
  filter: blur(1.5px);
}

.backchannel.active .hidden-transcript,
.hidden-transcript.revealed { opacity: 1; filter: blur(0); }
.hidden-transcript span { color: var(--green); font-size: .9rem; }
.folder-photo { position: absolute; right: 9vw; bottom: 8vh; width: min(28vw, 330px); opacity: .45; }
.folder-photo .photo-inner { min-height: 170px; height: 24vh; }

.brass-horizon {
  grid-column: 1 / -1;
  position: absolute;
  left: 38vw;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--brass);
  box-shadow: 0 0 36px rgba(178,147,91,.62);
  transform-origin: left center;
  transform: scaleX(.05);
  transition: transform 1.5s ease;
}

.accord.active .brass-horizon { transform: scaleX(1); }
.accord-seals { grid-column: 2; justify-self: center; display: flex; gap: 2.2rem; margin-top: 18rem; }
.accord-seals span { width: 38px; height: 38px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 8px rgba(178,147,91,.12); }

.fish-field { inset: 0; z-index: 7; overflow: hidden; }
.fish {
  position: absolute;
  width: 88px;
  height: 38px;
  left: -110px;
  top: 25vh;
  opacity: .72;
  filter: blur(.2px) drop-shadow(0 0 12px rgba(63,127,122,.42));
  animation: swim 18s linear infinite;
}

.fish::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 5px;
  width: 50px;
  height: 28px;
  border-radius: 55% 45% 55% 45%;
  background: linear-gradient(90deg, rgba(63,127,122,.92), rgba(178,147,91,.72), rgba(239,232,216,.66));
  clip-path: polygon(0 50%, 18% 8%, 68% 2%, 100% 50%, 68% 98%, 18% 92%);
}

.fish::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 26px;
  height: 25px;
  background: rgba(36,52,45,.58);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
}

.fish i {
  position: absolute;
  right: 18px;
  top: -12px;
  width: 18px;
  height: 62px;
  border-left: 2px solid rgba(239,232,216,.68);
  border-radius: 50%;
  transform: rotate(15deg);
}

.fish-two { top: 55vh; animation-duration: 24s; animation-delay: -7s; transform: scale(.7); opacity: .54; }
.fish-three { top: 72vh; animation-duration: 21s; animation-delay: -13s; transform: scale(1.15); opacity: .42; }
.fish-four { top: 12vh; animation-duration: 29s; animation-delay: -18s; transform: scale(.52); opacity: .46; }

@keyframes swim { from { translate: -12vw 0; } to { translate: 118vw 0; } }
@keyframes bubbleRise { 0%,100% { translate: 0 30px; opacity: .18; } 50% { translate: 0 -36px; opacity: .78; } }
@keyframes shimmer { 0%,100% { transform: translateX(-4vw) skewY(-2deg); opacity: .25; } 50% { transform: translateX(8vw) skewY(2deg); opacity: .62; } }
@keyframes developPhoto { to { filter: blur(0) saturate(.75) sepia(.28); } }
@keyframes titleBend { 0%,100% { letter-spacing: -.055em; transform: skewX(0deg); } 48% { letter-spacing: -.071em; transform: skewX(-1.6deg); } 58% { letter-spacing: -.04em; transform: skewX(1deg); } }

@media (max-width: 820px) {
  .timeline { left: 24px; }
  .water-column { width: 34vw; opacity: .7; }
  .chapter { grid-template-columns: 1fr; padding: 9vh 7vw 9vh 58px; gap: 2rem; }
  .seal-pin { left: 0; }
  .photo-evidence, .negative-strip, .banquet-table, .hidden-transcript { grid-column: 1; width: 100%; }
  .brass-horizon { left: 24px; }
  .domain-title { font-size: clamp(3rem, 17vw, 6rem); }
  h2 { font-size: clamp(2.6rem, 15vw, 5.2rem); }
}