:root {
  /* Vanilla JS uses IntersectionObserver for section activation. */
  --parchment-base: #f4ece1;
  --ink-primary: #3b2f2f;
  --accent-warm: #c4704e;
  --accent-cool: #5e8c7a;
  --sidebar-tint: #a8919b;
  --shadow-deep: #2a2118;
  --highlight: #d4a84b;
  --glass-tint: rgba(244, 236, 225, 0.55);
  --font-display: "Caveat", cursive;
  --font-body: "Libre Baskerville", serif;
  --font-annotation: "Inconsolata", monospace;
  --sidebar-width: 280px;
  --rail-width: 60px;
  --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --morph-duration: 600ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--parchment-base);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 18% 16%, rgba(212, 168, 75, 0.16), transparent 18rem),
    radial-gradient(circle at 82% 12%, rgba(94, 140, 122, 0.12), transparent 20rem),
    repeating-linear-gradient(92deg, rgba(59, 47, 47, 0.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.svg-defs { position: absolute; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  min-height: 100vh;
  padding: 34px 26px 28px 24px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  background-color: var(--parchment-base);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(59, 47, 47, 0.105) 27px 28px),
    radial-gradient(circle at 32% 12%, rgba(168, 145, 155, 0.22), transparent 11rem);
  clip-path: url(#torn-edge);
  box-shadow: 14px 0 34px rgba(42, 33, 24, 0.12);
}

.tilted-mark {
  transform: rotate(-2deg);
  display: grid;
  justify-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  text-shadow: 2px 2px 0 rgba(59, 47, 47, 0.13);
}

.side-compass {
  width: 92px;
  height: 92px;
  overflow: visible;
  color: var(--ink-primary);
  transform: rotate(var(--compass-rotate, 0deg));
}

.side-compass circle,
.side-compass path,
.sidebar-nav svg path,
.sidebar-nav svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-compass .compass-heart { fill: var(--accent-warm); stroke: none; opacity: 0.8; }

.sidebar-nav {
  display: grid;
  gap: 18px;
  margin: 56px 0 auto;
}

.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 6px 12px 6px 3px;
  color: var(--shadow-deep);
  text-decoration: none;
  font-family: var(--font-annotation);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
  transition: color var(--morph-duration) var(--spring-ease), opacity var(--morph-duration) var(--spring-ease), transform var(--morph-duration) var(--spring-ease);
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 4px 0 4px -7px;
  border: 1px solid transparent;
  border-radius: 56% 44% 51% 49% / 48% 60% 40% 52%;
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform var(--morph-duration) var(--spring-ease), background var(--morph-duration), border-color var(--morph-duration);
}

.nav-item svg { width: 30px; height: 30px; z-index: 1; }
.nav-item span { z-index: 1; }
.nav-item:hover, .nav-item.active { color: var(--accent-warm); opacity: 1; transform: translateX(4px) rotate(-1deg); }
.nav-item.active::before { transform: scaleX(1); border-color: rgba(196, 112, 78, 0.36); background: rgba(212, 168, 75, 0.12); }
.nav-item.active svg path:first-child, .nav-item.active svg circle:first-child { fill: rgba(196, 112, 78, 0.18); }

.context-note {
  margin: 34px 12px 0 0;
  color: var(--sidebar-tint);
  font-family: var(--font-annotation);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.8;
  transform: rotate(1.5deg);
}

.sketchbook {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  position: relative;
  isolation: isolate;
}

.map-layer {
  position: fixed;
  inset: 0 0 0 var(--sidebar-width);
  z-index: -2;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(244, 236, 225, 0.58), rgba(244, 236, 225, 0.3)),
    var(--parchment-base);
}

.drawn-map {
  width: 100%;
  height: 132vh;
  min-height: 980px;
  opacity: 0.68;
  filter: saturate(0.6) brightness(1.05);
  transform: translate3d(0, var(--map-y, 0px), 0) scale(1.04);
}

.drawn-map .coast,
.drawn-map .mountains path,
.drawn-map .islands path {
  fill: rgba(244, 236, 225, 0.18);
  stroke: var(--ink-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawn-map .fine { stroke-width: 2.2; opacity: 0.72; }
.drawn-map .edge { fill: rgba(212, 168, 75, 0.06); }
.drawn-map .routes path { fill: none; stroke: var(--accent-cool); stroke-width: 2; stroke-dasharray: 8 12; opacity: 0.5; stroke-linecap: round; }
.drawn-map .labels text { font-family: var(--font-annotation); fill: var(--ink-primary); font-size: 24px; letter-spacing: 0.08em; opacity: 0.45; }
.drawn-map .inkspots circle { fill: var(--accent-warm); opacity: 0.26; }

.panel-section {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 78px clamp(28px, 5vw, 88px);
}

.opening-wrap { text-align: center; display: grid; justify-items: center; gap: 24px; }

.hero-compass {
  width: min(37vw, 240px);
  min-width: 172px;
  color: var(--ink-primary);
  overflow: visible;
  animation: compass-arrive 2.5s ease-in-out both;
}

.hero-compass path,
.hero-compass circle { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-compass .brass-dot { fill: var(--highlight); stroke: var(--accent-warm); }
.hero-point { transform-box: fill-box; transform-origin: center; animation: needle-unfold 2.5s ease-in-out both; }
.p2 { animation-delay: 90ms; } .p3 { animation-delay: 180ms; } .p4 { animation-delay: 270ms; }

@keyframes compass-arrive { 0% { opacity: 0; transform: scale(0.28) rotate(-40deg); } 56% { opacity: 1; transform: scale(1.04) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes needle-unfold { 0%, 28% { opacity: 0; transform: scale(0.15); } 100% { opacity: 1; transform: scale(1); } }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-primary);
  text-shadow: 2px 2px 0 rgba(59, 47, 47, 0.15);
  line-height: 0.98;
}

.domain-title { font-size: clamp(4rem, 11vw, 8.2rem); letter-spacing: 0.02em; font-weight: 700; }
.domain-title span { display: inline-block; opacity: 0; transform: translateY(0.35em) rotate(4deg); transition: opacity 420ms ease, transform 520ms var(--spring-ease); }
.domain-title span.visible { opacity: 1; transform: translateY(0) rotate(0); }

.opening-subtitle {
  margin: 0;
  font-style: italic;
  color: var(--sidebar-tint);
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
  opacity: 0;
  animation: subtitle-ink 900ms ease 1.35s both;
}

@keyframes subtitle-ink { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(16px); } }

.asym-grid { width: min(1060px, 100%); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); gap: clamp(24px, 4vw, 62px); align-items: center; }
.narrow { margin-top: 28vh; }

.glass-card {
  position: relative;
  padding: clamp(24px, 3vw, 42px);
  border: 2px solid rgba(59, 47, 47, 0.14);
  border-radius: 29% 71% 24% 76% / 75% 19% 81% 25%;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(59, 47, 47, 0.08), 0 22px 50px rgba(42, 33, 24, 0.14);
  transform: rotate(var(--card-tilt, 0deg)) scaleY(0.08);
  transform-origin: center top;
  opacity: 0;
  overflow: hidden;
  filter: url(#wobbly);
  transition: transform 900ms var(--spring-ease), opacity 500ms ease, border-radius 850ms var(--spring-ease), box-shadow 600ms ease;
}

.glass-card.in-view { opacity: 1; transform: rotate(var(--card-tilt, 0deg)) scaleY(1); border-radius: 22px 28px 18px 32px / 28px 20px 30px 18px; }
.glass-card:hover { box-shadow: inset 0 1px 2px rgba(59, 47, 47, 0.11), 0 28px 64px rgba(42, 33, 24, 0.18); }
.glass-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(244, 236, 225, 0.45); border-radius: inherit; pointer-events: none; }
.glass-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(244,236,225,0.42), transparent 32%, rgba(94,140,122,0.08) 66%, transparent); pointer-events: none; }

.card-label {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--sidebar-tint);
  font-family: var(--font-annotation);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.glass-card h2 { font-size: clamp(2rem, 5vw, 3.8rem); margin-bottom: 18px; }
.glass-card h3 { font-size: clamp(1.75rem, 3.3vw, 2.7rem); margin-bottom: 14px; }
.glass-card p { margin: 0; max-width: 64ch; }
.corner-sketch, .specimen-art { display: block; margin-top: 18px; width: 132px; max-width: 42%; color: var(--ink-primary); opacity: 0.82; }
.corner-sketch path, .corner-sketch rect, .corner-sketch circle, .specimen-art path, .specimen-art circle, .specimen-art ellipse { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seedpod { float: right; transform: rotate(7deg); } .slide { float: right; color: var(--accent-cool); }

.specimen-gallery { align-items: start; padding-top: 120px; }
.gallery-grid { width: min(1030px, 100%); display: grid; grid-template-columns: 1.02fr 0.86fr; gap: 34px 48px; position: relative; z-index: 1; }
.specimen-a { margin-top: 36px; } .specimen-b { margin-top: 0; } .specimen-c { margin-left: 9%; } .specimen-d { margin-top: 54px; }
.trail-lines { position: absolute; width: min(980px, calc(100% - 120px)); top: 14%; left: 50%; transform: translateX(-50%); height: 72vh; overflow: visible; pointer-events: none; z-index: 0; }
.trail-lines path { fill: none; stroke: var(--accent-warm); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; stroke-dashoffset: var(--trail-offset, 900); opacity: 0.48; transition: stroke-dashoffset 100ms linear; }

.annotation-layer { min-height: 120vh; }
.note-card { width: min(680px, 100%); }
.annotation-bubble { position: sticky; top: 24vh; z-index: 3; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 290px; color: var(--accent-warm); font-family: var(--font-annotation); font-size: 0.82rem; letter-spacing: 0.05em; filter: contrast(1.1); animation: bob-note 4s ease-in-out infinite; }
.annotation-bubble svg { width: 110px; height: 74px; flex: 0 0 auto; }
.annotation-bubble path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bubble-one { margin-right: auto; margin-left: 7vw; transform: rotate(-3deg); }
.bubble-two { margin-left: auto; margin-right: 8vw; color: var(--accent-cool); transform: rotate(2deg); animation-delay: -1.1s; }
@keyframes bob-note { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.wax-seal { width: 92px; height: 92px; margin-top: 26px; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 45% 48% 52% 55%; background: var(--accent-warm); color: var(--parchment-base); box-shadow: inset 0 2px 4px rgba(42, 33, 24, 0.22); font-family: var(--font-annotation); letter-spacing: 0.05em; transform: rotate(-8deg); }
.wax-seal::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(244, 236, 225, 0.62); border-radius: inherit; }

.closing { min-height: 110vh; }
.colophon-card { width: min(780px, 100%); text-align: center; padding: clamp(34px, 6vw, 70px); }
.large-seal { width: 142px; margin: 0 auto 22px; color: var(--accent-warm); }
.large-seal path { fill: var(--accent-warm); stroke: var(--shadow-deep); stroke-width: 1.4; opacity: 0.9; }
.large-seal text { fill: var(--parchment-base); font-family: var(--font-display); font-size: 42px; }
.colophon-line { margin: 18px auto 0; font-style: italic; }
.colophon-date { margin-top: 16px; color: var(--sidebar-tint); font-family: var(--font-annotation); letter-spacing: 0.06em; }
.flourish { width: min(300px, 80%); margin-top: 28px; overflow: visible; }
.flourish path, .flourish circle { fill: none; stroke: var(--ink-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.flourish circle { fill: var(--highlight); stroke: none; stroke-dasharray: none; opacity: 0; }
.colophon-card.in-view .flourish path { animation: draw-flourish 1.8s ease forwards 400ms; }
.colophon-card.in-view .flourish circle { animation: seal-dot 600ms ease forwards 1.5s; }
@keyframes draw-flourish { to { stroke-dashoffset: 0; } }
@keyframes seal-dot { to { opacity: 1; } }

@media (max-width: 1024px) {
  .sidebar { width: var(--rail-width); padding: 18px 8px; align-items: center; clip-path: none; }
  .tilted-mark span, .nav-item span, .context-note { display: none; }
  .side-compass { width: 44px; height: 44px; }
  .sidebar-nav { gap: 20px; margin-top: 42px; }
  .nav-item { grid-template-columns: 1fr; padding: 6px; justify-items: center; }
  .nav-item::before { inset: 2px; transform-origin: center; }
  .nav-item:hover, .nav-item.active { transform: rotate(-2deg) scale(1.06); }
  .sketchbook { margin-left: var(--rail-width); width: calc(100% - var(--rail-width)); }
  .map-layer { inset-left: var(--rail-width); }
  .asym-grid { grid-template-columns: 1fr; }
  .narrow { margin-top: 0; }
}

@media (max-width: 768px) {
  .sidebar { inset: auto 0 0 0; width: 100%; min-height: 0; height: 74px; flex-direction: row; justify-content: center; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(59, 47, 47, 0.1) 27px 28px); box-shadow: 0 -12px 30px rgba(42, 33, 24, 0.15); }
  .tilted-mark { display: none; }
  .sidebar-nav { display: flex; margin: 0; gap: clamp(9px, 4vw, 24px); }
  .nav-item { min-height: 46px; width: 46px; }
  .sketchbook { margin-left: 0; width: 100%; padding-bottom: 74px; }
  .map-layer { inset: 0; }
  .panel-section { padding: 62px 20px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .specimen-a, .specimen-c, .specimen-d { margin: 0; }
  .trail-lines { display: none; }
  .annotation-bubble { position: relative; top: auto; margin: 0 auto 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .drawn-map { transform: none !important; }
}