:root {
  --cream: #F5EDE0;
  --sand: #E8D5C0;
  --rose: #C9A89A;
  --espresso: #2C1810;
  --walnut: #4A3728;
  --stone: #6B5B4E;
  --gold: #8B6914;
  --red: #A0432E;
  --umber: #1A0F0A;
}

/* Design terms: Interactive Dialogue Cards:** IntersectionObserver` fallback. `threshold: 0.15` detect sections enter the viewport Space Grotesk" (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--umber);
  color: var(--walnut);
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  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 fill='%232C1810' d='M24 2C15 4 8 12 5 25c6-7 12-14 19-23Z'/%3E%3Cpath fill='%23A0432E' d='M6 22c3-5 7-9 12-14-4 7-7 11-12 14Z'/%3E%3C/svg%3E") 2 24, auto;
}

.filters { position: fixed; }

.quest-scroll { position: relative; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 120px 5vw;
  overflow: hidden;
  box-shadow: 0 -28px 80px rgba(26, 15, 10, 0.32);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter.in-view { clip-path: inset(0 0 0 0); }

.marble-surface,
.marble-card {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 30%, #C9A89A22 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, #C9A89A18 0%, transparent 40%),
    radial-gradient(ellipse at 40% 80%, #C9A89A15 0%, transparent 60%),
    linear-gradient(135deg, transparent 40%, #E8D5C011 50%, transparent 60%);
}

.marble-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: url(#marble-noise);
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.chapter-hero {
  background-color: var(--sand);
  background-image:
    radial-gradient(ellipse at 15% 10%, #A0432E18 0%, transparent 32%),
    radial-gradient(ellipse at 85% 82%, #8B691420 0%, transparent 36%),
    linear-gradient(135deg, #F5EDE0 0%, #E8D5C0 50%, #F5EDE0 100%);
}

.plaster-wall {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(74,55,40,0.12), transparent 18%, transparent 82%, rgba(74,55,40,0.12)),
    repeating-linear-gradient(97deg, transparent 0 44px, rgba(160,67,46,0.035) 45px 47px);
  pointer-events: none;
}

.hero-slab {
  width: min(60vw, 920px);
  min-height: 54vh;
  display: grid;
  place-items: center;
  align-content: center;
  position: relative;
  padding: clamp(36px, 6vw, 84px);
  border: 1px solid rgba(201, 168, 154, 0.75);
  box-shadow: 0 28px 90px rgba(26, 15, 10, 0.22), inset 0 0 0 8px rgba(245, 237, 224, 0.35);
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 25%, #C9A89A24, transparent 44%),
    radial-gradient(ellipse at 72% 65%, #C9A89A18, transparent 38%),
    linear-gradient(135deg, #F5EDE0, #E8D5C0 55%, #F5EDE0);
}

.hero-slab::after,
.marble-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 34px solid var(--sand);
  border-left: 34px solid transparent;
  box-shadow: -4px 4px 10px rgba(26, 15, 10, 0.1);
}

.chapter-label,
.option-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 18px;
  font-weight: 700;
}

.title,
.chapter-title,
.dialogue-card h3,
.script-fragment h3 {
  font-family: "Passion One", sans-serif;
  color: var(--espresso);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0;
  font-weight: 900;
}

.title { font-size: clamp(3rem, 8vw, 7rem); text-align: center; }
.chapter-title { font-size: clamp(3rem, 7vw, 6.5rem); max-width: 920px; }

.stencil-text {
  text-shadow: 0 0 1px var(--cream), 0 0 24px rgba(44, 24, 16, 0.15), 6px 5px 0 rgba(160, 67, 46, 0.16);
  background: linear-gradient(135deg, var(--espresso), var(--walnut));
  -webkit-background-clip: text;
  background-clip: text;
}

.paint-drips { display: flex; gap: 28px; height: 70px; margin-top: -4px; }
.paint-drips span { width: 9px; background: linear-gradient(var(--red), rgba(160,67,46,0.16)); border-radius: 999px; display: block; }
.paint-drips span:nth-child(1) { height: 44px; }
.paint-drips span:nth-child(2) { height: 68px; }
.paint-drips span:nth-child(3) { height: 28px; }

@keyframes chalk-breathe {
  0%, 100% { opacity: 0.68; transform: rotate(-1.5deg) translateY(0); }
  50% { opacity: 0.86; transform: rotate(-1.5deg) translateY(-2px); }
}

.chalk-note,
.tag,
.fragment-note,
.annotation-strip,
.footnote-pop {
  font-family: "Caveat", cursive;
  color: var(--gold);
  line-height: 1.5;
  filter: contrast(0.9) brightness(1.1);
}

.hero-question { font-size: clamp(1.4rem, 3vw, 2.4rem); transform: rotate(-1.5deg); margin: 0; text-align: center; }
.hero-question { animation: chalk-breathe 6s ease-in-out infinite; }
.hero-copy { position: absolute; bottom: 54px; max-width: 620px; text-align: center; color: var(--walnut); }

.fixed-graffiti { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0.65; }
.tag { position: absolute; font-size: clamp(1.1rem, 2vw, 1.9rem); color: rgba(139,105,20,0.7); }
.tag-one { top: 11vh; left: 5vw; transform: rotate(-9deg); }
.tag-two { top: 48vh; right: 4vw; transform: rotate(8deg); color: rgba(160,67,46,0.54); }
.tag-three { bottom: 10vh; left: 7vw; transform: rotate(5deg); }

.bookmark { position: absolute; top: 0; left: 9vw; width: 4px; height: 60px; background: var(--red); z-index: 3; }
.chapter-watermark { position: absolute; right: 5vw; top: 6vh; font-family: "Passion One", sans-serif; font-size: 15vw; font-weight: 900; color: rgba(44,24,16,0.06); line-height: 1; }

.section-column { width: min(65vw, 900px); position: relative; z-index: 2; }
.section-column.wide { width: min(78vw, 1100px); }
.dialogue-stack { display: grid; gap: 24px; margin-top: 44px; }

.marble-card {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--rose);
  box-shadow: 0 4px 20px rgba(26, 15, 10, 0.07);
  clip-path: polygon(0.5% 1%, 98.5% 0.4%, 99.7% 96%, 74% 99.3%, 43% 98.7%, 1% 99.4%);
}

.dialogue-card {
  overflow: hidden;
  transition: transform 0.34s ease-out, box-shadow 0.34s ease-out;
  margin: 0 80px;
}
.dialogue-card:hover,
.dialogue-card.revealed { transform: translateX(12px); box-shadow: 0 8px 32px rgba(26, 15, 10, 0.12); }
.dialogue-card h3 { font-size: clamp(2rem, 4vw, 4.4rem); margin-bottom: 12px; }
.dialogue-card p:last-child { margin: 0; }
.annotation-strip { position: absolute; inset: 0 auto 0 0; width: 160px; display: grid; place-items: center; padding: 18px; background: rgba(160, 67, 46, 0.10); color: var(--red); transform: translateX(-100%); transition: transform 0.34s ease-out; font-size: 1.05rem; }
.dialogue-card:hover .annotation-strip,
.dialogue-card.revealed .annotation-strip { transform: translateX(0); }

.cork-chapter {
  background:
    radial-gradient(circle at 14% 20%, rgba(160,67,46,0.10), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(139,105,20,0.12), transparent 34%),
    linear-gradient(135deg, #E8D5C0, #C9A89A 130%);
}
.fragment-board { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 28px; margin-top: 42px; }
.script-fragment { min-height: 230px; display: flex; flex-direction: column; justify-content: center; }
.script-fragment h3 { font-size: clamp(1.9rem, 3.2vw, 3.5rem); }
.script-fragment blockquote { margin: 14px 0 0; color: var(--walnut); font-style: italic; }
.fragment-note { margin: 0 0 12px; transform: rotate(-1.5deg); font-size: 1.1rem; }
.r-one { transform: rotate(-2deg); }
.r-two { transform: rotate(1.5deg); margin-top: 28px; }
.r-three { transform: rotate(2.5deg); margin-top: -14px; }
.r-four { transform: rotate(-1deg); }
.r-five { transform: rotate(1deg); }
.r-six { transform: rotate(-2.4deg); margin-top: 18px; }

.final-chapter { background-image: linear-gradient(180deg, #F5EDE0 0%, #F5EDE0 72%, #F5EDE0 100%); }
.choice-block { width: min(65vw, 820px); position: relative; z-index: 2; text-align: left; }
.final-text { margin-top: 36px; font-size: clamp(1.08rem, 1.6vw, 1.35rem); }
.margin-rule { border-left: 1px solid var(--rose); padding-left: 28px; }
.paths { display: flex; gap: clamp(28px, 7vw, 96px); margin-top: 54px; flex-wrap: wrap; }
.paths a { color: var(--espresso); font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.78rem; text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 8px; transition: color 0.25s ease, transform 0.25s ease; }
.paths a:hover { color: var(--red); transform: translateY(-3px); }

.footnote { position: relative; vertical-align: super; font-size: 0.7em; color: var(--gold); cursor: inherit; margin-left: 2px; }
.footnote-pop { position: absolute; left: 50%; top: 120%; width: 220px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; background: var(--cream); border: 1px solid var(--rose); box-shadow: 0 2px 12px rgba(26, 15, 10, 0.08); padding: 12px 14px; font-size: 1rem; z-index: 10; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
.footnote:hover .footnote-pop { transform: translate(-50%, 0); opacity: 1; }

.reveal-section { opacity: 0; transform: translateY(80px); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out, clip-path 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-section.slide-left { transform: translateX(-60px); }
.reveal-section.in-view { opacity: 1; transform: translate(0, 0); }
.reveal-child { opacity: 0; transform: translateY(42px); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out; }
.in-view .reveal-child { opacity: 1; transform: translateY(0); }
.in-view .reveal-child:nth-child(1) { transition-delay: 0ms; }
.in-view .reveal-child:nth-child(2) { transition-delay: 120ms; }
.in-view .reveal-child:nth-child(3) { transition-delay: 240ms; }
.in-view .reveal-child:nth-child(4) { transition-delay: 360ms; }

@media (max-width: 768px) {
  .chapter { padding: 92px 22px; }
  .marble-surface, .marble-card { background-image: linear-gradient(135deg, #F5EDE0 0%, #E8D5C0 100%); }
  .hero-slab, .section-column, .section-column.wide, .choice-block { width: 100%; }
  .title, .chapter-title { font-size: clamp(2.2rem, 13vw, 4rem); }
  .dialogue-card { margin: 0; }
  .fragment-board { grid-template-columns: 1fr; }
  .annotation-strip { width: 130px; }
  .fixed-graffiti { display: none; }
  .chapter-watermark { font-size: 32vw; }
}