/* Concept 2: de-lijst. Opbouw naar Balthazar (80 Spring Street, SoHo). */
:root {
  --ivoor: #F6F0E2;
  --goud: #9C7F45;
  --sepia: #34281A;
  --ossenbloed: #6E2226;
  --luifel: #C4363A;
  --wand: #EFEDE8;
  --kop: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --tekst: "Libre Caslon Text", Georgia, serif;
  --rustig: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--sepia); font: 400 17px/1.65 var(--tekst);
  background: var(--ivoor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--luifel); outline-offset: 3px; }
.check { font: 600 12px/1.4 system-ui, sans-serif; background: #F1DFB0; color: #5A4513; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }

/* woordmerk in een boog, boven de lijst */
.merk { text-align: center; padding: 26px 20px 0; }
.merk svg { width: min(620px, 94vw); height: auto; }
.merk p { margin: -6px 0 18px; font-style: italic; }

/* de lijst om de hele pagina */
.lijst {
  width: min(1240px, calc(100% - 32px)); margin: 0 auto;
  border: 30px solid transparent; border-image: url(../media/ornament-lijst.svg) 30 round;
  padding: 28px 26px 34px; background: rgba(255, 253, 246, .6);
}
.binnenkant { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; }

/* linkerkolom in een eigen kader */
.kolom {
  position: sticky; top: 24px; text-align: center; padding: 26px 18px 22px;
  border: 1px solid var(--goud); outline: 1px solid var(--goud); outline-offset: -6px; background: #FBF6EA;
}
.kolom em { display: block; font-size: 15px; color: #6B5A43; }
.kolom .nummer { display: block; font: 800 34px/1.05 var(--kop); color: var(--ossenbloed); text-decoration: none; margin: 4px 0 2px; letter-spacing: .01em; }
.sier { display: block; width: 72px; height: 10px; margin: 16px auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M0 5 H28 M44 5 H72' stroke='%239C7F45' stroke-width='1'/%3E%3Ccircle cx='36' cy='5' r='3' fill='%239C7F45'/%3E%3Ccircle cx='30' cy='5' r='1.2' fill='%239C7F45'/%3E%3Ccircle cx='42' cy='5' r='1.2' fill='%239C7F45'/%3E%3C/svg%3E") center / contain no-repeat; }
.kolom address { font-style: normal; font-size: 16px; line-height: 1.5; }
.tijden { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: 14px; text-align: left; font-variant-numeric: tabular-nums; }
.tijden dt { font-variant: small-caps; letter-spacing: .03em; }
.tijden dd { margin: 0; text-align: right; }
.tijden .vandaag { color: var(--ossenbloed); font-weight: 700; }
.menu { list-style: none; padding: 0; margin: 0; font-variant: small-caps; letter-spacing: .06em; font-size: 16px; }
.menu li + li { border-top: 1px dotted var(--goud); }
.menu a { display: block; padding: 6px 0; text-decoration: none; }
.menu a:hover { color: var(--luifel); }
.belknop {
  display: block; margin: 18px auto 8px; padding: 12px 10px; text-decoration: none; text-align: center;
  font: 700 20px/1 var(--kop); letter-spacing: .06em; color: #FBF6EA; background: var(--luifel);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  transition: background .3s var(--rustig);
}
.belknop:hover, .belknop:focus-visible { background: var(--ossenbloed); }
.belknop:focus-visible { outline: none; box-shadow: none; filter: drop-shadow(0 0 0 var(--sepia)) drop-shadow(0 0 2px var(--sepia)); }
.kolom small { font-size: 14px; }

/* hero: stap in de lijst */
.stap { position: relative; height: 260vh; }
.stap__wand {
  position: sticky; top: 24px; height: calc(100vh - 48px); min-height: 520px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #FAF9F6 0%, var(--wand) 60%, #E2DED5 100%);
  box-shadow: inset 0 0 0 1px rgba(156, 127, 69, .5), inset 0 20px 60px -30px rgba(52, 40, 26, .35);
  display: grid; place-items: center;
}
.schilderij { width: min(54%, 600px); margin-top: -7vh; transform-origin: 49% 45%; will-change: transform; }
.schilderij img { box-shadow: 0 24px 30px -14px rgba(52, 40, 26, .55), 0 2px 4px rgba(52, 40, 26, .2); }
.stap__onder { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-style: italic; font-size: 15px; transition: opacity .3s; }
.nu {
  position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; padding: 32px;
  background: linear-gradient(rgba(52, 40, 26, .72), rgba(52, 40, 26, .82)), url(../media/schilderij-vergulde-hand.webp) 50% 46% / 330% auto;
  color: #FBF6EA; text-align: center;
}
.nu h1 { font: 800 clamp(44px, 7vw, 96px)/.92 var(--kop); margin: 0 0 16px; letter-spacing: .01em; }
.nu p { max-width: 520px; margin: 0 auto 10px; }
.ai-label {
  display: inline-block; margin-top: 14px; padding: 10px 14px; border: 1px dashed rgba(251, 246, 234, .7);
  font: 14px/1.45 system-ui, sans-serif; max-width: 460px;
}
.ai-label strong { display: block; color: #F1DFB0; }

/* tekst onder de hero (Balthazar: smalle grotesk + twee alinea's) */
.intro { padding: 40px 6px 10px; max-width: 760px; }
h2 { font: 800 clamp(32px, 4vw, 48px)/1 var(--kop); color: var(--ossenbloed); letter-spacing: .01em; margin: 0 0 16px; }
.intro p { margin: 0 0 14px; }

/* prijzen als menukaart + rekenhulp */
.prijzen { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; padding: 34px 0 20px; align-items: start; }
.menukaart { padding: 30px 32px 24px; border: 1px solid var(--goud); outline: 1px solid var(--goud); outline-offset: -7px; background: #FFFCF4; }
.regel { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.regel span:first-child { white-space: nowrap; }
.regel i { flex: 1; border-bottom: 2px dotted rgba(156, 127, 69, .7); transform: translateY(-5px); }
.regel b { font: 700 22px/1 var(--kop); color: var(--ossenbloed); }
.menukaart small, .reken small { font-size: 14px; color: #6B5A43; }
.reken { padding: 26px 26px 22px; background: var(--ossenbloed); color: #FBF6EA; }
.reken h3 { font: 800 28px/1 var(--kop); margin: 0 0 14px; letter-spacing: .02em; }
.teller { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(251, 246, 234, .2); }
.teller__knoppen { display: flex; align-items: center; gap: 10px; }
.teller button {
  width: 36px; height: 36px; border: 1px solid rgba(251, 246, 234, .7); background: transparent; color: inherit;
  font: 700 20px/1 var(--kop); cursor: pointer;
}
.teller button:hover { background: rgba(251, 246, 234, .12); }
.teller button:focus-visible { outline: 2px solid #F1DFB0; outline-offset: 2px; }
.teller output { min-width: 1.6em; text-align: center; font: 700 22px/1 var(--kop); }
.totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid rgba(251, 246, 234, .6); }
.totaal output { font: 800 44px/1 var(--kop); }
.reken small { color: #E9DCC2; }

/* de wand: salonophanging */
.wand { padding: 50px 0 10px; }
.wand__intro { max-width: 620px; margin-bottom: 26px; }
.ophanging { columns: 3 240px; column-gap: 26px; background: var(--wand); padding: 34px 28px 12px; box-shadow: inset 0 0 0 1px rgba(156, 127, 69, .45); }
.ophanging > * { break-inside: avoid; margin: 0 0 26px; }
.ophanging .inspring { margin-left: 22px; }
.ophanging .smal { margin-right: 30px; }
.lijstje { background: #FFFDF7; padding: 20px 20px 16px; box-shadow: 0 12px 20px -12px rgba(52, 40, 26, .55); }
.lijstje blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.lijstje cite { display: block; margin-top: 8px; font-size: 14px; font-style: italic; color: #6B5A43; }
.lijstje--goud { border: 18px solid transparent; border-image: url(../media/ornament-lijst.svg) 30 round; }
.lijstje--zwart { border: 12px solid #1C1A1B; outline: 1px solid #5C5048; outline-offset: -16px; }
.lijstje--hout { border: 14px solid #4A3426; box-shadow: inset 0 0 0 3px #6B4E38, 0 12px 20px -12px rgba(52, 40, 26, .55); }
.lijstje--ovaal { border: 8px double var(--goud); border-radius: 50%; text-align: center; display: grid; place-items: center; padding: 30px 34px; }
.lijstje--foto { padding: 0; border: 14px solid #4A3426; }
.lijstje--foto img { width: 100%; height: 100%; object-fit: cover; }
.lijstje--foto figcaption { background: #4A3426; color: #EDE3CF; font-size: 13px; padding: 6px 2px 0; }
.lijstje--ai { border: 12px solid #1C1A1B; background: repeating-linear-gradient(135deg, #EDE6D6 0 12px, #E4DCC9 12px 24px); font: 14px/1.45 system-ui, sans-serif; color: #4A2A26; display: grid; align-content: end; }
.lijstje--ai strong { color: var(--ossenbloed); }
.groot blockquote { font-size: 21px; line-height: 1.4; }

/* route + voet binnen de lijst */
.route { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 48px 0 6px; align-items: center; }
.route img { border: 10px solid #FFFCF4; outline: 1px solid var(--goud); box-shadow: 0 16px 26px -16px rgba(52, 40, 26, .6); }
.onder { width: min(1240px, calc(100% - 32px)); margin: 18px auto 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; font-variant: small-caps; letter-spacing: .08em; color: var(--goud); font-size: 15px; }

/* mobiel: belbalk onderaan in plaats van de kolom */
.belbalk { display: none; }
@media (max-width: 900px) {
  .binnenkant { grid-template-columns: 1fr; }
  .kolom { position: static; order: 2; }
  .lijst { border-width: 18px; padding: 16px 12px 26px; }
  .prijzen, .route { grid-template-columns: 1fr; }
  .stap { height: 220vh; }
  .stap__wand { top: 0; height: 80vh; min-height: 460px; }
  .schilderij { width: 88%; margin-top: -4vh; }
  .ophanging { padding: 20px 14px 4px; }
  .ophanging .inspring, .ophanging .smal { margin-left: 0; margin-right: 0; }
  .lijstje--ovaal { border-radius: 40% / 50%; }
  .belbalk {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30; justify-content: space-between; align-items: center;
    padding: 12px 18px; background: var(--luifel); color: #FBF6EA; text-decoration: none; font: 700 20px/1 var(--kop); letter-spacing: .04em;
    box-shadow: 0 10px 24px -10px rgba(52, 40, 26, .7);
  }
  body { padding-bottom: 76px; }
}
@media (max-width: 420px) {
  .menukaart { padding: 22px 16px 18px; }
  .regel span:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .stap { height: auto; }
  .stap__wand { position: relative; top: 0; height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px; }
  .schilderij { width: auto; transform: none !important; }
  .nu { position: relative; opacity: 1 !important; }
  .stap__onder { display: none; }
  .belknop { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .stap__wand { grid-template-columns: 1fr; }
}