/* Positively Devious v3 shared system, adapted for the static Climb build.
   Tokens are generated and contrast-verified by build.py; do not hand-edit values. */
:root {
  color-scheme: light;
  --paper: #FAF7F2;
  --card: #FFFFFF;
  --ink: #1A1D22;
  --muted: #4E555E;
  --on-ink: #C7CDD5;
  --accent: #1D4FA8;
  --sky: #8FB4F0;
  --hairline: #E3DCD0;
  --rail: #C9C2B4;
  --caption: #EDEAE2;
  --shadow: 0 1px 2px rgb(20 23 27 / .06), 0 12px 32px rgb(20 23 27 / .08);
  --shadow-lift: 0 2px 4px rgb(20 23 27 / .08), 0 22px 52px rgb(20 23 27 / .13);
  --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --font: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --wrap: 70rem;
  accent-color: var(--accent);
}
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; background: var(--paper); scroll-behavior: smooth; }
body {
  min-width: 0; margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 1.125rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { min-width: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 {
  max-inline-size: 27ch; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; text-wrap: balance; overflow-wrap: break-word;
}
main p, main li { max-inline-size: 62ch; text-wrap: pretty; overflow-wrap: break-word; }
ul, ol { margin-block: 0; }
li { margin-block: .45rem; }
li::marker { color: var(--accent); font-weight: 700; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s7) 0; }
[id] { scroll-margin-block-start: 6rem; }
::selection { background: var(--accent); color: var(--card); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem,4vw,2.5rem); }

a { color: var(--accent); overflow-wrap: break-word; text-underline-offset: .18em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .foot :focus-visible { outline-color: var(--paper); }
code {
  background: var(--caption); border-radius: 4px; padding: .1rem .45rem;
  font-family: ui-monospace,"Cascadia Code",Consolas,Menlo,monospace; font-size: .9375rem;
}
/* Route references stay quiet and human. */
a.route { color: var(--accent); font-size: .9375rem; }
.blank { white-space: nowrap; letter-spacing: .04em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink);
  color: var(--paper); padding: .6em 1em; border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 0; }

/* Quiet staging lock and the approved sticky navigation. */
.staging { background: var(--caption); border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: .9375rem; }
.staging .inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: .45rem clamp(1.25rem,4vw,2.5rem); }
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hairline);
  box-shadow: 0 5px 18px rgb(20 23 27 / .035); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1.5rem;
  padding-block: .95rem; flex-wrap: wrap; }
.wordmark { color: var(--ink); font-size: 1.09375rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap; transition: color .16s ease; }
.wordmark:hover { color: var(--accent); }
.nav__links { display: flex; gap: clamp(1rem,2.5vw,1.9rem); list-style: none; margin: 0; padding: 0; }
.nav__links li { margin: 0; }
.nav__links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink);
  font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: normal; }
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Ink front door. There is deliberately no photography layer. */
.hero { background: var(--ink); color: var(--paper); }
.hero__band { padding-block: clamp(3.5rem,8vw,6rem); }
.hero__eyebrow { color: var(--on-ink); font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.15; margin-bottom: var(--s4); }
.hero__line { max-inline-size: none; }
.hero__line strong { display: block; max-inline-size: 27ch; color: var(--paper);
  font-size: clamp(2.45rem,1.45rem + 4.3vw,4.75rem); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.02; text-wrap: balance; }
.hero__mapline { display: block; color: var(--sky); font-size: clamp(1.2rem,1.05rem + .8vw,1.55rem);
  font-style: normal; font-weight: 700; margin-top: var(--s4); }

/* Shared calls to action. */
.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .55em;
  background: var(--paper); border: 1px solid transparent; border-radius: 10px;
  box-shadow: 0 8px 24px rgb(20 23 27 / .12); color: var(--ink); font-size: 1.0625rem;
  font-weight: 700; padding: .78em 1.35em; text-decoration: none;
  transition: transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease; }
.btn:hover { background: var(--card); border-color: var(--hairline); box-shadow: 0 12px 32px rgb(20 23 27 / .18);
  color: var(--ink); transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--card); }
.btn--accent:hover { background: var(--ink); color: var(--card); }
.link-quiet, .actionbox a { color: var(--paper); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgb(250 247 242 / .55); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link-quiet:hover, .actionbox a:hover { color: var(--sky); text-decoration-color: currentColor; }

/* Six-step card rail. */
.stations { padding-block: clamp(3.75rem,8vw,6rem); }
.steprail-clip { overflow: hidden; margin: 0 calc(50% - 50vw) var(--s5);
  -webkit-mask-image: linear-gradient(to right,transparent,#000 3%,#000 96%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 3%,#000 96%,transparent); }
.stepgrid { display: flex; gap: 1rem; list-style: none; margin: 0;
  padding: .5rem max(calc(50vw - 35rem + 1.5rem),1.5rem) 1.25rem; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding-left: max(calc(50vw - 35rem + 1.5rem),1.5rem);
  scrollbar-width: none; -ms-overflow-style: none; }
.stepgrid::-webkit-scrollbar { display: none; }
.stepgrid > li { display: flex; flex: 0 0 clamp(16.5rem,24vw,20rem); margin: 0; scroll-snap-align: start; }
.stepgrid .stepcard { width: 100%; }
.stepcard { position: relative; display: flex; min-width: 0; min-height: 22rem; flex-direction: column;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow);
  color: var(--ink); padding: clamp(1.45rem,3vw,2rem); text-decoration: none;
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
a.stepcard:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); color: var(--ink); transform: translateY(-5px); }
.stepcard__art { display: block; height: 8rem; overflow: hidden; background: var(--paper);
  border-bottom: 1px solid var(--hairline); border-radius: 10px 10px 0 0; margin: -.25rem -.25rem var(--s5);
  padding: .55rem .7rem .15rem; }
.stepcard__art img { width: 100%; height: 100%; object-fit: contain; }
.stepcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.stepcard__num { color: var(--accent); font-size: 1.55rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.stepcard__arrow { color: var(--rail); font-size: 1.25rem; line-height: 1; }
a.stepcard:hover .stepcard__arrow { color: var(--accent); }
.stepcard__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; margin-top: var(--s5); }
.stepcard__gloss { color: var(--accent); font-size: .9375rem; font-weight: 700; margin-top: .35rem; }
.stepcaption { color: var(--muted); font-size: .9375rem; }
.stepcaption__swipe { display: none; }

/* Breadcrumb and destination graphic on inside pages. */
.crumbs { padding-block: var(--s4) 0; }
.crumbs__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .55rem; list-style: none; margin: 0; padding: 0;
  color: var(--muted); font-size: .9375rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: '/'; margin-right: .55rem; color: var(--rail); }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-weight: 600;
  text-decoration-color: rgb(78 85 94 / .4); text-underline-offset: 3px; }
.crumbs [aria-current='page'] { color: var(--ink); font-weight: 700; }
.locator { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); }
.locator svg { display: block; }
.locator .lc-line { stroke: var(--rail); stroke-width: 2; }
.locator .lc-live { stroke: var(--accent); stroke-width: 3.5; }
.locator .lc-dot { fill: var(--paper); stroke: var(--hairline); stroke-width: 2; }
.locator .lc-on { fill: var(--accent); stroke: var(--accent); }
.pagehead { padding-block: clamp(1.75rem,4.5vw,2.75rem) clamp(2rem,5vw,3rem); border-bottom: 1px solid var(--hairline); }
.pagehead__layout { display: grid; grid-template-columns: minmax(0,1fr) clamp(10rem,22vw,13rem);
  align-items: center; gap: clamp(1.25rem,4vw,3rem); }
.pagehead__copy { min-width: 0; }
.pagehead__graphic { display: block; height: 8rem; overflow: hidden; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 12px; padding: .4rem .55rem; }
.pagehead__graphic img { width: 100%; height: 100%; object-fit: contain; }
.pagehead__num { display: block; color: var(--accent); font-size: clamp(1.35rem,1.1rem + 1.2vw,1.8rem);
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; margin-bottom: .45rem; }
.pagehead h1 { max-width: 22ch; font-size: clamp(2rem,1.4rem + 2.6vw,3rem); line-height: 1.05; }
.pagehead__intro { margin-top: var(--s5); }
.pagehead__intro p { color: var(--muted); margin-top: var(--s4); }
.pagehead__intro p:first-child { margin-top: 0; }

/* Sections and map-page arrangements. */
.sec { padding-block: clamp(4.25rem,9vw,7rem); }
.sec--compact { padding-block: clamp(3.25rem,7vw,5rem); }
.sec--white { background: var(--card); border-block: 1px solid var(--hairline); }
.step-page .sec { padding-block: clamp(2.5rem,6vw,4rem); }
.sec h2 { font-size: clamp(1.75rem,1.27rem + 2.1vw,2.5rem); line-height: 1.1; margin-bottom: var(--s4); }
.step-page .sec h2 { font-size: clamp(1.4rem,1.15rem + 1.2vw,1.85rem); line-height: 1.15; }
.sec > .wrap > h2::after { content: ''; display: block; width: 3.5rem; height: 1px;
  background: var(--accent); margin-top: var(--s4); }
.sec h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: var(--s6) 0 .45rem; }
.sec p + p { margin-top: var(--s4); }
.sec ul, .sec ol { padding-left: 1.4rem; }
.sec-intro p { color: var(--muted); }
.sec-whichone .wrap > p { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow); margin-top: var(--s4); padding: clamp(1.35rem,3vw,1.8rem); }
.sec-whichone .wrap > p:first-of-type { margin-top: var(--s5); }
.sec-whichone .wrap > p > strong:first-child { display: block; max-inline-size: 38ch;
  font-size: 1.125rem; line-height: 1.35; margin-bottom: .4rem; }
.sec-coachrow p:last-child { max-inline-size: none; }
.sec-coachrow p a, .choice { display: inline-flex; min-height: 44px; align-items: center; min-width: 0;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow);
  color: var(--ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  padding: .75rem 1rem; margin: .35rem .35rem .35rem 0; text-decoration: none;
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.sec-coachrow p a:hover, .choice:hover { border-color: var(--accent); box-shadow: var(--shadow-lift);
  color: var(--ink); transform: translateY(-2px); }
.dotlist, .sec-notes ul { display: grid; gap: .7rem; max-width: 56ch; list-style: none; margin: 0; padding: 0; }
.dotlist li, .sec-notes li { position: relative; margin: 0; padding-left: 1.6rem; }
.dotlist li::before, .sec-notes li::before { content: ''; position: absolute; left: .15rem; top: .52em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }

/* Playbook furniture. */
.sec-locate p:first-of-type { color: var(--ink); font-size: 1.1875rem; line-height: 1.5; }
.card { min-width: 0; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow); padding: clamp(1.4rem,3vw,2rem); }
.practise-card { border-left: 4px solid var(--accent); }
.sec-practise .card h2, .sec-shelf .card h2, .sec-evidence .card h2 { margin-top: 0; }
.sec-shelf .card > p:first-of-type, .sec-evidence .card > p:first-of-type { color: var(--muted); font-size: .9375rem; }
.sec-evidence li { font-size: .9375rem; line-height: 1.55; }
.actionbox { background: linear-gradient(125deg,var(--ink) 0%,var(--ink) 60%,var(--muted) 165%);
  color: var(--paper); border: 1px solid var(--muted); border-radius: 16px;
  box-shadow: 0 24px 56px rgb(20 23 27 / .18); padding: clamp(1.75rem,5vw,3rem); }
.actionbox h2 { color: var(--paper); margin-bottom: var(--s3); }
.actionbox p { max-width: 56ch; color: var(--paper); }
.actionbox strong { color: var(--paper); }
.sec-wherenext { border-top: 1px solid var(--hairline); }
.sec-wherenext .dotlist { margin-top: var(--s5); }
.rowcards { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.rowcard { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  min-width: 0; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow); color: var(--ink); padding: 1.1rem 1.35rem; text-decoration: none;
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.rowcard:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); color: var(--ink); transform: translateY(-2px); }

/* Refined footer. */
.foot { background: linear-gradient(125deg,var(--ink) 0%,var(--ink) 58%,var(--muted) 150%);
  border-top: 1px solid var(--sky); color: var(--paper); padding-block: clamp(2.5rem,6vw,4rem); }
.foot__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.foot__mark { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .35rem; }
.foot__line { max-width: 62ch; color: var(--paper); font-size: .9375rem; }

@media (max-width: 900px) {
  .pagehead__layout { grid-template-columns: minmax(0,1fr) 10rem; }
}
@media (max-width: 640px) {
  .nav__row { padding-block: .8rem; }
  .nav__links { width: 100%; }
  .nav__links a { font-size: .9375rem; }
  .hero__band { padding-block: 3.25rem 3.75rem; }
  .stepcaption__swipe { display: inline; }
  .pagehead__layout { grid-template-columns: minmax(0,1fr) 7.5rem; gap: .75rem; }
  .pagehead__graphic { height: 7rem; padding: .2rem; }
  .actionbox { padding: 1.5rem; }
  .rowcard { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media (forced-colors: active) {
  .steprail-clip { -webkit-mask-image: none; mask-image: none; }
  .stepcard, .card, .choice, .rowcard, .actionbox { border: 1px solid CanvasText; }
  .stepcard__num, .stepcard__gloss, .dotlist li::before, .sec-notes li::before { color: LinkText; forced-color-adjust: auto; }
}
@media print {
  @page { margin: 2cm; }
  * { background: none !important; color: #000 !important; box-shadow: none !important; }
  .staging, .nav__links, .skip, .locator svg, .stepcaption, .pagehead__graphic { display: none !important; }
  /* On paper the map remains one numbered vertical station sequence. */
  .stations { padding-block: 1rem; }
  .steprail-clip { overflow: visible; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .stepgrid { display: block; overflow: visible; padding: 0; }
  .stepgrid > li { display: block; border-bottom: 1pt solid #000; }
  .stepcard { display: grid; grid-template-columns: 2.75rem minmax(0,1fr); min-height: 0;
    border: 0; border-radius: 0; padding: .35rem 0; }
  .stepcard__art, .stepcard__arrow { display: none; }
  .stepcard__top { grid-column: 1; grid-row: 1; align-items: start; border: 0; padding: 0; }
  .stepcard__name { grid-column: 2; grid-row: 1; margin: 0; }
  .stepcard__gloss { grid-column: 2; grid-row: 2; margin: 0; }
  body { font-size: 11pt; line-height: 1.45; }
  a { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  h2, h3 { break-after: avoid; }
  .card, .actionbox { border: 1pt solid #000; }
  .sec-practise .card, .sec-shelf .card { break-inside: avoid; }
  li { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}