@font-face {
  font-family:AvenirNextCn;
  src:url('../fonts/AvenirNextLTPro-Cn.otf') format('opentype');
  font-weight:400;
  font-display:block;
}

@font-face {
  font-family:Bungee;
  src:url('../fonts/Bungee-Regular.otf') format('opentype');
  font-weight:400;
  font-display:block;
}

:root {
  --ink:#0f0e0b;
  --ink-2:#161410;
  --cream:#f4efe3;
  --cream-2:#ece5d3;
  --gold:#ffd900;
  --muted:#b8b3a7;
  --line:rgba(244,239,227,.19);
  --sans:AvenirNextCn,Arial,sans-serif;
  --brand:Bungee,sans-serif;
  --fs-label:15px;
  --ls-label:.1em;
  --gutter:clamp(22px,4vw,76px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

* {
  box-sizing:border-box;
}

html {
  overflow-x:clip;
}

body {
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font:20px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ── ultrawide cap ─────────────────────────────────────────
   On a 3440px screen the art direction falls apart. Every hero photo is
   background-size: cover, so it crops to a letterbox strip and loses its
   subject. The hero copy sits in one corner with a void beside it, and a line
   of running text runs the full 3440px.

   The cap goes on <body>, not on each section. Two reasons:
   - The absolute chrome (.bar, .brand-lockup) then resolves against the shell
     instead of the viewport, so it stays over the content.
   - One declaration covers the whole page, also the sections we add later.

   position: relative makes body that containing block. It does NOT capture the
   position: fixed chrome: only transform / filter / perspective do that. So
   .grain, .preloader, .menu and .guide stay full-screen, which is what they
   must be. The fixed items that must follow the shell edge (.progress, .ask)
   get --shell-pad below.

   html carries the background, so the surround is the same warm black.
   Mirrored in css/master.css (subpages) and css/index.css (brouwerij + v1).
   Guarded by apps/local/tests/site_ultrawide/run.sh. */
:root {
  --shell-max:1920px;
  /* Half the dark surround. max() keeps it 0 below the cap. 100vw includes the
     scrollbar gutter, which puts the fixed items a few px off the shell edge —
     invisible on a hairline and on a floating button. */
  --shell-pad:max(0px, (100vw - var(--shell-max)) / 2);
}

html {
  background:var(--ink);
  color:var(--cream);
}

body {
  max-width:var(--shell-max);
  margin-inline:auto;
  position:relative;
}

::selection {
  background:var(--gold);
  color:var(--ink);
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}

p {
  text-wrap:pretty;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px;
}

a:hover {
  color:var(--gold);
}

.gold {
  color:var(--gold);
}

.section-pad {
  padding-inline:var(--gutter);
}

.eyebrow,.section-label {
  font-size:15px;
  letter-spacing:.11em;
  line-height:1.4;
}

.eyebrow {
  margin-bottom:25px;
}

.ordinal {
  color:var(--gold);
  margin-right:16px;
  font-size:14px;
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  padding:12px 20px;
  background:var(--gold);
  color:var(--ink);
  z-index:20000;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.reading-progress {
  /* left/right, not width: the hairline must span the SHELL, not the viewport.
     --shell-pad is 0 below the ultrawide cap, so this stays full width there. */
  position:fixed;
  left:var(--shell-pad);
  right:var(--shell-pad);
  top:0;
  z-index:500;
  width:auto;
  height:3px;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--gold);
  color:var(--ink);
}

.hero {
  padding: 0 var(--gutter);
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap:5%;
  position:relative;
}

.hero-copy {
  padding: 62px 0 56px;
  position:relative;
  z-index:1;
  align-self: center;
}

/* .hero .eyebrow and .status-dot lived here. The hero eyebrow went out on 15-09-2026 (review pin)
   and it was their only user on this page, so the rules went with it. */

.hero h1 {
  font-size: clamp(42px,4vw,58px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-left:-4px;
}

.title-line {
  display:block;
  overflow:hidden;
  padding-block:4px;
}

.title-line>span {
  display:block;
}

.hero-intro {
  color:var(--muted);
  margin-top: 24px;
  font-size:20px;
  line-height:1.55;
}

.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.booking-label { display: inline-grid; }
.booking-label > span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .2s ease;
}
.booking-label > .is-current { opacity: 1; }

.hero-signoff {
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--muted);
  font-size:15px;
  margin-top: 26px;
}

.fine-rule {
  height:1px;
  width:38px;
  background:var(--muted);
  color:var(--cream);
}

.hero-visual {
  position: absolute;
  min-height: 0;
  margin-bottom:20px;
  inset: 0;
  margin: 0;
}

.hero-picture {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius: 0;
  background:var(--ink-2);
  color:var(--cream);
  border-top-right-radius: 0;
}

.hero-picture img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 44%;
  filter:grayscale(1);
  opacity: .55;
  transition:transform 1.5s var(--ease);
}

.hero-picture::after {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,rgba(15,14,11,.97) 0%,rgba(15,14,11,.8) 42%,rgba(15,14,11,.32) 100%),linear-gradient(0deg,var(--ink),transparent 40%);
  color:var(--cream);
}


.photo-tag {
  position:absolute;
  top:39px;
  left:39px;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--cream);
  background:#0f0e0bcc;
  padding:6px 12px;
}








.hero-bottom {
  grid-column:1/-1;
  border-block:1px solid var(--line);
  padding: 18px 0;
  display:flex;
  /* flex-end, not space-between (15-09-2026). The row held three items — address, founding
     year, link — and space-between spread them across the rule. The two spans were removed on
     a review pin, and space-between then parks the one remaining link hard against the LEFT
     edge, which is the opposite of where it has always sat. */
  justify-content:flex-end;
  align-items:center;
  color: var(--muted);
  font-size: 15px;
  gap:14px;
  position: relative;
  z-index: 1;
  background: rgba(15,14,11,.55);
}

.hero-bottom a {
  color:var(--cream);
}

.hero-bottom a span {
  margin-left:16px;
  color:var(--gold);
}


.section-label {
  display:flex;
  gap:8px;
  color:var(--muted);
  margin-bottom:32px;
}






.text-link {
  display:inline-flex;
  gap:25px;
  align-items:center;
  font-size:17px;
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:8px;
  padding-block:6px;
  width:fit-content;
}

/* Inline Lucide paths keep decorative arrows independent of emoji fonts and JS. */
.home-link-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.text-link .home-link-icon {
  font-size:23px;
  transition:transform .3s var(--ease);
  color:var(--gold);
}

.text-link:hover .home-link-icon {
  transform:translate(3px,-3px);
}


.experiences {
  padding-block: 48px 56px;
  background:var(--ink-2);
  color:var(--cream);
  border-block:1px solid var(--line);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom: 28px;
}

.section-heading h2 {
  font-size: clamp(30px,3vw,42px);
}

.section-heading .eyebrow {
  margin-bottom:15px;
  color:var(--muted);
}

.experience-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

.experience-photo {
  display:block;
  aspect-ratio: 5/4;
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
}

.experience-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72);
  transition:transform 1.2s var(--ease),filter .7s;
}

.experience-photo::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 60%,#0f0e0be6);
  color:var(--cream);
}

.experience-photo:hover img {
  transform:scale(1.055);
  filter:saturate(1);
}

.experience-index {
  position:absolute;
  left:20px;
  top:16px;
  font-size:15px;
  background:var(--ink);
  color:var(--cream);
  padding:5px 10px;
}

.photo-category {
  position:absolute;
  bottom:20px;
  left:24px;
  z-index:1;
  font-size:16px;
  letter-spacing:.07em;
  color:var(--cream);
}

.experience-content {
  padding-top: 19px;
}

.experience h3 {
  font-size: 27px;
  letter-spacing:-.015em;
}

.experience p {
  color:var(--muted);
  font-size: 18px;
  margin-top:16px;
  min-height: 60px;
  line-height:1.5;
}

.experience-action {
  border-top:1px solid var(--line);
  padding-top: 16px;
  margin-top: 18px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

.price {
  font-size:16px;
  white-space:nowrap;
  color:var(--muted);
}

/* BBQ LEADS (owner, 27-09-2026, plan-shop-and-experiences.md B1). Above 900px the first card is
   1.4 columns wide. Its photo keeps the SAME height as its neighbours: a 5/4 photo at 1.4x the width
   needs 7/4, so the row stays one clean line. minmax(0,…) keeps the ratio: with a bare `fr` the
   nowrap facts line sets a minimum width and the columns quietly even out. At 900px and below the
   three columns are equal again and the BBQ leads by position only. */
@media(min-width:901px) {
  .experience-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
  .experience.is-lead .experience-photo { aspect-ratio:7/4; }
}

/* The card is a column and only the booking row is pushed down, so the three booking rows line
   up whatever the length of the quote. The quote stays directly under the copy. */
.experience { display:flex; flex-direction:column; }
.experience-content { display:flex; flex-direction:column; flex:1; }
.experience .experience-action { margin-top:auto; }
.experience-content > :nth-last-child(2) { margin-bottom:18px; }
/* Between 901 and 1240px the two narrow cards cannot fit the price beside the button, and a
   wrapped row is taller than the lead's single row. Stack it on all three, so they match. */
@media(min-width:901px) and (max-width:1240px) {
  .experience-action { flex-direction:column; align-items:flex-start; gap:10px; }
}

.experience .experience-facts {
  min-height:0;
  margin-top:8px;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--gold);
  white-space:nowrap;
}

/* The gap above the quote sits on the copy, not on the quote: padding on the quote would stretch
   its gold rule up into the empty space. */
.experience-content > p:has(+ .experience-quote) { margin-bottom:18px; }
.experience-quote {
  margin:0;
  padding-left:14px;
  border-left:2px solid var(--gold);
}
.experience .experience-quote p {
  min-height:0;
  margin-top:0;
  font-size:16px;
  line-height:1.5;
  color:var(--cream);
}
/* A span, not <footer>: the page has exactly one footer (site_homepage/verify.php). */
.experience-quote-source {
  display:block;
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}



.beers {
  padding-block: 56px;
}

.beer-stage {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  border:1px solid var(--line);
}

.beer-art {
  padding:65px 32px;
  min-height: 390px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:#1d1b16;
  color:var(--cream);
}

.beer-art::before {
  content:'';
  position:absolute;
  width:70%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line);
  left:15%;
  top:50%;
  transform:translateY(-50%);
}

.beer-art img {
  width:100%;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:1;
  box-shadow:0 30px 60px #0006;
}

.beer-story {
  padding: 32px clamp(25px,3vw,45px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height: 0;
}

.beer-story .eyebrow {
  color:var(--gold);
  margin-bottom:16px;
}

.beer-story h3 {
  font-size: 40px;
}

.beer-character {
  font-size: 21px;
  margin-top:15px;
}

.beer-story #beer-description {
  color:var(--muted);
  font-size:18px;
  margin-top:18px;
  line-height:1.6;
}

.tasting-notes {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:22px 0 28px;
  font-size:15px;
}

.tasting-notes span {
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
}

.beer-story .beer-actions {
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* "Bestellen" (owner, 27-09-2026): one question, two answers — pickup in the brewery or the
   webshop. The toggle is a ghost .cbtn with a cart instead of the arrow. */
/* Scoped under .beer-story: button.css loads after this file, so a bare selector loses to .cbtn::after. */
.beer-story .beer-order-toggle::after { content:none; }
/* 1.2em = the .cbtn line-height, so the icon never makes this button taller than "Ontmoet". */
.beer-order-toggle .sbv-icon { display:block; width:1.2em; height:1.2em; flex:none; margin-right:-2px; }
.beer-order {
  width:100%;
  margin-top:14px;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--cream);
}
.beer-order-q {
  padding:14px 18px;
  font-size:17px;
  border-bottom:1px solid var(--line);
}
.beer-order-opt {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px 18px;
  background:transparent;
  color:var(--cream);
  font-size:17px;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s,background .25s;
}
.beer-order-opt + .beer-order-opt { border-top:1px solid var(--line); }
.beer-order-opt small { color:var(--muted); font-size:14px; }
.beer-order-opt[href]:hover,
.beer-order-opt[href]:focus-visible { background:var(--ink); color:var(--gold); }
.beer-order-opt[aria-disabled="true"] { background:transparent; color:var(--muted); cursor:default; }

.beer-selector:not([hidden]) {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-bottom:0;
}

.beer-choice {
  padding:14px 10px;
  background:transparent;
  color:var(--muted);
  border:0;
  border-right:1px solid var(--line);
  position:relative;
  text-align:center;
  transition:color .25s,background .25s;
}

.beer-choice:nth-child(4n) {
  border-right:0;
}
.beer-choice:nth-child(-n+4) {
  border-bottom:1px solid var(--line);
}

.beer-choice span {
  display:block;
  font-size:18px;
  white-space:nowrap;
}

.beer-choice small {
  display:block;
  font-size:14px;
  margin-top:4px;
}

.beer-choice[aria-pressed=true] {
  color:var(--cream);
  background:var(--ink-2);
}

.beer-choice[aria-pressed=true]::after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--beer-color, var(--gold));
  color:var(--ink);
}

.beer-choice:hover {
  color:var(--gold);
  background:var(--ink-2);
}

/* Tier E "beerbar" (UXfancy.md §11): the bar grows in instead of jumping from choice to choice.
   Same pattern as .brewery-scene-choice::before. Without the key the rule above still draws it. */
body[data-motion~="beerbar"] .beer-choice::after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--beer-color, var(--gold));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
body[data-motion~="beerbar"] .beer-choice[aria-pressed=true]::after { transform:scaleX(1); }

.beer-shop {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:26px;
  color:var(--muted);
  font-size:18px;
}

.beer-shop a {
  color:var(--cream);
}

/* Visible production evidence comes before the experience cards. */
.brewery-insight { padding-block: 46px; border-bottom: 1px solid var(--line); }
.brewery-insight-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.brewery-insight h2 { font-size: clamp(30px, 2.7vw, 38px); }
.brewery-insight-heading > p,
.brewery-insight-footer > p { color: var(--muted); font-size: 18px; line-height: 1.55; }
.brewery-insight-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
.brewery-insight-photo { margin: 0; min-width: 0; }
.brewery-insight-photo img { display: block; width: 100%; height: 245px; object-fit: cover; }
.brewery-insight-photo figcaption { padding-top: 18px; }
.brewery-insight-photo figcaption > span { display: block; color: var(--muted); font-size: 14px; margin-bottom: 5px; }
.brewery-insight-photo strong { display: block; font-size: 23px; font-weight: 500; white-space: nowrap; }
.brewery-insight-photo p { color: var(--muted); font-size: 17px; line-height: 1.5; margin-top: 8px; }
.brewery-insight-footer { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.brewery-insight-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 18px 24px; }
.hero-signoff a { display: inline-flex; align-items: center; gap: 12px; }
.hero-signoff a:hover { color: var(--gold); }

/* A wide window into the working brewery; its facts also select the scene.
   The cream equipment panel creates a clear change of pace after the hero. */
.brewery-scene {
  position: relative;
  aspect-ratio: 2.35;
  overflow: hidden;
  background: var(--ink-2);
}
.brewery-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .7s var(--ease), transform 1.2s var(--ease);
}
.brewery-scene img.is-current { opacity: 1; transform: scale(1); }
.brewery-scene img:first-child { object-position: 50% 53%; }
.brewery-scene.is-instant img { transition: none; }

/* ONE WARM DUOTONE ACROSS ALL THREE SCENES (15-09-2026, four review pins to get here).
   The pins, in order: "this black and white picture is very very bright" → "we need more
   yellow glow, it is still too bright" → the same again → "the bottling line is the only one
   getting adjusted and it is far too yellow; we asked for more yellow because we saw no
   difference on the first picture".

   THE LAST PIN IS THE ONE THAT EXPLAINS ALL THE OTHERS, and the mistake is worth keeping.
   Every earlier round tuned ONE photograph, because only afvullen.png carried data-tint.
   Meanwhile the first scene was pinned to `filter: grayscale(1)`, which strips colour — so
   no amount of gold could ever show on it. Asking for "more yellow" while looking at a frame
   that cannot BE yellow is a request that can never be satisfied, so each round pushed the
   one tintable photo further, until it came out orange and the others stayed grey. A tint
   that applies to one of three photographs is not a tint, it is an odd one out.

   SO THE TREATMENT IS SHARED NOW. Every scene photograph gets the same duotone: grayscale()
   to flatten three differently-shot sources to one tone, then sepia() + saturate() to rebuild
   that grey as warm gold, with a small hue-rotate to swing it off sepia-brown. The first shared
   values (sepia .45 / saturate 1.55) read as yellow, not as warm: red-minus-blue was 62 / 47 / 43.
   They are now sepia .28 / saturate 1.12, which measures 19 / 13 / 11 — a warm grey, still one
   tone across the three photographs. Raise both knobs together or the tint goes yellow again.

   AFVULLEN.PNG KEEPS ONE EXTRA KNOB, and only one: it is exposed far hotter than the other
   two, so its whites read as a hole in a dark section. That is a brightness fault, not a hue
   fault, so it is corrected with brightness/contrast and NOT by giving it more gold — which is
   precisely the confusion that produced the orange frame. It is to be reshot; deleting
   data-tint from the <img> removes the correction and nothing else.

   THE PHOTO CARRIES THE ATTRIBUTE, NOT ITS POSITION. home.js moves these <img> elements
   into the scene and can reorder them; an nth-child rule would then correct the wrong one.
   The overlay lives on the container because an <img> is a replaced element and has no
   ::after of its own. It is always in the layer stack at opacity 0 and fades on the same
   0.7s clock as the photographs, so a scene change stays one motion. */
.brewery-scene img {
  filter: grayscale(1) sepia(.28) saturate(1.12) hue-rotate(-9deg);
}
.brewery-scene img[data-tint="gold"] {
  filter: brightness(.80) contrast(1.06) grayscale(1) sepia(.28) saturate(1.12) hue-rotate(-9deg);
}
.brewery-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--gold); mix-blend-mode: multiply;
  opacity: 0; transition: opacity .7s var(--ease);
}
/* Op élke scene nu, en licht: het verft niet meer één foto maar bindt de hele reeks. */
.brewery-scene:has(img.is-current)::after { opacity: .08; }
.brewery-scene.is-instant::after { transition: none; }
.brewery-insight.is-interactive .brewery-insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--ink-2);
  color: var(--cream);
}
.brewery-insight.is-interactive .brewery-insight-photo { padding: 0 26px 22px; }
.brewery-insight.is-interactive figcaption { padding-top: 0; }
.brewery-insight.is-interactive .brewery-insight-photo p { color: var(--muted); }
.brewery-scene-choice {
  position: relative;
  display: block;
  width: 100%;
  padding: 22px 0 0;
  border: 0;
  text-align: left;
  background: transparent;
  color: var(--cream);
}
.brewery-scene-choice::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.brewery-scene-choice[aria-pressed="true"]::before { transform: scaleX(1); }
.brewery-scene-choice > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 15px;
}
.brewery-scene-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .brewery-scene-choice:hover::before { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .brewery-insight-heading { grid-template-columns: 1fr; gap: 16px; }
  .brewery-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .brewery-insight-photo img { height: 170px; }
  .brewery-insight-photo strong { font-size: 18px; }
  .brewery-insight-footer { grid-template-columns: 1fr; gap: 20px; }
  .brewery-insight-links { justify-content: flex-start; }
  .brewery-insight.is-interactive .brewery-insight-photo { padding-inline: 16px; }
  .brewery-insight.is-interactive .brewery-insight-photo strong { font-size: 17px; }
}
@media (max-width: 600px) {
  .brewery-insight { padding-block: 36px; }
  .brewery-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .brewery-insight-photo:first-child { grid-column: 1 / -1; }
  .brewery-insight-photo img { height: auto; aspect-ratio: 1024 / 558; }
  .brewery-insight-photo strong { font-size: 22px; }
  .brewery-insight-photo:not(:first-child) strong { font-size: 18px; }
  .brewery-insight-photo:not(:first-child) p { font-size: 16px; }
  .brewery-insight-photo figcaption { padding-top: 12px; }
  .brewery-scene { aspect-ratio: 1.5; }
  .brewery-insight.is-interactive .brewery-insight-grid { grid-template-columns: 1fr; }
  .brewery-insight.is-interactive .brewery-insight-photo { padding: 0 18px 15px; }
  .brewery-insight.is-interactive .brewery-insight-photo + .brewery-insight-photo { border-top: 1px solid var(--line); }
  .brewery-scene-choice { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-top: 15px; }
  .brewery-scene-choice > span { margin-bottom: 0; font-size: 14px; }
  .brewery-insight.is-interactive .brewery-insight-photo strong { font-size: 18px; }
  .brewery-insight.is-interactive .brewery-insight-photo p { font-size: 16px; margin-top: 5px; }
}

.reviews {
  padding-block: 48px 45px;
  background:var(--ink-2);
  color:var(--cream);
  border-block:1px solid var(--line);
}

.review-rating {
  display:flex;
  gap:16px;
  align-items:center;
  font-size:15px;
  line-height:1.45;
}

.review-rating strong {
  font-weight:400;
  font-size: 44px;
  color:var(--gold);
  line-height:1;
}

/* A RAIL, NOT A GRID OF THREE (review pin, 15-09-2026). All five-star reviews sit in one
   horizontal strip that the guest scrolls; scroll-snap stops it on a card instead of halfway
   through a sentence. The rail keeps its own scrollbar (`overscroll-behavior-x: contain`), so
   reaching its end never starts scrolling the page sideways.
   THE CARDS ARE FIXED WIDTH so a partial fourth card is visible: an evenly filled row is the
   thing that makes a rail look like a finished grid, and then nobody scrolls it. */
.review-grid {
  display:flex;
  gap:40px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-left:1px;
  padding-bottom:18px;
}
.review-grid:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }

.review {
  flex:0 0 clamp(250px,26vw,330px);
  scroll-snap-align:start;
  border-top:1px solid var(--line);
  padding-top:27px;
  transition:border-color .3s var(--ease);
}

/* The whole card is the link. `a:hover{color:var(--gold)}` is a site-wide rule and would set a
   whole review in gold, which reads as a warning, so the hover lands on the rule and the caption
   instead — the two places that say "this goes somewhere". */
.review-link {
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}
.review-link:hover, .review-link:focus-visible { color:inherit; }
.review:hover, .review:focus-within { border-top-color:var(--gold); }
.review-link:hover figcaption small, .review-link:focus-visible figcaption small { color:var(--gold); }

.review-stars {
  font-size:15px;
  letter-spacing:4px;
  color:var(--gold);
  margin-bottom:20px;
}

/* SEVEN LINES, THEN AN ELLIPSIS. Every card in a rail is as tall as the longest review in it, and
   the longest one here is 310 characters — which left a 200px hole under every short review. The
   card links to Google, so the rest of a long review is one click away and the rail stays even. */
.review blockquote {
  margin:0 0 28px;
  font-size: 20px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:7;
  overflow:hidden;
}

.review figcaption {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:17px;
}

.review figcaption small {
  display:block;
  color:var(--muted);
  font-size:14px;
}

.review-avatar {
  border:1px solid var(--line);
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--gold);
}

/* .review-source held "Handmatig bijgewerkte selectie uit Google reviews." It was removed with the
   line itself on 15-09-2026 (review pin); every card links to Google now. */

.invitation {
  padding-block: 44px 48px;
  position:relative;
  overflow:hidden;
}

/* One child since 15-09-2026 (the "Veenendaal · Sinds <year>" line went out as filler), so the
   row simply starts at the left. Put anything back here and space-between takes over again. */
.invitation-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  color:var(--muted);
}

.invitation-top .eyebrow {
  margin:0;
}

.invitation h2 {
  font-size: 44px;
  letter-spacing: -.015em;
  margin: 18px 0 24px;
  line-height:1.05;
}

.invitation em {
  font-weight:400;
  color:var(--gold);
}

.invitation-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

.invitation-bottom p {
  font-size: 20px;
  color:var(--muted);
}

.invitation-bottom .hero-cta {
  margin-top:0;
}

.footer {
  border-top:1px solid var(--line);
  padding-block:50px 24px;
}

.footer-main {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:35px;
  align-items:start;
}

.footer-main>div {
  display:flex;
  flex-direction:column;
  font-size:17px;
  color:var(--muted);
  gap:3px;
}

.footer-main .eyebrow {
  margin-bottom:12px;
  color:var(--cream);
}

.footer-main a:not(.brand) {
  padding-block:3px;
  overflow-wrap:anywhere;
}

.footer .brand {
  gap:12px;
}

.footer .brand img {
  width:50px;
  height:50px;
}

.footer .brand>span {
  font-size:13px;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:45px;
  padding-top:24px;
  font-size:14px;
  color:var(--muted);
}

.footer-bottom a {
  padding-block:3px;
}



/* Content is visible without JS. Animate only after observation is installed. */
.reveal.is-waiting {
  opacity:0;
  transform:translateY(28px);
}

.reveal {
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:var(--delay,0ms);
}

.is-loaded .title-line>span {
  animation:title-in 1.1s var(--ease) both;
}

.is-loaded .title-line:nth-child(2)>span {
  animation-delay:.12s;
}

.is-loaded .title-line:nth-child(3)>span {
  animation-delay:.24s;
}

.is-loaded .entrance {
  animation:rise-in 1s .25s var(--ease) both;
}


@keyframes title-in {
  from {
    transform:translateY(110%) rotate(2deg);
  }
  to {
    transform:translateY(0) rotate(0);
  }
}

@keyframes rise-in {
  from {
    opacity:0;
    transform:translateY(18px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes photo-in {
  from {
    opacity:.3;
    clip-path:inset(8% 0 0 0);
  }
  to {
    opacity:1;
    clip-path:inset(0);
  }
}



/* Native timelines enhance capable browsers; every section works without them. */
@supports(animation-timeline:scroll()) {
  @keyframes reading {
    to {
      transform:scaleX(1);
    }
  }
  .reading-progress {
    animation:reading linear both;
    animation-timeline:scroll();
  }
}

@media(min-width:901px) {
  .hero-visual:hover .hero-picture img {
    transform:scale(1.035);
  }
}

@media(max-width:900px) {
  .hero {
    column-gap:5%;
    grid-template-columns: 1.2fr 1fr;
    padding: 0 var(--gutter);
}
  .hero-copy {
    padding-top:25px;
    padding: 50px 0 40px;
  align-self: center;
}
  .hero h1 {
    font-size: 48px;
    line-height: 1.12;
  letter-spacing: -.015em;
}
  .hero-visual {
    min-height: 0;
    position: absolute;
  inset: 0;
  margin: 0;
}
  .hero-intro {
    font-size:19px;
    margin-top: 20px;
}
  .hero-picture {
    border-top-right-radius: 0;
    border-radius: 0;
}
  .photo-tag {
    left:26px;
    top:26px;
    font-size:12px;
  }
  .hero-bottom {
    font-size: 14px;
    position: relative;
  z-index: 1;
  padding: 18px 0;
  background: rgba(15,14,11,.55);
  color: var(--muted);
}
  .hero-bottom>span:nth-child(2) {
    display:none;
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:16px;
    margin-bottom: 24px;
}
  .experience-grid {
    gap:18px;
  }
  .experience-photo {
    aspect-ratio: 1/1;
  }
  .experience h3 {
    font-size: 25px;
  }
  .experience p {
    font-size: 18px;
    min-height: 88px;
  }
  .experience-action {
    gap:12px;
    padding-top: 16px;
  margin-top: 18px;
}
  .photo-category {
    left:15px;
    font-size:14px;
    letter-spacing:.025em;
  }
  .beer-stage {
    grid-template-columns:1fr 1fr;
  }
  .beer-art {
    padding-inline:22px;
    min-height: 310px;
}
  .beer-story {
    padding: 28px 24px;
    min-height: 0;
}

  .beer-shop {
    align-items:start;
  }
  .review-grid {
    gap:24px;
  }
  .review blockquote {
    font-size: 20px;
  }
  .invitation-bottom {
    align-items:start;
    flex-direction:column;
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .footer-main>.brand {
    grid-column:1/-1;
  }
}

@media(max-width:600px) {
  :root {
    --gutter:22px;
    --fs-label:14px;
    --ls-label:.07em;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top:0;
    padding: 0 var(--gutter);
}
  .hero-copy {
    padding: 34px 0 14px;
    align-self: center;
}
  .hero h1 {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -.015em;
}
  .hero-intro {
    font-size:19px;
    margin-top: 20px;
  }
  .hero-intro br {
    display:none;
  }
  .hero-cta {
    gap:10px;
    margin-top:24px;
  }
  .hero-signoff {
    margin-top: 22px;
    font-size:14px;
  }
  .hero-visual {
    min-height: 0;
    margin: 0;
    position: absolute;
  inset: 0;
}
  .hero-picture {
    border-top-right-radius: 0;
    border-radius: 0;
}
  .hero-picture img {
    object-position: center 44%;
    opacity: .55;
}
  .hero-bottom {
    padding-block:17px;
    align-items:start;
    flex-direction:column;
    gap:7px;
    position: relative;
  z-index: 1;
  font-size: 14px;
  padding: 18px 0;
  background: rgba(15,14,11,.55);
  color: var(--muted);
}
  .hero-bottom a {
    align-self:flex-end;
  }
  .section-label {
    font-size:13px;
    gap:2px;
    margin-bottom:25px;
  }
  .ordinal {
    margin-right:9px;
  }
  .experiences,.beers,.reviews {
    padding-block:42px;
  }
  .section-heading {
    margin-bottom: 24px;
  }
  .section-heading h2 {
    font-size: 32px;
  }
  .section-heading .eyebrow {
    font-size:13px;
  }
  .experience-grid {
    grid-template-columns:1fr;
    gap:42px;
  }
  .experience-photo {
    aspect-ratio: 5/4;
  }
  .experience h3 {
    font-size: 26px;
  }
  .experience p {
    min-height: 0;
    font-size: 18px;
  }
  .experience-content {
    padding-top: 19px;
  }
  .experience-action {
    justify-content:space-between;
    gap:12px;
    padding-top: 16px;
  margin-top: 18px;
}
  .photo-category {
    left:22px;
    font-size:16px;
  }
  .beer-stage {
    grid-template-columns:1fr;
  }
  .beer-art {
    min-height: 310px;
    padding:62px 22px;
  }
  .beer-story {
    padding: 28px 24px;
    min-height: 0;
  }
  .beer-story h3 {
    font-size: 36px;
  }
  .beer-choice {
    padding:10px 8px;
    line-height:1.3;
  }
  .beer-choice span {
    font-size:16px;
  }
  .beer-choice small {
    font-size:13px;
  }
  .beer-shop {
    flex-direction:column;
    gap:10px;
    font-size:18px;
  }
  .review-grid {
    gap:24px;
  }
  /* One card at a time on a phone, with a strip of the next one in view as the invitation. */
  .review {
    flex-basis:78vw;
  }
  .review blockquote {
    font-size: 20px;
  }
  .review-rating strong {
    font-size: 44px;
  }
  .invitation {
    padding-block: 44px 48px;
  }
  .invitation-top {
    font-size:13px;
  }
  .invitation h2 {
    font-size: 34px;
    margin-block:24px 30px;
    letter-spacing: -.015em;
  margin: 18px 0 24px;
}
  .invitation-bottom p {
    font-size: 20px;
  }
  .footer {
    padding-top:35px;
  }
  .footer-main {
    grid-template-columns:1fr;
    gap:25px;
  }
  .footer-main>.brand {
    grid-column:auto;
  }
  .footer-main>div {
    font-size:17px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:10px;
    margin-top:30px;
  }

}

/* One shared renderer; the preview owns only its placement and image fallback. */
/* THE HERO FRAME IS AS WIDE AS THE BOTTLE, NOT AS WIDE AS THE LABEL (review pin, 15-09-2026).
   The wide box is inherited from /site/bieren/, where the label starts as a flat 2:1 sheet that
   fills the frame and then rolls onto the glass — that reveal needs the side room, and the
   orbiting chips need more. The hero mounts with intro:'none' and features:[] (js/home.js), so
   it paid for both and showed neither: 425px of canvas around a bottle about 100px wide, which
   also parked the bottle 270px away from the right gutter.
   THE CAMERA KEEPS A FIXED VERTICAL FIELD OF VIEW (bottle3d.js sets only camera.aspect from the
   box), so a narrower box crops empty sides — the bottle itself does not get smaller.
   THE COLUMN IS AS WIDE AS ITS WIDEST CHILD and sits against the gutter, so the bottle and its
   caption share one centre line. The caption may not break over two lines, so a long beer name
   widens the column instead. */
.hero-product { position: relative; align-self: center; z-index: 1; padding: 18px 0 25px; width: max-content; margin-left: auto; }
.bottle-frame { position: relative; }
.hero-bottle { display: block; width: 220px; height: 345px; margin-inline: auto; }
.bottle-fallback { pointer-events: none; }
/* The fallback is the flat label sheet, so it uses the full width of the narrower box. */
.hero-bottle .bottle-fallback { position: absolute; width: 100%; height: auto; top: 50%; left: 0; transform: translateY(-50%); }
.bottle-mount { display: block; position: absolute; inset: 0; }
.hero-bottle .bottle-mount { visibility: hidden; }
.hero-bottle .bottle-fallback { visibility: hidden; }
.hero-bottle[data-bottle-state="fallback"] .bottle-fallback { visibility: visible; }
.hero-bottle[data-bottle-state="ready"] .bottle-mount { visibility: visible; }
.bottle-render { position: absolute; inset: 0; }
.b3d-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.b3d-canvas:active { cursor: grabbing; }
/* The renderer marks its first moving frame, just as on /site/bieren/.
   Keep its canvas opaque under the image; opacity fades delay WebGL painting. */
.beer-art:has(.bottle-render.is-intro) .bottle-fallback { opacity: 0; }
.beer-art:has(.bottle-render.is-rolled) { background: var(--ink-2); }
/* Contain, not cover — the same fix as .bp-3d-branding in css/bieren.css, and for the same
   reason: a cover fit of a 2:1 sheet into this taller box cropped the sides away, and no
   focal-point offset can show a part of the image the crop already discarded. The box stays
   inset 42px to match .bottle-mount, so both layers keep the same frame. */
.beer-art .bottle-fallback {
  position: absolute; top: 42px; bottom: 42px; left: 0; right: 0;
  width: 100%; height: auto; max-height: calc(100% - 84px); margin: auto;
  object-fit: contain; object-position: center;
  z-index: 3; box-shadow: none; transition: none;
}
/* Canonical feature-chip component, scoped to this isolated preview. */
.bottle-render .b3d-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bottle-render .b3d-chip {
  position: absolute; left: 0; top: 0;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: #f6ead8; background: rgba(24, 16, 9, 0.62);
  border: 1px solid var(--beer-color, var(--gold));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.5s ease; will-change: transform;
}
.bottle-render .b3d-chips.is-live .b3d-chip { opacity: 1; }
.bottle-render .b3d-chips.is-live .b3d-chip.is-behind { opacity: 0.55; }

.bottle-caption { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 19px; text-align: center; white-space: nowrap; }
.bottle-caption a>span { display: block; color: var(--muted); font-size: 15px; }
.beer-art .bottle-mount { inset: 42px 0; }
.beer-art::before { width: 58%; left: 21%; opacity: .55; }

@media(max-width:900px) {
  .hero-product { padding-inline: 0; }
  .hero-bottle { width: 200px; height: 320px; }
  .bottle-caption { gap: 12px; font-size: 17px; }
}
@media(max-width:600px) {
  .beer-selector:not([hidden]) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .beer-choice:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .beer-choice:nth-child(2n) { border-right: 0; }
  .beer-choice:nth-last-child(-n+2) { border-bottom: 0; }
  .beer-art { min-height: 420px; }
  .bottle-render .b3d-chip { font-size: 12px; padding: 5px 10px; }
  .hero-picture::after { background: linear-gradient(180deg,rgba(15,14,11,.84),rgba(15,14,11,.72)),linear-gradient(0deg,var(--ink),transparent); color: var(--cream); }
  .hero h1 { margin-left: 0; }
  .hero-intro { font-size: 18px; }
  /* The phone puts the caption BESIDE the bottle, so this column is full width again. */
  .hero-product { display: grid; grid-template-columns: minmax(0,1fr) 145px; align-items: center; padding: 0 0 20px; width: auto; margin-left: 0; }
  .hero-bottle { width: 100%; height: 225px; grid-column: 2; grid-row: 1; }
  .hero-product .bottle-caption { grid-column: 1; grid-row: 1; }
  .bottle-caption { flex-direction: column; align-items: center; gap: 8px; }
  .hero-bottom { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .hero-bottom a { align-self: auto; }
  .hero-cta { column-gap: 10px; }
  .hero-signoff { font-size: 13px; }
  .experience-grid { gap: 34px; }
  .invitation-bottom { gap: 20px; }
}

/* The shared footer keeps company details and legal links in one markup source. */
.foot { padding: 0 var(--gutter) 28px; color: var(--muted); font-size: 14px; }
.foot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.foot-meta nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 13px; }
.foot-legal > span { white-space: nowrap; }