@font-face {
  font-family: "Alpha Lyrae";
  src: url("fonts/AlphaLyrae-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --haarlijn: 1px solid rgb(255 255 255 / 0.15);  /* het raster dat de blokken draagt */
  --tekst: clamp(24px, 1.25vw, 32px);  /* het verhaal: 24px tot 1920 breed, daarna mee tot 32px. Alles schaalt hiermee mee */
  --gedimd: rgb(255 255 255 / 0.72);
  --zacht: rgb(255 255 255 / 0.45);
}
@media (max-width: 600px) { :root { --tekst: 20px; } }  /* 24px geeft op een telefoon maar ~30 tekens per regel */

* { box-sizing: border-box; margin: 0; }

html { background: #000; }
body { min-height: 100svh; color: #fff; font-family: "DM Sans", system-ui, sans-serif; }

/* Het land staat stil achter de pagina; 100lvh zodat het niet verspringt als een mobiele adresbalk inklapt. */
canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; display: block; }

/* Breed en liggend: twee zwarte kolommen naast elkaar, van boven tot onder, met een gedeelde haarlijn.
   Links de naam en het verhaal, rechts Work en Now: alles op één scherm, met links en rechts het land. */
main { position: relative; display: flex; min-height: 100svh; margin-left: 7vw; }
.column {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: var(--haarlijn);
}
.hero { width: min(40vw, calc(var(--tekst) * 26)); border-left: var(--haarlijn); }
.more { width: min(34vw, calc(var(--tekst) * 22)); }
.more .block { gap: calc(var(--tekst) * 0.8); padding-block: calc(var(--tekst) * 1.2); }
.block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--tekst) * 1.1);
  padding: calc(var(--tekst) * 1.6) 3vw;
}
.hero .block { padding-bottom: calc(var(--tekst) * 1.6 + 6vh); }
.more .block + .block { border-top: var(--haarlijn); }

h1 {
  font-family: "Alpha Lyrae", sans-serif;
  font-weight: 500;
  /* Altijd 2,9 x de tekst; alleen kleiner als de naam (~6,2 em breed) anders niet in de breedte past. */
  font-size: min(calc(var(--tekst) * 2.9), calc((100vw - 96px) / 6.2));
  line-height: 1;
  cursor: default;
}
h1.glitch { text-shadow: -0.03em 0 rgb(255 40 140 / 0.7), 0.03em 0 rgb(40 220 255 / 0.7); }

.story { font-size: var(--tekst); line-height: 1.5; color: var(--gedimd); max-width: 36ch; }
.story a { color: #fff; text-underline-offset: 0.2em; }

.links { display: flex; gap: calc(var(--tekst) * 0.8); }
.links a { color: var(--gedimd); display: block; padding: 12px; margin: -12px; }  /* tikvlak ≥ 44px */
.links a:hover, .links a:focus-visible { color: #fff; }
.links svg { width: var(--tekst); height: var(--tekst); fill: currentColor; display: block; }

/* Waar ik woon, discreet, zoals de legenda in de hoek van een stafkaart. Breed: linksonder in
   de kolom; smaller en staand: onderaan het eerste blok. */
.hero { position: relative; }
.legend {
  position: absolute;
  left: 3vw;
  right: 3vw;
  bottom: calc(var(--tekst) * 1.4);
  font-size: calc(var(--tekst) * 0.58);
  line-height: 1.5;
  color: var(--zacht);
}

h2 {
  font-size: calc(var(--tekst) * 0.55);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zacht);
}
.updated { margin-left: 1em; letter-spacing: 0.04em; text-transform: none; }

/* Rijen met haarlijnen ertussen. */
.rows { list-style: none; padding: 0; font-size: calc(var(--tekst) * 0.8); line-height: 1.5; color: var(--gedimd); }
.rows li { display: grid; gap: 0.15em 1.5em; padding: calc(var(--tekst) * 0.55) 0; border-bottom: var(--haarlijn); }
.rows li:first-child { padding-top: 0; }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.work li { grid-template-columns: 1fr; }  /* de rol, met bedrijf en jaren gedimd eronder */
.work .what { color: #fff; }
.work .meta { color: var(--zacht); font-variant-numeric: tabular-nums; }
.now li { grid-template-columns: 1fr; }
.now .what { color: var(--zacht); }

/* Smaller liggend scherm: één kolom. De naam vult niet meer het hele eerste scherm, zodat Work al in
   beeld begint en je ziet dat er meer is. */
@media (max-width: 1199px) and (min-aspect-ratio: 1/1) {
  main { flex-direction: column; width: min(70vw, calc(var(--tekst) * 30)); background: #000; border-inline: var(--haarlijn); }
  .column { width: auto; border: 0; }
  .hero .block { padding-top: 14svh; padding-bottom: calc(var(--tekst) * 1.6); }
  .legend { position: static; padding-top: calc(var(--tekst) * 0.8); border-top: var(--haarlijn); }
  .more { border-top: var(--haarlijn); }
  .more .block:last-child { padding-bottom: calc(var(--tekst) * 4); }
}

/* Staand: elk blok een band van links tot rechts, met smalle stroken land ertussen. De openingsband staat
   hoog genoeg dat Work onderin al in beeld piept. Twee rails op 16px van de rand lopen overal doorheen. */
@media (max-aspect-ratio: 1/1) {
  main { flex-direction: column; margin: 0; padding: 12svh 0 20svh; gap: 7svh; }
  .column, .hero, .more { width: 100%; background: none; border: 0; gap: 7svh; }
  .block {
    background: #000;
    border-top: var(--haarlijn);
    border-bottom: var(--haarlijn);
    padding: 40px max(32px, 6vw);
  }
  .hero .block { padding-bottom: 40px; }
  .legend { position: static; padding-top: calc(var(--tekst) * 0.8); border-top: var(--haarlijn); }
  .more .block + .block { border-top: var(--haarlijn); }
  body::before, body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--haarlijn);
    z-index: 1;
    pointer-events: none;
  }
  body::before { left: 16px; }
  body::after { right: 16px; }
  h1 span { display: inline-block; }
}
/* Lage telefoons (zoals 375x667): minder ruimte erboven en ertussen, zodat Work nog in beeld piept. */
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  main { padding-top: 6svh; }
  main, .column, .hero, .more { gap: 5svh; }
}