/* /about and /guides (scripts/build-guides.mjs). Static pages with no JavaScript, in the site's palette
   and type: Manrope for text, DM Mono for eyebrows and dates. */

:root {
  --g-ground: #f7f6f1;
  --g-surface: #fffefa;
  --g-ink: #17312c;
  --g-ink-muted: #4f625b;
  --g-line: #dce4dc;
  --g-brand: #0c7664;
  --g-deep: #123c36;
  --g-accent: #d05b3e;
  --g-gold: #d8b46a;
  --g-answer: #eef4ef;
  --g-on-deep: #f7f6f1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --g-ground: #0f1f1c;
    --g-surface: #152a26;
    --g-ink: #e8eee9;
    --g-ink-muted: #a9bab3;
    --g-line: #29433d;
    --g-brand: #5cc3ae;
    --g-deep: #0b1714;
    --g-accent: #f08a6c;
    --g-answer: #1a332e;
    --g-on-deep: #e8eee9;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--g-ground);
  color: var(--g-ink);
  font: 400 17px/1.65 Manrope, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-synthesis: none;
}

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

.g-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }

.g-skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--g-deep); color: var(--g-on-deep); }
.g-skip:focus { top: 12px; }

.g-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--g-ground) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--g-line); }
.g-header-row { max-width: 1080px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.g-header ul { display: flex; align-items: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: flex-end; }
.g-header ul a:not(.g-button) { color: var(--g-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.g-header ul a:not(.g-button):hover { color: var(--g-brand); }

.g-wordmark { color: var(--g-ink); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; text-decoration: none; }
.g-wordmark span { color: var(--g-accent); }

.g-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--g-brand); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s cubic-bezier(.16,1,.3,1), background-color .2s; }
.g-button:hover { transform: translateY(-1px); background: var(--g-deep); }
@media (prefers-color-scheme: dark) { .g-button { color: #0b1714; } .g-button:hover { background: #8fdcca; } }

.g-crumbs { padding-top: 22px; }
.g-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 12px/1.4 "DM Mono", ui-monospace, monospace; color: var(--g-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.g-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--g-line); }
.g-crumbs a { color: var(--g-ink-muted); text-decoration: none; }
.g-crumbs a:hover { color: var(--g-brand); }

.g-article { padding-top: 28px; padding-bottom: 64px; animation: g-rise .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-article { animation: none; } .g-button { transition: none; } }

.g-eyebrow { margin: 0 0 10px; font: 500 12px/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; color: var(--g-accent); }
h1 { margin: 0; font-size: clamp(32px, 6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; }
h2 { margin: 44px 0 12px; font-size: clamp(22px, 3.6vw, 27px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; }
h3 { margin: 26px 0 6px; font-size: 18px; line-height: 1.35; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 16px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--g-brand); }
strong { font-weight: 700; }

.g-meta { margin: 14px 0 0; font: 500 13px/1.4 "DM Mono", ui-monospace, monospace; color: var(--g-ink-muted); }
.g-lede { margin-top: 16px; font-size: 19px; color: var(--g-ink-muted); }

.g-answer { margin: 28px 0 0; padding: 20px 22px; border-radius: 18px; background: var(--g-answer); border: 1px solid var(--g-line); border-left: 4px solid var(--g-brand); }
.g-answer h2 { margin: 0 0 8px; font: 500 12px/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--g-brand); }
.g-answer p { margin: 0; font-size: 18px; line-height: 1.6; }

.g-disclosure { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--g-gold); font-size: 14px; color: var(--g-ink-muted); }

.g-table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-surface); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g-line); }
thead th { font: 500 12px/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--g-ink-muted); background: var(--g-answer); }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }

.g-facts { display: grid; gap: 0; margin: 0 0 16px; border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-surface); overflow: hidden; }
.g-facts div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--g-line); }
.g-facts div:last-child { border-bottom: 0; }
.g-facts dt { font-weight: 700; }
.g-facts dd { margin: 0; color: var(--g-ink-muted); }
@media (max-width: 520px) { .g-facts div { grid-template-columns: 1fr; gap: 2px; } }

.g-faq h3 { margin-top: 22px; }

.g-cta { margin: 48px 0 0; padding: 28px 24px; border-radius: 22px; background: var(--g-deep); color: var(--g-on-deep); }
.g-cta p { margin: 0 0 16px; }
.g-cta .g-cta-title { margin-bottom: 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
@media (prefers-color-scheme: dark) { .g-cta { background: var(--g-surface); border: 1px solid var(--g-line); } }

.g-related ul, .g-cards { list-style: none; padding: 0; }
.g-related li { margin: 0; border-bottom: 1px solid var(--g-line); }
.g-related a { display: block; padding: 12px 0; font-weight: 600; text-decoration: none; }

.g-cards { display: grid; gap: 14px; margin: 32px 0; }
.g-card { margin: 0; }
.g-card a { display: grid; gap: 6px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-ink); text-decoration: none; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s; }
.g-card a:hover { transform: translateY(-2px); border-color: var(--g-brand); }
.g-card .g-eyebrow { margin: 0; }
.g-card-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.g-card-body { color: var(--g-ink-muted); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .g-card a { transition: none; } }
@media (min-width: 720px) { .g-cards { grid-template-columns: 1fr 1fr; } }

.g-footer { border-top: 1px solid var(--g-line); background: var(--g-surface); padding: 40px 0 28px; font-size: 15px; }
.g-footer-grid { max-width: 1080px; display: grid; gap: 28px; }
@media (min-width: 760px) { .g-footer-grid { grid-template-columns: 1.2fr 1.4fr 1fr; } }
.g-footer p { margin: 8px 0 0; color: var(--g-ink-muted); }
.g-footer nav p { margin: 0 0 10px; font: 500 12px/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--g-ink-muted); }
.g-footer ul { margin: 0; padding: 0; list-style: none; }
.g-footer li { margin: 0 0 8px; }
.g-footer nav a { color: var(--g-ink); text-decoration: none; }
.g-footer nav a:hover { color: var(--g-brand); }
.g-footer-base { max-width: 1080px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--g-line); color: var(--g-ink-muted); font-size: 13px; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .g-header ul a:not(.g-button) { font-size: 14px; }
  .g-header .g-button { min-height: 40px; padding: 0 14px; font-size: 14px; }
}