/* Lettertypen, zelf gehost. Geen verzoek naar een derde partij. */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(/assets/fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(/assets/fonts/lora-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(/assets/fonts/lora-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(/assets/fonts/yellowtail-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Osteria Pomodoro, Lent. Stijl voor de hele site. */

:root{
	--inkt:#1c100d;
	--inkt-zacht:#3a2620;
	--papier:#f7efe1;
	--papier-warm:#f1e5d2;
	--room:#fffaf1;
	--tomaat:#c0392b;
	--tomaat-diep:#8d2118;
	--tomaat-licht:#e0604f;
	--olijf:#6f7d55;
	--goud:#c9a253;
	--lijn:rgba(28,16,13,.14);
	--lijn-licht:rgba(247,239,225,.22);
	--breed:1140px;
	--smal:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	background:var(--papier);
	color:var(--inkt);
	font-family:"Lora",Georgia,"Times New Roman",serif;
	font-size:1.0625rem;
	line-height:1.75;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4,.kop{
	font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
	font-weight:800;
	letter-spacing:.005em;
	line-height:1.08;
	margin:0 0 .6em;
	text-wrap:balance;
}
h1{font-size:clamp(2.3rem,6.2vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:.06em;text-transform:uppercase}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.kicker{
	font-family:"Archivo",Arial,sans-serif;
	font-weight:600;
	font-size:.72rem;
	letter-spacing:.34em;
	text-transform:uppercase;
	color:var(--tomaat);
	margin:0 0 1.1rem;
}
.op-donker .kicker{color:var(--goud)}

.script{font-family:"Yellowtail",cursive;font-weight:400;letter-spacing:0}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 1.5rem}
.smal{max-width:var(--smal);margin-left:auto;margin-right:auto}
section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.op-donker{background:var(--inkt);color:var(--papier)}
.op-rood{background:var(--tomaat-diep);color:var(--room)}
.op-warm{background:var(--papier-warm)}

/* Merknaam */
.merk{display:inline-block;text-align:center;line-height:1;text-decoration:none}
.merk .osteria{
	display:block;
	font-family:"Yellowtail",cursive;
	font-size:.95em;
	transform:rotate(-4deg) translateX(-.9em);
	margin-bottom:-.28em;
	color:var(--tomaat);
}
.merk .pomodoro{
	display:block;
	font-family:"Archivo",Arial,sans-serif;
	font-weight:800;
	font-size:1.55em;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.op-donker .merk .osteria,.op-rood .merk .osteria,.hero .merk .osteria{color:var(--room)}

/* Kopbalk */
.balk{
	position:sticky;top:0;z-index:50;
	background:rgba(28,16,13,.94);
	backdrop-filter:saturate(140%) blur(8px);
	color:var(--papier);
	border-bottom:1px solid var(--lijn-licht);
}
.balk .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.balk .merk,.voet .merk{font-size:.8rem;display:flex;align-items:baseline;gap:.45em;text-align:left}
.balk .merk .osteria,.voet .merk .osteria{
	display:inline;font-size:1.5em;transform:none;margin:0;
	color:var(--tomaat-licht);
}
.balk .merk .pomodoro,.voet .merk .pomodoro{display:inline;font-size:1.15em}
.voet .merk{font-size:1rem;margin-bottom:1.1rem}
.balk nav{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.7rem);flex-wrap:wrap;justify-content:flex-end}
.balk nav .menu{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.7rem);flex-wrap:wrap;justify-content:flex-end}
.balk nav a{
	font-family:"Archivo",Arial,sans-serif;
	font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	text-decoration:none;opacity:.86;
}
.balk nav a:not(.knop):hover,.balk nav a:not(.knop)[aria-current]{opacity:1;color:var(--tomaat-licht)}
.balk .knop{opacity:1}

/* Knoppen */
.knop{
	display:inline-block;
	font-family:"Archivo",Arial,sans-serif;
	font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	padding:.85em 1.6em;
	background:var(--tomaat);color:var(--room);
	text-decoration:none;border:1px solid var(--tomaat);
	transition:background .18s ease,color .18s ease;
}
.knop:hover{background:var(--tomaat-diep);border-color:var(--tomaat-diep)}
.knop.leeg{background:transparent;color:inherit;border-color:currentColor}
.knop.leeg:hover,.knop.leeg:focus-visible{background:var(--tomaat);border-color:var(--tomaat);color:var(--room)}
.op-donker .knop.leeg:hover,.op-rood .knop.leeg:hover,.hero .knop.leeg:hover,
.op-donker .knop.leeg:focus-visible,.op-rood .knop.leeg:focus-visible,.hero .knop.leeg:focus-visible{background:var(--room);border-color:var(--room);color:var(--inkt)}
.knop:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.knoppen{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* Hero met waterverf */
.hero{
	position:relative;
	color:var(--room);
	background:
		radial-gradient(120% 90% at 12% 8%,rgba(224,96,79,.85) 0%,rgba(224,96,79,0) 55%),
		radial-gradient(90% 80% at 88% 18%,rgba(160,32,22,.9) 0%,rgba(160,32,22,0) 60%),
		radial-gradient(140% 120% at 70% 100%,rgba(74,12,8,.95) 0%,rgba(74,12,8,0) 62%),
		linear-gradient(150deg,#b9302a 0%,#9b2119 45%,#6d1610 100%);
	overflow:hidden;
	isolation:isolate;
}
.hero::after{
	content:"";position:absolute;inset:0;z-index:-1;
	background:
		radial-gradient(35% 30% at 22% 72%,rgba(255,255,255,.10),transparent 70%),
		radial-gradient(30% 26% at 78% 40%,rgba(0,0,0,.22),transparent 70%);
	mix-blend-mode:overlay;
}
.hero .wrap{padding-top:clamp(4rem,10vw,7.5rem);padding-bottom:clamp(4rem,10vw,7.5rem)}
.hero .merk{font-size:clamp(1.7rem,5.4vw,3.1rem);margin-bottom:1.8rem}
.hero h1{font-size:clamp(2rem,5.2vw,3.5rem);max-width:16ch}
.hero .inleiding{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:52ch;color:rgba(255,250,241,.92)}
.hero .kicker{color:rgba(255,250,241,.7)}

/* Feitenbalk */
.feiten{
	background:var(--inkt);color:var(--papier);
	font-family:"Archivo",Arial,sans-serif;
	font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.feiten .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;padding-top:1rem;padding-bottom:1rem}
.feiten span{display:inline-flex;align-items:center;gap:.5rem}
.feiten b{color:var(--tomaat-licht);font-weight:700}

/* Tekstblokken */
.lead{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.65}
.groot-citaat{
	font-size:clamp(1.4rem,2.8vw,2rem);
	line-height:1.4;font-style:italic;
	max-width:22ch;color:var(--tomaat);
	margin:0;
}
.op-donker .groot-citaat,.op-rood .groot-citaat{color:var(--goud)}

.duo{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:820px){
	.duo{grid-template-columns:1fr 1fr}
	.duo.smaller-beeld{grid-template-columns:1.15fr .85fr}
	.duo.gespiegeld>*:first-child{order:2}
}
.beeld{position:relative}
.beeld img{width:100%;box-shadow:0 26px 60px rgba(28,16,13,.22)}
.beeld figcaption{
	font-family:"Archivo",Arial,sans-serif;
	font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
	margin-top:.9rem;opacity:.6;
}

/* Stappen */
.stappen{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:stap;display:grid;gap:1.6rem}
@media(min-width:760px){.stappen{grid-template-columns:repeat(2,1fr);gap:2rem 2.6rem}}
.stappen li{position:relative;padding-left:3.4rem;counter-increment:stap}
.stappen li::before{
	content:counter(stap);
	position:absolute;left:0;top:-.1em;
	font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:1.5rem;
	color:var(--tomaat);
	width:2.4rem;height:2.4rem;border:1px solid var(--tomaat);border-radius:50%;
	display:flex;align-items:center;justify-content:center;
}
.op-donker .stappen li::before{color:var(--goud);border-color:var(--goud)}
.stappen h3{margin-bottom:.35em}

/* Prijskaarten */
.prijzen{display:grid;gap:1.4rem;margin-top:2.6rem;grid-template-columns:1fr}
@media(min-width:760px){.prijzen{grid-template-columns:repeat(3,1fr)}}
.prijs{
	background:var(--room);border:1px solid var(--lijn);
	padding:2rem 1.7rem;
}
.op-donker .prijs{background:rgba(247,239,225,.05);border-color:var(--lijn-licht)}
.prijs .bedrag{
	font-family:"Archivo",Arial,sans-serif;font-weight:800;
	font-size:2.1rem;line-height:1;color:var(--tomaat);margin:.3rem 0 .7rem;
}
.op-donker .prijs .bedrag{color:var(--goud)}
.prijs h3{font-size:.8rem;letter-spacing:.2em;margin-bottom:.2em}
.prijs p{font-size:.95rem;margin-bottom:0}
.naschrift{margin-top:1.8rem;font-size:.95rem;opacity:.8}

/* Kaartcategorieën */
.gerechten{display:grid;gap:2.2rem 3rem;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:700px){.gerechten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gerechten.vier{grid-template-columns:repeat(4,1fr)}}
.groep h3{
	font-family:"Yellowtail",cursive;font-weight:400;
	font-size:1.7rem;text-transform:none;letter-spacing:0;
	color:var(--tomaat);margin-bottom:.9rem;
}
.op-donker .groep h3{color:var(--goud)}
.groep ul{list-style:none;margin:0;padding:0}
.groep li{padding:.55rem 0;border-bottom:1px solid var(--lijn)}
.op-donker .groep li{border-color:var(--lijn-licht)}
.groep li:last-child{border-bottom:0}
.groep .naam{
	display:block;
	font-family:"Archivo",Arial,sans-serif;font-weight:700;
	font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
}
.groep .uitleg{display:block;font-size:.94rem;opacity:.78;line-height:1.5}
.veg{color:var(--olijf);font-weight:700;margin-right:.35em}
.op-donker .veg{color:#9db27c}

/* Opsommingen */
.punten{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem}
.punten li{position:relative;padding-left:1.7rem}
.punten li::before{
	content:"";position:absolute;left:0;top:.62em;
	width:.5rem;height:.5rem;border-radius:50%;background:var(--tomaat);
}
.op-donker .punten li::before{background:var(--goud)}

/* Verhaal */
.hoofdstuk{max-width:var(--smal);margin:0 auto}
.hoofdstuk+.hoofdstuk{margin-top:clamp(3rem,6vw,5rem)}
.jaartal{
	font-family:"Archivo",Arial,sans-serif;font-weight:800;
	font-size:clamp(2.6rem,7vw,4.4rem);line-height:.9;
	color:var(--tomaat);opacity:.9;margin:0 0 .4rem;
}
.op-donker .jaartal{color:var(--goud)}
.bronnen{font-size:.86rem;opacity:.72;line-height:1.6}
.bronnen li{margin-bottom:.5rem}


/* Praktisch */
.praktisch{display:grid;gap:2.4rem;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:760px){.praktisch{grid-template-columns:repeat(3,1fr)}}
.praktisch h3{font-size:.78rem;letter-spacing:.2em;color:var(--tomaat)}
.op-donker .praktisch h3{color:var(--goud)}
.praktisch p,.praktisch li{font-size:.98rem}
.tijden{list-style:none;margin:0;padding:0}
.tijden li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--lijn)}
.op-donker .tijden li{border-color:var(--lijn-licht)}
.tijden .dicht{color:var(--tomaat);font-weight:700}
.op-donker .tijden .dicht{color:var(--tomaat-licht)}

/* Vragen */
.vraag{border-top:1px solid var(--lijn);padding:1.6rem 0}
.vraag:last-of-type{border-bottom:1px solid var(--lijn)}
.vraag h3{text-transform:none;letter-spacing:0;font-size:1.1rem;margin-bottom:.5em}

/* Voettekst */
.voet{background:var(--inkt);color:var(--papier);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
.voet a{text-decoration:none;opacity:.85}
.voet a:hover{opacity:1;color:var(--tomaat-licht)}
.voet .kolommen{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media(min-width:760px){.voet .kolommen{grid-template-columns:1.3fr 1fr 1fr}}
.voet h3{font-size:.72rem;letter-spacing:.24em;color:var(--goud)}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{padding:.25rem 0;font-size:.98rem}
.slotregel{
	margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--lijn-licht);
	font-family:"Archivo",Arial,sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55;
	display:flex;flex-wrap:wrap;gap:.6rem 2rem;
}

/* Beeldstrook */
.strook{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.strook picture{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--inkt)}
.strook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.strook{grid-template-columns:1fr 1fr}.strook picture:last-child{display:none}}

/* Kleine schermen */
@media(max-width:700px){
	.balk .wrap{flex-direction:column;align-items:center;gap:.55rem}
	.balk nav{justify-content:center;gap:1rem}
	.balk nav a{font-size:.68rem;letter-spacing:.1em}
	.balk .knop{padding:.62em 1.1em}
	.hero .wrap{padding-top:3rem;padding-bottom:3rem}
	.feiten .wrap{gap:.45rem 1.4rem}
	.knoppen .knop{flex:1 1 100%;text-align:center}
}

/* Heros met een foto erachter */
/* Vaste hoogte. Zonder die hoogte groeit de hero mee met de tekst en
   snijdt background-size:cover de foto op elke pagina anders uit: een korte
   hero toont een ander deel van het beeld dan een lange. De sectiepadding
   gaat eraf, anders telt die bij de hoogte op en bindt de hoogte nooit. */
.hero.met-foto{
	background-size:cover;background-repeat:no-repeat;
	padding:0;
	height:clamp(38rem,46vw,42rem);
	min-height:fit-content;
	display:flex;align-items:center;
}
.hero.met-foto>.wrap{width:100%;padding-top:2.5rem;padding-bottom:2.5rem}
.hero.met-foto::after{display:none}
@media(max-width:760px){
	/* Op mobiel is een gelijke hoogte voor alle pagina's niet te doen zonder
	   de hero over de halve telefoon te laten lopen. Hier dus alleen een
	   ondergrens, zodat korte heros niet inzakken. */
	.hero.met-foto{height:auto;min-height:clamp(20rem,62vw,25rem)}
}

.hero.foto-pand{
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),url(/assets/pand-osteria-pomodoro-lent.jpg);
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),image-set(url(/assets/pand-osteria-pomodoro-lent.webp) type('image/webp'), url(/assets/pand-osteria-pomodoro-lent.jpg) type('image/jpeg'));
	background-position:66% 44%;
}
@media(max-width:760px){
	.hero.foto-pand{
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),url(/assets/pand-osteria-pomodoro-lent-klein.jpg);
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),image-set(url(/assets/pand-osteria-pomodoro-lent-klein.webp) type('image/webp'), url(/assets/pand-osteria-pomodoro-lent-klein.jpg) type('image/jpeg'));
		background-position:60% 45%;
	}
}
.hero.foto-kaart{
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),url(/assets/carpaccio-osteria-pomodoro.jpg);
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),image-set(url(/assets/carpaccio-osteria-pomodoro.webp) type('image/webp'), url(/assets/carpaccio-osteria-pomodoro.jpg) type('image/jpeg'));
	background-position:62% 50%;
}
@media(max-width:760px){
	.hero.foto-kaart{
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),url(/assets/carpaccio-osteria-pomodoro-klein.jpg);
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),image-set(url(/assets/carpaccio-osteria-pomodoro-klein.webp) type('image/webp'), url(/assets/carpaccio-osteria-pomodoro-klein.jpg) type('image/jpeg'));
		background-position:58% 50%;
	}
}

/* Kerst. De foto van de gedekte kersttafel in de zaal, aangeleverd door
   Selmar. Dezelfde gradient als de andere heros: gemeten haalt die op deze
   foto een contrast van 5,7 voor de kop en 5,1 voor de tekst, ruim boven de
   eis van 3,0 en 4,5, en hij laat meer van de foto zien dan een diepere. */
.hero.foto-kerst{
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),url(/assets/kerst-osteria-pomodoro-lent.jpg);
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),image-set(url(/assets/kerst-osteria-pomodoro-lent.webp) type('image/webp'), url(/assets/kerst-osteria-pomodoro-lent.jpg) type('image/jpeg'));
	background-position:50% 50%;
}
@media(max-width:760px){
	.hero.foto-kerst{
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),url(/assets/kerst-osteria-pomodoro-lent-klein.jpg);
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),image-set(url(/assets/kerst-osteria-pomodoro-lent-klein.webp) type('image/webp'), url(/assets/kerst-osteria-pomodoro-lent-klein.jpg) type('image/jpeg'));
		background-position:58% 50%;
	}
}

.hero.foto-tafel{
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),url(/assets/tafel-osteria-pomodoro.jpg);
	background-image:linear-gradient(100deg,rgba(24,12,10,.93) 0%,rgba(24,12,10,.82) 32%,rgba(122,26,19,.55) 62%,rgba(122,26,19,.28) 100%),image-set(url(/assets/tafel-osteria-pomodoro.webp) type('image/webp'), url(/assets/tafel-osteria-pomodoro.jpg) type('image/jpeg'));
	background-position:60% 50%;
}
@media(max-width:760px){
	.hero.foto-tafel{
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),url(/assets/tafel-osteria-pomodoro-klein.jpg);
		background-image:linear-gradient(180deg,rgba(24,12,10,.88) 0%,rgba(24,12,10,.74) 55%,rgba(122,26,19,.55) 100%),image-set(url(/assets/tafel-osteria-pomodoro-klein.webp) type('image/webp'), url(/assets/tafel-osteria-pomodoro-klein.jpg) type('image/jpeg'));
		background-position:58% 50%;
	}
}

/* Uitnodiging om te reserveren */
.reserveerblok{
	background:var(--room);border:1px solid var(--lijn);
	padding:clamp(2rem,4vw,3.2rem);margin-top:2.4rem;text-align:center;
}
.op-donker .reserveerblok{background:rgba(247,239,225,.05);border-color:var(--lijn-licht)}
.reserveerblok p{max-width:46ch;margin-left:auto;margin-right:auto}
.reserveerblok .knoppen{justify-content:center}

/* Kleine schermen */
@media(max-width:700px){
	.balk .wrap{flex-direction:column;align-items:center;gap:.55rem}
	.balk nav{justify-content:center;gap:1rem}
	.balk nav a{font-size:.68rem;letter-spacing:.1em}
	.balk .knop{padding:.62em 1.1em}
	.hero .wrap{padding-top:3rem;padding-bottom:3rem}
	.feiten .wrap{gap:.45rem 1.4rem}
	.knoppen .knop{flex:1 1 100%;text-align:center}
}

/* Reserveren, het kader om het Table Flow formulier */
.reserveerkader{
	margin-top:2.4rem;
	background:var(--room);
	border:1px solid var(--lijn);
	overflow:hidden;
}
.reserveerkader iframe{display:block;width:100%;height:900px;border:0}
@media(max-width:700px){.reserveerkader iframe{height:1040px}}
/* Het cadeaubonformulier is wat langer, gemeten op 1009 pixels */
.bonkader iframe{height:1050px}
@media(max-width:700px){.bonkader iframe{height:1220px}}
/* Het reserveer en cadeaubonvenster mag breder dan de leeskolom */
.breed-kader{
	width:min(960px,calc(100vw - 3rem));
	margin-left:50%;transform:translateX(-50%);
}
@media(max-width:700px){.breed-kader{width:100%;margin-left:0;transform:none}}

/* Onderdeel van, de logo's in de voettekst */
.familie{
	margin-top:2.6rem;padding-top:1.8rem;
	border-top:1px solid var(--lijn-licht);
	display:flex;align-items:center;flex-wrap:wrap;
	gap:1rem 1.8rem;
}
.familielabel{
	font-family:"Archivo",Arial,sans-serif;
	font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
	color:var(--papier);opacity:.5;
}
.familie a{display:inline-flex;align-items:center;opacity:.82;transition:opacity .18s ease}
.familie a:hover{opacity:1}
.familie img{width:auto;display:block}
.familie .hl img{height:38px}
.familie .lk img{height:46px}
@media(max-width:520px){
	.familie{gap:.9rem 1.4rem}
	.familie .hl img{height:30px}
	.familie .lk img{height:36px}
}

/* Archiefbeelden in het verhaal */
.archiefbeeld{margin:2.6rem 0}
.archiefbeeld.staand{max-width:420px;margin-left:auto;margin-right:auto}
.archiefbeeld img{width:100%;height:auto;display:block;box-shadow:0 22px 50px rgba(28,16,13,.2)}
.archiefbeeld figcaption{
	font-family:"Archivo",Arial,sans-serif;
	font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
	margin-top:.9rem;opacity:.6;line-height:1.7;
}
.archiefduo{display:grid;gap:1.6rem;grid-template-columns:1fr;margin:2.4rem 0 0}
@media(min-width:720px){.archiefduo{grid-template-columns:.8fr 1.2fr;gap:1.8rem;align-items:start}}
.archiefduo .archiefbeeld{margin:0}
.citaat{
	margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--tomaat);
	font-family:"Lora",Georgia,serif;font-style:italic;font-size:1.06rem;line-height:1.7;
}
.citaat cite{
	display:block;margin-top:.7rem;font-style:normal;
	font-family:"Archivo",Arial,sans-serif;font-size:.66rem;letter-spacing:.16em;
	text-transform:uppercase;opacity:.6;
}
.op-donker .citaat{border-left-color:var(--goud)}

/* Taalkiezer in de kopbalk */
.taalkiezer,.submenu{position:relative;font-family:"Archivo",Arial,sans-serif}
.taalkiezer>summary,.submenu>summary{
	list-style:none;cursor:pointer;
	display:flex;align-items:center;gap:.4em;
	font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	opacity:.86;padding:.3em .1em;
}
.taalkiezer>summary::-webkit-details-marker,.submenu>summary::-webkit-details-marker{display:none}
.taalkiezer>summary::after,.submenu>summary::after{
	content:"";width:.42em;height:.42em;
	border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
	transform:rotate(45deg) translateY(-.1em);
}
.taalkiezer>summary:hover,.submenu>summary:hover{opacity:1;color:var(--tomaat-licht)}
.taalkiezer[open]>summary,.submenu[open]>summary{opacity:1;color:var(--tomaat-licht)}
.taalkiezer[open]>summary::after,.submenu[open]>summary::after{transform:rotate(-135deg) translateY(-.1em)}
.taalkiezer>summary:focus-visible,.submenu>summary:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.taalkiezer ul,.submenu ul{
	position:absolute;right:0;top:calc(100% + .7rem);z-index:60;
	margin:0;padding:.4rem 0;list-style:none;min-width:11rem;
	background:var(--room);color:var(--inkt);
	border:1px solid var(--lijn);
	box-shadow:0 18px 44px rgba(28,16,13,.3);
}
.taalkiezer ul li,.submenu ul li{margin:0}
.balk nav .taalkiezer ul a,.balk nav .submenu ul a{
	display:block;padding:.62em 1.1em;
	font-size:.72rem;letter-spacing:.14em;opacity:.85;color:var(--inkt);
}
.balk nav .taalkiezer ul a:hover,.balk nav .taalkiezer ul a[aria-current],
.balk nav .submenu ul a:hover,.balk nav .submenu ul a[aria-current]{
	opacity:1;background:var(--papier-warm);color:var(--tomaat);
}
.taalkiezer ul a[aria-current],.submenu ul a[aria-current]{font-weight:700}
@media(max-width:760px){
	.taalkiezer ul,.submenu ul{right:auto;left:50%;transform:translateX(-50%)}
}

/* Voorwaardenlijst op de verjaardagspagina */
.voorwaarden{list-style:none;padding:0;margin:1.5rem 0 0}
.voorwaarden li{position:relative;padding-left:1.6rem;margin-bottom:.85rem;line-height:1.6}
.voorwaarden li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--tomaat)}

/* Hamburgermenu.
   Vanaf 1021 pixels past het hele menu op een rij naast de merknaam, daaronder
   niet meer: dan wikkelt de balk naar twee regels. Vandaar dat de hamburger al
   bij 1020 begint en niet pas op telefoonformaat. De grens komt uit de breedste
   talen, Engels en Frans, die tot 1000 pixels wikkelen.
   Het inklappen hangt aan de klasse js op <html>, die bovenin elke pagina
   wordt gezet. Zonder JavaScript blijft het menu dus gewoon staan in plaats
   van achter een knop te verdwijnen die niets doet. */
.menuknop{display:none}
@media(max-width:1020px){
	.js .menuknop{
		display:flex;align-items:center;gap:.6em;
		background:none;border:0;padding:.5em .1em;
		color:inherit;cursor:pointer;
		font-family:"Archivo",Arial,sans-serif;
		font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	}
	.js .menuknop:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
	.js .menuknop .streepjes{position:relative;display:block;width:1.15rem;height:2px;background:currentColor}
	.js .menuknop .streepjes::before,.js .menuknop .streepjes::after{
		content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
		transition:transform .18s ease,top .18s ease;
	}
	.js .menuknop .streepjes::before{top:-.38rem}
	.js .menuknop .streepjes::after{top:.38rem}
	.js .menuknop[aria-expanded="true"] .streepjes{background:transparent}
	.js .menuknop[aria-expanded="true"] .streepjes::before{top:0;transform:rotate(45deg)}
	.js .menuknop[aria-expanded="true"] .streepjes::after{top:0;transform:rotate(-45deg)}

	.js .balk nav .menu{
		display:none;
		position:absolute;left:0;right:0;top:100%;
		flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
		padding:.4rem 1.5rem 1.5rem;
		/* Dekkend, niet doorzichtig: anders lees je de koptekst van de pagina
		   dwars door het menu heen. */
		background:var(--inkt);
		border-bottom:1px solid var(--lijn-licht);
		box-shadow:0 22px 44px rgba(28,16,13,.34);
		max-height:calc(100dvh - 4.7rem);overflow-y:auto;
	}
	.js .balk nav .menu.open{display:flex}
	.js .balk nav .menu>a{padding:.95rem 0;border-bottom:1px solid var(--lijn-licht);opacity:.92}
	.js .balk nav .menu>a.knop{
		margin-top:1.2rem;text-align:center;border:1px solid var(--tomaat);
		padding:.85em 1.6em;opacity:1;
	}
	.js .balk nav .menu .taalkiezer{margin-top:1.2rem}
	.js .balk nav .menu .taalkiezer ul,.js .balk nav .menu .submenu ul{
		position:static;transform:none;min-width:0;margin-top:.6rem;box-shadow:none;
	}
	/* De uitklapper staat in de kolom tussen de gewone links, met dezelfde
	   scheidingslijn eronder. */
	.js .balk nav .menu .submenu{border-bottom:1px solid var(--lijn-licht)}
	.js .balk nav .menu .submenu>summary{padding:.95rem 0}
	.js .balk nav .menu .submenu ul{margin:0 0 .8rem;padding:0}
	.js .balk nav .menu .submenu ul a{padding:.55em 0 .55em 1rem;background:none}
}