/* Generaal Winkelmanstraat 81 — site styles.
   Self-hosted variable fonts; nothing loads from other servers. */
@font-face{font-family:"Jost";src:url(/fonts/jost-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --paper:#FBFAF7;
  --paper-alt:#EFEEEA;
  --ink:#231C19;
  --ink-soft:#3B322D;
  --stone:#6F665F;
  --line:#DFDAD3;
  --brick:#6E2B22;
  --brick-deep:#56201A;
  --oak:#B4783C;
  --oak-ink:#86531F;
  --oak-light:#E7BC85;
  --sans:"Jost","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:1200px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --header:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px);-webkit-text-size-adjust:100%}
html.lb-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--oak-ink);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--brick)}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:50;background:#fff;color:var(--ink);padding:.6rem 1rem;font-family:var(--sans)}
.wrap{width:min(100% - 2 * var(--gutter), var(--wrap));margin-inline:auto}
h1,h2,h3{font-family:var(--sans);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin:0;color:inherit}
h2{font-size:clamp(2rem,3.4vw,2.85rem);font-weight:360}
h3{font-size:1.3rem;font-weight:480;letter-spacing:0}
p{margin:0 0 1em}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:2rem;height:var(--header)}
.brand{font-family:var(--sans);font-size:1.05rem;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{font-weight:400;color:var(--stone);margin-left:.3rem}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.98rem}
.site-nav a{color:var(--ink-soft);text-decoration:none}
.site-nav a:hover{color:var(--brick)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--sans);font-size:1.02rem;font-weight:500;line-height:1.2;padding:.95em 1.5em;border:1px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-primary{background:var(--brick);color:#fff}
.btn-primary:hover{background:var(--brick-deep);color:#fff}
.btn-ghost{border-color:rgba(35,28,25,.45);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn-small{font-size:.93rem;padding:.6em 1.05em;white-space:nowrap}
.lbl-short{display:none}
.btn-light{background:#fff;color:var(--brick)}
.btn-light:hover{background:var(--paper);color:var(--brick-deep)}
.btn-line-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-line-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* Brick */
.brick{background-color:var(--brick);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56'%3E%3Cg fill='%23000'%3E%3Crect x='56' y='0' width='56' height='14' opacity='.05'/%3E%3Crect x='28' y='14' width='56' height='14' opacity='.025'/%3E%3Crect x='0' y='28' width='56' height='14' opacity='.065'/%3E%3Crect x='84' y='42' width='28' height='14' opacity='.035'/%3E%3Crect x='0' y='42' width='28' height='14' opacity='.035'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='14' width='28' height='14' opacity='.022'/%3E%3Crect x='84' y='14' width='28' height='14' opacity='.022'/%3E%3Crect x='56' y='28' width='56' height='14' opacity='.025'/%3E%3Crect x='28' y='42' width='56' height='14' opacity='.015'/%3E%3C/g%3E%3Cpath d='M0 .5H112M0 14.5H112M0 28.5H112M0 42.5H112M.5 0V14M56.5 0V14M28.5 14V28M84.5 14V28M.5 28V42M56.5 28V42M28.5 42V56M84.5 42V56' stroke='%23ffe9dc' stroke-opacity='.1' fill='none'/%3E%3C/svg%3E");background-size:112px 56px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:min(calc(100svh - var(--header)),860px)}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,4vw,4.5rem) clamp(3rem,6vw,5rem) max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
.hero-place{font-family:var(--sans);font-size:1.02rem;color:var(--stone);margin:0 0 1.4rem}
.hero h1{font-size:clamp(2.55rem,5vw,4.6rem);font-weight:320;line-height:1.02;letter-spacing:-.025em}
.hero h1 span{display:block}
.hero-lead{font-size:clamp(1.15rem,1.5vw,1.32rem);line-height:1.55;color:var(--ink-soft);max-width:33ch;margin:1.6rem 0 2.2rem}
.price{display:flex;flex-direction:column;gap:.1rem;margin:0 0 2.2rem}
.price-label{font-family:var(--sans);font-size:.98rem;color:var(--stone)}
.price-value{font-family:var(--sans);font-size:clamp(1.85rem,2.6vw,2.35rem);font-weight:430;letter-spacing:-.01em;line-height:1.15}
.price-value small{font-size:.5em;font-weight:400;color:var(--stone);margin-left:.4em;letter-spacing:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-visual{position:relative;display:grid;place-items:center;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,4rem);overflow:hidden}
.frame{position:relative;margin:0;width:min(100%,410px);background:#fff;padding:clamp(10px,1.1vw,15px);box-shadow:0 2px 0 rgba(0,0,0,.18),0 34px 60px -28px rgba(18,5,2,.8);animation:rise 1s cubic-bezier(.2,.7,.2,1) .1s both}
.frame img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#E9E3DC}
.frame figcaption{font-family:var(--sans);font-size:.86rem;color:var(--stone);padding:.7rem .15rem .1rem}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Key facts */
.facts{border-bottom:1px solid var(--line)}
.facts dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.facts dl div{padding:1.55rem 1.4rem;border-left:1px solid var(--line)}
.facts dl div:first-child{border-left:0;padding-left:0}
.facts dt{font-family:var(--sans);font-size:.92rem;color:var(--stone)}
.facts dd{margin:.15rem 0 0;font-family:var(--sans);font-size:1.4rem;font-weight:420;white-space:nowrap}

/* Sections */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.section-alt{background:var(--paper-alt)}
.section-head{max-width:42rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head p{color:var(--stone);margin:1rem 0 0}
.prose{max-width:36rem}
.prose h2{margin-bottom:1.6rem}
.prose p{color:var(--ink-soft)}
.note{font-family:var(--sans);font-size:.88rem;color:var(--stone);margin:1.5rem 0 0}

/* About */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.about-photos{display:grid;gap:1.1rem;margin-top:.5rem}
.about-photos figure{margin:0}
.about-photos figure:nth-child(2){width:76%;margin-left:auto}
.about-photos figcaption{font-family:var(--sans);font-size:.88rem;color:var(--stone);padding-top:.5rem}

/* Floors */
.floors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.floor{display:flex;flex-direction:column}
.floor h3{margin-bottom:.4rem}
.floor > p{font-size:1.02rem;color:var(--ink-soft);margin:0 0 1.2rem;min-height:3.3em}
.plan{display:flex;align-items:center;justify-content:center;height:380px;padding:1.1rem;background:#fff;border:1px solid var(--line);cursor:zoom-in;transition:border-color .2s}
.plan:hover{border-color:var(--oak)}
.plan img{max-height:100%;max-width:100%;width:auto;height:auto;min-height:0}
.rooms{list-style:none;margin:1.2rem 0 0;padding:0;font-size:1rem}
.rooms li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);line-height:1.35}
.rooms li span:last-child{font-family:var(--sans);font-size:.94rem;color:var(--stone);white-space:nowrap}

/* Gallery */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.filters button{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.5em 1.05em;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--ink-soft)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.6rem 1rem}
.gallery figure{margin:0}
.gallery figure[hidden]{display:none}
.gallery a{display:block;cursor:zoom-in;background:#E6E1DA}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .25s}
.gallery a:hover img{opacity:.88}
.gallery figcaption{font-family:var(--sans);font-size:.88rem;color:var(--stone);padding-top:.45rem}

/* Area */
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.distances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2.5rem}
.distances h3{font-size:1.08rem;font-weight:500;margin-bottom:.5rem}
.distances ul{list-style:none;margin:0;padding:0}
.distances li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.35}
.distances li span:last-child{font-family:var(--sans);font-size:.94rem;color:var(--stone);white-space:nowrap}
.map{margin:2.5rem 0 0;max-width:30rem}
.map svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line)}
.map figcaption{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font-family:var(--sans);font-size:.95rem;padding-top:.8rem}
.map .ring{fill:none;stroke:var(--line);stroke-width:1}
.map .ring-label{font-family:var(--sans);font-size:12px;fill:var(--stone);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.map .poi circle{fill:var(--ink-soft)}
.map .poi text{font-family:var(--sans);font-size:13.5px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.map .home circle.dot{fill:var(--brick)}
.map .home circle.halo{fill:var(--brick);opacity:.16}
.map .home text{font-family:var(--sans);font-size:13.5px;font-weight:500;fill:var(--brick);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.map .north{font-family:var(--sans);font-size:11px;fill:var(--stone)}

/* Specs */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2.5rem,6vw,6rem)}
.specs h3{font-size:1.08rem;font-weight:500;margin:2.2rem 0 .4rem}
.specs > div > h3:first-child{margin-top:0}
.specs dl{margin:0}
.specs dl div{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--sans);font-size:.94rem;color:var(--stone)}
.specs dd{margin:0;font-size:1.02rem;line-height:1.45}

/* FAQ */
.narrow{max-width:50rem}
.faq h2{margin-bottom:1.75rem}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;font-family:var(--sans);font-size:1.16rem;font-weight:440;padding:1.2rem 2.75rem 1.2rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:.7rem;height:.7rem;border-right:1.5px solid var(--oak-ink);border-bottom:1.5px solid var(--oak-ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq details p{color:var(--ink-soft);max-width:62ch;margin:0 0 1.4rem}

/* Contact */
.contact{color:#fff;padding-block:clamp(4.5rem,9vw,7.5rem)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem 4rem;align-items:center}
.contact h2{font-size:clamp(2.2rem,4vw,3.3rem);font-weight:320;margin-bottom:1.2rem}
.contact p{color:rgba(255,255,255,.86);max-width:34ch;font-size:1.2rem;margin:0}
.contact-actions{display:flex;flex-direction:column;gap:.75rem;width:min(100%,23rem)}
.contact-actions .btn{justify-content:flex-start}

/* Footer */
.site-footer{background:var(--brick-deep);color:rgba(255,255,255,.75);font-family:var(--sans);font-size:.92rem;padding:2.5rem 0 3rem}
.site-footer .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem 4rem;align-items:start}
.site-footer strong{color:#fff;font-weight:500}
.site-footer p{margin:0;line-height:1.6}
.footer-note{max-width:62ch}
.footer-copy{grid-column:1 / -1;color:rgba(255,255,255,.55)}

/* Lightbox */
.lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(27,20,17,.95)}
.lb-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem .5rem 1.4rem;font-family:var(--sans);font-size:.95rem;color:rgba(255,255,255,.75)}
.lb-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:0 1rem 1.25rem;min-height:0}
.lb-figure{margin:0;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:calc(100% - 2.6rem);width:auto;height:auto;object-fit:contain}
.lb-caption{font-family:var(--sans);font-size:.95rem;color:rgba(255,255,255,.85);text-align:center;padding-top:.75rem}
.lb-btn{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background-color .2s}
.lb-btn:hover{background:rgba(255,255,255,.16)}
.lb-btn svg{width:1.25rem;height:1.25rem}

/* Responsive */
@media (max-width:1080px){
  .site-nav ul{gap:1.25rem}
  .facts dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts dl div:nth-child(4){border-left:0;padding-left:0}
  .facts dl div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:920px){
  .site-nav{display:none}
  .site-header .btn{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:2.25rem var(--gutter) 3rem}
  .hero-visual{order:-1;padding:2.25rem var(--gutter) 2.5rem}
  .frame{width:min(72vw,320px)}
  .about,.area,.specs{grid-template-columns:1fr}
  .floors{grid-template-columns:1fr;max-width:34rem}
  .floor > p{min-height:0}
  .plan{height:340px}
  .contact-grid{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .brand span{display:none}
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts dl div,.facts dl div:first-child{border-left:0;padding:1.05rem 0;border-top:1px solid var(--line)}
  .facts dl div:nth-child(-n+2){border-top:0}
  .facts dl div:nth-child(even){padding-left:1.25rem;border-left:1px solid var(--line)}
  .facts dd{font-size:1.25rem}
  .distances{grid-template-columns:1fr}
  .specs dl div{grid-template-columns:1fr;gap:.1rem}
  .hero-actions .btn{flex:1 1 100%}
  .lb-stage{grid-template-columns:minmax(0,1fr);padding-bottom:5rem}
  .lb-prev,.lb-next{position:fixed;bottom:1.25rem}
  .lb-prev{left:1.25rem}
  .lb-next{right:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .site-header,.filters,.lightbox,.contact-actions,.hero-actions,.map figcaption{display:none!important}
  .brick{background:none;color:var(--ink)}
  .contact h2,.contact p{color:var(--ink)}
}