/* Form Follows Meaning — site stylesheet (frontpage + /objects, /works, /exhibitions, /about).
   Editorial, calm, dark. One system font stack, no webfont requests. */
:root{
  --ink:#f1f1ef; --ink-soft:#9b9b97; --ink-dim:#6b6b68; --wall:#141517; --wall-2:#191a1d; --hair:#37383b;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1280px; --gutter:clamp(20px,4vw,48px); --section:clamp(72px,10vw,128px);
  /* global card zoom: studio photos carry a thin white border -> zoom in until it disappears.
     Per-object override via cropZoom in content/data.json (sets --z inline). */
  --crop-zoom:1.07;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{background:var(--wall);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100%}
body{font-size:15px;line-height:1.6;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);background:rgba(20,21,23,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(55,56,59,.6)}
.wordmark{font-size:14px;letter-spacing:.18em;text-transform:lowercase;white-space:nowrap}
.wordmark:hover{opacity:.7}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav .cart{color:var(--ink)}
.clock{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:6px}
.navBtn{display:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:820px){
  .navBtn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(20,21,23,.96);border-bottom:1px solid var(--hair);padding:8px var(--gutter) 18px;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--hair);font-size:13px}
  .nav a[aria-current="page"]{border-bottom-color:var(--hair)}
  .clock{margin:12px 0 0}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#0e0f11;display:flex;align-items:flex-end}
.heroPoster,.heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform-origin:center;will-change:transform}
.heroVideo{opacity:0;transition:opacity .8s ease}          /* playlist crossfade */
.heroVideo.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,.18) 0%,rgba(14,15,17,0) 35%,rgba(14,15,17,.72) 100%);pointer-events:none}
.heroText{position:relative;z-index:2;padding:0 var(--gutter) clamp(40px,7vh,88px);max-width:var(--max);margin:0 auto;width:100%}
.heroText .label{margin-bottom:18px;color:rgba(241,241,239,.72)}
.heroText h1{font-weight:300;font-size:clamp(26px,4.6vw,56px);line-height:1.08;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.heroCta{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:28px}
.btn,.btnGhost{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--ink)}
.btn{background:var(--ink);color:#141416}
.btn:hover{opacity:.85}
.btnGhost{color:var(--ink);background:rgba(20,21,23,.35)}
.btnGhost:hover{background:var(--ink);color:#141416}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero.motion .heroPoster,.hero.motion .heroVideo{animation:kb 20s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.hero .heroPoster,.hero .heroVideo{animation:none!important}}

/* ---------- sections ---------- */
.section{padding:var(--section) 0}
.section + .section{border-top:1px solid var(--hair)}
.secHead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.secHead h2{font-weight:300;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.015em;line-height:1.1}
.secHead .more{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;border-bottom:1px solid var(--hair);padding-bottom:4px}
.secHead .more:hover{color:var(--ink);border-color:var(--ink)}
.lede{font-weight:300;font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink);max-width:56ch}
.muted{color:var(--ink-soft)}
.prose p{max-width:62ch;margin-bottom:1em;color:var(--ink);font-weight:300;font-size:16px}
.prose p:last-child{margin-bottom:0}

/* ---------- enter 3D ---------- */
.enter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.riftLink{display:block;text-align:center}
.riftStage{position:relative;width:min(480px,100%);aspect-ratio:1/1;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.riftStage canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.riftImg{max-height:82%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transition:opacity .6s ease}
.riftStage.live .riftImg{opacity:0}
@media(prefers-reduced-motion:no-preference){.riftStage:not(.live) .riftImg{animation:floaty 6s ease-in-out infinite}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.riftLink .label{color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:4px}
.riftLink:hover .label{border-color:var(--ink)}
.enterText h2{font-weight:300;font-size:clamp(26px,3.6vw,42px);letter-spacing:-.015em;line-height:1.1;margin-bottom:16px}
.enterText p{max-width:44ch;color:var(--ink-soft);font-weight:300;font-size:16px}
@media(max-width:820px){.enter{grid-template-columns:1fr}}

/* ---------- object grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px) clamp(16px,2.5vw,32px)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:14px;min-width:0}
.cardImg{display:block;aspect-ratio:705/1000;background:#1c1d20;overflow:hidden}
.cardImg img{width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center;transform:scale(var(--z,var(--crop-zoom)));transition:transform .8s ease,opacity .4s ease}
.card:hover .cardImg img{transform:scale(calc(var(--z,var(--crop-zoom)) * 1.025))}
.cardBody .no{font-size:11px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:4px}
/* series tile: spans two columns, landscape (matches the GERONNEN overview photo) */
.card.wide{grid-column:span 2}
.cardImg.wide{aspect-ratio:1410/1000}
@media(max-width:480px){.card.wide{grid-column:span 1}}
.seriesHero img{width:100%;height:auto;display:block;background:#1c1d20}
.seriesText{max-width:62ch;margin:clamp(24px,4vw,40px) 0 clamp(28px,5vw,56px)}
.groupHead .note{display:inline-block;margin-left:14px;color:var(--ink);letter-spacing:.14em;border-bottom:1px solid var(--hair);padding-bottom:2px}
.groupIntro{margin:-4px 0 26px}
.cardImg.ph{display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-size:10px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--hair)}
.cardBody h3{font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.cardBody .mat{font-size:12px;color:var(--ink-soft);margin-top:3px}
.cardBody .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px}
.buy{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#141416;background:var(--ink);padding:9px 14px}
.buy:hover{opacity:.82}
.ask{font-size:12px;color:var(--ink-soft);border-bottom:1px solid var(--hair);padding-bottom:2px}
.ask:hover{color:var(--ink);border-color:var(--ink)}
.groupHead{margin:44px 0 18px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.groupHead:first-child{margin-top:0}

/* ---------- exhibitions list ---------- */
.exList{list-style:none;border-top:1px solid var(--hair)}
.exItem{display:grid;grid-template-columns:150px minmax(0,1fr) 120px;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.exItem .date{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.exItem .title{font-weight:400;font-size:16px}
.exItem .venue{font-size:13px;color:var(--ink-soft);margin-top:2px}
.exItem .type{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-align:right}
.exItem .status{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-left:10px;color:var(--ink-dim)}
.exItem .status.up{color:var(--ink)}
.exItem .todo{font-size:11px;color:var(--ink-dim);margin-top:4px}
@media(max-width:640px){.exItem{grid-template-columns:1fr;gap:4px}.exItem .type{text-align:left}}

/* ---------- about teaser ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.studioPh{aspect-ratio:4/3;background:#1c1d20;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:24px}
.studioPh img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.about{grid-template-columns:1fr}}

/* ---------- detail page ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.detailMedia{display:grid;gap:14px}
.detailMedia img{width:100%;background:#1c1d20}
.detailMedia video{width:100%;background:#000}
.detailInfo{position:sticky;top:84px}
.detailInfo h1{font-weight:300;font-size:clamp(32px,4.5vw,56px);letter-spacing:-.015em;line-height:1.05}
.detailInfo .mat{color:var(--ink-soft);margin-top:8px}
.specs{list-style:none;margin:26px 0;border-top:1px solid var(--hair)}
.specs li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:13px}
.specs li span:first-child{color:var(--ink-soft);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding-top:2px}
.priceRow{display:flex;align-items:center;gap:22px;margin:26px 0}
.priceRow .price{font-size:18px}
.detailInfo .desc{font-weight:300;font-size:16px;max-width:52ch;color:var(--ink)}
.back{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:inline-block;margin-bottom:28px}
.back:hover{color:var(--ink)}
@media(max-width:820px){.detail{grid-template-columns:1fr}.detailInfo{position:static}}

/* ---------- press / about page ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.dl{list-style:none;border-top:1px solid var(--hair)}
.dl li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:14px}
.dl li .ph{color:var(--ink-dim);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.portraitPh{aspect-ratio:4/5;max-width:420px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--hair);padding:clamp(48px,7vw,88px) 0 40px}
.ftrGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
@media(max-width:820px){.ftrGrid{grid-template-columns:1fr}}
.nl .label{display:block;margin-bottom:14px}
.nlRow{display:flex;gap:0;max-width:440px;border-bottom:1px solid var(--ink)}
.nlRow input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;font-size:15px;padding:10px 0;outline:none}
.nlRow input::placeholder{color:var(--ink-dim)}
.nlRow button{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:10px 0 10px 14px}
.nlRow button:hover{opacity:.7}
.nlOk{display:none;margin-top:12px;font-size:13px;color:var(--ink-soft)}
.nl.done .nlRow{display:none}.nl.done .nlOk{display:block}
.nlNote{margin-top:12px;font-size:12px;color:var(--ink-dim);max-width:44ch}
.ftrLinks{display:flex;flex-wrap:wrap;gap:12px 24px;align-content:flex-start}
.ftrLinks a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.ftrLinks a:hover{color:var(--ink)}
.copy{margin-top:48px;font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}
.todoNote{font-size:11px;color:var(--ink-dim);letter-spacing:.06em}