:root {
  /* Fonts loaded from (Google Fonts): Space Grotesk, IBM Plex Sans, Cormorant Garamond. */
  --lapis: #102A43;
  --cyan: #57C7D4;
  --coral: #E36A5C;
  --ivory: #F4EFE4;
  --marble: #8A8F98;
  --violet: #5E4B8B;
  --charcoal: #1F2933;
  --display: "Space Grotesk", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --accent-font: "Cormorant Garamond", serif;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--lapis);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 15%, rgba(87, 199, 212, 0.26), transparent 28rem),
    linear-gradient(180deg, #eadfca 0%, var(--ivory) 48%, var(--lapis) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  z-index: 30;
  background-image:
    linear-gradient(rgba(31, 41, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 41, 51, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 11% 13%, rgba(31, 41, 51, 0.09) 0 1px, transparent 2px);
  background-size: 44px 44px, 44px 44px, 17px 19px;
  mix-blend-mode: multiply;
}

.manual {
  position: relative;
  isolation: isolate;
}

.lesson {
  --paper-shadow: rgba(16, 42, 67, 0.28);
  position: relative;
  min-height: 100vh;
  margin-top: -5vh;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.1rem, 4vw, 4rem) clamp(5rem, 8vw, 9rem);
  background:
    linear-gradient(103deg, rgba(255,255,255,0.42), transparent 31%),
    radial-gradient(circle at 86% 14%, rgba(227,106,92,0.11), transparent 23rem),
    radial-gradient(circle at 8% 70%, rgba(87,199,212,0.14), transparent 28rem),
    var(--ivory);
  box-shadow: 0 -1.5rem 4rem var(--paper-shadow), 0 1rem 2rem rgba(31,41,51,0.08) inset;
  clip-path: polygon(0 1.2rem, 7% 0, 24% 0.9rem, 49% 0.2rem, 70% 1.1rem, 91% 0.3rem, 100% 1.5rem, 100% 100%, 0 100%);
  display: grid;
  grid-template-columns: minmax(7rem, 12vw) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  overflow: hidden;
}

.lesson:first-child { margin-top: 0; clip-path: none; }
.lesson::before,
.lesson::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: blur(20px);
  opacity: 0.72;
  transform: translate3d(calc(var(--drift, 0) * 1px), calc(var(--drift-y, 0) * 1px), 0);
}
.lesson::before {
  width: 44vw;
  height: 38vw;
  left: -10vw;
  top: 16vh;
  background: radial-gradient(ellipse at 40% 45%, rgba(87,199,212,0.38), rgba(87,199,212,0.12) 43%, transparent 72%);
  border-radius: 44% 56% 62% 38% / 54% 46% 56% 44%;
  animation: bloom 18s ease-in-out infinite alternate;
}
.lesson::after {
  width: 38vw;
  height: 30vw;
  right: -8vw;
  bottom: 8vh;
  background: radial-gradient(ellipse at 56% 52%, rgba(227,106,92,0.34), rgba(227,106,92,0.12) 46%, transparent 73%);
  border-radius: 61% 39% 46% 54% / 44% 58% 42% 56%;
  animation: bloom 22s ease-in-out -5s infinite alternate;
}

.paper-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.4rem;
  background: linear-gradient(90deg, rgba(138,143,152,0.16), transparent 19%, rgba(227,106,92,0.11), transparent 57%, rgba(87,199,212,0.15));
  opacity: 0.8;
}

.gutter {
  position: sticky;
  top: 2rem;
  align-self: start;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 1rem;
  border-right: 1px solid rgba(138,143,152,0.48);
  color: var(--marble);
  z-index: 3;
}

.lesson-code,
.mode,
.coordinate,
.step-marker,
.callout,
.annotation,
.solved-label,
.wrap-notes {
  font-family: var(--body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: clamp(0.62rem, 0.78vw, 0.78rem);
}

.lesson-code {
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 0.92;
}

.mode { color: var(--charcoal); max-width: 9rem; }
.coordinate { writing-mode: vertical-rl; opacity: 0.78; margin-top: auto; }

.plate {
  position: relative;
  min-height: 78vh;
  z-index: 2;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  color: var(--lapis);
  letter-spacing: -0.055em;
}

p {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.7;
  margin: 0;
}

.calibration-plate {
  display: grid;
  align-items: center;
  min-height: 84vh;
}
.registration-stack { position: relative; z-index: 2; max-width: 76rem; }
.pretitle {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: var(--violet);
  font-family: var(--accent-font);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
}
.domain-lockup {
  position: relative;
  font-size: clamp(4rem, 13vw, 13.2rem);
  line-height: 0.78;
  max-width: 11ch;
  text-transform: lowercase;
}
.domain-lockup .layer { display: block; position: relative; }
.domain-lockup .layer-b { color: var(--lapis); transform: translateX(clamp(1.2rem, 4vw, 4rem)); }
.domain-lockup .layer-b::before,
.domain-lockup .layer-c::before {
  content: attr(class);
  display: none;
}
.domain-lockup::before,
.domain-lockup::after,
.split-heading::before,
.split-heading::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  clip-path: inset(0 0 52% 0);
}
.domain-lockup::before,
.split-heading::before { color: var(--cyan); transform: translate(5px, -2px); }
.domain-lockup::after,
.split-heading::after { color: var(--coral); transform: translate(-4px, 3px); clip-path: inset(48% 0 0 0); }
.glitching .domain-lockup::before,
.glitching .domain-lockup::after,
.split-heading:hover::before,
.split-heading:hover::after { animation: seamClip 0.72s steps(2, end); }
.instruction { max-width: 36rem; margin-top: 2rem; color: var(--charcoal); }

.bust-fragment {
  position: absolute;
  right: -4vw;
  bottom: -4vh;
  width: clamp(17rem, 29vw, 34rem);
  opacity: 0.72;
  transform: rotate(-4deg);
}
.stone { fill: #f0eadf; stroke: var(--marble); stroke-width: 2; }
.stone-shadow, .vein, .crack { fill: none; stroke: var(--marble); stroke-width: 2.4; opacity: 0.62; }
.crack { stroke: var(--violet); opacity: 0.5; }
.annotation {
  position: absolute;
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  background: rgba(244,239,228,0.76);
  border-left: 2px solid var(--cyan);
  box-shadow: 0 10px 30px rgba(16,42,67,0.08);
}
.annotation b { color: var(--lapis); }
.annotation span { color: var(--marble); text-transform: none; letter-spacing: 0.03em; }
.note-a { right: 28vw; top: 16vh; }
.note-b { right: 6vw; top: 42vh; border-left-color: var(--coral); }

.horizon-plate { min-height: 90vh; display: flex; align-items: center; }
.plinth { position: absolute; left: -7vw; right: -7vw; bottom: 12vh; height: 19vh; }
.plinth-top { height: 42%; background: linear-gradient(90deg, #ebe4da, #d7d1ca, #f3ecdf); border: 1px solid rgba(138,143,152,0.48); box-shadow: inset 0 -18px 0 rgba(138,143,152,0.11); }
.column-drum { position: absolute; bottom: 0; width: 18vw; height: 8vh; border-radius: 50%; border: 1px solid rgba(138,143,152,0.54); background: radial-gradient(ellipse, #f5efe5 0 42%, #cfcbd0 79%); }
.drum-left { left: 11vw; transform: rotate(4deg); }
.drum-right { right: 15vw; transform: rotate(-3deg); }
.wash { position: absolute; inset: 10vh 4vw auto 10vw; height: 38vh; filter: blur(18px); mix-blend-mode: multiply; opacity: 0.78; }
.wash-cyan { background: radial-gradient(ellipse at 35% 45%, rgba(87,199,212,0.56), transparent 68%); border-radius: 43% 57% 41% 59%; animation: driftLeft 18s ease-in-out infinite alternate; }
.wash-coral { inset: 20vh 8vw auto 23vw; background: radial-gradient(ellipse at 60% 52%, rgba(227,106,92,0.45), transparent 69%); border-radius: 59% 41% 58% 42%; animation: driftRight 20s ease-in-out infinite alternate; }
.lesson-copy { position: relative; z-index: 2; max-width: 45rem; }
.narrow { margin-left: clamp(1rem, 7vw, 8rem); }
.step-marker { color: var(--accent); display: inline-block; margin-bottom: 0.9rem; }
h2 { font-size: clamp(2.8rem, 7vw, 7.2rem); line-height: 0.9; position: relative; }
.split-heading { display: inline-block; }
.callout { position: absolute; color: var(--charcoal); background: rgba(244,239,228,0.72); padding: 0.5rem 0.7rem; }
.callout span { display: inline-block; width: 6rem; height: 1px; background: currentColor; margin-right: 0.5rem; vertical-align: middle; }
.callout-left { left: 3vw; bottom: 34vh; }
.callout-right { right: 3vw; top: 21vh; color: var(--violet); }

.seam-plate {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(16rem, 1.1fr) minmax(6rem, 0.35fr) minmax(12rem, 0.8fr);
  gap: clamp(0.8rem, 2vw, 1.7rem);
  min-height: 88vh;
  align-items: stretch;
}
.scan-strip { position: relative; min-height: 72vh; padding: clamp(1rem, 2vw, 2rem); border-left: 1px solid rgba(138,143,152,0.42); background: rgba(255,255,255,0.16); overflow: hidden; }
.strip-label, .museum-caption { font-family: var(--accent-font); color: var(--marble); font-size: 1.25rem; }
.stone-strip svg { position: absolute; inset: 5vh auto auto 50%; width: 80%; transform: translateX(-50%) rotate(2deg); }
.annotation-strip { display: flex; justify-content: center; flex-direction: column; }
.annotation-strip p { max-width: 28rem; margin-top: 1.4rem; }
.tear-strip { background: rgba(16,42,67,0.08); }
.tear-slice { position: absolute; left: 16%; right: 12%; height: 12%; background: linear-gradient(90deg, rgba(87,199,212,0.62), rgba(227,106,92,0.46)); mix-blend-mode: multiply; clip-path: polygon(0 13%, 100% 0, 92% 78%, 8% 100%); animation: seamJitter 1.7s steps(2, end) infinite; }
.slice-1 { top: 18%; }
.slice-2 { top: 43%; animation-delay: -0.5s; transform: translateX(-8px); }
.slice-3 { top: 68%; animation-delay: -0.9s; transform: translateX(7px); }
.error-code { position: absolute; bottom: 1.4rem; left: 1rem; writing-mode: vertical-rl; color: var(--violet); font-family: var(--display); }
.wash-strip { display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 48% 34%, rgba(87,199,212,0.34), transparent 55%), rgba(227,106,92,0.08); }
.micro-note { font-size: 0.98rem; color: var(--charcoal); }

.portal-plate { min-height: 88vh; }
.portal-stain { position: absolute; width: clamp(19rem, 48vw, 48rem); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(calc(0.96 + var(--portal-open, 0) * 0.08)); border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%; background: radial-gradient(circle at 50% 50%, rgba(94,75,139,0.68), rgba(87,199,212,0.32) 34%, rgba(227,106,92,0.24) 56%, transparent 72%); filter: blur(1px); mix-blend-mode: multiply; animation: portalBreathe 9s ease-in-out infinite alternate; }
.portal-core { position: absolute; inset: 21%; border-radius: 50%; background: radial-gradient(circle, rgba(16,42,67,0.8), rgba(94,75,139,0.36) 53%, transparent 68%); filter: blur(9px); }
.registration-ring { position: absolute; inset: 9%; border-radius: 50%; border: 2px solid; opacity: 0.65; }
.ring-cyan { border-color: var(--cyan); transform: translate(7px, -4px); }
.ring-coral { border-color: var(--coral); transform: translate(-6px, 5px); }
.wrap-notes { position: absolute; color: var(--marble); background: rgba(244,239,228,0.55); padding: 0.5rem 0.75rem; }
.note-top { left: 43%; top: 5vh; transform: rotate(-2deg); }
.note-left { left: 3vw; top: 38vh; max-width: 14rem; }
.note-right { right: 4vw; bottom: 21vh; max-width: 14rem; }
.circular-copy { position: absolute; left: 6vw; bottom: 4vh; width: min(36rem, 45vw); }

.lesson-04 { background: radial-gradient(circle at 70% 32%, rgba(87,199,212,0.22), transparent 28rem), var(--lapis); color: var(--ivory); box-shadow: 0 -2rem 5rem rgba(16,42,67,0.55); }
.lesson-04::before { background: radial-gradient(ellipse, rgba(94,75,139,0.45), transparent 67%); }
.lesson-04::after { background: radial-gradient(ellipse, rgba(227,106,92,0.26), transparent 70%); }
.lesson-04 h2, .lesson-04 p, .lesson-04 .mode { color: var(--ivory); }
.dark-gutter { border-right-color: rgba(244,239,228,0.22); color: rgba(244,239,228,0.56); }
.stable-plate { min-height: 88vh; }
.resolved-diagram { position: absolute; inset: 4vh 3vw 4vh auto; width: min(56vw, 52rem); }
.orbit { position: absolute; border: 1px solid rgba(244,239,228,0.45); border-radius: 50%; inset: 14%; transform: rotate(-16deg); }
.orbit-b { inset: 24% 3% 9% 24%; border-color: rgba(87,199,212,0.7); transform: rotate(28deg); }
.split-sphere { position: absolute; left: 32%; top: 27%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(90deg, #efe6d9 0 49%, rgba(87,199,212,0.52) 50% 100%); box-shadow: 0 0 0 1px rgba(244,239,228,0.4); }
.split-sphere span { position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(16,42,67,0.48); }
.pediment { position: absolute; right: 8%; bottom: 10%; width: 52%; height: 18%; background: linear-gradient(135deg, #e8dfd1, #bfc0c4); clip-path: polygon(0 100%, 14% 32%, 50% 0, 86% 32%, 100% 100%); opacity: 0.9; }
.final-copy { position: absolute; left: 4vw; bottom: 13vh; width: min(40rem, 46vw); }
.solved-label { position: absolute; color: rgba(244,239,228,0.78); border: 1px solid rgba(87,199,212,0.35); padding: 0.55rem 0.8rem; background: rgba(16,42,67,0.36); }
.label-a { left: 10vw; top: 15vh; }
.label-b { right: 15vw; top: 20vh; }
.label-c { right: 8vw; bottom: 9vh; }

@keyframes bloom { from { transform: translate3d(-10px, 0, 0) scale(0.95); } to { transform: translate3d(18px, 16px, 0) scale(1.08); } }
@keyframes driftLeft { from { transform: translateX(2vw) rotate(-2deg); } to { transform: translateX(-6vw) rotate(3deg); } }
@keyframes driftRight { from { transform: translateX(-4vw) rotate(2deg); } to { transform: translateX(5vw) rotate(-4deg); } }
@keyframes seamClip { 0%,100% { clip-path: inset(0 0 52% 0); } 35% { clip-path: inset(18% 0 32% 0); } 65% { clip-path: inset(58% 0 12% 0); } }
@keyframes seamJitter { 0%, 100% { clip-path: polygon(0 13%, 100% 0, 92% 78%, 8% 100%); } 50% { clip-path: polygon(7% 0, 94% 11%, 100% 92%, 0 77%); } }
@keyframes portalBreathe { from { border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%; } to { border-radius: 57% 43% 55% 45% / 43% 58% 42% 57%; } }

@media (max-width: 860px) {
  .lesson { grid-template-columns: 1fr; padding-top: 5.5rem; }
  .gutter { position: relative; top: auto; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(138,143,152,0.44); flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .coordinate { writing-mode: initial; margin: 0; }
  .seam-plate { grid-template-columns: 1fr; }
  .scan-strip { min-height: 45vh; }
  .circular-copy, .final-copy { width: auto; left: 0; right: 0; }
  .resolved-diagram { width: 92vw; opacity: 0.54; }
  .note-a, .note-b, .callout, .wrap-notes, .solved-label { display: none; }
}