:root {
  --vellum: #F5E6C8;
  --cream: #FFF8EE;
  --ochre: #8B6914;
  --ink: #3B2F1A;
  --sienna: #A67C52;
  --charcoal: #4A3F2F;
  --amber: #D4A84B;
  --mist: #EDE0C6;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Compliance vocabulary from DESIGN.md: These stamps have double-border and use the `#A67C52` color. Used in tutorial sequences. The circles have a slight imperfection — the SVG path doesn't quite close. (Google Fonts Interactive Specimen Cards:** Cards:* Cards: Cardssss:::: IntersectionObserver with `threshold: 0.15` Source Serif 4" (Google Fonts */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vellum);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.72;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    repeating-linear-gradient(0deg, rgba(59,47,26,0.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(139,105,20,0.035) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 18% 22%, rgba(166,124,82,0.18), transparent 20rem),
    radial-gradient(circle at 80% 12%, rgba(212,168,75,0.16), transparent 22rem);
  mix-blend-mode: multiply;
  z-index: 20;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2 {
  font-family: "Jost", "Futura", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(4.6rem, 15vw, 14rem); color: var(--ink); text-shadow: 0 2px 0 rgba(255,248,238,0.68); }
h2 { font-size: clamp(2rem, 4.5vw, 4rem); color: var(--ochre); }

h3 {
  font-family: "Josefin Sans", "Futura", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.18;
  color: var(--ochre);
  margin: 0 0 1rem;
}

p { margin: 0; }
.mono, .specimen-label, .stamp, .step { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.02em; }

.altitude-rail {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 48px;
  height: 100vh;
  padding: 18vh 6px 10vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(139, 105, 20, 0.08);
  border-right: 2px solid rgba(139, 105, 20, 0.35);
  backdrop-filter: blur(8px);
}

.waypoint {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ochre);
  text-decoration: none;
  border: 1px solid rgba(139,105,20,0.25);
  background: rgba(245,230,200,0.72);
  transition: background 300ms ease-out, box-shadow 300ms ease-out, transform 300ms ease-out;
}

.waypoint:nth-child(2) { margin-top: 4vh; }
.waypoint:nth-child(3) { margin-top: 7vh; }
.waypoint:nth-child(4) { margin-top: 10vh; }
.waypoint:nth-child(5) { margin-top: 13vh; }
.waypoint svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; }
.waypoint span {
  position: absolute;
  left: 44px;
  top: 4px;
  width: max-content;
  padding: 5px 9px;
  background: var(--charcoal);
  color: var(--cream);
  font: 400 0.85rem "IBM Plex Mono", monospace;
  transform: translateX(-14px);
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.waypoint:hover span, .waypoint.active span { transform: translateX(0); opacity: 1; }
.waypoint.active { background: var(--cream); box-shadow: 0 0 12px rgba(139, 105, 20, 0.4); transform: translateX(3px); color: var(--amber); }

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--mist);
  isolation: isolate;
}

.hero-panorama { position: absolute; inset: -5vh -5vw; width: 110vw; height: 110vh; z-index: -2; }
.ridge { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 80ms linear; }
.ridge path { vector-effect: non-scaling-stroke; }
.ridge-1 { stroke: var(--sienna); stroke-width: 2; opacity: 0.28; }
.ridge-2 { stroke: var(--sienna); stroke-width: 2.2; opacity: 0.42; }
.ridge-3 { stroke: var(--ochre); stroke-width: 2.4; opacity: 0.58; }
.ridge-4 { stroke: var(--charcoal); stroke-width: 2.6; opacity: 0.76; }
.ridge-5 { stroke: var(--ink); stroke-width: 3; opacity: 1; }
.hero-contours { fill: none; stroke: var(--sienna); stroke-width: 1.8; stroke-dasharray: 9 14; opacity: 0.42; }

.fog {
  position: absolute;
  width: 42vw;
  height: 21vh;
  background: rgba(237,224,198,0.68);
  filter: blur(24px);
  z-index: -1;
  animation: fog-drift 100s linear infinite;
}
.fog-a { left: 4vw; top: 38vh; }
.fog-b { right: -8vw; top: 56vh; animation-duration: 116s; animation-direction: reverse; }

@keyframes fog-drift { from { transform: translateX(-8vw); } to { transform: translateX(16vw); } }

.compass {
  position: absolute;
  right: 8vw;
  top: 12vh;
  width: clamp(140px, 18vw, 250px);
  height: clamp(140px, 18vw, 250px);
  color: var(--amber);
  opacity: 0.58;
  animation: compass-spin 120s linear infinite;
}
.compass svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.compass path:last-child { stroke: var(--ink); opacity: 0.6; }
@keyframes compass-spin { to { transform: rotate(360deg); } }

.hero-copy {
  width: min(86vw, 1120px);
  padding-left: 48px;
  text-align: center;
  transform: translateY(-2vh);
}
.hero-copy p:last-child { max-width: 760px; margin: 1rem auto 0; color: var(--charcoal); font-size: clamp(1.15rem, 2vw, 1.8rem); }
.specimen-label { color: var(--ochre); font-size: 0.85rem; margin-bottom: 0.8rem; }

.scroll-callout {
  position: absolute;
  right: 12vw;
  bottom: 9vh;
  color: var(--ochre);
  font: 400 0.85rem "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.scroll-callout svg { display: block; width: 120px; height: 80px; fill: none; stroke: var(--ochre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.field-guide { padding-left: 48px; background: var(--vellum); }

.chapter-banner {
  min-height: 58vh;
  padding: clamp(3rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(100px, 0.32fr) 1fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: center;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(166,124,82,0.14), transparent 26rem),
    var(--mist);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  clip-path: url(#ridge-mask);
  animation: ridge-reveal both linear;
  animation-timeline: view();
  animation-range: entry 0% cover 45%;
}
@keyframes ridge-reveal { from { transform: translateY(42px); } to { transform: translateY(0); } }
.chapter-number {
  font: 700 clamp(4rem, 14vw, 13rem) "Jost", sans-serif;
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 2px var(--sienna);
  text-shadow: 7px 7px 0 rgba(139,105,20,0.08);
}
.chapter-banner .mono { color: var(--ochre); margin-bottom: 1rem; }

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--ink);
}

.specimen-card {
  position: relative;
  min-height: 310px;
  padding: 24px;
  background: var(--vellum);
  border: 4px solid var(--ochre);
  box-shadow: inset 0 0 0 2px rgba(59,47,26,0.2);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-width 300ms ease-out, background 300ms ease-out;
}
.specimen-card.is-visible { opacity: 1; transform: translateY(0); transition-delay: var(--stagger, 0ms); }
.specimen-card:hover { border-width: 6px; background: var(--cream); }
.span-2 { grid-column: span 2; }
.wide { grid-column: span 2; min-height: 250px; }
.tall { grid-row: span 2; min-height: 520px; }
.dark { background: var(--charcoal); color: var(--cream); border-color: var(--amber); }
.dark h3, .dark .stamp { color: var(--amber); }
.dark p { color: var(--cream); }
.dark:hover { background: var(--ink); }
.closing-card { min-height: 250px; }

.stamp {
  display: inline-block;
  color: var(--sienna);
  border: 3px double currentColor;
  padding: 5px 7px;
  margin-bottom: 1rem;
  font-size: 10px;
  line-height: 1.35;
  background: rgba(255,248,238,0.32);
  transform-origin: 90% 10%;
  transition: transform 300ms ease-out;
}
.specimen-card:hover .stamp { transform: rotate(3deg); }

.step {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  color: var(--ochre);
  font-size: 0.85rem;
}
.step svg { position: absolute; inset: 0; width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; }

.contour-field { position: absolute; inset: auto 0 0 auto; width: 80%; height: 62%; opacity: 0.34; pointer-events: none; }
.contour-field svg, .diagram svg { width: 100%; height: 100%; fill: none; stroke: var(--sienna); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contour-field path, .diagram path, .title-underline path { stroke-dasharray: var(--path-length, 700); stroke-dashoffset: var(--path-length, 700); }
.drawn .contour-field path, .drawn .diagram path { animation: contour-draw 1.2s ease-out forwards; animation-delay: var(--line-delay, 0ms); }
@keyframes contour-draw { to { stroke-dashoffset: 0; } }

.title-underline { width: min(240px, 80%); height: 16px; margin-top: 12px; fill: none; stroke: var(--ochre); stroke-width: 2; }
.specimen-card:hover .title-underline path { animation: contour-draw 300ms ease-out forwards; }

.diagram { margin: 0 0 1rem; padding: 12px; border: 1px dashed var(--sienna); background: rgba(237,224,198,0.52); }
.diagram .mono { color: var(--ochre); font-size: 0.78rem; }
.diagram circle { fill: var(--amber); stroke: var(--ink); }

.ridge-wipe { height: 160px; background: var(--ink); overflow: hidden; }
.ridge-wipe svg { width: 100%; height: 100%; fill: var(--vellum); stroke: var(--sienna); stroke-width: 2; }

.final-grid { border-bottom: 2px solid var(--ink); }

@media (max-width: 980px) {
  .specimen-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-banner { grid-template-columns: 1fr; clip-path: none; }
  .hero-copy { padding-left: 54px; }
}

@media (max-width: 640px) {
  .altitude-rail { width: 42px; padding-inline: 3px; }
  .field-guide, .hero-copy { padding-left: 42px; }
  .specimen-grid { grid-template-columns: 1fr; }
  .span-2, .wide, .tall { grid-column: span 1; grid-row: span 1; min-height: 320px; }
  .chapter-banner { padding: 3rem 1.2rem 3rem 3.7rem; }
  .scroll-callout { right: 5vw; }
  .compass { right: 2vw; top: 8vh; }
}