@import url("/assets/fonts/v03-fonts.css");
body{margin:0;background:#efe8e2}

 



.site {
  --surface: #efe8e2; --surface-alt: #e4dbd3; --field: #fbf8f5;
  --ink: #2b211c; --ink-muted: #5e4f46; --rule: #cbbfb5; --field-border: #807167;
  --accent: #7a2b24; --on-accent: #ffffff; --focus: #7a2b24;
  --success: #2f5d4a; --error: #a1361f;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 112px; --space-8: 176px;
  --grid-margin: clamp(20px, 5vw, 96px); --gutter: 24px; --measure: 36em;
  --ease-film: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-quick: 160ms; --dur-base: 280ms; --dur-slow: 520ms;
  container-type: inline-size; container-name: site;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100%;
}
.zaal {
  --surface: #1e1815; --surface-alt: #2b211c; --field: #2b211c;
  --ink: #f7f2ee; --ink-muted: #b5a79c; --rule: #4a3d35;
  --accent: #d9b48a; --on-accent: #1e1815; --focus: #d9b48a;
  --success: #9cc7b0; --error: #f0a58f;
  background: var(--surface); color: var(--ink);
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site :focus { outline: none; }
.site :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.site img { max-width: 100%; display: block; }
:where(.site) p, :where(.site) figure, :where(.site) blockquote { margin: 0; }
:where(.site) :is(h1, h2, h3, h4) { margin: 0; font-weight: inherit; }

 
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--grid-margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.chapter { padding-block: var(--space-7); }
.chapter--wide { padding-block: var(--space-8); }
.stack-2 > * + * { margin-top: var(--space-2); } .stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); } .stack-5 > * + * { margin-top: var(--space-5); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--surface); font: 500 15px/1 var(--font-sans); text-decoration: none; }
.skip:focus-visible { top: 12px; }

 
.t-display-xl { font: 300 84px/88px var(--font-serif); letter-spacing: -0.02em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.t-display-l  { font: 300 60px/64px var(--font-serif); letter-spacing: -0.015em; font-variation-settings: "opsz" 60; text-wrap: balance; }
.t-display-m  { font: 350 44px/50px var(--font-serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 48; text-wrap: balance; }
.t-title { font: 400 28px/36px var(--font-serif); font-variation-settings: "opsz" 28; }
.t-lead  { font: 350 23px/36px var(--font-serif); font-variation-settings: "opsz" 20; max-width: 34em; text-wrap: pretty; }
.t-body  { font: 400 19px/31px var(--font-serif); font-variation-settings: "opsz" 16; max-width: var(--measure); text-wrap: pretty; }
.t-body p + p { margin-top: 1em; }
.t-quote { font: italic 300 30px/42px var(--font-serif); font-variation-settings: "opsz" 30; max-width: 26em; }
.t-ui { font: 500 16px/24px var(--font-sans); }
.t-small { font: 400 14px/20px var(--font-sans); }
.t-meta { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.t-tc { font: 500 14px/20px var(--font-sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }

 
.hdr { position: relative; z-index: 10; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.wordmark { font: 400 26px/1 var(--font-serif); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; font-variation-settings: "opsz" 30; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font: 500 15px/1 var(--font-sans); color: var(--ink); text-decoration: none; padding: 14px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 7px; height: 1px; background: currentColor; transition: right var(--dur-base) var(--ease-film); }
.nav a:hover::after, .nav a.is-current::after { right: 0; }
.nav a.is-current { color: var(--accent); }
.nav .btn { min-height: 44px; padding: 0 18px; }
.nav .btn::after { display: none; }
.nav a.btn, .nav a.btn:hover { color: var(--on-accent); }
.menu-btn { display: none; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0; color: var(--ink); font: 500 16px/1 var(--font-sans); cursor: pointer; text-decoration: none; align-items: center; justify-content: flex-end; }

 
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font: 500 16px/1.2 var(--font-sans); letter-spacing: 0.005em; border-radius: 2px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-quick) ease, border-color var(--dur-quick) ease, transform var(--dur-quick) ease; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 84%, #000); }
.zaal .btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--field-border); }
.btn--secondary:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.is-loading { position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 12px; height: 2px; background: linear-gradient(90deg, transparent, var(--on-accent), transparent) 0 0 / 40% 100% no-repeat; animation: vc-load 1.1s linear infinite; }
@keyframes vc-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--field-border); transition: color var(--dur-quick) ease, text-decoration-color var(--dur-quick) ease; }
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.link-ui { font: 500 16px/24px var(--font-sans); }

 
.ph { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #8a5d48; }
.ph::before { content: ""; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ph-avondveld { background: radial-gradient(70% 90% at 72% 38%, #f3cf9f 0%, #d79a68 22%, #8f5a43 52%, #3b2720 82%, #1e1815 100%); }
.ph-diner { background: radial-gradient(18% 26% at 30% 62%, #ffd7a0 0%, transparent 70%), radial-gradient(14% 20% at 58% 58%, #ffcf91 0%, transparent 70%), radial-gradient(12% 18% at 80% 64%, #f9c387 0%, transparent 70%), linear-gradient(180deg, #2b211c 0%, #4c3328 55%, #6a4433 100%); }
.ph-dans { background: radial-gradient(8% 12% at 20% 22%, #f4d1a4 0%, transparent 70%), radial-gradient(6% 9% at 42% 16%, #e8b9c0 0%, transparent 70%), radial-gradient(9% 13% at 70% 26%, #f6d9a8 0%, transparent 70%), radial-gradient(7% 10% at 86% 12%, #d9b48a 0%, transparent 70%), radial-gradient(60% 50% at 50% 100%, #7a2b24 0%, transparent 75%), linear-gradient(180deg, #1e1815, #3a2620); }
.ph-raam { background: radial-gradient(40% 70% at 18% 40%, #f7ebdc 0%, #e2c4a8 30%, transparent 70%), linear-gradient(100deg, #cfae92 0%, #8a6553 45%, #3c2a22 100%); }
.ph-portret { background: radial-gradient(45% 40% at 48% 34%, #e9c3a3 0%, #b88468 40%, transparent 72%), linear-gradient(170deg, #6d7a6c 0%, #4d4a3e 50%, #2b211c 100%); }
.ph-blik { background: radial-gradient(32% 50% at 36% 46%, #f1cfb0 0%, transparent 70%), radial-gradient(30% 48% at 66% 44%, #e6bf9e 0%, transparent 70%), linear-gradient(120deg, #a7b0a0 0%, #6f705d 50%, #3a3529 100%); }
.ph-kerk { background: radial-gradient(22% 60% at 50% 20%, #fbf1e1 0%, #e7cfb3 30%, transparent 70%), linear-gradient(180deg, #8d7766 0%, #4e3d33 60%, #2b211c 100%); }
.ph-tuin { background: radial-gradient(80% 60% at 30% 10%, #f4e3c4 0%, transparent 60%), linear-gradient(160deg, #a9a77f 0%, #6f7552 40%, #3f4430 75%, #2b2a1f 100%); }
.ph-speech { background: radial-gradient(28% 44% at 62% 40%, #f0c79d 0%, #b97a55 45%, transparent 75%), radial-gradient(60% 40% at 20% 90%, #5a3a2c 0%, transparent 70%), linear-gradient(180deg, #3a2a22, #1e1815); }
.ph-ochtend { background: radial-gradient(60% 80% at 80% 20%, #fff4e6 0%, #efd9c4 35%, transparent 70%), linear-gradient(200deg, #e9d6c6 0%, #b99a86 50%, #6d5547 100%); }
.tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 8px; font: 500 12px/16px var(--font-sans); background: rgba(247,242,238,.88); color: #2b211c; border-radius: 2px; }
.still { position: relative; margin: 0; }
.still__img { position: relative; overflow: hidden; background: var(--surface-alt); }
.r-scope { aspect-ratio: 2.39 / 1; } .r-still { aspect-ratio: 3 / 2; } .r-portrait { aspect-ratio: 4 / 5; } .r-wide { aspect-ratio: 16 / 9; }
.caption { margin-top: 12px; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); max-width: 40em; }

 
.film { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--surface-alt); color: inherit; cursor: pointer; text-align: left; text-decoration: none; overflow: hidden; }
.film .ph { transition: transform var(--dur-slow) var(--ease-film); }
.film::after { content: ""; position: absolute; inset: 16px; pointer-events: none; z-index: 2;
  --m: rgba(247, 242, 238, 0.9); --l: 22px; --w: 1.5px;
  background: linear-gradient(var(--m), var(--m)) top left / var(--l) var(--w), linear-gradient(var(--m), var(--m)) top left / var(--w) var(--l),
    linear-gradient(var(--m), var(--m)) top right / var(--l) var(--w), linear-gradient(var(--m), var(--m)) top right / var(--w) var(--l),
    linear-gradient(var(--m), var(--m)) bottom left / var(--l) var(--w), linear-gradient(var(--m), var(--m)) bottom left / var(--w) var(--l),
    linear-gradient(var(--m), var(--m)) bottom right / var(--l) var(--w), linear-gradient(var(--m), var(--m)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; transition: inset var(--dur-slow) var(--ease-film); }
.film:hover::after, .film:focus-visible::after, .film.is-hover::after { inset: 28px; }
.film:hover .ph { transform: scale(1.015); }
.film .tag { left: 46px; top: 20px; }
.film:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.play { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 8px; border-radius: 999px; background: rgba(30, 24, 21, 0.62); color: #f7f2ee; font: 500 15px/1 var(--font-sans); backdrop-filter: blur(6px); white-space: nowrap; }
.play__dot { width: 40px; height: 40px; border-radius: 50%; background: #f7f2ee; display: grid; place-items: center; }
.play__dot svg { width: 14px; height: 14px; margin-left: 2px; }

 
.player { position: relative; background: #000; overflow: hidden; }
.player__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 16px; background: linear-gradient(transparent, rgba(30,24,21,.82)); color: #f7f2ee; font: 500 14px/1 var(--font-sans); }
.pbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; background: rgba(30,24,21,.62); color: #f7f2ee; border: 1px solid rgba(247,242,238,.55); backdrop-filter: blur(6px); border-radius: 2px; font: 500 14px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.pbtn:hover { border-color: #f7f2ee; }
.pbtn:focus-visible { outline: 2px solid #d9b48a; outline-offset: 2px; }
.track { flex: 1; height: 3px; background: rgba(247,242,238,.28); position: relative; min-width: 40px; }
.track span { position: absolute; inset: 0 auto 0 0; background: #d9b48a; }
.player__msg { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 24px; color: #f7f2ee; font: 400 16px/1.5 var(--font-sans); }

 
.hero__frame { position: relative; }
.hero__frame .ph-m { display: none; }
.hero__ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.hero__text { padding-top: var(--space-5); padding-bottom: var(--space-7); row-gap: var(--space-4); }
.hero__h1 { grid-column: 1 / span 8; }
.hero__aside { grid-column: 9 / span 4; align-self: end; }

 
.moments { list-style: none; margin: 0; padding: 0; }
.moments--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--rule); }
.moments--col { border-top: 1px solid var(--rule); }
.moments--col .moment { border-bottom: 1px solid var(--rule); }
.moment button, .moment a { width: 100%; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: baseline; padding: 20px 0; min-height: 64px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; text-decoration: none; }
.moment__tc { font: 500 14px/20px var(--font-sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ink-muted); position: relative; }
.moment__title { font: 400 21px/29px var(--font-serif); }
.moment button:hover .moment__title, .moment a:hover .moment__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.moment.is-active .moment__tc { color: var(--accent); }
.moment.is-active .moment__tc::after { content: ""; position: absolute; left: 0; top: calc(100% + 6px); width: 36px; height: 2px; background: var(--accent); }

 
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.step { border-top: 1px solid var(--ink); padding-top: 20px; padding-right: 12px; }
.step__n { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.step__t { margin-top: 28px; font: 400 26px/32px var(--font-serif); }
.step__d { margin-top: 12px; font: 400 17px/27px var(--font-serif); color: var(--ink); max-width: 22em; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 40px 0; border-top: 1px solid var(--rule); }
.timeline .tl-n { grid-column: 1 / span 1; font: 500 14px/32px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.timeline .tl-t { grid-column: 2 / span 4; font: 350 34px/40px var(--font-serif); }
.timeline .tl-d { grid-column: 7 / span 6; }

 
.field { display: grid; gap: 8px; }
.field__label { font: 500 16px/24px var(--font-sans); color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-muted); }
.field__hint { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.input { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 17px/1.4 var(--font-sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-border); border-radius: 2px; transition: border-color var(--dur-quick) ease; }
.input:hover { border-color: var(--ink); }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.input:disabled { opacity: .5; cursor: not-allowed; }
textarea.input { min-height: 150px; resize: vertical; }
.field.is-error .input { border: 2px solid var(--error); padding: 11px 13px; }
.field__error { display: flex; gap: 8px; align-items: flex-start; font: 500 14px/20px var(--font-sans); color: var(--error); }
.field__error svg { flex: none; margin-top: 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 16px/1.3 var(--font-sans); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; background: var(--surface-alt); border-radius: 2px; font: 400 16px/1.55 var(--font-sans); }
.notice--success { box-shadow: inset 0 0 0 1px var(--success); }
.notice--error { box-shadow: inset 0 0 0 1px var(--error); }
.notice svg { flex: none; margin-top: 3px; }

 
.review { position: relative; padding: var(--space-6) 0; }
.slot { display: inline-block; padding: 4px 8px; font: 500 12px/16px var(--font-sans); background: var(--surface-alt); color: var(--ink-muted); border: 1px dashed var(--field-border); border-radius: 2px; }

 
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 22px 0; font: 400 22px/30px var(--font-serif); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-sans); color: var(--ink-muted); }
.faq details[open] summary::after { content: "–"; }
.faq .faq__a { padding: 0 0 26px; }

 
.ftr { padding-top: var(--space-7); padding-bottom: var(--space-5); }
.ftr__cols { row-gap: var(--space-5); }
.ftr a { color: var(--ink); text-decoration: none; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { padding: 6px 0; font: 400 15px/24px var(--font-sans); }
.ftr__base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

 
.tbc { }
.notes-on .tbc { background: rgba(217, 180, 138, 0.35); box-shadow: 0 0 0 2px rgba(217, 180, 138, 0.35); border-radius: 1px; }
.notes-on .zaal .tbc { background: rgba(217, 180, 138, 0.22); }
.note-pin { display: none; }
.notes-on .note-pin { display: inline-block; margin-left: 6px; padding: 1px 6px; font: 600 11px/16px var(--font-sans); letter-spacing: 0.01em; color: #2b211c; background: #d9b48a; border-radius: 2px; vertical-align: middle; }

 
.mmenu { position: relative; min-height: 844px; display: flex; flex-direction: column; }
.mmenu__list { list-style: none; margin: 0; padding: 0; }
.mmenu__list a { display: block; padding: 14px 0; font: 350 34px/42px var(--font-serif); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.mmenu__list a.is-current { color: var(--accent); }

.topics { display: flex; flex-wrap: wrap; gap: 4px 28px; }

 
@container site (max-width: 1080px) {
  .t-display-xl { font-size: 64px; line-height: 68px; }
  .hero__h1 { grid-column: 1 / span 12; }
  .hero__aside { grid-column: 1 / span 9; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .nav { gap: 22px; }
}

 
@container site (max-width: 760px) {
  .page, .zaal { --gutter: 16px; --grid-margin: 20px; --space-7: 72px; --space-8: 112px; }
  .t-display-xl { font-size: 44px; line-height: 48px; letter-spacing: -0.015em; }
  .t-display-l { font-size: 38px; line-height: 42px; }
  .t-display-m { font-size: 32px; line-height: 38px; }
  .t-title { font-size: 24px; line-height: 32px; }
  .t-lead { font-size: 20px; line-height: 31px; }
  .t-body { font-size: 18px; line-height: 29px; }
  .t-quote { font-size: 24px; line-height: 34px; }
  .grid > * { grid-column: 1 / -1 !important; }
  .nav:not(.topics) { display: none; }
  .topics { gap: 0 20px; }
  .menu-btn { display: inline-flex; }
  .hdr__in { min-height: 64px; }
  .wordmark { font-size: 22px; }
  .hero__frame .ph-d { display: none; }
  .hero__frame .ph-m { display: block; }
  .hero__frame { aspect-ratio: 4 / 5 !important; margin-inline: calc(var(--grid-margin) * -1); }
  .hero__text { padding-top: 28px; padding-bottom: var(--space-7); }
  .hero__aside .actions { flex-direction: column; align-items: stretch; }
  .hero__aside .btn { width: 100%; }
  .bleed-m { margin-inline: calc(var(--grid-margin) * -1); width: calc(100% + var(--grid-margin) * 2) !important; }
  .moments--row { grid-template-columns: 1fr; }
  .moments--row .moment { border-bottom: 1px solid var(--rule); }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { padding-bottom: 28px; }
  .step__t { margin-top: 10px; }
  .timeline > li { padding: 28px 0; }
  .timeline .tl-n, .timeline .tl-t, .timeline .tl-d { grid-column: 1 / -1; }
  .timeline .tl-t { font-size: 28px; line-height: 34px; margin-bottom: 12px; }
  .pair { grid-template-columns: 1fr; gap: 22px; }
  .offset-m-0 { margin-top: 0 !important; }
  .r-scope-m-portrait { aspect-ratio: 4 / 5 !important; }
  .r-scope-m-still { aspect-ratio: 3 / 2 !important; }
  .play { min-height: 48px; font-size: 14px; padding-right: 16px; }
  .play__dot { width: 34px; height: 34px; }
  .film::after { inset: 12px; --l: 16px; }
  .player__bar { gap: 8px; padding: 10px; }
  .player__bar .pbtn { padding: 0 10px; }
  .hide-m { display: none !important; }
  .first-m { order: -1; }
  .faq summary { font-size: 19px; line-height: 27px; }
}
@container site (min-width: 761px) { .show-m { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* Production behavior and honest empty states; original supplied design remains above. */
[hidden]{display:none!important}html{scroll-behavior:auto}.site{min-height:100vh}.page{width:100%}
a{color:inherit}.site :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.version-note{font:400 14px/22px var(--font-sans);color:var(--ink-muted);padding-block:8px 16px}
.concept-note,.preview-note{margin-top:24px!important;color:var(--ink-muted);font:400 14px/22px var(--font-sans)}
.concept{ text-decoration:underline dotted var(--field-border);text-underline-offset:5px }
.reading{max-width:720px;margin-left:8.5%}.invitation{background:var(--surface-alt);margin-top:112px}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:56px}
.featured-grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:end}.moment-empty{margin-top:40px}
.placeholder{position:relative;overflow:hidden}.media{display:block;overflow:hidden}.media img{width:100%;height:100%;object-fit:cover}.placeholder .ph{position:absolute;inset:0}
.film-collection{display:grid;grid-template-columns:7fr 4fr;gap:112px 8.3%;align-items:start;margin-block:56px}
.collection-item:nth-child(even){margin-top:96px}.collection-item>*+*{margin-top:16px}.collection-item .t-title{margin-top:24px}
.future-films{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:112px}.future-films>div:nth-child(even){margin-top:96px}
.story-stills{display:grid;grid-template-columns:4fr 6fr;gap:64px;margin-block:64px}.story-stills>:last-child{grid-column:1/-1}
.breadcrumb{padding-top:40px;font:400 14px/22px var(--font-sans)}.prose>*+*{margin-top:24px}.prose h2{margin-top:40px}
.journal-list article{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding-block:56px;border-top:1px solid var(--rule)}
.filters{display:flex;flex-wrap:wrap;gap:16px}.filter{font:500 16px/24px var(--font-sans);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);min-height:44px;padding:8px 0;cursor:pointer}.filter[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.info-layout{display:grid;grid-template-columns:1fr 3fr;gap:64px}.info-nav{display:flex;flex-direction:column;gap:20px;font:400 15px/24px var(--font-sans)}
.nav a[aria-current=page]{color:var(--accent)}.nav a[aria-current=page]::after{right:0}
.mobile-dialog{position:fixed;inset:0;width:100%;max-width:none;max-height:none;height:100dvh;border:0;padding:24px 20px;margin:0;overflow:auto}.mobile-dialog::backdrop{background:#1e1815}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.mobile-dialog .mmenu__list a{min-height:70px}.mobile-dialog>.btn{margin-top:40px;width:100%;white-space:normal}.mobile-dialog>p{margin-top:24px}.mobile-dialog .wordmark{font-size:26px}
.btn:disabled{opacity:.45;cursor:not-allowed}.btn{white-space:normal;text-align:center}.input{width:100%;min-width:0}.input[aria-invalid=true]{border:2px solid var(--error)}.input:disabled{opacity:.5}.field__error{display:block;color:var(--error);font:400 14px/22px var(--font-sans);margin-top:8px}.check{min-height:44px}.check input{width:20px;height:20px;flex-shrink:0}.notice{padding:24px;border:1px solid var(--rule);background:var(--surface-alt);font:400 16px/24px var(--font-sans);margin-block:24px}.notice--error{border-color:var(--error);color:var(--error)}.notice a{color:inherit}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.video-module{position:relative;aspect-ratio:2.39;isolation:isolate;background:#1e1815}.video-module video{display:block;width:100%;height:100%;object-fit:contain}.film-trigger{position:absolute;inset:0;width:100%;border:0;background:rgba(30,24,21,.32);color:#f7f2ee;font:500 16px/24px var(--font-sans);cursor:pointer}.film-trigger::before{content:'';position:absolute;inset:16px;border:1px solid currentColor;clip-path:polygon(0 0,28px 0,28px 1px,1px 1px,1px 28px,0 28px,0 0,100% 0,100% 28px,calc(100% - 1px) 28px,calc(100% - 1px) 1px,calc(100% - 28px) 1px,calc(100% - 28px) 0,100% 0,100% 100%,calc(100% - 28px) 100%,calc(100% - 28px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 28px),100% calc(100% - 28px),100% 100%,0 100%,0 calc(100% - 28px),1px calc(100% - 28px),1px calc(100% - 1px),28px calc(100% - 1px),28px 100%,0 100%);transition:inset 520ms var(--ease-film)}.film-trigger:hover::before,.film-trigger:focus-visible::before{inset:28px}.reel-controls{position:absolute;right:16px;bottom:52px;display:flex;gap:8px}.video-status:empty{display:none}.video-status{position:absolute;left:12px;top:12px;background:#1e1815;color:#f7f2ee;padding:6px}.video-error{position:relative}.moment.is-active .moment__tc{color:var(--accent)}
.hero__frame>.placeholder,.hero__frame>.video-module{width:100%;height:100%}.hero__frame>.placeholder{aspect-ratio:inherit}.ftr{border-top:1px solid var(--rule);background:var(--surface)}
@media(max-width:1080px) and (min-width:761px){.nav{gap:14px}.nav a{font-size:14px}.hdr__in{gap:14px}.wordmark{font-size:23px}.featured-grid{gap:32px}}
@media(max-width:760px){.reading{margin-left:0;max-width:100%}.version-note{font-size:14px}.featured-grid{display:flex;flex-direction:column;gap:32px;align-items:stretch}.featured-player{order:-1;margin-inline:-20px}.featured-player .placeholder{aspect-ratio:3/2}.section-top{display:block}.section-top>a{margin-top:24px}.film-collection,.future-films,.story-stills{display:block}.film-collection>*+*,.future-films>*+*,.story-stills>*+*{margin-top:56px}.collection-item:nth-child(even),.future-films>div:nth-child(even){margin-top:56px}.collection-item .r-scope{aspect-ratio:3/2}.collection-item .r-portrait{aspect-ratio:4/5}.journal-list article{grid-template-columns:1fr;gap:24px}.info-layout{grid-template-columns:1fr;gap:40px}.invitation{margin-top:72px}.video-module{aspect-ratio:3/2}.showreel{aspect-ratio:4/5}.hero__frame .tag{max-width:calc(100% - 32px)}.hero__aside .t-lead{font-size:20px!important;line-height:31px!important}.hero__ctrl{flex-wrap:wrap}.reel-controls{right:8px;gap:4px}.tag{font-size:14px;line-height:20px}.btn{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.site{--gutter:16px;--grid-margin:20px;--space-7:72px;--space-8:112px}}
/* V09: retain readable text on the active contact button. */
.nav a.btn[aria-current=page],.nav a.btn[aria-current=page]:hover,.nav a.btn[aria-current=page]:focus-visible{color:var(--on-accent);background:var(--accent)}
.calendar-toggle{display:block;margin-top:12px;min-height:44px;padding:9px 14px;border:1px solid var(--field-border);background:var(--field);color:var(--ink);font:400 14px/1.5 var(--font-sans);cursor:pointer}.calendar-toggle:disabled{opacity:.5;cursor:not-allowed}#calendar-panel{margin-top:14px;padding:14px;border:1px solid var(--rule);background:var(--surface-alt)}#f-calendar{color-scheme:light}#h-datum{display:block;margin-top:8px}.company-ids{overflow-wrap:anywhere}

/* V10: one field with an inline calendar icon. */
.date-input-wrap{position:relative}.date-input-wrap #f-datum{padding-right:56px}.date-input-wrap .calendar-toggle{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--ink-muted);border-radius:2px}.date-input-wrap .calendar-toggle:hover:not(:disabled){background:var(--surface-alt);color:var(--ink)}.date-input-wrap .calendar-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}.date-input-wrap #calendar-panel.native-picker-panel{position:absolute;inset:0 auto auto 0;width:100%;height:52px;opacity:0;pointer-events:none;padding:0;margin:0;border:0}.native-picker-panel label,.native-picker-panel .field__hint{display:none}.native-picker-panel #f-calendar{height:52px;width:100%}

/* V11: consistent controls and mobile reading/form layout. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle}
@media(max-width:800px){
 .wrap{max-width:100%;padding-inline:max(20px,env(safe-area-inset-left))}
 input,select,textarea{font-size:16px!important;max-width:100%;min-width:0}
 .btn{white-space:normal;min-height:48px;overflow-wrap:break-word}
 .ftr{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
 .mobile-dialog{padding:24px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 .info-layout,.journal-list article{grid-template-columns:1fr}
 .prose,.t-body,.t-lead{overflow-wrap:break-word}
}
.menu-btn{gap:12px}
.faq summary::after{content:'';flex:0 0 20px;width:20px;height:20px;background:linear-gradient(currentColor,currentColor) center/14px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 14px no-repeat}
.faq details[open] summary::after{content:'';background:linear-gradient(currentColor,currentColor) center/14px 1.6px no-repeat}

.contact-layout{padding-top:88px;padding-bottom:112px}
@media(max-width:800px){.contact-layout{padding-block:44px 64px}.contact-layout .t-meta a{display:inline-flex;align-items:center;min-height:44px}.ftr a{min-height:44px;display:inline-flex;align-items:center}}