/* The Oakhill — public landing page.
   Separate from the dashboard's stylesheet on purpose: the two share a
   palette and two typefaces, nothing else. The colours below are the ones
   from public/style.css, plus the olive of the logo mark (#887e49). */

:root {
  --ink: #0d1b2a;
  --ink-soft: #1b263b;
  /* The running text: a step off the near-black of the headings. */
  --tekst: #2b3c52;
  --slate: #415a77;
  /* Only on the dark panels (the bar, the footer, the board section): on
     paper it is too pale to read. */
  --slate-light: #778da9;
  --sand: #e0e1dd;
  --paper: #f7f8f9;
  --olive: #887e49;
  --olive-light: #a2975d;
  --line: rgba(13, 27, 42, 0.12);
  --font-title: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: 24px;
  /* One rounding for every button and every frame on the site. */
  --rond: 5px;
  /* One inner margin for every block: the same on all four sides. */
  --binnen: 24px;
  /* The contact tiles: the navy of the bar, softened towards the slate of
     the text, so the panel reads as part of the page rather than a hole. */
  --paneel: #34495f;
}

* { box-sizing: border-box; }

/* One height for every photograph at the head of a page, the homepage's
   included, so moving from one page to the next the title stays put. */
:root { --kop-hoogte: clamp(380px, 42vw, 560px); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: 17px;
  /* Between the two cuts: 300 reads washed out, 400 reads heavy. */
  font-weight: 370;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0 0 18px;
}

h1 { font-size: clamp(30px, 5.2vw, 56px); font-weight: 300; }
/* Three levels a reader can tell apart at any width: the section's title,
   the headings within it, and the chapter labels under those. */
h2 { font-size: clamp(28px, 3.6vw, 38px); }
h3 { font-size: 18px; font-weight: 500; }

p { margin: 0 0 18px; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap.narrow { max-width: 760px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
  background: var(--ink);
  color: var(--sand);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: block;
}

.brand-name {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Each menu item stands on a faint field of its own, a shade lighter than
   the bar; hover lifts it a shade more. */
.nav a {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  padding: 8px 14px;
  border-radius: var(--rond);
  background: rgba(224, 225, 221, 0.06);
  transition: background-color 0.15s ease;
}

.nav a:hover { background: rgba(224, 225, 221, 0.13); }

/* The one entry that leaves the site: olive, so it reads as a door rather
   than another section of this page. */
.nav .nav-portal { color: var(--olive-light); }


.lang {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lang button {
  background: none;
  border: 0;
  color: var(--slate-light);
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 7px;
  cursor: pointer;
  border-radius: var(--rond);
}

.lang button:hover { color: var(--sand); }
.lang button[aria-pressed="true"] { color: var(--ink); background: var(--olive); }

.menu-toggle {
  display: none;
  width: 38px;
  height: 34px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 6px;
}

.menu-toggle span {
  display: block;
  height: 1.5px;
  background: var(--sand);
  margin: 4px 0;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: var(--kop-hoogte);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-image: image-set(url("assets/estate-pool-sun.jpg") 1x);
  background-image: url("assets/estate-pool-sun.jpg");
  background-size: cover;
  background-position: center 62%;
}

/* Two washes rather than one: the photograph is brightest exactly where the
   heading sits, so the text column gets its own darkening from the left on
   top of the vertical gradient. */
.hero-veil {
  position: absolute;
  inset: 0;
  /* The photograph is a sunny day now: the sky and the palms stay bright,
     and only the corner the heading sits in is shaded. */
  background:
    linear-gradient(90deg, rgba(13, 27, 42, 0.55) 0%, rgba(13, 27, 42, 0.28) 38%, rgba(13, 27, 42, 0) 62%),
    linear-gradient(180deg, rgba(13, 27, 42, 0) 0%, rgba(13, 27, 42, 0) 42%, rgba(13, 27, 42, 0.62) 100%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 6vw, 72px);
  color: #fff;
}

.hero h1 {
  /* The title carries its own line break, one per language, so the two lines
     divide where the sentence does; a narrow screen may still wrap further. */
  white-space: pre-line;
  max-width: 34ch;
  margin-bottom: 14px;
  text-shadow: 0 1px 24px rgba(13, 27, 42, 0.45);
}

.eyebrow {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #cdc08a;
  margin-bottom: 14px;
  text-shadow: 0 1px 10px rgba(13, 27, 42, 0.7);
}

.lede {
  max-width: 46ch;
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(13, 27, 42, 0.55);
  margin: 0;
}

/* Under the homepage's title the line runs over two lines, not three. */
.hero .lede { max-width: 58ch; }

/* ---------- sections ---------- */

.section { padding: clamp(52px, 7vw, 92px) 0; }

/* The bar at the top is sticky, so a section scrolled to from /owners or
   /tenants would start underneath it. */
.section[id] { scroll-margin-top: 72px; }

.section-alt { background: var(--sand); }

.section-dark {
  background: var(--ink-soft);
  color: var(--sand);
}

.section h2 { position: relative; padding-bottom: 16px; }

.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--olive);
}

.section-lede {
  /* Wide enough to hold the longest of the three translations on one line;
     a narrow screen still wraps it. */
  max-width: 84ch;
  color: var(--slate);
  margin-bottom: 36px;
}

.section-dark .section-lede { color: var(--slate-light); }

/* The three figures spread across the full width of the rule above them,
   first at the left edge, last at the right, with the same space between
   each — instead of bunching on the left. */
.facts {
  display: flex;
  justify-content: space-between;
  gap: 18px 32px;
  list-style: none;
  margin: 34px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}

.facts li { display: flex; flex-direction: column; }

@media (max-width: 600px) {
  .facts { flex-direction: column; }
}

/* One line each, so the three figures share a baseline. */
.facts strong {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 300;
  color: var(--olive);
  white-space: nowrap;
}

.facts span {
  font-size: 14px;
  color: var(--slate);
  letter-spacing: 0.02em;
}




.hours {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
}

.hours dt { color: inherit; }

.hours dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hours .muted {
  display: block;
  font-size: 13.5px;
  color: var(--slate);
}

.emergency dd a { text-decoration: none; border-bottom: 1px solid var(--olive); }

.rules {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.rules li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
}

.rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--olive);
}

/* Smaller than what it follows, but in the same ink: a note is still text. */
.small {
  font-size: 13.5px;
  margin: 0;
}

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.btn {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--ink); color: var(--sand); }
.btn-primary:hover { background: var(--ink-soft); }

.btn-quiet {
  border-color: rgba(13, 27, 42, 0.38);
  color: var(--ink);
  background: #fff;
}

.btn-quiet:hover { border-color: var(--olive); background: rgba(136, 126, 73, 0.08); }


/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--slate-light);
  padding: 44px 0 36px;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 56px;
}

.footer p { margin: 0 0 6px; }

.footer a { color: var(--sand); text-decoration: none; }
.footer a:hover { color: var(--olive-light); }

.footer-name {
  font-family: var(--font-title);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}

/* The white headings sit right on the grey lines they head. */
.footer .footer-name,
.footer .footer-label {
  line-height: 1.3;
  margin-bottom: 2px;
}

/* The estate manager's three lines are one group: a clear gap above it, and
   tighter spacing within, so the label plainly belongs to the two lines under
   it rather than floating between the address and the e-mail. */
.footer-em { margin-top: 22px; }
.footer-em p { margin: 0 0 3px; }

/* Two voices in the footer and no more: the headings speak like the
   estate's name, the lines under them like its address. */
.footer-label {
  font-family: var(--font-title);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}

/* In the footer the underline takes the text's own colour, and the grey
   lines — address, numbers, addresses — sit a pixel below the white
   headings above them. */
.footer-em a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.footer .footer-address,
.footer .footer-em p:not(.footer-label) { font-size: 13px; }

/* The two headings over the contact lines a step below the estate's name. */
.footer .footer-label { font-size: 13px; }

/* Under the contact details on a narrow screen, the note keeps some air
   above it; beside them it starts on the same line as the estate's name. */
@media (max-width: 900px) {
  .footer-recht { margin-top: 26px; }
}
.footer-em a:hover { color: var(--olive-light); }

/* The privacy note and the legal links under it form one column, hanging
   from one rule on their left. */
.footer-recht {
  flex-basis: 100%;
  max-width: 70ch;
  margin-top: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(224, 225, 221, 0.2);
  /* A column, so the buttons can sit on the line where the contact
     details beside it end. */
  display: flex;
  flex-direction: column;
}

.footer-note { font-size: 12.5px; margin: 0; }

/* Who made the site, on its own line under the privacy note, in the
   same small grey. */
.footer .footer-credit { font-size: 12.5px; margin: 6px 0 0; }
.footer-credit a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.footer-credit a:hover { color: var(--olive-light); }

/* ---------- small screens ---------- */

@media (max-width: 820px) {
  .menu-toggle { display: block; order: 3; }

  .nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .nav.open { max-height: 260px; padding-top: 10px; }

  .nav a { width: 100%; padding: 10px 0; border-bottom: 1px solid rgba(224, 225, 221, 0.1); }

  .topbar { flex-wrap: wrap; gap: 12px; }

  .brand-name { letter-spacing: 0.18em; font-size: 14px; }

  .facts { gap: 18px 32px; }

  /* Narrow enough that the heading sits over the whole photograph, so the
     wash comes from below instead of from the left. */
  .hero-veil {
    background: linear-gradient(
      180deg,
      rgba(13, 27, 42, 0.45) 0%,
      rgba(13, 27, 42, 0.14) 24%,
      rgba(13, 27, 42, 0.86) 68%,
      rgba(13, 27, 42, 0.94) 100%
    );
  }
}

/* On a phone the bar has to hold the mark, the name, three languages and the
   menu button on one line; everything shrinks a little rather than wrapping
   into a second row. */
@media (max-width: 520px) {
  .topbar { gap: 8px; padding: 12px 16px; }

  .brand { gap: 9px; }

  .brand img { width: 32px; height: 32px; }

  .brand-name { font-size: 12px; letter-spacing: 0.12em; }

  .lang button { font-size: 11px; padding: 5px 5px; }

  .menu-toggle { width: 30px; padding: 6px 3px; }

  :root { --gutter: 18px; }
}

/* ---------- board ---------- */

.board-intro { margin-bottom: 10px; }

/* One name per line: side by side they read as a run-on sentence, and the
   block in brackets then sits closer to the next name than to its own. */
.board-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.board-list li {
  font-size: 15.5px;
  position: relative;
  padding-left: 16px;
}

/* The apartment is there to place a name, not to shout: one step quieter
   than the name it follows. */
.board-apt {
  font-size: 13.5px;
  color: var(--slate);
  white-space: nowrap;
}

.board-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--olive);
}

.board-contact a {
  text-decoration: none;
  border-bottom: 1px solid var(--olive);
  padding-bottom: 2px;
}

/* ---------- pages of their own: pool rules, statutes ---------- */

/* The landing page opens under the photograph; these open under the bar. */
.page .section-page { padding-top: clamp(96px, 10vw, 132px); }

.section-page h1 { font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 18px; }

/* The lede on these pages sits on paper, not on the hero photograph. */
.lede-dark {
  max-width: 62ch;
  color: var(--slate);
  text-shadow: none;
  margin-bottom: 34px;
}

.rules-intro {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 22px;
}

.rules-full li { margin-bottom: 13px; }

.terug a {
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid rgba(136, 126, 73, 0.4);
}

.terug a:hover { border-bottom-color: var(--olive); }

.downloads { margin-top: 30px; }

.terug { margin-top: 36px; font-size: 13.5px; }

.note {
  border-left: 2px solid var(--olive);
  padding-left: 16px;
  color: var(--slate);
  font-size: 15.5px;
  margin: 0 0 36px;
}

/* The article number sits in the margin on a wide screen and in the line
   itself on a narrow one. */
.art-nr {
  color: var(--olive);
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- the community rules ---------- */

.rule-block { margin-top: 38px; }

.rule-block h2 {
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 0;
  margin-bottom: 14px;
}

/* The chapter number keeps the olive of the statutes' article numbers. */
.rule-block h2::after { display: none; }

/* a. b. c., as the document itself numbers them. */
.rules-lettered {
  list-style: lower-alpha;
  padding-left: 22px;
  margin: 0 0 4px;
}

.rules-lettered li {
  padding-left: 6px;
  margin-bottom: 11px;
  font-size: 15.5px;
}

.rules-lettered li::marker {
  color: var(--olive);
  font-family: var(--font-title);
  font-size: 13px;
}

.rule-block .note { margin-top: 16px; }


/* ---------- photographs of the estate ---------- */

.section-gallery { padding-top: 0; }

/* A mosaic: the gate onto the estate large on the left, the pool by night
   wide on the right, two smaller views beneath it. Each caption lies on its
   photograph. */
.section-gallery .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  gap: 14px;
}

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rond);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.shot:hover img { transform: scale(1.03); }

.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 12px;
  background: linear-gradient(to top, rgba(13, 27, 42, 0.72), rgba(13, 27, 42, 0));
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
}

.shot-groot { grid-column: 1 / -1; grid-row: span 2; }
.shot-breed { grid-column: 1 / -1; }

@media (min-width: 860px) {
  .section-gallery .wrap {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
  }
  .shot-groot { grid-column: 1 / 3; grid-row: 1 / 3; }
  .shot-breed { grid-column: 3 / 5; grid-row: 1; }
}

/* ---------- the documents on the owners' page ---------- */

.docs-title { margin-top: 48px; }

.doclijst {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.doclijst li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.doclijst a { text-decoration: none; }

.doclijst .naam {
  border-bottom: 1px solid var(--olive);
  padding-bottom: 2px;
}

 /* A document that is not on this page: the name is text, the button is the
   way to it. */
.doclijst .naam-stil { color: inherit; }



/* The one line on a rules page that is not a rule: whom to call. The same
   olive band as at the foot of the printed rules, so the page and the PDF
   say it the same way, and an eye looking for it finds it at once. */
.hulpkader {
  background: var(--olive);
  color: #fff;
  text-align: center;
  padding: 20px 24px 22px;
  margin: 30px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.hulpkader-nr {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}

.hulpkader-nr:hover { color: rgba(255, 255, 255, 0.85); }

/* The five the board asks everyone to read first; they open the list and
   carry more weight than the rest of it. */
.rules-full .rule-top { font-weight: 600; }

/* The opening hours are the one thing a guest looks up rather than reads.
   They get the only dark field on the page — a board rather than a box:
   the season set small above, the time itself large. */
.uren { margin: 0; }

.uren-rij + .uren-rij {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.uren-seizoen {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.uren-noot { color: var(--olive); }

.uren-tijd {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- the practical section ---------- */

/* ---------- contact: five tiles on the estate's navy ---------- */

/* The same voice as the line under each rulebook's heading, and the full
   width of the tiles beneath it. */
.blok-lede {
  max-width: none;
  margin: 0 0 22px;
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--slate);
}

/* Three columns, two rows: the Estate Manager takes two cells (number and
   address), the four services one each, so the band is full and level. */
.nummerbord {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paneel);
  border-radius: var(--rond);
  margin-bottom: 64px;
  overflow: hidden;
}

.tegel {
  padding: 24px;
  border-top: 1px solid rgba(224, 225, 221, 0.16);
}

.tegel:first-child { border-top: 0; }

@media (min-width: 560px) {
  .nummerbord { grid-template-columns: 1fr 1fr; }
  .tegel-breed { grid-column: 1 / -1; }
  .tegel:nth-child(even) { border-left: 1px solid rgba(224, 225, 221, 0.16); }
}

@media (min-width: 900px) {
  .nummerbord { grid-template-columns: repeat(3, 1fr); }
  .tegel-breed { grid-column: span 2; }
  .tegel { border-left: 1px solid rgba(224, 225, 221, 0.16); }
  .tegel:first-child { border-left: 0; }
  .tegel:nth-child(3) { border-left: 0; }
  .tegel:nth-child(-n+2) { border-top: 0; }
}

.tegel p { margin: 0; }

.tegel-label {
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(224, 225, 221, 0.72);
  margin-bottom: 8px !important;
}

.tegel-nr {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tegel-mail { margin-top: 6px !important; font-size: 15px; overflow-wrap: anywhere; }

.tegel a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--olive);
  padding-bottom: 1px;
}

.tegel a:hover { color: var(--olive-light); }

.infoband-titel {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-light);
  margin: 0 0 20px;
}

/* What a guest reads: the pool rules in full, three columns on a wide
   screen, the five the board asks everyone to read first in a heavier
   weight; beside them, the community rules in a sentence and two links. */
.reglementen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* A display of its own would otherwise win over the hidden attribute, and
   all three languages would show at once. */
.reglementen[hidden] { display: none; }



/* The three headings of the section — contact, community rules, pool
   rules — are one kind of heading. */
.reglement h3,
.blok-kop {
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 8px;
}

.blok-kop { margin-bottom: 18px; }

.reglement-intro {
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--slate);
  margin: 0 0 24px;
}

/* The estate's motto above the tenants' rules; the line under it follows
   closely, as one opening. */
.reglement-motto { color: var(--tekst); }
.reglement-motto + .reglement-intro { margin-top: -16px; }

/* The pool rules in one column, at a length a line can be read in, with
   the hours on a board beside them that stays in view while you read. */
.zwembad-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 860px) {
  .zwembad-raster { grid-template-columns: 340px minmax(0, 1fr); gap: 52px; align-items: start; }
  .zwembad-bord { position: sticky; top: 110px; }
}

/* A timetable on the page itself, not a slab: an olive rule above, a
   hairline between the seasons, the hours in the light title face. The one
   dark field in the section stays the contact band. */
.zwembad-bord {
  border: 1px solid rgba(13, 27, 42, 0.14);
  border-top: 2px solid var(--olive);
  border-radius: var(--rond);
  background: rgba(255, 255, 255, 0.42);
  padding: 22px;
}

.zwembad-bord .infoband-titel { color: var(--olive); margin-bottom: 16px; }

.zwembad-bord .uren-tijd { font-size: 24px; }
.zwembad-foto {
  margin: 22px 0 0;
  border-radius: var(--rond);
  overflow: hidden;
}

.zwembad-foto img { display: block; width: 100%; height: auto; }

/* Stacked above the rules on a narrower screen, the photograph becomes a
   band rather than a full page of pool. */
@media (max-width: 859px) {
  .zwembad-foto img { height: 260px; object-fit: cover; }
}

/* Season and heating each keep to one line. */
.zwembad-bord .uren-seizoen span { white-space: nowrap; }

.rules-zwembad { max-width: 68ch; margin: 0; }
.rules-zwembad li { font-size: 15.5px; margin-bottom: 11px; }
.rules-zwembad .rule-top { font-weight: 600; }

.reglement-pdf {
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 24px;
}

/* The PDF to print: a quiet button with a download mark, the same border
   and rounding as every other button on the site. */
.reglement-pdf a,
.knop-pdf,
.knop-aanmelden {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 16px;
  border: 1px solid rgba(13, 27, 42, 0.38);
  border-radius: var(--rond);
  background: #fff;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.reglement-pdf a::before,
.knop-pdf::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887e49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E") no-repeat center / contain;
}

.reglement-pdf a:hover,
.knop-pdf:hover,
.knop-aanmelden:hover { border-color: var(--olive); background: rgba(136, 126, 73, 0.08); }

/* A sign-in button carries no download mark: it leads to the portal. */
.knop-aanmelden { padding-left: 18px; }




/* The community rules in full: an index of the eight chapters first, the
   paragraph the owners agreed on set apart, then the chapters themselves
   in two columns, the way a printed booklet would run them. */
/* Each document on a field of its own, a shade off the page and off each
   other: the community rules a touch lighter, the pool rules a touch of
   the pool's blue. */
.reglement,
.contact-veld {
  border-radius: var(--rond);
  padding: var(--binnen);
  background: rgba(255, 255, 255, 0.38);
}

/* Contact sits on the same kind of field as the community rules, with the
   same space beneath it as between the two rulebooks. */
.contact-veld { margin-bottom: 28px; }
.contact-veld .nummerbord { margin-bottom: 0; }

.reglement-hr { background: rgba(255, 255, 255, 0.38); }
.reglement:not(.reglement-hr) { background: rgba(65, 90, 119, 0.08); }

@media (min-width: 860px) {
  :root { --binnen: 40px; }
}

.hoofdstukken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 30px;
}

@media (min-width: 760px) {
  .hoofdstukken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The legal page keeps its three in a row. */
.legal-inhoud { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hoofdstukken a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(13, 27, 42, 0.18);
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--font-title);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
}

.hoofdstukken a:hover { border-color: var(--olive); background: #fff; }
.hoofdstukken span { color: var(--olive); font-weight: 500; }

.hr-geest {
  max-width: 78ch;
  margin: 0 0 40px;
  padding-left: 20px;
  border-left: 2px solid var(--olive);
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tekst);
}

.hoofdstuk { margin: 0 0 30px; scroll-margin-top: 100px; }

.hoofdstuk h4 {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  break-after: avoid;
}

.hoofdstuk .rules-lettered li { break-inside: avoid; }

/* The pool chapter points to the pool rules instead of repeating them. */
.hoofdstuk-verwijs { margin: 0 0 11px; font-size: 15.5px; }
.reglement[id] { scroll-margin-top: 100px; }
.hoofdstuk .note { margin-top: 14px; font-size: 14.5px; }

/* Which container takes what: set semibold, on the homepage and on the
   community rules page alike, because it is the line people look for. */
.hoofdstuk .note,
.rule-block .note { font-weight: 600; }

@media (min-width: 900px) {
  .hoofdstuk-kolommen { column-count: 2; column-gap: 52px; }
}

/* The legal links continue the note above them, on the same rule. */
/* Three buttons of one width, edge to edge with the note above them, so
   the space between them is the same as the space around them. */
/* Written as .footer .footer-legal: the plain .footer p rule sets the
   margin shorthand and would otherwise undo the auto top margin that drops
   the buttons to the foot of the column. */
.footer .footer-legal {
  margin: auto 0 3px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
  gap: 10px;
}

.footer-legal a { text-align: center; white-space: nowrap; }

@media (max-width: 620px) {
  .footer .footer-legal { grid-template-columns: 1fr; }
}

/* Set as the site's quiet buttons, drawn for the dark footer. */
.footer-legal a {
  display: block;
  padding: 8px 10px;
  border: 1px solid rgba(224, 225, 221, 0.28);
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}

.footer-legal a:hover { border-color: var(--olive-light); color: var(--olive-light); }

/* ---------- the legal page ---------- */

.legal-inhoud { margin-top: 6px; }
/* On a field like the other pages; the anchors from the footer land with
   the bar's height to spare. */
.legal-deel { scroll-margin-top: 100px; }
.legal-deel p { font-size: 15.5px; }
.legal-deel p:last-child { margin-bottom: 0; }
.legal-deel code { font-size: 14px; background: rgba(13, 27, 42, 0.06); padding: 1px 5px; }

.legal-gegevens {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 22px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-left: 2px solid var(--olive);
  background: rgba(255, 255, 255, 0.5);
  font-size: 15.5px;
}

.legal-gegevens dt { font-family: var(--font-title); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding-top: 3px; }
.legal-gegevens dd { margin: 0; }

.legal-datum { margin-top: 40px; color: var(--slate); }

/* ---------- one rounding ---------- */

.btn,
.hoofdstukken a,
.footer-legal a,
.veld,
.hulpkader,
.legal-gegevens { border-radius: var(--rond); }

/* ---------- the estate's sign, at the head of the owners' page ---------- */

.kop-beeld {
  margin: 0 0 34px;
  height: clamp(200px, 32vw, 320px);
  overflow: hidden;
  border-radius: var(--rond);
}

.kop-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
}

/* The Estate Manager's tile carries the sentence on what to contact them
   for: beside the number on a wide screen, under it on a narrow one. */
.tegel-tekst {
  margin-top: 16px !important;
  max-width: 38ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(224, 225, 221, 0.78);
}

/* Side by side as soon as the tile has the width of the band, which it
   has from the two-column layout up. */
/* The label runs across the top; under it the line and the number with
   its address side by side, both starting on the line where every other
   tile's number starts. */
@media (min-width: 560px) {
  .tegel-breed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: start;
  }
  .tegel-breed .tegel-label { grid-column: 1 / -1; }
  /* The line on the left, the number and address on the right. */
  .tegel-tekst { grid-column: 1; grid-row: 2; margin-top: 0 !important; }
  .tegel-em { grid-column: 2; grid-row: 2; }
}

/* Telephone numbers are not underlined anywhere: they stay tappable, but
   read as numbers rather than as links. */
a[href^="tel:"] {
  border-bottom: 0 !important;
  text-decoration: none !important;
  padding-bottom: 0 !important;
}

/* Every label on one line, so the numbers of a row start at one height;
   a qualifier goes under the number instead. */
.tegel-noot {
  margin-top: 6px !important;
  font-size: 12.5px;
  color: rgba(224, 225, 221, 0.72);
}

/* ---------- the owners' page: the homepage's fields ---------- */

.velden { display: grid; gap: 28px; }
/* A display of its own would otherwise beat the hidden attribute. */
.velden[hidden] { display: none; }

.veld {
  border-radius: var(--rond);
  padding: var(--binnen);
  background: rgba(255, 255, 255, 0.38);
}

.veld-tint { background: rgba(65, 90, 119, 0.08); }

.veld .doclijst { margin: 0; }
.veld .doclijst li { padding: 12px 0; gap: 20px; align-items: center; }
.veld .doclijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.veld .doclijst li:first-child { padding-top: 0; }
.veld .doclijst .naam,
.veld .doclijst .naam-stil { font-size: 15.5px; }

.veld .board-list { margin: 0 0 18px; }
.veld .board-contact { margin: 0; font-size: 15.5px; }


/* A rule the board asks readers not to miss, inside a lettered list. */
.rules-lettered .halfvet { font-weight: 600; }

/* ---------- the head of a page of its own: a photograph ---------- */

/* The rules, the legal page and the owners' page open as the homepage does:
   on a photograph of the estate, the title in white at its foot. The
   photograph is given per page (--kop-beeld), cut to 2.4:1 at 2560 pixels
   so it stays sharp on a wide screen. */
.section-page.kop-foto {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--kop-hoogte);
  padding-top: clamp(96px, 10vw, 132px);
  padding-bottom: clamp(34px, 4.6vw, 58px);
  background: var(--ink) var(--kop-beeld) center / cover no-repeat;
  overflow: hidden;
}

.section-page.kop-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 27, 42, 0.5) 0%, rgba(13, 27, 42, 0.18) 45%, rgba(13, 27, 42, 0) 70%),
    linear-gradient(180deg, rgba(13, 27, 42, 0.35) 0%, rgba(13, 27, 42, 0) 30%, rgba(13, 27, 42, 0.2) 55%, rgba(13, 27, 42, 0.78) 100%);
}

.section-page.kop-foto > * { position: relative; width: 100%; }

.kop-foto .eyebrow { margin-bottom: 12px; }

.kop-foto h1 {
  color: #fff;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 0 16px;
  text-shadow: 0 1px 24px rgba(13, 27, 42, 0.5);
}

.kop-foto .lede-dark {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 14px rgba(13, 27, 42, 0.6);
  max-width: 60ch;
  margin-bottom: 0;
}

.kop-foto .legal-inhoud { margin-top: 22px; margin-bottom: 0; }

/* The owners' page keeps its three paragraphs on paper, under the photograph. */
.kop-tekst { padding-top: clamp(34px, 4.6vw, 54px); padding-bottom: clamp(30px, 4vw, 48px); }
.kop-tekst p { max-width: 62ch; }

/* On a phone the text covers most of the photograph: a deeper wash. */
@media (max-width: 700px) {
  .section-page.kop-foto::before {
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.35) 0%, rgba(13, 27, 42, 0.5) 32%, rgba(13, 27, 42, 0.86) 100%);
  }
}

/* Among the owners' fields the grid sets the space, not the block's own margin. */
.velden > .contact-veld { margin-bottom: 0; }