/* ===========================================================================
   LE MOULIN D'ALZAU - design system.  Built 28 Aug 2026 for Jasper Voorhoeve.
   Written fresh for this client. Nothing here is carried from another site.

   PALETTE - sampled out of the one photograph we hold (SOURCES sec.3).
     kalk    #F2EEE5  the lime render on the walls, lightened to a page ground
     paper   #FCFAF5  a shade lighter again, for cards
     steen   #322E27  roof tile and wall shadow, warmed - the dark surface
     water   #14595E  the pool, taken back from swimming-pool cyan to mill water
     klei    #C6B9A2  the tower's bare stone - hairlines only
     kleid   #8B7C61  the same stone darkened until a border is really a border
   Every pairing used anywhere is asserted at build time in build.py.

   TYPE
     Display : EB Garamond.  A French garamond for a French building whose
               foundations are older than the typeface by six hundred years.
     Text/UI : Archivo.  Quiet neo-grotesque, no personality of its own, holds
               up at 12px in a calendar cell.
     Self-hosted woff2, latin + latin-ext, variable, display face preloaded.
     DELIBERATELY NOT: Fraunces, Newsreader, Literata, Spectral, Public Sans -
     all spent on other clients.

   MOTIF
     A double hairline under every section heading. It is the water line on a
     mill wall, and it is the only ornament in the system.
   ======================================================================== */

/* ------------------------------------------------------------- fonts ----- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/garamond-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/garamond-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(/fonts/garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(/fonts/garamond-italic-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/archivo-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ------------------------------------------------------------- tokens ---- */
:root{
  --kalk:#F2EEE5; --paper:#FCFAF5; --ink:#221E18; --ink2:#4E463A;
  --steen:#322E27; --steend:#211E18; --water:#14595E; --waterl:#8ECFD2;
  --klei:#C6B9A2; --kleid:#8B7C61; --kleix:#736648; --verleden:#776E62; --onsteen:#D8D1C2; --band:#B4D2D0;
  --disp:'EB Garamond',Georgia,'Times New Roman',serif;
  --ui:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(1.1rem,4vw,2rem);
  --sec:clamp(3rem,7vw,5.5rem);
  --shadow:0 1px 2px rgba(34,30,24,.05),0 8px 26px -14px rgba(34,30,24,.30);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kalk);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,picture,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--water)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--water);outline-offset:2px;border-radius:2px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:.6rem;top:.6rem;background:var(--paper);color:var(--ink);
  padding:.6rem .9rem;border:2px solid var(--water);border-radius:3px}

/* ------------------------------------------------------------ headings --- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;margin:0;
  letter-spacing:.004em;text-wrap:balance}
h1{font-size:clamp(2.3rem,6.4vw,4.05rem);line-height:1.06}
h2{font-size:clamp(1.72rem,3.7vw,2.6rem);line-height:1.16}
h3{font-size:clamp(1.24rem,2.2vw,1.56rem);line-height:1.22}
h4{font-size:1.06rem;line-height:1.3;font-family:var(--ui);font-weight:600}
p{margin:0 0 1.05em}
.measure{max-width:63ch}
.lead{font-size:clamp(1.09rem,1.9vw,1.26rem);line-height:1.62;color:var(--ink2)}
.small{font-size:.895rem;line-height:1.58;color:var(--ink2)}
.tiny{font-size:.82rem;line-height:1.5;color:var(--ink2)}
.eyebrow{font-family:var(--ui);font-size:.735rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--kleix);
  margin:0 0 .55rem;display:block}
.eyebrow.on-dark{color:var(--klei)}
em,i{font-style:italic}
strong,b{font-weight:600}

/* the water line */
.rule{border:0;height:0;margin:1.05rem 0 1.6rem;
  border-top:1px solid var(--klei);
  box-shadow:0 3px 0 -2px var(--klei);max-width:8.5rem}
.rule.wide{max-width:none}
.rule.on-dark{border-top-color:rgba(198,185,162,.5);box-shadow:0 3px 0 -2px rgba(198,185,162,.5)}

/* -------------------------------------------------------------- layout --- */
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:820px}
section{padding-block:var(--sec)}
section.tight{padding-block:clamp(2rem,5vw,3.4rem)}
.band-paper{background:var(--paper);border-block:1px solid var(--klei)}
.band-dark{background:var(--steen);color:var(--kalk)}
.band-dark h2,.band-dark h3{color:var(--kalk)}
.band-dark .small,.band-dark .lead,.band-dark p{color:var(--onsteen)}
.band-dark a{color:var(--waterl)}
/* A light card standing inside a dark band must not inherit the band's text
   colours, or its headings and list items are painted kalk-on-paper and vanish.
   Caught by shoot.py's contrast pass at 1.11:1 on the "Wat er is" cards. */
.band-dark .card:not(.card--dark){color:var(--ink)}
.band-dark .card:not(.card--dark) h2,
.band-dark .card:not(.card--dark) h3{color:var(--ink)}
.band-dark .card:not(.card--dark) p,
.band-dark .card:not(.card--dark) .small,
.band-dark .card:not(.card--dark) .tiny,
.band-dark .card:not(.card--dark) .lead{color:var(--ink2)}
.band-dark .card:not(.card--dark) a{color:var(--water)}
/* ...and `.band-dark a` was also repainting the buttons in their own accent,
   so a solid button had its label in the same colour as its background. */
.band-dark a.btn--d,.ftr a.btn--d{color:var(--steend)}
.band-dark a.btn--p{color:#fff}
.band-dark a.btn--g{color:var(--kalk);border-color:rgba(198,185,162,.62)}
.band-dark a.btn--g:hover{background:rgba(242,238,229,.12)}

.cols{display:grid;gap:clamp(1.6rem,4vw,3rem)}
/* THE UNIFORM-CARD RULE, and its one honest exception.
   Repeated peers - two quotes side by side, three facility cards - MUST be
   identical in height whatever their text, so those grids stay stretched.
   A prose column beside a single aside is not a set of peers: stretching there
   only manufactures dead space under the aside's last line. Those pairs carry
   .c2-wide, or .c2 without .even. */
.cols.c2,.cols.c2-wide{align-items:start}
.cols.c2.even{align-items:stretch}
@media(min-width:860px){
  .cols.c2{grid-template-columns:1fr 1fr}
  .cols.c2-wide{grid-template-columns:1.25fr .95fr}
  .cols.c3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:600px) and (max-width:859px){
  .cols.c3{grid-template-columns:repeat(2,1fr)}
  .cols.c3>*:last-child:nth-child(odd){grid-column:1/-1}
}

/* -------------------------------------------------------------- header --- */
.hdr{background:var(--steend);color:var(--kalk);position:relative;z-index:40}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.72rem;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand__mk{width:34px;height:34px;flex:0 0 34px;display:block}
.brand__t{display:block;font-family:var(--disp);font-weight:600;
  font-size:1.16rem;line-height:1.05;letter-spacing:.01em}
.brand__s{display:block;font-family:var(--ui);font-size:.705rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--klei);margin-top:.14rem}
.nav{display:flex;gap:.15rem;align-items:center}
.nav a{color:var(--onsteen);text-decoration:none;font-size:.925rem;font-weight:500;
  padding:.5rem .62rem;border-radius:3px;white-space:nowrap}
.nav a:hover{color:var(--kalk);background:rgba(242,238,229,.09)}
.nav a[aria-current=page]{color:var(--kalk);box-shadow:inset 0 -2px 0 var(--waterl)}
.hdr__cta{margin-left:.35rem}
.navbar{display:none}
@media(max-width:719px){
  .hdr__in{min-height:54px}
  .nav{display:none}
  .navbar{display:block;border-top:1px solid rgba(198,185,162,.26)}
  .navbar .nav{display:flex;justify-content:center;gap:.1rem;padding-block:.3rem}
  .navbar .nav a{font-size:.88rem;padding:.44rem .5rem}
  .brand__s{display:none}
}

/* -------------------------------------------------------------- buttons -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ui);font-size:.955rem;font-weight:600;line-height:1.2;
  padding:.78rem 1.28rem;border-radius:3px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:46px;text-align:center;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.btn--p{background:var(--water);color:#fff;border-color:var(--water)}
.btn--p:hover{background:#0F474B;border-color:#0F474B}
.btn--g{background:transparent;color:var(--ink);border-color:var(--kleid)}
.btn--g:hover{background:rgba(139,124,97,.11)}
.btn--d{background:var(--waterl);color:var(--steend);border-color:var(--waterl)}
.btn--d:hover{background:#A9DBDD;border-color:#A9DBDD}
.btn--sm{font-size:.86rem;padding:.55rem .85rem;min-height:38px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
@media (max-width:520px){
  .btnrow--stack{flex-direction:column;align-items:stretch}
  .btnrow--stack .btn{width:100%;justify-content:center;text-align:center}
}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;isolation:isolate;background:var(--steend);
  min-height:clamp(430px,74svh,720px);display:flex;align-items:flex-end;
  overflow:hidden}
.hero__ph{position:absolute;inset:0;z-index:0}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* One photograph, five different parts of it. See HERO_POS in build.py. */
/* The Y values are pushed well apart on purpose: a wide, short hero cropped
   from a 3:2 frame only moves vertically, so two pages set 16% apart looked
   like the same photograph twice. On a phone the box is tall and it is X that
   does the work, so both axes are set. */
/* 9 Sep 2026: retuned for Jasper's own photographs. The old values framed five
   different crops of ONE aerial; each page now has a photograph of its own.
   index    molen-voorkant  - hold the tower, drop the empty gravel foreground
   huis     keuken          - keep the range and the hanging pans in frame
   domein   molen-lucht     - the aerial, centred on the house and the pool
   omgeving carcassonne-avond - already 2612x828, so it needs almost no crop
   aanvraag molen-terras    - the terrace table, not the roofline            */
.hero--index .hero__ph img{object-position:50% 38%}
.hero--huis .hero__ph img{object-position:50% 50%}
.hero--domein .hero__ph img{object-position:50% 42%}
.hero--omgeving .hero__ph img{object-position:50% 50%}
.hero--aanvraag .hero__ph img{object-position:50% 62%}
/* A REAL GRADIENT SCRIM - never a text-shadow. Two layers, because one is not
   enough here: the vertical layer alone left the eyebrow and the last line of
   the h1 sitting on sunlit white render. The second layer darkens the column
   the text actually occupies and fades out before it reaches the house. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(178deg,rgba(28,25,20,.62) 0%,rgba(28,25,20,.20) 26%,
      rgba(28,25,20,.52) 60%,rgba(28,25,20,.90) 100%),
    linear-gradient(96deg,rgba(28,25,20,.66) 0%,rgba(28,25,20,.40) 34%,
      rgba(28,25,20,.14) 60%,rgba(28,25,20,0) 80%)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(2.2rem,6vw,4rem)}
.hero h1{color:#fff;max-width:16ch}
.hero__sub{color:#F0EBE0;font-size:clamp(1.03rem,2.1vw,1.32rem);line-height:1.5;
  max-width:44ch;margin:.95rem 0 0}
.hero .eyebrow{color:#F0EBE0;text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* 10 Sep: was var(--waterl) (#8ECFD2), which measured 3.84:1 against the photograph on
   /het-huis and dipped to 1.68:1 on the brightest part of the home hero - the eyebrow sits
   ABOVE the top stop of the scrim, so it never got the protection the h1 and lede get.
   Same near-white the .hero__sub already uses, plus a shadow for the bright frames. */
.hero__cap{position:relative;z-index:2;margin-top:1.35rem;font-size:.78rem;
  color:rgba(240,235,224,.82);max-width:52ch}

/* --------------------------------------------------------------- facts --- */
.facts{display:grid;gap:1px;background:var(--klei);border:1px solid var(--klei);
  border-radius:3px;overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.facts{grid-template-columns:repeat(5,1fr)}}
.fact{background:var(--paper);padding:1.05rem .9rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;min-height:104px}
.fact__n{font-family:var(--disp);font-weight:600;font-size:1.85rem;line-height:1.05;
  color:var(--ink)}
.fact__l{font-size:.775rem;line-height:1.32;margin-top:.34rem;color:var(--ink2)}
@media(max-width:759px){.facts>.fact:last-child:nth-child(odd){grid-column:1/-1}}

/* --------------------------------------------------------------- cards --- */
.card{background:var(--paper);border:1px solid var(--klei);border-radius:3px;
  padding:clamp(1.15rem,3vw,1.7rem);box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%}
.card>*:last-child{margin-bottom:0}
.card h3{margin-bottom:.5rem}
.card__body{flex:1 1 auto}
.card--dark{background:var(--steen);border-color:#4A443A;color:var(--kalk)}
.card--dark h3{color:var(--kalk)}
.card--dark p,.card--dark .small{color:var(--onsteen)}

/* ticks */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.ticks li{position:relative;padding-left:1.45rem;font-size:.945rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.52rem;
  height:.52rem;border-radius:50%;border:1.5px solid var(--water)}
.card--dark .ticks li::before,.band-dark .ticks li::before{border-color:var(--waterl)}
/* ...but not inside a LIGHT card that happens to stand in a dark band: a pale
   teal ring on paper is barely a ring at all. */
.band-dark .card:not(.card--dark) .ticks li::before{border-color:var(--water)}
@media(min-width:560px){.ticks.two{grid-template-columns:1fr 1fr;column-gap:1.5rem}}

/* key/value table */
.kv{width:100%;border-collapse:collapse;font-size:.945rem}
.kv th,.kv td{text-align:left;padding:.62rem .3rem;border-bottom:1px solid var(--klei);
  vertical-align:top}
.kv th{font-weight:400;color:var(--ink2)}
.kv td{text-align:right;font-weight:600;white-space:nowrap}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}

/* --------------------------------------------------------------- quotes -- */
.quote{background:var(--paper);border:1px solid var(--klei);border-left:3px solid var(--water);
  border-radius:3px;padding:clamp(1.15rem,3vw,1.7rem);margin:0;
  display:flex;flex-direction:column;height:100%;box-shadow:var(--shadow)}
.quote p{font-family:var(--disp);font-size:clamp(1.1rem,1.9vw,1.28rem);line-height:1.5;
  font-style:italic;color:var(--ink);flex:1 1 auto}
.quote footer{font-family:var(--ui);font-style:normal;font-size:.87rem;color:var(--ink2);
  margin-top:.55rem;padding-top:.75rem;border-top:1px solid var(--klei)}
.quote cite{font-style:normal;font-weight:600;color:var(--ink)}
.score{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--disp);
  font-weight:600;font-size:1.02rem;color:var(--water)}

/* ------------------------------------------------------------- gallery --- */
.gal{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.gal:last-child{margin-bottom:0}
.gal__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--klei);padding-bottom:.5rem;margin-bottom:1.1rem}
.gal__h h3{font-size:clamp(1.16rem,2vw,1.4rem)}
.gal__n{font-size:.79rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kleix);white-space:nowrap}
.gal__grid{display:grid;gap:.85rem}
.gal__grid.g2{grid-template-columns:1fr}
.gal__grid.g3{grid-template-columns:1fr}
.gal__grid.g4{grid-template-columns:1fr}   /* 10 Sep: was 1fr 1fr, which left a phone
     showing four photographs at 168px wide while three-up galleries on the same page
     ran full width. Mobile-first is one column for every grid; two-up starts at 620px. */
@media(min-width:620px){
  .gal__grid.g2{grid-template-columns:1fr 1fr}
  .gal__grid.g3{grid-template-columns:repeat(3,1fr)}
  .gal__grid.g4{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){.gal__grid.g4{grid-template-columns:repeat(4,1fr)}}
.shot{margin:0;display:flex;flex-direction:column}
.shot button{display:block;width:100%;padding:0;border:1px solid var(--klei);
  background:var(--paper);border-radius:3px;overflow:hidden;cursor:zoom-in;
  box-shadow:var(--shadow)}
.shot button picture,.shot button img{display:block;width:100%}
.shot img{aspect-ratio:16/10;object-fit:cover}
.shot figcaption{font-size:.845rem;line-height:1.45;color:var(--ink2);
  margin-top:.5rem;flex:1 1 auto}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(20,18,14,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:clamp(.8rem,3vw,2rem);gap:.9rem}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:78svh;object-fit:contain;border-radius:3px}
.lb__cap{color:#EDE7DB;font-size:.9rem;max-width:60ch;text-align:center;margin:0}
.lb__x{position:absolute;top:.7rem;right:.7rem}

/* ------------------------------------------------- CENTREPIECE: planner -- */
.plan{background:var(--paper);border:1px solid var(--klei);border-radius:3px;
  box-shadow:var(--shadow);overflow:hidden}
.plan__grid{display:grid}
@media(min-width:900px){.plan__grid{grid-template-columns:1fr 1fr}}
.plan__in{padding:clamp(1.25rem,3.4vw,2rem);border-bottom:1px solid var(--klei)}
.plan__out{padding:clamp(1.25rem,3.4vw,2rem);background:var(--steen);color:var(--kalk)}
@media(min-width:900px){
  .plan__in{border-bottom:0;border-right:1px solid var(--klei)}
}
.plan__out h3,.plan__out h4{color:var(--kalk)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--klei)}
.stepper:last-of-type{border-bottom:0}
.stepper__t{flex:1 1 auto;min-width:0}
.stepper__t b{display:block;font-weight:600;font-size:.99rem}
.stepper__t span{display:block;font-size:.82rem;color:var(--ink2);line-height:1.4}
.stepper__c{display:flex;align-items:center;gap:.15rem;flex:0 0 auto}
.stepper__c button{width:40px;height:40px;border:1.5px solid var(--kleid);
  background:var(--paper);color:var(--ink);border-radius:3px;font-size:1.24rem;
  line-height:1;cursor:pointer;font-family:var(--ui)}
.stepper__c button:hover:not([disabled]){background:rgba(139,124,97,.13)}
.stepper__c button[disabled]{opacity:.38;cursor:not-allowed}
.stepper__v{min-width:2.3rem;text-align:center;font-family:var(--disp);
  font-weight:600;font-size:1.42rem;font-variant-numeric:tabular-nums}
.plan__tot{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.2rem}
.plan__tot b{font-family:var(--disp);font-weight:600;font-size:clamp(2.5rem,7vw,3.4rem);
  line-height:1;color:#fff}
.plan__tot span{font-size:.96rem;color:var(--onsteen)}
.plan__bars{display:grid;gap:.7rem;margin:1.15rem 0 1.1rem}
.pbar__h{display:flex;justify-content:space-between;gap:.7rem;font-size:.855rem;
  color:var(--onsteen);margin-bottom:.28rem}
.pbar__h b{color:#fff;font-weight:600}
.pbar__t{display:flex;gap:3px}
.pcell{flex:1 1 0;height:11px;border-radius:2px;background:rgba(216,209,194,.22);
  border:1px solid rgba(216,209,194,.34)}
.pcell.on{background:var(--waterl);border-color:var(--waterl)}
.pcell.free{background:transparent;border-style:dashed}
.plan__say{font-size:1rem;line-height:1.55;color:#fff;margin:0 0 .35rem;
  border-top:1px solid rgba(198,185,162,.4);padding-top:1rem}
.plan__note{font-size:.85rem;color:var(--onsteen);margin:0}
.plan__warn{background:rgba(142,207,210,.14);border:1px solid var(--waterl);
  border-radius:3px;padding:.7rem .85rem;font-size:.875rem;color:#fff;margin:.9rem 0 0}
.plan__warn[hidden]{display:none}

/* ------------------------------------------------------------ calendar --- */
.cal{background:var(--paper);border:1px solid var(--klei);border-radius:3px;
  box-shadow:var(--shadow);padding:clamp(1rem,3vw,1.6rem)}
.cal__top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  margin-bottom:1rem}
/* Below 700px only one month is drawn, so the range label above the grid and
   the month's own heading are the same words twice. The heading stays, because
   it sits over its grid and labels it for a screen reader. */
@media(max-width:699px){
  #cal-range{display:none}
  .cal__top{justify-content:flex-end;margin-bottom:.25rem}
}
.cal__nav{display:flex;gap:.4rem}
.cal__nav button{width:42px;height:42px;border:1.5px solid var(--kleid);border-radius:3px;
  background:var(--paper);color:var(--ink);cursor:pointer;font-size:1rem;line-height:1}
.cal__nav button:hover:not([disabled]){background:rgba(139,124,97,.13)}
.cal__nav button[disabled]{opacity:.38;cursor:not-allowed}
.cal__ms{display:grid;gap:clamp(1.2rem,3vw,1.7rem)}
@media(min-width:700px){.cal__ms{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cal__ms{grid-template-columns:repeat(3,1fr)}}
.mo__t{font-family:var(--disp);font-weight:600;font-size:1.16rem;text-align:center;
  margin:0 0 .55rem}
.mo__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mo__wd{font-size:.685rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;color:var(--kleix);padding-bottom:.3rem}
.day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.865rem;font-variant-numeric:tabular-nums;border:1px solid transparent;
  border-radius:2px;background:transparent;color:var(--ink);font-family:var(--ui);
  cursor:pointer;padding:0;min-height:34px}
.day:hover:not([disabled]){background:rgba(20,89,94,.11);border-color:var(--water)}
.day[disabled]{color:var(--verleden);cursor:default;background:transparent}
.day.pad{visibility:hidden;pointer-events:none}
.day.free{border-color:var(--klei)}
.day.in{background:var(--band);border-color:var(--band);border-radius:0}
.day.end{background:var(--water);border-color:var(--water);color:#fff;font-weight:600}
.day.start{border-radius:2px 0 0 2px}
.day.stop{border-radius:0 2px 2px 0}
.day.only{border-radius:2px}
.cal__legend{display:flex;flex-wrap:wrap;gap:.55rem 1.15rem;margin-top:1.15rem;
  padding-top:1rem;border-top:1px solid var(--klei);font-size:.845rem;color:var(--ink2)}
.lg{display:inline-flex;align-items:center;gap:.45rem}
.lg i{width:17px;height:17px;border-radius:2px;display:block;flex:0 0 17px}
.lg i.free{border:1px solid var(--klei);background:var(--paper)}
.lg i.in{background:var(--band);border:1px solid var(--band)}
.lg i.end{background:var(--water);border:1px solid var(--water)}
.lg i.past{background:transparent;border:1px dashed var(--kleid)}
.cal__say{margin-top:.95rem;font-size:.945rem;font-weight:500}
.cal__say b{color:var(--water)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----------------------------------------------------------------- form -- */
.form{display:grid;gap:1.05rem}
.f{display:flex;flex-direction:column;gap:.34rem}
.f>label{font-size:.885rem;font-weight:600}
.f .hint{font-size:.79rem;color:var(--ink2)}
.f input,.f select,.f textarea{
  font-family:var(--ui);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--kleid);border-radius:3px;padding:.68rem .78rem;
  width:100%;min-height:46px}
.f textarea{min-height:130px;resize:vertical;line-height:1.55}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink2)}
.f input[aria-invalid=true],.f textarea[aria-invalid=true]{border-color:#8C2F26;
  background:#FDF4F2}
.f .err{font-size:.82rem;color:#8C2F26;font-weight:600}
.f .err[hidden]{display:none}
@media(min-width:640px){
  .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
  /* a telephone number and a count of couples do not need 760px of field */
  .f--half{max-width:23rem}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{border-radius:3px;padding:.95rem 1.05rem;font-size:.945rem;line-height:1.55}
.formmsg[hidden]{display:none}
.formmsg.ok{background:#EAF3EC;border:1.5px solid #2E6B45;color:#1E4A2F}
.formmsg.bad{background:#FBF0EE;border:1.5px solid #8C2F26;color:#6E2019}
.formmsg a{color:inherit;font-weight:600}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--steend);color:var(--onsteen);padding-block:clamp(2.4rem,5vw,3.4rem)}
.ftr a{color:var(--waterl);text-decoration:none}
/* `.small` alone would repaint footer copy in --ink2 on near-black. */
.ftr p,.ftr .small,.ftr .tiny{color:var(--onsteen)}
.ftr a:hover{text-decoration:underline}
.ftr__g{display:grid;gap:1.9rem}
@media(min-width:760px){.ftr__g{grid-template-columns:1.35fr 1fr 1fr}}
/* 10 Sep: the footer headings became h2 (an h4 straight after an h2 skipped a level on
   three pages). Same rule, same look, one more selector. */
.ftr h4,.ftr .ftr__h{color:var(--kalk);font-size:.755rem;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 .75rem;color:var(--klei)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.925rem}
.ftr__b{margin-top:2.1rem;padding-top:1.3rem;border-top:1px solid rgba(198,185,162,.24);
  font-size:.815rem;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;justify-content:space-between}
.ftr .brand__t{color:var(--kalk)}

/* ------------------------------------------------------------ portrait --- */
.host{display:flex;gap:1.05rem;align-items:center}
.host img{width:88px;height:88px;flex:0 0 88px;border-radius:50%;object-fit:cover;
  border:1px solid var(--klei)}

/* -------------------------------------------------------------- inline --- */
.figure{margin:0}
.figure img{border:1px solid var(--klei);border-radius:3px}
.figure figcaption{font-size:.845rem;color:var(--ink2);margin-top:.5rem;line-height:1.45}

.notice{background:var(--paper);border:1px solid var(--klei);border-left:3px solid var(--kleid);
  border-radius:3px;padding:1rem 1.15rem;font-size:.9rem;line-height:1.6;color:var(--ink2)}

.e404{text-align:center;padding-block:clamp(4rem,12vw,8rem)}

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

/* 10 Sep 2026: the focus ring is #14595E, which measures 2.07:1 against the dark header
   and the dark bands - under the 3:1 WCAG asks of a focus indicator, and it is the first
   four to six stops of every keyboard tour. Light ring on dark grounds: 9.5:1. */
.hdr a:focus-visible,.hdr button:focus-visible,
.band-dark a:focus-visible,.band-dark button:focus-visible,
.ftr a:focus-visible,.ftr button:focus-visible{outline-color:var(--waterl)}