/* base reset + typography */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(240, 168, 71, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(31, 111, 58, 0.10), transparent 55%),
    var(--c-bg);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; background: var(--c-surface-2); }

a { color: var(--c-brand-deep); text-decoration-color: rgba(31, 111, 58, 0.4); text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--c-accent); }
a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: var(--radius-s); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--c-brand-deep);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
h1 { font-size: var(--t-6xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-5xl); }
h3 { font-size: var(--t-3xl); }
h4 { font-size: var(--t-2xl); }

p { font-size: var(--t-l); line-height: var(--lh-body); color: var(--c-ink-2); }
small { font-size: var(--t-s); color: var(--c-muted); }

ul, ol { padding-left: 1.25rem; }
li + li { margin-top: var(--s-2); }

::selection { background: var(--c-accent-soft); color: var(--c-brand-deep); }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select {
  font: inherit; color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(31, 111, 58, 0.15);
}

.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--c-brand-deep); color: #fff;
  padding: var(--s-2) var(--s-4);
  z-index: var(--z-toast);
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { top: 0; }

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

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-7); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
  padding: var(--s-1) var(--s-3);
  background: var(--c-accent-cream);
  border-radius: var(--radius-pill);
  margin-bottom: var(--s-4);
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  font-weight: 400;
  max-width: 60ch;
}

.script-mark {
  font-family: var(--font-script);
  color: var(--c-accent);
  font-size: 1.5em;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line), transparent);
  margin-block: var(--s-7);
}

.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}