/* Joey de Boer — pagina-opmaak. Tokens en componenten komen uit joey-de-boer-stylesheet.css. */

/* Donkere sectie ("Studio avond") binnen een lichte pagina */
.theme-dark {
  color-scheme: dark;
  --paper: #161513; --paper-raised: #201e1b; --paper-sunk: #0f0e0d; --hairline: #3a3631;
  --ink: #eee8dd; --ink-muted: #aaa196; --cobalt: #93a0f2; --on-cobalt: #161513; --cobalt-soft: #1e2447;
  --sheet-green: #9fbfa6; --sheet-green-soft: #1b2a20; --stamp-red: #ec8175; --stamp-red-soft: #3a1a17; --kraft: #c9ab86;
  --shadow-sheet: 0 1px 0 rgba(0,0,0,0.4), 0 14px 30px -18px rgba(0,0,0,0.8);
  --link: var(--cobalt);
  background: var(--paper); color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { overflow-x: clip; }
.hero { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
em { font-style: italic; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-12); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* Reveal: zichtbaar in rust; JS voegt .is-armed toe voor de animatie */
.js .reveal.is-armed { opacity: 0; transform: translateY(18px); }
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Fine-line tekenen */
.draw { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; color: var(--sheet-green); overflow: visible; }
.draw.red { color: var(--stamp-red); }
.js .draw.is-armed { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.is-drawn { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1); }

/* HEADER */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-color: var(--hairline); }
.brand { font: 400 26px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; }
.site-nav { display: flex; gap: var(--space-8); }
.site-nav a { font: 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; position: relative; padding-block: 4px; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.menu-btn { display: none; font: 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--ink); color: var(--ink); padding: 10px 14px; cursor: pointer; }
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--paper); padding: 120px var(--space-6) var(--space-12); display: grid; align-content: start; gap: var(--space-8); }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; gap: var(--space-4); }
.mobile-menu a { font: 400 48px/1.05 var(--font-display); color: var(--ink); text-decoration: none; }

/* HERO */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-12); align-items: end; max-width: var(--container); margin-inline: auto; padding: var(--space-16) var(--space-12) var(--space-24); }
.hero-eyebrow { margin-bottom: var(--space-8); }
.hero-title { font-family: var(--font-display); font-size: clamp(76px, 13.5vw, 212px); line-height: .86; letter-spacing: -.035em; color: var(--ink); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .word { display: inline-block; }
.js .hero-title .word { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.js .hero-title .line:nth-child(2) .word { transition-delay: .12s; }
.hero-title.is-in .word { transform: none; }
.hero-title em { color: var(--cobalt); letter-spacing: -.02em; }
.hero-note { margin-top: var(--space-8); padding-left: var(--space-12); position: relative; color: var(--ink-muted); }
.hero-note::before { content: ""; position: absolute; left: 0; top: .75em; width: 32px; height: 1px; background: var(--ink-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-12); }

.hero-visual { position: relative; margin: 0; }
.photo { position: relative; background: var(--paper-sunk); aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo > svg { width: 55%; height: auto; max-height: 60%; }
.photo-label { position: absolute; left: var(--space-3); top: var(--space-3); font: 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); }
.photo-portrait img { filter: grayscale(1) contrast(1.05); }
.photo-portrait { box-shadow: var(--shadow-sheet); }
.hero-swallow { position: absolute; width: 78%; aspect-ratio: 200 / 140; left: -34%; top: 6%; color: var(--cobalt); z-index: 2; pointer-events: none; }
.hero-swallow.draw { stroke-width: 1.3; }
.hero-stars { position: absolute; width: 18%; aspect-ratio: 1; right: -6%; bottom: 12%; z-index: 2; color: var(--stamp-red); }
.chips { list-style: none; margin: 0; padding: 0; }
.chip { position: absolute; z-index: 3; display: grid; gap: 2px; background: var(--paper-raised); box-shadow: var(--shadow-sheet); padding: 10px 14px; font: 15px/1.3 var(--font-mono); color: var(--ink); animation: float 7s ease-in-out infinite; }
.chip .jdb-label { font-size: 10px; }
.chip-a { left: -18%; bottom: 18%; }
.chip-b { right: -8%; top: 8%; animation-delay: -2.3s; }
.chip-c { right: 10%; bottom: -5%; animation-delay: -4.6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* MARQUEE */
.marquee { border-block: 1px solid var(--hairline); overflow: hidden; padding-block: var(--space-6); }
.marquee-track { display: flex; align-items: center; gap: var(--space-8); width: max-content; animation: marquee 48s linear infinite; font: 400 clamp(32px, 4.4vw, 56px)/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.marquee-track i { font-style: normal; font-size: .4em; color: var(--stamp-red); }
.marquee-track em { color: var(--cobalt); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* SECTIONS */
.intro, .work, .bookings, .events { padding-block: var(--space-32); }
.work-grid .photo img, .matching .photo img { filter: saturate(.92); }
.section-head { display: grid; gap: var(--space-4); max-width: 820px; margin-bottom: var(--space-16); }
.section-head .t-body { color: var(--ink-muted); }
.t-display-l em, .t-display-xl em { color: var(--cobalt); }

.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.intro-photo { margin: 0; display: grid; gap: var(--space-3); }
.intro-photo img { filter: grayscale(1) contrast(1.04); }
.intro-photo figcaption { color: var(--ink-muted); font-size: 14px; }
.intro-text { display: grid; gap: var(--space-8); }
.intro-body { display: grid; gap: var(--space-4); max-width: 56ch; }
.intro-body .t-body { color: var(--ink-muted); }
.intro-divider { margin-top: var(--space-8); }
.intro-divider svg { width: 120px; }

/* WORK */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.work-item { margin: 0; }
.work-item:nth-child(3n+2) { margin-top: var(--space-16); margin-bottom: calc(var(--space-16) * -1); }
.work-item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); margin-top: var(--space-3); font: 400 20px/1.2 var(--font-display); }
.work-item:hover .photo img { transform: scale(1.04); }
.work-more { margin-top: calc(var(--space-16) + var(--space-8)); }

/* FLASH */
.sheets { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.sheet { margin: 0; display: grid; gap: var(--space-3); }
.sheet img { width: 100%; height: auto; box-shadow: var(--shadow-sheet); transition: transform .4s ease, box-shadow .4s ease; }
.sheet:hover img { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(28,27,24,.06), 0 28px 44px -22px rgba(28,27,24,.5); }
.sheet figcaption { color: var(--ink-muted); font-size: 14px; }
.sheet-main { rotate: -1deg; }
.sheet-side { rotate: 1.2deg; margin-top: var(--space-16); }
.sheet-blue { rotate: -.6deg; margin-top: var(--space-8); }
.flash { background: var(--paper-sunk); padding-block: var(--space-32); }
.flash-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-8) var(--space-6); }
.flash-sheet .jdb-flash { width: auto; transition: transform .3s ease, box-shadow .3s ease; }
.flash-sheet .jdb-flash:nth-child(odd) { rotate: -.6deg; }
.flash-sheet .jdb-flash:nth-child(even) { rotate: .5deg; }
.flash-sheet .jdb-flash:hover { rotate: 0deg; transform: translateY(-6px); box-shadow: 0 1px 0 rgba(28,27,24,.06), 0 24px 40px -20px rgba(28,27,24,.45); }
.jdb-flash-art svg { width: 62%; height: auto; max-height: 70%; }
.flash-foot { margin-top: var(--space-12); color: var(--ink-muted); }

/* MATCHING */
.matching { padding-block: var(--space-24); border-block: 1px solid var(--hairline); }
.matching-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.matching-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.matching-photos .photo:nth-child(2) { margin-top: var(--space-16); }
.matching-copy { display: grid; gap: var(--space-6); }
.matching-copy .t-body-l { color: var(--ink-muted); max-width: 44ch; }

/* BOOKINGS */
.bookings { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-16); align-items: start; }
.bookings-copy { display: grid; gap: var(--space-6); justify-items: start; }
.bookings-copy .t-body-l { color: var(--ink-muted); max-width: 46ch; }
.steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; width: 100%; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); font: 400 22px/1.3 var(--font-display); }
.waitlist { background: var(--paper-raised); box-shadow: var(--shadow-sheet); padding: var(--space-8); display: grid; gap: var(--space-2); position: sticky; top: 104px; }
.waitlist > .jdb-label { margin-bottom: var(--space-4); }
.waitlist label { font: 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-3); }
.waitlist .optional { text-transform: none; letter-spacing: 0; }
.waitlist input, .waitlist textarea { font: 16px/1.5 var(--font-sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-muted); border-radius: 0; padding: 10px 0; transition: border-color .2s; }
.waitlist input:focus, .waitlist textarea:focus { outline: none; border-bottom-color: var(--cobalt); box-shadow: 0 1px 0 var(--cobalt); }
.waitlist textarea { resize: vertical; }
.waitlist button { margin-top: var(--space-6); justify-content: center; }
.form-msg { min-height: 1.5em; color: var(--sheet-green); }
.form-msg.is-error { color: var(--stamp-red); }

/* EVENTS */
.events-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.poster-photo { margin: 0; width: 360px; max-width: 100%; rotate: -1.5deg; }
.poster-photo img { box-shadow: var(--shadow-sheet); }
.events-list { border-top: 1px solid var(--ink); }
.event { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-4); align-items: baseline; padding-block: var(--space-6); border-bottom: 1px solid var(--hairline); }
.event-title { font: 400 28px/1.2 var(--font-display); }
.event-state { font: 14px/1.4 var(--font-mono); color: var(--ink-muted); }

/* STUDIO */
.studio { padding-block: var(--space-32); position: relative; overflow: hidden; }
.studio-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-16); align-items: end; }
.studio-copy { display: grid; gap: var(--space-6); }
.studio-copy .t-body-l { color: var(--ink-muted); max-width: 40ch; }
.studio-wordmark { font: 400 clamp(64px, 10vw, 150px)/.9 var(--font-blackletter); color: var(--ink); }
.studio-photo { margin: 0; }
.studio-photo .photo { aspect-ratio: 4 / 5; }
.artists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-24); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
.artist { display: grid; gap: var(--space-2); align-content: start; }
.artist-sheet { aspect-ratio: 4 / 5; overflow: hidden; background: #fbf8f3; margin-bottom: var(--space-3); }
.artist-sheet img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.artist:hover .artist-sheet img { transform: scale(1.04); }
.artist-name { font: 400 32px/1.1 var(--font-display); }
.artist a { font: 14px/1.4 var(--font-mono); color: var(--cobalt); text-decoration: none; }
.artist a:hover { text-decoration: underline; }
.studio-bottom { position: relative; display: flex; justify-content: flex-end; margin-top: var(--space-16); }
.studio .jdb-info { background: var(--paper-raised); width: 100%; max-width: 460px; }
.studio-constellation { position: absolute; left: 6%; top: 10%; width: 260px; aspect-ratio: 200 / 140; color: var(--kraft); opacity: .8; }

/* FOOTER */
.site-footer { padding-block: var(--space-24) var(--space-12); border-top: 1px solid var(--hairline); }
.footer-tag { font: 400 clamp(40px, 6.5vw, 96px)/1 var(--font-display); letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.footer-tag em { color: var(--cobalt); }
.footer-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.footer-row .jdb-wordmark { font-size: 28px; margin-right: auto; }
.footer-row a { font: 14px/1.4 var(--font-mono); color: var(--ink); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .wrap, .hero { padding-inline: var(--space-8); }
  .site-header { padding-inline: var(--space-8); }
  .hero { grid-template-columns: 1fr; gap: var(--space-16); }
  .hero-visual { width: min(460px, 78%); margin-left: auto; }
  .bookings { grid-template-columns: 1fr; }
  .waitlist { position: static; }
  .events-row { grid-template-columns: 1fr; }
  .studio-inner { grid-template-columns: 1fr; }
  .studio-photo { max-width: 460px; }
  .intro { grid-template-columns: 1fr; }
  .intro-photo { max-width: 420px; }
  .matching-inner { grid-template-columns: 1fr; }
  .sheets { grid-template-columns: 1fr 1fr; }
  .sheet-main { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wrap, .hero { padding-inline: var(--space-4); }
  .site-header { padding-inline: var(--space-4); gap: var(--space-3); }
  .site-nav, .header-status { display: none; }
  .menu-btn { display: inline-block; }
  .hero { padding-top: var(--space-8); padding-bottom: var(--space-16); }
  .hero-visual { width: 82%; }
  .hero-note { padding-left: var(--space-8); }
  .chip-a { left: -14%; }
  .chip-b { right: -10%; }
  .intro, .work, .bookings, .events, .flash, .studio { padding-block: var(--space-16); }
  .artists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-16); }
  .artist-name { font-size: 22px; }
  .artist a { font-size: 11px; word-break: break-all; }
  .studio-bottom { justify-content: flex-start; }
  .studio-constellation { display: none; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheets { grid-template-columns: 1fr; }
  .sheet { rotate: 0deg !important; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .work-item:nth-child(3n+2) { margin: 0; }
  .work-item:nth-child(even) { margin-top: var(--space-8); margin-bottom: calc(var(--space-8) * -1); }
  .work-item figcaption { flex-direction: column; gap: 2px; font-size: 17px; }
  .flash-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .jdb-flash-meta { flex-direction: column; align-items: flex-start; }
  .poster-photo { width: min(320px, 100%); }
  .matching-photos .photo:nth-child(2) { margin-top: var(--space-8); }
  .matching { padding-block: var(--space-16); }
  .jdb-poster-title { font-size: 34px; letter-spacing: .12em; }
  .event { grid-template-columns: 1fr; gap: 4px; }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
  .waitlist { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .chip { animation: none; }
  .js .reveal.is-armed, .js .hero-title .word { opacity: 1; transform: none; }
  .js .draw.is-armed { stroke-dashoffset: 0; }
}