:root {
  --deep-water: #1b2d3e;
  --fog-bank: #f3f6f9;
  --driftwood: #b8a99a;
  --tideline: #5b8a8f;
  --storm-shelf: #3d4f5f;
  --salt-spray: #e8eef3;
  --copper-patina: #7a9478;
  --warm-sand: #d4c4a8;
  --late-sand: #f6f4f0;
  --contour: #d8dfe6;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Interaction Pattern: IntersectionObserver fallback with generous thresholds (trigger at 30% visibility). */

* {
  box-sizing: border-box;
}

html {
  background: #f3f6f9;
  color: #1b2d3e;
  font-family: "Libre Baskerville", Georgia, serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #f3f6f9 0%, #e8eef3 40%, #f3f6f9 100%);
  color: #1b2d3e;
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 10% 18%, rgba(184, 169, 154, 0.16), transparent 34%),
    radial-gradient(circle at 88% 62%, rgba(91, 138, 143, 0.12), transparent 35%),
    linear-gradient(180deg, #f3f6f9 0%, #e8eef3 40%, #f3f6f9 100%);
  background-size: 130% 130%, 120% 120%, 100% 220%;
  animation: cloudLight 30s ease-in-out infinite alternate;
}

.atmosphere::before,
.atmosphere::after {
  content: "";
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 0;
  height: 34vh;
  opacity: 0.03;
  background: #1b2d3e;
  clip-path: polygon(0 75%, 8% 60%, 16% 70%, 26% 42%, 35% 64%, 45% 36%, 56% 72%, 68% 46%, 79% 63%, 90% 38%, 100% 70%, 100% 100%, 0 100%);
}

.atmosphere::after {
  bottom: 8vh;
  opacity: 0.025;
  transform: scaleX(-1);
}

main {
  width: 100%;
}

.masthead-clearing {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.horizon-line {
  position: absolute;
  top: 61.8%;
  left: 0;
  width: 100vw;
  height: 1px;
  background: rgba(184, 169, 154, 0.32);
  transform-origin: center;
  animation: horizonDraw 1600ms var(--ease) both 500ms;
}

.masthead-inner {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100vw - 48px));
  margin: 0 auto;
  text-align: center;
}

.kicker,
.metadata,
.dateline,
.read-trigger,
.timeline time {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9aad;
}

.kicker {
  margin: 0 0 32px;
  opacity: 0;
  animation: quietAppear 1000ms var(--ease) both 650ms;
}

h1 {
  margin: 0;
  font-family: "Nunito", Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #1b2d3e;
  animation: mastheadCondense 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opening-rule,
.section-rule {
  width: 40vw;
  max-width: 420px;
  height: 1px;
  margin: 36px auto 0;
  background: #b8a99a;
  opacity: 0.72;
  transform-origin: center;
}

.opening-rule {
  animation: ruleDraw 900ms var(--ease) both 900ms;
}

.section-rule {
  width: 100%;
  max-width: 360px;
  margin: 0 0 28px;
  transform: scaleX(0);
}

.reveal-block.in-view .section-rule {
  animation: ruleDraw 800ms var(--ease) both;
}

.opening-collage {
  position: absolute;
  width: min(56vw, 640px);
  height: min(38vw, 420px);
  top: calc(50% + 80px);
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.34;
}

.opening-fragment,
.fragment {
  position: absolute;
  display: block;
  background-size: cover;
  background-position: center;
  filter: grayscale(30%) contrast(0.9);
  opacity: 0.85;
  mix-blend-mode: multiply;
  box-shadow: 0 18px 60px rgba(27, 45, 62, 0.08);
}

.opening-fragment-a {
  inset: 8% 35% 18% 4%;
  background-image: linear-gradient(rgba(91, 138, 143, 0.2), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80");
  clip-path: polygon(2% 8%, 96% 0, 88% 76%, 12% 100%, 0 48%);
}

.opening-fragment-b {
  inset: 0 8% 32% 44%;
  background-image: linear-gradient(rgba(212, 196, 168, 0.18), rgba(232, 238, 243, 0.12)), url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=900&q=80");
  clip-path: polygon(12% 0, 100% 9%, 84% 96%, 0 84%, 6% 34%);
}

.opening-fragment-c {
  inset: 46% 20% 4% 26%;
  background-image: linear-gradient(rgba(27, 45, 62, 0.1), rgba(91, 138, 143, 0.16)), url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80");
  clip-path: polygon(0 16%, 88% 0, 100% 68%, 56% 100%, 8% 86%);
}

.opening-ring,
.geo-circle {
  position: absolute;
  border: 1px solid rgba(91, 138, 143, 0.2);
  border-radius: 50%;
}

.opening-ring {
  width: 42%;
  aspect-ratio: 1;
  right: 11%;
  bottom: 9%;
}

.intro-note,
.deep-read-zone,
.archive-horizon {
  width: min(680px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 26vh 0 22vh;
}

.intro-copy {
  max-width: 560px;
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.78;
  color: #3d4f5f;
}

.story-band {
  position: relative;
  min-height: 100vh;
  padding: 20vh 0;
  content-visibility: auto;
}

.story-shell {
  position: relative;
  width: min(100vw, 1280px);
  min-height: 520px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.story-copy {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 64px 0;
  transition: max-width 900ms var(--ease), background-color 900ms var(--ease), padding 900ms var(--ease), box-shadow 900ms var(--ease);
}

.story-copy h2,
.deep-read-zone h2,
.archive-horizon h2 {
  margin: 0 0 24px;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: #1b2d3e;
}

.story-copy h2,
.story-copy .precis,
.story-copy .metadata,
.story-copy .read-trigger,
.deep-read-zone h2,
.deep-read-zone p,
.archive-horizon h2,
.archive-horizon .timeline,
.intro-note p {
  opacity: 0;
  transform: translateY(12px);
}

.reveal-block.in-view .metadata,
.reveal-block.in-view .dateline {
  animation: textRise 600ms var(--ease) both 160ms;
}

.reveal-block.in-view h2,
.reveal-block.in-view .intro-copy {
  animation: textRise 600ms var(--ease) both 200ms;
}

.reveal-block.in-view .precis,
.reveal-block.in-view .read-trigger,
.reveal-block.in-view .timeline {
  animation: textRise 650ms var(--ease) both 350ms;
}

.precis,
.deep-read-zone p {
  margin: 0 0 1.5em;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.78;
  color: #3d4f5f;
}

.read-trigger {
  display: inline-block;
  margin-top: 18px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(91, 138, 143, 0.55);
  background: transparent;
  color: #5b8a8f;
  cursor: pointer;
  transition: color 400ms ease, border-color 400ms ease;
}

.read-trigger:hover {
  color: #1b2d3e;
  border-color: #1b2d3e;
}

.collage {
  position: absolute;
  width: min(42vw, 520px);
  height: min(50vw, 540px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 500ms var(--ease) 350ms, transform 500ms var(--ease) 350ms;
}

.collage-left {
  left: max(-40px, 2vw);
  transform: translate(-80px, -50%);
}

.collage-right {
  right: max(-40px, 2vw);
  transform: translate(80px, -50%);
}

.reveal-block.in-view .collage-left,
.reveal-block.in-view .collage-right {
  opacity: 1;
  transform: translate(0, -50%);
}

.reverse .story-copy {
  text-align: left;
}

.fragment-a {
  width: 68%;
  height: 46%;
  left: 4%;
  top: 10%;
  clip-path: polygon(3% 12%, 92% 0, 100% 72%, 48% 100%, 0 83%);
}

.fragment-b {
  width: 62%;
  height: 52%;
  right: 1%;
  top: 28%;
  clip-path: polygon(18% 0, 100% 14%, 82% 96%, 0 82%, 6% 22%);
}

.fragment-c {
  width: 48%;
  height: 32%;
  left: 21%;
  bottom: 4%;
  clip-path: polygon(0 18%, 84% 0, 100% 78%, 40% 100%, 10% 80%);
}

[data-story="0"] .fragment-a { background-image: linear-gradient(rgba(91, 138, 143, 0.22), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1520763185298-1b434c919102?auto=format&fit=crop&w=900&q=80"); }
[data-story="0"] .fragment-b { background-image: linear-gradient(rgba(212, 196, 168, 0.2), rgba(232, 238, 243, 0.08)), url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?auto=format&fit=crop&w=900&q=80"); }
[data-story="0"] .fragment-c { background-image: linear-gradient(rgba(27, 45, 62, 0.13), rgba(91, 138, 143, 0.1)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80"); }
[data-story="1"] .fragment-a { background-image: linear-gradient(rgba(184, 169, 154, 0.2), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=900&q=80"); }
[data-story="1"] .fragment-b { background-image: linear-gradient(rgba(91, 138, 143, 0.2), rgba(232, 238, 243, 0.08)), url("https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=900&q=80"); }
[data-story="1"] .fragment-c { background-image: linear-gradient(rgba(212, 196, 168, 0.22), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=900&q=80"); }
[data-story="2"] .fragment-a { background-image: linear-gradient(rgba(91, 138, 143, 0.18), rgba(232, 238, 243, 0.08)), url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80"); }
[data-story="2"] .fragment-b { background-image: linear-gradient(rgba(27, 45, 62, 0.12), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=900&q=80"); }
[data-story="2"] .fragment-c { background-image: linear-gradient(rgba(122, 148, 120, 0.16), rgba(232, 238, 243, 0.1)), url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=900&q=80"); }
[data-story="3"] .fragment-a { background-image: linear-gradient(rgba(91, 138, 143, 0.2), rgba(243, 246, 249, 0.08)), url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80"); }
[data-story="3"] .fragment-b { background-image: linear-gradient(rgba(184, 169, 154, 0.22), rgba(232, 238, 243, 0.08)), url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=900&q=80"); }
[data-story="3"] .fragment-c { background-image: linear-gradient(rgba(27, 45, 62, 0.1), rgba(122, 148, 120, 0.14)), url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=900&q=80"); }

.geo-circle {
  width: 38%;
  aspect-ratio: 1;
  right: 9%;
  bottom: 12%;
}

.geo-line {
  position: absolute;
  top: 52%;
  left: -15%;
  width: 130%;
  height: 1px;
  background: rgba(91, 138, 143, 0.2);
}

.ridgeline {
  width: 60vw;
  max-width: 760px;
  height: 92px;
  margin: 0 auto 8vh;
  opacity: 0;
  transform: translateY(16px);
}

.reveal-block.in-view .ridgeline {
  animation: textRise 800ms var(--ease) both;
}

.deep-read {
  position: relative;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 900ms var(--ease), opacity 700ms ease 170ms, margin-top 700ms var(--ease);
}

.deep-read p {
  margin: 0 0 1.5em;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.78;
  color: #1b2d3e;
}

.story-band.is-open .story-copy {
  width: min(560px, calc(100vw - 48px));
  padding: 64px 0;
}

.story-band.is-open .collage {
  opacity: 0.12;
  filter: blur(2px);
}

.story-band.is-open .deep-read {
  max-height: 760px;
  opacity: 1;
  margin-top: 40px;
}

.story-band.is-open .read-trigger {
  color: #b8a99a;
  border-color: rgba(184, 169, 154, 0.7);
}

.deep-read-zone {
  position: relative;
  width: min(560px, calc(100vw - 48px));
}

.contours {
  position: absolute;
  inset: 8vh -24vw;
  z-index: -1;
  opacity: 1;
  background:
    repeating-radial-gradient(ellipse at 18% 30%, transparent 0 28px, rgba(216, 223, 230, 0.06) 29px 30px),
    repeating-radial-gradient(ellipse at 78% 64%, transparent 0 38px, rgba(216, 223, 230, 0.06) 39px 40px);
}

.reveal-block.in-view .deep-read-zone p,
.deep-read-zone.in-view p {
  animation: textRise 650ms var(--ease) both;
}

.deep-read-zone.in-view p:nth-of-type(2) { animation-delay: 280ms; }
.deep-read-zone.in-view p:nth-of-type(3) { animation-delay: 360ms; }

.archive-horizon {
  padding-bottom: 18vh;
}

.timeline {
  position: relative;
  display: flex;
  gap: 72px;
  overflow-x: auto;
  padding: 56px 0 32px;
  scrollbar-color: #b8a99a transparent;
}

.timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  min-width: 1040px;
  height: 1px;
  background: #b8a99a;
  opacity: 0.62;
}

.timeline article {
  position: relative;
  flex: 0 0 150px;
  padding-top: 44px;
  color: #3d4f5f;
  font-size: 0.95rem;
  line-height: 1.55;
}

.timeline article::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid #5b8a8f;
  background: #f3f6f9;
  border-radius: 50%;
}

.timeline time {
  display: block;
  margin-bottom: 10px;
  color: #5b8a8f;
}

@keyframes cloudLight {
  from { background-position: 0% 0%, 100% 60%, 0% 0%; }
  to { background-position: 70% 35%, 20% 10%, 0% 100%; }
}

@keyframes mastheadCondense {
  from { letter-spacing: 0.8em; opacity: 0; filter: blur(8px); }
  to { letter-spacing: 0.35em; opacity: 1; filter: blur(0); }
}

@keyframes horizonDraw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes ruleDraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes quietAppear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes textRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .collage {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: min(78vw, 440px);
    height: 360px;
    margin: 0 auto -24px;
    transform: translateY(30px);
  }

  .reveal-block.in-view .collage-left,
  .reveal-block.in-view .collage-right {
    transform: translateY(0);
  }

  .story-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .story-copy {
    padding-top: 56px;
  }
}

@media (max-width: 560px) {
  h1 { letter-spacing: 0.25em; }
  .kicker, .metadata, .dateline, .read-trigger, .timeline time { font-size: 0.72rem; }
  .intro-note, .deep-read-zone, .archive-horizon { width: min(680px, calc(100vw - 32px)); }
  .story-copy { width: calc(100vw - 32px); }
  .ridgeline { width: 78vw; }
}