/* GronTori — "kadaster": the site reads as a land document, not a shop window.
 *
 * The corpus is other people's advertising, and advertising is where the exaggeration lives.
 * The visual language pulls the other way on purpose: paper rather than glossy cards, ruled
 * lines rather than shadows, measurements set in a stamped monospace the way a meetbrief prints
 * them, and exactly one colour — surveyor's red — reserved for the things that are actually
 * consequential. Nothing here should look like it is selling.
 */

@font-face{font-family:Faustina;src:url(/assets/Faustina-600.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Faustina;src:url(/assets/Faustina-500.woff2)format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/PublicSans-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/PublicSans-600.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url(/assets/AzeretMono-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url(/assets/AzeretMono-500.woff2)format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Paper is warm-grey rather than cream: a filed document, not a wedding invitation. */
  --paper:#EDEBE1;
  --paper-2:#F6F4EC;
  --raise:#FFFFFF;
  --ink:#171A16;
  --pencil:#63675E;
  --faint:#8D9188;
  --line:#D2CFC1;
  --line-strong:#171A16;
  --red:#A8231C;
  --red-soft:#F2E3E1;
  --green:#2F6B45;
  --grid:rgba(23,26,22,.045);

  --display:Faustina,Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Azeret Mono",ui-monospace,Consolas,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --shell:1180px;
  --head-h:58px;
}

@media (prefers-color-scheme:dark){
  :root{
    /* Night reading is a blueprint, not an inverted page: cooler ground, the same red warmed
       just enough to keep its contrast against it. */
    --paper:#14171A; --paper-2:#191D21; --raise:#1E2328;
    --ink:#E7E4DB; --pencil:#9BA29B; --faint:#767D78;
    --line:#2C3238; --line-strong:#4A5158;
    --red:#E5736A; --red-soft:#33211F;
    --green:#6FBF8F;
    --grid:rgba(231,228,219,.04);
  }
}
:root[data-theme="light"]{
  --paper:#EDEBE1; --paper-2:#F6F4EC; --raise:#FFFFFF;
  --ink:#171A16; --pencil:#63675E; --faint:#8D9188;
  --line:#D2CFC1; --line-strong:#171A16; --red:#A8231C; --red-soft:#F2E3E1;
  --green:#2F6B45; --grid:rgba(23,26,22,.045);
}
:root[data-theme="dark"]{
  --paper:#14171A; --paper-2:#191D21; --raise:#1E2328;
  --ink:#E7E4DB; --pencil:#9BA29B; --faint:#767D78;
  --line:#2C3238; --line-strong:#4A5158; --red:#E5736A; --red-soft:#33211F;
  --green:#6FBF8F; --grid:rgba(231,228,219,.04);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- masthead ---------------------------------------------------- */
.mast{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1.5px solid var(--line-strong);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 15px,var(--grid) 15px 16px),
    repeating-linear-gradient(90deg,transparent 0 15px,var(--grid) 15px 16px);
}
.mast-in{max-width:var(--shell);margin:0 auto;padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-4);min-height:var(--head-h)}
.brand{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.02em;
  text-decoration:none;line-height:1;white-space:nowrap}
.brand em{font-style:normal;color:var(--red)}
.mast-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pencil);margin-left:auto;text-align:right;line-height:1.4}
.mast-nav{display:flex;gap:var(--sp-4);font-size:14px;margin-left:var(--sp-2)}
.mast-nav a{color:var(--pencil);text-decoration:none;padding:4px 0;border-bottom:1.5px solid transparent}
.mast-nav a:hover,.mast-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--red)}
@media (max-width:720px){ .mast-nav{display:none} .brand{font-size:21px} }

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--sp-4)}

/* ---------- filters ------------------------------------------------------ */
.filters{position:sticky;top:var(--head-h);z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line)}
.filter-row{max-width:var(--shell);margin:0 auto;display:flex;gap:var(--sp-2);
  padding:10px var(--sp-4);overflow-x:auto;scrollbar-width:none;align-items:center}
.filter-row::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;font-size:13px;padding:5px 11px;border:1px solid var(--line);
  background:var(--raise);color:var(--pencil);border-radius:2px;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease}
.chip:hover{border-color:var(--pencil);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.more[aria-expanded="true"]{border-color:var(--red);color:var(--red)}
.search{flex:1;min-width:150px;font:inherit;font-size:14px;padding:6px 10px;
  border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:2px}
.search::placeholder{color:var(--faint)}

.panel{display:none;border-top:1px solid var(--line);background:var(--paper-2)}
.panel[data-open]{display:block}
.panel-in{max-width:var(--shell);margin:0 auto;padding:var(--sp-4);
  display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pencil)}
.field select,.field input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);
  background:var(--raise);color:var(--ink);border-radius:2px;width:100%}
.pair{display:flex;gap:6px}
.checks{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);grid-column:1/-1}
.checks label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.checks input{accent-color:var(--red);width:15px;height:15px}
.panel-foot{grid-column:1/-1;display:flex;gap:var(--sp-3);align-items:center}
.linkbtn{background:none;border:0;padding:0;color:var(--red);cursor:pointer;
  font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ---------- result bar --------------------------------------------------- */
.resultbar{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4) 0 var(--sp-3);border-bottom:1.5px solid var(--line-strong)}
.count{font-family:var(--display);font-size:22px;font-weight:600}
.count b{font-variant-numeric:tabular-nums}
.resultbar .sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--pencil);
  text-transform:uppercase}
.sortsel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--pencil)}
.sortsel select{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--line);
  background:var(--raise);color:var(--ink);border-radius:2px}

/* ---------- listing rows ------------------------------------------------- */
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:92px 1fr;gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);position:relative}
.row .shot{width:92px;aspect-ratio:1;object-fit:cover;background:var(--paper-2);
  border:1px solid var(--line);filter:saturate(.86) contrast(1.02)}
.row .shot.blank{display:grid;place-items:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;color:var(--faint);text-align:center;padding:4px}
.kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pencil);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kicker .asset{color:var(--ink);font-weight:500}
.addr{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;margin:3px 0 1px;
  text-wrap:balance}
.addr a{text-decoration:none}
.addr a::after{content:"";position:absolute;inset:0}   /* whole row is the target */
.addr a:hover{color:var(--red)}
.place{font-size:13px;color:var(--pencil)}
.figs{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  border-top:1px solid var(--line-strong);margin-top:var(--sp-2);padding-top:5px}
.price{font-family:var(--display);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.price.none{font-family:var(--body);font-size:14px;font-weight:400;color:var(--faint)}
.meas{font-family:var(--mono);font-size:12px;color:var(--pencil);font-variant-numeric:tabular-nums}
.under{font-family:var(--mono);font-size:11.5px;color:var(--red);margin-top:4px;
  font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--sp-2)}
.tag{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;
  border:1px solid var(--line);background:var(--raise);color:var(--pencil);border-radius:2px}
.tag.eig{border-color:var(--ink);color:var(--ink)}
.tag.kaart{border-color:var(--red);color:var(--red)}
.tag.warn{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.row[data-current]{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--red)}
.row.is-sold{opacity:.58}
.row.is-sold .shot{filter:grayscale(1) opacity(.75)}
.banner{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:2px 7px;
  margin-top:var(--sp-2)}
.banner.melding{background:var(--red)}

.more-wrap{padding:var(--sp-6) 0 var(--sp-8);text-align:center}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 22px;border:1.5px solid var(--ink);background:var(--raise);color:var(--ink);
  cursor:pointer;border-radius:2px;transition:background .12s ease,color .12s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.red{border-color:var(--red);color:var(--red)}
.btn.red:hover{background:var(--red);color:#fff}
.btn[disabled]{opacity:.45;cursor:default}
.empty{padding:var(--sp-8) 0;text-align:center;color:var(--pencil);max-width:44ch;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.empty h2{font-family:var(--display);font-size:22px;margin:0;color:var(--ink)}

/* ---------- map ---------------------------------------------------------- */
#map{height:min(62vh,520px);border:1.5px solid var(--line-strong);background:var(--paper-2);
  margin:var(--sp-4) 0}
.leaflet-container{font-family:var(--body);background:var(--paper-2)}
.pin-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--pencil);
  margin-bottom:var(--sp-4)}
.dot-key{display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1.5px solid #A8231C}
.dot-key.exact{background:#A8231C}
.dot-key.vague{border-style:dashed;background:rgba(168,35,28,.12)}
.map-foot{display:flex;gap:var(--sp-4);align-items:baseline;flex-wrap:wrap;
  justify-content:space-between}
.map-foot .pin-note{margin-bottom:var(--sp-3);flex:1;min-width:240px}
.inview{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--pencil);
  cursor:pointer;white-space:nowrap;padding-bottom:var(--sp-3)}
.inview input{accent-color:var(--red);width:15px;height:15px}

/* ---------- the listing beside the list ----------------------------------- */
/* A drawer rather than an overlay: the results stay readable next to it, which is the whole
   reason it exists. The page is padded rather than shifted so the sticky filter bar keeps
   working and nothing ends up underneath. */
:root{--preview-w:min(560px,46vw)}
.preview{position:fixed;top:0;right:0;bottom:0;width:var(--preview-w);z-index:60;
  background:var(--paper);border-left:1.5px solid var(--line-strong);
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.preview[hidden]{display:none}   /* a flex box ignores [hidden] and would cover half the page */
body.has-preview{padding-right:var(--preview-w)}
.preview-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-4);background:var(--paper);border-bottom:1px solid var(--line-strong)}
.preview-full{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pencil);text-decoration:none}
.preview-full:hover{color:var(--red)}
.preview-close{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;background:none;border:1px solid var(--line);border-radius:2px;
  padding:5px 10px;cursor:pointer;color:var(--pencil)}
.preview-close:hover{border-color:var(--red);color:var(--red)}
.preview-body{flex:1}
.preview-body .doc{padding-top:0}
.preview-body .crumb{padding-top:var(--sp-3)}
.preview-body .gallery a:first-child{grid-column:auto}
.preview-body .gallery a:first-child img{aspect-ratio:4/3}
.preview-loading{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--pencil);
  padding:var(--sp-6) var(--sp-4)}
@media (max-width:1023px){ .preview{display:none} body.has-preview{padding-right:0} }

/* ---------- detail ------------------------------------------------------- */
.doc{max-width:820px;margin:0 auto;padding:0 var(--sp-4) var(--sp-8)}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pencil);padding:var(--sp-4) 0 0}
.crumb a{color:var(--pencil)}
.doc-head{padding:var(--sp-3) 0 var(--sp-4);border-bottom:1.5px solid var(--line-strong)}
.doc-head h1{font-family:var(--display);font-weight:600;font-size:clamp(26px,6vw,38px);
  line-height:1.1;margin:6px 0 4px;text-wrap:balance}
.doc-head .place{font-size:15px}
.headline-figs{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-3)}
.headline-figs .price{font-size:30px}
.gallery{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:var(--sp-4) 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);
  background:var(--paper-2)}
.gallery img.is-kaart{border:1.5px solid var(--red)}
.gallery a:first-child{grid-column:1/-1}
.gallery a:first-child img{aspect-ratio:16/10}
.spec{width:100%;border-collapse:collapse;margin:var(--sp-4) 0}
.spec th,.spec td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:14.5px}
.spec th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pencil);font-weight:400;width:42%;padding-right:var(--sp-3)}
.spec td{font-variant-numeric:tabular-nums}
h2.sec{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pencil);margin:var(--sp-6) 0 var(--sp-3);padding-bottom:5px;
  border-bottom:1px solid var(--line-strong);font-weight:400}
.adtext{white-space:pre-wrap;font-size:14.5px;line-height:1.6;color:var(--pencil);
  max-width:68ch;margin:0}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.srclist li{font-size:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.srclist .when{font-family:var(--mono);font-size:11px;color:var(--faint)}
.srclist .gone{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line)}
.srclist .src-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint);
  flex-basis:100%}
.hist{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:4px}
.hist .drop{color:var(--red)}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
#detail-map{height:260px;border:1.5px solid var(--line-strong);margin:var(--sp-3) 0}

/* ---------- report block -------------------------------------------------- */
.report{border:1px solid var(--line);background:var(--paper-2);padding:var(--sp-4);
  margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.report h2{font-family:var(--display);font-size:18px;font-weight:600;margin:0}
.report p{margin:0;font-size:14px;color:var(--pencil);max-width:60ch}
.report-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.rbtn{font-size:13px;padding:8px 13px;border:1px solid var(--line);background:var(--raise);
  color:var(--ink);cursor:pointer;border-radius:2px}
.rbtn:hover{border-color:var(--red);color:var(--red)}
.rbtn[disabled]{opacity:.5;cursor:default}
.report-state{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--red);
  min-height:1.2em}

/* ---------- prose pages ---------------------------------------------------- */
.prose{max-width:66ch;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-8)}
.prose h1{font-family:var(--display);font-weight:600;font-size:clamp(27px,5vw,38px);
  line-height:1.15;margin:0 0 var(--sp-4);text-wrap:balance}
.prose h2{font-family:var(--display);font-weight:600;font-size:21px;margin:var(--sp-6) 0 var(--sp-2)}
.prose p,.prose li{font-size:15.5px;line-height:1.65;color:var(--pencil)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{padding-left:1.1em}
.prose a{color:var(--red)}
.deftable{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:14.5px}
.deftable th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pencil);font-weight:400;
  border-bottom:1.5px solid var(--line-strong);padding:6px var(--sp-3) 6px 0}
.deftable td{border-bottom:1px solid var(--line);padding:9px var(--sp-3) 9px 0;
  vertical-align:top;color:var(--pencil)}
.deftable td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.scroll-x{overflow-x:auto}

/* ---------- district cards ------------------------------------------------- */
.dgrid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:var(--sp-4) 0 var(--sp-8)}
.dcard{border:1px solid var(--line);background:var(--raise);padding:var(--sp-4);
  text-decoration:none;display:flex;flex-direction:column;gap:4px}
.dcard:hover{border-color:var(--red)}
.dcard .n{font-family:var(--display);font-size:20px;font-weight:600}
.dcard .m{font-family:var(--mono);font-size:11px;color:var(--pencil);letter-spacing:.05em}

/* ---------- footer --------------------------------------------------------- */
.foot{border-top:1.5px solid var(--line-strong);margin-top:var(--sp-7);
  background:var(--paper-2)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7);
  display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot h3{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pencil);margin:0 0 var(--sp-2);font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.foot a{font-size:14px;color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--red)}
.foot p{margin:0;font-size:13px;color:var(--pencil);line-height:1.6}

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