@font-face{font-family:Rubik;font-weight:400 900;font-style:normal;font-display:swap;src:url(/fonts/rubik-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-weight:400 900;font-style:normal;font-display:swap;src:url(/fonts/rubik-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--wood:#9a6a38;--wood-d:#7f5428;--ink:#3a2514;--paper:#fff6e3;--sand:#eadfc6;--cream:#f2e4c3;--red:#b5361f;--green:#2e6b43}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.4;background:var(--sand);color:#2f2013;font-family:Rubik,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{max-width:430px;margin:0 auto;padding:0 16px 40px}

.top{margin:0 -16px;padding:34px 16px 86px;text-align:center;background:repeating-linear-gradient(180deg,#9a6a38 0 46px,#7f5428 46px 49px,#a67440 49px 95px,#7f5428 95px 98px);border-bottom:6px solid var(--ink);box-shadow:inset 0 -10px 20px rgba(0,0,0,.15)}
.badge{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:190px;height:190px;border-radius:50%;background:var(--paper);border:5px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.35);transform:rotate(-5deg);color:var(--ink)}
.badge::before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px dashed var(--red)}
.badge span{color:var(--red);font-weight:900;letter-spacing:.35em;font-size:.85rem}
.badge b{font-weight:900;font-size:2.4rem;line-height:1}
.badge::after{content:"★ ★ ★";color:var(--red);font-size:.7rem;letter-spacing:.3em;margin-top:6px}

.card{margin-top:16px;padding:20px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--ink)}
.top + .card{margin-top:-46px;position:relative}
h2{display:inline-block;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;border-bottom:3px solid var(--red);padding-bottom:3px;margin-bottom:16px}

.btn{display:block;width:100%;text-align:center;padding:14px 18px;font-weight:700;background:var(--ink);color:var(--paper);border:0;border-radius:10px;cursor:pointer}
.btn.big{padding:22px 18px;font-size:1.25rem;background:var(--red);font-weight:900;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn.big:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.btn + .btn{margin-top:10px}
.btn[disabled]{opacity:.6}

/* Biermeter */
.beer{display:flex;align-items:center;gap:18px}
.mug{flex:0 0 96px}
.mug svg{display:block;width:96px;height:auto;overflow:visible}
.total .num{font-size:2.8rem;font-weight:900;line-height:1;color:var(--red)}
.total .unit{font-size:1.1rem;margin-left:6px}
.fun{margin-top:8px;font-size:.92rem;line-height:1.5}
.fun button{display:block;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.fun button:active{opacity:.6}
.empty{font-size:1.1rem;font-weight:700}

/* Foto's */
.stack{position:relative;height:235px;margin-bottom:14px}
.stack img{position:absolute;width:31%;aspect-ratio:1;object-fit:cover;background:var(--cream);border:6px solid var(--paper);border-bottom-width:20px;box-shadow:0 3px 8px rgba(58,37,20,.4);transition:transform .3s}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.grid button{padding:0;border:0;background:none;cursor:pointer}
.grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--cream);border:4px solid var(--paper);border-bottom-width:12px;box-shadow:0 2px 6px rgba(58,37,20,.35)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0 4px}
.back{font-weight:700;color:var(--ink);text-decoration:underline;background:none;border:0;cursor:pointer}
.note{margin-top:12px;font-size:.9rem;font-weight:500}
.note.err{color:var(--red)}

/* Reviews */
.score{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.score b{font-size:2rem}
.score em{font-style:normal;font-size:.9rem;opacity:.75}
.stars{color:var(--red);letter-spacing:2px}
blockquote{padding:12px;margin-bottom:10px;background:var(--cream);border-left:5px solid var(--green);border-radius:6px}
blockquote p{margin:4px 0;white-space:pre-line}
cite{display:block;font-size:.8rem;font-style:normal;opacity:.7}
.stars + cite{margin-top:4px}
.link{display:block;text-align:center;font-size:.9rem;margin-top:6px;text-decoration:underline;color:var(--green);font-weight:700}

/* Muziek */
.music{background:var(--green);color:var(--paper)}
.music h2{border-color:#e8b13a}
.music .btn{background:var(--paper);color:var(--green)}
.embed{margin-bottom:12px;min-height:152px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.15)}
.embed iframe{display:block;border:0;width:100%}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(20,12,6,.93)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;background:rgba(255,246,227,.15);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lb .x{top:max(12px,env(safe-area-inset-top));right:12px}
.lb .prev{left:8px;top:50%;margin-top:-24px}
.lb .next{right:8px;top:50%;margin-top:-24px}