/* ═══════════════════════════════════════════════════════════════
   ROBLOXHUB — "Calm help center"
   The visual language of good public-information design: a parent
   lands here from a worried search and the page lowers the pulse.
   Spacious cool-paper base, civic trust-blue, deep blue-slate ink,
   warm ochre reserved for safety. Generous, friendly type.

   Type   Bricolage Grotesque (display) · Nunito Sans (body)
          IBM Plex Mono (kbd / code / stamps only)
   Rhythm 8px grid (0.5rem steps) · guide measure 66ch @ 1.75
   Signature: the numbered step-rail on how-to instructions and
   the calm amber safety callout. Everything else stays quiet.

   Per-page variation (baked by scripts/prerender.py):
     body.pv-hero-{0,1,2}  hero composition (wash / panel / rule)
     body.pv-orn-{0,1,2}   ornament family (step badges, list
                           markers, callout frames)
     body.pv-a{0..4}       quiet page accent for non-guide pages
   Category accents (stable, meaningful) OVERRIDE pv accents on
   any page with data-category: how-to blue · basics teal ·
   safety ochre · news slate.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* — Surfaces: cool paper, not cream, not stark — */
  --bg-0: #f6f8fa;            /* page */
  --bg-1: #ffffff;            /* cards / panels */
  --bg-2: #eef2f5;            /* alt wash */
  --bg-3: #e3e9ee;            /* heavier wash */
  --bg-glass: rgba(246, 248, 250, 0.88);

  /* — Hairlines — */
  --line: #dbe2e8;
  --line-strong: #c3cdd6;

  /* — Ink: deep blue-slate, never pure black — */
  --ink-0: #17262f;
  --ink-1: #3d4f5c;
  --ink-2: #5c6c77;
  --ink-3: #8b98a1;           /* decorative / large meta only */

  /* — Trust blue (brand) — */
  --brand: #1a5fb8;
  --brand-strong: #134a92;
  --brand-soft: rgba(26, 95, 184, 0.09);

  /* — Category accents (stable + meaningful; AA on light base) — */
  --cat-howto:  #1a5fb8;      /* blue    — instructions */
  --cat-basics: #0c7a6d;      /* teal    — explanations */
  --cat-safety: #96590a;      /* warm ochre — care, not alarm */
  --cat-news:   #4e5e70;      /* slate   — the record */
  --acc-indigo: #4f5ba3;      /* quiet companion for pv set */

  /* — System hues, used sparingly — */
  --ok: #257a46;
  --danger: #b3362c;

  /* — Type — */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* — Geometry — */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-pill: 999px;

  /* — 8px rhythm — */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;
  --space-section: clamp(3rem, 7vw, 5.5rem);

  /* — Shadows: soft, blue-tinted, restrained — */
  --shadow-sm: 0 1px 2px rgba(23, 38, 47, 0.05);
  --shadow: 0 6px 24px -12px rgba(23, 38, 47, 0.16);
  --shadow-lg: 0 24px 64px -24px rgba(23, 38, 47, 0.28);

  --ad-min-mobile: 100px;
  --ad-min-desktop: 250px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Calm night-desk blue-slate — never pure black */
  --bg-0: #10181f;
  --bg-1: #18232c;
  --bg-2: #1e2a34;
  --bg-3: #263441;
  --bg-glass: rgba(16, 24, 31, 0.88);
  --line: #2b3946;
  --line-strong: #3b4c5c;
  --ink-0: #e8eef2;
  --ink-1: #b9c6cf;
  --ink-2: #8fa0ab;
  --ink-3: #64747f;
  --brand: #7fb1ee;
  --brand-strong: #a3c8f4;
  --brand-soft: rgba(127, 177, 238, 0.14);
  --cat-howto:  #7fb1ee;
  --cat-basics: #5cc4b5;
  --cat-safety: #e0a35c;
  --cat-news:   #a5b4c4;
  --acc-indigo: #a3aede;
  --ok: #6cc493;
  --danger: #e8897f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, 0.65);
}

/* ── Page accent plumbing ──────────────────────────────────────
   --pa is "this page's accent". Default brand blue; the pv-a*
   hash classes rotate it quietly on non-category pages; the
   data-category rules below OVERRIDE it wherever a category is
   declared — stable and meaningful beats random.               */
body        { --pa: var(--brand); }
body.pv-a0  { --pa: var(--brand); }
body.pv-a1  { --pa: var(--cat-basics); }
body.pv-a2  { --pa: var(--acc-indigo); }
body.pv-a3  { --pa: var(--cat-safety); }
body.pv-a4  { --pa: var(--cat-news); }
body[data-category="how-to"] { --pa: var(--cat-howto); }
body[data-category="basics"] { --pa: var(--cat-basics); }
body[data-category="safety"] { --pa: var(--cat-safety); }
body[data-category="news"]   { --pa: var(--cat-news); }
body {
  --pa-soft: color-mix(in srgb, var(--pa) 9%, transparent);
  --pa-wash: color-mix(in srgb, var(--pa) 5%, var(--bg-1));
  --pa-edge: color-mix(in srgb, var(--pa) 30%, var(--line));
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: color-mix(in srgb, var(--brand) 24%, var(--bg-1)); color: var(--ink-0); }

/* — Base — */
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding: var(--sp-3) 0 var(--space-section); }

/* — Type — */
h1, h2, h3, h4 {
  color: var(--ink-0);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.75rem); margin-top: 1.8em; }
h3 { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.25rem); margin-top: 1.5em; }
h4 { font-size: 1rem; margin-top: 1.2em; }

p, li { color: var(--ink-1); font-size: 1rem; line-height: 1.65; }

a { color: var(--brand); text-decoration: none; transition: color 140ms ease; }
a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

code, kbd, pre, .mono, .tnum { font-family: var(--mono); }
code, kbd {
  background: var(--bg-2);
  color: var(--ink-0);
  padding: 0.12em 0.4em;
  border-radius: var(--r-1);
  font-size: 0.88em;
}
pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.55;
}
pre code { background: transparent; padding: 0; }
hr { border: none; height: 1px; background: var(--line); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* — Layout shell — */
.shell { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-3); }
.shell--narrow { max-width: 760px; }
.shell--wide { max-width: 1280px; }
@media (min-width: 768px) { .shell { padding: 0 var(--sp-4); } }

/* ═══════════════════════════════════════════════════════════════
   CHROME — top bar, drawer, footer
   (Markup is rendered identically by prerender.py and layout.js —
   class names here are load-bearing.)
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__row {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) 0;
  min-height: 56px;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.brand:hover { color: var(--ink-0); text-decoration: none; }
.brand__mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--brand);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 8px;
}
:root[data-theme="dark"] .brand__mark { color: var(--bg-0); }
.brand__mark::before { content: "H"; }

.nav__links { display: none; gap: 0.25rem; margin-left: var(--sp-3); }
@media (min-width: 860px) { .nav__links { display: inline-flex; } }
.nav__link {
  padding: 0.5rem 0.75rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-1);
  border-radius: var(--r-2);
}
.nav__link:hover { color: var(--ink-0); background: var(--bg-2); text-decoration: none; }
.nav__link[aria-current="page"] {
  color: var(--ink-0);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.nav__link[aria-current="page"]:hover { background: transparent; }

.nav__spacer { flex: 1; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent;
  border: 0;
  color: var(--ink-1);
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-2);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.nav__btn:hover { color: var(--ink-0); background: var(--bg-2); }
.nav__btn kbd {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 0.05em 0.4em;
  font-size: 0.72em;
  border-radius: 4px;
  color: var(--ink-2);
}
.nav__toggle { display: inline-grid; place-items: center; padding: 0.45rem 0.7rem; font-size: 1.25rem; }
@media (min-width: 860px) { .nav__toggle { display: none; } }
.nav__drawer {
  display: none;
  flex-direction: column;
  padding: var(--sp-1) 0 var(--sp-2);
  border-top: 1px solid var(--line);
}
.nav__drawer.is-open { display: flex; }
.nav__drawer .nav__link { padding: 0.7rem 0.25rem; font-size: 1.02rem; border-radius: var(--r-1); }
.nav__drawer .nav__link[aria-current="page"] { text-underline-offset: 5px; }

/* — Footer — */
.footer {
  background: var(--bg-2);
  padding: var(--sp-8) 0 var(--sp-4);
  margin-top: var(--space-section);
  border-top: 1px solid var(--line);
}
.footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-4); }
}
.footer__col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--sp-2);
}
.footer__col a {
  display: block;
  padding: 0.3rem 0;
  color: var(--ink-1);
  font-size: 0.9rem;
  font-weight: 600;
}
.footer__col a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
/* Sister-site links read as an outbound family */
.footer__col a[href^="http"]::after {
  content: " \2197";
  font-size: 0.82em;
  color: var(--ink-3);
}
.footer__col a[href^="http"]:hover::after { color: var(--brand); }
.footer__legal {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.78rem;
  line-height: 1.6;
}
.footer__legal .row { justify-content: space-between; gap: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* — Buttons: soft rectangles, service-desk not arcade — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: var(--brand);
  color: #ffffff;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  text-decoration: none !important;
}
.btn:hover { background: var(--brand-strong); color: #ffffff; }
:root[data-theme="dark"] .btn { color: var(--bg-0); }
:root[data-theme="dark"] .btn:hover { color: var(--bg-0); }
.btn--ghost {
  background: var(--bg-1);
  color: var(--ink-0);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-1); color: var(--brand); border-color: var(--brand); }
:root[data-theme="dark"] .btn--ghost { color: var(--ink-0); }
:root[data-theme="dark"] .btn--ghost:hover { color: var(--brand); }
.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.86rem; }
.btn--lg { padding: 0.9rem 1.7rem; font-size: 1.02rem; }

/* — Forms — */
label {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-1);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--bg-1);
  color: var(--ink-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 140ms, box-shadow 140ms;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

/* — Chips (search results etc.) — */
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg-2);
  color: var(--ink-1);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-pill);
}
.chip--accent { background: var(--brand-soft); color: var(--brand); }
.chip--game { background: var(--bg-3); color: var(--ink-0); }

/* — Cards (generic + search results) — */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-3);
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.card--link { display: block; color: inherit; }
.card--link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.card__title { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--ink-0); margin: 0 0 0.3rem; }
.card__desc { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.card__meta { display: flex; gap: 0.4rem; margin-top: var(--sp-2); flex-wrap: wrap; }

/* — Search palette — */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(23, 38, 47, 0.42);
  backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette-backdrop.is-open { display: flex; }
.palette {
  width: 100%; max-width: 600px;
  margin: 0 var(--sp-2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette input {
  border: 0;
  background: transparent;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 1.04rem;
}
.palette input:focus { box-shadow: none; }
.palette__list { max-height: 60vh; overflow-y: auto; padding: var(--sp-1); }
.palette__item {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-2);
  cursor: pointer;
  color: var(--ink-0);
  font-weight: 600;
}
.palette__item:hover, .palette__item[aria-selected="true"] { background: var(--bg-2); color: var(--ink-0); text-decoration: none; }
.palette__item small { color: var(--ink-2); font-size: 0.8rem; font-weight: 400; }

/* — Cookie banner — */
.cookie-banner {
  position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); z-index: 80;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3);
  max-width: 480px;
  margin-left: auto;
  display: none;
}
.cookie-banner.is-open { display: block; }
.cookie-banner p { margin: 0 0 var(--sp-2); font-size: 0.9rem; color: var(--ink-1); }

/* — Ad slots (reserved space; do not change heights) — */
.ad-slot {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-size: 0.78rem;
  margin: var(--sp-3) 0;
}
.ad-slot--header  { min-height: var(--ad-min-mobile); }
.ad-slot--article { min-height: var(--ad-min-mobile); }
.ad-slot--end     { min-height: var(--ad-min-mobile); }
@media (min-width: 768px) {
  .ad-slot--header  { min-height: 90px; }
  .ad-slot--article { min-height: 250px; }
  .ad-slot--end     { min-height: 250px; }
}
:root[data-ad-debug="1"] .ad-slot { border: 1px dashed var(--line); }

/* — Breadcrumb — */
.breadcrumb {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: var(--sp-1) 0 var(--sp-3);
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb__sep { color: var(--line-strong); }
.breadcrumb > span:last-child {
  color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 34ch;
}

/* — Section title (home) — */
.section-title {
  position: relative;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  margin: var(--sp-8) 0 var(--sp-3);
  padding-top: var(--sp-2);
}
.section-title::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--pa);
}

/* — Utilities — */
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.center-text { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.muted { color: var(--ink-2); }
.no-wrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════════════
   HOME — body.lp  (the reception desk)
   ═══════════════════════════════════════════════════════════════ */

body.lp main { padding-top: 0; }

.lp-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--sp-2); }
.lp-hero__inner { max-width: 640px; }

.lp-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa);
  margin-bottom: var(--sp-2);
}
.lp-hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-3);
  color: var(--ink-0);
}
.lp-hero__lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.25rem);
  color: var(--ink-1);
  max-width: 54ch;
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
}
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* — Category tiles: the four desk drawers — */
.hub-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
@media (min-width: 560px)  { .hub-sections { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hub-sections { grid-template-columns: repeat(4, 1fr); } }

.hub-section {
  --ca: var(--brand);
  position: relative;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: var(--sp-3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.hub-section::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ca) 0 2.5rem, color-mix(in srgb, var(--ca) 18%, transparent) 2.5rem 100%);
}
.hub-section[href$="how-to.html"] { --ca: var(--cat-howto); }
.hub-section[href$="basics.html"] { --ca: var(--cat-basics); }
.hub-section[href$="safety.html"] { --ca: var(--cat-safety); }
.hub-section[href$="news.html"]   { --ca: var(--cat-news); }
.hub-section:hover {
  border-color: color-mix(in srgb, var(--ca) 38%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.hub-section__count {
  order: 3;
  margin-top: auto;
  padding-top: var(--sp-1);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca);
}
.hub-section__name {
  order: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  line-height: 1.25;
}
.hub-section__blurb { order: 2; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* — Guide cards (home latest + category hubs) — */
.gx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
@media (min-width: 560px)  { .gx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .gx-grid { grid-template-columns: repeat(3, 1fr); } }
/* Hub pages live in the narrow shell — keep cards to 2-up there */
.shell--narrow .gx-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .shell--narrow .gx-grid { grid-template-columns: repeat(2, 1fr); } }

.gx-card {
  --ca: var(--pa);
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.gx-card[data-cat="how-to"] { --ca: var(--cat-howto); }
.gx-card[data-cat="basics"] { --ca: var(--cat-basics); }
.gx-card[data-cat="safety"] { --ca: var(--cat-safety); }
.gx-card[data-cat="news"]   { --ca: var(--cat-news); }
.gx-card:hover {
  border-color: color-mix(in srgb, var(--ca) 38%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
.gx-card__tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ca);
  margin-bottom: 0.6rem;
}
.gx-card__tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ca) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--ca);
}
.gx-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink-0);
  margin: 0 0 0.5rem;
}
.gx-card__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gx-card__foot {
  margin-top: auto;
  padding-top: var(--sp-1);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
}
.gx-card__cta { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ca); font-weight: 700; }
.gx-card__cta::after { content: "\2192"; transition: transform 160ms; }
.gx-card:hover .gx-card__cta::after { transform: translateX(3px); }

/* — Network cards (sister sites) — */
.network-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
@media (min-width: 560px)  { .network-grid { grid-template-columns: repeat(3, 1fr); } }
.network-card {
  display: block;
  padding: var(--sp-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 160ms, background 160ms;
}
.network-card:hover { border-color: var(--brand); background: var(--bg-1); }
.network-card__name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink-0); }
.network-card:hover .network-card__name { color: var(--brand); }
.network-card__desc { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HUBS + UTILITY PAGES — body.db-page
   ═══════════════════════════════════════════════════════════════ */

body.db-page main { padding-top: var(--sp-3); }

.db-hero { margin: 0 0 var(--sp-4); }
.db-hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 var(--sp-2);
  color: var(--ink-0);
}
.db-hero__lede {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.16rem);
  color: var(--ink-1);
  max-width: 58ch;
  line-height: 1.65;
  margin: 0 0 var(--sp-3);
}
.db-hero__topline {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--pa-wash);
  border: 1px solid var(--pa-edge);
  border-radius: var(--r-pill);
  margin: 0;
}
.db-hero__count { line-height: 1; }
.db-hero__count strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--pa);
}
.db-hero__counted { font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }

/* About / contact / privacy / terms / 404 header */
.tool-header { margin: 0 0 var(--sp-3); }
.tool-header h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-1);
}
.tool-header__lede {
  color: var(--ink-1);
  font-size: 1.1rem;
  max-width: 54ch;
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GUIDE PAGES — body.guide-page  (the reading room)
   ═══════════════════════════════════════════════════════════════ */

body.guide-page main { padding-top: var(--sp-3); }

/* Reading progress: one quiet accent line */
.gd-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 60;
  pointer-events: none;
  background: transparent;
}
.gd-progress__bar {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--pa);
  transition: width 100ms linear;
}

/* — Guide hero — */
.gd-hero { margin-bottom: var(--sp-3); }
.gd-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa);
  background: var(--pa-wash);
  border: 1px solid var(--pa-edge);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  margin-bottom: var(--sp-2);
}
.gd-hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.25rem + 3vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 var(--sp-2);
  color: var(--ink-0);
  max-width: 26ch;
}
.gd-hero__lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.22rem);
  color: var(--ink-1);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 0 var(--sp-3);
}
/* Safety guides open with a calm, framed word of care */
body[data-category="safety"] .gd-hero__lede {
  padding: var(--sp-2) var(--sp-3);
  background: var(--pa-wash);
  border: 1px solid var(--pa-edge);
  border-left: 3px solid var(--pa);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}

.gd-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gd-meta__byline { display: flex; flex-direction: column; gap: 0.2rem; }
/* guide byline: author name above the published date */
.gd-meta__author {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-0);
}
.gd-meta__sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.gd-meta__sub::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--ok);
  border-radius: 50%;
}

/* — Author box: end-of-guide attribution, set like the page-accent callouts — */
.author-box {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--pa-wash);
  border: 1px solid var(--pa-edge);
  border-left: 3px solid var(--pa);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.author-box__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.4rem;
}
.author-box__bio { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-1); }
.author-box__bio strong { color: var(--ink-0); }

/* — Contents panel — */
.gd-toc {
  margin: var(--sp-1) 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-1);
}
.gd-toc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink-0);
  transition: background 140ms;
}
.gd-toc__summary::-webkit-details-marker { display: none; }
.gd-toc__summary:hover { background: var(--bg-2); }
.gd-toc__summary::after {
  content: "+";
  display: grid; place-items: center;
  width: 24px; height: 24px;
  font-weight: 600;
  color: var(--pa);
  border: 1px solid var(--pa-edge);
  border-radius: 50%;
  flex-shrink: 0;
}
.gd-toc[open] .gd-toc__summary::after { content: "\2212"; }
.gd-toc__count {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: auto;
  margin-right: 0.6rem;
}
.gd-toc__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--line);
  counter-reset: gd-toc;
}
.gd-toc__item { counter-increment: gd-toc; }
.gd-toc__item a {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.5rem var(--sp-3);
  color: var(--ink-1);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms, color 140ms;
}
.gd-toc__item a::before {
  content: counter(gd-toc);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pa);
  flex-shrink: 0;
  width: 1.5em;
  text-align: right;
}
.gd-toc__item a:hover { background: var(--pa-wash); color: var(--ink-0); text-decoration: none; }

/* ── THE WRITEUP — generous reading measure ──────────────────── */
.writeup { max-width: 66ch; margin-top: var(--sp-4); }
body.guide-page .writeup, .shell--narrow .writeup { margin-top: var(--sp-2); }

.writeup p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-1);
  margin: 0 0 1.2em;
}
/* The opening paragraph welcomes */
body.guide-page .writeup > p:first-child {
  font-size: 1.14rem;
  line-height: 1.7;
  color: var(--ink-0);
}

.writeup > h2 {
  position: relative;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2.4em 0 0.7em;
  padding-top: 0.75rem;
  scroll-margin-top: 4.5rem;
}
.writeup > h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--pa);
}
.writeup > h2:first-child { margin-top: 0; }
.writeup > h3 {
  font-size: 1.15rem;
  margin: 1.9em 0 0.5em;
  scroll-margin-top: 4.5rem;
}

.writeup a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms, color 140ms;
}
.writeup a:hover { color: var(--brand-strong); text-decoration-color: var(--brand-strong); }

.writeup strong { color: var(--ink-0); font-weight: 700; }
.writeup em { color: var(--ink-0); }

/* — Unordered lists: quiet accent markers (shape varies by pv-orn) — */
.writeup ul { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.writeup ul > li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.55em;
  font-size: 1.03rem;
  line-height: 1.7;
}
.writeup ul > li::before {
  content: "";
  position: absolute;
  top: 0.68em; left: 0.15em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pa);
}

/* — Tables — */
.writeup table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-variant-numeric: tabular-nums;
}
.writeup th {
  text-align: left;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--pa-edge);
}
.writeup td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-1);
}
.writeup tbody tr:hover td { background: var(--bg-2); }
@media (max-width: 640px) {
  .writeup table { display: block; overflow-x: auto; }
}

.writeup blockquote {
  margin: 1.6em 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--pa);
  background: var(--pa-wash);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  color: var(--ink-0);
  font-size: 1.08rem;
}
.writeup blockquote p:last-child { margin-bottom: 0; }

.writeup details {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0;
}
.writeup details summary { cursor: pointer; font-weight: 700; color: var(--ink-0); }

/* ── SIGNATURE: the step rail ─────────────────────────────────
   Ordered lists in guides are real instructions — they get a
   designed numbered-step treatment in the category accent.     */
body.guide-page .writeup ol {
  list-style: none;
  counter-reset: step;
  margin: 1.75em 0 2em;
  padding: 0;
}
body.guide-page .writeup ol > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5em 3.4rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
}
body.guide-page .writeup ol > li:last-child { padding-bottom: 0.25em; }
/* the number */
body.guide-page .writeup ol > li::before {
  content: counter(step);
  position: absolute;
  top: -0.15em; left: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pa);
  background: var(--pa-wash);
  box-shadow: inset 0 0 0 1px var(--pa-edge);
  border-radius: 50%;
}
/* the rail that connects step to step */
body.guide-page .writeup ol > li::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 0.5px);
  top: 2.35rem;
  bottom: 0.35em;
  width: 1px;
  background: var(--pa-edge);
}
body.guide-page .writeup ol > li:last-child::after { display: none; }

/* Ordered lists elsewhere (home writeup etc.): plain and tidy */
body:not(.guide-page) .writeup ol { padding-left: 1.5em; margin: 0 0 1.4em; }
body:not(.guide-page) .writeup ol > li { margin-bottom: 0.55em; }
body:not(.guide-page) .writeup ol > li::marker { color: var(--pa); font-weight: 700; }

/* ── SIGNATURE: the calm safety callout ───────────────────────
   Safety guides mark their warnings with bold-lead paragraphs
   ("**The fix:** …"). Frame them as a quiet notice — informs,
   never alarms. (Graceful without :has() — plain paragraph.)  */
body.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child) {
  position: relative;
  margin: 1.6em 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 3.1rem;
  background: var(--pa-wash);
  border: 1px solid var(--pa-edge);
  border-radius: var(--r-3);
  color: var(--ink-1);
  font-size: 1.02rem;
}
body.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child)::before {
  content: "!";
  position: absolute;
  top: 1.05rem; left: 1rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--pa);
  border-radius: 50%;
}
:root[data-theme="dark"] body.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child)::before {
  color: var(--bg-0);
}
body.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child) > strong:first-child {
  color: var(--pa);
}

/* ═══════════════════════════════════════════════════════════════
   PER-PAGE VARIATION — build-time art direction, not randomness
   ═══════════════════════════════════════════════════════════════ */

/* ── pv-hero: three compositions for the page opening ────────── */

/* 0 · "wash" — a soft accent light from the top corner */
body.pv-hero-0 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header) {
  position: relative;
  isolation: isolate;
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
body.pv-hero-0 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header)::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  /* centered on the top-right corner so the clipped edges fall on the
     gradient's own axes — soft falloff, no floating hard line */
  background: radial-gradient(44rem 18rem at 100% 0%, var(--pa-soft), transparent 68%);
}

/* 1 · "panel" — the opening sits on a card with an accent rule */
body.pv-hero-1 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header) {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
body.pv-hero-1 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header)::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--pa) 0 3.5rem, color-mix(in srgb, var(--pa) 16%, transparent) 3.5rem 100%);
}
body.pv-hero-1 .lp-hero__inner { max-width: none; }
body.pv-hero-1 .lp-hero__title,
body.pv-hero-1 .lp-hero__lede { max-width: 640px; }

/* 2 · "rule" — airy, closed by a long line with an accent tick */
body.pv-hero-2 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header) {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-4);
  margin-bottom: var(--sp-4);
}
body.pv-hero-2 :is(.lp-hero__inner, .db-hero, .gd-hero, .tool-header)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pa) 0 3.5rem, var(--line) 3.5rem 100%);
}

/* ── pv-orn: ornament families (badges · markers · frames) ───── */

/* 1 · outlined ring family */
body.pv-orn-1.guide-page .writeup ol > li::before {
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pa) 55%, transparent);
}
body.pv-orn-1 .writeup ul > li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--pa);
  width: 8px; height: 8px;
}
body.pv-orn-1 .gx-card__tag::before {
  background: transparent;
  border-radius: 50%;
}
body.pv-orn-1.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child) {
  background: var(--bg-1);
  border-color: var(--pa-edge);
}

/* 2 · soft square family */
body.pv-orn-2.guide-page .writeup ol > li::before { border-radius: var(--r-1); }
body.pv-orn-2 .writeup ul > li::before { border-radius: 2px; }
body.pv-orn-2 .gx-card__tag::before { border-radius: 1px; }
body.pv-orn-2.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child) {
  border-radius: var(--r-1);
  border-left: 3px solid var(--pa);
}
body.pv-orn-2.guide-page[data-category="safety"] .writeup > p:has(> strong:first-child)::before {
  border-radius: var(--r-1);
}
body.pv-orn-2 .gd-toc__summary::after { border-radius: var(--r-1); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIT — 360 / 768 / 1200
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
  html, body { font-size: 16px; }
  .shell { padding: 0 var(--sp-2); }
  .topbar__row { min-height: 52px; gap: 0.15rem; }
  .nav__btn { padding: 0.45rem 0.5rem; }
  .nav__btn kbd { display: none; }            /* keep the words, drop the hint */
  .breadcrumb > span:last-child { max-width: 22ch; }
  body.guide-page .writeup ol > li { padding-left: 2.9rem; }
  body.guide-page .writeup ol > li::before { width: 2rem; height: 2rem; font-size: 0.92rem; }
  body.guide-page .writeup ol > li::after { left: calc(1rem - 0.5px); top: 2.1rem; }
  .footer__legal .row { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION & PRINT
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .gd-progress__bar { transition: none !important; }
}

@media print {
  .topbar, .footer, .ad-slot, .gd-progress, .cookie-banner, .palette-backdrop, .breadcrumb { display: none !important; }
  html, body { background: #fff; color: #000; }
  .writeup { max-width: none; }
  .writeup a { color: #000; text-decoration: underline; }
}

/* Empty ad containers stay invisible until a real ad unit fills them (AdSense
   dormant -> no blank reserved boxes at review; a filled slot is not :empty).
   Added 2026-07-06, mirroring the sports-network fix. */
.ad-slot:empty { display: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }