@font-face {
  font-family: "Libre Caslon Display";
  src: url(fonts/libre-caslon-display.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --serif:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --r:4px;
  --bg:#0e0b09;
  --surface:#17120e;
  --surface-2:#1f1915;
  --surface-3:#2a221c;
  --line:#3a2f25;
  --line-strong:#5b4a38;
  --text:#f6f1ea;
  --text-strong:#fff9f0;
  --text-muted:#dcd2c4;
  --text-faint:#bcb1a2;
  --accent:#cfa56a;
  --accent-hover:#e7c48c;
  --accent-text:#1a120a;
  --accent-soft:rgba(207,165,106,.15);
  --accent-ink:#e0bb7f;
  --focus:#e7c48c;
  --glass:#e7c48c;
  --glass-2:#c9a06a;
  --glass-d:#cfa56a;
}
:root[data-theme=dark] {
  --bg:#0e0b09;
  --surface:#17120e;
  --surface-2:#1f1915;
  --surface-3:#2a221c;
  --line:#3a2f25;
  --line-strong:#5b4a38;
}
:root[data-theme=light] {
  --bg:#f4eee6;
  --surface:#efe8df;
  --surface-2:#fbf8f4;
  --surface-3:#e7ddd0;
  --line:#ddd0bd;
  --line-strong:#c2ae93;
  --text:#1a1411;
  --text-strong:#0f0b08;
  --text-muted:#4d4339;
  --text-faint:#655a4e;
  --accent:#83602c;
  --accent-hover:#6c4c20;
  --accent-text:#fff;
  --accent-soft:rgba(131,96,44,.1);
  --accent-ink:#6c4c20;
  --focus:#83602c;
}
.lux,
.pghero,
.macro,
.stage,
.cf-room,
.cf-3d,
.lb,
.vn,
.lv,
.room,
.fx,
.hall,
.altijd-donker {
  --bg:#0e0b09;
  --surface:#17120e;
  --surface-2:#1f1915;
  --surface-3:#2a221c;
  --line:#3a2f25;
  --line-strong:#5b4a38;
  --accent:#cfa56a;
  --accent-hover:#e7c48c;
}
body {
  background: var(--bg);
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}
.btn {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .76rem;
  font-weight: 600;
}
.btn-g {
  background:
    linear-gradient(
      180deg,
      #e0bb7f,
      #c0945a);
  color: #1a120a;
}
.btn-g:hover {
  background:
    linear-gradient(
      180deg,
      #ecca93,
      #cda066);
}
:root[data-theme=light] .btn-g {
  color: #1a120a;
}
.btn-o {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.logo {
  color: var(--accent);
}
html:root body .logo svg.merk {
  width: 27px !important;
  height: 36px !important;
  color: #cfa56a;
}
html:root body .logo > span,
html:root body .logo b,
html:root body .logo small {
  color: #cfa56a;
}
html:root body .logo b {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .14em;
  line-height: 1.1;
}
html:root body .logo small {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .46em;
  line-height: 1.1;
  margin-top: 4px;
}
:root[data-theme=light] html body .logo b {
  color: #83602c;
}
.demo-bar {
  background: #060504;
}
html:root body .kop .logo b,
html:root body .voet .logo b {
  font-size: 29px;
  letter-spacing: .12em;
  color: #d6ab6e;
}
html:root body .kop .logo small,
html:root body .voet .logo small {
  font-size: 10px;
  letter-spacing: .5em;
  color: #d6ab6e;
}
html:root body .kop .logo svg.merk,
html:root body .voet .logo svg.merk {
  width: 32px !important;
  height: 42px !important;
  fill: currentColor;
}
.kop {
  position: sticky;
}
body:has(> #app .kop) .demo-bar {
  display: none;
}