/* Imelda de Sterke: fotoalbum. Kleuren en lettertypen staan in docs/CONTRACT.md. */

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Terugvalletters op dezelfde breedte, zodat de wissel niets verschuift. */
@font-face {
  font-family: "Serif Terugval";
  src: local("Georgia");
  size-adjust: 83%;
  ascent-override: 96%;
  descent-override: 26%;
}
@font-face {
  font-family: "Sans Terugval";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
}

:root {
  --achtergrond: #f5eef4;
  --vlak: #ffffff;
  --tekst: #2c1633;
  --gedempt: #6f5a76;
  --accent: #7b2e7e;
  --op-accent: #ffffff;
  --haarlijn: #2c163322;
  --kop: "Instrument Serif", "Serif Terugval", Georgia, serif;
  --lijf: "Instrument Sans", "Sans Terugval", system-ui, sans-serif;
  --logo-letter: "Playfair Display", Georgia, serif;
  --gat: 4px;
  --rand-l: max(12px, env(safe-area-inset-left));
  --rand-r: max(12px, env(safe-area-inset-right));
  --balk-hoogte: 72px;
  --snel: 180ms cubic-bezier(.3, 0, .2, 1);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font: 400 1rem/1.5 var(--lijf);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .9375rem/1 var(--lijf);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--snel), border-color var(--snel), opacity var(--snel);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.knop-accent { background: var(--accent); color: var(--op-accent); }
.knop-accent:hover { background: #6a2470; }
.knop-tweede { background: var(--vlak); border-color: var(--haarlijn); color: var(--tekst); }
.knop-tweede:hover { border-color: var(--gedempt); }
.knop[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: var(--vlak); }
.knop:disabled { opacity: .45; cursor: default; }
.knop-maat { font-weight: 400; opacity: .78; }

/* Kop */

.kop {
  max-width: 1400px;
  margin-inline: auto;
  padding: max(20px, env(safe-area-inset-top)) var(--rand-r) 22px var(--rand-l);
}

.logo { display: block; width: auto; height: 34px; }

.kop-titel {
  margin-top: 30px;
  font: 400 clamp(2.75rem, 13vw, 5.5rem)/1 var(--kop);
  letter-spacing: -.012em;
  text-wrap: balance;
}

.kop-meta { margin-top: 14px; display: grid; gap: 2px; color: var(--gedempt); font-size: .9375rem; }
.kop-credit { margin-top: 8px; color: var(--tekst); }
.kop-credit em { font: italic 500 1.0625em/1 var(--logo-letter); }

.acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Albums en raster */

.albums {
  /* Houdt de voet onder de vouw tot het raster staat, zodat die niet verspringt. */
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--rand-l) var(--rand-r);
}

.geen-js { padding-block: 40px; color: var(--gedempt); }

.album + .album { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--haarlijn); }

.album-kop { margin-bottom: 18px; }
.album-titel { font: 400 clamp(2rem, 9vw, 3.25rem)/1.05 var(--kop); letter-spacing: -.01em; }
.album-meta { margin-top: 6px; color: var(--gedempt); font-size: .9375rem; }

.raster { display: grid; gap: var(--gat); }
.rij { display: flex; gap: var(--gat); align-items: flex-start; }
.rij-rest { flex: 1 1 0; min-width: 0; }

.foto {
  position: relative;
  display: block;
  flex: var(--r) 1 0;
  min-width: 0;
  aspect-ratio: var(--r);
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.foto:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 1; }

.foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .28s ease-out, transform var(--snel);
}
.foto img.klaar { opacity: 1; }

.foto-nummer {
  position: absolute;
  left: 7px;
  bottom: 5px;
  color: #fff;
  font: 600 .6875rem/1 var(--lijf);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px #0009, 0 0 1px #0007;
  pointer-events: none;
}

.foto-vink {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #fffc;
  background: #2c163333;
  color: #fff;
  place-items: center;
  pointer-events: none;
}
.foto-vink svg { display: none; }

.kiezen .foto { cursor: pointer; }
.kiezen .foto-vink { display: grid; }

.foto[aria-pressed="true"] img { transform: scale(.94); }
.foto[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent);
  border-radius: 3px;
  pointer-events: none;
}
.foto[aria-pressed="true"] .foto-vink { background: var(--accent); border-color: var(--accent); }
.foto[aria-pressed="true"] .foto-vink svg { display: block; }

/* Voet */

.voet {
  max-width: 1400px;
  margin-inline: auto;
  padding: 44px var(--rand-r) calc(44px + env(safe-area-inset-bottom)) var(--rand-l);
  color: var(--gedempt);
  font-size: .875rem;
}
.voet p { max-width: 58ch; }
.voet p + p { margin-top: 10px; }
.voet-zegel { display: block; width: 40px; height: 40px; margin-bottom: 18px; }

/* Selectiebalk */

.kiezen .voet { padding-bottom: calc(44px + var(--balk-hoogte) + env(safe-area-inset-bottom)); }

.balk {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--balk-hoogte);
  padding: 12px var(--rand-r) calc(12px + env(safe-area-inset-bottom)) var(--rand-l);
  background: var(--vlak);
  border-top: 1px solid var(--haarlijn);
  animation: balk-in .22s cubic-bezier(.2, .7, .2, 1) both;
}
.balk[hidden] { display: none; }

.balk-stop {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
  touch-action: manipulation;
}
.balk-stop:hover { background: var(--achtergrond); }

.balk-telling { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* Vel bij bewaren en ophalen */

.vel {
  width: min(440px, calc(100vw - 24px));
  max-width: none;
  margin: auto auto max(12px, env(safe-area-inset-bottom));
  padding: 22px 20px 16px;
  border: 0;
  border-radius: 22px;
  background: var(--vlak);
  color: var(--tekst);
}
.vel::backdrop { background: #1d0f2299; }
.vel-titel { font: 400 1.75rem/1.1 var(--kop); }
.vel-tekst { margin-top: 6px; color: var(--gedempt); font-size: .9375rem; }
.vel-voortgang {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 16px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--achtergrond);
  accent-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.vel-voortgang[hidden] { display: none; }
.vel-voortgang::-webkit-progress-bar { background: var(--achtergrond); border-radius: 99px; }
.vel-voortgang::-webkit-progress-value { background: var(--accent); border-radius: 99px; transition: width var(--snel); }
.vel-voortgang::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.vel-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.vel-knoppen .knop[hidden] { display: none; }
.vel-knoppen #vel-actie { flex: 1 1 auto; }
.vel-knoppen #vel-sluit { flex: none; }

/* Lichtbak */

.pswp {
  --pswp-bg: #190b1f;
  --pswp-placeholder-bg: #2c1633;
  --pswp-icon-color-secondary: #2c1633;
  --pswp-icon-stroke-color: #2c1633;
}

.pswp__fotonummer {
  align-self: center;
  margin: 0 auto 0 16px;
  color: #fff;
  font: 600 .9375rem/1 var(--lijf);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px #0009;
}

.pswp .pswp__bewaar {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--vlak);
  color: var(--tekst);
  font: 600 .9375rem/1 var(--lijf);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.pswp button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Pagina's zonder album */

.pagina-los { display: grid; min-height: 100vh; min-height: 100svh; }

.los {
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  padding: 32px max(24px, env(safe-area-inset-right)) 48px max(24px, env(safe-area-inset-left));
}
.los-titel { margin-top: 34px; font: 400 clamp(2.5rem, 11vw, 3.75rem)/1.03 var(--kop); letter-spacing: -.01em; text-wrap: balance; }
.los-tekst { margin-top: 12px; color: var(--gedempt); font-size: 1.0625rem; }
.logo-groot { height: auto; width: min(100%, 360px); margin-inline: auto; }

/* Eén keer rustig binnenkomen */

@keyframes opkomen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes balk-in { from { transform: translateY(100%); } to { transform: none; } }

.kop-titel { animation: opkomen .5s cubic-bezier(.2, .7, .2, 1) both; }
.kop-meta, .acties { animation: opkomen .5s .08s cubic-bezier(.2, .7, .2, 1) both; }

/* Grotere schermen */

@media (min-width: 720px) {
  :root { --gat: 6px; --rand-l: max(32px, env(safe-area-inset-left)); --rand-r: max(32px, env(safe-area-inset-right)); }
  .kop { padding-top: 32px; padding-bottom: 32px; }
  .logo { height: 40px; }
  .kop-titel { margin-top: 44px; }
  .vel { margin-block: auto; }
  .album + .album { margin-top: 64px; padding-top: 36px; }
  .foto { border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --snel: 0s; }
  .pswp { --pswp-transition-duration: 0ms; }
  .foto img { transition: none; }
  .kop-titel, .kop-meta, .acties, .balk { animation: none; }
}