/* Guide pages: /guides and /es/guias. Generated markup, see tools/guide_pages.py in the media repo. */
.guide-video, .guide-index { padding-block: 40px 72px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.guide-player { position: sticky; top: 88px; }
.guide-player video { width: 100%; height: auto; max-height: 78vh; aspect-ratio: 1080 / 2128; display: block; border-radius: 22px;
  border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--bg-alt); object-fit: contain; }
.guide-noscript { color: var(--muted); }
.guide-back { color: var(--brand); font-weight: 600; font-size: 15px; text-decoration: none; }
.guide-back::before { content: "‹ "; }
.guide-text h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; line-height: 1.12; margin: 12px 0 14px; text-wrap: balance; }
.guide-text .lead { color: var(--muted); font-size: 18px; margin: 0 0 28px; max-width: 58ch; }
.guide-text h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px; }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 4px; max-width: 58ch; }
.guide-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px;
  border-radius: 12px; font-size: 17px; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.guide-steps li::before { content: counter(step); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.guide-steps li.on { background: var(--brand-tint); color: var(--ink); }
.guide-steps li.on::before { color: var(--brand); }
.guide-seek { all: unset; cursor: pointer; }
.guide-seek:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
.guide-index h1 { font-size: clamp(34px, 5vw, 50px); font-weight: 800; margin: 0 0 12px; }
.guide-index .lead { color: var(--muted); font-size: 18px; margin: 0 0 40px; max-width: 60ch; }
.guide-group { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 36px 0 14px; }
.guide-foot { border-top: 1px solid var(--line); padding-block: 24px; color: var(--muted); font-size: 14px; }
.guide-foot a { color: inherit; }
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .guide-player { position: static; max-width: 340px; margin-inline: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .guide-steps li { transition: none; } }