/* ═══════════════════════════════════════════════════════════════════════
   BOK · bokbrussels.be · web designer comp · v1
   Mobile-first. Tokens mirror VISUAL_IDENTITY.md §6.
═══════════════════════════════════════════════════════════════════════ */
:root{
  /* palette (Donker on Schuim is the default body) */
  --donker:#1A1714;
  --schuim:#F5F1E8;
  --bok-bruin:#5A3A22;
  --hop:#D4A337;
  --mos:#1F8A5B;
  --roest:#B14F2A;
  --comptoir:#C9B98F;
  --steen:#8A8278;
  --schaduw:#3D332A;
  --hairline:rgba(26,23,20,0.14);

  /* type */
  --display:'Anton',Impact,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;

  /* scale (4-base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  --radius:2px;

  /* type tokens */
  --display-xl:clamp(64px, 14vw, 120px);
  --display-lg:clamp(48px, 10vw, 88px);
  --display-md:clamp(32px, 6vw, 48px);
  --display-sm:clamp(24px, 4vw, 32px);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--schuim);
  color:var(--donker);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{
  font:inherit; color:inherit;
  border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* ── comp shell ─────────────────────────────────────────── */
:root{ --comp-bar-h:42px }
.comp-bar{
  position:sticky; top:0; z-index:100;
  background:var(--donker); color:var(--schuim);
  border-bottom:1px solid var(--schaduw);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  height:var(--comp-bar-h);
}
.comp-bar .inner{
  max-width:1340px; margin:0 auto;
  padding:10px 16px; display:flex; align-items:center; gap:16px;
}
.comp-bar .brand{ color:var(--hop); font-weight:700 }
.comp-bar .spacer{ flex:1 }
.comp-bar .seg{ display:inline-flex; border:1px solid rgba(245,241,232,0.25) }
.comp-bar .seg button{
  padding:6px 12px; color:var(--schuim);
  font-family:inherit; font-size:10.5px; letter-spacing:0.22em;
}
.comp-bar .seg button.is-on{ background:var(--schuim); color:var(--donker) }
.comp-bar .meta{ opacity:0.55 }

/* ── viewport frame ─────────────────────────────────────── */
.viewport{
  max-width:100%; margin:0 auto;
  background:var(--schuim); position:relative;
  transition:max-width 0.25s ease;
}
.viewport.mobile{
  max-width:412px;
  margin:32px auto;
  box-shadow:0 0 0 1px rgba(26,23,20,0.10), 0 30px 70px -20px rgba(26,23,20,0.25);
}
.viewport.desktop{
  max-width:100%;
}

/* ── force mobile layouts inside the comp-bar Mobile frame ── */
/* Media queries can't see the .viewport.mobile container width;
   these rules force mobile rendering whenever Mobile toggle is on. */
.viewport.mobile .nav .row{ max-width:none; padding:12px var(--s5); }
.viewport.mobile .nav .links{ display:none; }
.viewport.mobile .nav .hamburger{ display:flex; }
.viewport.mobile .nav .cta{ display:none; }
.viewport.mobile .nav .logo{ font-size:32px; }

.viewport.mobile .hero{
  padding:var(--s12) var(--s5) var(--s10);
  grid-template-columns:1fr; gap:var(--s6);
  max-width:none; margin:0;
}
.viewport.mobile .hero h1{ font-size:clamp(48px, 12vw, 72px); }
.viewport.mobile .hero .lede{ font-size:20px; }
.viewport.mobile .hero-circle{
  width:92%; max-width:380px; margin:0 auto;
}

.viewport.mobile .feature{
  grid-template-columns:1fr; gap:var(--s6);
  padding:var(--s12) var(--s5);
}
.viewport.mobile .feature h2{ font-size:var(--display-md); }
.viewport.mobile .feature.bg-dark h2{ font-size:clamp(40px, 9vw, 64px); }
.viewport.mobile .feature .copy{ font-size:16px; }
.viewport.mobile .feature .more{ font-size:28px; }
.viewport.mobile .events-intro .copy{ display:none; }

.viewport.mobile .specials{
  display:flex; flex-direction:row;
  padding:var(--s10) 0;
  gap:var(--s4);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  grid-template-columns:none;
}
.viewport.mobile .specials > .special-card{
  flex:0 0 86%; min-width:0;
  scroll-snap-align:start;
  min-height:280px;
  padding:var(--s8) var(--s6);
}

.viewport.mobile .events-carousel{
  display:flex; flex-direction:row;
  gap:var(--s4);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  margin:0 calc(-1 * var(--s5));
  padding:var(--s2) var(--s5) var(--s5);
}
.viewport.mobile .events-carousel .event-card{
  flex:0 0 86%; min-width:0;
  scroll-snap-align:start;
  background:var(--schuim);
  border:1px solid var(--hairline);
  padding:var(--s5);
  display:grid; grid-template-columns:auto 1fr;
}

.viewport.mobile .menu-grid{ grid-template-columns:1fr; }
.viewport.mobile .come-in{
  grid-template-columns:1fr; gap:var(--s6);
  padding:var(--s12) var(--s5) var(--s10);
}
.viewport.mobile .find .layout{ grid-template-columns:1fr; gap:var(--s6); }
.viewport.mobile .brief .form{ flex-direction:column; }
.viewport.mobile footer .top{ grid-template-columns:1fr; gap:var(--s6); }
.viewport.mobile .press-grid{ grid-template-columns:1fr; }
.viewport.mobile .event-card{ grid-template-columns:auto 1fr; gap:var(--s4); }
.viewport.mobile .event-card .date{ font-size:40px; }
.viewport.mobile .event-card .title{ font-size:22px; }

/* ── nav (top) ──────────────────────────────────────────── */
.nav{
  position:sticky; top:var(--comp-bar-h); z-index:50;
  background:var(--schuim);
  border-bottom:1px solid var(--hairline);
  color:var(--donker);
}
.nav .row{
  max-width:1280px; margin:0 auto;
  padding:12px var(--s5);
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--s5);
}
.nav .logo{
  font-family:var(--display); font-weight:400;
  font-size:32px; line-height:0.9; letter-spacing:-0.04em;
  color:var(--donker); display:inline-flex; align-items:flex-end; gap:0.04em;
  justify-self:start;
}
.nav .logo .sq{
  display:inline-block; width:0.22em; height:0.22em;
  background:var(--roest); margin-bottom:0.02em; margin-left:0.06em;
}
.nav .links{ display:none; justify-content:center; gap:var(--s6);
  font-family:var(--display); font-size:18px; letter-spacing:-0.01em; text-transform:uppercase; line-height:1; }
.nav .links a{ padding:8px 0; position:relative; }
.nav .links a:hover{ color:var(--roest) }
.nav .right{ display:flex; align-items:center; gap:var(--s3); justify-self:end }
.nav .locale{
  position:relative;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase;
}
.nav .locale-btn{
  font-family:inherit; font-size:inherit; letter-spacing:inherit;
  padding:8px 12px; border:1px solid var(--donker); border-radius:var(--radius);
  cursor:pointer; text-transform:uppercase; color:var(--donker); background:transparent;
  display:inline-flex; align-items:center; gap:6px;
}
.nav .locale-btn:hover{ background:var(--hop); border-color:var(--hop); color:var(--donker) }
.nav .locale .caret{ font-size:9px; transition:transform 0.15s }
.nav .locale.is-open .caret{ transform:rotate(180deg) }
.nav .locale .menu{
  position:absolute; top:calc(100% + 4px); right:0;
  background:var(--schuim); border:1px solid var(--donker); border-radius:var(--radius);
  display:none; min-width:88px; z-index:60;
  box-shadow:0 10px 24px -8px rgba(26,23,20,0.2);
  overflow:hidden;
}
.nav .locale.is-open .menu{ display:block }
.nav .locale .menu button{
  display:block; width:100%; text-align:left;
  padding:10px 16px; background:transparent; border:0;
  font-family:inherit; font-size:11px; letter-spacing:0.18em;
  color:var(--donker); text-transform:uppercase; cursor:pointer;
}
.nav .locale .menu button:hover,
.nav .locale .menu button.is-on{ background:var(--hop); color:var(--donker) }
.nav .hamburger{
  width:36px; height:36px; display:flex; flex-direction:column;
  justify-content:center; gap:5px; padding:8px;
}
.nav .hamburger span{ height:1.5px; background:var(--donker) }
.nav.is-open .hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.nav.is-open .hamburger span:nth-child(2){ opacity:0 }
.nav.is-open .hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* mobile drawer — scoped to .viewport so the comp-frame Mobile toggle
   shows it at 412px wide, not full browser width */
.drawer{
  position:absolute; top:60px; left:0; right:0;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
  background:var(--schuim); z-index:45;
  border-bottom:1px solid var(--hairline);
  opacity:0; pointer-events:none;
  transform:translateY(-12px);
  transition:opacity 0.2s ease, transform 0.2s ease;
  padding:var(--s10) var(--s6); display:flex; flex-direction:column;
}
.drawer.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) }
.drawer a{
  font-family:var(--display); font-size:48px; letter-spacing:-0.02em;
  line-height:1; padding:var(--s5) 0; text-transform:uppercase;
  border-bottom:1px solid var(--hairline);
}

@media (min-width:1024px){
  .nav .row{ padding:14px var(--s10) }
  .nav .links{ display:flex; font-size:19px; gap:var(--s5); }
  .nav .hamburger{ display:none }
  .nav .logo{ font-size:42px }
  .nav .cta{ display:inline-flex }
}
@media (min-width:1280px){
  .nav .links{ font-size:22px; gap:var(--s6); }
}

/* ── nav CTA (Pak ne BOK) ─────────────────────────────── */
.nav .cta{
  display:none;
  align-items:center; gap:6px;
  padding:9px 16px;
  background:var(--donker); color:var(--schuim);
  border:1.5px solid var(--donker); border-radius:var(--radius);
  font-family:var(--body); font-weight:600;
  font-size:12px; letter-spacing:0.10em; text-transform:uppercase;
  white-space:nowrap;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.nav .cta:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop) }

/* drawer CTA — full-width button at bottom of mobile drawer */
.drawer .drawer-cta{
  margin-top:var(--s6); padding:18px var(--s5);
  background:var(--donker); color:var(--schuim);
  border-bottom:0; border-radius:var(--radius);
  font-family:var(--body); font-weight:700;
  font-size:18px; letter-spacing:0.10em; text-transform:uppercase;
  text-align:center;
  line-height:1.1;
}

/* ── OPEN pill ──────────────────────────────────────────── */
.openpill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  border:1px solid var(--donker); border-radius:var(--radius);
  background:var(--schuim);
}
.openpill.is-open .dot{ background:var(--hop); animation:pulse 2.4s ease-in-out infinite }
.openpill.is-closed .dot{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--donker) }
.openpill .dot{
  width:9px; height:9px; border-radius:50%;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:0.4 } }
@media (prefers-reduced-motion: reduce){ .openpill.is-open .dot{ animation:none } }

/* ── page system ────────────────────────────────────────── */
main{ display:block }
.page{ display:none; min-height:60vh }
.page.is-active{ display:block }

/* ── hero · / ───────────────────────────────────────────── */
.hero{
  padding:var(--s12) var(--s5) var(--s10);
  display:grid; grid-template-columns:1fr; gap:var(--s8); align-items:center;
}
.hero-text{ display:flex; flex-direction:column; gap:var(--s5) }
.hero .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--schaduw);
}
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:var(--display-lg); letter-spacing:-0.04em; line-height:0.88;
  text-transform:uppercase; margin:0;
}
.hero h1 .sq{ display:inline-block; width:0.18em; height:0.18em; background:var(--roest); vertical-align:-0.04em; margin-left:0.05em }
.hero .lede{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:22px; line-height:1.3; color:var(--bok-bruin); margin:0; max-width:46ch;
}
.hero p.copy{ font-size:17px; line-height:1.6; max-width:48ch; margin:0; color:var(--schaduw) }
.hero p.copy i{ font-family:var(--serif); font-style:italic; color:var(--bok-bruin) }
.hero .status{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-top:var(--s2) }
.hero .address{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:0.12em; line-height:1.6; color:var(--schaduw);
  text-transform:uppercase;
}
.hero .ctas{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3) }

.hero-circle{
  position:relative; aspect-ratio:1; max-width:440px;
  margin:0 auto; width:80%;
  border-radius:50%;
  background:var(--hop);
  box-shadow:0 30px 60px -20px rgba(26,23,20,0.4), inset 0 0 0 8px rgba(245,241,232,0.10);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-circle::after{
  content:""; position:absolute; inset:8%;
  border:1px solid rgba(245,241,232,0.25); border-radius:50%; pointer-events:none;
}
.hero-circle img{
  width:78%; height:78%; object-fit:contain;
  filter:invert(1); mix-blend-mode:screen;
}
.hero-circle.bg-bruin{ background:var(--bok-bruin) }
.hero-circle.bg-roest{ background:var(--roest) }
.hero-circle.bg-mos{ background:var(--mos) }
.hero-circle.bg-donker{ background:var(--donker) }
.hero-circle .corner{
  position:absolute; bottom:14%; right:14%;
  font-family:'JetBrains Mono', monospace; font-size:9.5px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--comptoir); writing-mode:vertical-rl;
}

@media (min-width:900px){
  .hero{
    padding:var(--s16) var(--s10);
    grid-template-columns:1.25fr 1fr; gap:var(--s6);
    align-items:center;
    max-width:1280px; margin:0 auto;
  }
  .hero h1{ font-size:var(--display-xl) }
  .hero .lede{ font-size:26px }
  .hero-circle{ width:100%; max-width:560px }
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 20px; border-radius:var(--radius);
  font-family:var(--body); font-weight:600; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  background:var(--donker); color:var(--schuim);
  border:1.5px solid var(--donker);
  min-height:44px;
  transition:background 0.12s, color 0.12s;
}
.btn:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop) }
.btn.secondary{ background:transparent; color:var(--donker) }
.btn.secondary:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop) }
.btn .arrow{ transition:transform 0.12s }
.btn:hover .arrow{ transform:translateX(2px) }

/* ── feature bands (intro, bar food, sfeer) ─────────────── */
.feature{
  padding:var(--s12) var(--s5);
  border-top:1px solid var(--hairline);
  display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:start;
}
.feature.bg-warm{
  background:
    linear-gradient(180deg, rgba(201,185,143,0.15) 0%, rgba(90,58,34,0.45) 50%, rgba(26,23,20,0.82) 100%),
    url("photos/BOK_bar_snacks.png") center/cover no-repeat,
    var(--comptoir);
  border-top-color:transparent;
  color:var(--schuim);
}
.feature.bg-warm h2{ color:var(--schuim) }
.feature.bg-warm h2 .hl{ color:var(--hop) }
.feature.bg-warm .kicker{ color:var(--hop) }
.feature.bg-warm .copy{ color:rgba(245,241,232,0.92) }
.feature.bg-warm .copy i{ color:var(--hop) }
.feature.bg-warm .more{ color:var(--hop); border-color:var(--hop) }
.feature.bg-dark{ background:var(--bok-bruin); color:var(--schuim); border-top-color:transparent }
.feature.bg-dark .kicker{ color:var(--hop); font-size:15px; font-weight:700; letter-spacing:0.22em; opacity:0.95 }
.feature.bg-dark h2{ color:var(--schuim) }
.feature.bg-dark p, .feature.bg-dark .copy{ color:var(--comptoir) }
.feature.bg-dark h2{ font-size:clamp(40px, 7vw, 64px) }
.feature .kicker{
  font-family:'JetBrains Mono', monospace; font-size:15px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--roest); margin:0;
}
.feature h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--display-md); letter-spacing:-0.025em; line-height:1; text-transform:uppercase;
  margin:0;
}
.feature h2 .sq{ display:inline-block; width:0.16em; height:0.16em; background:var(--roest); vertical-align:-0.04em; margin-left:0.04em }
.feature .copy{
  font-size:17px; line-height:1.65; max-width:60ch;
}
.feature .copy + .copy{ margin-top:var(--s3) }
.feature .copy i{ font-family:var(--serif); font-style:italic; color:var(--bok-bruin) }
.feature.bg-dark .copy i{ color:var(--hop) }
.feature .more{
  font-family:var(--display); font-weight:400; font-size:32px;
  letter-spacing:-0.02em; text-transform:uppercase; line-height:1;
  border-bottom:2px solid currentColor; padding-bottom:6px;
  display:inline-block; align-self:flex-start; margin-top:var(--s3);
}
.feature.bg-dark .more{ font-size:32px; border-bottom-width:2px; padding-bottom:6px }
.feature .text{ display:flex; flex-direction:column; gap:var(--s4) }

/* events-intro: hide long body copy on mobile, keep only the CTA */
@media (max-width:1023px){
  .feature.events-intro .copy{ display:none }
}
.feature .side{ font-family:var(--display); font-weight:400; line-height:0.9; letter-spacing:-0.03em; text-transform:uppercase }
.feature .side .big{ font-size:clamp(56px, 12vw, 120px) }
.feature.bg-dark h2{ font-size:clamp(48px, 9vw, 96px) }
@media (min-width:1024px){
  .feature{
    padding:var(--s16) var(--s10);
    grid-template-columns:1fr 1fr; gap:var(--s12);
  }
  .feature h2{ font-size:var(--display-lg) }
  .feature.bg-dark h2{ font-size:clamp(56px, 7vw, 96px) }
  .feature.bg-dark{ padding:var(--s20) var(--s10) }
  .feature .copy{ font-size:18.5px }
  .feature .kicker{ font-size:19px; letter-spacing:0.20em }
  .feature.bg-dark .kicker{ font-size:19px; letter-spacing:0.20em }
  .feature.bg-dark .more{ font-size:44px }
}

/* ── special-card carousel (Ragu / Guest / Negroni) ─────── */
/* mobile: horizontal scroll-snap carousel · desktop: 3-col grid */
.specials{
  padding:var(--s10) 0;
  border-top:1px solid var(--hairline);
  display:flex; gap:var(--s4);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.specials::-webkit-scrollbar{ display:none }
/* gutter inside the scroll container so first/last card breathe */
.specials::before,
.specials::after{ content:""; flex:0 0 var(--s5) }
.special-card{
  flex:0 0 86%; min-width:0;
  scroll-snap-align:start;
  background:var(--donker); color:var(--schuim);
  padding:var(--s8) var(--s6);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--s3); min-height:280px;
}
.special-card.bg-bruin{ background:var(--bok-bruin) }
.special-card.bg-roest{ background:var(--roest) }
.special-card.bg-hop{ background:var(--hop); color:var(--donker) }

/* ── photo backgrounds · brand-color preserved as gradient tint ── */
/* Top of card: photo shows clearly (low-opacity tint).               */
/* Bottom of card: tint deepens to near-opaque for text legibility.   */
.special-card.bg-bruin{
  background:
    linear-gradient(180deg, rgba(90,58,34,0.10) 0%, rgba(90,58,34,0.40) 50%, rgba(26,23,20,0.85) 100%),
    url("photos/BOK_spaghetti_ragu_night.png") center/cover no-repeat,
    var(--bok-bruin);
}
.specials > .special-card:nth-child(2){
  background:
    linear-gradient(180deg, rgba(26,23,20,0.10) 0%, rgba(26,23,20,0.35) 50%, rgba(10,9,8,0.80) 100%),
    url("photos/BOK_guest_kitchen.png") center/cover no-repeat,
    var(--donker);
}
.special-card.bg-hop{
  background:
    linear-gradient(180deg, rgba(212,163,55,0.15) 0%, rgba(177,79,42,0.40) 50%, rgba(26,23,20,0.82) 100%),
    url("photos/BOK_negroni_night.png") center/cover no-repeat,
    var(--hop);
  color:var(--schuim);
}
.special-card.bg-hop .kicker{ color:var(--hop); opacity:1 }
.special-card.bg-hop .blurb i{ color:var(--hop) }
.special-card.bg-hop .tail{ color:var(--hop); opacity:0.75 }
/* the inline-styled dot in Negroni h3 is var(--donker) on a now-light h3 — leave it,
   the small black square reads as punctuation against the schuim text. */
.special-card .kicker{
  font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--schuim); margin:0;
}
@media (min-width:1024px){
  .special-card .kicker{ font-size:15px; letter-spacing:0.20em }
}
.special-card.bg-hop .kicker{ color:var(--donker); opacity:0.65 }
.special-card h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px, 5vw, 44px); letter-spacing:-0.025em;
  line-height:1.0; text-transform:uppercase; margin:0;
}
.special-card .blurb{ font-size:15.5px; line-height:1.55; max-width:42ch; margin:0 }
.special-card .blurb i{ font-family:var(--serif); font-style:italic; color:var(--comptoir) }
.special-card.bg-hop .blurb i{ color:var(--bok-bruin) }
.special-card .tail{
  margin-top:auto; font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.25em; text-transform:uppercase; color:var(--comptoir);
}
.special-card.bg-hop .tail{ color:var(--bok-bruin); opacity:0.7 }
@media (min-width:1024px){
  .specials{
    padding:var(--s16) var(--s10);
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
    overflow:visible; scroll-snap-type:none;
  }
  .specials::before, .specials::after{ display:none }
  .special-card{ flex:initial; min-height:360px; padding:var(--s10) var(--s6) }
}

/* ── contact strip (Kom binnen.) ─────────────────────────── */
.come-in{
  background:var(--donker); color:var(--schuim);
  padding:var(--s12) var(--s5) var(--s10);
  display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:center;
}
.come-in h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(56px, 10vw, 104px); letter-spacing:-0.045em; line-height:0.88;
  text-transform:uppercase; margin:0; max-width:14ch;
}
.come-in h2 .sq{ display:inline-block; width:0.18em; height:0.18em; background:var(--roest); vertical-align:-0.04em; margin-left:0.05em }
.come-in .address-big{
  font-family:var(--display); font-weight:400; font-size:clamp(32px, 4.5vw, 44px);
  letter-spacing:-0.025em; line-height:1.0; text-transform:uppercase;
}
.come-in .when{
  font-family:'JetBrains Mono', monospace; font-size:13px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--comptoir);
  margin-top:var(--s5);
}
.come-in .ctas{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6) }
.come-in .btn{
  background:var(--schuim); color:var(--donker); border-color:var(--schuim);
  font-size:16px; padding:18px 28px; min-height:56px;
  letter-spacing:0.08em;
}
.come-in .btn:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop) }
.come-in .btn.secondary{ background:transparent; color:var(--schuim); border-color:var(--schuim) }
.come-in .btn.secondary:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop) }
@media (min-width:768px){
  .come-in{ padding:var(--s16) var(--s10) var(--s12); grid-template-columns:1.2fr 1fr; gap:var(--s10) }
  .come-in .btn{ font-size:16px; padding:16px 28px; min-height:52px }
}

/* ── op-tap rows ────────────────────────────────────────── */
.tap-list{ padding:var(--s10) var(--s5); border-top:1px solid var(--hairline) }
.tap-list .meta-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--steen);
  margin-bottom:var(--s5);
}
.tap-list h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--display-md); letter-spacing:-0.025em; line-height:1;
  text-transform:uppercase; margin:0 0 var(--s6);
}
.tap-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s2) var(--s5); align-items:baseline;
  padding:var(--s4) 0;
  border-bottom:1px solid var(--hairline);
}
.tap-row.special{ background:rgba(166,176,76,0.10); padding:var(--s4) var(--s4); margin:var(--s2) calc(-1 * var(--s4)); border-bottom:none }
.tap-row.special .deze{
  font-family:var(--serif); font-style:italic; font-size:13px;
  color:var(--bok-bruin); grid-column:1/-1; margin-top:-4px;
}
.tap-row .name{ font-weight:600; font-size:17px; line-height:1.3 }
.tap-row .meta{
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--steen);
  letter-spacing:0.08em; text-transform:uppercase; line-height:1.4;
  grid-column:1; margin-top:2px;
}
.tap-row .price{
  font-family:var(--display); font-weight:400;
  font-size:24px; letter-spacing:-0.01em;
  grid-column:2; grid-row:1;
}
.tap-row.special .price{ color:var(--roest) }

@media (min-width:768px){
  .tap-list{ padding:var(--s16) var(--s10) }
  .tap-list h2{ font-size:var(--display-lg); margin-bottom:var(--s10) }
  .tap-row{ grid-template-columns:1fr 1fr auto; padding:var(--s5) 0 }
  .tap-row .meta{ grid-column:2; grid-row:1; margin-top:0 }
  .tap-row .price{ grid-column:3 }
}

/* tap-list teaser variant on home */
.tap-teaser .tap-row:nth-child(n+6){ display:none }

/* tap-list (Drank/Eten) section heading + italic subline */
.tap-list h3{
  font-family:var(--display); font-weight:400;
  font-size:28px; letter-spacing:-0.02em; line-height:1;
  margin:var(--s10) 0 var(--s3); text-transform:uppercase;
  padding-bottom:var(--s2); border-bottom:1px solid var(--hairline);
}
.tap-list h3:first-of-type{ margin-top:var(--s6) }
.tap-list .intro{
  font-size:17px; max-width:55ch; margin:0 0 var(--s6);
  color:var(--schaduw);
}
.tap-list .intro i{ font-family:var(--serif); font-style:italic; color:var(--bok-bruin) }
.tap-row .sub{
  font-family:var(--serif); font-style:italic;
  font-size:16px; line-height:1.45;
  color:var(--bok-bruin);
  grid-column:1 / -1; grid-row:auto;
  margin-top:2px;
}
@media (min-width:768px){
  .tap-list h3{ font-size:36px; margin-top:var(--s16) }
  .tap-row .sub{ grid-column:1 / 3; font-size:18px }
}

/* ── menu cards (Drank · Eten) ───────────────────────────── */
.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
  margin-top:var(--s6);
}
.menu-card{
  background:var(--schuim);
  border:1px solid var(--hairline);
  padding:var(--s6) var(--s5);
  display:flex; flex-direction:column;
  gap:var(--s2);
  break-inside:avoid;
}
.menu-card h3{
  font-family:var(--display); font-weight:400;
  font-size:30px; letter-spacing:-0.02em; line-height:1;
  text-transform:uppercase;
  color:var(--donker);
  margin:0 0 var(--s4);
  padding-bottom:var(--s3);
  border-bottom:3px solid var(--donker);
}
.menu-card h3 .sq{
  display:inline-block; width:0.16em; height:0.16em;
  background:var(--roest); margin-left:0.06em; vertical-align:-0.04em;
}

/* alternating accent colors per card */
.menu-card:nth-child(6n+1) h3{ border-bottom-color:var(--roest) }
.menu-card:nth-child(6n+1) h3 .sq{ background:var(--roest) }
.menu-card:nth-child(6n+2) h3{ color:var(--bok-bruin); border-bottom-color:var(--bok-bruin) }
.menu-card:nth-child(6n+2) h3 .sq{ background:var(--bok-bruin) }
.menu-card:nth-child(6n+3) h3{ border-bottom-color:var(--hop) }
.menu-card:nth-child(6n+3) h3 .sq{ background:var(--hop) }
.menu-card:nth-child(6n+4) h3{ color:var(--mos); border-bottom-color:var(--mos) }
.menu-card:nth-child(6n+4) h3 .sq{ background:var(--mos) }
.menu-card:nth-child(6n+5) h3{ color:var(--bok-bruin); border-bottom-color:var(--bok-bruin) }
.menu-card:nth-child(6n+5) h3 .sq{ background:var(--bok-bruin) }
.menu-card:nth-child(6n+6) h3{ border-bottom-color:var(--roest) }
.menu-card:nth-child(6n+6) h3 .sq{ background:var(--roest) }

.menu-card .tap-row{ padding:var(--s3) 0 }
.menu-card .tap-row:last-of-type{ border-bottom:0 }

@media (min-width:768px){
  .menu-grid{ grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s10) }
  .menu-card{ padding:var(--s8) var(--s6) }
  .menu-card h3{ font-size:36px; margin-bottom:var(--s5) }
}
@media (min-width:1100px){
  .menu-grid{ grid-template-columns:repeat(3, 1fr) }
}

/* ── agenda · event cards ───────────────────────────────── */
.events{ padding:var(--s10) var(--s5); border-top:1px solid var(--hairline) }
.events h2{
  font-family:var(--display); font-weight:400; font-size:var(--display-md);
  letter-spacing:-0.025em; line-height:1; text-transform:uppercase; margin:0 0 var(--s6);
}
.event-card{
  padding:var(--s5) 0; border-bottom:1px solid var(--hairline);
  display:grid; grid-template-columns:auto 1fr; gap:var(--s5) var(--s4);
}
.event-card:last-child{ border-bottom:0 }

/* ── carousel arrow controls ─────────────────────────────── */
.carousel-controls{
  display:none; justify-content:flex-end; gap:var(--s2);
  margin-top:var(--s4);
}
.carousel-arrow{
  width:44px; height:44px;
  background:var(--donker); color:var(--schuim);
  border:1.5px solid var(--donker); border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.12s, color 0.12s;
  padding:0;
}
.carousel-arrow:hover{ background:var(--hop); color:var(--donker); border-color:var(--hop); }
.viewport.mobile .carousel-controls{ display:flex; }
@media (max-width:1023px){ .carousel-controls{ display:flex; } }

/* ── events: swipeable carousel on mobile, stacked list on desktop ─── */
.events-carousel{
  display:flex; flex-direction:row;
  gap:var(--s4);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 calc(-1 * var(--s5));
  padding:var(--s2) var(--s5) var(--s5);
}
.events-carousel::-webkit-scrollbar{ display:none }
.events-carousel .event-card{
  flex:0 0 86%;
  scroll-snap-align:start;
  background:var(--schuim);
  border:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:var(--s5);
}
@media (min-width:768px){
  .events-carousel .event-card{ flex:0 0 60% }
}
@media (min-width:1024px){
  .events-carousel{
    display:block;
    overflow:visible; overflow-x:visible;
    scroll-snap-type:none;
    margin:0; padding:0;
  }
  .events-carousel .event-card{
    flex:initial;
    background:transparent;
    border:0; border-bottom:1px solid var(--hairline);
    padding:var(--s5) 0;
  }
  .events-carousel .event-card:last-child{ border-bottom:0 }
}
.event-card .date{
  font-family:var(--display); font-weight:400;
  font-size:48px; line-height:0.9; letter-spacing:-0.025em; text-transform:uppercase;
  min-width:80px;
}
.event-card .date .day{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  margin-top:6px; color:var(--steen);
}
.event-card .body{ display:flex; flex-direction:column; gap:var(--s2) }
.event-card .title{
  font-family:var(--display); font-weight:400;
  font-size:24px; line-height:1.05; letter-spacing:-0.015em; text-transform:uppercase;
}
.event-card .blurb{ font-size:14px; line-height:1.5; color:var(--schaduw) }
.event-card .rsvp{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  align-self:flex-start; padding:6px 0; border-bottom:1px solid var(--donker);
}
@media (min-width:768px){
  .events{ padding:var(--s16) var(--s10) }
  .events h2{ font-size:var(--display-lg); margin-bottom:var(--s10) }
  .event-card{ grid-template-columns:160px 1fr; gap:var(--s8) }
  .event-card .date{ font-size:64px }
  .event-card .title{ font-size:32px }
}

/* ── vinden ─────────────────────────────────────────────── */
.find{ padding:var(--s10) var(--s5); border-top:1px solid var(--hairline) }
.find h2{
  font-family:var(--display); font-weight:400; font-size:var(--display-md);
  letter-spacing:-0.025em; line-height:1; text-transform:uppercase; margin:0 0 var(--s5);
}
.find .address-big{
  font-family:var(--display); font-size:32px; letter-spacing:-0.02em; line-height:1.05;
  text-transform:uppercase; margin-bottom:var(--s5);
}
.find .hours{
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.08em;
  width:100%; max-width:380px; border-collapse:collapse;
}
.find .hours tr{ border-bottom:1px solid var(--hairline) }
.find .hours .today td{ background:rgba(166,176,76,0.16); font-weight:700 }
.find .hours td{ padding:8px 0; text-transform:uppercase }
.find .hours td:last-child{ text-align:right }
.find .ctas{ display:flex; gap:var(--s3); margin:var(--s5) 0; flex-wrap:wrap }
.find .map{
  aspect-ratio:16/9; background:var(--comptoir);
  position:relative; overflow:hidden;
  background-image:
    repeating-linear-gradient(0deg, rgba(26,23,20,0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(26,23,20,0.06) 0 1px, transparent 1px 28px);
}
.find .map::after{
  content:""; position:absolute; top:50%; left:50%;
  width:24px; height:24px; background:var(--roest);
  border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg);
  box-shadow:0 4px 0 rgba(0,0,0,0.18);
}
.find .meta-pairs{ display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s6) }
.find .meta-pairs h4{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--roest);
  margin:0 0 6px;
}
.find .meta-pairs p{ font-size:14.5px; margin:0 }
@media (min-width:768px){
  .find{ padding:var(--s16) var(--s10) }
  .find h2{ font-size:var(--display-lg); margin-bottom:var(--s10) }
  .find .layout{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s12); align-items:start }
  .find .meta-pairs{ grid-template-columns:1fr 1fr }
}

/* ── about / press / 404 ─────────────────────────────────── */
.long{ padding:var(--s10) var(--s5); max-width:680px }
.long h1{
  font-family:var(--display); font-weight:400; font-size:var(--display-lg);
  letter-spacing:-0.04em; line-height:0.9; text-transform:uppercase; margin:0 0 var(--s6);
}
.long h2{
  font-family:var(--display); font-weight:400; font-size:var(--display-md);
  letter-spacing:-0.025em; line-height:1; text-transform:uppercase;
  margin:var(--s10) 0 var(--s4);
}
.long p{ font-size:17px; line-height:1.65; margin:0 0 var(--s4) }
.long p i{ font-family:var(--serif); font-style:italic; color:var(--bok-bruin) }
.long .values{
  display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s10);
  padding-top:var(--s6); border-top:1px solid var(--hairline);
}
.long .values span{
  font-family:var(--display); font-weight:400; font-size:48px;
  letter-spacing:-0.025em; line-height:1; text-transform:uppercase;
}
@media (min-width:768px){
  .long{ padding:var(--s16) var(--s10) }
  .long h1{ font-size:var(--display-xl) }
  .long .values span{ font-size:64px }
}

/* 404 hero */
.notfound{ padding:var(--s16) var(--s5); text-align:left; max-width:680px }
.notfound h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(120px, 24vw, 240px);
  letter-spacing:-0.06em; line-height:0.85; text-transform:uppercase;
  margin:0 0 var(--s4);
}
.notfound .sub{
  font-family:var(--serif); font-style:italic; font-size:22px;
  color:var(--bok-bruin); margin-bottom:var(--s6);
}
.notfound .links{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s6) }
.notfound .links a{
  font-family:'JetBrains Mono', monospace; font-size:13px;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:14px 0; border-bottom:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center;
}
.notfound .links a:hover{ color:var(--roest) }

/* ── newsletter strip ────────────────────────────────────── */
.brief{
  background:var(--donker); color:var(--schuim);
  padding:var(--s10) var(--s5); border-top:1px solid var(--hairline);
}
.brief h2{
  font-family:var(--display); font-weight:400; font-size:var(--display-md);
  letter-spacing:-0.025em; line-height:1; text-transform:uppercase; margin:0 0 var(--s3);
}
.brief .sub{
  font-family:var(--serif); font-style:italic;
  font-size:18px; line-height:1.4; color:var(--comptoir);
  margin:0 0 var(--s5); max-width:46ch;
}
.brief .form{ display:flex; flex-direction:column; gap:var(--s3); max-width:480px }
.brief input{
  font-family:var(--body); font-size:16px; padding:14px 16px;
  background:transparent; color:var(--schuim); border:1.5px solid var(--schuim);
  border-radius:var(--radius); min-height:48px;
}
.brief input::placeholder{ color:var(--comptoir) }
.brief button[type=submit]{
  font-family:var(--body); font-weight:600; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 20px; background:var(--schuim); color:var(--donker);
  border-radius:var(--radius); min-height:48px;
  transition:background 0.12s;
}
.brief button[type=submit]:hover{ background:var(--hop) }
.brief .gdpr{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--comptoir); line-height:1.4;
}
.brief .gdpr input{ width:auto; min-height:auto; padding:0; margin-top:2px }
.brief .fine{ font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--comptoir); margin-top:var(--s3); }
@media (min-width:768px){
  .brief{ padding:var(--s16) var(--s10) }
  .brief h2{ font-size:var(--display-lg); margin-bottom:var(--s8) }
  .brief .form{ flex-direction:row; flex-wrap:wrap; align-items:flex-start }
  .brief .form input{ flex:1; min-width:280px }
}

/* ── press kit ───────────────────────────────────────────── */
.press-grid{ display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s8) }
.press-card{
  border:1px solid var(--hairline); padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s2);
}
.press-card h3{
  font-family:var(--display); font-weight:400; font-size:24px;
  letter-spacing:-0.015em; margin:0; text-transform:uppercase;
}
.press-card .download{
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  padding-top:var(--s2); border-top:1px solid var(--hairline); margin-top:auto;
}
@media (min-width:768px){
  .press-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s5) }
}

/* ── footer ──────────────────────────────────────────────── */
footer{
  background:var(--donker); color:var(--schuim);
  padding:var(--s10) var(--s5) var(--s5);
}
footer .top{ display:grid; grid-template-columns:1fr; gap:var(--s6) }
footer h4{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:10px;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--hop); margin:0 0 var(--s2);
}
footer p, footer a{ font-size:14px; line-height:1.6; color:var(--schuim) }
footer .seal-block{ display:flex; flex-direction:column; gap:var(--s3) }
footer .seal-block img{ width:120px; mix-blend-mode:screen; filter:invert(1) }
footer .bottom{
  display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between;
  margin-top:var(--s10); padding-top:var(--s5); border-top:1px solid var(--schaduw);
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--comptoir);
}
@media (min-width:768px){
  footer{ padding:var(--s16) var(--s10) var(--s6) }
  footer .top{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s10) }
}

/* utility */
.hide-mobile{ display:none }
@media (min-width:768px){
  .hide-mobile{ display:initial }
  .hide-desktop{ display:none }
}

/* ── tweaks drawer ──────────────────────────────────────── */
.tweaks-btn{
  padding:6px 12px;
  border:1px solid rgba(245,241,232,0.4);
  border-radius:var(--radius);
  color:var(--schuim); font-family:inherit;
  font-size:10.5px; letter-spacing:0.22em;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.tweaks-btn:hover{ background:rgba(245,241,232,0.1) }
.tweaks-btn .dot{ width:8px; height:8px; background:var(--hop); border-radius:50% }

.tweaks-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:340px; max-width:90vw;
  background:#161310; color:#F5F1E8;
  border-left:1px solid rgba(245,241,232,0.14);
  z-index:200;
  transform:translateX(100%); transition:transform 0.25s ease;
  overflow-y:auto;
  font-family:'JetBrains Mono', monospace;
  box-shadow:-30px 0 60px rgba(0,0,0,0.4);
}
.tweaks-drawer.is-open{ transform:translateX(0) }
.tweaks-drawer .head{
  padding:18px 20px; border-bottom:1px solid rgba(245,241,232,0.14);
  display:flex; justify-content:space-between; align-items:center;
}
.tweaks-drawer .head h3{
  margin:0; font-family:'Anton', sans-serif; font-weight:400;
  font-size:24px; letter-spacing:-0.02em; text-transform:uppercase; color:#F5F1E8;
}
.tweaks-drawer .head button.close{
  width:32px; height:32px; padding:0;
  font-size:20px; color:#F5F1E8; line-height:1;
  border:1px solid rgba(245,241,232,0.4); border-radius:var(--radius);
}
.tweaks-drawer .group{ padding:18px 20px; border-bottom:1px solid rgba(245,241,232,0.10) }
.tweaks-drawer .group .label{
  font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--hop); margin-bottom:10px;
}
.tweaks-drawer .pick{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.tweaks-drawer .pick.col-2{ grid-template-columns:repeat(2,1fr) }
.tweaks-drawer .swatch{
  aspect-ratio:1; border-radius:var(--radius);
  border:1.5px solid rgba(245,241,232,0.18);
  cursor:pointer; position:relative; padding:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#fff;
  transition:border-color 0.12s, transform 0.12s;
}
.tweaks-drawer .swatch:hover{ transform:scale(1.03) }
.tweaks-drawer .swatch.is-on{ border-color:var(--hop); box-shadow:0 0 0 2px rgba(166,176,76,0.3) }
.tweaks-drawer .swatch img{
  width:100%; height:100%; object-fit:contain; padding:8%;
  mix-blend-mode:multiply;
}
.tweaks-drawer .swatch.color{ font-size:9px; color:rgba(0,0,0,0.5) }
.tweaks-drawer .row-pick{
  display:flex; flex-direction:column; gap:6px;
}
.tweaks-drawer .row-pick button{
  text-align:left; padding:10px 12px;
  border:1.5px solid rgba(245,241,232,0.18);
  border-radius:var(--radius);
  color:#F5F1E8; font-family:'Source Serif 4', serif; font-style:italic;
  font-size:13px; line-height:1.3; cursor:pointer;
  transition:border-color 0.12s, background 0.12s;
}
.tweaks-drawer .row-pick button:hover{ background:rgba(245,241,232,0.06) }
.tweaks-drawer .row-pick button.is-on{
  border-color:var(--hop); background:rgba(166,176,76,0.12);
}
.tweaks-drawer .row-pick button .meta{
  display:block; font-family:'JetBrains Mono', monospace; font-style:normal;
  font-size:9px; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(245,241,232,0.5); margin-top:4px;
}
.tweaks-drawer .reset{
  padding:18px 20px;
  display:flex; gap:8px;
}
.tweaks-drawer .reset button{
  flex:1; padding:10px;
  border:1px solid rgba(245,241,232,0.3); border-radius:var(--radius);
  color:#F5F1E8; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer;
}
.tweaks-drawer .reset button:hover{ background:rgba(245,241,232,0.08) }

/* ── theme: dark ─────────────────────────────────────────── */
.viewport.theme-dark{
  --schuim:#1A1714;
  --donker:#F5F1E8;
  --bok-bruin:#8A6E4E;
  --comptoir:#7A6850;
  --steen:#9B948A;
  --hairline:rgba(245,241,232,0.14);
  background:var(--schuim);
  color:var(--donker);
}

/* ── theme: krijt (between schuim and warm) ─────────────── */
.viewport.theme-krijt{
  --schuim:#EEE6D7;
  --hairline:rgba(26,23,20,0.14);
  background:var(--schuim);
}

/* ── theme: warm bok bruin ──────────────────────────────── */
.viewport.theme-warm{
  --schuim:#E4D4B9;
  --comptoir:#A8946F;
  --hairline:rgba(26,23,20,0.16);
  background:var(--schuim);
}

/* ── theme: comptoir (deep tan) ─────────────────────────── */
.viewport.theme-comptoir{
  --schuim:#C9B98F;
  --comptoir:#8A7855;
  --hairline:rgba(26,23,20,0.18);
  background:var(--schuim);
}

/* ── theme: mos (dark green) ────────────────────────────── */
.viewport.theme-mos{
  --schuim:#F5F1E8;
  --donker:#1A1714;
  --bok-bruin:#1F8A5B;
  --comptoir:#2C6B47;
  background:#E6E1D2;
}

/* ── accent overrides (applied by JS) ───────────────────── */
.viewport.accent-hop{ --roest:#D4A337 }
.viewport.accent-mos{ --roest:#1F8A5B }
.viewport.accent-bruin{ --roest:#5A3A22 }
.viewport.accent-donker{ --roest:#1A1714 }
.viewport.accent-ossenbloed{ --roest:#4D1414 }
.viewport.accent-inkt{ --roest:#1E2A3A }
/* default accent-roest needs no override */

/* ── texture overlays (fixed full-viewport, under nav/comp-bar) ── */
.viewport.tex-grain::after,
.viewport.tex-papier::after,
.viewport.tex-halftone::after{
  content:""; position:fixed; inset:0; z-index:5;
  pointer-events:none;
}
.viewport.tex-grain::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  opacity:0.18;
}
.viewport.tex-papier::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='400' height='400' filter='url(%23p)'/></svg>");
  mix-blend-mode:multiply;
  opacity:0.28;
}
.viewport.tex-halftone::after{
  background-image:radial-gradient(rgba(26,23,20,0.18) 1px, transparent 1.4px);
  background-size:7px 7px;
}

/* ── font tweak variants ─────────────────────────────────── */
.viewport.font-serif-playfair  { --serif:'Playfair Display', Georgia, serif }
.viewport.font-serif-lora      { --serif:'Lora', Georgia, serif }
.viewport.font-serif-garamond  { --serif:'EB Garamond', Georgia, serif }
.viewport.font-display-bebas        { --display:'Bebas Neue', Impact, sans-serif }
.viewport.font-display-oswald       { --display:'Oswald', Impact, sans-serif }
.viewport.font-display-bigshoulders { --display:'Big Shoulders Display', Impact, sans-serif }

/* preview swatches for font picker — render the actual letterform large */
.tweaks-drawer .font-swatch{
  background:var(--schuim); color:var(--donker);
  font-size:22px; line-height:1; padding:0;
}
.tweaks-drawer .font-swatch.is-on{ background:var(--hop) }