/* ==========================================================================
   Zwager Art — one-page site
   Plain CSS, no build step. Structure:
   1. Fonts   2. Tokens   3. Base   4. Shared components   5. Sections (01–08)   6. Motion
   7. WordPress / Pencil (theme "Zwager Art by Pencil")
   Desktop values are measured on the 1920 px PSD and expressed in design units
   (--za-u = 1px at 1920 wide, scaling proportionally between phones and 2560 px).
   This is the static site's stylesheet (Website/css/style.css); WordPress adaptations are
   marked "WP:" and kept to the minimum, so the rendering stays identical.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* DEMO licence (personal use only) — buy the commercial licence before going live. */
/* WP: Playfair Display, only for the logo ring (2026-10-09, weight 500) and the photo counter in
   the works slider (2026-10-11, 400/700). Variable weight axis, small Latin subset (29.5 KB), OFL,
   from Fonts/Royaal/Playfair_Display (tools/build-ring-font.mjs) */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Street Breaker";
  src: url("../fonts/street-breaker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Colour — sampled from flat areas of the 1920 px reference */
  --za-ink: #000715;
  --za-ink-2: #00071e;
  --za-cream: #f8e9ba;
  --za-cream-light: #f9efcf;
  --za-ink-3: #020712; /* band behind the names marquee */
  --za-navy: #01071e;
  --za-red: #de0101;
  --za-gold: #c9a23a;
  --za-gold-glow: #e9c54e;
  --za-pigment-blue: #1e4fb0;
  --za-pigment-yellow: #e8b030;
  --za-overlay-strong: rgb(0 7 21 / 0.85);
  --za-overlay-soft: rgb(0 7 21 / 0.45);
  --za-line-on-dark: rgb(248 233 186 / 0.6);
  --za-text-halo: 0 0 0.45em rgb(0 7 21 / 0.7); /* legibility on the brightest photo areas */

  /* Families */
  --za-font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --za-font-graffiti: "Street Breaker", var(--za-font-display);
  --za-font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Design unit: 1px of the 1920 px PSD; the layout scales proportionally with the
     viewport (2560 px is the cap, i.e. 1.333 design px per unit) */
  --za-u: min(1.3334px, 100vw / 1920);

  /* The PSD sets all upright display text (serif + graffiti) at ~82 % width */
  --za-display-condense: 0.82;

  /* Type scale (desktop values from the PSD, with readable minimums) */
  --za-fs-hero: max(2.75rem, calc(191 * var(--za-u)));
  --za-fs-hero-graffiti: max(2.125rem, calc(149 * var(--za-u)));
  --za-fs-h2: max(2.25rem, calc(108 * var(--za-u)));
  --za-fs-h2-graffiti: max(2rem, calc(107 * var(--za-u)));
  --za-fs-h3: max(2rem, calc(74 * var(--za-u)));
  --za-fs-slide-title: max(2.25rem, calc(83.5 * var(--za-u)));
  --za-fs-h4: max(1.625rem, calc(58 * var(--za-u)));
  /* commission options: subheading + quote, more presence but below the h3 (74) */
  --za-fs-option-sub: max(1.875rem, calc(70 * var(--za-u)));
  --za-fs-option-quote: max(1.75rem, calc(56 * var(--za-u)));
  --za-fs-lead: max(1.5rem, calc(52 * var(--za-u)));
  --za-fs-marquee: max(2.5rem, calc(115.5 * var(--za-u)));
  --za-fs-body: max(1rem, calc(22 * var(--za-u)));
  --za-fs-caption: max(0.8125rem, calc(22 * var(--za-u)));
  --za-fs-small: max(0.75rem, calc(17.5 * var(--za-u)));
  --za-fs-button: max(0.8125rem, calc(18 * var(--za-u)));

  /* Tracking */
  --za-ls-caption: 0.114em;
  --za-ls-caption-wide: 0.18em;
  --za-ls-body: 0.1056em;
  --za-ls-button: 0.2em;

  /* Spacing */
  --za-space-1: 4px;
  --za-space-2: 8px;
  --za-space-3: 12px;
  --za-space-4: 16px;
  --za-space-5: 24px;
  --za-space-6: 32px;
  --za-space-7: 48px;
  --za-space-8: 64px;
  --za-space-9: 96px;
  --za-space-10: 128px;
  --za-space-11: 160px;
  --za-section-pad: clamp(72px, calc(160 * var(--za-u)), 160px);
  --za-gutter: clamp(16px, 4vw, 48px);

  /* Motion: long, soft curves; nothing snaps */
  --za-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --za-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --za-dur-reveal: 1.2s;
  --za-dur-view: 1.1s; /* slide change and full ↔ grid crossfade */
  --za-dur-hover: 0.5s;
  --za-reveal-blur: 4px; /* blur fade on text reveals (Magic UI default 6px, a third softer) */
}

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--za-ink);
  color: var(--za-cream);
  font-family: var(--za-font-sans);
  font-size: var(--za-fs-body);
  font-weight: 800;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WP: element resets are scoped to the site's own markup (zero specificity, same result), so they
   never reach the WordPress Media Library that Pencil opens on the page. */
:where(.za-nav, #main, .za-footer) :is(img, svg, picture) {
  display: block;
  max-width: 100%;
}

:where(.za-nav, #main, .za-footer) img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote,
figure {
  margin: 0;
}

:where(.za-nav, #main, .za-footer) :is(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Line break from the PSD, only kept while the text still scales with the design (body ≥ 16px) */
@media (max-width: 1399px) {
  .za-br {
    display: none;
  }
}

/* Breaks for one layout only: .za-br-phone only below 768 px, .za-br-wide everywhere else */
@media (min-width: 768px) {
  .za-br-phone {
    display: none;
  }
}

@media (max-width: 767px) {
  .za-br-wide {
    display: none;
  }
}

/* Hidden container for inline SVG filter definitions */
.za-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

.za-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 4. Shared components ------------------------------------------------------ */

/* Display text is condensed horizontally (PSD: ~82 %). The box is widened by the
   inverse factor first, so lines wrap at their visible width. Centred lines are
   nudged by half their tracking, because CSS also adds it after the last glyph.
   Set --za-ls instead of letter-spacing on these elements. */
.za-heading__classic,
.za-heading__graffiti,
.za-slide__title,
.za-lead,
.za-tagline,
.za-tags,
.za-quote,
.za-option__title,
.za-option__subtitle,
.za-availability__subheading,
.za-form__title {
  --za-ls: 0em;
  --za-ls-shift: calc(var(--za-ls) / 2);
  display: block;
  width: calc(100% / var(--za-display-condense));
  margin-inline: calc((100% - 100% / var(--za-display-condense)) / 2);
  letter-spacing: var(--za-ls);
  transform: scaleX(var(--za-display-condense)) translateX(var(--za-ls-shift));
}

/* Heading pattern: calm serif line + graffiti "shout" line */
.za-heading {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.za-heading__classic {
  font-family: var(--za-font-display);
  font-size: var(--za-fs-h2);
  font-weight: 700;
  line-height: 1;
  font-variant-ligatures: common-ligatures;
}

.za-heading__graffiti {
  --za-ls: 0.07em;
  font-family: var(--za-font-graffiti);
  font-size: var(--za-fs-h2-graffiti);
  font-weight: 400;
  line-height: 1;
}

/* Left-aligned heading (cream sections): condensed from the left edge, no centring nudge */
.za-heading--left {
  text-align: left;
}

.za-heading--left .za-heading__classic,
.za-option__title,
.za-option__subtitle,
.za-option__quote,
.za-availability__subheading,
.za-form__title {
  --za-ls-shift: 0em;
  margin-inline: 0 calc(100% - 100% / var(--za-display-condense));
  transform-origin: left;
}

/* Caps caption (sans 800, tracked) */
.za-caption {
  font-family: var(--za-font-sans);
  font-size: var(--za-fs-caption);
  font-weight: 800;
  line-height: 1.46;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

/* Lead: upright display serif (condensed like the headings) */
.za-lead {
  font-family: var(--za-font-display);
  font-size: var(--za-fs-lead);
  font-weight: 700;
  line-height: 1.2;
}

/* Tagline and quotes: display italic */
.za-tagline,
.za-quote {
  font-family: var(--za-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  font-variant-ligatures: common-ligatures;
}

/* Tag list: italic caps separated by a middle dot */
.za-tags {
  --za-tags-gap: 0.65em; /* = the former 0.22em margins + the dot */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--za-tags-gap);
  font-family: var(--za-font-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* WP: the tags are a Pencil rich-text list (div.pencil-richtext.za-tags > ul > li); the inner
   list takes no box of its own, so its items are the flex items, as in the static site. */
.za-tags > :is(ul, ol),
.za-marquee__group > :is(ul, ol) {
  display: contents;
  list-style: none;
}

/* The dot sits in the column gap (absolutely positioned), so hiding it at the start of a
   wrapped line (.is-line-start, set by JS) never changes the layout. */
.za-tags li {
  position: relative;
}

.za-tags li + li::before {
  content: "\00B7";
  content: "\00B7" / ""; /* decorative: not read out */
  position: absolute;
  top: 0;
  right: 100%;
  width: var(--za-tags-gap);
  text-align: center;
}

.za-tags li.is-line-start::before {
  display: none;
}

/* Marquee: one line of names separated by " / ", looping. JS repeats the group and moves the
   track (slow drift, sped up by scrolling; see js/main.js). */
.za-marquee {
  overflow: hidden;
}

.za-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.za-marquee__group {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
}

.za-marquee__group li::after {
  content: "/";
  content: "/" / ""; /* decorative: not read out */
  margin-inline: 0.22em;
}

/* Body paragraph (sans 800, tracked) */
.za-body {
  font-family: var(--za-font-sans);
  font-size: var(--za-fs-body);
  font-weight: 800;
  line-height: calc(34 / 22);
  letter-spacing: var(--za-ls-body);
}

/* Soft section edges: a photo background fades into the neighbouring section's colour
   instead of stopping on a hard line. Per section: --za-edge-top / --za-edge-bottom
   (fade heights) and --za-edge-top-color / --za-edge-bottom-color. */
.za-edge-fade::after {
  --za-edge-t: var(--za-edge-top-color, var(--za-ink));
  --za-edge-b: var(--za-edge-bottom-color, var(--za-ink));
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--za-edge-t), color-mix(in srgb, var(--za-edge-t) 78%, transparent) 20%,
      color-mix(in srgb, var(--za-edge-t) 50%, transparent) 42%,
      color-mix(in srgb, var(--za-edge-t) 24%, transparent) 66%,
      color-mix(in srgb, var(--za-edge-t) 7%, transparent) 86%, transparent)
      top / 100% var(--za-edge-top, 0px) no-repeat,
    linear-gradient(to top,
      var(--za-edge-b), color-mix(in srgb, var(--za-edge-b) 78%, transparent) 20%,
      color-mix(in srgb, var(--za-edge-b) 50%, transparent) 42%,
      color-mix(in srgb, var(--za-edge-b) 24%, transparent) 66%,
      color-mix(in srgb, var(--za-edge-b) 7%, transparent) 86%, transparent)
      bottom / 100% var(--za-edge-bottom, 0px) no-repeat;
}

/* Photo pair: two photos side by side, no radius */
.za-photo-pair {
  display: grid;
  grid-template-columns: 678fr 679fr;
  align-items: start;
  gap: calc(31 * var(--za-u));
}

.za-photo-pair > img {
  width: 100%;
}

/* Button: outline pill, display caps. On dark by default; --on-cream variant. */
.za-button {
  --za-button-fg: var(--za-cream);
  --za-button-bg: var(--za-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(222 * var(--za-u));
  min-height: max(44px, calc(54 * var(--za-u)));
  padding: 0 calc(32 * var(--za-u));
  padding-inline-start: calc(32 * var(--za-u) + var(--za-ls-button));
  border: 2px solid var(--za-button-fg);
  border-radius: 999px;
  color: var(--za-button-fg);
  font-family: var(--za-font-display);
  font-size: var(--za-fs-button);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--za-ls-button);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* hover: the fill wipes in from the left */
  background: linear-gradient(var(--za-button-fg), var(--za-button-fg)) no-repeat left center / 0% 100%;
  transition:
    background-size var(--za-dur-hover) var(--za-ease-in-out),
    color var(--za-dur-hover) var(--za-ease-in-out),
    width 0.6s var(--za-ease-in-out);
}

.za-button:hover,
.za-button:focus-visible {
  background-size: 100% 100%;
  color: var(--za-button-bg);
}

.za-button__label {
  display: inline-flex;
  align-items: center;
  animation: za-label-in 0.6s var(--za-ease-out);
}

.za-button__label[hidden] {
  display: none;
}

.za-button__arrow {
  width: 1.35em;
  height: 0.75em;
  margin-right: 0.75em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes za-label-in {
  from {
    opacity: 0;
    translate: 0 0.35em;
  }
}

.za-button--on-cream {
  --za-button-fg: var(--za-navy);
  --za-button-bg: var(--za-cream);
}

/* Primary (call to action on cream): navy fill; on hover the cream wipes in and the arrow moves on */
.za-button--primary {
  --za-button-fg: var(--za-cream);
  --za-button-bg: var(--za-navy);
  min-height: max(56px, calc(72 * var(--za-u)));
  padding-inline: calc(48 * var(--za-u)) calc(44 * var(--za-u));
  padding-inline-start: calc(48 * var(--za-u) + var(--za-ls-button));
  border-color: var(--za-navy);
  background-color: var(--za-navy);
  color: var(--za-cream);
  font-size: max(0.875rem, calc(21 * var(--za-u)));
}

.za-button__arrow--after {
  margin-right: 0;
  margin-left: 0.8em;
  transition: translate var(--za-dur-hover) var(--za-ease-out);
}

.za-button:hover .za-button__arrow--after,
.za-button:focus-visible .za-button__arrow--after {
  translate: 0.3em 0;
}

/* Slider: one slide visible; each slide shows the full artwork or a 4-image grid,
   with the caption overlapping the bottom edge of the image.
   Geometry (shared by caption and arrows):
   --za-media-ratio     image height / width
   --za-caption-overlap how far the caption reaches up into the image (title only)
   --za-arrow-size      arrow diameter; arrows are centred on the title */
.za-slider {
  --za-media-ratio: calc(1424 / 1920);
  --za-caption-overlap: calc(118 * var(--za-u));
  --za-arrow-size: calc(134 * var(--za-u));
  --za-media-h: calc(100cqw * var(--za-media-ratio));
  position: relative;
  container-type: inline-size;
  touch-action: pan-y; /* horizontal swipes are the slider's (js/main.js), vertical scrolling stays native */
}

@supports not (width: 1cqw) {
  .za-slider {
    --za-media-h: calc(100vw * var(--za-media-ratio));
  }
}

.za-slider__slides {
  display: grid;
}

.za-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--za-dur-view) var(--za-ease-in-out), visibility 0s linear var(--za-dur-view);
}

.za-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--za-dur-view) var(--za-ease-in-out), visibility 0s;
}

/* Each slide: the photos of one artwork, stacked in one 1920 × 1424 frame; the current one shows,
   switching is a crossfade. WP (2026-10-11): replaces the full view + four-photo grid ("Meer foto's"). */
.za-slide__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1920 / 1424;
}

/* WP: the photos sit in a managed region (div.za-slide__photos) */
.za-slide__photos {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.za-slide__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* hidden state: slightly enlarged, reset only after the crossfade has finished */
  scale: 1.05;
  transition: opacity var(--za-dur-view) var(--za-ease-in-out), scale 0s linear var(--za-dur-view);
}

.za-slide__photo.is-current {
  opacity: 1;
}

/* the photo that is showing settles into place */
.za-slide.is-active .za-slide__photo.is-current {
  scale: 1;
  transition: opacity var(--za-dur-view) var(--za-ease-in-out), scale 2.2s var(--za-ease-out);
}

/* WP (2026-10-12): the caption block: the captions of all works (stacked, the active one visible) and
   the big arrows, under the photos; the title sits on the shaded bottom edge of the image. The block
   carries the caption shade itself (the bottom third of the image, darkest where the title sits, solid
   ink below it), so title and controls read well wherever the block is. On desktop it becomes sticky
   at the bottom of the screen once reached (class is-ui-pinned, js/main.js). */
.za-slider__ui {
  --za-shade-h: calc(var(--za-media-h) * 0.34);
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--za-caption-overlap));
  padding-bottom: calc(32 * var(--za-u));
}

.za-slider__ui::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--za-caption-overlap) - var(--za-shade-h));
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0, rgb(0 7 21 / 0.14) calc(var(--za-shade-h) * 0.294), rgb(0 7 21 / 0.38) calc(var(--za-shade-h) * 0.529),
    rgb(0 7 21 / 0.64) calc(var(--za-shade-h) * 0.706), rgb(0 7 21 / 0.85) calc(var(--za-shade-h) * 0.853),
    var(--za-ink) var(--za-shade-h));
}

/* The block is as tall as the longest caption of all works; while pinned, the part below the active
   caption's last line sinks below the screen (--za-ui-slack, measured by js/main.js), so a small, even
   margin remains under the text whichever work is showing. */
@media (min-width: 1200px) {
  .za-slider.is-ui-pinned .za-slider__ui {
    position: sticky;
    bottom: calc(-1 * var(--za-ui-slack, 0px));
    transition: bottom 0.45s var(--za-ease-out);
  }
}

.za-slider__captions {
  display: grid;
}

/* Caption: title, details, the photos of the work and buttons, centred */
.za-slide__caption {
  grid-area: 1 / 1;
  justify-self: center;
  width: calc(960 * var(--za-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

.za-slide__caption.is-active {
  visibility: visible;
  transition: visibility 0s;
}

/* WP: the title sits in a managed region; the region takes the caption's full width, as the
   title itself did */
.za-slide__title-region {
  align-self: stretch;
}

.za-slide__title {
  /* no tracking: Chrome drops the Th ligature when letter-spacing is set */
  --za-display-condense: 0.8;
  font-family: var(--za-font-display);
  font-size: var(--za-fs-slide-title);
  font-weight: 600;
  line-height: 1;
  font-variant-ligatures: common-ligatures;
}

.za-slide__meta {
  margin-top: calc(14 * var(--za-u));
  font-size: var(--za-fs-small);
  line-height: calc(32 / 17.5);
  letter-spacing: 0.136em;
}

.za-slide__meta--columns {
  display: flex;
  gap: calc(48 * var(--za-u));
  text-align: start;
}

.za-slide__caps {
  text-transform: uppercase;
}

.za-slide__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(36 * var(--za-u));
  margin-top: calc(26 * var(--za-u));
}

/* WP (2026-10-11): the photos of the current work: "Meer foto's van dit werk", two small round arrows
   and the counter "1 van de 12" (Playfair Display: the numbers bold). Measured from the design. */
.za-photos-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: max(6px, calc(10 * var(--za-u))); /* WP (2026-10-13): close under the details */
}

.za-photos-nav[hidden] {
  display: none;
}

.za-photos-nav__label {
  min-width: 0;
  padding-inline-start: 0.1em; /* balances the letter-spacing after the last letter */
  text-wrap: balance;
  font-family: var(--za-font-display);
  font-size: max(0.875rem, calc(24 * var(--za-u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* WP (2026-10-12): the small arrows beside "Meer foto's van dit werk", the counter just under it */
.za-photos-nav__row {
  display: flex;
  align-items: center;
  gap: max(14px, calc(34 * var(--za-u)));
}

.za-photos-nav__btn {
  --za-btn-size: calc(57 * var(--za-u));
  flex: none;
  width: var(--za-btn-size);
  min-width: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--za-cream);
  cursor: pointer;
}

.za-photos-nav__btn svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.za-photos-nav__btn circle {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 6; /* thinner than the big arrows' ring, but the same weight on screen as in the design */
  transition: fill var(--za-dur-hover) var(--za-ease-in-out);
}

.za-photos-nav__btn path {
  fill: currentColor;
  transition: fill var(--za-dur-hover) var(--za-ease-in-out), translate var(--za-dur-hover) var(--za-ease-out);
}

.za-photos-nav__btn:focus-visible circle {
  fill: var(--za-cream);
}

.za-photos-nav__btn:focus-visible path {
  fill: var(--za-ink);
}

@media (hover: hover) {
  .za-photos-nav__btn:hover circle {
    fill: var(--za-cream);
  }

  .za-photos-nav__btn:hover path {
    fill: var(--za-ink);
  }

  .za-photos-nav__btn--prev:hover path { translate: -6px 0; }
  .za-photos-nav__btn--next:hover path { translate: 6px 0; }
}

/* a fixed width, so it doesn't shift when the count goes from 9 to 10; pulled up into the arrows' row
   (it sits between them), close under the label */
.za-photos-nav__count {
  min-width: 6em;
  margin-top: max(-6px, calc(-6 * var(--za-u)));
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: max(1rem, calc(21 * var(--za-u)));
  font-weight: 400;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  word-spacing: 0.14em; /* Playfair's space is narrow: "1 van de 12", not "1van de 12" */
}

.za-photos-nav__num {
  font-weight: 700;
}

/* WP (2026-10-11): "Swipe voor andere werken", tablets and phones only (see the 1199 px block) */
.za-slide__swipe {
  display: none;
}

/* WP (2026-10-13): "Kantel je scherm voor een grotere weergave": a small note over the photo, phones held
   upright only, after a few seconds without scrolling at the works (js/main.js; once per visit) */
.za-rotate-hint {
  position: absolute;
  z-index: 6;
  top: calc(var(--za-media-h) / 2);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100% - 2 * var(--za-gutter)), 320px);
  padding: 12px 6px 12px 14px;
  border: 1px solid rgb(248 233 186 / 0.25);
  border-radius: 16px;
  background: rgb(0 7 21 / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  color: var(--za-cream);
  opacity: 0;
  translate: -50% calc(-50% + 12px);
  transition: opacity 0.4s var(--za-ease-out), translate 0.4s var(--za-ease-out);
  pointer-events: none;
}

.za-rotate-hint.is-shown {
  opacity: 1;
  translate: -50% -50%;
  pointer-events: auto;
}

.za-rotate-hint__icon {
  flex: none;
  width: 40px;
  height: 40px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the phone turns to landscape and back */
.za-rotate-hint__phone {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: za-rotate-phone 2.8s var(--za-ease-in-out) infinite;
}

@keyframes za-rotate-phone {
  0%, 20% { rotate: 0deg; }
  45%, 70% { rotate: -90deg; }
  95%, 100% { rotate: 0deg; }
}

.za-rotate-hint__text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.za-rotate-hint__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.za-rotate-hint__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@keyframes za-swipe-drift {
  0%, 100% { translate: 0 0; }
  25% { translate: -14px 0; }
  75% { translate: 14px 0; }
}

/* Arrows: on the sides, vertically centred on the title (title caps centre ≈ 0.5em) */
.za-slider__arrow {
  position: absolute;
  z-index: 4;
  top: calc(var(--za-fs-slide-title) * 0.5 - var(--za-arrow-size) / 2);
  width: var(--za-arrow-size);
  min-width: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--za-cream);
  cursor: pointer;
}

.za-slider__arrow--prev { left: calc(278 * var(--za-u)); }
.za-slider__arrow--next { right: calc(278 * var(--za-u)); }

.za-slider__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.za-slider__arrow circle {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 3.5;
  transition: fill var(--za-dur-hover) var(--za-ease-in-out);
}

.za-slider__arrow path {
  fill: currentColor;
  transition: fill var(--za-dur-hover) var(--za-ease-in-out), translate var(--za-dur-hover) var(--za-ease-out);
}

.za-slider__arrow:focus-visible circle {
  fill: var(--za-cream);
}

.za-slider__arrow:focus-visible path {
  fill: var(--za-ink);
}

/* WP: hover only where there is a real pointer: on touch screens a tapped button would stay filled */
@media (hover: hover) {
  .za-slider__arrow:hover circle {
    fill: var(--za-cream);
  }

  .za-slider__arrow:hover path {
    fill: var(--za-ink);
  }

  /* the chevron nudges in its direction */
  .za-slider__arrow--prev:hover path { translate: -5px 0; }
  .za-slider__arrow--next:hover path { translate: 5px 0; }
}

/* WP (2026-10-11): the arrows' labels ("Vorig werk" / "Volgend werk"), centred under the ring */
.za-slider__arrow-label {
  position: absolute;
  top: calc(100% + 24 * var(--za-u));
  left: 50%;
  translate: -50% 0;
  padding-inline-start: 0.12em;
  font-family: var(--za-font-display);
  font-size: max(0.8125rem, calc(22 * var(--za-u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Caption follows the active slide: title, details and buttons rise in one after another */
.za-slide__title,
.za-slide__meta,
.za-photos-nav,
.za-slide__actions,
.za-slide__swipe {
  transition: opacity 0.9s var(--za-ease-out), translate 0.9s var(--za-ease-out);
}

.za-slide__caption:not(.is-active) :is(.za-slide__title, .za-slide__meta, .za-photos-nav, .za-slide__actions, .za-slide__swipe) {
  opacity: 0;
  translate: 0 20px;
  transition-duration: 0.4s;
}

.za-slide__caption.is-active .za-slide__title { transition-delay: 0.35s; }
.za-slide__caption.is-active .za-slide__meta { transition-delay: 0.48s; }
.za-slide__caption.is-active .za-photos-nav { transition-delay: 0.6s; }
.za-slide__caption.is-active .za-slide__actions { transition-delay: 0.7s; }
.za-slide__caption.is-active .za-slide__swipe { transition-delay: 0.8s; }

/* 5. Sections --------------------------------------------------------------- */

/* 01 · hero ------------------------------------------------------------------ */
.za-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(1040 * var(--za-u));
  background: var(--za-ink);
  isolation: isolate;
}

.za-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--za-ink);
  isolation: isolate;
}

/* Mural, right-aligned. The PSD fades it in from the left (x 565 → 1040) — mask stops are the
   measured visibility.
   WP: the 88 % opacity that was baked into the static site's asset (alpha 224) is set here, on an
   opaque Media Library image, so a replaced photo gets the same treatment. As a filter, so the
   reduced-motion rule (opacity: 1 !important) can't reset it. */
.za-hero__mural {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(1436 * var(--za-u));
  max-width: none;
  filter: opacity(0.8784);
  -webkit-mask-image: linear-gradient(to right, transparent 5.6%, rgb(0 0 0 / 0.08) 8.4%, rgb(0 0 0 / 0.16) 11.1%, rgb(0 0 0 / 0.29) 13.9%, rgb(0 0 0 / 0.44) 16.7%, rgb(0 0 0 / 0.6) 19.5%, rgb(0 0 0 / 0.73) 22.3%, rgb(0 0 0 / 0.83) 25.1%, rgb(0 0 0 / 0.89) 27.9%, rgb(0 0 0 / 0.94) 30.6%, rgb(0 0 0 / 0.97) 33.4%, #000 37.6%);
  mask-image: linear-gradient(to right, transparent 5.6%, rgb(0 0 0 / 0.08) 8.4%, rgb(0 0 0 / 0.16) 11.1%, rgb(0 0 0 / 0.29) 13.9%, rgb(0 0 0 / 0.44) 16.7%, rgb(0 0 0 / 0.6) 19.5%, rgb(0 0 0 / 0.73) 22.3%, rgb(0 0 0 / 0.83) 25.1%, rgb(0 0 0 / 0.89) 27.9%, rgb(0 0 0 / 0.94) 30.6%, rgb(0 0 0 / 0.97) 33.4%, #000 37.6%);
}

/* Handstyle texture: white tiles + black letters, blended into the navy. */
.za-hero__tags {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(1257 * var(--za-u));
  max-width: none;
  mix-blend-mode: soft-light;
}

/* Bottom fade into ink (measured y 870 → 1012) */
.za-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent calc(870 * var(--za-u)),
    rgb(0 7 21 / 0.06) calc(900 * var(--za-u)),
    rgb(0 7 21 / 0.22) calc(930 * var(--za-u)),
    rgb(0 7 21 / 0.49) calc(960 * var(--za-u)),
    rgb(0 7 21 / 0.84) calc(990 * var(--za-u)),
    var(--za-ink) calc(1012 * var(--za-u)));
}

/* Site navigation -------------------------------------------------------------
   Desktop: fixed column at the PSD logo position (48, 48), menu items below.
   The ring rotates with scroll speed (js/main.js). Parts over light sections get
   .is-on-light and switch to ink, each at its own moment as it crosses the edge. */
.za-nav {
  position: fixed;
  top: calc(48 * var(--za-u));
  left: calc(48 * var(--za-u));
  z-index: 50;
  width: calc(172 * var(--za-u));
  pointer-events: none;
}

.za-nav > * {
  pointer-events: auto;
}

/* Logo badge: animated tag (plays once) inside a ring of type */
.za-logo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  color: var(--za-cream);
  transition: color var(--za-dur-hover) var(--za-ease-in-out);
}

/* WP (2026-10-09): the badge restyled after the supplied design: the tag a little smaller, inside an
   inner ring; Playfair Display between two thin rings (measured from that design, in viewBox units) */
.za-logo__tag {
  position: absolute;
  top: calc(51.3 / 172 * 100%);
  left: calc(38.6 / 172 * 100%);
  width: calc(87.5 / 172 * 100%);
  transition: filter var(--za-dur-hover) var(--za-ease-in-out);
}

.za-logo__ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}

.za-logo__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4px;
}

.za-logo__text {
  fill: currentColor;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 17.8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.za-logo.is-on-light {
  color: var(--za-navy);
}

.za-logo.is-on-light .za-logo__tag {
  filter: brightness(0);
}

/* once the page moves, a soft halo keeps the cream parts readable over photos */
.za-nav.is-scrolled .za-logo:not(.is-on-light) .za-logo__ring {
  filter: drop-shadow(0 0 5px rgb(0 7 21 / 0.55));
}

/* Menu items (PSD: italic caps, 25.5 px, 59 px apart, 50 px below the logo) */
.za-nav__menu {
  margin-top: calc(41 * var(--za-u));
  margin-left: calc(-17 * var(--za-u));
}

.za-nav__list {
  display: grid;
  justify-items: start;
  gap: calc(25 * var(--za-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.za-nav__link {
  display: inline-block;
  padding-bottom: 0.14em;
  color: var(--za-cream);
  font-family: var(--za-font-display);
  font-size: max(0.9375rem, calc(25.5 * var(--za-u)));
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  /* hover: a hairline underline draws in from the left */
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition:
    color var(--za-dur-hover) var(--za-ease-in-out),
    background-size var(--za-dur-hover) var(--za-ease-in-out),
    text-shadow var(--za-dur-hover) var(--za-ease-in-out);
}

.za-nav__link:hover,
.za-nav__link:focus-visible,
.za-nav__link[aria-current="page"] {
  background-size: 100% 1px;
}

.za-nav.is-scrolled .za-nav__item:not(.is-on-light) .za-nav__link {
  text-shadow: 0 0 10px rgb(0 7 21 / 0.7);
}

.za-nav__item.is-on-light .za-nav__link {
  color: var(--za-navy);
}

/* phone menu toggle (shown < 768 px) */
.za-nav__toggle {
  display: none;
}

.za-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(307 * var(--za-u));
  padding-inline: var(--za-gutter);
  text-align: center;
}

.za-heading--hero {
  width: 100%;
}

.za-heading--hero .za-heading__classic {
  --za-ls: -0.03em;
  font-size: var(--za-fs-hero);
  line-height: 0.9;
}

.za-heading--hero .za-heading__graffiti {
  --za-ls: 0.055em;
  margin-top: calc(2 * var(--za-u));
  font-size: var(--za-fs-hero-graffiti);
  line-height: 1.1;
}

.za-hero__intro {
  text-shadow: var(--za-text-halo);
  max-width: max(calc(860 * var(--za-u)), 34em);
  margin-top: calc(43 * var(--za-u));
  font-size: max(0.8125rem, calc(24 * var(--za-u)));
  line-height: calc(35 / 24);
}

/* USP strip: items separated by a decorative cap-height bar (the PSD's "I") */
.za-usps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(238 * var(--za-u));
  padding-inline-start: var(--za-ls-caption-wide); /* balances the trailing letter-spacing */
  letter-spacing: var(--za-ls-caption-wide);
}

.za-usps__item + .za-usps__item::before {
  content: "";
  display: inline-block;
  width: 0.16em;
  height: 0.72em;
  margin-inline: 0.42em 0.6em;
  background: currentColor;
}

/* 02 · works ----------------------------------------------------------------- */
.za-works {
  padding-top: calc(126 * var(--za-u));
  padding-bottom: calc(58 * var(--za-u)); /* WP: + the caption block's 32 = the design's 90 */
  background: var(--za-ink);
}

.za-works__heading {
  margin-bottom: calc(49 * var(--za-u));
  padding-inline: var(--za-gutter);
}

.za-works__heading .za-heading__classic {
  --za-ls: -0.015em;
  line-height: 0.953;
}

/* 03 · statement-canvas ------------------------------------------------------ */
.za-statement-canvas {
  position: relative;
  overflow: hidden;
  min-height: calc(595 * var(--za-u));
  padding-top: calc(174 * var(--za-u));
  padding-inline: var(--za-gutter);
  background: var(--za-ink);
  isolation: isolate;
}

/* Photo + ink, toned warm by the PSD's adjustment (SVG filter in the markup) */
.za-statement-canvas__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--za-ink);
  filter: url(#za-tone-canvas);
}

.za-statement-canvas__bg,
.za-statement-canvas::before {
  position: absolute;
  top: calc(-3 * var(--za-u));
  left: 0;
  width: 100%;
  height: calc(598 * var(--za-u));
}

/* WP: the 90 % opacity baked into the static site's asset (alpha 230), now set here (see the hero mural) */
.za-statement-canvas__bg {
  object-fit: cover;
  filter: opacity(0.902);
}

/* Measured fades: in from ink at the top, back to ink at the wall's foot */
.za-statement-canvas::before {
  content: "";
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--za-ink) 0%, rgb(0 7 21 / 0.81) 2.7%, rgb(0 7 21 / 0.65) 5.35%, rgb(0 7 21 / 0.54) 8%,
    rgb(0 7 21 / 0.43) 10.7%, rgb(0 7 21 / 0.27) 13.4%, rgb(0 7 21 / 0.12) 16.1%, rgb(0 7 21 / 0.03) 18.7%,
    transparent 21.4%, transparent 56.2%, rgb(0 7 21 / 0.03) 61.5%, rgb(0 7 21 / 0.07) 66.9%,
    rgb(0 7 21 / 0.15) 72.2%, rgb(0 7 21 / 0.25) 77.6%, rgb(0 7 21 / 0.39) 82.9%, rgb(0 7 21 / 0.54) 88.3%,
    rgb(0 7 21 / 0.68) 93.6%, rgb(0 7 21 / 0.89) 99%, var(--za-ink) 100%);
}

.za-statement-canvas__heading,
.za-old-masters__caption {
  text-shadow: var(--za-text-halo);
}

.za-statement-canvas__heading .za-heading__classic {
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(108.5 * var(--za-u)));
}

/* This graffiti layer is slightly widened in the PSD (unlike the hero's) */
.za-statement-canvas__heading .za-heading__graffiti {
  --za-display-condense: 1.06;
  --za-ls: 0.069em;
  margin-top: calc(20 * var(--za-u));
  font-size: max(2rem, calc(91 * var(--za-u)));
}

/* 04 · statement-wall -------------------------------------------------------- */
.za-statement-wall {
  position: relative;
  overflow: hidden;
  min-height: calc(1056 * var(--za-u));
  background: var(--za-ink);
  isolation: isolate;
}

.za-statement-wall__media {
  /* the floor fades into the next section instead of being cut off */
  --za-edge-bottom: calc(200 * var(--za-u));
  --za-edge-bottom-color: var(--za-ink-2);
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Exported at full size; its transparent top edge starts above the section */
.za-statement-wall__bg {
  position: absolute;
  top: calc(-158 * var(--za-u));
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(1356 * var(--za-u));
  object-fit: cover;
}

/* Gold spray can, cropped by the right viewport edge.
   WP (2026-10-11): the new can (702 × 1276, transparent), one plain image, scaled and placed so the
   can itself has the PSD can's height and position (0.855 u/px: can from y 239 to ~856). */
.za-statement-wall__can {
  position: absolute;
  top: calc(-43 * var(--za-u));
  right: 0;
  width: calc(600 * var(--za-u));
  max-width: none;
}

/* Lying can for phones and tablets (see the block at the end); hidden, and therefore not loaded, on desktop */
.za-statement-wall__can-flat {
  display: none;
}

.za-statement-wall__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(291 * var(--za-u)) var(--za-gutter) calc(40 * var(--za-u));
  text-align: center;
}

.za-statement-wall__heading {
  width: 100%;
}

.za-statement-wall__heading .za-heading__classic {
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(114 * var(--za-u)));
}

.za-statement-wall__heading .za-heading__graffiti {
  --za-display-condense: 0.93;
  --za-ls: 0.069em;
  margin-top: calc(25 * var(--za-u));
  font-size: max(2rem, calc(112 * var(--za-u)));
}

.za-statement-wall__body {
  max-width: max(calc(985 * var(--za-u)), 34em);
  margin-top: calc(49 * var(--za-u));
}

.za-statement-wall__caption {
  margin-top: calc(244 * var(--za-u));
  font-size: max(0.75rem, calc(22 * var(--za-u)));
  letter-spacing: var(--za-ls-caption-wide);
  padding-inline-start: var(--za-ls-caption-wide);
}

/* 05 · everyday -------------------------------------------------------------- */
.za-everyday {
  position: relative;
  overflow: hidden;
  min-height: calc(1079 * var(--za-u));
  background: var(--za-ink-2);
  isolation: isolate;
}

.za-everyday__media {
  /* fades in from the section above and out into "de oude grootmeesters" */
  --za-edge-top: calc(150 * var(--za-u));
  --za-edge-top-color: var(--za-ink-2);
  --za-edge-bottom: calc(210 * var(--za-u));
  --za-edge-bottom-color: var(--za-ink-2);
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* The left-hand fade to navy is part of the exported photo (its alpha) */
.za-everyday__bg {
  position: absolute;
  top: calc(1 * var(--za-u));
  left: calc(224 * var(--za-u));
  width: calc(1696 * var(--za-u));
  max-width: none;
  height: calc(1268 * var(--za-u));
}

/* WP: a replacement photo (opaque) gets the original's fade and opacity from CSS instead
   (measured from the original's alpha: 42 %, fading in over the left 45 %) */
.za-everyday__bg.is-replaced {
  filter: opacity(0.42);
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.08) 5%, rgb(0 0 0 / 0.32) 15%, rgb(0 0 0 / 0.68) 25%, rgb(0 0 0 / 0.93) 35%, #000 45%);
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.08) 5%, rgb(0 0 0 / 0.32) 15%, rgb(0 0 0 / 0.68) 25%, rgb(0 0 0 / 0.93) 35%, #000 45%);
}

/* WP: the phone-only photo (see the phone block); hidden, and therefore not loaded, elsewhere */
.za-everyday__bg--phone {
  display: none;
}

.za-everyday__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(102 * var(--za-u)) var(--za-gutter) calc(30 * var(--za-u));
  text-align: center;
}

.za-everyday__heading {
  width: 100%;
}

.za-everyday__heading .za-heading__classic {
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(124 * var(--za-u)));
}

.za-everyday__heading .za-heading__graffiti {
  --za-display-condense: 0.913;
  --za-ls: 0.069em;
  margin-top: calc(18 * var(--za-u));
  font-size: max(2rem, calc(110 * var(--za-u)));
}

.za-everyday__lead {
  --za-display-condense: 0.797;
  width: 100%;
  margin-top: calc(19 * var(--za-u));
  font-size: max(1.5rem, calc(52 * var(--za-u)));
}

.za-everyday__body {
  max-width: max(calc(1025 * var(--za-u)), 34em);
  margin-top: calc(21 * var(--za-u));
}

.za-everyday__tagline {
  --za-display-condense: 0.86;
  width: 100%;
  margin-top: calc(60 * var(--za-u));
  font-size: max(1.75rem, calc(67.5 * var(--za-u)));
}

.za-everyday__tags {
  --za-display-condense: 0.908;
  width: 100%;
  margin-top: calc(13 * var(--za-u));
  font-size: max(1.125rem, calc(41.5 * var(--za-u)));
}

.za-everyday__caption {
  max-width: max(calc(1060 * var(--za-u)), 34em);
  margin-top: calc(125 * var(--za-u));
  font-size: max(0.75rem, calc(22 * var(--za-u)));
  line-height: calc(35 / 22);
  letter-spacing: var(--za-ls-caption-wide);
  padding-inline-start: var(--za-ls-caption-wide);
}

/* 06 · old-masters ------------------------------------------------------------ */
.za-old-masters {
  position: relative;
  overflow: hidden;
  /* WP (2026-10-28): ends just under the names now: the red burst that overlapped its bottom is gone and
     the for-sale section follows (was 1534) */
  min-height: calc(1290 * var(--za-u));
  background: var(--za-ink-2);
  isolation: isolate;
}

/* Darker band behind the names (hard edge at PSD y 6744, i.e. 1078 into the section) */
.za-old-masters::before {
  content: "";
  position: absolute;
  inset: calc(1078 * var(--za-u)) 0 0;
  z-index: -2;
  background: var(--za-ink-3);
}

.za-old-masters__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(83 * var(--za-u)) var(--za-gutter) 0;
  text-align: center;
}

.za-old-masters__heading {
  width: 100%;
}

.za-old-masters__heading .za-heading__classic {
  --za-display-condense: 0.792;
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(117 * var(--za-u)));
  line-height: 0.923;
}

.za-old-masters__body {
  max-width: max(calc(1105 * var(--za-u)), 34em);
  margin-top: calc(42 * var(--za-u));
}

.za-old-masters__quote {
  --za-display-condense: 0.87;
  width: 100%;
  margin-top: calc(41 * var(--za-u));
  font-size: max(1.5rem, calc(67.5 * var(--za-u)));
  line-height: calc(63 / 67.5);
}

.za-quote > p::before { content: "\201C"; }
.za-quote > p::after { content: "\201D"; }

/* Statues + pigment clouds; their dark export background drops out (PSD: screen).
   WP: new opaque export (2026-10-09), placed so the statues stand where the PSD's did (heads under
   the quote, pedestals under the red spray): 1387 px at 1.08 u/px. The 64 % opacity the PSD export
   had baked in is a filter here (the reduced-motion rule can't reset it); its clouds run to the
   image edges, so the edges fade out. */
.za-old-masters__statues {
  position: absolute;
  top: calc(543 * var(--za-u));
  left: calc(225 * var(--za-u));
  z-index: -1;
  width: calc(1498 * var(--za-u));
  max-width: none;
  mix-blend-mode: screen;
  filter: opacity(0.64);
  /* WP (2026-10-28): the section now ends just under the names (1290 u, 61 % down the image), so the
     statues fade out from half their height instead of being cut off there */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 47%, transparent 60%);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 47%, transparent 60%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.za-old-masters__names {
  position: absolute;
  top: calc(1053 * var(--za-u));
  left: 0;
  right: 0;
  text-align: center;
}

.za-old-masters__caption {
  font-size: max(0.75rem, calc(22 * var(--za-u)));
  letter-spacing: var(--za-ls-caption-wide);
  padding-inline: var(--za-gutter);
  padding-inline-start: calc(var(--za-gutter) + var(--za-ls-caption-wide));
}

/* condensed like the other display text; starts slightly off-screen as in the PSD */
.za-old-masters .za-marquee {
  --za-display-condense: 0.785;
  width: calc(100% / var(--za-display-condense));
  margin-top: calc(22 * var(--za-u));
  margin-left: calc(-10 * var(--za-u));
  transform: scaleX(var(--za-display-condense));
  transform-origin: left;
  font-family: var(--za-font-display);
  font-size: var(--za-fs-marquee);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

/* 07 · about ----------------------------------------------------------------- */
.za-about {
  position: relative;
  z-index: 1;
  overflow-x: clip; /* the spray burst may overlap upwards, never sideways */
  background: var(--za-cream);
  color: var(--za-navy);
}

/* WP (2026-10-28): the blue spray line from the gold can (supplied; was the red burst + marble hand, and the
   black line on tablet/phone). One opaque image, full width (phones: at least 560 px, anchored right so the
   can stays in view), navy on top and cream below in the section colours: its solid cream starts 37 % down,
   at the section edge, so the spray overlaps the section above. margin-top in % = a share of the width, so
   it follows the image height exactly. Sits behind the text. */
.za-about__transition {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.za-about__spray {
  --za-spray-w: 100%;
  position: absolute;
  top: 0;
  left: calc(100% - var(--za-spray-w));
  width: var(--za-spray-w);
  max-width: none;
  margin-top: calc(var(--za-spray-w) * -1003 / 2000 * 0.37);
}

.za-about__content {
  position: relative;
  z-index: 1;
  padding: calc(40 * var(--za-u)) var(--za-gutter) 0 calc(324 * var(--za-u));
}

.za-about__heading .za-heading__classic {
  --za-display-condense: 0.791;
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(117 * var(--za-u)));
  line-height: 0.93;
}

.za-about__heading .za-heading__classic--small {
  --za-display-condense: 0.803;
  margin-top: calc(-7 * var(--za-u));
  font-size: max(1.75rem, calc(76.6 * var(--za-u)));
  line-height: 1;
}

.za-about__text {
  max-width: max(calc(950 * var(--za-u)), 34em);
  margin-top: calc(25 * var(--za-u));
}

.za-about__text > .za-body {
  line-height: calc(37 / 22);
  letter-spacing: 0.093em;
}

.za-about__text > .za-body + .za-body {
  margin-top: calc(24 * var(--za-u));
}

/* Press mention: subtle outlined link with the broadcaster's logo, under the about text */
.za-press {
  display: inline-flex;
  align-items: center;
  gap: max(14px, calc(22 * var(--za-u)));
  max-width: 100%;
  margin-top: calc(40 * var(--za-u));
  padding: max(10px, calc(13 * var(--za-u))) max(18px, calc(28 * var(--za-u))) max(10px, calc(13 * var(--za-u))) max(12px, calc(16 * var(--za-u)));
  border: 1px solid rgb(1 7 30 / 0.22);
  border-radius: 999px;
  background: rgb(249 239 207 / 0.55);
  color: var(--za-navy);
  text-decoration: none;
  transition:
    border-color var(--za-dur-hover) var(--za-ease-in-out),
    background-color var(--za-dur-hover) var(--za-ease-in-out),
    box-shadow var(--za-dur-hover) var(--za-ease-in-out);
}

.za-press:hover,
.za-press:focus-visible {
  border-color: var(--za-navy);
  background: var(--za-cream-light);
  box-shadow: 0 6px 18px rgb(1 7 30 / 0.08);
}

.za-press:focus-visible {
  outline: 2px solid var(--za-navy);
  outline-offset: 3px;
}

/* WP: the logo is a Media Library image in a fixed frame (any replacement keeps this size) */
.za-press__logo {
  flex: none;
  width: max(92px, calc(112 * var(--za-u)));
  aspect-ratio: 500 / 142;
  object-fit: contain;
}

/* WP: the link is a Pencil button; its editable text is span.pencil-button__text */
.za-press__text,
.za-press .pencil-button__text {
  font-family: var(--za-font-sans);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
  text-wrap: balance;
}

.za-press__arrow {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-size: max(0.875rem, calc(17 * var(--za-u)));
  transition: translate var(--za-dur-hover) var(--za-ease-out);
}

.za-press:hover .za-press__arrow,
.za-press:focus-visible .za-press__arrow {
  translate: 2px -2px;
}

.za-about__photos {
  max-width: calc(1388 * var(--za-u));
  margin-top: calc(38 * var(--za-u));
}

/* 08 · commission ------------------------------------------------------------ */
.za-commission {
  overflow-x: clip; /* collages slide in from beyond the right edge */
  background: var(--za-cream);
  color: var(--za-navy);
  padding: calc(65 * var(--za-u)) 0 calc(140 * var(--za-u));
}

/* Closing call to action, centred under the options */
.za-commission__cta {
  display: flex;
  justify-content: center;
  margin-top: calc(150 * var(--za-u));
  padding-inline: var(--za-gutter);
}

.za-commission__intro {
  padding: 0 var(--za-gutter) 0 calc(324 * var(--za-u));
}

.za-commission__heading .za-heading__classic,
.za-availability__heading .za-heading__classic,
.za-request__heading .za-heading__classic {
  --za-display-condense: 0.791;
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(117 * var(--za-u)));
  line-height: 0.932;
}

.za-commission__lead {
  margin-top: calc(40 * var(--za-u));
  font-size: max(1rem, calc(22 * var(--za-u)));
  letter-spacing: 0.075em;
}

.za-commission__footnote {
  max-width: max(calc(1015 * var(--za-u)), 34em);
  margin-top: calc(14 * var(--za-u));
  font-size: max(0.75rem, calc(18 * var(--za-u)));
  line-height: calc(26 / 18);
  letter-spacing: 0.025em;
}

/* Option row: text left (in the content column), collage flush with the right edge */
.za-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--za-option-visual);
  align-items: start;
  padding-left: calc(324 * var(--za-u));
}

.za-option--meesterwerk {
  --za-option-visual: calc(847 * var(--za-u));
  margin-top: calc(46 * var(--za-u));
}

.za-option--visie {
  --za-option-visual: calc(792 * var(--za-u));
  margin-top: calc(80 * var(--za-u));
}

.za-option__text {
  max-width: max(calc(745 * var(--za-u)), 34em);
  padding-top: calc(27 * var(--za-u));
}

.za-option__title {
  --za-display-condense: 0.782;
  font-family: var(--za-font-display);
  font-size: var(--za-fs-h3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.za-option__subtitle {
  --za-display-condense: 0.79;
  margin-top: calc(12 * var(--za-u));
  font-family: var(--za-font-display);
  font-size: var(--za-fs-option-sub);
  font-weight: 700;
  line-height: 1;
}

.za-option__body {
  margin-top: calc(29 * var(--za-u));
  font-size: max(1rem, calc(20 * var(--za-u)));
  line-height: calc(31 / 20);
  letter-spacing: 0.093em;
}

.za-option__body + .za-option__body {
  margin-top: calc(13 * var(--za-u));
}

.za-option__quote {
  --za-display-condense: 0.84;
  margin-top: calc(30 * var(--za-u));
  font-size: var(--za-fs-option-quote);
  line-height: 1.1;
  text-wrap: balance;
}

.za-option__visual {
  position: relative;
  margin: 0;
}

/* "Impressie" label for AI-generated visuals: small caption pill on the photo */
.za-option__label {
  position: absolute;
  right: calc(20 * var(--za-u));
  bottom: calc(22 * var(--za-u));
  padding: 0.45em 0.9em 0.45em calc(0.9em + var(--za-ls-caption-wide));
  border-radius: 999px;
  background: var(--za-overlay-strong);
  color: var(--za-cream);
  font-size: max(0.6875rem, calc(14 * var(--za-u)));
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--za-ls-caption-wide);
  text-transform: uppercase;
}

.za-option__visual img {
  width: 100%;
}


/* 09 · availability / 10 · request-form (cream-section pattern) ------------------
   Same column as about/commission: content starts at x 324 and runs to x 1600 (PSD units),
   separated from the section above by a hairline. */
.za-availability,
.za-request {
  overflow-x: clip;
  background: var(--za-cream);
  color: var(--za-navy);
}

.za-availability {
  padding-bottom: calc(150 * var(--za-u));
}

.za-request {
  padding-bottom: calc(200 * var(--za-u));
}

.za-availability__inner,
.za-request__inner {
  margin-left: calc(324 * var(--za-u));
  margin-right: calc(320 * var(--za-u));
  padding-top: calc(120 * var(--za-u));
  border-top: 1px solid rgb(1 7 30 / 0.16);
}

.za-availability__heading .za-heading__classic,
.za-request__heading .za-heading__classic {
  line-height: 0.95;
}

.za-request__heading {
  outline: none; /* receives focus from the calendar's "choose" flow */
}

.za-availability__subheading {
  --za-display-condense: 0.79;
  margin-top: calc(18 * var(--za-u));
  font-family: var(--za-font-display);
  font-size: var(--za-fs-h4);
  font-weight: 700;
  line-height: 1;
}

.za-availability__intro {
  max-width: max(calc(950 * var(--za-u)), 34em);
  margin-top: calc(30 * var(--za-u));
  line-height: calc(37 / 22);
  letter-spacing: 0.093em;
}

.za-availability__note {
  max-width: 30em;
  margin-top: calc(56 * var(--za-u));
  font-family: var(--za-font-display);
  font-size: max(1.25rem, calc(36 * var(--za-u)));
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
}

.za-availability__cta {
  margin-top: calc(36 * var(--za-u));
}

/* Calendar: legend, then one card per visible month (VISIBLE_MONTHS in js/availability.js, set as
   --za-months), side by side and filling the column. A free month is a button that pre-fills the form. */
.za-calendar {
  margin-top: calc(64 * var(--za-u));
}

.za-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0 0 calc(28 * var(--za-u));
  padding: 0;
  list-style: none;
  font-family: var(--za-font-sans);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

.za-calendar__key {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.za-calendar__swatch {
  width: 28px;
  height: 10px;
  border: 1.5px solid currentColor;
}

.za-calendar__swatch.is-booked {
  background: currentColor;
}

.za-calendar__grid {
  display: grid;
  grid-template-columns: repeat(var(--za-months, 3), minmax(0, 1fr));
  gap: max(16px, calc(28 * var(--za-u)));
  margin: 0;
  padding: 0;
  list-style: none;
}

.za-month {
  display: flex;
  flex-direction: column;
  gap: max(18px, calc(30 * var(--za-u)));
  width: 100%;
  height: 100%;
  margin: 0;
  padding: max(22px, calc(40 * var(--za-u))) max(22px, calc(44 * var(--za-u)));
  border: 1px solid rgb(1 7 30 / 0.2);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition:
    background-color var(--za-dur-hover) var(--za-ease-in-out),
    border-color var(--za-dur-hover) var(--za-ease-in-out),
    color var(--za-dur-hover) var(--za-ease-in-out),
    translate var(--za-dur-hover) var(--za-ease-out);
}

button.za-month {
  cursor: pointer;
}

button.za-month:hover {
  border-color: var(--za-navy);
  background: var(--za-cream-light);
  translate: 0 -3px;
}

button.za-month:focus-visible {
  outline: 2px solid var(--za-navy);
  outline-offset: 3px;
}

.za-month.is-chosen,
button.za-month.is-chosen:hover {
  border-color: var(--za-navy);
  background: var(--za-navy);
  color: var(--za-cream);
}

.za-month.is-full {
  border-style: dashed;
  color: color-mix(in srgb, var(--za-navy) 70%, var(--za-cream));
}

.za-month__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* WP: Stanley can show more months (up to four per row), so the name never gets wider than its card:
   19cqi fits "SEPTEMBER"; with three per row (the design) the cap never applies. */
.za-month {
  container-type: inline-size;
}

.za-month__name {
  font-family: var(--za-font-display);
  font-size: min(max(1.625rem, calc(48 * var(--za-u))), 19cqi);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.za-month__year,
.za-month__status,
.za-month__chosen {
  font-family: var(--za-font-sans);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

.za-month__weeks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(6px, calc(10 * var(--za-u)));
}

.za-month__week {
  height: max(10px, calc(16 * var(--za-u)));
  border: 1.5px solid currentColor;
}

.za-month__week.is-booked {
  background: currentColor;
}

.za-month__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.za-month__chosen {
  display: none;
}

.za-month.is-chosen .za-month__chosen {
  display: inline;
}

.za-calendar__feedback {
  min-height: 1.6em;
  margin-top: 18px;
  font-family: var(--za-font-sans);
  font-size: max(0.875rem, calc(17 * var(--za-u)));
  font-weight: 700;
}

/* Request form layout: heading, then steps (left) and the form panel (right) */
.za-request__layout {
  display: grid;
  grid-template-columns: calc(380 * var(--za-u)) minmax(0, 1fr);
  gap: calc(96 * var(--za-u));
  align-items: start;
  margin-top: calc(48 * var(--za-u));
}

.za-request__aside {
  position: sticky;
  top: calc(64 * var(--za-u));
}

.za-request__intro {
  line-height: calc(37 / 22);
  letter-spacing: 0.093em;
}

/* Step list */
.za-steps {
  margin: calc(44 * var(--za-u)) 0 0;
  padding: 0;
  list-style: none;
}

.za-steps__button {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid rgb(1 7 30 / 0.16);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  opacity: 0.42;
  cursor: pointer;
  transition: opacity var(--za-dur-hover) var(--za-ease-in-out);
}

.za-steps__item:last-child .za-steps__button {
  border-bottom: 1px solid rgb(1 7 30 / 0.16);
}

.za-steps__button:disabled {
  cursor: default;
}

.za-steps__item.is-current .za-steps__button,
.za-steps__item.is-done .za-steps__button {
  opacity: 1;
}

.za-steps__button:not(:disabled):hover .za-steps__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.za-steps__num {
  min-width: 2ch;
  font-family: var(--za-font-display);
  font-size: max(1.125rem, calc(26 * var(--za-u)));
  font-style: italic;
  font-weight: 700;
}

.za-steps__title {
  font-family: var(--za-font-sans);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

/* done: a small tick after the title */
.za-steps__item.is-done .za-steps__title::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.42em;
  margin-left: 0.7em;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  rotate: -45deg;
  translate: 0 -0.25em;
}

/* Form panel */
.za-form {
  position: relative;
  padding: max(24px, calc(56 * var(--za-u))) max(20px, calc(64 * var(--za-u))) max(24px, calc(48 * var(--za-u)));
  border: 1px solid rgb(1 7 30 / 0.1);
  background: var(--za-cream-light);
  font-family: var(--za-font-sans);
}

.za-form__required {
  position: absolute;
  top: max(24px, calc(60 * var(--za-u)));
  right: max(20px, calc(64 * var(--za-u)));
  font-size: 0.8125rem;
  font-weight: 700;
  opacity: 0.75;
}

.za-form__count {
  font-size: max(0.75rem, calc(14 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
  opacity: 0.75;
}

.za-form__title {
  --za-display-condense: 0.8;
  margin-top: 10px;
  font-family: var(--za-font-display);
  font-size: max(1.875rem, calc(56 * var(--za-u)));
  font-weight: 700;
  line-height: 1;
  outline: none;
}

.za-form__step:not([hidden]) {
  animation: za-step-in 0.75s var(--za-ease-out) both;
}

@keyframes za-step-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

.za-form__fields,
.za-form__group {
  display: grid;
  gap: 30px;
}

.za-form__fields {
  margin-top: max(24px, calc(36 * var(--za-u)));
}

.za-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.za-form__notice {
  padding: 14px 18px;
  border-left: 2px solid var(--za-navy);
  background: rgb(1 7 30 / 0.04);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
}

.za-form__message {
  margin-top: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--za-red);
  background: rgb(222 1 1 / 0.06);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}

.za-form__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgb(1 7 30 / 0.12);
}

.za-form__nav .za-button {
  min-width: 0;
}

.za-form__next {
  margin-left: auto;
}

.za-button:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Fields */
.za-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.za-field__label {
  padding: 0;
  font-size: max(0.75rem, calc(14 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

.za-field__req {
  margin-left: 0.15em;
}

.za-field__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1.5px solid rgb(1 7 30 / 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--za-navy);
  font: 600 max(1rem, calc(19 * var(--za-u))) / 1.4 var(--za-font-sans);
  letter-spacing: 0.01em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--za-dur-hover) var(--za-ease-in-out), box-shadow var(--za-dur-hover) var(--za-ease-in-out);
}

.za-field__input::placeholder {
  color: rgb(1 7 30 / 0.45);
  opacity: 1;
}

.za-field__input:hover {
  border-bottom-color: rgb(1 7 30 / 0.6);
}

.za-field__input:focus {
  outline: none;
  border-bottom-color: var(--za-navy);
  box-shadow: 0 1.5px 0 var(--za-navy);
}

.za-field__input--area {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.za-field__select {
  padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2301071e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px 8px;
  cursor: pointer;
}

.za-field__hint {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0.75;
}

.za-field__error {
  display: flex;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

.za-field__error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--za-red);
}

.za-field.is-invalid .za-field__input {
  border-bottom-color: var(--za-red);
  box-shadow: 0 1.5px 0 var(--za-red);
}

/* inputs that are styled through their label: kept focusable, visually hidden */
.za-pill__input,
.za-card__input,
.za-check__input,
.za-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* Pills (single choice, e.g. Binnen / Buiten): outline-on-cream button look */
.za-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.za-pill {
  position: relative;
  cursor: pointer;
}

.za-pill__text {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px 0 calc(28px + var(--za-ls-button));
  border: 1.5px solid var(--za-navy);
  border-radius: 999px;
  font-family: var(--za-font-display);
  font-size: var(--za-fs-button);
  font-weight: 600;
  letter-spacing: var(--za-ls-button);
  text-transform: uppercase;
  transition: background-color var(--za-dur-hover) var(--za-ease-in-out), color var(--za-dur-hover) var(--za-ease-in-out);
}

.za-pill:hover .za-pill__text {
  background: rgb(1 7 30 / 0.06);
}

.za-pill__input:checked + .za-pill__text {
  background: var(--za-navy);
  color: var(--za-cream);
}

.za-pill__input:focus-visible + .za-pill__text,
.za-check__input:focus-visible + .za-check__box,
.za-file__input:focus-visible + .za-file__button {
  outline: 2px solid var(--za-navy);
  outline-offset: 3px;
}

.za-field.is-invalid .za-pill__text {
  border-color: var(--za-red);
}

/* Option cards (keuze): the commission collages as visual */
.za-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.za-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgb(1 7 30 / 0.2);
  background: var(--za-cream);
  cursor: pointer;
  transition:
    border-color var(--za-dur-hover) var(--za-ease-in-out),
    box-shadow var(--za-dur-hover) var(--za-ease-in-out),
    translate var(--za-dur-hover) var(--za-ease-out);
}

.za-card:hover {
  border-color: var(--za-navy);
  translate: 0 -3px;
}

.za-card:has(.za-card__input:checked) {
  border-color: var(--za-navy);
  box-shadow: inset 0 0 0 1.5px var(--za-navy);
}

.za-card:has(.za-card__input:focus-visible) {
  outline: 2px solid var(--za-navy);
  outline-offset: 4px;
}

.za-field.is-invalid .za-card {
  border-color: var(--za-red);
}

.za-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 14px;
}

.za-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* WP: fixed frames with the static site's card-image proportions, so the card never depends on
   the size of the (replaceable) commission image */
.za-card__media img[data-card="meesterwerk"] { aspect-ratio: 424 / 267; }
.za-card__media img[data-card="visie"] { aspect-ratio: 3 / 2; } /* WP (2026-10-28): the new 1536 × 1024 collage */

.za-card__media .za-option__label {
  right: 10px;
  bottom: 10px;
}

.za-card__body {
  display: grid;
  gap: 6px;
  padding: 4px 20px 20px;
}

.za-card__title {
  font-family: var(--za-font-display);
  font-size: max(1.375rem, calc(32 * var(--za-u)));
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.za-card__hint {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.za-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--za-navy);
  border-radius: 50%;
  background: var(--za-cream);
  transition: background-color var(--za-dur-hover) var(--za-ease-in-out);
}

.za-card__check::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--za-cream);
  border-bottom: 2px solid var(--za-cream);
  rotate: 45deg;
  opacity: 0;
}

.za-card__input:checked ~ .za-card__check {
  background: var(--za-navy);
}

.za-card__input:checked ~ .za-card__check::after {
  opacity: 1;
}

/* Checkbox (flexibel, consent) */
.za-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  font-size: max(1rem, calc(17 * var(--za-u)));
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

.za-check__box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--za-navy);
  background: var(--za-cream);
  transition: background-color var(--za-dur-hover) var(--za-ease-in-out);
}

.za-check__box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--za-cream);
  border-bottom: 2px solid var(--za-cream);
  rotate: 45deg;
  opacity: 0;
}

.za-check__input:checked + .za-check__box {
  background: var(--za-navy);
}

.za-check__input:checked + .za-check__box::after {
  opacity: 1;
}

.za-field.is-invalid .za-check__box {
  border-color: var(--za-red);
}

.za-check a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* File picker: outline button + list of chosen files */
.za-field--file {
  position: relative;
  justify-items: start;
}

.za-file__button {
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
}

.za-file__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.za-file__list.is-empty {
  opacity: 0.6;
}

/* Done */
.za-form__done {
  display: grid;
  justify-items: start;
  gap: 22px;
  padding: 12px 0;
  outline: none;
  animation: za-step-in 0.75s var(--za-ease-out) both;
}

.za-form__done-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--za-navy);
  color: var(--za-cream);
}

.za-form__done-mark svg {
  width: 24px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.za-form__done-text {
  max-width: 24em;
  font-family: var(--za-font-display);
  font-size: max(1.5rem, calc(40 * var(--za-u)));
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
}

/* 12 · faq (cream section) ----------------------------------------------------
   Questions are <details>/<summary>: they work without JS; js/main.js adds the smooth
   height animation. The bottom padding leaves room for the footer's spray burst. */
.za-faq {
  overflow-x: clip;
  padding-bottom: calc(400 * var(--za-u));
  background: var(--za-cream);
  color: var(--za-navy);
}

.za-faq__inner {
  margin-left: calc(324 * var(--za-u));
  margin-right: calc(320 * var(--za-u));
  padding-top: calc(120 * var(--za-u));
  border-top: 1px solid rgb(1 7 30 / 0.16);
}

.za-faq__list {
  max-width: calc(1100 * var(--za-u));
  margin-top: calc(60 * var(--za-u));
  border-bottom: 1px solid rgb(1 7 30 / 0.16);
}

.za-faq__item {
  border-top: 1px solid rgb(1 7 30 / 0.16);
}

.za-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 48px;
  padding: max(18px, calc(28 * var(--za-u))) 0;
  font-family: var(--za-font-display);
  font-size: max(1.25rem, calc(38 * var(--za-u)));
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  transition: opacity var(--za-dur-hover) var(--za-ease-in-out);
}

.za-faq__question::-webkit-details-marker {
  display: none;
}

.za-faq__question:hover {
  opacity: 0.75;
}

.za-faq__question:focus-visible {
  outline: 2px solid var(--za-navy);
  outline-offset: 4px;
}

/* plus that turns into a minus */
.za-faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}

.za-faq__icon::before,
.za-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: rotate var(--za-dur-hover) var(--za-ease-out);
}

.za-faq__icon::after {
  rotate: 90deg;
}

.za-faq__item[open]:not(.is-closing) .za-faq__icon::after {
  rotate: 0deg;
}

.za-faq__answer {
  max-width: calc(860 * var(--za-u));
  padding-bottom: max(24px, calc(34 * var(--za-u)));
  font-family: var(--za-font-sans);
  font-size: var(--za-fs-body);
  font-weight: 800;
  line-height: calc(37 / 22);
  letter-spacing: 0.093em;
}

.za-faq__item[open] .za-faq__answer {
  animation: za-step-in 0.7s var(--za-ease-out) both;
}

.za-faq__answer p + p {
  margin-top: 0.9em;
}

.za-faq__answer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WP: answers are written in the dashboard (paragraphs, lists, photos) */
.za-faq__answer > * + * {
  margin-top: 0.9em;
}

.za-faq__answer :is(ul, ol) {
  margin-bottom: 0;
  padding-left: 1.3em;
  list-style: revert;
}

.za-faq__answer li + li {
  margin-top: 0.35em;
}

.za-faq__answer figure {
  margin: 1.4em 0 0;
}

.za-faq__answer img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.za-faq__answer figcaption {
  margin-top: 0.6em;
  font-size: 0.8125rem;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
  opacity: 0.75;
}

/* 11 · footer (dark) ------------------------------------------------------------
   Reached via a spray divider: black on desktop, the red burst (turned 180°) on tablet/phone. */
.za-footer {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding: calc(210 * var(--za-u)) 0 calc(56 * var(--za-u));
  background: var(--za-ink);
  color: var(--za-cream);
}

.za-footer__transition {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* softens the step where the divider's spray texture turns into flat ink */
.za-footer__transition::after {
  content: "";
  position: absolute;
  top: calc(-80 * var(--za-u));
  right: 0;
  left: 0;
  height: calc(210 * var(--za-u));
  background: linear-gradient(to bottom, rgb(0 7 21 / 0), rgb(0 7 21 / 0.55) 45%, var(--za-ink) 88%);
}

.za-footer__spray {
  position: absolute;
  /* desktop: the black spray divider, full width; its haze starts under the last question,
     its solid part is the top of the footer. Recoloured to ink/cream (#za-tone-ink). */
  top: calc(-400 * var(--za-u));
  left: 0;
  width: 100%;
  max-width: none;
  filter: url(#za-tone-ink);
}

.za-footer__inner {
  position: relative;
  margin-left: calc(324 * var(--za-u));
  margin-right: calc(320 * var(--za-u));
}

.za-footer__top {
  display: flex;
  align-items: center;
  gap: calc(72 * var(--za-u));
}

.za-footer__logo {
  flex: none;
  width: max(110px, calc(172 * var(--za-u)));
}

.za-footer__statement {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.za-footer__statement .za-heading__classic,
.za-footer__statement .za-heading__graffiti {
  --za-ls-shift: 0em;
  margin-inline: 0 calc(100% - 100% / var(--za-display-condense));
  transform-origin: left;
}

.za-footer__statement .za-heading__classic {
  --za-ls: -0.03em;
  font-size: max(2.25rem, calc(110 * var(--za-u)));
  line-height: 0.92;
}

.za-footer__statement .za-heading__graffiti {
  --za-ls: 0.055em;
  margin-top: calc(6 * var(--za-u));
  font-size: max(1.875rem, calc(86 * var(--za-u)));
  line-height: 1.1;
}

.za-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(48 * var(--za-u));
  margin-top: calc(96 * var(--za-u));
  padding-top: calc(56 * var(--za-u));
  border-top: 1px solid rgb(248 233 186 / 0.2);
}

.za-footer__label {
  margin-bottom: 18px;
  font-family: var(--za-font-sans);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 800;
  letter-spacing: var(--za-ls-caption-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.za-footer__list,
.za-footer__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.za-footer__list {
  display: grid;
  gap: 10px;
  font-family: var(--za-font-sans);
  font-size: max(1rem, calc(20 * var(--za-u)));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.za-footer__key {
  display: inline-block;
  min-width: 6.5em;
  font-size: 0.8em;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
  opacity: 0.7;
}

.za-footer__link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--za-dur-hover) var(--za-ease-in-out);
}

.za-footer__link:hover,
.za-footer__link:focus-visible {
  background-size: 100% 1px;
}

.za-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 40px;
  margin-top: calc(88 * var(--za-u));
  padding-top: 28px;
  border-top: 1px solid rgb(248 233 186 / 0.2);
  font-family: var(--za-font-sans);
  font-size: max(0.8125rem, calc(15 * var(--za-u)));
  font-weight: 700;
  letter-spacing: 0.06em;
}

.za-footer__copy,
.za-footer__kvk {
  opacity: 0.8;
}

.za-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-left: auto;
}

/* 5b. Compact layout: tablet & phone (< 1200 px) ------------------------------
   Below 1200 px the PSD composition no longer fits, so every section stacks
   and uses its own fluid type scale and spacing rhythm, interpolated between
   375 px and 1199 px (--za-f runs 0 → 1). Ratios follow the desktop design:
   strong display type, calm body text, generous space between groups.
   ------------------------------------------------------------------------------ */
@media (max-width: 1199px) {
  :root {
    --za-f: calc((100vw - 375px) / 824);

    --za-fs-hero: clamp(2.875rem, calc(2.875rem + 58 * var(--za-f)), 6.5rem);
    --za-fs-hero-graffiti: clamp(2.25rem, calc(2.25rem + 44 * var(--za-f)), 5rem);
    --za-fs-intro: clamp(1.25rem, calc(1.25rem + 8 * var(--za-f)), 1.75rem);
    --za-fs-h2: clamp(2.25rem, calc(2.25rem + 32 * var(--za-f)), 4.25rem);
    --za-fs-h2-graffiti: clamp(1.9375rem, calc(1.9375rem + 29 * var(--za-f)), 3.75rem);
    --za-fs-h2-sub: clamp(1.5rem, calc(1.5rem + 20 * var(--za-f)), 2.75rem);
    --za-fs-h3: clamp(1.875rem, calc(1.875rem + 16 * var(--za-f)), 2.875rem);
    --za-fs-h4: clamp(1.5rem, calc(1.5rem + 10 * var(--za-f)), 2.125rem);
    --za-fs-option-sub: clamp(1.75rem, calc(1.75rem + 16 * var(--za-f)), 2.75rem);
    --za-fs-option-quote: clamp(1.5rem, calc(1.5rem + 10 * var(--za-f)), 2.125rem);
    --za-fs-slide-title: clamp(2.125rem, calc(2.125rem + 22 * var(--za-f)), 3.5rem);
    --za-fs-lead: clamp(1.3125rem, calc(1.3125rem + 9 * var(--za-f)), 1.875rem);
    --za-fs-tagline: clamp(1.5625rem, calc(1.5625rem + 15 * var(--za-f)), 2.5rem);
    --za-fs-tags: clamp(0.9375rem, calc(0.9375rem + 8 * var(--za-f)), 1.4375rem);
    --za-fs-quote: clamp(1.375rem, calc(1.375rem + 12 * var(--za-f)), 2.125rem);
    --za-fs-quote-sm: clamp(1.25rem, calc(1.25rem + 8 * var(--za-f)), 1.75rem);
    --za-fs-marquee: clamp(2.625rem, calc(2.625rem + 34 * var(--za-f)), 4.75rem);
    --za-fs-body: clamp(0.9375rem, calc(0.9375rem + 2 * var(--za-f)), 1.0625rem);
    --za-fs-caption: clamp(0.71875rem, calc(0.71875rem + 2 * var(--za-f)), 0.84375rem);
    --za-fs-small: clamp(0.8125rem, calc(0.8125rem + 2 * var(--za-f)), 0.9375rem);
    --za-fs-button: clamp(0.75rem, calc(0.75rem + 1.5 * var(--za-f)), 0.84375rem);

    --za-ls-body: 0.04em;
    --za-ls-caption: 0.16em;
    --za-ls-caption-wide: 0.16em;

    /* spacing rhythm */
    --za-s1: clamp(6px, calc(6px + 4 * var(--za-f)), 10px);   /* between heading lines */
    --za-s2: clamp(14px, calc(14px + 8 * var(--za-f)), 22px); /* within a group */
    --za-s3: clamp(22px, calc(22px + 14 * var(--za-f)), 36px); /* heading → text */
    --za-s4: clamp(36px, calc(36px + 22 * var(--za-f)), 58px); /* between groups */
    --za-s5: clamp(84px, calc(84px + 52 * var(--za-f)), 136px); /* section padding */
    --za-measure: 34em; /* comfortable line length for body text */
  }

  /* Type: shared components pick up the compact tokens */
  .za-heading__classic,
  .za-statement-canvas__heading .za-heading__classic,
  .za-statement-wall__heading .za-heading__classic,
  .za-everyday__heading .za-heading__classic,
  .za-old-masters__heading .za-heading__classic,
  .za-about__heading .za-heading__classic,
  .za-commission__heading .za-heading__classic,
  .za-availability__heading .za-heading__classic,
  .za-request__heading .za-heading__classic {
    font-size: var(--za-fs-h2);
    line-height: 0.98;
    text-wrap: balance;
  }

  .za-heading__graffiti,
  .za-statement-canvas__heading .za-heading__graffiti,
  .za-statement-wall__heading .za-heading__graffiti,
  .za-everyday__heading .za-heading__graffiti {
    margin-top: var(--za-s1);
    font-size: var(--za-fs-h2-graffiti);
    line-height: 1.05;
    text-wrap: balance;
  }

  .za-body,
  .za-about__text > .za-body,
  .za-option__body,
  .za-commission__lead {
    font-size: var(--za-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: var(--za-ls-body);
  }

  .za-caption,
  .za-statement-wall__caption,
  .za-everyday__caption,
  .za-old-masters__caption {
    font-size: var(--za-fs-caption);
    line-height: 1.7;
    letter-spacing: var(--za-ls-caption);
    padding-inline-start: 0;
    text-wrap: balance;
  }

  .za-lead,
  .za-tagline,
  .za-quote {
    text-wrap: balance;
  }

  .za-button {
    min-width: 0;
    min-height: 48px;
    padding-inline: 24px;
    padding-inline-start: calc(24px + var(--za-ls-button));
  }

  /* Navigation: slim sticky bar. Transparent over the top of the hero, then a calm
     tinted backdrop; cream on light sections. */
  :root {
    --za-nav-h: clamp(60px, calc(60px + 8 * var(--za-f)), 68px);
  }

  html {
    scroll-padding-top: var(--za-nav-h);
  }

  .za-nav {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--za-nav-h);
    padding-inline: var(--za-gutter);
    color: var(--za-cream);
    pointer-events: auto;
    transition: color var(--za-dur-hover) var(--za-ease-in-out);
  }

  .za-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 7 21 / 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgb(248 233 186 / 0.08);
    opacity: 0;
    transition: opacity var(--za-dur-hover) var(--za-ease-in-out), background-color var(--za-dur-hover) var(--za-ease-in-out);
  }

  .za-nav.is-scrolled::before,
  .za-nav.is-open::before {
    opacity: 1;
  }

  .za-nav.is-on-light {
    color: var(--za-navy);
  }

  .za-nav.is-on-light::before {
    background: rgb(248 233 186 / 0.9);
    box-shadow: 0 1px 0 rgb(1 7 30 / 0.08);
  }

  .za-nav__brand {
    flex: none;
    width: calc(var(--za-nav-h) - 8px);
  }

  .za-nav.is-on-light .za-logo {
    color: var(--za-navy);
  }

  .za-nav.is-on-light .za-logo__tag {
    filter: brightness(0);
  }

  .za-nav__menu {
    margin: 0 0 0 auto;
  }

  .za-nav__list {
    display: flex;
    gap: clamp(20px, calc(20px + 16 * var(--za-f)), 36px);
  }

  .za-nav__link {
    color: inherit;
    font-size: clamp(0.9375rem, calc(0.9375rem + 2 * var(--za-f)), 1.0625rem);
    letter-spacing: 0.02em;
  }

  .za-nav.is-scrolled .za-nav__item:not(.is-on-light) .za-nav__link {
    text-shadow: none;
  }

  .za-nav.is-scrolled .za-logo:not(.is-on-light) .za-logo__ring {
    filter: none;
  }

  /* 01 · hero: full-bleed mural, one centred group (heading, intro, USPs) */
  .za-hero {
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 980px);
  }

  .za-hero__mural {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .za-hero__tags {
    width: 140%;
    opacity: 0.45;
  }

  .za-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--za-overlay-soft);
  }

  .za-hero__media::after {
    z-index: 1;
    background: linear-gradient(to bottom, rgb(0 7 21 / 0.55) 0, transparent 30%, transparent 55%, var(--za-ink) 100%);
  }

  .za-hero__content {
    flex: 1;
    padding-top: calc(var(--za-nav-h) + var(--za-s4));
    padding-bottom: var(--za-s4);
  }

  /* as on desktop: heading group centred, USP strip at the foot of the hero */
  .za-heading--hero {
    margin-top: auto;
  }

  .za-heading--hero .za-heading__classic {
    font-size: var(--za-fs-hero);
    line-height: 0.92;
  }

  .za-heading--hero .za-heading__graffiti {
    margin-top: var(--za-s1);
    font-size: var(--za-fs-hero-graffiti);
  }

  /* the intro switches to the display serif (as "Klassieke kunst") */
  .za-hero__intro {
    max-width: 24em;
    margin-top: var(--za-s3);
    font-family: var(--za-font-display);
    font-size: var(--za-fs-intro);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
  }

  .za-usps {
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: var(--za-s4);
    padding-inline-start: 0;
    letter-spacing: var(--za-ls-caption);
  }

  .za-usps__item + .za-usps__item::before {
    display: none;
  }

  /* 02 · works: same composition as desktop: title on the image's shaded edge,
     arrows on the sides at title height, details and compact buttons below */
  .za-works {
    padding-block: var(--za-s5);
  }

  .za-works__heading {
    margin-bottom: var(--za-s4);
  }

  /* WP (2026-10-12): tablets and phones: a swipe switches works, so the big arrows leave the screen
     (screen readers and keyboards still reach them: visually hidden, not removed). The caption block
     stays where it is (no sticky). The small arrows (the photos of one work) 48 px on tablets. */
  .za-slider {
    --za-caption-overlap: calc(var(--za-fs-slide-title) * 1.3);
  }

  .za-slider__ui {
    padding-bottom: 0;
  }

  .za-slider__arrow {
    position: absolute;
    width: 1px;
    min-width: 0;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .za-slide__caption {
    width: auto;
    margin-inline: var(--za-gutter);
  }

  .za-photos-nav {
    margin-top: var(--za-s3);
  }

  /* a little larger and bolder than on desktop, as is the swipe hint */
  .za-photos-nav__label {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .za-photos-nav__row {
    gap: 18px;
  }

  .za-photos-nav__btn {
    --za-btn-size: 48px;
  }

  .za-photos-nav__count {
    margin-top: -8px;
    font-size: 1.0625rem;
  }

  /* under the caption: "Swipe voor andere werken" with a line with arrows both ways and a hand that
     drifts along it */
  .za-slide__swipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: var(--za-s4);
    color: var(--za-cream);
  }

  .za-slide__swipe-icon {
    width: 116px;
    height: auto;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .za-slide__swipe-line {
    stroke-width: 1.5;
    opacity: 0.75;
  }

  .za-slide__swipe-hand {
    stroke-width: 1.15;
    animation: za-swipe-drift 3.2s var(--za-ease-in-out) infinite;
  }

  .za-slide__swipe-text {
    padding-inline-start: 0.12em;
    font-family: var(--za-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .za-slide__meta {
    margin-top: var(--za-s1);
    line-height: 1.7;
    letter-spacing: 0.1em;
  }

  .za-slide__meta--columns {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .za-slide__actions {
    gap: 12px;
    margin-top: var(--za-s3);
  }

  .za-slide__actions .za-button {
    min-height: 44px;
    padding-inline: 22px;
    padding-inline-start: calc(22px + var(--za-ls-button));
  }

  /* 03 · statement-canvas */
  .za-statement-canvas {
    min-height: 0;
    padding-block: clamp(104px, calc(104px + 76 * var(--za-f)), 180px);
  }

  .za-statement-canvas__bg,
  .za-statement-canvas::before {
    top: 0;
    height: 100%;
  }

  .za-statement-canvas__bg {
    object-position: 40% 50%;
  }

  /* fades in from the slider above and out into the next section, with a soft overlay for the text */
  .za-statement-canvas::before {
    background: linear-gradient(to bottom,
      var(--za-ink) 0%, rgb(0 7 21 / 0.8) 7%, rgb(0 7 21 / 0.6) 15%, rgb(0 7 21 / 0.48) 24%,
      rgb(0 7 21 / 0.42) 34%, rgb(0 7 21 / 0.42) 66%, rgb(0 7 21 / 0.48) 76%, rgb(0 7 21 / 0.6) 85%,
      rgb(0 7 21 / 0.8) 93%, var(--za-ink) 100%);
  }

  /* 04 · statement-wall: the gold can sits below the text, bottom right */
  .za-statement-wall {
    min-height: 0;
  }

  .za-statement-wall__media {
    --za-edge-top: clamp(60px, calc(60px + 60 * var(--za-f)), 120px);
    --za-edge-bottom: clamp(110px, calc(110px + 80 * var(--za-f)), 190px);
  }

  .za-statement-wall__bg {
    top: 0;
    height: 100%;
    object-position: 30% 50%;
  }

  .za-statement-wall__content {
    padding: var(--za-s5) var(--za-gutter) clamp(230px, calc(230px + 190 * var(--za-f)), 420px);
  }

  .za-statement-wall__body {
    max-width: var(--za-measure);
    margin-top: var(--za-s3);
  }

  .za-statement-wall__caption {
    margin-top: var(--za-s4);
  }

  /* 05 · everyday */
  .za-everyday {
    min-height: 0;
  }

  .za-everyday__media {
    --za-edge-top: clamp(90px, calc(90px + 60 * var(--za-f)), 150px);
    --za-edge-bottom: clamp(120px, calc(120px + 80 * var(--za-f)), 200px);
  }

  .za-everyday__bg {
    top: 0;
    left: auto;
    right: clamp(-240px, calc(-240px + 240 * var(--za-f)), 0px);
    width: auto;
    height: 100%;
  }

  .za-everyday__content {
    padding: var(--za-s5) var(--za-gutter);
  }

  .za-everyday__lead {
    margin-top: var(--za-s3);
    font-size: var(--za-fs-lead);
  }

  .za-everyday__body {
    max-width: var(--za-measure);
    margin-top: var(--za-s2);
  }

  .za-everyday__tagline {
    margin-top: var(--za-s4);
    font-size: var(--za-fs-tagline);
  }

  .za-everyday__tags {
    max-width: 30em;
    margin-top: var(--za-s2);
    font-size: var(--za-fs-tags);
    line-height: 1.5;
  }

  .za-everyday__caption {
    max-width: var(--za-measure);
    margin-top: var(--za-s4);
  }

  /* 06 · old-masters: statues in flow (cropped above the plaques), names on their lower part.
     WP (2026-10-09): the spray line below needs no room in this section (its top half is navy on
     navy), unlike the red burst it replaced (18vw + s2). */
  .za-old-masters {
    min-height: 0;
    padding-bottom: var(--za-s4);
  }

  .za-old-masters::before {
    content: none;
  }

  .za-old-masters__content {
    padding-top: var(--za-s5);
  }

  .za-old-masters__heading .za-heading__classic {
    line-height: 0.98;
  }

  .za-old-masters__body {
    max-width: var(--za-measure);
    margin-top: var(--za-s3);
  }

  .za-old-masters__quote {
    margin-top: var(--za-s3);
    font-size: var(--za-fs-quote);
    line-height: 1.15;
  }

  /* WP: the new export (2026-10-09) has less dark sky above the statues, so the stage starts lower by
     the difference and the image is 0.91 × the PSD export's width: the statues keep their size and place. */
  .za-old-masters__stage {
    position: relative;
    margin-top: calc(var(--za-s3) + (92vw + 217px) * 0.158);
  }

  /* 110 % wide on small tablets → 100 % on large ones, centred; cropped just above the plaques, the
     clouds fade in at the top and the cut-off legs fade out softly */
  .za-old-masters__statues {
    --za-statues-w: calc((92vw + 217px) * 0.91);
    position: relative;
    top: auto;
    left: auto;
    width: var(--za-statues-w);
    margin: 0 calc((100% - var(--za-statues-w)) / 2);
    aspect-ratio: 1387 / 784;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, transparent 100%);
  }

  /* caption + names on the statues' legs, on a subtle dark fade */
  .za-old-masters__names {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 4%;
    left: 0;
    z-index: 1;
    padding: var(--za-s4) 0 var(--za-s3);
  }

  .za-old-masters__names::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgb(0 7 30 / 0) 0%, rgb(0 7 30 / 0.5) 30%, rgb(0 7 30 / 0.62) 60%, rgb(0 7 30 / 0.35) 85%, rgb(0 7 30 / 0) 100%);
  }

  .za-old-masters .za-marquee {
    margin-top: var(--za-s2);
    margin-left: 0;
    text-shadow: var(--za-text-halo);
  }

  /* 07 · about. WP (2026-10-28): the blue spray line as on desktop (see there); the content starts below
     the can, which reaches 55 % of the image height into the cream on the right (+ s3). */
  .za-about__spray {
    --za-spray-w: max(100%, 560px);
  }

  .za-about__content {
    max-width: calc(1020px + 2 * var(--za-gutter));
    margin-inline: auto;
    padding: calc(var(--za-s3) + max(100vw, 560px) * 1003 / 2000 * 0.55) var(--za-gutter) var(--za-s5);
  }

  .za-about__heading .za-heading__classic--small {
    margin-top: var(--za-s1);
    font-size: var(--za-fs-h2-sub);
  }

  .za-about__text {
    max-width: var(--za-measure);
    margin-top: var(--za-s3);
  }

  .za-about__text > .za-body + .za-body {
    margin-top: var(--za-s2);
  }

  .za-press {
    margin-top: var(--za-s3);
  }

  .za-about__photos {
    max-width: none;
    margin-top: var(--za-s4);
    gap: clamp(12px, calc(12px + 12 * var(--za-f)), 24px);
  }

  /* 08 · commission: options stack (text, then the collage) */
  .za-commission {
    padding: 0 0 var(--za-s5);
  }

  .za-commission__intro,
  .za-option {
    max-width: calc(1020px + 2 * var(--za-gutter));
    margin-inline: auto;
    padding-inline: var(--za-gutter);
  }

  .za-commission__lead {
    max-width: var(--za-measure);
    margin-top: var(--za-s3);
  }

  .za-commission__footnote {
    max-width: var(--za-measure);
    margin-top: var(--za-s2);
    font-size: var(--za-fs-small);
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  .za-option {
    grid-template-columns: 1fr;
    row-gap: var(--za-s3);
  }

  .za-option--meesterwerk,
  .za-option--visie {
    margin-top: var(--za-s5);
  }

  .za-option__text {
    max-width: var(--za-measure);
    padding-top: 0;
  }

  .za-option__subtitle {
    margin-top: var(--za-s1);
  }

  .za-option__body {
    margin-top: var(--za-s3);
  }

  .za-option__body + .za-option__body {
    margin-top: var(--za-s2);
  }

  .za-option__quote {
    margin-top: var(--za-s3);
    font-size: var(--za-fs-option-quote);
  }

  .za-option__visual {
    max-width: 720px;
  }

  .za-commission__cta {
    margin-top: var(--za-s5);
  }

  /* 09 · availability / 10 · request-form */
  .za-availability,
  .za-request {
    padding-bottom: var(--za-s5);
  }

  .za-availability__inner,
  .za-request__inner {
    max-width: 1020px;
    margin-inline: max(var(--za-gutter), calc((100% - 1020px) / 2));
    padding-top: var(--za-s5);
  }

  .za-availability__subheading {
    margin-top: var(--za-s1);
    font-size: var(--za-fs-h4);
  }

  .za-availability__intro,
  .za-request__intro {
    max-width: var(--za-measure);
  }

  .za-availability__intro {
    margin-top: var(--za-s3);
  }

  .za-calendar {
    margin-top: var(--za-s4);
  }

  .za-calendar__grid {
    gap: 14px;
  }

  .za-availability__note {
    margin-top: var(--za-s4);
    font-size: var(--za-fs-quote-sm);
  }

  .za-availability__cta {
    margin-top: var(--za-s3);
  }

  .za-request__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--za-s3);
    margin-top: var(--za-s3);
  }

  .za-request__aside {
    position: static;
  }

  /* steps become a compact progress bar (numbers + segments); the step title is in the panel */
  .za-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: var(--za-s3);
  }

  .za-steps__button,
  .za-steps__item:last-child .za-steps__button {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 44px;
    padding: 8px 0 0;
    border: 0;
    border-top: 3px solid rgb(1 7 30 / 0.18);
  }

  .za-steps__item.is-current .za-steps__button,
  .za-steps__item.is-done .za-steps__button {
    border-top-color: var(--za-navy);
  }

  .za-steps__num {
    font-size: 1.125rem;
  }

  .za-steps__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 12 · faq */
  .za-faq {
    padding-bottom: calc(12vw + var(--za-s4)); /* WP: room for the spray line's particles (was 22vw for the red burst) */
  }

  .za-faq__inner {
    max-width: 1020px;
    margin-inline: max(var(--za-gutter), calc((100% - 1020px) / 2));
    padding-top: var(--za-s5);
  }

  .za-faq__list {
    max-width: none;
    margin-top: var(--za-s4);
  }

  .za-faq__question {
    gap: 20px;
    padding: 18px 0;
    font-size: clamp(1.1875rem, calc(1.1875rem + 6 * var(--za-f)), 1.5625rem);
  }

  .za-faq__answer {
    max-width: var(--za-measure);
    padding-bottom: 22px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: var(--za-ls-body);
  }

  /* 11 · footer */
  .za-footer {
    padding: var(--za-s5) 0 32px; /* WP: was 33vw + s3, the room the red burst took */
  }

  .za-footer__transition::after {
    content: none;
  }

  /* tablet/phone (WP, 2026-10-09): the black spray line, mirrored so it differs from the one above
     the about section; its solid core on the footer's top edge, its spray rising into the cream */
  .za-footer__spray {
    --za-line-w: max(130%, 640px);
    top: 0;
    left: calc((100% - var(--za-line-w)) / 2);
    width: var(--za-line-w);
    margin-top: calc(var(--za-line-w) * -500 / 1500 * 0.461);
    filter: none;
    transform: scaleX(-1);
  }

  .za-footer__inner {
    max-width: 1020px;
    margin-inline: max(var(--za-gutter), calc((100% - 1020px) / 2));
  }

  .za-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--za-s3);
  }

  .za-footer__logo {
    width: clamp(108px, calc(108px + 40 * var(--za-f)), 148px);
  }

  .za-footer__statement {
    width: 100%;
  }

  .za-footer__statement .za-heading__classic {
    font-size: var(--za-fs-h2);
  }

  .za-footer__statement .za-heading__graffiti {
    margin-top: var(--za-s1);
    font-size: var(--za-fs-h2-graffiti);
  }

  .za-footer__grid {
    gap: var(--za-s3);
    margin-top: var(--za-s4);
    padding-top: var(--za-s3);
  }

  .za-footer__bottom {
    margin-top: var(--za-s4);
  }
}

/* Phones (< 768 px) */
@media (max-width: 767px) {
  /* 06 · old-masters: the dedicated portrait photo. It starts higher (its faded top runs behind
     the quote), so the statues show earlier while scrolling. */
  .za-old-masters__content {
    position: relative;
    z-index: 1;
  }

  /* 05 · everyday: lead and tags a size up on phones */
  .za-everyday__lead {
    font-size: 1.625rem;
    line-height: 1.15;
  }

  .za-everyday__tags {
    font-size: 1.1875rem;
    line-height: 1.55;
  }

  .za-old-masters {
    padding-bottom: calc(var(--za-s4) + 24px); /* WP: was 18vw + s2 + 56px for the red burst */
  }

  .za-old-masters__quote {
    margin-top: var(--za-s4);
  }

  .za-old-masters__stage {
    margin-top: calc(100vw * 1255 / 941 * -0.15);
  }

  .za-old-masters .za-marquee {
    margin-top: var(--za-s3);
  }

  /* WP: the new portrait export (2026-10-09): full width (its statues fill it), cropped just above
     the pedestal plaques (their names are in the marquee); its clouds fade in at the top */
  .za-old-masters__statues {
    --za-statues-w: 100vw;
    aspect-ratio: 941 / 1255;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent 100%);
  }

  /* Navigation: logo + "Menu" toggle; the items open in a panel under the bar */
  .za-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--za-font-display);
    font-size: 1rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .za-nav__toggle-icon {
    position: relative;
    width: 22px;
    height: 10px;
  }

  .za-nav__toggle-icon::before,
  .za-nav__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: translate var(--za-dur-hover) var(--za-ease-in-out), rotate var(--za-dur-hover) var(--za-ease-in-out);
  }

  .za-nav__toggle-icon::before { top: 0; }
  .za-nav__toggle-icon::after { bottom: 0; }

  .za-nav.is-open .za-nav__toggle-icon::before { translate: 0 4.25px; rotate: 45deg; }
  .za-nav.is-open .za-nav__toggle-icon::after { translate: 0 -4.25px; rotate: -45deg; }

  .za-nav__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0;
    padding: 8px var(--za-gutter) 28px;
    background: rgb(0 7 21 / 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    transition:
      opacity var(--za-dur-hover) var(--za-ease-out),
      translate var(--za-dur-hover) var(--za-ease-out),
      visibility 0s linear var(--za-dur-hover);
  }

  .za-nav.is-on-light .za-nav__menu {
    background: rgb(248 233 186 / 0.97);
  }

  .za-nav.is-open .za-nav__menu {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition:
      opacity var(--za-dur-hover) var(--za-ease-out),
      translate var(--za-dur-hover) var(--za-ease-out),
      visibility 0s;
  }

  .za-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .za-nav__item + .za-nav__item {
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  }

  .za-nav__link {
    display: block;
    padding: 16px 0;
    font-size: 1.5rem;
    background: none;
  }

  /* 04 → 05: the lying gold can across the section edge (rules: the tablet + phone block at the
     end of this file); its size on phones */
  :root {
    --za-can-w: min(92vw, 410px); /* ~18 % smaller than the first version */
    /* WP (2026-10-09): a slightly taller bar, so the logo is larger (64 px instead of 52) */
    --za-nav-h: 72px;
  }

  /* 05 · everyday, WP (2026-10-09): phones show their own photo instead of the joker mural: the
     whole section, low opacity (the text stays readable on it), fading in below the gold can and
     out well before the section ends, so the two sections stay clearly apart */
  .za-everyday__bg:not(.za-everyday__bg--phone) {
    display: none;
  }

  .za-everyday__bg--phone {
    display: block;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
    filter: opacity(0.34);
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--za-can-h) * 0.5), #000 calc(var(--za-can-h) * 0.5 + 160px), #000 72%, transparent 93%);
    mask-image: linear-gradient(to bottom, transparent calc(var(--za-can-h) * 0.5), #000 calc(var(--za-can-h) * 0.5 + 160px), #000 72%, transparent 93%);
  }

  /* 02 · works on phones, WP (2026-10-12): the photos of the work (arrows beside the label, the counter
     under it) come right under the title, before the details; the details follow, then the swipe hint */
  .za-photos-nav {
    order: 1;
    margin: var(--za-s3) 0 var(--za-s2);
  }

  .za-slide__meta {
    order: 2;
  }

  .za-slide__actions {
    order: 3;
  }

  .za-slide__swipe {
    order: 4;
  }

  .za-photos-nav__btn {
    --za-btn-size: 44px;
  }

  .za-photos-nav__row {
    gap: 20px; /* WP (2026-10-13): a little more room between the arrows and the label */
  }

  /* WP (2026-10-13): the two labels larger (and on two lines: the break after "van" / "voor" is in the
     texts, phones only), the counter and the details smaller and quieter, so the labels lead */
  .za-photos-nav__label,
  .za-slide__swipe-text {
    font-size: 1.125rem;
    line-height: 1.15;
  }

  .za-photos-nav__count {
    margin-top: 4px;
    font-size: 0.875rem;
    opacity: 0.75;
  }

  .za-slide__meta {
    font-size: 0.78125rem;
  }

  .za-slide__actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .za-slide__actions .za-button {
    min-width: 220px;
  }

  /* 09 / 10: the months stack, full width */
  .za-calendar__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .za-month {
    gap: 14px;
    padding: 20px 20px 18px;
  }

  .za-month__week {
    height: 12px;
  }

  .za-form__row,
  .za-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .za-form__required {
    position: static;
    margin-bottom: 10px;
  }

  .za-form__nav .za-button {
    flex: 1 1 auto;
  }

  .za-form__next {
    margin-left: 0;
  }

  /* 11 · footer */
  .za-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .za-footer__bottom {
    flex-direction: column;
    gap: 8px;
  }

  .za-footer__legal {
    margin-left: 0;
  }

  .za-about__photos {
    grid-template-columns: 1fr;
  }
}


/* 6. Motion -------------------------------------------------------------------
   Scroll reveals: elements with data-reveal="…" start hidden (only when JS runs,
   see the class set in <head>) and get .is-revealed from js/main.js when they
   enter the viewport. data-reveal-delay="ms" staggers them.
   Types: up · fade · zoom (backgrounds) · from-right · rise (statues) ·
          spin (logo ring) · spray (graffiti lines) · wipe (red spray burst)
   ------------------------------------------------------------------------------ */
html.za-js [data-reveal] {
  transition-property: opacity, translate, scale, rotate, clip-path, -webkit-mask-position, mask-position;
  transition-duration: var(--za-reveal-dur, var(--za-dur-reveal));
  transition-timing-function: var(--za-ease-out);
  transition-delay: var(--za-reveal-delay, 0ms);
}

html.za-js [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

html.za-js [data-reveal="up"]:not(.is-revealed) {
  translate: 0 36px;
}

html.za-js [data-reveal="fade"] {
  --za-reveal-dur: 1.4s;
}

/* backgrounds: settle from slightly enlarged */
html.za-js [data-reveal="zoom"] {
  --za-reveal-dur: 2.4s;
}

html.za-js [data-reveal="zoom"]:not(.is-revealed) {
  scale: 1.08;
}

html.za-js [data-reveal="from-right"] {
  --za-reveal-dur: 1.6s;
}

html.za-js [data-reveal="from-right"]:not(.is-revealed) {
  translate: 70px 0;
}

html.za-js [data-reveal="rise"] {
  --za-reveal-dur: 1.8s;
}

html.za-js [data-reveal="rise"]:not(.is-revealed) {
  translate: 0 60px;
  scale: 0.97;
}

html.za-js [data-reveal="spin"] {
  --za-reveal-dur: 1.8s;
}

html.za-js [data-reveal="spin"]:not(.is-revealed) {
  rotate: -24deg;
}

/* graffiti line: a soft-edged mask sweeps left → right, as if sprayed on */
html.za-js [data-reveal="spray"] {
  --za-reveal-dur: 1.1s;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition-timing-function: var(--za-ease-in-out);
}

html.za-js [data-reveal="spray"]:not(.is-revealed) {
  opacity: 1;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

/* Blur fade (after Magic UI's BlurFade): text comes in out of a soft blur while it fades in and
   rises. Text only: photos, the slider and its arrows keep the plain reveal. The blur is only set
   while hidden, so revealed text carries no filter (no extra stacking contexts or repaints). */
html.za-js :is([data-reveal="up"], [data-reveal="fade"], [data-reveal="spray"]):not(img, picture, .za-slider__slides, .za-slider__ui, .za-slider__arrow) {
  transition-property: opacity, translate, filter, -webkit-mask-position, mask-position;
}

html.za-js :is([data-reveal="up"], [data-reveal="fade"], [data-reveal="spray"]):not(img, picture, .za-slider__slides, .za-slider__ui, .za-slider__arrow):not(.is-revealed) {
  filter: blur(var(--za-reveal-blur));
}
/* red spray burst: painted in from the can on the right (soft edge sweeps right → left) */
html.za-js [data-reveal="wipe"] {
  --za-reveal-dur: 1.25s;
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(270deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition-timing-function: var(--za-ease-in-out);
}

html.za-js [data-reveal="wipe"]:not(.is-revealed) {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* Parallax: decorative pieces drift a little slower than the page (desktop only, set by JS) */
html.za-js [data-parallax] {
  transform: translate3d(0, var(--za-parallax, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
  html.za-js [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transition: none !important;
  }

  /* only the reveal masks; elements keep their own design masks/clips */
  html.za-js :is([data-reveal="spray"], [data-reveal="wipe"]) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  html.za-js [data-parallax] {
    transform: none;
  }

  .za-slide,
  .za-slide.is-active,
  .za-slide__photo,
  .za-slide__title,
  .za-slide__meta,
  .za-photos-nav,
  .za-slide__actions,
  .za-slide__swipe,
  .za-button,
  .za-button__label,
  .za-slider__arrow circle,
  .za-slider__arrow path,
  .za-photos-nav__btn circle,
  .za-photos-nav__btn path {
    transition: none !important;
    animation: none;
  }

  .za-slide__photo {
    scale: none !important;
  }

  .za-rotate-hint {
    transition: none;
  }

  .za-rotate-hint__phone {
    animation: none;
  }

  .za-slide__swipe-hand {
    animation: none;
  }
}

/* 7. WordPress / Pencil -------------------------------------------------------
   Only what the static site doesn't have: editing helpers (visible to editors only), ordinary
   pages, and room for the WordPress admin bar. Visitors of the homepage see none of it.
   ------------------------------------------------------------------------------ */

/* Logged-in users: the fixed navigation moves below the admin bar */
.admin-bar .za-nav {
  top: calc(48 * var(--za-u) + var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 1199px) {
  .admin-bar .za-nav {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

@media (max-width: 600px) {
  .admin-bar .za-nav {
    top: 0; /* the admin bar scrolls away on small screens */
  }
}

/* While Pencil is open, clicks inside the sections reach only what can be edited (and the slider
   controls), so background photos under the content, overlays and ornaments can be clicked too */
html.pencil-selection-active main :is(section, section *) {
  pointer-events: none;
}

html.pencil-selection-active main :is([data-pencil-field], [data-pencil-field] *, [data-pencil-managed], [data-pencil-managed] *, .za-slider__arrow, .za-slider__arrow *, .za-photos-nav__btn, .za-photos-nav__btn *, .za-texts-panel, .za-texts-panel *) {
  pointer-events: auto;
}

/* While Pencil is open: an emptied text field stays clickable */
html.pencil-selection-active .pencil-field:empty {
  display: inline-block;
  min-width: 3ch;
  min-height: 1em;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* Texts panel (template-parts/texts-panel.php): only in the page for editors, only shown while Pencil is open */
html.pencil-selection-active .za-texts-panel[hidden] {
  display: block !important;
}

.za-texts-panel {
  position: relative;
  z-index: 2;
  padding: 64px var(--za-gutter) 96px;
  background: var(--za-cream-light);
  color: var(--za-navy);
  font-family: var(--za-font-sans);
  font-weight: 600;
  border-top: 4px dashed rgb(1 7 30 / 0.25);
}

.za-texts-panel__inner {
  max-width: 1020px;
  margin-inline: auto;
}

.za-texts-panel__title {
  font-family: var(--za-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.za-texts-panel__intro {
  max-width: 46em;
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.za-texts-panel__group {
  margin-top: 40px;
}

.za-texts-panel__group-title {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: var(--za-ls-caption);
  text-transform: uppercase;
}

.za-texts-panel__list {
  margin: 0;
  border-top: 1px solid rgb(1 7 30 / 0.15);
}

.za-texts-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px 24px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(1 7 30 / 0.15);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.za-texts-panel__row dt {
  opacity: 0.7;
}

.za-texts-panel__row dd {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 767px) {
  .za-texts-panel__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ordinary pages and the fallback (page.php, index.php): the cream text column */
.za-page-main {
  min-height: 70vh;
  background: var(--za-cream);
  color: var(--za-navy);
}

.za-page-content {
  padding: calc(var(--za-nav-h, 0px) + max(96px, calc(200 * var(--za-u)))) 0 max(120px, calc(400 * var(--za-u)));
}

.za-page-content__inner {
  margin-left: calc(324 * var(--za-u));
  margin-right: calc(320 * var(--za-u));
}

.za-page-content__title .za-heading__classic {
  --za-display-condense: 0.791;
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(117 * var(--za-u)));
  line-height: 0.95;
}

.za-page-content__body {
  max-width: max(calc(950 * var(--za-u)), 34em);
  margin-top: max(24px, calc(48 * var(--za-u)));
  font-size: var(--za-fs-body);
  font-weight: 800;
  line-height: calc(37 / 22);
  letter-spacing: 0.093em;
}

.za-page-content__body > * + * {
  margin-top: 0.9em;
}

.za-page-content__body :is(h2, h3) {
  margin-top: 1.6em;
  font-family: var(--za-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.za-page-content__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1199px) {
  .za-page-content__inner {
    max-width: 1020px;
    margin-inline: max(var(--za-gutter), calc((100% - 1020px) / 2));
  }

  .za-page-content__title .za-heading__classic {
    font-size: var(--za-fs-h2);
  }

  .za-page-content__body {
    max-width: var(--za-measure);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: var(--za-ls-body);
  }
}
/* WP (2026-10-13): the Portfolio page (page-portfolio.php): one photo of every artwork, 2 across (1 on
   phones), in the cream text column. Hover: the photo blurs slightly under a soft ink veil and the title
   rises in over it; touch screens show the title at the bottom on a soft shade instead. */
/* desktop: the grid runs on to the right edge (the left margin keeps clear of the fixed menu) */
@media (min-width: 1200px) {
  .za-portfolio .za-page-content__inner {
    margin-right: max(20px, calc(28 * var(--za-u)));
  }
}

.za-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(14px, calc(28 * var(--za-u)));
  margin: max(32px, calc(72 * var(--za-u))) 0 0;
  padding: 0;
  list-style: none;
}

.za-portfolio__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.za-portfolio__link:focus-visible {
  outline: 2px solid var(--za-navy);
  outline-offset: 4px;
}

.za-portfolio__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 6 / 5;
  background: var(--za-ink);
}

.za-portfolio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.6s var(--za-ease-out), scale 0.9s var(--za-ease-out);
}

.za-portfolio__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 7 21 / 0.45);
  opacity: 0;
  transition: opacity 0.5s var(--za-ease-out);
  pointer-events: none;
}

.za-portfolio__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(10px, calc(16 * var(--za-u)));
  padding: 0 10%;
  color: var(--za-cream);
  font-family: var(--za-font-display);
  font-size: max(1.75rem, calc(56 * var(--za-u)));
  font-weight: 600;
  line-height: 1.05;
  font-variant-ligatures: common-ligatures;
  text-align: center;
  text-shadow: var(--za-text-halo);
  text-wrap: balance;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.5s var(--za-ease-out), translate 0.6s var(--za-ease-out);
  pointer-events: none;
}

/* WP (2026-10-13): under the title, a quiet "Meer informatie en foto's →" */
.za-portfolio__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline-start: 0.14em;
  font-family: var(--za-font-display);
  font-size: max(0.75rem, calc(15 * var(--za-u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(248 233 186 / 0.85);
}

.za-portfolio__more .za-button__arrow {
  width: 22px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: translate 0.5s var(--za-ease-out);
}

@media (hover: hover) {
  .za-portfolio__tile:is(:hover, :focus-within) .za-portfolio__more .za-button__arrow {
    translate: 5px 0;
  }

  .za-portfolio__tile:is(:hover, :focus-within) .za-portfolio__img {
    filter: blur(3px);
    scale: 1.05;
  }

  .za-portfolio__tile:is(:hover, :focus-within)::after,
  .za-portfolio__tile:is(:hover, :focus-within) .za-portfolio__title {
    opacity: 1;
  }

  .za-portfolio__tile:is(:hover, :focus-within) .za-portfolio__title {
    translate: 0 0;
  }
}

@media (hover: none) {
  .za-portfolio__tile::after {
    opacity: 1;
    background: linear-gradient(to bottom, rgb(0 7 21 / 0) 45%, rgb(0 7 21 / 0.78));
  }

  .za-portfolio__title {
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
    font-size: 1.5rem;
    opacity: 1;
    translate: none;
  }
}

.za-portfolio__empty {
  margin-top: max(24px, calc(48 * var(--za-u)));
  font-size: var(--za-fs-body);
}

@media (max-width: 767px) {
  .za-portfolio__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .za-portfolio__img,
  .za-portfolio__tile::after,
  .za-portfolio__title {
    transition: none;
  }
}

/* WP (2026-10-13): "Over Stanley" in the menu jumps here; on desktop leave room above the heading for the
   spray (2026-10-28: the blue line, which reaches ~290 u up) */
@media (min-width: 1200px) {
  #about {
    scroll-margin-top: calc(300 * var(--za-u));
  }
}

/* WP (2026-10-13, 2026-10-28): tablets (768–1199 px): six menu items in the bar ("Kunst te koop" added), so
   the text, the gaps and the side padding grow with the width (13 → 16 px text) and always fit on one line */
@media (min-width: 768px) and (max-width: 1199px) {
  .za-nav {
    gap: 16px;
    padding-inline: clamp(20px, calc(20px + (100vw - 768px) * 0.046), 40px);
  }

  .za-nav__list {
    gap: clamp(12px, calc(12px + (100vw - 768px) * 0.035), 28px);
  }

  .za-nav__link {
    font-size: clamp(0.8125rem, calc(0.8125rem + (100vw - 768px) * 0.008), 1rem);
    letter-spacing: 0;
  }
}

/* WP (2026-10-13): an artwork's own page (single-za_kunstwerk.php), after the user's reference layout:
   a text column on the left that stays in view, all photos large on the right. Dark. */

/* Desktop: the menu as a bar at the top on these pages (as on tablets), so the left side is free */
@media (min-width: 1200px) {
  body.za-has-bar {
    --za-nav-h: 84px;
  }

  .za-has-bar .za-nav {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--za-nav-h);
    padding-inline: 32px 40px;
    color: var(--za-cream);
    pointer-events: auto;
  }

  .admin-bar.za-has-bar .za-nav {
    top: var(--wp-admin--admin-bar--height, 32px);
  }

  .za-has-bar .za-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 7 21 / 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgb(248 233 186 / 0.1);
  }

  .za-has-bar .za-nav__brand {
    flex: none;
    width: calc(var(--za-nav-h) - 12px);
  }

  .za-has-bar .za-nav__menu {
    margin: 0 0 0 auto;
  }

  .za-has-bar .za-nav__list {
    display: flex;
    gap: 40px;
  }

  .za-has-bar .za-nav__link {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    text-shadow: none;
  }
}

.za-artwork-main {
  padding-top: var(--za-nav-h, 0px);
  background: var(--za-ink);
}

.za-artwork {
  display: grid;
  grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  align-items: stretch;
}

/* the text column: a slightly lighter panel; its content stays in view while the photos scroll */
.za-artwork__info {
  background: rgb(248 233 186 / 0.035);
  border-right: 1px solid rgb(248 233 186 / 0.08);
}

.za-artwork__sticky {
  position: sticky;
  top: var(--za-nav-h, 0px);
  max-height: calc(100vh - var(--za-nav-h, 0px));
  max-height: calc(100dvh - var(--za-nav-h, 0px));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(248 233 186 / 0.25) transparent;
  padding: max(40px, calc(56 * var(--za-u))) max(28px, calc(48 * var(--za-u))) 40px;
}

.za-artwork__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: 0.12em;
  color: inherit;
  font-family: var(--za-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity var(--za-dur-hover) var(--za-ease-in-out);
}

.za-artwork__back:hover,
.za-artwork__back:focus-visible {
  opacity: 1;
}

.za-artwork__back .za-button__arrow {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.za-artwork__head {
  display: block;
  margin-top: max(28px, calc(44 * var(--za-u)));
}

.za-artwork__title {
  margin: 0;
  font-family: var(--za-font-display);
  font-size: clamp(2.25rem, calc(56 * var(--za-u)), 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}

.za-artwork__meta {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgb(248 233 186 / 0.16);
}

.za-artwork__meta dt {
  font-family: var(--za-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(248 233 186 / 0.65);
}

.za-artwork__meta dd {
  margin: 2px 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

.za-artwork__about {
  margin-top: 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgb(248 233 186 / 0.88);
}

.za-artwork__about > * + * {
  margin-top: 1em;
}

.za-artwork__about a {
  color: var(--za-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.za-artwork__more {
  margin-top: 26px;
}

/* previous / next work */
.za-artwork__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgb(248 233 186 / 0.16);
}

.za-artwork__step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.za-artwork__step--next {
  grid-column: 2;
  text-align: right;
}

.za-artwork__step-label {
  font-family: var(--za-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(248 233 186 / 0.65);
}

.za-artwork__step-title {
  font-family: var(--za-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--za-dur-hover) var(--za-ease-in-out);
}

.za-artwork__step--next .za-artwork__step-title {
  background-position: 100% 100%;
}

.za-artwork__step:hover .za-artwork__step-title,
.za-artwork__step:focus-visible .za-artwork__step-title {
  background-size: 100% 1px;
}

/* the photos: large, one under the other, each in its own proportions */
.za-artwork__photos {
  display: flex;
  flex-direction: column;
  gap: max(16px, calc(30 * var(--za-u)));
  padding: max(16px, calc(30 * var(--za-u)));
}

.za-artwork__photo {
  margin: 0;
}

.za-artwork__img {
  display: block;
  width: 100%;
  height: auto;
  background: rgb(248 233 186 / 0.04);
}

/* the page is dark, so no spray transition into the (dark) footer: a hairline instead */
.za-has-bar .za-footer__transition {
  display: none;
}

.za-has-bar .za-footer {
  padding-top: max(64px, calc(120 * var(--za-u)));
  border-top: 1px solid rgb(248 233 186 / 0.1);
}

/* phones: the text first, then the photos */
@media (max-width: 767px) {
  .za-artwork {
    grid-template-columns: minmax(0, 1fr);
  }

  .za-artwork__info {
    border-right: 0;
    border-bottom: 1px solid rgb(248 233 186 / 0.08);
  }

  .za-artwork__sticky {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 28px var(--za-gutter) 32px;
  }

  .za-artwork__photos {
    padding: 16px var(--za-gutter) 24px;
  }
}

/* WP (2026-10-09): 04 → 05 on tablets too (was phones only): instead of the can at the side, a lying
   gold can across the section edge. The section lets it overflow downwards (not sideways) and sits
   above the next section. --za-can-w / --za-can-h are the size of the first lying-can image (1000 × 600,
   the can just below the section edge); spacing and fades follow them. --za-can-w: here for tablets, in the phone block for phones. */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --za-can-w: clamp(410px, 46vw, 540px);
  }
}

@media (max-width: 1199px) {
  :root {
    --za-can-h: calc(var(--za-can-w) * 0.6);
  }

  .za-statement-wall {
    z-index: 1;
    overflow: visible;
    overflow-x: clip;
  }

  .za-statement-wall__can {
    display: none;
  }

  /* both photos fade to dark where the can lies, so it floats on one calm dark band */
  .za-statement-wall__media {
    --za-edge-bottom: calc(var(--za-can-h) * 0.8);
  }

  .za-everyday__media {
    --za-edge-top: calc(var(--za-can-h) * 0.9);
  }

  .za-statement-wall__content {
    padding-bottom: calc(var(--za-can-h) * 0.45 + 12px);
  }

  /* WP (2026-10-11): the new lying can (1151 × 756, transparent; its mist already fades out, so no
     mask). 1.062 × --za-can-w wide, so the can itself keeps the old can's width; its centre sits
     where the old one did, just below the section edge. */
  .za-statement-wall__can-flat {
    --za-can-img-w: calc(var(--za-can-w) * 1.062);
    position: absolute;
    left: calc(50% - var(--za-can-img-w) / 2);
    bottom: calc(var(--za-can-h) * -0.662);
    display: block;
    width: var(--za-can-img-w);
    max-width: none;
    pointer-events: none;
  }

  /* make room under the overlapping can before "Van museum naar" */
  .za-everyday__content {
    padding-top: calc(var(--za-can-h) * 0.33 + var(--za-s4));
  }
}

/* WP (2026-10-13): phones held sideways (touch screen, landscape, at most 500 px high; tablets in landscape
   are at least 768 px high and desktop windows have no touch, so neither matches). Landscape phones of 768 px
   and wider otherwise keep the tablet layout.
   - No sticky menu bar: the little height there is goes to the photos.
   - Works slider: only the title, then the photos part ("Meer foto’s / van dit werk" between the small
     arrows, the counter under it) and the swipe hint side by side; the details are left out. The caption
     block becomes sticky at the bottom of the screen once reached, as on desktop (js/main.js), with a
     lighter shade that rises only part-way behind the title. */
@media (max-width: 1199px) and (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  :root {
    --za-nav-h: 0px;
  }

  .za-nav {
    display: none;
  }

  .za-slider {
    --za-fs-slide-title: 2.25rem;
  }

  .za-slider.is-ui-pinned .za-slider__ui {
    position: sticky;
    bottom: 0;
  }

  .za-slider__ui {
    padding-bottom: 12px;
  }

  .za-slider__ui::before {
    top: calc(var(--za-fs-slide-title) * 0.35);
    background: linear-gradient(to bottom,
      rgb(0 7 21 / 0) 0, rgb(0 7 21 / 0.55) calc(var(--za-fs-slide-title) * 0.5),
      rgb(0 7 21 / 0.86) calc(var(--za-fs-slide-title) * 1.1), rgb(0 7 21 / 0.92) 100%);
  }

  .za-slide__caption {
    --za-split-gap: clamp(64px, 10vw, 96px);
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--za-split-gap);
  }

  .za-slide__title-region {
    flex-basis: 100%;
  }

  /* the shade reaches only part-way up the title, so a soft halo keeps it readable on any photo */
  .za-slide__title {
    text-shadow: var(--za-text-halo);
  }

  .za-slide__meta {
    display: none;
  }

  .za-photos-nav {
    order: 1;
    margin: 12px 0 0;
  }

  .za-slide__swipe {
    position: relative;
    order: 2;
    align-self: stretch; /* as tall as the photos part, so the divider spans both */
    flex-direction: row;
    gap: 12px;
    margin-top: 12px;
  }

  /* a thin upright divider between the photos part and the swipe hint (only when both are there) */
  .za-photos-nav:not([hidden]) ~ .za-slide__swipe::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--za-split-gap) / -2);
    width: 1px;
    background: linear-gradient(to bottom, rgb(248 233 186 / 0), rgb(248 233 186 / 0.4) 25%, rgb(248 233 186 / 0.4) 75%, rgb(248 233 186 / 0));
  }

  .za-slide__actions {
    order: 3;
    flex-basis: 100%;
  }

  .za-br-phone.za-br-landscape-phone {
    display: inline;
  }

  .za-photos-nav__row {
    gap: 20px;
  }

  .za-photos-nav__btn {
    --za-btn-size: 44px;
  }

  .za-photos-nav__label,
  .za-slide__swipe-text {
    font-size: 1.125rem;
    line-height: 1.15;
  }

  .za-slide__swipe-text {
    text-align: center;
  }

  .za-slide__swipe-icon {
    width: 92px;
  }

  .za-photos-nav__count {
    margin-top: 4px;
    font-size: 0.875rem;
    opacity: 0.75;
  }
}

/* ============================================================================
   WP (2026-10-28) additions: the custom graffiti letters, the "Geen muur? Wel interesse!" section,
   small photo sliders, the dark request form and the page "Kunst te koop".
   ========================================================================== */

/* Graffiti lines in Zwager Art's own letters (inc/graffiti.php): one inline SVG per word, so a line wraps
   like text. The letter box is --za-graffiti-h high (in the line's font size, so every breakpoint keeps
   its size); at 1.18em the lines are as wide as the font's were in the design. Not condensed or spaced:
   the letters are drawn as they should look. The text itself is there for screen readers, and shown
   (instead of the letters) while Pencil is open, so it can be edited. Two classes, so this wins over the
   per-section condense and tracking of the font lines (.za-everyday__heading .za-heading__graffiti, …). */
.za-heading__graffiti.za-graffiti {
  --za-display-condense: 1;
  --za-ls: 0em;
  --za-ls-shift: 0em;
  --za-graffiti-h: 1.18em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  row-gap: calc(var(--za-graffiti-h) * 0.1);
  line-height: 1;
}

.za-heading--left .za-graffiti,
.za-footer__statement .za-graffiti {
  justify-content: flex-start;
}

/* "Alleen spray paint!" was set small and wide in the design: its letters get a taller box */
.za-statement-canvas__heading .za-graffiti {
  --za-graffiti-h: 1.5em;
}

.za-graffiti__text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.za-graffiti__art {
  display: contents;
}

.za-graffiti__word {
  display: block;
  flex: none;
  width: auto;
  height: var(--za-graffiti-h);
  margin-inline-end: calc(var(--za-graffiti-h) * var(--za-gap, 0));
  overflow: visible;
  fill: currentColor;
  fill-rule: evenodd;
}

.za-graffiti__word:last-child {
  margin-inline-end: 0;
}

/* the text halo of headings over photos, for the drawn letters */
.za-statement-canvas__heading .za-graffiti__word {
  filter: drop-shadow(0 0 0.15em rgb(0 7 21 / 0.7));
}

html.pencil-selection-active .za-graffiti__text {
  position: static !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-family: var(--za-font-graffiti);
}

html.pencil-selection-active .za-graffiti__art {
  display: none;
}

/* Light call-to-action on dark sections: cream fill, navy text; on hover the navy wipes in */
.za-button--light {
  --za-button-fg: var(--za-ink-2);
  --za-button-bg: var(--za-cream);
  border-color: var(--za-cream);
  background-color: var(--za-cream);
  color: var(--za-ink-2);
}

/* Small photo sliders ([data-mini-slider], js/main.js): one photo at a time (crossfade), the small round
   arrows with "1 van de 3" between them, swipe on touch screens. The script adds .is-slider while it is a
   slider (some only on phones); without it every photo shows. */
[data-mini-slider].is-slider .za-mini__frame {
  display: grid;
  touch-action: pan-y; /* horizontal swipes are the slider's, vertical scrolling stays native */
}

[data-mini-slider].is-slider .za-mini__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--za-ease-in-out), visibility 0s linear 0.6s;
}

[data-mini-slider].is-slider .za-mini__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* the arrows (2026-10-28): cream, at the left and right inside the photo, vertically centred; a light
   dark fill and shadow keep them visible on bright photos; on hover/focus they fill cream (as in the
   works slider). The counter is for screen readers only. */
[data-mini-slider] {
  position: relative;
}

.za-mini__nav {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(10px, calc(20 * var(--za-u)));
  pointer-events: none; /* swipes and clicks between the arrows reach the photo */
}

.za-mini__nav[hidden] {
  display: none;
}

.za-mini__nav .za-photos-nav__btn {
  --za-btn-size: max(40px, calc(52 * var(--za-u)));
  min-width: 40px;
  color: var(--za-cream);
  filter: drop-shadow(0 1px 6px rgb(0 7 21 / 0.55));
  pointer-events: auto;
}

.za-mini__nav .za-photos-nav__btn circle {
  fill: rgb(0 7 21 / 0.3);
}

.za-mini__nav .za-photos-nav__btn:focus-visible circle {
  fill: var(--za-cream);
}

@media (hover: hover) {
  .za-mini__nav .za-photos-nav__btn:hover circle {
    fill: var(--za-cream);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mini-slider].is-slider .za-mini__slide {
    transition: none;
  }
}

/* 07 · about: two sliders of two photos each, in the places of the two photos */
.za-about__slider img {
  display: block;
  width: 100%;
}

/* 06b · for-sale: "Geen muur? Wel interesse!" (PSD5). Navy (the old-masters band runs into it); the
   bottom leaves room for the about section's blue spray, which reaches 31 % of its height up into this
   section (its image is 1003/2000 of the width high), plus a clear gap under the photos (2026-10-28:
   140 u, was 30; tablet s5, phone s4). */
.za-for-sale {
  position: relative;
  padding-bottom: calc(100vw * 1003 / 2000 * 0.31 + 140 * var(--za-u));
  background: linear-gradient(to bottom, var(--za-ink-3), var(--za-ink-2) calc(220 * var(--za-u))) var(--za-ink-2);
  color: var(--za-cream);
}

.za-for-sale__heading .za-heading__classic {
  --za-display-condense: 0.791;
  --za-ls: -0.015em;
  font-size: max(2.25rem, calc(117 * var(--za-u)));
  line-height: 0.93;
}

.za-for-sale__heading .za-heading__graffiti {
  margin-top: calc(22 * var(--za-u));
}

.za-for-sale__body {
  max-width: max(calc(900 * var(--za-u)), 34em);
  margin-top: calc(36 * var(--za-u));
}

.za-for-sale__body > .za-body {
  line-height: calc(29 / 22);
  letter-spacing: 0.06em;
}

.za-for-sale__body > .za-body + .za-body {
  margin-top: calc(30 * var(--za-u));
}

.za-for-sale__cta {
  margin-top: calc(50 * var(--za-u));
}

.za-for-sale__photo {
  margin: 0;
}

.za-for-sale__photo img {
  display: block;
  width: 100%;
}

/* Desktop: the PSD composition, on a grid whose columns are the photos' edges (330 · 984 · 1021 · 1233 ·
   1721 · 1894 design px): the text and the photo below it on the left, the tall photo on the right and
   the wide one under it, overlapping the gap. Longer text moves the lower photos down, never over it. */
@media (min-width: 1200px) {
  .za-for-sale__inner {
    display: grid;
    grid-template-columns: calc(654 * var(--za-u)) calc(37 * var(--za-u)) calc(212 * var(--za-u)) calc(488 * var(--za-u)) calc(173 * var(--za-u));
    align-items: start;
    padding: calc(120 * var(--za-u)) 0 0 calc(330 * var(--za-u));
  }

  .za-for-sale__photos,
  .za-for-sale .za-mini__frame {
    display: contents;
  }

  .za-for-sale__text {
    grid-area: 1 / 1 / 2 / 4;
    padding-right: calc(30 * var(--za-u));
  }

  .za-for-sale__photo--1 {
    grid-area: 1 / 4 / 3 / 6;
    margin-top: calc(-15 * var(--za-u));
  }

  .za-for-sale__photo--2 {
    grid-area: 2 / 1 / 3 / 2;
    width: calc(650 * var(--za-u));
    margin: calc(85 * var(--za-u)) 0 calc(85 * var(--za-u)) calc(4 * var(--za-u));
  }

  .za-for-sale__photo--3 {
    grid-area: 2 / 3 / 3 / 5;
    align-self: end;
  }
}

/* Tablet: the text across, then the tall photo on the left and the other two on the right */
@media (min-width: 768px) and (max-width: 1199px) {
  .za-for-sale {
    padding-bottom: calc(100vw * 1003 / 2000 * 0.31 + var(--za-s5));
    background: var(--za-ink-2);
  }

  .za-for-sale__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--za-s3);
    align-items: start;
    max-width: calc(1020px + 2 * var(--za-gutter));
    margin-inline: auto;
    padding: var(--za-s5) var(--za-gutter) 0;
  }

  .za-for-sale__photos,
  .za-for-sale .za-mini__frame {
    display: contents;
  }

  .za-for-sale__text {
    grid-column: 1 / -1;
    margin-bottom: var(--za-s4);
  }

  .za-for-sale__photo--1 {
    grid-area: 2 / 1 / 4 / 2;
  }

  .za-for-sale__photo--2 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .za-for-sale__photo--3 {
    grid-area: 3 / 2 / 4 / 3;
    margin-top: var(--za-s3);
  }
}

@media (max-width: 1199px) {
  .za-for-sale__heading .za-heading__classic {
    font-size: var(--za-fs-h2);
    line-height: 0.98;
  }

  .za-for-sale__heading .za-heading__graffiti {
    margin-top: var(--za-s1);
  }

  .za-for-sale__body {
    max-width: var(--za-measure);
    margin-top: var(--za-s3);
  }

  .za-for-sale__body > .za-body {
    line-height: 1.6;
  }

  .za-for-sale__body > .za-body + .za-body {
    margin-top: var(--za-s2);
  }

  .za-for-sale__cta {
    margin-top: var(--za-s4);
  }
}

/* Phones: the three photos as a small slider under the text, each whole in a square frame */
@media (max-width: 767px) {
  .za-for-sale {
    padding-bottom: calc(max(100vw, 560px) * 1003 / 2000 * 0.31 + var(--za-s4));
    background: var(--za-ink-2);
  }

  .za-for-sale__inner {
    padding: var(--za-s5) var(--za-gutter) 0;
  }

  .za-for-sale__photos {
    margin-top: var(--za-s4);
  }

  .za-for-sale__photos.is-slider .za-mini__frame {
    grid-template: 100% / 100%;
    aspect-ratio: 1;
  }

  /* flex, so the photo's max-height resolves against the square (a grid row here would be auto) */
  .za-for-sale__photos.is-slider .za-for-sale__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
  }

  .za-for-sale__photos.is-slider .za-for-sale__photo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

/* 10 · request-form (2026-10-28): dark, the cream and navy roles swapped (the availability section, when
   shown, stays cream). The menu and the logo are light here again (no data-nav-light). */
.za-request {
  background: var(--za-ink-2);
  color: var(--za-cream);
}

.za-request__inner {
  border-top-color: transparent;
}

.za-request .za-steps__button,
.za-request .za-steps__item:last-child .za-steps__button {
  border-color: rgb(248 233 186 / 0.18);
}

.za-request .za-form {
  border-color: rgb(248 233 186 / 0.14);
  background: color-mix(in srgb, var(--za-cream) 4%, var(--za-ink-2));
}

.za-request .za-form__notice {
  border-left-color: var(--za-cream);
  background: rgb(248 233 186 / 0.06);
}

.za-request .za-form__message {
  background: rgb(222 1 1 / 0.16);
}

.za-request .za-form__nav {
  border-top-color: rgb(248 233 186 / 0.14);
}

.za-request .za-field__input {
  border-bottom-color: rgb(248 233 186 / 0.4);
  color: var(--za-cream);
}

.za-request .za-field__input::placeholder {
  color: rgb(248 233 186 / 0.5);
}

.za-request .za-field__input:hover {
  border-bottom-color: rgb(248 233 186 / 0.7);
}

.za-request .za-field__input:focus {
  border-bottom-color: var(--za-cream);
  box-shadow: 0 1.5px 0 var(--za-cream);
}

/* a lighter red, readable on navy */
.za-request .za-field.is-invalid .za-field__input {
  border-bottom-color: #ff5a4a;
  box-shadow: 0 1.5px 0 #ff5a4a;
}

.za-request .za-field__error::before {
  background: #ff5a4a;
}

.za-request .za-field.is-invalid :is(.za-pill__text, .za-card, .za-check__box) {
  border-color: #ff5a4a;
}

.za-request .za-field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f8e9ba' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* the open list of a select is drawn by the system: keep it dark text on light */
.za-request .za-field__select option {
  background: var(--za-cream-light);
  color: var(--za-navy);
}

.za-request .za-pill__text {
  border-color: var(--za-cream);
}

.za-request .za-pill:hover .za-pill__text {
  background: rgb(248 233 186 / 0.08);
}

.za-request .za-pill__input:checked + .za-pill__text {
  background: var(--za-cream);
  color: var(--za-ink-2);
}

.za-request :is(.za-pill__input:focus-visible + .za-pill__text, .za-check__input:focus-visible + .za-check__box, .za-file__input:focus-visible + .za-file__button),
.za-request .za-card:has(.za-card__input:focus-visible) {
  outline-color: var(--za-cream);
}

.za-request .za-card {
  border-color: rgb(248 233 186 / 0.22);
  background: color-mix(in srgb, var(--za-cream) 3%, var(--za-ink-2));
}

.za-request .za-card:hover,
.za-request .za-card:has(.za-card__input:checked) {
  border-color: var(--za-cream);
}

.za-request .za-card:has(.za-card__input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--za-cream);
}

.za-request :is(.za-card__check, .za-check__box) {
  border-color: var(--za-cream);
  background: var(--za-ink-2); /* the card's mark sits on its photo */
}

.za-request :is(.za-card__check, .za-check__box)::after {
  border-color: var(--za-ink-2);
}

.za-request .za-card__input:checked ~ .za-card__check,
.za-request .za-check__input:checked + .za-check__box {
  background: var(--za-cream);
}

.za-request .za-form__done-mark {
  background: var(--za-cream);
  color: var(--za-ink-2);
}

/* the buttons: the outline ones (Vorige, foto kiezen) cream; the main one (Volgende, Versturen) cream-filled */
.za-request .za-button--on-cream {
  --za-button-fg: var(--za-cream);
  --za-button-bg: var(--za-ink-2);
}

.za-request .za-button--primary {
  --za-button-fg: var(--za-ink-2);
  --za-button-bg: var(--za-cream);
  border-color: var(--za-cream);
  background-color: var(--za-cream);
  color: var(--za-ink-2);
}

/* Page "Kunst te koop" (page-kunst-te-koop.php): dark like an artwork's page, the menu a bar at the top
   (body.za-has-bar). Per work the text beside a photo slider; every other work the other way round. */
.za-sale-main {
  padding-top: var(--za-nav-h, 0px);
  background: var(--za-ink);
  color: var(--za-cream);
}

.za-sale-page {
  max-width: calc(1560 * var(--za-u) + 2 * var(--za-gutter));
  margin-inline: auto;
  padding: max(48px, calc(110 * var(--za-u))) var(--za-gutter) max(80px, calc(160 * var(--za-u)));
}

.za-sale-page__title .za-heading__classic {
  --za-display-condense: 0.791;
  --za-ls: -0.015em;
  font-size: max(2.5rem, calc(117 * var(--za-u)));
  line-height: 0.93;
}

.za-sale-list {
  display: grid;
  gap: max(72px, calc(150 * var(--za-u)));
  margin-top: max(40px, calc(90 * var(--za-u)));
}

.za-sale {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: max(32px, calc(90 * var(--za-u)));
  align-items: center;
}

/* every other work: the photos on the left, still in the wider column */
.za-sale:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.za-sale:nth-child(even) .za-sale__text {
  order: 2;
}

.za-sale__title {
  margin: 0;
  font-family: var(--za-font-display);
  font-size: clamp(2rem, calc(64 * var(--za-u)), 4rem);
  font-weight: 600;
  line-height: 1.02;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}

.za-sale__about {
  margin-top: max(18px, calc(28 * var(--za-u)));
  font-size: max(0.9375rem, calc(19 * var(--za-u)));
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgb(248 233 186 / 0.88);
}

.za-sale__about > * + * {
  margin-top: 1em;
}

.za-sale__about a {
  color: var(--za-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.za-sale__cta {
  margin-top: max(26px, calc(40 * var(--za-u)));
}

/* the photos of one work: each whole (never cropped) in one 4:3 frame */
.za-sale__photos.is-slider .za-mini__frame {
  display: grid;
  grid-template: 100% / 100%;
  aspect-ratio: 4 / 3;
  background: rgb(248 233 186 / 0.035);
}

.za-sale__photos.is-slider .za-sale__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

.za-sale__photo {
  margin: 0;
}

.za-sale__photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.za-sale-page__empty {
  margin-top: max(32px, calc(60 * var(--za-u)));
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgb(248 233 186 / 0.8);
}

@media (max-width: 767px) {
  .za-sale,
  .za-sale:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .za-sale:nth-child(even) .za-sale__text {
    order: 0;
  }
}