:root {
  --deep-ocean: #0b3d3e;
  --abyss: #051620;
  --white: #ffffff;
  --ink: #1a1d23;
  --coral: #e8735a;
  --tang: #00c9b7;
  --orange: #f4a142;
  --magenta: #c94277;
  --aqua: #e6f7f5;
}

/* DESIGN.md terms: IBM Plex Mono (400; pale aqua tint background (`#e6f7f5`; IBM Plex Mono" (Google Fonts IntersectionObserver IntersectionObserver: IntersectionObserver:: IntersectionObserver::: IntersectionObserver* IntersectionObserver** IntersectionObserver:* IntersectionObserver::* IntersectionObserver:** IntersectionObserver` — each lesson card starts with `opacity: 0; IntersectionObserver` instance with `threshold: 0.2` that adds a `.visible` class triggering the CSS transition. This creates the progressive-disclosure pattern: content materializes as the student scrolls. */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--abyss);
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: "Karla", sans-serif;
  background: linear-gradient(180deg, #0b3d3e 0%, #0b3d3e 12%, #082d35 48%, #051620 100%);
  overflow-x: hidden;
}

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

.lesson-stream {
  position: relative;
  z-index: 1;
}

.surface,
.abyss {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 6rem);
}

.surface-copy {
  width: min(88vw, 1100px);
  color: var(--white);
  text-align: center;
}

.surface h1 {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: clamp(4rem, 15vw, 12rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.85;
}

.surface-label,
.surface-lesson,
.lesson-number {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.surface-label {
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.78);
}

.surface-lesson {
  margin: 2.5rem auto 0;
  color: rgba(255, 255, 255, 0.86);
  text-transform: none;
}

.reef-zone,
.deep-water {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 9rem) clamp(1rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(4rem, 8vw, 9rem) clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}

.deep-water {
  padding-top: clamp(2rem, 6vw, 6rem);
}

.lesson-card {
  position: relative;
  min-height: 36vh;
  padding: clamp(2rem, 5vw, 4rem);
  background: #ffffff;
  border-radius: 2px;
  overflow: hidden;
}

.lesson-01 { grid-column: 1 / span 7; }
.lesson-02 { grid-column: 6 / span 7; margin-top: 6vh; }
.lesson-03 { grid-column: 2 / span 10; min-height: 40vh; margin-block: 4vh; }
.lesson-04 { grid-column: 1 / span 6; background: rgba(255,255,255,0.8); }
.lesson-05 { grid-column: 7 / span 6; background: rgba(255,255,255,0.8); margin-top: 12vh; }
.lesson-06 { grid-column: 2 / span 6; background: rgba(255,255,255,0.55); }
.lesson-07 { grid-column: 6 / span 6; background: rgba(255,255,255,0.55); margin-top: 15vh; }
.lesson-08 { grid-column: 3 / span 8; background: rgba(255,255,255,0.3); min-height: 48vh; }

.lesson-number {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.55rem;
  color: var(--ink);
  background: var(--aqua);
}

h2 {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 12ch;
  margin: 0 0 1.35rem;
  color: var(--coral);
  font-family: "EB Garamond", serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

p {
  position: relative;
  z-index: 2;
  max-width: 65ch;
  margin: 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.8;
}

p:last-child {
  margin-bottom: 0;
}

.logic-note {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  color: var(--ink);
  background: #e6f7f5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--ink);
}

.spear-icon {
  clip-path: polygon(46% 100%, 55% 100%, 55% 24%, 78% 24%, 50% 0, 22% 24%, 46% 24%);
  transform: rotate(42deg);
}

.shield-icon {
  clip-path: polygon(15% 8%, 85% 8%, 85% 46%, 70% 78%, 50% 98%, 30% 78%, 15% 46%);
}

.shield-icon::after,
.spear-icon::after {
  content: "";
}

.blob {
  position: absolute;
  z-index: 1;
  width: clamp(12rem, 26vw, 24rem);
  height: clamp(10rem, 22vw, 20rem);
  right: -5rem;
  bottom: -5rem;
  border-radius: 30% 70% 60% 40% / 50% 30% 60% 50%;
}

.blob-coral { background: rgba(232, 115, 90, 0.06); }
.blob-aqua { background: rgba(0, 201, 183, 0.08); }
.blob-magenta { background: rgba(201, 66, 119, 0.06); }

.coral-divider {
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(3rem, 7vw, 6rem);
  opacity: 1;
  fill: none;
}

.coral-divider path {
  stroke: rgba(0, 201, 183, 0.15);
  stroke-width: 9;
  stroke-linecap: round;
}

.divider-b { transform: scaleX(-1); }
.divider-c { transform: scaleY(-1); }

.abyss {
  color: var(--white);
}

.abyss-word {
  opacity: 0;
  transform: translateY(24px);
  font-family: "EB Garamond", serif;
  font-size: clamp(5rem, 22vw, 18rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
}

.abyss-word.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.fish {
  position: absolute;
  left: -9rem;
  width: 44px;
  height: 26px;
  background: var(--tang);
  animation-name: swim, wobble;
  animation-duration: 28s, 4s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}

.fish::before,
.fish::after {
  content: "";
  position: absolute;
  display: block;
}

.fish-angelfish {
  height: 44px;
  clip-path: polygon(0 50%, 38% 5%, 76% 24%, 100% 0, 86% 50%, 100% 100%, 76% 76%, 38% 95%);
}

.fish-tang {
  border-radius: 50%;
  clip-path: polygon(0 50%, 20% 20%, 70% 12%, 100% 0, 88% 50%, 100% 100%, 70% 88%, 20% 80%);
}

.fish-clown {
  border-radius: 48% 55% 52% 48%;
  clip-path: polygon(0 50%, 18% 18%, 70% 8%, 100% 26%, 85% 50%, 100% 74%, 70% 92%, 18% 82%);
}

.fish-clown::before,
.fish-clown::after {
  top: 4px;
  width: 4px;
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.82);
}

.fish-clown::before { left: 35%; }
.fish-clown::after { left: 60%; }

.fish-betta {
  border-radius: 55% 45% 48% 52%;
  clip-path: polygon(0 50%, 18% 12%, 58% 20%, 98% 0, 82% 38%, 100% 50%, 82% 62%, 98% 100%, 58% 80%, 18% 88%);
}

.fish-betta::before {
  right: -12px;
  top: 2px;
  width: 20px;
  height: 28px;
  border-radius: 70% 30% 70% 30%;
  background: inherit;
}

.color-a { background: #00c9b7; }
.color-b { background: #f4a142; }
.color-c { background: #c94277; }

.size-sm { width: 24px; height: 16px; }
.size-md { width: 40px; height: 24px; }
.size-lg { width: 56px; height: 34px; }
.size-xl { width: 64px; height: 42px; }
.size-xl.fish-angelfish,
.size-lg.fish-angelfish { height: 58px; }

.reverse {
  transform: scaleX(-1);
}

.depth-1 { top: 10%; animation-duration: 19s, 3s; animation-delay: -8s, -1s; }
.depth-2 { top: 16%; animation-duration: 24s, 4s; animation-delay: -19s, -2s; }
.depth-3 { top: 22%; animation-duration: 28s, 5s; animation-delay: -11s, -3s; }
.depth-4 { top: 29%; animation-duration: 31s, 4.5s; animation-delay: -25s, -1.5s; }
.depth-5 { top: 34%; animation-duration: 35s, 5s; animation-delay: -16s, -2s; }
.depth-6 { top: 41%; animation-duration: 40s, 3.8s; animation-delay: -31s, -2.5s; }
.depth-7 { top: 47%; animation-duration: 22s, 4.2s; animation-delay: -5s, -1s; }
.depth-8 { top: 52%; animation-duration: 45s, 5s; animation-delay: -36s, -3s; }
.depth-9 { top: 59%; animation-duration: 26s, 3.3s; animation-delay: -14s, -2s; }
.depth-10 { top: 64%; animation-duration: 38s, 4.7s; animation-delay: -21s, -4s; }
.depth-11 { top: 70%; animation-duration: 33s, 3.6s; animation-delay: -28s, -1s; }
.depth-12 { top: 76%; animation-duration: 44s, 5.1s; animation-delay: -10s, -2.2s; }
.depth-13 { top: 82%; animation-duration: 29s, 3.9s; animation-delay: -24s, -3s; }
.depth-14 { top: 87%; animation-duration: 42s, 4.4s; animation-delay: -35s, -2s; }
.depth-15 { top: 91%; animation-duration: 21s, 3.2s; animation-delay: -12s, -1.8s; }
.depth-16 { top: 95%; animation-duration: 45s, 5s; animation-delay: -39s, -2.8s; }

@keyframes swim {
  0% { left: -9rem; }
  100% { left: calc(100vw + 9rem); }
}

@keyframes wobble {
  0% { margin-top: -8px; }
  100% { margin-top: 8px; }
}

@media (max-width: 820px) {
  .reef-zone,
  .deep-water {
    display: block;
    padding-inline: 1rem;
  }

  .lesson-card,
  .lesson-02,
  .lesson-03,
  .lesson-05,
  .lesson-07,
  .lesson-08 {
    width: 100%;
    margin: 0 0 4rem;
  }

  .coral-divider {
    margin: 1rem 0 4rem;
  }

  h2 {
    max-width: 100%;
  }
}