/* ============================================================
   Mia-Franziska Böhm — shared styles for every page except the
   homepage (which carries its own styles for the slot machine).
   ============================================================ */
:root {
  --ink: #1a1a1a;
  --grey: #6c6c6c;
  --grey-light: #bbb;
  --line: #e8e8e8;
  --red: red;
  --paper: #fff;
  --text: 8.4px;     /* the original site's type size */
  --nav: 10px;
  --gutter: 28px;
  --font: Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.9;
  color: var(--grey);
  min-height: 100vh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--grey); text-decoration: none; transition: color .15s; }
a:hover, a:focus-visible { color: var(--red); outline: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-size: inherit; font-weight: 400; color: var(--ink); }

/* ---------- page frame ---------- */
.content { flex: 1 0 auto; width: 100%; max-width: 1222px; padding: 44px 21px 80px; }   /* left edge lines up with the signature */

/* ---------- year jump + sections ---------- */
.year + .year { margin-top: 64px; }
.year-label { color: var(--grey-light); margin-bottom: 14px; }

/* ---------- work grid: whole photo, never cropped ---------- */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 28px; }
.grid .tile { grid-column: span 2; }
.grid .tile.wide { grid-column: span 3; }
.grid .tile.wide .frame { aspect-ratio: 6 / 5; }   /* works shown as a pair, two to a row */
.tile { display: block; }
.frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: opacity .2s; }
.tile:hover .frame img { opacity: .88; }
.cap { display: block; margin-top: 8px; line-height: 1.6; }
.tile:hover .cap { color: var(--red); }

/* ---------- single work ---------- */
.work { max-width: 960px; }
.hero { display: flex; justify-content: flex-start; }
.hero img { max-height: 78vh; width: auto; object-fit: contain; }
.zoom { display: block; cursor: zoom-in; }
.meta { margin-top: 22px; max-width: 520px; }
.meta h1 { margin-bottom: 4px; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.sheets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 22px; margin-top: 52px; }
.panel figcaption, .sheet figcaption { margin-top: 6px; line-height: 1.6; }
.sheet img { aspect-ratio: 3 / 4; object-fit: contain; width: 100%; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--line); }
.pager .next { text-align: right; }
.pager span { display: block; color: var(--ink); }
.pager a:hover span { color: var(--red); }
.pager .all { align-self: start; }

/* ---------- exhibitions ---------- */
.exhibitions { display: flex; flex-direction: column; }
.ex { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 0 0 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.ex:last-child { border-bottom: 0; margin-bottom: 0; }
.ex-textonly { grid-template-columns: 1fr; }
.ex-images { display: flex; flex-direction: column; gap: 12px; }
.ex-first img { max-height: 72vh; width: auto; }
.ex-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-rest img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ex-images a:hover img { opacity: .88; }
.ex-text { padding-top: 2px; }
.ex-text h2 { margin-bottom: 4px; }
.ex-year { display: block; color: var(--grey-light); margin-bottom: 6px; }
.ex-type, .ex-venue { display: block; }
.ex-credit { display: block; margin-top: 6px; color: var(--grey-light); }

/* ---------- text pages ---------- */
.text { max-width: 440px; }
.text p + p { margin-top: 1em; }
.text h1 { margin-bottom: 1.6em; }
.text h2 { margin: 2.4em 0 .5em; }
.text h1 + h2 { margin-top: 0; }
.text a { text-decoration: underline; text-underline-offset: 2px; }
.text .fine { margin-top: 2.4em; color: var(--grey-light); }
.text .fine a { color: var(--grey-light); }
.text .fine a:hover { color: var(--red); }
.text .lang-jump { margin: -1em 0 1.6em; }
.translation { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }

/* ---------- contact form ---------- */
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 2.4em; max-width: 360px; }
.form label { display: flex; flex-direction: column; gap: 4px; color: var(--grey); }
.form input, .form textarea {
  font: inherit; font-size: 10px; line-height: 1.6; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid #d6d6d6; border-radius: 0; padding: 4px 0; outline: none; resize: vertical;
}
.form input:focus, .form textarea:focus { border-bottom-color: var(--ink); }
.form button { align-self: flex-start; font: inherit; color: var(--grey); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.form button:hover, .form button:focus-visible { color: var(--red); outline: none; }
.form-note { color: var(--grey-light); }
.form-note a { color: var(--grey-light); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: rgba(255,255,255,.97); }
.lb.open { display: flex; }
.lb img { max-width: 88vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.lb-cap { min-height: 1.6em; text-align: center; }
.lb button { position: absolute; background: none; border: 0; font: inherit; font-size: var(--nav); color: var(--grey); cursor: pointer; padding: 12px; }
.lb button:hover, .lb button:focus-visible { color: var(--red); outline: none; }
.lb-close { top: 14px; right: 18px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  :root { --text: 10px; --gutter: 16px; }
  .content { padding: 28px 16px 60px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .grid .tile, .grid .tile.wide { grid-column: span 1; }
  .grid .tile.wide .frame { aspect-ratio: 4 / 5; }
  .panels { grid-template-columns: 1fr; }
  .sheets { grid-template-columns: repeat(2, 1fr); }
  .ex { grid-template-columns: 1fr; gap: 18px; }
  .ex-text { order: -1; }
  .hero img { max-height: none; width: 100%; }
  .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }