/* Patrick Bergsma, versie 1 "Museum": the rooms.
   Gallery white, ink, warm grey, and Delft blue used sparingly. */

:root {
  --paper: #ffffff;
  --ink: #161616;
  --ink-2: #6b6760;
  --delft: #213d8f;
  --line: #e5e2dc;
  --wash: #f6f5f2;

  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 20px;
  --max: 1440px;
  --head: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1100ms;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1000px) { :root { --gutter: clamp(40px, 5vw, 76px); --head: 76px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--delft); outline-offset: 4px; }
main:focus { outline: none; }

.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: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: #fff;
  font: 500 .8125rem/1 var(--sans); letter-spacing: .08em; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ── type ───────────────────────────────────────────────────────── */

.eyebrow {
  font: 500 .6875rem/1.5 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.h2 {
  font: 300 clamp(2.6rem, 8.5vw, 5.4rem)/1 var(--serif);
  letter-spacing: -.012em;
  margin-top: 16px;
  text-wrap: balance;
}
.lede { font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.42; font-weight: 400; }
.muted { color: var(--ink-2); }

.section { padding-top: clamp(120px, 15vw, 232px); scroll-margin-top: var(--head); }
.section-head { margin-bottom: clamp(40px, 6vw, 88px); }

/* soft edge: the grey seamless backdrops of the photographs dissolve into the white wall */
.soft {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.soft-v {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-composite: intersect;
}

/* ── reveal ─────────────────────────────────────────────────────── */

.js .rv {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── header ─────────────────────────────────────────────────────── */

.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .8s var(--ease);
}
/* the blur lives on a pseudo element: a filter on the header itself would trap the fixed mobile menu inside it */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-head.scrolled, .menu-open .site-head { border-bottom-color: var(--line); }
.bar { height: var(--head); display: flex; align-items: center; gap: 8px; }

.brand {
  margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 1.3125rem/1 var(--serif);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav ul { display: flex; }
.nav ul a {
  position: relative;
  display: flex; align-items: center; min-height: 44px;
  padding: 0 12px;
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .4s var(--ease);
}
.nav ul a:hover, .nav ul a.is-active { color: var(--delft); }
.nav ul a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px;
  background: var(--delft); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.nav ul a.is-active::after { transform: scaleX(1); }

.tools { display: flex; align-items: center; }
.lang { display: flex; align-items: center; }
.lang button {
  min-width: 40px; min-height: 44px; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .16em;
  color: var(--ink-2);
  transition: color .3s;
}
.lang button + button { position: relative; }
.lang button + button::before { content: ""; position: absolute; left: 0; top: 50%; height: 14px; margin-top: -7px; width: 1px; background: var(--line); }
.lang button:hover { color: var(--delft); }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 0 0 14px; margin-left: 4px;
  background: none; border: 0; cursor: pointer;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .17em; text-transform: uppercase;
}
.menu-btn i { position: relative; width: 20px; height: 7px; display: block; }
.menu-btn i::before, .menu-btn i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.menu-btn i::before { top: 0; }
.menu-btn i::after { top: 6px; }
.menu-open .menu-btn i::before { top: 3px; transform: rotate(35deg); }
.menu-open .menu-btn i::after { top: 3px; transform: rotate(-35deg); }

@media (max-width: 999px) {
  .nav {
    position: fixed; inset: var(--head) 0 0 0;
    background: var(--paper);
    padding: 24px var(--gutter) 48px;
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity .5s var(--ease), visibility 0s .5s;
  }
  .menu-open .nav { visibility: visible; opacity: 1; transition: opacity .5s var(--ease); }
  .nav ul { flex-direction: column; }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav ul a {
    min-height: 64px; padding: 0;
    font: 300 2.375rem/1 var(--serif); letter-spacing: 0; text-transform: none;
  }
  .nav ul a::after { display: none; }
  .nav-extra { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
  .nav-extra .btn { flex: 1 1 140px; }
}
@media (max-width: 359px) {
  .brand { font-size: 1.125rem; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-btn { padding-left: 10px; min-width: 44px; justify-content: center; }
}
@media (min-width: 1000px) {
  .menu-btn, .nav-extra { display: none; }
  .tools { margin-left: 12px; }
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero {
  padding-top: calc(var(--head) + 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 28px;
  scroll-margin-top: 0;
}
.hero-name {
  margin-top: 14px;
  font: 300 clamp(4.1rem, 21vw, 10.25rem)/.88 var(--serif);
  letter-spacing: -.02em;
}
.hero-name span { display: block; }
.hero-name span + span { padding-left: .5em; }
.hero-statement {
  font: italic 400 clamp(1.5rem, 2.4vw, 2.05rem)/1.32 var(--serif);
  max-width: 19em;
  text-wrap: balance;
}
.hero-work { position: relative; }
.hero-work .work-link { display: block; }
.hero-work img { width: 100%; max-height: 74svh; object-fit: contain; }
.hero-work .label { margin-top: 10px; }

@media (min-width: 1000px) {
  .hero {
    min-height: 100svh;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 40px;
    padding-bottom: 32px;
  }
  .hero-head { grid-column: 1 / span 7; grid-row: 2; align-self: end; position: relative; z-index: 1; }
  .hero-name { font-size: clamp(5rem, 11.2vw, 10.25rem); }
  .hero-statement { grid-column: 1 / span 5; grid-row: 3; }
  .hero-work { grid-column: 7 / span 6; grid-row: 1 / span 4; align-self: center; }
  .hero-work img { max-height: calc(100svh - var(--head) - 120px); }
}

/* ── labels (museum wall labels) ───────────────────────────────── */

.label { display: block; margin-top: 18px; max-width: 30em; }
.label > span { display: block; }
.label-title {
  font: italic 400 1.375rem/1.2 var(--serif);
  transition: color .4s var(--ease);
}
.label-line {
  margin-top: 4px;
  font: 400 .8125rem/1.5 var(--sans);
  color: var(--ink-2);
}
.label-line + .label-line { margin-top: 1px; }
.label-dims { font-variant-numeric: tabular-nums; }
.label-price {
  margin-top: 10px;
  font: 500 .625rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.label--inline .label-title { display: inline; font-size: 1.25rem; }
.label--inline .label-line { display: inline; margin-left: 10px; }

/* ── works ──────────────────────────────────────────────────────── */

.work { position: relative; }
.work-link { display: block; text-decoration: none; }
.work-link::after { content: ""; position: absolute; inset: 0; }
.work-link:focus-visible { outline-offset: 8px; }
.work-img { display: block; overflow: hidden; }
.work img { width: 100%; transition: transform 1.6s var(--ease); }
@media (hover: hover) {
  .work:hover img, .hero-work:hover img { transform: scale(1.018); }
  .work:hover .label-title, .hero-work:hover .label-title { color: var(--delft); }
}
@media (prefers-reduced-motion: reduce) { .work img { transition: none; } .work:hover img, .hero-work:hover img { transform: none; } }

.works {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 72px;
  margin-top: clamp(56px, 8vw, 120px);
}
.works.is-folded .is-more { display: none; }
.works-more { margin: clamp(56px, 7vw, 96px) 0 0; text-align: center; }
.work.m1 { width: 84%; margin-left: auto; }
.work.m2 { width: 84%; }

@media (min-width: 640px) and (max-width: 999px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 80px; }
  .work.m1, .work.m2 { width: auto; margin-left: 0; }
  .work:nth-child(even) { margin-top: 96px; }
}
@media (min-width: 1000px) {
  .works {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: clamp(96px, 9vw, 168px);
    align-items: start;
  }
  .work.m1, .work.m2 { width: auto; margin-left: 0; }
  .work.p0 { grid-column: 1 / span 7; }
  .work.p1 { grid-column: 9 / span 4; margin-top: clamp(96px, 12vw, 200px); }
  .work.p2 { grid-column: 2 / span 4; }
  .work.p3 { grid-column: 7 / span 6; margin-top: clamp(48px, 6vw, 112px); }
  .work.p4 { grid-column: 4 / span 6; }
}

/* ── floor plan ─────────────────────────────────────────────────── */

.plan-sec { padding-top: clamp(96px, 12vw, 180px); scroll-margin-top: var(--head); }
.plan-sec .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.plan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 2px solid var(--ink);
}
.plan li { position: relative; }
.plan li + li::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(to right, var(--ink) 0 36%, transparent 36% 64%, var(--ink) 64% 100%);
}
.plan-room {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px;
  align-items: center;
  column-gap: 14px;
  min-height: 92px;
  padding: 14px 14px 14px 16px;
  text-decoration: none;
  transition: background-color .6s var(--ease);
}
.plan-room:hover { background: var(--wash); }
.plan-no {
  font: 300 1.75rem/1 var(--serif);
  color: var(--ink-2);
  transition: color .4s var(--ease);
}
.plan-room:hover .plan-no { color: var(--delft); }
.plan-name { display: block; font: 400 1.4rem/1.1 var(--serif); }
.plan-meta { display: block; margin-top: 6px; }
.plan-meta.is-now { color: var(--delft); }
.plan-thumb { grid-column: 3; grid-row: 1 / span 2; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.plan-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.plan-text { grid-column: 2; grid-row: 1 / span 2; }
.plan-no { grid-column: 1; grid-row: 1 / span 2; }
.plan-caption { margin-top: 14px; }

@media (min-width: 1000px) {
  .plan { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .plan li + li::before {
    left: -1px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(to bottom, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66% 100%);
  }
  .plan-room {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    padding: 22px 20px 24px;
    min-height: 300px;
  }
  .plan-no, .plan-text, .plan-thumb { grid-column: 1; grid-row: auto; }
  .plan-no { font-size: 2.25rem; }
  .plan-thumb { order: 3; width: 100%; height: clamp(110px, 13vw, 190px); margin-top: 24px; align-self: end; }
  .plan-text { margin-top: 18px; }
}

/* ── rooms ──────────────────────────────────────────────────────── */

.room { padding-top: clamp(120px, 15vw, 232px); scroll-margin-top: var(--head); }
.room-label {
  display: flex; align-items: center; gap: 16px;
}
.room-label::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--line); }
.room-label .room-count { order: 2; }
.room-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  margin-top: 28px;
}
.room-titles { position: relative; isolation: isolate; }
.room-title {
  font: 300 clamp(2.85rem, 11vw, 6.25rem)/.95 var(--serif);
  letter-spacing: -.015em;
}
.room-formerly { margin-top: 14px; font: italic 400 1.25rem/1.3 var(--serif); color: var(--ink-2); }
.room-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.room-text { max-width: 32em; font-size: 1.3125rem; line-height: 1.6; text-wrap: pretty; }
.room-mood { max-width: 360px; }
.room-mood img { width: 100%; }

.tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px 7px;
  border: 1px solid var(--line);
  font: 500 .625rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
}
.tag--now { color: var(--delft); border-color: rgba(33, 61, 143, .35); }
.tag--now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (min-width: 1000px) {
  .room-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
    margin-top: 40px;
  }
  .room-titles { grid-column: 1 / span 6; }
  .room-text { grid-column: 7 / span 6; align-self: end; font-size: 1.4375rem; }
  .room--mood .room-head { grid-template-rows: auto 1fr; }
  .room--mood .room-titles { grid-column: 1 / span 7; }
  .room--mood .room-text { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .room--mood .room-mood { grid-column: 9 / span 4; grid-row: 1 / span 2; max-width: none; align-self: start; }
}

/* rooms without works yet */
.room-soon {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px;
  margin-top: clamp(48px, 7vw, 104px);
}
.preview { max-width: 520px; position: relative; }
.preview img { width: 100%; }
.preview figcaption { margin-top: 12px; }
.soon { font: italic 400 clamp(1.5rem, 3vw, 2.1rem)/1.3 var(--serif); max-width: 16em; text-wrap: balance; }
@media (min-width: 1000px) {
  .room-soon { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: end; }
  .preview { grid-column: 2 / span 5; max-width: none; }
  .soon { grid-column: 8 / span 4; padding-bottom: 48px; }
}

/* ── collectors ─────────────────────────────────────────────────── */

.collect {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px;
}
.points li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font: 400 1.5rem/1.25 var(--serif);
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points .n { font: 500 .625rem/1 var(--sans); letter-spacing: .18em; color: var(--ink-2); min-width: 18px; }
.ask { font: italic 400 clamp(1.55rem, 2.6vw, 2.1rem)/1.3 var(--serif); max-width: 18em; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 24px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 500 .6875rem/1 var(--sans);
  letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.btn svg { flex: none; }
.btn:hover { background: var(--ink); color: #fff; }

.galleries { margin-top: 8px; }
.galleries ul { margin-top: 14px; }
.galleries li { padding: 14px 0; border-top: 1px solid var(--line); }
.galleries li:last-child { border-bottom: 1px solid var(--line); }
.g-name { font: 400 1.4rem/1.25 var(--serif); }
.g-name a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: color .4s var(--ease); }
.g-name a:hover { color: var(--delft); }
.g-place { font: 400 .8125rem/1.5 var(--sans); color: var(--ink-2); margin-top: 2px; }
.g-role { display: block; margin-bottom: 6px; color: var(--ink-2); }

@media (min-width: 1000px) {
  .collect { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .collect-ask { grid-column: 1 / span 5; }
  .collect-side { grid-column: 7 / span 6; }
}

/* ── story ──────────────────────────────────────────────────────── */

.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.story-text p + p { margin-top: 1.1em; }
.story-text p { max-width: 32em; font-size: 1.3125rem; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 1000px) { .story-text p { font-size: 1.4375rem; } }
.story-text .lede { font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.45; }
.story-inline { margin: 2.2em 0; }
.story-portrait img, .story-inline img { width: 100%; }
@media (min-width: 1000px) {
  .story-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .story-portrait { grid-column: 1 / span 5; position: sticky; top: calc(var(--head) + 40px); align-self: start; }
  .story-text { grid-column: 7 / span 6; }
  .story-inline { margin: 2.6em 0 2.6em -8%; }
}

/* ── process ────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 72px; counter-reset: step; }
.step img { width: 100%; }
.step-head { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; }
.step-no { font: 300 2.6rem/1 var(--serif); color: var(--ink-2); }
.step-title { font: italic 400 1.75rem/1.1 var(--serif); }
.step-text { margin-top: 14px; font-size: 1.25rem; line-height: 1.58; max-width: 30em; text-wrap: pretty; }
@media (min-width: 640px) and (max-width: 999px) {
  .step { display: grid; grid-template-columns: 5fr 6fr; column-gap: 32px; align-items: start; }
  .step-head { margin-top: 0; }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.5vw, 56px); }
  .step:nth-child(3n+2) { margin-top: 112px; }
  .step:nth-child(3n+3) { margin-top: 224px; }
}

/* ── studio ─────────────────────────────────────────────────────── */

.studio-wide img { width: 100%; }
.studio-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px;
  margin-top: clamp(40px, 6vw, 80px);
}
.studio-name { font: 300 clamp(2.2rem, 4vw, 3.2rem)/1 var(--serif); }
.studio-unit { margin-top: 8px; font: italic 400 1.35rem/1.2 var(--serif); color: var(--ink-2); }
.studio-card address { margin-top: 22px; font: 400 .9375rem/1.6 var(--sans); }
.studio-card .tag { margin-top: 22px; }
.studio-text p { font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.45; font-weight: 400; max-width: 22em; }
.studio-more { display: grid; gap: 24px; }
.studio-more img { width: 100%; }
.studio-more figure:only-child { width: 72%; margin-left: auto; }
.credit { margin-top: 18px; }
@media (min-width: 1000px) {
  .studio-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .studio-card { grid-column: 1 / span 4; }
  .studio-text { grid-column: 5 / span 4; }
  .studio-more { grid-column: 10 / span 3; }
  .studio-more figure:only-child { width: 100%; }
}

/* ── cv ─────────────────────────────────────────────────────────── */

.cv-born { margin-top: 18px; }
.cv-block {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
}
.cv-h { padding-top: 4px; }
.cv-list li { padding: 5px 0; font: 400 1.1875rem/1.35 var(--serif); break-inside: avoid; }
.cv-list .ex-title { font-style: italic; }
.cv-list .ex-venue, .cv-list .yr { display: block; font: 400 .8125rem/1.5 var(--sans); color: var(--ink-2); margin-top: 2px; }
.cv-list .yr { font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .cv-list.two { column-count: 2; column-gap: 48px; }
}
@media (min-width: 1000px) {
  .cv-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); padding: 36px 0 44px; }
  .cv-h { grid-column: 1 / span 3; }
  .cv-body { grid-column: 4 / span 9; }
}

.press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
@media (min-width: 640px) { .press { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .press { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px 18px; } }
.press a, .press .clip { display: block; text-decoration: none; }
.press img {
  width: 100%; aspect-ratio: 635 / 900; object-fit: cover; object-position: top;
  border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform 1s var(--ease);
}
.press-name { display: block; margin-top: 10px; font: 400 .75rem/1.35 var(--sans); color: var(--ink-2); }
.press a .press-name { color: var(--ink); }
.press a:hover img { border-color: var(--delft); }
.press a:hover .press-name { color: var(--delft); }
.ext { display: inline-block; margin-left: 4px; font-family: var(--sans); }

/* ── contact ────────────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.contact-mail {
  display: inline-block; margin-top: 12px;
  font: 300 clamp(1.85rem, 7.6vw, 4.6rem)/1.1 var(--serif);
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: color .4s var(--ease);
}
.contact-mail:hover { color: var(--delft); }
.contact-list { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); }
.contact-list > div { padding: 18px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.contact-list dd { font: 400 1.3rem/1.4 var(--serif); }
.contact-list dd a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: color .4s var(--ease); }
.contact-list dd a:hover { color: var(--delft); }
.contact-list address { font: 400 .9375rem/1.6 var(--sans); }
.contact-portrait img { width: 100%; }
@media (min-width: 760px) {
  .contact-list > div { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .contact-main { grid-column: 1 / span 7; }
  .contact-portrait { grid-column: 9 / span 4; align-self: end; }
}

/* ── footer ─────────────────────────────────────────────────────── */

.site-foot { margin-top: clamp(96px, 12vw, 180px); }
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-top: 22px; padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.foot p, .foot a { font: 400 .75rem/1.5 var(--sans); color: var(--ink-2); letter-spacing: .04em; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot a:hover { color: var(--delft); }

.noscript { padding: 140px 20px 60px; max-width: 40em; margin: 0 auto; }

/* ── viewer ─────────────────────────────────────────────────────── */

.viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
.viewer::backdrop { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: v-in .6s var(--ease); }
}
@keyframes v-in { from { opacity: 0; } to { opacity: 1; } }

.v-wrap { min-height: 100%; display: flex; flex-direction: column; }
.v-stage {
  height: 66svh; min-height: 340px;
  display: flex; flex-direction: column;
  padding: 60px 12px 0;
}
.v-frame {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.v-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  transition: opacity .5s var(--ease);
}
.v-img.is-fading { opacity: 0; transition-duration: .18s; }
.v-controls { flex: none; height: 64px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.v-arrow {
  width: 56px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  transition: color .3s, transform .5s var(--ease);
}
.v-arrow:hover { color: var(--delft); }
.v-arrow[data-step="-1"]:hover { transform: translateX(-3px); }
.v-arrow[data-step="1"]:hover { transform: translateX(3px); }
.v-count { min-width: 56px; text-align: center; font: 500 .6875rem/1 var(--sans); letter-spacing: .16em; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.v-info { padding: 20px var(--gutter) 48px; }
.v-title { margin-top: 10px; font: italic 400 clamp(2rem, 3vw, 2.6rem)/1.08 var(--serif); }
.v-title:focus { outline: none; }
@media (max-width: 899px) {
  .v-info { display: flex; flex-direction: column; }
  .v-inquire { order: 1; margin-top: 28px; }
  .v-thumbs { order: 2; }
}
.v-info .label-line { font-size: .875rem; }
.v-info .label-price { margin-top: 16px; }
.v-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.v-thumbs button {
  width: 64px; height: 64px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .3s;
}
.v-thumbs button:hover { border-color: var(--ink-2); }
.v-thumbs button[aria-current="true"] { border-color: var(--ink); }
.v-thumbs img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.v-inquire { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.v-inquire .actions { margin-top: 14px; }
.v-inquire .btn { flex: 1 1 140px; }

.v-close {
  position: fixed; z-index: 3; top: max(6px, env(safe-area-inset-top)); right: 6px;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%; cursor: pointer;
  transition: color .3s, transform .6s var(--ease);
}
.v-close:hover { color: var(--delft); transform: rotate(90deg); }

@media (min-width: 900px) {
  .viewer { overflow: hidden; }
  .v-wrap { flex-direction: row; height: 100%; }
  .v-stage { flex: 1; min-width: 0; height: 100%; padding: 48px 32px 16px 48px; }
  .v-info {
    flex: none; width: clamp(340px, 30vw, 440px);
    height: 100%; overflow-y: auto;
    padding: 96px clamp(32px, 4vw, 64px) 48px 16px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .v-close { top: 20px; right: 22px; }
}

/* tikdoel e-mail minimaal 44px */
.contact-mail { display: inline-flex; align-items: center; min-height: 44px; }

/* Werkpreview 15 oktober: een rustige route, met ruimte voor Beautiful Decay. */
.hero-enter { display:inline-flex; gap:32px; align-items:center; margin-top:30px; font:500 .75rem/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:8px; }
.detail-link { position:relative; z-index:2; display:inline-block; margin-top:16px; font:400 .8rem/1.5 var(--sans); text-underline-offset:5px; }
#beautiful-decay .works { display:grid; grid-template-columns:1fr 1fr; column-gap:7vw; row-gap:80px; }
#beautiful-decay .work { grid-column:auto; grid-row:auto; width:100%; margin:0; align-self:start; }
#beautiful-decay .work:first-child { grid-column:1 / -1; width:78%; margin-inline:auto; }
#beautiful-decay .work-img { background:var(--wash); padding:clamp(16px,3vw,48px); }
#beautiful-decay .work img { max-height:75vh; object-fit:contain; }
#beautiful-decay .label { max-width:32em; }
.context-images { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; max-width:1000px; margin:auto; }
.context-images figure:nth-child(2) { margin-top:100px; }
.context-images img { width:100%; max-height:650px; object-fit:contain; }
.studio-text .btn { margin-top:26px; }
@media(max-width:639px) {
  #beautiful-decay .works { grid-template-columns:1fr; gap:64px; }
  #beautiful-decay .work:first-child { width:100%; grid-column:auto; }
  .context-images { gap:22px; }
  .context-images figure:nth-child(2) { margin-top:48px; }
}
.museum-inquiry { display:grid; grid-template-columns:1fr 1.2fr auto; align-items:center; gap:32px; border-top:1px solid var(--line); margin-top:72px; padding-top:32px; }
.museum-inquiry h3 { font:400 1.8rem/1.2 var(--serif); }
.museum-inquiry p { font:400 .9rem/1.7 var(--sans); color:var(--ink-2); max-width:34em; }
@media(max-width:639px) { .museum-inquiry { grid-template-columns:1fr; gap:20px; } .museum-inquiry .btn { justify-self:start; } }

/* Foto's behouden hun volledige zichtbare rand en fijne materiaalstructuur. */
.soft, .soft-v { -webkit-mask-image:none; mask-image:none; }
.hero-decay { display:inline-flex; gap:20px; margin-left:28px; margin-top:24px; font:400 .75rem/1.5 var(--sans); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:8px; }
.hero-decay:hover { border-color:var(--ink); }
@media(max-width:639px) { .hero-decay { margin-left:22px; } }

/* Afzonderlijke pagina's, witte presentatie en beeldgedreven headers. */
:root { --wash:#fff; }
body, .work-img, .viewer, .v-stage, .v-info, .series-card-image { background:#fff !important; }
#beautiful-decay .work-img { background:#fff; padding:0; }
.home-hero { padding-top:clamp(50px,7vw,100px); }
.home-title { position:relative; z-index:1; }
.home-title h1 { font:400 clamp(64px,8.5vw,140px)/.95 var(--serif); letter-spacing:-.045em; margin-top:18px; }
.home-title h1 em { font-weight:300; }
.home-hero figure { margin-top:20px; }
.home-hero figure img { width:100%; height:clamp(260px,38vw,560px); object-fit:cover; }
.home-hero figure figcaption { text-align:right; margin-top:14px; color:var(--ink-2); }
.home-statement { display:flex; align-items:end; justify-content:space-between; gap:48px; padding:48px 0 72px; border-bottom:1px solid var(--line); }
.home-statement p { max-width:29em; font:400 clamp(25px,3vw,39px)/1.35 var(--serif); }
.home-statement .hero-enter { white-space:nowrap; flex-shrink:0; }
.home-series { padding-top:90px; }
.series-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px 36px; }
.series-card { text-decoration:none; }
.series-card-image { height:350px; display:flex; align-items:center; justify-content:center; }
.series-card-image img { width:100%; height:100%; object-fit:contain; }
.series-card-caption { display:flex; gap:18px; align-items:baseline; margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.series-card-caption h3 { font:400 clamp(26px,2.4vw,36px)/1.15 var(--serif); flex:1; }
.series-card > p { margin-top:12px; }
.developing span { font:400 1.4rem var(--serif); color:var(--ink-2); }
.page-back { padding-top:42px; font:400 .8rem var(--sans); }
.page-back a { text-decoration:none; }
.series-banner { margin-top:30px; }
.series-banner img { display:block; width:100%; height:clamp(260px,38vw,560px); object-fit:cover; }
.series-banner figcaption { margin-top:18px; color:var(--ink-2); text-align:right; }
.series-banner + .room { padding-top:65px; }
.page-index { padding-top:80px; min-height:75vh; }
body:has(.page-index) .plan { margin-bottom:80px; }
main > .section:first-child { padding-top:80px; }
.site-foot { margin-top:100px; }
@media(max-width:800px) { .series-cards {grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px;} .series-card-image {height:280px;} .home-statement {display:block;} .home-title h1 em {display:block;} }
@media(max-width:520px) { .series-cards {grid-template-columns:1fr;} .series-card-image {height:340px;} .home-statement {padding-bottom:42px;} .home-series {padding-top:56px;} .home-title h1 {font-size:70px;} .home-hero figure img {height:290px; object-position:65% center;} .series-banner img {height:270px;object-position:65% center;} }

.home-hero {padding-top:30px;} .home-title {margin-top:40px;} .home-hero figure img {height:clamp(320px,43vw,620px);object-position:50% 45%;} .home-hero figure {margin-top:0;} .social-band {background:#171b19;color:white;margin-top:100px;padding:70px 0;} .social-head {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:35px;} .social-head h2 {font:400 clamp(36px,4vw,56px)/1.1 var(--serif);margin-top:14px;} .social-head a {color:white;font:400 .85rem var(--sans);} .social-posts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;} .social-post iframe {display:block;width:100%;height:470px;border:0;background:white;} .social-post > a {display:block;color:#ddd;font:400 .75rem var(--sans);padding-top:14px;} .scholar-video {max-width:540px;margin:30px auto 0;} .scholar-video video {display:block;width:100%;max-height:80vh;background:#fff;} .scholar-video p {margin-top:18px;} @media(max-width:700px){.social-posts{grid-template-columns:1fr 1fr;}.social-post iframe{height:400px;}.social-head{display:block;}.social-head>a{display:block;margin-top:25px;}} @media(max-width:480px){.social-posts{grid-template-columns:1fr;}.social-post iframe{height:520px;}.home-hero figure img{height:380px;}.home-title h1{font-size:65px;}}

.v-frame {touch-action:none;overflow:hidden;cursor:zoom-in;} .v-frame.is-zoomed{cursor:grab;} .v-frame.is-zoomed:active{cursor:grabbing;} .v-img{transform-origin:center;user-select:none;-webkit-user-drag:none;transition:none!important;} .zoom-tools{display:flex;gap:8px;justify-content:center;align-items:center;padding:12px 0;position:relative;z-index:3;background:#fff;} .zoom-tools button{min-width:44px;min-height:44px;border:1px solid #ddd;background:#fff;color:#171717;font:400 18px var(--sans);cursor:pointer;} .zoom-tools #zoom-level{font-size:12px;min-width:65px;} .studio-parallax {width:100vw;max-width:none;margin-left:calc(50% - 50vw);height:320px;background-image:url('/headers/atelier-panorama.png');background-size:cover;background-position:center 50%;background-attachment:fixed;} @media(max-width:640px){.studio-parallax{height:240px;background-attachment:scroll;background-position:center;}.v-stage{min-height:55svh;}.v-frame{min-height:45svh;}.zoom-tools{padding:6px 0;}} @media(prefers-reduced-motion:reduce){.studio-parallax{background-attachment:scroll;}}

.home-hero > figure{width:100vw;max-width:none;margin-left:calc(50% - 50vw);}.home-hero > figure figcaption{padding-right:5vw;}

/* Losse pagina's: elk werk heeft een eigen adres en een rustige detailpagina. */
.artwork-page {padding-top:48px;}
.breadcrumbs {font:400 .8rem/1.7 var(--sans);color:var(--ink-2);margin-bottom:52px;}
.breadcrumbs a {text-underline-offset:4px;}
.artwork-layout {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:7vw;align-items:start;}
.artwork-gallery {display:grid;gap:48px;}
.artwork-photo {display:block;width:100%;padding:0;border:0;background:white;cursor:zoom-in;}
.artwork-photo img {width:100%;max-height:85vh;object-fit:contain;}
.artwork-info {position:sticky;top:120px;}
.artwork-info h1 {font:400 clamp(40px,5vw,72px)/1.05 var(--serif);margin-top:18px;}
.artwork-info .label-title {display:none;}
.artwork-info .label {margin-top:26px;}
.artwork-info .label-line {font-size:.9rem;line-height:1.7;}
.artwork-zoom-hint,.artwork-availability {font:400 .8rem/1.7 var(--sans);color:var(--ink-2);margin-top:28px;}
.instagram-previews {display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.instagram-preview {display:block;text-decoration:none;}
.instagram-preview img {width:100%;height:360px;object-fit:contain;background:#fff;}
.instagram-preview h3 {font:400 2rem/1.2 var(--serif);margin-top:22px;}
.instagram-preview p,.instagram-preview span {display:block;font:400 .85rem/1.6 var(--sans);color:#d4d7d5;margin-top:12px;}
.social-intro {font:400 1rem/1.7 var(--sans);color:#d4d7d5;max-width:33em;margin-top:20px;}
.social-band .eyebrow {color:#c2c8c3;}
.foot {flex-wrap:wrap;gap:24px;align-items:flex-start;}
.footer-nav {display:flex;flex-wrap:wrap;gap:16px 24px;max-width:600px;}
.footer-instagram {font-weight:500;}
.series-card-caption h2 {font:400 clamp(26px,2.4vw,36px)/1.15 var(--serif);flex:1;}
.nav a[aria-current="page"] {color:var(--delft);text-decoration:underline;text-underline-offset:8px;}
@media(max-width:899px){.artwork-layout {grid-template-columns:1fr;gap:44px;}.artwork-info{position:static;}.artwork-gallery {gap:28px;}.artwork-photo img{max-height:65vh;}.breadcrumbs{margin-bottom:32px;}.artwork-page{padding-top:30px;}}
@media(max-width:600px){.instagram-previews{grid-template-columns:1fr;gap:44px;}.instagram-preview img{height:330px;}.footer-nav{width:100%;}.foot{display:flex;flex-direction:column;}.social-head h2{font-size:40px;}}
.home-paths {display:flex;flex-direction:column;gap:22px;align-items:flex-start;flex-shrink:0;}
.home-instagram {font:400 .8rem/1.5 var(--sans);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:6px;}
@media(max-width:800px){.home-paths{margin-top:24px;}}
/* Keep breadcrumbs and page-back links below the fixed site header. */
.artwork-page {padding-top:calc(var(--head) + 36px);}
.page-back {padding-top:calc(var(--head) + 30px);}
.page-index {padding-top:calc(var(--head) + 50px);}
@media(max-width:899px){.artwork-page{padding-top:calc(var(--head) + 28px);}}

/* Het atelier is de gekozen header. Toon de ruimte, geen uitvergroot werkdetail. */
.home-hero > .atelier-header {margin-top:var(--head);}
.atelier-header img,.home-hero .atelier-header img,.series-banner.atelier-header img {
  width:100%;height:clamp(280px,32vw,460px);object-fit:cover;object-position:center 50%;
}
.atelier-header figcaption {margin-top:14px;}
@media(max-width:600px){
  .home-hero > .atelier-header {margin-top:var(--head);}
  .atelier-header img,.home-hero .atelier-header img,.series-banner.atelier-header img {height:250px;object-position:50% 50%;}
}

/* Een vloeiende, zichtbare zoom, met rustige vaste onderschriften. */
.series-card-image,.work-img,.artwork-photo {overflow:hidden;}
.series-card-image img,.work .work-img img,.artwork-photo img {
  transform:scale(1);transform-origin:50% 50%;
  transition:transform 950ms cubic-bezier(.2,.65,.25,1);
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .series-card:hover .series-card-image img,.series-card:focus-visible .series-card-image img {transform:scale(1.085);}
  .work:hover .work-img img,.work:focus-within .work-img img {transform:scale(1.065);}
  .artwork-photo:hover img,.artwork-photo:focus-visible img {transform:scale(1.075);}
}
@media(prefers-reduced-motion:reduce){
  .series-card-image img,.work .work-img img,.artwork-photo img {transition:none;transform:none;}
}

/* Geen witte opvulranden: beelden behouden hun eigen verhouding. */
.instagram-previews {align-items:start;}
.instagram-preview img {display:block;width:100%;height:auto;max-height:none;object-fit:initial;background:transparent;aspect-ratio:auto;}
.series-card-image {height:auto;display:block;background:transparent !important;}
.series-card-image img {display:block;width:100%;height:auto;max-height:none;object-fit:initial;}
.scholar-work-photo {grid-column:1/-1;width:min(100%,620px);margin:0 auto;}
.scholar-work-photo img {display:block;width:100%;height:auto;}
.scholar-work-photo figcaption {font:400 .85rem/1.6 var(--sans);margin-top:18px;}
.scholar-film-section {grid-column:1/-1;margin-top:70px;border-top:1px solid var(--line);padding-top:50px;}
.scholar-film-section h2 {font:400 clamp(30px,4vw,46px)/1.2 var(--serif);}
.scholar-video {grid-column:1/-1;max-width:540px;width:100%;margin:30px auto 0;}
.scholar-video video {height:auto;max-height:none;object-fit:initial;background:transparent;}
@media(max-width:600px){.instagram-preview img,.series-card-image img{height:auto;} .scholar-film-section{margin-top:45px;}}

/* Atelierbeelden lopen paginabreed, met afwisselende hoogtes en zonder opvulranden. */
.editorial-banner{width:100%;margin:0;overflow:hidden;background:transparent;}
.editorial-banner img{display:block;width:100%;height:clamp(200px,22vw,340px);object-fit:cover;object-position:var(--focus,50% 50%);}
.editorial-banner.banner-medium img{height:clamp(280px,30vw,450px);}
.editorial-banner.banner-portrait img{height:clamp(330px,36vw,540px);}
main>.editorial-banner:first-child{margin-top:var(--head);}
.page-back+.editorial-banner{margin-top:0;}
@media(max-width:600px){.editorial-banner img,.editorial-banner.banner-medium img,.editorial-banner.banner-portrait img{height:auto;object-fit:initial;aspect-ratio:auto;}}

/* Atelierfoto’s tonen de oorspronkelijke kleuren zonder visuele filters. */
.editorial-banner img,.atelier-header img,.story-portrait img,.story-inline img,.studio-more img{filter:none!important;mix-blend-mode:normal!important;mask-image:none!important;-webkit-mask-image:none!important;}

.hero-zoom-frame{overflow:hidden;}
.hero-zoom-frame img{display:block;transform:scale(1);transform-origin:50% 50%;transition:transform 1800ms cubic-bezier(.2,.65,.25,1);}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero-zoom-frame:hover img{transform:scale(1.04);}}
@media(prefers-reduced-motion:reduce){.hero-zoom-frame img{transition:none;transform:none;}}

.btn[href*="wa.me/"]{background:#25d366!important;border-color:#25d366!important;color:#073b24!important;}
.btn[href*="wa.me/"]:hover{background:#20bd5a!important;border-color:#20bd5a!important;}
.instagram-slider-controls{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin:0 0 24px;}
.instagram-slider-controls button{width:48px;height:48px;background:transparent;border:1px solid #819087;color:#fff;font:24px/1 var(--sans);cursor:pointer;}
.instagram-slider-controls button:disabled{opacity:.3;cursor:default;}
.instagram-position{font:12px var(--sans);color:#d4d7d5;}
.instagram-previews{display:flex;gap:36px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#819087 transparent;padding-bottom:22px;}
.instagram-preview{flex:0 0 60%;min-width:0;scroll-snap-align:start;}
.instagram-previews:focus-visible{outline:1px solid #819087;outline-offset:6px;}
@media(max-width:600px){.instagram-previews{gap:20px;}.instagram-preview{flex-basis:86%;}.instagram-slider-controls{gap:16px;}}

/* Instagram toont de daadwerkelijke feed, op een witte achtergrond. */
.social-band{background:#fff;color:var(--ink);border-top:1px solid var(--line);}
.social-band .eyebrow,.social-intro,.social-band .instagram-preview p,.social-band .instagram-preview span,.instagram-position{color:var(--ink-2);}
.social-band a{color:inherit;}
.social-band .instagram-slider-controls button{color:var(--ink);border-color:var(--line);}
.instagram-previews{scrollbar-color:#999 transparent;gap:28px;}
.instagram-preview{flex-basis:calc((100% - 56px)/3);}
.instagram-preview img{height:auto;width:100%;background:transparent;object-fit:initial;}
.instagram-live-post p{font:400 .82rem/1.6 var(--sans);overflow-wrap:anywhere;}
.instagram-load{padding:28px 0;color:var(--ink-2);}
@media(max-width:750px){.instagram-preview{flex-basis:76%;}.instagram-previews{gap:20px;}}

/* Foto’s met Patrick behouden het hele oorspronkelijke kader op elke schermbreedte. */
.editorial-banner.banner-person{overflow:visible;}
.editorial-banner.banner-person img,.story-portrait img,.contact-portrait img,img[src*="atelier-patrick-"]{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:initial!important;transform:none!important;}

/* Compacte portretbanners: behoud het gezicht met een gerichte uitsnede. */
.editorial-banner.banner-person{overflow:hidden;}
.editorial-banner.banner-person img{height:clamp(240px,23vw,380px)!important;object-fit:cover!important;object-position:50% 30%!important;}
.editorial-banner.banner-person img[src*="bonsaituin"]{height:clamp(220px,21vw,320px)!important;object-position:50% 16%!important;}
@media(min-width:2200px){.editorial-banner.banner-person img{height:17vw!important;}.editorial-banner.banner-person img[src*="bonsaituin"]{height:14vw!important;}}
@media(max-width:600px){.editorial-banner.banner-person img{height:240px!important;}.editorial-banner.banner-person img[src*="bonsaituin"]{height:220px!important;}}

.home-title h1 em{font-style:normal;}