/* GENERATED by content/build-site.mjs from hostinger/config/site.json (design.palette) + content/site.css. */
:root {
  --gwp-bg: #EAF1DC;
  --gwp-slot: #DDE8CA;
  --gwp-card: #FBFDF5;
  --gwp-line: #C7D5B3;
  --gwp-ink: #1B3022;
  --gwp-muted: #566657;
  --gwp-accent: #3A8337;
  --gwp-on-accent: #FFFFFF;
  --gwp-near: #D9A32B;
  --gwp-leaf2: #8FC25A;
  --gwp-bark: #6B4E32;
  --gwp-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --gwp-font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gwp-radius: 18px; --gwp-radius-sm: 12px; --gwp-radius-pill: 999px;
  --gwp-content: 760px; --gwp-wide: 1120px; --gwp-gutter: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gwp-bg: #0F1A15;
    --gwp-slot: #16231C;
    --gwp-card: #18261E;
    --gwp-line: #2C4034;
    --gwp-ink: #E6F0E0;
    --gwp-muted: #9DB09D;
    --gwp-accent: #8FD36B;
    --gwp-on-accent: #0A140E;
    --gwp-near: #E0B44A;
    --gwp-leaf2: #A5DB84;
    --gwp-bark: #8A6A48;
  }
}
/* WordPith roots site — the whole stylesheet. content/build-site.mjs prepends the colour tokens
   (generated from site.json → design.palette: the app's Meadow look, and Dusk in dark mode) and
   writes the result to dist/assets/site.css. Components are prefixed gwp-. Mobile first: nothing
   here may cause a horizontal scroll at 375px. */

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */
body.wordpith { background: var(--gwp-bg); color: var(--gwp-ink); font-family: var(--gwp-font-sans); font-weight: 500;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.wordpith { margin: 0; font-size: 17px; line-height: 1.6; }
/* Footer at the bottom of short pages: header, main, footer as a column; main takes the slack. */
body.wordpith { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.wordpith > main { flex: 1 0 auto; }
body.wordpith :is(h1, h2, h3, h4) { font-family: var(--gwp-font-display); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.1; color: var(--gwp-ink); text-wrap: balance; }
body.wordpith h1 { font-size: clamp(34px, 8vw, 56px); }
body.wordpith h2 { font-size: clamp(24px, 5vw, 32px); }
body.wordpith h3 { font-size: 20px; }
body.wordpith :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gwp-accent); outline-offset: 3px; border-radius: 4px; }
body.wordpith img, body.wordpith svg, body.wordpith video { max-width: 100%; height: auto; }
body.wordpith h2 { margin: 1.6em 0 .5em; }
body.wordpith h3 { margin: 0 0 .3em; }
/* The reading column, with a 16px gutter on phones; no block may push the page wider than the screen. */
body.wordpith { overflow-x: clip; }
.gwp-main { width: 100%; max-width: calc(var(--gwp-content) + 2 * var(--gwp-gutter)); margin: 0 auto; padding: 8px var(--gwp-gutter) 24px; }
.gwp-main > h1 { margin: .5em 0 .3em; }
.gwp-skip { position: absolute; left: -9999px; }
.gwp-skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--gwp-card); padding: 8px 12px; border-radius: 8px; }

/* Links in running content: ink with an accent underline. Accent text on the light background is
   ~4.0:1 — under AA for body text — so the colour goes on the underline. Never in the header, footer or nav. */
body.wordpith .gwp-main
  a:not(.gwp-btn):not(.gwp-chip):not(.gwp-wordcard):not(.gwp-card):not(:is(nav, .gwp-az) a) {
  color: var(--gwp-ink); text-decoration: underline; text-decoration-color: var(--gwp-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.wordpith .gwp-main a:not(.gwp-btn):not(.gwp-card):hover { text-decoration-thickness: 3px; }
a.gwp-card { display: block; color: var(--gwp-ink); text-decoration: none; }
a.gwp-card:hover { border-color: var(--gwp-accent); }
a.gwp-card h3 { color: var(--gwp-ink); }

/* ── Header: the mark + the name, then nav ────────────────────────────────────────────────────── */
body.wordpith .gwp-header { border-bottom: 1px solid var(--gwp-line); background: var(--gwp-bg); padding: 12px var(--gwp-gutter); }
body.wordpith .gwp-header__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
  max-width: var(--gwp-wide); margin: 0 auto; }
body.wordpith .gwp-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1.1 var(--gwp-font-display);
  color: var(--gwp-ink); text-decoration: none; white-space: nowrap; letter-spacing: -.02em; }
body.wordpith .gwp-brand svg { width: 32px; height: 32px; display: block; flex: none; }
body.wordpith .gwp-nav ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
/* 44px tall tap targets; the underline stays on the text. */
body.wordpith .gwp-nav a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  font: 700 15px/20px var(--gwp-font-sans); color: var(--gwp-ink); text-decoration: none; border-bottom: 3px solid transparent; }
body.wordpith .gwp-nav a:hover, body.wordpith .gwp-nav a[aria-current="page"] { border-bottom-color: var(--gwp-accent); }
@media (max-width: 640px) {
  body.wordpith .gwp-header__row { flex-direction: column; align-items: flex-start; }
  body.wordpith .gwp-nav ul { gap: 0 14px; }
  body.wordpith .gwp-nav a { font-size: 14px; }
}

/* ── Footer: a slot band ──────────────────────────────────────────────────────────────────────── */
body.wordpith .gwp-footer-wrap { background: var(--gwp-slot); margin-top: 48px; padding: 48px var(--gwp-gutter) 32px; }
body.wordpith .gwp-footer { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: var(--gwp-wide); margin-inline: auto; }
@media (min-width: 760px) { body.wordpith .gwp-footer { grid-template-columns: minmax(220px, 1.1fr) 3fr; gap: 32px 48px; } }
body.wordpith .gwp-footer__mark svg { width: 36px; height: 36px; display: block; }
body.wordpith .gwp-footer__name { font: 800 22px/1.2 var(--gwp-font-display); margin: 12px 0 6px; }
body.wordpith .gwp-footer__blurb { font: 500 15px/22px var(--gwp-font-sans); color: var(--gwp-muted); margin: 0; max-width: 36ch; }
body.wordpith .gwp-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
body.wordpith .gwp-footer__title { font: 700 13px/16px var(--gwp-font-sans); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; color: var(--gwp-muted); }
body.wordpith .gwp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.wordpith .gwp-footer__col a { display: inline-block; padding-block: 6px; font: 500 15px/20px var(--gwp-font-sans); color: var(--gwp-ink); text-decoration: none; }
body.wordpith .gwp-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--gwp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.wordpith .gwp-footer__fine { grid-column: 1 / -1; font: 500 13px/20px var(--gwp-font-sans); color: var(--gwp-muted);
  border-top: 1px solid var(--gwp-line); padding-top: 16px; margin: 0; }
body.wordpith .gwp-footer__fine a { color: inherit; text-decoration: underline; text-decoration-color: var(--gwp-accent); text-underline-offset: 3px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────── */
/* Flat, like the app since the October redesign (the owner's call: all buttons flat; only tiles keep the hard edge). */
body.wordpith .gwp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; box-sizing: border-box;
  background: var(--gwp-accent); color: var(--gwp-on-accent); border: 1px solid var(--gwp-accent); border-radius: var(--gwp-radius-sm);
  font: 700 16px/20px var(--gwp-font-sans); padding: 12px 22px; text-decoration: none; cursor: pointer; transition: background-color .12s ease; }
body.wordpith .gwp-btn:hover { color: var(--gwp-on-accent);
  background: color-mix(in srgb, var(--gwp-accent) 85%, var(--gwp-ink)); }
body.wordpith .gwp-btn.is-quiet { background: transparent; color: var(--gwp-ink); border-color: var(--gwp-line); }
body.wordpith .gwp-btn.is-quiet:hover { background: var(--gwp-card); color: var(--gwp-ink); border-color: var(--gwp-accent); }

/* ── The inline mark: token colours, so it follows dark mode ───────────────────────────────────── */
.gwp-m-leaf { fill: var(--gwp-accent); }
.gwp-m-vein { stroke: var(--gwp-on-accent); }

/* ══ Content components (emitted by the page generator) ═══════════════════════════════════════ */

/* Breadcrumb: Home › Roots › spect */
.gwp-breadcrumb { font: 500 14px/20px var(--gwp-font-sans); color: var(--gwp-muted); margin: 16px 0 8px; }
.gwp-breadcrumb ol, .gwp-breadcrumb ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gwp-breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--gwp-line); }
body.wordpith .gwp-breadcrumb a { color: var(--gwp-muted); text-decoration: none; }
body.wordpith .gwp-breadcrumb a:hover { color: var(--gwp-ink); text-decoration: underline; }
.gwp-breadcrumb [aria-current] { color: var(--gwp-ink); }

/* Lede: the first paragraph under the H1 */
.gwp-lede { font: 500 clamp(18px, 4.4vw, 21px)/1.5 var(--gwp-font-sans); color: var(--gwp-ink); margin: 8px 0 24px; max-width: 62ch; }

/* Tiles: word parts as game tiles — the app's look. pre + spect + ive */
.gwp-tiles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.gwp-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; box-sizing: border-box;
  padding: .3em .6em .25em; background: var(--gwp-card); color: var(--gwp-ink);
  border: 1px solid var(--gwp-line); border-bottom: 3px solid var(--gwp-line); border-radius: 10px;
  font: 800 1em/1 var(--gwp-font-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.gwp-tile.is-root { background: var(--gwp-accent); color: var(--gwp-on-accent); border-color: var(--gwp-accent);
  border-bottom-color: color-mix(in srgb, var(--gwp-accent) 60%, var(--gwp-ink)); }
h1 .gwp-tiles, h1 + .gwp-tiles { font-size: clamp(20px, 5vw, 28px); }

/* Card and grid */
.gwp-card { background: var(--gwp-card); border: 1px solid var(--gwp-line); border-radius: var(--gwp-radius); padding: 20px; box-sizing: border-box; }
.gwp-card > :first-child { margin-top: 0; }
.gwp-card > :last-child { margin-bottom: 0; }
.gwp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 16px 0 24px; padding: 0; list-style: none; }

/* Word card: tiles + the word + a one-line clue. May be a link. */
.gwp-wordcard { display: flex; flex-direction: column; gap: 8px; background: var(--gwp-card); border: 1px solid var(--gwp-line);
  border-radius: var(--gwp-radius); padding: 16px; box-sizing: border-box; color: var(--gwp-ink); text-decoration: none; min-width: 0; }
.gwp-wordcard .gwp-tiles { font-size: 14px; }
.gwp-wordcard :is(.gwp-word, h3, strong) { font: 800 20px/1.15 var(--gwp-font-display); margin: 0; color: var(--gwp-ink); }
.gwp-wordcard :is(.gwp-clue, p) { font: 500 15px/1.45 var(--gwp-font-sans); color: var(--gwp-muted); margin: 0; }
a.gwp-wordcard:hover, .gwp-wordcard:has(a:hover) { border-color: var(--gwp-accent); }
.gwp-wordcard a { color: inherit; text-decoration: none; }

/* Meta row: origin · meaning · frequency */
.gwp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 14px/20px var(--gwp-font-sans); color: var(--gwp-muted); margin: 8px 0 16px; }
.gwp-meta > * + *::before { content: "·"; margin-right: 14px; color: var(--gwp-line); }
.gwp-meta > * { display: inline-flex; }

/* Chips: related roots, lists */
.gwp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; padding: 0; list-style: none; }
.gwp-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; box-sizing: border-box;
  background: var(--gwp-card); color: var(--gwp-ink); border: 1px solid var(--gwp-line); border-radius: var(--gwp-radius-pill);
  font: 700 14px/20px var(--gwp-font-sans); text-decoration: none; }
body.wordpith a.gwp-chip:hover { border-color: var(--gwp-accent); box-shadow: inset 0 0 0 1px var(--gwp-accent); }

/* App call-to-action band */
.gwp-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--gwp-slot); border-radius: var(--gwp-radius); padding: 20px; margin: 32px 0; box-sizing: border-box; }
.gwp-app > :is(p, div, h2, h3) { margin: 0; flex: 1 1 260px; min-width: 0; }
.gwp-app :is(h2, h3) { font-size: 22px; }
.gwp-app .gwp-btn { flex: 0 0 auto; }
@media (max-width: 480px) { .gwp-app .gwp-btn { width: 100%; } }

/* Quiz: a question card; options are buttons; assets/site.js marks right / wrong */
.gwp-quiz { background: var(--gwp-card); border: 1px solid var(--gwp-line); border-radius: var(--gwp-radius); padding: 20px; margin: 24px 0; box-sizing: border-box; }
.gwp-quiz-q + .gwp-quiz-q { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gwp-line); }
.gwp-quiz :is(p, h3):first-child { margin-top: 0; }
.gwp-quiz button { display: flex; align-items: center; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 10px 16px; box-sizing: border-box;
  background: var(--gwp-bg); color: var(--gwp-ink); border: 1px solid var(--gwp-line); border-bottom-width: 3px; border-radius: var(--gwp-radius-sm);
  font: 700 16px/1.3 var(--gwp-font-sans); text-align: left; cursor: pointer; }
.gwp-quiz button:hover:not(:disabled) { border-color: var(--gwp-accent); }
.gwp-quiz button:disabled { cursor: default; opacity: .7; }
.gwp-quiz button.is-right { background: var(--gwp-accent); color: var(--gwp-on-accent); border-color: var(--gwp-accent); opacity: 1; }
.gwp-quiz button.is-wrong { background: color-mix(in srgb, var(--gwp-near) 22%, var(--gwp-card)); border-color: var(--gwp-near); opacity: 1; }
.gwp-quiz button.is-right::after { content: "✓"; margin-left: auto; padding-left: 12px; }
.gwp-quiz button.is-wrong::after { content: "✗"; margin-left: auto; padding-left: 12px; }
.gwp-quiz-reveal { margin-top: 14px; font: 500 15px/1.5 var(--gwp-font-sans); color: var(--gwp-ink); }
.gwp-quiz-reveal[hidden] { display: none; }

/* A–Z letter jump row */
.gwp-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 24px; padding: 0; list-style: none; }
.gwp-az a, .gwp-az span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box;
  background: var(--gwp-card); color: var(--gwp-ink); border: 1px solid var(--gwp-line); border-bottom-width: 3px; border-radius: 10px;
  font: 800 16px/1 var(--gwp-font-display); text-transform: uppercase; text-decoration: none; }
.gwp-az a:hover, .gwp-az a[aria-current] { background: var(--gwp-accent); color: var(--gwp-on-accent); border-color: var(--gwp-accent); }
.gwp-az span { color: var(--gwp-muted); opacity: .5; }   /* a letter with no entries */

/* Ad slots: hidden unless AdSense is switched on (build-site.mjs adds body.gwp-ads-on) */
.gwp-ad { display: none; }
body.gwp-ads-on .gwp-ad { display: block; margin: 28px 0; min-height: 100px; text-align: center; }

/* Affiliate box (exam list pages only) */
.gwp-aff { position: relative; background: var(--gwp-card); border: 1px dashed var(--gwp-line); border-radius: var(--gwp-radius); padding: 28px 20px 18px; margin: 28px 0; }
.gwp-aff::before { content: "Partner links"; position: absolute; top: 8px; left: 20px; font: 700 11px/14px var(--gwp-font-sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gwp-muted); }
.gwp-aff ul { margin: 0; padding-left: 1.1em; }
.gwp-aff li + li { margin-top: 8px; }

/* Tables in content (root → words) scroll inside themselves, never the page */
body.wordpith table { display: block; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  body.wordpith .gwp-btn { transition: none; }
}

/* ── Page-generator components (content/build-pages.mjs) ─────────────────────────────────────── */

/* Home hero */
.gwp-hero { padding: 24px 0 8px; }
.gwp-kicker { margin: 0 0 8px; font: 700 13px/1.2 var(--gwp-font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gwp-muted); }
.gwp-hero-line { margin: 0 0 12px; font: 800 clamp(38px, 9vw, 64px)/1.02 var(--gwp-font-display); letter-spacing: -.02em; color: var(--gwp-ink); }
.gwp-hero-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 20px; }
.gwp-hero-tiles .gwp-tiles { font-size: clamp(20px, 5vw, 28px); }
.gwp-hero-tiles .gwp-meta { margin: 0; }
.gwp-hero p:last-child { display: flex; flex-wrap: wrap; gap: 10px; }

/* Root of the day */
.gwp-rotd { margin: 24px 0; }
.gwp-rotd .gwp-rotd-root { margin: 0 0 4px; font-size: clamp(30px, 7vw, 44px); }
.gwp-rotd .gwp-rotd-root a { color: var(--gwp-ink); text-decoration: none; }
.gwp-rotd .gwp-rotd-root a:hover { color: var(--gwp-accent); }
.gwp-rotd .gwp-grid { margin-bottom: 0; }
.gwp-rotd .gwp-wordcard { background: var(--gwp-bg); }

/* Facts box: a definition list of label / value rows */
.gwp-facts { margin: 0 0 24px; }
.gwp-facts dl { margin: 0; display: grid; gap: 10px; }
.gwp-facts dl > div { display: grid; grid-template-columns: minmax(96px, 9em) 1fr; gap: 12px; align-items: baseline; }
.gwp-facts dt { font: 700 13px/1.4 var(--gwp-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gwp-muted); }
.gwp-facts dd { margin: 0; font-weight: 700; color: var(--gwp-ink); min-width: 0; }
@media (max-width: 420px) { .gwp-facts dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* Word page: the parts, one per row */
.gwp-parts { list-style: none; margin: 12px 0 24px; padding: 0; display: grid; gap: 10px; }
.gwp-parts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gwp-parts li .gwp-tile { min-width: 3.4em; }
.gwp-parts .gwp-meta { display: inline; margin: 0; }

/* Chip: a root plus its meaning */
.gwp-chip > span { margin-left: 8px; font-weight: 500; color: var(--gwp-muted); }
.gwp-chip > a { color: var(--gwp-ink); text-decoration: none; }
.gwp-chip:has(> a:hover) { border-color: var(--gwp-accent); }

/* Quiz: the generator's markup (one .gwp-quiz per question, options in .gwp-quiz-opts) */
.gwp-quiz + .gwp-quiz { margin-top: 12px; }
.gwp-quiz .gwp-quiz-q { margin: 0 0 4px; font-weight: 700; }
.gwp-quiz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0 10px; }