:root {
  /* Compliance echoes: IBM Plex Mono** for timestamps; Source Serif 4** for body notes. */
  --warm-paper: #F4E6C2;
  --jasmine-cream: #FFF8E3;
  --honey-amber: #C9943A;
  --tea-shadow: #7A5B38;
  --sepia-ink: #2B241B;
  --photo-brown: #9B7653;
  --signal-blue: #4E8FA6;
  --soft-graphite: #6E6A5F;
  --display: "Fraunces", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sepia-ink);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 248, 227, .96), rgba(244, 230, 194, .88) 46%, rgba(201, 148, 58, .16) 100%),
    var(--warm-paper);
  font-family: var(--serif);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .36;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(43,36,27,.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 60%, rgba(122,91,56,.10) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,248,227,.18), rgba(78,143,166,.05), rgba(255,248,227,.14));
  background-size: 34px 34px, 47px 47px, 100% 100%;
}

.stream-spine {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  z-index: 4;
  pointer-events: none;
}

.spine-rule, .spine-current {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
}

.spine-rule { background: rgba(122, 91, 56, .25); }

.spine-current {
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--honey-amber), var(--photo-brown), var(--signal-blue));
  box-shadow: 0 0 18px rgba(78,143,166,.24);
}

.spine-pulse {
  position: absolute;
  left: -5px;
  top: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--signal-blue);
  border-radius: 50%;
  background: var(--jasmine-cream);
  transform: translateY(0);
  box-shadow: 0 0 24px rgba(78,143,166,.32);
}

.monograph { width: 100%; }

.plate {
  position: relative;
  min-height: 100vh;
  padding: 12vh max(6vw, 24px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.plate::before {
  content: "";
  position: absolute;
  inset: 8vh 7vw;
  border-top: 1px solid rgba(122,91,56,.2);
  border-bottom: 1px solid rgba(122,91,56,.14);
  opacity: .72;
  pointer-events: none;
}

.plate-number {
  position: sticky;
  top: 28px;
  align-self: start;
  justify-self: calc(50% - 290px);
  margin-right: 610px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soft-graphite);
  z-index: 3;
  writing-mode: vertical-rl;
}

.hero-field, .plate-grid, .contact-layout, .apparatus, .playback-field {
  width: min(880px, 100%);
  position: relative;
  z-index: 2;
}

.hero-field {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4vh;
}

.mono-label, .caption, figcaption, .margin-note, .final-annotation {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft-graphite);
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(64px, 15vw, 176px);
  font-weight: 720;
  font-variation-settings: "SOFT" 68, "WONK" 1, "opsz" 120;
  line-height: .78;
  letter-spacing: -.08em;
  margin: 0 0 24px -0.07em;
  color: var(--sepia-ink);
  max-width: 1100px;
  clip-path: inset(0 0 10% 0);
}

.hero-caption {
  width: min(520px, 86vw);
  margin: 28px 0 0 auto;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--tea-shadow);
}

.draw-rule {
  height: 16px;
  width: min(620px, 76vw);
  position: relative;
  overflow: hidden;
}

.draw-rule span, h2 span::after, .underline-link::after, .final-annotation span {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--tea-shadow), var(--honey-amber), var(--signal-blue));
  transform-origin: left;
  transform: scaleX(0);
}

.is-visible .draw-rule span, .is-visible h2 span::after, .is-visible .underline-link::after, .is-visible .final-annotation span {
  animation: drawLine 1.4s cubic-bezier(.22,.8,.18,1) forwards;
}

.hero-rule span { animation-delay: .38s; }

@keyframes drawLine { to { transform: scaleX(1); } }

.plate-grid {
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(220px, 330px);
  gap: clamp(42px, 9vw, 118px);
  align-items: center;
}

.copy-block {
  padding: 32px 0;
  background: linear-gradient(90deg, rgba(255,248,227,.58), transparent);
}

h2 {
  margin: 10px 0 24px;
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 104px);
  line-height: .86;
  letter-spacing: -.055em;
  font-weight: 660;
  font-variation-settings: "SOFT" 54, "WONK" 1, "opsz" 96;
  color: var(--sepia-ink);
}

h2 span { display: inline-block; position: relative; }
h2 span::after { position: absolute; left: 0; bottom: -.16em; }

p {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.62;
  color: rgba(43,36,27,.86);
}

.caption { margin-top: 32px; width: fit-content; }
.underline-link::after { margin-top: 7px; height: 1px; }

.photo-artifact, .contact-frame {
  margin: 0;
  position: relative;
  padding: 13px 13px 34px;
  background: rgba(255,248,227,.72);
  border: 1px solid rgba(122,91,56,.28);
  box-shadow: 0 22px 70px rgba(43,36,27,.12), inset 0 0 26px rgba(201,148,58,.12);
  transform: translateY(28px) rotate(var(--tilt, -1.5deg));
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.18,.78,.2,1), filter 1.2s ease;
  filter: blur(2px) sepia(.32);
}

.is-visible .photo-artifact, .is-visible .contact-frame {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, -1.5deg));
  filter: blur(0) sepia(.32);
}

.photo-artifact::before, .contact-frame::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255,248,227,.45);
  pointer-events: none;
}

.photo-artifact::after, .contact-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 42%, rgba(122,91,56,.22));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.photo-image {
  min-height: 360px;
  background-color: var(--photo-brown);
  background-blend-mode: multiply, normal;
  filter: grayscale(.42) contrast(.9);
  overflow: hidden;
}

.stems {
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(43,36,27,.38) 41% 43%, transparent 44% 100%),
    linear-gradient(68deg, transparent 0 54%, rgba(255,248,227,.55) 55% 57%, transparent 58% 100%),
    radial-gradient(ellipse at 72% 24%, rgba(255,248,227,.86) 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 42% 62%, rgba(255,248,227,.74) 0 3%, transparent 3.5%),
    linear-gradient(140deg, #6E6A5F, #9B7653 48%, #F4E6C2);
}

.reel {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 10%, rgba(43,36,27,.38) 10.5% 12%, transparent 12.5% 25%, rgba(43,36,27,.28) 25.5% 28%, transparent 28.5% 41%, rgba(43,36,27,.32) 41.5% 44%, transparent 44.5%),
    radial-gradient(circle at 50% 50%, #F4E6C2, #9B7653 62%, #2B241B);
}

.window {
  background:
    linear-gradient(90deg, rgba(43,36,27,.32) 0 2%, transparent 2.5% 48%, rgba(43,36,27,.25) 49% 51%, transparent 52% 98%, rgba(43,36,27,.3) 98%),
    linear-gradient(0deg, rgba(43,36,27,.28) 0 3%, transparent 3.5% 46%, rgba(43,36,27,.22) 47% 49%, transparent 50%),
    radial-gradient(circle at 72% 20%, #FFF8E3, #C9943A 34%, #9B7653 72%);
}

.card {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(43,36,27,.18) 24px 25px),
    linear-gradient(105deg, #FFF8E3, #F4E6C2 54%, #9B7653);
}

.table {
  min-height: 420px;
  background:
    linear-gradient(0deg, rgba(43,36,27,.42) 0 34%, transparent 35%),
    radial-gradient(ellipse at 48% 26%, rgba(255,248,227,.78), transparent 30%),
    linear-gradient(132deg, #2B241B, #9B7653 43%, #F4E6C2);
}

figcaption { position: absolute; left: 16px; bottom: 8px; color: var(--tea-shadow); }

.margin-note {
  position: absolute;
  top: 62%;
  max-width: 210px;
  border-top: 1px solid rgba(122,91,56,.35);
  padding-top: 10px;
}

.left-note { left: max(24px, calc(50% - 560px)); }
.right-note { right: max(24px, calc(50% - 570px)); text-align: right; }
.blue { color: var(--signal-blue); border-color: rgba(78,143,166,.4); }

.contact-layout { display: grid; gap: 54px; }
.centered-copy { width: min(590px, 100%); margin: 0 auto; text-align: center; }
.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(122,91,56,.24);
  background: rgba(43,36,27,.04);
}

.contact-frame { --tilt: 0deg; min-width: 0; transition-delay: calc(var(--order, 0) * 130ms); }
.contact-frame:nth-child(1) { --order: 1; }
.contact-frame:nth-child(2) { --order: 2; }
.contact-frame:nth-child(3) { --order: 3; }
.contact-frame .photo-image { min-height: 220px; }

.apparatus {
  display: grid;
  grid-template-columns: minmax(260px, 510px) 220px;
  gap: clamp(34px, 8vw, 110px);
  align-items: center;
}

.instrument-card {
  padding: 34px 34px 42px;
  border-left: 1px solid rgba(78,143,166,.45);
  background: linear-gradient(90deg, rgba(78,143,166,.10), rgba(255,248,227,.24));
}

.meter {
  width: 220px;
  height: 220px;
  border-radius: 50% 50% 44% 44%;
  border: 1px solid rgba(43,36,27,.36);
  background: radial-gradient(circle at 50% 72%, #FFF8E3 0 36%, #F4E6C2 37% 64%, #9B7653 100%);
  box-shadow: inset 0 -22px 60px rgba(43,36,27,.14), 0 18px 60px rgba(43,36,27,.12);
  display: grid;
  place-items: center;
}

.meter-face { position: relative; width: 164px; height: 112px; border-top: 1px solid rgba(43,36,27,.38); }
.meter-face span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--soft-graphite); white-space: nowrap; }
.tick { position: absolute; bottom: 30px; width: 1px; height: 42px; background: rgba(43,36,27,.42); transform-origin: bottom; left: 50%; }
.t1 { transform: rotate(-58deg); } .t2 { transform: rotate(-28deg); } .t3 { transform: rotate(0deg); } .t4 { transform: rotate(28deg); } .t5 { transform: rotate(58deg); }
.needle { position: absolute; left: 50%; bottom: 30px; width: 2px; height: 86px; background: var(--signal-blue); transform-origin: bottom; transform: rotate(-46deg); transition: transform .45s ease; box-shadow: 0 0 16px rgba(78,143,166,.38); }

.punched-tape {
  grid-column: 1 / -1;
  display: flex;
  gap: 22px;
  padding: 16px 22px;
  border-top: 1px solid rgba(78,143,166,.32);
  border-bottom: 1px solid rgba(78,143,166,.32);
}
.punched-tape span { width: 12px; height: 12px; border-radius: 50%; background: rgba(78,143,166,.35); box-shadow: 38px 0 0 rgba(201,148,58,.24); }

.plate-final { padding-bottom: 16vh; }
.playback-field { display: grid; gap: 26px; width: min(720px, 100%); }
blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 78px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--tea-shadow);
}
.wide-photo { --tilt: .8deg; width: min(680px, 100%); }
.final-annotation {
  justify-self: end;
  color: var(--signal-blue);
  text-decoration: none;
  padding: 10px 0;
  width: 260px;
}
.final-annotation span { margin-top: 8px; background: var(--signal-blue); height: 1px; }

body[data-plate="3"] .spine-current, body[data-plate="4"] .spine-current { background: linear-gradient(180deg, var(--honey-amber), var(--signal-blue)); }

@media (max-width: 760px) {
  .stream-spine { left: 24px; }
  .plate { padding: 10vh 24px 10vh 52px; }
  .plate::before { inset: 6vh 18px 6vh 44px; }
  .plate-number { position: absolute; top: 24px; left: 8px; margin: 0; writing-mode: vertical-rl; }
  .wordmark { font-size: clamp(58px, 19vw, 110px); }
  .plate-grid, .apparatus, .contact-strip { grid-template-columns: 1fr; }
  .margin-note { display: none; }
  .contact-frame .photo-image, .photo-image { min-height: 260px; }
  .meter { margin: 0 auto; }
}