/* =========================================================
   Qooqqut Nuan — Design tokens
   Palette: cream / warm / gold (midnight sun) / coral (sunset) / ink / muted
   Type: Cormorant Garamond (display) + DM Sans (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root{
  --cream:#FBF5E8;
  --warm:#F5EDD8;
  --gold:#E8921A;
  --coral:#D4624A;
  --ink:#2C1A0E;
  --muted:#7A5A3A;

  --display: 'Cormorant Garamond', serif;
  --body: 'DM Sans', sans-serif;

  --max: 1180px;
  --edge: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  margin:0 0 .4em 0;
  letter-spacing:.01em;
  color:var(--ink);
}

h1{ font-size:clamp(2rem, 4.4vw, 3.4rem); font-style:italic; font-weight:300; line-height:1.1; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-style:italic; font-weight:300; }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }

p{ margin:0 0 1em 0; }

.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:var(--coral);
  font-weight:500;
}

.muted{ color:var(--muted); }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--cream); padding:.8em 1.2em; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

/* =========== Sun-arc signature motif =========== */
.sun-arc{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.sun-arc path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1;
  opacity:.55;
}
.sun-arc circle{ fill:var(--gold); }

.divider{
  max-width:220px;
  margin:2.4rem auto;
  opacity:.7;
}

/* =========== Header / nav =========== */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(251,245,232,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(44,26,14,.08);
}
.nav-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:.9rem var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  white-space:nowrap;
  flex-shrink:0;
}
.brand img{ height:34px; width:auto; flex-shrink:0; }

nav.primary{
  display:flex; align-items:center; gap:2rem;
}
nav.primary ul{
  list-style:none; display:flex; gap:1.9rem; margin:0; padding:0;
}
nav.primary a{
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
nav.primary a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .25s ease;
}
nav.primary a:hover::after, nav.primary a[aria-current="page"]::after{ width:100%; }
nav.primary a[aria-current="page"]{ color:var(--coral); }

.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.75em 1.6em;
  border-radius:var(--radius);
  border:1px solid var(--ink);
  white-space:nowrap;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-book{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--cream);
}
.btn-book:hover{ background:var(--coral); border-color:var(--coral); }
.btn-outline{ background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }

.lang-switch{
  display:flex; gap:.35rem;
  font-size:.72rem;
  letter-spacing:.05em;
}
.lang-switch-item{
  border-left:1px solid rgba(44,26,14,.15);
  padding-left:1.1rem;
  display:flex;
  align-items:center;
}
.lang-switch button{
  background:none; border:1px solid transparent; color:var(--muted);
  cursor:pointer; padding:.2em .45em; font-family:var(--body);
}
.lang-switch button[aria-pressed="true"]{
  color:var(--ink); border-color:var(--ink);
}

.menu-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:.4rem;
}
.menu-toggle span{ width:24px; height:1px; background:var(--ink); display:block; }

/* =========== Hero =========== */
.hero{
  position:relative;
  min-height:82vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(44,26,14,0) 0%, rgba(44,26,14,.15) 55%, rgba(44,26,14,.65) 100%);
}
.hero-content{
  position:relative;
  color:#fff;
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  padding:0 var(--edge) 4rem;
}
.hero-content h1{ color:#fff; }
.hero-content .eyebrow{ color:var(--warm); }
.hero-content p.lede{
  max-width:38em;
  font-size:1.1rem;
  color:rgba(255,255,255,.92);
}

/* Translucent white box behind hero text, for legibility over any photo */
.hero-box{
  background:rgba(251,245,232,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ink);
  max-width:640px;
  padding:2.4rem clamp(1.4rem, 4vw, 3rem);
  border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(44,26,14,.12);
}
.hero-box .eyebrow{ color:var(--coral); }
.hero-box h1{ color:var(--ink); }
.hero-box p.lede{ color:var(--muted); }
.hero-box .btn-outline{
  color:var(--ink) !important;
  border-color:var(--ink) !important;
}
.hero-box .btn-outline:hover{ background:var(--ink); color:var(--cream) !important; }

@media (max-width:600px){
  .hero-box{ padding:1.8rem 1.4rem; max-width:100%; }
}

.hero-small{ min-height:52vh; }

/* =========== Sections =========== */
section{ padding:5.5rem 0; }
.section-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--edge);
}
.section-tight{ padding:3.5rem 0; }
.bg-warm{ background:var(--warm); }
.bg-ink{ background:var(--ink); color:var(--cream); }
.bg-ink h2, .bg-ink h3{ color:var(--cream); }

.grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
}
.grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem;
}
.grid-2.reverse .col-img{ order:2; }

.col-img img{ border-radius:var(--radius); }
.img-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
}

.card{
  background:#fff;
  padding:2.2rem 2rem;
  border-radius:var(--radius);
  border:1px solid rgba(44,26,14,.08);
}
.card .eyebrow{ margin-bottom:.6rem; display:block; }

.stat-row{
  display:flex; flex-wrap:wrap; gap:3rem;
  margin-top:2rem;
}
.stat{ min-width:120px; }
.stat .num{ font-family:var(--display); font-style:italic; font-size:2.4rem; color:var(--coral); display:block; }
.stat .label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }

/* Route strip — signature booking motif */
.route{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--body);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.6rem 0;
}
.route .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.route .line{ flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); min-width:40px; }
.route strong{ color:var(--ink); font-weight:500; }

.kl-note{
  font-size:.78rem;
  color:var(--muted);
  border-left:2px solid var(--coral);
  padding-left:.9rem;
  margin:1.4rem 0;
  display:none;
}
html[data-lang="kl"] .kl-note{ display:block; }

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
}
.gallery-grid a{ display:block; overflow:hidden; border-radius:var(--radius); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .5s ease; }
.gallery-grid a:hover img{ transform:scale(1.06); }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-grid .tall img{ aspect-ratio:1/2.1; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(44,26,14,.92);
  display:none; align-items:center; justify-content:center; z-index:300; padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:var(--radius); }
.lightbox button{
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:1px solid var(--cream); color:var(--cream);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.2rem;
}

/* Forms */
form.contact-form{ display:grid; gap:1.2rem; }
form.contact-form label{ font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4rem; }
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding:.85em 1em; font-family:var(--body); font-size:1rem;
  border:1px solid rgba(44,26,14,.2); border-radius:var(--radius); background:#fff; color:var(--ink);
}
form.contact-form textarea{ resize:vertical; min-height:120px; }
form.contact-form button{ justify-self:start; cursor:pointer; }

.invoice-fields{
  display:none;
  gap:1.2rem;
  padding:1.2rem;
  border:1px dashed rgba(44,26,14,.2);
  border-radius:var(--radius);
  background:rgba(232,146,26,.05);
}
.invoice-fields.active{ display:grid; }
.invoice-fields .hint{
  font-size:.8rem;
  color:var(--muted);
  margin:-.4rem 0 0;
}

/* Honeypot — invisible to real visitors, catches simple spam bots that fill every field */
.honeypot-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  font-size:.9rem;
  margin-top:.6rem;
  min-height:1.4em;
}
.form-status.success{ color:#3a6b3a; }
.form-status.error{ color:var(--coral); }

/* Cookie consent banner (gates Microsoft Clarity behaviour tracking) */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:400;
  background:var(--ink);
  color:var(--cream);
  padding:1.2rem var(--edge);
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.2);
}
.cookie-banner.visible{ display:flex; }
.cookie-banner p{ margin:0; max-width:60ch; font-size:.92rem; }
.cookie-banner-actions{ display:flex; gap:.8rem; flex-wrap:wrap; flex-shrink:0; }
.cookie-banner .btn-outline{ color:var(--cream); border-color:var(--cream); }
.cookie-banner .btn-outline:hover{ background:var(--cream); color:var(--ink); }

@media (max-width:600px){
  .cookie-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* Iframe (booking) */
.booking-frame{
  border:1px solid rgba(44,26,14,.12);
  border-radius:var(--radius);
  overflow:hidden;
  min-height:780px;
}
.booking-frame iframe{ width:100%; height:780px; border:0; display:block; }

/* Footer */
footer.site{
  background:var(--ink); color:var(--warm);
  padding:4rem 0 2rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
}
footer.site h4{ color:var(--cream); font-family:var(--body); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-weight:500; margin-bottom:1rem; }
footer.site a{ color:var(--warm); opacity:.85; }
footer.site a:hover{ opacity:1; color:var(--gold); }
footer.site ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.92rem; }
.footer-bottom{
  max-width:var(--max); margin:3rem auto 0; padding:1.5rem var(--edge) 0;
  border-top:1px solid rgba(251,245,232,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.78rem; color:var(--warm); opacity:.7;
}

/* Utility i18n visibility (fallback if JS disabled -> show DA) */
[data-i18n]{ }
html:not([data-lang]) [lang-only]{ }

/* History timeline */
.timeline{
  position:relative;
  max-width:820px;
  margin:0 auto;
  padding-left:2.6rem;
  border-left:1px solid rgba(232,146,26,.35);
}
.timeline-item{
  position:relative;
  padding-bottom:3rem;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:'';
  position:absolute;
  left:-2.95rem;
  top:.35rem;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px var(--cream);
}
.timeline-item .era{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--coral);
  font-weight:500;
  display:block;
  margin-bottom:.3rem;
}
.timeline-item h3{ margin-bottom:.6rem; }

@media (max-width:600px){
  .timeline{ padding-left:1.8rem; }
  .timeline-item::before{ left:-2.15rem; }
}

/* ===== Tablet & mobile responsive rules ===== */

/* Two-photo helper (boat/nature pairs) — stacks on narrow phones */
.img-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}
.img-pair .col-img{ min-height:0; }
.img-pair .col-img img{ height:100%; object-fit:cover; }

/* Two-field form row (dates/guests) — stacks on narrow phones */
.form-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}

/* Route strip: allow wrapping instead of overflowing on narrow screens */
.route{ flex-wrap:wrap; row-gap:.6rem; }

/* Large tablets / small laptops: tighten nav spacing a touch so six links + lang + button keep breathing room */
@media (max-width:1180px){
  nav.primary{ gap:1.4rem; }
  nav.primary ul{ gap:1.3rem; }
}

/* Tablets (portrait through landscape): collapse to the hamburger menu.
   Six nav links plus language switch plus the book button don't fit
   comfortably inline until laptop widths, so tablets get the mobile pattern too. */
@media (max-width:1024px){
  nav.primary ul{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-wrap{ flex-wrap:nowrap; }
  body.nav-open nav.primary ul{
    display:flex; flex-direction:column; gap:1.2rem;
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream); padding:2rem var(--edge);
    border-bottom:1px solid rgba(44,26,14,.08);
    max-height:80vh; overflow-y:auto;
  }
  body.nav-open .lang-switch-item{
    border-left:none;
    border-top:1px solid rgba(44,26,14,.12);
    padding-left:0;
    padding-top:1.2rem;
    margin-top:.2rem;
    width:100%;
  }
  nav.primary{ gap:1rem; }
}

/* Tablet width: make better use of the extra horizontal room than a full single column */
@media (min-width:601px) and (max-width:920px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:920px){
  .grid-2{ grid-template-columns:1fr; gap:2rem; }
  .grid-2.reverse .col-img{ order:0; }
  .grid-3{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-row{ gap:1.6rem; }
  .route{ justify-content:center; gap:.6rem; }
  .route .line{ min-width:24px; }
}

/* Phones: drop the wordmark text next to the logo so the header
   (logo + book button + menu icon) always stays on a single line */
@media (max-width:600px){
  .brand span{ display:none; }
  .nav-wrap{ padding-top:.7rem; padding-bottom:.7rem; }
  .img-pair{ grid-template-columns:1fr; }
  .img-pair .col-img img{ height:auto; aspect-ratio:4/3; }
  .form-row-2{ grid-template-columns:1fr; }
  .booking-frame iframe{ height:600px; }
  .booking-frame{ min-height:600px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}