/* Meqari — basisstijlen. Regels: zie redesign-plan.md (brandkit is leidend). */

/* Rawest als webfont (woff2, uit de desktopfonts van de studio; webgebruik bevestigd 2026-10-18) */
@font-face { font-family: 'Rawest'; src: url('../assets/fonts/Rawest-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rawest'; src: url('../assets/fonts/Rawest-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* Argesta (Atipo) als speels accent naast Rawest (akkoord 2026-10-16, ideeën B + C uit mockups/argesta.html).
   LICENTIE: vóór publicatie een webfontlicentie nemen (de bureaulicentie dekt de website niet). */
@font-face { font-family: 'Argesta Display'; src: url('../assets/fonts/ArgestaDisplay-RegularItalic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Argesta Hairline'; src: url('../assets/fonts/ArgestaHairline-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Argesta Hairline'; src: url('../assets/fonts/ArgestaHairline-RegularItalic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --yellow: #FFFF33;
  --black: #111111;
  --white: #FFFFFF;

  --font-sans: 'Rawest', 'Helvetica Neue', Arial, sans-serif;
  --font-label: var(--font-sans);                    /* labels (.mono): Rawest Regular, 11 px, hoofdletters (vervangt Martian Mono, 2026-10-17) */
  --font-play: 'Argesta Display', Georgia, serif;     /* B: hoverwissel (cursief) */
  --font-hair: 'Argesta Hairline', Georgia, serif;    /* C: het &-teken (cijfers zijn sinds 2026-10-18 Rawest) */

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Raster: 96 px marge bij 1920 breed, 6 kolommen */
  --margin: clamp(24px, 5vw, 96px);
  --cross: 13px;   /* oneven: 1 px middenlijn + 2 armen van 6 px, zo zijn alle armen even lang */
  --arm: 6px;
  --logo-h: 44px;
  --nav-top: clamp(20px, 4.07vh, 44px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Geen zichtbare scrollbalk van de browser (scrollen blijft gewoon werken) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
/* Foto's: niet versleepbaar, niet selecteerbaar, geen bewaarmenu bij lang indrukken (iOS). Zie ook js/protect.js. */
img, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: uppercase;
}

:focus-visible { outline: 1px solid var(--yellow); outline-offset: 4px; }


/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 10; left: 0; right: 0; top: var(--nav-top);
  height: var(--logo-h); pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Verborgen bij naar beneden scrollen (js/nav.js) */
.nav.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 8px)); opacity: 0; }
.nav.is-hidden a { pointer-events: none; }
.nav__links {
  position: absolute; left: var(--margin); top: 50%; transform: translateY(-50%);
  display: flex; gap: 32px; pointer-events: auto;
}
/* Vaste breedte (gezet in js) + niet afbreken: het hover-teksteffect verschuift de buren niet */
.nav__links a { flex: none; white-space: nowrap; overflow: visible; }
/* Beeldmerk horizontaal gecentreerd op de rechterkolom van kruisjes */
.nav__logo {
  position: absolute; top: 0; left: calc(100% - var(--margin));
  margin-left: calc(var(--logo-h) / 1.612 / -2);
  pointer-events: auto;
}
.nav__logo img { height: var(--logo-h); width: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
}
.hero__media, .hero__scrim, .curtain, .grid { position: absolute; inset: 0; }

.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Foto zolang de video laadt; scherp (geen waas meer) */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero.has-video .hero__img { display: none; }

/* Donkerder maken: een vlak over het hele beeld + extra donker bovenaan voor het gele beeldmerk */
.hero__scrim {
  background:
    linear-gradient(rgba(17, 17, 17, .5), rgba(17, 17, 17, 0) 24%),
    rgba(17, 17, 17, .45);
}

.curtain { background: var(--black); display: none; }
.js:not(.intro-seen) .curtain { display: block; }

/* Kruisjes op de kolomlijnen van het 6-kolommenraster, 4 rijen (y 160/400/640/880 bij 1080) */
.x {
  position: absolute; width: var(--cross); height: var(--cross);
  /* Afgerond op hele pixels, anders vallen de 1 px-lijnen tussen twee pixels en ogen ze ongelijk */
  left: calc(var(--margin) + (100% - 2 * var(--margin)) * var(--c) / 6);
  left: round(nearest, calc(var(--margin) + (100% - 2 * var(--margin)) * var(--c) / 6), 1px);
  top: calc(14.815% + 22.222% * var(--r));
  top: round(nearest, calc(14.815% + 22.222% * var(--r)), 1px);
  margin: calc(var(--arm) * -1) 0 0 calc(var(--arm) * -1);
  opacity: var(--o, .9);
}
.x::before, .x::after { content: ""; position: absolute; background: var(--white); }
/* Na de intro: zachte fades in plaats van harde flikkering */
/* rotate: zeldzame draai van 180° (js/main.js). De curve zakt eerst onder 0 (y1 = -0.4): het kruisje gaat ±13° tegen de klok in
   om "energie te laden", versnelt dan door de draai en remt zacht af. Eén vloeiende beweging van 1 s. */
.hero.ambient .x { transition: opacity 400ms var(--ease-out), rotate 1000ms cubic-bezier(0.6, -0.4, 0.3, 1); }
.x::before { left: 0; right: 0; top: var(--arm); height: 1px; }
.x::after { top: 0; bottom: 0; left: var(--arm); width: 1px; }

/* Labels verticaal gecentreerd tussen de onderste 2 kruisjesrijen (y 760 bij 1080) */
.hero__meta { position: absolute; top: 70.37%; transform: translateY(-50%); }
.hero__meta--left { left: calc(var(--margin) - var(--arm)); }
.hero__meta--right { right: calc(var(--margin) - var(--arm)); text-align: right; }
.hero__timecode {
  position: absolute; right: calc(var(--margin) - var(--arm));
  bottom: var(--nav-top); font-variant-numeric: tabular-nums;
}

/* Mobiel (≤ 900 px): het menu is een vaste balk bovenaan, zonder achtergrond (doorzichtig); hij schuift niet weg
   bij scrollen (js/nav.js zet .is-hidden nog, maar dat heeft hier geen effect). --nav-h = hoogte van de balk. */
@media (max-width: 900px) {
  :root { --logo-h: 20px; --nav-h: calc(var(--logo-h) + 32px); }
  .nav { top: 0; height: var(--nav-h); background: none; pointer-events: none; }
  /* Voorbij de hero krijgt de balk de donkere kleur van de pagina (js/nav.js zet .is-solid), zodat de inhoud er niet door loopt */
  .nav { transition: background-color .3s var(--ease-out); }
  .nav.is-solid { background: #181818; }
  html.menu-open .nav.is-solid { background: none; }   /* open menu: de knop staat op het zwarte menuscherm */
  .nav.is-hidden { transform: none; opacity: 1; }
  .nav.is-hidden a { pointer-events: auto; }
  /* Kleiner beeldmerk, rechterkant op de marge: lijnt uit met de rechterrand van de foto's (zoals het menu links) */
  .nav__logo { top: 16px; left: auto; right: var(--margin); margin-left: 0; }
}

/* ---------- Mobiel: hamburgermenu (js/nav.js) ---------- */
.burger, .mmenu { display: none; }
@media (max-width: 900px) {
  .nav__links { display: none; }
  /* Knop: 2 dunne lijnen op de linkermarge, verticaal gelijk met het beeldmerk; open = kruisje */
  .burger {
    display: block; position: absolute; left: calc(var(--margin) - 10px); top: 6px; width: 44px; height: 40px;
    padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  }
  .burger span {
    position: absolute; left: 10px; width: 24px; height: 1.5px; background: var(--white);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), top 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .burger span:first-child { top: 16px; }
  .burger span:last-child { top: 23px; }
  .burger.open span:first-child { top: 19.5px; transform: rotate(45deg); }
  .burger.open span:last-child { top: 19.5px; transform: rotate(-45deg); }

  /* Menu: zwart scherm dat van boven naar beneden openklapt, met een gele lijn op de onderrand */
  .mmenu {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 9; padding: calc(var(--nav-h) + 40px) var(--margin) 32px;
    background: var(--black); color: var(--white);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s;
  }
  .mmenu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); }
  .mmenu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s; }
  .mmenu__list { margin: 0; padding: 0; list-style: none; }
  .mmenu__list li { border-bottom: 1px solid #2a2a2a; opacity: 0; transform: translateY(24px);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1); }
  /* Items komen na elkaar binnen: 24 px omhoog, 100 ms tussen de starts, nadat het scherm open is */
  .mmenu.open .mmenu__list li { opacity: 1; transform: none;
    transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1) calc(0.25s + var(--i) * 0.1s), transform 0.3s cubic-bezier(0, 0, 0.2, 1) calc(0.25s + var(--i) * 0.1s); }
  .mmenu__list a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; }
  .mmenu__num { font-size: 20px; color: #8A8A86; min-width: 2ch; }
  .mmenu__label { font-size: clamp(32px, 9vw, 48px); line-height: 1; }
  .mmenu__list a[aria-current="page"] .mmenu__label, .mmenu__list a:active .mmenu__label { color: var(--yellow); }
  .mmenu__foot { display: flex; justify-content: space-between; gap: 16px; }
  html.menu-open { overflow: hidden; }
}

/* Mobiel: om de andere kolom, kleiner logo */
@media (max-width: 640px) {
  .x--odd { display: none; }
  .nav__links { gap: 20px; }
}

/* ---------- Argesta-accenten (js/argesta.js) ---------- */
/* B: hoverwissel. De letters van een projectnaam wisselen één voor één (30 ms na elkaar) naar Argesta Display cursief. */
.ag-l.on { font-family: var(--font-play); font-style: italic; font-weight: 400; }
/* C: het &-teken in grote namen (bv. Dune & Moss) in Argesta Hairline cursief, iets groter dan de letters ernaast */
.ag-amp, .ag-l.on.ag-amp { font-family: var(--font-hair); font-style: italic; font-weight: 400; font-size: 1.2em; line-height: 0; }
/* Grote cijfers (casenummer, nummers in het mobiele menu, teller op de teampagina): in Rawest (2026-10-18; was Argesta Hairline) */
.ag-num { font-family: var(--font-sans); font-style: normal; font-weight: 400; text-transform: none; font-variant-numeric: lining-nums; }