/*
 * Marion Bakker — Colors & Type
 * ------------------------------
 * Single source of truth for the tokens used across the site.
 * Both raw tokens (—bg, —ink, —accent) and semantic roles
 * (h1, p, eyebrow, etc.) live here so they can be lifted into
 * any prototype with a single <link> tag.
 */

/* ============ FONTS ============ */
/* Fraunces (display, variable, with the SOFT axis for warmth)
   + Newsreader (body). Both via Google Fonts. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

:root {
  /* ---------- COLOR — RAW TOKENS ---------- */

  /* Backgrounds — warm cream family */
  --bg:         #F5EFE5;  /* page background, warm cream */
  --bg-warm:    #EFE5D3;  /* accent sections */
  --bg-deep:    #E8DCC6;  /* placeholder, deepest cream */
  --bg-canvas:  #FAF6EE;  /* "paper" — used on dark overlays */

  /* Ink — deep aubergine instead of pure black */
  --ink:        #2A1F26;  /* primary text */
  --ink-soft:   #6B5A5F;  /* secondary text */
  --ink-mute:   #9A8A8C;  /* meta, eyebrows, dividers */

  /* Accents — pulled from the paintings */
  --accent:       #8B4F6B;  /* aubergine — links, marks, the signature */
  --accent-warm:  #C97B5A;  /* peach — hover, warm contrast */
  --accent-glow:  #D9B5C4;  /* soft rose-violet — for dark sections */

  /* Texture */
  --grain: rgba(42, 31, 38, 0.025);

  /* ---------- TYPE — RAW TOKENS ---------- */

  --display: 'Fraunces', Georgia, 'Times New Roman', serif; /* @kind font */
  --body:    'Newsreader', Georgia, 'Times New Roman', serif; /* @kind font */

  /* Display sizes (fluid). Fraunces is used italic at opsz 144 + SOFT 100
     for the warmest, most hand-drawn feel. */
  --fs-display-xl: clamp(1.875rem, 5vw,   3.5rem); /* @kind font */
  --fs-display-l:  clamp(1.75rem,  4vw,   3rem); /* @kind font */
  --fs-display-m:  clamp(1.75rem,  3.5vw, 2.5rem); /* @kind font */
  --fs-display-s:  clamp(1.5rem,   2.5vw, 2rem); /* @kind font */

  --fs-quote: clamp(1.1875rem, 1.75vw, 1.4375rem); /* @kind font */

  /* Body */
  --fs-lead: clamp(1rem, 1.5vw, 1.125rem); /* @kind font */
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;   /* eyebrows, captions */
  --fs-micro: 0.75rem;    /* scroll-cue */

  /* ---------- SPACING + LAYOUT ---------- */
  --container:    1200px;
  --container-sm: 1100px;
  --section-y-desktop: 9rem;
  --section-y-mobile:  5rem;
  --section-x-desktop: 2rem;
  --section-x-mobile:  1.5rem;

  /* The thin aubergine "section marker" — 1px tall, 2rem wide */
  --rule-w: 2rem;
  --rule-h: 1px;

  /* ---------- MOTION ---------- */
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur-fast: 0.3s; /* @kind other */
  --dur-med:  0.6s; /* @kind other */
  --dur-slow: 1.2s; /* @kind other */
}

/* ============ SEMANTIC ELEMENT STYLES ============ */

body {
  font-family: var(--body);
  font-weight: 380;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Fraunces, italic, with SOFT axis */
h1, .h1 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: var(--fs-display-xl);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72, 'SOFT' 90;
  font-weight: 340;
  font-style: italic;
  font-size: var(--fs-display-m);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 80;
  font-weight: 360;
  font-style: italic;
  font-size: var(--fs-display-s);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* "Title" inline — for werk titles, light italic Fraunces */
.title-werk {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
  font-style: italic;
  font-weight: 380;
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Body */
p, .p {
  font-family: var(--body);
  font-weight: 380;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
}

.lead {
  font-family: var(--body);
  font-weight: 380;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
}

/* Eyebrow — uppercase tracked meta */
.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-meta);
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Meta — small uppercase, less prominent */
.meta {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 440;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Caption — oldstyle nums, used for years on works */
.caption {
  font-family: var(--body);
  font-size: var(--fs-meta);
  font-weight: 440;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  font-variant-numeric: oldstyle-nums;
}

/* Quotes (testimonials, pull quotes) */
.blockquote {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 90;
  font-weight: 360;
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Links — body links pick up the aubergine on hover */
a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover { color: var(--accent); }

/* The thin section marker line */
.rule {
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--accent);
}

/* Selection */
::selection { background: var(--accent); color: var(--bg); }

/* ===== shared chrome ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* The page background was tweaked from cream (#F5EFE5) toward off-white
   (#F8F8F6) — a minimal warm zweem, closer to a museum wall than a paper
   tone. Token in colors_and_type.css still documents cream; we override
   here so the design system tokens stay historically correct while the
   shipping pages get the lighter base. The radial rose+peach glow that
   used to bleed in from the corners is removed (it read as colored vegen
   on a near-white background); grain is dimmed proportionally. */
:root {
  --bg: #F8F8F6;
}
body {
  background: var(--bg);
  background-image: none;
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-radial-gradient(circle at 0 0, var(--grain) 0, var(--grain) 1px, transparent 1px, transparent 3px);
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/* ===== nav ===== */
.site-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.75rem 2rem;
}
.brand { display: inline-block; text-decoration: none; line-height: 0; }
.brand img { height: 36px; width: auto; display: block; }
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.navlink {
  font-family: var(--body); font-size: 1.0625rem; font-weight: 440;
  color: var(--ink-soft); text-decoration: none; letter-spacing: 0.01em;
  position: relative; transition: color 0.3s ease;
}
.navlink::after {
  content: ""; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s ease;
}
.navlink:hover, .navlink.active { color: var(--accent); }
.navlink:hover::after { transform: scaleX(1); transform-origin: left; }
.navlink.active::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--ink); font-family: var(--body); font-size: 0.9rem; }
@media (max-width: 720px) {
  .brand img { height: 30px; }
  .site-nav { padding: 1.25rem 1.5rem; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 100%; right: 1.5rem;
    flex-direction: column; gap: 1rem; padding: 1.5rem 1.75rem;
    background: var(--bg-warm);
    box-shadow: 0 20px 40px -20px rgba(42, 31, 38, 0.15);
  }
  .nav-links.open .navlink { font-size: 1rem; }
  .nav-toggle { display: block; }
}

/* ===== hero ===== */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1fr;
  position: relative; z-index: 2;
  padding-top: 4.75rem;   /* clear the absolute nav so the image starts below it */
}
@media (min-width: 880px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; padding-top: 5.75rem; }
}

.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 2rem 2.5rem 2.5rem; position: relative;
}
@media (min-width: 880px) { .hero-text { padding: 3rem 4rem 6rem 5rem; } }

.hero-eyebrow {
  font-family: var(--body); font-size: 0.8125rem; font-weight: 460;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 2.5rem;
  white-space: nowrap;
  opacity: 0; animation: fade-up 1.2s ease 0.2s forwards;
}

.quote {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320; font-style: italic;
  font-size: clamp(1.875rem, 5vw, 3.5rem);
  line-height: 1.18; letter-spacing: -0.018em;
  color: var(--ink); max-width: 16ch; margin-bottom: 1.5rem;
}
.quote .word { display: inline-block; opacity: 0; transform: translateY(0.4em); animation: word-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.quote .accent { color: var(--accent); }
.quote .punch { display: block; margin-top: 1.4rem; font-style: normal; font-weight: 380; font-size: clamp(1.125rem, 2.4vw, 1.625rem); letter-spacing: 0.005em; color: var(--ink); }
.quote-attr { font-family: var(--body); font-size: 0.875rem; font-weight: 440; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2.5rem; opacity: 0; animation: fade-up 1.2s ease 2.2s forwards; }
.quote-attr::before { content: "—"; margin-right: 0.6rem; color: var(--accent); }

/* ===== hero (updated mei 2026) =====
   Headline + sub + CTAs. The .quote / .quote-attr rules above are kept
   for any legacy use; the live Home now renders the structure below. */
.hero-headline {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 18ch;
  margin: 0 0 1.75rem;
}
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: word-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  margin-right: 0.22em;        /* fix: inline-block strips trailing whitespace */
}
.hero-headline .word:last-child { margin-right: 0; }

.hero-sub {
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 380;
  line-height: 1.55;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 0 2.5rem;
  opacity: 0;
  animation: fade-up 1.2s ease forwards;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem;
  align-items: center;
  opacity: 0;
  animation: fade-up 1.2s ease forwards;
}

.cta {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 460;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding-bottom: 0.3rem;
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cta .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-left: 0.5rem;
}
.cta:hover { color: var(--accent); }
.cta:hover .arrow { transform: translateX(0.4rem); }

.cta-primary {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.cta-primary:hover { border-bottom-color: var(--accent); }

.cta-secondary {
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(42, 31, 38, 0.18);
}
.cta-secondary:hover { border-bottom-color: var(--accent); }

@keyframes word-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: translateY(0); } }

.hero-image { position: relative; background: var(--bg-deep); overflow: hidden; min-height: 50vh; order: -1; }
@media (min-width: 880px) { .hero-image { min-height: 0; order: 0; } }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; filter: saturate(1.05); opacity: 0; animation: fade-image 1.6s ease 0.3s forwards; }
@keyframes fade-image { to { opacity: 1; } }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(42, 31, 38, 0.06) 100%); pointer-events: none; }

.scroll-cue {
  position: absolute; bottom: 2.5rem; left: 2.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  font-family: var(--body); font-size: 0.75rem; font-weight: 460;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute);
  text-decoration: none; opacity: 0; animation: fade-up 1.5s ease 2.6s forwards;
}
.scroll-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--ink-mute), transparent); animation: scroll-pulse 2.4s ease-in-out infinite; margin-top: 0.5rem; }
@keyframes scroll-pulse { 0%, 100% { transform: scaleY(0.5); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }
@media (max-width: 879px) { .scroll-cue { left: 2rem; bottom: 2rem; } }

/* ===== hero — centered, text-only modifier =====
   Applied via <section class="hero hero-centered"> on Home (mei 2026).
   Drops the right-column image, centers the text column on the page,
   centers the eyebrow rule + label, centers the CTA row and scroll-cue. */
.hero.hero-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem 1.5rem 8rem;
  text-align: center;
}
@media (min-width: 720px) {
  .hero.hero-centered { padding: 8rem 2rem 9rem; }
}
.hero-centered .hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  max-width: 720px;
  width: 100%;
}
.hero-centered .hero-eyebrow { justify-content: center; }
.hero-centered .hero-headline {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-centered .hero-sub {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-centered .hero-cta { justify-content: center; }
.hero-centered .scroll-cue {
  left: 50%;
  bottom: 2.5rem;
  align-items: center;
  transform: translateX(-50%);
  /* fade-up's translateY would clobber the centering transform; use a
     pure-opacity animation instead. */
  animation: fade-image 1.5s ease 2.6s forwards;
}

/* ===== werk ===== */
.werk-section { padding: 9rem 2rem; position: relative; z-index: 2; }
@media (max-width: 720px) { .werk-section { padding: 1.5rem 1.5rem 2.5rem; } }
.section-head { max-width: 1200px; margin: 0 auto 4rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.section-head h2 { font-family: var(--display); font-variation-settings: 'opsz' 72, 'SOFT' 80; font-weight: 340; font-style: italic; font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.015em; color: var(--ink); line-height: 1.1; }
.section-head h2 small { display: block; font-family: var(--body); font-size: 0.8125rem; font-weight: 460; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.75rem; }
.section-link { font-family: var(--body); font-size: 0.9375rem; font-weight: 470; color: var(--ink); text-decoration: none; letter-spacing: 0.02em; border-bottom: 1px solid var(--ink-mute); padding-bottom: 0.25rem; transition: all 0.3s ease; white-space: nowrap; }
.section-link:hover { color: var(--accent); border-color: var(--accent); }
.section-link .arrow { display: inline-block; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); margin-left: 0.4rem; }
.section-link:hover .arrow { transform: translateX(0.4rem); }

.werk-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 4rem 0; }
@media (min-width: 720px) { .werk-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem 3rem; } }
.werk { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.werk-image { position: relative; overflow: hidden; background: var(--bg); margin-bottom: 1.25rem; aspect-ratio: 4 / 5; }
.werk-image img { width: 100%; height: 100%; object-fit: contain; display: block; filter: saturate(1.05); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.werk:hover .werk-image img { transform: scale(1.03); }
.werk-meta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding-top: 0.25rem; }
.werk-title { font-family: var(--display); font-variation-settings: 'opsz' 24, 'SOFT' 60; font-style: italic; font-weight: 380; font-size: 1.1875rem; letter-spacing: -0.005em; color: var(--ink); }
.werk-size { font-family: var(--body); font-size: 0.8125rem; font-weight: 440; color: var(--ink-mute); letter-spacing: 0.05em; font-variant-numeric: oldstyle-nums; }
.werk-year { font-family: var(--body); font-size: 0.8125rem; font-weight: 440; color: var(--ink-mute); letter-spacing: 0.05em; font-variant-numeric: oldstyle-nums; }

/* ===== atelier ===== */
.atelier { position: relative; z-index: 2; background: var(--bg); overflow: hidden; }
.atelier-image { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
@media (max-width: 720px) { .atelier-image { aspect-ratio: 4/5; } }
.atelier-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.atelier-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(42, 31, 38, 0.45) 100%); pointer-events: none; }
.atelier-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 2.5rem; color: var(--bg-canvas); z-index: 2; }
@media (min-width: 720px) { .atelier-overlay { padding: 4rem 5rem; } }
.atelier-head {
  padding: 2rem 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 720px) { .atelier-head { padding: 5rem 5rem 2.5rem; } }
.atelier-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 460;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atelier-overlay h2 { font-family: var(--display); font-variation-settings: 'opsz' 72, 'SOFT' 90; font-weight: 340; font-style: italic; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 1rem; max-width: 18ch; color: var(--bg-canvas); }
.atelier-overlay p { font-family: var(--body); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 380; line-height: 1.5; max-width: 36ch; color: rgba(250, 246, 238, 0.92); margin-bottom: 1.75rem; }
.atelier-overlay a { font-family: var(--body); font-size: 0.9375rem; font-weight: 470; color: var(--bg-canvas); text-decoration: none; letter-spacing: 0.04em; border-bottom: 1px solid rgba(250, 246, 238, 0.5); padding-bottom: 0.25rem; transition: all 0.3s ease; }
.atelier-overlay a:hover { border-color: var(--accent-glow); color: var(--accent-glow); }
.atelier-overlay a .arrow { display: inline-block; margin-left: 0.4rem; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.atelier-overlay a:hover .arrow { transform: translateX(0.4rem); }

/* ===== testimonials ===== */
.testimonials { padding: 9rem 2rem; position: relative; z-index: 2; }
@media (max-width: 720px) { .testimonials { padding: 5.5rem 1.5rem; } }
.testimonials-head { max-width: 1100px; margin: 0 auto 5rem; text-align: center; }
.testimonials-eyebrow { font-family: var(--body); font-size: 0.8125rem; font-weight: 460; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.testimonials-eyebrow::before, .testimonials-eyebrow::after { content: ""; width: 2rem; height: 1px; background: var(--ink-mute); }
.testimonials-head h2 { font-family: var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 320; font-style: italic; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); max-width: 22ch; margin: 0 auto; }
.testimonials-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 720px) { .testimonials-grid { grid-template-columns: 1fr 1fr; gap: 4rem 5rem; } }
.testimonial { position: relative; padding-top: 1.5rem; }
.testimonial::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 1px; background: var(--accent); }
.testimonial blockquote { font-family: var(--display); font-variation-settings: 'opsz' 36, 'SOFT' 90; font-weight: 360; font-style: italic; font-size: clamp(1.1875rem, 1.75vw, 1.4375rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 1.25rem; }
.testimonial cite { font-style: normal; display: block; }
.testimonial cite .name { font-family: var(--body); font-size: 0.9375rem; font-weight: 500; color: var(--ink); letter-spacing: 0.01em; display: block; margin-bottom: 0.25rem; }
.testimonial cite .name::before { content: "—"; margin-right: 0.4rem; color: var(--accent); }
.testimonial cite .context { font-family: var(--body); font-size: 0.875rem; font-weight: 400; font-style: italic; color: var(--ink-soft); line-height: 1.5; padding-left: 1.4rem; display: block; }

/* ===== footer ===== */
.site-footer { padding: 2rem 2rem 3rem; text-align: center; position: relative; z-index: 2; border-top: 1px solid rgba(42, 31, 38, 0.06); }
.site-footer p { font-family: var(--body); font-size: 0.8125rem; font-weight: 430; color: var(--ink-mute); letter-spacing: 0.04em; }
.site-footer a { color: var(--ink-mute); text-decoration: none; transition: color 0.3s ease; }
.site-footer a:hover { color: var(--accent); }

/* ===== werk detail ===== */
.werk-detail {
  padding: 7rem 1.5rem 6rem;
  position: relative;
  z-index: 2;
  max-width: 880px;        /* same width as the painting — frame everything to it */
  margin: 0 auto;
}
@media (min-width: 720px) { .werk-detail { padding: 9rem 2rem 8rem; } }

.werk-detail-back {
  display: inline-block;
  margin-bottom: 3.5rem;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 460;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.3s ease;
}
.werk-detail-back:hover { color: var(--accent); }

.werk-detail-image-wrap {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
@media (min-width: 720px) { .werk-detail-image-wrap { margin-bottom: 3.5rem; gap: 1.5rem; } }

.werk-detail-stage {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(640px, 100%);
}
.werk-detail-image {
  margin: 0;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 40px 80px -50px rgba(42, 31, 38, 0.35);
}
.werk-detail-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  display: block;
  filter: saturate(1.05);
  animation: fade-image 0.6s ease forwards;
}

.werk-detail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(248, 248, 246, 0.82);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.werk-detail-arrow.prev { left: 0.9rem; }
.werk-detail-arrow.next { right: 0.9rem; }
.werk-detail-arrow:hover { color: var(--accent); background: rgba(248, 248, 246, 0.95); }

.werk-detail-dots {
  display: flex;
  gap: 0.6rem;
  align-self: flex-start;   /* align dots with the painting's left edge */
}
.werk-detail-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ink-mute);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.werk-detail-dot:hover { opacity: 0.7; }
.werk-detail-dot.on { background: var(--accent); opacity: 1; }

@media (max-width: 600px) {
  .werk-detail-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
}

.werk-detail-meta {
  max-width: 580px;
  margin: 0;                 /* aligned to the painting's left edge, not centered */
}

.werk-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.25rem;
}
.werk-detail-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.werk-detail-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

.werk-detail-text {
  font-family: var(--body);
  font-weight: 380;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 48ch;
  margin: 0 0 3rem;
}

.werk-detail-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 3rem;
}
.werk-detail-specs > div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(42, 31, 38, 0.10);
}
.werk-detail-specs > div:last-child {
  /* no bottom border — it would close the list into a card */
  border-bottom: 0;
}
@media (max-width: 560px) {
  /* stack label above value so the long "beschikbaarheid" label never collides */
  .werk-detail-specs > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}
.werk-detail-specs dt {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.werk-detail-specs dd {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 440;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.werk-detail-specs dd.price {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
  font-style: italic;
  font-weight: 380;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: 0;
  font-variant-numeric: oldstyle-nums;
}

.werk-detail-write {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 470;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.3rem;
  transition: all 0.3s ease;
}
.werk-detail-write .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-left: 0.45rem;
  white-space: nowrap;
}
.werk-detail-write:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.werk-detail-write:hover .arrow { transform: translateX(0.4rem); }

/* ===== werk gallery (/werk) ===== */
.werk-gallery {
  padding: 7rem 1.5rem 6rem;
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 720px) { .werk-gallery { padding: 9rem 2rem 8rem; } }

.werk-gallery-head {
  margin: 0 0 5rem;
}
@media (min-width: 720px) { .werk-gallery-head { margin-bottom: 6rem; } }

.werk-gallery-eyebrow {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
  white-space: nowrap;
}

.werk-gallery-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}

.werk-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 3.5rem 0;
}
@media (min-width: 640px) {
  .werk-gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 2.5rem;
  }
}
@media (min-width: 1024px) {
  .werk-gallery-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4.5rem 2.5rem;
  }
}

.werk-gallery-item {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.werk-gallery-image {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  margin-bottom: 1.1rem;
  aspect-ratio: 4 / 5;
}
.werk-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: saturate(1.05);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.werk-gallery-item:hover .werk-gallery-image img { transform: scale(1.03); }

/* ===== per-tegel slider (alleen tegels met een sfeerfoto) ===== */
.werk-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(248, 248, 246, 0.82);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.werk-gallery-arrow.prev { left: 0.6rem; }
.werk-gallery-arrow.next { right: 0.6rem; }
.werk-gallery-item.has-slider:hover .werk-gallery-arrow,
.werk-gallery-item.has-slider:focus-within .werk-gallery-arrow { opacity: 1; }
.werk-gallery-arrow:hover { color: var(--accent); background: rgba(248, 248, 246, 0.95); }

.werk-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.werk-gallery-item.has-slider:hover .werk-gallery-dots,
.werk-gallery-item.has-slider:focus-within .werk-gallery-dots { opacity: 1; }
.werk-gallery-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(42, 31, 38, 0.3);
  cursor: pointer;
  transition: background 0.3s ease;
}
.werk-gallery-dot.on { background: var(--accent); }

/* touch-apparaten: pijlen + dots altijd zichtbaar (geen hover) */
@media (hover: none) {
  .werk-gallery-item.has-slider .werk-gallery-arrow,
  .werk-gallery-item.has-slider .werk-gallery-dots { opacity: 1; }
}

/* fallback wanneer een afbeelding (nog) niet laadt — geen ingestorte kaart */
.werk-image.is-missing,
.werk-gallery-image.is-missing,
.werk-detail-image.is-missing {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      135deg,
      var(--bg-deep) 0 14px,
      var(--bg-warm) 14px 28px
    );
}
.werk-image.is-missing::after,
.werk-gallery-image.is-missing::after,
.werk-detail-image.is-missing::after {
  content: "afbeelding volgt";
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.werk-gallery-sold {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-canvas);
  padding: 0.3rem 0.65rem;
  pointer-events: none;
}

.werk-gallery-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}
.werk-gallery-name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
  font-style: italic;
  font-weight: 380;
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.werk-gallery-size,
.werk-gallery-year {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 440;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  font-variant-numeric: oldstyle-nums;
}

/* ===== werk gallery — "toon meer" link ===== */
.werk-gallery-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 4.5rem;
}
.werk-gallery-more {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 470;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.3rem;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}
.werk-gallery-more .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-left: 0.45rem;
}
.werk-gallery-more:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.werk-gallery-more:hover .arrow { transform: translateX(0.4rem); }

/* ===== tijdlijn (/tijdlijn) ===== */
.tijdlijn {
  padding: 7rem 1.5rem 6rem;
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 720px) { .tijdlijn { padding: 9rem 2rem 8rem; } }

.tijdlijn-head {
  max-width: 880px;
  margin: 0 auto 6rem;
  padding-left: 3rem;        /* mobile: clear room for the vertical line */
}
@media (min-width: 880px) {
  .tijdlijn-head { padding-left: 0; text-align: center; margin-bottom: 7rem; }
  .tijdlijn-head .hero-eyebrow { justify-content: center; }
}

.tijdlijn-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}

.tijdlijn-lede {
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 380;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 1.75rem auto 0;
}

.tijdlijn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* The thin aubergine vertical spine.
   Mobile: 1px line at left, items get padding-left to clear it.
   Desktop: 1px line centered, items split into a 2-column grid. */
.tijdlijn-list::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0.5rem;
  width: 1px;
  background: var(--accent);
  opacity: 0.6;
}
@media (min-width: 880px) {
  .tijdlijn-list::before { left: 50%; transform: translateX(-0.5px); }
}

.tijdlijn-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding-left: 2.5rem;            /* mobile: space for the line + dot */
  margin-bottom: 5rem;
}
.tijdlijn-item:last-child { margin-bottom: 0; }

@media (min-width: 880px) {
  .tijdlijn-item {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding-left: 0;
    margin-bottom: 9rem;
  }
  /* zigzag: odd items have image on the left, even on the right */
  .tijdlijn-item:nth-child(even) .tijdlijn-image { order: 2; }
  .tijdlijn-item:nth-child(even) .tijdlijn-meta  { order: 1; text-align: right; padding-right: 3.5rem; padding-left: 0; }
  .tijdlijn-item:nth-child(odd)  .tijdlijn-meta  { padding-left: 3.5rem; }
  .tijdlijn-item:nth-child(even) .tijdlijn-meta .hero-eyebrow,
  .tijdlijn-item:nth-child(even) .tijdlijn-meta { /* keep block-flow */ }
}

.tijdlijn-image {
  margin: 0;
  position: relative;
  /* verhouding komt van het eerste beeld (via --tl-ratio); 4/5 alleen als fallback
     vóór het meten. Geen vaste crop-ratio meer — elk moment ademt op eigen formaat. */
  aspect-ratio: var(--tl-ratio, 4 / 5);
  max-height: 80vh;
  overflow: hidden;
  background: var(--bg);
}
.tijdlijn-image img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: saturate(1.05);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tijdlijn-item:hover .tijdlijn-image img { transform: scale(1.02); }

/* pijlen in het midden van het beeld (zelfde stijl als werk-detail) */
.tijdlijn-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(248, 248, 246, 0.82);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.tijdlijn-arrow.prev { left: 0.9rem; }
.tijdlijn-arrow.next { right: 0.9rem; }
.tijdlijn-arrow:hover { color: var(--accent); background: rgba(248, 248, 246, 0.95); }
@media (max-width: 600px) {
  .tijdlijn-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
}


/* rustige dot-slider per moment (zelfde stijl als werk-detail) */
.tijdlijn-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}
.tijdlijn-dot {
  pointer-events: auto;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(248, 248, 246, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.tijdlijn-dot:hover { background: rgba(248, 248, 246, 0.85); }
.tijdlijn-dot.on { background: var(--accent); transform: scale(1.15); }

/* fallback wanneer een beeld (nog) niet laadt — geen kapot-icoon, rustig vlak */
.tijdlijn-image.is-missing {
  aspect-ratio: var(--tl-ratio, 4 / 5);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, var(--bg) 0 14px, var(--bg-warm) 14px 28px);
}
.tijdlijn-image.is-missing::after {
  content: "afbeelding volgt";
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.tijdlijn-meta {
  position: relative;
}

/* The little dot on the spine, aligned to the year baseline. */
.tijdlijn-dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);  /* "cuts" the line behind the dot */
  /* mobile: dot on the left line */
  left: -2.4rem;
  top: 0.6rem;
}
@media (min-width: 880px) {
  /* desktop: dot sits on the centered spine; relative to the meta column.
     For odd items (meta on right), dot is at the meta's left.
     For even items (meta on right text-aligned, container on left), dot is at meta's right. */
  .tijdlijn-item:nth-child(odd) .tijdlijn-dot {
    left: -3.85rem;
    top: 0.65rem;
  }
  .tijdlijn-item:nth-child(even) .tijdlijn-dot {
    right: -3.85rem;
    left: auto;
    top: 0.65rem;
  }
}

.tijdlijn-year {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  font-style: italic;
  font-weight: 320;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  display: block;
  margin-bottom: 0.75rem;
}

.tijdlijn-itemtitle {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 80;
  font-weight: 360;
  font-style: italic;
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.tijdlijn-text {
  font-family: var(--body);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  font-weight: 380;
  line-height: 1.6;
  color: var(--ink);
  max-width: 38ch;
  margin: 0;
}
@media (min-width: 880px) {
  .tijdlijn-item:nth-child(even) .tijdlijn-text { margin-left: auto; }
}

/* ===== contact (/contact) ===== */
.contact {
  padding: 7rem 1.5rem 6rem;
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 720px) { .contact { padding: 9rem 2rem 8rem; } }

.contact-inner {
  max-width: 520px;
  margin: 0 auto;
}

.contact-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 2rem;
}

.contact-lede {
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 380;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 3.5rem;
  max-width: 44ch;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(42, 31, 38, 0.18);
  border-radius: 0;
  padding: 0.55rem 0;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.contact-field textarea {
  resize: vertical;
  min-height: 7rem;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-bottom-color: var(--accent);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--ink-mute);
}

.contact-submit {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 470;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-submit .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  margin-left: 0.45rem;
}
.contact-submit:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact-submit:hover .arrow { transform: translateX(0.4rem); }

.contact-sent {
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 3rem;
}
.contact-sent .rule {
  position: absolute;
  top: 0;
  left: 0;
}
.contact-sent p {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 90;
  font-weight: 360;
  font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 1.75rem;
  max-width: 36ch;
}
.contact-back {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 460;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}
.contact-back:hover { color: var(--accent); }

.contact-alt {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.contact-alt a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 31, 38, 0.25);
  padding-bottom: 0.15rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-alt a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Atelier detail at the foot of /contact — visual anchor that says
   "this is where the atelier is" without putting an address on screen. */
.contact-anchor {
  margin: 6rem -1.5rem 0;
  padding: 0;
}
@media (min-width: 720px) {
  .contact-anchor { margin: 7rem -2rem 0; }
}
.contact-anchor img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  box-shadow: 0 40px 80px -50px rgba(42, 31, 38, 0.3);
}
.contact-anchor figcaption {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 460;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 1.25rem;
}

/* ===== wie page ===== */
.wie-page { padding: 8rem 2rem 6rem; position: relative; z-index: 2; }
@media (max-width: 720px) { .wie-page { padding: 6rem 1.5rem 4rem; } }
.wie-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 880px) { .wie-inner { grid-template-columns: 1fr 0.85fr; gap: 5rem; } }
.wie-text { max-width: 56ch; }

/* Opening — italic Fraunces quote + upright punch line.
   Lifted from the old Home hero pattern; this is where Marion is
   herself aan het woord now. */
.wie-opening {
  margin: 2rem 0 3rem;
}
.wie-opening-quote {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 320;
  font-style: italic;
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 20ch;
  margin: 0;
}
.wie-opening-punch {
  font-family: var(--body);
  font-weight: 520;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 1.25rem 0 0;
  letter-spacing: 0.005em;
}

/* Legacy wie-lede + wie-heading kept for any backwards reference. */
.wie-lede {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  font-weight: 340;
  font-style: italic;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2rem 0 2.5rem;
}
.wie-heading { font-family: var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 320; font-style: italic; font-size: clamp(1.75rem, 4vw, 2.875rem); line-height: 1.18; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 3rem; }
.wie-body p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); margin-bottom: 1rem; }
.wie-body p:last-child { margin-bottom: 0; }
.wie-pull { margin: 3rem 0 0; padding-top: 1.5rem; position: relative; }
.wie-pull .rule { position: absolute; top: 0; left: 0; }
.wie-pull blockquote { font-family: var(--display); font-variation-settings: 'opsz' 36, 'SOFT' 90; font-weight: 360; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); }
.wie-image { aspect-ratio: 1/1; overflow: hidden; background: var(--bg-deep); box-shadow: 0 30px 60px -40px rgba(42, 31, 38, 0.25); }
.wie-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }

/* Mobiel: portret tussen openingsquote en lopende tekst.
   Desktop: portret in de rechterkolom, mobiele kopie verborgen. */
.wie-image-desktop { display: none; }
.wie-image-mobile { display: block; margin: 0 0 3.5rem; }
@media (min-width: 880px) {
  .wie-image-desktop { display: block; }
  .wie-image-mobile { display: none; }
}

.wie-anchor {
  margin: 6rem auto 0;
  max-width: 1280px;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .wie-anchor { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .wie-anchor.wie-anchor-single { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .wie-anchor { margin-top: 4rem; padding: 0 1.5rem; } }
.wie-anchor-item {
  margin: 0;
}
.wie-anchor-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  box-shadow: 0 40px 80px -50px rgba(42, 31, 38, 0.3);
}

.wie-anchor.wie-anchor-single {
  max-width: 640px;
}
.wie-anchor-single .wie-anchor-item img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* ===== wie — carrousel "aan de muur" ===== */
.wie-carousel {
  margin: 6rem auto 0;
  max-width: 1200px;
  padding: 0;
}
@media (min-width: 720px) { .wie-carousel { padding: 0 2rem; } }

.wie-carousel-eyebrow {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 460;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.75rem;
}

.wie-carousel-stage {
  position: relative;
}
.wie-carousel-frame {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 30px 60px -45px rgba(42, 31, 38, 0.3);
}
.wie-carousel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.wie-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(248, 248, 246, 0.82);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wie-carousel-arrow.prev { left: 0.9rem; }
.wie-carousel-arrow.next { right: 0.9rem; }
.wie-carousel-arrow:hover { color: var(--accent); background: rgba(248, 248, 246, 0.95); }

.wie-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.wie-carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ink-mute);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.wie-carousel-dot:hover { opacity: 0.7; }
.wie-carousel-dot.on { background: var(--accent); opacity: 1; }

@media (max-width: 600px) {
  .wie-carousel-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
}

/* ===== placeholder pages ===== */
.placeholder-page { padding: 12rem 2rem 8rem; position: relative; z-index: 2; min-height: 80vh; }
.placeholder-inner { max-width: 600px; margin: 0 auto; padding-top: 1.5rem; position: relative; text-align: center; }
.placeholder-inner > .rule { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.placeholder-title { font-family: var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 320; font-style: italic; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--ink); margin-bottom: 1.5rem; letter-spacing: -0.018em; }
.placeholder-sub { font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); max-width: 38ch; margin: 0 auto 2rem; }
.placeholder-email { font-family: var(--display); font-style: italic; font-size: 1.5rem; margin-bottom: 3rem; }
.placeholder-email a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 0.15rem; }
.placeholder-back { font-family: var(--body); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; }
.placeholder-back:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}