/* =========================================================
   The Brand Affair — Realisaties + case pages
   1:1 uitgemeten op "Overview - all pages.pdf" (designbreedte 1024px).
   Alle maten staan in % van de contentkolom, zodat de pagina op elke
   schermbreedte exact dezelfde verhoudingen houdt als het design.
   ========================================================= */

@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Regular.woff2") format("woff2"),
       url("../fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream:  #dddbc9;  /* paginakleur + wordmarks */
  --ink:    #861506;  /* navigatie */

  /* uitgemeten op het design (1024px breed) */
  --nav-size:  1.871vw;  /* 19.16px */
  --nav-top:   2.148%;   /*   22px  */
  --nav-left:  3.320%;   /*   34px  */
  --nav-right: 5.566%;   /*   57px  */

  --case-pad:  5.566%;   /* contentkolom 910px van 1024px */
  --list-pad:  7.227%;   /* contentkolom 876px van 1024px */
  --main-top:  5.566%;   /* eerste beeld op y = 102px      */
}

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

body.cream {
  background: var(--cream);
  color: var(--ink);
  font-family: "Glacial Indifference", "Jost", "Century Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; width: 100%; height: auto; }

/* ---------------- navigatie ---------------- */
.rnav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--nav-top) var(--nav-right) 0 var(--nav-left);
  font-size: max(14px, var(--nav-size));
  line-height: 1.2;
}
.rnav a { color: var(--ink); text-decoration: none; }
.rnav a:hover { opacity: .6; }
.rnav__links { display: flex; gap: 1.12em; }   /* 21,5px bij 19,16px */

/* ---------------- realisaties-overzicht ---------------- */
.realisaties {
  padding: var(--main-top) var(--list-pad) 4.59%;
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 2.708;         /* 876 x 323,5 */
  overflow: hidden;
}
.tile + .tile { margin-top: 3.767%; }   /* 33px van 876px */

.tile__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.tile:hover .tile__img { transform: scale(1.03); }

.tile__mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  pointer-events: none;
}

/* ---------------- case-pagina's ---------------- */
.case {
  padding: var(--main-top) var(--case-pad) 3.9%;
}

.block { display: flex; align-items: flex-start; }
.block + .block { margin-top: 3.077%; }   /* 28px van 910px */

.col { display: flex; flex-direction: column; }
.col img, .col video { width: 100%; height: auto; }
.col > * + *   { margin-top: var(--vgap, 0); }

/* ---- Aiche: rood kader om de beelden (uit het design, ~11,5px op 1024) ----
   De rand valt binnen de beeldmaat (box-sizing: border-box), zodat de
   uitmeting van het design exact blijft kloppen.                        */
.case--aiche img,
.case--aiche video {
  border: clamp(4px, 1.123vw, 20px) solid #ab171b;
}

/* ---------------- klein scherm ----------------
   Het design bestaat alleen in desktopbreedte. Onder 600px worden de
   kolommen gestapeld, zodat beelden niet onleesbaar klein worden.      */
@media (max-width: 600px) {
  .block { flex-direction: column; gap: 4% !important; }
  .col   { width: 100% !important; }
  .col > * + * { margin-top: 4%; }
  .rnav  { font-size: 15px; }
}