/*
  /guides/ and /guides/<slug>/ (templates guides.jinja and guide.jinja; owner order 10/30/2026).
  Colors come from the --site-* tokens that .site-page sets for light and dark, so every rule follows the theme.
  Square corners and 1px hairlines, as everywhere else on the site. The article's own typography is .article in style.css.
  Layout: a phone shows the collapsed "On this page" block above the article; from 1,024 px the table of contents is a
  sticky column to the right of the article (the aside comes first in the source so the keyboard reaches it first).
*/

/* ---- The index: cards ------------------------------------------------------------------------------------------ */
.guide-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.guide-card { position: relative; display: flex; flex-direction: column; background: var(--site-panel); border: 1px solid var(--site-rule); transition: border-color 200ms; }
.guide-card:hover, .guide-card:focus-within { border-color: var(--site-link); }
.guide-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1f3b; }
.guide-art, .guide-art img { display: block; width: 100%; height: 100%; }
.guide-art img { object-fit: cover; }
.guide-art-light { display: none; }
:root[data-theme="light"] .guide-art-light { display: block; }
:root[data-theme="light"] .guide-art-dark { display: none; }
.guide-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.5rem 1.6rem; }
.guide-card-meta { margin: 0; min-height: 1.1em; color: var(--site-link); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.guide-card-title { margin: 0.7rem 0 0; font-size: 1.4rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; color: var(--site-ink); }
.guide-card-title a { color: inherit; text-decoration: none; }
.guide-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.guide-card-title a:focus-visible { outline: 2px solid var(--site-link); outline-offset: 4px; }
.guide-card-desc { flex: 1; margin: 0.8rem 0 0; color: var(--site-muted); font-size: 0.98rem; line-height: 1.65; }
.guide-card-go { margin: 1.2rem 0 0; color: var(--site-link); font-size: 0.9rem; font-weight: 700; }

/* ---- A guide: hero title, layout, byline, draft notice ----------------------------------------------------------- */
.site-guide .site-hero h1 { max-width: 30ch; font-size: clamp(2.1rem, 2.5vw, 3rem); line-height: 1.12; }
.site-guides .site-hero h1 { max-width: 20ch; font-size: clamp(2.6rem, 3.8vw, 4.3rem); }
@media (max-width: 1150px) {
  .site-guide .site-hero h1 { font-size: clamp(2rem, 2.9vw, 2.7rem); }
  .site-guides .site-hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
}
@media (max-width: 760px) {
  .site-guide .site-hero h1 { max-width: 21ch; font-size: clamp(1.85rem, 7.2vw, 2.6rem); }
  .site-guides .site-hero h1 { max-width: 16ch; font-size: clamp(2rem, 9vw, 3rem); }
}
.site-guide main > section#guide { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem); }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 76rem; margin: 0 auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 44rem) 15.5rem; justify-content: center; column-gap: clamp(2.5rem, 5vw, 5rem); padding-inline: 2rem; align-items: start; }
  .guide-main { grid-column: 1; grid-row: 1; }
  .guide-toc { grid-column: 2; grid-row: 1; }
}
.guide-main { min-width: 0; }
.guide-byline { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 1.75rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); font-size: 0.9rem; line-height: 1.5; }
.guide-author { color: var(--site-ink); font-weight: 600; }
.guide-author a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.guide-draft { margin: 0 0 1.75rem; padding: 0.9rem 1.1rem; border: 1px solid var(--site-rule); border-left: 4px solid hsl(var(--accent)); background: var(--site-tint); color: var(--site-ink); font-size: 0.95rem; line-height: 1.6; }

/* ---- The table of contents --------------------------------------------------------------------------------------- */
.guide-toc { display: none; }
@media (min-width: 1024px) {
  .guide-toc { display: block; position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; padding-left: 1.1rem; border-left: 1px solid var(--site-rule); }
  .guide-toc-top { display: none; }
}
.guide-toc-title { margin: 0 0 0.8rem; color: var(--site-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-toc ol, .guide-toc-top ol { margin: 0; padding: 0; list-style: none; }
.guide-toc li + li { margin-top: 0.15rem; }
.guide-toc a { display: block; margin-left: -1.1rem; padding: 0.4rem 0.5rem 0.4rem 1.1rem; border-left: 2px solid transparent; color: var(--site-muted); font-size: 0.875rem; line-height: 1.4; text-decoration: none; }
.guide-toc a:hover { color: var(--site-ink); }
.guide-toc a[aria-current="location"] { border-left-color: var(--site-link); color: var(--site-ink); font-weight: 700; }
.guide-toc a:focus-visible, .guide-toc-top summary:focus-visible, .guide-toc-top a:focus-visible { outline: 2px solid var(--site-link); outline-offset: 2px; }
.guide-toc-top { border: 1px solid var(--site-rule); background: var(--site-panel); color: var(--site-ink); }
.guide-toc-top summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; list-style: none; }
.guide-toc-top summary::-webkit-details-marker { display: none; }
.guide-toc-top summary::after { content: ""; width: 0.55rem; height: 0.55rem; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 180ms; }
.guide-toc-top[open] summary::after { transform: rotate(-135deg); }
.guide-toc-count { color: var(--site-muted); font-size: 0.8rem; font-weight: 500; }
.guide-toc-top ol { padding: 0.25rem 1rem 1rem; border-top: 1px solid var(--site-rule); counter-reset: toc; }
.guide-toc-top li { counter-increment: toc; }
.guide-toc-top a { display: flex; gap: 0.7rem; min-height: 2.75rem; align-items: center; padding: 0.4rem 0; color: var(--site-link); font-size: 0.95rem; line-height: 1.35; text-decoration: none; }
.guide-toc-top a::before { content: counter(toc); flex: none; width: 1.4rem; color: var(--site-muted); font-size: 0.8rem; font-weight: 700; }

/* ---- The article: long-form reading ----------------------------------------------------------------------------- */
.site-guide .guide-article { color: var(--site-ink); font-size: 1.0625rem; line-height: 1.8; }
.site-guide .guide-article h2 { max-width: none; margin-top: 2.6em; padding-top: 0.2em; font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; scroll-margin-top: 5.5rem; }
.site-guide .guide-article h2:first-child { margin-top: 0; }
.site-guide .guide-article h3 { margin-top: 2em; color: var(--site-ink); font-size: 1.3rem; scroll-margin-top: 5.5rem; }
@media (min-width: 1024px) { .site-guide .guide-article h2, .site-guide .guide-article h3 { scroll-margin-top: 6.5rem; } }
.site-guide .guide-article a { color: var(--site-link); }
.site-guide .guide-article a:hover { color: var(--site-ink); }
/* Tables: cells wrap at word boundaries; a table wider than the column scrolls inside its own box. */
.site-guide .guide-article table { display: block; width: 100%; overflow-x: auto; margin: 1.75em 0; border: 1px solid var(--site-rule); border-collapse: collapse; font-size: 0.94rem; line-height: 1.55; }
.site-guide .guide-article th, .site-guide .guide-article td { min-width: 7.5rem; padding: 0.65rem 0.85rem; border: 0; border-bottom: 1px solid var(--site-rule); white-space: normal; vertical-align: top; }
.site-guide .guide-article th { background: var(--site-tint); color: var(--site-ink); font-weight: 700; }
.site-guide .guide-article tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--site-tint) 38%, transparent); }
.site-guide .guide-article caption { padding: 0.6rem 0.85rem; color: var(--site-muted); font-size: 0.85rem; text-align: left; caption-side: bottom; }
/* Callouts: Narrative's callout shortcode; the base look is in style.css, here it follows the site's tokens and keeps a clear left bar. */
.site-guide .guide-article .callout { border-color: var(--site-rule) !important; border-left-color: var(--site-link) !important; background: var(--site-tint) !important; color: var(--site-ink) !important; border-radius: 0 !important; }
.site-guide .guide-article .callout > :first-child { margin-top: 0; }
.site-guide .guide-article .callout > :last-child { margin-bottom: 0; }
/* Figures: an image or an inline SVG with a caption; no Mermaid needed. */
.site-guide .guide-article figure { margin: 2.25em 0; }
.site-guide .guide-article figure img, .site-guide .guide-article figure svg { display: block; width: 100%; height: auto; border: 1px solid var(--site-rule); background: var(--site-panel); }
.site-guide .guide-article figcaption { margin-top: 0.7rem; color: var(--site-muted); font-size: 0.875rem; line-height: 1.5; text-align: left; }
.site-guide .guide-article blockquote { border-left-color: var(--site-link); color: var(--site-muted); }
.site-guide .guide-article code { overflow-wrap: anywhere; }

/* ---- Related guides ---------------------------------------------------------------------------------------------- */
.guide-related { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--site-rule); }
.site-guide main .guide-related h2.guide-related-title { margin: 0 0 1.25rem; max-width: none; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.guide-related ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .guide-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-related li { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--site-rule); background: var(--site-panel); transition: border-color 200ms; }
.guide-related li:hover, .guide-related li:focus-within { border-color: var(--site-link); }
.guide-related-link { color: var(--site-ink); font-size: 1.05rem; font-weight: 800; line-height: 1.3; text-decoration: none; }
.guide-related-link::after { content: ""; position: absolute; inset: 0; }
.guide-related-meta { color: var(--site-link); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.guide-related-desc { color: var(--site-muted); font-size: 0.9rem; line-height: 1.55; }
.guide-related-all { margin: 1.25rem 0 0; font-size: 0.95rem; font-weight: 700; }
.guide-related-all a { color: var(--site-link); }