/* ==========================================================================
   VANDESIGN — Design system

   The logo is a lowercase geometric wordmark, so the site speaks that way:
   Jost set lowercase, quiet, with a lot of air. A slow shader wash sits
   behind everything; sections either let it through or sit on top of it.

   Nothing here hides content. There is no scroll-reveal: text is visible the
   moment the HTML lands, with or without JavaScript.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------
   Self-hosted rather than loaded from Google. The latin-ext subset carries
   ő and ű — the two letters unique to Hungarian — and when that one file
   failed to arrive, every heading containing them fell back to a different
   typeface mid-word. Serving them ourselves removes that failure mode, drops
   a third-party request, and means no visitor data reaches Google.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --booth:        #0E1316;
  --booth-2:      #151B1F;

  --paper:        #EDEFEE;
  --paper-2:      #F5F7F6;
  --paper-3:      #E0E4E3;

  --ink:          #14181A;
  --slate:        #5C6669;
  --slate-2:      #8A9497;
  --rule:         #D5DAD9;
  --rule-dark:    #232E32;

  /* From the logo. --brand is the teal deepened enough to carry text
     (4.9:1 on paper); --brand-light is the logo teal itself, for dark ground. */
  --brand:        #237174;
  --brand-deep:   #1A5B5D;
  --brand-light:  #82CBCC;
  --mark-grey:    #8C8C8C;
  --mark-overlap: #476F70;

  --cut:          #FF2D9B;

  --f-display: "Jost", "Century Gothic", system-ui, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One scale, used everywhere. Nothing sets a size outside this list. */
  --fs-display: clamp(2.7rem, 7vw, 5.8rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.08rem, 1.4vw, 1.28rem);
  --fs-lead:    clamp(1.06rem, 1.35vw, 1.24rem);
  --fs-body:    1.0125rem;
  --fs-small:   0.95rem;
  --fs-label:   0.82rem;

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.68;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 8vw, 8rem);
  --radius: 2px;

  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23FF2D9B' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Reserving the scrollbar gutter means locking scroll for the mobile menu
   never reflows the page underneath it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; scrollbar-gutter: stable; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 1px; }
.on-dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: var(--brand-light); }
::selection { background: var(--brand); color: #fff; }

/* ---------- Ambient background ------------------------------------------- */
/* Fixed behind everything. Sections either let it through or cover it. */
/* Pinned to the LARGEST viewport height, not the current one. On a phone the
   URL bar hides and shows as you scroll, which changes the viewport height
   continuously — and the shader derives its ring positions from the aspect
   ratio, so every one of those changes made the circles jump sideways. lvh
   ignores the URL bar, so the canvas keeps one size for the whole session. */
.ambient {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  height: 100lvh;
}

/* ---------- Type --------------------------------------------------------- */
.display, h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: lowercase;
  line-height: var(--lh-head);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.035em; }
h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; line-height: var(--lh-head); }

p { text-wrap: pretty; }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--slate); max-width: 46ch; }
.small { font-size: var(--fs-small); color: var(--slate); }

.label {
  font-family: var(--f-display);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--brand);
}
.on-dark .label, .hero .label, .footer .label { color: var(--brand-light); }

/* ---------- Layout ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 720px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }

/* Default sections are transparent so the ambient wash reads through them.
   The two modifiers below deliberately cover it, which sets the rhythm. */
.on-paper { background: var(--paper-2); }
.on-dark { background: var(--booth); color: var(--paper); }
.on-dark .lead, .on-dark .small { color: var(--slate-2); }

.rule { height: 1px; background: var(--rule); border: 0; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head__title { display: grid; gap: 0.8rem; }

.stack { display: grid; gap: 1.25rem; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- Header ------------------------------------------------------- */
.header { position: fixed; inset: 0 0 auto; z-index: 100; isolation: isolate; transition: color 0.5s ease; }
/* Travels with the fixed header, so the navigation always has ground under
   it even while the hero is still scrolling past. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(14,19,22,0.8) 0%, rgba(14,19,22,0.45) 55%, rgba(14,19,22,0) 100%);
  transition: opacity 0.5s ease;
}
.header--over::before { opacity: 1; }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5rem; }
.header--over { color: var(--paper); }

/* Over a dark hero the header has three states. Transparent at rest, then
   dark once the hero starts sliding underneath it, then light once the page
   content arrives. Without the middle state the hero's own text scrolls up
   through the navigation and neither is readable. */
.header--dark { color: var(--paper); }
.header--solid { color: var(--ink); }

/* The blurred bar is painted on a pseudo-element, never on .header itself.
   An element with backdrop-filter becomes the containing block for its
   fixed-position descendants, and the mobile menu is a fixed child of the
   header — putting the blur here keeps the menu anchored to the viewport in
   every header state, including mid-animation while it closes.
   It sits at z-index -1, so the open menu covers it without anything
   needing to be switched off. */
/* The bar is always present and fades, rather than being created by the
   state class. A pseudo-element that only exists while --dark or --solid is
   applied has nothing to transition from, so the background used to snap. */
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: rgba(14, 19, 22, 0);
  box-shadow: 0 1px 0 transparent;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: opacity 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
}
.header--dark::after {
  opacity: 1;
  background: rgba(14, 19, 22, 0.92);
  box-shadow: 0 1px 0 var(--rule-dark);
}
.header--solid::after {
  opacity: 1;
  background: rgba(237, 239, 238, 0.92);
  box-shadow: 0 1px 0 var(--rule);
}

/* The open mobile menu is a sibling inside the header at z-index 99, so the
   logo and the language switch need to sit above it or its opaque background
   paints over them. */
.logo { display: flex; align-items: center; gap: 0.65rem; flex: none; }

/* Header logo only. It has to clear the open mobile menu, which is a sibling
   inside the header at z-index 99. Scoped deliberately: unscoped, the footer
   logo inherited z-index 101 and painted straight through the fixed header,
   while the rest of the footer correctly slid behind it. */
.header .logo { position: relative; z-index: 101; }
.logo__mark { height: 30px; width: 20.7px; flex: none; }
.logo__word {
  display: block;
  /* Matches the wordmark's viewBox aspect (548.21 x 106.26). The box used to
     be sized to the old, too-small viewBox, so `contain` scaled the mask to
     fit exactly and the descender of the g lost its bottom row. */
  width: 78.7px;
  height: 15.25px;
  flex: none;
  background-color: var(--logo-word, var(--brand));
  -webkit-mask: url(../brand/wordmark.svg) no-repeat center / contain;
  mask: url(../brand/wordmark.svg) no-repeat center / contain;
  transition: background-color 0.4s ease;
}
.header--over .logo__word, .footer .logo__word { --logo-word: var(--brand-light); }
body.menu-open .header--over .logo__word { --logo-word: var(--brand); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav__link {
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: 400;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--brand); }
.header--over .nav__link[aria-current="page"],
.header--dark .nav__link[aria-current="page"] { color: var(--brand-light); }

.header__actions { display: flex; align-items: center; gap: 0.9rem; flex: none; position: relative; z-index: 101; }

/* The active language is marked exactly the way the active nav item is:
   brand colour, slightly heavier. A filled chip would have been the loudest
   thing in the header, and because it filled with currentColor it inverted
   between the dark hero and the light pages. Colour does not invert, so this
   reads the same everywhere. Both states are set explicitly rather than
   derived from opacity, which was leaving the inactive language at about
   3.2:1 against paper. */
.lang { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--f-display); font-size: var(--fs-label); text-transform: uppercase; }
.lang__btn { color: var(--slate); transition: color 0.25s ease; }
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-current] { color: var(--brand); font-weight: 500; }
.lang__sep { color: var(--rule); }

.header--over .lang__btn,
.header--dark .lang__btn { color: var(--slate-2); }
.header--over .lang__btn:hover,
.header--dark .lang__btn:hover { color: var(--paper); }
.header--over .lang__btn[aria-current],
.header--dark .lang__btn[aria-current] { color: var(--brand-light); }
.header--over .lang__sep,
.header--dark .lang__sep { color: var(--rule-dark); }

/* With the menu open the header sits on the light menu panel, so its content
   switches to ink whichever state it was in. The chip fills with currentColor,
   so its label has to invert with it — otherwise the home page, whose header
   is normally light-on-dark, ends up with a dark label on a dark chip. */
body.menu-open .header { color: var(--ink); transition: none; }
body.menu-open .lang__btn { color: var(--slate); }
body.menu-open .lang__btn[aria-current] { color: var(--brand); }
body.menu-open .lang__sep { color: var(--rule); }

.burger { display: none; width: 40px; height: 40px; background: none; border: 1px solid currentColor; border-radius: 2px; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform 0.3s ease; }
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { bottom: 14px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: flex-end;
  background: var(--booth);
  color: var(--paper);
  overflow: hidden;
  padding-block: 9rem clamp(2.5rem, 5vw, 4rem);
}
/* A canvas is a replaced element: inset:0 alone will not stretch it, it just
   keeps the intrinsic size of its width/height attributes. Without explicit
   100% it covers only part of the hero. */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Two scrims. The top one keeps the navigation off the artwork so it never
   reads as if it is sitting in the middle of the headline; the bottom one
   carries the text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 13rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,19,22,0.88) 0%, rgba(14,19,22,0.55) 45%, rgba(14,19,22,0) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 52% 42%, rgba(14,19,22,0) 38%, rgba(14,19,22,0.62) 100%),
    linear-gradient(0deg, rgba(14,19,22,0.94) 4%, rgba(14,19,22,0.42) 46%, rgba(14,19,22,0) 74%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { margin-block: 1.25rem 1.5rem; max-width: 14ch; }
.hero__lead { color: rgba(237,239,238,0.74); max-width: 40ch; }

.hero__meta { display: flex; flex-wrap: wrap; gap: 0 clamp(1.75rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }
.hero__meta div { padding-block: 0.4rem; }
.hero__meta dt { font-family: var(--f-display); font-size: var(--fs-label); color: var(--slate-2); }
.hero__meta dd { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; margin-top: 0.1rem; }

/* The one orchestrated moment, and it is pure CSS: if the animation never
   runs, the content is simply already in place. */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .enter:nth-child(2) { animation-delay: 0.08s; }
  .enter:nth-child(3) { animation-delay: 0.16s; }
  .enter:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Page hero (subpages) ----------------------------------------- */
.page-hero { padding-block: clamp(7.5rem, 12vw, 10.5rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.page-hero h1 { margin-top: 0.7rem; }

/* ---------- Editorial rows ----------------------------------------------- */
.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__body { color: var(--slate); max-width: 58ch; }

/* ---------- Reference collection ----------------------------------------- */
/* Deliberately not a uniform grid: alternating widths read as a portfolio
   rather than a spreadsheet of thumbnails. */
.collection { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.piece { display: grid; gap: 1rem; }
.piece__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.piece__frame img { width: 100%; height: 100%; object-fit: cover; }
.piece__caption { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; }
.piece__title { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); text-transform: lowercase; letter-spacing: -0.012em; }
.piece__note { color: var(--slate); font-size: var(--fs-small); }

.piece--wide { grid-column: 1 / -1; }
.piece--wide .piece__frame { aspect-ratio: 16 / 7; }
.piece__frame { aspect-ratio: 4 / 3; }

.collection--split { grid-template-columns: repeat(2, 1fr); }
.collection--split .piece--tall .piece__frame { aspect-ratio: 3 / 4; }

/* Placeholder for artwork not yet supplied. The dashed contour is the line a
   plotter follows; here it marks the shape of a missing picture. */
.slot { display: grid; place-items: center; height: 100%; background: var(--paper-3); position: relative; }
.slot::before { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--cut); opacity: 0.35; }
.slot::after {
  content: "";
  position: absolute;
  inset: 6px;
  background-image: var(--cross), var(--cross), var(--cross), var(--cross);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.45;
}
.slot__label { font-family: var(--f-display); font-size: var(--fs-label); color: var(--slate); position: relative; z-index: 1; }

/* ---------- People ------------------------------------------------------- */
.people { display: grid; max-width: 34rem; }
.people li { list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding-block: 0.95rem; border-top: 1px solid var(--rule); }
.people li:last-child { border-bottom: 1px solid var(--rule); }
.people__name { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h3); text-transform: none; }
.people__role { font-family: var(--f-display); font-size: var(--fs-label); color: var(--slate); }

/* ---------- Contact ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--rule); align-items: baseline; }
.contact-item:last-child { border-bottom: 1px solid var(--rule); }
.contact-item dt { font-family: var(--f-display); font-size: var(--fs-label); color: var(--slate); }
.contact-item dd a:hover { color: var(--brand); }
.contact-item strong { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; }

.map-embed { aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); filter: grayscale(1); transition: filter 0.4s ease; }
.map-embed:hover { filter: grayscale(0); }

/* ---------- Prose (legal pages) ------------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin-top: 2.4rem; margin-bottom: 0.7rem; }
.prose h3 { margin-top: 1.6rem; margin-bottom: 0.4rem; }
.prose p, .prose li { color: var(--slate); }
.prose p + p { margin-top: 0.9rem; }
.prose ul, .prose ol { margin: 0.9rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.5rem; margin-top: 0.9rem; }
.prose dt { font-family: var(--f-display); font-size: var(--fs-label); color: var(--slate); padding-top: 0.25rem; }
.prose dd { color: var(--slate); }

/* Legal pages read as documents, so their headings keep normal case. */
[data-page="imprint"] h1, [data-page="imprint"] h2, [data-page="imprint"] h3,
[data-page="privacy"] h1, [data-page="privacy"] h2, [data-page="privacy"] h3 {
  text-transform: none;
}

/* ---------- Links -------------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-display);
  font-size: var(--fs-small);
  color: var(--brand);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.link:hover { background-size: 100% 1px; }
.on-dark .link, .hero .link { color: var(--brand-light); }
.link svg { transition: transform 0.3s ease; }
.link:hover svg { transform: translateX(3px); }

/* ---------- Footer ------------------------------------------------------- */
/* One size for everything in here. The columns used to disagree with each
   other, and the headings were styled small enough to read as small-caps. */
.footer { background: var(--booth); color: var(--paper); padding-block: clamp(3.5rem, 6vw, 5rem) 1.75rem; font-size: var(--fs-small); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer__blurb { color: var(--slate-2); max-width: 28ch; margin-top: 1.1rem; }
.footer__col h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper);
  margin-bottom: 0.85rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer__col a { color: rgba(237,239,238,0.72); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--brand-light); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-dark); color: var(--slate-2); }
.footer__bottom a:hover { color: var(--paper); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Touch targets -------------------------------------------------
   WCAG 2.2 (2.5.8) asks for at least 24x24 CSS px. The language toggle and the
   footer links are small type, so they land at 20-22px. The pseudo-element
   enlarges what a finger has to hit without moving anything on screen; the
   insets stay under half the gap to adjacent links so hit areas never overlap.
   ------------------------------------------------------------------------- */
.lang__btn { position: relative; }
.lang__btn::after { content: ""; position: absolute; inset: -8px -6px; }

.footer__col a { position: relative; }
.footer__col a::after { content: ""; position: absolute; inset: -4px 0; }

/* ---------- Utilities ---------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 200; background: var(--ink); color: var(--paper-2); padding: 0.7rem 1.1rem; font-family: var(--f-display); font-size: var(--fs-small); }
.skip-link:focus { top: 1rem; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--paper);
    color: var(--ink);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.55s;
  }
  body.menu-open .nav {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
  }
  .nav__link { font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 400; letter-spacing: -0.03em; padding: 0.3rem 0; }
  .nav__link::after { display: none; }
  .burger { display: block; z-index: 101; }
  body.menu-open .header { color: var(--ink); }

  /* No JS means no toggle, so the menu stays inline rather than hidden. */
  .no-js .nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.1rem; padding: 0; background: none; color: inherit; clip-path: none; visibility: visible; }
  .no-js .nav__link { font-size: var(--fs-label); }
  .no-js .burger { display: none; }

  .section-head { grid-template-columns: 1fr; align-items: start; }
  .page-hero__grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 0.4rem; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .prose dl { grid-template-columns: 1fr; gap: 0.1rem 0; }

  /* More room per link on touch, so the hit areas can grow further. */
  .footer__col ul { gap: 0.9rem; }
  .footer__col a::after { inset: -7px 0; }
  .prose dd { margin-bottom: 0.7rem; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .collection--split { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .contact-item { grid-template-columns: 1fr; gap: 0.1rem; }
  .hero { min-height: 86svh; }
  .people li { flex-direction: column; gap: 0.1rem; }
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .nav { transition: none; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .header, .footer, .hero__canvas, .ambient { display: none !important; }
  body { background: #fff; color: #000; }
}