/* css/pages/guide.css : the neighborhood guides (/melissa/<slug> and /mckinney/willow-wood), written by
   tools/build_guides.py. Linked after site.css; unlayered. Typographic only, on the white page: a breadcrumb, the H1
   and first lines, the At a glance table with its data note, the Q&As (site.css .answers), more guides and the
   sources line. Colors are the site's tokens only, so dark theme follows on its own. The table stays a real table
   at every width (row headers keep their meaning for screen readers) and wraps inside the gutter, no side scroll. */

.guide { background: var(--bg); color: var(--fg); }

/* ---------- top: breadcrumb, H1, first lines ---------- */
.guide-top { padding-block: clamp(16px, 4vw, 56px) clamp(40px, 6vw, 80px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin: 0 0 clamp(16px, 3vw, 40px);
  padding: 0; list-style: none; font-size: var(--fs-label); line-height: 1.4; color: var(--fg-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--fg-muted); }
.crumbs a { display: inline-block; padding-block: 10px; color: var(--fg-2); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.crumbs [aria-current="page"] { color: var(--fg); font-weight: 500; }

.guide__h1 { max-width: 19ch; font-weight: 300; font-size: clamp(2.125rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.045em;
  overflow-wrap: break-word; }
.guide__h1 em { line-height: 1; }
.guide-top .first-lines { max-width: 66ch; margin-top: clamp(20px, 3vw, 36px); }

/* ---------- At a glance ---------- */
.guide-glance { padding-block: 0 clamp(48px, 8vw, 104px); }
.glance-wrap { max-width: 980px; margin-top: var(--s-5); }
.glance { width: 100%; table-layout: fixed; border-top: 1px solid var(--fg); }
.glance th, .glance td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left;
  line-height: 1.5; overflow-wrap: break-word; hyphens: manual; }
.glance th { width: 36%; padding-right: var(--s-4); font-size: var(--fs-label); font-weight: 600; letter-spacing: .01em; color: var(--fg-2); }
.glance td { font-size: var(--fs-body); color: var(--fg); }
.glance td a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.guide-note { max-width: 80ch; margin-top: var(--s-4); }
@media (min-width: 768px) {
  .glance th { width: 15rem; padding-right: var(--s-6); }
  .glance th, .glance td { padding-block: 16px; }
  .glance td { font-size: 1.0625rem; }
}

/* ---------- Q&As, snapshot, more guides, sources ---------- */
.guide .answers { border-top: 1px solid var(--line); }
.guide .answers__a a { overflow-wrap: anywhere; }
.guide-snapshot { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.guide-snapshot__line { max-width: 72ch; font-size: var(--fs-body-guide); line-height: 1.6; color: var(--fg-2); }
.guide-more { padding-top: clamp(40px, 6vw, 80px); }
.guide-more .guides { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0 var(--s-6); max-width: 980px; }
.guide-more .guides li { border-top: 1px solid var(--line); }
.guide-more .guides a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px;
  padding-block: var(--s-2); text-decoration: none; }
.guide-more .guides a .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.guide-more .guides a:hover span, .guide-more .guides a:focus-visible span { text-decoration: underline; text-underline-offset: .2em; }
.guide-more .guides a:hover .icon { transform: translateX(3px); }
.guide-more .sources { margin-top: clamp(40px, 6vw, 64px); padding-top: var(--s-5); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .guide-more .guides a .icon { transition: none; } }