/* ============================================================
   C&B Ventures - vormgeving
   Wit en rustig. Bovenin de naam, dan één zin, daaronder de
   projecten, twee per rij. Geen kaders, geen schaduwen: alleen
   ruimte, een haarlijn en de foto's.
   De inhoud groeit mee met het scherm tot 1680 px breed en staat
   daarboven in het midden. Smaller dan 880 px (tablet, telefoon,
   smal venster) staan de projecten onder elkaar, over de hele breedte.
   Kleuren en maten staan hieronder bij elkaar.
   ============================================================ */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/jetbrains-mono-normal.woff2') format('woff2'); }

:root {
  --paper: #fcfbf9;                     /* de achtergrond: wit met een heel klein beetje warmte */
  --ink: #1b2130;                       /* tekst */
  --ink-soft: #7a7e89;                  /* zachte tekst (nummers, plaats, m², regel onderin) */
  --hair: rgba(27, 33, 48, .12);        /* de dunne lijn */
  --mark-line: rgba(27, 33, 48, .3);    /* het kadertje om de naam: het laatste getal is hoe donker */
  --frame: #f2f1ed;                     /* de kleur achter een foto zolang hij nog laadt */
  --sold: rgba(10, 11, 14, .36);        /* het "Verkocht"-vlakje: het laatste getal is hoe donker (0 = onzichtbaar, 1 = zwart) */

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --max: 1680px;                        /* hoe breed de inhoud hooguit wordt (daarboven: in het midden) */
  --gutter: clamp(20px, 4vw, 72px);     /* ruimte langs de zijkanten */
  --gap: clamp(20px, 3vw, 48px);        /* ruimte tussen twee foto's naast elkaar */
  --row-gap: clamp(44px, 6vw, 96px);    /* ruimte tussen de rijen */
  --edge: clamp(22px, 4.2vh, 40px);     /* afstand van de naam tot de bovenrand */
  --foot: clamp(8px, 1.6vh, 16px);      /* afstand van de regel tot de onderrand: zelfde hoogte als hinzegroup.com */

  --ease: cubic-bezier(.16, .84, .24, 1);
  --zoom: cubic-bezier(.22, .61, .36, 1); /* inzoomen bij aanwijzen: begint meteen, komt rustig tot stilstand */
  --settle: cubic-bezier(.25, .55, .25, 1); /* uitzoomen bij binnenkomst: gelijkmatig, zacht tot stilstand */
}

*, *::before, *::after { box-sizing: border-box; }
/* de browser past de scrollpositie niet zelf aan bij groter/kleiner maken: dat doet js/site.js (zie daar) */
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p, figure, ol { margin: 0; padding: 0; }
ol { list-style: none; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.arrow { display: inline-block; transition: transform .35s var(--ease); }

/* ---------- het scherm: boven de naam, dan de inhoud, onderin de regel ---------- */
.page {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
}
/* naam, kop en projecten staan allemaal in dezelfde breedte */
.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---------- bovenin ---------- */
.top { display: flex; align-items: baseline; padding-top: var(--edge); }
/* de naam in een dun kadertje. Rechts .32em minder ruimte: de letterafstand zet al lucht achter de laatste S */
.mark {
  display: inline-block;
  padding: 9px calc(13px - .32em) 8px 13px;
  border: 1px solid var(--mark-line);
  font-size: 13px; font-weight: 600; font-stretch: 80%; line-height: 1;
  letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .3s;
}
.mark:hover { border-color: rgba(27, 33, 48, .55); }
/* C & B dichter op elkaar dan de rest (een klein beetje lucht rond de &) */
.mark__cb { letter-spacing: .09em; }
.mark__amp { font-weight: 300; }

/* ---------- het midden: kop + projecten ---------- */
/* kop, witruimte en tekst schalen vloeiend mee met het scherm: geen sprongen bij het omslagpunt */
.main { padding: clamp(48px, 8vh, 88px) 0 clamp(64px, 11vh, 128px); }

.intro { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); }
.lead {
  font-size: clamp(28px, 1.9vw + 21px, 52px); font-weight: 300; line-height: 1.08; letter-spacing: -.018em;
}
.sub { font-size: clamp(15px, .25vw + 13px, 17px); color: var(--ink-soft); max-width: 62ch; }

.work { margin-top: clamp(40px, 6.5vh, 76px); }
/* "Eerdere projecten" met een haarlijn die doorloopt tot de rechterkant */
.label {
  display: flex; align-items: center; gap: 18px; margin-bottom: clamp(14px, 2.2vh, 24px);
  font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.label::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* twee precies even brede kolommen, hoe lang het onderschrift ook is */
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row-gap) var(--gap); }

.project__photo {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--frame);
}
.project__photo picture { display: block; width: 100%; height: 100%; }
/* Past een foto niet precies in 3:2, dan wordt hij vanuit het midden bijgesneden. Een ander middelpunt?
   Zet bij die foto in index.html bijv. style="--focus: 40% 50%" (eerste getal links-rechts, tweede boven-onder). */
.project__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%);
  transition: transform 2s var(--zoom);
}

/* "Verkocht": een doorzichtig donker vlakje linksboven op de foto, altijd zichtbaar */
.project__status {
  position: absolute; z-index: 1; left: 14px; top: 14px;
  padding: 9px calc(13px - .3em) 9px 13px;
  font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: .3em; text-transform: uppercase;
  color: #fff; background: var(--sold);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}

/* onderschrift op één regel:
   04  SAN JOSÉ, Ibiza                455 m²
   Past het niet, dan loopt de plaats door op de volgende regel. */
.project__caption {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px 14px;
  margin-top: 16px;
}
.project__no { grid-area: 1 / 1; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); }
.project__title { grid-area: 1 / 2; line-height: 1.5; }
.project__name {
  font-size: 12.5px; font-weight: 600; font-stretch: 80%;
  letter-spacing: .26em; text-transform: uppercase;
}
/* de komma direct achter de naam (zonder de extra letterafstand), in de letter van de plaats */
.project__name::after {
  content: ","; margin-left: -.25em;
  font-size: 1.04em; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--ink-soft);
}
.project__place { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.project__size {
  grid-area: 1 / 3; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); white-space: nowrap;
}
/* de 2 van m²: klein, hoog en tegen de m aan */
.project__size sup { font-size: .72em; line-height: 0; vertical-align: .55em; margin-left: .06em; letter-spacing: 0; }
/* heel smalle kolom (kleine telefoon, of telefoon dwars): m² naar een eigen regel eronder,
   zodat een lange straatnaam ruimte heeft. (Bewust geen "container query": Safari rekent die
   na het groter maken van het venster soms niet opnieuw uit.) */
@media (max-width: 379px), (min-width: 600px) and (max-width: 769px) and (max-height: 500px) and (orientation: landscape) {
  .project__size { grid-area: 2 / 2; }
}

/* aanwijzen: de foto zoomt rustig een klein beetje in */
@media (hover: hover) {
  .project:hover .project__photo img { transform: scale(1.03); }
  /* zodra de muis bij de projecten komt staan de foto's klaar om te zoomen (geen haperinkje bij de eerste keer);
     niet altijd, want dat maakt groter/kleiner maken van het venster zwaarder */
  .work:hover .project__photo img { will-change: transform; }
}

/* ---------- regel onderin: zelfde letter en hoogte als hinzegroup.com en brightbooks.nl ---------- */
.foot { display: flex; justify-content: center; padding-bottom: var(--foot); }
.foot a {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6em;
  padding: 4px 8px; line-height: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; word-spacing: -.15em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .3s;
}
.foot__parent { border-bottom: 1px solid transparent; transition: border-color .3s; }
.foot a:hover { color: var(--ink); }
.foot a:hover .foot__parent { border-color: currentColor; }

/* ---------- 404: één melding ---------- */
.main--lost { display: flex; align-items: center; }
.lost { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.lost__link { font-size: 14px; border-bottom: 1px solid rgba(27, 33, 48, .3); padding-bottom: 3px; }
.lost__link:hover .arrow { transform: translateX(4px); }

/* ---------- binnenkomst ----------
   Elke rij komt pas als je hem in beeld scrolt (de eerste rij meteen). De foto's van een rij
   wachten tot ze allebei geladen én klaar voor beeld zijn (js/site.js zet dan "is-in") en komen
   dan precies tegelijk tevoorschijn: in ruim een seconde zichtbaar, terwijl ze in 2,6 seconden
   rustig uitzoomen tot hun plek. Daarna de tekst eronder en "Verkocht".
   Met "scale" en niet "transform": zo botst het nooit met het inzoomen bij aanwijzen. */
.js .project__photo img, .js .project__status, .js .project__caption { opacity: 0; }
/* noodplan (zie <head>): lukt het script niet, dan gewoon laten zien */
.js.is-ready .project__photo img, .js.is-ready .project__status, .js.is-ready .project__caption { opacity: 1; }
.js .project.is-in .project__photo img { opacity: 1; animation: fade 1.3s ease-out both, settle 2.6s var(--settle) both; }
.js .project.is-in .project__caption { opacity: 1; animation: fade 1.2s ease .7s both; }
.js .project.is-in .project__status { opacity: 1; animation: fade 1.2s ease 1.1s both; }
.js .intro { animation: rise 1.2s var(--ease) .1s both; }
.js .label, .js .top, .js .foot { animation: fade 1.2s ease .3s both; }
/* na het wisselen van formaat (venster smaller/breder): meteen laten staan, zonder animatie (zie js/site.js) */
.js .project.is-instant .project__photo img, .js .project.is-instant .project__caption, .js .project.is-instant .project__status { animation: none; }
@keyframes settle { from { scale: 1.07; } }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- smaller dan 880 px: de projecten onder elkaar ----------
   De foto's groeien mee met het scherm tot precies het omslagpunt (geen vaste kolombreedte),
   zodat er bij groter of kleiner maken nooit een stuk is waarin niets verandert. */
@media (max-width: 879px) {
  .projects { grid-template-columns: minmax(0, 1fr); }
}
/* telefoon dwars: toch twee naast elkaar, anders is elke foto hoger dan het scherm */
@media (min-width: 600px) and (max-width: 879px) and (max-height: 500px) and (orientation: landscape) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* telefoon */
@media (max-width: 599px) {
  .project__status { left: 10px; top: 10px; font-size: 10px; padding: 8px calc(11px - .3em) 8px 11px; }
  .foot { padding: 0 20px 26px; }
  .foot a { flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}