/*
 * The shared skin, for every page that is not the app itself.
 *
 * hiverev horse-ears-18 (2026-08-13): the subpages kept the old system-sans skin after
 * the app's redesign, so tapping "How we measure" from the polished Numbers room landed
 * on what looked like a different, cheaper product - on the exact page where a sceptic
 * goes to be convinced. This sheet is linked AFTER each subpage's own <style>, so its
 * shared look wins while page-specific layout rules keep working.
 *
 * horse-ears-19: the methods table used to overflow the body and pan the whole page
 * sideways at phone width. Tables scroll inside their own box here, never the page.
 */

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

:root {
  --card-bg: #fffdf8;
  --shadow-soft: 0 1px 2px rgba(92, 61, 24, 0.06), 0 6px 24px rgba(92, 61, 24, 0.07);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* The page must never scroll sideways; anything wide scrolls inside its own box. */
html, body { overflow-x: hidden; }

h1, h2 {
  font-family: var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: 1.7rem; }
h2 { font-weight: 650; }

.card {
  background: var(--card-bg);
  border: 0;
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: var(--shadow-soft);
}

/* Wide content scrolls in place. `display:block` on table is the one generic rule that
   contains any table without touching its markup. */
table {
  display: block;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}

a { text-underline-offset: 3px; }

/* Grain, same 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");
}