:root {
  /* Compliance terms from DESIGN.md: `IBM Plex Mono` from Google Fonts, `IBM Plex Sans` from Google Fonts. Interactions should reveal definitions. */
  --parchment: #F7EEDB;
  --vellum: #FFF9EA;
  --burgundy: #6E1730;
  --wine: #3A0B18;
  --coral: #E66F5C;
  --teal: #0BA6A6;
  --lagoon: #7FD8FF;
  --brass: #B68A3A;
  --graphite: #25212A;
  --spine: 124px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--graphite);
  background: var(--parchment);
  font-family: "IBM Plex Sans", Inter, sans-serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .28;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(182, 138, 58, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 77% 31%, rgba(110, 23, 48, .13) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 11, 24, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(58, 11, 24, .025) 1px, transparent 1px);
  background-size: 29px 31px, 41px 43px, 96px 96px, 96px 96px;
  mix-blend-mode: multiply;
}

.scholar-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0 28px 0 34px;
  border-bottom: 1px solid rgba(110, 23, 48, .34);
  background: rgba(255, 249, 234, .86);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(58, 11, 24, .08);
}

.domain-mark {
  width: fit-content;
  color: var(--burgundy);
  font-family: Fraunces, serif;
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.03em;
}

.glossary-tabs { display: flex; gap: 8px; }

.tab,
.definition-chip,
.drawer-close {
  border: 1px solid rgba(110, 23, 48, .4);
  color: var(--burgundy);
  background: rgba(247, 238, 219, .72);
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.tab {
  padding: 9px 12px;
  font-size: .68rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.tab.active,
.tab:hover {
  color: var(--vellum);
  background: var(--burgundy);
  transform: translateY(-1px);
}

.route-key {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wine);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
}

.key-line {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--burgundy), var(--coral));
  position: relative;
  overflow: hidden;
}

.key-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lagoon);
  transform: translateX(-100%);
  animation: routeKey 2.8s linear infinite;
}

.key-fish {
  width: 18px;
  height: 10px;
  background: var(--teal);
  clip-path: polygon(0 50%, 24% 6%, 75% 12%, 100% 50%, 75% 88%, 24% 94%);
}

.chain-spine {
  position: fixed;
  top: 68px;
  bottom: 0;
  left: 0;
  z-index: 45;
  width: var(--spine);
  padding: 28px 16px;
  border-right: 1px solid rgba(110, 23, 48, .32);
  background: linear-gradient(180deg, rgba(255, 249, 234, .93), rgba(247, 238, 219, .78));
}

.chain-spine::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 28px;
  border-left: 2px solid var(--burgundy);
  opacity: .55;
}

.spine-title {
  margin: 0 0 24px 22px;
  color: var(--brass);
  font-family: "Space Mono", monospace;
  font-size: .62rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  position: absolute;
  right: 10px;
  top: 28px;
}

.spine-link {
  position: relative;
  display: block;
  margin: 0 0 29px 22px;
  padding: 7px 5px 7px 16px;
  color: var(--wine);
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  text-decoration: none;
  text-transform: uppercase;
}

.spine-link::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vellum);
  border: 2px solid var(--burgundy);
}

.spine-link.active::before { background: var(--coral); box-shadow: 0 0 0 8px rgba(230, 111, 92, .16); }
.spine-link span { display: block; color: var(--brass); font-size: .58rem; }

main { margin-left: var(--spine); }

.plate {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 34vw) 1fr minmax(190px, 260px);
  gap: 26px;
  align-items: center;
  padding: 110px 36px 68px 56px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(127, 216, 255, .2), transparent 18%),
    radial-gradient(circle at 10% 82%, rgba(182, 138, 58, .13), transparent 28%),
    var(--parchment);
  border-bottom: 1px solid rgba(110, 23, 48, .25);
}

.plate::before {
  content: attr(data-chapter);
  position: absolute;
  top: 92px;
  left: 56px;
  color: rgba(110, 23, 48, .08);
  font-family: Fraunces, serif;
  font-size: clamp(5rem, 15vw, 15rem);
  font-weight: 800;
  line-height: .75;
  pointer-events: none;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 84px 18px 28px 18px;
  border: 1px solid rgba(182, 138, 58, .42);
  border-left: 3px double rgba(110, 23, 48, .5);
  pointer-events: none;
}

.hero-plate { padding-top: 92px; }

.plate-copy { position: relative; z-index: 4; max-width: 560px; }

.folio-kicker {
  margin: 0 0 18px;
  color: var(--brass);
  font-family: "Space Mono", monospace;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  color: var(--burgundy);
  font-family: Fraunces, serif;
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(4rem, 7.8vw, 9.7rem); }
h2 { font-size: clamp(3rem, 5.2vw, 6.4rem); }

.plate-copy p:not(.folio-kicker) {
  margin: 24px 0;
  color: rgba(37, 33, 42, .85);
  font-size: clamp(1.03rem, 1.35vw, 1.3rem);
  line-height: 1.62;
  font-weight: 400;
}

.definition-chip {
  padding: 12px 16px;
  box-shadow: inset 0 -3px 0 rgba(230, 111, 92, .2);
}

.ledger-fragment,
.certificate-strip,
.wiki-bracket,
.exception-label,
.final-seal,
.mono-note {
  font-family: "IBM Plex Mono", monospace;
  color: var(--wine);
  background: rgba(255, 249, 234, .72);
  border: 1px solid rgba(182, 138, 58, .42);
  box-shadow: 8px 8px 0 rgba(182, 138, 58, .13);
}

.ledger-fragment { display: inline-block; padding: 11px 13px; font-size: .78rem; }

.atlas-field {
  position: relative;
  z-index: 3;
  min-height: 58vh;
  border-radius: 2px;
  background:
    radial-gradient(circle at 36% 44%, rgba(255, 249, 234, .78), transparent 30%),
    repeating-linear-gradient(90deg, rgba(110, 23, 48, .08) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(11, 166, 166, .08) 0 1px, transparent 1px 70px);
  border-top: 1px solid rgba(110, 23, 48, .25);
  border-bottom: 1px solid rgba(110, 23, 48, .25);
}

.hero-field { min-height: 72vh; }

.route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-path,
.bathymetry,
.tide-ring {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-path {
  stroke: var(--burgundy);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 2px 0 rgba(255, 249, 234, .85));
}

.route-path.secondary { stroke: rgba(58, 11, 24, .42); stroke-width: 2.5; stroke-dasharray: 8 13; }
.route-path.coral,
.route-path.exception { stroke: var(--coral); stroke-width: 4; }
.route-path.teal,
.route-path.repair-path { stroke: var(--teal); stroke-width: 4; }
.route-path.flare-line { stroke: var(--lagoon); stroke-width: 3; filter: url(#glow); }
.bathymetry { stroke: rgba(11, 166, 166, .18); stroke-width: 2; stroke-dasharray: 4 12; }
.tide-ring { stroke: rgba(182, 138, 58, .36); stroke-width: 3; }

.node,
.origin-seal {
  fill: var(--vellum);
  stroke: var(--burgundy);
  stroke-width: 4;
}

.node.verified { fill: var(--lagoon); stroke: var(--teal); filter: drop-shadow(0 0 18px rgba(127, 216, 255, .85)); }
.node.warning { fill: var(--coral); stroke: var(--wine); filter: drop-shadow(0 0 15px rgba(230, 111, 92, .65)); }
.origin-seal { fill: rgba(110, 23, 48, .12); stroke-width: 5; }

.lens-flare {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.96) 0 5%, rgba(127,216,255,.8) 7%, rgba(127,216,255,.22) 23%, transparent 62%);
  opacity: .72;
  transform: scale(.65);
  animation: scholarlyFlare 5.8s ease-in-out infinite;
}

.lens-flare::before,
.lens-flare::after {
  content: "";
  position: absolute;
  left: -55%;
  right: -55%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 216, 255, .8), transparent);
}

.lens-flare::after { transform: rotate(72deg); }
.hero-flare { top: 22%; right: 24%; }
.lagoon-flare { top: 39%; left: 40%; }
.harbor-flare { top: 43%; right: 13%; }

.fish {
  position: absolute;
  z-index: 5;
  width: 42px;
  height: 23px;
  filter: drop-shadow(0 7px 8px rgba(58, 11, 24, .18));
}

.fish span,
.fish::before,
.fish::after { position: absolute; content: ""; display: block; }

.fish span {
  inset: 3px 6px 3px 0;
  border-radius: 65% 45% 55% 65%;
  background: var(--teal);
  clip-path: polygon(0 50%, 18% 8%, 76% 7%, 100% 50%, 76% 93%, 18% 92%);
}

.fish::before {
  right: 0;
  top: 4px;
  width: 13px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(0 50%, 100% 0, 74% 50%, 100% 100%);
}

.fish::after {
  left: 9px;
  top: 1px;
  width: 11px;
  height: 21px;
  border-radius: 50%;
  border-left: 3px solid rgba(255, 249, 234, .75);
}

.fish-angel { color: var(--brass); }
.fish-angel span { background: linear-gradient(90deg, var(--brass), var(--coral)); }
.fish-tang { color: var(--teal); }
.fish-tang span { background: var(--teal); }
.fish-goby { width: 30px; height: 17px; color: var(--lagoon); }
.fish-goby span { background: var(--lagoon); }
.fish-glass { color: rgba(127, 216, 255, .48); opacity: .62; }
.fish-glass span { background: rgba(127, 216, 255, .34); border: 1px solid rgba(11, 166, 166, .5); }
.fish-lion { width: 48px; height: 27px; color: var(--coral); }
.fish-lion span { background: linear-gradient(90deg, var(--coral), var(--burgundy)); }

.hero-fish-one { top: 46%; left: 14%; animation: swimHero 13s ease-in-out infinite; }
.hero-fish-two { top: 34%; left: 44%; animation: swimWide 16s ease-in-out infinite; }
.drift-a { top: 41%; left: 18%; animation: swimWide 14s ease-in-out infinite; }
.drift-b { top: 52%; left: 47%; animation: swimSmall 11s ease-in-out infinite; }
.transit-one { top: 28%; left: 12%; animation: swimHero 15s ease-in-out infinite; }
.transit-two { top: 63%; left: 38%; animation: swimWide 18s ease-in-out infinite reverse; }
.disruption-one { top: 22%; left: 48%; animation: pulseRisk 4s ease-in-out infinite; }
.harbor-one { top: 47%; left: 42%; animation: swimSmall 12s ease-in-out infinite; }

.stamp-ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  border: 3px double rgba(110, 23, 48, .48);
  border-radius: 50%;
  color: rgba(110, 23, 48, .6);
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  text-align: center;
  transform: rotate(-13deg);
}

.stamp-one { left: 4%; bottom: 16%; }
.stamp-two { right: 13%; top: 18%; }

.mono-note { position: absolute; padding: 10px 12px; font-size: .74rem; }
.note-verified { top: 19%; right: 8%; }
.lagoon-note { bottom: 21%; left: 28%; }
.certificate-strip { position: absolute; left: 18%; bottom: 15%; padding: 12px 14px; font-size: .78rem; }
.wiki-bracket { position: absolute; right: 6%; bottom: 17%; padding: 13px 16px; font-size: .82rem; color: var(--teal); }
.exception-label { position: absolute; left: 44%; top: 14%; padding: 12px 15px; color: var(--coral); font-size: .76rem; }
.final-seal { position: absolute; right: 8%; bottom: 15%; padding: 13px 16px; color: var(--teal); font-size: .78rem; }

.specimen-card,
.marginalia {
  position: relative;
  z-index: 4;
  align-self: end;
  padding: 18px;
  background: rgba(255, 249, 234, .76);
  border: 1px solid rgba(110, 23, 48, .32);
  border-top: 5px solid var(--brass);
  box-shadow: 14px 14px 0 rgba(110, 23, 48, .08);
  cursor: pointer;
  transform: translateX(24px);
  opacity: .82;
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}

.specimen-card.open,
.marginalia.open,
.specimen-card:hover,
.marginalia:hover {
  transform: translateX(0);
  opacity: 1;
  box-shadow: 8px 8px 0 rgba(230, 111, 92, .16);
}

.specimen-number,
.marginalia span {
  color: var(--brass);
  font-family: "Space Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
}

.specimen-card h3,
.marginalia strong {
  display: block;
  margin: 8px 0;
  color: var(--burgundy);
  font-family: Fraunces, serif;
  font-size: 1.35rem;
  line-height: 1;
}

.specimen-card p,
.marginalia p {
  max-height: 3.4em;
  overflow: hidden;
  margin: 0;
  line-height: 1.45;
  transition: max-height .35s ease;
}

.specimen-card.open p,
.marginalia.open p { max-height: 180px; }

.trench { background: radial-gradient(circle at 55% 22%, rgba(230, 111, 92, .14), transparent 22%), var(--parchment); }
.repair { background: radial-gradient(circle at 78% 33%, rgba(11, 166, 166, .16), transparent 24%), var(--parchment); }

.definition-drawer {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  width: min(420px, calc(100vw - 52px));
  padding: 24px;
  background: rgba(255, 249, 234, .94);
  border: 1px solid rgba(110, 23, 48, .44);
  border-left: 6px solid var(--burgundy);
  box-shadow: 0 22px 60px rgba(58, 11, 24, .22);
  transform: translateY(130%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.definition-drawer.open { transform: translateY(0); }
.drawer-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; font-size: 1.15rem; }
.drawer-label { margin: 0 0 10px; color: var(--brass); font-family: "Space Mono", monospace; font-size: .7rem; text-transform: uppercase; }
.definition-drawer h3 { margin: 0; color: var(--burgundy); font-family: Fraunces, serif; font-size: 2rem; }
.definition-drawer p:last-child { margin-bottom: 0; line-height: 1.55; }

@keyframes routeKey { to { transform: translateX(100%); } }
@keyframes scholarlyFlare { 0%,100% { opacity: .34; transform: scale(.5) rotate(0deg); } 42% { opacity: .9; transform: scale(1) rotate(8deg); } }
@keyframes swimHero { 0% { transform: translate(0,0) rotate(-12deg); } 50% { transform: translate(42vw,-18vh) rotate(7deg); } 100% { transform: translate(78vw,-30vh) rotate(-4deg); } }
@keyframes swimWide { 0% { transform: translate(0,0) rotate(6deg); } 50% { transform: translate(22vw,12vh) rotate(-10deg); } 100% { transform: translate(43vw,-5vh) rotate(8deg); } }
@keyframes swimSmall { 0% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(18vw,-9vh) rotate(9deg); } 100% { transform: translate(36vw,2vh) rotate(-3deg); } }
@keyframes pulseRisk { 0%,100% { transform: scale(.92) rotate(-7deg); } 50% { transform: scale(1.18) rotate(6deg); } }

@media (max-width: 980px) {
  :root { --spine: 88px; }
  .scholar-header { grid-template-columns: 1fr; height: auto; min-height: 68px; padding: 12px 18px; gap: 10px; }
  .glossary-tabs, .route-key { display: none; }
  .chain-spine { top: 68px; width: var(--spine); padding: 18px 8px; }
  .spine-link { margin-left: 12px; font-size: .58rem; }
  .plate { grid-template-columns: 1fr; padding: 118px 22px 48px 28px; }
  .plate::before { left: 28px; top: 96px; }
  .atlas-field { min-height: 48vh; }
  .specimen-card, .marginalia { transform: none; }
}

@media (max-width: 640px) {
  :root { --spine: 0px; }
  main { margin-left: 0; }
  .chain-spine { display: none; }
  .plate { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: 3.6rem; }
  h2 { font-size: 2.8rem; }
}