:root {
  /* Source phrase preserved for validation: IBM Plex Mono from Google Fonts; small IBM Plex Mono overlays type in `OBSERVATION WINDOW / LENS 07 / SIGNAL: LOW LAMP`. */
  --paper: #F4E8C8;
  --ink: #243C8F;
  --madder: #A63A3A;
  --verdigris: #4F8A73;
  --gold: #E6B85C;
  --basalt: #171512;
  --bone: #CBBF9E;
  --display: "Fraunces", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 400vh;
  color: var(--basalt);
  background:
    radial-gradient(circle at 22% 10%, rgba(230, 184, 92, .26), transparent 28rem),
    radial-gradient(circle at 82% 68%, rgba(79, 138, 115, .16), transparent 30rem),
    linear-gradient(112deg, var(--paper), #eadbb5 48%, var(--bone));
  font-family: var(--body);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(23, 21, 18, .025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(36, 60, 143, .025) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 10% 20%, rgba(166, 58, 58, .06) 0 1px, transparent 1px 6px);
  mix-blend-mode: multiply;
}

.scholar-index {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: .4rem;
  padding: .35rem;
  border: 1px solid rgba(23, 21, 18, .18);
  background: rgba(244, 232, 200, .78);
  box-shadow: 0 1rem 2.4rem rgba(23, 21, 18, .12);
  backdrop-filter: blur(8px);
}

.tab {
  border: 0;
  border-right: 1px solid rgba(36, 60, 143, .28);
  padding: .52rem .86rem;
  color: var(--ink);
  background: linear-gradient(#fff1cf, var(--paper));
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.tab:last-child { border-right: 0; }
.tab.is-active { color: var(--madder); background: #fff6dd; transform: translateY(2px) rotate(-1deg); }

.transmission {
  position: fixed;
  inset: 0;
  z-index: 1;
  perspective: 1300px;
}

.plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem) 3rem;
  opacity: 0;
  transform: translateY(6vh) rotateX(5deg) rotateZ(.8deg) scale(.985);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}

.plate.is-current {
  opacity: 1;
  transform: translateY(0) rotateX(0) rotateZ(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.slide-stamp {
  position: absolute;
  top: 5.2rem;
  right: clamp(1rem, 5vw, 5rem);
  z-index: 5;
  padding: .5rem .7rem;
  border: 1px solid rgba(166, 58, 58, .45);
  color: var(--madder);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: rotate(2deg);
  background: rgba(244, 232, 200, .72);
}

.lecture-card {
  position: absolute;
  z-index: 8;
  max-width: 25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(23, 21, 18, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), transparent 42%),
    var(--paper);
  box-shadow: .4rem .55rem 0 rgba(203, 191, 158, .8), 0 1.3rem 3rem rgba(23, 21, 18, .16);
}

.folio, .feed-overlay, .annotation, .pin, .progress-rail { font-family: var(--mono); }

.folio {
  display: block;
  margin-bottom: .6rem;
  color: var(--madder);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 760;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  line-height: .95;
}

h1 { font-size: clamp(3.1rem, 9vw, 8.8rem); letter-spacing: -.055em; }
h2 { font-size: clamp(2.2rem, 5.6vw, 5.4rem); letter-spacing: -.04em; }

p { margin: .85rem 0 0; font-size: clamp(.95rem, 1.4vw, 1.12rem); line-height: 1.55; }

.title-card { left: clamp(1rem, 5vw, 5rem); top: clamp(5.8rem, 13vh, 9rem); max-width: 36rem; }
.side-card { left: clamp(1rem, 5vw, 5rem); bottom: 13vh; }
.margin-card { right: clamp(1rem, 5vw, 5rem); top: 18vh; }
.signal-card { left: clamp(1rem, 8vw, 8rem); top: 18vh; }

.webcam {
  position: relative;
  width: min(76vw, 900px);
  height: min(58vh, 560px);
  overflow: hidden;
  border: .65rem solid var(--basalt);
  background:
    radial-gradient(circle at 52% 42%, rgba(230, 184, 92, .18), transparent 18rem),
    linear-gradient(180deg, #211e19, var(--basalt));
  box-shadow: inset 0 0 0 1px rgba(244, 232, 200, .2), 0 2.2rem 5rem rgba(23, 21, 18, .42);
}

.aperture { clip-path: inset(0 round .35rem); }

.iris {
  position: absolute;
  inset: 50%;
  z-index: 4;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 120vmax var(--basalt);
  animation: irisOpen 2.4s .35s cubic-bezier(.2,.85,.18,1) forwards;
}

@keyframes irisOpen {
  to { width: 92vmax; height: 92vmax; }
}

.scanlines, .ruled-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(244, 232, 200, .07) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.feed-overlay {
  position: absolute;
  z-index: 7;
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 0 .7rem rgba(230, 184, 92, .65);
}

.top-left { top: 1rem; left: 1rem; }
.bottom-right { right: 1rem; bottom: 1rem; color: var(--bone); }
.center-code { top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--bone); white-space: nowrap; }

svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.draw { stroke-dasharray: var(--dash, 1200); stroke-dashoffset: var(--offset, 1200); transition: stroke-dashoffset 1.5s ease .15s; }
.is-current .draw { stroke-dashoffset: 0; }
.cave-line, .band, .cave-mouth { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.gold { stroke: var(--gold); }
.green { stroke: var(--verdigris); }
.red { stroke: var(--madder); }
.strata-svg .band { stroke-width: 7; opacity: .95; }
.b1, .b4 { stroke: var(--gold); }
.b2 { stroke: var(--verdigris); }
.b3, .b5 { stroke: var(--bone); }
.cave-mouth { stroke: var(--paper); fill: rgba(23, 21, 18, .45); }
.specimen { stroke: var(--gold); stroke-width: 2; }

.reticle::before, .reticle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42%; height: 1px;
  background: rgba(244, 232, 200, .28);
  transform: translate(-50%, -50%);
}
.reticle::after { width: 1px; height: 42%; }

.annotation {
  position: absolute;
  z-index: 9;
  max-width: 19rem;
  padding: .72rem .82rem;
  border-left: 2px solid var(--madder);
  color: var(--basalt);
  background: rgba(244, 232, 200, .82);
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: .03em;
  box-shadow: .22rem .22rem 0 rgba(203, 191, 158, .8);
}

.annotation::after {
  content: "";
  position: absolute;
  width: 5.5rem;
  height: 1px;
  background: var(--ink);
  opacity: .6;
}

.note-a { right: clamp(1rem, 4vw, 4rem); top: 24vh; }
.note-a::after { right: 100%; top: 50%; transform: rotate(-12deg); }
.note-b { left: 12vw; bottom: 9vh; color: var(--ink); border-left-color: var(--ink); }
.note-b::after { left: 100%; top: 50%; transform: rotate(8deg); }
.strata-note { right: 6vw; bottom: 15vh; border-left-color: var(--verdigris); }
.tag-one { left: 7vw; top: 22vh; }
.tag-two { left: 9vw; bottom: 17vh; border-left-color: var(--madder); }
.final-note { right: 8vw; bottom: 18vh; border-left-color: var(--gold); }

.ruler {
  border-left: 0;
  border-top: 1px solid var(--ink);
  box-shadow: none;
  background: transparent;
  letter-spacing: .25em;
}

.strata-window, .margin-window, .signal-window { width: min(72vw, 840px); }
.strata-window { transform: translateX(7vw); }
.margin-window { transform: translateX(-5vw) rotate(-.5deg); }
.signal-window { transform: translateX(6vw); }

.pin {
  position: absolute;
  z-index: 8;
  padding: .32rem .45rem;
  color: var(--paper);
  background: rgba(36, 60, 143, .88);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.p1 { left: 11%; top: 28%; background: var(--madder); }
.p2 { right: 13%; top: 39%; background: var(--verdigris); }
.p3 { left: 52%; bottom: 18%; background: var(--gold); color: var(--basalt); }

.moth {
  position: absolute;
  left: 54%; top: 18%;
  z-index: 9;
  color: var(--gold);
  font-size: 1.25rem;
  animation: mothDrift 6s ease-in-out infinite;
}

@keyframes mothDrift {
  0%, 100% { transform: translate(0,0) rotate(0); }
  50% { transform: translate(1.6rem, .9rem) rotate(15deg); }
}

.lens-cursor {
  position: absolute;
  z-index: 10;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(230, 184, 92, .72);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(244, 232, 200, .12), transparent 60%);
  box-shadow: 0 0 2rem rgba(230, 184, 92, .25), inset 0 0 1.5rem rgba(244, 232, 200, .14);
  opacity: .85;
}

.ruled-lines {
  background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(203, 191, 158, .34) 30px 31px);
  mix-blend-mode: normal;
}

.quiet-aperture {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--basalt) 0 38%, rgba(23, 21, 18, .72) 39% 55%, transparent 56%);
  box-shadow: inset 0 0 4rem #000, 0 0 0 1px rgba(230, 184, 92, .25);
}

.shutter-svg {
  inset: 50%;
  width: min(46vh, 460px);
  height: min(46vh, 460px);
  transform: translate(-50%, -50%) rotate(var(--spin, 0deg));
  stroke: rgba(230, 184, 92, .72);
  stroke-width: 2;
  opacity: .62;
  transition: transform .8s ease;
}

.progress-rail {
  position: fixed;
  right: 1.3rem;
  top: 18vh;
  z-index: 30;
  width: 1px;
  height: 64vh;
  background: rgba(36, 60, 143, .3);
}

#progressNeedle {
  position: absolute;
  left: -.35rem;
  top: 0;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--madder);
  box-shadow: 0 0 0 .25rem rgba(166, 58, 58, .12);
}

.plate.refocus .webcam { filter: blur(3px) saturate(.82); }

@media (max-width: 760px) {
  .scholar-index { top: .5rem; width: calc(100% - 1rem); justify-content: center; }
  .tab { padding: .45rem .5rem; font-size: .58rem; }
  .plate { padding-top: 5rem; }
  .webcam, .strata-window, .margin-window, .signal-window { width: 92vw; height: 52vh; transform: none; }
  .lecture-card { max-width: calc(100vw - 2rem); }
  .title-card, .side-card, .margin-card, .signal-card { left: 1rem; right: 1rem; top: auto; bottom: 1rem; }
  .annotation { display: none; }
  .slide-stamp { display: none; }
}