/* Hoogerf · site · round 1 · desktop 1440
   Palette and type come from the approved hero: pine field, stone, linen, warm window light,
   Fraunces (opsz 144 display / 24 text) + Manrope captions.
   Grid: 64 margin · text column 64–516 · the band grid 580 | 867 | 1153 | 1440 (the timeline spine) */
:root{
  --pine:#1F2A24; --pine-2:#18211C; --stone:#B8B1A4; --linen:#F1ECE2; --paper:#E9E3D7;
  --window:#E8C48A; --ink:#1F2A24; --ink-2:#4E5650;
  --hair:rgba(241,236,226,.22); --hair-d:rgba(31,42,36,.18);
  /* fluid grid (r2): --u = 1px at 1440, grows to 1.333px at 1920, the frame stops at 1920 and centres (--gut).
     body is the size container, so cqw excludes the scrollbar */
  --fw:min(100cqw,1920px); --u:calc(var(--fw) / 1440); --s:min(var(--u),calc(100svh / 900)); --gut:calc((100cqw - var(--fw)) / 2);
  --m:calc(var(--gut) + 64*var(--u)); --col:calc(452*var(--u)); --edge:calc(var(--gut) + 580*var(--u));
  --c1:calc(var(--gut) + 580*var(--u)); --c2:calc(var(--gut) + 867*var(--u)); --c3:calc(var(--gut) + 1153*var(--u));
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--pine)}
body{container-type:inline-size;margin:0;min-width:1024px;background:var(--pine);color:var(--linen);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:none}
.cap{font:600 clamp(10.5px,calc(11*var(--u)),12.5px)/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.serif{font-family:Fraunces,serif;font-weight:300}
.d1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(71px,calc(82.6*var(--u)),99.1px);line-height:.96;letter-spacing:-.015em}
.d2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(44.4px,calc(51.6*var(--u)),61.9px);line-height:1;letter-spacing:-.013em}
.d3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(26.7px,calc(31*var(--u)),37.2px);line-height:1.08;letter-spacing:-.009em}
.lead{font-family:Fraunces,serif;font-weight:300;font-variation-settings:"opsz" 24;font-size:clamp(18px,calc(20*var(--u)),23px);line-height:1.55}
.body{font-family:Fraunces,serif;font-weight:300;font-variation-settings:"opsz" 18;font-size:clamp(16px,calc(17*var(--u)),19px);line-height:1.6}

/* surfaces: dark pine field and light linen paper alternate down the page */
.dark{background:var(--pine);color:var(--linen)}
.dark .muted{color:var(--stone)}
.light{background:var(--linen);color:var(--ink)}
.light .muted{color:var(--ink-2)}
.paper{background:var(--paper);color:var(--ink)}
.paper .muted{color:var(--ink-2)}
.light .cap.k,.paper .cap.k{color:#7A5A22}          /* window light, darkened for paper (≥ 4.5:1) */
.dark .cap.k{color:var(--window)}

/* buttons: solid + ghost (no underline, no arrows) */
.btn{display:inline-flex;align-items:center;white-space:nowrap;height:calc(54*var(--u));padding:0 calc(28*var(--u));font:600 14px/1 Manrope,sans-serif;letter-spacing:.01em;transition:background .25s,color .25s,border-color .25s}
.btn.solid{background:var(--window);color:var(--pine)}
.btn.solid:hover{background:var(--linen)}
.light .btn.solid,.paper .btn.solid{background:var(--pine);color:var(--linen)}
.light .btn.solid:hover,.paper .btn.solid:hover{background:#34443A}
.btn.ghost{border:1px solid currentColor;padding:0 calc(27*var(--u))}
.dark .btn.ghost{border-color:rgba(241,236,226,.5)}
.dark .btn.ghost:hover{border-color:var(--window);color:var(--window)}
.text-link{font:600 14px/1 Manrope,sans-serif;transition:color .25s}
.dark .text-link:hover{color:var(--window)}
.actions{display:flex;align-items:center;gap:calc(20*var(--u))}

/* ---------- header (inner pages) ---------- */
.site-head{position:relative;height:calc(120*var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);background:var(--pine);color:var(--linen);z-index:5}
.site-head.over{position:absolute;left:0;top:0;width:100%;background:none}
.wordmark{display:flex;align-items:center;gap:calc(12*var(--u));font-family:Fraunces,serif;font-weight:400;font-size:clamp(22.4px,calc(26*var(--u)),31.2px);letter-spacing:.015em;font-variation-settings:"opsz" 144;margin-top:-4px}
.wordmark svg{width:calc(26*var(--u));height:calc(20*var(--u))}
/* r6 nav: a dimension chain (maatketting) as on a section drawing, same as the hero: one hairline, 45° ticks
   between the items, Fraunces in sentence case; hover/current page = that segment turns gold */
.nav{position:relative;display:flex;margin-top:calc(9*var(--u));font-family:Fraunces,serif;font-weight:400;font-size:clamp(15px,calc(16*var(--u)),19.2px);line-height:1;letter-spacing:.01em;font-variation-settings:"opsz" 24}
.nav::after,.nav a::after{content:"";position:absolute;bottom:-4px;width:1px;height:9px;background:var(--linen);transform:rotate(45deg)}
.nav::after{right:0}
.nav a{position:relative;padding:0 calc(21*var(--u)) calc(14*var(--u))}
.nav a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(241,236,226,.62);transition:background-color .3s,box-shadow .3s}
.nav a::after{left:0}
.nav a:hover::before,.nav a[aria-current]::before{background:var(--window);box-shadow:0 1px 0 var(--window)}
.site-head:not(.over) .nav a[aria-current]{color:var(--window)}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:calc(136*var(--u)) var(--m)}
.sec-head{display:grid;grid-template-columns:var(--col) minmax(0,1fr);column-gap:calc(64*var(--u));align-items:end;margin-bottom:calc(72*var(--u))}
.sec-head .cap{margin-bottom:calc(26*var(--u))}
.sec-head p{max-width:calc(520*var(--u))}

/* ---------- the spine: the hero's timeline band, reused ---------- */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;border-top:1px solid var(--hair)}
.light .band,.paper .band{border-top-color:var(--hair-d)}
.band .ph{position:relative;padding:calc(32*var(--u)) calc(36*var(--u)) 0;border-left:1px solid var(--hair)}
.light .band .ph,.paper .band .ph{border-left-color:var(--hair-d)}
.band .ph::before{content:"";position:absolute;left:0;top:-2px;height:3px;width:calc(var(--p,0)*100%);background:var(--window);transition:width 1.2s cubic-bezier(.3,.6,.2,1)}
.band .ph::after{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;background:var(--pine);border:1px solid var(--stone)}
.light .band .ph::after,.paper .band .ph::after{background:var(--linen);border-color:#8C877D}
.band .ph.started::after{background:var(--window);border-color:var(--window)}
.band .ph .cap{display:block}
.band .ph .w{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(32.5px,calc(37.8*var(--u)),45.4px);line-height:1;letter-spacing:-.011em;margin-top:calc(16*var(--u))}
.band .ph .d{display:block;margin-top:calc(14*var(--u))}

/* ---------- contact band (shared) ---------- */
.contact-band{display:grid;grid-template-columns:var(--col) minmax(0,1fr);column-gap:calc(64*var(--u));padding:calc(128*var(--u)) var(--m) calc(136*var(--u))}
.contact-band .d2{margin-top:calc(26*var(--u))}
.contact-band .body{margin-top:calc(28*var(--u));max-width:calc(430*var(--u))}
.contact-band .note{margin-top:calc(40*var(--u))}
.form{display:grid;grid-template-columns:1fr 1fr;gap:calc(28*var(--u)) calc(36*var(--u));align-content:start;padding-top:8px;margin-left:calc(var(--c1) - var(--m) - var(--col) - calc(64*var(--u)))}
.field{display:flex;flex-direction:column;gap:calc(14*var(--u))}
.field span{color:var(--stone)}
.field input,.field select{appearance:none;background:none;border:0;border-bottom:1px solid rgba(241,236,226,.4);color:var(--linen);font:300 20px/1.2 Fraunces,serif;font-variation-settings:"opsz" 24;padding:6px 0 calc(12*var(--u));outline:none;border-radius:0}
.field input::placeholder{color:rgba(241,236,226,.5)}
.field input:focus,.field select:focus{border-bottom-color:var(--window)}
.field select option{color:#1F2A24}
.form .wide{grid-column:1/-1}
.form .submit{grid-column:1/-1;display:flex;align-items:center;gap:calc(28*var(--u));margin-top:calc(12*var(--u))}
.form .submit .muted{font-size:13px}

/* ---------- footer ---------- */
.site-foot{background:var(--pine-2);color:var(--stone);padding:calc(72*var(--u)) var(--m) calc(56*var(--u))}
.site-foot .top{display:grid;grid-template-columns:calc(var(--c1) - var(--m)) repeat(3,1fr);align-items:start}
.site-foot .wordmark{color:var(--linen)}
.site-foot .col{padding-left:calc(36*var(--u));display:flex;flex-direction:column;gap:calc(14*var(--u));font-size:14px}
.site-foot .col .cap{color:var(--linen);margin-bottom:8px}
.site-foot .col a:hover{color:var(--window)}
.site-foot .spine{display:grid;grid-template-columns:calc(var(--c1) - var(--m)) repeat(3,1fr);margin-top:calc(64*var(--u));border-top:1px solid rgba(241,236,226,.14);padding-top:calc(22*var(--u))}
.site-foot .spine span{padding-left:calc(36*var(--u))}
.site-foot .spine span:first-child{padding-left:0}
.site-foot .legal{display:flex;gap:calc(36*var(--u));margin-top:calc(28*var(--u));font-size:13px;color:#8F8A80}
.site-foot .legal a{color:var(--stone);transition:color .25s}
.site-foot .legal a:hover{color:var(--window)}
.site-foot .legal span:last-child{margin-left:auto}

/* documents: inert download buttons (r2) */
.docs{display:flex;flex-wrap:wrap;gap:calc(14*var(--u)) calc(16*var(--u))}
.docs .btn{height:calc(48*var(--u));font-size:13px}
.docs .btn small{font:600 10px/1 Manrope,sans-serif;letter-spacing:.14em;margin-left:12px;opacity:.7}

/* keyboard focus: one visible ring everywhere (r2) */
:focus-visible{outline:2px solid var(--window);outline-offset:3px}
.light :focus-visible,.paper :focus-visible{outline-color:#7A5A22}

/* ---------- images: one quiet frame style ---------- */
.ph-img{position:relative;overflow:hidden;background:#2A352E}
.ph-img img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:calc(20*var(--u));bottom:calc(20*var(--u));background:var(--pine);color:var(--linen);padding:9px calc(12*var(--u))}

/* one subtle motion per section: elements with data-reveal fade up once */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .band .ph::before,.nav a::before,.btn{transition:none}
}

/* ---------- the drawn site plan ---------- */
.siteplan .sp-l{font:600 10px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;fill:#4E5650}
.siteplan .sp-n{font:300 clamp(22.4px,calc(26*var(--u)),31.2px) Fraunces,serif;fill:#1F2A24;text-anchor:middle}
.siteplan .lot{stroke:#1F2A24;stroke-width:1}
.siteplan .beschikbaar .lot{fill:rgba(232,196,138,.75)}
.siteplan .optie .lot{fill:url(#optie)}
.siteplan .verkocht .lot{fill:#C9C1B2}
.siteplan .fp{fill:#1F2A24}
.siteplan .verkocht .fp{fill:#5F665F}
.siteplan .plot[tabindex]{cursor:pointer;outline:none}
.siteplan .plot[tabindex]:hover .lot,.siteplan .plot[tabindex]:focus-visible .lot{stroke-width:2.5}
.siteplan .plot.sel .lot{stroke-width:3.5}
.chip{display:inline-block;padding:7px calc(10*var(--u)) 6px;font:600 10px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--pine)}
.chip.beschikbaar{background:var(--pine);color:var(--linen)}
.chip.optie{background:repeating-linear-gradient(45deg,transparent 0 4px,rgba(31,42,36,.12) 4px 6px)}
.chip.verkocht{border-color:rgba(31,42,36,.35);color:var(--ink-2)}

/* ---------- drawn plans (villa) ---------- */
.plan .pl-l,.kavelplan .pl-l{font:600 10px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;fill:#1F2A24}
.kavelplan .pl-l.w{fill:#F1ECE2}
.plan .pl-a{font:300 17px Fraunces,serif;fill:#1F2A24}
.plan .pl-s,.kavelplan .pl-s{font:500 11px Manrope,sans-serif;letter-spacing:.04em;fill:#4E5650}

/* ---------- page head (inner pages without a photo hero) ---------- */
.page-head{display:grid;grid-template-columns:minmax(var(--col),max-content) minmax(0,1fr);column-gap:calc(64*var(--u));padding:calc(96*var(--u)) var(--m) calc(112*var(--u));align-items:end;border-bottom:1px solid var(--hair)}
.page-head .d1{margin-top:calc(28*var(--u))}
.page-head .lead{max-width:calc(560*var(--u));color:var(--stone)}

/* ---------- r3 · personality: people, the founder's note, the kavelboek, the kavelochtend ---------- */
/* founder's note: portrait left on the text column, the note in his words, signed */
.founder{display:grid;grid-template-columns:calc(var(--col) - 64*var(--u)) minmax(0,1fr);column-gap:calc(128*var(--u));align-items:start;padding:calc(144*var(--u)) var(--m)}
.founder .ph-img{height:calc(520*var(--u))}
.founder .d3{margin-top:calc(26*var(--u));max-width:calc(720*var(--u))}
.founder .body{margin-top:calc(28*var(--u));max-width:calc(600*var(--u))}
.founder .body + .body{margin-top:calc(16*var(--u))}
.founder .sign{display:flex;align-items:center;gap:calc(16*var(--u));margin-top:calc(40*var(--u))}
.founder .sign b{font:400 clamp(22px,calc(26*var(--u)),31px)/1 Fraunces,serif;font-variation-settings:"opsz" 30}
.founder .sign i{display:block;width:calc(40*var(--u));height:1px;background:currentColor;opacity:.5}
.founder .actions{margin-top:calc(44*var(--u))}

/* team: four people, portrait 4:5, first name, role, one human line */
.team{padding:calc(136*var(--u)) var(--m)}
.team .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(40*var(--u))}
.team .ph-img{aspect-ratio:4/5}
.team h3{font:400 clamp(22.2px,calc(25.8*var(--u)),31px)/1.1 'DM Serif Display',Georgia,serif;margin-top:calc(26*var(--u))}
.team .cap{display:block;margin-top:calc(12*var(--u))}
.team .body{margin-top:calc(16*var(--u));max-width:calc(290*var(--u))}
.team .sec-head .body{margin-top:0;max-width:calc(440*var(--u))}
.team.short .grid{column-gap:calc(32*var(--u))}
.team.short .body{font-size:clamp(15px,calc(16*var(--u)),18px)}
.team .more{margin-top:calc(56*var(--u))}

/* kavelboek (the plot diary): dated entries, each with the height the house reached that day,
   read off the same gold measuring line as the hero */
.diary{padding:calc(136*var(--u)) var(--m)}
.diary .book{border-top:1px solid var(--hair-d)}
.dark .diary .book,.diary.dark .book{border-top-color:var(--hair)}
.diary .e{display:grid;grid-template-columns:calc(var(--col) - 64*var(--u)) calc(180*var(--u)) minmax(0,1fr) calc(220*var(--u));column-gap:calc(64*var(--u));align-items:baseline;padding:calc(28*var(--u)) 0;border-bottom:1px solid var(--hair-d)}
.diary.dark .e{border-bottom-color:var(--hair)}
.diary .e .cap{color:inherit}
.diary .lvl{position:relative;font:600 clamp(12px,calc(13*var(--u)),15px)/1 Manrope,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:calc(34*var(--u))}
.diary .lvl::before{content:"";position:absolute;left:0;top:50%;width:calc(22*var(--u));height:1px;background:currentColor}
.light .diary .lvl,.diary.light .lvl,.diary.paper .lvl{color:#7A5A22}
.diary.dark .lvl{color:var(--window)}
.diary .e p{font:300 clamp(18px,calc(20*var(--u)),23px)/1.45 Fraunces,serif;font-variation-settings:"opsz" 24;max-width:calc(620*var(--u))}
.diary .e .who{text-align:right}
.diary .foot{display:flex;justify-content:space-between;align-items:center;margin-top:calc(44*var(--u))}

/* kavelochtend: the reason to come back */
.visit2{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--col) + 64*var(--u));column-gap:calc(96*var(--u));align-items:center;padding:calc(136*var(--u)) var(--m) calc(136*var(--u)) 0}
.visit2 .ph-img{height:calc(600*var(--u))}
.visit2 .d2{margin-top:calc(26*var(--u))}
.visit2 .body{margin-top:calc(28*var(--u));max-width:calc(440*var(--u))}
.visit2 .when{display:grid;grid-template-columns:auto 1fr;gap:calc(14*var(--u)) calc(28*var(--u));margin-top:calc(40*var(--u));padding-top:calc(26*var(--u));border-top:1px solid var(--hair-d)}
.dark .visit2 .when,.visit2.dark .when{border-top-color:var(--hair)}
.visit2 .when dd{font:300 clamp(18px,calc(20*var(--u)),23px)/1.3 Fraunces,serif;font-variation-settings:"opsz" 24}
.visit2 .actions{margin-top:calc(44*var(--u))}

/* people photo with a caption in the person's own words */
.said{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:calc(64*var(--u));align-items:end;padding:calc(136*var(--u)) var(--m)}
.said .ph-img{height:calc(620*var(--u))}
.said .pair{display:grid;grid-template-rows:auto auto;row-gap:calc(48*var(--u))}
.said .pair .ph-img{height:calc(330*var(--u))}
.said blockquote{margin:0;font:300 clamp(25.8px,calc(30*var(--u)),36px)/1.25 Fraunces,serif;font-variation-settings:"opsz" 72;letter-spacing:-.01em;max-width:calc(480*var(--u))}
.said figcaption{margin-top:calc(22*var(--u))}
.pending{display:flex;align-items:flex-end;padding:calc(20*var(--u));background:#DDD6C8;color:var(--ink-2)}
.dark .pending{background:#2A352E;color:var(--stone)}
.ph-img img{object-position:var(--op,50% 50%)}
.diary .dh{display:flex;align-items:end;justify-content:space-between;gap:calc(48*var(--u))}
.diary .dh .ph-img{flex:none;width:calc(240*var(--u));height:calc(240*var(--u))}

/* r4: skip link (visible on keyboard focus) and the fine print under forms */
.skip{position:absolute;left:var(--m);top:-60px;z-index:20;background:var(--window);color:#1F2A24;font:600 14px/1 Manrope,sans-serif;padding:12px 16px}
.skip:focus{top:12px}
.fine{font:500 13px/1.5 Manrope,sans-serif}
.fine a{text-decoration:underline;text-underline-offset:3px}
.soon .row .fine{flex-basis:100%;margin-top:4px}
.soon .row{flex-wrap:wrap}

/* ===== r4 · own visual idea: "de kavel, van boven en in seizoenen" (PATTERNS-sites-r4, Hoogerf H1–H7) ===== */
/* surfaces: linen + pine, away from the batch's beige (the hero keeps its own colours) */
:root{--sheet:#EFEEE6;--paper:#E3E6DC}
.light{background-color:var(--sheet)}
.dark{--gl:rgba(241,236,226,.16);--tk:var(--window)}
.light,.paper{--gl:rgba(31,42,36,.18);--tk:#A87B35}
/* r9 (Moreno 19 Oct, option C): every heading in DM Serif Display, sizes × .86 so each keeps its approved width */
.d1{letter-spacing:-.005em}
.d2{letter-spacing:0}
.d3{letter-spacing:.004em}
/* every H2 carries a survey number to its left (Manrope tabular), on a short rule like a level mark */
/* set vertically in the margin, reading upward like dimension text on a drawing, with a short rule beside it */
.d2[data-sv]{position:relative}
.d2[data-sv]::before{content:attr(data-sv);position:absolute;right:calc(100% + 12px);top:.12em;writing-mode:vertical-rl;transform:rotate(180deg);font:600 11px/1 Manrope,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:7px;border-left:1px solid currentColor;color:var(--tk)}
/* H2: the band grid (c1/c2/c3) drawn on every section like the lines of a site drawing, amber ticks where it crosses the section edge */
/* r5: the survey lines are short marks at each section edge (64 px down from the top tick, 64 px up from the bottom tick), so they never cross text */
main>section[class]{--seg:64px;background-image:linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--gl),var(--gl)),linear-gradient(var(--tk),var(--tk)),linear-gradient(var(--tk),var(--tk)),linear-gradient(var(--tk),var(--tk)),linear-gradient(var(--tk),var(--tk)),linear-gradient(var(--tk),var(--tk)),linear-gradient(var(--tk),var(--tk));background-size:1px var(--seg),1px var(--seg),1px var(--seg),1px var(--seg),1px var(--seg),1px var(--seg),9px 1px,9px 1px,9px 1px,9px 1px,9px 1px,9px 1px;background-position:var(--c1) 0,var(--c2) 0,var(--c3) 0,var(--c1) 100%,var(--c2) 100%,var(--c3) 100%,calc(var(--c1) - 4px) 0,calc(var(--c2) - 4px) 0,calc(var(--c3) - 4px) 0,calc(var(--c1) - 4px) 100%,calc(var(--c2) - 4px) 100%,calc(var(--c3) - 4px) 100%;background-repeat:no-repeat}
/* buttons: amber solid + the r6.1 Hoogerf ghost (see the end of this file) */
.light .btn.solid,.paper .btn.solid{background:var(--window);color:var(--pine)}
.light .btn.solid:hover,.paper .btn.solid:hover{background:#D9AE6A}
/* H5: the principles as call-outs on the kavel map (home) */
.note-co{position:absolute;width:calc(250*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));background:rgba(239,238,230,.94);color:var(--ink);font:300 clamp(13px,calc(15*var(--u)),17px)/1.35 Fraunces,serif;font-variation-settings:"opsz" 18}
.note-co b{display:block;margin-bottom:calc(6*var(--u));color:#7A5A22}
.light .d2[data-sv]::before,.paper .d2[data-sv]::before{color:#7A5A22}
/* r5 · hover states that were missing (found by hovering every link and button on every page) */
.fine a{transition:color .25s}
.dark .fine a:hover{color:var(--window)}
.light .fine a:hover,.paper .fine a:hover{color:#7A5A22}
a.ref .ph-img img,a.ph-img img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
a.ref:hover .ph-img img,a.ph-img:hover img,a.ref:focus-visible .ph-img img{transform:scale(1.03)}
a.ref h3{transition:color .25s}
a.ref:hover h3{color:#7A5A22}
.plan-wrap .siteplan{transition:filter .3s}
.plan-wrap:hover .siteplan{filter:brightness(.97) saturate(1.2)}
.faq summary{transition:color .25s}
.faq summary:hover{color:#7A5A22}
.tabs button{transition:background-color .25s}
.tabs button[aria-selected="false"]:hover{background:rgba(31,42,36,.08)}
.spine-row .aside .text-link{padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.spine-row .aside .text-link:hover{color:var(--window)}
@media (prefers-reduced-motion:reduce){a.ref .ph-img img,a.ph-img img{transition:none}}
/* r6 · Hoogerf hover = the peil (survey level mark). No line grows or changes on hover: a small amber level triangle
   runs along the existing hairline, the way a surveyor slides a level mark to the height being read.
   Nav: the mark opens onto the middle of the hovered segment (the gold segment stays the current page only).
   Underlined text links: the mark travels the underline from its start to its end and the text turns amber. */
:root{--peil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23E8C48A'/%3E%3C/svg%3E");--peil-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%237A5A22'/%3E%3C/svg%3E")}
.nav a{background:var(--peil) 50% calc(100% - 2px)/0 0 no-repeat;transition:background-size .35s cubic-bezier(.3,.7,.2,1),color .3s}
.nav a:hover::before{background:rgba(241,236,226,.62);box-shadow:none}
.nav a[aria-current]::before{background:var(--window);box-shadow:0 1px 0 var(--window)}
.nav a:hover{background-size:9px 6px;color:var(--window)}
.spine-row .aside .text-link,.docs-row .text-link{padding-bottom:9px;border:0;background:var(--peil) -14px calc(100% - 2px)/9px 6px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .3s,background-position .6s cubic-bezier(.3,.7,.2,1)}
.docs-row .text-link{background-image:var(--peil-d),linear-gradient(currentColor,currentColor)}
.spine-row .aside .text-link:hover{color:var(--window);background-image:var(--peil),linear-gradient(currentColor,currentColor);background-size:9px 6px,100% 1px;background-repeat:no-repeat;background-position:100% calc(100% - 2px),0 100%}
.docs-row .text-link:hover{color:#7A5A22;border:0;background-color:transparent;background-image:var(--peil-d),linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:100% calc(100% - 2px),0 100%;background-size:9px 6px,100% 1px}
.text-link:focus-visible{background-position:100% calc(100% - 2px),0 100%}
@media (prefers-reduced-motion:reduce){.nav a,.btn.ghost,.text-link{transition:none}}
/* r6 · a little more motion (only with motion allowed; ?static and reduced motion show the end state):
   the site plan draws itself as a surveyor would set it out: plot lines first, one kavel after the other, then the
   houses and numbers; the pines settle in underneath. Photographs retain their static crop while scrolling. */
.moving .siteplan .lot{stroke-dasharray:1 1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset 1.3s cubic-bezier(.45,.1,.2,1) calc(var(--i)*.22s),fill-opacity .8s ease calc(.9s + var(--i)*.22s)}
.moving .siteplan .fp,.moving .siteplan .sp-n{opacity:0;transition:opacity .7s ease calc(1.3s + var(--i)*.22s)}
.moving .siteplan .pn{opacity:0;transition:opacity 1.6s ease .2s}
.moving .siteplan.in .lot{stroke-dashoffset:0;fill-opacity:1}
.moving .siteplan.in .fp,.moving .siteplan.in .sp-n{opacity:1}
.moving .siteplan.in .pn{opacity:.55}

/* r6.1 · ghost button = a hairline frame like a plot outline on the drawing: no underline, 45° set-out ticks at the
   two bottom corners (as on the nav's dimension chain). Hover: the frame and text turn amber and the peil opens onto
   the middle of the top edge. Duig's ghost is a plain box with a fill hover; this one never fills. */
.btn.ghost,.dark .btn.ghost,.light .btn.ghost,.paper .btn.ghost{position:relative;height:calc(54*var(--u));padding:0 calc(27*var(--u));border:1px solid;background:var(--peil) 50% 1px/0 0 no-repeat;transition:color .3s,border-color .3s,background-size .35s cubic-bezier(.3,.7,.2,1)}
.dark .btn.ghost{color:var(--linen);border-color:rgba(241,236,226,.55)}
.light .btn.ghost,.paper .btn.ghost{color:var(--ink);border-color:rgba(31,42,36,.42);background-image:var(--peil-d)}
.btn.ghost::before,.btn.ghost::after{content:"";position:absolute;bottom:-6px;width:1px;height:11px;background:currentColor;opacity:.75;transform:rotate(45deg)}
.btn.ghost::before{left:-1px}
.btn.ghost::after{right:-1px}
.dark .btn.ghost:hover,.dark .btn.ghost:focus-visible{color:var(--window);border-color:var(--window);background-size:9px 6px}
.light .btn.ghost:hover,.paper .btn.ghost:hover,.light .btn.ghost:focus-visible,.paper .btn.ghost:focus-visible{color:#7A5A22;border-color:#7A5A22;background-color:transparent;background-image:var(--peil-d);background-repeat:no-repeat;background-position:50% 1px;background-size:9px 6px}
@media (prefers-reduced-motion:reduce){.btn.ghost{transition:none}}
/* r6.1: the framed ghost is wider than the old link, so a button row wraps instead of running off a narrow page (1024) */
.actions{flex-wrap:wrap;row-gap:calc(18*var(--u))}
/* r7.4 · kavelboek locator: the five Heidezoom plots, the entry's plot filled */
.diary .lvl .loc{display:block;width:calc(64*var(--u));height:auto;margin-top:calc(12*var(--u))}
.diary .lvl .loc polygon{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
.diary .lvl .loc .on{fill:currentColor;opacity:1}
.diary .lvl:has(.loc)::before{top:.5em}
/* r9.1: the header comes back on scroll up (js/pin-nav.js?v=r9.5) · opaque pine bar, hairline below, no shadow over text */
.site-head.pin{position:fixed;left:0;right:0;top:0;height:calc(76*var(--u));min-height:60px;background:var(--pine);border-bottom:1px solid var(--hair);z-index:60;transform:translateY(-101%);transition:transform .38s cubic-bezier(.3,.7,.2,1);visibility:hidden}
.site-head.pin.show{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.3,.7,.2,1),visibility 0s}
.site-head.pin:not(.show){transition:transform .3s cubic-bezier(.4,0,.6,1),visibility 0s .3s}
.site-head.pin .nav{margin-top:calc(6*var(--u))}
.site-head.pin .nav a{padding-bottom:calc(10*var(--u))}
@media (prefers-reduced-motion:reduce){.site-head.pin,.site-head.pin.show,.site-head.pin:not(.show){transition:none}}
/* r9.1 pass: the last phase photo ends 0.5 px past the viewport at 1024–1044 and 1080 (iPad gen 7 landscape), a 1 px sideways scroll;
   clip (not hidden: no scroll container, nothing visible moves) stops the page scrolling sideways */
html{overflow-x:clip}
/* r9.3 forms: errors next to the field, success state in place of the fields (js/forms.js; nothing is sent) */
.field .err{font:600 13px/1.35 Manrope,sans-serif;letter-spacing:.01em;color:#F2A88C;margin-top:-4px}
.light .field .err,.paper .field .err{color:#9C3A1A}
.field input[aria-invalid="true"]{border-bottom-color:#F2A88C}
.light .field input[aria-invalid="true"],.paper .field input[aria-invalid="true"]{border-bottom-color:#9C3A1A}
form.is-done>:not(.form-done){display:none!important}
.form-done{grid-column:1/-1;max-width:calc(560*var(--u));padding-top:calc(4*var(--u));outline:none}
.form-done .lead{color:inherit}
.form-done .body{margin-top:calc(14*var(--u))}
.form-done .text-link{margin-top:calc(22*var(--u));padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.dark .form-done .text-link:hover{color:var(--window)}
.light .form-done .text-link:hover,.paper .form-done .text-link:hover{color:#7A5A22}