/* Arnveld — one stylesheet for both sites (arnveld.com / arnveld.nl).
   Static, no framework, no build step, no JavaScript.

   Design decisions, 1 October 2026 — direction A, "Editorial":
     display  Source Serif 4   statements, headings, the proof figures
     body     Inter            everything you read
     labels   IBM Plex Mono    durations, tags, small caps labels
     accent   #9a3412           exactly three jobs: links, the Assessment card,
                               the proof figures. Nothing else.

   All three faces are self-hosted and subsetted: ~60 KB total, no third-party
   request. See FONTS.md. */

@font-face {
  font-family: Inter;
  src: url(/fonts/Inter-var.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url(/fonts/SourceSerif4-var.woff2) format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/fonts/IBMPlexMono-Regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --fg: #1c1917;
  --muted: #57534e;
  --rule: #e7e5e4;
  --card: #ffffff;
  --accent: #9a3412;          /* 7.06:1 on --bg — AAA */
  --ph: #b45309;
  --measure: 38rem;           /* ≈67 characters per line */

  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --label: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f10;
    --fg: #f2f0ee;
    --muted: #a8a29e;
    --rule: #2a2827;
    --card: #17171a;
    --accent: #f0a37e;        /* 9.35:1 on --bg */
    --ph: #fbbf24;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

/* ---------- header ---------- */

.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.5rem;
}

.wm { font-family: var(--body); font-weight: 600; letter-spacing: -0.01em; }
.wm a { color: var(--fg); text-decoration: none; }

.lang { font-size: 0.875rem; color: var(--muted); }
.lang a { color: var(--muted); }
.lang b { color: var(--fg); font-weight: 600; }

/* ---------- structure ---------- */

section { margin: 0 0 3.5rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; line-height: 1.22; margin: 0 0 1rem; }
h2 { font-size: 1.375rem; line-height: 1.28; margin: 0 0 1rem; }
h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede { color: var(--muted); font-size: 1.0625rem; }

/* statements — the serif does the hierarchy work, so they need no extra chrome */
.big {
  font-family: var(--display);
  font-size: 1.4375rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}

.note { font-size: 0.9rem; color: var(--muted); }

/* ---------- hero ---------- */

.hero { margin-bottom: 4.5rem; }
.hero h1 { font-size: 2rem; line-height: 1.16; margin-bottom: 1.5rem; }
@media (min-width: 40rem) { .hero h1 { font-size: 2.5rem; } }

.cta {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid var(--fg);
  border-radius: 6px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.15s ease, color 0.15s ease;
}
.cta:hover, .cta:focus { background: var(--fg); color: var(--bg); }

/* ---------- the ladder ---------- */

.ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.925rem;
  margin: 0 0 1rem;
}
.ladder > span {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.4rem 0.65rem;
  background: var(--card);
}
.ladder > i { color: var(--muted); font-style: normal; }
.sub {
  display: block;
  font-family: var(--label);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Below the two-column break the headline's forced line break strands a word on its own
   line, so let it wrap naturally instead. The <br> is a desktop device. */
@media (max-width: 39.99rem) {
  .hero h1 br, .teaser h1 br { display: none; }
}

/* Narrow screens: the arrows would dangle at the end of a wrapped row (e.g. "Pilot →"
   with Operate on the next line), so the ladder stacks and the arrows drop out. */
@media (max-width: 33.99rem) {
  .ladder { display: block; }
  .ladder > span { display: inline-block; margin: 0 0 0.4rem; }
  .ladder > i { display: none; }
}

/* ---------- cards ---------- */

.cards { display: grid; gap: 0.85rem; }
@media (min-width: 40rem) { .cards.two { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--card);
}
.card p { font-size: 0.94rem; color: var(--muted); margin: 0; }
.card p + p { margin-top: 0.75rem; }

/* accent job 2 — the entry point is the only card that looks like a recommendation */
.card.lead { border-color: var(--accent); border-width: 2px; }
.card.lead h2 { color: var(--accent); }

.card.addon, .card.exit { border-style: dashed; }
.card.exit { background: transparent; }

.when {
  font-family: var(--label);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.15rem 0 0.6rem;
}

.tag {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.22rem 0.42rem;
  margin-bottom: 0.55rem;
}

.runglabel {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.75rem 0 0.6rem;
}

.why {
  font-size: 0.94rem;
  color: var(--muted);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

/* ---------- proof ---------- */

/* accent job 3 — the numbers are the evidence, so they are the loudest thing here.
   Serif numerals, not mono: this is an argument, not a readout. */
.figures {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.25rem;
}
.figures small {
  display: block;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35rem;
}
.proof-note { font-size: 0.9rem; color: var(--muted); margin-top: 1rem; }

/* ---------- contact ---------- */

.email {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}
footer p { margin: 0 0 0.3rem; }
footer a { color: var(--muted); }

/* ---------- shared bits ---------- */

/* accent job 1 — links are the one interactive thing, so they carry the accent */
a { color: var(--accent); text-underline-offset: 2px; }
strong { font-weight: 600; color: var(--fg); }

.back { font-size: 0.9rem; }

/* Pre-launch only: marks a value that does not exist yet.
   Colour only — deliberately does NOT set a font. A placeholder must not dictate the
   typography, or the proof figures review as mono amber instead of the serif rust they
   will actually be. The brackets and the colour are enough of a tell. */
.ph { color: var(--ph); }

/* ---------- pre-launch teaser ----------
   One screen, centred, no scroll. It is the first screen of the real page plus an
   honest status line, so none of this is throwaway: at launch the same hero and lede
   carry straight over to index.html. */

.teaser {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 2rem;
}
.teaser .hdr { flex: 0 0 auto; }
.teaser-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.teaser h1 { font-size: 2rem; line-height: 1.14; margin-bottom: 1.5rem; }
/* 2.5rem, not larger: at the 38rem measure the second line needs ~510px of the ~568px
   available. Anything bigger orphans "experts." onto its own line. */
@media (min-width: 40rem) { .teaser h1 { font-size: 2.5rem; } }
.teaser .lede { max-width: 32rem; }
.teaser-status { margin-top: 2.5rem; color: var(--muted); font-size: 0.95rem; }
.teaser-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.teaser-foot p { margin: 0 0 0.3rem; }
.teaser-foot a { color: var(--muted); }