:root {
  /* Design typography tokens: Space Grotesk** for large geometric headlines */
  --midnight-ink: #07070D;
  --electric-vermilion: #FF2A1F;
  --ion-cyan: #00F5FF;
  --signal-yellow: #FFE600;
  --ultraviolet-seal: #7B2CFF;
  --paper-bone: #F4EBDD;
  --void-green: #20FF8A;
  --font-body: "Instrument Sans", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper-bone);
  font-family: var(--font-body);
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(0,245,255,.055) 1px, transparent 1px) 0 0 / 8.333vw 100%,
    linear-gradient(0deg, rgba(244,235,221,.04) 1px, transparent 1px) 0 0 / 100% 12vh,
    radial-gradient(circle at 75% 12%, rgba(123,44,255,.34), transparent 24rem),
    radial-gradient(circle at 10% 46%, rgba(255,42,31,.18), transparent 26rem),
    var(--midnight-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(244,235,221,.035) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
  opacity: .42;
  z-index: 1;
}

.calendar-stage { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: clamp(.55rem, 1vw, 1rem);
  border-bottom: 1px solid rgba(0,245,255,.22);
}

.chapter-label {
  grid-column: 1 / span 4;
  align-self: start;
  font-family: var(--font-display);
  font-size: clamp(.66rem, .85vw, .9rem);
  letter-spacing: .19em;
  color: var(--ion-cyan);
  text-transform: uppercase;
  z-index: 8;
}

.magnetic-card {
  --mx: 0px;
  --my: 0px;
  --scroll: 0px;
  transform: translate3d(var(--mx), calc(var(--my) + var(--scroll)), 0) rotate(var(--rot, 0deg));
  transition: transform .85s cubic-bezier(.19, 1, .22, 1), border-color .4s ease, box-shadow .4s ease;
  will-change: transform;
}

.magnetic-card.is-near {
  border-color: var(--ion-cyan);
  box-shadow: 0 0 0 1px rgba(0,245,255,.32), 0 0 34px rgba(0,245,255,.16);
}

.hero .sun-disc {
  position: absolute;
  width: clamp(22rem, 45vw, 48rem);
  height: clamp(22rem, 45vw, 48rem);
  border-radius: 50%;
  background: var(--signal-yellow);
  left: 23vw;
  top: 4vh;
  box-shadow: 0 0 54px rgba(255,230,0,.24);
  animation: floatSlow 11s ease-in-out infinite alternate;
}

.era-plate {
  grid-column: 3 / span 4;
  grid-row: 2 / span 6;
  z-index: 5;
  background: linear-gradient(180deg, #07070D 0%, #11111a 100%);
  border: 1px solid rgba(244,235,221,.18);
  padding: clamp(1.2rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 70vh;
  box-shadow: 2rem 1rem 0 rgba(7,7,13,.9), -1rem -1rem 0 rgba(123,44,255,.62);
}

.plate-index, .section-head span, .count-copy span, .mini-code {
  font-family: var(--font-display);
  color: var(--void-green);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: clamp(.68rem, .85vw, .9rem);
}

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

h1 {
  font-size: clamp(4.2rem, 12vw, 12.5rem);
  max-width: 4ch;
  text-transform: lowercase;
}

.era-plate p {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 2rem);
  font-variation-settings: "wdth" 85;
  color: var(--paper-bone);
}

.plate-bars { display: grid; gap: .75rem; }
.plate-bars i { display: block; height: clamp(.6rem, 1vw, 1rem); background: var(--electric-vermilion); }
.plate-bars i:nth-child(2) { width: 54%; background: var(--ion-cyan); }
.plate-bars i:nth-child(3) { width: 72%; background: var(--signal-yellow); }

.stamp {
  grid-column: 7 / span 3;
  grid-row: 2 / span 2;
  z-index: 7;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(4.5rem, 12vw, 14rem);
  color: var(--electric-vermilion);
  line-height: 1;
  transform: rotate(-7deg);
  text-shadow: .08em .08em 0 rgba(123,44,255,.58), 0 0 30px rgba(255,42,31,.28);
  animation: stampHover 7s ease-in-out infinite alternate;
}

.float-card {
  position: relative;
  border: 1px solid rgba(244,235,221,.24);
  background: rgba(7,7,13,.82);
  padding: 1rem;
  z-index: 6;
  overflow: hidden;
}

.float-card::before, .date-tile::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  right: -2rem;
  top: -2rem;
  background: currentColor;
  opacity: .92;
}

.float-card b { font-family: var(--font-jp); font-size: clamp(3rem, 6vw, 7rem); line-height: .75; }
.float-card span, .float-card em { display: block; font-family: var(--font-display); letter-spacing: .13em; font-style: normal; }
.card-a { grid-column: 8 / span 3; grid-row: 5 / span 2; color: var(--ion-cyan); --rot: 3deg; }
.card-b { grid-column: 10 / span 2; grid-row: 3 / span 2; color: var(--signal-yellow); --rot: -4deg; }

.needle, .rail, .strip {
  position: absolute;
  pointer-events: none;
  background: var(--ion-cyan);
  box-shadow: 0 0 20px rgba(0,245,255,.45);
}
.needle { height: 1px; width: 46vw; z-index: 9; transform-origin: left; }
.needle-one { right: -8vw; top: 29vh; transform: rotate(-18deg); }
.needle-two { left: 5vw; bottom: 16vh; transform: rotate(12deg); background: var(--electric-vermilion); }
.rail { position: fixed; z-index: 0; width: 1px; height: 100vh; opacity: .45; }
.rail-a { left: 16.66vw; }
.rail-b { right: 25vw; background: var(--electric-vermilion); }

.tiles { align-items: stretch; }
.section-head {
  grid-column: 2 / span 5;
  grid-row: 2 / span 2;
  border-left: .9rem solid var(--electric-vermilion);
  padding: 1.25rem;
  background: rgba(123,44,255,.22);
}
.section-head h2, .count-copy h2, .index-card h2 { font-size: clamp(2.6rem, 6.3vw, 7rem); margin-top: .55rem; }

.tile-grid {
  grid-column: 2 / span 10;
  grid-row: 4 / span 4;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(10rem, 1fr);
  gap: clamp(.7rem, 1vw, 1rem);
}

.date-tile {
  position: relative;
  min-height: 13rem;
  border: 1px solid rgba(244,235,221,.2);
  background: rgba(7,7,13,.78);
  overflow: hidden;
  padding: 1rem;
  color: var(--signal-yellow);
}
.date-tile i {
  position: absolute;
  inset: .7rem auto auto .7rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--electric-vermilion);
}
.date-tile strong { position: absolute; left: .8rem; bottom: .4rem; font-size: clamp(4rem, 8vw, 9rem); color: rgba(244,235,221,.12); }
.date-tile b { position: absolute; right: .55rem; top: .35rem; font-family: var(--font-jp); font-size: clamp(4rem, 8vw, 9rem); line-height: 1; }
.date-tile span { position: absolute; left: 1rem; top: 3rem; writing-mode: vertical-rl; font-family: var(--font-display); letter-spacing: .18em; }
.date-tile.tall { grid-row: span 2; }
.date-tile.wide { grid-column: span 2; }
.date-tile.cyan { color: var(--ion-cyan); --rot: -2deg; }
.date-tile.violet { color: var(--ultraviolet-seal); --rot: 3deg; }
.date-tile.vermilion { color: var(--electric-vermilion); --rot: -1deg; }
.date-tile.green { color: var(--void-green); --rot: 2deg; }
.date-tile.bone { color: var(--paper-bone); --rot: -3deg; }

.ritual { background: radial-gradient(circle at 62% 50%, rgba(255,42,31,.13), transparent 24rem); }
.orbital { grid-column: 2 / span 5; grid-row: 2 / span 5; position: relative; border: 1px solid var(--ion-cyan); }
.orbit-ring { position: absolute; inset: 8%; border: 1px solid rgba(0,245,255,.72); border-radius: 50%; animation: rotateSeal 24s linear infinite; }
.orbit-ring::before, .orbit-ring::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(255,230,0,.54); border-radius: 50%; }
.orbit-ring::after { inset: 28%; border-color: rgba(255,42,31,.7); }
.orbit-ring span { position: absolute; width: 1.4rem; height: 1.4rem; background: var(--signal-yellow); border-radius: 50%; }
.orbit-ring span:nth-child(1) { left: 12%; top: 8%; }
.orbit-ring span:nth-child(2) { right: 9%; top: 45%; background: var(--electric-vermilion); }
.orbit-ring span:nth-child(3) { left: 45%; bottom: 7%; background: var(--void-green); }
.count-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(9rem, 22vw, 24rem); color: var(--paper-bone); font-weight: 900; }
.count-copy { grid-column: 7 / span 5; grid-row: 3 / span 3; padding: clamp(1rem, 2vw, 2rem); background: var(--paper-bone); color: var(--midnight-ink); }
.count-copy p, .index-card p { font-size: clamp(1rem, 1.7vw, 1.8rem); line-height: 1.35; max-width: 40rem; }
.strip { height: 4rem; width: 62vw; background: var(--ultraviolet-seal); opacity: .55; }
.strip-one { left: -10vw; top: 20vh; transform: rotate(-11deg); }
.strip-two { right: -18vw; bottom: 17vh; transform: rotate(7deg); background: var(--signal-yellow); }

.index-card {
  grid-column: 2 / span 8;
  grid-row: 2 / span 5;
  background: linear-gradient(90deg, rgba(7,7,13,.96), rgba(123,44,255,.18));
  border: 1px solid rgba(244,235,221,.26);
  padding: clamp(1.2rem, 4vw, 4rem);
  overflow: hidden;
}
.index-card h2 { font-family: var(--font-jp); color: var(--electric-vermilion); text-shadow: .08em .04em 0 var(--ultraviolet-seal); }
.index-marks { display: flex; gap: .7rem; margin-top: 2rem; }
.index-marks i { width: clamp(2rem, 6vw, 7rem); height: .9rem; background: var(--ion-cyan); }
.index-marks i:nth-child(2) { background: var(--signal-yellow); }
.index-marks i:nth-child(3) { background: var(--electric-vermilion); }
.index-marks i:nth-child(4) { background: var(--void-green); }
.index-marks i:nth-child(5) { background: var(--paper-bone); }
.seal-stack { grid-column: 10 / span 2; grid-row: 2 / span 5; display: grid; gap: 1rem; }
.seal-stack span { display: grid; place-items: center; border: 1px solid var(--electric-vermilion); color: var(--electric-vermilion); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 6rem); transform: rotate(var(--r)); }
.seal-stack span:nth-child(1) { --r: 4deg; }
.seal-stack span:nth-child(2) { --r: -3deg; font-family: var(--font-jp); color: var(--signal-yellow); border-color: var(--signal-yellow); }
.seal-stack span:nth-child(3) { --r: 6deg; color: var(--ion-cyan); border-color: var(--ion-cyan); }

.cursor-field {
  position: fixed;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(0,245,255,.26);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  opacity: .38;
  mix-blend-mode: screen;
}

@keyframes floatSlow { from { transform: translateY(-1rem); } to { transform: translateY(1.5rem); } }
@keyframes stampHover { from { transform: translateY(-.5rem) rotate(-7deg); } to { transform: translateY(1rem) rotate(-2deg); } }
@keyframes rotateSeal { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .chapter { min-height: auto; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; padding-block: 5rem; }
  .chapter > *, .era-plate, .section-head, .tile-grid, .orbital, .count-copy, .index-card, .seal-stack, .stamp, .float-card { grid-column: 1 / -1; grid-row: auto; }
  .hero .sun-disc { left: 6vw; top: 10vh; }
  .era-plate { min-height: 32rem; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .date-tile.wide { grid-column: span 2; }
  .orbital { min-height: 28rem; }
  .seal-stack { grid-template-columns: repeat(3, 1fr); }
}