/* ==========================================================================
   Rachel's Place — base.css
   Design tokens, reset, elements, utilities, light + dark themes.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --text-3xl: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii + shadows */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(35, 42, 34, 0.06), 0 2px 8px rgba(35, 42, 34, 0.04);
  --shadow-md: 0 4px 12px rgba(35, 42, 34, 0.07), 0 12px 32px rgba(35, 42, 34, 0.06);
  --shadow-lg: 0 8px 24px rgba(35, 42, 34, 0.09), 0 24px 60px rgba(35, 42, 34, 0.08);

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --header-h: 4.5rem;

  /* Fonts */
  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Light theme (default) ---------- */
:root,
[data-theme='light'] {
  color-scheme: light;
  --color-bg: #f7f3ec;
  --color-surface: #fffdf8;
  --color-surface-2: #f1e9dc;
  --color-surface-3: #eadfcd;
  --color-border: #e0d5c2;
  --color-divider: #ece2d3;

  --color-text: #22291f;
  --color-text-muted: #5c6753;
  --color-text-faint: #8b9481;
  --color-text-inverse: #fdfaf3;

  --color-primary: #1e4634;
  --scribble-green: #7FB892;
  --scribble-ink: #1e4634;
  --color-primary-hover: #163527;
  --color-primary-soft: #dfe8de;
  --color-primary-ink: #1e4634;

  --color-accent: #b4552e;
  --color-accent-hover: #99441f;
  --color-accent-soft: #f6e3d7;
  --color-accent-ink: #8d3f1d;

  --color-highlight: #d9a441;
  --color-focus: #1e4634;

  /* Full-width bands (trust strip, CTA) */
  --color-band-bg: #1e4634;
  --color-band-text: #fdfaf3;
  --color-band-border: transparent;
}

/* ---------- Dark theme ---------- */
[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #14180f;
  --color-surface: #1c2117;
  --color-surface-2: #242a1d;
  --color-surface-3: #2d3425;
  --color-border: #3a4230;
  --color-divider: #2c3324;

  --color-text: #eee8da;
  --color-text-muted: #b3bba4;
  --color-text-faint: #8b9480;
  --color-text-inverse: #161a11;

  --color-primary: #8cc0a0;
  --scribble-green: #3d7455;
  --scribble-ink: #f2ecdd;
  --color-primary-hover: #a6d2b6;
  --color-primary-soft: #23301f;
  --color-primary-ink: #a6d2b6;

  --color-accent: #e29670;
  --color-accent-hover: #eeaa86;
  --color-accent-soft: #34231a;
  --color-accent-ink: #eeaa86;

  --color-highlight: #e0b866;
  --color-focus: #8cc0a0;

  --color-band-bg: #212b1c;
  --color-band-text: #eee8da;
  --color-band-border: #3a4230;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
}
h4 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
  margin: 0 0 var(--space-4);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--color-accent-ink);
}

strong {
  font-weight: 600;
}

small {
  font-size: var(--text-xs);
}

blockquote {
  margin: 0;
}

ul,
ol {
  padding-left: 1.2em;
}

li + li {
  margin-top: var(--space-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-12) 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}

.section-tight {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-alt {
  background: var(--color-surface-2);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Utilities ---------- */
[hidden] {
  display: none !important;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin: 0 0 var(--space-3);
  display: block;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  vertical-align: -0.42em;
  background-color: var(--scribble-green);
  -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 standalone=%22no%22%3F%3E %3C%21DOCTYPE svg PUBLIC %22-//W3C//DTD SVG 20010904//EN%22 %22http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd%22%3E %3Csvg version=%221.0%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22280.000000pt%22 height=%22280.000000pt%22 viewBox=%220 0 280.000000 280.000000%22 preserveAspectRatio=%22xMidYMid meet%22%3E %3Cmetadata%3E Created by potrace 1.16, written by Peter Selinger 2001-2019 %3C/metadata%3E %3Cg transform=%22translate%280.000000,280.000000%29 scale%281.000000,-1.000000%29%22 fill=%22%23000000%22 stroke=%22none%22%3E %3Cpath d=%22M93 245 c-3 -1 -12 -5 -13 -6 0 -1 2 -1 4 -1 3 0 5 -1 8 -4 3 -4 3 -4 6 -2 2 1 8 4 13 7 5 2 9 5 9 5 0 2 -20 3 -27 1z%22/%3E %3Cpath d=%22M136 238 c-6 -2 -8 -3 -20 -12 -13 -11 -17 -15 -17 -18 0 -1 0 -2 -1 -2 -1 -1 -7 -15 -8 -21 -1 -3 -1 -3 16 -3 19 0 30 -1 44 -6 7 -3 9 -4 19 -8 20 -10 33 -10 41 -3 1 2 4 3 7 4 6 2 6 3 3 5 -7 5 -11 19 -8 29 1 7 1 14 0 18 -2 4 -3 5 -12 6 -1 1 -4 2 -6 3 -8 6 -11 7 -29 8 -10 0 -19 1 -20 2 -2 0 -6 -1 -9 -2z m-21 -21 c4 -3 2 -9 -3 -9 -5 0 -7 4 -3 9 1 2 4 3 6 0z m4 -20 c4 -2 10 -3 12 -3 13 0 37 -5 50 -11 6 -3 9 -3 18 -4 9 0 10 -1 10 -3 1 -6 -17 -6 -33 1 -8 3 -15 5 -25 7 -11 2 -25 4 -28 4 -8 0 -19 7 -17 9 2 3 4 2 13 0z%22/%3E %3Cpath d=%22M72 229 c-1 -3 -2 -3 -9 -2 -8 0 -9 0 -12 -2 -2 -2 -4 -3 -11 -3 -16 -1 -24 -13 -19 -27 3 -9 1 -17 -7 -23 -14 -13 -11 -26 9 -36 7 -4 7 -4 7 -1 0 8 31 37 40 37 4 0 9 -2 12 -6 2 -2 2 -2 8 -2 3 0 9 -1 13 -2 7 -1 9 -1 9 3 0 3 3 4 6 3 3 -1 3 -6 -1 -11 -1 -2 -3 -5 -3 -7 -1 -2 -2 -5 -4 -6 -2 -2 -2 -3 -2 -8 0 -13 -15 -19 -20 -9 -1 1 -1 3 -2 3 0 0 -2 0 -4 -1 -4 -1 -9 0 -10 3 -1 5 -5 1 -8 -7 -3 -8 -16 -18 -23 -18 -10 0 -13 -15 -4 -24 2 -3 5 -7 6 -11 2 -6 12 -21 13 -21 2 0 1 3 -1 6 -5 5 0 8 5 4 4 -3 4 -3 11 5 6 7 13 16 21 30 5 8 11 17 19 28 16 22 20 27 21 31 1 3 4 7 6 9 1 3 3 5 3 6 0 3 -24 5 -41 4 -21 -1 -22 1 -13 25 1 3 1 9 0 10 -1 1 -2 2 -2 3 0 0 -2 2 -5 4 -5 4 -8 8 -7 13 1 3 1 3 -1 0z%22/%3E %3Cpath d=%22M82 229 c-3 -2 -2 -3 0 -6 3 -3 5 -3 6 0 1 5 -3 9 -6 6z%22/%3E %3Cpath d=%22M145 162 c-3 -3 -5 -7 -6 -10 -2 -4 -15 -24 -17 -26 0 0 -2 -3 -4 -6 -3 -3 -6 -7 -8 -9 -4 -5 -3 -6 3 -6 8 0 18 -14 18 -23 -2 -19 -15 -22 -36 -9 -6 3 -6 3 -7 1 -1 -1 -5 -5 -8 -9 -13 -15 -13 -14 -13 -20 1 -15 27 -23 41 -12 6 4 24 5 33 2 11 -5 12 -4 13 8 1 5 2 11 3 11 1 2 3 11 4 23 2 17 7 29 11 29 3 0 3 -2 0 -10 -1 -5 -3 -12 -3 -16 -1 -8 -3 -19 -6 -33 -3 -13 -3 -14 3 -14 5 0 5 0 5 13 0 28 3 52 8 57 2 2 2 2 -6 6 -3 2 -6 3 -6 4 -2 2 -3 1 -9 -4 -7 -7 -12 -9 -19 -9 -12 1 -8 9 6 14 20 7 23 10 29 23 2 4 5 8 6 11 5 6 4 6 -4 9 -3 1 -8 3 -9 4 -3 1 -16 6 -17 6 -1 0 -3 -2 -5 -5z%22/%3E %3Cpath d=%22M227 166 c-2 -1 -1 -3 8 -9 11 -9 12 -13 4 -19 -10 -8 -30 -1 -30 11 0 6 -18 8 -20 1 -2 -4 -9 -17 -12 -23 -5 -8 -5 -10 2 -13 12 -4 20 4 20 22 0 10 0 11 4 11 3 0 6 -18 3 -21 -3 -3 -3 -8 0 -14 5 -10 1 -25 -6 -25 -5 0 -6 3 -6 12 0 8 0 8 -3 8 -1 -1 -4 -1 -5 -2 -2 0 -3 -1 -3 -6 -1 -3 -2 -9 -2 -13 -3 -16 -4 -56 -1 -56 15 -4 29 3 36 19 6 14 4 12 20 13 18 1 24 4 31 17 4 9 10 38 8 44 0 0 -1 3 -1 6 -2 10 -10 22 -18 26 -12 6 -26 12 -27 12 0 0 -1 0 -2 -1z%22/%3E %3Cpath d=%22M62 160 c-6 -5 -22 -21 -23 -25 -1 -5 15 -4 19 2 2 1 10 6 12 5 0 0 1 0 2 0 4 -2 7 3 6 7 -1 2 -1 4 -1 7 3 8 -5 10 -15 4z%22/%3E %3Cpath d=%22M216 158 c-3 -4 3 -13 8 -13 11 -2 13 -1 5 6 -6 5 -12 9 -13 7z%22/%3E %3Cpath d=%22M87 155 c-4 -1 2 -8 8 -8 6 0 11 5 6 7 -2 1 -12 2 -14 1z%22/%3E %3Cpath d=%22M93 136 c-1 -2 0 -5 2 -5 3 0 5 2 5 5 0 3 -5 3 -7 0z%22/%3E %3Cpath d=%22M102 97 c-2 -1 -3 -3 -3 -3 0 -1 -1 -3 -3 -6 -4 -5 -4 -6 5 -11 14 -8 23 -6 23 5 0 10 -16 21 -22 15z%22/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 standalone=%22no%22%3F%3E %3C%21DOCTYPE svg PUBLIC %22-//W3C//DTD SVG 20010904//EN%22 %22http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd%22%3E %3Csvg version=%221.0%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22280.000000pt%22 height=%22280.000000pt%22 viewBox=%220 0 280.000000 280.000000%22 preserveAspectRatio=%22xMidYMid meet%22%3E %3Cmetadata%3E Created by potrace 1.16, written by Peter Selinger 2001-2019 %3C/metadata%3E %3Cg transform=%22translate%280.000000,280.000000%29 scale%281.000000,-1.000000%29%22 fill=%22%23000000%22 stroke=%22none%22%3E %3Cpath d=%22M93 245 c-3 -1 -12 -5 -13 -6 0 -1 2 -1 4 -1 3 0 5 -1 8 -4 3 -4 3 -4 6 -2 2 1 8 4 13 7 5 2 9 5 9 5 0 2 -20 3 -27 1z%22/%3E %3Cpath d=%22M136 238 c-6 -2 -8 -3 -20 -12 -13 -11 -17 -15 -17 -18 0 -1 0 -2 -1 -2 -1 -1 -7 -15 -8 -21 -1 -3 -1 -3 16 -3 19 0 30 -1 44 -6 7 -3 9 -4 19 -8 20 -10 33 -10 41 -3 1 2 4 3 7 4 6 2 6 3 3 5 -7 5 -11 19 -8 29 1 7 1 14 0 18 -2 4 -3 5 -12 6 -1 1 -4 2 -6 3 -8 6 -11 7 -29 8 -10 0 -19 1 -20 2 -2 0 -6 -1 -9 -2z m-21 -21 c4 -3 2 -9 -3 -9 -5 0 -7 4 -3 9 1 2 4 3 6 0z m4 -20 c4 -2 10 -3 12 -3 13 0 37 -5 50 -11 6 -3 9 -3 18 -4 9 0 10 -1 10 -3 1 -6 -17 -6 -33 1 -8 3 -15 5 -25 7 -11 2 -25 4 -28 4 -8 0 -19 7 -17 9 2 3 4 2 13 0z%22/%3E %3Cpath d=%22M72 229 c-1 -3 -2 -3 -9 -2 -8 0 -9 0 -12 -2 -2 -2 -4 -3 -11 -3 -16 -1 -24 -13 -19 -27 3 -9 1 -17 -7 -23 -14 -13 -11 -26 9 -36 7 -4 7 -4 7 -1 0 8 31 37 40 37 4 0 9 -2 12 -6 2 -2 2 -2 8 -2 3 0 9 -1 13 -2 7 -1 9 -1 9 3 0 3 3 4 6 3 3 -1 3 -6 -1 -11 -1 -2 -3 -5 -3 -7 -1 -2 -2 -5 -4 -6 -2 -2 -2 -3 -2 -8 0 -13 -15 -19 -20 -9 -1 1 -1 3 -2 3 0 0 -2 0 -4 -1 -4 -1 -9 0 -10 3 -1 5 -5 1 -8 -7 -3 -8 -16 -18 -23 -18 -10 0 -13 -15 -4 -24 2 -3 5 -7 6 -11 2 -6 12 -21 13 -21 2 0 1 3 -1 6 -5 5 0 8 5 4 4 -3 4 -3 11 5 6 7 13 16 21 30 5 8 11 17 19 28 16 22 20 27 21 31 1 3 4 7 6 9 1 3 3 5 3 6 0 3 -24 5 -41 4 -21 -1 -22 1 -13 25 1 3 1 9 0 10 -1 1 -2 2 -2 3 0 0 -2 2 -5 4 -5 4 -8 8 -7 13 1 3 1 3 -1 0z%22/%3E %3Cpath d=%22M82 229 c-3 -2 -2 -3 0 -6 3 -3 5 -3 6 0 1 5 -3 9 -6 6z%22/%3E %3Cpath d=%22M145 162 c-3 -3 -5 -7 -6 -10 -2 -4 -15 -24 -17 -26 0 0 -2 -3 -4 -6 -3 -3 -6 -7 -8 -9 -4 -5 -3 -6 3 -6 8 0 18 -14 18 -23 -2 -19 -15 -22 -36 -9 -6 3 -6 3 -7 1 -1 -1 -5 -5 -8 -9 -13 -15 -13 -14 -13 -20 1 -15 27 -23 41 -12 6 4 24 5 33 2 11 -5 12 -4 13 8 1 5 2 11 3 11 1 2 3 11 4 23 2 17 7 29 11 29 3 0 3 -2 0 -10 -1 -5 -3 -12 -3 -16 -1 -8 -3 -19 -6 -33 -3 -13 -3 -14 3 -14 5 0 5 0 5 13 0 28 3 52 8 57 2 2 2 2 -6 6 -3 2 -6 3 -6 4 -2 2 -3 1 -9 -4 -7 -7 -12 -9 -19 -9 -12 1 -8 9 6 14 20 7 23 10 29 23 2 4 5 8 6 11 5 6 4 6 -4 9 -3 1 -8 3 -9 4 -3 1 -16 6 -17 6 -1 0 -3 -2 -5 -5z%22/%3E %3Cpath d=%22M227 166 c-2 -1 -1 -3 8 -9 11 -9 12 -13 4 -19 -10 -8 -30 -1 -30 11 0 6 -18 8 -20 1 -2 -4 -9 -17 -12 -23 -5 -8 -5 -10 2 -13 12 -4 20 4 20 22 0 10 0 11 4 11 3 0 6 -18 3 -21 -3 -3 -3 -8 0 -14 5 -10 1 -25 -6 -25 -5 0 -6 3 -6 12 0 8 0 8 -3 8 -1 -1 -4 -1 -5 -2 -2 0 -3 -1 -3 -6 -1 -3 -2 -9 -2 -13 -3 -16 -4 -56 -1 -56 15 -4 29 3 36 19 6 14 4 12 20 13 18 1 24 4 31 17 4 9 10 38 8 44 0 0 -1 3 -1 6 -2 10 -10 22 -18 26 -12 6 -26 12 -27 12 0 0 -1 0 -2 -1z%22/%3E %3Cpath d=%22M62 160 c-6 -5 -22 -21 -23 -25 -1 -5 15 -4 19 2 2 1 10 6 12 5 0 0 1 0 2 0 4 -2 7 3 6 7 -1 2 -1 4 -1 7 3 8 -5 10 -15 4z%22/%3E %3Cpath d=%22M216 158 c-3 -4 3 -13 8 -13 11 -2 13 -1 5 6 -6 5 -12 9 -13 7z%22/%3E %3Cpath d=%22M87 155 c-4 -1 2 -8 8 -8 6 0 11 5 6 7 -2 1 -12 2 -14 1z%22/%3E %3Cpath d=%22M93 136 c-1 -2 0 -5 2 -5 3 0 5 2 5 5 0 3 -5 3 -7 0z%22/%3E %3Cpath d=%22M102 97 c-2 -1 -3 -3 -3 -3 0 -1 -1 -3 -3 -6 -4 -5 -4 -6 5 -11 14 -8 23 -6 23 5 0 10 -16 21 -22 15z%22/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.muted {
  color: var(--color-text-muted);
}

.prose {
  max-width: 68ch;
}

/* Legal pages (privacy, terms): wider reading column on laptops and desktops. */
.wrap-legal.prose {
  max-width: 960px;
}

.wrap-legal.prose p,
.wrap-legal.prose li {
  max-width: 80ch;
}

.prose h2 {
  margin-top: var(--space-10);
}

.prose h3 {
  margin-top: var(--space-8);
}

.center {
  text-align: center;
}

.center .lede,
.center .prose {
  margin-inline: auto;
}

.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;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-text-inverse);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  min-height: 2.875rem;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-accent);
  color: #fffdf8;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fffdf8;
}

[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-primary:hover {
  color: #1a1208;
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.btn-solid {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn-solid:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Motion ---------- */
.fade-up {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.fade-up.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .fade-up {
    opacity: 1;
  }
  .btn:hover {
    transform: none;
  }
}