:root{
  --ink:#0d0d0d;
  --paper:#ffffff;
  --line:rgba(13,13,13,.16);
  --line-soft:rgba(13,13,13,.09);
  --muted:#555555;
  --rail:1180px;
  --pad:clamp(1.5rem,5vw,4.5rem);
  --display:"Archivo",system-ui,sans-serif;
  --serif:"Spectral",Georgia,serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  /* transparent so the fixed interactive #bg layer shows through */
  background:transparent;
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper);}
img{max-width:100%;display:block;}

/* ---- interactive particle background (ported from postyour.art) ---- */
#bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--paper);
  pointer-events:none;
}
#bg canvas{display:block;width:100%;height:100%;}
/* (#bg uses z-index:-1, so it already sits behind all static page content —
   no extra stacking rules needed, and the fixed lightbox stays on top.) */

.rail{width:100%;max-width:var(--rail);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ---- structural typography ---- */
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.7rem,1.1vw,.82rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:.9em;
}
.eyebrow .idx{
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.eyebrow .idx::after{content:"";display:inline-block;width:2.4em;height:1px;background:var(--ink);margin-left:.9em;vertical-align:middle;}

h2.section-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,5.4vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:.55em 0 0;
  max-width:16ch;
  text-wrap:balance;
}

.lead{
  font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.62;
  max-width:60ch;
}
p.body{
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  line-height:1.7;
  max-width:62ch;
  color:#1a1a1a;
}
p.body + p.body{margin-top:1.1em;}

/* ---- thin construction hatch divider ---- */
.hatch{
  height:14px;
  width:100%;
  background-image:repeating-linear-gradient(-45deg,var(--ink) 0 1.5px,transparent 1.5px 11px);
  opacity:.85;
}

/* ============ HERO ============ */
.topbar{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1.6rem;
  padding-bottom:1.6rem;
  font-family:var(--display);
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:600;
}
.topbar .url{color:var(--muted);}

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.hero-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(2rem,6vh,5rem);
  padding-bottom:clamp(2rem,5vh,4rem);
}
.hero-kicker{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.74rem,1.2vw,.9rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  margin-bottom:clamp(1.2rem,3vh,2.4rem);
}
.hero-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3.4rem,15.5vw,13rem);
  line-height:.84;
  letter-spacing:-.035em;
  margin:0;
  word-break:break-word;
}
.hero-sub{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.05rem,2.6vw,1.9rem);
  letter-spacing:.02em;
  margin:clamp(1.3rem,3.2vh,2.3rem) 0 0;
}
.hero-question{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem,4.6vw,3rem);
  line-height:1.12;
  margin:clamp(1.4rem,3.4vh,2.4rem) 0 0;
  max-width:18ch;
}
.audio-player{
  margin-top:clamp(1.2rem,3vh,2rem);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-width:30rem;
}
.audio-label{
  font-family:var(--display);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.audio-player audio{
  width:100%;
  height:40px;
}
.hero-body{
  margin-top:clamp(2rem,5vh,3.4rem);
  max-width:64ch;
  font-size:clamp(1.02rem,1.3vw,1.18rem);
  line-height:1.72;
  color:#1a1a1a;
}
.hero-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:clamp(1.6rem,4vh,2.6rem);
  flex-wrap:wrap;
}
.hero-url{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1rem,2vw,1.4rem);
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid var(--ink);
  padding-bottom:.12em;
}
.scroll-cue{
  font-family:var(--display);
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.7em;
}

/* ============ SECTION shell ============ */
section.block{padding-top:clamp(4.5rem,11vh,9rem);padding-bottom:clamp(4.5rem,11vh,9rem);}
.grid-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
.sticky-head{position:sticky;top:2.2rem;}

/* ---- photo captions ---- */
.cap{
  font-family:var(--display);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:.85rem;
  display:flex;
  gap:.7em;
  align-items:baseline;
}
.cap .n{color:var(--muted);font-variant-numeric:tabular-nums;}

.ort-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.1rem,2.5vw,2rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.ort-grid figure{margin:0;}
.col-7{grid-column:span 7;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-4{grid-column:span 4;}
.col-8{grid-column:span 8;}

/* ---- klingeln plaque ---- */
.plaque{
  margin-top:clamp(2rem,5vh,3rem);
  display:inline-block;
  border:2px solid var(--ink);
  padding:0;
  max-width:30rem;
  background:var(--paper);
}
.plaque .ph{
  background-image:repeating-linear-gradient(-45deg,var(--ink) 0 6px,var(--paper) 6px 14px);
  height:12px;
}
.plaque .pb{padding:1.3rem 1.6rem;}
.plaque .plab{
  font-family:var(--display);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.45rem;
}
.plaque .ptxt{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.12;
  letter-spacing:-.01em;
}

.zaun-cta{
  margin-top:clamp(2rem,5vh,3rem);
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.8rem);
}
.zaun-cta .plaque{
  margin-top:0;
  flex:1 1 auto;
  min-width:0;
}
.buzzer-wrap{
  display:inline-flex;
  background:none;
  border:none;
  outline:none;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
}
.buzzer-icon{
  width:clamp(76px,9vw,104px);
  height:auto;
  transition:filter .2s ease, transform .15s ease;
}
.buzzer-wrap:hover .buzzer-icon,
.buzzer-wrap:focus-visible .buzzer-icon{
  filter:brightness(1.35);
}
.buzzer-wrap:active .buzzer-icon{
  transform:scale(.94);
}

/* ============ IMAGE SLOTS (dummy images → collection lightbox) ============ */
.slot{
  display:block;
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:#f1f0ee;
  cursor:zoom-in;
  overflow:hidden;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .5s ease;
  will-change:transform;
}
.slot::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid transparent;
  transition:border-color .35s ease,box-shadow .35s ease;
  pointer-events:none;
}
.slot-hint{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:.25em;
  padding:clamp(.7rem,1.6vw,1.1rem);
  background:linear-gradient(to top,rgba(13,13,13,.55),rgba(13,13,13,0) 55%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.slot-name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(.9rem,1.6vw,1.05rem);
  letter-spacing:.01em;
  color:#fff;
}
.slot-cue{
  font-family:var(--display);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  gap:.5em;
}
.slot-cue::before{content:"◷";font-size:.9em;}
/* mouseover highlight */
.slot:hover img,.slot:focus-visible img{transform:scale(1.05);filter:grayscale(0) contrast(1.04);}
.slot:hover .slot-hint,.slot:focus-visible .slot-hint{opacity:1;}
.slot:hover::after,.slot:focus-visible::after{border-color:var(--ink);box-shadow:0 0 0 2px rgba(13,13,13,.06);}
.slot:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.slot-count{
  position:absolute;
  top:clamp(.6rem,1.4vw,.95rem);
  right:clamp(.6rem,1.4vw,.95rem);
  font-family:var(--display);
  font-weight:700;
  font-size:.64rem;
  letter-spacing:.16em;
  color:#fff;
  background:rgba(13,13,13,.72);
  padding:.32em .6em;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s ease,transform .35s ease;
}
.slot:hover .slot-count,.slot:focus-visible .slot-count{opacity:1;transform:none;}

/* ---- gallery ---- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-top:clamp(2.6rem,6vh,4rem);
}
.gallery figure{margin:0;}
.gallery .slot{aspect-ratio:4/5;}
.series-cap{
  margin-top:.85rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:.6rem;
}
.series-cap .t{
  font-family:var(--display);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
}
.series-cap .n{
  font-family:var(--display);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---- 2030 statement ---- */
.statement{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem,4.4vw,3.2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  max-width:20ch;
  text-wrap:balance;
}
.statement .big{
  display:block;
  font-size:clamp(4rem,18vw,12rem);
  line-height:.85;
  letter-spacing:-.04em;
  margin-bottom:.18em;
}

/* ---- footer ---- */
footer{
  border-top:2px solid var(--ink);
  padding-top:clamp(3rem,7vh,5rem);
  padding-bottom:clamp(3rem,7vh,5rem);
  background:var(--paper);
}
.foot-mark{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.4rem,9vw,6rem);
  line-height:.9;
  letter-spacing:-.035em;
}
.foot-sub{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(.95rem,1.8vw,1.2rem);
  letter-spacing:.04em;
  margin-top:.8rem;
}
.foot-grid{
  margin-top:clamp(2.4rem,6vh,4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem 3rem;
  border-top:1px solid var(--line);
  padding-top:2rem;
}
.foot-grid .lbl{
  font-family:var(--display);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.6rem;
}
.foot-grid a,.foot-grid .val{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
  text-decoration:none;
}
.foot-grid a{border-bottom:1px solid var(--line);padding-bottom:.1em;}
.foot-grid a:hover{border-color:var(--ink);}
.foot-credit{
  margin-top:clamp(2.4rem,6vh,4rem);
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.foot-credit-text{
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--muted);
}
.masart-logo{
  flex:0 0 auto;
  display:inline-flex;
  line-height:0;
  transition:opacity .2s ease;
}
.masart-logo:hover{opacity:.7;}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============ LIGHTBOX (full collection) ============ */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(255,255,255,.985);
  display:none;
  flex-direction:column;
  padding:clamp(1.2rem,4vw,2.6rem) clamp(1.2rem,5vw,4rem);
}
.lightbox.open{display:flex;}
.lx-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
}
.lx-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.4rem,4vw,2.6rem);
  letter-spacing:-.02em;
  line-height:1;
}
.lx-title .lx-eyebrow{
  display:block;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5em;
}
.lx-close{
  font-family:var(--display);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:.6em;
  padding:.4em 0;
}
.lx-close:hover{opacity:.6;}

.lx-stage{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.6rem,2vw,1.6rem);
  padding:clamp(1rem,3vh,2rem) 0;
}
.lx-stage img{
  max-width:100%;
  max-height:62vh;
  filter:grayscale(1) contrast(1.02);
  box-shadow:0 1px 0 var(--line),0 24px 60px rgba(13,13,13,.14);
}
.lx-nav{
  flex:0 0 auto;
  width:clamp(2.6rem,5vw,3.4rem);
  height:clamp(2.6rem,5vw,3.4rem);
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,color .25s ease;
}
.lx-nav:hover{background:var(--ink);color:var(--paper);}

.lx-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--display);
  margin-top:.4rem;
}
.lx-cap{font-weight:600;font-size:.9rem;letter-spacing:.02em;}
.lx-count{font-weight:600;font-size:.72rem;letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums;}

.lx-strip{
  display:flex;
  gap:.6rem;
  overflow-x:auto;
  padding:1rem 0 .3rem;
  border-top:1px solid var(--line);
  margin-top:.6rem;
  scrollbar-width:thin;
}
.lx-thumb{
  flex:0 0 auto;
  width:clamp(58px,9vw,84px);
  aspect-ratio:1/1;
  padding:0;border:0;
  background:#f1f0ee;
  cursor:pointer;
  overflow:hidden;
  opacity:.55;
  transition:opacity .25s ease;
  outline-offset:2px;
}
.lx-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.lx-thumb:hover{opacity:.85;}
.lx-thumb.active{opacity:1;box-shadow:inset 0 0 0 2px var(--ink);}

/* ---- mobile ---- */
@media (max-width:860px){
  .grid-2{grid-template-columns:1fr;gap:2.2rem;}
  .sticky-head{position:static;}
  .col-7,.col-5,.col-6,.col-4,.col-8{grid-column:span 12;}
  .ort-grid{gap:1.4rem;}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.4rem;}
  .scroll-cue{display:none;}
  .lx-stage img{max-height:50vh;}
  .zaun-cta{flex-direction:column;align-items:flex-start;}
  .zaun-cta .plaque{width:100%;}
}