/* Base element styles, resets, fonts and keyframes */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  overflow-x: hidden;
}

body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--c-terracotta-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

summary::-webkit-details-marker { display: none; }

input, select, textarea, button { font-family: inherit; }

/* Site shell: sticky footer */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1; animation: a-up .6s var(--ease) both; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus { left: 8px; color: var(--c-paper); }

/* Typography helpers */
.eyebrow {
  margin: 0;
  font: 500 var(--t-mono)/1 var(--f-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-terracotta-ink);
}
.eyebrow--on-ink { color: var(--c-terracotta-lt); }
.eyebrow--muted  { color: var(--c-text-muted-2); font-size: var(--t-mono-sm); letter-spacing: var(--ls-mono-sm); }

.h-hero, .h-page, .h-page--sm, .h-sec, .h-sec--sm {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}
.h-hero     { font-size: var(--t-hero);      line-height: var(--lh-tight); }
.h-page     { font-size: var(--t-page-h1);   line-height: var(--lh-tight); }
.h-page--sm { font-size: var(--t-page-h1-s); line-height: var(--lh-tight); }
.h-sec      { font-size: var(--t-h2);        line-height: var(--lh-head); }
.h-sec--sm  { font-size: var(--t-h2-sm);     line-height: 1.05; letter-spacing: -.02em; }

.h-card {
  margin: 0;
  font: 400 var(--t-h3)/var(--lh-card) var(--f-display);
  letter-spacing: var(--ls-card);
}
.h-card--sm {
  margin: 0;
  font: 400 var(--t-h3-sm)/var(--lh-card) var(--f-display);
  letter-spacing: -.01em;
}

em { font-style: italic; }
.accent      { color: var(--c-terracotta-ink); }
.accent--ink { color: var(--c-terracotta-lt); }

.lede  { margin: 0; font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--c-text-muted); text-wrap: pretty; }
.prose { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-text-muted); }
.prose--on-ink { color: var(--c-on-ink-78); }
.mono-note { margin: 0; font: 500 var(--t-mono-lg)/1.5 var(--f-mono); letter-spacing: .02em; color: var(--c-text-muted-2); }

/* Keyframes */
@keyframes a-up      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes a-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes a-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}