/* Shared stylesheet for the public guides (public/guides/*.html) and the hub (public/guides.html).
   Source of truth: scripts/guides/assets/guides.css. node scripts/guides/build.mjs copies it to public/guides/guides.css
   and stamps its fingerprint into every page, so an edit here reaches the pages only through the generator.
   Plain CSS, no framework. Contrast ratios (checked 17 Oct 2026, WCAG relative luminance): body text 16.4:1, secondary
   text 8.4:1, accent text 6.4:1 on the paper colour; the dark theme is 14.6:1, 8.6:1 and 8.4:1. */

:root {
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --tint: #F1ECE2;
  --ink: #1A1A1A;
  --ink-2: #4A4A4A;
  --heading: #1A2942;
  --link: #1A2942;
  --accent: #B8744D;        /* decoration only: rules, borders, markers */
  --accent-text: #8A4B26;   /* accent as text: 6.4:1 on the page colour */
  --line: #E3DACB;
  --line-strong: #9A8F7E;
  --focus: #1A2942;
  --cta-bg: #1A2942;
  --cta-fg: #FFFFFF;
  --band-bg: #1A2942;
  --band-fg: #F4F1EA;
  --btn-on-band-bg: #FFFFFF;
  --btn-on-band-fg: #1A2942;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 1.875rem;
  --step-4: clamp(2.125rem, 1.45rem + 2.9vw, 3.125rem);
  --radius: 10px;
  --wrap: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181F;
    --surface: #1D2430;
    --tint: #1A212C;
    --ink: #ECE8E1;
    --ink-2: #B9B4AB;
    --heading: #DCE6F5;
    --link: #9DB8E6;
    --accent: #D49872;
    --accent-text: #E0A57F;
    --line: #2C3544;
    --line-strong: #5B6577;
    --focus: #9DB8E6;
    --cta-bg: #2F4C7E;
    --cta-fg: #FFFFFF;
    --band-bg: #223049;
    --band-fg: #ECE8E1;
    --btn-on-band-bg: #ECE8E1;
    --btn-on-band-fg: #14181F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(var(--wrap), calc(100% - 32px)); margin-inline: auto; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 10px 16px; background: var(--cta-bg); color: var(--cta-fg); border-radius: 6px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Site header ------------------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--heading); text-decoration: none; letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--step--1); font-weight: 500; }
.site-nav a { text-decoration: none; }
.site-nav a:not(.btn):hover { text-decoration: underline; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; background: var(--cta-bg); color: var(--cta-fg); border: 1px solid var(--cta-bg); border-radius: 6px; font-weight: 600; text-decoration: none; }
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn-small { min-height: 40px; padding: 6px 16px; font-size: var(--step--1); }

/* Hero ------------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); padding-block: 28px 44px; }
.hero .inner { max-width: 820px; }
.breadcrumb { font-size: var(--step--1); margin-bottom: 22px; color: var(--ink-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-inline: 10px; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

h1, h2, h3 { font-family: var(--serif); color: var(--heading); overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: var(--step-4); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 18px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 28px; padding: 0; list-style: none; font-size: var(--step--1); color: var(--ink-2); }
.chip { display: inline-block; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-text); font-weight: 600; text-decoration: none; background: var(--surface); }
a.chip:hover { text-decoration: underline; }

.short-answer { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 22px 26px; box-shadow: 0 1px 2px rgba(26, 41, 66, 0.05); }
.short-answer h2 { margin: 0 0 8px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); line-height: 1.3; }
.short-answer p { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--ink); }

/* Page layout: reading column plus a table of contents ------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 32px 24px; }
.toc { font-size: var(--step--1); }
.toc details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toc summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--heading); list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--accent-text); }
.toc details[open] > summary::after { content: "\2212"; }
.toc ol { list-style: none; margin: 0; padding: 0 8px 10px; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 8px 10px; text-decoration: none; color: var(--ink-2); border-left: 3px solid transparent; border-radius: 0 6px 6px 0; line-height: 1.4; }
.toc a::before { content: counter(toc); flex: none; min-width: 1.4em; font-weight: 600; color: var(--accent-text); }
.toc a:hover { background: var(--tint); color: var(--ink); }
.toc a[aria-current="true"] { border-left-color: var(--accent); background: var(--tint); color: var(--ink); font-weight: 600; }

@media (min-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 720px) 268px; justify-content: center; gap: 72px; padding-block: 44px 32px; }
  .prose { grid-column: 1; grid-row: 1; }
  .toc { grid-column: 2; grid-row: 1; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; }
  .toc summary { pointer-events: none; cursor: default; }
  .toc summary::after { content: none; }
}

/* Reading column --------------------------------------------------------- */
.prose > section { margin-top: 52px; }
.prose > section:first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-3); line-height: 1.2; font-weight: 600; margin: 0 0 16px; padding-top: 18px; border-top: 3px solid var(--accent); scroll-margin-top: 20px; letter-spacing: -0.01em; }
.prose h2::before { content: none; }
.prose h3 { font-family: var(--sans); font-size: 1.1875rem; line-height: 1.35; font-weight: 650; margin: 30px 0 10px; scroll-margin-top: 20px; text-wrap: pretty; }
.prose p { margin: 0 0 16px; }
.prose strong { font-weight: 650; color: var(--heading); }
.prose ul, .prose ol { margin: 12px 0 22px; padding-left: 1.4em; }
.prose li { margin-bottom: 9px; padding-left: 4px; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose ol li::marker { color: var(--accent-text); }

h2 > a.anchor, h3 > a.anchor { color: inherit; text-decoration: none; }
h2 > a.anchor::after, h3 > a.anchor::after { content: "#"; margin-left: 0.4em; color: var(--accent-text); opacity: 0; font-family: var(--sans); font-weight: 500; transition: opacity 0.15s; }
h2:hover > a.anchor::after, h3:hover > a.anchor::after, a.anchor:focus-visible::after { opacity: 1; }
.short-answer h2 > a.anchor::after { content: none; }
:target { scroll-margin-top: 20px; }

/* Callouts ---------------------------------------------------------------- */
.template { margin: 18px 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.template p:last-child { margin-bottom: 0; }
.subject { margin: 0 0 8px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
p.subject, span.subject { display: block; }
.template, .subject { overflow-wrap: anywhere; }

section[aria-labelledby="mistakes"] { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
section[aria-labelledby="mistakes"] h2 { border-top: 0; padding-top: 0; font-size: var(--step-2); }
section[aria-labelledby="mistakes"] ul { margin-bottom: 0; }

/* Tables: a real table on a wide screen, stacked cards on a phone --------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0 24px; font-size: 0.9375rem; line-height: 1.55; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; overflow-wrap: break-word; border-bottom: 1px solid var(--line); }
thead th { background: var(--tint); color: var(--heading); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
tbody th { font-weight: 650; color: var(--heading); width: 24%; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--tint) 55%, transparent); }

@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; width: auto; }
  table { background: transparent; border: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { margin-bottom: 14px; padding: 6px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  tbody tr:nth-child(even) { background: var(--surface); }
  tbody th { width: auto; padding: 10px 0 4px; border-bottom: 0; font-family: var(--serif); font-size: 1.125rem; }
  td { padding: 8px 0; border-bottom: 1px solid var(--line); }
  tbody tr td:last-child { border-bottom: 0; }
  td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
}

/* FAQ --------------------------------------------------------------------- */
.faq-item { padding-block: 20px; border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.faq-item p { margin-bottom: 0; }

/* Closing call to action and citation ------------------------------------- */
.closing { margin-top: 56px; padding: 30px 30px 32px; background: var(--band-bg); color: var(--band-fg); border-radius: 14px; }
.closing p { margin: 0 0 18px; font-size: var(--step-1); line-height: 1.6; color: var(--band-fg); }
.closing .cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; background: var(--btn-on-band-bg); color: var(--btn-on-band-fg); border-radius: 6px; font-weight: 700; text-decoration: none; }
.closing .cta:hover { text-decoration: underline; }
.closing :focus-visible { outline-color: var(--band-fg); }

.cite { margin: 28px 0 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }
.cite strong { color: var(--heading); }

/* Related guides ----------------------------------------------------------- */
.related { margin-top: 24px; padding-block: 44px 56px; border-top: 1px solid var(--line); background: var(--tint); }
.related h2 { font-size: var(--step-3); margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; }
.card:hover, .card:focus-within { border-color: var(--accent); box-shadow: 0 2px 10px rgba(26, 41, 66, 0.1); }
.card a { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--heading); }
.card a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.card .card-meta { margin-top: auto; padding-top: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .related .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hub --------------------------------------------------------------------- */
.hub-hero .inner { max-width: 760px; }
.hub-hero p.lede { font-size: var(--step-1); line-height: 1.6; margin: 0 0 22px; color: var(--ink); }
.hub-count { margin: 0 0 22px; font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.finder { margin: 0 0 22px; }
.finder[hidden] { display: none; }
.finder label { display: block; margin-bottom: 6px; font-size: var(--step--1); font-weight: 650; color: var(--heading); }
.finder input { width: 100%; max-width: 520px; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
.finder input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.finder-status { margin: 8px 0 0; min-height: 1.5em; font-size: var(--step--1); color: var(--ink-2); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--heading); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.jump a:hover { border-color: var(--accent); }
.jump .n { color: var(--accent-text); font-weight: 700; }
.hub-main { padding-block: 16px 64px; }
.hub-section { margin-top: 48px; scroll-margin-top: 20px; }
.hub-section h2 { font-size: var(--step-3); margin: 0 0 6px; padding-top: 16px; border-top: 3px solid var(--accent); }
.hub-section .blurb { margin: 0 0 20px; color: var(--ink-2); max-width: 62ch; }
.hub-section .cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .hub-section .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .hub-section .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card[hidden], .hub-section[hidden] { display: none; }

/* Overview video at the top of the hub: a still frame that becomes the player when pressed ---------------- */
.overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 20px; }
.overview h2 { font-size: var(--step-2); margin: 0 0 8px; }
.overview p { margin: 0 0 10px; color: var(--ink-2); max-width: 56ch; }
.overview .overview-meta { font-size: var(--step--1); font-weight: 600; margin: 0; }
.poster { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--tint); }
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: var(--cta-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.poster-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--cta-fg); }
.poster:hover .poster-play { filter: brightness(1.2); }
.poster:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 860px) { .overview { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; padding: 24px 28px; } }

/* Footer ------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: var(--step--1); color: var(--ink-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 14px; }
.site-footer p { margin: 0; }

@media (max-width: 560px) {
  .brand { white-space: nowrap; font-size: 1.375rem; }
  .site-nav a:not(.btn) { display: none; }
  .breadcrumb li:nth-child(4)[aria-current] { display: none; }
}

@media (max-width: 480px) {
  :root { --step-0: 1rem; --step-3: 1.625rem; }
  .hero { padding-block: 20px 32px; }
  .short-answer { padding: 18px 18px; }
  .short-answer p { font-size: 1.0625rem; }
  .template { padding: 16px; }
  .closing { padding: 24px 20px 26px; }
  section[aria-labelledby="mistakes"] { padding: 18px; }
}

@media print {
  .site-header, .toc, .related, .skip, .finder, .jump, .closing .cta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: none; border: 0; padding-block: 0 12px; }
  .layout { display: block; padding-block: 0; }
  a { color: inherit; }
  .prose a[href^="/"]::after { content: " (https://vantagerole.com" attr(href) ")"; font-size: 0.85em; }
}