/* Reading surfaces extend the portfolio's local Satoshi and midnight palette. */
.guide-page .guide-header {
  position: static;
  width: min(1120px, calc(100% - 3rem));
  margin-inline: auto;
}
.guide-page .guide-header a { min-height: 44px; display: inline-flex; align-items: center; }
.guide-article { width: min(72ch, calc(100% - 3rem)); margin: clamp(40px, 7vw, 90px) auto 0; }
.guide-article h1 {
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0 0 24px;
}
.guide-article h2 { margin: 52px 0 16px; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; text-wrap: balance; }
.guide-article p,
.guide-article li { color: var(--muted); }
.guide-article .guide-lead { color: var(--fg); font-size: 1.2rem; line-height: 1.65; }
.guide-byline { font-size: .9375rem; margin-bottom: 32px; }
.guide-article a,
.guide-footer a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.guide-article a:hover,
.guide-footer a:hover { color: var(--fg); }
.guide-article li { padding-left: .25rem; margin-block: 12px; }
.guide-article ul,
.guide-article ol { padding-left: 1.5rem; }
.guide-article figure { margin: 36px 0; }
.guide-article figure img { width: 100%; height: auto; border-radius: 12px; }
.guide-article figcaption { color: var(--muted); font-size: .9375rem; margin-top: 12px; }
.guide-article .guide-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 520px; margin-inline: auto; }
.guide-screens figcaption { grid-column: 1 / -1; margin: 0; }
.guide-article .maker-note { margin-block: 32px; padding-block: 20px; border-block: 1px solid var(--line); }
.guide-article .guide-next { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.guide-footer { width: min(72ch, calc(100% - 3rem)); margin: 64px auto 32px; display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: .9375rem; }
.guide-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 480px) {
  .guide-page .guide-header { align-items: flex-start; gap: 12px; }
  .guide-page .guide-header nav { justify-content: flex-end; gap: 0 16px; }
  .guide-article .guide-screens { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .guide-page { scroll-behavior: auto; } }