/* ───────────────────────────────────────────────────────────────
   IGS Beacon — public site (landing + about)
   Shared by /site/index.html and /site/about.html. The dashboard at
   /app is themed from the same palette via src/styles.css tokens,
   so the marketing pages and the tool read as one product.

   Navy carries the structure and the brighter blue marks anything you can
   act on. Green/amber/red are deliberately left out of the brand palette,
   because on these pages those three carry Lighthouse's own score meaning
   and must never read as decoration.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper:      #FFFFFF;
  --paper-sink: #F0F3F9;
  --paper-tint: #F8FAFD;
  --ink:        #0B1220;
  --ink-soft:   #2B3648;
  --ink-faint:  #626F86;
  --line:       #E3E8F2;
  --line-soft:  #EDF1F8;

  --brand:       #14275E;
  --brand-lift:  #2B54DE;
  --brand-wash:  rgba(43,84,222,.10);

  /* semantic — Lighthouse's own thresholds, never used as accent */
  --good:       #15803D;
  --mid:        #B45309;
  --bad:        #B42318;
  --good-wash:  rgba(21,128,61,.1);
  --mid-wash:   rgba(180,83,9,.1);
  --bad-wash:   rgba(180,35,24,.08);

  --display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 58ch;
  --shadow: 0 1px 2px rgba(11,18,17,.06), 0 14px 34px -18px rgba(11,18,17,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 800;
  text-wrap: balance; margin: 0; letter-spacing: -.02em;
}

a { color: inherit; }

.wrap { max-width: 1140px; margin-inline: auto; padding-inline: var(--gutter); }

.tag {
  font-family: var(--mono); font-size: .79rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 1rem;
}

/* ── Masthead ────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}
.masthead__brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.masthead__logo { height: 30px; width: auto; display: block; }
.masthead__name {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1;
  padding-left: .9rem; border-left: 2px solid var(--line); letter-spacing: -.02em;
}
.nav { display: flex; align-items: center; gap: 1.4rem; }
/* :not(.btn) matters — a bare `.nav a` rule (specificity 0-1-1) outranks
   `.btn` (0-1-0) and would repaint the call-to-action's text dark on its own
   dark navy fill. */
.nav a:not(.btn) {
  font-family: var(--mono); font-size: .82rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.nav a:not(.btn):hover { color: var(--brand); text-decoration: underline; text-underline-offset: .25em; }
.nav a[aria-current="page"]:not(.btn) { color: var(--brand); }
/* Same interaction language as the dashboard (src/styles.css): colour shift on
   hover, a real press on :active, and a keyboard-only focus ring. */
.btn {
  font-family: var(--body); font-size: .88rem; font-weight: 700;
  background: var(--brand); color: #fff; border-radius: 6px;
  padding: .55rem 1rem; text-decoration: none; display: inline-block;
  border: 2px solid var(--brand);
  transition: background .13s ease, border-color .13s ease, color .13s ease,
              box-shadow .13s ease, transform .13s ease;
}
.btn:hover { background: var(--brand-lift); border-color: var(--brand-lift); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-wash);
  border-color: var(--brand-lift);
}
/* Padding now matches .btn exactly — it used to be trimmed to offset a border
   the filled button didn't carry, and both have one now. */
.btn--ghost {
  background: transparent; color: var(--brand);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--brand-wash); border-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition-duration: .001ms; }
  .btn:active { transform: none; }
}

/* ── Section furniture ───────────────────────────────────────── */
.band { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 2px solid var(--line); }
.band--sunk { background: var(--paper-sink); }
/* Section heads follow the hero. They used to sit in a 58ch column — measured
   at the block's own 16px, so barely 500px of a 1140px page — which put a
   large empty field to the right of every heading on both pages. Now the
   heading takes the width it needs and its description sits alongside it, so
   the row is filled rather than half used. */
.band__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.band__head h2 {
  font-size: clamp(2.15rem, 4.2vw, 3.3rem); line-height: 1.03;
  margin-bottom: .75rem; max-width: 20ch; text-wrap: balance;
}
.band__head p { color: var(--ink-soft); margin: 0; font-size: 1.08rem; font-weight: 500; }
.band__head h2 + p { max-width: 52ch; }

/* Paired only when there is a description to pair with — a lone heading would
   leave the second column empty, which is the exact problem being fixed. */
.band__head:has(h2 + p) {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.band__head:has(h2 + p) .tag { grid-column: 1 / -1; }
.band__head:has(h2 + p) h2 { margin-bottom: 0; }
@media (max-width: 880px) {
  .band__head:has(h2 + p) { grid-template-columns: 1fr; align-items: start; }
  .band__head:has(h2 + p) h2 { margin-bottom: .75rem; }
}

/* ── Opening ─────────────────────────────────────────────────── */
.open { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }

/* The headline spans the full page rather than sharing a row with the reading
   card. Previously it sat in a 1.12fr column capped at 15ch while the card was
   bottom-aligned in the other column, so the whole top-right of the hero was
   empty — the headline read as pushed into a corner rather than as the
   opening statement. Now it gets the full measure and the card pairs with the
   supporting copy underneath, where their heights actually match. */
.open__head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.open h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: .99; letter-spacing: -.035em;
  margin-bottom: 0; text-wrap: balance;
}
.open__body {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 2px solid var(--line);
}
@media (max-width: 880px) { .open__body { grid-template-columns: 1fr; } }
.open h1 em { font-style: normal; color: var(--brand); }
.open__lede {
  font-size: clamp(1.1rem, 1.6vw, 1.26rem); font-weight: 500; line-height: 1.55;
  color: var(--ink-soft); max-width: 42ch; margin: 0 0 1.9rem;
}
.open__lede b { color: var(--ink); font-weight: 700; }
.open__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.6rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  padding: .34rem .68rem; border-radius: 5px;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--paper-tint);
}

/* Reading card — a result, not an input: the trend is the product */
.reading {
  background: var(--paper); border: 2px solid var(--line);
  border-radius: 8px; padding: 1.25rem 1.35rem 1.15rem; box-shadow: var(--shadow);
}
.reading__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.reading__url { font-family: var(--mono); font-size: .92rem; font-weight: 700; color: var(--ink); }
.reading__when { font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--ink-faint); }
.reading__score { display: flex; align-items: baseline; gap: .6rem; margin: .75rem 0 .15rem; }
.reading__num {
  font-family: var(--mono); font-weight: 700; font-size: 3.4rem; line-height: 1;
  color: var(--good); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.reading__delta { font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--good); }
.reading__cat { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.spark { display: block; width: 100%; height: auto; margin: .95rem 0 .6rem; color: var(--ink); }
.reading__foot {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1.5px solid var(--line-soft); padding-top: .7rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--ink-faint);
}

/* ── Walkthrough ─────────────────────────────────────────────── */
.walk__track { height: 460vh; }
.walk__stage {
  position: sticky; top: 0; min-height: 100vh;
  display: grid; grid-template-columns: minmax(0,.66fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem); align-content: center;
  padding: 3.5rem 0;
}
@media (max-width: 1000px) {
  .walk__track { height: auto; }
  .walk__stage { position: static; min-height: 0; grid-template-columns: 1fr; padding: 0; gap: 2rem; }
}

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.step {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .3rem 1rem; align-items: baseline;
  padding: .9rem 0; border-top: 1.5px solid var(--line-soft);
  opacity: .62; transition: opacity .35s ease;
}
.step:first-child { border-top: 0; }
.step[data-on="true"] { opacity: 1; }
.step__n {
  font-family: var(--mono); font-size: .84rem; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.step[data-on="true"] .step__n { color: var(--brand); }
.step__title { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.step__note { grid-column: 2; margin: .25rem 0 0; font-size: .98rem; font-weight: 500; color: var(--ink-soft); }
.step__note code {
  font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--brand);
  background: var(--brand-wash); padding: .08em .35em; border-radius: 4px;
}
.step__note b { color: var(--ink); font-weight: 700; }

/* The app itself, mocked — same labels and flow as the real screens */
.screen { position: relative; }
.pane {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .4s ease;
  display: flex; flex-direction: column; justify-content: center;
}
.pane[data-on="true"] { opacity: 1; }
.screen__sizer { visibility: hidden; }

.ui {
  border: 2px solid var(--line); border-radius: 9px; background: var(--paper);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.ui__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 2px solid var(--line-soft); background: var(--paper-tint);
}
.ui__title { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ui__meta { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.ui__body { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.ui__hint { font-family: var(--mono); font-size: .78rem; font-weight: 500; color: var(--ink-faint); }

.ui__box {
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper-tint);
  padding: .7rem .8rem; display: flex; flex-direction: column; gap: .32rem;
}
.ui__url { font-family: var(--mono); font-size: .86rem; font-weight: 500; color: var(--ink-soft); }
.ui__field {
  border: 1.5px solid var(--line); border-radius: 6px; padding: .55rem .8rem;
  font-family: var(--mono); font-size: .88rem; font-weight: 600; color: var(--ink); background: var(--paper);
  display: flex; align-items: center; gap: .1rem;
}
.caret { display: inline-block; width: 2px; height: 1em; background: var(--brand); transform: translateY(.12em); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ui__actions { display: flex; align-items: center; gap: .7rem; }
.ui__btn {
  font-family: var(--body); font-size: .88rem; font-weight: 700;
  background: var(--brand); color: #fff; border-radius: 6px; padding: .5rem .95rem;
}

.ui__row {
  display: grid; align-items: center; gap: .8rem;
  padding: .45rem 0; border-top: 1.5px solid var(--line-soft);
  font-family: var(--mono); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ui__row:first-of-type { border-top: 0; }
.ui__row--head { color: var(--ink-faint); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-top: 0; padding-top: 0; }
.r-run { grid-template-columns: 1fr 6rem 2.6rem; }
.r-rep { grid-template-columns: 1fr repeat(4, 3.3rem); }
.r-cmp { grid-template-columns: 1fr 3.1rem 1rem 3.1rem 4.2rem; }
.ui__page { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui__n { text-align: right; color: var(--ink-soft); }
.ui__n--good { color: var(--good); font-weight: 700; }
.ui__n--mid { color: var(--mid); font-weight: 700; }
.ui__arrow { color: var(--ink-faint); text-align: center; }
.ui__delta { text-align: right; font-weight: 700; }
.up { color: var(--good); } .down { color: var(--bad); } .flat { color: var(--ink-faint); }

.pill {
  justify-self: start; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 999px; border: 1.5px solid var(--line);
  color: var(--ink-faint); background: var(--paper-tint);
}
.pill--done { color: var(--good); border-color: rgba(21,128,61,.35); background: var(--good-wash); }
.pill--running { color: var(--brand); border-color: rgba(20,39,94,.35); background: var(--brand-wash); }

.ui__toggle { display: flex; gap: .35rem; }
.ui__tab {
  font-family: var(--mono); font-size: .78rem; font-weight: 700; padding: .3rem .65rem;
  border: 1.5px solid var(--line); border-radius: 6px; color: var(--ink-faint); background: var(--paper);
}
.ui__tab[data-sel="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ui__picker { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .82rem; font-weight: 600; }
.ui__sel {
  flex: 1; border: 1.5px solid var(--line); border-radius: 6px; padding: .42rem .65rem;
  background: var(--paper); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui__vs { color: var(--ink-faint); font-weight: 700; }
.ui__summary { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-faint); }

/* ── Three questions ─────────────────────────────────────────── */
.qs { display: grid; gap: 0; }
.q {
  display: grid; grid-template-columns: 13ch minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(1rem, 3vw, 2.25rem); align-items: start;
  padding: 1.75rem 0; border-top: 2px solid var(--line);
}
.q:last-child { border-bottom: 2px solid var(--line); }
@media (max-width: 860px) { .q { grid-template-columns: 1fr; gap: .85rem; } }
.q__which { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); padding-top: .4rem; }
.q__ask { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .45rem; }
.q__note { margin: 0; color: var(--ink-soft); font-size: .99rem; font-weight: 500; }
.slab {
  margin: 0; padding: .95rem 1.1rem; border-radius: 7px; overflow-x: auto;
  background: var(--paper); border: 2px solid var(--line);
  font-family: var(--mono); font-size: .84rem; font-weight: 600; line-height: 1.75; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.slab .dim { color: var(--ink-faint); font-weight: 500; }
.slab .val { color: var(--brand); font-weight: 700; }

/* ── Conditions ──────────────────────────────────────────────── */
.conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.1rem; margin-top: 2rem; }
.cond {
  border: 2px solid var(--line); border-left-width: 5px; border-radius: 7px;
  padding: 1.25rem 1.35rem; background: var(--paper);
  display: flex; flex-direction: column; gap: .55rem;
}
.cond--skip  { border-left-color: var(--ink-faint); }
.cond--noisy { border-left-color: var(--mid); background: var(--mid-wash); }
.cond--clean { border-left-color: var(--good); background: var(--good-wash); }
.cond__state { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cond--skip  .cond__state { color: var(--ink-faint); }
.cond--noisy .cond__state { color: var(--mid); }
.cond--clean .cond__state { color: var(--good); }
.cond h3 { font-size: 1.42rem; line-height: 1.18; }
.cond p { margin: 0; color: var(--ink-soft); font-size: .97rem; font-weight: 500; }
.cond code { font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--brand); }

/* ── Ways in ─────────────────────────────────────────────────── */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.5rem; }
.way { display: flex; flex-direction: column; gap: .55rem; }
.way__n {
  font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--brand);
  padding-bottom: .55rem; border-bottom: 2px solid var(--line);
}
.way h3 { font-size: 1.55rem; }
.way__how { font-family: var(--mono); font-size: .85rem; font-weight: 500; color: var(--ink-soft); line-height: 1.8; }

/* ── Extension ───────────────────────────────────────────────── */
.ext {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 900px) { .ext { grid-template-columns: 1fr; } }
.ext__body { display: flex; flex-direction: column; gap: 1.4rem; }
.ext__note { margin: 0; font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.ext__note code { font-family: var(--mono); color: var(--brand); font-weight: 700; }

/* A scaled-down stand-in for the extension's actual popup — same controls
   and the same 320px proportions it really opens at. */
.ext__popup {
  border: 2px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow); max-width: 340px;
}
.ext__bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-bottom: 2px solid var(--line-soft); background: var(--paper-tint);
}
.ext__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); flex: none; }
.ext__name { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.ext__inner { padding: .85rem; display: flex; flex-direction: column; gap: .5rem; }
.ext__cta {
  background: var(--brand-lift); color: #fff; border-radius: 6px;
  padding: .5rem; text-align: center; font-size: .82rem; font-weight: 700;
}
.ext__label {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .2rem;
}
.ext__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline;
  padding: .35rem 0; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .76rem;
}
.ext__row--muted { color: var(--ink-faint); }
.ext__url { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext__row--muted .ext__url { color: var(--ink-faint); font-weight: 500; }
.ext__ok { color: var(--good); font-weight: 700; font-size: .7rem; }
.ext__skip { color: var(--ink-faint); font-weight: 600; font-size: .7rem; }
.ext__ago { color: var(--ink-faint); font-size: .7rem; font-weight: 500; }

/* ── About page ──────────────────────────────────────────────── */
/* Carries its own top margin: the hero h1 sets margin-bottom: 0 so the landing
   page can space the headline block itself, and this page has no such wrapper. */
.about__lede {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.5;
  color: var(--ink-soft); max-width: 46ch; margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
}
.prose { max-width: var(--measure); }
.prose p { color: var(--ink-soft); font-size: 1.04rem; font-weight: 500; margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: var(--ink); font-weight: 700; }
.prose code {
  font-family: var(--mono); font-size: .9rem; font-weight: 700; color: var(--brand);
  background: var(--brand-wash); padding: .08em .35em; border-radius: 4px;
}

/* 300px minimum so five cards wrap 3 + 2 inside the 1140px wrap rather than
   4 + 1 with a lone card on the second row. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.1rem; }
.person {
  border: 2px solid var(--line); border-radius: 7px; background: var(--paper);
  padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem;
}
.person__name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.person__role { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--brand); }

.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.25rem; }
.stack__group { display: flex; flex-direction: column; gap: .5rem; }
.stack__label {
  font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--brand);
  padding-bottom: .5rem; border-bottom: 2px solid var(--line);
  letter-spacing: .06em; text-transform: uppercase;
}
.stack__items { font-family: var(--mono); font-size: .85rem; font-weight: 500; color: var(--ink-soft); line-height: 1.85; }

/* ── Colophon ────────────────────────────────────────────────── */
.colophon { border-top: 2px solid var(--line); padding: 2rem 0 3rem; }
.colophon__inner { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; }
.colophon__logo { height: 26px; }
.colophon p { margin: 0; font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink-faint); }
.colophon__links { display: flex; gap: 1.2rem; }
.colophon__links a {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--ink-faint); text-decoration: none;
}
.colophon__links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .25em; }

:focus-visible { outline: 3px solid var(--brand-lift); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .walk__track { height: auto; }
  .walk__stage { position: static; min-height: 0; padding: 0; }
  .step { opacity: 1 !important; }
  .screen { display: flex; flex-direction: column; gap: 1rem; }
  .screen__sizer { display: none; }
  .pane { position: static; opacity: 1 !important; }
}