:root {
  /* compliance tokens: Sans** Mono** Grotesk** */
  --roasted-umber: #4A2F1B;
  --moss-graphite: #273226;
  --parchment: #E7D8B8;
  --pale-sage: #A8AD8A;
  --oxide-red: #7B3F2A;
  --clay-ochre: #B8753A;
  --bean-black: #12100C;
  --font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--parchment);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 22% 18%, rgba(184,117,58,.18), transparent 34rem),
    radial-gradient(circle at 80% 70%, rgba(39,50,38,.72), transparent 40rem),
    linear-gradient(135deg, var(--bean-black), #1c160f 48%, var(--roasted-umber));
  overflow-x: hidden;
}

body.layer-open .scan-line,
body.layer-open .cup-orbit,
body.layer-open .hud-frame::before,
body.layer-open .hud-frame::after { opacity: 1; transform: none; }

.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .22;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 17% 29%, rgba(231,216,184,.28) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px);
  filter: contrast(1.7);
}

.vignette {
  box-shadow: inset 0 0 9rem 3rem rgba(18,16,12,.92);
  z-index: 19;
}

.folio-rail {
  position: fixed;
  z-index: 25;
  top: 0;
  left: 0;
  width: 5.6rem;
  height: 100vh;
  border-right: 1px solid rgba(168,173,138,.28);
  background: linear-gradient(180deg, rgba(18,16,12,.9), rgba(74,47,27,.52));
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem .55rem;
  gap: .9rem;
}

.rail-title,
.rail-coord,
.mono,
.specimen,
.layer-trigger,
.note-card b,
.footnote-panel span,
.closing-ledger span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.rail-title {
  writing-mode: vertical-rl;
  color: var(--pale-sage);
  font-size: .62rem;
  margin-bottom: 1rem;
}

.rail-mark {
  width: 3.8rem;
  min-height: 4.5rem;
  color: rgba(231,216,184,.52);
  text-decoration: none;
  border: 1px solid rgba(168,173,138,.18);
  display: grid;
  place-items: center;
  position: relative;
  transition: color .45s ease, border-color .45s ease, background .45s ease;
}

.rail-mark span {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.rail-mark em {
  position: absolute;
  left: 4.4rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: .62rem var(--font-mono);
  letter-spacing: .1em;
  color: var(--parchment);
  background: rgba(18,16,12,.78);
  border: 1px solid rgba(184,117,58,.4);
  padding: .35rem .5rem;
  opacity: 0;
  pointer-events: none;
}

.rail-mark:hover em,
.rail-mark.active em { opacity: 1; }
.rail-mark.active { color: var(--clay-ochre); border-color: var(--clay-ochre); background: rgba(184,117,58,.12); }

.rail-rule { flex: 1; width: 1px; background: linear-gradient(var(--pale-sage), transparent); opacity: .35; }
.rail-coord { font-size: .54rem; color: rgba(231,216,184,.52); writing-mode: vertical-rl; }

.global-instrument {
  position: fixed;
  z-index: 24;
  right: 1.4rem;
  top: 1.2rem;
  min-width: 13rem;
  border: 1px solid rgba(168,173,138,.35);
  background: rgba(18,16,12,.58);
  backdrop-filter: blur(12px);
  padding: .85rem 1rem;
  box-shadow: 0 0 0 1px rgba(18,16,12,.4), inset 0 0 2rem rgba(74,47,27,.3);
}

.global-instrument strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--clay-ochre);
  margin: .2rem 0;
}

.global-instrument small { font: .72rem var(--font-mono); color: var(--pale-sage); }

.reading-room { margin-left: 5.6rem; }

.plate {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(168,173,138,.16);
}

.plate::before {
  content: attr(data-phase);
  position: absolute;
  right: 7vw;
  bottom: 5vh;
  color: rgba(168,173,138,.16);
  font: 700 clamp(3rem, 12vw, 11rem)/.8 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.06em;
  z-index: -1;
}

.photo {
  position: absolute;
  filter: sepia(.6) saturate(.72) brightness(.62) contrast(1.2);
  opacity: .78;
  box-shadow: 0 3rem 6rem rgba(18,16,12,.55);
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 42%, rgba(18,16,12,.78)), linear-gradient(90deg, rgba(39,50,38,.3), rgba(123,63,42,.24));
}

.photo-tabletop {
  width: min(70vw, 64rem);
  height: 76vh;
  left: 16vw;
  top: 11vh;
  clip-path: polygon(8% 0, 100% 6%, 88% 100%, 0 82%);
  background:
    radial-gradient(circle at 63% 38%, rgba(231,216,184,.22) 0 7%, transparent 7.5% 12%, rgba(18,16,12,.2) 12.5% 16%, transparent 17%),
    linear-gradient(104deg, transparent 0 48%, rgba(168,173,138,.15) 49% 50%, transparent 51%),
    repeating-linear-gradient(8deg, #20150d 0 13px, #4A2F1B 14px 28px, #2b1a10 29px 45px);
}

.photo-grounds {
  width: 58vw;
  height: 68vh;
  left: 11vw;
  top: 17vh;
  border-radius: 40% 3% 30% 5%;
  background:
    repeating-radial-gradient(circle at 30% 55%, #E7D8B8 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 60% 35%, #7B3F2A 0 2px, #4A2F1B 3px 9px, #12100C 10px 15px);
}

.photo-steam {
  width: 48vw;
  height: 78vh;
  right: 10vw;
  top: 9vh;
  clip-path: ellipse(41% 50% at 52% 50%);
  background:
    radial-gradient(ellipse at 46% 62%, transparent 0 24%, rgba(231,216,184,.2) 25% 27%, transparent 28%),
    linear-gradient(118deg, transparent 20%, rgba(231,216,184,.18) 23%, transparent 28%, rgba(168,173,138,.16) 34%, transparent 42%),
    repeating-linear-gradient(0deg, #1b130d 0 18px, #2b2117 19px 33px);
}

.photo-books {
  width: 70vw;
  height: 62vh;
  left: 17vw;
  bottom: 8vh;
  clip-path: polygon(0 12%, 92% 0, 100% 82%, 9% 100%);
  background:
    linear-gradient(90deg, rgba(231,216,184,.18) 0 6%, transparent 6% 14%, rgba(123,63,42,.25) 14% 18%, transparent 18%),
    repeating-linear-gradient(92deg, #1a120d 0 34px, #273226 35px 44px, #4A2F1B 45px 82px, #7B3F2A 83px 88px);
}

.hud-frame {
  position: absolute;
  border: 1px solid rgba(168,173,138,.42);
  background: linear-gradient(135deg, rgba(39,50,38,.15), rgba(231,216,184,.035));
  box-shadow: inset 0 0 3rem rgba(18,16,12,.35);
}

.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  background: var(--pale-sage);
  opacity: .28;
  transform: scaleX(.35);
  transform-origin: left;
  transition: opacity 1s ease, transform 1.2s ease;
}
.hud-frame::before { left: 8%; right: 8%; top: 18%; height: 1px; }
.hud-frame::after { left: 22%; right: 25%; bottom: 24%; height: 1px; background: var(--clay-ochre); }

.threshold-frame { width: 70vw; height: 70vh; left: 18vw; top: 15vh; }
.counter-frame { width: 46vw; height: 58vh; right: 12vw; top: 20vh; }
.extraction-frame { width: 62vw; height: 54vh; left: 15vw; top: 22vh; }
.table-frame { width: 72vw; height: 68vh; left: 14vw; top: 16vh; }

.corner { position: absolute; width: 2rem; height: 2rem; border-color: var(--clay-ochre); opacity: .9; }
.tl { left: -.3rem; top: -.3rem; border-left: 2px solid; border-top: 2px solid; }
.tr { right: -.3rem; top: -.3rem; border-right: 2px solid; border-top: 2px solid; }
.bl { left: -.3rem; bottom: -.3rem; border-left: 2px solid; border-bottom: 2px solid; }
.br { right: -.3rem; bottom: -.3rem; border-right: 2px solid; border-bottom: 2px solid; }

.plate-copy {
  position: absolute;
  z-index: 3;
  max-width: 37rem;
  padding: 1.2rem 1.35rem;
  background: rgba(18,16,12,.48);
  border: 1px solid rgba(231,216,184,.18);
  backdrop-filter: blur(8px);
}

.title-block { left: 10vw; top: 26vh; }
.side-copy { right: 8vw; top: 25vh; }
.lower-copy { left: 13vw; bottom: 17vh; }
.table-copy { right: 9vw; top: 20vh; }

.specimen { color: var(--pale-sage); font-size: .68rem; margin: 0 0 .8rem; }
h1, h2 { font-family: var(--font-display); margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(4rem, 12vw, 10rem); line-height: .82; color: var(--parchment); text-shadow: .06em .06em 0 rgba(123,63,42,.36); }
h2 { font-size: clamp(2rem, 5vw, 5.2rem); line-height: .9; color: var(--parchment); }
.plate-copy p:not(.specimen) { color: rgba(231,216,184,.82); font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.55; max-width: 31rem; }

.note-card,
.footnote-panel,
.annotation-stack,
.closing-ledger {
  position: absolute;
  z-index: 4;
  background: rgba(231,216,184,.88);
  color: var(--bean-black);
  border: 1px solid rgba(18,16,12,.18);
  box-shadow: 1rem 1rem 0 rgba(123,63,42,.18);
}

.note-a { right: 10vw; bottom: 20vh; width: 17rem; padding: 1rem; transform: rotate(-2deg); }
.note-card b { display: block; color: var(--oxide-red); font-size: .68rem; margin-bottom: .4rem; }
.note-card span { line-height: 1.45; }

.layer-trigger {
  position: absolute;
  z-index: 5;
  left: 10vw;
  bottom: 12vh;
  border: 1px solid var(--clay-ochre);
  color: var(--clay-ochre);
  background: rgba(18,16,12,.7);
  padding: .8rem 1rem;
  cursor: pointer;
}

.scan-line {
  position: absolute;
  z-index: 2;
  left: 15vw;
  top: 18vh;
  width: 72vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clay-ochre), transparent);
  opacity: .35;
  animation: sweep 5.6s ease-in-out infinite alternate;
}

.cup-orbit {
  position: absolute;
  right: 19vw;
  top: 26vh;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px solid rgba(168,173,138,.65);
  border-radius: 50%;
  opacity: .72;
}
.cup-orbit::before,
.cup-orbit::after,
.brew-rings i {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(184,117,58,.65);
  border-radius: 50%;
}
.cup-orbit::after { inset: 31%; border-color: rgba(231,216,184,.45); }
.cup-orbit span { position: absolute; left: 50%; top: -1rem; width: 1px; height: calc(100% + 2rem); background: rgba(168,173,138,.45); transform: rotate(38deg); }

.ruler { position: absolute; height: 1px; background: repeating-linear-gradient(90deg, var(--pale-sage) 0 1px, transparent 1px 18px); opacity: .55; }
.diagonal-ruler { width: 80vw; left: 9vw; top: 58vh; transform: rotate(-18deg); }
.prism { position: absolute; width: 18rem; height: 18rem; border-left: 1px solid var(--pale-sage); border-bottom: 1px solid var(--pale-sage); transform: rotate(45deg); opacity: .33; }
.prism-one { right: 20vw; bottom: 10vh; }

.annotation-stack { left: 13vw; bottom: 16vh; width: 24rem; padding: 1rem 1.2rem; background: rgba(39,50,38,.76); color: var(--parchment); }
.annotation-stack p { margin: .55rem 0; border-bottom: 1px solid rgba(168,173,138,.2); padding-bottom: .55rem; }
.annotation-stack span { color: var(--clay-ochre); font-family: var(--font-mono); margin-right: .8rem; }

.brew-rings { position: absolute; left: 54vw; top: 20vh; width: 27rem; aspect-ratio: 1; opacity: .58; animation: counterRotate 18s linear infinite; }
.brew-rings i:nth-child(1) { inset: 0; }
.brew-rings i:nth-child(2) { inset: 18%; border-color: var(--pale-sage); }
.brew-rings i:nth-child(3) { inset: 36%; border-color: var(--parchment); }

.footnote-panel { right: 12vw; bottom: 15vh; width: 21rem; padding: 1.2rem; background: rgba(231,216,184,.83); }
.footnote-panel span { display: block; color: var(--oxide-red); font-size: .68rem; margin-bottom: .6rem; }

.grid-mask { position: absolute; inset: 12vh 10vw; background-image: linear-gradient(rgba(168,173,138,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(168,173,138,.18) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 70%, transparent); opacity: .55; }
.closing-ledger { left: 12vw; top: 18vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(18,16,12,.75); color: var(--parchment); box-shadow: none; }
.closing-ledger div { padding: 1rem; min-width: 9rem; border: 1px solid rgba(168,173,138,.35); }
.closing-ledger span { display: block; font-size: .62rem; color: var(--pale-sage); }
.closing-ledger b { font: 700 2.5rem var(--font-display); color: var(--clay-ochre); }

.plate .plate-copy,
.plate .note-card,
.plate .annotation-stack,
.plate .footnote-panel,
.plate .closing-ledger { opacity: .38; transform: translateY(2rem); transition: opacity .8s ease, transform .8s ease; }
.plate.is-visible .plate-copy,
.plate.is-visible .note-card,
.plate.is-visible .annotation-stack,
.plate.is-visible .footnote-panel,
.plate.is-visible .closing-ledger { opacity: 1; transform: none; }

@keyframes sweep {
  from { transform: translateY(0); opacity: .2; }
  to { transform: translateY(52vh); opacity: .72; }
}

@keyframes counterRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@media (max-width: 820px) {
  .folio-rail { width: 4.3rem; }
  .reading-room { margin-left: 4.3rem; }
  .global-instrument { right: .8rem; top: .8rem; min-width: 10rem; }
  .photo, .threshold-frame, .counter-frame, .extraction-frame, .table-frame { width: 82vw; left: 9vw; right: auto; }
  .plate-copy, .note-a, .annotation-stack, .footnote-panel, .closing-ledger { left: 8vw; right: 6vw; width: auto; max-width: none; }
  .title-block, .side-copy, .lower-copy, .table-copy { top: 24vh; bottom: auto; }
  h1 { font-size: 4.2rem; }
  .cup-orbit, .brew-rings { width: 13rem; right: 8vw; left: auto; }
  .closing-ledger { grid-template-columns: 1fr; top: 68vh; }
}