/* ════════════════════════════════════════════════════════════════════
   topo.css — "the career wall" · paper guidebook theme
   ════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f5efe2;
  --paper-hi:   #faf6ec;
  --wall:       #efe7d2;
  --ink:        #2a2620;
  --ink-soft:   #6b6355;
  --ink-faint:  #a89e8c;
  --eng:        #33639c;
  --res:        #c05b46;
  --apps:       #6f9a3d;
  --f-display:  "Fraunces", Georgia, serif;
  --f-hand:     "Caveat", cursive;
  --f-body:     "DM Sans", -apple-system, sans-serif;
  --vh100:      100vh;
}
@supports (height: 100dvh) { :root { --vh100: 100dvh; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
/* every route color is consumed through --RC so the lab's dark styles can
   lift the palette toward paper without touching the JSON colors */
*, *::before, *::after {
  --RC: color-mix(in srgb, var(--rc, var(--ink)) var(--rc-keep, 100%), var(--rc-tint, #fff));
}
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem;
}
.nav-brand {
  font-family: var(--f-display); font-weight: 900; font-size: 1.35rem;
  text-decoration: none; letter-spacing: -.02em;
}
.nav-brand span { color: var(--res); }
.nav-chapters { display: flex; gap: .35rem; margin-inline: auto; }
.nav-ch {
  display: flex; align-items: center; gap: .45rem;
  padding: .38rem .75rem; border-radius: 99px;
  font-size: .78rem; font-weight: 500; text-decoration: none;
  color: var(--ink-soft); border: 1px solid transparent;
  transition: color .25s, border-color .25s, background .25s;
}
.nav-ch i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--RC); flex: none;
  transition: transform .25s;
}
.nav-ch:hover { color: var(--ink); }
.nav-ch.cur {
  color: var(--ink); background: color-mix(in srgb, var(--paper-hi) 72%, transparent);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  backdrop-filter: blur(6px);
}
.nav-ch.cur i { transform: scale(1.3); }
.nav-side { display: flex; gap: .4rem; }
.nav-mini {
  font: 500 .78rem var(--f-body); color: var(--ink-soft);
  background: none; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 99px; padding: .38rem .8rem; cursor: pointer;
  text-decoration: none; transition: all .25s;
}
.nav-mini:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.dark-toggle { display: inline-flex; align-items: center; justify-content: center; }
.dark-toggle .ic-sun { display: none; }
:root[data-topo-style="night"] .dark-toggle .ic-moon { display: none; }
:root[data-topo-style="night"] .dark-toggle .ic-sun { display: block; }
.nav-contact { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.nav-contact:hover { background: var(--res); border-color: var(--res); }

/* ── Stage ───────────────────────────────────────────────────────── */
.stage { position: fixed; inset: 0; height: var(--vh100); z-index: 1; }
#topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paper-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: var(--grain-opacity, .5);
  background:
    radial-gradient(ellipse 900px 600px at 18% 12%, rgba(184,158,110,.09), transparent 60%),
    radial-gradient(ellipse 700px 900px at 85% 80%, rgba(150,130,95,.08), transparent 55%),
    radial-gradient(ellipse 500px 400px at 60% 40%, rgba(255,252,240,.35), transparent 70%);
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 120% 120% at 50% 45%, transparent 62%, rgba(84,70,48,.14) 100%);
}

/* ── SVG topo ────────────────────────────────────────────────────── */
#topo text { user-select: none; }
.wall-face   { fill: var(--wall); stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; }
.wall-crack  { fill: none; stroke: color-mix(in srgb, var(--ink) 34%, var(--wall)); stroke-width: 1.7; stroke-linecap: round; }
.wall-ledge  { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, var(--wall)); stroke-width: 1.4; stroke-linecap: round; }
.ground      { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.grass       { fill: none; stroke: color-mix(in srgb, var(--apps) 70%, var(--ink)); stroke-width: 1.8; stroke-linecap: round; }
.decor       { fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }
.sun         { fill: none; stroke: color-mix(in srgb, #c98a3d 80%, var(--ink)); stroke-width: 2.2; }
.moon        { fill: none; stroke: color-mix(in srgb, #d8c87e 60%, var(--ink)); stroke-width: 2.2; stroke-linejoin: round; }
.star        { fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }

/* bivouac night sky: the moon and stars take over from the sun and birds
   (scoped to #topo — the printed clone has no id and stays a daytime B&W) */
.moon, .stars { display: none; }
:root[data-topo-style="night"] #topo .sun,
:root[data-topo-style="night"] #topo .birds { display: none; }
:root[data-topo-style="night"] #topo .moon,
:root[data-topo-style="night"] #topo .stars { display: block; }

.yearline    { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 7; opacity: 0; transition: opacity .6s; }
.yearlabel   { font: 500 19px var(--f-hand); fill: var(--ink-faint); opacity: 0; transition: opacity .6s; }
.loclabel    { font: 500 18px var(--f-hand); fill: var(--ink-soft); text-anchor: middle; opacity: 0; transition: opacity .6s; }
.loctick     { stroke: var(--ink-faint); stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
body[data-chapter="0"] .yearline,
body[data-chapter="0"] .yearlabel,
body[data-chapter="0"] .loctick,
body[data-chapter="0"] .loclabel { opacity: .85; }

/* clouds hiding the top of the wall */
.cloud { fill: var(--paper); stroke: color-mix(in srgb, var(--ink-soft) 55%, var(--paper)); stroke-width: 2; stroke-linejoin: round; }

/* routes */
.route { transition: opacity .55s; }
.rope-shadow { fill: none; stroke: var(--rope-shadow, rgba(42, 38, 32, .10)); stroke-width: 9; stroke-linecap: round; }
.rope        { fill: none; stroke: var(--RC); stroke-width: 4.4; stroke-linecap: round; }
.route-next, .route-next-label { transition: opacity .7s; }
.rope-proj   { fill: none; stroke: var(--RC); stroke-width: 3.6; stroke-linecap: round;
               stroke-dasharray: 9 8; }
.qmark       { font: 700 26px var(--f-hand); fill: var(--ink-faint); }
.next-grade  { font: 700 23px var(--f-hand); fill: var(--RC);
               stroke: var(--paper); stroke-width: 5; paint-order: stroke; }
.next-note   { font: 500 15px var(--f-hand); fill: var(--ink-soft);
               stroke: var(--paper); stroke-width: 4; paint-order: stroke; }
body.dim-routes .route { opacity: .1; }
body.dim-routes .route.active { opacity: 1; }
body[data-chapter="0"] .route { cursor: pointer; }
body[data-chapter="0"] .route:hover .rope { stroke-width: 5.6; }

/* point markers */
.pt circle.ring  { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 2.6; }
.pt circle.core  { fill: var(--RC); }
.pt.anchor circle.outer { fill: none; stroke: var(--ink); stroke-width: 2; }
.pt.project circle.ring { stroke-dasharray: 4 4; }
.pt .cruxmark    { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.pt .numdisc     { fill: var(--RC); stroke: var(--paper-hi); stroke-width: 2.5; }
.pt .numtxt      { font: 900 16px var(--f-display); fill: var(--paper-hi); text-anchor: middle; }

/* handwritten labels + grade badges */
.pt-g { transition: opacity .55s; cursor: pointer; }
body.dim-routes .pt-g { opacity: .1; }
body.dim-routes .pt-g.mine { opacity: 1; }
.pt-g:hover .plabel { opacity: 1; }
.pt-g:hover .pt circle.ring { stroke-width: 3.4; }
.pt-g:hover .pt circle.outer { stroke-width: 3; }
.plabel { font: 700 21px var(--f-hand); fill: var(--ink); opacity: 0; transition: opacity .45s, transform .45s;
          transform: translateY(6px); }
.gbadge { font: 700 21px var(--f-hand); fill: var(--RC);
          stroke: var(--paper); stroke-width: 5; paint-order: stroke;
          opacity: 0; transition: opacity .45s; }
body[data-chapter="0"] .gbadge.ov-badge { opacity: 1; }
.pt-g.on .plabel { opacity: 1; transform: translateY(0); }
.pt-g.on .gbadge { opacity: 1; }

/* label toggle: reveal every pitch label of one route at once, no
   scrolling/hovering needed — toggled per route (overview list or chapter
   header), independent of which chapter is currently active */
.pt-g.force-labels .plabel { opacity: 1; transform: translateY(0); }
.pt-g.force-labels .gbadge { opacity: 1; }
body.dim-routes .pt-g.force-labels { opacity: 1; }

/* climber */
#climber { opacity: 0; transition: opacity .4s; }
body.dim-routes #climber { opacity: 1; }
#climber .dot  { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 2.5; }
#climber .core { fill: var(--ink); }
#climber .pulse {
  fill: none; stroke: var(--ink); stroke-width: 2; opacity: .5;
  transform-box: fill-box; transform-origin: center;
  animation: pulse 2.1s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.45); opacity: .55; }
  80%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── Overlays ────────────────────────────────────────────────────── */
.ov {
  position: absolute; z-index: 10;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s ease, visibility .55s, transform .55s ease;
}
.kicker {
  font: 500 .74rem var(--f-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* intro (chapter 0) */
.ov-intro {
  inset: 0 auto 0 0; width: min(46rem, 92vw);
  display: flex; flex-direction: column; justify-content: center;
  padding: 5.5rem 1.5rem 4.5rem 4vw;
  transform: translateY(14px);
}
body[data-chapter="0"] .ov-intro {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.site-title {
  font: 900 clamp(2.6rem, 6.5vw, 4.6rem)/1.02 var(--f-display);
  letter-spacing: -.02em; margin: .55rem 0 .4rem;
}
.site-tagline { color: var(--ink-soft); font-size: clamp(.92rem, 1.6vw, 1.05rem); max-width: 34rem; }
.choose-line {
  font: 700 clamp(1.35rem, 2.6vw, 1.7rem) var(--f-hand);
  color: var(--res); margin: 1.3rem 0 .9rem; transform: rotate(-1.2deg);
}
.legend { display: flex; flex-direction: column; gap: .55rem; max-width: 27rem; }
.legend-card {
  display: flex; align-items: center; gap: .5rem;
  padding: .68rem .9rem;
  background: color-mix(in srgb, var(--paper-hi) 78%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px; backdrop-filter: blur(4px);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.legend-card:hover {
  transform: translateX(6px); border-color: var(--RC);
  box-shadow: -4px 4px 0 color-mix(in srgb, var(--RC) 30%, transparent);
}
.lc-link {
  display: flex; align-items: center; gap: .85rem; flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.lc-num {
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--RC); color: var(--paper-hi);
  font: 900 1rem/2rem var(--f-display); text-align: center;
}
.lc-body { flex: 1; min-width: 0; }
.lc-body strong { display: block; font: 650 .98rem var(--f-display); }
.lc-body em { font: 400 .78rem var(--f-body); font-style: normal; color: var(--ink-soft); }
.lc-meta { text-align: right; flex: none; }
.lc-meta b { display: block; font: 700 1.05rem var(--f-hand); color: var(--RC); }
.lc-meta i { font: 400 .7rem var(--f-body); font-style: normal; color: var(--ink-faint); }
.grades-note { margin-top: .9rem; font: 500 .95rem var(--f-hand); color: var(--ink-faint); }

/* route chapters (1–3) */
.ov-route {
  inset: 0 auto 0 0; width: min(30rem, 100vw);
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: 5.5rem 1.5rem 3.5rem 4vw;
  transform: translateY(18px);
}
.ov-route.cur {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.r-head .kicker { display: flex; align-items: center; gap: .6rem; }
.r-num {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; display: inline-block;
  background: var(--RC); color: var(--paper-hi); text-align: center;
  font: 900 .85rem/1.55rem var(--f-display); letter-spacing: 0;
}
.r-head h2 {
  font: 900 clamp(1.7rem, 3.4vw, 2.5rem)/1.05 var(--f-display);
  letter-spacing: -.015em; margin: 0;
}
.r-title-row { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 .25rem; }
.r-tag { font: 700 1.15rem var(--f-hand); color: var(--RC); }
.r-desc { color: var(--ink-soft); font-size: .88rem; line-height: 1.55; margin-top: .55rem; max-width: 26rem; }

.pitchbox { max-width: 26rem; }
.pcount { font: 700 1rem var(--f-hand); color: var(--ink-faint); margin-bottom: .35rem; }
.pcard {
  background: color-mix(in srgb, var(--paper-hi) 88%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-left: 4px solid var(--RC);
  border-radius: 12px; padding: 1rem 1.1rem;
  box-shadow: -6px 6px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  backdrop-filter: blur(5px);
  min-height: 9.5rem;
}
.pcard.swap { animation: cardIn .45s ease; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) rotate(-.4deg); }
  to   { opacity: 1; transform: none; }
}
.pc-top { display: flex; align-items: baseline; gap: .6rem; }
.pc-grade {
  font: 700 1.3rem var(--f-hand); color: var(--RC); flex: none;
  transform: rotate(-3deg);
}
.pc-title { font: 650 1.02rem var(--f-display); }
.pc-org { font-size: .76rem; color: var(--ink-soft); margin-top: .25rem; }
.pc-period { font: 700 .95rem var(--f-hand); color: var(--ink-faint); }
.pc-desc { font-size: .84rem; line-height: 1.55; color: var(--ink); margin-top: .5rem; }
.pc-skills { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; }
.sk { display: inline-flex; align-items: center; gap: .4rem; }
.sk em { font: 700 .92rem var(--f-hand); font-style: normal; color: var(--ink-soft); }
.sk-dots { display: inline-flex; gap: 3px; }
.sk-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.2px solid color-mix(in srgb, var(--RC) 55%, transparent);
  background: transparent;
}
.sk-dots i.on { background: var(--RC); border-color: var(--RC); }
.pc-links { display: flex; gap: .8rem; margin-top: .6rem; }
.pc-links a { font-size: .78rem; font-weight: 500; color: var(--RC); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* scroll hint — centered call-to-action right under the routes list */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  max-width: 27rem; margin: 1.1rem auto 0; text-align: center;
  color: var(--ink-soft); transition: opacity .5s;
}
.scroll-hint span { font: 700 1.05rem var(--f-hand); }
.scroll-hint i.chev-down {
  width: 13px; height: 13px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); animation: chev-bounce 1.6s ease-in-out infinite;
}
@keyframes chev-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}
body:not([data-chapter="0"]) .scroll-hint, body.scrolled[data-chapter="0"] .scroll-hint { opacity: 0; }

/* small icon toggle — show/hide every label of one route at a glance */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.1rem; height: 2.1rem; margin-top: .15rem;
  color: var(--ink-soft); background: none; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 50%;
  transition: all .25s;
}
.icon-btn:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.icon-btn.rc {
  color: var(--RC); border-color: color-mix(in srgb, var(--RC) 45%, transparent);
}
.icon-btn.rc:hover, .icon-btn.rc[aria-pressed="true"] {
  color: var(--paper-hi); background: var(--RC); border-color: var(--RC);
}
.icon-btn .ic-eye-off { display: none; }
.icon-btn[aria-pressed="true"] .ic-eye { display: none; }
.icon-btn[aria-pressed="true"] .ic-eye-off { display: block; }

/* ── Scroll track: one snap step per pitch ──────────────────────── */
.track { position: relative; z-index: 0; }
.track .step {
  height: 100vh; height: 100svh;          /* svh: stable on mobile URL-bar */
  scroll-snap-align: start;
  scroll-snap-stop: always;               /* a fling advances one pitch max */
}

/* ── Outro ───────────────────────────────────────────────────────── */
.outro {
  position: relative; z-index: 20;  scroll-snap-align: end;  background: var(--ink); color: var(--paper);
  text-align: center; padding: 6rem 1.5rem 4rem;
  border-top: 3px solid var(--ink);
}
.outro-title { font: 700 clamp(1.8rem, 4.5vw, 2.8rem) var(--f-hand); transform: rotate(-1deg); }
.outro-text { color: color-mix(in srgb, var(--paper) 65%, transparent); margin: .7rem 0 2rem; }
.outro-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.btn {
  font: 500 .85rem var(--f-body); color: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--paper) 40%, transparent);
  background: none; border-radius: 99px; padding: .65rem 1.4rem;
  text-decoration: none; cursor: pointer; transition: all .25s;
}
.btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-ink:hover { background: var(--res); border-color: var(--res); color: var(--paper); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav { padding: .65rem .8rem; gap: .6rem; }
  .nav-ch span { display: none; }
  .nav-ch { padding: .45rem .55rem; }
  .nav-mini { padding: .34rem .65rem; font-size: .72rem; }
  /* many routes → the chip strip scrolls instead of overflowing */
  .nav-chapters {
    overflow-x: auto; min-width: 0; flex: 0 1 auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-chapters::-webkit-scrollbar { display: none; }
  .nav-side { margin-left: auto; flex: none; }

  .ov-intro {
    inset: auto 0 0 0; width: 100%;
    justify-content: flex-end;
    padding: 0 1.1rem calc(3.4rem + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 88%, transparent) 38%);
  }
  .site-title { font-size: clamp(2rem, 9vw, 2.7rem); }
  .legend { max-width: none; }
  .legend-card { padding: .55rem .75rem; }
  .grades-note { margin-top: .55rem; }

  .ov-route {
    inset: auto 0 0 0; width: 100%;
    justify-content: flex-end; gap: .6rem;
    padding: 0 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 90%, transparent) 30%);
  }
  .r-head h2 { font-size: 1.45rem; margin: 0; }
  .r-title-row { margin: .3rem 0 .1rem; }
  .r-desc { display: none; }
  .r-tag { font-size: 1rem; }
  .pitchbox, .pcard { max-width: none; }
  .pcard { min-height: 8rem; padding: .8rem .9rem; }
  .pc-desc { font-size: .8rem; }
  .scroll-hint { margin-top: .7rem; }
}

/* ── Lab: paper-style variants (html[data-topo-style], ?lab=1) ───── */
:root[data-topo-style="alpine"] {          /* cool granite morning */
  --paper: #edf0ea; --paper-hi: #f7f8f4; --wall: #dfe6d7;
  --ink: #242a23; --ink-soft: #5b665a; --ink-faint: #94a08f;
}
:root[data-topo-style="sepia"] {           /* 1970s guidebook */
  --paper: #f2e7cd; --paper-hi: #f8f0dc; --wall: #e9d7ac;
  --ink: #41301a; --ink-soft: #7a6440; --ink-faint: #b19c71;
}
:root[data-topo-style="night"] {           /* bivouac, headlamp ink */
  --paper: #262a33; --paper-hi: #313644; --wall: #333a49;
  --ink: #ebe6d8; --ink-soft: #a49e8d; --ink-faint: #696453;
  --rc-keep: 68%; --rope-shadow: rgba(0, 0, 0, .4); --grain-opacity: .14;
}
:root[data-topo-style="blueprint"] {       /* cyanotype plan */
  --paper: #1e4278; --paper-hi: #2a4f88; --wall: #254a82;
  --ink: #e8effb; --ink-soft: #a9bcdd; --ink-faint: #6c86b4;
  --rc-keep: 52%; --rc-tint: #eaf2ff; --rope-shadow: rgba(0, 10, 40, .5);
  --grain-opacity: .1;
}

/* ── Lab panel (?lab=1) ──────────────────────────────────────────── */
.lab {
  position: fixed; right: .9rem; bottom: .9rem; z-index: 60;
  width: 15rem; padding: .6rem .85rem .8rem;
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 14px; backdrop-filter: blur(6px);
  box-shadow: -6px 6px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.lab-title {
  font: 700 1.05rem var(--f-hand); color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; width: 100%;
}
.lab-title i { font-style: normal; color: var(--ink-faint); }
.lab.min .lab-body { display: none; }
.lab-row { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.lab-row > span {
  font: 500 .62rem var(--f-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.lab-btns { display: flex; flex-wrap: wrap; gap: .3rem; }
.lab-btns button, .lab-btns a {
  font: 500 .72rem var(--f-body); color: var(--ink-soft);
  background: none; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 99px; padding: .28rem .6rem; cursor: pointer; text-decoration: none;
  transition: all .2s;
}
.lab-btns button:hover, .lab-btns a:hover { color: var(--ink); border-color: var(--ink); }
.lab-btns .cur { color: var(--paper); background: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) {
  .lab { right: .55rem; bottom: auto; top: 3.3rem; width: 12.5rem; }
}

/* ── Lab intro: the wall arrives as a pen drawing (?lab=1) ──────────
   States on <body>: .intro-await → blank paper, only the name, centered;
   .intro-drawing → the name glides left while topo.js pen-draws the world;
   .intro-done → the usual UI rises back in. html.intro-lock parks scroll. */
html.intro-lock { overflow: hidden; }

.intro-card {
  position: fixed; inset: 0 auto 0 4vw; z-index: 30;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: min(46rem, 92vw);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(calc(50vw - 4vw - 50%));
  transition: opacity .55s ease, visibility .55s, transform 1.1s cubic-bezier(.3,.75,.25,1);
}
.intro-card .scroll-hint { margin-top: 2.4rem; }
body.intro-await   .intro-card { opacity: 1; visibility: visible; }
body.intro-drawing .intro-card { opacity: 1; visibility: visible; transform: none; }
body.intro-drawing .intro-card .scroll-hint { opacity: 0; }
body.intro-done    .intro-card { transform: none; }

/* park the normal UI while the page is still blank paper */
body.intro-await .ov-intro, body.intro-drawing .ov-intro {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.nav { transition: opacity .5s ease, transform .5s ease; }
body.intro-await .nav, body.intro-drawing .nav {
  opacity: 0; transform: translateY(-10px); pointer-events: none;
}
body.intro-done .nav { transition-delay: .9s; }
body.intro-await .yearline,  body.intro-drawing .yearline,
body.intro-await .yearlabel, body.intro-drawing .yearlabel,
body.intro-await .loctick,   body.intro-drawing .loctick,
body.intro-await .loclabel,  body.intro-drawing .loclabel { opacity: 0; }

/* …then everything rises back in, line by line */
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(12px); }
}
body.intro-done .ov-intro > * { animation: intro-rise .55s ease backwards; }
body.intro-done .ov-intro > *:nth-child(1) { animation-delay: .15s; }
body.intro-done .ov-intro > *:nth-child(2) { animation-delay: .22s; }
body.intro-done .ov-intro > *:nth-child(3) { animation-delay: .3s; }
body.intro-done .ov-intro > *:nth-child(4) { animation-delay: .42s; }
body.intro-done .ov-intro > *:nth-child(5) { animation-delay: .5s; }
body.intro-done .ov-intro > *:nth-child(6) { animation-delay: .95s; }
body.intro-done .ov-intro > *:nth-child(n+7) { animation-delay: 1.05s; }
body.intro-done .legend-card { animation: intro-rise .5s ease backwards; }
body.intro-done .legend-card:nth-child(1) { animation-delay: .55s; }
body.intro-done .legend-card:nth-child(2) { animation-delay: .67s; }
body.intro-done .legend-card:nth-child(3) { animation-delay: .79s; }
body.intro-done .legend-card:nth-child(n+4) { animation-delay: .91s; }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Print: the CV (company-ready, derived from topo.json) ──────── */
.print-cv { display: none; }
.print-topo { display: none; }
.psub { display: none; }          /* pitch dates: printed topo only */
@media print {
  @page { margin: 13mm 15mm; }
  .no-print, .stage, .track, .nav, .outro { display: none !important; }
  body { background: #fff; color: #1a1a1a; }
  .print-cv { display: block; font: 10pt/1.42 "Helvetica Neue", Arial, sans-serif; }

  .cv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18pt;
             border-bottom: 1.6pt solid #1a1a1a; padding-bottom: 8pt; }
  .print-cv h1 { font: 700 20pt/1.1 Georgia, serif; letter-spacing: -.01em; }
  .cv-tagline { font-size: 10.5pt; color: #333; margin-top: 3pt; }
  .cv-contact { font-size: 8.5pt; color: #333; text-align: right; line-height: 1.55; white-space: nowrap; }

  .cv-sec { margin-top: 11pt; }
  .print-cv h2 {
    font: 700 9pt Georgia, serif; text-transform: uppercase; letter-spacing: .14em;
    color: #1a1a1a; border-bottom: .6pt solid #999; padding-bottom: 2.5pt; margin-bottom: 6pt;
  }

  .cv-skills { list-style: none; columns: 3; column-gap: 16pt; font-size: 9pt; }
  .cv-skills li { display: flex; justify-content: space-between; align-items: baseline;
                  break-inside: avoid; padding: 1pt 0; }
  .cv-gauge { font-style: normal; font-size: 7.5pt; letter-spacing: 1.5px; color: #1a1a1a; }

  .cv-item { margin-bottom: 7pt; page-break-inside: avoid; }
  .cv-item-tight { margin-bottom: 3.5pt; }
  .cv-line { display: flex; justify-content: space-between; gap: 12pt; align-items: baseline; }
  .cv-line strong { font-size: 10pt; }
  .cv-period { font-size: 8.5pt; color: #555; white-space: nowrap; flex: none; }
  .cv-desc { color: #2c2c2c; font-size: 9.3pt; margin-top: 1.5pt; }
  .cv-tags { font-size: 8.3pt; color: #666; margin-top: 1.5pt; }
  .cv-url { font-size: 8pt; color: #555; }

  /* ── Topo edition (body.print-mode-topo, via the "CV topo" buttons):
       the drawing alone, full page, strict black & white. No border, no
       frame — just the name, the tagline and the URL over the sky. ──── */
  body.print-mode-topo .print-cv { display: none; }
  body.print-mode-topo .print-topo { display: block; }
  .print-topo {
    position: relative; height: 268mm;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    /* monochrome, whatever screen style is active: paper goes white, ink
       goes black, and --RC (every route color) collapses to black too */
    --paper: #fff; --paper-hi: #fff; --wall: #fff;
    --ink: #111; --ink-soft: #444; --ink-faint: #8a8a8a;
    --rc-keep: 0%; --rc-tint: #111; --rope-shadow: transparent;
  }
  .pt-wall { position: absolute; inset: 0; }
  .pt-wall svg { width: 100%; height: 100%; display: block; }
  .pt-min-head { position: absolute; top: 0; left: 0; z-index: 2; }
  .pt-min-head h1 { font: 700 21pt/1.1 Georgia, serif; letter-spacing: -.01em; color: #111; }
  .pt-min-head p { font: 9.5pt/1.45 "Helvetica Neue", Arial, sans-serif; color: #333; margin-top: 2pt; }
  .pt-min-head .pt-url { font-weight: 600; color: #111; margin-top: 1pt; }

  /* the drawing: everything visible, no scroll/intro state, B&W details */
  .print-topo .route, .print-topo .pt-g,
  .print-topo .route-next, .print-topo .route-next-label { opacity: 1; }
  .print-topo .grass { stroke: #555; }
  .print-topo .sun { stroke: #666; }
  .print-topo .numtxt { fill: #fff; }
  /* dense areas (many labels near the summits): white halos keep every
     name, grade and date readable where strokes cross */
  .print-topo .plabel { opacity: 1; transform: none; font-size: 22px;
                        stroke: #fff; stroke-width: 5; paint-order: stroke; }
  .print-topo .gbadge { opacity: 1; stroke: #fff; }
  .print-topo .qmark, .print-topo .next-note { stroke: #fff; stroke-width: 4; paint-order: stroke; }
  .print-topo .yearline, .print-topo .yearlabel,
  .print-topo .loctick, .print-topo .loclabel { opacity: .85; }
  .print-topo .psub { display: inline; font: 500 15px var(--f-hand); fill: #555;
                      stroke: #fff; stroke-width: 4; paint-order: stroke; }
}