/* Public-page composition. The booking app retains its own content stylesheet;
   navigation.css supplies the same masthead/menu to both. Buttons stay in button.css. */
.site-page {
  --gutter: clamp(22px,4vw,76px);
  --muted: #b8b3a7;
  --line-dark: rgba(244,239,227,.19);
  --fs-display: clamp(34px,4.2vw,58px);
  --fs-h2: clamp(26px,2.8vw,38px);
  --fs-h3: 24px;
  --fs-body: 20px;
  --fs-body-sm: 18px;
  --fs-label: 15px;
  --ls-label: .1em;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.site-page::before, .site-page::after, .site-page > .grain { display: none; }
.site-page main { padding-bottom: 56px; }
.site-page :is(h1,h2,h3) { text-transform: none; text-wrap: balance; letter-spacing: -.025em; }
.site-page p { text-wrap: pretty; }
.site-page :is(.lead,.chapter > p,.prose,.ch-head .ch-side,.info-copy p,.faq details > p,.cta-band p) { max-width: none; }
.site-page .nowrap-lg { white-space: normal; }
.site-page .hero, .site-page .intro { padding: 48px var(--gutter); min-height: 0; }
.site-page .hero h1, .site-page .intro h1 { font-size: var(--fs-display); line-height: 1.06; }
.site-page .hero h1 em, .site-page .intro h1 em { font-style: normal; }
.site-page .hero .hero-foot { margin-top: 22px; padding: 0; border: 0; }
.site-page .hero .hero-foot p { max-width: none; white-space: normal; font-size: 20px; color: var(--muted); }
.site-page .hero .kicker { margin: 0 0 22px; font-size: 15px; text-transform: none; color: var(--muted); }
.site-page .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.site-page .hero-editorial { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 5%; padding-top: 30px; padding-bottom: 56px; }
.hero-editorial-copy { min-width: 0; }
.hero-editorial-media { margin: 0; position: relative; align-self: stretch; min-height: 330px; overflow: hidden; }
.hero-editorial-media img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.hero-editorial-media::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,rgba(15,14,11,.88)); pointer-events: none; }
.hero-editorial-media figcaption { position: absolute; z-index: 1; bottom: 22px; left: 26px; right: 26px; font-size: 16px; color: var(--cream); }
/* BACKDROP VARIANT: the photograph IS the hero (review pin, 15-09-2026 — "the image as background
   instead of slapped on the UX as a random square"). It is the same composition as the homepage
   hero and the belevingen page: one full-bleed photograph, a gradient that darkens the side the
   copy sits on, and the text on top. The default two-column variant is still in use on
   /site/eigen-bier/ and /site/huurbrouwen/, so it stays; those pages switch by adding this one
   class when the owner asks for it.
   THE GRADIENT IS THE READABILITY, not a text shadow: the copy side stays near-opaque ink, so the
   headline keeps its contrast whatever the photograph does. */
.site-page .hero-editorial.is-backdrop {
  position: relative; grid-template-columns: minmax(0,1fr);
  align-content: center; min-height: clamp(380px,46vh,520px);
  padding-top: clamp(48px,7vh,86px); padding-bottom: clamp(48px,7vh,86px);
}
.site-page .hero-editorial.is-backdrop .hero-editorial-copy { position: relative; z-index: 1; max-width: 640px; }
.site-page .hero-editorial.is-backdrop .hero-editorial-media { position: absolute; inset: 0; min-height: 0; }
.site-page .hero-editorial.is-backdrop .hero-editorial-media img { filter: grayscale(1); opacity: .6; }
.site-page .hero-editorial.is-backdrop .hero-editorial-media::after {
  inset: 0;
  background: linear-gradient(90deg,rgba(15,14,11,.96) 0%,rgba(15,14,11,.78) 46%,rgba(15,14,11,.3) 100%),
              linear-gradient(0deg,var(--ink),transparent 45%);
}
/* Bottom RIGHT, on the open side of the gradient: bottom left is where the buttons end. */
.site-page .hero-editorial.is-backdrop figcaption { left: auto; right: var(--gutter); bottom: 18px; text-align: right; color: var(--muted); }

.site-page .chapter { padding-block: 34px; }
.site-page .ch-head { display: grid; gap: 12px; margin-bottom: 24px; padding-top: 26px; }
.site-page .ch-head.num-lg .num { font-size: 15px; letter-spacing: .1em; text-transform: none; line-height: 1.4; }
.site-page .chapter > p, .site-page .prose { line-height: 1.65; }
.site-page :is(.chapter .muted,.figure figcaption,.cinfo-block .lbl,.table th,.pullquote cite) { color: var(--muted); }
.site-page .steps { gap: 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.site-page .step { padding: 28px; border: 0; border-right: 1px solid var(--line-dark); border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.site-page .step:last-child { border-right: 0; }
.site-page .steps.is-flow .step::after { display: none; }
.site-page .step-num { font-size: 18px; opacity: 1; margin-bottom: 12px; }
.site-page .step h3 { font-size: 23px; }
.site-page .step.is-cta { background: var(--ink-2); }
.site-page .step.is-cta:hover { background: #211e15; }
.site-page .tile { border-radius: 4px; box-shadow: none; background: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-page :is(.media,.show-card) { border-radius: 4px; box-shadow: none; }
.site-page .faq { gap: 0; border-top: 1px solid var(--line-dark); }
.site-page .faq details { border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 0; }
.site-page .faq summary { font-size: 23px; text-transform: none; padding-block: 22px; }
.site-page .cta-band { border-radius: 4px; box-shadow: none; }
.site-page .contact { gap: 6%; padding-block: 36px; border-top: 0; }
.site-page .contact .cform { border-top: 1px solid var(--line-dark); padding-top: 28px; }
.site-page .cinfo { padding: 28px; background: var(--ink-2); border: 1px solid var(--line-dark); }
.contact-photo { display: block; width: 100%; height: auto; aspect-ratio: 1.9; object-fit: cover; }
.site-page .cinfo h2 { font-size: 28px; }
.site-page .cform-note { max-width: none; color: var(--muted); font-size: 14px; }
.site-page .cinput { border-radius: 4px; }
.site-page .legal-body { max-width: none; padding-top: 10px; }
.site-page .legal-body h2 { padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 26px; }
.site-page .foot { text-align: left; border-top: 0; }
.site-page .foot-meta { margin-top: 0; font-size: 14px; letter-spacing: 0; color: var(--muted); }
.site-page .foot-legal { text-align: left; color: var(--muted); font-size: 13px; letter-spacing: 0; border-top: 0; }
/* Progressive reveal: public content is readable even if the engine never loads. */
.site-page:not(.has-reveals) .r { opacity: 1; transform: none; }
.site-page:not(.is-loaded) .hero h1 .ln > span { transform: none; }
.site-page:not(.is-loaded) .hero .hero-foot { opacity: 1; }
@media(max-width:900px) {
  .site-page .hero-editorial { gap: 28px; grid-template-columns: 1fr 1fr; }
  .hero-editorial-media { min-height: 360px; }
  .site-page .steps.is-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-page .step { border-bottom: 1px solid var(--line-dark); }
  .site-page .step:nth-child(2n) { border-right: 0; }
  .site-page .contact { gap: 36px; }
}
@media(max-width:600px) {
  .site-page { --gutter: 22px; --fs-display: 38px; --fs-body: 18px; }
  .site-page .hero, .site-page .intro { padding-block: 28px 34px; }
  .site-page .hero-editorial { grid-template-columns: 1fr; gap: 26px; }
  .hero-editorial-media { min-height: 250px; }
  .site-page .hero .hero-foot p { font-size: 18px; }
  .site-page .chapter { padding-block: 24px; }
  .site-page .steps.is-flow { grid-template-columns: 1fr; }
  .site-page .step { border-right: 0; padding: 24px 0; }
  .site-page .step.is-cta { padding-inline: 20px; }
  .site-page .step:last-child { border-bottom: 0; }
  .site-page .cinfo { padding: 22px; }
  .site-page .hero-cta { gap: 10px; }
}

/* .chapter-paper (a light cream spread for the brewery spec sheet) was removed on 15-09-2026 on a
   review pin: "why is this light, we keep it darkmode please". The site is dark everywhere, so an
   inverted section read as another website. Do not re-introduce a light panel to separate a
   section; spacing and a heading already do that. */
.site-page :is(.cfile-msg,.cfile-name,.ccount,.bp-section-label,.bp-style) { color: var(--muted); }
.site-page .cinput::placeholder { color: var(--muted); opacity: 1; }