/* Tokens match prototype-studio/src/styles.css, so the shell and the app look like one site. */
:root {
  --paper: #faf9f6;
  --ink: #262622;
  --muted: #66665f;
  --line: #d9d8d1;
  --red: #cc402d;
  --red-dark: #ae3424;
  --focus: #2956bc;
  --gutter: max(16px, 4.5%);
  font-family: 'Instrument Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }

.site-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-size: 28px; font-weight: 600; letter-spacing: -1.5px; text-decoration: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 22px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.primary { background: var(--red); color: #fff; }
.primary:hover { background: var(--red-dark); }

.hero { padding: clamp(48px, 10vw, 120px) var(--gutter); max-width: 1100px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero h1 { margin: 0; font-size: clamp(44px, 8vw, 96px); line-height: .98; letter-spacing: -.055em; font-weight: 500; color: var(--red); text-wrap: balance; }
.hero h1 span { display: block; color: var(--ink); }
.lede { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--muted); }

.prose { padding: 48px var(--gutter); max-width: calc(68ch + 2 * var(--gutter)); line-height: 1.7; }
.prose h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 24px; }
.prose h2 { font-size: 22px; font-weight: 500; margin: 32px 0 8px; }

.site-footer {
  padding: 32px var(--gutter) 24px;
  background: #ecece5;
  display: flex; flex-direction: column; gap: 20px;
  font-size: 13px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--red); }
.seller { margin: 0; color: var(--muted); font-size: 12px; }

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