/* B&B Den Duine one-page front, bilingual (NL/EN) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/fraunces.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/hanken-grotesk.woff2) format('woff2');}
:root {
  --paper:#FBF9F5; --chalk:#EFEBE4; --oak:#C7A16B;
  --cognac:#8A4B2E; --espresso:#3A2A1F; --ink:#1A1917;
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wide:1200px; --content:720px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--chalk); color:var(--espresso);
  font-family:var(--body); font-size:1.05rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--display); font-weight:400; line-height:1.12; margin:0 0 .5rem; }
h1 { font-size:clamp(3rem,8vw,5.5rem); letter-spacing:-.02em; }
h2 { font-size:clamp(2rem,5vw,2.8rem); letter-spacing:-.015em; }
h3 { font-size:1.4rem; font-weight:500; }
p { margin:0 0 1rem; }
a { color:var(--cognac); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }

.wrap { max-width:var(--wide); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.5rem); }
.narrow { max-width:var(--content); }
section { padding-block:clamp(2.75rem,6vw,5rem); }
section[id] { scroll-margin-top:5rem; }

.eyebrow {
  font-family:var(--body); text-transform:uppercase; letter-spacing:.2em;
  font-size:.76rem; font-weight:600; color:var(--cognac); margin:0 0 .4rem;
}
.dark .eyebrow { color:var(--oak); }

/* vertical-slat divider — echoes the timber wall behind the bed */
.slat {
  height:34px; width:100%; opacity:.65;
  background-image:repeating-linear-gradient(90deg,var(--oak) 0,var(--oak) 2px,transparent 2px,transparent 9px);
}

/* buttons */
.btn {
  display:inline-block; font-family:var(--body); font-weight:600; font-size:.88rem;
  text-transform:uppercase; letter-spacing:.09em; padding:1rem 2rem;
  background:var(--cognac); color:var(--paper); border:1px solid var(--cognac);
  transition:background .2s,color .2s; cursor:pointer; text-decoration:none;
}
.btn:hover { background:var(--espresso); border-color:var(--espresso); color:var(--paper); text-decoration:none; }
.btn.ghost { background:transparent; color:#fff; border-color:#fff; }
.btn.ghost:hover { background:#fff; color:var(--espresso); }
.btn-row { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem; }

/* header */
header.site {
  position:fixed; top:0; left:0; right:0; width:100%; z-index:50;
  background:color-mix(in srgb,var(--chalk) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--oak);
}
.bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand { font-family:var(--display); font-weight:500; font-size:1.5rem; letter-spacing:-.01em; color:var(--espresso); }
.brand:hover { text-decoration:none; }
.nav { display:flex; align-items:center; gap:1.4rem; }
.nav a.link { font-size:.9rem; font-weight:500; color:var(--espresso); }
.nav a.link:hover { color:var(--cognac); text-decoration:none; }
.nav .btn { padding:.7rem 1.4rem; }

/* language selector */
.lang { display:inline-flex; align-items:center; gap:.15rem; font-size:.85rem; font-weight:600; }
.lang button {
  background:none; border:none; cursor:pointer; padding:.2rem .35rem;
  font:inherit; color:color-mix(in srgb,var(--espresso) 55%,transparent); letter-spacing:.03em;
}
.lang button.active { color:var(--cognac); text-decoration:underline; text-underline-offset:3px; }
.lang span { color:var(--oak); }

/* hero */
.hero {
  min-height:86vh; display:flex; align-items:flex-end; color:#fff;
  background:linear-gradient(180deg,rgba(58,42,31,.15),rgba(58,42,31,.55)),
             url(../images/hero.jpg) center/cover no-repeat;
}
.hero .wrap { padding-block:clamp(2.75rem,6vw,5rem); width:100%; }
.hero h1 { color:#fff; }
.hero p.sub { color:#fff; font-weight:300; font-size:clamp(1.3rem,2.6vw,1.6rem); max-width:34ch; }

/* intro */
.cols2 { display:grid; grid-template-columns:48% 52%; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.cols2 img { border-radius:2px; }

/* amenities / dark sections */
.dark { background:var(--espresso); color:var(--paper); }
.dark h2, .dark h3 { color:var(--paper); }
.dark h3 { color:var(--oak); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:2rem; }
.grid3 .small { font-size:.88rem; }

/* photo carousel */
.dd-carousel { position:relative; max-width:1000px; margin-inline:auto; }
.dd-car-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dd-car-track::-webkit-scrollbar { display:none; }
.dd-car-track img { flex:0 0 100%; scroll-snap-align:center; width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.dd-car-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border:none; border-radius:50%; background:rgba(58,42,31,.5); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.dd-car-btn:hover { background:rgba(58,42,31,.8); }
.dd-car-prev { left:.6rem; }
.dd-car-next { right:.6rem; }
.dd-car-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.dd-car-dots button { width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(58,42,31,.25); cursor:pointer; transition:background .2s; }
.dd-car-dots button.active { background:var(--cognac); }

/* practical */
.grid3b { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:2rem; }
.grid3b .small { font-size:.88rem; }

/* book */
.book {
  min-height:52vh; display:flex; align-items:center; text-align:center; color:#fff;
  background:linear-gradient(180deg,rgba(26,25,23,.7),rgba(26,25,23,.72)),
             url(../images/room-2.jpg) center/cover no-repeat;
}
.book h2 { color:#fff; }
.book p { color:#fff; font-weight:300; }
.book .btn-row { justify-content:center; }

/* footer */
footer.site { background:var(--espresso); color:var(--paper); text-align:center; padding-block:clamp(2.75rem,6vw,5rem); }
footer.site .brand { color:var(--paper); display:inline-block; margin-bottom:.4rem; }
footer.site .addr { color:var(--oak); font-size:.88rem; margin:.2rem 0; }
footer.site .meta { color:#b7a893; font-size:.88rem; margin-top:1.6rem; }
footer.site a { color:var(--oak); }

/* contact form */
.contact { background:var(--chalk); }
.contact .wrap { max-width:640px; }
.dd-contact-form { margin-top:1.6rem; }
.dd-contact-form input[type=text],
.dd-contact-form input[type=email],
.dd-contact-form input[type=tel],
.dd-contact-form textarea,
.dd-mockform input,
.dd-mockform textarea {
  width:100%; box-sizing:border-box; padding:.85rem 1rem; margin-bottom:.85rem;
  border:1px solid var(--oak); border-radius:2px; background:var(--paper);
  font-family:var(--body); font-size:1rem; color:var(--espresso);
}
.dd-contact-form textarea, .dd-mockform textarea { resize:vertical; min-height:120px; }
.dd-contact-form input:focus, .dd-contact-form textarea:focus,
.dd-mockform input:focus, .dd-mockform textarea:focus {
  outline:none; border-color:var(--cognac);
}
.dd-contact-form input[type=submit],
.dd-contact-form button,
.dd-mockform button {
  display:inline-block; font-family:var(--body); font-weight:600; font-size:.88rem;
  text-transform:uppercase; letter-spacing:.09em; padding:1rem 2rem; cursor:pointer;
  background:var(--cognac); color:var(--paper); border:1px solid var(--cognac); border-radius:0;
  transition:background .2s;
}
.dd-contact-form input[type=submit]:hover,
.dd-contact-form button:hover,
.dd-mockform button:hover { background:var(--espresso); border-color:var(--espresso); }
.dd-contact-form .wpcf7-not-valid-tip { color:#b3402a; font-size:.85rem; }
.dd-contact-form .wpcf7-response-output {
  border:1px solid var(--oak); padding:.7rem 1rem; margin:1rem 0 0; font-size:.9rem;
}

@media (max-width:820px) {
  .cols2, .grid3, .grid3b { grid-template-columns:1fr; }
  .dd-car-btn { width:38px; height:38px; font-size:1.3rem; }
  .nav a.link { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }