/* webwinkelanalyse.nl — the renderer pages around the EAA-check. See theme/site.md. */

:root {
  --paper: #f3f2ee;
  --surface: #fbfaf7;
  --surface-2: #ebe9e3;
  --band: #e7e5de;
  --line: #cfccc3;
  --ink: #1b1b19;
  --muted: #5d5b55;
  --brand: #1d3a5f;
  --brand-2: #2f5584;
  --on-brand: #ffffff;
  --accent: #b45309;
  --ring: #b45309;
  --grad: linear-gradient(180deg, #1d3a5f, #172e4b);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --page: 1120px;
  --measure: 66ch;
  --r0: 0; --r1: 0; --r2: 0; --r3: 0;
  --shadow-1: none;
  --shadow-2: 0 1px 0 var(--line);
  --ruler: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 8px);
}

body { background: var(--paper); color: var(--ink); }

/* The ruler: millimetre ticks with one long amber tick — the site's signature. */
.hero { position: relative; border-bottom: 1px solid var(--ink); }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--accent) calc(50% - 1px) calc(50% + 2px), transparent calc(50% + 2px)),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 40px) bottom / 100% 10px no-repeat,
    var(--ruler) bottom / 100% 5px no-repeat;
}
.hero[data-hero="plain"] { --hero-bg: var(--paper); --hero-ink: var(--ink); --hero-ink-soft: var(--muted); }

/* Every figure in monospace, tabular. */
.hero-meta, .stat .value, table.data td, .eyebrow, .step::before {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hero-meta { letter-spacing: 0; text-transform: none; }
.eyebrow { color: var(--muted); letter-spacing: .04em; }

h1, h2, h3 { letter-spacing: -0.01em; font-weight: 650; }

/* Panels are ruled, not floated. */
.card, .stat, .faq-item { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.card .icon { font-family: var(--font-mono); color: var(--ink); }

table.data { border-collapse: collapse; width: 100%; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: .55rem .7rem; text-align: left; vertical-align: top; }
table.data thead th { border-bottom: 2px solid var(--ink); font-weight: 600; }
table.data tbody tr:nth-child(even) { background: var(--surface-2); }

.section[data-tone="band"] { background: var(--band); }
.cta-inner { background: var(--grad); }

a { color: var(--brand); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn { border-radius: 0; }