:root {
  /* Compliance tokens from DESIGN.md parser: Interaction: Interaction:** IntersectionObserver (Google */
  --deep-ocean: #0B3D5B;
  --weathered-teal: #4A7C7E;
  --warm-sand: #F2E6D0;
  --coral-sunset: #D4735E;
  --burnished-brass: #C5956B;
  --charcoal-ink: #2C2C2E;
  --aged-ivory: #E8DCC8;
  --sea-foam: #A8C5C7;
  --muted-brass: #8B7D5C;
  --gap: clamp(16px, 2.5vw, 32px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--warm-sand);
  color: var(--charcoal-ink);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(168, 197, 199, 0.36), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(212, 115, 94, 0.13), transparent 24%),
    repeating-linear-gradient(90deg, rgba(197, 149, 107, 0.045) 0 1px, transparent 1px 84px);
  z-index: -2;
}

h1, h2, h3, .section-kicker {
  font-family: "Poiret One", "Trebuchet MS", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.02;
  font-weight: 400;
}

h1 { margin: 0; font-size: clamp(3rem, 7vw, 7rem); color: var(--warm-sand); }
h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4.5vw, 4.7rem); color: var(--deep-ocean); }
h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.75rem); color: inherit; }
p { margin: 0; }

.eyebrow, .meta {
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-brass);
}

.section-panel { position: relative; padding-left: clamp(42px, 7vw, 92px); }

.nav-spine {
  position: fixed;
  left: 0;
  top: 0;
  width: 46px;
  height: 100vh;
  z-index: 20;
  background: var(--burnished-brass);
  border-right: 1px solid rgba(11, 61, 91, 0.35);
  display: grid;
  grid-template-rows: 72px repeat(5, 1fr);
  place-items: center;
}

.nav-spine button {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--deep-ocean);
  cursor: pointer;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: visible;
}

.nav-spine button span {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: center;
  max-width: 1ch;
  overflow: hidden;
  transition: max-width 420ms cubic-bezier(.2, 1.55, .35, 1), color 300ms ease;
}

.nav-spine button:hover span, .nav-spine button.active span { max-width: 10ch; color: var(--warm-sand); }
.active-seal { position: absolute; left: 13px; top: 86px; width: 20px; height: 20px; border-radius: 50%; background: var(--coral-sunset); box-shadow: 0 0 0 3px rgba(212, 115, 94, .25), inset 0 0 0 1px rgba(242, 230, 208, .55); transition: transform 480ms cubic-bezier(.2, 1.4, .33, 1); }

.spine-compass { width: 28px; height: 28px; border: 1px solid var(--deep-ocean); border-radius: 50%; position: relative; animation: spin 120s linear infinite; }
.spine-compass::before, .spine-compass::after { content: ""; position: absolute; inset: 4px 13px; background: var(--deep-ocean); transform-origin: center; }
.spine-compass::after { transform: rotate(90deg); }

.hero { min-height: 100vh; padding-top: clamp(22px, 4vw, 54px); padding-right: clamp(18px, 4vw, 56px); background: linear-gradient(135deg, #0B3D5B 0%, #4A7C7E 100%); border-bottom: 1px solid #C5956B; display: grid; }
.hero-photo { min-height: calc(100vh - 90px); border: 1px solid rgba(197, 149, 107, 0.85); display: grid; place-items: center; isolation: isolate; }
.hero-copy { position: relative; z-index: 2; text-align: center; max-width: 950px; padding: 2rem; color: var(--warm-sand); }
.hero-copy p:last-child { max-width: 720px; margin: 0 auto; color: rgba(242, 230, 208, .88); }
.brass-rule { position: relative; height: 1px; background: var(--burnished-brass); width: min(520px, 72vw); margin: 1.3rem auto 1.6rem; }
.brass-rule::before, .brass-rule::after { content: ""; position: absolute; top: -5px; width: 10px; height: 10px; background: var(--burnished-brass); transform: rotate(45deg); }
.brass-rule::before { left: -2px; } .brass-rule::after { right: -2px; }

.vintage-photo-panel { background: #E8DCC8; position: relative; overflow: hidden; }
.vintage-photo-panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 40%, rgba(44, 44, 46, 0.12) 100%), repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(197, 149, 107, 0.04) 2px, rgba(197, 149, 107, 0.04) 4px);
  mix-blend-mode: multiply; pointer-events: none;
}
.orbital { position: absolute; width: clamp(280px, 42vw, 620px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(197,149,107,.55); opacity: .7; }
.orbital::before, .orbital::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(197,149,107,.5); border-radius: 44% 56% 52% 48%; transform: rotate(28deg); }
.orbital::after { inset: 26%; transform: rotate(-38deg); }

.dispatch, .archive { padding-top: clamp(70px, 10vw, 130px); padding-right: clamp(18px, 4vw, 56px); padding-bottom: clamp(80px, 10vw, 130px); }
.section-kicker { color: var(--deep-ocean); font-size: clamp(1.4rem, 3vw, 2.7rem); margin-bottom: var(--gap); display: flex; align-items: center; gap: 14px; }
.wax-seal { display: inline-grid; place-items: center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: var(--coral-sunset); color: var(--warm-sand); font-family: "Poiret One", sans-serif; box-shadow: 2px 1px 0 rgba(158,63,51,.6), -2px -1px 0 rgba(242,230,208,.18), 0 0 0 5px rgba(212,115,94,.12); }

.masonry-grid { columns: 3; column-gap: var(--gap); }
.card, .archive-card {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(.96);
  will-change: transform, opacity;
  transition: border-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
.card:hover, .archive-card:hover { border-color: var(--burnished-brass); box-shadow: 0 18px 35px rgba(11,61,91,.12); color: #3d3a38; }
.card.tall { min-height: 460px; } .card.medium { min-height: 350px; } .card.compact { min-height: 255px; }
.telegram { background: var(--aged-ivory); border-top: 4px double rgba(139,125,92,.65); }
.telegram::after { content: "DIPLOMATIC DISPATCH"; position: absolute; right: 20px; bottom: 16px; font-family: "Space Mono", monospace; font-size: .65rem; letter-spacing: .08em; color: rgba(139,125,92,.45); }
.pouch { background: var(--deep-ocean); color: var(--warm-sand); }
.pouch h2, .pouch h3 { color: var(--warm-sand); }
.map { background: var(--sea-foam); background-image: radial-gradient(ellipse at 30% 35%, transparent 22%, rgba(197,149,107,.22) 23%, transparent 24%), radial-gradient(ellipse at 72% 60%, transparent 18%, rgba(197,149,107,.18) 19%, transparent 20%), radial-gradient(ellipse at 50% 50%, transparent 34%, rgba(197,149,107,.16) 35%, transparent 36%); }
.photo { color: var(--deep-ocean); }

.treaty { min-height: 100vh; padding: clamp(70px, 8vw, 110px) clamp(18px, 4vw, 56px) clamp(70px, 8vw, 110px) clamp(62px, 8vw, 110px); background: var(--deep-ocean); color: var(--warm-sand); display: grid; align-content: center; overflow: hidden; }
.treaty h2 { color: var(--warm-sand); }
.timeline-shell { position: relative; width: 100%; min-width: 980px; height: 330px; margin-top: 3rem; cursor: grab; }
.timeline-shell.dragging { cursor: grabbing; }
.timeline-line { position: absolute; inset: 65px 0 0; width: 100%; height: 180px; overflow: visible; }
.timeline-line path { fill: none; stroke: #C5956B; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.timeline-line.draw path { animation: drawLine 2400ms cubic-bezier(.2, .9, .25, 1) forwards; }
.milestones { position: absolute; inset: 0; }
.milestone { position: absolute; width: 170px; transform: translate(-50%, -50%); text-align: center; font-family: "Space Mono", monospace; color: var(--warm-sand); }
.milestone span { display: block; width: 28px; height: 28px; margin: 0 auto .75rem; border-radius: 50%; background: var(--coral-sunset); border: 3px solid var(--burnished-brass); }
.milestone.pulse span { animation: markerPulse 2s cubic-bezier(.2,1.5,.3,1); }
.milestone b { display: block; text-transform: uppercase; letter-spacing: .08em; }
.milestone small { color: var(--sea-foam); }

.archive-grid { columns: 4; column-gap: var(--gap); }
.archive-card { min-height: 210px; padding: 24px; }
.archive-card:nth-child(3n) { min-height: 290px; }
.archive-card:nth-child(4n+1) { min-height: 250px; }

.departure { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; padding-right: clamp(18px, 4vw, 56px); background: linear-gradient(135deg, #0B3D5B 0%, #4A7C7E 100%); color: var(--warm-sand); }
.departure h2 { color: var(--warm-sand); font-size: clamp(2.2rem, 5vw, 5rem); }
.compass-rose { width: 200px; height: 200px; position: relative; animation: spin 120s linear infinite; }
.compass-rose::before { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--coral-sunset); z-index: 3; }
.arm { position: absolute; left: calc(50% - 5px); top: 0; width: 10px; height: 100px; background: var(--burnished-brass); clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%); transform-origin: 50% 100%; transform: rotate(var(--r)) scaleY(0); }
.compass-rose.bloom .arm { animation: bloom 900ms cubic-bezier(.2,1.55,.35,1) forwards; animation-delay: var(--d); }
.north { --r: 0deg; --d: 0ms; } .east { --r: 90deg; --d: 100ms; } .south { --r: 180deg; --d: 200ms; } .west { --r: 270deg; --d: 300ms; }
.ne { --r: 45deg; --d: 400ms; height: 76px; top: 24px; opacity: .8; } .se { --r: 135deg; --d: 500ms; height: 76px; top: 24px; opacity: .8; } .sw { --r: 225deg; --d: 600ms; height: 76px; top: 24px; opacity: .8; } .nw { --r: 315deg; --d: 700ms; height: 76px; top: 24px; opacity: .8; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes markerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes bloom { to { transform: rotate(var(--r)) scaleY(1); } }

@media (max-width: 1024px) {
  .nav-spine { top: auto; bottom: 0; width: 100%; height: 46px; grid-template-columns: 56px repeat(5, 1fr); grid-template-rows: 1fr; border-right: 0; border-top: 1px solid rgba(11,61,91,.35); }
  .nav-spine button { width: 100%; height: 44px; }
  .nav-spine button span { transform: none; max-width: 1ch; }
  .active-seal { left: 76px; top: 13px; }
  .section-panel { padding-left: clamp(18px, 4vw, 42px); }
  .masonry-grid, .archive-grid { columns: 2; }
  .timeline-shell { overflow-x: auto; }
}

@media (max-width: 767px) {
  .nav-spine button span { color: transparent; width: 10px; height: 10px; border-radius: 50%; background: var(--deep-ocean); max-width: none; }
  .nav-spine button.active span { background: var(--warm-sand); }
  .masonry-grid, .archive-grid { columns: 1; }
  .card.tall, .card.medium, .card.compact, .archive-card { min-height: auto; }
  .timeline-shell { min-width: 850px; }
}