:root {
  --ink: #241d18;
  --paper: #f2ead9;
  --paper-dark: #e6dac4;
  --blood: #6f1719;
  --blood-deep: #35090b;
  --blood-light: #a43831;
  --cream: #fff3df;
  --river: #183b3f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.opening {
  position: relative;
  min-height: 560px;
  height: 100svh;
  overflow: hidden;
  background: #190506;
}
.opening-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.12) brightness(.80);
  transform: scale(1.015);
}
.blood-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(35,0,0,.20) 0%, rgba(65,0,0,.12) 38%, rgba(35,0,0,.58) 100%),
    rgba(118, 8, 14, .30);
  mix-blend-mode: multiply;
}
.blood-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 54% 34%, transparent 0 25%, rgba(30,0,0,.18) 70%, rgba(18,0,0,.42) 100%);
}
.hero-title {
  position: absolute;
  z-index: 3;
  left: 7vw;
  right: 7vw;
  bottom: 14vh;
  color: var(--cream);
  display: grid;
  grid-template-columns: minmax(0, 1050px) auto;
  align-items: end;
  gap: 4rem;
}
.hero-title h1 {
  margin: 0;
  max-width: 1150px;
  font-size: clamp(3.4rem, 8vw, 8.2rem);
  line-height: .88;
  font-weight: 400;
  letter-spacing: -.06em;
  text-shadow: 0 4px 30px rgba(20,0,0,.44);
}
.hero-title h1 em { font-weight: 400; font-style: italic; }
.credits {
  display: grid;
  gap: .2rem;
  margin-bottom: .7rem;
  white-space: nowrap;
  font: 500 12px/1.55 Arial, sans-serif;
  letter-spacing: .035em;
}
.opening-mark {
  position: absolute;
  z-index: 3;
  right: 4vw;
  bottom: 4vh;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,243,223,.75);
  border-radius: 50%;
  color: var(--cream);
  font-size: 31px;
  text-decoration: none;
  animation: scrollCue 2.2s ease-in-out infinite;
  transition: background .3s ease, transform .3s ease;
}
.opening-mark span { transform: translateY(-5px); }
.opening-mark svg {
  position: absolute;
  bottom: 9px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  animation: arrowPulse 1.4s ease-in-out infinite;
}
.opening-mark:hover { background: rgba(255,243,223,.13); transform: scale(1.07); }

article { overflow: hidden; }
.body-copy { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.78; }
.body-copy p { margin: 0 0 1.65em; }
.text-flow { width: min(760px, calc(100% - 2.8rem)); margin: 0 auto; padding: 7rem 0; }
.text-flow::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 5rem;
  border: 1px solid var(--blood-light);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px rgba(111,23,25,.22);
}
.intro-section { background: var(--paper); }
.lead-text { padding-top: 10rem; padding-bottom: 9rem; }
.lead-text p:first-of-type::first-letter {
  float: left;
  font-size: 5.7rem;
  line-height: .76;
  padding: .16em .12em 0 0;
  color: var(--blood);
}

.image-chapter, .history-section, .cities-section, .dam-section { background: var(--paper); }
.source-landscape {
  position: relative;
  width: 100%;
  height: clamp(520px, 70vw, 900px);
  margin: 0;
  overflow: hidden;
  background: var(--paper-dark);
}
.source-landscape.compact { height: clamp(480px, 58vw, 760px); }
.source-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 1.2s cubic-bezier(.2,.75,.25,1), filter .9s ease;
}
.source-landscape:hover img { transform: scale(1.045); }

.blood-statement {
  min-height: 88svh;
  display: grid;
  place-items: center;
  padding: 8rem 7vw;
  background: var(--blood-deep);
  color: var(--cream);
  position: relative;
}
.blood-statement::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .20;
  background: radial-gradient(circle at 50% 50%, var(--blood-light), transparent 68%);
}
.statement-copy {
  position: relative;
  max-width: 1050px;
  text-align: center;
  font-size: clamp(2.8rem, 6vw, 6.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.statement-copy p { margin: 0; }

.red-frame {
  width: 100%;
  margin: 0 0 8rem;
  padding: clamp(1.6rem, 4vw, 4.2rem);
  background: var(--blood);
  box-shadow: 0 28px 70px rgba(66,10,12,.22);
}
.red-frame-image {
  width: min(1500px, 100%);
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d8c8ab;
}
.red-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.red-frame:hover img { transform: scale(1.035); }

.scroll-story {
  position: relative;
  min-height: 220vh;
  background: #1c090a;
  color: var(--cream);
  overflow: clip;
}
.scroll-story-image { position: absolute; inset: 0; height: 100%; }
.scroll-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.78) contrast(1.06) brightness(.76);
}
.story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(64,4,8,.20), rgba(28,4,6,.56)), rgba(92,9,13,.18);
  mix-blend-mode: multiply;
}
.scroll-story-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 26vh 1.4rem 34vh;
  font-size: clamp(1.5rem, 2.35vw, 2.25rem);
  line-height: 1.58;
}
.scroll-story-copy p {
  max-width: 720px;
  margin: 0 auto 52vh;
  padding: 2rem 2.2rem;
  background: rgba(46,8,10,.78);
  box-shadow: 0 18px 55px rgba(12,0,0,.28);
  opacity: .12;
  transform: translateY(3rem);
  transition: opacity .9s ease, transform .9s ease;
  backdrop-filter: blur(2px);
}
.scroll-story-copy p.is-visible { opacity: 1; transform: translateY(0); }

.closing-copy { padding-top: 8rem; padding-bottom: 11rem; }
.final-line {
  margin-top: 4rem !important;
  font-size: clamp(2.4rem, 4.5vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  color: var(--blood);
  text-align: center;
}

.about {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 8vw;
  padding: 11rem max(7vw, 2rem);
  background: #28231e;
  color: #eadfca;
}
.about-title {
  position: sticky;
  top: 3rem;
  align-self: start;
  color: #c86a5d;
  text-transform: uppercase;
  font: 600 12px/1.2 Arial, sans-serif;
  letter-spacing: .28em;
}
.about-copy { max-width: 780px; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.75; }
.about-copy p { margin: 0 0 1.6em; }
.signature { margin-top: 3rem !important; color: #c86a5d; font-style: italic; }

.reveal-media { opacity: .76; transform: translateY(1.5rem); transition: opacity 1s ease, transform 1s ease; }
.reveal-media.is-visible { opacity: 1; transform: translateY(0); }

@keyframes scrollCue { 0%,100% { translate: 0 0; } 50% { translate: 0 9px; } }
@keyframes arrowPulse { 0%,100% { opacity: .45; translate: 0 -2px; } 50% { opacity: 1; translate: 0 3px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .opening-mark, .opening-mark svg { animation: none; }
  .scroll-story-copy p, .reveal-media { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .hero-title { grid-template-columns: 1fr; gap: 1.4rem; bottom: 15vh; }
  .credits { margin: 0; }
  .opening-mark { right: 1.5rem; bottom: 2rem; }
}

@media (max-width: 760px) {
  .hero-title { left: 1.35rem; right: 1.35rem; bottom: 14vh; }
  .hero-title h1 { font-size: clamp(3.05rem, 14.2vw, 5.3rem); line-height: .92; }
  .credits { font-size: 11px; }
  .opening-mark { width: 62px; height: 62px; right: 1.25rem; bottom: 1.25rem; }
  .opening-mark svg { width: 19px; height: 19px; bottom: 6px; }
  .opening-mark span { font-size: 25px; }
  .text-flow { width: calc(100% - 2.6rem); padding: 5rem 0; }
  .lead-text { padding-top: 7rem; padding-bottom: 6rem; }
  .source-landscape { height: 66svh; min-height: 470px; }
  .source-landscape.compact { height: 58svh; }
  .red-frame { margin-bottom: 5rem; padding: 1.2rem; }
  .blood-statement { min-height: 74svh; padding: 5rem 1.4rem; }
  .statement-copy { font-size: clamp(2.65rem, 12vw, 4rem); }
  .scroll-story { min-height: 195vh; }
  .scroll-story-copy { padding-top: 22vh; padding-bottom: 26vh; }
  .scroll-story-copy p { padding: 1.4rem; margin-bottom: 42vh; }
  .closing-copy { padding-bottom: 8rem; }
  .about { grid-template-columns: 1fr; padding: 7rem 1.4rem; gap: 3rem; }
  .about-title { position: static; }
}