:root {
  --ink: #15121E;
  --coral: #FF4F6D;
  --orange: #FF9B2F;
  --cyan: #36D9FF;
  --lime: #B8FF3D;
  --cream: #FFF2D8;
  --violet: #5B37D6;
  --dawn: linear-gradient(135deg, #FF4F6D 0%, #FF9B2F 36%, #B8FF3D 62%, #36D9FF 100%);
  --dusk: linear-gradient(160deg, #15121E 0%, #5B37D6 54%, #FF4F6D 100%);
  --shadow: 10px 10px 0 #15121E;
}

/* Typography note: Inter Black for clipped headlines, Inter Medium for narrative body, Inter** from Google Fonts as the primary body and interface family for crisp signage-like clarity. Use **Nunito Sans** for rounded capsule labels. Space Grotesk numerals for "02" at 18-28vw. Space Grotesk** sparingly for oversized day numbers and rebellious headline fragments. */

@keyframes bubble-wobble {
  0%, 100% { border-radius: 45% 55% 52% 48%; }
  50% { border-radius: 54% 46% 43% 57%; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  background: var(--cream);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(21,18,30,.16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, rgba(21,18,30,.04) 2px 4px);
  mix-blend-mode: multiply;
  opacity: .48;
}

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(54,217,255,.3), transparent 21rem),
    radial-gradient(circle at 18% 70%, rgba(255,79,109,.18), transparent 24rem);
}

.top-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(190px, 23vw) 1fr 110px;
  align-items: center;
  border-bottom: 4px solid var(--ink);
  background: var(--dawn);
  box-shadow: 0 7px 0 rgba(21,18,30,.2);
}

.domain-mark {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--cream);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.04em;
  font-size: clamp(1.1rem, 2vw, 2rem);
  background: var(--ink);
}

.status-marquee {
  font-family: Inter, sans-serif;
  font-weight: 900;
  letter-spacing: .16em;
  font-size: clamp(.68rem, 1.1vw, 1rem);
  white-space: nowrap;
  overflow: hidden;
  padding: 0 22px;
}

.break-bubble {
  width: 92px;
  height: 92px;
  margin-top: 28px;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 48% 52% 45% 55%;
  background: var(--cyan);
  box-shadow: var(--shadow);
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}

.left-rail {
  position: fixed;
  top: 72px;
  bottom: 0;
  left: 0;
  width: min(210px, 21vw);
  z-index: 80;
  padding: 22px 16px;
  background: rgba(255,242,216,.88);
  border-right: 4px solid var(--ink);
  backdrop-filter: blur(5px);
}

.rail-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700;
  line-height: .78;
  margin-bottom: 28px;
  color: var(--violet);
}

.rail-marker {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 10px 12px;
  margin: 12px 0;
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .2s ease, background .2s ease;
}

.rail-marker:hover, .rail-marker.is-active { background: var(--lime); transform: translateY(-5px); }
.rail-marker span { display: block; font-size: .66rem; letter-spacing: .12em; font-weight: 900; }
.rail-marker b { font-family: "Nunito Sans", sans-serif; font-size: .92rem; }
.rail-note { position: absolute; bottom: 22px; font-weight: 900; font-size: .75rem; transform: rotate(-4deg); color: var(--coral); }

main { position: relative; z-index: 1; margin-left: min(210px, 21vw); padding-top: 72px; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: clamp(58px, 8vw, 110px) clamp(22px, 5vw, 76px);
  overflow: hidden;
  border-bottom: 4px solid var(--ink);
}

.hero { background: var(--dawn); }
.cream-band { background: var(--cream); }
.noon-band { background: linear-gradient(130deg, #FFF2D8 0%, #FF9B2F 42%, #36D9FF 100%); }
.dusk-band { background: var(--dusk); color: var(--cream); }

.oversize-zero-two {
  position: absolute;
  right: -5vw;
  top: 1vh;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(11rem, 27vw, 32rem);
  line-height: .75;
  color: rgba(255,242,216,.55);
  -webkit-text-stroke: 5px var(--ink);
  transform: rotate(-7deg);
}

.chapter-copy { grid-column: 1 / span 5; align-self: center; position: relative; z-index: 2; }
.hero-copy { padding-top: 20px; }

.stamp, .kicker {
  display: inline-block;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--lime);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-2deg);
}

h1, h2 {
  margin: 24px 0 18px;
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .82;
}

h1 { font-size: clamp(4rem, 9vw, 10rem); max-width: 900px; }
h2 { font-size: clamp(3rem, 6vw, 7rem); }

p {
  margin: 0;
  max-width: 680px;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  line-height: 1.35;
  font-weight: 700;
}

.capsule-row, .final-labels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.capsule-tab, .final-labels span {
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--cream);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  color: var(--ink);
}
.capsule-tab { cursor: pointer; }
.capsule-tab.is-hot, .final-labels span:nth-child(2) { background: var(--coral); color: var(--cream); }

.artifact-field { grid-column: 6 / span 7; position: relative; min-height: 540px; z-index: 1; }
.bubble, .small-bubble, .dusk-orb {
  position: absolute;
  display: grid;
  place-items: center;
  border: 5px solid var(--ink);
  border-radius: 45% 55% 52% 48%;
  box-shadow: var(--shadow);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  animation: bubble-wobble 5.5s ease-in-out infinite;
}
.bubble-xl { width: clamp(220px, 28vw, 390px); height: clamp(220px, 28vw, 390px); right: 5%; top: 11%; background: radial-gradient(circle at 30% 25%, #FFF2D8 0 12%, #36D9FF 13% 48%, #5B37D6 100%); font-size: clamp(2rem, 5vw, 5rem); }
.bubble-play { width: 148px; height: 148px; left: 5%; top: 48%; background: var(--lime); font-size: 3.5rem; }
.calendar-scrap { position: absolute; right: 42%; bottom: 10%; width: 190px; height: 220px; border: 5px solid var(--ink); background: var(--cream); box-shadow: var(--shadow); transform: rotate(8deg); display: grid; place-items: center; }
.calendar-scrap b { font-family: "Space Grotesk"; font-size: 8rem; text-decoration: line-through var(--coral) 12px; }
.calendar-scrap i { position: absolute; bottom: 20px; font-family: "Nunito Sans"; font-weight: 900; color: var(--coral); }
.tape-mark { position: absolute; right: 2%; bottom: 6%; padding: 14px 24px; border: 4px solid var(--ink); background: var(--orange); box-shadow: 8px 8px 0 var(--ink); font-weight: 900; transform: rotate(-9deg); }

.ticket-strip, .control-bar {
  grid-column: 6 / span 7;
  align-self: center;
  border: 4px solid var(--ink);
  background: var(--cyan);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 2.6rem);
  text-transform: uppercase;
}
.ticket-strip div, .control-bar span { padding: 24px; border-bottom: 3px dashed var(--ink); }
.ticket-strip div:last-child, .control-bar span:last-child { border-bottom: 0; }

.bubble-row { grid-column: 2 / span 10; position: absolute; bottom: 40px; right: 70px; height: 170px; width: 520px; }
.small-bubble { width: 136px; height: 136px; background: var(--cyan); font-size: 1.7rem; }
.small-bubble:nth-child(1) { left: 0; top: 20px; }
.small-bubble:nth-child(2) { left: 170px; top: 0; }
.small-bubble:nth-child(3) { left: 340px; top: 34px; }
.small-bubble.lime { background: var(--lime); }
.small-bubble.coral { background: var(--coral); color: var(--cream); }

.control-bar { background: var(--lime); transform: rotate(1.5deg); }
.poster-stack { grid-column: 7 / span 5; align-self: end; display: grid; gap: 18px; z-index: 2; }
.poster-card { border: 4px solid var(--ink); background: var(--cream); box-shadow: var(--shadow); padding: 30px; font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(1.5rem, 3vw, 3.2rem); transform: rotate(-3deg); }
.poster-card.cyan { background: var(--cyan); transform: rotate(2deg); }

.dusk-band .kicker { background: var(--coral); color: var(--cream); }
.dusk-orb { width: clamp(260px, 35vw, 520px); height: clamp(260px, 35vw, 520px); right: 8%; top: 22%; background: radial-gradient(circle at 32% 24%, #FFF2D8 0 10%, #FF4F6D 11% 48%, #5B37D6 100%); color: var(--cream); font-size: clamp(7rem, 16vw, 17rem); }

.hover-lift { transition: transform .22s cubic-bezier(.2, .9, .18, 1), box-shadow .22s ease, filter .22s ease; }
.hover-lift:hover { transform: translateY(-12px) rotate(-2deg); box-shadow: 14px 16px 0 var(--ink); filter: saturate(1.18); }

@media (max-width: 900px) {
  .top-strip { grid-template-columns: 1fr; height: 92px; }
  .domain-mark { height: 42px; }
  .status-marquee { text-align: center; padding: 11px; }
  .break-bubble { display: none; }
  .left-rail { display: none; }
  main { margin-left: 0; padding-top: 92px; }
  .chapter { display: block; padding: 54px 22px; }
  .artifact-field { min-height: 460px; margin-top: 28px; }
  .chapter-copy { max-width: 100%; }
  .ticket-strip, .control-bar, .poster-stack { margin-top: 34px; }
  .bubble-row { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 30px; }
}
*** Add File: sites/thesecond.day-v1/script.js
const statusText = document.querySelector('#statusText');
const chapters = Array.from(document.querySelectorAll('.chapter'));
const railMarkers = Array.from(document.querySelectorAll('.rail-marker'));
const driftItems = Array.from(document.querySelectorAll('.drift'));
const tabs = Array.from(document.querySelectorAll('.capsule-tab'));

let ticking = false;

function updateChapterState() {
  const viewportPoint = window.innerHeight * 0.42;
  let active = chapters[0];

  chapters.forEach((chapter) => {
    const rect = chapter.getBoundingClientRect();
    if (rect.top <= viewportPoint && rect.bottom >= viewportPoint) {
      active = chapter;
    }
  });

  if (statusText && active.dataset.status) {
    statusText.textContent = active.dataset.status;
  }

  railMarkers.forEach((marker) => {
    marker.classList.toggle('is-active', marker.getAttribute('href') === `#${active.id}`);
  });

  const scrollY = window.scrollY || window.pageYOffset;
  driftItems.forEach((item, index) => {
    const strength = Number(item.dataset.drift || 0.08);
    const bob = Math.sin((scrollY / 180) + index) * 8;
    item.style.translate = `0 ${((scrollY * strength) % 46) + bob}px`;
  });

  ticking = false;
}

function requestUpdate() {
  if (!ticking) {
    ticking = true;
    window.requestAnimationFrame(updateChapterState);
  }
}

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    tabs.forEach((item) => item.classList.remove('is-hot'));
    tab.classList.add('is-hot');
    if (statusText) {
      const label = tab.textContent.trim().toUpperCase();
      statusText.textContent = `${label} / SIGNAL RESTORED / SECOND DAY LIVE`;
    }
  });
});

railMarkers.forEach((marker) => {
  marker.addEventListener('click', () => {
    railMarkers.forEach((item) => item.classList.remove('is-active'));
    marker.classList.add('is-active');
  });
});

window.addEventListener('scroll', requestUpdate, { passive: true });
window.addEventListener('resize', requestUpdate);
updateChapterState();