@font-face {
  font-family: "Beau Rivage";
  src: url("../fonts/BeauRivage-Regular.v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --charcoal: #151a19;
  --artwork-background: #c0cdd6;
  --artwork-gutter: 24px;
  --artwork-overlap: min(23.57px, calc((100vw - 2 * var(--artwork-gutter)) * .03683));
  --bone: #eee8db;
  --paper: #f2eee4;
  --ink: #242a25;
  --muted: #545a50;
  --line: #b0ac9e;
  --gold: #e0be92;
  --inset: clamp(20px, 6vw, 86px);
  --heading: "Beau Rivage", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  scroll-padding-top: 4.75rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--charcoal); color: var(--bone); font: 1rem/1.55 var(--sans); }
p, h1, h2, h3, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .28em; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shell { max-width: 1320px; margin-inline: auto; padding-inline: var(--inset); }
.skip { position: absolute; top: 8px; left: 8px; z-index: 3; padding: .5rem 1rem; background: var(--charcoal); transform: translateY(-160%); }
.skip:focus { transform: none; }
.masthead {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: clamp(190px, calc(42vw + 62px), 503px);
  padding: clamp(30px, 6vw, 72px) 22px;
  background: #0b1011;
  color: #f7f3eb;
}

/* Die beiden Texturflächen laufen zur dunklen Mitte aus. */
.masthead::before,
.masthead::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(68%, 620px);
  background:
    linear-gradient(90deg, transparent, #0b101175),
    url("../img/headertextur-ausschnitt.v1.webp") 24% 48% / cover no-repeat;
  mask-image: linear-gradient(90deg, #000 18%, transparent 100%);
}

.masthead::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
  background-position: center, 52% 65%;
  transform: scaleX(-1);
}

.masthead-mark {
  width: min(100%, 760px);
}

.masthead .masthead-mark img {
  width: min(100%, 716px);
  margin-inline: auto;
}

.masthead-tagline {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
  gap: clamp(7px, 2vw, 26px);
  margin-top: clamp(11px, 2vw, 28px);
  font: 500 clamp(.69rem, 1.6vw, 1.18rem)/1.45 var(--sans);
  letter-spacing: clamp(.09em, .37vw, .24em);
  text-align: center;
  text-transform: uppercase;
}

.masthead-tagline span {
  max-inline-size: 39ch;
}

.masthead-tagline::before,
.masthead-tagline::after {
  content: "";
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}

.menu { position: sticky; top: 0; z-index: 2; padding-bottom: var(--artwork-overlap); pointer-events: none; }
.menu-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px clamp(12px, 5vw, 70px); padding: 4px 10px; background: var(--charcoal); border-top: 1px solid #586058; pointer-events: auto; }
.menu nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(11px, 4vw, 58px); }
.menu a { display: block; padding-block: 11px; font-size: .91rem; }
.languages { display: flex; gap: 5px; align-items: center; color: #c9c9bd; font-size: .75rem; white-space: nowrap; }
.languages strong { color: var(--gold); }
.opening { margin-top: calc(-1 * var(--artwork-overlap)); background: linear-gradient(to bottom, transparent var(--artwork-overlap), var(--artwork-background) var(--artwork-overlap)); color: var(--ink); padding-inline: var(--artwork-gutter); }
.frame { position: relative; max-width: 640px; margin-inline: auto; }
.motion { transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .22s ease-out; }
.motion img { width: 100%; }
.frame figcaption { position: absolute; left: calc(100% + 6px); bottom: 0; writing-mode: vertical-rl; font-size: .79rem; line-height: 1; white-space: nowrap; }
.paper { background: var(--paper); color: var(--ink); }
h2, h3 { font-family: var(--heading); font-weight: 400; line-height: 1.12; }
h2 { font-size: clamp(42px, 6.4vw, 93px); }
.exhibition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: clamp(24px, 6vw, 88px); padding-block: clamp(45px, 8vw, 108px) 0; }
.exhibition h2 { font-size: clamp(42px, 5.5vw, 78px); }
.exhibition h3 { font: 500 clamp(22px, 2.6vw, 36px)/1.25 var(--sans); margin-top: 14px; }
.exhibition-copy p { max-width: 46ch; margin-top: 14px; }
.exhibition-date { color: var(--muted); font-size: .95rem; }
.exhibition-link { display: inline-block; margin-top: 16px; color: #374a42; text-decoration: underline; text-underline-offset: .23em; }
.exhibition-link:focus-visible { outline-color: currentColor; }
.exhibition-poster { width: min(100%, 360px); justify-self: center; }
.gallery { padding-block: clamp(45px, 8vw, 116px); }
.gallery h2 { margin-bottom: clamp(20px, 4vw, 50px); }
.gallery-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: end; gap: clamp(24px, 6vw, 94px); }
.featured img { width: 100%; }
.featured figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; font-size: .82rem; }
.featured figcaption span, .proof-sheet p, .muted { color: var(--muted); }
.proof-sheet p { font-size: .87rem; margin-bottom: 11px; }
.thumbnails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(5px, 1vw, 13px); list-style: none; padding: 0; margin: 0; }
.thumbnails li { display: grid; place-items: end start; aspect-ratio: 4 / 5; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.press { padding-block: clamp(40px, 7vw, 95px); }
.press h2 { margin-bottom: clamp(20px, 4vw, 50px); }
.press-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 6vw, 85px); }
.press-copy h3 { font: 500 clamp(20px, 2.5vw, 34px)/1.3 var(--sans); }
.clipping { width: min(100%, 420px); margin-top: 18px; }
.clipping figcaption { margin-top: 9px; color: var(--muted); font-size: .87rem; }
.press-archive h3 { font: 600 1.05rem/1.4 var(--sans); margin-block-end: .35rem; }
.press-archive > p { font-size: .87rem; }
.press-list { list-style: none; display: grid; gap: 20px; padding: 0; margin: 26px 0 0; }
.press-list li { display: grid; grid-template-columns: clamp(48px, 6vw, 72px) minmax(0, 1fr); align-items: start; gap: 14px; }
.press-list img { width: 100%; }
.press-format { color: var(--muted); font-size: .85rem; }
.press-list h4 { font: 600 clamp(1rem, 1.7vw, 1.28rem)/1.35 var(--sans); margin: 0 0 .2rem; }
.press-list p { max-width: 62ch; color: var(--muted); font-size: .9rem; }
.press-link { display: inline-block; margin-top: .4rem; color: #374a42; text-decoration: underline; text-underline-offset: .2em; font-size: .9rem; }
.press-link:focus-visible { outline-color: currentColor; }
.press-example h1 { font: 500 clamp(25px, 4vw, 44px)/1.2 var(--sans); margin-block: 24px 10px; }
.press-example dl { max-width: 64ch; }
.press-example dt { font-weight: 600; margin-top: 16px; }
.press-example dd { margin: 4px 0 0; }
.artist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(20px, 8vw, 115px); padding-block: clamp(45px, 8vw, 105px); }
.artist img { width: min(100%, 345px); margin-inline: auto; filter: brightness(0) saturate(100%); opacity: .72; }
.artist-copy { padding-inline-start: clamp(18px, 5vw, 75px); }
.artist-copy h2 { font-size: clamp(39px, 5vw, 68px); }
.artist-copy p { margin-top: 14px; color: var(--muted); }
.artist-copy .artist-draft { font-size: .84rem; }
.contact { background: #ece7dc; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-block: clamp(22px, 4vw, 50px); }
.contact h2 { font-size: clamp(28px, 3.6vw, 48px); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 25px; padding-block: 22px; color: #c9c9bd; font-size: .79rem; }
.foot div { display: flex; flex-wrap: wrap; gap: 4px 15px; }
.foot strong { color: var(--bone); }
@media (max-width: 760px) {
  .gallery-layout { grid-template-columns: 1fr; }
  .exhibition { grid-template-columns: 1fr; }
  .exhibition-poster { justify-self: start; }
  .press-layout { grid-template-columns: 1fr; }
  .featured { max-width: 440px; }
  .proof-sheet { max-width: 520px; }
}
@media (max-width: 530px) {
  :root { scroll-padding-top: 6rem; }
  .menu-inner { column-gap: 15px; }
  .menu nav { column-gap: 11px; }
  .menu a { font-size: .82rem; }
  .artist { grid-template-columns: 1fr; }
  .artist img { width: min(64%, 235px); margin-inline: 0; }
  .artist-copy { padding-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .motion { transform: none; transition: none; }
}