* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Design reference tokens: IBM Plex Mono" (Google Fonts; Space Grotesk" (Google Fonts; Interactions — Understated* Understated:** IntersectionObserver` with `threshold: 0.2` enormous headings creates typographic tension between architectural (display contrast. */

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #1c1917;
  color: #d4a574;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0.02em;
  scroll-behavior: smooth;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(245, 230, 211, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(194, 112, 62, 0.12), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(139, 115, 85, 0.11), transparent 48%);
  background-size: 100% 4px, 100% 100%, 100% 100%;
  mix-blend-mode: screen;
  border-top: 1px solid #44403c;
}

#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out;
  z-index: 2;
}

.section {
  position: relative;
  min-height: 80vh;
  padding: 10vh 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.terminal-column {
  width: min(680px, 100%);
  position: relative;
}

.boot {
  min-height: 100vh;
  background: #1c1917;
}

.boot-terminal {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 400;
}

.boot-fragments {
  position: absolute;
  top: -10vh;
  right: -80px;
  width: 240px;
  opacity: 0.18;
}

.blackletter-fragment path {
  stroke: #b8860b;
  stroke-width: 1.4;
  fill: none;
}

#boot-text {
  min-height: 18rem;
}

.boot-line {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  color: #d4a574;
}

.prompt,
.entry-prompt {
  color: #7c8b6f;
}

.status-marker {
  color: #8b7355;
  padding: 0 0.25rem;
}

.boot-cursor,
.resting-cursor,
.cursor-blink {
  color: #f5e6d3;
  text-shadow: 0 0 8px rgba(245, 230, 211, 0.4);
  animation: blink 1.2s steps(2, start) infinite;
}

.boot-cursor {
  display: inline-block;
  margin-top: 0.25rem;
}

#page-content {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

#page-content.revealed {
  opacity: 1;
}

.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: calc(50% - 300px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, #8b7355 8vh, #8b7355 calc(100% - 8vh), transparent);
}

.timeline-entry {
  padding-left: 60px;
}

.timeline-marker {
  position: absolute;
  left: 36px;
  top: 0.75rem;
  width: 8px;
  height: 8px;
  border: 1px solid #8b7355;
  background: #1c1917;
  transform: rotate(45deg);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.timeline-marker:hover,
.timeline-section.in-view .timeline-marker {
  transform: rotate(90deg) scale(1.22);
  border-color: #f5e6d3;
  box-shadow: 0 0 14px rgba(245, 230, 211, 0.22);
}

.entry-prompt {
  margin-bottom: 1.4rem;
  font-weight: 400;
}

.era-marker {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  color: #7c8b6f;
  margin-bottom: 1.1rem;
}

.script-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: #c2703e;
  margin-bottom: 1.7rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-section.in-view .script-heading {
  opacity: 1;
  transform: translateY(0);
}

.body-text {
  min-height: 12.4rem;
  max-width: 680px;
  color: #d4a574;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;
  margin-bottom: 2.4rem;
}

.glyph-art {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-top: 2rem;
  overflow: visible;
}

.glyph-art path,
.glyph-art line,
.glyph-art circle {
  stroke: #b8860b;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.96;
}

.cuneiform-glyph path {
  stroke-linejoin: miter;
}

.arabic-glyph path {
  stroke-width: 3;
}

.arabic-glyph circle {
  fill: #b8860b;
  stroke: none;
}

.glyph-art .draw-ready {
  transition: stroke-dashoffset 2.8s ease-in-out;
}

.closing {
  min-height: 100vh;
  padding: 20vh 80px;
}

.closing-terminal {
  text-align: center;
}

.resting-cursor {
  display: block;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  margin-bottom: 3rem;
}

.closing-line {
  color: #d4a574;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (hover: hover) {
  .timeline-marker,
  .entry-prompt {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 24 L12 4 L24 16 L16 18 L13 26 Z' fill='%23f5e6d3' stroke='%238b7355' stroke-width='1'/%3E%3C/svg%3E") 3 24, pointer;
  }

  .entry-prompt:hover {
    color: #f5e6d3;
    text-shadow: 0 0 8px rgba(245, 230, 211, 0.28);
    transition: all 0.4s ease;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 10vh 24px;
  }

  #cursor-glow {
    display: none;
  }

  .timeline::before {
    left: 40px;
  }

  .timeline-entry {
    padding-left: 40px;
  }

  .timeline-marker {
    left: 12px;
  }

  .script-heading {
    font-size: clamp(2.6rem, 14vw, 5rem);
  }

  .body-text {
    min-height: 15rem;
  }

  .boot-fragments {
    right: 0;
    width: 180px;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 8vh 16px;
  }

  .timeline::before {
    left: 28px;
  }

  .timeline-entry {
    padding-left: 32px;
  }

  .timeline-marker {
    left: 8px;
  }

  .body-text {
    min-height: 19rem;
  }
}