/* ============================================================
   bvgeert.nl / bvgeert.com — Geert's profile.
   Tokens: Appfabriek "Colors & Type" (Claude Design project
   "Geert's profiel met twee kanten"). The page renders inside the
   dok Rails layout, which ships Tailwind preflight and puts
   zinc/dark classes on <html>/<body>; everything here is scoped to
   body.bvg-site so it wins without touching platform pages.
   ============================================================ */

:root {
  --af-orange: #FF4D14;
  --af-orange-deep: #C8330A;
  --af-blueprint-deep: #143A9E;
  --af-signal-soft: #DCEFE3;

  --af-bone: #F4F1EA;
  --af-bone-deep: #ECE7DA;
  --af-paper: #FAF8F2;

  --af-ink: #161413;
  --af-ink-2: #2A2624;
  --af-ink-3: #4A433F;
  --af-ink-4: #7A716A;
  --af-ink-5: #A89E94;
  --af-ink-6: #C9C0B2;
  --af-ink-7: #DDD5C6;

  --af-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --af-font-body: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --af-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --af-text-base: 15px;
  --af-text-md: 17px;
  --af-text-lg: 20px;
  --af-text-xl: 24px;
  --af-text-2xl: 32px;
  --af-text-3xl: 44px;

  --af-leading-normal: 1.45;
  --af-leading-loose: 1.65;

  --af-tracking-tight: -0.03em;
  --af-tracking-display: -0.02em;
  --af-tracking-wide: 0.04em;
  --af-tracking-stamp: 0.14em;

  --af-stroke: 1.5px solid var(--af-ink);
}

/* The brand is bone paper on ink — one palette, no dark variant. */
html:has(> body.bvg-site) {
  background: var(--af-bone);
  color-scheme: light;
}

body.bvg-site {
  margin: 0;
  background: var(--af-bone);
  color: var(--af-ink);
  font-family: var(--af-font-body);
  -webkit-font-smoothing: antialiased;
}

.bvg-site a {
  color: var(--af-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.bvg-site a:hover { color: var(--af-orange-deep); }
.bvg-site :focus-visible { outline: 2px solid var(--af-orange); outline-offset: 2px; }

.site { min-height: 100vh; overflow-x: clip; }
.site img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- shared type ---------- */
.mono-label {
  font-family: var(--af-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  color: var(--af-ink-4);
}
.stamp {
  font-family: var(--af-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  border: var(--af-stroke);
  padding: 4px 8px;
}
.mono-link {
  font-family: var(--af-font-mono);
  font-size: 12px;
  letter-spacing: var(--af-tracking-wide);
}
.h2 {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 600;
  font-size: var(--af-text-3xl);
  letter-spacing: var(--af-tracking-display);
  line-height: 1.05;
}
.h3 {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 600;
  font-size: var(--af-text-xl);
  letter-spacing: var(--af-tracking-display);
}
.text {
  margin: 0;
  font-size: var(--af-text-base);
  line-height: var(--af-leading-normal);
  color: var(--af-ink-3);
  text-wrap: pretty;
}
.text-md {
  margin: 0;
  font-size: var(--af-text-md);
  line-height: var(--af-leading-normal);
  color: var(--af-ink-3);
  text-wrap: pretty;
}

/* ---------- topbar + header ---------- */
.topbar {
  background: var(--af-ink);
  color: var(--af-bone);
  font-family: var(--af-font-mono);
  font-size: 11px;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  padding: 8px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}
.topbar__dot { color: var(--af-signal-soft); }

.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand__name {
  font-family: var(--af-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: var(--af-tracking-tight);
}
.brand__handle {
  font-family: var(--af-font-mono);
  font-size: 12px;
  color: var(--af-ink-4);
  letter-spacing: var(--af-tracking-wide);
}
.switches { display: flex; gap: 12px; flex-wrap: wrap; }

.seg {
  display: flex;
  border: var(--af-stroke);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--af-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
}
.bvg-site .seg a {
  padding: 10px 16px;
  color: var(--af-ink);
  text-decoration: none;
}
.bvg-site .seg--lang a { padding: 10px 12px; }
.bvg-site .seg a:hover { background: var(--af-bone-deep); color: var(--af-ink); }
.bvg-site .seg a[aria-current],
.bvg-site .seg a[aria-current]:hover { background: var(--af-ink); color: var(--af-bone); }

/* ---------- panels ---------- */
.panel { max-width: 1200px; margin: 0 auto; padding: 0 24px 96px; }
.panel[hidden] { display: none; }

/* ---------- buttons ---------- */
.bvg-site .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 22px;
  border: var(--af-stroke);
  text-decoration: none;
  color: var(--af-ink);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.bvg-site .btn:hover { background: var(--af-bone-deep); color: var(--af-ink); }
.bvg-site .btn--primary { background: var(--af-orange); color: var(--af-bone); box-shadow: 3px 3px 0 var(--af-ink); }
.bvg-site .btn--primary:hover { background: var(--af-orange-deep); color: var(--af-bone); }
.bvg-site .btn--primary:active { box-shadow: 0 0 0 var(--af-ink); transform: translate(3px, 3px); }
.bvg-site .btn--small { font-size: 15px; padding: 12px 18px; }
.bvg-site .btn--invert { border-color: var(--af-ink); }
.bvg-site .btn--invert:hover { background: var(--af-ink); color: var(--af-bone); }
.bvg-site .btn--on-dark { color: var(--af-bone); border-color: var(--af-bone); }
.bvg-site .btn--on-dark:hover { background: var(--af-bone); color: var(--af-ink); }
.bvg-site .btn--primary.btn--on-dark { box-shadow: none; }
.bvg-site .btn--primary.btn--on-dark:hover { background: var(--af-orange-deep); color: var(--af-bone); }

/* ---------- business: hero ---------- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: end;
  padding: 72px 0 56px;
  border-bottom: var(--af-stroke);
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__title {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 600;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1;
  letter-spacing: var(--af-tracking-tight);
  text-wrap: balance;
}
.accent { color: var(--af-orange); }
.lead {
  margin: 0;
  font-size: var(--af-text-lg);
  line-height: var(--af-leading-normal);
  color: var(--af-ink-3);
  max-width: 34em;
  text-wrap: pretty;
}
.proof {
  font-family: var(--af-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--af-tracking-wide);
  color: var(--af-ink-4);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

.portrait { position: relative; justify-self: end; width: 100%; max-width: 400px; }
.portrait__frame {
  aspect-ratio: 4 / 5;
  border: var(--af-stroke);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--af-ink);
  background: var(--af-paper);
}
.portrait .stamp { position: absolute; top: -12px; right: -8px; background: var(--af-bone); }

/* ---------- business: factory band ---------- */
.factory {
  margin: 0 calc(50% - 50vw);
  background: var(--af-ink);
  color: var(--af-bone);
  padding: 80px 24px;
}
.factory__inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.factory__head { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: end; }
.factory__title { display: flex; flex-direction: column; gap: 16px; max-width: 18em; }
.factory__title .mono-label { color: var(--af-ink-5); font-weight: 400; }
.factory__title .h2 { font-size: clamp(32px, 4vw, 48px); text-wrap: balance; }
.factory__text {
  margin: 0;
  max-width: 30em;
  font-size: var(--af-text-md);
  line-height: var(--af-leading-normal);
  color: var(--af-ink-6);
  text-wrap: pretty;
}
.stations { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.station { flex: 1 1 240px; display: flex; align-items: center; gap: 16px; }
.station__card {
  flex: 1;
  align-self: stretch;
  background: var(--af-paper);
  color: var(--af-ink);
  border: 1.5px solid var(--af-bone);
  border-radius: 4px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.station__k {
  font-family: var(--af-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  color: var(--af-blueprint-deep);
}
.station__name { display: flex; align-items: center; gap: 10px; }
.station__name img { width: 28px; height: 28px; }
.station__name strong {
  font-family: var(--af-font-display);
  font-size: var(--af-text-xl);
  font-weight: 600;
  letter-spacing: var(--af-tracking-display);
}
.station__card .mono-link { margin-top: auto; padding-top: 6px; }
.station__arrow { font-family: var(--af-font-mono); font-size: 24px; color: var(--af-bone); }

/* ---------- business: sections ---------- */
.section {
  padding: 56px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-bottom: var(--af-stroke);
}
.section__head { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: end; }
.section__intro { display: flex; flex-direction: column; gap: 16px; max-width: 40em; }
.section__bar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.section__bar .mono-label { font-weight: 400; }
.section > .text-md { max-width: 40em; }

.clients { display: flex; flex-direction: column; gap: 10px; }
.clients .mono-label { font-size: 11px; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .stamp { font-size: 12px; padding: 6px 10px; }

.grid { display: grid; gap: 24px; }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card { background: var(--af-paper); border: var(--af-stroke); border-radius: 4px; }
.service { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.service__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.service__n { font-family: var(--af-font-mono); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); background: var(--af-paper); border: var(--af-stroke); border-radius: 4px; margin: 8px 0 20px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-left: 1px solid var(--af-ink-7); }
.stat:first-child { border-left: 0; }
.stat b { font-family: var(--af-font-display); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--af-ink-4); }

.track-section { padding: 56px 0; display: flex; flex-wrap: wrap; gap: 24px 48px; }
.track-section .h2 { flex: 1 1 220px; }
.track { flex: 2 1 420px; margin: 0; padding: 0; list-style: none; border-top: var(--af-stroke); border-bottom: var(--af-stroke); }
.track__row { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--af-ink-7); }
.track__row:last-child { border-bottom: 0; }
.track__k { font-family: var(--af-font-mono); font-size: 13px; font-weight: 600; letter-spacing: var(--af-tracking-wide); }
.track__body { display: flex; flex-direction: column; gap: 4px; }
.track__body strong { font-family: var(--af-font-display); font-size: var(--af-text-lg); font-weight: 600; }

.closing {
  background: var(--af-ink);
  color: var(--af-bone);
  border-radius: 4px;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  align-items: end;
}
.closing__cta { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.closing__cta .h2 { font-size: clamp(32px, 4vw, 44px); text-wrap: balance; }
.closing__links { display: flex; flex-direction: column; font-family: var(--af-font-mono); font-size: 14px; }
.bvg-site .closing__links a {
  color: var(--af-bone);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--af-ink-3);
  padding: 10px 0;
  text-decoration: none;
}
.bvg-site .closing__links a:hover { color: var(--af-orange); }

.bridge {
  margin: 56px calc(50% - 50vw) -96px;
  position: relative;
  height: clamp(460px, 75vh, 760px);
  border-top: var(--af-stroke);
}
.bridge__card {
  position: absolute;
  right: 24px;
  top: 24px;
  max-width: min(460px, calc(100% - 48px));
  background: var(--af-bone);
  border: var(--af-stroke);
  box-shadow: 6px 6px 0 var(--af-ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.bridge__quote {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: var(--af-tracking-display);
  text-wrap: balance;
}

/* ---------- personal ---------- */
.p-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 56px;
  align-items: center;
  padding: 80px 0 64px;
}
.p-hero__photo { aspect-ratio: 4 / 5; max-width: 440px; width: 100%; border-radius: 8px; overflow: hidden; background: var(--af-paper); }
.p-hero__title {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.08;
  letter-spacing: var(--af-tracking-display);
  text-wrap: balance;
}
.p-hero .lead { line-height: var(--af-leading-loose); max-width: 32em; }

.story {
  background: var(--af-bone-deep);
  border-radius: 8px;
  padding: 48px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
}
.story > .mono-label { flex: 1 1 200px; font-weight: 400; }
.story__body { flex: 3 1 420px; display: flex; flex-direction: column; gap: 16px; }
.story__body h2 {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 500;
  font-size: var(--af-text-2xl);
  line-height: 1.2;
  letter-spacing: var(--af-tracking-display);
}
.story__body .text-md { line-height: var(--af-leading-loose); max-width: 38em; }

.themes {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 40px;
  border-top: var(--af-stroke);
  padding-top: 32px;
}
.theme { display: flex; flex-direction: column; gap: 12px; }
.theme .mono-label { font-weight: 400; }
.theme .h3 { letter-spacing: normal; }
.theme .text { line-height: var(--af-leading-loose); }

.photos { padding: 72px 0 0; display: flex; flex-direction: column; gap: 24px; }
.photos .mono-link { font-size: 13px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.photo { aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--af-bone-deep); }

.back {
  margin-top: 72px;
  background: var(--af-ink);
  color: var(--af-bone);
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
}
.back__copy { display: flex; flex-direction: column; gap: 10px; }
.back__copy .mono-label { color: var(--af-ink-5); font-weight: 400; }
.back__copy p {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: var(--af-tracking-display);
}

.find {
  margin-top: 64px;
  padding-top: 24px;
  border-top: var(--af-stroke);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-family: var(--af-font-mono);
  font-size: 13px;
  letter-spacing: var(--af-tracking-wide);
}
.find > span { color: var(--af-ink-4); }
.find__links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- bios ---------- */
.panel--bios { max-width: 900px; padding-top: 72px; display: flex; flex-direction: column; gap: 32px; }
.panel--bios[hidden] { display: none; }
.bios__head { display: flex; flex-direction: column; gap: 16px; }
.bios__head .mono-label { font-weight: 400; }
.bios__title {
  margin: 0;
  font-family: var(--af-font-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: var(--af-tracking-tight);
}
.bio { display: flex; flex-direction: column; }
.bio__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: var(--af-stroke);
}
.bio__label {
  font-family: var(--af-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
}
.bio__tools { display: flex; align-items: center; gap: 16px; }
.bio__count { font-family: var(--af-font-mono); font-size: 11px; color: var(--af-ink-4); white-space: nowrap; }
.bvg-site .bio__copy {
  all: unset;
  cursor: pointer;
  font-family: var(--af-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  border: var(--af-stroke);
  padding: 6px 10px;
  white-space: nowrap;
}
.bvg-site .bio__copy:hover { background: var(--af-ink); color: var(--af-bone); }
.bvg-site .bio__copy:focus-visible { outline: 2px solid var(--af-orange); outline-offset: 2px; }
.bio__text {
  margin: 0;
  padding: 20px;
  font-size: var(--af-text-md);
  line-height: var(--af-leading-loose);
  color: var(--af-ink-2);
  white-space: pre-line;
  text-wrap: pretty;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--af-ink);
  color: var(--af-ink-5);
  font-family: var(--af-font-mono);
  font-size: 12px;
  letter-spacing: var(--af-tracking-wide);
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bvg-site .site-footer a { color: var(--af-bone); }
.bvg-site .site-footer a:hover { color: var(--af-orange); }
.bvg-site .site-footer .site-footer__quiet { color: var(--af-ink-5); }

.cta-note { font-size: 13px; color: var(--af-ink-4); margin-top: -8px; }

/* ---------- guest / signed-in ---------- */
/* body[data-role] comes from dok: guest | user | admin. */
.bvg-site:not([data-role="guest"]) .guest-only { display: none; }

/* ---------- account menu ({{account_menu}}) ---------- */
.bvg-account { position: relative; }
.bvg-account__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: var(--af-stroke);
  border-radius: 4px;
  background: var(--af-ink);
  color: var(--af-bone);
  font-family: var(--af-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
}
.bvg-account__toggle::-webkit-details-marker { display: none; }
.bvg-account__toggle::after { content: '▾'; font-size: 10px; }
.bvg-account[open] .bvg-account__toggle::after { content: '▴'; }
.bvg-account__toggle:hover { background: var(--af-ink-2); }
.bvg-account__email {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: var(--af-tracking-wide);
  font-weight: 500;
  color: var(--af-ink-6);
}
.bvg-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--af-paper);
  border: var(--af-stroke);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--af-ink);
}
.bvg-account__who {
  padding: 12px 16px;
  border-bottom: 1px solid var(--af-ink-7);
  font-family: var(--af-font-mono);
  font-size: 12px;
  color: var(--af-ink-4);
  overflow-wrap: anywhere;
}
.bvg-site .bvg-account__item {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--af-font-body);
  font-size: var(--af-text-base);
  font-weight: 500;
  color: var(--af-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--af-ink-7);
}
.bvg-site .bvg-account__item:hover,
.bvg-site .bvg-account__item:focus-visible { background: var(--af-bone-deep); color: var(--af-ink); }
.bvg-account__logout-form { margin: 0; }
.bvg-site .bvg-account__logout { border-bottom: 0; color: var(--af-orange-deep); }
.bvg-site .bvg-account__logout:hover { color: var(--af-orange-deep); }

@media (max-width: 560px) {
  .bvg-account__email { display: none; }
  .bvg-account__menu { right: auto; left: 0; }
}

/* ---------- updates toggle ({{updates_toggle}}) ---------- */
.bvg-updates__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.bvg-site .bvg-updates__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 22px;
  border: var(--af-stroke);
  cursor: pointer;
}
.bvg-site .bvg-updates__button--on { background: var(--af-orange); color: var(--af-bone); box-shadow: 3px 3px 0 var(--af-ink); }
.bvg-site .bvg-updates__button--on::after { content: '▸'; }
.bvg-site .bvg-updates__button--on:hover { background: var(--af-orange-deep); }
.bvg-site .bvg-updates__button--on:active { box-shadow: 0 0 0 var(--af-ink); transform: translate(3px, 3px); }
/* Subscribed: the status is the badge, switching off is a quiet text link. */
.bvg-site .bvg-updates__button--off {
  font-size: 12px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--af-ink-4);
  font-family: var(--af-font-mono);
  font-weight: 500;
  letter-spacing: var(--af-tracking-wide);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bvg-site .bvg-updates__button--off:hover { color: var(--af-orange-deep); }
.bvg-updates__status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 14px 18px;
  border: var(--af-stroke);
  background: var(--af-signal-soft);
  font-weight: 600;
  font-size: 16px;
}
.bvg-updates__form[aria-busy="true"] .bvg-updates__button { opacity: 0.6; cursor: progress; }
.bvg-updates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }

/* In the dark closing block. */
.bvg-site .closing .bvg-updates__button--on { border-color: var(--af-bone); box-shadow: none; }
.bvg-site .closing .bvg-updates__button--on:active { transform: none; }
.bvg-site .closing .bvg-updates__status { color: var(--af-ink); border-color: var(--af-bone); }
.bvg-site .closing .bvg-updates__button--off { color: var(--af-ink-6); }
.bvg-site .closing .bvg-updates__button--off:hover { color: var(--af-orange); }

/* ---------- sign-in dialog ({{login_panel}}) ---------- */
/* Tailwind preflight zeroes margins; a modal <dialog> centres with margin:auto. */
.login-dialog {
  margin: auto;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: var(--af-stroke);
  border-radius: 4px;
  background: var(--af-bone);
  color: var(--af-ink);
  box-shadow: 6px 6px 0 var(--af-ink);
  overflow: auto;
}
.login-dialog::backdrop { background: rgba(22, 20, 19, 0.55); }
.login-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 12px 24px;
  background: var(--af-ink);
}
.login-dialog__bar .mono-label { color: var(--af-bone); }
.bvg-site .login-dialog__close {
  all: unset;
  cursor: pointer;
  color: var(--af-bone);
  font-size: 16px;
  line-height: 1;
  padding: 8px;
}
.bvg-site .login-dialog__close:hover { color: var(--af-orange); }
.login-dialog__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.login-dialog__intro {
  margin: 0;
  font-family: var(--af-font-display);
  font-size: var(--af-text-lg);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--af-tracking-display);
}

.bvg-login { display: flex; flex-direction: column; gap: 16px; }
.bvg-login__lead { margin: 0; font-size: var(--af-text-base); line-height: var(--af-leading-normal); color: var(--af-ink-3); }
.bvg-login__lead strong { color: var(--af-ink); overflow-wrap: anywhere; }
.bvg-login__providers { display: flex; flex-direction: column; gap: 10px; }
.bvg-login__provider-form, .bvg-login__form { margin: 0; }
.bvg-site .bvg-login__provider {
  box-sizing: border-box;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: var(--af-stroke);
  background: var(--af-paper);
  color: var(--af-ink);
  font-family: inherit;
  font-size: var(--af-text-base);
  font-weight: 600;
  cursor: pointer;
}
.bvg-site .bvg-login__provider:hover { background: var(--af-bone-deep); }
.bvg-login__icon { width: 18px; height: 18px; flex: none; }
.bvg-login__divider {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--af-font-mono);
  font-size: 11px;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  color: var(--af-ink-4);
}
.bvg-login__divider::before, .bvg-login__divider::after { content: ''; flex: 1; border-top: 1px solid var(--af-ink-6); }
.bvg-login__form { display: flex; flex-direction: column; gap: 8px; }
.bvg-login__label {
  font-family: var(--af-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--af-tracking-stamp);
  text-transform: uppercase;
  color: var(--af-ink-4);
}
.bvg-site .bvg-login__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: var(--af-stroke);
  border-radius: 0;
  background: var(--af-white, #fff);
  color: var(--af-ink);
  font-family: inherit;
  font-size: 16px;
}
.bvg-site .bvg-login__input:focus { outline: 2px solid var(--af-orange); outline-offset: 0; }
.bvg-site .bvg-login__input[inputmode="numeric"] {
  font-family: var(--af-font-mono);
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}
.bvg-site .bvg-login__submit {
  margin-top: 4px;
  padding: 14px 22px;
  border: var(--af-stroke);
  background: var(--af-orange);
  color: var(--af-bone);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--af-ink);
}
.bvg-site .bvg-login__submit:hover { background: var(--af-orange-deep); }
.bvg-site .bvg-login__submit:active { box-shadow: 0 0 0 var(--af-ink); transform: translate(3px, 3px); }
.bvg-site .bvg-login__submit:disabled { opacity: 0.6; cursor: progress; }
.bvg-login__secondary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.bvg-login__inline-form { margin: 0; }
.bvg-site .bvg-login__link {
  all: unset;
  cursor: pointer;
  font-family: var(--af-font-mono);
  font-size: 12px;
  letter-spacing: var(--af-tracking-wide);
  color: var(--af-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bvg-site .bvg-login__link:hover { color: var(--af-orange-deep); }
.bvg-login__error, .bvg-login__notice {
  margin: 0;
  padding: 10px 12px;
  border: var(--af-stroke);
  font-size: var(--af-text-base);
}
.bvg-login__error { background: #F8DAD2; }
.bvg-login__intent {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--af-orange);
  background: var(--af-paper);
  font-weight: 600;
}
.bvg-login__notice { background: var(--af-signal-soft); }

@media (max-width: 420px) {
  .login-dialog__body { padding: 20px 16px; }
  .bvg-site .bvg-login__provider { padding: 12px; font-size: 14px; }
}

/* Missie: the manifest of BV Geert (handbook bv-geert/mission.md). */
.panel--mission[hidden] { display: none; }
.mission { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px; }
.bvg-site .mission__p { margin: 0; line-height: 1.6; }

/* Four tabs must fit a phone: less padding, a size smaller, and never wider than the screen. */
.seg { max-width: 100%; overflow-x: auto; }
@media (max-width: 480px) {
  .bvg-site .seg:not(.seg--lang) a { padding: 10px 9px; font-size: 11px; letter-spacing: .04em; }
  .mission { padding: 20px; }
}