/* Kampi Guides. Cream paper, khaki ink, sand punctuation. Tokens follow Kampi DESIGN.md. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
}

:root {
  --cream: #faf8f5;
  --khaki: #5f6f3a;
  --khaki-light: #7a8f4f;
  --khaki-dark: #4a5a28;
  --mud: #5a5034;
  --mud-light: #7c6e4a;
  --mud-dark: #3d3622;
  --sand: #bb8a45;
  --sand-dark: #95702f;
  --lilac: #f5e1b9;
  --lilac-light: #f8e9c9;
  --lilac-dark: #e8d3a5;
  --night: #2c2c2c;
  --ash: #4a4a4a;
  --amber: #b45309;
  --rule: rgba(95, 111, 58, 0.28);
  --rule-soft: rgba(95, 111, 58, 0.14);
  --shadow-card: 0 8px 32px rgba(28, 32, 18, 0.10);
  --shadow-3d: 0 4px 0 rgba(28, 32, 18, 0.28);
  --shadow-3d-pressed: 0 2px 0 rgba(28, 32, 18, 0.28);
  --shadow-brutal: 0 8px 0 rgba(28, 32, 18, 0.20);
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --gutter: 16px;
  --measure: 68ch;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --head-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--night);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--khaki); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
a:hover { color: var(--khaki-dark); }
:focus-visible { outline: 2px solid var(--khaki); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--lilac-dark); color: var(--night); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--night); text-wrap: balance; }
/* Afrikaans compounds ("Instandhoudingskontrolelys", 26 letters) outgrow a phone column.
   Hyphenate only words of 20+ letters (so ordinary titles are never split) and fall
   back to a plain break where the engine has no Afrikaans dictionary. */
h1, h2, h3, h4, .tile-title, .track-title, .pager-t { overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 20 8 8; }
p { margin: 0 0 1.1rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

.site-main { flex: 1 0 auto; }  /* short pages (404) keep the footer at the bottom of the screen */
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--khaki); color: var(--cream); padding: 10px 16px; border-radius: var(--r-md); z-index: 50; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- header: cream surface, khaki only on the active link ---------- */
.site-head { background: var(--cream); color: var(--night); border-bottom: 1px solid var(--rule-soft); transition: box-shadow 200ms ease-out; }
.site-head.is-scrolled { box-shadow: var(--shadow-card); border-bottom-color: transparent; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: var(--head-h); padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-logo { display: inline-flex; align-items: center; min-height: 44px; }
.brand-logo img { width: 110px; height: auto; }
.brand-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--night); text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: 0.01em; padding-left: 12px; border-left: 1px solid var(--rule); line-height: 1.2; }
.brand-name:hover { color: var(--khaki); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* Language switch: always EN | AF in that order, so the tappable target stays put when
   the language changes. The current one is a span with aria-current, the other a link. */
.lang { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; }
.lang a { color: var(--khaki); text-decoration: none; padding: 10px 6px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.lang a:hover { color: var(--khaki-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.lang-on { color: var(--ash); padding: 0 6px; }
.lang-sep { color: var(--rule); }
/* Under 360 px the logo, name and switch must still share one row (WCAG 1.4.10 at 320). */
@media (max-width: 359px) {
  .head-row { gap: 4px 12px; }
  .brand { gap: 8px; }
  .brand-logo img { width: 96px; }
  .brand-name { padding-left: 8px; font-size: 1rem; }
  .lang-sep { display: none; }
  .lang-on { padding: 0 2px; }
  .lang a { padding-inline: 4px; }
}
/* Phones: two rows at most. Row one is logo, name and language; row two is the three
   links with their short labels in one row that scrolls sideways if a label ever
   outgrows the screen (no scrollbar chrome). Wider screens show the full labels. */
.site-nav { order: 3; display: flex; flex-wrap: nowrap; gap: 0 10px; width: 100%; margin-inline: -4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { color: var(--night); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; flex: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--khaki); }
.site-nav a[aria-current] { color: var(--khaki); font-weight: 600; box-shadow: inset 0 -2px 0 var(--khaki); }
.site-nav .nav-full { display: none; }
@media (min-width: 760px) {
  .site-head { position: sticky; top: 0; z-index: 40; }
  .site-nav { order: 0; width: auto; margin: 0 0 0 24px; gap: 0 18px; flex-wrap: wrap; overflow: visible; }
  .site-nav .nav-full { display: inline; }
  .site-nav .nav-short { display: none; }
  .lang { order: 0; }
  .site-nav a { padding-inline: 0; }
  .brand-logo img { width: 126px; }
}

/* ---------- hub ---------- */
/* Hero: the kampi.co.za brand register. A full-width Kampi Khaki band with the same
   faint plus grid and diagonal grain as the live homepage, cream display type with
   one word in the accent. Contrast on #5f6f3a: cream 5.2:1; Kampi Sand #bb8a45 is
   1.8:1 and the lighter sand token #d6a45c is 2.4:1, both under the 3:1 floor for
   large text, so the accent is Lilac Skies dark #e8d3a5 (3.7:1), the nearest
   sand-reading token that passes. Swap --hero-accent to change it. */
.hero {
  --hero-accent: var(--lilac-dark);
  background-color: var(--khaki);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 11v10M11 16h10' stroke='%23faf8f5' stroke-opacity='0.07' stroke-width='1.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(250, 248, 245, 0.02) 0 1px, transparent 1px 6px);
  color: var(--cream);
  padding: clamp(44px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.display { font-size: clamp(1.75rem, 7.4vw, 4.75rem); overflow-wrap: anywhere; font-weight: 800; line-height: 0.98; letter-spacing: 0.015em; text-transform: uppercase; color: var(--cream); }
.display .accent { font-style: normal; color: var(--hero-accent); }
@media (min-width: 760px) { .display { max-width: 14ch; } }
.promise { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; max-width: 56ch; margin: 24px 0 0; color: rgba(250, 248, 245, 0.9); }
.hero ::selection { background: var(--lilac-dark); color: var(--night); }
/* Hero photo: a real Kampi listing, hard-offset brutalist shadow (DESIGN.md). Phones
   stack it under the promise at 16:10 so the track heading is still above the fold
   on an 844 px screen; from 760 px it takes the right column at 5:4. The shadow needs
   the hero's bottom padding (40 px+) to land on the khaki. The credit is the same
   line a guide's lead photo carries, in cream. */
.hero-grid { display: grid; gap: 28px; }
.hero-grid > * { min-width: 0; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-brutal); background: var(--khaki-dark); }
.hero-photo figcaption { font-size: 0.8125rem; line-height: 1.4; margin-top: 16px; padding-inline: 4px; color: rgba(250, 248, 245, 0.8); }
.hero-photo a { color: inherit; font-weight: 500; display: inline-block; padding-block: 6px; margin-block: -6px; }
.hero-photo a:hover { color: var(--cream); }
@media (min-width: 760px) {
  .hero-grid { grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; }
  .hero-photo img { aspect-ratio: 5 / 4; }
  /* Sized so the longest single word ("SKRIKWEKKENDE", measured at 9.66 em in
     Montserrat 800) fits the 3fr copy column at every width without a mid-word
     break: at 760 the column is 413 px and the word needs 367 at 5vw; from 1112 up
     the wrap is capped at 1080 so the column is 605 px and the word needs 580 at
     the 3.75rem cap. Measure again before raising the cap. */
  .hero-with-photo .display { font-size: clamp(2.25rem, 5vw, 3.75rem); max-width: none; }
}
.track { padding-block: 32px 24px; }
.track h2 { font-size: 1.375rem; }
.track-intro { color: var(--ash); margin: 6px 0 20px; }
.track-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.track-list li { border-bottom: 1px solid var(--rule); }
/* Row grid: number | text | thumbnail. On a phone the thumbnail shares its row with
   the title only, so the summary keeps the full text width; from 760 px it spans the
   whole row. The thumbnail is decorative (alt="") and lazy. */
/* Phone: the title and summary keep the full width (a 72 px thumb beside the title
   left it 180 px and four to six lines); the thumb sits at 56 px on the meta row,
   right-aligned, so it never sets the row height. From 760 px the text column is
   capped at its measure and the thumb sits directly beside it, not floated to the
   far edge of the row. */
.track-row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "n title title" "n sum sum" "n meta thumb"; gap: 4px 12px; padding: 18px 0; text-decoration: none; color: inherit; align-items: start; }
.track-n { grid-area: n; font-size: 2.75rem; font-weight: 800; line-height: 1; color: var(--sand-dark); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: -2px; }
.track-thumb { grid-area: thumb; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-md); background: var(--lilac-light); justify-self: end; margin-top: 4px; }
.track-title { grid-area: title; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--night); }
.track-row:hover .track-title { color: var(--khaki); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.track-sum { grid-area: sum; color: var(--ash); font-size: 1rem; line-height: 1.5; max-width: 62ch; }
.track-meta { grid-area: meta; font-size: 0.8125rem; color: var(--ash); font-weight: 500; margin-top: 4px; align-self: end; padding-bottom: 2px; }
@media (min-width: 760px) {
  .track-row { grid-template-columns: 5rem minmax(0, 60ch) auto; grid-template-areas: "n title thumb" "n sum thumb" "n meta thumb"; gap: 4px 20px; padding: 24px 0; justify-content: start; }
  .track-n { font-size: 3.5rem; }
  .track-thumb { width: 96px; height: 96px; justify-self: start; margin-top: 2px; }
  .track-meta { align-self: start; padding-bottom: 0; }
}
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 24px 8px; }
.tiles > * { min-width: 0; }
/* align-items: start, so the print tile keeps its own height next to the owner tile
   (which the 4:3 photo makes about twice as tall) instead of stretching to a card
   that is mostly empty lilac. */
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: start; } }
.tiles-one .tile-sum { max-width: 62ch; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-xl); text-decoration: none; color: var(--night); min-height: 44px; }
.tile-eyebrow, .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mud); line-height: 1; }
.tile-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 8px; }
.tile-sum { color: var(--ash); }
.tile-meta { font-size: 0.8125rem; color: var(--ash); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.tile-owner { background: var(--cream); border: 2px solid var(--khaki); box-shadow: var(--shadow-brutal); transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.tile-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--lilac-light); margin-bottom: 12px; }
/* The print tile's drawn A4 sheet: same box as the owner tile's photo, khaki ink on
   a lilac ground, a cream page with the brutalist offset shadow. */
.tile-sheet { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--lilac); margin-bottom: 12px; }
.tile-sheet .sheet-shadow { fill: rgba(28, 32, 18, 0.20); }
.tile-sheet .sheet-paper { fill: var(--cream); }
.tile-sheet .sheet-ink { fill: var(--mud); }
.tile-sheet .sheet-rule { fill: var(--mud); }
.tile-sheet .sheet-rows rect { fill: none; stroke: var(--khaki); stroke-width: 2; }
.tile-sheet .sheet-rows .sheet-line { fill: var(--lilac-dark); stroke: none; }
.tile-sheet .sheet-rows path { fill: none; stroke: var(--khaki); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-owner:hover { transform: translateY(-4px); box-shadow: 0 12px 0 rgba(28, 32, 18, 0.20); }
.tile-owner:hover .tile-title, .tile-print:hover .tile-title { text-decoration: underline; text-decoration-thickness: 2px; color: var(--khaki); }
.tile-print { background: var(--lilac-light); border: 1px solid var(--lilac-dark); box-shadow: var(--shadow-card); transition: transform 200ms ease-out, box-shadow 200ms ease-out; position: relative; }
.tile-print:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(28, 32, 18, 0.14); }
.tile-main { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.tile-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-main:focus-visible { outline: none; }
.tile-main:focus-visible::after { outline: 2px solid var(--khaki); outline-offset: 2px; border-radius: var(--r-xl); }
.tile-print .tile-meta { flex-wrap: wrap; gap: 6px 8px; margin-top: auto; padding-top: 6px; }  /* auto: sits on the tile's bottom edge when the grid stretches it */
.tile-pdf { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -10px 0 -10px 8px; padding: 0 12px 0 10px; border: 1.5px solid var(--khaki); border-radius: 9999px; color: var(--khaki); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-decoration: none; background: var(--cream); }
.tile-pdf .ico { width: 16px; height: 16px; }
.tile-pdf:hover { background: var(--khaki); color: var(--cream); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.home-body { padding-block: 16px; }
.home-body > * { max-width: var(--measure); }

/* ---------- guide layout ---------- */
.guide-grid { padding-block: 32px 48px; }
.article { max-width: var(--measure); min-width: 0; }
.article-head { margin-bottom: 24px; }
.article-head h1 { font-size: clamp(1.875rem, 4.5vw, 2.625rem); margin: 10px 0 14px; }
.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ash); margin-bottom: 14px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.875rem; color: var(--ash); font-weight: 500; margin: 0; }
/* Lead photo: editorial surface, no card chrome, never wider than the article column.
   Always 3:2 (tools/photos.py writes 3:2 files, so the aspect-ratio here is a guard,
   not a crop): every guide opens the same way and on a 1366x900 desktop the first
   paragraph is still on the first screen. The credit link is padded to a 30 px
   target without moving the caption line. */
.lead-photo { margin: 0 0 28px; }
.lead-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-lg); background: var(--lilac-light); }
/* Desktop: the column is 748 px, so a 3:2 photo is 499 px tall and with a three line
   title pushes the first paragraph past a 900 px screen. 16:9 trims 6% off the top
   and bottom (sky and ground on every lead photo) and keeps the opening on screen. */
@media (min-width: 960px) { .lead-photo img { aspect-ratio: 16 / 9; } }
.lead-photo figcaption { font-size: 0.8125rem; line-height: 1.4; color: var(--ash); margin-top: 8px; padding-inline: 4px; }
.lead-photo a { color: var(--khaki); font-weight: 500; display: inline-block; padding-block: 6px; margin-block: -6px; }
.draft-notice { display: inline-block; background: var(--lilac); color: var(--night); font-size: 0.8125rem; font-weight: 600; padding: 6px 12px; border-radius: 9999px; margin-bottom: 14px; }
.toc-h { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mud); margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: var(--night); padding: 10px 0; font-size: 0.9375rem; line-height: 1.35; min-height: 44px; }
.toc a::before { content: counter(toc); font-weight: 700; color: var(--mud); font-size: 0.8125rem; min-width: 1.2em; }
.toc a:hover { color: var(--khaki); text-decoration: underline; }
.toc-side a[aria-current] { color: var(--khaki); font-weight: 600; }
.toc-side a[aria-current] span { box-shadow: inset 0 -2px 0 var(--khaki); padding-bottom: 1px; }
.toc-inline { background: var(--lilac-light); border-radius: var(--r-lg); padding: 16px 20px 10px; margin-bottom: 28px; }
.toc-side { display: none; }
@media (min-width: 960px) {
  .guide-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) 220px; gap: 56px; align-items: start; }
  .toc-inline { display: none; }
  .toc-side { display: block; align-self: stretch; }
  .toc-sticky { position: sticky; top: calc(var(--head-h) + 24px); border-left: 1px solid var(--rule); padding-left: 20px; }
}

/* ---------- prose ---------- */
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.prose h3 { font-size: 1.1875rem; font-weight: 600; margin: 1.8rem 0 0.7rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--mud); font-weight: 600; }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.prose blockquote { margin: 1.4rem 0; padding: 0 0 0 18px; border-left: 1px solid var(--rule); color: var(--ash); font-style: normal; }
.prose code { font-family: var(--font); background: var(--lilac-light); padding: 0.1em 0.35em; border-radius: var(--r-sm); font-size: 0.95em; }

/* figures: inline SVG plates */
.fig { margin: 2rem 0; }
@media (min-width: 760px) { .fig { max-width: 560px; margin-inline: auto; } }
.fig svg { width: 100%; height: auto; border: 1px solid var(--lilac-dark); border-radius: var(--r-lg); background: var(--cream); }
.fig figcaption { font-size: 0.9rem; line-height: 1.45; color: var(--ash); margin-top: 10px; padding-inline: 4px; }
.fig-n { font-weight: 700; color: var(--mud); }
.fig-n::before { content: "Fig. "; }
.fig svg[data-portrait] { display: none; }
@media (max-width: 599px) {
  .fig-portrait svg[data-portrait] { display: block; }
  .fig-portrait svg[data-landscape] { display: none; }
}

/* callouts: tinted blocks with a leading icon, no stripe */
.callout { background: var(--lilac-light); border-radius: var(--r-lg); padding: 16px 18px 6px; margin: 1.6rem 0; border: 1.5px solid transparent; }
.callout-lead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.callout-lead svg { width: 22px; height: 22px; fill: none; stroke: var(--mud); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.callout-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mud); line-height: 1; }
.callout-body p:last-child { margin-bottom: 0.6rem; }
.callout-body ul, .callout-body ol { margin-bottom: 0.6rem; }
.callout-warn { background: var(--lilac); border-color: var(--amber); }
.callout-warn .callout-lead svg { stroke: var(--amber); }
.callout-warn a { color: var(--khaki-dark); }  /* khaki on Lilac Skies is 4.3:1, khaki-dark 6.4:1 */
.callout-law { background: var(--cream); border-color: var(--mud); }
.callout-law .callout-body { color: var(--mud-dark); }
.callout-kampi { border-color: var(--khaki); }
.callout-kampi .callout-lead svg { stroke: var(--khaki); }

/* checklists */
.checklist { margin: 1.4rem 0 1.8rem; }
.checklist-items, .prose .checklist-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }  /* beats .prose ul, so the boxes and the foot share one left edge */
.check { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check label { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 10px 4px; min-height: 44px; cursor: pointer; line-height: 1.5; border-radius: var(--r-sm); }
.check .box { width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--khaki); border-radius: var(--r-sm); background: var(--cream); position: relative; transition: background-color 120ms ease-out; }
.check input:checked + label .box { background: var(--khaki); }
.check input:checked + label .box::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--cream); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.check input:checked + label .check-text { color: var(--ash); }
.check input:focus-visible + label { outline: 2px solid var(--khaki); outline-offset: 2px; }
.check label:hover .box { background: var(--lilac); }
.check input:checked + label:hover .box { background: var(--khaki-light); }
.checklist-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 4px 0;  /* 4px: lines up with the boxes inside the label padding */ font-size: 0.875rem; color: var(--ash); font-weight: 500; }

/* tables: cells wrap, so a three or four column table fits a phone. A wider table
   scrolls inside its frame; site.js adds .is-scrollable and the right edge fades until
   the visitor reaches the end. */
.table-scroll { position: relative; margin: 1.4rem 0; }
.table-scroll::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px; border-radius: 0 var(--r-lg) var(--r-lg) 0; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; background: linear-gradient(to left, var(--lilac), rgba(245, 225, 185, 0)); }
.table-scroll.is-scrollable:not(.at-end)::after { opacity: 1; }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--lilac-dark); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 3px; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.table-wrap th { background: var(--lilac-dark); color: var(--night); text-align: left; font-weight: 600; padding: 10px 14px; vertical-align: bottom; }
.table-wrap td { padding: 10px 14px; border-top: 1px solid var(--lilac-dark); vertical-align: top; }
.table-wrap tbody tr:nth-child(even) td { background: var(--lilac-light); }
@media (max-width: 480px) {
  /* Each cell becomes a "header: value" row (the header text travels in data-label). */
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap tbody tr { border-top: 1px solid var(--lilac-dark); }
  .table-wrap tbody tr:first-child { border-top: 0; }
  .table-wrap td { border-top: 0; padding: 6px 14px; }
  .table-wrap td:first-child { padding-top: 12px; font-weight: 600; }
  .table-wrap td:last-child { padding-bottom: 12px; }
  .table-wrap td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mud); margin-bottom: 2px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: var(--r-md); font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color 150ms ease-out, color 150ms ease-out, transform 100ms ease-out, box-shadow 100ms ease-out; }
.btn-primary { background: var(--khaki); color: var(--cream); box-shadow: var(--shadow-3d); }
.btn-primary:hover { background: var(--khaki-light); color: var(--cream); }
.btn-primary:active { transform: translateY(2px); box-shadow: var(--shadow-3d-pressed); }
.btn-ghost { background: transparent; color: var(--khaki); padding: 8px 12px; }
.btn-ghost:hover { background: rgba(95, 111, 58, 0.10); }
.btn-outline { background: var(--cream); color: var(--khaki); border-color: var(--khaki); box-shadow: 0 4px 0 rgba(28, 32, 18, 0.18); }
.btn-outline:hover { background: rgba(95, 111, 58, 0.08); color: var(--khaki-dark); }
.btn-outline:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(28, 32, 18, 0.18); }
.btn-3d { background: var(--cream); color: var(--mud-dark); box-shadow: 0 4px 0 rgba(28, 32, 18, 0.45); }
.btn-3d:hover { background: var(--lilac-light); color: var(--mud-dark); transform: translateY(-1px); box-shadow: 0 6px 0 rgba(28, 32, 18, 0.45); }
.btn-3d:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(28, 32, 18, 0.45); }

/* faq, then one "go further" block holding sources and related guides */
.faq h2, .more h2 { font-size: 1.5rem; margin: 2.5rem 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary { list-style: none; cursor: pointer; font-weight: 600; padding: 14px 32px 14px 0; position: relative; min-height: 44px; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 20px; width: 8px; height: 8px; border: solid var(--khaki); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 150ms ease-out; }
.faq details[open] summary::after { transform: rotate(225deg); top: 24px; }
.faq summary:hover { color: var(--khaki); }
.faq-a { padding: 0 0 16px; color: var(--night); }
.more-grid { display: grid; gap: 8px 32px; }
.more h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mud); margin: 12px 0 6px; }
/* Sources sit in a <details>: site.js opens it at 760 px and up, so a phone reader is
   not scrolled through two screens of links before reaching Next and the CTA. */
.sources summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: ""; width: 7px; height: 7px; border: solid var(--khaki); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform 150ms ease-out; }
.sources[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.sources summary:hover h3 { color: var(--khaki); }
.sources summary h3 { margin: 0; }
.sources-n { font-weight: 600; letter-spacing: 0; color: var(--ash); }
.sources ol, .related ul { padding-left: 1.4rem; font-size: 0.9375rem; margin: 0 0 1rem; }
.sources ol { padding-left: 2.1rem; }  /* room for two-digit markers, a long guide cites 20+ sources */
.sources li, .related li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.related a { display: block; padding: 10px 0; }  /* block, so the bullet sits on the first line of a wrapped title */
@media (min-width: 640px) { .more-grid { grid-template-columns: 3fr 2fr; } }

/* pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2.5rem 0 0; }
.pager .btn { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 16px; min-height: 64px; }
.pager-next { align-items: flex-end !important; text-align: right !important; }
.pager-k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); }
.pager-t { font-weight: 600; line-height: 1.3; font-size: 0.9375rem; }
@media (max-width: 480px) { .pager { grid-template-columns: 1fr; } .pager > span:empty { display: none; } }

/* cta: mud block, cream 3D button */
.cta { background: var(--mud); color: var(--cream); border-radius: var(--r-xl); padding: 28px 24px; margin: 3rem 0 0; box-shadow: var(--shadow-card); }
.cta h2 { color: var(--cream); font-size: 1.5rem; margin: 0 0 8px; border: 0; padding: 0; }
.cta p { color: var(--lilac); margin-bottom: 18px; max-width: 48ch; }
.cta .btn:focus-visible { outline-color: var(--cream); }  /* khaki on mud is 1.45:1, invisible */
.home .cta { margin: 32px 0 48px; }
@media (min-width: 640px) { .cta { padding: 36px 40px; } }

/* footer */
.site-foot { border-top: 1px solid var(--rule); padding: 32px 0 40px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot-logo { display: inline-flex; align-items: center; min-height: 44px; }
.foot-logo img { width: 96px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-nav a { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-note { width: 100%; font-size: 0.8125rem; color: var(--ash); max-width: 72ch; margin: 0; }

/* 404 */
.nf-wrap { padding-block: 64px 80px; max-width: 60ch; }
.nf-wrap h1 { font-size: clamp(1.875rem, 4.5vw, 2.625rem); margin: 10px 0 14px; }
.nf-af { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ash); }

/* print page chrome (screen) */
.print-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 28px 0 20px; max-width: 210mm; margin-inline: auto; }
.print-tools .eyebrow { margin: 0; width: 100%; }
.print-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
/* Phones rarely print: below 760 px the PDF link takes the primary look and comes
   first, the print button drops to the outline look. Same markup either way. */
@media (max-width: 759px) {
  .act-pdf { order: -1; background: var(--khaki); color: var(--cream); border-color: transparent; box-shadow: var(--shadow-3d); }
  .act-pdf:hover { background: var(--khaki-light); color: var(--cream); }
  .act-pdf:active { transform: translateY(2px); box-shadow: var(--shadow-3d-pressed); }
  .act-print { background: var(--cream); color: var(--khaki); border-color: var(--khaki); box-shadow: 0 4px 0 rgba(28, 32, 18, 0.18); }
  .act-print:hover { background: rgba(95, 111, 58, 0.08); color: var(--khaki-dark); }
  .act-print:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(28, 32, 18, 0.18); }
}
.print-hint { margin: 0; color: var(--ash); flex: 1 1 260px; }
.sheet-foot-all { width: 100%; padding: 0; justify-content: flex-start; gap: 4px 12px; }
.sheet { background: var(--cream); box-shadow: var(--shadow-card); border: 1px solid var(--lilac-dark); border-radius: var(--r-md); padding: 24px 20px; max-width: 210mm; margin: 0 auto 48px; }
@media (min-width: 640px) { .sheet { padding: 40px 44px; } }
.sheet-head { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid var(--mud); margin-bottom: 8px; }
.sheet-logo { width: 84px; flex: none; margin-top: 6px; }
.sheet-head h1 { font-size: 1.5rem; }
.sheet-lede { color: var(--ash); margin: 6px 0 0; font-size: 0.9375rem; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ash); }
.sheet-foot img { width: 56px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .tile-owner:hover, .tile-print:hover { transform: none; }
}

/* print of ordinary guide pages */
@media print {
  .site-head, .site-foot, .toc, .cta, .pager, .checklist-foot, .skip, .print-tools, .draft-notice, .lead-photo, .hero-photo, .track-thumb, .tile-photo, .tile-sheet { display: none !important; }
  body { font-size: 10.5pt; color: #000; background: #fff; }
  .guide-grid { display: block; padding: 0; }
  .article { max-width: none; }
  a { color: inherit; text-decoration: none; }
  .check .box { border-color: #000; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .check input:checked + label .box::after { border-color: #000; }
  .fig svg { border-color: #999; }
  .callout { border: 1px solid #999; background: none; }
  .table-wrap th { background: none; color: #000; border-bottom: 2px solid #000; }
  .fig svg[data-portrait] { display: none !important; }
  .fig svg[data-landscape] { display: block !important; }
}