/* Жодних вебшрифтів. Ті самі стеки, що на живих сайтах:
   A2 → "KTF Prima","Helvetica Neue",Arial   |   EPRIS → "Iowan Old Style", serif */
:root{
  --paper:#FFFFFF;
  --ink:#121212;
  --secondary:#999999;
  --soft:rgba(18,18,18,.72);
  --hair:#E6E4E0;
  --rule:#121212;
  --tint:#F2F1EF;
  --pill:#121212;
  --pill-ink:#FFFFFF;
  --edge:16px;            /* крайні лінії сітки, у пікселях */
  --gutter:20px;          /* відбивка тексту від лінії */
  --L2:19.5%; --L3:51.5%; /* внутрішні лінії, у відсотках сцени */
  --ease:cubic-bezier(.2,0,0,1);
  /* кегль: один ряд 11 / 13 / 15 / 19 / 24 / 30 / display */
  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:19px; --t-xl:24px; --t-2xl:30px;
  --t-display:clamp(34px,4.6vw,62px);
  /* відступи: 4 8 12 16 24 32 48 72 96 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:96px;
  /* футер один в один із eprisjournal.com: знято з живого сайту */
  --foot-bg:#180D13; --foot-ink:#F7F2EC; --foot-mute:#D9C7BA;
  --foot-dim:#BFAFA4; --foot-rule:rgba(209,181,149,.45);
  --sans:"KTF Prima","Helvetica Neue","Helvetica",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
/* Тема одна: світла. Сторінка не йде за системною темною. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-md);line-height:1.45;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ── сцена A2 ─────────────────────────────────────────── */
.stage{position:relative;max-width:1440px;margin:0 auto}
.lines{position:absolute;inset:0;pointer-events:none;z-index:0}
.lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--hair)}
.lines i:nth-child(1){left:var(--edge)}
.lines i:nth-child(2){left:var(--L2)}
.lines i:nth-child(3){left:var(--L3)}
.lines i:nth-child(4){left:auto;right:var(--edge)}
.row{position:relative;z-index:1;display:grid;
  grid-template-columns:var(--L2) calc(var(--L3) - var(--L2)) 1fr}
.inA{padding:0 14px 0 calc(var(--edge) + var(--gutter))}
.inB{padding:0 14px 0 var(--gutter)}
.inC{padding:0 calc(var(--edge) + var(--gutter)) 0 var(--gutter)}

.micro{font-size:var(--t-xs);line-height:1.5}
.label{font-size:var(--t-xs);letter-spacing:.02em;color:var(--secondary)}
.serif{font-family:var(--serif)}

/* ── шапка ───────────────────────────────────────────── */
.header{padding:var(--s5) 0 var(--s5);align-items:baseline}
.wordmark{display:inline-block;font-family:var(--serif);font-size:var(--t-xl);
  letter-spacing:.3em;margin-right:-.3em;line-height:1}
.brandstack .est{color:var(--secondary)}

/* ── перший екран ────────────────────────────────────── */
.fold{padding:var(--s9) 0 var(--s9)}
.hero-title{
  margin:0;font-family:var(--sans);font-weight:400;
  font-size:var(--t-display);
  line-height:1.04;letter-spacing:-.026em;text-wrap:balance;
}
.hero-lead{margin:var(--s5) 0 0;max-width:46ch;font-size:var(--t-lg);line-height:1.38;letter-spacing:-.012em}
.hero-cta{margin-top:var(--s6);display:flex;gap:var(--s2);flex-wrap:wrap}
.pill{display:inline-block;background:var(--pill);color:var(--pill-ink);border-radius:40px;
  padding:var(--s2) var(--s4);font-size:var(--t-sm);transition:opacity .18s var(--ease)}
.pill:hover{opacity:.82}
.pill-ghost{background:none;color:var(--ink);border:1px solid var(--hair)}

.band{position:relative;width:100%;height:clamp(230px,36vw,420px);background:var(--tint);overflow:hidden}
.band canvas{display:block;width:100%;height:100%;filter:grayscale(1)}
.band-cap{position:absolute;left:calc(var(--edge) + var(--gutter));bottom:var(--s4);color:#fff;mix-blend-mode:difference}

/* ── заголовок розділу ──────────────────────────────── */
.sec{padding:var(--s8) 0 0}
.sec-title{margin:0;font-family:var(--serif);font-weight:400;
  font-size:var(--t-xl);line-height:1.12;letter-spacing:.005em}
.sec-rule{grid-column:1 / -1;height:1px;background:var(--rule);margin-top:var(--s4)}
.sec-count{color:var(--secondary);font-size:var(--t-xs);text-align:right;
  padding-right:calc(var(--edge) + var(--gutter));align-self:end}
.sec-note{color:var(--secondary);font-size:var(--t-sm);align-self:end}

/* ── зали ───────────────────────────────────────────── */
.hall{border-bottom:1px solid var(--hair)}
.hall-row{width:100%;text-align:left;padding:var(--s6) 0;align-items:baseline}
.hall-row .n{font-size:var(--t-xl);line-height:1;letter-spacing:-.02em;color:var(--secondary);
  font-variant-numeric:tabular-nums}
.hall-name{font-size:var(--t-2xl);line-height:1.06;letter-spacing:-.025em;
  transition:color .18s var(--ease)}
.hall-row:hover .hall-name{color:var(--secondary)}
/* розкритий зал має бути помітнішим, а не блідішим */
.hall[data-open="true"]{background:var(--tint)}
.hall[data-open="true"] .hall-row .n{color:var(--ink)}
.hall-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  color:var(--secondary);font-size:var(--t-sm)}
.lock{border:1px solid var(--hair);border-radius:40px;padding:var(--s1) var(--s3);
  font-size:var(--t-xs);letter-spacing:.04em;color:var(--secondary);white-space:nowrap}

.hall-body{display:none;padding:var(--s2) 0 var(--s7)}
.hall[data-open="true"] .hall-body{display:grid}
.hall-body>div{min-width:0}
.hall-lead{margin:0;font-family:var(--serif);font-size:var(--t-lg);line-height:1.45}
.hall-text{margin:0;color:var(--soft);font-size:var(--t-md);line-height:1.55;max-width:54ch}
.hall-facts{display:grid;gap:var(--s2);font-size:var(--t-xs);color:var(--secondary);
  font-variant-numeric:tabular-nums;line-height:1.5;
  padding-top:var(--s2);border-top:1px solid var(--hair)}
.hall-facts b{font-weight:400;color:var(--ink);float:right;margin-left:var(--s3)}

/* ── план і об'єм ───────────────────────────────────── */
.wide{grid-column:1 / -1;padding:0 calc(var(--edge) + var(--gutter))}
.plan-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:var(--s5);
  border:1px solid var(--hair);background:var(--paper)}
.plan-svg{display:block;width:100%;height:auto}
.plan-wide{min-width:820px}
.plan-narrow{display:none}
.plan-svg text{font-family:var(--sans);fill:var(--ink)}
.plan-svg .poche{fill:var(--ink)}                 /* стіни залиті, як на кресленні */
.plan-svg .p-fill{fill:var(--paper);transition:fill .16s var(--ease)}
.plan-svg .p-swing{stroke:var(--secondary);stroke-width:1}
.plan-svg .p-arrow{stroke:var(--secondary);stroke-width:1.2;fill:none}
.plan-svg .p-arrow-head{fill:var(--secondary)}
.plan-svg .p-num{font-size:12px;fill:var(--secondary)}
.plan-svg .p-name{font-size:17px;letter-spacing:-.02em}
.plan-svg .p-lbl{font-size:11px;fill:var(--secondary)}
.plan-svg .p-tier{font-size:11px;fill:var(--secondary);letter-spacing:.18em;text-transform:uppercase}
.plan-svg .p-col{fill:var(--ink)}
.plan-svg .p-dim{stroke:var(--secondary);stroke-width:1}
.plan-svg .p-here{font-size:10px;fill:var(--ink);letter-spacing:.16em;text-transform:uppercase}
.plan-svg .p-room:hover .p-fill{fill:var(--tint)}
.plan-svg .p-room:focus-visible .p-fill{fill:var(--tint)}
.plan-svg .is-here .p-fill{fill:var(--tint)}
.after-note{margin-top:var(--s3);color:var(--secondary);font-size:var(--t-sm)}

/* ── програма ───────────────────────────────────────── */
.prog-item{padding:var(--s5) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.prog-item .date{font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.prog-t{font-size:var(--t-xl);line-height:1.16;letter-spacing:-.02em}
.prog-where{display:block;margin-top:var(--s1);color:var(--secondary);font-size:var(--t-sm)}
.prog-st{text-align:right;color:var(--secondary);font-size:var(--t-sm)}

/* ── візит, підвал ──────────────────────────────────── */
.visit{padding:var(--s7) 0 var(--s7)}
.end{padding-bottom:var(--s9)}
.end-rule{height:1px;background:var(--hair)}
.visit .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.visit h3{margin:0 0 var(--s3);font-size:var(--t-sm);font-weight:400;color:var(--secondary)}
.visit p{margin:0 0 var(--s1);font-size:var(--t-md)}

@media (max-width:900px){
  /* та сама шкала, лише зсунута: жодних разових розмірів нижче */
  :root{
    --t-lg:18px; --t-xl:21px; --t-2xl:26px;
    --t-display:clamp(30px,8.6vw,44px);
    --s7:32px; --s8:40px; --s9:48px;
  }
  .row{grid-template-columns:minmax(0,1fr)}
  .inA,.inB,.inC,.wide{padding:0 var(--s5)}

  .header{padding:var(--s4) 0;border-bottom:1px solid var(--hair);align-items:start}
  .wordmark{font-size:var(--t-lg)}
  .header .inB{margin-top:var(--s3)}

  .fold{padding:var(--s7) 0 var(--s8)}
  .fold .inA{margin-bottom:var(--s3)}
  .hero-lead{max-width:none}
  .hero-cta{margin-top:var(--s5)}
  .pill{padding:var(--s3) 18px}

  .band{height:clamp(170px,52vw,240px)}
  .band-cap{left:var(--s5)}

  .sec{padding:var(--s7) 0 0}
  .sec-note{margin-top:var(--s1)}
  .sec-count{text-align:left;padding:0 var(--s5);margin-top:var(--s2)}

  /* вертикальні лінії сітки на телефоні тільки заважають */
  .lines{display:none}
  .plan-scroll{overflow-x:visible}
  .plan-wide{display:none}
  .plan-narrow{display:block}
  .plan-narrow .p-name{font-size:20px}
  .plan-narrow .p-num,.plan-narrow .p-lbl,.plan-narrow .p-tier,.plan-narrow .p-here{font-size:13px}

  .hall-row{padding:var(--s4) var(--s5);display:block}
  .hall-row .n{font-size:var(--t-md);letter-spacing:0;color:var(--secondary);
    display:block;line-height:1.2}
  .hall-name{display:block;margin-top:var(--s1)}
  .hall-meta{justify-content:flex-start;gap:var(--s3);margin-top:var(--s2)}
  .hall-body{grid-template-columns:minmax(0,1fr);padding:0 0 var(--s5)}
  .hall-body .inB{order:1}
  .hall-body .inC{order:2}
  .hall-body .inA{order:3}
  .hall-text{margin-top:var(--s3)}
  .hall-facts{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair)}

  .prog-item{padding:var(--s4) var(--s5);display:block}
  .prog-t{display:block;margin-top:var(--s1)}
  .prog-st{text-align:left;margin-top:var(--s2)}

  .visit{padding:var(--s5) 0 var(--s7)}
  .visit .inB{margin-bottom:var(--s5)}
  .visit .cols{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:420px){
  .inA,.inB,.inC,.wide,  .hall-row,.prog-item{padding-left:16px;padding-right:16px}
  .band-cap{left:var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── галерея залу ─────────────────────────────────────── */
.hall-hero{padding:var(--s8) 0 var(--s7)}
.hall-hero .num{color:var(--secondary);font-size:var(--t-sm)}
.hall-hero h1{margin:0;font-size:var(--t-display);line-height:1.04;
  letter-spacing:-.026em;font-weight:400;text-wrap:balance}
.hall-hero .pair{margin:var(--s3) 0 0;color:var(--secondary);font-size:var(--t-sm)}
.hall-hero .blurb{margin:var(--s5) 0 0;max-width:46ch;font-size:var(--t-lg);
  line-height:1.38;letter-spacing:-.012em}

.gallery{display:grid;gap:var(--s8) var(--s6);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  padding:var(--s7) calc(var(--edge) + var(--gutter))}
figure.work{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
/* спільна лінія підвісу: полотна різного формату висять у боксі одної висоти,
   тому підписи вирівнюються між собою, як етикетки на стіні */
figure.work a.plate{position:relative;display:block;aspect-ratio:4/3;
  background:var(--tint);overflow:hidden}
figure.work img{position:absolute;inset:var(--s4);width:calc(100% - 2*var(--s4));
  height:calc(100% - 2*var(--s4));object-fit:contain;object-position:center bottom}
figure.work figcaption{font-size:var(--t-sm);line-height:1.45}
.w-artist{font-family:var(--serif);font-size:var(--t-lg);line-height:1.2;display:block}
.w-title{display:block;margin-top:var(--s1);color:var(--soft)}
.w-title i{font-style:italic}
.w-meta{display:block;margin-top:var(--s2);color:var(--secondary);font-size:var(--t-xs);line-height:1.6}
.w-meta a{border-bottom:1px solid var(--hair)}
.w-meta a:hover{border-color:var(--ink);color:var(--ink)}

.credit{padding:var(--s7) calc(var(--edge) + var(--gutter)) var(--s9);
  border-top:1px solid var(--hair);color:var(--secondary);font-size:var(--t-sm);max-width:78ch}
.credit a{border-bottom:1px solid var(--hair)}

.backlink{display:inline-block;margin-top:var(--s5);font-size:var(--t-sm);
  border-bottom:1px solid var(--hair)}
.backlink:hover{border-color:var(--ink)}

@media (max-width:900px){
  .hall-hero{padding:var(--s7) 0 var(--s6)}
  .gallery{padding:var(--s6) var(--s5);gap:var(--s7) var(--s5);
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .credit{padding:var(--s6) var(--s5) var(--s8)}
  figure.work a.plate{aspect-ratio:1/1}
  figure.work img{inset:var(--s3);width:calc(100% - 2*var(--s3));height:calc(100% - 2*var(--s3))}
}

/* ── футер журналу ────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--foot-rule);
  background:var(--foot-bg);color:var(--foot-ink);
  padding:96px 64px;
}
.site-foot .in{
  max-width:1600px;margin:0 auto;display:flex;
  justify-content:space-between;align-items:flex-end;gap:48px;
}
.site-foot h2{
  margin:0 0 32px;font-family:var(--serif);font-weight:400;
  font-size:60px;line-height:1;letter-spacing:.08px;color:var(--foot-ink);
}
.site-foot .lines-of{max-width:20rem}
.site-foot p{
  margin:0;font-family:var(--serif);font-size:12px;line-height:1.62;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--foot-mute);
}
.site-foot .right{text-align:right}
.site-foot .right p{color:var(--foot-dim)}
.site-foot a{border-bottom:1px solid rgba(209,181,149,.35)}
.site-foot a:hover{border-color:var(--foot-ink);color:var(--foot-ink)}

@media (max-width:900px){
  .site-foot{padding:48px 32px}
  .site-foot .in{flex-direction:column;align-items:center;text-align:center;gap:48px}
  .site-foot h2{font-size:36px;margin-bottom:24px}
  .site-foot .right{text-align:center}
  .site-foot .lines-of{margin:0 auto}
}
@media (max-width:560px){
  .site-foot{padding:32px 16px}
  .site-foot h2{font-size:30px}
}

/* ── ключова робота залу ──────────────────────────────── */
.keywork{padding:var(--s7) calc(var(--edge) + var(--gutter)) 0;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s6);align-items:end}
.keywork .plate{position:relative;display:block;background:var(--tint);overflow:hidden;aspect-ratio:3/2}
.keywork img{position:absolute;inset:var(--s5);width:calc(100% - 2*var(--s5));
  height:calc(100% - 2*var(--s5));object-fit:contain;object-position:center bottom}
.keywork .label{padding-bottom:var(--s2)}
.keywork .eyebrow{display:block;margin-bottom:var(--s3)}
.keywork .w-artist{font-size:var(--t-xl)}
.keywork .w-title{font-size:var(--t-lg);font-family:var(--serif)}
.keywork .w-meta{margin-top:var(--s3)}

/* ── дані залу ────────────────────────────────────────── */
.hall-stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s5) 0 0;
  padding-top:var(--s4);border-top:1px solid var(--hair);
  font-size:var(--t-xs);color:var(--secondary);font-variant-numeric:tabular-nums}
.hall-stats b{font-weight:400;color:var(--ink)}

/* ── перехід у сусідній зал ───────────────────────────── */
.hall-nav{display:flex;justify-content:space-between;gap:var(--s5);
  padding:var(--s7) calc(var(--edge) + var(--gutter)) var(--s8);
  border-top:1px solid var(--hair)}
.hall-nav a{max-width:22rem}
.hall-nav .dir{display:block;font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--secondary);margin-bottom:var(--s2)}
.hall-nav .nm{font-size:var(--t-xl);letter-spacing:-.02em;line-height:1.15}
.hall-nav a:hover .nm{color:var(--secondary)}
.hall-nav .to-next{text-align:right;margin-left:auto}

/* ── лайтбокс ─────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;
  grid-template-rows:1fr auto}
.lb[data-open="true"]{display:grid}
.lb-stage{position:relative;overflow:hidden;padding:var(--s6) var(--s6) 0}
.lb-stage img{position:absolute;inset:var(--s6);width:calc(100% - 2*var(--s6));
  height:calc(100% - 2*var(--s6));object-fit:contain;object-position:center}
.lb-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);
  align-items:end;padding:var(--s5) var(--s6) var(--s6);border-top:1px solid var(--hair)}
.lb-bar .w-artist{font-size:var(--t-xl)}
.lb-controls{display:flex;align-items:center;gap:var(--s4);
  font-size:var(--t-sm);color:var(--secondary)}
.lb-controls button{padding:var(--s2) var(--s3);border:1px solid var(--hair);border-radius:40px;
  min-width:44px;min-height:44px}
.lb-controls button:hover{border-color:var(--ink);color:var(--ink)}
.lb-count{font-variant-numeric:tabular-nums}
body.lb-open{overflow:hidden}

@media (max-width:900px){
  .keywork{grid-template-columns:minmax(0,1fr);padding:var(--s6) var(--s5) 0;gap:var(--s5)}
  .keywork .plate{aspect-ratio:4/3}
  .keywork img{inset:var(--s4);width:calc(100% - 2*var(--s4));height:calc(100% - 2*var(--s4))}
  .hall-nav{flex-direction:column;padding:var(--s6) var(--s5) var(--s7)}
  .hall-nav .to-next{text-align:left;margin-left:0}
  .lb-stage{padding:var(--s4) var(--s4) 0}
  .lb-stage img{inset:var(--s4);width:calc(100% - 2*var(--s4));height:calc(100% - 2*var(--s4))}
  .lb-bar{grid-template-columns:minmax(0,1fr);padding:var(--s4)}
}