:root { --ink:#173531; --cream:#f7f1e5; --gold:#e3a731; --orange:#df6638; --red:#bd4631; --muted:#6f756a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; }
a { color:inherit; text-decoration:none; }
.site-header { height:88px; max-width:1240px; margin:auto; padding:16px 36px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; text-transform:uppercase; font-size:12px; line-height:1.05; font-weight:700; letter-spacing:.07em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:2px solid var(--ink); border-radius:50%; font-family:"DM Serif Display",serif; font-size:17px; letter-spacing:-.08em; }
nav { display:flex; gap:28px; align-items:center; font-size:14px; font-weight:600; }
nav a:not(.nav-cta):hover { color:var(--orange); }.nav-cta { padding:10px 17px; border:1px solid var(--ink); border-radius:40px; }
.hero { min-height:610px; max-width:1240px; margin:auto; padding:70px 36px 82px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:35px; }
.eyebrow { margin:0 0 18px; color:var(--orange); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:11px; }
h1,h2,h3,p { margin-top:0; }h1,h2 { font-family:"DM Serif Display",serif; font-weight:400; letter-spacing:-.045em; line-height:.95; } h1 { font-size:clamp(58px,7vw,94px); margin-bottom:25px; } h2 { font-size:clamp(45px,5vw,68px); margin-bottom:24px; } em { color:var(--orange); font-weight:400; }
.intro { max-width:470px; color:#465550; font-size:18px; line-height:1.6; margin-bottom:30px; }.button-row { display:flex; align-items:center; gap:26px; }.button { display:inline-flex; align-items:center; gap:13px; font-size:14px; font-weight:700; }.button-primary { padding:15px 20px; color:#fff; background:var(--ink); border-radius:3px; transition:transform .2s,background .2s; }.button-primary:hover { transform:translateY(-2px); background:#28564d; }.button-primary span { font-size:19px; line-height:0; }.button-text { border-bottom:1px solid var(--ink); padding-bottom:3px; }
.hero-art { height:450px; position:relative; overflow:hidden; background:var(--gold); border-radius:220px 220px 0 0; }.sun { position:absolute; width:320px; height:320px; top:52px; left:50%; transform:translateX(-50%); border-radius:50%; background:#f4cf63; }.arch { position:absolute; bottom:-25px; width:290px; height:310px; border-radius:155px 155px 0 0; }.arch-back { left:20px; background:var(--orange); }.arch-front { right:-20px; background:var(--ink); }.bottle { position:absolute; bottom:32px; width:92px; height:255px; background:#f5e6bf; border-radius:15px 15px 10px 10px; box-shadow:8px 10px 0 rgba(23,53,49,.15); z-index:2; }.bottle i { position:absolute; width:36px; height:70px; left:28px; top:-58px; border-radius:9px 9px 0 0; background:#f5e6bf; }.bottle b { position:absolute; top:-67px; left:23px; width:46px; height:12px; background:var(--ink); border-radius:2px; }.bottle span { display:grid; place-items:center; position:absolute; top:77px; left:8px; width:76px; height:86px; background:var(--red); color:#fff8e8; font-size:11px; font-weight:700; letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); }.bottle-one { left:30%; transform:rotate(-7deg); }.bottle-two { right:18%; height:220px; background:#d76837; transform:rotate(7deg); }.bottle-two i { background:#d76837; }.bottle-two span { background:#f5e6bf; color:var(--ink); }.grain { position:absolute; font-size:134px; line-height:1; color:var(--ink); transform:rotate(50deg); z-index:3; }.grain-one { top:68px; left:17px; }.grain-two { bottom:-35px; right:5px; color:var(--gold); }.art-caption { position:absolute; top:24px; right:28px; color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.4; text-transform:uppercase; text-align:right; }
.statement { padding:100px 30px; background:var(--ink); color:var(--cream); text-align:center; }.statement p { margin:0; font-family:"DM Serif Display",serif; font-size:clamp(30px,4vw,52px); line-height:1.12; letter-spacing:-.035em; }
.beers { max-width:1240px; margin:auto; padding:118px 36px; }.section-heading { display:flex; align-items:end; justify-content:space-between; }.section-heading h2 { margin-bottom:40px; }.beer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.beer-card { background:#eee2c9; min-height:420px; display:flex; flex-direction:column; }.beer-visual { height:292px; display:grid; place-items:center; overflow:hidden; }.beer-blond .beer-visual { background:#e8b53b; }.beer-ipa .beer-visual { background:#d66b3c; }.beer-dark .beer-visual { background:#9d4436; }.mini-bottle { position:relative; width:78px; height:185px; background:#f8e6b7; border-radius:13px 13px 8px 8px; box-shadow:9px 10px 0 rgba(0,0,0,.12); }.mini-bottle i { position:absolute; top:-44px; left:24px; width:30px; height:49px; background:inherit; border-radius:8px 8px 0 0; }.mini-bottle b { position:absolute; top:-52px; left:18px; width:42px; height:10px; background:var(--ink); }.mini-bottle span { position:absolute; inset:56px 8px 18px; display:grid; place-items:center; background:var(--red); color:white; font-size:9px; letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }.beer-ipa .mini-bottle { background:var(--ink); }.beer-ipa .mini-bottle span { background:#f4e6bc; color:var(--ink); }.beer-dark .mini-bottle { background:#f1d19c; }.beer-dark .mini-bottle span { background:var(--ink); }.beer-details { padding:23px 24px; }.beer-details h3 { font-family:"DM Serif Display",serif; font-size:27px; font-weight:400; letter-spacing:-.03em; margin-bottom:7px; }.beer-details p,.small-note { color:#67716a; font-size:13px; }.small-note { margin:26px 0 0; }
.visit { display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:#eedcb9; }.visit-art { position:relative; min-height:480px; overflow:hidden; background:var(--orange); }.tap { position:absolute; left:50%; top:50%; width:162px; height:210px; transform:translate(-50%,-35%); border-radius:20px 20px 0 0; background:var(--ink); }.tap:before { content:""; position:absolute; top:-88px; left:46px; width:70px; height:120px; background:var(--ink); border-radius:40px 40px 0 0; }.tap i { position:absolute; top:72px; right:-50px; width:80px; height:23px; border-radius:0 13px 13px 0; background:var(--ink); }.tap b { position:absolute; top:93px; right:-88px; width:40px; height:93px; background:#f7e9c9; border-radius:0 0 20px 20px; }.bubble { position:absolute; display:block; border:2px solid rgba(247,241,229,.65); border-radius:50%; }.bubble-a { width:100px; height:100px; top:70px; left:11%; }.bubble-b { width:48px; height:48px; top:45%; right:13%; }.bubble-c { width:26px; height:26px; bottom:18%; left:21%; }.visit-copy { padding:110px clamp(35px,8vw,125px) 70px 80px; }.visit-copy > p:not(.eyebrow) { color:#4d5953; line-height:1.65; max-width:400px; }.visit dl { display:flex; gap:62px; margin:34px 0; }.visit dt { color:var(--orange); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; margin-bottom:8px; }.visit dd { margin:0; line-height:1.5; font-size:14px; }
.contact { padding:112px 36px 30px; min-height:525px; background:var(--red); color:#fff8e8; text-align:center; }.contact .eyebrow { color:#f2cb77; }.contact h2 { margin-bottom:20px; }.contact h2 em { color:#f2cb77; }.contact > p:not(.eyebrow) { line-height:1.65; }.contact-link { display:inline-block; margin-top:21px; padding-bottom:4px; font-family:"DM Serif Display",serif; font-size:clamp(25px,3vw,39px); border-bottom:1px solid #fff8e8; }.contact-link span { color:#f2cb77; }.contact-bottom { max-width:1168px; margin:90px auto 0; display:flex; justify-content:space-between; font-size:12px; color:#f6d7c0; }.contact-bottom a { text-decoration:underline; }
@media (max-width:760px) { .site-header { height:76px; padding:13px 22px; }nav a:not(.nav-cta) { display:none; } .hero { min-height:auto; padding:57px 22px 0; grid-template-columns:1fr; gap:34px; }.hero-art { height:385px; margin:0 -22px; border-radius:180px 180px 0 0; }.statement { padding:70px 22px; }.beers { padding:78px 22px; }.section-heading { display:block; }.beer-grid { grid-template-columns:1fr; gap:16px; }.beer-card { min-height:0; }.beer-visual { height:270px; }.visit { grid-template-columns:1fr; }.visit-art { min-height:345px; }.visit-copy { padding:75px 22px; }.visit dl { gap:35px; flex-wrap:wrap; }.contact { padding:78px 22px 24px; }.contact-bottom { margin-top:65px; }.bottle-one { left:26%; }.bottle-two { right:16%; } }

/* Fotografie en illustratie uit het archief van Kleine Brouwerij. */
.brand { min-width:124px; }
.brand-logo { display:block; width:124px; height:78px; object-fit:contain; object-position:left center; }
.hero-photo { position:relative; border-radius:0; background:var(--ink); }
.hero-photo > img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; mix-blend-mode:normal; }
.hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(23,53,49,.3),rgba(23,53,49,0) 55%); pointer-events:none; }
.hero-photo .art-caption { z-index:1; top:auto; right:24px; bottom:22px; color:#fff8e8; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.beer-image { width:100%; height:292px; display:block; object-fit:cover; object-position:center; }
.beer-card:nth-child(2) .beer-image { object-position:62% center; }
.beer-card:nth-child(3) .beer-image { object-position:center; }
.mural-art { display:grid; place-items:center; padding:45px; background:#f8f3e8; }
.mural-art img { width:100%; height:auto; display:block; }
@media (max-width:760px) { .brand-logo { width:104px; height:62px; }.hero-photo { border-radius:0; }.beer-image { height:270px; }.mural-art { padding:28px 18px; }.mural-art img { transform:scale(1.35); } }

.festival-beers { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:78px; max-width:1240px; margin:auto; padding:118px 36px; }
.festival-intro > p:not(.eyebrow) { max-width:380px; color:#4d5953; line-height:1.65; margin-bottom:30px; }
.tap-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #cfc2a9; border-left:1px solid #cfc2a9; }
.tap-item { min-height:146px; padding:23px 24px; border-right:1px solid #cfc2a9; border-bottom:1px solid #cfc2a9; background:#f3ead8; }
.tap-item > p:first-child,.tap-item > span { margin:0; color:#6b746d; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.tap-item h3 { margin:12px 0 7px; font-family:"DM Serif Display",serif; font-size:26px; font-weight:400; line-height:1; letter-spacing:-.03em; }.tap-item h3 span { font-family:"DM Sans",sans-serif; color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }.tap-item.featured { background:var(--ink); color:#fff8e8; }.tap-item .tap-label { color:#efc568; }.tap-item.featured > p:last-child { margin:0; color:#d6e0cc; font-size:13px; }.tap-item.featured h3 { color:#fff8e8; }
@media (max-width:760px) { .festival-beers { grid-template-columns:1fr; gap:32px; padding:78px 22px; }.tap-list { grid-template-columns:1fr; }.tap-item { min-height:125px; } }

.mystery-page { min-height:100vh; background:var(--cream); color:var(--ink); }
.mystery-wrap { width:min(100% - 44px,740px); margin:auto; padding:38px 0 70px; }.mystery-brand { display:block; width:152px; margin:0 auto 38px; }.mystery-brand img { display:block; width:100%; height:auto; }
.mystery-card { padding:clamp(34px,7vw,68px); background:#eedcb9; border-radius:4px; box-shadow:12px 12px 0 var(--ink); }.mystery-card h1 { font-size:clamp(58px,10vw,82px); margin-bottom:24px; }.mystery-intro { max-width:480px; color:#43534d; font-size:18px; line-height:1.6; }
.mystery-form { display:grid; gap:18px; margin-top:34px; }.mystery-form label { display:grid; gap:7px; font-size:13px; font-weight:700; }.mystery-form input:not([type="checkbox"]) { width:100%; min-height:48px; padding:10px 12px; border:1px solid #9e9d90; border-radius:2px; background:#fffdf8; color:var(--ink); font:inherit; }.mystery-form input:focus { outline:3px solid rgba(223,102,56,.45); outline-offset:1px; }.mystery-form .consent { grid-template-columns:19px 1fr; align-items:start; margin-top:4px; font-size:12px; line-height:1.45; font-weight:500; }.mystery-form .consent input { margin:2px 0 0; width:16px; height:16px; accent-color:var(--ink); }.consent a { text-decoration:underline; }.mystery-form .button { justify-self:start; border:0; cursor:pointer; margin-top:7px; }.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.mystery-footnote { margin:36px 0 0; text-align:center; color:#69746d; font-size:12px; }.thanks-wrap { min-height:100vh; display:grid; align-content:center; }.thanks-card { text-align:center; }.thanks-card .button { margin-top:16px; }
.legal-wrap { width:min(100% - 44px,760px); margin:auto; padding:60px 0; line-height:1.65; }.legal-wrap a { color:var(--orange); font-weight:700; }.legal-wrap h1,.legal-wrap h2 { font-family:"DM Serif Display",serif; font-weight:400; }.legal-wrap h1 { margin:30px 0; font-size:clamp(45px,7vw,70px); }.legal-wrap h2 { margin:35px 0 10px; font-size:30px; }
@media (max-width:760px) { .mystery-wrap { padding-top:26px; }.mystery-brand { width:125px; margin-bottom:28px; }.mystery-card { box-shadow:7px 7px 0 var(--ink); }.mystery-card h1 { font-size:57px; }.mystery-intro { font-size:16px; } }

.tap-item.mystery-tap { position:relative; background:#e6a933; }.mystery-tap > a { display:inline-block; margin-top:13px; padding-bottom:2px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; }
.action-summary { margin-top:46px; padding:22px 24px; border-top:3px solid var(--orange); background:rgba(255,253,248,.62); }.action-summary h2 { margin:0 0 9px; font-family:"DM Serif Display",serif; font-size:25px; font-weight:400; }.action-summary p { margin:0; color:#4d5953; font-size:13px; line-height:1.65; }

.poster-showcase { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:clamp(38px,7vw,105px); max-width:1240px; margin:auto; padding:118px 36px; overflow:hidden; }.poster-heading { padding-top:34px; }.poster-heading > p:not(.eyebrow) { max-width:360px; color:#4d5953; line-height:1.65; }.poster-slider { outline:0; }.poster-slider:focus-visible { outline:3px solid var(--orange); outline-offset:8px; }.poster-stage { position:relative; height:min(68vw,690px); min-height:440px; max-width:460px; margin:auto; }.poster-slide { position:absolute; inset:0; margin:0; display:grid; grid-template-rows:1fr auto; opacity:0; transform:translateX(12%); pointer-events:none; transition:opacity .35s ease,transform .35s ease; }.poster-slide.is-active { opacity:1; transform:translateX(0); pointer-events:auto; z-index:1; }.poster-slide img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; filter:drop-shadow(12px 13px 0 rgba(23,53,49,.18)); }.poster-slide figcaption { min-height:26px; margin-top:12px; text-align:center; color:#52605a; font-size:13px; font-weight:600; }.poster-slide figcaption a { display:inline-block; margin-left:6px; color:var(--orange); border-bottom:1px solid currentColor; }.poster-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }.poster-arrow { display:grid; place-items:center; width:39px; height:39px; padding:0; border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:transparent; font-size:20px; cursor:pointer; transition:background .2s,color .2s; }.poster-arrow:hover { color:#fff; background:var(--ink); }.poster-dots { display:flex; gap:8px; }.poster-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#b4aa98; cursor:pointer; }.poster-dot[aria-selected="true"] { width:25px; border-radius:8px; background:var(--orange); }.poster-count { margin:12px 0 0; color:#778078; text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:760px) { .poster-showcase { grid-template-columns:1fr; gap:12px; padding:78px 22px; }.poster-heading { padding-top:0; }.poster-stage { width:min(100%,390px); height:min(133vw,590px); min-height:390px; }.poster-controls { margin-top:13px; } }