/* SESAKE (sesake.com): kleuren en letters uit de one sheet: bijna zwart, goud, een dunne Bodoni voor koppen. */
:root {
  --bg: #0b0d0a;
  --panel: #14160f;
  --line: #2a2b22;
  --ink: #f1ece2;
  --muted: #a7a08f;
  --gold: #c8a96b;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --logo: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --edge: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

.nav { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; gap: clamp(14px, 3vw, 32px); padding: 16px var(--edge); background: linear-gradient(180deg, rgba(11,13,10,.85), rgba(11,13,10,0)); }
.nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .2em; font: 500 12px/1 var(--text); }
.nav a:hover { color: var(--gold); }

/* Kop: groot logo links, foto rechts in een smalle lijst met gouden streepjes (zoals de one sheet). Telefoon: foto vol. */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px; padding: 80px var(--edge) 48px; }
.logo { margin: 0; font: italic 900 clamp(64px, 13vw, 200px)/.85 var(--logo); letter-spacing: -.05em; color: var(--gold); transform: skewX(-4deg); }
.role { margin: 18px 0 0; text-transform: uppercase; letter-spacing: .28em; font: 400 clamp(12px, 1.4vw, 16px)/1 var(--text); }
.role span { color: var(--gold); }
.hero-photo { margin: 0; position: relative; justify-self: center; width: min(100%, 460px); }
.hero-photo img { width: 100%; height: auto; }
.hero-photo::before, .hero-photo::after { content: ''; position: absolute; top: 12%; bottom: 12%; width: 1px; background: repeating-linear-gradient(180deg, var(--gold) 0 22%, transparent 22% 30%); }
.hero-photo::before { left: -18px; }
.hero-photo::after { right: -18px; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 0; min-height: 0; gap: 0; }
  .hero-photo { order: -1; width: 100%; }
  .hero-photo::before, .hero-photo::after { display: none; }
  .hero-text { padding: 24px var(--edge) 8px; margin-top: -120px; position: relative; z-index: 1; }
  .logo { font-size: 22vw; }
  .hero-photo img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
}

.section { max-width: 1120px; margin: 0 auto; padding: clamp(56px, 9vw, 112px) var(--edge) 0; }
.serif { margin: 0 0 28px; font: 400 clamp(44px, 8vw, 96px)/1 var(--serif); text-transform: uppercase; color: var(--gold); letter-spacing: -.01em; }
.kicker { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .3em; font: 500 12px/1.4 var(--text); }
.serif-name { margin: 0 0 6px; font: italic 400 clamp(30px, 4vw, 44px)/1.1 var(--serif); color: var(--gold); text-transform: uppercase; }

.who-grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.who-grid img { width: 100%; height: auto; }
.who-grid p:not(.kicker):not(.serif-name) { margin: 0 0 16px; font-style: italic; color: #dcd6c8; letter-spacing: .02em; }
@media (max-width: 760px) { .who-grid { grid-template-columns: 1fr; } .who-grid img { max-width: 320px; } }

.passion { position: relative; max-width: 1120px; margin: clamp(56px, 9vw, 112px) auto 0; padding: 0 var(--edge); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
.passion img { width: 100%; height: auto; }
.passion-title { margin: 0 0 20px; font: 400 clamp(52px, 8vw, 104px)/.95 var(--serif); }
.passion-title em { font-style: italic; padding-left: 1.2em; }
.passion-text p:last-child { font-style: italic; color: #dcd6c8; max-width: 34ch; }
@media (max-width: 760px) { .passion { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 20px; min-height: 150px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s; }
.card:hover { border-color: var(--gold); }
.card-k { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font: 700 11px/1.2 var(--text); }
.card-t { margin-top: auto; font: italic 400 26px/1.1 var(--serif); }
.card-s { color: var(--muted); font-size: 13px; }

.hausu .two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.hausu .two p { margin: 0 0 24px; font-style: italic; color: #dcd6c8; }
.hausu b { color: var(--ink); font-style: normal; letter-spacing: .06em; }
@media (max-width: 760px) { .hausu .two { grid-template-columns: 1fr; gap: 0; } }

.btn { display: inline-block; padding: 14px 22px; border: 1px solid var(--gold); color: var(--gold); background: none; text-decoration: none; text-transform: uppercase; letter-spacing: .18em; font: 700 12px/1 var(--text); cursor: pointer; }
.btn:hover { background: var(--gold); color: var(--bg); }
.btn.big { font-size: clamp(13px, 2.4vw, 18px); letter-spacing: .08em; text-transform: none; padding: 18px 26px; overflow-wrap: anywhere; }

.shows { list-style: none; margin: 0; padding: 0; }
.show { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.show-date { min-width: 76px; font: italic 400 24px/1 var(--serif); color: var(--gold); }
.show-date small { display: block; margin-top: 4px; font: 400 12px/1 var(--text); color: var(--muted); letter-spacing: .1em; }
.show-where { flex: 1; min-width: 0; }
.show-city { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.show-venue { color: var(--muted); font-size: 14px; }
.shows-empty { padding: 16px 0; color: var(--muted); font-style: italic; }
.more { margin-top: 20px; }

.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.refs figure { margin: 0; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--panel); }
.refs img { width: 100%; height: 100%; object-fit: cover; }
.refs figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(11,13,10,.9)); text-transform: uppercase; letter-spacing: .14em; font: 700 13px/1.3 var(--text); }
.refs small { display: block; font-weight: 400; color: var(--muted); letter-spacing: .08em; }
@media (max-width: 760px) { .refs { grid-template-columns: 1fr 1fr; } .refs figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }
.also { color: var(--muted); font-style: italic; }
.also b { color: var(--ink); font-style: normal; letter-spacing: .06em; }

.booking { margin-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); border-top: 1px solid var(--line); }
.booking p { color: #dcd6c8; font-style: italic; max-width: 46ch; }

.footer { padding: 32px var(--edge) 40px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13px; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-bottom: 16px; }
.socials a { text-decoration: none; text-transform: uppercase; letter-spacing: .16em; font: 500 12px/1 var(--text); color: var(--ink); }
.socials a:hover { color: var(--gold); }