/* Laura Cortese & Bert Ruymbeek – licht en warm, in de lijn van thisislauracortese.com:
   crème papier, een zacht verloop van perzik naar lichtgroen, diep marineblauw als inkt en het botergeel als accent.
   Koppen in een schreefletter in kapitalen (de ernst van andriesboone.com), labels en knoppen in Roboto Condensed, rechte knoppen. */

@font-face { font-family: "Gloock"; src: url(/fonts/gloock-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gloock"; src: url(/fonts/gloock-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin-wght.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin-ext-wght.woff2) format("woff2"); font-weight: 400 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Condensed"; src: url(/fonts/roboto-condensed-latin-wght.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(/fonts/roboto-condensed-latin-ext-wght.woff2) format("woff2"); font-weight: 500 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --inkt: #17253b;          /* het marineblauw van Laura's site en van de jeansjurk op de foto's */
  --inkt-zacht: #4a5568;
  --creme: #fffbfa;
  --boter: #fee9c3;         /* het warme podiumlicht */
  --perzik: #f9ddd3;
  --lime: #e3edc2;
  --koper: #b4532a;         /* accent voor links en kleine labels, uit het rode podiumlicht */
  --verloop: linear-gradient(160deg, var(--perzik) 0%, #f8ead8 50%, var(--lime) 100%);
  --lijn: rgb(23 37 59 / .16);
  --lijn-licht: rgb(255 251 250 / .2);
  --kopletter: "Gloock", Georgia, serif;
  --tekst: "Inter", system-ui, sans-serif;
  --smal: "Roboto Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--inkt); font: 400 1.0625rem/1.7 var(--tekst); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--koper); }
:focus-visible { outline: 3px solid var(--koper); outline-offset: 3px; }
p { margin: 0 0 1em; }
.wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.sr, .naar-inhoud:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.naar-inhoud:focus { position: fixed; top: 1rem; left: 1rem; z-index: 10; background: var(--inkt); color: var(--creme); padding: .7rem 1rem; }

h1, h2, h3 { font-family: var(--kopletter); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 6vw, 4.6rem); hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.label { display: block; font: 600 .8rem/1.3 var(--smal); letter-spacing: .2em; text-transform: uppercase; color: var(--koper); margin-bottom: .8rem; }
.klein { font-size: .9rem; color: var(--inkt-zacht); }

.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.knop { display: inline-block; font: 600 .95rem/1 var(--smal); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.6rem; border: 2px solid var(--inkt); color: var(--inkt); transition: background .15s, color .15s, border-color .15s; }
.knop.vol { background: var(--inkt); color: var(--creme); }
.knop.vol:hover { background: var(--koper); border-color: var(--koper); color: #fff; }
.knop.lijn:hover { background: var(--inkt); color: var(--creme); }

/* Kop en menu */
.kop { position: sticky; top: 0; z-index: 5; background: var(--creme); border-bottom: 1px solid var(--lijn); }
.kop .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem; }
.merk { font-family: var(--kopletter); font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.merk span, h1 span { color: var(--koper); }
.menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.8rem; list-style: none; margin: 0; padding: 0; }
.menu a { font: 500 .95rem/1.2 var(--smal); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-block; padding: .4rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current] { color: inherit; border-color: var(--koper); }
.menu .taal a { border: 1px solid var(--inkt); padding: .35rem .7rem; }
.menu .taal a:hover { background: var(--inkt); color: var(--creme); }
.menuknop { background: none; border: 2px solid var(--inkt); padding: .55rem .9rem; font: 600 .85rem/1 var(--smal); letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); cursor: pointer; }
@media (min-width: 56rem) { .menuknop { display: none; } }
@media (max-width: 55.99rem) {
  .js .menu-lijst { display: none; position: absolute; left: -1rem; right: -1rem; top: 100%; background: var(--creme); border-bottom: 1px solid var(--lijn); padding: .5rem 1rem 1rem; }
  .js .menu.open .menu-lijst { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--lijn); }
  .menu .taal { margin-top: 1rem; }
  .menu .taal a { display: inline-block; }
  html:not(.js) .kop .wrap { flex-wrap: wrap; padding-bottom: .5rem; }
  html:not(.js) .menu ul { flex-direction: row; gap: 0 1rem; }
}
@media (max-width: 24rem) { .merk { font-size: 1.1rem; } }

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.twee { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.twee.boven { align-items: start; }
@media (min-width: 52rem) { .twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.lees { max-width: 40rem; }

/* Home: Laura en Bert groot en onbijgesneden over de volle breedte, hun namen eronder.
   De foto loopt onderaan zacht over in het crème papier. */
/* Op een breed scherm gaat er hooguit een strookje boven en onder af: links en rechts blijft alles staan, de hoofden zitten hoog. */
.held > img { width: 100%; height: auto; max-height: 88vh; object-fit: cover; object-position: center 20%; background-position: center 20% !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.held .wrap { position: relative; margin-top: clamp(-7rem, -9vw, -2rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.held h1 { font-size: clamp(2.6rem, 8.5vw, 7.2rem); line-height: .95; letter-spacing: .02em; margin: 0 0 1rem; }
.held h1 span { display: inline-block; }
.ondertitel { font: 500 clamp(1rem, 2vw, 1.25rem)/1.4 var(--smal); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
@media (max-width: 47.99rem) { .held .wrap { margin-top: -.5rem; } }

/* Intro op het zachte verloop van Laura's site */
.intro { background: var(--verloop); }
.intro .twee { align-items: start; }
.intro .lees { font-size: 1.12rem; }

/* Wazige voorproef onder elke foto, tot de echte foto geladen is */
img[style*="background-image"] { background-size: cover; background-position: center; }

/* Laura en Bert: een fotoreeks over de volle breedte en twee kolommen.
   Elke foto krijgt een breedte naar zijn eigen verhouding (--r), zodat ze even hoog zijn en niets bijgesneden wordt.
   Op de telefoon veeg je opzij door de reeks. */
.muzikanten { padding-top: 0; }
.fotoreeks { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: flex-start; }
.fotoreeks li { flex: var(--r) 1 0; min-width: 0; }
.fotoreeks img { width: 100%; height: auto; }
@media (max-width: 47.99rem) {
  .fotoreeks { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 1rem; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .fotoreeks::-webkit-scrollbar { display: none; }
  .fotoreeks li { flex: none; height: 13rem; scroll-snap-align: start; }
  .fotoreeks img { height: 100%; width: auto; max-width: none; }
}
.fotoreeks-meer { margin-top: .8rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); font: 500 .9rem var(--smal); letter-spacing: .14em; text-transform: uppercase; text-align: right; }
.duo { display: grid; gap: 3rem clamp(2rem, 6vw, 5rem); }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; } }
.duo h2 { border-bottom: 2px solid var(--inkt); padding-bottom: .5rem; }

/* Concerten */
.donker { background: var(--inkt); color: var(--creme); }
.donker .label { color: var(--boter); }
.donker a:hover { color: var(--boter); }
.donker .knop { border-color: var(--creme); color: var(--creme); }
.donker .knop.lijn:hover { background: var(--creme); color: var(--inkt); }
.lijst { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 2px solid currentColor; }
.lijst li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .4rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.donker .lijst li { border-color: var(--lijn-licht); }
.lijst li > div:last-child:not(.plaats) { grid-column: 2; }
@media (min-width: 40rem) { .lijst li { grid-template-columns: 7rem minmax(0, 1fr) auto; } .lijst li > div:last-child:not(.plaats) { grid-column: auto; } }
.datum { font: 500 1rem/1.1 var(--smal); text-transform: uppercase; letter-spacing: .08em; }
.datum b { display: block; font: 400 1.9rem/1.05 var(--kopletter); letter-spacing: 0; }
.donker .datum b { color: var(--boter); }
.datum small { display: block; font-size: .78rem; opacity: .7; margin-top: .25rem; }
.plaats strong { display: block; font: 400 1.3rem/1.2 var(--kopletter); text-transform: uppercase; letter-spacing: .04em; }
.plaats span { opacity: .8; }
.lijst .knop { padding: .75rem 1.1rem; font-size: .82rem; }
.leeg { font-size: 1.15rem; }
.meer { margin-top: 2.5rem; }
.tussenkop { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.5rem; }
.inhoud > .tussenkop:first-child { margin-top: 0; }
.voorbij { border-bottom: 1px solid var(--lijn); }
.voorbij summary { cursor: pointer; padding: 1rem 0; font: 400 1.4rem/1 var(--kopletter); letter-spacing: .04em; }
.voorbij summary small { font: 500 .85rem var(--smal); color: var(--inkt-zacht); }
.voorbij .lijst { border-top: 1px solid var(--lijn); margin: 0 0 1.5rem; }
.voorbij .lijst li { padding: .7rem 0; }
.voorbij .datum b { font-size: 1.4rem; }
.voorbij .plaats strong { font-size: 1.1rem; }

/* Video */
.video { margin: 0; }
.speler { position: relative; aspect-ratio: 16 / 9; background: var(--inkt); overflow: hidden; }
.speler img, .speler iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.speel { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; }
.speel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem; background: var(--creme); box-shadow: 0 3px 14px rgb(0 0 0 / .35); transition: transform .15s; }
.speel::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.65rem 0 0 -.35rem; border-style: solid; border-width: .65rem 0 .65rem 1.1rem; border-color: transparent transparent transparent var(--inkt); }
.speel:hover::before { transform: scale(1.08); }
.video figcaption { margin-top: .7rem; }
.video figcaption strong { display: block; font: 600 1rem/1.3 var(--smal); text-transform: uppercase; letter-spacing: .1em; }
.video figcaption span { display: block; font-size: .95rem; color: var(--inkt-zacht); margin-top: .2rem; }
.videos { display: grid; gap: 2.5rem 2rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .videos { grid-template-columns: 1fr 1fr; } }

/* Foto's: in kolommen op hun eigen verhouding, zodat niemand wegvalt */
.fotos { list-style: none; margin: 1.5rem 0 2rem; padding: 0; columns: 1; column-gap: 1.2rem; }
@media (min-width: 36rem) { .fotos { columns: 2; } }
@media (min-width: 60rem) { .fotos { columns: 3; } }
.fotos li { break-inside: avoid; margin-bottom: 1.2rem; }
.fotos figure { margin: 0; }
.fotos figcaption { font: 500 .8rem var(--smal); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); margin-top: .4rem; }

/* Paginakop en inhoud */
.paginakop { background: var(--verloop); padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.paginakop h1 { margin: 0; }
.paginakop p { font-size: 1.15rem; margin: 1rem 0 0; max-width: 52ch; }
.inhoud { padding-bottom: clamp(3rem, 8vw, 6rem); }
.inhoud figure { margin: 0; }
.groot { font: 400 clamp(1.3rem, 3vw, 1.9rem)/1.3 var(--kopletter); overflow-wrap: anywhere; }

/* Downloads */
.downloads { list-style: none; margin: 1rem 0 1.5rem; padding: 0; border-top: 2px solid var(--inkt); }
.downloads li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--lijn); }
.downloads strong { display: block; font: 600 1.05rem/1.3 var(--smal); text-transform: uppercase; letter-spacing: .1em; }
.downloads span:not(.sr) { color: var(--inkt-zacht); font-size: .95rem; }
.downloads .knop { padding: .8rem 1.2rem; font-size: .85rem; }

/* Boekingen: witte band onderaan elke pagina */
.boekingsband { background: #fff; padding-block: clamp(2.2rem, 5vw, 3.2rem); border-top: 1px solid var(--lijn); }
.boekingsband h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.boekers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.8rem 3rem; }
@media (min-width: 46rem) { .boekers { grid-template-columns: 1fr 1fr; } }
.boekers li { display: flex; flex-direction: column; gap: .15rem; }
.boekers .label { margin-bottom: .3rem; }
.boekers strong { font: 400 1.25rem/1.3 var(--kopletter); text-transform: uppercase; letter-spacing: .04em; }
.boekers a { overflow-wrap: anywhere; }
.inhoud .boekers { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--inkt); grid-template-columns: 1fr; }

/* Voettekst */
.voet { background: var(--inkt); color: rgb(255 251 250 / .78); padding: 3.5rem 0 1.5rem; font-size: .95rem; }
.voet .wrap { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .voet > .wrap:first-child { grid-template-columns: 1.3fr 1fr 1fr; } }
.voet .merk { color: var(--creme); display: inline-block; margin-bottom: .6rem; white-space: normal; }
.voet .merk span { color: var(--boter); }
.voet h2 { font: 600 .8rem/1.3 var(--smal); letter-spacing: .2em; color: var(--boter); }
.voet a { color: var(--creme); }
.voet a:hover { color: var(--boter); }
.voet .klein { margin-top: 2rem; color: inherit; opacity: .7; }

/* Foto's zijn klikbaar: ze openen groot in de fotoviewer */
a.vergroot { display: block; cursor: zoom-in; }
a.vergroot img { transition: opacity .15s; }
a.vergroot:hover img { opacity: .88; }

/* Fotoviewer: de hele reeks naast elkaar, één foto per scherm, scrollen of vegen naar de volgende */
html.viewer-open { overflow: hidden; }
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(14 22 36 / .97); color: var(--creme); }
.viewer::backdrop { background: rgb(14 22 36 / .9); }
.viewer-baan { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.viewer-baan::-webkit-scrollbar { display: none; }
.viewer-baan li { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 3.5rem 1rem 2.5rem; }
.viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.viewer img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; background-size: cover; }
.viewer figcaption { margin-top: .8rem; max-width: 60ch; text-align: center; font-size: .9rem; color: rgb(255 251 250 / .8); }
.viewer-teller { position: absolute; top: 1rem; left: 1rem; margin: 0; font: 500 .9rem var(--smal); letter-spacing: .14em; }
.viewer-knop, .viewer-sluit { position: absolute; width: 3rem; height: 3rem; border: 1px solid rgb(255 251 250 / .5); background: rgb(14 22 36 / .6); color: var(--creme); cursor: pointer; }
.viewer-knop:hover, .viewer-sluit:hover { background: var(--creme); color: var(--inkt); }
.viewer-knop { top: 50%; margin-top: -1.5rem; }
.vorige { left: 1rem; } .volgende { right: 1rem; }
.viewer-sluit { top: .6rem; right: 1rem; }
.viewer-knop::before, .viewer-sluit::before { font: 400 1.6rem/1 var(--tekst); }
.vorige::before { content: "‹"; } .volgende::before { content: "›"; } .viewer-sluit::before { content: "×"; }
@media (max-width: 47.99rem) { .viewer-knop { top: auto; bottom: .8rem; margin: 0; } .viewer-baan li { padding-bottom: 4.5rem; } .viewer img { max-height: calc(100dvh - 11rem); } }