/* Hallmark · shape: tegels in tonen · genre: modern-minimal · theme: custom · job: hire · idea: "Net als Material You kleurt de pagina zich naar één bronkleur, en elke plek uit Pieters werkleven is zo'n bronkleur" · vibe: "tonaal, rond, Android, jong, feitelijk"
 * paper: oklch(97.5% 0.012 205) · accent: oklch(42% 0.13 205) · display: Figtree · body: Figtree · hero: grote tonale tegel met de kop, zijtegel met portret en een tegel per plek · nav: wordmark links, één tekstlink naar contact rechts · footer: één regel met naam en plaats · imagery: portret van Pieter, verder geen · signature: kies een plek en de hele pagina neemt die kleur over
 * axes: light/geometric-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0
 * hero-review: fix · 5 findings · 5 resolved
 * finish-review: subagent · 8 findings · 8 resolved · gap: portretscherpte op hoge dichtheid niet beoordeeld */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, een tegelraster is algemeen; de kleuren komen daarom uit Pieters eigen banner en werkplekken */
/* Hallmark · waive 39b · vier plektegels, elk op de hit-target van 44px of groter · deze kleurtegels zijn net als de snelle instellingen van Android bewust groot, want ze zijn de signature van Pieters pagina */
/* Hallmark · dismissed 49 · de rijen in de tijdlijn en de plektegels dragen beschrijvende regels met data en rollen, die mogen op een telefoon afbreken */
/* Hallmark · answered F7 · de pill zit alleen op bedieningselementen: knoppen, navigatielink en tijdlijnbalken in Pieters tijdlijn */
/* Hallmark · answered F20 · de tegel Systeembeheer loopt over twee rijen, dus de derde tegel staat niet alleen op de rij */
/* Hallmark · dismissed render · Figtree laadt over HTTP aantoonbaar via document.fonts; de melding komt van de file-weergave zonder lettertypetoegang */
@import url("./tokens.css");
@import url("./base.css");

html { transition: --seed var(--dur-long) var(--ease-in-out); }
body { min-height: 100dvh; }
.container { padding-inline: var(--gutter); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-small); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), border-radius var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); border-radius: var(--radius-small); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .swatch:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-field-ink); border-color: var(--color-field-ink); }
.btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-field-ink); color: var(--color-ink); }

.nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-height); padding-inline: var(--space-lg); }
.wordmark { font: 800 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.nav__link:hover { background: var(--color-paper-2); }
.wordmark:focus-visible, .nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.hero { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: var(--gap-columns); min-height: min(calc(100dvh - var(--nav-height) - var(--space-md)), 840px); }
.hero__main { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: var(--space-2xl); border-radius: var(--radius-large); background: var(--color-field); color: var(--color-field-ink); }
.hero h1 { max-width: 12ch; font-size: var(--text-hero); font-weight: 800; line-height: 0.98; letter-spacing: var(--tracking-display); }
.hero__lede { max-width: 34ch; font-size: var(--text-lead); line-height: 1.35; }
.hero__foot { display: grid; gap: var(--space-lg); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.hero__side { display: flex; flex-direction: column; gap: var(--space-lg); color: var(--color-ink); }
.portrait { width: 102px; height: 102px; border-radius: 50%; }
.picker { display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
html:not(.js) .picker { display: none; }
.picker legend { padding: 0 0 var(--space-sm); font-weight: 600; line-height: 1.3; }
.swatches { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(60px, 1fr); gap: var(--space-xs); }
.swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3xs); min-height: 60px; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-card); background: var(--color-place-soft); color: var(--color-place-soft-ink); font: 400 var(--text-sm)/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-radius var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.swatch b { font-size: var(--text-md); font-weight: 800; }
.swatch--wide { grid-column: 1 / -1; }
.portrait-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.portrait { flex-shrink: 0; }
.swatch--home { justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); }
.portrait-row .swatch--home[aria-pressed="true"] { border-radius: var(--radius-pill); }
html:not(.js) .swatch--home, html:not(.js) .timeline__hint { display: none; }
.swatch:hover { border-radius: var(--radius-large); }
.swatch:active { transform: scale(0.98); }
.swatch[aria-pressed="true"] { border-radius: var(--radius-small); background: var(--color-place); color: var(--color-place-ink); }
.swatch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.statement { padding: var(--section-gap-s) var(--space-2xl); }
.statement p { max-width: 24em; font: 800 var(--text-section)/1.08 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }

h2 { font-size: var(--text-section); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-display); }

.timeline { padding: var(--space-2xl); border-radius: var(--radius-large); background: var(--color-paper-2); color: var(--color-ink); }
.timeline__hint { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.axis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: var(--space-xl) var(--space-md) var(--space-xs) calc(41.66% + var(--space-md)); font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.rows { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-lg); width: 100%; min-height: 96px; padding: var(--space-md); border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-radius var(--dur-short) var(--ease-out); }
.row:hover { background: var(--color-paper-3); }
.row:disabled { cursor: default; }
.row:active { background: var(--color-paper-3); }
.row[aria-pressed="true"] { border-radius: var(--radius-small); background: var(--color-paper-3); }
.row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.row__text { display: grid; gap: var(--space-2xs); min-width: 0; }
.row__text b { font-size: var(--text-lg); font-weight: 800; line-height: 1.2; }
.row__text span { color: var(--color-ink-2); line-height: 1.35; }
.track { position: relative; display: block; height: 40px; border-radius: var(--radius-pill); background: var(--color-paper); }
.track::after { content: ""; position: absolute; inset-block: calc(-1 * var(--space-xs)); left: calc(var(--now) / 60 * 100%); width: 2px; background: var(--color-ink); }
.bar { position: absolute; inset-block: 0; left: calc(var(--from) / 60 * 100%); width: calc((var(--to) - var(--from)) / 60 * 100%); border-radius: var(--radius-pill); background: var(--color-place); }
.bar--soft { background: var(--color-place-soft); }
.timeline__note { margin-top: var(--space-lg); padding-inline: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

.skills { padding: var(--section-gap) 0 var(--space-2xl); }
.skills h2 { padding-inline: var(--space-2xl); }
.skills__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.skill { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); min-height: 220px; padding: var(--space-xl); border-radius: var(--radius-large); background: var(--color-place-soft); color: var(--color-place-soft-ink); }
.skill h3 { font-size: var(--text-title); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.skill p { max-width: 32ch; font-size: var(--text-lead); line-height: 1.35; }
.skill--main { grid-row: span 2; background: var(--color-place); color: var(--color-place-ink); }
.skill--main h3 { font-size: var(--text-section); letter-spacing: var(--tracking-display); }

.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-2xl); border-radius: var(--radius-large); background: var(--color-paper-3); color: var(--color-ink); }
.contact h2 { max-width: 16ch; }

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--nav-height); padding: var(--space-md) var(--space-lg); color: var(--color-ink-2); }
.footer .wordmark { color: var(--color-ink); }

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__main { gap: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-card); }
  .hero__side { gap: var(--space-md); }
  .portrait { width: 64px; height: 64px; }
  .btn { padding: 0 var(--space-md); }
  .statement { padding: var(--section-gap-s) var(--space-lg); }
  .timeline, .contact { padding: var(--space-xl) var(--space-md); border-radius: var(--radius-card); }
  .timeline h2, .timeline__hint { padding-inline: var(--space-xs); }
  .axis { margin-left: var(--space-md); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .skills { padding-top: var(--section-gap-s); }
  .skills h2 { padding-inline: var(--space-lg); }
  .skills__grid { grid-template-columns: minmax(0, 1fr); }
  .skill { min-height: 180px; padding: var(--space-lg); border-radius: var(--radius-card); }
  .skill--main { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { html { transition: none; } .btn, .swatch, .row { transition: background-color var(--dur-short) linear; } .btn:active, .swatch:active { transform: none; } }