/* Haywire's own look for the site pages (landing, about, support, privacy, terms).
 * THIS FILE IS OURS — loaded after the factory's pages.css and wins over it.
 * Fonts are self-hosted from /fonts: the CSP allows nothing else. */

@font-face {
  font-family: 'Big Shoulders Stencil Display';
  src: url('/fonts/big-shoulders-stencil-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --loft: #2A2622;
  --straw: #E3C16F;
  --chaff: #F4E7C1;
  --twine: #E8662A;
  --galv: #9FA9AE;
  --twine-ink: #1E1A17;

  --bg: var(--loft);
  --surface: color-mix(in srgb, var(--loft) 86%, var(--chaff));
  --line: color-mix(in srgb, var(--loft) 70%, var(--galv));
  --text: var(--chaff);
  --dim: color-mix(in srgb, var(--chaff) 72%, var(--loft));
  --accent: var(--twine);
  --display: 'Big Shoulders Stencil Display', 'Barlow Semi Condensed', system-ui, sans-serif;
}

body {
  background: var(--loft);
  color: var(--chaff);
  font: 500 17px/1.6 'Barlow Semi Condensed', system-ui, sans-serif;
}

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; color: var(--chaff); }
h1 { font-size: 2rem; line-height: 1.05; margin: 0 0 12px; }
@media (min-width: 720px) { h1 { font-size: 2.5rem; } }
h2 { font-size: 1.5rem; line-height: 1.15; color: var(--straw); }
p, li { color: var(--chaff); }
.updated { color: var(--dim); }

a { color: var(--straw); text-underline-offset: 3px; }
a:hover { color: var(--chaff); }

/* Tap targets. Inline links get vertical padding that doesn't move the line box,
 * so the hit area is 44px tall without changing how the paragraph reads. */
main a { padding-block: 12px; }
footer a, .back {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; padding: 0 10px;
}
footer a:first-child { margin-left: -10px; }
.back { margin-left: -10px; }

.card { background: var(--surface); border-color: var(--line); }
.card h2 { margin-top: 0; }
footer { color: var(--dim); }