.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
x-dc{display:none!important}

html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

  * { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scroll-behavior: smooth; }
  a { color: #8A6D34; text-decoration: none; }
  a:hover { color: #B08D4C; }
  ::selection { background: #E6D8B8; color: #1E1B16; }
  @keyframes momentUnderline { from { background-size: 0% 1.5px; } to { background-size: 100% 1.5px; } }

  /* Responsive: alle styling is inline, dus overrides via attribuutselectors */
  img, video { max-width: 100%; }
  @media (max-width: 1200px) {
    [style*="max-width:1240px"], [style*="max-width: 1240px"], [style*="max-width:1360px"], [style*="max-width: 1360px"] { padding-left: 32px !important; padding-right: 32px !important; }
  }
  @media (max-width: 1000px) {
    [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 1120px) {
    nav { padding-left: 26px !important; padding-right: 26px !important; }
    nav > div:last-child, nav > a + div { gap: 20px !important; }
    nav > div:last-child > a, nav > div:last-child > span { font-size: 12px !important; letter-spacing: 0.1em !important; }
  }
  @media (max-width: 860px) {
    nav { padding: 14px 20px !important; flex-wrap: wrap !important; row-gap: 8px !important; }
    nav > div:last-child, nav > a + div { gap: 12px !important; flex-wrap: wrap !important; }
    nav > div:last-child > a, nav > div:last-child > span { font-size: 11px !important; letter-spacing: 0.09em !important; }
    nav > div:last-child > a, nav > div:last-child > span { padding-top: 15px !important; padding-bottom: 15px !important; }
    footer a:not([style*="display:flex"]) { display: inline-block !important; padding-top: 6px !important; padding-bottom: 6px !important; }
    [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"], [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 760px) {
    section, header { padding-left: 20px !important; padding-right: 20px !important; }
    footer > div { padding-left: 20px !important; padding-right: 20px !important; }
    [style*="max-width:1120px"], [style*="max-width: 1120px"], [style*="max-width:1200px"], [style*="max-width: 1200px"], [style*="max-width:1240px"], [style*="max-width: 1240px"], [style*="max-width:1280px"], [style*="max-width: 1280px"], [style*="max-width:1360px"], [style*="max-width: 1360px"], [style*="max-width:1440px"], [style*="max-width: 1440px"] { padding-left: 0 !important; padding-right: 0 !important; }
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    * { grid-column: auto !important; grid-row: auto !important; }
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"], [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="repeat(auto-fit"] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
    [style*="margin-top:clamp(0px"] { margin-top: 0 !important; }
    [style*="inset:22px"] { inset: 12px !important; }
    [style*="min-height:100vh"], [style*="min-height: 100vh"] { min-height: 100svh !important; }
    input, select, textarea { font-size: 16px !important; }
  }
  @media (max-width: 520px) {
    [style*="repeat(auto-fit"], [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
    nav { padding: 12px 16px !important; }
    nav a[style*="padding"] { padding: 9px 14px !important; }
  }
  :focus-visible { outline: 2px solid #B08D4C; outline-offset: 3px; }
  .rd-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #1E1B16; color: #FAF8F3; padding: 13px 20px; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  .rd-skip:focus { left: 12px; top: 12px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
  }


/* zalen and zaal detail keep link colour from their parent */
body.rd-links-inherit a { color: inherit; }
body.rd-links-inherit a:hover { color: inherit; }


/* ---------------------------------------------------------------- mobile nav */
.rd-nav-toggle { display: none; }

@media (max-width: 860px) {
  /* 20px so the crest lines up with the content gutter below it. The base sheet
     drops the nav to 16px under 520px, which left the logo 4px out of line with
     everything on the page.

     Below 860px the bar always sits in flow and always sits solid, on every
     page. The panel needs a positioned parent to anchor to, and a bar that
     floats transparently over a hero would put near white brand text on the
     cream page background once it is no longer over the video. The !important
     is there to beat the inline colours the scroll handler writes. */
  nav {
    flex-wrap: nowrap !important;
    position: relative !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: #FAF8F3 !important;
    box-shadow: 0 1px 0 #E9E2D4 !important;
    backdrop-filter: none !important;
  }
  nav [data-rd-brand] { color: #1E1B16 !important; }
  .rd-nav-toggle { color: #1E1B16 !important; }

  .rd-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    /* all the padding on the left: the bars then end flush with the 20px gutter
       the crest, the photos and the footer rule all use, instead of sitting 11px
       further in than everything below them, while the tap box stays 46px */
    padding: 0 0 0 22px;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: none;
  }
  .rd-nav-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: currentColor;
    transition: transform .3s ease, opacity .3s ease;
  }
  nav.rd-open .rd-nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.rd-open .rd-nav-toggle span:nth-child(2) { opacity: 0; }
  nav.rd-open .rd-nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* the links become a panel under the bar, hidden until the toggle opens it */
  #rd-nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #FAF8F3 !important;
    color: #1E1B16 !important;
    box-shadow: 0 18px 40px -24px rgba(30, 27, 22, 0.55);
    border-top: 1px solid #E9E2D4;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  nav.rd-open #rd-nav-links { display: flex !important; }

  /* 44px tap targets, and the nav sits over video on some pages so the panel
     text colour has to beat the inline colour the scroll handler writes */
  #rd-nav-links > a,
  #rd-nav-links > span {
    display: block !important;
    padding: 17px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    color: #1E1B16 !important;
    border-bottom: 1px solid #EDE6D8 !important;
    text-align: left !important;
  }
  #rd-nav-links > a:last-child,
  #rd-nav-links > span:last-child { border-bottom: 0 !important; }
  /* the desktop current-page underline would read as a divider in a stacked
     list, so mark it down the side instead */
  #rd-nav-links > [aria-current="page"] {
    box-shadow: inset 3px 0 0 #B08D4C;
    color: #7A5F2C !important;
  }

  /* opening the panel over the hero video needs a solid bar behind the brand */
  nav.rd-open { background: #FAF8F3 !important; box-shadow: 0 1px 0 #E9E2D4 !important; }
  nav.rd-open [data-rd-brand] { color: #1E1B16 !important; }
  nav.rd-open .rd-nav-toggle { color: #1E1B16 !important; }

  body.rd-nav-locked { overflow: hidden; }
}

/* The crest tucked in the hero corner sat clear of the old 42px nav, but the bar
   is now the same compact height on every page and the Contact chip lands right
   on top of it. Two of the same mark within 50px reads as a mistake either way,
   so the decorative copy goes at every width. Scoped to the absolutely
   positioned one: the privacy page uses the same file as a 16px inline mark. */
main > header img[src*="royal-decor-logo"][style*="position:absolute"] {
  display: none !important;
}

@media (max-width: 760px) {
  /* The rule above zeroes horizontal padding on every max-width container so
     nested wrappers do not double up. When the outermost block carries the
     max-width itself, that left the copy flush against the screen edge. */
  main > section[style*="max-width"],
  main > header[style*="max-width"],
  main > div[style*="max-width"],
  main > section,
  main > header { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero copy is laid over the video, so its wrapper is the only thing holding
     it off the frame edge. Zeroing that padding pushed the headline flush
     against the video. Container divs only: headings and paragraphs carry their
     own max-width for line length, and padding those indents the copy out of
     alignment with the headline above it. */
  main > header div[style*="max-width"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* the in-bar Contact chip is a phone affordance, the desktop nav already shows one */
.rd-nav-cta { display: none; }

@media (max-width: 760px) {
  /* The five zaal cards on the home page were forced back to two columns by the
     base sheet, which shrank each photo to 166x294 and left "Kasteel van Hoen"
     alone in a row with an empty cell beside it. One column, same as /zalen. */
  main [style*="repeat(5, 1fr)"],
  main [style*="repeat(5,1fr)"],
  main [style*="repeat(4, 1fr)"],
  main [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }

  /* The footer sat flush against both screen edges while the rest of the page
     was inset 20px, and the bottom bar pushed "Privacybeleid" off the right
     edge. The base sheet zeroes padding on any max-width container with an
     attribute selector (0,1,0), which beat the plain `footer > div` (0,0,2)
     that was meant to put the gutter back. Add the attribute and it wins. */
  footer > div[style*="max-width"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer > div > div:last-child { row-gap: 10px; }

  /* Vertical rhythm. Everything inside a block was spaced almost as far apart
     as the blocks themselves (about 31px heading to paragraph against about
     70px between whole sections), so nothing told the eye where a section
     ended. Tighten what belongs together; the section gap does the separating. */
  main h1, main h2 { margin-bottom: 15px !important; }
  main p { line-height: 1.55 !important; }
  main [style*="letter-spacing:0.34em"],
  main [style*="letter-spacing:0.24em"] { margin-bottom: 11px !important; }

  /* The section boundary had become the SMALLEST gap on the page: about 36px
     between two sections against about 64px between a paragraph and the image
     inside one of them, so the page read as one uninterrupted run. These are the
     SPACE_TIGHT sections, whose 4vw term collapses to its 30px floor on a phone.
     Give the boundary the space, and take some back from inside the block. */
  main > section[style*="clamp(30px,4vw,58px) 0px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  main [style*="grid-template-columns"] { row-gap: 40px !important; }

  /* The oversized script words that bleed behind a heading are a desktop motif.
     On a 390px screen "Ceremonie" spans the whole width and lands right on top
     of the CEREMONIE & BRUIDSBANK eyebrow, putting the smallest type on the page
     over the busiest thing on the page. The numerals are narrow and still read
     well, so only the italic words go: italic is what separates the two. */
  [aria-hidden="true"][style*="pointer-events:none"][style*="font-style:italic"] {
    display: none !important;
  }
}

@media (max-width: 860px) {
  /* The bar used to scroll away, so from anywhere below the first screen there
     was no way to reach anything without scrolling back to the top. */
  nav { position: sticky !important; top: 0 !important; }

  /* 44px is the accepted minimum tap target. Footer links measured 25 to 28px
     and the WhatsApp / Bellen chips 38px. */
  footer a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  .rd-chip,
  .rd-reach {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }

  /* the brand lockup is the one thing every page shares, it has to be tappable */
  nav > a:first-child { min-height: 44px; }

  /* Now that the bar is genuinely sticky it covers whatever an in-page link
     lands on. scroll-margin-top handles anchors; scroll-padding-top on the root
     also covers the browser's own scroll restoration on back. */
  html { scroll-padding-top: 84px; }
  [id] { scroll-margin-top: 84px; }

  /* "Alle zalen" back link on a zaal page sat at 16px tall */
  main > div > a[href="/zalen"],
  main > a[href="/zalen"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 860px) {
  /* The open menu was set at label scale, 13px, the same size as a form label,
     so it read as a dropdown rather than as the page's navigation. Menu scale
     instead, and once the type carries itself the hairlines between rows are
     just noise: the gold Contact band stays the only filled element.

     Set in Cormorant sentence case rather than tracked uppercase. Uppercase at
     this size does not fit: "VEELGESTELDE VRAGEN" is 19 characters and runs off
     a 390px screen above about 21px. Sentence case in the display face is
     narrower, so the type can actually reach menu scale, and it echoes the
     wordmark two rows above it. */
  #rd-nav-links > a,
  #rd-nav-links > span {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 27px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding: 13px 20px !important;
    border-bottom: 0 !important;
    line-height: 1.25 !important;
  }
  #rd-nav-links > a:last-child,
  #rd-nav-links > span:last-child {
    margin-top: 10px;
    padding-top: 17px !important;
    padding-bottom: 17px !important;
  }

  /* A crest, a wordmark and a hamburger, and no way to act. The Contact chip was
     buried in the panel, so from mid page the only visible control opened a menu.
     Surface it in the bar itself: persistent, one tap, no floating overlay. */
  nav .rd-nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    margin-left: auto;
    margin-right: 4px;
    background: #B08D4C;
    color: #1E1B16;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
  }
  nav > a:first-child span:last-child { font-size: 20px !important; }

  /* with the panel open the bar chip and the panel's gold Contact band are two
     gold Contact affordances on screen at once, styled differently */
  nav.rd-open .rd-nav-cta { display: none; }
}

@media (max-width: 374px) {
  /* Last resort only, and the threshold is measured rather than guessed. Brand
     154 + chip 90 + burger 46 puts the burger's right edge at 362px, so every
     width from 375px up keeps the wordmark and only genuinely narrow phones
     fall back to the crest alone. 390px, the commonest width, keeps it. */
  nav > a:first-child span:last-child { display: none; }
}

/* the hero call to action, phones only: on desktop the nav already carries one */
.rd-hero-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid #E6D8B8;
  background: rgba(15, 14, 12, 0.28);
  color: #FAF8F3;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
}
@media (max-width: 760px) {
  .rd-hero-cta { display: inline-flex; }
}


/* a link sitting inside a paragraph may not rely on colour alone (WCAG 1.4.1),
   and the gold on canvas is nowhere near a 3:1 difference from the body text */
main p a,
footer p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* form controls carry inline outline:none, which beats the :focus-visible rule
   in the base stylesheet. Keyboard users need a visible ring, so win on both
   specificity and !important. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #B08D4C !important;
  outline-offset: 2px !important;
}

.rd-form-note {
  display: none;
  border: 1px solid #B08D4C;
  background: #FBF7EE;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
}
.rd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rd-form-zaal {
  display: none;
  border-left: 2px solid #B08D4C;
  padding: 4px 0 4px 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #5A5348;
}


/* --- hover and focus states, authored inline as style-hover / style-focus --- */
/* generated, see build.py */

.rd-h-1:hover { background:#E6D8B8 !important; }
.rd-h-2:hover { background:#6F5626 !important; }
.rd-f-3:focus { border-color:#7A5F2C !important; }