/* ==========================================================================
   Base: fonts, reset, typography, shared components (buttons, header, footer).
   Depends on tokens.css.
   ========================================================================== */

/* ---- Self-hosted fonts (latin subset) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2");
}
/* Metric-adjusted local fallbacks reduce layout shift while web fonts swap in. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 86%;
  ascent-override: 106%;
  descent-override: 33%;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 98%;
  ascent-override: 108%;
  descent-override: 38%;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}
ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
}
img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input, textarea, button, select {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}

/* ---- Typography ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { text-wrap: pretty; }
em { font-style: italic; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 38rem;
}

/* ---- Accessibility ---- */
:focus-visible {
  /* accent-ink resolves to dark gold on light backgrounds and to gold inside .on-dark */
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.visually-hidden {
  position: absolute !important;
  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: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.section {
  padding-block: var(--space-9);
}
.on-dark,
.section--dark {
  color: var(--color-dark-text);
  --color-text-muted: var(--color-dark-muted);
  --color-accent-ink: var(--color-accent);
  --color-border: var(--color-dark-border);
}
.section--dark {
  background: var(--color-dark-bg);
}
.section--surface {
  background: var(--color-surface);
}
.section__header {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  max-width: 40rem;
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.button:hover {
  background: transparent;
  color: var(--color-accent-ink);
}
.on-dark .button:hover,
.section--dark .button:hover {
  color: var(--color-accent);
}
.button--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.button--ghost:hover {
  border-color: var(--color-accent);
}
.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 404 ---- */
.not-found main {
  display: grid;
  gap: var(--space-5);
  min-height: 100vh;
  align-content: center;
}