/* ============================================================
   Guide & Process pages — same signage language as the map
   ============================================================ */

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-var.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass Mono';
  src: url('../fonts/overpass-mono-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #FAFBFC;
  --paper: #FFFFFF;
  --ink: #1B2530;
  --muted: #5A6673;
  --faint: #99A3AE;
  --hair: #E3E8ED;
  --career: #E4572E;
  --skills: #17BEBB;
  --writing: #FFC914;
  --education: #76B041;
  --ai: #6C5CE7;
  --board-bg: #0E1420;
  --board-edge: #232F42;
  --amber: #FFC914;
  --board-text: #C7D3E2;
  --sans: 'Overpass', system-ui, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.7; }
::selection { background: var(--writing); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  font-weight: 700; text-decoration: none; border-radius: 0 0 6px 6px;
  transition: top 120ms ease;
}
.skip:focus-visible { top: 0; }
kbd {
  font-family: var(--mono); font-size: .82em; border: 1px solid var(--hair);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 .32em; background: #fff;
}

/* header — same signage bar */
.top {
  background: var(--paper); border-bottom: 2px solid var(--ink);
  position: relative; z-index: 30; display: flex; align-items: center; gap: 1rem;
  padding: .55rem clamp(.8rem, 3vw, 1.6rem); flex-wrap: wrap;
}
.top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 6px;
  background: linear-gradient(90deg,
    var(--career) 0 20%, var(--skills) 20% 40%, var(--writing) 40% 60%,
    var(--education) 60% 80%, var(--ai) 80% 100%);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.brand .bname { font-size: 1.02rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; display: block; }
.brand .tag {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: .62rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
.top nav { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.navlink {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: .45rem .55rem; border-radius: 4px;
}
.navlink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.navlink[aria-current="page"] { color: var(--ink); background: var(--hair); }
.backmap {
  border: 2px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .78rem; padding: .42rem .7rem .32rem; border-radius: 6px;
  transition: background 130ms ease, border-color 130ms ease;
}
.backmap:hover { background: var(--career); border-color: var(--career); }

/* hero */
.hero { padding: clamp(3rem, 8vw, 5.5rem) clamp(1rem, 5vw, 2rem) clamp(2rem, 5vw, 3rem); max-width: 62rem; margin: 0 auto; }
.hero .kicker {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem;
}
.hero .kicker::before { content: ''; width: 42px; height: 8px; border-radius: 4px; background: var(--kc, var(--career)); }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -.015em; max-width: 21ch; }
.hero .lede { font-size: clamp(1.02rem, 2vw, 1.22rem); color: #37424E; max-width: 58ch; margin-top: 1.3rem; }
.hero .lede a { color: inherit; font-weight: 700; }

/* article */
main { display: block; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2rem) 4rem; }
section.stop { padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-top: 1px solid var(--hair); }
.stop-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.stop-head .roundel {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 6px solid var(--sc, var(--career)); background: #fff; position: relative;
}
.stop-head h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; line-height: 1.15; }
.stop-head .stopnum {
  margin-left: auto; font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; color: var(--muted); white-space: nowrap;
}
.stop h3 { font-size: 1.05rem; font-weight: 800; margin: 1.6rem 0 .5rem; }
.stop p, .stop li { max-width: 68ch; color: #2E3944; font-size: .98rem; }
.stop p + p { margin-top: .8rem; }
.stop ul, .stop ol { padding-left: 1.2rem; margin: .7rem 0; }
.stop li { margin: .4rem 0; }
.stop li::marker { color: var(--career); font-weight: 700; }
.stop a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.stop a:hover { color: var(--career); }
.stop strong { font-weight: 800; }
.stop em { font-style: italic; }

/* code blocks — departure-board styled */
pre {
  background: var(--board-bg); color: var(--board-text); border-radius: 10px;
  border: 1px solid var(--board-edge); border-top: 4px solid var(--amber);
  padding: 1.1rem 1.2rem; overflow-x: auto; margin: 1.1rem 0;
  font: 500 .8rem/1.65 var(--mono); tab-size: 2;
}
pre .c { color: #6E7F98; } /* comment */
pre .k { color: var(--amber); } /* keyword-ish highlight */
pre .s { color: #8BE9B9; } /* string */
code { font-family: var(--mono); font-size: .88em; background: #EEF2F5; padding: .1em .35em; border-radius: 4px; }
pre code { background: none; padding: 0; font-size: inherit; }

/* callouts */
.note {
  border-left: 5px solid var(--nc, var(--writing)); background: #fff;
  border-radius: 0 8px 8px 0; box-shadow: 0 1px 0 var(--hair), 0 0 0 1px var(--hair);
  padding: .95rem 1.15rem; margin: 1.2rem 0; max-width: 68ch;
}
.note p { font-size: .92rem; }
.note .note-k {
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .3rem;
}

/* figure / diagrams */
figure { margin: 1.4rem 0; max-width: 68ch; }
figure svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--hair); border-radius: 10px; }
figcaption { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted); margin-top: .5rem; }

/* iteration log */
.passes { display: grid; gap: 1rem; margin-top: 1.2rem; }
.pass { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 1.1rem 1.25rem; }
.pass h3 { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .55rem; font-size: .98rem; }
.pass h3 .pnum {
  font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .18em;
  color: #fff; background: var(--pc, var(--career)); border-radius: 4px; padding: .2rem .5rem .1rem;
  text-transform: uppercase;
}
.pass ul { margin: 0; padding-left: 1.1rem; }
.pass li { font-size: .92rem; margin: .35rem 0; }

/* rejected options table (process) */
.options { display: grid; gap: .9rem; margin: 1.2rem 0; }
.option { background: #fff; border: 1px solid var(--hair); border-left: 5px solid var(--faint); border-radius: 0 8px 8px 0; padding: .95rem 1.15rem; }
.option.chosen { border-left-color: var(--education); }
.option h3 { margin: 0 0 .3rem; font-size: 1rem; }
.option .verdict {
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; padding: .18rem .5rem .08rem; border-radius: 4px; margin-left: .5rem;
  background: #EEF2F5; color: var(--muted); white-space: nowrap;
}
.option.chosen .verdict { background: var(--education); color: #fff; }
.option p { font-size: .92rem; }

/* footer */
.foot {
  border-top: 2px solid var(--ink); background: var(--paper);
  padding: 1.1rem clamp(1rem, 5vw, 2rem); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.foot .stripes { display: flex; width: 110px; height: 8px; border-radius: 4px; overflow: hidden; }
.foot .stripes i { flex: 1; }
.foot .stripes i:nth-child(1) { background: var(--career); }
.foot .stripes i:nth-child(2) { background: var(--skills); }
.foot .stripes i:nth-child(3) { background: var(--writing); }
.foot .stripes i:nth-child(4) { background: var(--education); }
.foot .stripes i:nth-child(5) { background: var(--ai); }
.foot p { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); margin-left: auto; }
.foot a { color: var(--ink); font-weight: 700; }
.foot a:hover { color: var(--career); }

@media (max-width: 640px) {
  .stop-head .stopnum { display: none; }
  .foot p { margin-left: 0; }
}