/* Van Langen Art — Art Deco (strak) */
@font-face{font-family:"Poiret One";src:url(/fonts/poiret-one.woff2?v=20261102-1) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url(/fonts/josefin-sans.woff2?v=20261102-1) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fonts/cormorant-italic.woff2?v=20261102-1) format("woff2");font-style:italic;font-weight:300 700;font-display:swap}

:root{
  --green:#0a1a17;
  --brass:#cfab62;      /* lijnen, embleem */
  --brass-hi:#dcbd78;   /* titel */
  --ivory:#f0e8d6;      /* tekst */
  --m:clamp(14px,2.2vw,28px);  /* kader tot rand */
  --s:clamp(10px,1.3vw,16px);  /* trede in de hoeken */
  --w:1.5px;                   /* lijndikte kader */
  --u:8px;                     /* ritme */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--green);
  color:var(--ivory);
  font-family:"Josefin Sans",system-ui,sans-serif;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--brass);color:var(--green);padding:8px 14px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:1.5px solid var(--brass-hi);outline-offset:4px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr;
  background:radial-gradient(ellipse 90% 80% at 50% 45%,#0c1f1b 0%,var(--green) 60%,#081512 100%);
  padding:calc(var(--m) + var(--s) + 2*var(--u)) calc(var(--m) + 3*var(--u)) calc(var(--m) + 2*var(--s) + 4*var(--u));
}
.frame{position:absolute;inset:var(--m);pointer-events:none;z-index:0}
.frame::before,.frame::after{content:"";position:absolute;inset:0}
.frame::before{
  background:var(--brass);
  clip-path:polygon(
    0 calc(2*var(--s)), var(--s) calc(2*var(--s)), var(--s) var(--s), calc(2*var(--s)) var(--s), calc(2*var(--s)) 0,
    calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)),
    100% calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - 2*var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) calc(100% - var(--s)), calc(100% - 2*var(--s)) 100%,
    calc(2*var(--s)) 100%, calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s))
  );
}
.frame::after{
  background:var(--green) radial-gradient(ellipse 90% 80% at 50% 45%,#0c1f1b 0%,var(--green) 60%,#081512 100%);
  clip-path:polygon(
    var(--w) calc(2*var(--s) + var(--w)), calc(var(--s) + var(--w)) calc(2*var(--s) + var(--w)), calc(var(--s) + var(--w)) calc(var(--s) + var(--w)), calc(2*var(--s) + var(--w)) calc(var(--s) + var(--w)), calc(2*var(--s) + var(--w)) var(--w),
    calc(100% - 2*var(--s) - var(--w)) var(--w), calc(100% - 2*var(--s) - var(--w)) calc(var(--s) + var(--w)), calc(100% - var(--s) - var(--w)) calc(var(--s) + var(--w)), calc(100% - var(--s) - var(--w)) calc(2*var(--s) + var(--w)), calc(100% - var(--w)) calc(2*var(--s) + var(--w)),
    calc(100% - var(--w)) calc(100% - 2*var(--s) - var(--w)), calc(100% - var(--s) - var(--w)) calc(100% - 2*var(--s) - var(--w)), calc(100% - var(--s) - var(--w)) calc(100% - var(--s) - var(--w)), calc(100% - 2*var(--s) - var(--w)) calc(100% - var(--s) - var(--w)), calc(100% - 2*var(--s) - var(--w)) calc(100% - var(--w)),
    calc(2*var(--s) + var(--w)) calc(100% - var(--w)), calc(2*var(--s) + var(--w)) calc(100% - var(--s) - var(--w)), calc(var(--s) + var(--w)) calc(100% - var(--s) - var(--w)), calc(var(--s) + var(--w)) calc(100% - 2*var(--s) - var(--w)), var(--w) calc(100% - 2*var(--s) - var(--w))
  );
}


.nav{position:relative;z-index:1;display:flex;justify-content:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.nav a{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:#d2bd8c;padding:8px 0 6px;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--brass-hi);border-bottom-color:var(--brass)}
.hero-in{position:relative;z-index:1;align-self:center;justify-self:center;text-align:center;display:flex;flex-direction:column;align-items:center;max-width:100%;padding-top:calc(3*var(--u))}

.crest{width:clamp(140px,13vw,190px);height:auto;color:var(--brass);margin-bottom:calc(4*var(--u))}
.kicker{display:flex;align-items:center;gap:calc(2*var(--u));font-size:clamp(13px,1vw,15px);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:calc(3*var(--u))}
.kicker span:nth-child(2){margin-right:-.32em}
.kline{display:block;width:clamp(24px,3vw,44px);height:1.5px;background:var(--brass);flex:none}

.brand{font-family:"Poiret One",serif;font-weight:400;text-transform:uppercase;line-height:1;display:flex;flex-direction:column;align-items:center;color:var(--brass-hi)}
.l1{font-size:clamp(2.4rem,8.6vw,7.8rem);letter-spacing:.13em;margin-right:-.13em;white-space:nowrap;-webkit-text-stroke:.025em currentColor;paint-order:stroke fill}
.l2{display:flex;align-items:center;gap:calc(3*var(--u));margin-top:calc(3*var(--u));font-size:clamp(1.6rem,2.8vw,2.6rem);letter-spacing:.6em}
.art{margin-right:-.6em;-webkit-text-stroke:.03em currentColor}
.rule{display:block;width:clamp(48px,7vw,112px);height:1.5px;background:var(--brass)}
.lead{margin-top:calc(5*var(--u));font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.4;max-width:24em;text-wrap:balance}

.cta{display:flex;gap:calc(2*var(--u));flex-wrap:wrap;justify-content:center;margin-top:calc(5*var(--u))}
.btn{
  --c:10px;display:inline-block;min-width:200px;text-align:center;
  font-size:14px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px 12px;background:var(--brass);color:var(--green);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transition:background .2s ease;
}
.btn:hover{background:var(--brass-hi)}
.btn-ghost{background:transparent;color:var(--brass-hi);box-shadow:inset 0 0 0 1.5px var(--brass);clip-path:none}
.btn-ghost:hover{background:rgba(207,171,98,.12)}

/* ---------- secties ---------- */
.sec{max-width:1120px;margin:0 auto;padding:calc(12*var(--u)) calc(3*var(--u)) 0;text-align:center}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:calc(3*var(--u))}
.orn span{display:block;width:56px;height:1.5px;background:var(--brass)}
.orn i{display:block;width:8px;height:8px;background:var(--brass);transform:rotate(45deg)}
h2{font-family:"Poiret One",serif;font-weight:400;font-size:clamp(2.1rem,4vw,3.2rem);letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase;color:var(--brass-hi);line-height:1.1;-webkit-text-stroke:.02em currentColor}
h3{font-weight:600;letter-spacing:.06em}
.intro{max-width:38em;margin:calc(3*var(--u)) auto 0;font-size:clamp(18px,1.4vw,20px);color:var(--ivory)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:calc(3*var(--u));max-width:720px;margin:calc(6*var(--u)) auto 0}
.card,.note,.expo-item{border:1.5px solid rgba(207,171,98,.7);padding:calc(4*var(--u)) calc(3*var(--u))}
.card h3{font-family:"Poiret One",serif;font-weight:400;font-size:2rem;letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase;color:var(--brass-hi);-webkit-text-stroke:.02em currentColor}
.card p{margin-top:var(--u)}
.note{max-width:720px;margin:calc(3*var(--u)) auto 0}
.note h3,.expo-item h3{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-hi)}
.note p{margin-top:var(--u)}

.grp{margin:calc(7*var(--u)) 0 calc(3*var(--u));font-family:"Poiret One",serif;font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.1em;color:var(--brass-hi);-webkit-text-stroke:.02em currentColor}
.grp span{display:block;margin-top:6px;font-family:"Josefin Sans",sans-serif;font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#d2bd8c;-webkit-text-stroke:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(4*var(--u)) calc(3*var(--u));text-align:left;align-items:start}
.work{margin:0;display:flex;flex-direction:column}
/* identieke 4:5-tegel met passe-partout; het hele schilderij blijft zichtbaar */
.w-img{--pad:clamp(12px,1.6vw,20px);position:relative;display:block;aspect-ratio:4/5;border:1.5px solid rgba(207,171,98,.7);background:#10241f;box-shadow:inset 0 0 0 5px var(--green),inset 0 0 0 6px rgba(207,171,98,.28);transition:border-color .2s ease}
.w-img:hover{border-color:var(--brass-hi)}
.w-img img{position:absolute;top:var(--pad);left:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
figcaption{padding-top:14px}
.w-title{display:block;font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:20px;line-height:1.3;color:var(--ivory)}
.w-meta{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#d2bd8c}
.more{margin-top:calc(2*var(--u));font-size:18px}
.more a,.contact a{color:var(--brass-hi);text-decoration-thickness:1px;text-underline-offset:4px}

.expo{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3*var(--u));margin-top:calc(5*var(--u));text-align:center}
.expo-when{font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:21px;color:var(--ivory);margin-bottom:var(--u)}
.expo-item h3{margin-bottom:6px}
.expo-item.now{border-color:var(--brass-hi);box-shadow:inset 0 0 0 4px var(--green),inset 0 0 0 5.5px rgba(207,171,98,.7)}

.contact{list-style:none;display:flex;justify-content:center;gap:calc(6*var(--u));flex-wrap:wrap;margin-top:calc(5*var(--u))}
.contact li{display:flex;flex-direction:column;gap:6px}
.c-label{font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#d2bd8c}
.contact a{font-size:clamp(20px,1.8vw,24px)}

.fb{display:block;width:48px;height:48px;margin:calc(5*var(--u)) auto 0;color:var(--brass)}
.fb svg{display:block;width:100%;height:100%}
.fb-o{fill:transparent;stroke:currentColor;stroke-width:1.5;transition:fill .25s ease}
.fb-f{fill:currentColor;transition:fill .25s ease}
.fb:hover .fb-o,.fb:focus-visible .fb-o{fill:var(--brass)}
.fb:hover .fb-f,.fb:focus-visible .fb-f{fill:var(--green)}

.foot{
  display:flex;justify-content:center;align-items:center;gap:calc(2*var(--u));
  margin-top:calc(12*var(--u));padding:calc(4*var(--u)) calc(3*var(--u));
  border-top:1.5px solid rgba(207,171,98,.5);
  font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#d2bd8c;
}
.foot span:last-child{margin-right:-.28em}
.dot{width:5px;height:5px;background:var(--brass);transform:rotate(45deg)}

/* entree */
@media (prefers-reduced-motion:no-preference){
  .hero-in>*,.nav{opacity:0;transform:translateY(8px);animation:in 1s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-in>:nth-child(2){animation-delay:.12s}.hero-in>:nth-child(3){animation-delay:.24s}.hero-in>:nth-child(4){animation-delay:.38s}.hero-in>:nth-child(5){animation-delay:.5s}.nav{animation-delay:.6s}
  .hero-in>.brand,.hero-in>.lead{opacity:1} /* LCP-tekst niet onzichtbaar starten: alleen schuiven */
  .frame{opacity:0;animation:fade 1.2s ease forwards}
}
@keyframes in{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .expo{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  body{font-size:17px}
  .hero{padding:calc(var(--m) + var(--s) + var(--u)) calc(var(--m) + 2*var(--u)) calc(var(--m) + 2*var(--s) + 3*var(--u))}
  .nav{gap:14px 20px}.nav a{font-size:12px;letter-spacing:.2em}
  .l1{letter-spacing:.09em;margin-right:-.09em;font-size:clamp(2rem,10.6vw,3.2rem)}
  .l2{letter-spacing:.5em;gap:calc(2*var(--u))}.art{margin-right:-.5em}
  .kicker{letter-spacing:.2em;gap:12px;font-size:12px}.kicker span:nth-child(2){margin-right:-.2em}
  .lead{max-width:15em}
  .cta{flex-direction:column;align-items:stretch;width:100%;max-width:270px;gap:12px}
  .btn{min-width:0;padding:14px 16px 11px;letter-spacing:.2em;font-size:13px;white-space:nowrap}
  .sec{padding-top:calc(9*var(--u))}
  .duo{grid-template-columns:1fr 1fr;gap:calc(2*var(--u))}
  .card{padding:calc(3*var(--u)) calc(2*var(--u))}.card h3{font-size:1.6rem}
  .gallery{grid-template-columns:1fr 1fr;gap:calc(3*var(--u)) calc(2*var(--u))}
  .w-img{--pad:10px;box-shadow:inset 0 0 0 3px var(--green),inset 0 0 0 4px rgba(207,171,98,.28)}
  .w-title{font-size:17px}.w-meta{font-size:11px;letter-spacing:.08em}
  .contact{flex-direction:column;gap:calc(3*var(--u))}
  .foot{flex-direction:column;gap:var(--u);font-size:11px;letter-spacing:.22em}
  .foot span:last-child{margin-right:-.22em}
}
@media (max-height:640px) and (min-width:641px){.crest{width:110px;margin-bottom:calc(2*var(--u))}.lead{margin-top:calc(3*var(--u))}.cta{margin-top:calc(3*var(--u))}}

/* 404 */
.hero-404{grid-template-rows:1fr}
.h404{font-family:"Poiret One",serif;font-weight:400;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:.1em;margin-right:-.1em;text-transform:uppercase;color:var(--brass-hi);line-height:1.15;-webkit-text-stroke:.025em currentColor;text-wrap:balance}

/* smalle telefoons (iPhone SE, 320px) */
@media (max-width:380px){
  .nav{gap:10px 12px}.nav a{font-size:11px;letter-spacing:.12em}
  .kicker{letter-spacing:.14em}.kicker span:nth-child(2){margin-right:-.14em}
  .kline{display:none}
}

/* ---------- v7: meerdere pagina's ---------- */
.nav a[aria-current="page"]{color:var(--brass-hi);border-bottom-color:var(--brass)}
.phead{position:relative;padding:calc(var(--m) + var(--s) + 2*var(--u)) calc(var(--m) + 3*var(--u)) calc(var(--m) + var(--s) + 5*var(--u));background:radial-gradient(ellipse 90% 80% at 50% 45%,#0c1f1b 0%,var(--green) 60%,#081512 100%);text-align:center}
.phead .nav{margin-top:calc(2*var(--u))}
.mark{position:relative;z-index:1;display:inline-block;font-family:"Poiret One",serif;text-transform:uppercase;text-decoration:none;color:var(--brass-hi);font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.22em;margin-right:-.22em;-webkit-text-stroke:.02em currentColor}
.phead-in{position:relative;z-index:1;margin-top:calc(5*var(--u))}
.phead h1{font-family:"Poiret One",serif;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:.12em;margin-right:-.12em;text-transform:uppercase;color:var(--brass-hi);line-height:1.12;-webkit-text-stroke:.02em currentColor;text-wrap:balance}
.phead .lead{margin:calc(2*var(--u)) auto 0}
.crumbs{position:relative;z-index:1;margin-top:calc(3*var(--u));font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d2bd8c}
.crumbs a{color:#d2bd8c;text-underline-offset:3px}
.crumbs span[aria-hidden]{margin:0 8px;color:var(--brass)}
.sec-first{padding-top:calc(8*var(--u))}
.btnrow{display:flex;justify-content:center;gap:calc(2*var(--u));flex-wrap:wrap;margin-top:calc(5*var(--u))}
.expo-item p a{color:var(--brass-hi);text-underline-offset:4px}
.expo-src{margin-top:calc(3*var(--u));font-size:14px;color:#d2bd8c}
.expo-src a{color:inherit}

/* blogkaarten */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(3*var(--u));margin-top:calc(5*var(--u));text-align:left}
.posts.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.pcard{display:flex;flex-direction:column;border:1.5px solid rgba(207,171,98,.7);text-decoration:none;transition:border-color .2s ease}
.pcard:hover{border-color:var(--brass-hi)}
.pcard .w-img{border:0;border-bottom:1.5px solid rgba(207,171,98,.5);aspect-ratio:4/3}
.pcard-b{padding:calc(2.5*var(--u)) calc(2.5*var(--u)) calc(3*var(--u))}
.pcard time,.post-meta{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d2bd8c}
.pcard h2,.pcard h3{text-transform:none;margin-right:0;-webkit-text-stroke:0;margin-top:var(--u);font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:600;font-size:23px;line-height:1.25;letter-spacing:0;color:var(--ivory)}
.pcard p{margin-top:var(--u);font-size:16px;line-height:1.55}
.pcard .go{margin-top:calc(1.5*var(--u));display:block;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-hi)}

/* artikel */
.post{max-width:720px;margin:0 auto;padding:calc(8*var(--u)) calc(3*var(--u)) 0;text-align:left}
.post>p,.post li{font-size:clamp(17px,1.3vw,19px)}
.post>p+p{margin-top:calc(2*var(--u))}
.post h2{font-size:clamp(1.6rem,2.8vw,2.1rem);letter-spacing:.1em;margin:calc(6*var(--u)) 0 calc(2*var(--u));text-align:left;margin-right:0}
.post ul{margin:calc(2*var(--u)) 0 0 1.2em}
.post li+li{margin-top:var(--u)}
.post a{color:var(--brass-hi);text-decoration-thickness:1px;text-underline-offset:4px}
.post .gallery{grid-template-columns:repeat(2,1fr);margin:calc(4*var(--u)) 0}
.post .note{margin:calc(5*var(--u)) 0 0;text-align:center}
.post .note .btn{margin-top:calc(2*var(--u))}
.post-foot{margin-top:calc(6*var(--u));padding-top:calc(3*var(--u));border-top:1.5px solid rgba(207,171,98,.35);font-size:15px;color:#d2bd8c}
.post-foot a{color:var(--brass-hi)}
.post-meta{margin-top:calc(2*var(--u))}
.en{margin-top:calc(3*var(--u));font-family:"Cormorant",Georgia,serif;font-style:italic;font-size:20px;color:#d2bd8c}
.quote{max-width:34em;margin:calc(5*var(--u)) auto 0;font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.45}
.quote cite{display:block;margin-top:var(--u);font-family:"Josefin Sans",sans-serif;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d2bd8c}
.foot a{color:inherit;text-decoration:none}
.foot nav{display:flex;gap:calc(2*var(--u));flex-wrap:wrap;justify-content:center}
.foot nav a:hover{color:var(--brass-hi)}

@media (max-width:860px){
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .phead{padding:calc(var(--m) + var(--s) + var(--u)) calc(var(--m) + 2*var(--u)) calc(var(--m) + var(--s) + 4*var(--u))}
  .phead-in{margin-top:calc(4*var(--u))}
  .posts,.posts.two{grid-template-columns:1fr}
  .post{padding-top:calc(6*var(--u))}
  .btnrow{flex-direction:column;align-items:center}
  .btnrow .btn{width:100%;max-width:270px}
  .foot nav{gap:var(--u) calc(2*var(--u))}
}
@media (prefers-reduced-motion:no-preference){
  .phead .nav{opacity:1;transform:none;animation:none}
}
.grp{text-transform:none;margin-right:0}
.card h2.h-card{font-size:2rem;letter-spacing:.14em;margin-right:-.14em}
.card p a{color:var(--brass-hi);text-underline-offset:4px}
.note p a{color:var(--brass-hi);text-underline-offset:4px}
.w-price{display:block;margin-top:6px;font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--brass-hi)}
.btn-sm{min-width:0;margin-top:12px;padding:10px 14px 8px;font-size:12px;letter-spacing:.16em}
@media (max-width:640px){.card h2.h-card{font-size:1.6rem}.btn-sm{font-size:11px;letter-spacing:.1em;padding:9px 10px 7px;white-space:normal}}
.w-artist{display:block;margin-top:2px;font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ivory)}
.w-note{display:inline-block;margin-top:8px;padding:4px 8px 2px;border:1px solid rgba(207,171,98,.7);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-hi)}
.w-desc{display:block;margin-top:6px;font-size:15px;line-height:1.5}
.work figcaption .btn-sm{display:block;width:max-content;max-width:100%}

/* te koop */
.tk-list{list-style:none;padding:0}
.tk{position:relative;display:flex}
.tk[hidden]{display:none}
.w-fill{--pad:0px}
.w-fill img{object-fit:cover;filter:none}
.tk.is-new .w-img{border-color:var(--brass-hi);box-shadow:inset 0 0 0 4px var(--green),inset 0 0 0 5.5px var(--brass-hi)}
.tk.is-new .w-fill{--pad:7px}
.badge{position:absolute;z-index:2;top:-10px;left:50%;transform:translateX(-50%);padding:5px 12px 3px;background:var(--brass);color:var(--green);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
.tk-tools{max-width:900px;margin:calc(5*var(--u)) auto calc(5*var(--u));display:flex;flex-direction:column;gap:calc(2*var(--u))}
.tk-tools[hidden]{display:none}
.tk-q{width:100%;padding:14px 16px 12px;background:#10241f;border:1.5px solid rgba(207,171,98,.7);color:var(--ivory);font:inherit;font-size:17px}
.tk-q::placeholder{color:#a99b78}
.tk-q:focus{outline:1.5px solid var(--brass-hi);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{font:inherit;font-size:13px;font-weight:500;letter-spacing:.08em;padding:9px 14px 7px;background:transparent;color:#d2bd8c;border:1.5px solid rgba(207,171,98,.55);cursor:pointer}
.chip span{color:#a99b78;margin-left:4px}
.chip:hover{border-color:var(--brass-hi);color:var(--brass-hi)}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--green);border-color:var(--brass)}
.chip[aria-pressed="true"] span{color:var(--green)}
.tk-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:#d2bd8c}
.tk-n{letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:600}
.tk-sortl{display:flex;align-items:center;gap:10px}
.tk-sortl span{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tk-sortl select{font:inherit;font-size:15px;padding:8px 10px;background:#10241f;color:var(--ivory);border:1.5px solid rgba(207,171,98,.7)}
.linkbtn{font:inherit;background:none;border:0;color:var(--brass-hi);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sec-tk .w-desc{font-size:15px}
@media (max-width:640px){
  .chip{font-size:12px;padding:8px 10px 6px;letter-spacing:.04em}
  .sec-tk .w-desc{font-size:14px}
  .badge{font-size:10px;letter-spacing:.18em}
}
.tk-sec{margin-top:calc(7*var(--u))}
.tk-sec[hidden]{display:none}
.tk-sec .grp{margin-top:0}
.tk-intro{max-width:40em;margin:0 auto calc(4*var(--u));font-size:17px;color:var(--ivory)}
.tk-info{max-width:40em;margin:calc(3*var(--u)) auto 0;font-size:15px;color:#d2bd8c}
.tk-nav{margin-top:calc(5*var(--u))}
a.chip{text-decoration:none;display:inline-block}
.tk-tools{margin-top:calc(3*var(--u))}
.w-sale{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi);text-underline-offset:4px}
.w-title a{color:inherit;text-decoration:none}
.w-title a:hover{text-decoration:underline;text-underline-offset:4px}
.post.item{max-width:1000px;display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:calc(5*var(--u));align-items:start}
.post.item .post-foot{grid-column:1/-1}
.item-img .work{position:relative}
.item-txt>p{font-size:clamp(17px,1.3vw,19px)}
.item-txt>p+p{margin-top:calc(2*var(--u))}
.item-txt .tk-info{margin:calc(3*var(--u)) 0 0}
.item-txt .w-note{margin:0 0 calc(2*var(--u))}
.facts{margin-top:calc(3*var(--u));border-top:1.5px solid rgba(207,171,98,.35)}
.facts div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid rgba(207,171,98,.25)}
.facts dt{flex:0 0 7.5em;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#d2bd8c;padding-top:3px}
.facts dd{font-size:17px}
.btnrow.left{justify-content:flex-start}
.is-new-frame{border-color:var(--brass-hi)!important;--pad:7px!important;box-shadow:inset 0 0 0 4px var(--green),inset 0 0 0 5.5px var(--brass-hi)!important}
@media (max-width:760px){.post.item{grid-template-columns:1fr}.btnrow.left{justify-content:center}}
.phead h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:640px){.phead h1{font-size:clamp(1.6rem,8vw,2.4rem);letter-spacing:.06em;margin-right:-.06em}}
.post a.btn{color:var(--green);text-decoration:none}.post a.btn-ghost{color:var(--brass-hi)}
@media (max-width:640px){.phead h1{font-size:clamp(1.35rem,6vw,2.2rem);letter-spacing:.03em;margin-right:-.03em;overflow-wrap:normal}}
.w-seller{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#a99b78}
@media (max-width:640px){.tk-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tk figcaption{overflow-wrap:anywhere}}
@media (max-width:380px){.tk-list{column-gap:12px}.tk .btn-sm{width:auto}}
.tk-sortl[hidden]{display:none}
/* logo A (2-11) op de home-hero */
.logo-h1{margin:0 0 calc(2*var(--u));line-height:0}
.hero-logo{display:block;width:auto;height:min(54vh,460px);height:min(54svh,460px);max-width:100%;aspect-ratio:4/5}
.hero-in>.logo-h1{opacity:1;transform:none;animation:none}
@media (max-width:640px){.hero-logo{height:auto;width:min(68vw,300px)}}
.tk,.tk .work,.tk figcaption{min-width:0}
/* SC 2-11: tussenkoppen exposities/contact als h2 (koppenvolgorde), zelfde opmaak als de oude h3 */
h2.h-sub{font:inherit;font-weight:600;font-size:15px;line-height:inherit;letter-spacing:.24em;margin-right:0;text-transform:uppercase;color:var(--brass-hi);-webkit-text-stroke:0}
.expo-item h2.h-sub{margin-bottom:6px}