:root {
  /* Typography compliance token from DESIGN.md: Space Grotesk from Google Fonts */
  --teal: #163F3A;
  --coral: #E56F5B;
  --clay: #B86E45;
  --ochre: #D99A3D;
  --umber: #3A241B;
  --sand: #F3DDC1;
  --plum: #4A2D33;
  --opal: #8FD8C5;
  --display: "Space Grotesk", "Space Grotesk Fallback", "Trebuchet MS", sans-serif;
  --body: "Manrope", "Avenir Next", system-ui, sans-serif;
  --label: "Outfit", "Arial Narrow", system-ui, sans-serif;
  --design-font-token: "Grotesk**";
  --hex: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--umber);
  font-family: var(--body);
  background:
    radial-gradient(circle at 15% 8%, rgba(143, 216, 197, .28), transparent 25rem),
    radial-gradient(circle at 78% 20%, rgba(229, 111, 91, .22), transparent 30rem),
    linear-gradient(180deg, var(--sand) 0%, #e9c79e 48%, var(--teal) 100%);
}

body.loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #f8e8ce 0%, var(--sand) 44%, #d7a468 100%);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

.loader.hidden { opacity: 0; visibility: hidden; }

.loader-aura {
  position: absolute;
  width: min(72vw, 44rem);
  height: min(72vw, 44rem);
  border-radius: 43% 57% 51% 49% / 55% 39% 61% 45%;
  background: linear-gradient(135deg, rgba(184, 110, 69, .35), rgba(143, 216, 197, .18));
  filter: blur(.4rem);
  animation: breathe 5s ease-in-out infinite;
}

.skeleton-honeycomb {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 5.4rem);
  gap: .18rem .48rem;
  transform: rotate(-6deg);
}

.skeleton-honeycomb span {
  width: 5.4rem;
  height: 6rem;
  clip-path: var(--hex);
  background: linear-gradient(100deg, rgba(184, 110, 69, .16), rgba(243, 221, 193, .62), rgba(217, 154, 61, .58));
  box-shadow: inset 0 0 0 .1rem rgba(58, 36, 27, .12), 0 1.1rem 2.4rem rgba(58, 36, 27, .08);
  animation: skeletonFill 2.4s ease-in-out infinite;
}

.skeleton-honeycomb span:nth-child(2n) { transform: translateY(2.7rem); animation-delay: .18s; }
.skeleton-honeycomb span:nth-child(3n) { animation-delay: .36s; }
.skeleton-honeycomb span:nth-child(5n) { animation-delay: .56s; }

.loader-label,
.eyebrow,
.hex-cell span,
.specimen em,
.pearl span {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.loader-label {
  position: absolute;
  bottom: 12vh;
  color: rgba(58, 36, 27, .7);
  font-size: .72rem;
}

.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.honeycomb-lattice {
  position: absolute;
  inset: -18%;
  opacity: .22;
  transform: rotate(var(--field-rotation, -3deg));
  background-image:
    linear-gradient(30deg, rgba(58, 36, 27, .22) 12%, transparent 12.5%, transparent 87%, rgba(58, 36, 27, .22) 87.5%, rgba(58, 36, 27, .22)),
    linear-gradient(150deg, rgba(58, 36, 27, .22) 12%, transparent 12.5%, transparent 87%, rgba(58, 36, 27, .22) 87.5%, rgba(58, 36, 27, .22)),
    linear-gradient(30deg, rgba(58, 36, 27, .22) 12%, transparent 12.5%, transparent 87%, rgba(58, 36, 27, .22) 87.5%, rgba(58, 36, 27, .22)),
    linear-gradient(150deg, rgba(58, 36, 27, .22) 12%, transparent 12.5%, transparent 87%, rgba(58, 36, 27, .22) 87.5%, rgba(58, 36, 27, .22));
  background-size: 7rem 12rem;
  background-position: 0 0, 0 0, 3.5rem 6rem, 3.5rem 6rem;
  transition: transform .25s ease-out;
}

.grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(58, 36, 27, .16) .04rem, transparent .05rem);
  background-size: .75rem .75rem;
  mix-blend-mode: multiply;
  opacity: .18;
}

.pearl-nav {
  position: fixed;
  top: 50%;
  right: 1.6rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transform: translateY(-50%);
}

.pearl {
  width: 3rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  clip-path: var(--hex);
  color: var(--sand);
  text-decoration: none;
  background: rgba(58, 36, 27, .42);
  backdrop-filter: blur(1rem);
  transition: transform .35s ease, background .35s ease;
}

.pearl.active,
.pearl:hover { background: var(--teal); transform: translateX(-.35rem) scale(1.05); }
.pearl span { font-size: .62rem; }

.reef-story { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(1.2rem, 1fr) minmax(18rem, 35rem) minmax(18rem, 42rem) minmax(1.2rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(5rem, 7vw, 8rem) 0;
  overflow: hidden;
}

.scene-copy {
  grid-column: 2;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .9s ease, transform .9s ease;
}

.scene.in-view .scene-copy { opacity: 1; transform: translateY(0); }

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--clay);
  font-size: .74rem;
  font-weight: 700;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .89;
  color: var(--umber);
}

h1 { font-size: clamp(3.8rem, 10vw, 9.8rem); max-width: 11ch; }
h2 { font-size: clamp(3rem, 7.5vw, 7.2rem); max-width: 10ch; }

.scene-copy p:last-child {
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.85;
  color: rgba(58, 36, 27, .76);
}

.blob {
  position: absolute;
  border-radius: 44% 56% 62% 38% / 47% 37% 63% 53%;
  background: linear-gradient(135deg, var(--clay), var(--coral) 52%, var(--ochre));
  box-shadow: inset 1.5rem -1.2rem 3rem rgba(58, 36, 27, .18), 0 2.2rem 5rem rgba(58, 36, 27, .2);
  animation: breathe 8s ease-in-out infinite;
}

.blob-sun { width: 44vw; height: 38vw; min-width: 22rem; min-height: 20rem; right: -7vw; top: 12vh; }
.reef-blob { width: 28vw; height: 34vw; right: 4vw; bottom: -7vw; background: linear-gradient(155deg, var(--opal), var(--teal), var(--plum)); }
.passage-blob { width: 34vw; height: 24vw; right: 9vw; top: 19vh; display: grid; place-items: center; padding: 5rem; color: var(--sand); background: linear-gradient(130deg, var(--clay), var(--plum)); }
.nocturne-blob { width: 30vw; height: 31vw; left: 8vw; bottom: 10vh; background: linear-gradient(145deg, var(--plum), var(--teal)); }

.contours,
.contours::before,
.contours::after {
  position: absolute;
  inset: 12%;
  border: .08rem solid rgba(243, 221, 193, .32);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}

.contours::before,
.contours::after { content: ""; inset: 12%; }
.contours::after { inset: 24%; }
.blob:hover .contours,
.blob:hover .contours::before,
.blob:hover .contours::after,
.blob:focus .contours,
.blob:focus .contours::before,
.blob:focus .contours::after { opacity: 1; transform: scale(1.02); }

.hex-cluster,
.specimen-grid { grid-column: 3; position: relative; z-index: 4; }

.hex-cluster { min-height: 30rem; }

.hex-cell {
  clip-path: var(--hex);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.4rem;
  background: rgba(243, 221, 193, .72);
  box-shadow: inset 0 0 0 .12rem rgba(58, 36, 27, .14), 0 1.2rem 3rem rgba(58, 36, 27, .14);
  backdrop-filter: blur(.7rem);
  transition: transform .4s ease, filter .4s ease, background .4s ease;
}

.hex-cell:hover,
.hex-cell:focus { transform: translateY(-.5rem) rotate(1.5deg); filter: saturate(1.16); background-image: radial-gradient(circle at 30% 18%, rgba(143, 216, 197, .56), transparent 30%), linear-gradient(135deg, rgba(243, 221, 193, .75), rgba(217, 154, 61, .62)); }

.large { width: 21rem; height: 24rem; margin: 2rem auto; font-family: var(--display); font-size: 2.4rem; color: var(--sand); background: linear-gradient(145deg, var(--clay), var(--coral)); }
.small { position: absolute; width: 9rem; height: 10rem; }
.small.opal { left: 3rem; top: 0; background: var(--opal); }
.small.coral { right: 4rem; bottom: 1rem; background: var(--coral); color: var(--sand); }

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(8rem, 12rem));
  gap: .7rem 1rem;
  transform: rotate(-4deg);
}

.specimen { height: 13rem; color: var(--sand); }
.specimen:nth-child(2n) { transform: translateY(6.4rem); }
.specimen strong { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.specimen em { display: block; margin-top: .7rem; font-style: normal; font-size: .58rem; opacity: .78; }
.specimen.clay { background: var(--clay); }
.specimen.ochre { background: var(--ochre); color: var(--umber); }
.specimen.teal { background: var(--teal); }
.specimen.plum { background: var(--plum); }
.specimen.coral { background: var(--coral); }

.clay-current { background: linear-gradient(180deg, transparent, rgba(184, 110, 69, .2), transparent); }
.current-ribbon { position: absolute; inset: 22% -10%; border-top: .08rem solid rgba(58, 36, 27, .12); border-bottom: .08rem solid rgba(58, 36, 27, .08); transform: rotate(-8deg); height: 13rem; }
.passage-blob p { max-width: 11rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; line-height: 1.7; }
.current-cluster { margin-top: 10rem; }
.note { position: absolute; width: 10rem; height: 11rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; }
.note:nth-child(1) { left: 3rem; top: 2rem; background: rgba(143, 216, 197, .74); }
.note:nth-child(2) { left: 13rem; top: 8rem; background: rgba(217, 154, 61, .7); }
.note:nth-child(3) { left: 1rem; top: 14rem; background: rgba(229, 111, 91, .72); color: var(--sand); }

.velvet-tide {
  background: linear-gradient(180deg, rgba(22, 63, 58, .1), var(--teal));
  color: var(--sand);
}
.velvet-tide h2,
.velvet-tide .scene-copy p:last-child { color: var(--sand); }
.velvet-tide .eyebrow { color: var(--opal); }
.closing-nocturne { grid-column: 3; }
.nocturne-pool { grid-column: 2; position: relative; min-height: 33rem; }
.moon-hex { position: absolute; width: 19rem; height: 21rem; clip-path: var(--hex); background: linear-gradient(145deg, rgba(243, 221, 193, .86), rgba(143, 216, 197, .28)); left: 12%; top: 8%; box-shadow: 0 0 5rem rgba(143, 216, 197, .28); }
.signature-cell { position: absolute; right: 9vw; bottom: 7vh; width: 12rem; height: 13.4rem; background: rgba(243, 221, 193, .86); color: var(--umber); font-family: var(--display); }

.fish {
  position: absolute;
  width: 5.4rem;
  height: 2.2rem;
  border-radius: 50% 46% 45% 50%;
  background: var(--teal);
  filter: drop-shadow(0 .55rem .5rem rgba(58, 36, 27, .18));
  opacity: .74;
}
.fish::before { content: ""; position: absolute; left: -.9rem; top: .24rem; border-top: .85rem solid transparent; border-bottom: .85rem solid transparent; border-right: 1.4rem solid currentColor; color: inherit; }
.fish::after { content: ""; position: absolute; right: 1.15rem; top: -.62rem; width: 1.45rem; height: 1.45rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: rgba(143, 216, 197, .75); transform: rotate(15deg); }
.fish i { position: absolute; right: .5rem; top: .58rem; width: .25rem; height: .25rem; border-radius: 50%; background: var(--sand); }
.fish-small { width: 3.7rem; height: 1.5rem; color: var(--coral); background: var(--coral); animation: swimLoader 3.4s ease-in-out infinite; }
.shoal-one { left: -8rem; top: 20vh; color: var(--teal); animation: swim 24s linear infinite; }
.shoal-two { right: -9rem; top: 54vh; color: var(--coral); background: var(--coral); transform: scaleX(-1); animation: swimReverse 30s linear infinite; }
.shoal-three { left: -7rem; bottom: 16vh; color: var(--ochre); background: var(--ochre); animation: swim 36s linear infinite 4s; }
.ribbon-fish { left: -7rem; top: 4rem; color: var(--plum); background: var(--plum); animation: swim 18s linear infinite; }
.ribbon-fish.delayed { animation-delay: 6s; top: 7rem; transform: scale(.7); }

@keyframes breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 44% 56% 62% 38% / 47% 37% 63% 53%; }
  50% { transform: translate3d(.35rem, -.45rem, 0) scale(1.025); border-radius: 57% 43% 44% 56% / 39% 58% 42% 61%; }
}

@keyframes skeletonFill {
  0%, 100% { filter: grayscale(.8) brightness(1.12); opacity: .58; }
  45% { filter: grayscale(0) brightness(1); opacity: 1; }
}

@keyframes swim { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 16rem)); } }
@keyframes swimReverse { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(calc(100vw + 18rem)); } }
@keyframes swimLoader { 0% { transform: translateX(-34vw); } 100% { transform: translateX(34vw); } }

@media (max-width: 900px) {
  .scene { grid-template-columns: 1rem 1fr 1rem; align-content: center; }
  .scene-copy,
  .hex-cluster,
  .specimen-grid,
  .closing-nocturne,
  .nocturne-pool { grid-column: 2; }
  .specimen-grid { grid-template-columns: repeat(2, minmax(8rem, 1fr)); margin-top: 2rem; }
  .pearl-nav { right: .7rem; }
  .blob { opacity: .62; }
  .skeleton-honeycomb { grid-template-columns: repeat(3, 4.4rem); }
  .skeleton-honeycomb span { width: 4.4rem; height: 4.9rem; }
}