:root {
  /* Design typography/pulse tokens: Space Grotesk** Grotesk* `lune.dev`; IBM Plex Sans** Sans*; Pulse-attention restrained directional: phosphor dots near active instruments. */
  --parchment: #F2E7D0;
  --basalt: #2E3532;
  --clay: #B86F45;
  --lichen: #A7F070;
  --teal: #5FA6A0;
  --amber: #F5B65B;
  --violet: #4A3F68;
  --space: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --plex: "IBM Plex Sans", system-ui, sans-serif;
  --instrument: "Instrument Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--basalt);
  font-family: var(--plex);
  background:
    radial-gradient(circle at 8% 4%, rgba(95, 166, 160, .34), transparent 30rem),
    radial-gradient(circle at 95% 10%, rgba(74, 63, 104, .38), transparent 36rem),
    linear-gradient(135deg, var(--parchment), #ead7bb 48%, #cab8bd 100%);
}

a { color: inherit; text-decoration: none; }

.paper-grain,
.cursor-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.paper-grain {
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(46,53,50,.12) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(184,111,69,.1) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 20%, rgba(46,53,50,.05) 55%, transparent);
  background-size: 13px 17px, 19px 23px, 100% 100%;
}

.cursor-field {
  z-index: 2;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(167, 240, 112, .15), transparent 18rem);
  transition: background .18s linear;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(46, 53, 50, .2);
  border-radius: 999px;
  background: rgba(242, 231, 208, .62);
  box-shadow: 0 14px 50px rgba(46, 53, 50, .12), inset 0 0 32px rgba(95, 166, 160, .12);
  backdrop-filter: blur(18px);
}

.wordmark {
  font-family: var(--space);
  font-weight: 700;
  letter-spacing: -.04em;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  color: var(--violet);
}

.plate-nav { display: flex; gap: .4rem; }

.plate-nav a,
.header-readout,
.eyebrow,
.ledger-row,
.instrument p,
.photo-view span,
.note-slip,
.commit-line {
  font-family: var(--instrument);
  font-size: .73rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.plate-nav a {
  padding: .48rem .72rem;
  border-radius: 999px;
  color: rgba(46, 53, 50, .68);
  transition: .35s ease;
}

.plate-nav a.active,
.plate-nav a:hover {
  color: var(--basalt);
  background: rgba(95, 166, 160, .24);
  box-shadow: inset 0 0 0 1px rgba(95, 166, 160, .34);
}

.header-readout {
  justify-self: end;
  color: var(--violet);
}

.header-readout span,
.commit-line span {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--lichen);
  box-shadow: 0 0 0 .3rem rgba(167, 240, 112, .16), 0 0 24px var(--lichen);
  animation: pulse 2.8s ease-in-out infinite;
}

.observatory { position: relative; z-index: 5; }

.tableau {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(6rem, 10vw, 8rem) clamp(1.2rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  isolation: isolate;
  background:
    radial-gradient(circle at 25% 25%, rgba(245, 182, 91, .12), transparent 22rem),
    radial-gradient(circle at 70% 80%, rgba(95, 166, 160, .16), transparent 24rem),
    linear-gradient(115deg, transparent, rgba(74, 63, 104, .12));
}

.tableau::before,
.tableau::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 49% 51% 42% 58% / 56% 44% 56% 44%;
  filter: blur(2px);
  opacity: .55;
}

.tableau::before {
  width: 42rem;
  height: 26rem;
  left: -8rem;
  top: 14%;
  background: radial-gradient(circle, rgba(95, 166, 160, .26), rgba(95, 166, 160, 0) 68%);
}

.tableau::after {
  width: 34rem;
  height: 20rem;
  right: -10rem;
  bottom: 8%;
  background: radial-gradient(circle, rgba(184, 111, 69, .2), rgba(184, 111, 69, 0) 70%);
}

.workbench-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .22;
  background-image:
    linear-gradient(rgba(46,53,50,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,53,50,.18) 1px, transparent 1px);
  background-size: calc(100vw / 12) 7.5rem;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
}

.panel,
.instrument,
.photo-view,
.knob-photo {
  border: 1px solid rgba(46, 53, 50, .22);
  background: linear-gradient(135deg, rgba(242, 231, 208, .64), rgba(95, 166, 160, .13));
  box-shadow: 0 24px 80px rgba(46, 53, 50, .14), inset 0 0 26px rgba(242, 231, 208, .36);
  backdrop-filter: blur(10px);
}

.dusk { display: grid; grid-template-columns: 1fr 1.08fr .42fr; gap: 1.2rem; align-items: center; }

.hero-ledger { grid-column: 1 / 2; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 2rem 3.4rem 2rem 2.6rem; transform: rotate(-.6deg); }

.eyebrow { margin: 0 0 1rem; color: var(--clay); font-weight: 700; }

h1,
h2 {
  margin: 0;
  font-family: var(--space);
  color: var(--basalt);
  line-height: .92;
  letter-spacing: -.06em;
}

h1 { font-size: clamp(3.4rem, 8.5vw, 9.4rem); max-width: 8ch; }
h2 { font-size: clamp(2.7rem, 6.4vw, 7rem); max-width: 9.4ch; }

.panel > p:not(.eyebrow) {
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.65;
  max-width: 39rem;
  color: rgba(46, 53, 50, .82);
}

.ledger-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.ledger-row span { padding: .55rem .7rem; border: 1px dashed rgba(74, 63, 104, .34); border-radius: 999px; background: rgba(245, 182, 91, .15); }

.moon-system { position: relative; grid-column: 2 / 3; min-height: 42rem; display: grid; place-items: center; }

.moon-disk {
  position: relative;
  width: clamp(19rem, 40vw, 37rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(242,231,208,.9), transparent 10%),
    radial-gradient(circle at 68% 58%, rgba(74,63,104,.28), transparent 12%),
    radial-gradient(circle at 42% 72%, rgba(95,166,160,.32), transparent 18%),
    radial-gradient(circle at 55% 46%, rgba(245,182,91,.28), transparent 22%),
    linear-gradient(135deg, #efe0c3, #c9bebc 52%, #8f879a);
  box-shadow: 0 0 0 1px rgba(46, 53, 50, .12), 0 0 80px rgba(245, 182, 91, .35), inset -28px -24px 70px rgba(74, 63, 104, .32);
  overflow: hidden;
}

.moon-disk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 25% 35%, rgba(46,53,50,.16) 0 2px, transparent 3px), radial-gradient(circle at 70% 46%, rgba(46,53,50,.12) 0 1px, transparent 2px);
  background-size: 23px 31px, 17px 19px;
  mix-blend-mode: multiply;
}

.crater { position: absolute; border-radius: 50%; border: 1px solid rgba(46,53,50,.14); background: rgba(74,63,104,.12); }
.c1 { width: 18%; height: 18%; left: 22%; top: 28%; }
.c2 { width: 12%; height: 12%; right: 26%; top: 19%; }
.c3 { width: 24%; height: 24%; right: 18%; bottom: 22%; }
.c4 { width: 9%; height: 9%; left: 42%; bottom: 17%; }

.orbit-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(95, 166, 160, .58); box-shadow: inset 0 0 20px rgba(167,240,112,.06); }
.ring-a { width: 92%; aspect-ratio: 1; animation: breathe 5s ease-in-out infinite; }
.ring-b { width: 74%; aspect-ratio: 1; border-style: dashed; transform: rotate(18deg); }
.orbit-pip { position: absolute; width: .75rem; height: .75rem; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 22px var(--lichen); animation: pulse 2.4s ease-in-out infinite; }
.p1 { top: 16%; right: 28%; }
.p2 { left: 14%; bottom: 31%; animation-delay: .6s; }
.p3 { right: 18%; bottom: 23%; animation-delay: 1.2s; }

.phase-dial { align-self: end; padding: 1rem; border-radius: 1.4rem; transform: rotate(1.4deg); }
.dial-face { width: 8.5rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--teal); background: conic-gradient(from 20deg, rgba(167,240,112,.6), transparent 26%, rgba(245,182,91,.6), transparent 58%, rgba(74,63,104,.3)); display: grid; place-items: center; }
.dial-face i { width: 42%; height: 2px; background: var(--basalt); transform-origin: right; transform: rotate(-30deg); }
.instrument strong { font-family: var(--space); font-size: 2rem; color: var(--violet); }
.note-slip { position: absolute; right: 8%; top: 24%; width: 16rem; padding: 1rem; color: var(--basalt); background: rgba(245, 182, 91, .28); border: 1px dashed rgba(184, 111, 69, .55); border-radius: .35rem; transform: rotate(4deg); }

.moonrise,
.orbit,
.garden,
.dawn { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; align-items: center; }

.photo-view { grid-column: 1 / 6; height: min(62vh, 38rem); border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: end center; padding: 2rem; }
.basalt { background: radial-gradient(circle at 38% 32%, rgba(242,231,208,.18), transparent 10%), radial-gradient(circle at 70% 60%, rgba(167,240,112,.18), transparent 11%), linear-gradient(135deg, #28302d, #4f5960 46%, #2E3532); }
.basalt::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(242,231,208,.14) 0 1px, transparent 2px); background-size: 21px 17px; }
.reticle { position: absolute; inset: 13%; border: 1px solid rgba(167,240,112,.5); border-radius: 50%; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(167,240,112,.55); }
.reticle::before { width: 100%; height: 1px; top: 50%; left: 0; }
.reticle::after { width: 1px; height: 100%; left: 50%; top: 0; }
.photo-view span { position: relative; color: var(--parchment); background: rgba(46,53,50,.45); padding: .5rem .8rem; border-radius: 999px; }

.scene-copy { grid-column: 6 / 12; padding: clamp(1.4rem, 3vw, 2.8rem); border-radius: 2.8rem 1.4rem 3rem 1.6rem; }
.sample-tray { grid-column: 7 / 12; display: flex; gap: 1rem; align-items: end; padding: 1rem; border-radius: 1.5rem; align-self: start; }
.sample { flex: 1; height: 5rem; border-radius: 1rem; box-shadow: inset 0 0 20px rgba(46,53,50,.24); }
.moss { background: radial-gradient(circle, #A7F070, #5FA6A0 55%, #2E3532); }
.clay { background: radial-gradient(circle, #F5B65B, #B86F45 55%, #4A3F68); }
.stone { background: radial-gradient(circle, #F2E7D0, #78807c 55%, #2E3532); }
.signal-strip { grid-column: 2 / 6; display: flex; align-items: end; gap: .45rem; height: 8rem; padding: 1rem; border-radius: 1.2rem; }
.signal-strip span { flex: 1; height: var(--h, 45%); background: linear-gradient(var(--lichen), var(--teal)); border-radius: 999px; animation: signal 2.6s ease-in-out infinite; }
.signal-strip span:nth-child(2) { --h: 68%; animation-delay: .2s; }
.signal-strip span:nth-child(3) { --h: 35%; animation-delay: .4s; }
.signal-strip span:nth-child(4) { --h: 82%; animation-delay: .6s; }
.signal-strip span:nth-child(5) { --h: 52%; animation-delay: .8s; }
.signal-strip span:nth-child(6) { --h: 76%; animation-delay: 1s; }

.terminal-scrap { grid-column: 2 / 8; padding: clamp(1.4rem, 3vw, 2.8rem); border-radius: 1.5rem 3rem 1.8rem 2.4rem; transform: rotate(-1deg); }
.contour-code { display: grid; gap: .6rem; margin: 1.5rem 0; }
.contour-code span { height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--lichen), transparent 78%); box-shadow: 0 0 18px rgba(167,240,112,.26); }
.contour-code span:nth-child(even) { width: 72%; margin-left: 12%; background: linear-gradient(90deg, var(--amber), transparent 80%); }
.compass { grid-column: 9 / 12; justify-self: center; position: relative; width: 18rem; aspect-ratio: 1; border-radius: 50%; }
.compass b { position: absolute; font-family: var(--space); color: var(--violet); }
.compass b:nth-child(1) { top: 1rem; left: 50%; }.compass b:nth-child(2) { right: 1rem; top: 50%; }.compass b:nth-child(3) { bottom: 1rem; left: 50%; }.compass b:nth-child(4) { left: 1rem; top: 50%; }
.compass i { position: absolute; width: 44%; height: 2px; left: 28%; top: 50%; background: var(--clay); transform: rotate(-32deg); transform-origin: center; }
.hud-map { grid-column: 8 / 12; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; opacity: .8; }
.hud-map span { height: 8rem; border: 1px solid rgba(95,166,160,.5); border-radius: 50%; background: radial-gradient(circle, rgba(95,166,160,.18), transparent 60%); }

.garden .scene-copy { grid-column: 1 / 7; }
.garden-bed { grid-column: 7 / 12; min-height: 28rem; border-radius: 2rem; position: relative; overflow: hidden; }
.garden-bed span { position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: var(--lichen); box-shadow: 0 0 24px var(--lichen); animation: pulse 3s ease-in-out infinite; left: var(--x); top: var(--y); }
.garden-bed span:nth-child(1) { --x: 18%; --y: 26%; }.garden-bed span:nth-child(2) { --x: 38%; --y: 54%; animation-delay: .3s; }.garden-bed span:nth-child(3) { --x: 68%; --y: 20%; animation-delay: .6s; }.garden-bed span:nth-child(4) { --x: 78%; --y: 70%; animation-delay: .9s; }.garden-bed span:nth-child(5) { --x: 28%; --y: 78%; animation-delay: 1.2s; }.garden-bed span:nth-child(6) { --x: 54%; --y: 38%; animation-delay: 1.5s; }.garden-bed span:nth-child(7) { --x: 84%; --y: 42%; animation-delay: 1.8s; }.garden-bed span:nth-child(8) { --x: 12%; --y: 58%; animation-delay: 2.1s; }
.knob-photo { grid-column: 2 / 5; height: 13rem; border-radius: 2rem; background: radial-gradient(circle at 50% 50%, #4A3F68 0 18%, #F5B65B 19% 26%, #2E3532 27% 42%, #5FA6A0 43% 44%, #bca98d 45%); display: grid; place-items: end center; padding: 1rem; color: var(--parchment); }
.knob-photo em { font-family: var(--instrument); font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }

.dawn { background: radial-gradient(circle at 70% 35%, rgba(245,182,91,.32), transparent 28rem), linear-gradient(140deg, #F2E7D0, rgba(184,111,69,.28), rgba(74,63,104,.18)); }
.dawn-card { grid-column: 2 / 9; padding: clamp(1.6rem, 4vw, 3.2rem); border-radius: 3.2rem 1.8rem 2.6rem 1.4rem; }
.sunrise-gauge { grid-column: 10 / 12; min-height: 18rem; border-radius: 10rem 10rem 1.5rem 1.5rem; display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, rgba(245,182,91,.48), rgba(242,231,208,.46)); }
.sunrise-gauge i { width: 8rem; aspect-ratio: 1; border-radius: 50% 50% 0 0; background: var(--amber); box-shadow: 0 0 60px rgba(245,182,91,.54); }

@keyframes pulse { 0%, 100% { transform: scale(.82); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(.98); opacity: .52; } 50% { transform: scale(1.04); opacity: .95; } }
@keyframes signal { 0%, 100% { opacity: .45; transform: scaleY(.82); } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr; border-radius: 1.4rem; }
  .plate-nav { overflow: auto; }
  .header-readout { justify-self: start; }
  .dusk,
  .moonrise,
  .orbit,
  .garden,
  .dawn { display: block; }
  .tableau { padding-top: 12rem; }
  .moon-system { min-height: 28rem; }
  .panel,
  .instrument,
  .photo-view,
  .knob-photo { margin: 1rem 0; }
  .note-slip { position: relative; right: auto; top: auto; width: auto; }
}