/* Foxed brand tokens — mirrors src/utils/tokens.ts in the app repo (pageturn).
   Keep these two in sync if the in-app palette changes. */
:root {
  --color-bg: #FAF9F7;
  --color-surface: #F0EDE8;
  --color-text: #1A1A1A;
  --color-accent: #A05028;
  --color-accent-2: #A05028;
  --color-divider: #D4CFC7;
  --color-neutral-100: #FAF9F7;
  --color-neutral-200: #F0EDE8;
  --color-neutral-300: #E8E2D8;
  --color-neutral-400: #D4CFC7;
  --color-neutral-500: #A8A4A2;
  --color-neutral-600: #767170;
  --color-neutral-700: #605C5A;
  --color-neutral-800: #3A2E24;
  --color-neutral-900: #2A1F16;
  --color-accent-100: #F6EAE2;
  --color-accent-200: #EBD3C4;
  --color-accent-300: #DCB49B;
  --color-accent-400: #C07A50;
  --color-accent-500: #A05028;
  --color-accent-600: #8A4321;
  --color-accent-700: #70351A;
  --color-accent-800: #552713;
  --color-accent-900: #3A1B0D;
  --ink: #2A1F16;
  --soft: #C07A50;
  --bar: #C8A078;
  --parchment: #DCC8A0;
  --gold: #D4A847;
  --surface2: #E8E2D8;
  --font-heading: "Instrument Serif", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --edge: clamp(20px, 5vw, 72px);
  --radius-md: 4px;
  --shadow-sm: 0 1px 2px rgba(42, 31, 22, 0.14);
  --shadow-md: 0 3px 10px rgba(42, 31, 22, 0.16);
  --body-align: justify;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: 0; margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
[hidden] { display: none !important; }

.fx-col p { text-align: var(--body-align, justify); hyphens: auto; }
.fx-num { font-feature-settings: "tnum" 1; }
.fx-onink a { color: var(--gold); }
.fx-onink a:hover { color: #E6C173; }
@media (max-width: 820px) { .nav a.fx-navlink { display: none; } }
@media (max-width: 720px) { .pp-nav a.pp-navlink { display: none; } }

/* — buttons (label set in the heading serif, matching the app's numerals-in-serif rule) — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 10px 18px; background: transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: rgba(160, 80, 40, 0.12); }

/* — form input — */
.input {
  width: 100%; font: inherit; font-size: 14px; color: var(--color-text);
  background: #FFF; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 0 14px; caret-color: var(--color-accent);
}
.input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.form-error {
  font-size: 13px; margin: 12px 0 0; color: #C0392B;
}

/* — screenshot frames: a faint "old photograph" tint over each app screenshot — */
.plate {
  background: var(--color-surface);
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  border-radius: 24px;
  box-sizing: border-box;
  overflow: hidden;
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — privacy policy page — */
.hr { height: 1px; border: 0; background: var(--color-divider); }
.pp th {
  text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 400; font-size: 12.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-neutral-700); vertical-align: bottom;
}
.pp td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--color-divider); line-height: 22px; vertical-align: top; }
.pp tr td:last-child, .pp tr th:last-child { padding-right: 0; }
.pp p { font-size: 16px; line-height: 29px; color: var(--color-neutral-700); max-width: 68ch; margin: 0 0 16px; }
.pp table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 28px 0; }