/* kamer.css — alleen actief met <html class="duo">: ruitjespapier, de getekende opening, nachtblauw + crème */
html.duo { --papier: #ece3cf; --nacht: #1b2a6b; --rooster: rgba(27, 42, 107, .075); }
html.duo body, html.duo #stage, html.duo #laadscherm { background-color: var(--papier);
  background-image: linear-gradient(var(--rooster) 1px, transparent 1px), linear-gradient(90deg, var(--rooster) 1px, transparent 1px);
  background-size: 16px 16px; }
html.duo #waas { display: none; }
#kamer { position: relative; z-index: 2; height: 260vh; }
#kamer .kamervast { position: fixed; inset: 0; z-index: 14; pointer-events: none; opacity: calc(1 - var(--kamer, 0));
  background-color: var(--papier); background-image: linear-gradient(var(--rooster) 1px, transparent 1px), linear-gradient(90deg, var(--rooster) 1px, transparent 1px); background-size: 16px 16px; }
#kamer.voorbij .kamervast { visibility: hidden; }
#kamer .venster { position: absolute; overflow: hidden; background: var(--papier); outline: 1px solid rgba(27, 42, 107, .35); }
#kamer .wereld { position: absolute; }
#kamer .kl { position: absolute; display: block; will-change: transform, opacity; user-select: none; }
#kamer .kl-schaduw polygon { fill: var(--nacht); }
#kamer .korrel { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .15  0 0 0 0 .4  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#kamer .kamerkop { position: absolute; left: 0; right: 0; top: 0; height: 46vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 16px 0; text-align: center; color: #2c2c33; }
#kamer h1 { margin: 0; font: 600 clamp(40px, 7.4vw, 118px)/0.95 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -0.045em; max-width: 13ch; }
#kamer .hand { font-family: 'Architects Daughter', 'Caveat', cursive; color: #3d4466; font-size: clamp(15px, 1.6vw, 22px); text-transform: uppercase; letter-spacing: .04em; position: absolute; }
#kamer .hand u { text-decoration: none; border-bottom: 2px solid rgba(61, 68, 102, .55); padding-bottom: 1px; }
#kamer .hand.links { left: clamp(16px, 9vw, 160px); top: 58%; transform: rotate(-4deg); }
#kamer .hand.rechts { right: clamp(16px, 8vw, 150px); top: 76%; transform: rotate(-3deg); }
#kamer .hand.rechts::before { content: '→ '; }
@media (max-width: 700px) { #kamer .hand.links { top: 82%; } #kamer .hand.rechts { display: none; } }
html.duo #teksten, html.duo #hoofdstukken, html.duo #scrollhint, html.duo #noten, html.duo #geluid { opacity: var(--kamer, 1); transition: opacity .2s; }
html.duo #logoGroot { display: none; }
/* tekstkaarten in de twee-kleurenstijl: strak papier met een dunne lijn, grote grotesk, handgeschreven kicker */
html.duo .kaart { background: rgba(236, 227, 207, .92); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; box-shadow: none; border: 1px solid rgba(27, 42, 107, .35); }
html.duo .kaart h1, html.duo .kaart h2 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; color: #26262e; }
html.duo .kaart p { color: #3a3d52; }
html.duo .kicker { font-family: 'Architects Daughter', 'Caveat', cursive; letter-spacing: .05em; color: #2b3a7a; font-size: 14px; }
html.duo .kicker::after { content: ''; display: block; width: 58%; height: 2px; margin-top: 3px; background: rgba(43, 58, 122, .45); transform: rotate(-1deg); }
html.duo #hoofdstukken button, html.duo #hoofdstukken a { border-color: var(--nacht); }
/* de eindkaart: nachtblauw met crème, het sluitstuk van de stijl */
html.duo .kaart.eind { background: rgba(27, 42, 107, .94); border-color: rgba(236, 227, 207, .35); color: var(--papier); }
html.duo .kaart.eind h2, html.duo .kaart.eind p, html.duo .kaart.eind .prijs, html.duo .kaart.eind .prijs b, html.duo .kaart.eind .prijs span { color: var(--papier); }
html.duo .kaart.eind .kicker { color: #c9cfe8; }
html.duo .kaart.eind .kicker::after { background: rgba(236, 227, 207, .5); }
html.duo .kaart.eind .prijskaart { background: rgba(236, 227, 207, .1); border-color: rgba(236, 227, 207, .3); }
html.duo .kaart.eind .knop { background: var(--papier); color: var(--nacht); }
/* de pagina onder het verhaal: hetzelfde ruitjespapier, strakke koppen, nachtblauw als accent */
html.duo #pagina { --duin: var(--nacht); background-color: var(--papier);
  background-image: linear-gradient(var(--rooster) 1px, transparent 1px), linear-gradient(90deg, var(--rooster) 1px, transparent 1px); background-size: 16px 16px; box-shadow: none; border-top: 1px solid rgba(27, 42, 107, .25); }
html.duo #pagina h2, html.duo #pagina h3 { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; color: #26262e; }
html.duo #pagina .knop { background: var(--nacht); color: var(--papier); border-radius: 0; }
html.duo #pagina .knop:hover { background: #26398a; }
html.duo #pagina .pakket, html.duo #pagina .stap, html.duo #pagina form, html.duo #pagina .model { border-radius: 0; }
html.duo .modelknoppen button[aria-pressed="true"], html.duo .modelknoppen .actief { background: var(--nacht); color: var(--papier); }
html.duo .knop { border-radius: 0; }

#kamer .kl-papier { pointer-events: none; }
#kamer .kl-papier .papiervlak { position: absolute; inset: 0; width: 100%; height: 100%; }
#kamer .kl-papier .papiervlak polygon { fill: #f6e2c2; }
#kamer .kl-papier .papierschets { position: absolute; left: 0; top: 0; transform-origin: 0 0; mix-blend-mode: multiply; }
#kamer .kamerwacht { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 8px 16px; background: rgba(236, 227, 207, .92); border: 1px solid rgba(27, 42, 107, .35); font-size: 18px; color: var(--nacht); opacity: 0; transition: opacity .4s; }