/* Gerda Douma - centrale vormgeving */
:root{
  --ink:#3a2f24; --muted:#76685a; --accent:#8b4f24; --accent-dark:#613416;
  --paper:rgba(249,246,240,.94); --line:#cdbfae; --shadow:0 14px 38px rgba(44,35,27,.12);
  --radius:14px; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#efe9e0 url('../start/achtergrond.jpg') center top/cover fixed no-repeat;
  font:16px/1.65 Georgia, 'Times New Roman', serif;
}
a{color:var(--accent-dark); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%; height:auto}
.site-shell{min-height:100vh}
.site-header{background:#d5c4ad; box-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand{display:block; max-width:2062px; margin:0 auto; overflow:hidden}
.brand-lockup{display:grid; grid-template-columns:142px minmax(0,1fr); height:180px; background:#d5c4ad}
.brand-lockup img{display:block; min-width:0}
.brand-portrait{width:142px; height:180px; object-fit:cover; object-position:center}
.brand-title{width:100%; height:180px; object-fit:cover; object-position:left center}
.site-nav{background:rgba(239,233,224,.97); border-top:1px solid rgba(92,72,52,.1); border-bottom:1px solid rgba(92,72,52,.16)}
.nav-inner{max-width:var(--max); margin:0 auto; padding:.4rem 1rem; display:flex; gap:.2rem; align-items:center; flex-wrap:wrap}
.site-nav a,.nav-dropdown summary{font-family:Tahoma,Arial,sans-serif; color:#554433; font-size:.92rem; font-weight:700; text-decoration:none; padding:.65rem .7rem; border-radius:8px; cursor:pointer; list-style:none}
.site-nav a:hover,.nav-dropdown summary:hover,.site-nav a[aria-current="page"]{background:#dfd1c0; color:#2f261f}
.nav-dropdown{position:relative}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown summary::after{content:' ▾'; font-size:.75em}
.nav-dropdown[open] summary{background:#dfd1c0}
.nav-dropdown-menu{position:absolute; z-index:20; top:100%; left:0; min-width:210px; padding:.4rem; background:#f4eee6; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.nav-dropdown-menu a{display:block; white-space:nowrap}
.page-wrap{max-width:var(--max); margin:2rem auto; padding:0 1rem}
.page-card{background:var(--paper); border:1px solid rgba(132,108,83,.18); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.25rem,3vw,2.4rem)}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif; font-weight:500; line-height:1.2; color:#34291f}
h1{font-size:clamp(2rem,4vw,3.4rem); margin:.1rem 0 1.4rem}
h2{font-size:1.55rem; margin:2rem 0 .8rem}
h3{font-size:1.25rem}
p{max-width:76ch}
hr{border:0; border-top:1px solid var(--line); margin:1.6rem 0}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:1rem; align-items:start}
.gallery-item{display:flex; flex-direction:column; gap:.55rem; color:var(--ink); text-decoration:none; background:rgba(255,255,255,.48); border:1px solid rgba(111,89,67,.18); border-radius:10px; padding:.55rem; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gallery-item:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(49,39,30,.12); border-color:#aa9278}
.gallery-item img{display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#f4efe8; border-radius:6px}
.gallery-item span{font-family:Tahoma,Arial,sans-serif; font-size:.78rem; line-height:1.35; text-align:center}
.gallery-note{margin-top:1.4rem; color:var(--muted); font-size:.9rem}
.artwork{display:grid; gap:1.4rem}
.artwork-meta{font-size:1.05rem; color:#4d3e31}
.artwork-image-wrap{max-width:min(900px,100%)}
.artwork-image{display:block; max-height:75vh; width:auto; max-width:100%; object-fit:contain; border-radius:8px; box-shadow:0 10px 28px rgba(43,34,26,.14); background:#f5f0e9}
.artwork-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.button{display:inline-block; font-family:Tahoma,Arial,sans-serif; font-size:.9rem; font-weight:700; text-decoration:none; color:#fff; background:#6f5137; border:0; border-radius:8px; padding:.65rem .9rem; cursor:pointer}
.button:hover{background:#523b28;color:#fff}
.button.secondary{background:#e5d8c9;color:#4e3b2b}.button.secondary:hover{background:#d8c7b4;color:#32251c}
.content img{border-radius:6px}.content a>img{transition:opacity .16s ease}.content a:hover>img{opacity:.86}
.content table{max-width:100%; border-collapse:collapse}.content td,.content th{vertical-align:top}
.content video,.content audio{max-width:100%}
.site-footer{max-width:var(--max); margin:2rem auto 0; padding:1.5rem 1rem 2.5rem; color:#6e6256; font:13px/1.5 Tahoma,Arial,sans-serif}
.maintenance-note{padding:1rem 1.1rem; border-left:4px solid #9a7757; background:#f1e8dd; border-radius:6px}
.lightbox{position:fixed; inset:0; z-index:999; display:none; align-items:center; justify-content:center; padding:2rem; background:rgba(20,16,13,.9)}
.lightbox.open{display:flex}.lightbox img{max-width:94vw; max-height:90vh; object-fit:contain; box-shadow:0 20px 70px #000}
.lightbox button{position:absolute; top:1rem; right:1rem; width:44px; height:44px; border:0; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; background:#fff; color:#222}
@media(max-width:720px){
  body{background-attachment:scroll}.brand-lockup{grid-template-columns:90px minmax(0,1fr);height:112px}.brand-portrait{width:90px;height:112px}.brand-title{height:112px}.page-wrap{margin:1rem auto}.page-card{border-radius:10px}
  .nav-inner{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem}.site-nav a,.nav-dropdown summary{text-align:center;padding:.7rem .35rem}
  .nav-dropdown{position:static}.nav-dropdown-menu{position:static; width:100%; grid-column:1/-1; box-shadow:none; margin-top:.25rem}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){.gallery-grid{grid-template-columns:1fr 1fr}.gallery-item span{font-size:.74rem}}

/* Verkocht-markering: de rode stip uit de oorspronkelijke website. */
.artwork-page.sold h1::before,
.gallery-item.sold > span::before,
.sold-legend-dot{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:#e00000;flex:0 0 auto}
.artwork-page.sold h1{display:flex;align-items:baseline;gap:.55rem}
.gallery-item.sold > span{display:flex;align-items:baseline;justify-content:center;gap:.4rem}
.gallery-item.sold > span::before{margin:0}
.sold-legend{display:flex;align-items:center;gap:.45rem;margin:-.3rem 0 1.15rem;color:var(--muted);font-size:.84rem}
.sold-legend-dot{width:.58rem;height:.58rem}