/* Bo.tique by Rieky Bogaard — landingspagina op één scherm. Zand en antraciet op crème, zoals logo en winkel;
   de winkelfoto en de openingstijden staan in boogspiegels, naar de paskamers. Het logo spiegelt zoals op het visitekaartje.
   De boogmaat volgt de schermhoogte (--w), en alles in de boog schaalt mee. */
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-wght-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-wght-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
	--creme:#f6f2ec;
	--spiegel:#fffdf9;
	--zand:#cbbb9f;
	--zand-donker:#8f8166;
	--antraciet:#373736;
	--zacht:#6a6760;
	--lijn:rgba(55,55,54,.14);
	--serif:"EB Garamond","Adobe Garamond Pro",Garamond,"Iowan Old Style",Georgia,serif;
	--rest:150px;                                 /* voettekst en marges boven en onder */
	--w:min(360px,calc(100vw - 32px));            /* breedte van een boog (mobiel); geen %, want ook gebruikt voor de lettergrootte */
}
.met-mededeling{--rest:195px}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--creme);color-scheme:light;-webkit-text-size-adjust:100%}
body{
	margin:0;min-height:100svh;display:flex;flex-direction:column;
	font-family:var(--serif);font-size:clamp(15px,1.15vh + 7px,18px);line-height:1.45;color:var(--antraciet);
	background:radial-gradient(60rem 34rem at 50% -8rem,#fffaf2 0%,transparent 70%) no-repeat,var(--creme);
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--antraciet);outline-offset:5px;border-radius:2px}
p,h1,h2,dl,dd,ul,figure{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}

/* Mededeling (backend): smalle balk bovenaan */
.bt-mededeling{padding:.6em 16px;background:var(--antraciet);color:var(--creme);text-align:center;font-size:.95em;letter-spacing:.02em}

/* Raster. Mobiel: logo, status, uren, welkom, contact (de fotoboog valt weg). */
.bt{
	flex:1;width:100%;max-width:1440px;margin:0 auto;padding:clamp(24px,4vh,48px) clamp(16px,3vw,48px) clamp(16px,3vh,32px);
	display:grid;gap:clamp(24px,3.5vh,40px);justify-items:center;align-items:center;
	grid-template-areas:"midden" "uren";
}
.bt-boog-foto{display:none}
.bt-midden{grid-area:midden;width:100%;max-width:500px;min-width:0;display:grid;justify-items:center;text-align:center;
	--groep:clamp(20px,3.6vh,40px)}               /* afstand tussen de groepen merk · welkom · contact */
.bt-status{margin-top:clamp(12px,1.9vh,20px)}
.bt-welkom{margin-top:var(--groep)}
.bt-contact{margin-top:var(--groep)}
.bt-boog-uren{grid-area:uren}
/* Tablet en kleine laptop: midden en uren naast elkaar */
@media (min-width:760px){
	:root{--w:min(360px,40vw,calc((100svh - var(--rest)) / 1.5))}
	.bt{grid-template-columns:minmax(0,1fr) var(--w);grid-template-areas:"midden uren";column-gap:clamp(32px,5vw,72px)}
}
/* Desktop: foto, midden, uren — de twee boogspiegels als de paskamers */
@media (min-width:1100px){
	:root{--w:min(420px,27vw,calc((100svh - var(--rest)) / 1.5))}
	.bt{grid-template-columns:var(--w) minmax(0,1fr) var(--w);grid-template-areas:"foto midden uren";column-gap:clamp(28px,3.5vw,56px)}
	.bt-boog-foto{display:block;grid-area:foto}
	/* beide bogen even hoog, ook als de urenboog door meldingen groeit */
	.bt-boog{align-self:stretch}
	.bt-boog-foto{aspect-ratio:auto;min-height:calc(var(--w) * 1.5)}
	.bt-boog-foto img{position:absolute;inset:0}
}

/* Logo met spiegeling, plaats en live status */
.bt-merk{display:grid;justify-items:center;gap:4px;font-size:1em;font-weight:400}
.bt-logo{position:relative;display:block;width:min(420px,74vw,44vh)}
.bt-logo-img{width:100%}
/* Spiegeling zoals op het visitekaartje: alleen de letters BO, vervagend naar beneden */
.bt-spiegeling{
	width:100%;transform:scaleY(-1);margin-top:-3.2%;opacity:.16;clip-path:inset(0 48% 0 0);
	-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 42%);mask-image:linear-gradient(to top,#000 0%,transparent 42%);
	margin-bottom:-24%;pointer-events:none;user-select:none;
}
.bt-plek{position:relative;z-index:1;font-size:1.05em;letter-spacing:.3em;text-transform:uppercase;color:var(--zand-donker);margin-right:-.3em}
@media (max-width:520px){.bt-plek{font-size:.9em;letter-spacing:.2em;margin-right:-.2em}}

.bt-status{display:inline-flex;align-items:center;gap:.65em;padding:.4em 1.05em .45em;border:1px solid var(--lijn);border-radius:99px;background:rgba(255,253,249,.7);font-size:.95em}
.bt-status[hidden]{display:none}
.bt-punt{width:.55em;height:.55em;border-radius:50%;border:1.5px solid var(--zand-donker);flex:none}
.bt-status.is-open .bt-punt{background:var(--antraciet);border-color:var(--antraciet);animation:bt-gloei 2.6s ease-in-out infinite}
@keyframes bt-gloei{0%,100%{box-shadow:0 0 0 0 rgba(203,187,159,.85)}55%{box-shadow:0 0 0 .5em rgba(203,187,159,0)}}

/* Welkom en merken */
.bt-welkom{display:grid;gap:.8em;justify-items:center}
.bt-welkom h2 + .bt-intro{margin-top:-.45em}
.bt-welkom h2{font-size:1.35em;font-weight:500;font-style:italic;line-height:1.15}
.bt-intro,.bt-slot{color:var(--zacht);max-width:30em;text-wrap:balance}
.bt-merken{
	list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.15em 1.2em;
	padding:.65em 0;border-block:1px solid var(--lijn);font-size:1.2em;font-style:italic;line-height:1.35;
}
.bt-merken li{white-space:nowrap}

/* Contact op één regel */
.bt-contact{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1.4em;font-size:.95em}
.bt-contact a,.bt-contact .bt-geen-link{display:inline-flex;align-items:center;gap:.5em;padding:.2em 0}
.bt-contact svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:var(--antraciet);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.bt-contact a span{background:linear-gradient(var(--zand),var(--zand)) 0 100%/0 1px no-repeat;transition:background-size .35s ease}
.bt-contact a:hover span,.bt-contact a:focus-visible span{background-size:100% 1px}

/* Boogspiegels */
.bt-boog{
	position:relative;width:var(--w);
	border-radius:999px 999px 0 0;            /* halve cirkel bovenaan, wat de breedte ook is */
	border:5px solid var(--zand);
	box-shadow:0 0 0 1px rgba(143,129,102,.35),0 40px 60px -42px rgba(55,55,54,.45);
	overflow:hidden;isolation:isolate;
}
.bt-boog-foto{aspect-ratio:2/3;background:var(--zand)}
.bt-boog-foto img{width:100%;height:100%;object-fit:cover}
/* Lichtglans over het spiegelglas: één keer bij binnenkomst en bij aanwijzen */
.bt-boog-foto::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(115deg,transparent 38%,rgba(255,253,249,.42) 50%,transparent 62%) no-repeat;
	background-size:250% 100%;background-position:130% 0;
}
.bt-boog-uren{
	background:linear-gradient(180deg,var(--spiegel) 0%,#fbf7f0 100%);
	font-size:max(14px,calc(var(--w) * .047)); /* tekst schaalt mee met de boog */
	padding:calc(var(--w) * .17) 8% 1.3em;
	display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:760px){.bt-boog-uren{min-height:calc(var(--w) * 1.5)}}
.bt-boog-uren h2{font-size:1.6em;font-weight:500;line-height:1.1;text-align:center;margin-bottom:.8em;letter-spacing:.01em}
.bt-week div,.bt-week-kort div{display:flex;justify-content:space-between;gap:1em;padding:.46em .15em;border-bottom:1px solid var(--lijn);font-variant-numeric:lining-nums tabular-nums}
.bt-week div:last-child,.bt-week-kort div:last-child{border-bottom:0}
.bt-week dt,.bt-week-kort dt{display:flex;align-items:center;gap:.55em}
.bt-week dt::before,.bt-week-kort dt::before{content:"";width:.38em;height:.38em;border-radius:50%;background:transparent;flex:none;margin-left:-.95em}
.bt-week dd,.bt-week-kort dd{white-space:nowrap}
.bt-week .is-dicht dd,.bt-week-kort .is-dicht dd{font-style:italic;color:var(--zacht)}
.bt-week .is-vandaag,.bt-week-kort .is-vandaag{font-weight:600}
.bt-week .is-vandaag dt::before,.bt-week-kort .is-vandaag dt::before{background:var(--zand-donker)}
.bt-week .is-afwijkend dd{color:var(--zand-donker)}
@media (min-width:760px){.bt-week-kort{display:none}}
.bt-melding{margin-top:.8em;padding-top:.7em;border-top:1px solid var(--zand);font-style:italic;font-size:.92em;line-height:1.35;text-align:center;text-wrap:balance}
.bt-melding + .bt-melding{border-top:0;margin-top:.35em;padding-top:0}

.bt-voet{padding:12px 16px 14px;border-top:1px solid var(--lijn);text-align:center;font-size:.8em;color:var(--zacht)}
.bt-voet a:hover{color:var(--antraciet)}

/* Telefoon: alles op één scherm. Uren direct onder de status, gegroepeerd; afsluitende zin en adres in de voet vallen weg. */
@media (max-width:759px){
	.bt{grid-template-areas:none;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.8vh,18px);padding-top:clamp(16px,3vh,32px)}
	.bt-midden{display:contents}
	.bt-merk{order:1}.bt-status{order:2}.bt-boog-uren{order:3;grid-area:auto}.bt-welkom{order:4}.bt-contact{order:5}
	.bt-logo{width:min(300px,64vw)}
	.bt-week{display:none}
	.bt-slot,.bt-voet-adres{display:none}
	.bt-voet{font-size:.72em;padding:10px 12px 12px}
	.bt-welkom,.bt-contact{width:100%;max-width:470px}
	.bt-status,.bt-welkom,.bt-contact{margin-top:0}
	.bt-week-kort div{padding:.4em .15em}
}
@media (max-width:759px) and (max-height:700px){.bt{padding-bottom:10px}.bt-intro{display:none}.bt-logo{width:min(240px,60vw)}.bt-welkom h2{font-size:1.2em}}

/* Beweging: alleen bij binnenkomst; daarna staat alle tekst stil. Uit bij reduced motion. */
@media (prefers-reduced-motion:no-preference){
	.bt-logo-img,.bt-plek,.bt-status,.bt-welkom,.bt-contact{animation:bt-op 1s cubic-bezier(.2,.7,.2,1) both}
	.bt-plek{animation-delay:.1s}
	.bt-status{animation-delay:.2s}
	.bt-welkom{animation-delay:.3s}
	.bt-contact{animation-delay:.4s}
	.bt-spiegeling{animation:bt-spiegel 1.6s ease .35s both}
	.bt-boog{animation:bt-op 1.1s cubic-bezier(.2,.7,.2,1) both}
	.bt-boog-uren{animation-delay:.2s}
	.bt-boog-foto{animation-delay:.35s}
	.bt-boog-foto::after{animation:bt-glans 1.8s ease-in-out 1.2s both}
	.bt-boog-foto:hover::after{animation:bt-glans 1.4s ease-in-out both}
}
@keyframes bt-op{from{opacity:0;transform:translateY(16px)}}
@keyframes bt-spiegel{from{opacity:0}}
@keyframes bt-glans{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.bt-status.is-open .bt-punt{animation:none}}