/* Mater Alcedo Backstage: donker en sjiek. Lettertypen lokaal (SIL Open Font License). */
@font-face { font-family: "Cormorant Garamond"; src: url("lettertypen/cormorant.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("lettertypen/cormorant-cursief.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("lettertypen/jost.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; }

:root {
  --petrol: #035267; --brons: #b8a076; --creme: #f6f1e8;
  --nacht: #061a20; --nacht-2: #0a252d; --zacht: #c2d3d8;
  --lijn: rgba(184,160,118,.5);
  --serif: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nacht); color: var(--zacht); font-family: Jost, system-ui, sans-serif;
  font-weight: 300; line-height: 1.6; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--creme); margin: 0; line-height: 1.1; }
em { font-family: var(--serif); font-style: italic; color: var(--brons); }

/* Menu */
.menu { display: flex; justify-content: space-between; align-items: center; padding: 22px 6vw;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }
.menu img { height: 92px; display: block; }
.menu .links { display: flex; gap: 36px; }
.menu .links a { text-decoration: none; }
.menu .links a:hover { color: var(--brons); }

/* Kop */
.held { text-align: center; padding: 8vh 6vw 11vh; border-bottom: 1px solid var(--brons);
  background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(184,160,118,.16), transparent 70%); }
.klein { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--brons); }
.held h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: 1; margin: .35em 0 .3em; }
.held p { max-width: 34ch; margin: 0 auto; font-size: 1.15rem; }
.lijn { width: 1px; height: 70px; background: var(--brons); margin: 46px auto 0; }

/* Blokken */
.blok { padding: 12vh 6vw; }
.blok.anders { background: var(--nacht-2); }
.binnen { max-width: 1100px; margin: 0 auto; }
.smal { max-width: 720px; margin: 0 auto; }
.blok h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); text-align: center; margin: .3em 0 .8em; }
.blok .klein { text-align: center; }

/* Diensten */
.diensten { display: grid; grid-template-columns: repeat(3, 1fr); }
.dienst { padding: 34px 28px; border-left: 1px solid var(--lijn); }
.dienst:nth-child(3n+1) { border-left: 0; }
.dienst:nth-child(n+4) { border-top: 1px solid var(--lijn); }
.dienst .nr { font-family: var(--serif); font-style: italic; color: var(--brons); font-size: 1.4rem; }
.dienst h3 { font-size: 1.9rem; margin: .2em 0 .3em; }
.dienst p { margin: 0 0 .6em; }
.dienst { display: flex; flex-direction: column; }
.dienst .meer { margin-top: auto; padding-top: .8em; align-self: flex-start; text-decoration: none; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brons); }
.dienst .meer::after { content: " \2192"; }
.dienst .meer:hover { color: var(--creme); }

/* Projecten */
.project { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 30px 0; border-top: 1px solid var(--lijn); }
.project:last-child { border-bottom: 1px solid var(--lijn); }
.project h3 { font-size: 1.9rem; }
.project .wanneer { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brons); margin-top: .4em; }
.project p { margin: 0 0 .6em; }

/* Werkwijze */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); }
.stap { padding: 10px 26px; border-left: 1px solid var(--lijn); text-align: center; }
.stap:first-child { border-left: 0; }
.stap em { font-size: 1.4rem; }
.stap h3 { font-size: 1.6rem; margin: .2em 0 .4em; }
.stap p { margin: 0; font-size: .97rem; }

/* Vragen */
details { border-top: 1px solid var(--lijn); padding: 20px 0; }
details:last-of-type { border-bottom: 1px solid var(--lijn); }
summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.6rem; color: var(--creme);
  display: flex; justify-content: space-between; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brons); }
details[open] summary::after { content: "\2212"; }
details p { margin: .8em 0 0; }

/* Over */
.over-raster { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; max-width: 1100px; }
.over-foto { margin: 0; }
.over-foto figcaption { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .7em; opacity: .7; }
.over-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1px solid var(--brons); filter: saturate(.85) contrast(1.03); }
.over .klein, .over h2 { text-align: left; }
.over h2 { margin-bottom: .5em; }
.over p { font-size: 1.1rem; }
.over .ijsvogel { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--creme); }

/* Contact */
.contact { text-align: center; }
.contact p { margin: 0 auto 2em; max-width: 40ch; }
.knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.knop { display: inline-block; padding: 16px 34px; border: 1px solid var(--brons); text-decoration: none;
  letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; color: var(--brons); transition: .3s; }
.knop:hover, .knop.vol { background: var(--brons); color: var(--nacht); }
.knop.vol:hover { background: transparent; color: var(--brons); }

/* Voet */
.voet { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 28px 6vw;
  background: #04141a; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }

/* Nog in te vullen door Tamara: valt op, zodat niets ongemerkt online gaat */
.open { background: #fff3c4; color: #5a4300; padding: 0 .3em; border-radius: 3px; font-family: Jost, sans-serif;
  font-style: normal; font-size: .9rem; }

@media (max-width: 860px) {
  .menu .links { display: none; }
  .menu img { height: 70px; }
  .diensten, .stappen { grid-template-columns: 1fr; }
  .dienst, .stap { border-left: 0; border-top: 1px solid var(--lijn); }
  .dienst:first-child, .stap:first-child { border-top: 0; }
  .stap { padding: 24px 0; }
  .project { grid-template-columns: 1fr; gap: 8px; }
  .over-raster { grid-template-columns: 1fr; gap: 32px; }
}

/* Pagina per dienst */
.dienst-held h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
.dienst-held p { max-width: 46ch; }
.dienst-held .klein a { text-decoration: none; }
.onderdelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.onderdeel { padding: 10px 30px 20px; border-left: 1px solid var(--lijn); }
.onderdeel:first-child { border-left: 0; }
.onderdeel h3 { font-style: italic; color: var(--brons); font-size: 1.9rem; margin-bottom: .4em; }
.onderdeel p { margin: 0; }
.slotzin { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--creme);
  text-align: center; margin: 2.2em auto 0; max-width: 30ch; line-height: 1.3; }
.contact .terug { margin-top: 2em; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; }
.terug a { text-decoration: none; color: var(--brons); }
.terug a::before { content: "\2190  "; }
@media (max-width: 860px) {
  .onderdeel { border-left: 0; border-top: 1px solid var(--lijn); padding: 22px 0; }
  .onderdeel:first-child { border-top: 0; }
}

/* Foto's bij de diensten (Unsplash, naam van de fotograaf eronder op de dienstpagina) */
.kaart-foto { display: block; margin: 0 0 18px; overflow: hidden; border: 1px solid rgba(184,160,118,.35); }
.kaart-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; filter: saturate(.8) brightness(.9);
  transition: transform .5s, filter .5s; }
.kaart-foto:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.dienst-foto { margin: 0 auto; max-width: 1100px; padding: 0 6vw; position: relative; top: -1px; }
.dienst-foto img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; border: 1px solid rgba(184,160,118,.35);
  filter: saturate(.85) brightness(.92); margin-top: 8vh; }
.dienst-foto figcaption { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-top: .7em; text-align: right; }
.dienst-foto figcaption a { text-decoration: none; }

/* Projecten: noemer en rollen */
.project .noemer { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brons); margin: .3em 0 .6em; }
.rollen { list-style: none; padding: 0; margin: .9em 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rollen li { border: 1px solid var(--lijn); padding: 4px 12px; font-size: .8rem; color: var(--creme); }

.project-fotos { grid-column: 1 / -1; display: grid; grid-template-columns: 191px 1fr 1.25fr; gap: 14px; margin-top: 10px; }
.project-fotos img { width: 100%; height: 340px; object-fit: cover; display: block; border: 1px solid rgba(184,160,118,.35); }
.project-fotos .bijschrift { grid-column: 1 / -1; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0; }
@media (max-width: 860px) { .project-fotos { grid-template-columns: 1fr; } .project-fotos img { height: 260px; } }

/* Voorbeeldfilmpje op een dienstpagina */
.voorbeeld-raster { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 56px; align-items: center; max-width: 900px; }
.voorbeeld video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border: 1px solid rgba(184,160,118,.35); background: #000; }
.voorbeeld h2, .voorbeeld .klein { text-align: left; }
.voorbeeld h2 { margin-bottom: .5em; }
@media (max-width: 760px) { .voorbeeld-raster { grid-template-columns: 1fr; gap: 28px; } .voorbeeld video { max-width: 340px; margin: 0 auto; } }

/* Dienstpagina met de foto achter de titel */
.dienst-held.met-foto { position: relative; padding-top: 16vh; padding-bottom: 14vh;
  background: linear-gradient(180deg, rgba(6,26,32,.55) 0%, rgba(6,26,32,.72) 60%, var(--nacht) 100%), var(--foto) center / cover no-repeat; }
.dienst-held.met-foto h1, .dienst-held.met-foto p { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.foto-credit { position: absolute; right: 6vw; bottom: 14px; margin: 0; font-size: .68rem !important; letter-spacing: .12em;
  text-transform: uppercase; opacity: .6; text-shadow: none !important; }
.foto-credit a { text-decoration: none; }
.project-fotos video { width: 100%; height: 340px; object-fit: cover; display: block; border: 1px solid rgba(184,160,118,.35); background: #000; }
@media (max-width: 860px) { .project-fotos video { height: auto; aspect-ratio: 9 / 16; max-width: 300px; } }

/* Foto achter de titel per dienstpagina (als class, zodat er geen inline style nodig is) */
.foto-tourmanager { --foto: url('beeld/diensten/tourmanager.jpg'); }
.foto-personal-assistant { --foto: url('beeld/diensten/personal-assistant.jpg'); }
.foto-driver { --foto: url('beeld/diensten/driver.jpg'); }
.foto-video-website-socials { --foto: url('beeld/diensten/video-website-socials.jpg'); }
.foto-slimmer-werken-met-ai { --foto: url('beeld/diensten/slimmer-werken-met-ai.jpg'); }
.foto-artist-management { --foto: url('beeld/diensten/artist-management.jpg'); }