/* Galería Artemio · artemio.ar · версия 3 (2026-11-11)
   «Наш стиль» + доска «Стиль плакатов галереи»: каждый лист — плакат.
   Бумага + одна краска; работа огромная и уходит за край; крупный шрифт живёт вместе с ней
   (слоги столбиком, огромные цифры); мелкая информация — строго по сетке.
   Краски с ролями: синий — искусство (выставка, магазин), красный — голос галереи, зелёный — Kiki.
   Лист мастер-класса берёт бумагу и краску своей афиши. Golos Text. */

:root{
  --blue:#2D4FD1; --red:#F22B1D; --lime:#C7F000; --green:#809B46; --black:#141414;
  --shop-bg:#EEECE7;
  --m:clamp(22px,6.4vw,96px);
  --gap:clamp(26px,3.8vw,56px);
  --fs:clamp(17px,.4vw + 15.4px,20px);
  --fs-s:clamp(14px,.2vw + 13.2px,16px);
  --fs-lead:clamp(22px,1.4vw + 16.5px,34px);
  --fs-h1:clamp(40px,10.6vw,66px);
  --fs-h2:clamp(44px,12vw,120px);
  --fs-giant:clamp(72px,23vw,250px);
  color-scheme:light;
}
@media (min-width:960px){
  :root{--fs-h1:clamp(60px,5.4vw,92px);--fs-h2:clamp(72px,7vw,120px);--fs-giant:clamp(150px,14vw,250px)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--blue)}
body{margin:0;font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:500;font-size:var(--fs);
  line-height:1.42;color:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p,dl,dd,figure,ol,ul,fieldset{margin:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:.2em}
[hidden]{display:none!important}

/* лист = плакат: бумага + одна краска */
.sheet{--paper:#fff;--ink:var(--blue);--soft:rgba(45,79,209,.1);
  position:relative;background:var(--paper);color:var(--ink);padding:var(--m);overflow:hidden;overflow:clip}
.sheet--blue{--paper:var(--blue);--ink:#fff;--soft:rgba(255,255,255,.18)}
.sheet--white{--paper:#fff;--ink:var(--blue);--soft:rgba(45,79,209,.1)}
.sheet--lime{--paper:var(--lime);--ink:var(--black);--soft:rgba(20,20,20,.09)}
.sheet--poster{--soft:rgba(93,20,49,.1)}
.sheet--red{--paper:var(--red);--ink:#fff;--soft:rgba(255,255,255,.2)}
.sheet--green{--paper:var(--green);--ink:#fff;--soft:rgba(255,255,255,.2)}
.sheet--white-red{--paper:#fff;--ink:var(--red);--soft:rgba(242,43,29,.1)}
.sheet>:not(picture){position:relative;z-index:1;max-width:1240px;margin-left:auto;margin-right:auto}
.sheet ::selection{background:var(--ink);color:var(--paper)}

/* верхняя строка: название, статус, языки */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;font-size:var(--fs-s);font-weight:500;line-height:1.25}
.sheet:not(.cover)>.top{margin-bottom:calc(var(--gap)*1.5)}
.brand{font-weight:600;text-decoration:none}
.cover .top{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:.45em}
.top-l{display:contents}
.cover .top .status{grid-column:1/-1;grid-row:2}

/* статус «открыто сейчас» (время Аргентины, считает site.js) */
.status{display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-s);font-weight:500;line-height:1.25}
.status i{width:.62em;height:.62em;border-radius:50%;background:currentColor;flex:none}
.status.is-closed i,.status.is-soon i{background:transparent;box-shadow:inset 0 0 0 1.6px currentColor}
.status.is-open i{animation:pulse 2.4s ease-in-out infinite}
.status .st-s{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* языки */
.lang{display:flex;gap:.15em;font-weight:600;font-size:var(--fs-s)}
.lang a{text-decoration:none;padding:.3em .5em .34em;border-radius:.3em;opacity:.72;transition:opacity .2s,background-color .2s}
.lang a:hover{opacity:1}
.lang a[aria-current]{opacity:1;background:var(--soft)}

/* полоса сверху при прокрутке: берёт бумагу и краску листа под ней */
.bar{--paper:var(--blue);--ink:#fff;--soft:rgba(255,255,255,.18);position:fixed;z-index:40;top:0;left:0;right:0;
  display:flex;align-items:center;gap:1em;padding:8px var(--m);padding-top:max(8px,env(safe-area-inset-top));
  background:var(--paper);color:var(--ink);font-size:var(--fs-s);transform:translateY(-105%);
  transition:transform .35s ease,background-color .35s ease,color .35s ease}
.bar.is-on{transform:none}
.bar .status{margin-left:auto}
html:not(.js) .bar{display:none}
@media (max-width:620px){.bar .status .st-l{display:none}.bar .status .st-s{display:inline}}

/* заголовки и текст */
h1,h2{font-weight:600;letter-spacing:-.03em;line-height:1;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
.lead{font-size:var(--fs-lead);font-weight:600;line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
p{max-width:36em;text-wrap:pretty}
.label{display:inline-block;font-size:var(--fs-s);font-weight:600;background:var(--soft);padding:.16em .5em .2em;border-radius:.26em}

/* строки «подпись — значение», как на листовке */
.rows{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:.75em;row-gap:.34em;line-height:1.3}
.rows>div{display:contents}
.rows dt{font-weight:600;background:var(--soft);padding:.12em .46em .16em;border-radius:.26em;align-self:start}
.rows dd{padding:.12em 0 .16em;align-self:start;min-width:0}
.rows a,.more a{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em}
.rows a:hover,.more a:hover{text-decoration-thickness:.13em}

/* кнопки: краска листа, текст цветом бумаги */
.btns{display:flex;flex-wrap:wrap;gap:.6em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3em;padding:.72em 1.2em .78em;border-radius:.34em;border:0;
  background:var(--ink);color:var(--paper);font-weight:600;font-size:var(--fs);text-decoration:none;line-height:1.1;transition:opacity .2s,transform .15s}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn--soft{background:var(--soft);color:var(--ink)}

/* 1. обложка (синий): работа 637 вырастает из точки и уходит за края */
.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.cover .top{z-index:2}
.cover-art{position:relative;z-index:0;width:150vw;max-width:none;margin:2vw 0 0 calc(-25vw - var(--m))}
.cover-art img{width:100%;transform-origin:50% 50%}
.js .cover-art img{animation:grow 1.9s cubic-bezier(.16,.84,.22,1) .1s both}
@keyframes grow{0%{transform:scale(.012)}100%{transform:none}}
.cover-text{margin-top:auto;padding-top:var(--gap)}
.cover h1{margin-bottom:.5em;max-width:12ch}
@media (min-width:960px){
  .cover{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;min-height:100vh}
  .cover .top{grid-column:1/-1;width:100%;max-width:none}
  .cover .lang{background:var(--paper);border-radius:.45em;padding:.15em}
  .cover-art{position:absolute;right:-17vw;top:50%;width:min(66vw,118vh);margin:0;transform:translateY(-50%)}
  .cover-text{grid-column:1/7;align-self:end;padding-top:0;margin:0}
}

/* 2. выставка (белый + синий): название слогами, работа 425 синим за краем, философия */
.ex-poster{display:grid;grid-template-rows:auto 1fr;min-height:min(140vw,1000px)}
.syll{font-size:var(--fs-giant);font-weight:600;line-height:.84;letter-spacing:-.055em;margin-left:-.04em;text-wrap:nowrap}
.syll span{display:block}
.ex-art{position:absolute;z-index:0;top:calc(var(--m) + 4vw);right:-18vw;width:98vw;max-width:none}
.ex-sign{align-self:end;margin-top:var(--gap)}
.ex .sub{font-size:var(--fs-lead);font-weight:500;line-height:1.2;margin-bottom:.15em}
.ex-artist{font-size:var(--fs-lead);font-weight:600;line-height:1.15}
.ex-dates{font-size:clamp(40px,12vw,120px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:.12em;white-space:nowrap}
.ex-head{display:grid;gap:1em;margin-top:calc(var(--gap)*1.6)}
.ex-text>*+*{margin-top:1em}
.ex-text .rows{margin-top:1.6em}
.label-row{margin-top:calc(var(--gap)*2.2);margin-bottom:var(--gap)}
@media (min-width:960px){
  .ex-poster{grid-template-columns:repeat(12,minmax(0,1fr));min-height:86vh}
  .syll,.ex-sign{grid-column:1/8}
  .ex-art{top:2vw;right:-6vw;width:min(58vw,1000px)}
  .ex-head{grid-template-columns:5fr 7fr;column-gap:var(--gap)}
}

/* философия: одна большая мысль и короткий текст */
.ph .label-row{margin-bottom:calc(var(--gap)*.8)}
.ph-quote{font-size:clamp(36px,9.4vw,104px);font-weight:600;line-height:1;letter-spacing:-.04em;max-width:12em;text-wrap:balance}
.ph-text{margin-top:calc(var(--gap)*1.1)}
.ph-text>p+p{margin-top:1em}
.ph-note{font-weight:600}
@media (min-width:960px){ .ph-text{width:58.333%;margin-left:auto} }

.cta{margin-top:calc(var(--gap)*2.2);display:grid;gap:1em}
.cta p{font-size:var(--fs-lead);font-weight:600;line-height:1.16;letter-spacing:-.012em;max-width:20em}
@media (min-width:960px){ .cta{grid-template-columns:5fr 7fr;column-gap:var(--gap);align-items:center} }

/* 3. магазин (синий): белые холсты на синей стене */
.sh-head{display:grid;gap:var(--gap)}
.sh-intro{display:grid;gap:1.1em;align-content:start}
.sh-intro .rows{font-size:var(--fs-lead);font-weight:600;letter-spacing:-.01em;row-gap:.25em}
.sh-intro .rows dt{font-size:var(--fs);letter-spacing:0;align-self:center}
.sh-ship{font-size:var(--fs-s)}
.sh-grid{list-style:none;padding:0;margin-top:calc(var(--gap)*1.6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--gap)*1.1) calc(var(--gap)*.6)}
.sh-grid>li:first-child{grid-column:1/-1}
.card{display:grid;text-decoration:none;color:inherit;line-height:1.3}
.card-img{display:block;background:#fff;box-shadow:0 16px 34px -14px rgba(6,14,60,.6);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.card:hover .card-img{transform:translateY(-5px);box-shadow:0 26px 44px -16px rgba(6,14,60,.65)}
.card-img img{width:100%;aspect-ratio:1}
.card-t{margin-top:.7em;font-weight:600}
.card-s,.card-p{font-size:var(--fs-s);opacity:.86;margin-top:.1em}
.sh-var-head{margin-top:calc(var(--gap)*2.4);display:grid;gap:.6em}
.sh-var-head h3{font-size:var(--fs-lead);font-weight:600;line-height:1.15;letter-spacing:-.012em}
.sh-grid--var{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--gap)*.7) calc(var(--gap)*.35);margin-top:var(--gap)}
.sh-grid--var>li:first-child{grid-column:auto}
.sh-grid--var .card-img{box-shadow:0 10px 20px -10px rgba(6,14,60,.6)}
.sh-grid--var .card-t{font-size:var(--fs-s);font-weight:500;margin-top:.5em}
@media (min-width:960px){
  .sh-head{grid-template-columns:7fr 5fr;column-gap:var(--gap);align-items:end}
  .sh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sh-grid>li:first-child{grid-column:auto}
  .sh-grid--var{grid-template-columns:repeat(8,minmax(0,1fr))}
  .sh-var-head{grid-template-columns:7fr 5fr;column-gap:var(--gap);align-items:end}
}

/* 4. мастер-класс: лист в цветах своей афиши */
.event{display:grid;gap:calc(var(--gap)*.9)}
.ev-poster img{width:100%;height:auto}
.ev-when{font-size:var(--fs-s);font-weight:600}
.ev-body>*+*{margin-top:1em}
.ev-body h2{margin-top:.25em}
.ev-body .sub{font-size:var(--fs-lead);font-weight:500;margin-top:.3em}
.ev-body .rows{margin-top:1.6em}
.ev-body .note{font-weight:600}
.ev-body .btns{margin-top:1.4em}
.events-empty{margin-bottom:.4em}
.more{margin-top:calc(var(--gap)*1.4);font-weight:600}
@media (min-width:960px){ .event{grid-template-columns:6fr 6fr;column-gap:calc(var(--gap)*1.2);align-items:center} }

/* 5. галерея (красный): «Arte + mío» огромно, работа 721 белым уходит за край */
.ga-body{display:grid;gap:var(--gap)}
.ga h2{font-size:var(--fs-giant);line-height:.86;letter-spacing:-.05em}
.ga .text>p+p{margin-top:1em}
.ga .text>p:first-child{font-size:var(--fs-lead);font-weight:600;line-height:1.18;letter-spacing:-.012em}
.ga-art{width:118vw;max-width:none;margin:calc(var(--gap)*1.2) 0 calc(-1*var(--m) - 30vw) calc(-1*var(--m) + 2vw)}
@media (min-width:960px){
  .ga{min-height:100vh}
  .ga-body{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ga h2{grid-column:1/-1}
  .ga .text{grid-column:1/7}
  .ga-art{position:absolute;z-index:0;right:-9vw;bottom:-16vw;width:min(54vw,900px);margin:0}
}

/* 6. Kiki (зелёный): наши фото доской, как на Pinterest */
.kiki-logo{height:2.4em;width:auto}
.ki-body{display:grid;gap:calc(var(--gap)*1.2)}
.ki h2{margin-bottom:.55em}
.ki-grid{columns:2;column-gap:10px}
.ki-grid figure{break-inside:avoid;margin:0 0 10px}
.ki-grid img{width:100%;height:auto}
@media (min-width:960px){
  .ki-body{grid-template-columns:4fr 8fr;column-gap:var(--gap);align-items:start}
  .ki-text{position:sticky;top:84px}
  .ki-grid{columns:3;column-gap:14px}
  .ki-grid figure{margin-bottom:14px}
}

/* 7. как прийти (белый + красный) */
.vi-title{font-size:clamp(48px,16vw,220px);line-height:.86;letter-spacing:-.05em;margin-bottom:calc(var(--gap)*.9)}
.vi-body{display:grid;gap:1.2em;align-items:start}
.vi-body .btns{margin-top:.4em}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1em;margin-top:calc(var(--gap)*2.2);font-size:var(--fs-s)}
.foot .lang a:first-child{margin-left:-.5em}
@media (min-width:960px){
  .vi-body{grid-template-columns:5fr 7fr;column-gap:var(--gap)}
  .vi-body .status{grid-column:1;grid-row:1}
  .vi-body .rows{grid-column:2;grid-row:1/3}
  .vi-body .btns{grid-column:1;grid-row:2;align-self:end}
}

/* карточка работы: фото товара, холст, деталь, три интерьера; размер, цена, заявка */
.pd{--paper:#fff;--ink:var(--blue);--soft:rgba(45,79,209,.1);--size:120;position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pd-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1em;
  padding:max(10px,env(safe-area-inset-top)) var(--m) 10px;background:var(--paper)}
.pd-back{background:none;border:0;padding:.45em 0;font-weight:600;font-size:var(--fs)}
.pd-nav{display:flex;align-items:center;gap:.4em}
.pd-nav .btn{min-height:2.5em;padding:.4em .95em}
.pd-n{font-size:var(--fs-s);font-weight:600;min-width:4.2em;text-align:center}
.pd-body{display:grid;gap:var(--gap);max-width:1240px;margin:0 auto;padding:0 var(--m) calc(var(--m) + env(safe-area-inset-bottom))}
.pd-media{min-width:0}
.pd-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--m));background:var(--shop-bg)}
.pd-slides::-webkit-scrollbar{display:none}
.pd-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:1;position:relative;overflow:hidden;background:var(--shop-bg)}
.pd-slide>img{width:100%;height:100%;object-fit:cover}
.pk{width:100%;height:100%;display:grid;place-items:center}
.pk img{width:76%;aspect-ratio:1;box-shadow:0 2px 4px rgba(0,0,0,.06),0 26px 50px -22px rgba(0,0,0,.45)}
.room{width:100%;height:100%;position:relative;overflow:hidden;container-type:size}
.room-in{position:absolute;top:0;left:50%;height:100%;aspect-ratio:var(--ar);transform:translateX(calc(var(--cx) * -100%))}
.room-in>img{width:100%;height:100%;object-fit:cover}
.room-art{position:absolute;left:calc(var(--cx) * 100%);top:calc(var(--cy) * 100%);width:calc(var(--size) * var(--k) * 1%);
  transform:translate(-50%,var(--ty));background:#fff;filter:var(--tone);
  box-shadow:.35cqh .7cqh 1.3cqh rgba(30,20,10,.32),0 0 .25cqh rgba(30,20,10,.18);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.room-art img{width:100%;aspect-ratio:1}
.room-chip{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--black);font-size:13px;font-weight:600;
  padding:.32em .62em .36em;border-radius:.3em;line-height:1.1}
.pd-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.pd-th{background:none;border:0;padding:0;display:grid;gap:.3em;text-align:left;font-size:12px;font-weight:600;color:inherit;opacity:.55;min-width:0}
.pd-th[aria-current="true"]{opacity:1}
.pd-th-i{display:block;aspect-ratio:1;background:var(--shop-bg) center/cover no-repeat;box-shadow:inset 0 0 0 2px transparent}
.pd-th[aria-current="true"] .pd-th-i{box-shadow:inset 0 0 0 2px var(--ink)}
.pd-th-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-meta{font-size:var(--fs-s);font-weight:600}
.pd-title{font-size:clamp(42px,11vw,88px);margin-top:.25em}
.pd-orig{font-size:var(--fs-s);margin-top:.45em;opacity:.8}
.pd-desc{margin-top:1em}
.pd-sizes{border:0;padding:0;margin-top:1.8em;min-width:0}
.pd-sizes legend{font-weight:600;padding:0;margin-bottom:.6em}
.pd-size-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pd-size{position:relative;display:block}
.pd-size input{position:absolute;opacity:0;width:1px;height:1px}
.pd-size span{display:grid;gap:.12em;align-content:start;height:100%;padding:.72em .7em .78em;border-radius:.34em;background:var(--soft);cursor:pointer;line-height:1.2;
  transition:background-color .2s,color .2s}
.pd-size b{font-weight:600;font-size:var(--fs-s)}
.pd-size i{font-style:normal;font-size:var(--fs-s)}
.pd-size small{font-size:12px;font-weight:600;opacity:.85}
.pd-size input:checked+span{background:var(--ink);color:var(--paper)}
.pd-size input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.pd-price{font-size:var(--fs-lead);font-weight:600;letter-spacing:-.012em;margin:.7em 0 1em}
.pd-form{margin-top:1.8em;padding-top:1.5em;border-top:1.5px solid var(--soft);display:grid;gap:.85em}
.pd-form-t{font-size:var(--fs-lead);font-weight:600;line-height:1.15;letter-spacing:-.012em;margin-bottom:.15em}
.fld{display:grid;gap:.32em}
.fld span{font-size:var(--fs-s);font-weight:600}
.fld input{font:inherit;font-weight:500;color:var(--black);min-height:3em;padding:.68em .8em;border:1.5px solid rgba(45,79,209,.32);border-radius:.34em;
  background:#fff;-webkit-appearance:none;appearance:none}
.fld input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--soft)}
.chk{display:flex;align-items:center;gap:.6em;cursor:pointer}
.chk input{width:1.25em;height:1.25em;margin:0;accent-color:var(--blue)}
.pd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pd-req{color:var(--red);font-weight:600}
.pd-send{justify-self:start}
.pd-note{font-size:var(--fs-s)}
.pd-done{margin-top:1.8em;padding:1.2em 1.25em;border-radius:.4em;background:var(--soft);display:grid;gap:1em;justify-items:start}
.pd-more{display:flex;flex-wrap:wrap;gap:.4em 1.4em;margin-top:1.6em;font-size:var(--fs-s);font-weight:600}
.pd-more a,.pd-share{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em}
body.pd-open{overflow:hidden}
@media (min-width:960px){
  .pd-body{grid-template-columns:7fr 5fr;column-gap:calc(var(--gap)*1.2);align-items:start}
  .pd-media{position:sticky;top:68px}
  .pd-slides{margin:0}
}

/* подсказка о языке */
.hint{position:fixed;z-index:45;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;
  background:var(--black);color:#fff;border-radius:999px;font-size:var(--fs-s);font-weight:600;white-space:nowrap}
.hint a{padding:.65em .4em .7em 1.1em;text-decoration:none}
.hint button{background:none;border:0;color:#fff;font-size:1.3em;line-height:1;padding:.3em .8em .35em .5em;opacity:.7}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .cover-art img,.status.is-open i{animation:none}
  .btn,.bar,.card-img,.room-art{transition:none}
}