/* ===================================================================
   FEMPIRE TATTOO STUDIO — styles
   Donker, elegant, gothic-feminine
   =================================================================== */

:root {
  --black:      #0b0a0c;
  --black-2:    #121014;
  --panel:      #17141a;
  --panel-2:    #1e1a22;
  --line:       #2c2630;
  --bone:       #f4eef2;
  --muted:      #d4ccd9;
  --muted-2:    #a99fb0;
  --wine:       #d94f9e;   /* pink accent (borders/details) */
  --wine-2:     #ff5fb0;   /* bright neon pink */
  --rose:       #ff9ed6;   /* light glowy pink */
  --gold:       #cbb27a;
  --glow:       rgba(255, 95, 176, .55);
  --glow-soft:  rgba(255, 143, 206, .35);

  --font-body:   "Jost", system-ui, sans-serif;
  --font-serif:  "Cormorant Garamond", Georgia, serif;
  --font-logo:   "Cinzel", serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95rem 1.9rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .35s var(--ease);
}
.btn--primary {
  background: #fdfbfc;
  color: #1a1014;
  border-color: var(--wine-2);
  box-shadow: 0 0 18px var(--glow), 0 0 4px var(--glow), inset 0 0 0 1px rgba(255,95,176,.25);
}
.btn--primary:hover {
  background: #fff;
  color: #14090f;
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: 0 0 32px var(--glow), 0 0 10px var(--glow-soft), inset 0 0 0 1px rgba(255,143,206,.4);
}
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--rose);
  color: var(--rose);
}
.btn--full { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11,10,12,.85);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-logo);
  font-weight: 600;
  letter-spacing: .22em;
  font-size: 1.05rem;
}
.nav__bat { font-size: 1rem; filter: grayscale(.2); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__links a {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__cta {
  color: var(--bone) !important;
  border: 1px solid var(--line);
  padding: .55rem 1.1rem;
  border-radius: 2px;
  transition: all .3s var(--ease);
}
.nav__cta:hover { border-color: var(--wine-2); box-shadow: 0 0 16px var(--glow); color: var(--rose) !important; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__burger span {
  width: 24px; height: 2px;
  background: var(--bone);
  transition: .3s var(--ease);
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #1b1119 0%, transparent 55%),
    var(--black);
}
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 50% 40%, rgba(142,30,60,.25), transparent 70%);
  pointer-events: none;
  animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.hero__content { position: relative; max-width: 760px; }
.hero__eyebrow {
  font-size: .78rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.6rem;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: .95;
  letter-spacing: .01em;
}
.hero__title span:first-child {
  display: block;
  font-size: clamp(4rem, 15vw, 10rem);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #ffd9ec 55%, #ff5fb0 135%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-sub {
  display: block;
  /* Stond op 1.1-1.8rem in --muted met .55em spatiëring. Naast een script
     "Fempire" van ~153px was dat 0,19x zo groot, en bij die spatiëring vallen
     de woorden uit elkaar tot losse letters. Contrast was niet het probleem
     (10:1 door de scrim eronder) — grootte, gewicht en tracking wel. */
  /* De bovengrens knipt pas in boven ~617px schermbreedte; daaronder bepaalt
     7vw de maat, dus telefoons blijven ongemoeid als deze waarde verandert. */
  font-size: clamp(1.35rem, 7vw, 2.7rem);
  letter-spacing: .27em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 600;
  margin-top: .6rem;
  /* Hier stond padding-left gelijk aan de letter-spacing, bedoeld om de spatie
     ná de laatste letter te compenseren. Die spatie knipt de browser aan het
     eind van de regel zelf al weg, dus de padding duwde de tekst juist een
     halve tracking naar rechts (gemeten: 6,8px). Zonder staat hij gecentreerd. */
}
.hero__lead {
  max-width: 540px;
  margin: 2rem auto 2.6rem;
  color: var(--muted);
  font-size: 1.08rem;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
}
.hero__scroll span {
  display: block;
  width: 22px; height: 36px;
  border: 1px solid var(--muted-2);
  border-radius: 12px;
  position: relative;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 7px;
  background: var(--rose);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll 1.8s var(--ease) infinite;
}
@keyframes scroll { 0% { opacity:0; transform: translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform: translate(-50%,12px);} }

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--black-2);
  overflow: hidden;
  padding: 1rem 0;
}
.marquee__track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee__track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--muted);
}
.marquee__track span:nth-child(even) { color: var(--wine-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section base ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6.5rem 1.5rem;
}
.section__head { max-width: 640px; margin-bottom: 3.5rem; }
.section__eyebrow {
  font-size: .76rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1rem;
}
.section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
}
.section__title--sm { font-size: clamp(1.7rem, 3.5vw, 2.2rem); }
.section__title em { font-style: italic; color: var(--rose); }

/* Gecentreerde sectiekop (artiestenrij) */
.section__head--midden { text-align: center; margin-left: auto; margin-right: auto; }
/* Zelfde eyebrow-vormtaal, alleen groter — op verzoek van Chan */
.section__eyebrow--titel {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  margin-bottom: 1.3rem;
}
.section__intro {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- Over ---------- */
.over__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}
/* De tekst blijft staan terwijl de drie kaartjes erlangs schuiven. De 100px
   is de vaste navigatiebalk (77px) plus wat lucht — zelfde offset als de
   artiestfoto op de detailpagina's. */
.over__text { position: sticky; top: 100px; }
.over__lead {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--bone);
  margin-bottom: 1.4rem;
}
.over__lead em { color: var(--rose); font-style: italic; }
.over__text p { color: var(--muted); margin-bottom: 1.1rem; }
.over__pillars { list-style: none; display: grid; gap: 1.4rem; }
.over__pillars li {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.6rem;
  background: linear-gradient(180deg, var(--panel), var(--black-2));
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.over__pillars li:hover { border-color: var(--wine); transform: translateX(6px); }
.over__num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--wine-2);
  font-size: 1.1rem;
}
.over__pillars h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: .3rem 0 .4rem;
}
.over__pillars p { color: var(--muted); font-size: .95rem; }

/* ---------- Artists ---------- */
.artists__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.artist {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.artist:hover {
  transform: translateY(-6px);
  border-color: var(--wine);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.8);
}
.artist__photo {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 30%, rgba(217,138,164,.18), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--black));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.artist__photo::after {
  content: attr(data-initial);
  font-family: var(--font-serif);
  font-size: 6rem;
  color: rgba(243,238,242,.08);
  font-weight: 600;
}
.artist__body { padding: 1.4rem 1.5rem 1.7rem; }
.artist__name {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 500;
}
.artist__role {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  margin: .2rem 0 .8rem;
}
.artist__bio { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.artist__link {
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--bone);
  border-bottom: 1px solid var(--wine);
  padding-bottom: 2px;
  transition: color .3s var(--ease);
}
.artist__link:hover { color: var(--rose); }
.artist--join {
  display: flex;
  align-items: center;
  border-style: dashed;
  background: transparent;
}

/* ---------- Werk / gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery__item {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--panel-2), var(--black));
  transition: transform .4s var(--ease);
}
.gallery__item::before {
  content: "🦇";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: .12;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.gallery__item:nth-child(odd)::before { content: "✦"; }
.gallery__item:hover { transform: scale(1.015); }
.gallery__item:hover::before { opacity: .3; transform: scale(1.15); }
.work__cta { text-align: center; margin-top: 2.5rem; }

/* ---------- Info ---------- */
.info { background: var(--black-2); max-width: none; }
.info__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
}
/* Openingstijden blijven staan terwijl je door de huisregels scrolt.
   align-items: start is hierbij nodig: standaard rekken grid-kolommen tot
   dezelfde hoogte, en dan valt er niets vast te zetten. */
.info__grid { align-items: start; }
#openingstijden { position: sticky; top: 100px; }

.hours { list-style: none; margin: 1.8rem 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
}
.hours li span:first-child { color: var(--muted); }
.hours li span:last-child { color: var(--bone); letter-spacing: .02em; }

.rules { list-style: none; display: grid; gap: 1.3rem; margin: 1.8rem 0; }
.rules li {
  padding-left: 1.4rem;
  border-left: 2px solid var(--wine);
}
.rules h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: .2rem;
}
.rules p { color: var(--muted); font-size: .93rem; }
.info__note {
  color: var(--muted-2);
  font-size: .9rem;
  font-style: italic;
  font-family: var(--font-serif);
}

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.contact__block { margin-bottom: 2rem; }
.contact__block h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: .6rem;
}
.contact__block p { color: var(--muted); }
.contact__block a { color: var(--rose); transition: color .3s; }
.contact__block a:hover { color: var(--bone); }
.contact__maplink {
  display: inline-block;
  margin-top: .7rem;
  font-size: .85rem;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--wine);
  padding-bottom: 2px;
}
.contact__small { font-size: .85rem; color: var(--muted-2); margin-top: .4rem; }
.contact__map {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  height: 240px;
}
.contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.9) hue-rotate(180deg); }

/* Form */
.contact__form {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.2rem;
  background: linear-gradient(180deg, var(--panel), var(--black-2));
}
.contact__form h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .85rem 1rem;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wine-2);
}
.field textarea { resize: vertical; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__note {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--rose);
  min-height: 1.2em;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--black-2);
  padding: 3.5rem 1.5rem 2rem;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-logo);
  letter-spacing: .22em;
  flex-wrap: wrap;
}
.footer__brand p {
  width: 100%;
  font-family: var(--font-body);
  letter-spacing: normal;
  color: var(--muted-2);
  font-size: .85rem;
  margin-top: .4rem;
}
.footer__heading {
  font-size: .68rem;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .9rem;
}
.footer__links { display: flex; flex-direction: column; gap: .35rem; }
.footer__links a {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
  transition: color .3s;
}
.footer__links a:hover { color: var(--rose); }
/* Niet de kop meenemen: die regel was specifieker dan .footer__heading en
   maakte "Bezoek ons" groter dan de andere koppen. */
.footer__address p:not(.footer__heading) { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.footer__address a { color: var(--muted); transition: color .3s; }
.footer__address a:hover { color: var(--rose); }
.footer__hours { list-style: none; display: grid; gap: .1rem; }
/* Geen space-between: dat duwde de tijden 272px naar rechts. Vaste kolom
   voor de dag, de tijd sluit er direct op aan. */
.footer__hours li {
  display: flex;
  gap: .8rem;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--muted);
}
.footer__hours li > span:first-child { min-width: 4.4rem; }
.footer__hours li span:last-child { color: var(--muted-2); }
.footer__social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__social a:hover { color: var(--rose); border-color: var(--rose); }
.footer__social svg { width: 16px; height: 16px; }
.footer__copy {
  max-width: var(--maxw);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: .82rem;
}
@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .over__grid, .info__grid, .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .over__text { position: static; }
  #openingstijden { position: static; }
  .artists__grid, .gallery { grid-template-columns: repeat(2, 1fr); }
}
/* Uitschuifmenu vanaf tablet: op 768-1024px past het horizontale menu wel,
   maar staat het te krap tegen het logo en de boekknop aan. */
@media (max-width: 1024px) {
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem 2.2rem;
    background: var(--panel);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
  }
  .nav__links.open { transform: none; }
  .nav__burger { display: flex; }
  /* backdrop-filter on the nav breaks position:fixed of the slide-out menu
     (it becomes the containing block). Use a solid bg instead. */
  .nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11, 10, 12, .96);
  }
}
@media (max-width: 720px) {
  .section { padding: 4.5rem 1.3rem; }
  .over__lead { font-size: 1.3rem; }
}
@media (max-width: 520px) {
  .artists__grid, .gallery { grid-template-columns: 1fr; }
  .field--split { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================================================================
   MULTI-PAGE ADDITIONS
   =================================================================== */

/* Real images in artist cards */
.artist__img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(.15) contrast(1.02);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.artist:hover .artist__img { filter: none; transform: scale(1.04); }
.artist__photo-wrap { overflow: hidden; }

/* Active nav state */
.nav__links a[aria-current="page"] { color: var(--rose); }

/* ---------- Sub-page hero ---------- */
.page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 1.5rem 3rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15) brightness(.78);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,10,12,.15) 0%,
    rgba(11,10,12,.35) 45%,
    rgba(11,10,12,.72) 100%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.page-hero__eyebrow {
  font-size: .78rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--rose); margin-bottom: .8rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.85);
}
.page-hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1;
  color: var(--bone);
  text-shadow: 0 2px 28px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.6);
}
.page-hero__sub {
  color: #d8ccd4; margin-top: 1rem; max-width: 560px;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}

/* ---------- Home CTA-band ---------- */
.home-cta-band {
  margin-top: 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(rgba(11,10,12,.82), rgba(11,10,12,.92)),
    var(--panel);
  text-align: center;
  padding: 5rem 1.5rem;
}
.home-cta-band h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem,5vw,3rem); margin-bottom: 1.5rem;
}
.home-cta-band p { color: var(--muted); max-width: 480px; margin: 0 auto 2rem; }
.section__link {
  display: inline-block; margin-top: 2.5rem;
  font-size: .82rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--bone); border-bottom: 1px solid var(--wine); padding-bottom: 3px;
  transition: color .3s var(--ease);
}
.section__link:hover { color: var(--rose); }

/* ---------- Studiogalerij ----------
   Drie kolommen waarvan de middelste blijft staan terwijl de buitenste
   doorscrollen. Puur position:sticky, geen bibliotheek. Op mobiel twee
   kolommen (was één, dus schermbrede foto's) en niets vastgezet. */
.studio-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.studio-gallery__kolom { display: grid; gap: 1rem; }
.studio-gallery__kolom--vast {
  position: sticky;
  top: 100px;
  /* Hoogte volgt de vierkante foto's, zodat die net zo groot zijn als de
     rest. Alleen op lage schermen krimpt hij, anders zou de kolom hoger
     worden dan het scherm en kan hij niet vastzitten. */
  max-height: calc(100vh - 140px);
  grid-template-rows: repeat(2, 1fr);
}
/* Alle foto's even hoog en breed: vierkante cellen met object-fit cover,
   zodat staand en liggend beeld hetzelfde formaat krijgen. */
.studio-gallery__item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: var(--panel);
}
.studio-gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.15);
  transition: filter .4s var(--ease), transform .5s var(--ease);
}
/* Gefaseerd binnenkomen: geeft ook op tablet en telefoon beweging, waar de
   vastgezette kolom uit staat. Elke foto komt iets later dan de vorige. */
.studio-gallery__item.reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* Krimpt alleen mee als de kolom door max-height wordt ingeperkt. */
.studio-gallery__kolom--vast .studio-gallery__item { min-height: 0; }
.studio-gallery__item:hover img { filter: none; transform: scale(1.03); }

/* ---------- Work gallery (real images) ---------- */
.gallery--real { grid-template-columns: repeat(4, 1fr); }
.gallery--real .g-item {
  aspect-ratio: 1; overflow: hidden; border-radius: 4px;
  border: 1px solid var(--line); cursor: zoom-in; background: var(--panel);
}
.gallery--real .g-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.12); transition: transform .5s var(--ease), filter .5s var(--ease);
}
.gallery--real .g-item:hover img { transform: scale(1.06); filter: none; }

/* ---------- Stijlkiezer op de artiestpagina's ----------
   Uitklapmenu in plaats van een rij chips: label, knop met de huidige keuze
   en een chevron, en een lijst met aantallen en een vinkje bij de selectie. */
.stijlkiezer { position: relative; max-width: 300px; margin: 0 0 1.8rem; }
.stijlkiezer__label {
  display: block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .5rem;
}
.stijlkiezer__knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem .9rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.stijlkiezer__knop:hover { border-color: var(--wine-2); }
.stijlkiezer__knop[aria-expanded="true"] {
  border-color: var(--wine-2);
  box-shadow: 0 0 14px var(--glow);
}
.stijlkiezer__knop:focus-visible { outline: 1px solid var(--rose); outline-offset: 2px; }
.stijlkiezer__pijl {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  color: var(--muted-2);
  transition: transform .3s var(--ease);
}
.stijlkiezer__knop[aria-expanded="true"] .stijlkiezer__pijl { transform: rotate(180deg); }

.stijlkiezer__lijst {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0; right: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: .3rem;
  max-height: 17rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.stijlkiezer__lijst[hidden] { display: none; }
.stijlkiezer__optie {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 2rem .55rem .7rem;
  border-radius: 3px;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.stijlkiezer__optie:hover,
.stijlkiezer__optie.is-actief { background: var(--panel-2); color: var(--bone); }
.stijlkiezer__optie[aria-selected="true"] { color: var(--bone); }
.stijlkiezer__naam { flex: 1; }
.stijlkiezer__n { color: var(--muted-2); font-size: .72rem; }
.stijlkiezer__vink {
  position: absolute;
  right: .6rem;
  width: 13px; height: 13px;
  color: var(--wine-2);
  opacity: 0;
}
.stijlkiezer__optie[aria-selected="true"] .stijlkiezer__vink { opacity: 1; }

.g-item.is-hidden { display: none; }
.werk-leeg { color: var(--muted-2); padding: 2rem 0; }

/* ---------- FAQ-accordeon ----------
   Native <details>/<summary>: werkt zonder JavaScript en de antwoorden staan
   in de bron, ook dicht — dus crawlers lezen ze gewoon. */
.faq { max-width: 760px; }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: var(--bone);
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--wine-2);
  transition: transform .3s var(--ease);
}
.faq__item[open] summary { color: var(--rose); }
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--rose); }
.faq__item summary:focus-visible { outline: 1px solid var(--rose); outline-offset: 3px; }
.faq__antwoord {
  padding: 0 0 1.3rem;
  max-width: 62ch;
}
.faq__antwoord p { color: var(--muted); font-size: .98rem; }
.faq__slot { margin-top: 2.5rem; color: var(--muted); max-width: 60ch; }
.faq__slot .section__link { margin-top: 0; }

/* ---------- Artist detail ---------- */
.artist-detail {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem;
  align-items: start; margin-bottom: 4rem;
}
.artist-detail__photo {
  width: 100%; border-radius: 6px; border: 1px solid var(--line);
  filter: grayscale(.1); position: sticky; top: 100px;
}
.artist-detail__name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.4rem,6vw,4rem); line-height: 1;
}
.artist-detail__handle {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose); margin: .6rem 0 1.6rem;
}
.artist-detail__bio p { color: var(--muted); margin-bottom: 1.1rem; font-size: 1.05rem; }
.artist-detail__bio .lead {
  font-family: var(--font-serif); font-size: 1.5rem; color: var(--bone);
  line-height: 1.4;
}
.artist-detail__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,5,7,.95); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 3rem 1.5rem;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw; max-height: 86vh; border-radius: 4px;
  border: 1px solid var(--line);
}
.lightbox__close {
  position: absolute; top: 1.4rem; right: 1.6rem;
  background: none; border: 0; color: var(--bone); font-size: 2rem;
  cursor: pointer; line-height: 1;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid var(--line); color: var(--bone);
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font-size: 1.4rem; transition: border-color .3s, color .3s;
}
.lightbox__nav:hover { border-color: var(--rose); color: var(--rose); }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

/* ---------- Breadcrumb ---------- */
.crumbs {
  max-width: var(--maxw); margin: 0 auto; padding: 6.5rem 1.5rem 0;
  font-size: .82rem; letter-spacing: .05em; color: var(--muted-2);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--rose); }

@media (max-width: 900px) {
  /* Geen vastgezette kolom meer, en de kolomblokken lossen op: met
     display:contents worden de foto's zélf de rastercellen. Anders vallen
     drie blokken in een raster van twee en blijft er een gat over. */
  /* Drie kolommen, gelijk aan de telefoon — twee gaf te grote foto's. */
  .studio-gallery { grid-template-columns: repeat(3, 1fr); }
  .studio-gallery__kolom { display: contents; }
  .studio-gallery__kolom--vast { position: static; height: auto; }
  .studio-gallery__kolom--vast .studio-gallery__item { aspect-ratio: 1; height: auto; }
  .gallery--real { grid-template-columns: repeat(3, 1fr); }
  .artist-detail { grid-template-columns: 1fr; gap: 2rem; }
  .artist-detail__photo { position: static; max-width: 420px; }
}
@media (max-width: 560px) {
  /* Drie op een rij: kleinere foto's, netter beeld op een telefoon.
     Vierkante cellen, anders loopt de rij scheef zodra er een liggende
     foto tussen de staande staat. */
  .studio-gallery { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .gallery--real { grid-template-columns: repeat(2, 1fr); }
}

/* Hero scrim for text contrast over real photo */
.hero > .page-hero__bg,
.hero .hero__bg-stack .page-hero__bg { filter: grayscale(.3) brightness(.45); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(65% 60% at 50% 52%, rgba(11,10,12,.5), rgba(11,10,12,.86));
}
/* Beide moeten bóven de scrim (z-index 1) staan. Ze stonden hier samen op
   position: relative, maar de pijl heeft zijn eigen "position: absolute"
   (bottom 2rem, gecentreerd) uit de regel hierboven — die werd hierdoor
   overschreven, waardoor de pijl in de normale flow naast "Tattoo Studio"
   belandde in plaats van onderaan de hero. Alleen de z-index doorgeven. */
.hero__content { position: relative; z-index: 2; }
.hero__scroll { z-index: 2; }

/* ===================================================================
   NEON WINGS LOGO
   =================================================================== */
/* black background of the neon art drops out with screen blend */
.nav__wings, .footer__wings, .hero__wings {
  mix-blend-mode: screen;
  display: block;
}
.nav__wings {
  height: 30px; width: auto;
  filter: drop-shadow(0 0 6px rgba(217,63,120,.5));
}
.nav__logo { gap: .7rem; }
.hero__wings {
  width: min(560px, 82%);
  max-height: 20vh;
  object-fit: contain;
  margin: 0 auto 1.4rem;
  filter: drop-shadow(0 0 26px rgba(217,63,120,.45));
  animation: wings-flicker 6s ease-in-out infinite;
}
@keyframes wings-flicker {
  0%,100% { opacity: 1; }
  48% { opacity: 1; }
  49% { opacity: .78; }
  50% { opacity: 1; }
  70% { opacity: .92; }
}
.footer__wings { height: 40px; width: auto; margin-bottom: .6rem; }

@media (max-width: 560px) {
  .nav__wings { height: 24px; }
  .hero__wings { width: 90%; }
}

/* ---------- Plain house-rules list (verbatim original) ---------- */
.rules--plain li { padding: .2rem 0 .2rem 1.4rem; border-left: 2px solid var(--wine); }
.rules--plain li p { color: var(--muted); font-size: .96rem; }
.rules--plain li::marker { content: none; }

/* Glowy pink accents to match the neon logo */
.section__eyebrow, .hero__eyebrow, .page-hero__eyebrow { text-shadow: 0 0 14px var(--glow-soft); }
.artist__link, .contact__block a, .contact__maplink { transition: color .3s var(--ease), text-shadow .3s var(--ease); }
.artist__link:hover, .contact__maplink:hover { text-shadow: 0 0 12px var(--glow); }

/* ===================================================================
   I18N — language toggle (NL default, EN optional)
   =================================================================== */
.lang { display: contents; }
.lang-en { display: none; }
html[data-lang="en"] .lang-nl { display: none; }
html[data-lang="en"] .lang-en { display: contents; }

.lang-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem .8rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s var(--ease);
  line-height: 1;
}
.lang-toggle:hover {
  border-color: var(--wine-2);
  color: var(--rose);
  box-shadow: 0 0 14px var(--glow-soft);
}

/* Booking form helper text */
.form__help {
  color: var(--muted);
  font-size: .88rem;
  margin: -.6rem 0 1.4rem;
  line-height: 1.5;
}

/* ---------- DEMO side badge ---------- */
.demo-badge {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  z-index: 90;
  background: linear-gradient(180deg, var(--wine-2), var(--wine));
  color: #fff;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
  padding: 1.1rem .5rem;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 0 20px var(--glow), 0 4px 14px rgba(0,0,0,.4);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 720px) {
  .demo-badge { font-size: .62rem; letter-spacing: .28em; padding: .8rem .35rem; }
}

/* ---------- Artist detail placeholder photo ---------- */
.artist-detail__photo--ph {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 100px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,143,206,.14), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--black));
}
.artist-detail__photo--ph::after {
  content: attr(data-initial);
  font-family: var(--font-serif);
  font-size: 8rem;
  font-weight: 600;
  color: rgba(243,238,242,.10);
}
@media (max-width: 900px) {
  .artist-detail__photo--ph { position: static; max-width: 420px; }
}

/* ===================================================================
   SCRIPT LOGO FONT — only the logo wordmark + homepage hero "Fempire"
   (matches the shop window calligraphy)
   =================================================================== */
.nav__word {
  font-family: "Great Vibes", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1.95rem;
  line-height: 1;
  padding-bottom: .1em; /* room for the script descenders */
}
.hero__title span:first-child {
  font-family: "Great Vibes", cursive;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0;
  font-size: clamp(3.2rem, min(20vw, 17vh), 13rem);
  line-height: 1.05;
  padding-bottom: .12em;
  transform: translateX(-2.5%); /* optical balance for the script flourish */
}
@media (max-width: 560px) {
  .nav__word { font-size: 1.7rem; }
}

/* ===================================================================
   HERO-ACHTERGROND — traag wisselende stapel genezen werk
   Vervangt de enkele statische foto; de rest van de hero blijft zoals hij was.
   =================================================================== */
.hero__bg-stack { position: absolute; inset: 0; z-index: 0; }
.hero__bg-stack .page-hero__bg {
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__bg-stack .page-hero__bg.is-active { opacity: 1; }
/* Trage Ken Burns-inzoom op het beeld dat in beeld staat. */
.hero__bg-stack .page-hero__bg.is-active { animation: hero-kenburns 20s var(--ease) forwards; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  .hero__bg-stack .page-hero__bg { transition: none; }
  .hero__bg-stack .page-hero__bg.is-active { animation: none; transform: none; }
}

/* Parallax: de hero-achtergrond loopt achter op de scroll, de inhoud gaat mee. */
.hero__bg-stack { will-change: transform; }
.hero .hero__content { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg-stack, .hero .hero__content { transform: none !important; }
}

/* Op lage schermen mag de hero niet buiten beeld lopen. */
@media (max-height: 820px) {
  .hero { padding-top: 5rem; padding-bottom: 3rem; }
  .hero__wings { margin-bottom: .8rem; max-height: 17vh; }
  .hero__lead { margin: 1.2rem auto 1.6rem; }
}

/* ===================================================================
   STIJLKIEZER + FILTERBAAR PORTFOLIO + STUDIO
   Zelfde vormtaal als de rest: 4px hoeken, --line randen, roze gloed.
   =================================================================== */

/* ---------- Studio ---------- */
.studio__note {
  margin-top: 2rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- Intro: reveal per woord ---------- */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--w, 0) * 45ms);
}
.portfolio__tekst.in .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .word { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   ARTIESTENRIJ
   Zes gekantelde fotokaarten naast elkaar over de volle breedte. Ze
   komen scheef en van onderen binnenzweven en trekken recht bij hover.
   De veer zit in de bezier-curve, geen framer-motion nodig.
   =================================================================== */
.fan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Geen gap: de kaarten schuiven met een negatieve marge over elkaar.
     Die teruggewonnen ruimte gaat naar de kaartbreedte, dus ze worden
     groter én overlappen. */
  gap: 0;
  padding: 2rem 18px;
}
.fan__card:first-child { margin-left: 0; }
.fan__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin-left: -60px;
  /* Links ligt bovenop: zonder dit tekent de browser latere elementen
     vóór eerdere, en overlapt de rechterkaart de linker. */
  z-index: calc(10 - var(--i));
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transform-origin: 50% 50%;
  /* startstand: recht, iets lager en onzichtbaar */
  transform: rotate(0deg) translateY(28px);
  opacity: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  transition: transform .75s cubic-bezier(.34, 1.56, .64, 1),
              opacity .5s var(--ease),
              box-shadow .4s var(--ease),
              border-color .4s var(--ease);
  transition-delay: calc(var(--i) * 80ms);
}
.fan__card.is-in {
  opacity: 1;
  transform: rotate(var(--r)) translateY(var(--y));
}
.fan__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(.35) contrast(1.03);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
/* Hover: rechttrekken, optillen, naar voren, kleur terug. */
.fan__card.is-in:hover,
.fan__card.is-in:focus-visible {
  transform: rotate(0deg) translateY(calc(var(--y) - 14px)) scale(1.07);
  z-index: 20;
  border-color: var(--wine-2);
  box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 0 24px var(--glow);
  transition-delay: 0ms;
  outline: none;
}
.fan__card:hover img,
.fan__card:focus-visible img { filter: grayscale(0) contrast(1.03); }

/* Naam staat altijd in de HTML en altijd in beeld — ook voor crawlers. */
.fan__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Nu links bovenop ligt, is de LINKERrand van elke kaart bedekt door de
     buurman. De naam schuift daarom naar rechts, waar de kaart vrij is.
     Linkerpadding is ruimer dan de grootste overlap (~82px). */
  padding: 2rem .9rem .6rem 4.5rem;
  text-align: right;
  background: linear-gradient(to top, rgba(11,10,12,.94) 30%, transparent);
  pointer-events: none;
}
.fan__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--bone);
  line-height: 1.15;
}
.fan__role {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: .1rem;
}
.fan__card:hover .fan__role { color: var(--rose); }

/* Zes naast elkaar wordt te smal: eerst drie, dan twee. */
@media (max-width: 900px) {
  .fan { flex-wrap: wrap; gap: 1rem; }
  .fan__card, .fan__card:first-child { flex: 0 0 calc(33.333% - .7rem); margin-left: 0; }
  /* Zonder overlap is er niets bedekt, dus de naam mag weer gewoon links. */
  .fan__label { padding: 2rem .8rem .6rem; text-align: left; }
}
@media (max-width: 560px) {
  .fan__card, .fan__card:first-child { flex: 0 0 calc(50% - .5rem); }
  .fan__name { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fan__card { transition: none; opacity: 1; transform: rotate(var(--r)); }
  .fan__card:hover { transform: rotate(var(--r)); }
}

/* Nog in te vullen door de studio — bewust zichtbaar gemarkeerd. */
.todo { color: var(--rose); font-style: normal; border-bottom: 1px dashed var(--wine-2); }

/* ===================================================================
   OVER FEMPIRE
   De "about"-sectie direct na de hero: gecentreerd, effen achtergrond,
   grote kop + omschrijving + de twee knoppen die uit de hero komen.
   Leidt direct naar de stijlstrook eronder.
   =================================================================== */
/* Over Fempire en de fotostrook vormen samen één vast blok: de strook
   hoort bij dit stuk en mag er dus niet overheen schuiven. */
.vast-blok {
  position: sticky;
  top: 0;
  z-index: 0;
  background: var(--black);
}
.over-fempire {
  text-align: center;
  /* Tekst hoger in beeld: geen verticale centrering, korte bovenmarge. */
  padding: 3.5rem 1.5rem 0;
}
.over-fempire__inner { max-width: 900px; margin: 0 auto; }
.over-fempire .section__title { margin: 1.2rem 0 1.8rem; }
/* Omschrijving en knoppen hergebruiken .hero__lead / .hero__actions —
   ze komen letterlijk uit de hero, geen dubbele stijl nodig. */
.over-fempire .hero__lead { margin: 0 auto 2.4rem; }

/* ===================================================================
   STIJLSTROOK
   Vervangt de filterbare portfolio-grid: alle werkfoto's op een rij,
   elk met een stijllabel, die rechts de viewport uit loopt. Bladeren,
   niet filteren — scroll-snap houdt het grijpbaar.
   =================================================================== */
.stijlstrook-wrap { padding: 97px 0 calc(1.5rem + 50px); overflow: hidden; }
.stijlstrook {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 1.5rem;
  margin-right: calc(50% - 50vw);
  scrollbar-width: thin;
  scrollbar-color: var(--wine) transparent;
}
.stijlstrook::-webkit-scrollbar { height: 6px; }
.stijlstrook::-webkit-scrollbar-thumb { background: var(--wine); border-radius: 3px; }
.stijlstrook__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 260px);
  /* De eigen hoogte, maar nooit meer dan er ná de tekst erboven overblijft.
     Het afgetrokken bedrag is de gemeten hoogte van kop, tekst, knoppen en
     tussenruimte plus ~50px lucht. Een vaste vh-grens kapte de foto's af
     terwijl er nog ruimte over was. */
  height: max(150px, min(var(--h, 320px), calc(100vh - 591px)));
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--panel);
  cursor: zoom-in;
}
.stijlstrook__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.stijlstrook__item:hover img { transform: scale(1.06); filter: grayscale(0); }
.stijlstrook__naam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.8rem .8rem .7rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  text-align: left;
  background: linear-gradient(to top, rgba(11,10,12,.92) 25%, transparent);
}
/* De tegel is nu een knop: hij opent alle foto's van die stijl. */
.stijlstrook__item {
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.stijlstrook__item:hover,
.stijlstrook__item:focus-visible {
  border-color: var(--wine-2);
  box-shadow: 0 0 22px var(--glow);
  outline: none;
}
.stijlstrook__n {
  color: var(--muted-2);
  margin-left: .35em;
  letter-spacing: .06em;
}
.stijlstrook__item:hover .stijlstrook__n { color: var(--rose); }
/* ---------- Stijl-popup ----------
   Een modaal venster met een raster van alle voorbeelden van die stijl.
   Elke kaart noemt de artiest en linkt door naar haar pagina. De lijsten
   staan in de HTML (crawlbaar) maar zijn verborgen tot je ze opent, dus de
   foto's laden pas dan. */
.stijl-popup {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(11, 10, 12, .84);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.stijl-popup[hidden] { display: none; }
.stijl-popup__paneel {
  width: min(880px, 100%);
  max-height: min(78vh, 700px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}
.stijl-popup__kop {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.stijl-popup__titel {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--bone);
  line-height: 1.1;
}
.stijl-popup__n {
  flex: 1;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.stijl-popup__sluit {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0 .2rem;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.stijl-popup__sluit:hover { color: var(--rose); }
.stijl-popup__sluit:focus-visible { outline: 1px solid var(--rose); outline-offset: 3px; }
.stijl-popup__body { overflow-y: auto; padding: 1.2rem 1.3rem 1.5rem; }

.stijl-pool { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.stijl-pool[hidden] { display: none; }
.stijl-kaart {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black);
}
.stijl-kaart img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.12);
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.stijl-kaart:hover img,
.stijl-kaart:focus-visible img { transform: scale(1.06); filter: none; }
.stijl-kaart__naam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem .6rem .5rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(11,10,12,.94) 30%, transparent);
  transition: color .3s var(--ease);
}
.stijl-kaart:hover .stijl-kaart__naam,
.stijl-kaart:focus-visible .stijl-kaart__naam { color: var(--rose); }
.stijl-kaart:focus-visible { outline: 1px solid var(--rose); outline-offset: 2px; }

@media (max-width: 720px) {
  .stijl-pool { grid-template-columns: repeat(3, 1fr); }
  .stijl-popup { padding: .8rem; }
  .stijl-popup__paneel { max-height: 86vh; }
}
@media (max-width: 460px) {
  .stijl-pool { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   PORTFOLIO
   Opzet uit Chan's referentie: brede kop bovenaan, daaronder tekst +
   knop links en de fotogrid rechts. Geen kaart/paneel eromheen — het
   staat plat op de achtergrond, zoals in het voorbeeld.
   =================================================================== */
.portfolio__kop { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
/* Groter dan een gewone sectiekop, maar hetzelfde lettertype (Cormorant). */
.portfolio__titel { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.portfolio__onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.portfolio__tekst p {
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
  max-width: 46ch;
}
.portfolio__naam {
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 1.6rem 0 0;
}
.portfolio__naam a { color: var(--bone); border-bottom: 1px solid var(--wine); padding-bottom: 2px; }
.portfolio__naam a:hover { color: var(--rose); border-color: var(--rose); }
.portfolio__naam span { margin: 0 .4em; color: var(--line); }
.portfolio__tekst .btn { margin-top: 1.8rem; }
.portfolio__tekst.in .word { opacity: 1; transform: none; }
/* Smallere rechterkolom: twee op een rij en staand, zoals in het voorbeeld. */
.portfolio__fotos { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.portfolio__fotos .g-item { aspect-ratio: 4 / 5; }
/* De fotokolom loopt door over de volgende sectie heen: de negatieve
   ondermarge laat 'm minder ruimte innemen dan hij hoog is, de z-index
   zorgt dat hij bovenop het blok eronder valt in plaats van eronder. */
.portfolio { position: relative; z-index: 3; }
/* De sectie is 1180px breed maar moet de fotostrook afdekken die van rand
   tot rand loopt. Zonder volle-breedte achtergrond lekt die strook links en
   rechts door de marges heen. De overhangende foto's vallen buiten dit
   vlak, dus die blijven wel over het quote-blok liggen. */
.portfolio::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--black);
  /* Afgeronde bovenhoeken laten dit als een schuivend paneel lezen in
     plaats van een willekeurige snee door de knoppen eronder. */
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  z-index: -1;
}
.portfolio__fotos { position: relative; margin-bottom: -17rem; }


/* ===================================================================
   VOL-BREEDTE MOMENT
   Eén foto rand-tot-rand met een korte regel erover — het hardste
   breekpunt van de kolom, tussen Verhaal en Artiesten.
   =================================================================== */
.vol-breedte {
  /* Blijft staan terwijl Meet the team eroverheen schuift. */
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 72vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Zelfde linkerlijn als de andere secties. 100% is hier de eigen breedte
     (100vw), dus scrollbar-veilig. */
  padding-left: max(1.5rem, calc((100% - var(--maxw)) / 2 + 1.5rem));
  overflow: hidden;
}
.vol-breedte img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.25) brightness(.5);
}
.vol-breedte::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,12,.35), rgba(11,10,12,.65));
}
/* Een echte quote: aanhalingstekens en volledig cursief. */
.vol-breedte__quote {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--bone);
}
/* De maat hoort op de regel zelf: `ch` rekent met de fontgrootte van het
   element, en op de blockquote is dat nog het kleine bodylettertype. */
.vol-breedte__quote p {
  max-width: 14ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  line-height: 1.08;
  text-align: left;
}
.vol-breedte__quote em { font-style: italic; color: var(--rose); }

/* ---------- Lagen die over de vaste secties heen schuiven ----------
   Elke laag heeft een dekkende achtergrond nodig, anders kijk je door
   naar de sectie die eronder blijft staan. De artiestensectie is maar
   1180px breed maar moet een 100vw-foto afdekken, vandaar de
   volle-breedte achtergrond via ::before. */
#artiesten-preview { position: relative; z-index: 4; }
#artiesten-preview::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--black);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  z-index: -1;
}
#studio { position: relative; z-index: 5; background: var(--black); }
.home-cta-band { position: relative; z-index: 6; }
.footer { position: relative; z-index: 6; }

/* Wie liever geen bewegende lagen ziet, krijgt gewoon losse secties. */
/* Een vastgezet blok dat hoger is dan het scherm knipt zijn eigen onderkant
   af — die zie je dan nooit. Op smalle en lage schermen dus inkorten. */
/* Twee trappen omlaag naarmate het scherm lager wordt. De volle tussenruimte
   en fotohoogte gelden op ruime schermen; daaronder moet er iets inleveren,
   anders wordt het vaste blok hoger dan het scherm en klipt het zichzelf af. */
@media (max-height: 880px) {
  .over-fempire { padding-top: 2.5rem; }
  .stijlstrook-wrap { padding: 67px 0 calc(1rem + 50px); }
  .stijlstrook__item { height: max(150px, min(var(--h, 320px), calc(100vh - 536px))); }
}
@media (max-height: 760px) {
  .over-fempire { padding-top: 2rem; }
  .stijlstrook-wrap { padding: 42px 0 calc(1rem + 50px); }
  .stijlstrook__item { height: max(150px, min(var(--h, 320px), calc(100vh - 503px))); }
}
/* Staat ná de hoogte-regels: op een telefoon moet deze maat winnen. */
@media (max-width: 720px) {
  .over-fempire { padding: 2.5rem 1.5rem 0; }
  .stijlstrook-wrap { padding: 52px 0 calc(1rem + 50px); }
  .stijlstrook__item { height: max(150px, min(var(--h, 320px), calc(100vh - 640px))); }
}

@media (prefers-reduced-motion: reduce) {
  .vast-blok, .vol-breedte { position: relative; top: auto; }
  .vol-breedte { height: clamp(360px, 60vh, 620px); }
  .portfolio__fotos { margin-bottom: 0; }
}

/* ===================================================================
   STUDIO — grote foto + tekst met stappen eronder
   =================================================================== */
/* Volle breedte: de sectie breekt uit de 1180px-kolom. De linkerpadding op
   het raster zet de tekst wél op dezelfde lijn als de andere secties, terwijl
   de foto rechts tot de viewportrand doorloopt. 100% is hier de bodybreedte,
   dus scrollbar-veilig — met 100vw zou het een paar pixel misstaan. */
#studio {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  /* Was de margin-top van de CTA-band. Als marge liet die een doorzichtige
     strook zien waar het vastgezette quote-blok doorheen kwam. */
  padding-bottom: 10.5rem;
}
.studio__grid {
  display: grid;
  /* Foto even breed als de tekst — de 60/40 gaf een te smalle foto. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-left: max(1.5rem, calc((100% - var(--maxw)) / 2 + 1.5rem));
}

/* ---------- Fotocarrousel ----------
   Native scroll met snap: swipen op touch en trackpad werkt daardoor
   vanzelf, zonder bibliotheek. De bolletjes tonen hoeveel foto's er zijn. */
.studio__carrousel { position: relative; }
.studio__slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--line);
  border-right: 0;
  scrollbar-width: none;
}
.studio__slides::-webkit-scrollbar { display: none; }
.studio__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
}
.studio__slide img { width: 100%; height: 100%; object-fit: cover; }

.studio__bolletjes {
  position: absolute;
  left: 0; right: 0; bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  pointer-events: none;
}
.studio__bolletje {
  pointer-events: auto;
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,238,242,.75);
  background: rgba(11,10,12,.35);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.studio__bolletje[aria-current="true"] {
  background: var(--wine-2);
  border-color: var(--wine-2);
  transform: scale(1.25);
}
.studio__bolletje:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.studio__note { margin-top: 1.6rem; color: var(--muted); max-width: 60ch; }
/* .section__link heeft margin-top: 2.5rem; midden in een zin geeft dat een gat */
.studio__note .section__link { margin-top: 0; }

/* ---------- Stappen: compact paneel met een rij kleine kaartjes ---------- */
.stappen-blok {
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--black-2);
}
.stappen-blok__kop {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--bone);
}
.stappen-blok__kop em { font-style: italic; color: var(--rose); }
.stappen-blok__intro { color: var(--muted-2); font-size: .82rem; margin-top: .3rem; }
.stappen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1.1rem;
}
.stap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .8rem .75rem .9rem;
}
.stap__n {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--wine-2);
  margin-bottom: .45rem;
}
.stap h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: .95rem;
  color: var(--bone);
  margin-bottom: .25rem;
  line-height: 1.2;
}
.stap p { color: var(--muted); font-size: .74rem; line-height: 1.45; }

@media (max-width: 900px) {
  .portfolio__onder { grid-template-columns: 1fr; gap: 2.5rem; }
  .portfolio__fotos { margin-bottom: -3.5rem; }
  .studio__grid { grid-template-columns: 1fr; gap: 2rem; padding-right: 1.5rem; }
  .studio__carrousel { order: -1; margin-right: -1.5rem; }
  .studio__slide { aspect-ratio: 16 / 10; }
  /* Vier smalle kaartjes naast elkaar wordt onleesbaar: twee per rij. */
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .stappen { grid-template-columns: 1fr; }
}


/* ===================================================================
   FOTOSTROOK — kop, sleep-hint en randvervaging
   =================================================================== */
/* De strook schuift horizontaal, maar dat zag je pas als je het probeerde.
   Drie signalen samen maken het duidelijk: een kop die zegt wat je kiest,
   een pijl die zachtjes heen en weer wipt, en een vervaging aan de rechterrand
   die laat zien dat het beeld daar dóórloopt. De vervaging verdwijnt zodra je
   aan het eind bent, anders blijft hij liegen over wat er nog komt. */
.stijlstrook__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .4rem 1.1rem;
  padding: 0 1.5rem 1.1rem;
}
.stijlstrook__kop .section__eyebrow { margin: 0; }
.stijlstrook__hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: opacity .4s var(--ease);
}
.stijlstrook__pijl { display: inline-block; animation: wip 1.9s var(--ease) infinite; }
@keyframes wip {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(7px); }
}
/* Eenmaal gescrold weet je het: de hint mag weg. */
.stijlstrook-wrap.is-gescrold .stijlstrook__hint { opacity: 0; }

.stijlstrook-wrap { position: relative; }
.stijlstrook-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(48px, 9vw, 110px);
  pointer-events: none;
  background: linear-gradient(to left, var(--black) 12%, rgba(11,10,12,0));
  transition: opacity .35s var(--ease);
}
.stijlstrook-wrap.is-eind::after { opacity: 0; }

/* ===================================================================
   PORTFOLIOFOTO'S — één voor één in beeld
   =================================================================== */
/* De reveal zat op de hele fotobak, dus verschenen alle zes tegelijk.
   Nu heeft elke foto zijn eigen reveal met een oplopende vertraging. */
.portfolio__fotos .g-item.reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* ===================================================================
   CONTACT — formulier eerst op mobiel
   =================================================================== */
/* In één kolom stond het adresblok mét kaart boven het formulier, waardoor je
   op een telefoon een heel scherm moest scrollen voor je kon boeken.
   Het formulier staat nu vóór het infoblok in de HTML — niet alleen visueel
   omgewisseld met order. Dat scheelt: de tabvolgorde volgt de HTML, dus met
   alleen order zou je op mobiel eerst door adres, kaart en openingstijden
   heen moeten tabben voordat je bij het formulier bent dat je vóór je ziet.
   Op breed scherm zet order het infoblok weer links. */
.contact__info { order: -1; }
@media (max-width: 900px) {
  .contact__info { order: 0; }
}

/* ===================================================================
   WAAIER OP MOBIEL — grotere aanloop
   =================================================================== */
/* Op een breed scherm staan de zes kaarten naast elkaar en zie je de hele
   waaier opengaan. Op mobiel staan ze in rijen onder elkaar en is dezelfde
   28px nauwelijks te zien; daar mag de aanloop groter en schaalt hij mee. */
@media (max-width: 900px) {
  .fan__card { transform: rotate(0deg) translateY(46px) scale(.94); }
  .fan__card.is-in { transform: rotate(var(--r)) translateY(var(--y)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stijlstrook__pijl { animation: none; }
}


/* ===================================================================
   NAAM VAN DE ARTIEST OP DE UITGELICHTE FOTO'S
   =================================================================== */
/* Op de homepage stond werk van vijf handen door elkaar zonder dat je zag
   van wie het was. Dezelfde opzet als de naam in de stijl-popup, zodat het
   één taal blijft: klein, hoofdletters, op een verloop zodat het leesbaar
   blijft op zowel een lichte als een donkere foto. */
.portfolio__fotos .g-item { position: relative; }
.g-item__naam {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(11,10,12,.94) 30%, transparent);
  pointer-events: none;
}
@media (max-width: 560px) {
  .g-item__naam { font-size: .58rem; padding: 1.2rem .5rem .45rem; letter-spacing: .12em; }
}