:root {
  --paper: #f5f6f3;
  --surface: #ffffff;
  --ink: #1d2622;
  --muted: #5b6660;
  --line: #d6dbd5;
  --vine: #33503f;
  --vine-soft: #e3ebe5;
  --grape: #6e3557;
  --ground: #8a9a7f;
  --todo-bg: #fff1b8;
  --todo-ink: #5a4500;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 72rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131916;
    --surface: #1b2320;
    --ink: #e8ece9;
    --muted: #a3ada7;
    --line: #2f3a35;
    --vine: #93b9a0;
    --vine-soft: #22312a;
    --grape: #d79bbf;
    --ground: #4d5b47;
    --todo-bg: #4a3d0a;
    --todo-ink: #ffe9a3;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vine); text-underline-offset: .18em; }
a:hover { color: var(--grape); }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }
.num { font-variant-numeric: tabular-nums; }
mark.todo { background: var(--todo-bg); color: var(--todo-ink); padding: 0 .2em; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--line); }

/* Intro with house section */
.intro .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.intro .lede { font-size: 1.2rem; color: var(--muted); }
.intro .hint { font-size: .95rem; color: var(--muted); }
@media (max-width: 52rem) { .intro .wrap { grid-template-columns: 1fr; gap: 1.5rem; } }

.house { width: 100%; height: auto; max-width: 30rem; margin-inline: auto; display: block; }
.house .roof { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.house .floor { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transition: fill .2s; }
.house a:hover .floor, .house a.is-hover .floor, .house a:focus-visible .floor { fill: var(--vine-soft); }
.house a.is-active .floor { fill: var(--vine); }
.house a.is-active text { fill: var(--paper); }
.house text { fill: var(--ink); font-family: var(--sans); text-anchor: middle; pointer-events: none; }
.house .f-name { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.house .f-meta { font-size: 13px; }
.house .ground { fill: var(--ground); opacity: .45; pointer-events: none; }
.house .ground-line { stroke-dasharray: none; }
.house .ground-line { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.house a:focus-visible { outline: none; }
.house a:focus-visible .floor { stroke: var(--grape); stroke-width: 4; }

/* Unit rows on the overview */
.unit-list { display: grid; gap: 0; margin-top: 1.5rem; }
.unit-row { display: grid; grid-template-columns: 15rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.unit-row:last-child { border-bottom: 1px solid var(--line); }
.unit-row.is-hover { background: linear-gradient(90deg, var(--vine-soft), transparent 70%); }
.unit-row img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; width: 100%; background: var(--line); }
.unit-row .floor-label { color: var(--grape); font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.unit-row h3 { margin-bottom: .4rem; }
.unit-row h3 a { color: var(--ink); text-decoration: none; }
.unit-row h3 a:hover { color: var(--vine); }
.facts-inline { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; }
.facts-inline div { display: flex; flex-direction: column; }
.facts-inline dt { font-size: .85rem; color: var(--muted); }
.facts-inline dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 52rem) {
  .unit-row { grid-template-columns: 1fr; gap: .9rem; }
}

.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.2rem; border-radius: 6px; background: var(--vine); color: var(--paper); text-decoration: none; font-weight: 600; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.button:hover { background: var(--grape); color: var(--paper); }
.button.secondary { background: transparent; color: var(--vine); box-shadow: inset 0 0 0 2px var(--vine); }
.button.secondary:hover { color: var(--grape); box-shadow: inset 0 0 0 2px var(--grape); background: transparent; }

/* Location */
.two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; }
@media (max-width: 52rem) { .two-col { grid-template-columns: 1fr; } }
.map { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--vine-soft); border: 1px solid var(--line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map .consent { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .8rem; padding: 1.5rem; text-align: center; }
.map .consent p { font-size: .95rem; color: var(--muted); margin: 0; }
.small { font-size: .9rem; color: var(--muted); }

/* Contact */
.contact-line { font-size: 1.15rem; }

/* Detail page */
.back { display: inline-block; margin: 1.25rem 0 0; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }
.unit-head { padding: 1.5rem 0 1.5rem; }
.unit-head .floor-label { color: var(--grape); font-weight: 600; margin-bottom: .25rem; }
.unit-head .price { font-size: 1.15rem; margin: 0; }
.unit-head .price strong { font-size: 1.6rem; font-family: var(--serif); }

.gallery { display: grid; grid-template-columns: 3fr 1fr; gap: .6rem; }
.gallery .main { margin: 0; position: relative; }
.gallery .main button, .gallery .thumbs button { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; display: block; border-radius: 6px; overflow: hidden; }
.gallery .main img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--line); }
.gallery figcaption { font-size: .9rem; color: var(--muted); margin-top: .4rem; }
.gallery .thumbs { display: grid; gap: .6rem; align-content: start; grid-auto-rows: min-content; }
.gallery .thumbs button { cursor: pointer; opacity: .75; }
.gallery .thumbs button[aria-current="true"], .gallery .thumbs button:hover { opacity: 1; box-shadow: 0 0 0 3px var(--vine); }
.gallery .thumbs img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gallery .count { font-size: .9rem; color: var(--muted); }
@media (max-width: 40rem) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .thumbs { grid-template-columns: repeat(4, 1fr); }
}

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; padding-top: 2.5rem; padding-bottom: 1rem; }
.detail aside { position: sticky; top: 1rem; align-self: start; }
@media (max-width: 60rem) { .detail { grid-template-columns: minmax(0, 1fr); } .detail aside { position: static; order: -1; } }
.detail section { padding: 2rem 0; }
.detail section:first-child { padding-top: 0; }

.factsheet { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.25rem 1rem; }
.factsheet h2 { font-size: 1.25rem; }
.factsheet dl { margin: 0 0 1rem; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .97rem; }
.factsheet dt { color: var(--muted); }
.factsheet dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.factsheet .house { max-width: 12rem; margin: .5rem auto 1rem; }
.factsheet .house .f-meta { display: none; }
.factsheet .button { width: 100%; }

table.rooms { border-collapse: collapse; width: 100%; max-width: 32rem; font-variant-numeric: tabular-nums; }
table.rooms td { padding: .45rem 0; border-bottom: 1px solid var(--line); }
table.rooms td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
table.rooms tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--ink); }

ul.features { padding-left: 1.2rem; margin: 0; }
ul.features li { margin-bottom: .35rem; }

/* Energy */
.energy-scale { position: relative; margin: 2.2rem 0 1.25rem; }
.energy-scale .bar { display: grid; grid-template-columns: repeat(9, 1fr); height: 2rem; border-radius: 4px; overflow: hidden; }
.energy-scale .bar span { display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #1d2622; }
.energy-scale .marker { position: absolute; top: -1.9rem; transform: translateX(-50%); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.energy-scale .marker::after { content: ""; display: block; width: 2px; height: 3.6rem; background: var(--ink); margin: .1rem auto 0; }
.energy dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.energy dt { color: var(--muted); }
.energy dd { margin: 0; }
@media (max-width: 40rem) { .energy dl { grid-template-columns: 1fr; gap: 0; } .energy dd { margin-bottom: .5rem; } }

.floorplan { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .75rem; }

/* Form */
.inquiry { background: var(--surface); border-top: 1px solid var(--line); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; max-width: 46rem; }
.form .full { grid-column: 1 / -1; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; }
.form textarea { min-height: 8rem; resize: vertical; }
.form .check { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; }
.form .check input { width: auto; margin-top: .3rem; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .status { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.form .status.ok { color: var(--vine); }
.form .status.err { color: var(--grape); }
@media (max-width: 40rem) { .form { grid-template-columns: 1fr; } }

/* Lightbox */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; color: #fff; }
dialog.lightbox::backdrop { background: rgba(10, 14, 12, .9); }
dialog.lightbox img { max-width: 96vw; max-height: 82vh; object-fit: contain; margin: 0 auto; }
dialog.lightbox .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
dialog.lightbox button { background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 6px; padding: .5rem .9rem; font: inherit; cursor: pointer; }
dialog.lightbox button:hover { background: rgba(255, 255, 255, .25); }

/* Legal pages and footer */
.legal { max-width: 46rem; padding: 2.5rem 1.25rem 4rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--muted); font-size: .95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.site-footer nav { display: flex; gap: 1.25rem; }
.site-footer a { color: var(--muted); }
.loading { padding: 4rem 0; color: var(--muted); }