/* ScreEnough — stijl
   Richting: warm en analoog (Daylight, Mudita), één boodschap per sectie met
   veel lucht (reMarkable), typografie die een statement maakt (Punkt, Light
   Phone). De site gaat over minder prikkels, dus hij mag zelf niet bewegen
   zonder dat je scrollt. */

:root {
  --paper:      #f8f5ef;
  --paper-sink: #efe9df;
  --ink:        #211e19;
  --ink-soft:   #5d564c;
  --ink-faint:  #8f877b;
  --line:       #e0d8cb;
  --accent:     #b5613a;
  --held:       #4a6b52;
  --failed:     #a2988a;

  --maxw:   48rem;
  --wide:   68rem;
  --gutter: 1.5rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14120f;
    --paper-sink: #1d1a16;
    --ink:        #ece6dc;
    --ink-soft:   #b0a89b;
    --ink-faint:  #7b7367;
    --line:       #2d2922;
    --accent:     #d98a5f;
    --held:       #86b08f;
    --failed:     #6b6458;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #14120f;
  --paper-sink: #1d1a16;
  --ink:        #ece6dc;
  --ink-soft:   #b0a89b;
  --ink-faint:  #7b7367;
  --line:       #2d2922;
  --accent:     #d98a5f;
  --held:       #86b08f;
  --failed:     #6b6458;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin-inline: auto; }
.wrap--wide { max-width: var(--wide); margin-inline: auto; }

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

.site-head {
  max-width: var(--wide);
  margin-inline: auto;
  padding-block: 1.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.875rem; }

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

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

.hero { padding-block: 7rem 5rem; }

.hero h1 {
  font-size: clamp(3rem, 9vw, 5.5rem);
  margin-bottom: 2rem;
}

.hero .lead {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30ch;
}

.page-hero { padding-block: 5.5rem 3.5rem; }
.page-hero h1 { font-size: clamp(2.5rem, 7vw, 4rem); margin-bottom: 1.5rem; }

.page-hero .lead {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 38ch;
}

/* ---------- knoppen ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
}

.btn:hover { background: var(--paper-sink); }

.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- secties ---------- */

section { padding-block: 5.5rem; border-top: 1px solid var(--line); }

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

section h2 { font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: 1.5rem; }
.prose p { max-width: 64ch; }

/* ---------- fotoplek ---------- */

.photo {
  aspect-ratio: 3 / 2;
  max-width: 100%;
  background: var(--paper-sink);
  border: 1px dashed var(--line);
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  margin-block: 3rem;
}

/* ---------- tijdrekenaar ---------- */

.calc { background: var(--paper-sink); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

.calc__control { margin-block: 2.5rem 3rem; max-width: 34rem; }

.calc__control label {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.calc__hours {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.5rem;
  color: var(--ink);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 1.75rem;
}

.calc__out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc__big {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.75rem, 8vw, 4rem);
  line-height: 1;
  font-weight: 300;
  color: var(--accent);
  display: block;
}

.calc__unit { display: block; font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.625rem; max-width: 22ch; }

.calc__note { margin-top: 3rem; font-size: 0.875rem; color: var(--ink-faint); max-width: 52ch; }

/* ---------- experimenten, kort ---------- */

.experiments { list-style: none; margin: 0; padding: 0; }

.experiment {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.5rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
}

.experiment:first-child { border-top: none; padding-top: 0; }

.experiment__num {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.125rem;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}

.experiment h3 { font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: 400; }
.experiment p { margin: 0 0 1rem; color: var(--ink-soft); max-width: 56ch; }

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.verdict::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.verdict--held   { color: var(--held); }
.verdict--failed { color: var(--failed); }

@media (max-width: 32rem) {
  .experiment { grid-template-columns: 1fr; gap: 0.5rem; }
  .experiment__num { padding-top: 0; }
}

/* ---------- experimenten, uitgebreid ---------- */

.experiment-full { padding-block: 4rem; border-top: 1px solid var(--line); }
.experiment-full:first-of-type { border-top: none; padding-top: 1rem; }

.experiment-full__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
}

.experiment-full h2 { font-size: clamp(1.75rem, 4.5vw, 2.25rem); margin-bottom: 0; }

.experiment-full__num {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  color: var(--ink-faint);
}

.experiment-full p { color: var(--ink-soft); max-width: 62ch; }

.takeaway {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-sink);
  border-radius: 0 0.375rem 0.375rem 0;
}

.takeaway p { margin: 0; color: var(--ink); max-width: 58ch; }
.takeaway strong { font-weight: 500; }

/* ---------- principes ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.principles h3 { font-size: 1.375rem; margin-bottom: 0.75rem; font-weight: 400; }
.principles p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- stappen ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps > li { counter-increment: step; padding-block: 3rem; border-top: 1px solid var(--line); }
.steps > li:first-child { border-top: none; padding-top: 0.5rem; }

.steps h3 { font-size: 1.625rem; margin-bottom: 0.875rem; font-weight: 400; }

.steps h3::before {
  content: counter(step);
  color: var(--accent);
  margin-right: 0.75rem;
  font-size: 1rem;
  vertical-align: 0.35em;
}

.steps p, .steps ul { color: var(--ink-soft); max-width: 60ch; }
.steps ul { padding-left: 1.125rem; }
.steps li { margin-bottom: 0.5rem; }

/* ---------- over ons ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.people h3 { font-size: 1.5rem; margin-bottom: 0.75rem; font-weight: 400; }
.people p { color: var(--ink-soft); margin: 0 0 1rem; }

/* ---------- statement ---------- */

.statement { border-top: 1px solid var(--line); padding-block: 7rem; }

.statement p {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.25;
  font-weight: 300;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* ---------- nog in te vullen ---------- */

.todo {
  border: 1px dashed var(--accent);
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  max-width: 64ch;
}

.todo::before {
  content: "Nog invullen";
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.todo p { margin: 0; max-width: none; }

/* ---------- afsluiter ---------- */

.next-up { background: var(--paper-sink); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.next-up p { max-width: 52ch; font-size: 1.125rem; color: var(--ink-soft); }

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

.site-foot {
  max-width: var(--wide);
  margin-inline: auto;
  padding-block: 3rem 4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.socials { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.socials a { color: var(--ink-soft); text-decoration: none; }
.socials a:hover { color: var(--ink); text-decoration: underline; }

/* ============================================================
   Toegankelijkheid — briefing 15
   ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.375rem 0;
  z-index: 10;
  text-decoration: none;
}

.skip:focus { left: 0; }

main:focus { outline: none; }

/* Zichtbare focus, maar alleen voor wie met het toetsenbord navigeert. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tikdoelen ruim genoeg op mobiel — briefing 12 en 24. */
@media (pointer: coarse) {
  .site-nav a, .socials a { padding-block: 0.5rem; }
  .btn { padding: 0.875rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Visuals — cijfers en verhaal in beeld in plaats van in tekst
   ============================================================ */

/* ---------- een jaar in dagen ----------
   365 stipjes. De gevulde stipjes zijn de dagen die je dit jaar
   aan je scherm besteedt. Toont hetzelfde als het getal ernaast,
   maar je ziet het in plaats van dat je het leest. */

.jaar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0.5rem, 1fr));
  gap: 0.3rem;
  margin-block: 2.5rem 1.25rem;
  max-width: 32rem;
}

.jaar span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--line);
}

.jaar span.vol { background: var(--accent); }

.jaar__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0 0 3rem;
}

.jaar__legenda span { display: inline-flex; align-items: center; gap: 0.5rem; }

.jaar__legenda span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line);
}

.jaar__legenda span:first-child::before { background: var(--accent); }

/* ---------- ruis wordt rust ----------
   Briefing 8: links dichte streepjes, rechts lucht. Het contrast
   waar de hele site over gaat, zonder er een woord aan vuil te maken. */

.ruis {
  width: 100%;
  height: 5rem;
  margin-block: 1rem 3.5rem;
  display: block;
  overflow: visible;
}

.ruis line { stroke: var(--ink-faint); stroke-width: 1; }

/* ---------- hoe lang het hield ----------
   Elk experiment een balk. De twee die bleven hangen lopen door
   en stoppen niet — dat is precies het punt. */

.duur { margin-top: 1rem; }

.duur__spoor {
  position: relative;
  height: 0.375rem;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  max-width: 22rem;
}

.duur__balk {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 999px;
  background: var(--failed);
}

.duur--held .duur__balk {
  background: linear-gradient(to right, var(--held), var(--held) 65%, transparent);
  width: 100% !important;
}

.duur__label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

/* ---------- filosofie: drie waarden ---------- */

.waarden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 3.5rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.waarden h3 {
  font-size: 1.75rem;
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.waarden p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

.waarden__streep {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}

/* ---------- afsluiting ---------- */

.einde { padding-block: 8rem; border-top: 1px solid var(--line); text-align: left; }

.einde h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: 1rem; }
.einde p { color: var(--ink-soft); max-width: 40ch; margin-bottom: 2.5rem; }

/* ============================================================
   Ritme — de kolom breken zodat het geen blogpost is
   ============================================================ */

/* ---------- papierkorrel ----------
   Heel subtiel. Zorgt dat het vlak niet als digitaal wit leest maar
   als bedrukt papier (briefing 4: tactiel, drukwerk). */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: 0.14; }
}

:root[data-theme="dark"] body::before { opacity: 0.14; }

/* ---------- volle breedte, buiten de kolom ----------
   Doorbreekt het ritme van steeds dezelfde kolombreedte. */

.bleed {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.band { background: var(--paper-sink); }

/* ---------- tweeluik: beeld naast tekst ----------
   Briefing 22 noemt SplitSection als component. Dit is 'm. */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 3rem 4rem;
  align-items: center;
}

.split--omgekeerd > :first-child { order: 2; }

.split__tekst h2 { margin-bottom: 1.25rem; }
.split__tekst p { color: var(--ink-soft); max-width: 40ch; }

@media (max-width: 46rem) {
  .split--omgekeerd > :first-child { order: 0; }
}

/* ---------- beeldplek ----------
   Geen gestippelde bak meer maar een vlak dat bedoeld lijkt, met het
   onderschrift eronder in plaats van erin. */

figure { margin: 0; }

.beeld {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(160deg, var(--paper-sink) 0%, var(--line) 100%);
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  position: relative;
  overflow: hidden;
}

.beeld--breed { aspect-ratio: 16 / 7; }
.beeld--hoog  { aspect-ratio: 3 / 4; }

.beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--ink) 4%, transparent) 11px 12px);
}

.beeld svg { width: 2.5rem; height: 2.5rem; opacity: 0.4; position: relative; }

figcaption {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.875rem;
  max-width: 40ch;
  line-height: 1.5;
}

figcaption b {
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* ---------- citaat ----------
   Groot, in serif, over de volle breedte. Onderbreekt de leeskolom. */

.citaat { padding-block: 6rem; }

.citaat blockquote {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.625rem, 4.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1.3;
  max-width: 24ch;
  text-wrap: balance;
}

.citaat cite {
  display: block;
  margin-top: 1.75rem;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--ink-faint);
}

/* ---------- merktekens bij de drie waarden ----------
   Abstracte figuren, geen iconenset. Elk tekent wat het woord betekent. */

.waarden__mark {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
  display: block;
}

.waarden__mark line,
.waarden__mark path,
.waarden__mark circle {
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
}

.waarden__mark .vast { fill: currentColor; stroke: none; }