/* ---------- Design tokens ---------- */
:root {
  --forest: #22382c;    /* deep forest green: headings, logo */
  --text:   #34383b;    /* volcanic grey: body text */
  --muted:  #5f6862;    /* secondary text */
  --bg:     #f6f8f6;    /* cool off-white */
  --line:   #c9d4c0;    /* soft green: borders */
  --tint:   #e6ece2;    /* section tint */
  --accent: #b3263e;    /* copihue red: links, buttons */
  --font: "Ubuntu", Arial, Helvetica, sans-serif;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --forest: #d9e4d3; --text: #d2d6d2; --muted: #9aa59d;
    --bg: #151a17; --line: #34443a; --tint: #1d2520; --accent: #f07a8c;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--font); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { color: var(--forest); font-weight: 500; line-height: 1.2; margin: 0; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: 1.25rem; margin-top: 2.5rem; }
p { margin: 1rem 0 0; max-width: var(--measure); }
.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.lead { font-size: 1.15rem; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 3.75rem; }
.brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; color: var(--forest); text-decoration: none; font-weight: 500; font-size: 1.2rem; }
.brand svg { width: 1.75rem; height: auto; }
.nav ul { min-width: 0; display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.nav ul a { color: var(--text); text-decoration: none; font-size: .98rem; white-space: nowrap; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--accent); }
@media (max-width: 44rem) { .brand span { display: none; } .nav ul { gap: 1rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(86vh, 50rem); display: grid; align-items: end; color: #fff; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,14,.8) 0%, rgba(10,20,14,.15) 55%, transparent 100%); }
.hero .wrap { position: relative; z-index: 1; padding-block: 3rem 4rem; }
.hero .mark { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); }
.hero .mark svg { width: clamp(3.5rem, 9vw, 6.5rem); height: auto; color: #fff; }
.hero h1 { color: #fff; font-weight: 500; font-size: clamp(3rem, 11vw, 7.5rem); line-height: 1; letter-spacing: -.02em; }
.hero p { font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 32rem; color: #eef2ee; }

/* Page header for sub pages */
.page-head { padding-block: clamp(3rem, 7vw, 5rem) 1rem; }
.page-head h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }

/* ---------- Sections ---------- */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tint { background: var(--tint); }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .split { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.split > *, .houses > * { min-width: 0; }
.more { margin-top: 1.5rem; font-weight: 500; }

/* Key facts: big value, small label, no table lines */
.facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem 1.25rem; max-width: var(--measure); }
.facts li { display: flex; flex-direction: column; }
.facts strong { color: var(--forest); font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.facts span { color: var(--muted); font-size: .95rem; }

/* Task list with small leaf markers */
.tasks { list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
.tasks li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.tasks li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .6rem; height: .6rem; border-radius: 0 60% 0 60%; background: var(--forest); opacity: .75; }

/* German note */
.de { margin-top: 2rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--forest); background: var(--bg); max-width: var(--measure); border-radius: 0 6px 6px 0; }
.de p { margin: .4rem 0 0; }
.de p:first-child { margin-top: 0; font-weight: 500; color: var(--forest); }

/* Two guest houses side by side */
.houses { display: grid; gap: 2.5rem; margin-top: 1rem; }
@media (min-width: 56rem) { .houses { grid-template-columns: 1fr 1fr; } }
.houses h3 { margin-top: 0; }
.houses p { margin-bottom: 1rem; }

/* ---------- Galleries ---------- */
.gallery { columns: 3 13rem; column-gap: .6rem; margin-top: 2rem; }
.split .gallery { margin-top: 0; columns: 2 12rem; }
.houses .gallery { margin-top: 0; columns: 2 10rem; }
.gallery a { display: block; margin-bottom: .6rem; break-inside: avoid; border-radius: 4px; overflow: hidden; background: var(--line); cursor: zoom-in; }
.gallery img { width: 100%; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.03); }
.gallery a.plan { background: #fff; }
.gallery a.plan img { mix-blend-mode: multiply; }
@media (max-width: 40rem) { .gallery, .split .gallery, .houses .gallery { columns: 2; column-gap: .5rem; } .gallery a { margin-bottom: .5rem; } }
@media (prefers-reduced-motion: reduce) { .gallery img { transition: none; } }

/* Video */
.video { margin-top: 2rem; border-radius: 6px; overflow: hidden; background: #000; }
.video video { width: 100%; aspect-ratio: 16 / 9; }

/* Map */
.map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 4px; }

/* Link cards to sub pages and albums */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-top: 2rem; }
.card { display: block; color: inherit; text-decoration: none; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tint .card { background: var(--bg); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card div { padding: 1rem 1.15rem 1.2rem; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.card:hover h3 { color: var(--accent); }

/* Technical spec table (camper page) */
.spec { width: 100%; max-width: 46rem; border-collapse: collapse; margin-top: 1.5rem; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: .6rem .9rem; }
.spec th { width: 34%; color: var(--forest); font-weight: 500; }
.spec tr:nth-child(odd) { background: var(--tint); }
.spec tr:nth-child(odd) th { border-radius: 4px 0 0 4px; }
.spec tr:nth-child(odd) td { border-radius: 0 4px 4px 0; }
.drawings { display: grid; gap: 1rem; margin-top: 1.5rem; }
.drawings a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .75rem; cursor: zoom-in; }

/* Album page */
.album h2 { scroll-margin-top: 5rem; }
.album .count { color: var(--muted); font-size: .95rem; margin-top: .3rem; }
.back { display: inline-block; margin-top: 1rem; font-size: .95rem; }

/* ---------- Contact form ---------- */
form { display: grid; gap: 1rem; max-width: 34rem; }
label { display: grid; gap: .3rem; font-weight: 500; color: var(--forest); }
input, textarea { font: 400 1rem var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .7rem .8rem; }
textarea { min-height: 9rem; resize: vertical; }
.btn { justify-self: start; font: 500 1rem var(--font); color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: .75rem 1.6rem; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; }
#form-status { margin: 0; min-height: 1.5em; }

footer { padding-block: 2.5rem; font-size: .92rem; color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
footer a { color: var(--muted); }

/* ---------- Lightbox ---------- */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; color: #fff; }
dialog.lightbox::backdrop { background: rgba(8,12,10,.92); }
dialog.lightbox img { max-width: 96vw; max-height: 82vh; width: auto; margin: auto; border-radius: 4px; background: #fff; }
dialog.lightbox figcaption { text-align: center; margin-top: .5rem; color: #e6ece2; min-height: 1.6em; }
dialog.lightbox .bar { display: flex; justify-content: center; gap: .75rem; margin-top: .5rem; }
dialog.lightbox button { font: 500 .95rem var(--font); color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }

/* Camper pitch block under the two guest houses */
.pitch { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pitch h3 { margin-top: 0; }
.pitch .gallery { margin-top: 1.5rem; columns: 3 10rem; }

/* Project cards not yet linked */
.card.soon { opacity: .7; }
.card.soon img { filter: grayscale(.4); }
.page-head .back { margin: 0 0 .75rem; }

/* Code blocks on project pages */
pre { background: var(--tint); border-radius: 6px; padding: 1rem 1.25rem; overflow-x: auto; font-size: .9rem; line-height: 1.5; max-width: 52rem; }
code { font-family: "Ubuntu Mono", ui-monospace, Menlo, monospace; }

/* Map: blocked until clicked, so scrolling the page never zooms the map */
.map-wrap { position: relative; }
.map-wrap .map { display: block; pointer-events: none; }
.map-wrap.active .map { pointer-events: auto; }
.map-unlock { position: absolute; inset: 0; width: 100%; border: 0; border-radius: 4px; cursor: pointer;
  background: transparent; color: transparent; font: 500 .95rem var(--font); }
.map-unlock:hover, .map-unlock:focus-visible { background: rgba(20,30,24,.35); color: #fff; }
.map-wrap.active .map-unlock { display: none; }