/* Het huis met zeven kamers: opbouw Maison Estelle (maisonestelle.com) */
:root {
  --taupe: #B4A493;
  --blush: #CEBBB0;
  --inkt: #211D1A;
  --papier: #FFFBF7;
  --mokka: #3D3027;
  --nude: #C6A99F;
  --display: "Bodoni Moda", "Bodoni 72", serif;
  --tekst: "EB Garamond", Garamond, serif;
  --zacht: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--inkt); font-family: var(--tekst); font-size: 20px; line-height: 1.55; overflow-x: hidden;
  background: url("../media/papier-taupe.webp") 0 0 / 1440px auto repeat, var(--taupe);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--inkt); color: var(--papier); padding: 8px 14px; z-index: 60; }
.skip:focus { left: 12px; }
.klein-kap { font-family: var(--display); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; }
.let-op { display: inline-block; font-family: var(--tekst); font-size: .8rem; letter-spacing: 0; text-transform: none; background: var(--papier); border: 1px dashed var(--mokka); padding: .15em .5em; }

/* ---------- navigatie: klein embleem + naam met ▾ (Maison Estelle linksboven) ---------- */
.nav { position: fixed; top: 22px; left: 26px; z-index: 50; display: flex; align-items: center; gap: 14px; }
.nav-mono { width: 58px; display: block; }
.nav-mono svg { width: 100%; height: auto; } .nav-mono #hy { fill: var(--inkt); } .nav-mono #script { fill: var(--papier); }
.nav-knop { background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--inkt); display: inline-flex; align-items: center; gap: 8px; }
.nav-knop::after { content: ""; width: 7px; height: 7px; border-right: 1.3px solid; border-bottom: 1.3px solid; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--zacht); }
.nav-knop[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); }
.nav-lijst {
  position: absolute; top: 52px; left: 0; min-width: 270px; margin: 0; padding: 14px 0; list-style: none;
  background: url("../media/papier-taupe.webp") 0 0 / 1440px auto, var(--blush); box-shadow: 0 18px 40px -20px rgba(33,29,26,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--zacht), visibility 0s .3s;
}
.nav-lijst.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--zacht); }
.nav-lijst a { display: block; padding: 8px 22px; text-decoration: none; }
.nav-lijst a:hover, .nav-lijst a:focus-visible { background: rgba(255,251,247,.45); }
.nav-rechts { position: fixed; top: 30px; right: 30px; z-index: 50; text-decoration: none; }
.nav-rechts:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- embleem en verhalende kolom ---------- */
.kolom { width: min(640px, calc(100% - 44px)); margin-inline: auto; text-align: center; }
.embleem { width: min(330px, 70vw); margin: 64px auto 46px; }
.embleem svg { width: 100%; height: auto; }
.embleem #hy, .embleem #tagline, .embleem #andmore { fill: var(--inkt); } .embleem #script { fill: var(--papier); }
.intro p { font-size: 1.28rem; margin: 0 0 1.1em; }
.intro .kk { font-variant: small-caps; letter-spacing: .04em; }

/* ---------- de zeven kamers als index ---------- */
.kamers { list-style: none; margin: 56px auto 20px; padding: 0; text-align: center; }
.kamer { margin: 0; }
.kamer a {
  display: inline-flex; align-items: center; gap: .45em; text-decoration: none; padding: .08em .2em;
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.12;
  font-size: clamp(1.7rem, 4.6vw, 4.1rem); transition: opacity .45s var(--zacht);
}
.kamer .icoon { width: .7em; height: .9em; flex: none; opacity: .75; }
.kamer .icoon svg { width: 100%; height: 100%; }
.kamer sup { font-family: var(--tekst); font-size: .32em; letter-spacing: 0; text-transform: none; vertical-align: top; margin-left: .1em; }
.kamers.hover .kamer a { opacity: .32; }
.kamers.hover .kamer.actief a { opacity: 1; }
.kamer-mobiel { display: none; }

/* beelden die aan de rand van het scherm hangen (Maison Estelle: aquarellen in de hoeken) */
.hang { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hang figure {
  position: absolute; margin: 0; width: clamp(170px, 17vw, 270px); background: var(--papier); padding: 10px 10px 30px;
  box-shadow: 0 22px 44px -24px rgba(33,29,26,.55); opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg));
  transition: opacity .5s var(--zacht), transform .6s var(--zacht);
}
.hang figure.zicht { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.hang img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hang figcaption { position: absolute; left: 10px; right: 10px; bottom: 7px; font-size: .72rem; line-height: 1.2; text-align: left; }
.hang .plek-1 { left: 3vw; top: 16vh; --r: -3deg; }
.hang .plek-2 { right: 3.5vw; top: 36vh; --r: 2.5deg; }
.hang .plek-3 { left: 6vw; bottom: 6vh; --r: 1.5deg; width: clamp(150px, 14vw, 220px); }
.ai-plek {
  display: grid; place-content: center; gap: .3em; aspect-ratio: 4 / 5; padding: 12px; text-align: center; font-size: .78rem; line-height: 1.3;
  border: 1.5px dashed rgba(33,29,26,.6); background: repeating-linear-gradient(135deg, var(--papier) 0 10px, #EFE7E0 10px 20px);
}
.ai-plek strong { font-family: var(--display); letter-spacing: .16em; text-transform: uppercase; font-size: .66rem; }

/* ---------- gestapelde omlijnde knoppen ---------- */
.knoppen { display: grid; justify-items: center; gap: 16px; margin: 58px auto 30px; }
.omlijnd {
  display: block; width: min(360px, 100%); padding: 20px 26px; text-align: center; text-decoration: none; background: transparent;
  border: 1px solid var(--inkt); cursor: pointer; color: var(--inkt); transition: background .35s var(--zacht);
}
.omlijnd:hover { background: rgba(255,251,247,.28); }
.omlijnd .klein-kap { display: block; font-size: .74rem; font-weight: 600; }
.omlijnd small { display: block; font-size: .9rem; margin-top: 4px; }

section { position: relative; }
.ruimte { padding: clamp(80px, 11vw, 150px) 0; }
.titel { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.15; text-align: center; margin: 0 0 .6em; }

/* ---------- menu: filteren per kamer en zoeken ---------- */
.filter { width: min(1060px, calc(100% - 40px)); margin-inline: auto; }
.tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; position: relative; margin: 34px 0 26px; }
.tab { position: relative; flex: 0 1 auto; }
.tab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tab > span { display: grid; justify-items: center; gap: 6px; padding: 8px 14px 14px; font-family: var(--display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(33,29,26,.55); transition: color .3s; white-space: nowrap; }
.tab .icoon { width: 22px; height: 28px; } .tab .icoon svg { width: 100%; height: 100%; }
.tab input:checked + span { color: var(--inkt); }
.tab input:focus-visible + span { outline: 2px solid var(--inkt); outline-offset: -2px; }
.lijn { position: absolute; bottom: 0; height: 1.5px; background: var(--inkt); transition: left .45s var(--zacht), width .45s var(--zacht); }
.zoek { display: flex; justify-content: center; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 36px; }
.zoek label { font-family: var(--display); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; }
.zoek input { font: inherit; font-size: 1.15rem; color: var(--inkt); background: transparent; border: 0; border-bottom: 1px solid var(--inkt); padding: 4px 2px; width: min(360px, 80vw); }
.zoek input::placeholder { color: rgba(33,29,26,.5); }
.zoek input:focus { outline: none; border-bottom-width: 2px; }
.teller { text-align: center; margin: -14px 0 30px; font-size: 1rem; }
.resultaat { columns: 2; column-gap: 64px; }
.groep { break-inside: avoid; margin: 0 0 34px; }
.groep h3 { font-family: var(--display); font-weight: 500; font-size: .82rem; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 10px; }
.groep ul { list-style: none; margin: 0; padding: 0; }
.groep li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; }
.groep li a { font-size: .86rem; white-space: nowrap; opacity: .7; }
.groep li a:hover, .groep li a:focus-visible { opacity: 1; }
.groep mark { background: var(--papier); color: inherit; padding: 0 .1em; }
.leeg { text-align: center; }
.andmore { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.andmore svg { width: 150px; height: auto; } .andmore #andmore { fill: var(--inkt); }
.andmore #hy, .andmore #script, .andmore #tagline { display: none; }

/* ---------- wie er woont ---------- */
.bewoners p { font-size: 1.22rem; margin: 0 0 1.1em; }
.bewoners-beelden { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; margin-top: 40px; align-items: start; }
.bewoners-beelden figure { margin: 0; background: var(--papier); padding: 10px 10px 12px; box-shadow: 0 22px 44px -26px rgba(33,29,26,.55); }
.bewoners-beelden figure:nth-child(1) { transform: rotate(-2deg); } .bewoners-beelden figure:nth-child(3) { transform: rotate(2deg) translateY(30px); }
.bewoners-beelden img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bewoners-beelden figcaption { font-size: .8rem; line-height: 1.3; margin-top: 8px; text-align: left; }

/* ---------- reviews in de kolom ---------- */
.review { margin: 0 0 58px; }
.review p { font-size: 1.36rem; line-height: 1.45; margin: 0 0 .5em; }
.review footer { font-family: var(--display); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; }

/* ---------- tekstlinks en footer ---------- */
.tekstlinks { display: grid; justify-items: center; gap: 14px; margin: 10px 0 80px; }
.tekstlinks a { font-family: var(--display); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--inkt); padding-bottom: 3px; }
.voet { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 46px; padding: 34px 20px 44px; background: rgba(255,251,247,.14); }
.voet span { font-family: var(--display); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; }

/* ---------- georkestreerde page-load: embleem, dan kolom, dan kamers ---------- */
.in { opacity: 0; transform: translateY(14px); animation: in .9s var(--zacht) forwards; }
.embleem.in { animation-delay: .1s; } .intro.in { animation-delay: .45s; }
.kamer.in { animation-duration: .8s; }
@keyframes in { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hang { display: none; }
  .kamer-mobiel { display: flex; justify-content: center; gap: 10px; max-height: 0; overflow: hidden; transition: max-height .6s var(--zacht); }
  .kamer.actief .kamer-mobiel { max-height: 240px; margin: 8px 0 18px; }
  .kamer-mobiel img, .kamer-mobiel .ai-plek { width: 118px; aspect-ratio: 4 / 5; object-fit: cover; font-size: .62rem; padding: 6px; }
  .tabs { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
  .tab { scroll-snap-align: start; }
  .resultaat { columns: 1; }
  .bewoners-beelden { grid-template-columns: 1fr 1fr; }
  .bewoners-beelden figure:nth-child(3) { grid-column: 1 / 3; width: 60%; justify-self: center; transform: rotate(2deg); }
  .nav { left: 14px; top: 14px; } .nav-rechts { right: 14px; top: 22px; }
  body { font-size: 18px; }
}
@media (max-width: 480px) {
  .nav-rechts .nr { display: none; }
  .groep li { flex-wrap: wrap; gap: 2px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* nav krijgt papier onder zich zodra je scrolt, zodat hij niet over tekst valt */
.nav, .nav-rechts { transition: background .35s, box-shadow .35s; }
.nav.gescrold { background: url("../media/papier-taupe.webp") 0 0 / 1440px auto, var(--taupe); padding: 8px 14px 8px 10px; margin: -8px 0 0 -10px; box-shadow: 0 10px 24px -18px rgba(33,29,26,.6); }
.nav-rechts .nr-kort::after { content: "Bel"; }
.nav-rechts .nr-kort { display: none; }
.kamer a { display: inline; }
.kamer .icoon { display: inline-block; vertical-align: -.08em; margin-right: .35em; }
@media (max-width: 900px) {
  .nav { top: 0; left: 0; right: 0; padding: 10px 14px; background: url("../media/papier-taupe.webp") 0 0 / 1440px auto, var(--taupe); box-shadow: 0 10px 24px -20px rgba(33,29,26,.6); }
  .nav.gescrold { margin: 0; padding: 10px 14px; }
  .nav-rechts { top: 20px; right: 16px; z-index: 51; }
  .embleem { margin-top: 86px; }
  .kamer a { font-size: clamp(1.3rem, 6.2vw, 4.1rem); }
}
@media (max-width: 480px) {
  .nav-rechts .nr-kort { display: inline; }
}
/* hangende beelden blijven buiten de langste kamernaam */
@media (min-width: 901px) {
  .kamer a { font-size: clamp(1.7rem, 3.9vw, 3.45rem); }
  .hang figure { width: clamp(150px, 13.5vw, 230px); }
  .hang .plek-1 { left: 1.6vw; } .hang .plek-2 { right: 1.6vw; } .hang .plek-3 { left: 2.4vw; width: clamp(140px, 12vw, 200px); }
}

/* ---------- header na scrollen: doorlopende papierbalk, zodat het menu niet over de behandelnamen valt ---------- */
@media (min-width: 901px) {
  .nav.gescrold { background: none; box-shadow: none; padding: 0; margin: 0; }
  .nav.gescrold::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 84px; z-index: -1; pointer-events: none;
    background: url("../media/papier-taupe.webp") 0 0 / 1440px auto, var(--taupe);
    box-shadow: 0 10px 24px -18px rgba(33,29,26,.6);
  }
}