/*
 * Neigh marketing site — the shared skin.
 *
 * Matched to the app's own design system (web/neigh.css in the app repo): Fraunces for
 * display, one warm paper family, one clay accent, saddle green for links, warm-brown
 * shadows, and the same grain texture. The site pushes the register up-market — a dark
 * leather band, engraved hairline rules, generous type — without leaving the family.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
}

:root {
  --ink: #1b1d1a;
  --paper: #f6f3ec;
  --paper-deep: #efe9dc;
  --card: #fffdf8;
  --line: #d6cfc0;
  --line-faint: #eee7d8;
  --accent: #c8641e;
  --accent-deep: #a04e12;
  --green: #46603f;
  --muted: #5d5f58;
  --leather: #241c12;
  --leather-deep: #1b150d;
  --leather-line: #4a3a24;
  --leather-rule: #6b5636;
  --on-leather: #f6f3ec;
  --on-leather-muted: #b9ad9c;
  --gold: #d69a5e;
  --rule-gold: #b9a888;
  --shadow-soft: 0 1px 2px rgba(92, 61, 24, 0.06), 0 6px 24px rgba(92, 61, 24, 0.07);
  --shadow-lift: 0 2px 4px rgba(92, 61, 24, 0.08), 0 10px 32px rgba(92, 61, 24, 0.10);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

/* Grain, same recipe as the app: one texture, quiet. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.shell { max-width: 1160px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .dot { color: var(--accent); }

/* Small-caps eyebrow with engraved rules either side. */
.eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.eyebrow-row .rule { width: 64px; height: 1px; background: var(--rule-gold); }
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.on-dark .eyebrow { color: var(--gold); }
.on-dark .rule { background: var(--leather-rule); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

/* Store buttons: our own styling, deliberately not the platforms' badge artwork. */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 14px;
  min-height: 44px;
  line-height: 1.2;
}
.store-btn .over {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.store-btn .name { display: block; font-size: 18px; font-weight: 600; }
.store-btn.primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lift); }
.store-btn.primary .over { color: var(--on-leather-muted); }
.store-btn.quiet { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.store-btn.quiet .over { color: var(--muted); }
.store-btn.on-leather-primary { background: var(--paper); color: var(--ink); }
.store-btn.on-leather-primary .over { color: var(--muted); }
.store-btn.on-leather-quiet { background: transparent; color: var(--on-leather); border: 1px solid var(--leather-rule); }
.store-btn.on-leather-quiet .over { color: var(--on-leather-muted); }
.store-btn:hover { color: inherit; filter: brightness(1.05); }
.store-btn.primary:hover { color: var(--paper); }
.store-btn.on-leather-quiet:hover { color: var(--on-leather); }

/* Legal pages */
.legal main { max-width: 720px; margin: 0 auto; padding: 20px 18px 60px; }
.legal h1 { font-size: 2rem; font-weight: 700; margin: 18px 0 6px; }
.legal h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 8px; }
.legal .sub { color: var(--muted); margin: 0 0 26px; }
.legal .card { padding: 20px 18px; margin: 0 0 16px; }