@import url("./responsive-1020.css");
@import url("./wide-1020.css");
@import url("./editorial-1020.css");
@import url("./b3.css");
@import url("./c.css");
@import url("./e.css");
@import url("./f.css");
@import url("./r1.css");
@import url("./r2.css");
/* Hoogerf · award round ?opt=aw (19 Oct 2026) · loaded only on ?opt=aw pages, after site.css
   A1 founder quote = the page's one oversized type moment   A2 photos rise from their ground line on scroll
   A3 h2 lines rise from a baseline                          A4 the kijkmiddag interior framed in the Hoogerf gable */

/* A1 */
.founder{row-gap:calc(72*var(--u))}
.founder .aw-quote{grid-column:1/-1;margin:0;font:400 clamp(52px,calc(76*var(--u)),96px)/1.06 'DM Serif Display',Georgia,serif;letter-spacing:-.012em;color:var(--ink);max-width:calc(1180*var(--u))}
.founder .aw-quote .q{color:#A87B35}
.founder .aw-quote + .ph-img{margin-top:0}

/* A2 (JS adds .aw-rv to photos below the hero; .in when 18 % is in view). Compositor only: a cover in the section colour
   shrinks upward (transform), so the photo appears from its ground line; the photo settles from 1.07 */
.light{--aw-bg:var(--sheet)} .paper{--aw-bg:var(--paper)} .dark{--aw-bg:var(--pine)}
html.moving .aw-rv::after{content:"";position:absolute;inset:-1px;background:var(--aw-bg,#EFEEE6);transform-origin:50% 0;transform:scaleY(1);transition:transform 1.25s cubic-bezier(.22,.7,.18,1);will-change:transform;pointer-events:none;z-index:1}
html.moving .aw-rv img{transform:scale(1.07);transform-origin:50% 100%;transition:transform 1.8s cubic-bezier(.22,.7,.18,1);will-change:transform}
html.moving .aw-rv.in::after{transform:scaleY(0)}
html.moving .aw-rv.in img{transform:none}

/* A3 */
.aw-h .aw-l{display:block}
html.moving .aw-h .aw-l{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
html.moving .aw-h .aw-l>span{display:block;transform:translateY(108%);transition:transform 1s cubic-bezier(.22,.7,.18,1);transition-delay:calc(var(--i) * 110ms)}
html.moving .aw-h.in .aw-l>span{transform:none}

/* A4 · gable = the wordmark's house (walls + 43° roof), drawn as the photo's frame */
.visit2 .ph-img.aw-gable{clip-path:polygon(0 41%,50% 0,100% 41%,100% 100%,0 100%);height:calc(640*var(--u))}
@media (prefers-reduced-motion:reduce){.aw-rv::after{display:none!important}.aw-rv img,.aw-h .aw-l>span{transition:none!important;transform:none!important}}
@media (max-width:1023px){.founder .aw-quote{font-size:clamp(30px,6.4vw,48px)}.visit2 .ph-img.aw-gable{height:auto;aspect-ratio:4/5}}

/* Villa Heide · full-width room, 1440 × 760 at the approved desktop viewport.
   The derivatives share a centred 36:19 crop; no text overlays the image. */
.aw-ph[data-placeholder="villa-vide"]{position:relative;aspect-ratio:36/19;overflow:hidden;background:#2A352E}
.aw-ph[data-placeholder="villa-vide"] picture{display:block;width:100%;height:100%}
.aw-ph[data-placeholder="villa-vide"] img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* Independent B review · 21 October 2026. Same grid, typefaces and palette. */
/* Readable copy on pine; keep larger existing editorial sizes. */
html:root .dark :is(.body,.lead){color:var(--linen)}
html:root .dark .body{font-size:clamp(17px,calc(19*var(--u)),23px);line-height:1.65}
html:root[data-page="over"] .team .p>.body{font-size:17px;line-height:1.7;color:var(--linen)}
html:root .dark :is(.fine,.form .submit>.muted,.b3-contact-detail){font-size:16px;line-height:1.65;color:var(--linen)}
html:root .team .p>.cap{font-size:12px;line-height:1.6;color:var(--stone)}
html:root .site-foot .col{font-size:16px;line-height:1.6;color:var(--linen);min-width:0;overflow-wrap:anywhere}
html:root .site-foot .legal{font-size:16px;line-height:1.6;color:var(--stone);flex-wrap:wrap;gap:16px 32px}
html:root .site-foot .legal a{color:var(--linen)}
html:root .site-foot .col a{min-height:32px}
html:root .site-foot .col .cap{line-height:1.5}

/* Text feedback also covers chapter links, credits, telephone and wordmarks. */
html:root a:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
html:root button:not(.btn):is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:.25em}
html:root .btn:is(:hover,:focus-visible){box-shadow:inset 0 -3px 0 #A87B35}
html:root .award-index a:is(:hover,:focus-visible){color:var(--window)}
html:root .filters button:is(:hover,:focus-visible){background:var(--window);border-color:var(--window);color:var(--pine)}
html:root .filters button span{opacity:1}
html:root .filters button{font-size:14px}
html:root .ref:is(:hover,:focus-visible){color:#7A5A22}
html:root .plan-wrap:is(:hover,:focus-visible){filter:brightness(.96)}
html:root .siteplan .plot:is(:hover,:focus-visible){filter:brightness(.88)}
html:root .siteplan .plot:is(:hover,:focus-visible) .lot{stroke-width:3.5;stroke:#7A5A22}
html:root .siteplan .plot.sel .lot{stroke-width:4;stroke:var(--pine)}
html:root .siteplan .plot:focus-visible{outline:2px solid var(--pine);outline-offset:4px}
html:root .award-plot-row:is(:hover,:focus-visible){background:var(--window);color:var(--pine)}
html:root[data-page="heidezoom"] .villas tbody tr:focus-within{background:rgba(168,123,53,.12)}
html:root .plot-preview{margin:16px var(--m) 0 0;min-height:56px;padding:12px 16px;border-left:2px solid #A87B35;background:var(--linen);color:var(--ink);font:500 16px/1.6 Manrope,sans-serif;font-variant-numeric:tabular-nums}
@media(max-width:599px){html:root .plot-preview{margin-right:0;min-height:78px}}