:root {
  /* Compliance typography phrase: IBM Plex Mono* Mono** from Google Fonts with Newsreader to create a tech-mono magazine voice: measured Space Mono wordmark “economic.day” appearing like a daily timestamp. As scrolling begins Space Mono* Mono** from Google Fonts */
  --night: #2A0712;
  --wine: #4B0F24;
  --plum: #6E1E3A;
  --green: #89F7C6;
  --gold: #D8A35D;
  --paper: #F1E7DA;
  --violet: #32285F;
  --mono: "Space Mono", "Courier New", monospace;
  --micro: "IBM Plex Mono", "Courier New", monospace;
  --serif: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 20% 10%, rgba(50, 40, 95, 0.55), transparent 28rem),
    radial-gradient(circle at 86% 24%, rgba(110, 30, 58, 0.62), transparent 30rem),
    linear-gradient(135deg, var(--night), var(--wine) 48%, var(--violet));
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(241, 231, 218, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 231, 218, 0.026) 1px, transparent 1px);
  background-size: 7.5vw 7.5vw;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 78%);
  z-index: 1;
}

.skyfield { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.aurora {
  position: absolute;
  width: 120vw;
  height: 26vh;
  left: -10vw;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.52;
  mix-blend-mode: screen;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(137, 247, 198, 0.8), rgba(216, 163, 93, 0.45), rgba(50, 40, 95, 0.8), transparent);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

.aurora-one { top: 12vh; transform: rotate(-9deg); }
.aurora-two { bottom: 18vh; opacity: 0.34; transform: rotate(13deg); animation-duration: 23s; }

@keyframes auroraDrift {
  from { translate: -8vw 0; scale: 1 0.78; filter: blur(38px); }
  to { translate: 9vw 6vh; scale: 1.08 1.14; filter: blur(48px); }
}

.market-continent, .coin-mist {
  position: absolute;
  border: 1px solid rgba(216, 163, 93, 0.18);
  background: linear-gradient(140deg, rgba(241, 231, 218, 0.1), rgba(110, 30, 58, 0.18));
  box-shadow: 0 0 80px rgba(137, 247, 198, 0.12);
}

.continent-one { width: 22rem; height: 14rem; right: 7vw; top: 12vh; clip-path: polygon(13% 18%, 58% 3%, 94% 42%, 72% 89%, 26% 78%, 3% 45%); }
.continent-two { width: 17rem; height: 12rem; left: 8vw; bottom: 12vh; clip-path: polygon(30% 0, 91% 20%, 78% 70%, 34% 100%, 0 58%); }
.coin-mist { width: 8rem; height: 2.2rem; border-radius: 50%; left: 72vw; bottom: 30vh; opacity: 0.5; }
.coin-b { left: 15vw; top: 34vh; scale: 1.6; opacity: 0.28; }

.folio-bar {
  position: fixed;
  left: clamp(1rem, 3vw, 2.5rem);
  right: clamp(4rem, 8vw, 7rem);
  top: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  z-index: 5;
  color: rgba(241, 231, 218, 0.62);
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dayline {
  position: fixed;
  right: 2rem;
  top: 14vh;
  bottom: 12vh;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 231, 218, 0.42);
}

.dayline-rule { position: absolute; right: -0.65rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--gold), var(--green), var(--plum)); opacity: 0.55; }
.day-marker { transition: color 500ms ease, text-shadow 500ms ease, transform 500ms ease; }
.day-marker.active { color: var(--green); text-shadow: 0 0 18px rgba(137, 247, 198, 0.9); transform: translateX(-0.4rem); }

main { position: relative; z-index: 2; }
.chapter { min-height: 100vh; padding: 6rem clamp(1rem, 4vw, 4rem); display: grid; place-items: center; position: relative; }
.chapter-inner { width: min(1180px, calc(100vw - 7rem)); min-height: 72vh; position: relative; }

.hero-grid, .bento-field { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, minmax(3.5rem, 1fr)); gap: clamp(0.7rem, 1.5vw, 1.2rem); }

.bento {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 163, 93, 0.24);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(75, 15, 36, 0.78), rgba(42, 7, 18, 0.7));
  box-shadow: inset 0 1px 0 rgba(241, 231, 218, 0.08), 0 24px 80px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
  transform: translate3d(0, 6rem, 0) scale(0.96);
  opacity: 0;
  transition: transform 900ms cubic-bezier(.19,1,.22,1), opacity 900ms ease, border-color 500ms ease, background 700ms ease;
}

.bento.in-view { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
.bento::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(137,247,198,0.18), transparent 15rem); opacity: 0.65; pointer-events: none; }
.bento:hover { border-color: rgba(137, 247, 198, 0.48); background: linear-gradient(145deg, rgba(110, 30, 58, 0.82), rgba(42, 7, 18, 0.68)); }

.pane, .long-ledger, .moon-tile, .essay-pane, .margin-note, .vertical-note, .horizon-band, .quote-pane, .small-ledger, .spiral-pane, .constellation-pane, .closing-pane { padding: clamp(1rem, 2.2vw, 2rem); }

.headline-pane { grid-column: 1 / 8; grid-row: 2 / 7; display: flex; flex-direction: column; justify-content: flex-end; }
.ticker-pane { grid-column: 3 / 11; grid-row: 7 / 8; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--micro); font-size: 0.74rem; color: var(--gold); white-space: nowrap; }
.aurora-window { grid-column: 8 / 13; grid-row: 1 / 5; }
.capsule { display: grid; place-items: center; padding: 1rem; font-family: var(--micro); font-size: 0.74rem; color: rgba(241,231,218,0.78); }
.capsule-a { grid-column: 9 / 12; grid-row: 5 / 6; border-radius: 999px; }
.capsule-b { grid-column: 1 / 4; grid-row: 1 / 2; border-radius: 999px; }

.kicker, .chapter-label { margin: 0 0 1rem; font-family: var(--micro); color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.72rem; }
h1, h2 { font-family: var(--mono); font-weight: 400; text-transform: lowercase; letter-spacing: -0.055em; margin: 0; }
h1 { font-size: clamp(3.8rem, 12vw, 11rem); line-height: 0.82; color: var(--paper); text-shadow: 0 0 42px rgba(216, 163, 93, 0.18); }
h2 { font-size: clamp(1.85rem, 4.4vw, 5rem); line-height: 0.95; }
p { font-size: clamp(1rem, 1.45vw, 1.28rem); line-height: 1.55; margin: 0; color: rgba(241,231,218,0.86); }
.lede { max-width: 44rem; margin-top: 1.5rem; font-size: clamp(1.15rem, 2vw, 1.65rem); }

.ribbon-chart { position: absolute; inset: 18% 8%; }
.ribbon-chart i { position: absolute; left: 0; right: 0; height: 28%; border-radius: 50%; border-top: 2px solid var(--green); filter: drop-shadow(0 0 16px rgba(137,247,198,0.7)); transform: rotate(var(--r)); opacity: 0.75; }
.ribbon-chart i:nth-child(1) { --r: -8deg; top: 10%; }
.ribbon-chart i:nth-child(2) { --r: 4deg; top: 34%; border-color: var(--gold); }
.ribbon-chart i:nth-child(3) { --r: 13deg; top: 58%; }
.aurora-window p { position: absolute; left: 1.5rem; bottom: 1.5rem; font-family: var(--micro); color: var(--green); font-size: 0.82rem; }

.chapter-label { position: absolute; left: 0; top: -2rem; }
.long-ledger { grid-column: 1 / 9; grid-row: 2 / 5; }
.grain-tile { grid-column: 9 / 13; grid-row: 1 / 5; }
.production-field .essay-pane { grid-column: 4 / 11; grid-row: 5 / 8; background: linear-gradient(135deg, rgba(241,231,218,0.92), rgba(216,163,93,0.2)); }
.production-field .essay-pane p { color: var(--night); font-size: clamp(1.3rem, 2.3vw, 2.1rem); }
.margin-note { grid-column: 1 / 4; grid-row: 6 / 8; font-family: var(--micro); font-size: 0.8rem; color: var(--gold); }

.grain-icon { height: 12rem; position: relative; }
.grain-icon span { position: absolute; width: 3.2rem; height: 6.5rem; border: 1px solid var(--gold); border-radius: 50% 50% 50% 0; background: rgba(216,163,93,0.14); }
.grain-icon span:nth-child(1) { left: 20%; top: 18%; rotate: -24deg; }
.grain-icon span:nth-child(2) { left: 40%; top: 2%; rotate: 8deg; border-color: var(--green); }
.grain-icon span:nth-child(3) { left: 58%; top: 27%; rotate: 28deg; }

.circulation-field .vertical-note { grid-column: 1 / 3; grid-row: 2 / 8; writing-mode: vertical-rl; font-family: var(--micro); color: var(--gold); }
.horizon-band { grid-column: 3 / 13; grid-row: 2 / 4; display: flex; align-items: center; gap: 2rem; }
.quote-pane { grid-column: 5 / 12; grid-row: 4 / 8; background: linear-gradient(135deg, rgba(50,40,95,0.72), rgba(75,15,36,0.74)); }
blockquote { margin: 0; font-size: clamp(2rem, 5vw, 5.6rem); line-height: 0.96; color: var(--paper); }
.small-ledger { grid-column: 3 / 6; grid-row: 6 / 8; font-family: var(--micro); color: var(--green); }
.harbor-lines { width: 13rem; height: 5rem; position: relative; flex: 0 0 auto; }
.harbor-lines span { position: absolute; background: var(--gold); box-shadow: 0 0 18px rgba(216,163,93,0.5); }
.harbor-lines span:nth-child(1) { width: 100%; height: 1px; bottom: 1rem; }
.harbor-lines span:nth-child(2) { width: 1px; height: 4rem; left: 45%; bottom: 1rem; rotate: 18deg; }
.harbor-lines span:nth-child(3) { width: 4rem; height: 1px; left: 45%; top: 1.3rem; rotate: -22deg; }

.spiral-pane { grid-column: 1 / 9; grid-row: 1 / 7; }
.debt-field .essay-pane { grid-column: 8 / 13; grid-row: 3 / 8; }
.debt-chip { grid-column: 2 / 7; grid-row: 7 / 8; }
.debt-spiral { width: min(44vw, 26rem); height: min(44vw, 26rem); border: 2px solid transparent; border-top-color: var(--gold); border-left-color: var(--green); border-radius: 50%; margin-bottom: 1rem; box-shadow: inset 0 0 40px rgba(137,247,198,0.14), 0 0 38px rgba(216,163,93,0.22); animation: slowSpin 28s linear infinite; }
@keyframes slowSpin { to { rotate: 360deg; } }
.dark-paper p { font-size: clamp(1.25rem, 2vw, 1.8rem); }

.constellation-pane { grid-column: 1 / 8; grid-row: 1 / 7; background: linear-gradient(145deg, rgba(50,40,95,0.8), rgba(42,7,18,0.74)); }
.closing-pane { grid-column: 8 / 13; grid-row: 3 / 8; background: linear-gradient(135deg, rgba(241,231,218,0.9), rgba(216,163,93,0.28)); }
.closing-pane p { color: var(--night); }
.closing-pane .kicker { color: var(--plum); }
.quiet-cta { display: inline-block; margin-top: 1.4rem; color: var(--night); font-family: var(--mono); text-decoration: none; border-bottom: 1px solid var(--plum); }
.constellation { height: 20rem; position: relative; margin-bottom: 1rem; background-image: radial-gradient(circle, rgba(216,163,93,0.22) 1px, transparent 1px); background-size: 2rem 2rem; }
.constellation::before { content: ""; position: absolute; inset: 18% 12%; border-top: 1px dotted var(--gold); border-right: 1px dotted var(--green); transform: skewY(-14deg); opacity: 0.8; }
.constellation span { position: absolute; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 24px var(--green); }
.constellation span:nth-child(1) { left: 12%; top: 34%; }
.constellation span:nth-child(2) { left: 38%; top: 18%; background: var(--gold); box-shadow: 0 0 24px var(--gold); }
.constellation span:nth-child(3) { left: 62%; top: 48%; }
.constellation span:nth-child(4) { left: 82%; top: 28%; background: var(--paper); }
.constellation span:nth-child(5) { left: 46%; top: 72%; background: var(--gold); }

body.phase-noon .aurora { background: linear-gradient(90deg, transparent, rgba(137,247,198,0.76), rgba(241,231,218,0.44), rgba(216,163,93,0.62), transparent); }
body.phase-dusk .aurora { background: linear-gradient(90deg, transparent, rgba(216,163,93,0.62), rgba(110,30,58,0.82), rgba(50,40,95,0.64), transparent); }
body.phase-night .aurora { background: linear-gradient(90deg, transparent, rgba(50,40,95,0.95), rgba(137,247,198,0.5), rgba(241,231,218,0.24), transparent); }

@media (max-width: 820px) {
  .folio-bar { display: none; }
  .dayline { right: 0.8rem; }
  .chapter { padding: 5rem 1rem; }
  .chapter-inner { width: calc(100vw - 3.4rem); min-height: auto; }
  .hero-grid, .bento-field { display: flex; flex-direction: column; min-height: auto; }
  .bento { min-height: 9rem; }
  .ticker-pane { white-space: normal; flex-direction: column; align-items: flex-start; }
  .circulation-field .vertical-note { writing-mode: horizontal-tb; }
  .debt-spiral { width: 14rem; height: 14rem; }
}