/* Readability overrides for the restored mint/black introduction. Keep its original content and layout. */
html { font-size: 17px; }
body { font-size: 1rem; line-height: 1.75; }
.header .bar { flex-wrap: wrap; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
nav { flex-wrap: wrap; gap: 8px 24px; }
nav a { font-size: .85rem; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.25; letter-spacing: -.04em; max-width: 900px; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.3rem); line-height: 1.4; }
.flow h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.45; }
.lead { font-size: 1.15rem; }
.button { font-size: .95rem; min-height: 48px; white-space: normal; }
.button:hover { background: #303030; }
.hero-bottom, .flow, .next, .foot, .section-head { min-width: 0; }
.flow > *, .next > *, .section-head > *, .moments > *, .principles > * { min-width: 0; }
.capture { border-radius: 16px; }
.capture-caption { flex-wrap: wrap; font-size: .75rem; }
.moment p, .sub { font-size: 1rem; }
.note, .foot p { font-size: .8rem; }
.principles p, .ready, details p { font-size: .95rem; }
.footer-links a, .plain-link, .moment a { font-size: .85rem; }
:target { scroll-margin-top: 180px; }
@media (max-width: 900px) {
  .header { position: static; }
  html { scroll-padding-top: 20px; }
  :target { scroll-margin-top: 20px; }
  .walk { flex-wrap: wrap; }
}
@media (max-width: 580px) {
  .hero h1 { font-size: 2rem; margin-top: 32px; }
  .lead { font-size: 1.05rem; }
  .hero, .section { padding-block: 40px; }
  .hero-top .eyebrow, .status { font-size: .8rem; }
  nav { justify-content: flex-start; gap: 4px 18px; }
  nav a { font-size: .85rem; }
  .walk-item b { font-size: 1rem; }
  .walk-item small { font-size: .75rem; }
  .capture { min-height: 0; padding: 20px; }
  .capture img { max-height: 580px; }
}
@media (forced-colors: active) {
  .button { border: 1px solid ButtonText; }
}