:root {
  /* compliance terms: Sans* Sans** explanatory notes practical labels Interactions should feel inspecting specimen: hovering can reveal only doses IDs */
  --charcoal: #15120F;
  --ash: #EEE6D6;
  --rose: #C78F7B;
  --vein: #436B3A;
  --chalk: #D8D0B8;
  --ember: #B84E2B;
  --blue: #1E4057;
  --silver: #8B8A82;
  --bodoni: "Bodoni Moda", serif;
  --plex: "IBM Plex Sans", sans-serif;
  --cormorant: "Cormorant Garamond", serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--charcoal);
  font-family: var(--plex);
  background: var(--ash);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(199, 143, 123, .32), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(30, 64, 87, .22), transparent 28%),
    linear-gradient(116deg, rgba(238, 230, 214, .95), rgba(216, 208, 184, .74));
  z-index: -5;
}

.paper-grain,
.carbon-copy {
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.paper-grain {
  z-index: 10;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 30% 20%, rgba(21, 18, 15, .08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(139, 138, 130, .08) 0 1px, transparent 1px 7px);
}

.carbon-copy-one {
  z-index: -3;
  transform: translate(8px, -7px) rotate(-.6deg);
  background: linear-gradient(90deg, transparent 0 42%, rgba(30, 64, 87, .06) 42% 43%, transparent 43% 100%);
}

.carbon-copy-two {
  z-index: -2;
  transform: translate(-6px, 10px) rotate(.8deg);
  background: radial-gradient(ellipse at 58% 44%, rgba(21, 18, 15, .05), transparent 38%);
}

.day-wheel {
  position: fixed;
  right: 28px;
  top: 26px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(21, 18, 15, .36);
  border-radius: 50%;
  z-index: 20;
  transition: transform .7s ease;
  background: rgba(238, 230, 214, .44);
  backdrop-filter: blur(3px);
}

.day-wheel::before,
.day-wheel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 16px;
  border: 1px dashed rgba(21, 18, 15, .28);
}

.day-wheel::after {
  inset: 48px;
  background: var(--charcoal);
  border: 0;
  box-shadow: 0 0 28px rgba(21, 18, 15, .38);
}

.wheel-label {
  position: absolute;
  left: -18px;
  bottom: -20px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}

.wheel-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px;
  border: 0;
  border-radius: 50%;
  background: var(--silver);
  color: var(--ash);
  cursor: pointer;
  transform: rotate(var(--turn)) translateY(-62px) rotate(calc(var(--turn) * -1));
  transition: background .35s ease, box-shadow .35s ease, scale .35s ease;
  font: 700 8px/1 var(--mono);
}

.wheel-mark.active {
  background: var(--ember);
  box-shadow: 0 0 0 6px rgba(184, 78, 43, .15), 0 0 24px rgba(184, 78, 43, .42);
  scale: 1.12;
}

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7vw 9vw;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-state);
  position: absolute;
  left: 3vw;
  top: 18vh;
  writing-mode: vertical-rl;
  font: 700 10px/1 var(--mono);
  letter-spacing: .32em;
  color: rgba(21, 18, 15, .42);
  text-transform: uppercase;
}

.chamber-field {
  width: min(1180px, 100%);
  min-height: 78vh;
  position: relative;
  border: 1px solid rgba(21, 18, 15, .2);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(21,18,15,.08) 7% calc(7% + 1px), transparent calc(7% + 1px)),
    linear-gradient(rgba(238, 230, 214, .72), rgba(238, 230, 214, .42));
  box-shadow: 0 30px 70px rgba(21, 18, 15, .12);
  overflow: hidden;
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(var(--tilt, 0deg));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.dawn .chamber-field { --tilt: -.7deg; }
.noon .chamber-field { --tilt: .65deg; background-color: rgba(67, 107, 58, .08); }
.afternoon .chamber-field { --tilt: -1deg; background-color: rgba(184, 78, 43, .09); }
.dusk .chamber-field { --tilt: .9deg; background-color: rgba(216, 208, 184, .28); }
.midnight .chamber-field { --tilt: -.35deg; color: var(--ash); background: radial-gradient(circle at 70% 34%, rgba(139, 138, 130, .18), transparent 32%), var(--blue); border-color: rgba(238, 230, 214, .24); }

.ledger-heading {
  position: absolute;
  left: 7vw;
  top: 7vh;
  z-index: 3;
}

.sample-id {
  margin: 0 0 18px;
  font: 700 11px/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}

.midnight .sample-id { color: var(--chalk); }

h1,
h2 {
  font-family: var(--bodoni);
  font-weight: 700;
  letter-spacing: -.065em;
  margin: 0;
}

h1 {
  font-size: clamp(76px, 15vw, 210px);
  line-height: .74;
}

h2 {
  position: absolute;
  left: clamp(38px, 8vw, 110px);
  top: clamp(58px, 12vh, 120px);
  font-size: clamp(64px, 12vw, 176px);
  line-height: .78;
  max-width: 760px;
  z-index: 4;
}

.ledger-title {
  max-width: 300px;
  margin: 24px 0 0 5px;
  color: var(--ember);
  font: italic 500 clamp(24px, 3vw, 42px)/.95 var(--cormorant);
}

.sundial {
  position: absolute;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  right: -7vw;
  bottom: -11vw;
  filter: drop-shadow(0 22px 38px rgba(21, 18, 15, .16));
  transform: rotate(var(--sundial-rotate, 0deg)) scale(var(--sundial-scale, 1));
  transition: transform .2s linear;
}

.ring-map {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ring {
  fill: none;
  stroke: rgba(21, 18, 15, .48);
  stroke-width: 1.4;
  stroke-dasharray: 3 8;
  transform-origin: 50% 50%;
  animation: ringGrow 2.6s ease both, ringTurn 28s linear infinite;
}

.ring-two { stroke: rgba(199, 143, 123, .8); animation-duration: 2.9s, 34s; }
.ring-three { stroke: rgba(30, 64, 87, .62); animation-duration: 3.2s, 42s; }
.ring-four { stroke: rgba(21, 18, 15, .3); animation-duration: 3.6s, 55s; }

.arc-text {
  font: 700 15px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: var(--blue);
}

.arc-text.small { font-size: 11px; fill: var(--silver); }

.thumbprint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 280px;
  border-radius: 48% 52% 45% 55%;
  transform: translate(-50%, -50%) rotate(-18deg);
  background:
    repeating-radial-gradient(ellipse at 52% 45%, transparent 0 9px, rgba(21, 18, 15, .92) 10px 13px, transparent 14px 22px),
    radial-gradient(ellipse at center, rgba(21, 18, 15, .95), rgba(21, 18, 15, .2) 67%, transparent 71%);
  box-shadow: 0 0 54px rgba(21, 18, 15, .28);
  mix-blend-mode: multiply;
}

.soot-particles,
.stomata-field,
.carbonate-dots,
.star-map {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 0 1px, transparent 1.7px);
  background-size: 31px 29px;
  opacity: .36;
  animation: drift 12s ease-in-out infinite alternate;
}

.soot-particles { color: var(--charcoal); }

.specimen-note {
  position: absolute;
  right: clamp(28px, 8vw, 110px);
  bottom: clamp(38px, 10vh, 105px);
  max-width: 330px;
  padding: 22px 24px;
  border-left: 2px solid currentColor;
  background: rgba(238, 230, 214, .46);
  box-shadow: 8px 8px 0 rgba(21, 18, 15, .06);
  z-index: 5;
}

.midnight .specimen-note { background: rgba(21, 18, 15, .22); }

.specimen-note span {
  display: block;
  margin-bottom: 10px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember);
}

.specimen-note p {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.28;
}

.marginalia {
  position: absolute;
  left: 12vw;
  bottom: 11vh;
  width: 260px;
  margin: 0;
  font: italic 500 28px/1.05 var(--cormorant);
  color: var(--silver);
  transform: rotate(-5deg);
  z-index: 4;
}

.material-stage {
  position: absolute;
  right: clamp(20px, 8vw, 120px);
  top: 16vh;
  width: min(58vw, 640px);
  height: min(58vw, 640px);
  border-radius: 47% 53% 52% 48%;
  border: 1px solid rgba(21, 18, 15, .2);
  overflow: hidden;
  cursor: crosshair;
  transition: transform .45s ease, box-shadow .45s ease;
}

.inspectable:hover {
  transform: translate(-8px, -10px) rotate(1.5deg);
  box-shadow: 18px 24px 46px rgba(21, 18, 15, .18);
}

.hover-note {
  position: absolute;
  left: 36px;
  bottom: 34px;
  opacity: 0;
  transform: translateY(12px) rotate(-2deg);
  transition: opacity .35s ease, transform .35s ease;
  padding: 11px 14px;
  max-width: 255px;
  font: italic 500 20px/1 var(--cormorant);
  background: rgba(238, 230, 214, .68);
  color: var(--charcoal);
}

.inspectable:hover .hover-note {
  opacity: 1;
  transform: translateY(0) rotate(-2deg);
}

.leaf-stage {
  color: var(--vein);
  background: radial-gradient(circle at 35% 35%, rgba(67, 107, 58, .2), transparent 32%), rgba(216, 208, 184, .38);
}

.vein-net,
.ember-cracks,
.brick-grid,
.shell-fragments,
.ruler-ticks {
  position: absolute;
  inset: 0;
}

.vein-net {
  background:
    linear-gradient(24deg, transparent 49%, rgba(67, 107, 58, .84) 50%, transparent 51%),
    linear-gradient(72deg, transparent 49%, rgba(67, 107, 58, .48) 50%, transparent 51%),
    linear-gradient(122deg, transparent 49.5%, rgba(67, 107, 58, .48) 50%, transparent 50.5%);
  background-size: 100% 100%, 82px 82px, 112px 112px;
  mask-image: radial-gradient(ellipse at center, #000 0 66%, transparent 72%);
}

.stomata-field { color: var(--vein); background-size: 28px 42px; }

.kiln-stage {
  background: var(--chalk);
  color: var(--ember);
}

.brick-grid {
  background:
    linear-gradient(rgba(184, 78, 43, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 78, 43, .28) 1px, transparent 1px),
    radial-gradient(circle at 58% 42%, rgba(184, 78, 43, .45), transparent 28%);
  background-size: 96px 54px, 96px 54px, 100% 100%;
}

.ember-cracks {
  background:
    linear-gradient(35deg, transparent 46%, var(--ember) 47% 48%, transparent 49%),
    linear-gradient(112deg, transparent 52%, rgba(21, 18, 15, .8) 53% 53.5%, transparent 55%),
    linear-gradient(73deg, transparent 34%, rgba(184, 78, 43, .7) 35% 36%, transparent 37%);
  filter: drop-shadow(0 0 9px rgba(184, 78, 43, .6));
}

.carbonate-stage {
  background: radial-gradient(circle at 58% 35%, rgba(216, 208, 184, .8), transparent 32%), rgba(30, 64, 87, .18);
  color: var(--chalk);
}

.shell-fragments {
  background:
    radial-gradient(ellipse at 28% 30%, transparent 0 28px, rgba(216, 208, 184, .9) 29px 34px, transparent 35px),
    radial-gradient(ellipse at 67% 54%, transparent 0 46px, rgba(238, 230, 214, .7) 47px 53px, transparent 54px),
    radial-gradient(ellipse at 46% 78%, transparent 0 32px, rgba(216, 208, 184, .75) 33px 39px, transparent 40px);
}

.carbonate-dots { color: var(--chalk); background-size: 23px 25px; opacity: .72; }

.graphite-stage {
  background: radial-gradient(circle at center, rgba(21, 18, 15, .72), rgba(21, 18, 15, .95));
  border-color: rgba(238, 230, 214, .18);
  color: var(--ash);
}

.star-map {
  color: var(--ash);
  background-size: 47px 39px;
  opacity: .6;
}

.ruler-ticks {
  background:
    repeating-conic-gradient(from 2deg, rgba(238, 230, 214, .7) 0deg 1deg, transparent 1deg 8deg),
    radial-gradient(circle, transparent 0 34%, rgba(238, 230, 214, .18) 34.3% 34.7%, transparent 35% 100%);
  mask-image: radial-gradient(circle, transparent 0 36%, #000 37% 62%, transparent 63%);
}

@keyframes ringGrow {
  from { stroke-dashoffset: 900; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes ringTurn {
  to { transform: rotate(360deg); }
}

@keyframes drift {
  from { transform: translate(-12px, 8px); }
  to { transform: translate(18px, -16px); }
}

@media (max-width: 760px) {
  .day-wheel { right: 14px; top: 14px; width: 104px; height: 104px; }
  .wheel-mark { transform: rotate(var(--turn)) translateY(-49px) rotate(calc(var(--turn) * -1)); }
  .chamber { padding: 96px 18px 36px; }
  .chamber-field { min-height: 82vh; }
  h2 { left: 28px; top: 74px; }
  .sundial { width: 118vw; right: -46vw; bottom: -24vw; }
  .material-stage { width: 82vw; height: 82vw; top: 27vh; right: -16vw; }
  .specimen-note { left: 28px; right: 28px; bottom: 42px; }
  .marginalia { display: none; }
}