/* Overprint — three inks, one per jarige, printed on top of each other.
   Where they overlap the multiply blend makes a fourth colour, the way a
   risograph does when the paper goes through the drum three times. */

:root {
  --paper:        #d9e2da;
  --paper-sheet:  #eceff0;
  --ink:          #16211c;
  --ink-soft:     #55655d;
  --jelle:        #ff3e7f;
  --tim:          #2743c4;
  --robert:       #ff7a2f;

  --display: Archivo, 'Arial Black', sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --utility: 'Martian Mono', ui-monospace, monospace;

  --gutter: 1.25rem;
  --measure: 34rem;
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--tim);
  outline-offset: 3px;
}

/* Paper texture, laid over everything but never in the way. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding: calc(2.5rem + env(safe-area-inset-top)) var(--gutter) 2.75rem;
}

.stamp {
  font-family: var(--utility);
  font-size: .62rem;
  font-variation-settings: 'wght' 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.names {
  margin: 0;
  display: grid;
  isolation: isolate;
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-weight: 800;
  font-size: clamp(3rem, 17vw, 8rem);
  line-height: .8;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.name {
  mix-blend-mode: multiply;
  transform-origin: left center;
  white-space: nowrap;
  /* Shrink to the glyphs: a stretched grid item would measure the column. */
  justify-self: start;
}

/* Set tighter than the cap height, so each ink laps over the one above it and
   the multiply blend shows a fourth colour where they meet. */
.names.is-gezet .name {
  font-size: var(--fit);
  line-height: .70;
}

/* Slight mis-registration: each plate lands a hair off the last. */
.name--jelle  { color: var(--jelle);  margin-left: 0;     transform: rotate(-.7deg); }
.name--tim    { color: var(--tim);    margin-left: .34em; transform: rotate(.5deg); }
.name--robert { color: var(--robert); margin-left: .05em; transform: rotate(-.25deg); }

.hero__lede {
  margin: 2rem 0 0;
  max-width: 20ch;
  font-size: 1.25rem;
  line-height: 1.35;
  text-wrap: balance;
}

.countdown {
  margin-top: 1.1rem;
  font-family: var(--utility);
  font-size: .68rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.countdown::before {
  content: '';
  display: inline-block;
  width: 1.6em;
  height: 1px;
  vertical-align: .3em;
  margin-right: .7em;
  background: currentColor;
}

/* ── Sheets ───────────────────────────────────────────────────────────── */

.sheet {
  background: var(--paper-sheet);
  border-radius: var(--radius);
  padding: 1.75rem var(--gutter) 1.875rem;
  margin: 0 var(--gutter) 1rem;
  max-width: var(--measure);
}

.sheet--flush { margin-bottom: 1rem; }

.heading {
  font-family: var(--display);
  font-variation-settings: 'wdth' 105, 'wght' 700;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 .85rem;
}

.aside {
  margin-top: 1.1rem;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* ── Facts ────────────────────────────────────────────────────────────── */

.facts {
  margin: 0;
  display: grid;
  gap: 1.1rem;
}

.fact { display: grid; gap: .3rem; }

.fact dt {
  font-family: var(--utility);
  font-size: .6rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fact dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.fact strong { font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.actions {
  display: grid;
  gap: .625rem;
  margin-top: 1.5rem;
}

.button {
  display: block;
  padding: .95rem 1.25rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--utility);
  font-size: .7rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.button--primary {
  background: var(--jelle);
  border-color: var(--jelle);
  color: #fff;
  box-shadow: 4px 4px 0 var(--tim);
}

.button:active { transform: translate(2px, 2px); }
.button--primary:active { box-shadow: 2px 2px 0 var(--tim); }

@media (hover: hover) {
  .button:hover { transform: translate(-1px, -1px); }
  .button--primary:hover { box-shadow: 5px 5px 0 var(--tim); }
}

/* ── Reiskaart ───────────────────────────────────────────────────────────
   Eight households, one address. Each route is drawn in one of the three
   inks and carries a dot that rides it at a speed set by the distance. */

.reis { margin-top: 1.25rem; }

.reiskaart {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* Wider than the text column: the map is the one thing worth the room. */
  margin-inline: -.5rem;
  max-width: calc(100% + 1rem);
}

.land path {
  fill: #cfdacf;
  stroke: #b6c5b8;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.route {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0.1 24;
  opacity: .9;
}

.rider  { fill: currentColor; }
.stip   { fill: currentColor; stroke: var(--paper-sheet); stroke-width: 4; }

.reisje       { color: var(--ink); cursor: pointer; outline: none; }
.reisje--jelle  { color: var(--jelle); }
.reisje--tim    { color: var(--tim); }
.reisje--robert { color: var(--robert); }

.plaatsnaam {
  font-family: var(--utility);
  font-size: 28px;
  font-variation-settings: 'wght' 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper-sheet);
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Focusing one route quiets the rest without hiding them. */
.is-gericht .reisje       { opacity: .28; transition: opacity .2s ease; }
.is-gericht .reisje.is-actief { opacity: 1; }

.reisje.is-actief .route { stroke-dasharray: none; stroke-width: 5; opacity: 1; }

.reisje:focus-visible .stip {
  stroke: var(--ink);
  stroke-width: 5;
}

.doel { pointer-events: none; }
.doel__kern { fill: var(--jelle); stroke: var(--paper-sheet); stroke-width: 5; }
.doel__ring { fill: none; stroke: var(--jelle); stroke-width: 4; opacity: .55; }

.plaatsnaam--doel {
  font-size: 32px;
  font-variation-settings: 'wght' 700;
  fill: var(--jelle);
}

.reis__uitslag {
  margin: .9rem 0 0;
  font-family: var(--utility);
  font-size: .66rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-height: 1.4em;
}

/* ── Terugblik ────────────────────────────────────────────────────────── */

.terugblik { margin-top: 2.5rem; }

.editions { display: grid; gap: 1.75rem; }

/* Grid items default to min-width:auto, so a wide video inside the scroll
   strip stretched the whole row and gave the page a sideways scrollbar. */
.edition { min-width: 0; }

.edition__head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: 0 var(--gutter);
  margin-bottom: .7rem;
}

.edition__year {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.02em;
}

.editions > :nth-child(3n+1) .edition__year { color: var(--jelle); }
.editions > :nth-child(3n+2) .edition__year { color: var(--tim); }
.editions > :nth-child(3n+3) .edition__year { color: var(--robert); }

.edition__caption {
  font-size: .9375rem;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* A thumb-swipeable strip on a phone, a plain row on a wide screen. */
.strip {
  display: flex;
  min-width: 0;
  gap: .625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) .5rem;
  /* Without this the first snap lands under the padding on load. */
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.strip::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: var(--paper-sheet);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.shot img {
  height: 13.5rem;
  width: auto;
  object-fit: cover;
}

/* A clip announces itself: a play mark, and how long it runs. */
.shot--film {
  position: relative;
  display: block;
  background: #0d1512;
}

.shot__start {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.shot__video {
  display: none;
  height: 13.5rem;
  width: auto;
  max-width: 88vw;
  background: #0d1512;
}

.is-spelend .shot__start { display: none; }
.is-spelend .shot__video { display: block; }

/* Only offered once a clip is running: filling the screen is a choice, not
   what happens to you when you tap play. */
.shot__groot {
  display: none;
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(12, 22, 18, .72);
  color: #fff;
  font-size: .95rem;
  line-height: 2rem;
  cursor: pointer;
}

.is-spelend .shot__groot { display: block; }

.shot__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--jelle);
  box-shadow: 0 2px 10px rgba(12, 22, 18, .35);
}

.shot__play::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: .85rem solid #fff;
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent;
  transform: translateX(.15rem);
}

.shot__duur {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  padding: .15rem .4rem;
  border-radius: 2px;
  background: rgba(12, 22, 18, .72);
  color: #fff;
  font-family: var(--utility);
  font-size: .58rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .04em;
  line-height: 1.5;
}

@media (hover: hover) {
  .shot--film:hover .shot__play { transform: scale(1.08); }
  .shot__play { transition: transform .15s ease; }
  .shot__groot:hover { background: var(--jelle); }
}

/* ── Bedankt ──────────────────────────────────────────────────────────────
   The film sits full-bleed on a phone: it is the reason to open the link. */

.bedankt { margin-bottom: 2.5rem; }

.film {
  position: relative;
  margin: 0 0 1rem;
  background: #0d1512;
  aspect-ratio: 16 / 9;
}

.film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d1512;
}

.film__geluid {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .65rem .95rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--jelle);
  color: #fff;
  box-shadow: 3px 3px 0 var(--tim);
  font-family: var(--utility);
  font-size: .68rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.film__geluid[hidden] { display: none; }

.film__geluid:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tim); }

@media (prefers-reduced-motion: no-preference) {
  .film__geluid { animation: tik 2.4s ease-in-out 1.5s infinite; }
}

@keyframes tik {
  0%, 80%, 100% { transform: none; }
  88% { transform: translateY(-3px); }
}

.credit { font-size: .75rem; margin-top: .6rem; }

.subkop {
  margin: 1.75rem 0 .85rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 105, 'wght' 700;
  font-size: 1.125rem;
}

.gezichten--gemist .gezicht img { filter: saturate(.85); }

.moment__tijd { font-family: var(--utility); font-variation-settings: 'wght' 700; letter-spacing: 0; }

.dag { margin-bottom: 2.5rem; }

/* ── Wie er waren ────────────────────────────────────────────────────────── */

.wie { margin-bottom: 2.5rem; }

.gezichten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: 1.1rem .8rem;
}

.gezicht img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  outline: 4px solid var(--ink);
  outline-offset: -4px;
}

.gezicht--jelle img  { outline-color: var(--jelle); }
.gezicht--tim img    { outline-color: var(--tim); }
.gezicht--robert img { outline-color: var(--robert); }

.gezicht span {
  display: block;
  margin-top: .45rem;
  font-family: var(--utility);
  font-size: .6rem;
  font-variation-settings: 'wght' 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gezicht--open span { color: var(--ink-soft); }

/* ── Closing ──────────────────────────────────────────────────────────── */

.closing {
  padding: 3rem var(--gutter) calc(3.5rem + env(safe-area-inset-bottom));
  max-width: var(--measure);
}

.closing__ask {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-weight: 700;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.closing__how { color: var(--ink-soft); }

.signature {
  margin-top: 2rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-weight: 600;
  font-size: 1.125rem;
}

.ink--jelle  { color: var(--jelle); }
.ink--tim    { color: var(--tim); }
.ink--robert { color: var(--robert); }

/* ── Lightbox ─────────────────────────────────────────────────────────── */

.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--paper);
  overscroll-behavior: contain;
}

.lightbox::backdrop { background: rgba(12, 22, 18, .93); }

.lightbox img,
.lightbox video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  margin: auto;
  border-radius: var(--radius);
}

.lightbox img[hidden],
.lightbox video[hidden] { display: none; }

.lightbox__caption {
  font-family: var(--utility);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem var(--gutter);
  color: #b9c6bf;
}

.lightbox__close {
  position: absolute;
  top: calc(.5rem + env(safe-area-inset-top));
  right: .5rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  background: none;
  color: var(--paper);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* Tall strips along both edges: a thumb reaches them without aiming. They
   stop above the video's own control bar, and each carries a disc so the
   arrow stays readable over a bright photo. */
.lightbox__nav {
  position: absolute;
  top: 0;
  bottom: 4.5rem;
  width: 4.5rem;
  border: 0;
  padding: 0;
  color: #fff;
  font-family: var(--body);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .82;
  transition: opacity .15s ease;
  z-index: 2;
  background: radial-gradient(circle at center,
              rgba(12, 22, 18, .55) 1.35rem, transparent 1.4rem);
}

.lightbox__nav--vorige   { left: 0; }
.lightbox__nav--volgende { right: 0; }

.lightbox__nav:disabled { opacity: .18; cursor: default; }

@media (hover: hover) {
  .lightbox__nav:not(:disabled):hover { opacity: 1; }
}

/* The media sits under the controls, not over them. */
.lightbox img,
.lightbox video { position: relative; z-index: 1; }

.lightbox > form { display: contents; }

/* ── Wider screens ────────────────────────────────────────────────────── */

@media (min-width: 46rem) {
  :root { --gutter: 3rem; --measure: 40rem; }

  body { font-size: 1.125rem; }

  .hero { padding-top: 4.5rem; padding-bottom: 3.5rem; }
  .stamp { font-size: .7rem; }
  .hero__lede { font-size: 1.5rem; max-width: 24ch; }

  .sheet { padding: 2.25rem 2.25rem 2.5rem; }
  .heading { font-size: 1.875rem; }

  .facts { gap: 1.4rem; }
  .actions { grid-auto-flow: column; justify-content: start; }
  .button { padding: 1rem 1.75rem; }

  .plaatsnaam { font-size: 22px; }
  .plaatsnaam--doel { font-size: 26px; }
  .route { stroke-width: 5; stroke-dasharray: 0.1 20; }
  .shot__video { height: 17rem; max-width: 60vw; }
  .shot img { height: 17rem; }
  .edition__year { font-size: 2.25rem; }
  /* Two plates behind the film, off register; on a phone it runs edge to
     edge and there is no room for them. */
  .film {
    margin: 0 var(--gutter) 1.75rem;
    max-width: 62rem;
    box-shadow: 7px 7px 0 var(--jelle), 14px 14px 0 var(--tim);
  }
  .gezichten { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
}

@media (min-width: 64rem) {
  :root { --measure: 46rem; }

  /* Three columns only once the sheet is wide enough to hold an address. */
  .facts { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media (min-width: 68rem) {
  .hero { max-width: 62rem; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@keyframes puls {
  from { r: 14; opacity: .6; }
  to   { r: 34; opacity: 0; }
}

@keyframes register {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r0)); }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .doel__ring { animation: puls 2.6s ease-out infinite; }

  .name {
    animation: register .6s cubic-bezier(.2, .8, .3, 1) backwards;
  }
  .name--jelle  { --dx: -.06em; --dy: .1em;  --r0: -4deg; animation-delay: .05s; }
  .name--tim    { --dx:  .09em; --dy: -.08em; --r0: 3.5deg; animation-delay: .2s; }
  .name--robert { --dx: -.04em; --dy: .12em; --r0: -3deg;  animation-delay: .35s; }

  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal.is-in { opacity: 1; transform: none; }
}