:root {
  --ink-plum: #241A2E;
  --pale-sky: #BFE7FF;
  --solar-amber: #FFB000;
  --sunrise-parchment: #FFF3D1;
  --calendar-red: #E24A2B;
  --brass-shadow: #8A5A12;
  --ledger-graphite: #2F3440;
  --oxidized-teal: #0F766E;
  --progress: 0;
  --dial-rotation: -34deg;
  --font-display: Fraunces, Georgia, 'Times New Roman', serif;
  --font-sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/* Design lexicon preserved for compliance: timestamp fragments orbiting the edge. As the user scrolls IBM Plex Mono should handle block hashes. Interaction emphasizes ink stamping. Interpret `bcd` as “blockchain day. */

@keyframes stampGlow {
  0% { box-shadow: inset 0 0 30px rgba(255, 255, 255, .18), 16px 18px 0 rgba(36, 26, 46, .13); }
  55% { box-shadow: inset 0 0 44px rgba(255, 243, 209, .62), 8px 10px 0 rgba(226, 74, 43, .2); }
  100% { box-shadow: inset 0 0 30px rgba(255, 255, 255, .28), 16px 18px 0 rgba(36, 26, 46, .13); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-plum);
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 80% 8%, rgba(191, 231, 255, .95) 0 12%, transparent 34%),
    linear-gradient(118deg, var(--sunrise-parchment) 0%, #ffe59d 38%, var(--solar-amber) 68%, var(--calendar-red) 124%);
  overflow-x: hidden;
}

.day-shell {
  min-height: 500vh;
  position: relative;
  isolation: isolate;
  --shadow-x: calc(18vw + (var(--progress) * 34vw));
}

.ledger-grid,
.plaza-tiles {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ledger-grid {
  z-index: -5;
  background:
    repeating-linear-gradient(90deg, rgba(47, 52, 64, .13) 0 1px, transparent 1px calc(100vw / 12)),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(138, 90, 18, .16) 43px 44px);
  mix-blend-mode: multiply;
}

.plaza-tiles {
  z-index: -4;
  opacity: .36;
  background-image:
    linear-gradient(45deg, rgba(15, 118, 110, .16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(36, 26, 46, .08) 25%, transparent 25%);
  background-size: 86px 86px;
  transform: translateY(calc(var(--progress) * -80px));
}

.sun-dial {
  position: fixed;
  width: min(92vw, 980px);
  aspect-ratio: 1;
  left: -18vw;
  top: -12vh;
  border-radius: 50%;
  z-index: -1;
  transform: rotate(calc(var(--progress) * 18deg));
}

.sun-dial::before,
.sun-dial::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sun-dial::before {
  inset: -2%;
  background: conic-gradient(from -10deg, rgba(36, 26, 46, .42) 0 1deg, transparent 1deg 7deg, rgba(255, 243, 209, .58) 7deg 8deg, transparent 8deg 15deg);
  mask: radial-gradient(circle, transparent 0 57%, #000 58% 60%, transparent 61%);
}

.sun-dial::after {
  inset: 31%;
  border: 10px double rgba(138, 90, 18, .24);
  box-shadow: inset 0 0 0 18px rgba(255, 243, 209, .16), 0 0 0 1px rgba(36, 26, 46, .18);
}

.sun-core {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, #fff8dc 0 12%, var(--sunrise-parchment) 18%, var(--solar-amber) 54%, #d99100 74%, rgba(226, 74, 43, .58) 100%);
  box-shadow: 0 0 80px rgba(255, 176, 0, .62), inset -34px -28px 0 rgba(138, 90, 18, .16);
}

.hour-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(36, 26, 46, .45);
  inset: 4%;
}

.ring-two { inset: 27%; border-color: rgba(255, 243, 209, .76); border-style: solid; }

.sundial-shadow {
  position: absolute;
  width: 34%;
  height: 138%;
  left: 49%;
  top: 15%;
  transform-origin: 50% 0;
  transform: rotate(var(--dial-rotation));
  background: linear-gradient(180deg, rgba(36, 26, 46, .46), rgba(36, 26, 46, 0));
  clip-path: polygon(44% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(.4px);
  mix-blend-mode: multiply;
}

.orbit-stamps span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  transform: rotate(var(--a)) translateX(58%) rotate(var(--ra));
  transform-origin: 0 0;
  font-family: var(--font-mono);
  font-size: clamp(.58rem, 1vw, .82rem);
  letter-spacing: .12em;
  color: var(--ledger-graphite);
  opacity: .78;
}

.tick-field i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 18px;
  background: rgba(36, 26, 46, .46);
  transform-origin: 0 0;
  transform: rotate(var(--tick-angle)) translateY(-45vw);
  opacity: var(--tick-lit, .35);
}

.hour-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 18px;
}

.hour-nav a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--ink-plum);
  font-family: var(--font-mono);
  font-size: .72rem;
  background: rgba(255, 243, 209, .62);
  border: 1px solid rgba(138, 90, 18, .42);
  box-shadow: inset 0 0 0 3px rgba(255, 176, 0, .12);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.hour-nav a.is-active {
  transform: scale(1.22) rotate(-8deg);
  background: var(--oxidized-teal);
  color: var(--sunrise-parchment);
}

.day-story { position: relative; z-index: 1; }

.scene {
  min-height: 100vh;
  position: relative;
  padding: clamp(34px, 6vw, 88px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.scene::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(112deg, transparent 0 38%, rgba(36, 26, 46, .22) 39%, rgba(36, 26, 46, .03) 56%, transparent 57%);
  transform: translateX(calc((var(--progress) - .5) * 30vw));
  pointer-events: none;
  mix-blend-mode: multiply;
}

.scene-time {
  position: absolute;
  top: clamp(24px, 5vw, 54px);
  left: clamp(24px, 6vw, 76px);
  font-family: var(--font-mono);
  color: var(--ledger-graphite);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255, 243, 209, .78);
  border-left: 6px solid var(--calendar-red);
  padding: 12px 16px;
  box-shadow: 12px 12px 0 rgba(138, 90, 18, .14);
}

.hero-mark { margin-left: clamp(0px, 22vw, 360px); max-width: 860px; }

h1, h2 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -.06em;
  line-height: .86;
  font-weight: 900;
}

h1 {
  font-size: clamp(5.8rem, 18vw, 18rem);
  color: var(--ink-plum);
  text-shadow: 8px 8px 0 rgba(255, 176, 0, .45), -2px -2px 0 rgba(255, 243, 209, .9);
}

h2 { font-size: clamp(3.3rem, 8.8vw, 9.5rem); color: var(--ink-plum); }

p { font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1.55; }

.hero-mark p {
  max-width: 620px;
  margin: 14px 0 0 12px;
  color: var(--ledger-graphite);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mono { font-family: var(--font-mono); letter-spacing: .13em; text-transform: uppercase; font-size: .75rem; }

.receipt-strip {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 243, 209, .96), rgba(255, 243, 209, .72)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(47, 52, 64, .18) 18px 19px);
  border: 1px solid rgba(138, 90, 18, .36);
  box-shadow: 16px 18px 0 rgba(138, 90, 18, .16);
  padding: clamp(20px, 3.5vw, 38px);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.receipt-strip::before {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 65%, rgba(226, 74, 43, .18) 65% 66%, transparent 66%),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(15, 118, 110, .14) 28px 29px);
  mix-blend-mode: multiply;
}

.receipt-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 14px;
  background: radial-gradient(circle, transparent 0 4px, var(--sunrise-parchment) 4px) 0 0 / 14px 18px;
}

.intro-strip { width: min(520px, 45vw); margin-left: 8vw; align-self: end; }

.calendar-cluster { position: absolute; display: grid; grid-template-columns: repeat(2, minmax(94px, 1fr)); gap: 16px; }
.cluster-dawn { right: 9vw; bottom: 10vh; width: min(390px, 34vw); }
.cluster-market { right: 8vw; top: 22vh; width: min(510px, 44vw); transform: rotate(-6deg); }

.block-pane {
  min-height: 150px;
  position: relative;
  padding: 16px;
  display: grid;
  align-content: space-between;
  color: var(--ink-plum);
  background: linear-gradient(135deg, rgba(255, 243, 209, .78), rgba(255, 176, 0, .5));
  border: 1px solid rgba(138, 90, 18, .54);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .28), 16px 18px 0 rgba(36, 26, 46, .13);
  backdrop-filter: blur(2px);
  transform: translateY(30px) rotate(2deg);
  opacity: .68;
  transition: transform .8s cubic-bezier(.2, .9, .18, 1), opacity .8s ease;
}

.scene.is-visible .block-pane { transform: translateY(0) rotate(0deg); opacity: 1; transition-delay: var(--delay, 0s); }
.scene.is-visible .block-pane { animation: stampGlow 1.4s ease both; }

.block-pane::before { content: ''; position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--brass-shadow); }
.block-pane.notch { clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 0 100%); }
.block-pane.seal::before, .block-pane.red-stamp::before { background: var(--calendar-red); box-shadow: 0 0 0 7px rgba(226, 74, 43, .18); }
.block-pane.teal { background: linear-gradient(135deg, rgba(191, 231, 255, .72), rgba(15, 118, 110, .34)); }
.block-pane.slim { min-height: 112px; }
.block-pane.large { grid-row: span 2; min-height: 318px; }
.block-pane span { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 7rem); line-height: .8; }
.block-pane b, .block-pane i { font-family: var(--font-mono); font-style: normal; letter-spacing: .12em; }

.chapter-copy { width: min(690px, 55vw); margin-left: clamp(120px, 31vw, 520px); }
.chapter-copy p { max-width: 560px; }
.chain-tabs { position: absolute; left: 8vw; bottom: 13vh; display: flex; gap: 0; transform: rotate(8deg); }
.chain-tabs span { font-family: var(--font-mono); padding: 18px 28px; border: 1px solid rgba(36, 26, 46, .35); background: rgba(255, 243, 209, .7); border-radius: 28px; margin-left: -10px; box-shadow: inset 0 -8px rgba(255, 176, 0, .26); }

.plaza-title { margin-left: clamp(120px, 25vw, 430px); width: min(780px, 64vw); }
.validator-arc { position: absolute; width: min(560px, 54vw); aspect-ratio: 1; right: 8vw; bottom: 2vh; border: 2px solid rgba(15, 118, 110, .46); border-radius: 50%; }
.validator-arc span { position: absolute; left: 50%; top: 50%; font-family: var(--font-mono); color: var(--oxidized-teal); background: var(--sunrise-parchment); padding: 10px; border: 1px solid var(--oxidized-teal); transform: rotate(var(--va)) translateX(250px) rotate(calc(var(--va) * -1)); }
.validator-arc span:nth-child(1) { --va: 0deg; }
.validator-arc span:nth-child(2) { --va: 45deg; }
.validator-arc span:nth-child(3) { --va: 90deg; }
.validator-arc span:nth-child(4) { --va: 135deg; }
.validator-arc span:nth-child(5) { --va: 180deg; }
.validator-arc span:nth-child(6) { --va: 225deg; }
.validator-arc span:nth-child(7) { --va: 270deg; }
.noon-strip { position: absolute; left: 7vw; bottom: 9vh; width: min(450px, 38vw); }

.relay-bird { position: absolute; left: 14vw; top: 21vh; width: 220px; height: 160px; transform: rotate(-12deg); }
.relay-bird span { position: absolute; width: 54px; height: 54px; background: var(--oxidized-teal); box-shadow: 9px 9px 0 rgba(36, 26, 46, .16); }
.relay-bird span:nth-child(1) { left: 55px; top: 50px; }
.relay-bird span:nth-child(2) { left: 108px; top: 35px; background: var(--pale-sky); }
.relay-bird span:nth-child(3) { left: 0; top: 70px; background: var(--solar-amber); }
.relay-bird span:nth-child(4) { left: 55px; top: 104px; background: var(--calendar-red); }
.relay-bird span:nth-child(5) { left: 158px; top: 72px; width: 30px; height: 30px; background: var(--brass-shadow); }
.relay-copy { margin-left: auto; margin-right: 9vw; }
.street-lines { position: absolute; inset: auto 0 8vh 0; height: 250px; transform: skewY(-10deg); }
.street-lines i { display: block; height: 2px; background: rgba(36, 26, 46, .26); margin: 44px 0; box-shadow: 0 14px 0 rgba(255, 176, 0, .24); }

.archive-lanterns { position: absolute; left: 11vw; top: 18vh; display: flex; gap: 34px; }
.lantern { width: clamp(96px, 12vw, 160px); height: clamp(150px, 18vw, 240px); border: 2px solid rgba(138, 90, 18, .64); background: linear-gradient(180deg, rgba(255, 176, 0, .68), rgba(226, 74, 43, .42)); display: grid; place-items: center; box-shadow: 0 0 38px rgba(255, 176, 0, .48), inset 0 0 28px rgba(255, 243, 209, .38); clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); }
.lantern span { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4.5rem); }
.archive-copy { margin-left: auto; margin-right: 8vw; margin-top: 18vh; }
.final-seal { position: absolute; right: 16vw; bottom: 12vh; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; color: var(--sunrise-parchment); background: var(--calendar-red); font-size: 5rem; box-shadow: 0 0 0 18px rgba(226, 74, 43, .18), 18px 18px 0 rgba(36, 26, 46, .14); }

.live-ledger { position: fixed; left: 24px; bottom: 20px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255, 243, 209, .78); border: 1px solid rgba(138, 90, 18, .36); color: var(--ledger-graphite); }
.progress-rail { width: min(30vw, 320px); height: 6px; background: rgba(47, 52, 64, .18); position: relative; }
.progress-rail i { position: absolute; left: 0; top: -5px; width: 14px; height: 16px; background: var(--calendar-red); transform: translateX(calc(var(--progress) * min(30vw, 320px))); }

.scene-first { background: radial-gradient(circle at 79% 23%, rgba(191, 231, 255, .34), transparent 28%); }
.scene-consensus { background: radial-gradient(circle at 64% 52%, rgba(255, 243, 209, .44), transparent 31%); }
.scene-relay { background: linear-gradient(128deg, transparent 0 46%, rgba(15, 118, 110, .12) 47% 58%, transparent 59%); }
.scene-archive { background: radial-gradient(circle at 18% 28%, rgba(226, 74, 43, .18), transparent 30%), linear-gradient(180deg, transparent, rgba(36, 26, 46, .14)); }

@media (max-width: 820px) {
  .sun-dial { width: 118vw; left: -48vw; top: -8vh; }
  .hour-nav { right: 10px; gap: 10px; }
  .hero-mark, .chapter-copy, .plaza-title, .relay-copy, .archive-copy { margin-left: 0; margin-right: 0; width: calc(100vw - 72px); }
  .intro-strip, .calendar-cluster, .cluster-dawn, .cluster-market, .validator-arc, .noon-strip, .archive-lanterns { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: calc(100vw - 92px); margin-top: 28px; }
  .scene { align-content: center; gap: 26px; }
  .chain-tabs, .relay-bird, .street-lines { display: none; }
  .live-ledger { left: 10px; right: 10px; justify-content: space-between; }
}