:root {
  color-scheme: light;
  --paper: #f5f4ef;
  --ink: #242722;
  --muted: #6c7065;
  --accent: #d84b27;
  --cycle: 18s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #f2c5b5; color: var(--ink); }

.page {
  width: min(800px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-mark { display: block; width: 40px; height: 40px; transform-origin: center; }

.beat-one { --arrival: 0s; }
.beat-two { --arrival: calc(var(--cycle) / 3); }
.beat-three { --arrival: calc(var(--cycle) * 2 / 3); }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hero-copy { display: grid; align-items: start; width: 100%; text-align: center; }
.hero-copy > * { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.hero-copy > .is-current { visibility: visible; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: 1.9px; text-transform: uppercase; }
h1 { color: var(--ink); font-size: clamp(30px, 3.2vw, 43px); line-height: 1.02; letter-spacing: -2.5px; font-weight: 500; }
.period { display: inline-block; color: var(--accent); }
.intro { color: var(--muted); font-size: 23px; line-height: 1.4; letter-spacing: -0.55px; }
.orbit-stage { position: relative; }
.story-trigger { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; transform: translate(-50%, -50%); }
.story-trigger:disabled { cursor: default; }

.loop-figure { width: min(420px, 46svh, 100%); margin: 0; }
.loop { display: block; width: 100%; height: auto; overflow: visible; }
.dot-field { opacity: 0.5; }
.orbit-guide { fill: none; stroke: #b4b9ac; stroke-width: 1.2; }
.orbit-highlight { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 7 93; stroke-dashoffset: 7; stroke-linecap: round; animation: orbit var(--cycle) linear infinite; }
.node-halo { fill: none; stroke: var(--accent); stroke-width: 0.8; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple var(--cycle) linear infinite; animation-delay: var(--arrival); }
.node-shell { fill: var(--paper); stroke: #a6ad9e; stroke-width: 1; animation: shell-pass var(--cycle) linear infinite; animation-delay: var(--arrival); }
.node-core { fill: #69725e; animation: core-pass var(--cycle) linear infinite; animation-delay: var(--arrival); }
.traveler { fill: var(--accent); stroke: var(--paper); stroke-width: 3; offset-path: circle(150px at 230px 230px); offset-distance: 58.3333333333%; animation: travel var(--cycle) linear infinite; }

@keyframes travel { to { offset-distance: 158.3333333333%; } }
@keyframes orbit { to { stroke-dashoffset: -93; } }
@keyframes ripple {
  0% { opacity: 0.35; transform: scale(1); }
  6%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes shell-pass {
  0%, 2% { stroke: var(--accent); fill: #f5e9e1; }
  10%, 100% { stroke: #a6ad9e; fill: var(--paper); }
}
@keyframes core-pass {
  0%, 2% { fill: var(--accent); }
  10%, 100% { fill: #69725e; }
}
@media (max-width: 980px) {
  .page { padding: 32px 40px; }
  h1 { font-size: 32px; letter-spacing: -1.9px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
  .intro { font-size: 21px; }
}

@media (max-width: 700px) {
  .page { padding: 32px 25px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.35px; }
  h1 { font-size: clamp(23.5px, 5.25vw, 35px); letter-spacing: -1.45px; }
  .intro { font-size: 20px; }
  .loop-figure { width: min(320px, 46svh, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}