/* Kai-style Chinese font (王漢宗中楷體注音 / HanWang Kai Medium ChuIn, 文鼎/Arphic
   — licensed copy, author's own), subsetted to the ~1,300 hanzi/zhuyin/
   CJK-punctuation characters actually used in articles/*.md right now
   (13.7MB -> ~400KB — see site/fonts/subset_font.py to regenerate after
   adding characters that fall outside the current subset). This repo is
   private specifically so this licensed asset can live in it; it is not
   meant to go anywhere public as a raw file. Falls back per-glyph to the
   system CJK stack below for anything outside the subset (Hangul, Kana,
   any hanzi added after the last re-subset). */
@font-face {
  font-family: "HanWang Kai ChuIn";
  src: url("/static/fonts/hanwang-kai-chuin-subset.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  /* Chinese only — never Spanish/English/Latin text, never Hangul/Kana.
     unicode-range enforces this at the CSS level regardless of what glyphs
     the font file happens to contain, so it can't bleed into body prose. */
  unicode-range: U+3000-303F, U+3100-312F, U+31A0-31BF, U+3400-4DBF,
    U+4E00-9FFF, U+FF00-FFEF;
}

/* Klee One (fontworks-fonts/Klee, SIL OFL 1.1 — genuinely free, fetched
   straight from upstream GitHub, no licensing question unlike the font
   above) — the closest free equivalent to a Japanese 教科書体 (textbook/
   handwriting-model) font; the real commercial 教科書体 fonts (UD Digital
   Kyokasho, HG Kyokashotai) are proprietary. The subset covers kana AND
   kanji (see site/subset_klee_font.py) — deliberately NOT unicode-range-
   restricted here, because kanji and Chinese hanzi share Unicode
   codepoints and unicode-range can only match on codepoint, never on
   language. Which font wins for a given kanji is controlled below by
   *font-family order*, switched per language via the [lang="ja"] override
   on --sans — not by unicode-range. */
@font-face {
  font-family: "Klee One";
  src: url("/static/fonts/klee-one-subset.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* CKJ-ESP site — design tokens */
:root {
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --ink: #1a2233;
  --ink-muted: #545c6e;
  --ink-faint: #868fa3;
  --accent: #157567;
  --accent-ink: #ffffff;
  --accent-soft: #1575671a;
  --accent-soft-strong: #15756730;
  --line: rgba(26, 34, 51, 0.12);
  --line-strong: rgba(26, 34, 51, 0.22);
  --shadow: 0 1px 2px rgba(26, 34, 51, 0.05), 0 8px 20px rgba(26, 34, 51, 0.05);
  --code-bg: #1a223308;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: "HanWang Kai ChuIn", "Klee One", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Malgun Gothic",
    "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans CJK JP", "Noto Sans CJK SC", Roboto,
    system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "IBM Plex Mono", Consolas, monospace;
}

/* Any [lang="ja"]-tagged content (each 日本語 article section, the header
   tagline) gets Klee One ahead of the Chinese font for shared kanji
   codepoints. Two things are required, not just redefining the custom
   properties: (1) both --sans AND --serif need the override, since
   headings (h2/h3) explicitly use var(--serif), not var(--sans); and
   (2) `font-family: var(--sans)` has to be re-declared here too — a
   custom property redefined on an ancestor does NOT retroactively change
   `font-family` on descendants that never reference var(--sans)
   themselves (list items, paragraphs, table cells all just inherit
   body's already-computed font-family, computed once against the
   *root* --sans). Setting font-family here, on the element that actually
   carries [lang="ja"], gives descendants without their own font-family
   declaration a freshly-computed value to inherit instead. */
[lang="ja"] {
  --sans: "Klee One", "HanWang Kai ChuIn", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Noto Sans CJK JP", Roboto, system-ui,
    sans-serif;
  --serif: "Klee One", "HanWang Kai ChuIn", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Noto Serif", serif;
  font-family: var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c;
    --surface: #1a1e28;
    --surface-raised: #1e2330;
    --ink: #e7e9f0;
    --ink-muted: #9aa1b4;
    --ink-faint: #6b7387;
    --accent: #45b39d;
    --accent-ink: #0b1512;
    --accent-soft: #45b39d1f;
    --accent-soft-strong: #45b39d3a;
    --line: rgba(231, 233, 240, 0.13);
    --line-strong: rgba(231, 233, 240, 0.24);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.35);
    --code-bg: #e7e9f00c;
  }
}
:root[data-theme="dark"] {
  --bg: #12151c;
  --surface: #1a1e28;
  --surface-raised: #1e2330;
  --ink: #e7e9f0;
  --ink-muted: #9aa1b4;
  --ink-faint: #6b7387;
  --accent: #45b39d;
  --accent-ink: #0b1512;
  --accent-soft: #45b39d1f;
  --accent-soft-strong: #45b39d3a;
  --line: rgba(231, 233, 240, 0.13);
  --line-strong: rgba(231, 233, 240, 0.24);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 26px rgba(0, 0, 0, 0.35);
  --code-bg: #e7e9f00c;
}
:root[data-theme="light"] {
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --ink: #1a2233;
  --ink-muted: #545c6e;
  --ink-faint: #868fa3;
  --accent: #157567;
  --accent-ink: #ffffff;
  --accent-soft: #1575671a;
  --accent-soft-strong: #15756730;
  --line: rgba(26, 34, 51, 0.12);
  --line-strong: rgba(26, 34, 51, 0.22);
  --shadow: 0 1px 2px rgba(26, 34, 51, 0.05), 0 8px 20px rgba(26, 34, 51, 0.05);
  --code-bg: #1a223308;
}

/* Alto contraste / paleta accesible — blue accent instead of jade (blue is
   one of the few hues reliably distinguishable across every common form of
   color vision deficiency; red/green never appear as a semantic pair
   anywhere on this site, but the default jade accent itself is still a
   green some readers won't distinguish well from the ink/background), plus
   pure black/white ink and stronger borders throughout. */
:root[data-palette="alto-contraste"] {
  --accent: #1552b0;
  --accent-ink: #ffffff;
  --accent-soft: #1552b01f;
  --accent-soft-strong: #1552b03d;
  --ink: #000000;
  --ink-muted: #2b2b2b;
  --ink-faint: #4a4a4a;
  --line: rgba(0, 0, 0, 0.28);
  --line-strong: rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="alto-contraste"] {
    --accent: #8fbaff;
    --accent-ink: #001433;
    --accent-soft: #8fbaff26;
    --accent-soft-strong: #8fbaff45;
    --ink: #ffffff;
    --ink-muted: #d8dae0;
    --ink-faint: #b0b4bf;
    --line: rgba(255, 255, 255, 0.32);
    --line-strong: rgba(255, 255, 255, 0.55);
  }
}
:root[data-theme="dark"][data-palette="alto-contraste"] {
  --accent: #8fbaff;
  --accent-ink: #001433;
  --accent-soft: #8fbaff26;
  --accent-soft-strong: #8fbaff45;
  --ink: #ffffff;
  --ink-muted: #d8dae0;
  --ink-faint: #b0b4bf;
  --line: rgba(255, 255, 255, 0.32);
  --line-strong: rgba(255, 255, 255, 0.55);
}
:root[data-theme="light"][data-palette="alto-contraste"] {
  --accent: #1552b0;
  --accent-ink: #ffffff;
  --accent-soft: #1552b01f;
  --accent-soft-strong: #1552b03d;
  --ink: #000000;
  --ink-muted: #2b2b2b;
  --ink-faint: #4a4a4a;
  --line: rgba(0, 0, 0, 0.28);
  --line-strong: rgba(0, 0, 0, 0.5);
}

/* Font-size preference — everything below is set in rem, so scaling the
   root size scales the whole page proportionally (type, spacing, pills). */
:root { font-size: 17px; }
:root[data-fontsize="grande"] { font-size: 19px; }
:root[data-fontsize="xgrande"] { font-size: 22px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.drafts-banner {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
}

.site-shell {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ---------- Header ---------- */
.site-header {
  padding: 2.6rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
}
.brand-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.brand-tagline {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.site-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.nav-link {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.nav-link:hover { color: var(--accent); }

/* Accessibility controls: theme / text size / contrast */
.prefs-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pref-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  padding: 0.32rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pref-btn:hover { color: var(--accent); border-color: var(--accent); }
.pref-btn[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.pref-btn .pref-icon { font-size: 0.85rem; }

/* ---------- Homepage hero ---------- */
.hero { margin-bottom: 3.6rem; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-dek { color: var(--ink-muted); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 38rem; }

/* ---------- Latest article (homepage highlight) ---------- */
.latest-highlight { margin: 0 0 2rem; }
.latest-highlight-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.latest-highlight-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 0.9rem;
  padding: 1.5rem 1.7rem;
  transition: box-shadow 0.15s ease;
}
.latest-highlight-card:hover { box-shadow: var(--shadow); }
.latest-highlight-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

/* ---------- Interactive courses (homepage highlight) ---------- */
/* Deliberately NOT the .tag-heading look (mono/uppercase/accent) --
   that's what "Vocabulario", "Gramática" etc. use below, and reusing it
   here read as if this box were just another one of those groups. */
.courses-highlight { margin: 0 0 3.2rem; padding: 1.6rem 1.7rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 0.9rem; }
.courses-highlight-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin: 0 0 1rem; }
.courses-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.course-card { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 0.6rem; padding: 1rem 1.1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.course-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.course-card-heading { font-family: var(--sans); font-size: 1.3rem; color: var(--ink); }
.course-card-title { font-family: var(--serif); font-weight: 600; font-size: 0.95rem; color: var(--accent); }
.course-card-dek { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.45; }

/* ---------- Homepage layout + tag rail ---------- */
.site-shell--home { max-width: 60rem; }
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: 2.5rem;
  align-items: start;
}
.tag-rail {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tag-rail-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.3rem;
}
.tag-rail a {
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-decoration: none;
}
.tag-rail a:hover { color: var(--accent); }

@media (max-width: 60rem) {
  .home-layout { display: block; }
  .tag-rail { display: none; }
}

/* ---------- Article list ---------- */
.tag-heading {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.2rem 0 0.9rem;
  padding-top: 0.2rem;
}
.tag-heading:first-of-type { margin-top: 0; }
.tag-group { display: flex; flex-direction: column; gap: 0.7rem; }

.article-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 1.1rem 1.3rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.article-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.article-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.35;
}
.article-excerpt {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.45rem 0 0.7rem;
}

/* ---------- Meta pills (shared) ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lang-pill, .tag-pill, .date-pill, .draft-pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.lang-pill { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag-pill { border: 1px solid var(--line-strong); color: var(--ink-muted); }
.date-pill { color: var(--ink-faint); }
.draft-pill { background: #b8863a1f; color: #b8863a; font-weight: 600; }

/* ---------- Article audio player ---------- */
.audio-player {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.8rem;
  position: sticky;
  top: 0.6rem;
  z-index: 5;
  box-shadow: var(--shadow);
}
.audio-btn {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
  flex: none;
}
.audio-btn-skip {
  font-family: var(--mono);
  font-size: 0.68rem;
  width: 2.5rem;
  border-radius: 999px;
}
.audio-progress {
  flex: 1 1 auto;
  min-width: 6rem;
  height: 0.4rem;
  background: var(--line);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
.audio-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
}
.audio-time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.audio-speed {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  padding: 0.2rem 0.35rem;
}
.audio-follow {
  font-size: 0.75rem;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- Article page ---------- */
.article-header { margin-bottom: 2.4rem; }
.article-body p.reading {
  background: var(--accent-soft);
  border-radius: 0.3rem;
  box-shadow: 0 0 0 0.3rem var(--accent-soft);
}
.about-header .about-mark { display: block; margin: 0.3rem 0 1rem; border-radius: 999px; }
.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.back-link:hover { color: var(--accent); }

.article h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.35rem);
  line-height: 1.22;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.article-body {
  font-size: 1.03rem;
  line-height: 1.75;
}
.article-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 2.6rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  line-height: 1.35;
  color: var(--accent);
}
.article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.article-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 1.8rem 0 0.8rem;
  color: var(--accent);
}
.article-body p { margin: 0 0 1.15rem; }
.article-body ul, .article-body ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body a { text-decoration-line: underline; text-decoration-color: var(--line-strong); }
.article-body a:hover { text-decoration-color: var(--accent); }

.article-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}

/* Tables: this is a reference site, tables carry most of the payload */
.article-body .table-wrap,
.article-body table {
  width: 100%;
}
.article-body table {
  border-collapse: collapse;
  margin: 0 0 1.6rem;
  font-size: 0.94rem;
}
.article-body th, .article-body td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.article-body tr:nth-child(even) td { background: var(--code-bg); }

/* Markdown tables overflow the column on narrow screens */
.article-body table { display: block; overflow-x: auto; white-space: normal; }

.article-body blockquote {
  margin: 0 0 1.15rem;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
  font-style: italic;
}
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

/* First italic paragraph right under H1 (this project's "dek" convention) */
.article-body > p:first-child em:only-child { color: var(--ink-muted); }

/* ---------- Support + share ---------- */
.support-share {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.support-line { margin: 0 0 0.9rem; color: var(--ink-muted); font-size: 0.92rem; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.share-label { font-size: 0.85rem; color: var(--ink-muted); margin-right: 0.1rem; }
.share-btn {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.share-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Related ---------- */
.related {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.related h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.8rem;
}
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.related a { font-size: 0.95rem; }

/* ---------- Suggestion form (Netlify Forms, site/content/vision.md) ---------- */
.suggestion-form {
  margin: 1.4rem 0 0.6rem;
  padding: 1.4rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}
.suggestion-form .hp-field { position: absolute; left: -9999px; }
.suggestion-form .form-row { margin-bottom: 1rem; }
.suggestion-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.suggestion-form input[type="text"],
.suggestion-form input[type="email"],
.suggestion-form select,
.suggestion-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0.4rem;
  padding: 0.55rem 0.7rem;
  resize: vertical;
}
.suggestion-form input:focus,
.suggestion-form select:focus,
.suggestion-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.btn-primary {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.6;
}
.site-footer .credit { margin: 1.1rem 0 0.15rem; }
.site-footer .credit a { font-size: 0.8rem; }
.site-footer .credit-line {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.credit-mark { border-radius: 999px; vertical-align: middle; }
.site-footer .visit-counter { margin: 0.6rem 0 0; opacity: 0.85; }
.site-footer .visit-counter img { vertical-align: middle; border-radius: 0.2rem; }

@media (max-width: 30rem) {
  .site-shell { padding: 0 1.1rem 3rem; }
  .site-header { padding: 1.8rem 0 1.2rem; }
}