@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Gloock:ital@0;1&display=swap');

:root {
  --paper: #f4eee4;
  --paper-light: #faf6ef;
  --cream: #eadfc9;
  --pink: #d9a8ad;
  --pink-light: #eccfd0;
  --lavender: #aaa0bd;
  --lavender-light: #d9d2e2;
  --sky: #a8c5cc;
  --sky-light: #d5e3e3;
  --sage: #9aa892;
  --ink: #2f3035;
  --ink-soft: #666168;
  --line: rgba(47, 48, 53, 0.18);
  --serif: "Gloock", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --page-pad: clamp(1.25rem, 4vw, 4rem);
  --max-width: 1240px;
  --radius-sm: 0.6rem;
  --radius-md: 1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 18px 60px rgba(63, 55, 53, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(rgba(67, 61, 61, 0.045) 0.7px, transparent 0.7px) 0 0 / 7px 7px,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid #78658e;
  outline-offset: 4px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--ink);
  color: var(--paper-light);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--page-pad);
  border-bottom: 1px solid transparent;
  transition: padding 300ms ease, background 300ms ease, border-color 300ms ease;
}

.site-header.is-scrolled {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: rgba(244, 238, 228, 0.92);
  border-color: var(--line);
  backdrop-filter: blur(12px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  text-decoration: none;
}

.wordmark-mark {
  position: relative;
  width: 1.55rem;
  height: 1.55rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.wordmark-mark::before {
  content: "";
  position: absolute;
  inset: 35%;
  border-radius: inherit;
  background: currentColor;
}
.wordmark-mark::after {
  content: "";
  position: absolute;
  top: -0.2rem;
  right: -0.25rem;
  width: 0.45rem;
  height: 0.9rem;
  border-right: 1px solid currentColor;
  transform: rotate(-27deg);
}

.site-header nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.7rem); }
.site-header nav a, .site-footer > a:last-child {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms var(--ease);
}
.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.eyebrow {
  margin: 0 0 1rem;
  color: #7b6373;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.035em; line-height: 1.03; }
h1 em, h2 em { color: #8b6f86; font-weight: 400; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Home hero */
.hero {
  position: relative;
  min-height: min(880px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 7rem);
  max-width: 1440px;
  margin: 0 auto;
  padding: 7rem var(--page-pad) 4rem;
}

.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero h1 { margin-bottom: 1.7rem; font-size: clamp(4rem, 7.3vw, 7.5rem); }
.hero-intro { max-width: 34rem; margin-bottom: 2rem; color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 250ms var(--ease), color 250ms ease;
}
.text-link:hover { gap: 0.95rem; color: #795f78; }

.ambient-dots {
  position: absolute;
  top: 12%;
  left: -3rem;
  width: 15rem;
  height: 20rem;
  opacity: 0.35;
  background-image: radial-gradient(var(--pink) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}

.room-scene {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 0.92;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 48% 48% 8% 8% / 40% 40% 8% 8%;
  background: #e8dacc;
  box-shadow: inset 0 0 0 0.7rem rgba(255,255,255,0.24), var(--shadow);
  overflow: hidden;
}
.room-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.25) 35.2%, transparent 35.7%);
  opacity: 0.5;
}
.sun { position: absolute; top: 8%; right: 6%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(252, 221, 159, 0.34); filter: blur(3px); }
.window {
  position: absolute;
  top: 10%;
  left: 12%;
  width: 64%;
  height: 43%;
  overflow: hidden;
  border: 0.65rem solid #f4ede2;
  background: linear-gradient(#b9d3d6, #d9e4df 72%, #d1cdb9 72%);
  box-shadow: 0 8px 24px rgba(68, 73, 76, 0.08);
}
.window-line { position: absolute; z-index: 2; background: rgba(84, 85, 87, 0.45); }
.window-line-v { top: 0; bottom: 0; left: 56%; width: 1px; }
.window-line-h { top: 54%; right: 0; left: 0; height: 1px; }
.cloud { position: absolute; width: 22%; height: 6%; border-radius: 999px; background: rgba(250,248,242,0.75); animation: cloud-drift 18s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50% 50% 0 0; background: inherit; }
.cloud::before { left: 20%; width: 35%; height: 180%; }
.cloud::after { right: 17%; width: 28%; height: 130%; }
.cloud-one { top: 23%; left: 13%; }
.cloud-two { top: 68%; left: 67%; width: 17%; opacity: 0.7; animation-delay: -5s; }
.hanging-note { position: absolute; top: 18%; right: 12%; color: rgba(76, 66, 74, 0.44); font-family: var(--serif); font-size: 2rem; transform: rotate(10deg); animation: note-float 5s ease-in-out infinite; }

.shelf { position: absolute; top: 29%; right: 4%; width: 21%; height: 28%; border-bottom: 0.6rem solid #a9826c; }
.book { position: absolute; bottom: 0; width: 14%; border: 1px solid rgba(47,48,53,0.25); border-radius: 2px 2px 0 0; }
.book-one { left: 2%; height: 36%; background: var(--lavender); transform: rotate(-3deg); }
.book-two { left: 18%; height: 42%; background: var(--pink); }
.book-three { left: 35%; height: 32%; background: var(--sky); transform: rotate(5deg); }
.plant-pot { position: absolute; right: 8%; bottom: 0; width: 34%; height: 23%; border-radius: 3px 3px 45% 45%; background: #c48973; }
.plant-leaf { position: absolute; right: 23%; bottom: 20%; width: 13%; height: 32%; border: 1px solid #657864; border-radius: 100% 0 100% 0; background: #9dad92; transform-origin: bottom; }
.leaf-one { transform: rotate(-38deg); }
.leaf-two { right: 15%; height: 39%; transform: rotate(20deg); }
.leaf-three { right: 31%; height: 28%; transform: rotate(-68deg); }

.desk { position: absolute; right: 7%; bottom: 2%; left: 7%; height: 35%; }
.desk-edge { position: absolute; top: 42%; right: 0; left: 0; height: 8%; border: 1px solid #755f56; background: #a87c69; box-shadow: 0 7px 0 rgba(76,57,52,0.08); }
.desk-leg { position: absolute; top: 49%; bottom: 0; width: 3%; background: #7d6257; }
.leg-left { left: 7%; transform: skew(-3deg); }
.leg-right { right: 7%; transform: skew(3deg); }
.record-player { position: absolute; z-index: 2; top: 10%; left: 11%; width: 45%; height: 34%; border: 1px solid #735d59; border-radius: 4px; background: #c4948e; transform: perspective(600px) rotateX(7deg); }
.record { position: absolute; top: 8%; left: 9%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #35343a 0 3px, #45434a 4px 5px); animation: spin 9s linear infinite; }
.record::after { content: ""; position: absolute; inset: 39%; border-radius: 50%; background: #d6a18f; }
.tonearm { position: absolute; top: 17%; right: 16%; width: 4%; height: 55%; border-radius: 999px; background: #5c5657; transform: rotate(24deg); transform-origin: top; }
.mug { position: absolute; z-index: 3; top: 17%; right: 15%; width: 10%; height: 22%; border: 1px solid #6d6462; border-radius: 4px 4px 12px 12px; background: #e8cfc1; }
.mug::after { content: ""; position: absolute; top: 20%; right: -42%; width: 45%; height: 50%; border: 1px solid #6d6462; border-left: 0; border-radius: 0 50% 50% 0; }
.mug span, .mug span::after { position: absolute; content: ""; bottom: 120%; left: 30%; width: 1px; height: 50%; background: rgba(91,83,80,0.35); animation: steam 3.8s ease-in-out infinite; }
.mug span::after { bottom: 50%; left: 0.35rem; height: 80%; animation-delay: -1.4s; }
.headphones { position: absolute; z-index: 3; top: 42%; right: 9%; width: 17%; height: 25%; transform: rotate(9deg); }
.headphone-band { position: absolute; inset: 0 8% 36%; border: 5px solid #5a5260; border-bottom: 0; border-radius: 50% 50% 0 0; }
.headphone-cup { position: absolute; bottom: 17%; width: 25%; height: 36%; border-radius: 40%; background: #786e80; }
.cup-left { left: 0; }
.cup-right { right: 0; }
.dust { position: absolute; z-index: 4; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,240,0.8); animation: dust 7s ease-in-out infinite; }
.dust-one { top: 30%; left: 34%; }
.dust-two { top: 51%; left: 68%; animation-delay: -2.4s; }
.dust-three { top: 17%; left: 50%; animation-delay: -4.2s; }

@keyframes cloud-drift { to { transform: translateX(28px); } }
@keyframes note-float { 50% { transform: translateY(-8px) rotate(5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes steam { 50% { transform: translateY(-8px) translateX(3px); opacity: 0.2; } }
@keyframes dust { 50% { transform: translate(12px, -24px); opacity: 0.3; } }

/* Listening */
.listen-section { max-width: var(--max-width); margin: 0 auto; padding: clamp(6rem, 10vw, 9rem) var(--page-pad); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 0.45fr); gap: 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.2rem); }
.section-heading > p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.stations { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.station-card { overflow: hidden; border: 1px solid var(--line); background: var(--paper-light); box-shadow: 0 12px 35px rgba(64,56,55,0.06); }
.station-card:nth-child(2) { transition-delay: 120ms; }
.station-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #b1a9b2; }
.station-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(0.94) brightness(1.04); transition: transform 800ms var(--ease), filter 500ms ease; }
.station-card:hover .station-visual > img { transform: scale(1.025); filter: saturate(0.9) contrast(0.96) brightness(1.02); }
.station-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(39,34,39,0.2)); }
.play-button { position: absolute; z-index: 2; right: 50%; bottom: 50%; display: flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0.55rem 1.1rem 0.55rem 0.65rem; border: 0; border-radius: 999px; background: rgba(250,246,239,0.94); color: var(--ink); box-shadow: 0 8px 24px rgba(29,27,32,0.2); cursor: pointer; white-space: nowrap; transform: translate(50%, 50%); transition: transform 250ms var(--ease), background 250ms ease; }
.play-button:hover { background: #fffaf2; transform: translate(50%, 50%) scale(1.04); }
.play-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); }
.play-icon::after { content: ""; width: 0; height: 0; margin-left: 3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--paper-light); }
.station-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.45rem 1.5rem 1.6rem; }
.station-info h3 { margin: 0.3rem 0 0.1rem; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.2; }
.station-info p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.station-info .station-mood { color: #7a626f; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; background: #bd6b72; box-shadow: 0 0 0 4px rgba(189,107,114,0.12); }
.station-info a { flex: none; color: var(--ink-soft); font-size: 0.76rem; font-weight: 500; text-decoration: none; }
.station-info a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.station-visual iframe { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; border: 0; }
.stream-note { margin: 1.2rem 0 0; color: var(--ink-soft); font-size: 0.75rem; }

/* Teaser */
.history-teaser { display: grid; grid-template-columns: 0.75fr 1.25fr; min-height: 610px; margin: 0 var(--page-pad) clamp(3rem, 7vw, 6rem); overflow: hidden; border: 1px solid var(--line); background: #dce3de; }
.teaser-orbit { position: relative; min-height: 420px; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.38), transparent 52%); }
.orbit-record { position: absolute; top: 50%; left: 50%; width: min(58%, 280px); aspect-ratio: 1; border: 1px solid #665e68; border-radius: 50%; background: repeating-radial-gradient(circle, #817985 0 2px, #746d79 3px 6px); box-shadow: 16px 18px 0 rgba(103,92,104,0.08); transform: translate(-50%, -50%); animation: spin-center 18s linear infinite; }
.orbit-record::before { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--pink); border: 1px solid #665e68; }
.orbit-record::after { content: ""; position: absolute; inset: 48%; border-radius: 50%; background: var(--paper-light); }
.orbit-line { position: absolute; top: 18%; left: 17%; width: 65%; height: 65%; border: 1px dashed rgba(70,66,70,0.35); border-radius: 50%; transform: rotate(-15deg); }
.orbit-star { position: absolute; color: #736978; font-family: var(--serif); }
.star-a { top: 19%; left: 15%; font-size: 1.7rem; }
.star-b { right: 13%; bottom: 20%; font-size: 3rem; }
.teaser-copy { display: flex; flex-direction: column; justify-content: center; max-width: 740px; padding: clamp(3rem, 8vw, 8rem) clamp(2rem, 7vw, 7rem) clamp(3rem, 8vw, 8rem) 1rem; }
.teaser-copy h2 { margin-bottom: 1.6rem; font-size: clamp(2.8rem, 5vw, 5.2rem); }
.teaser-copy > p:not(.eyebrow) { max-width: 37rem; margin-bottom: 2rem; color: var(--ink-soft); }
.button-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 1rem; padding: 0.9rem 1.25rem; border: 1px solid var(--ink); background: transparent; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 250ms ease, color 250ms ease, gap 250ms var(--ease); }
.button-link:hover { gap: 1.35rem; background: var(--ink); color: var(--paper-light); }
@keyframes spin-center { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Shared footer */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; margin: 0 var(--page-pad); padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.footer-wordmark { color: var(--ink); }
.site-footer p { margin: 0; font-size: 0.72rem; text-align: center; }
.site-footer > a:last-child { justify-self: end; }

/* History hero */
.history-hero { position: relative; min-height: min(900px, 100svh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.75fr); align-items: center; gap: 4rem; max-width: 1320px; margin: 0 auto; padding: 8.5rem var(--page-pad) 6rem; }
.history-hero-copy { position: relative; z-index: 2; min-width: 0; }
.history-hero h1 { margin-bottom: 1.7rem; font-size: clamp(4rem, 7.4vw, 7.3rem); }
.history-hero-copy > p:last-child { max-width: 36rem; color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.scroll-cue { position: absolute; bottom: 2.5rem; left: var(--page-pad); display: flex; gap: 0.7rem; color: var(--ink-soft); font-size: 0.76rem; text-decoration: none; }
.scroll-cue span { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.tape-scene { position: relative; width: min(100%, 480px); aspect-ratio: 1; justify-self: center; }
.tape-scene::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; background: var(--pink-light); opacity: 0.56; }
.tape-shell { position: absolute; z-index: 2; top: 25%; left: 8%; width: 84%; height: 53%; border: 2px solid #4f4d52; border-radius: 18px 22px 15px 25px; background: #d9b9a9; box-shadow: 18px 22px 0 rgba(91,75,73,0.08); transform: rotate(-7deg); }
.tape-shell::before { content: ""; position: absolute; inset: 9% 12% 22%; border: 1px solid #625d5e; border-radius: 9px; background: #eee1cc; }
.tape-label { position: absolute; z-index: 2; top: 15%; left: 18%; font: 600 0.58rem var(--sans); letter-spacing: 0.18em; transform: rotate(-2deg); }
.reel { position: absolute; z-index: 3; top: 30%; width: 23%; aspect-ratio: 1; border: 5px dotted #5a5558; border-radius: 50%; background: var(--paper-light); animation: spin 8s linear infinite; }
.reel::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: #5a5558; }
.reel-left { left: 20%; }
.reel-right { right: 20%; }
.tape-window { position: absolute; z-index: 2; right: 33%; bottom: 11%; left: 33%; height: 16%; border: 1px solid #5e595a; border-radius: 3px; background: #a79289; }
.tape-screw { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #555156; }
.screw-one { top: 5%; left: 4%; }.screw-two { top: 5%; right: 4%; }.screw-three { right: 4%; bottom: 5%; }.screw-four { bottom: 5%; left: 4%; }
.tape-line { position: absolute; border: 1px solid rgba(77,70,75,0.35); border-radius: 50%; }
.line-one { top: 6%; right: 0; width: 65%; height: 76%; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-12deg); }
.line-two { bottom: 0; left: 0; width: 42%; height: 35%; border-right-color: transparent; border-top-color: transparent; }
.tape-note { position: absolute; top: 11%; right: 8%; color: #756676; font-family: var(--serif); font-size: 2rem; animation: note-float 5s ease-in-out infinite; }

/* Timeline */
.timeline-section { padding: clamp(6rem, 10vw, 10rem) var(--page-pad); background: var(--paper-light); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timeline-intro { max-width: 760px; margin: 0 auto clamp(7rem, 13vw, 12rem); text-align: center; }
.timeline-intro h2 { margin-bottom: 1.6rem; font-size: clamp(2.8rem, 5vw, 5rem); }
.timeline-intro > p:last-child { color: var(--ink-soft); font-size: 1.03rem; }
.chapter-number { margin-bottom: 0.7rem; color: #856a7a; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.timeline { position: relative; max-width: 1160px; margin: 0 auto; }
.timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; overflow: hidden; background: var(--line); }
.timeline-line span { display: block; width: 100%; height: var(--timeline-progress, 0%); background: #8e7588; transition: height 100ms linear; }
.timeline-chapter { position: relative; width: 50%; min-height: 550px; padding-bottom: clamp(5rem, 10vw, 10rem); }
.timeline-chapter:last-child { min-height: 400px; padding-bottom: 0; }
.chapter-left { padding-right: clamp(2.5rem, 7vw, 6.5rem); }
.chapter-right { margin-left: 50%; padding-left: clamp(2.5rem, 7vw, 6.5rem); }
.chapter-marker { position: absolute; top: 0.5rem; width: 13px; height: 13px; border: 3px solid var(--paper-light); border-radius: 50%; background: #8e7588; box-shadow: 0 0 0 1px #8e7588; }
.chapter-left .chapter-marker { right: -7px; }
.chapter-right .chapter-marker { left: -6px; }
.chapter-era { position: absolute; top: 0; color: #836e7e; font-family: var(--serif); font-size: 0.85rem; font-style: italic; }
.chapter-left .chapter-era { left: calc(100% + 2.4rem); white-space: nowrap; }
.chapter-right .chapter-era { right: calc(100% + 2.4rem); white-space: nowrap; }
.chapter-card { position: relative; padding-top: 3.3rem; }
.chapter-card h2 { margin-bottom: 1.35rem; font-size: clamp(2.1rem, 3.5vw, 3.6rem); }
.chapter-card > p:not(.chapter-number) { color: var(--ink-soft); font-size: 0.95rem; }
.chapter-illustration { position: relative; width: 100%; height: 180px; margin-bottom: 2.4rem; overflow: hidden; border-bottom: 1px solid var(--line); background: #eee5da; }

/* Timeline CSS drawings */
.radio-body { position: absolute; right: 16%; bottom: 17%; width: 62%; height: 55%; border: 1px solid #605c5c; border-radius: 12px; background: #b7c6c0; transform: rotate(2deg); }
.radio-dial { position: absolute; z-index: 2; right: 24%; bottom: 40%; width: 16%; aspect-ratio: 1; border: 1px solid #605c5c; border-radius: 50%; background: var(--cream); }
.radio-speaker { position: absolute; z-index: 2; right: 48%; bottom: 27%; width: 25%; height: 37%; border-radius: 4px; background: repeating-linear-gradient(90deg, #726d6c 0 1px, transparent 1px 4px); }
.radio-aerial { position: absolute; right: 27%; bottom: 72%; width: 1px; height: 31%; background: #605c5c; transform: rotate(25deg); transform-origin: bottom; }
.fourtrack-body { position: absolute; bottom: 13%; left: 13%; width: 73%; height: 62%; border: 1px solid #5f5a5a; border-radius: 6px; background: #c5b8cc; transform: perspective(500px) rotateX(6deg) rotate(-2deg); }
.fourtrack-slider { position: absolute; z-index: 2; bottom: 31%; width: 3px; height: 29%; background: #686267; }
.fourtrack-slider::after { content: ""; position: absolute; top: 40%; left: -4px; width: 11px; height: 5px; background: #f2e7dc; border: 1px solid #686267; }
.slider-one { left: 26%; }.slider-two { left: 37%; }.slider-three { left: 48%; }
.fourtrack-tape { position: absolute; z-index: 2; right: 23%; bottom: 25%; width: 24%; height: 29%; border: 1px solid #686267; background: #e8d8c8; }
.sampler-body { position: absolute; bottom: 13%; left: 16%; width: 67%; height: 64%; border: 1px solid #59575c; border-radius: 8px; background: #9fa9ae; transform: rotate(2deg); }
.sampler-screen { position: absolute; z-index: 2; top: 32%; left: 25%; width: 26%; height: 16%; border: 1px solid #55565a; background: #d5ddd0; }
.sampler-pad { position: absolute; z-index: 2; width: 11%; height: 18%; border: 1px solid #59575c; background: #e5d0c9; }
.pad-1 { top: 32%; right: 31%; }.pad-2 { top: 32%; right: 18%; }.pad-3 { top: 53%; right: 31%; }.pad-4 { top: 53%; right: 18%; }
.laptop-screen { position: absolute; top: 16%; left: 20%; width: 60%; height: 57%; border: 2px solid #58575b; border-radius: 8px 8px 2px 2px; background: #b9ced1; }
.laptop-screen i { position: absolute; bottom: 18%; width: 3%; border-radius: 2px 2px 0 0; background: #807385; }
.laptop-screen i:nth-child(1) { left: 30%; height: 27%; }.laptop-screen i:nth-child(2) { left: 47%; height: 42%; }.laptop-screen i:nth-child(3) { left: 64%; height: 20%; }
.laptop-base { position: absolute; bottom: 17%; left: 12%; width: 76%; height: 8%; border: 1px solid #58575b; border-radius: 2px 2px 12px 12px; background: #a5a0a1; }
.tiny-cloud { position: absolute; top: 16%; right: 8%; width: 20%; height: 8%; border-radius: 999px; background: rgba(255,255,255,0.7); }
.tiny-cloud::before { content: ""; position: absolute; bottom: 0; left: 25%; width: 34%; height: 170%; border-radius: 50% 50% 0 0; background: inherit; }
.mini-window { position: absolute; top: 12%; left: 18%; width: 44%; height: 53%; border: 6px solid #eadfd4; background: #acbbc8; }
.mini-window i { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #66636a; }
.mini-desk { position: absolute; right: 12%; bottom: 21%; left: 12%; height: 6%; background: #a47f72; border: 1px solid #6b5a56; }
.mini-lamp { position: absolute; z-index: 2; right: 19%; bottom: 26%; width: 2px; height: 31%; background: #625b61; transform: rotate(18deg); transform-origin: bottom; }
.mini-lamp::before { content: ""; position: absolute; top: 0; left: -16px; width: 25px; height: 15px; border-radius: 15px 15px 2px 2px; background: #d7a6a7; transform: rotate(-18deg); }
.mini-moon { position: absolute; top: 22%; left: 28%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #f2deb2; }
.globe { position: absolute; top: 14%; left: 28%; width: 43%; aspect-ratio: 1; border: 1px solid #59595e; border-radius: 50%; background: radial-gradient(ellipse at 38% 38%, #9cae99 0 12%, transparent 13%), radial-gradient(ellipse at 65% 58%, #9cae99 0 16%, transparent 17%), #bdd0d1; }
.globe::before, .globe::after { content: ""; position: absolute; border: 1px solid rgba(70,70,74,0.45); border-radius: 50%; }
.globe::before { inset: 12% 30%; }.globe::after { inset: 43% 0; }
.globe-ring { position: absolute; top: 7%; left: 21%; width: 57%; height: 78%; border: 1px solid rgba(83,77,84,0.45); border-radius: 50%; transform: rotate(32deg); }
.globe-star { position: absolute; color: #877286; }
.star-one { top: 18%; right: 15%; }.star-two { bottom: 20%; left: 15%; font-size: 2rem; }

.history-end { max-width: 850px; margin: 0 auto; padding: clamp(8rem, 14vw, 13rem) var(--page-pad); text-align: center; }
.history-end h2 { margin-bottom: 1.2rem; font-size: clamp(3rem, 6vw, 5.6rem); }
.history-end > p:not(.eyebrow) { margin-bottom: 2rem; color: var(--ink-soft); }
.history-end .button-link { align-self: auto; }

.sources { display: grid; grid-template-columns: minmax(240px, 0.65fr) 1.35fr; gap: clamp(3rem, 8vw, 9rem); max-width: var(--max-width); margin: 0 auto; padding: 2rem var(--page-pad) clamp(6rem, 10vw, 9rem); }
.sources-heading h2 { font-size: clamp(2.3rem, 3.5vw, 3.8rem); }
.sources ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sources li { border-bottom: 1px solid var(--line); }
.sources a { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1rem 0; text-decoration: none; }
.sources a span { font-family: var(--serif); font-size: 1rem; }
.sources a small { color: var(--ink-soft); font-size: 0.7rem; text-align: right; }
.sources a:hover span { color: #795f78; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 9rem; }
  .hero-copy { max-width: 720px; }
  .room-scene { width: min(100%, 680px); justify-self: center; }
  .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .section-heading > p { max-width: 34rem; }
  .history-teaser { grid-template-columns: 0.85fr 1.15fr; }
  .teaser-copy { padding-right: 2.5rem; }
  .history-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 10rem; }
  .tape-scene { width: min(80vw, 460px); }
  .scroll-cue { display: none; }
  .sources { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 700px) {
  .site-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .site-header > a,
  .site-header nav a { min-height: 44px; }
  .site-header nav a { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .wordmark { font-size: 0.72rem; letter-spacing: 0.18em; }
  .wordmark-mark { width: 1.35rem; height: 1.35rem; }
  .site-header nav { gap: 1rem; }
  .site-header nav a { font-size: 0.78rem; }
  .hero { gap: 3.5rem; padding-top: 8rem; padding-bottom: 2rem; }
  .hero h1 { font-size: clamp(3.4rem, 17vw, 5rem); }
  .history-hero h1 { font-size: clamp(2.9rem, 14.7vw, 4.5rem); }
  .room-scene { border-radius: 45% 45% 5% 5% / 32% 32% 5% 5%; }
  .stations { grid-template-columns: 1fr; }
  .station-info { padding: 1.1rem; }
  .history-teaser { grid-template-columns: 1fr; min-height: 0; margin-right: 0; margin-left: 0; }
  .teaser-orbit { min-height: 320px; }
  .teaser-copy { padding: 1rem var(--page-pad) 4rem; }
  .site-footer { grid-template-columns: 1fr auto; gap: 1.5rem; }
  .site-footer p { grid-row: 2; grid-column: 1 / -1; text-align: left; }
  .history-hero { gap: 1rem; padding-top: 8rem; padding-bottom: 4rem; }
  .timeline-section { padding-right: var(--page-pad); padding-left: var(--page-pad); }
  .timeline-intro { margin-bottom: 7rem; text-align: left; }
  .timeline-line { left: 6px; }
  .timeline-chapter, .chapter-right { width: auto; min-height: 0; margin-left: 0; padding: 0 0 7rem 2.5rem; }
  .chapter-left .chapter-marker, .chapter-right .chapter-marker { top: 0.35rem; right: auto; left: 0; }
  .chapter-left .chapter-era, .chapter-right .chapter-era { position: static; display: block; margin-bottom: 1.5rem; white-space: normal; }
  .chapter-card { padding-top: 0; }
  .chapter-illustration { height: 160px; }
  .sources a { grid-template-columns: 1fr; gap: 0.15rem; }
  .sources a small { text-align: left; }
}

@media (max-width: 390px) {
  .site-header nav { gap: 0.75rem; }
  .site-header nav a { font-size: 0.72rem; }
  .hero-intro { font-size: 0.95rem; }
  .station-info { align-items: flex-start; }
  .station-info a { margin-top: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}