/* ══ EPRIS Museum · «Grand» ════════════════════════════════════════ Шар поверх museum.css. Мотив один на весь сайт — римська аркада: зали висять під арками, як у Пон-дю-Гар, ключова робота й сторінка роботи стоять в арочній ніші, а сам акведук прокреслюється тонкою лінією на головній і в підвалі. Уся архітектура вмикається від 1100 px. Телефон і планшет лишаються такими, як були; спільні для всіх ширин тільки шрифт-файли, перехід між сторінками, юридичні сторінки й посилання на них у підвалі. */ /* ── один шрифт на весь сайт: Tenor Sans, гротеск без засічок ──── Класичні, «римські» пропорції літер: капітелі з розрядкою звучать як напис на фасаді. Одна вага — ієрархію несуть кегль і розрядка; напівжирного немає, тож і лишаються звичайними. */ b,strong,h1,h2,h3,dt,th{font-weight:400!important} em,i{font-style:normal} /* Раніше сайт мішав три гарнітури (гротеск, Iowan Old Style, рукописний підпис). Тепер одна, з власного сервера, на всіх ширинах: і текст, і заголовки, і креслення. Різницю між рівнями несуть вага й кегль. */ @font-face{font-family:"Tenor Sans";font-style:normal;font-weight:400;font-display:swap; src:url(/_grand/fonts/tenor-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Tenor Sans";font-style:normal;font-weight:400;font-display:swap; src:url(/_grand/fonts/tenor-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ --sans:"Tenor Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --serif:var(--sans); --display:var(--sans); /* травертин: світлий, теплий, майже папір */ --trav:#F1EADD; --trav-hi:#F8F3EA; --trav-lo:#E4D8C3; --void:#FDFBF7; --eng:rgba(74,52,30,.30); /* штрих гравюри */ --eng-soft:rgba(74,52,30,.15); --ease-out:cubic-bezier(.16,1,.3,1); } html body,html body *{font-family:var(--sans)!important} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .wordmark{letter-spacing:.32em;font-weight:500;font-size:15px} .dir-signature{font-weight:300;font-style:italic;transform:none;letter-spacing:-.02em} ::selection{background:rgba(182,85,47,.18);color:var(--ink)} /* ── увесь сайт у нічній темі, на всіх ширинах ───────────────── Клас g-night стоїть на уже в розмітці (його ставить збірка), тож сторінка не блимає білим до скрипта. Кольори — ті самі змінні, що й у museum.css, лише навиворіт. */ body.g-night{--paper:#0E0C0B;--tint:#171310;--ink:#F3ECE2;--secondary:#A3927F;--soft:rgba(243,236,226,.74); --hair:rgba(243,236,226,.13);--rule:rgba(243,236,226,.5);--line-on-tint:rgba(243,236,226,.3); --void:#171310;--eng:rgba(243,236,226,.3);--eng-soft:rgba(243,236,226,.14); --trav:#1C1814;--trav-hi:#221D18;--trav-lo:#15110E; background:var(--paper);color:var(--ink);color-scheme:dark} body.g-night .pill-ghost{color:var(--ink);border-color:rgba(243,236,226,.3)} body.g-night input,body.g-night select,body.g-night textarea{background:transparent;color:var(--ink);border-color:rgba(243,236,226,.3)} body.g-night select option{background:#171310;color:var(--ink)} body.g-night ::placeholder{color:rgba(243,236,226,.4)} body.g-night .g-doc .warn{background:rgba(182,85,47,.12)} body.g-night .g-doc .pay{border-color:rgba(243,236,226,.4)} body.g-night .g-doc .pay img{background:#F3ECE2;padding:6px;border-radius:4px} body.g-night mark{background:rgba(243,236,226,.12);color:var(--ink);box-shadow:0 1px 0 var(--ink)} body.g-night mark.todo{background:#5a4a1c;outline-color:#C98A2C} body.g-night .wk{background:#1d1814} body.g-night .sec-rule{background:rgba(243,236,226,.35)} body.g-night .hall-row .n{color:#E58F63} body.g-night .plan-svg .p-fill{fill:var(--paper)} body.g-night .plan-svg .poche,body.g-night .plan-svg .p-col{fill:var(--ink)} body.g-night .tl-bar{fill:var(--tint);stroke:var(--ink)} body.g-night .tl-row.is-here .tl-bar{fill:var(--ink)} body.g-night .lb{background:var(--paper)} body.g-night .lb-controls button{background:var(--paper);color:var(--ink);border-color:var(--ink)} body.g-night .lb-controls #lb-close{background:var(--ink);color:var(--paper)} body.g-night .az{background:var(--paper)} body.g-night .opencall-form button,body.g-night .opencall-submit{color:#FBF4EC} /* шапка писала текст кольором «паперу» на чорному; папір тепер темний */ body.g-night .header,body.g-night .header .inA,body.g-night .wordmark,body.g-night .header .inC a, body.g-night .headband a{color:#F3ECE2} body.g-night .skip{color:#0E0C0B;background:#F3ECE2} body.g-night .opencall-submit:hover{background:#F3ECE2;color:#0E0C0B} /* замковий камінь аркади вночі — темний травертин зі світлим контуром */ body.g-night figure.work::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cpath d='M1.5 .5h27l-5 33h-17z' fill='%23221D18' stroke='%23F3ECE2' stroke-opacity='.4'/%3E%3Cpath d='M5.5 4.5h19' stroke='%23F3ECE2' stroke-opacity='.2'/%3E%3C/svg%3E")} /* ── перехід між сторінками (Chrome, Edge, Safari 18.2+) ─────── */ @view-transition{navigation:auto} ::view-transition-old(root){animation:g-vt-out .26s var(--ease) both} ::view-transition-new(root){animation:g-vt-in .5s var(--ease-out) both} @keyframes g-vt-out{to{opacity:0}} @keyframes g-vt-in{from{opacity:0;transform:translateY(10px)}} .g-duomo{display:none} /* ── підвал: юридичні посилання (усі ширини) ─────────────────── */ .site-foot .legal{max-width:1600px;margin:56px auto 0;padding-top:24px; border-top:1px solid var(--foot-rule);display:flex;flex-wrap:wrap;gap:10px 28px; font-family:var(--serif);font-size:12px;letter-spacing:1.2px;text-transform:uppercase} .site-foot .legal a{color:var(--foot-mute);border-bottom-color:transparent} .site-foot .legal .pp{margin-left:auto;color:var(--foot-dim)} @media (max-width:900px){ .site-foot .legal{justify-content:center;margin-top:40px} .site-foot .legal .pp{margin-left:0;flex-basis:100%;text-align:center} } /* ── open call: згода з документами (усі ширини) ─────────────── */ .consent{display:flex!important;gap:12px;align-items:flex-start;font-size:var(--t-sm)!important;text-transform:none!important;letter-spacing:0!important; line-height:1.5;color:var(--soft);grid-column:1 / -1} .consent input{width:18px!important;height:18px;margin:2px 0 0!important;flex:none;accent-color:var(--terracotta)} .consent a{border-bottom:1px solid var(--hair);color:var(--ink)} .consent.is-missing{color:var(--terracotta)} .oc-legal{margin-top:var(--s4);font-size:var(--t-sm);color:var(--secondary)} .oc-legal a{border-bottom:1px solid var(--hair);color:var(--ink)} /* ══ ДЕСКТОП ═══════════════════════════════════════════════════ */ @media (min-width:1100px){ /* ── типографіка: великі кеглі легкі й щільні ─────────────── */ .hero-title,.hall-hero h1,.artist-hero h1,.ex-hero h1,.opencall h1, .dir-quote,.opencall-feature-title,.site-foot h2,.g-doc h1{ font-weight:300;letter-spacing:-.035em} .hero-title{font-size:clamp(52px,5vw,86px);line-height:.98;max-width:12ch} .hall-hero h1,.artist-hero h1,.ex-hero h1{font-size:clamp(52px,4.8vw,80px);line-height:1} .dir-quote{font-size:clamp(30px,2.8vw,44px);line-height:1.12;letter-spacing:-.03em} .opencall-feature-title{font-size:clamp(48px,4.6vw,76px);line-height:1} .site-foot h2{font-size:64px;letter-spacing:.14em;font-weight:300} .sec-title{font-weight:400;font-size:26px;letter-spacing:-.02em} .hall-name{font-weight:300;font-size:38px;letter-spacing:-.03em;line-height:1.02} .hall-row .n{font-weight:300;font-size:26px;letter-spacing:.04em} .w-artist{font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-.01em} .keywork .w-artist{font-size:32px;font-weight:400;letter-spacing:-.025em} .work-label .by{font-weight:300;font-size:44px;line-height:1.02;letter-spacing:-.03em} .hall-nav .nm{font-size:28px;font-weight:300;letter-spacing:-.025em} /* ── зали на головній: мініатюри в арочних нішах ─────────── */ .hall-strip{height:112px!important;gap:10px} .hall-strip img{height:112px!important;max-width:84px!important;width:84px!important; border-radius:42px 42px 0 0;object-fit:cover} .hall-row{padding-top:var(--s7)} .hall-open{padding-bottom:var(--s7)} }/* /min-width:1100px */ /* ══ УСІ ШИРИНИ: собор, фриз, арки, нічна зона, акведук, аркада ══ З 24.09.2026 це стоїть і на телефоні; ширини нижче лише підлаштовують розміри (див. блок «ТЕЛЕФОН І ПЛАНШЕТ»). */ /* ── перший екран: Duomo di Milano, що креслиться на очах ───── Заголовок і лід ліворуч, собор праворуч на всю висоту. Картина першого екрана не зникла: вона світиться в центральному порталі. */ body:has(.has-duomo) .hero-frame,body:has(.has-duomo) .hero-cap-bar{display:none} .hero-copy.has-duomo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto; column-gap:var(--s7);align-items:center;padding:var(--s8) 0 var(--s7); min-height:calc(100vh - 72px);box-sizing:border-box} .has-duomo .hero-head{grid-column:1;grid-row:1;align-self:end;padding:0 0 0 calc(var(--edge) + var(--gutter))} .has-duomo .hero-side{grid-column:1;grid-row:2;align-self:start;padding:var(--s6) 0 0 calc(var(--edge) + var(--gutter))} .has-duomo .hero-lead{max-width:46ch} .has-duomo .hero-kicker{letter-spacing:.3em} .g-duomo{display:block;grid-column:2;grid-row:1 / 3;margin:0;padding-right:calc(var(--edge) + var(--gutter)); position:relative;z-index:1;background:var(--paper)} .duomo{display:block;width:100%;height:auto;max-height:calc(100vh - 170px);color:var(--ink);overflow:visible} .duomo path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} .duomo .det path{stroke-opacity:.52} .duomo .sil{stroke-opacity:.95} .duomo .ground{stroke-opacity:.5} .duomo .door-img{opacity:.95} /* спершу пером обводиться силует, далі смугами знизу вгору проступає різьба */ html.g-js .duomo .sil,html.g-js .duomo .ground{stroke-dasharray:1;stroke-dashoffset:1; animation:g-draw 2.8s var(--ease-out) .15s forwards} html.g-js .duomo .det>g{opacity:0;animation:g-fade 1.4s var(--ease) calc(var(--d) * 1ms) forwards} html.g-js .duomo .door-img{opacity:0;animation:g-fade 1.6s var(--ease) 1s forwards} @keyframes g-draw{to{stroke-dashoffset:0}} @keyframes g-fade{to{opacity:1}} .g-duomo figcaption{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s3); padding-top:var(--s3);border-top:1px solid var(--hair);font-size:var(--t-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--secondary)} .g-duomo-door{margin:var(--s2) 0 0;font-size:var(--t-xs);color:var(--secondary)} .g-duomo-door i{color:var(--ink)} .g-duomo .credit{margin:4px 0 0;font-size:11px;color:var(--secondary)} .g-duomo .credit a{border-bottom:1px solid var(--hair)} /* ══ ВСЕ ДО ЗАЛІВ ══════════════════════════════════════════════ Фриз колекції: з кожного залу одна робота, висить на двох тросиках на картинній рейці й повільно пливе. Наведення зупиняє рух, клік веде в зал. Краї розчиняються, тож стрічка не має початку й кінця. */ .g-frieze{position:relative;padding:var(--s7) 0 var(--s8);border-top:1px solid var(--hair);background:var(--paper)} .g-frieze-head{max-width:1440px;margin:0 auto;padding:0 calc(var(--edge) + var(--gutter)) var(--s5); display:flex;justify-content:space-between;gap:var(--s5);font-size:var(--t-xs);letter-spacing:.2em; text-transform:uppercase;color:var(--secondary)} .g-frieze-rail{position:relative;overflow:hidden;padding:44px 0 34px; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .g-frieze-rail::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px; background:linear-gradient(to bottom,var(--eng) 0 1px,var(--trav-hi) 1px 2px,var(--eng-soft) 2px 3px)} .g-frieze-track{display:flex;align-items:flex-start;gap:56px;width:max-content;padding:0 28px; animation:g-marquee 190s linear infinite} .g-frieze:hover .g-frieze-track{animation-play-state:paused} @keyframes g-marquee{to{transform:translateX(-50%)}} .gf{position:relative;display:block;flex:none} .gf img{display:block;height:168px;width:auto;max-width:260px;object-fit:cover;background:var(--tint); box-shadow:0 14px 22px -8px rgba(40,25,10,.28),0 2px 4px rgba(40,25,10,.18); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)} .gf-wire{position:absolute;left:0;top:-32px;width:100%;height:32px;overflow:visible; fill:none;stroke:var(--secondary);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7} .gf::before{content:"";position:absolute;left:50%;top:-35px;width:5px;height:5px;margin-left:-2.5px; border-radius:50%;background:var(--ink);opacity:.55} .gf-l{position:absolute;left:0;right:0;top:calc(100% + 12px);font-size:var(--t-xs);color:var(--secondary); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s var(--ease)} @media (hover:hover) and (pointer:fine){ .gf:hover img{transform:translateY(-4px) rotate(-.6deg); box-shadow:0 22px 28px -10px rgba(40,25,10,.34),0 3px 6px rgba(40,25,10,.2)} .gf:hover .gf-l{opacity:1;color:var(--ink)} } /* Навігація розділами — шість арочних прорізів, як входи до залів. */ .quicknav{background:var(--paper);border:0} .quicknav-in{gap:18px;padding:0 calc(var(--edge) + var(--gutter)) var(--s8)} .qn,.qn:first-child,.qn:last-child{position:relative;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;text-align:center;min-height:210px;padding:0 18px 26px;border:1px solid var(--hair); border-bottom-width:3px;border-radius:999px 999px 0 0;background:linear-gradient(to bottom,var(--paper),var(--tint)); transition:border-color .35s var(--ease),background .35s var(--ease),transform .5s var(--ease-out)} .qn::before{content:"";position:absolute;top:-1px;left:50%;width:14px;height:18px;margin-left:-7px; background:var(--paper);border:1px solid var(--hair);border-top:0;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)} .qn-n{font-size:11px;letter-spacing:.24em;color:var(--terracotta)} .qn-t{margin-top:10px;font-size:24px;font-weight:300;letter-spacing:-.025em} .qn-m{margin-top:6px} @media (hover:hover) and (pointer:fine){ .qn:hover{background:var(--paper);border-color:var(--ink);transform:translateY(-4px)} .qn:hover::before{border-color:var(--ink)} } /* Лист директора — журнальна розкладка: велика цитата з лапкою, текст у дві колонки з буквицею, підпис унизу. */ .dir-band{background:#F7F2EA;border-bottom:0;position:relative;overflow:hidden} .dir-band::after{content:"\201C";position:absolute;right:4vw;top:-.18em;font-size:520px;line-height:1; font-weight:200;color:rgba(182,85,47,.07);pointer-events:none} .director{padding:var(--s9) 0} .dir-quote{max-width:22ch;font-size:clamp(40px,3.8vw,62px);font-weight:300;line-height:1.06} .dir-letter{max-width:none;columns:2;column-gap:64px;column-rule:1px solid rgba(182,85,47,.18);font-size:16px;line-height:1.72;margin-top:var(--s7)} .director .inB{display:none} .director .inC{grid-column:2 / 4;padding-left:var(--s7)} .dir-letter{column-fill:balance} .dir-letter p:first-child::first-letter{font-size:4.6em;font-weight:200;line-height:.8;margin:.04em .1em 0 0; color:var(--terracotta)} .dir-sign{max-width:none} .dir-signature{font-size:34px} .dir-avatar,.dir-aside .dir-avatar{width:96px;height:96px;filter:grayscale(1) contrast(1.05)} /* Open call: порожня арочна рама посередині, у ній змінюються роботи. */ .opencall-feature .inB{display:flex;align-items:center;justify-content:center} .g-oc-arch{margin:0;width:min(100%,360px)} .g-oc-frame{position:relative;aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden; background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(251,244,236,.5),0 0 0 10px rgba(251,244,236,.06),0 0 0 11px rgba(251,244,236,.28), 0 30px 60px -20px rgba(0,0,0,.6)} .g-oc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 6s linear} .g-oc-frame img.on{opacity:1;transform:scale(1)} .g-oc-arch figcaption{margin-top:24px;text-align:center;font-size:22px;font-weight:300;letter-spacing:-.02em;color:var(--paper)} .g-oc-arch figcaption span{display:block;margin-top:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6} .opencall-feature::after{opacity:.28} /* ── ще крутіше ─────────────────────────────────────────────── Лупа над собором: фото мармуру лежить під кресленням точно в його геометрії й видне лише в колі під курсором; тонке кільце — сама лупа. */ .duomo{cursor:crosshair} .duomo .photo{filter:brightness(1.18) contrast(1.12) saturate(1.05)} .duomo .lens{r:0;transition:r .5s var(--ease-out)} .duomo.lens-on .lens{r:100px} .duomo .lens-ring{r:0;fill:none;stroke:var(--terracotta);stroke-width:1;stroke-opacity:.7; vector-effect:non-scaling-stroke;transition:r .5s var(--ease-out);pointer-events:none} .duomo.lens-on .lens-ring{r:100px} /* цифри першого екрана відлічуються — ширина цифр не стрибає */ .hero-stats dd{font-variant-numeric:tabular-nums} /* фриз: латунна лампа над кожною картиною, теплий світловий конус на полотні і м'яке сяйво на стіні над рамою */ .gf-lamp{position:absolute;z-index:3;left:50%;top:-9px;width:46%;height:8px;transform:translateX(-50%); border-radius:5px 5px 2px 2px;background:linear-gradient(#f0d49a,#b98a45 55%,#7a5626); box-shadow:0 1px 2px rgba(0,0,0,.3)} .gf-lamp::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:10px;margin-left:-1px; background:#9c7437} .gf::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:2; background:radial-gradient(85% 60% at 50% 0,rgba(255,216,150,.5),rgba(255,216,150,0) 72%);mix-blend-mode:screen} .gf img{box-shadow:0 -26px 44px -18px rgba(255,196,110,.55),0 14px 22px -8px rgba(40,25,10,.28),0 2px 4px rgba(40,25,10,.18)} /* арочні входи: у прорізі видно залу */ .qn{overflow:hidden;isolation:isolate} .qn-img{position:absolute;inset:0;z-index:-1;background:center / cover no-repeat;opacity:0; transform:scale(1.1);transition:opacity .55s var(--ease),transform 1.4s var(--ease-out)} .qn-img::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(20,12,8,.86),rgba(20,12,8,.25) 62%,rgba(20,12,8,.05))} .qn .qn-t,.qn .qn-m,.qn .qn-n{transition:color .35s var(--ease)} @media (hover:hover) and (pointer:fine){ .qn:hover .qn-img{opacity:1;transform:none} .qn:hover .qn-t{color:#fff} .qn:hover .qn-m{color:rgba(255,255,255,.75)} .qn:hover .qn-n{color:#F2B38D} } /* цитата директора наливається чорнилом */ .dir-quote .w{color:rgba(36,23,18,.14);transition:color .45s var(--ease)} .dir-quote .w.on{color:var(--ink)} /* рама open call: нахил і відблиск */ .g-oc-frame{transition:transform .7s var(--ease-out);transform-style:preserve-3d;will-change:transform} .g-oc-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background:radial-gradient(circle at var(--gx,50%) var(--gy,18%),rgba(255,255,255,.26),rgba(255,255,255,0) 52%); mix-blend-mode:screen} /* ══ НІЧНА ЗОНА: усе від шапки до залів ═════════════════════════ Перший екран, фриз, арки, лист, open call і акведук стоять на одному темному тлі, як вечірній зал: світлі лінії, теплі лампи. Кольори перевизначені змінними всередині зони, тож усі правила вище працюють і тут, тільки навиворіт. Зали нижче лишаються світлими. */ .g-night{--rule:rgba(243,236,226,.5);--line-on-tint:rgba(243,236,226,.3);--ink:#F3ECE2;--secondary:#A3927F;--soft:rgba(243,236,226,.74);--hair:rgba(243,236,226,.13); --paper:#0E0C0B;--tint:#171310;--void:#171310;--eng:rgba(243,236,226,.3);--eng-soft:rgba(243,236,226,.14); --trav:#1C1814;--trav-hi:#221D18;--trav-lo:#15110E; position:relative;z-index:1;color:var(--ink);background:var(--paper)} .stage>.g-night,.g-aq.g-night{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)} .g-night .pill-ghost{color:var(--ink);border-color:rgba(243,236,226,.3)} .g-night a{color:inherit} /* перший екран */ .hero-copy.has-duomo{padding-top:var(--s7)} .has-duomo .hero-title{color:#FBF6EE;letter-spacing:-.03em;font-weight:400} .has-duomo .hero-lead{color:var(--soft);max-width:38ch} .has-duomo .hero-stats{border-top-color:var(--hair)} .has-duomo .hero-stats dd{color:#FBF6EE} .g-duomo{background:transparent} .g-duomo .duomo{color:#EFE6D8} .g-duomo .duomo .det path{stroke-opacity:.46} .g-duomo figcaption{border-top-color:var(--hair)} .g-duomo .credit{opacity:.7} /* фриз на темній стіні: лампи світять по-справжньому */ .g-frieze.g-night{border-top:0;padding-top:var(--s6)} .g-frieze.g-night .g-frieze-rail::before{background:linear-gradient(to bottom,rgba(243,236,226,.35) 0 1px,rgba(243,236,226,.08) 1px 3px)} .g-frieze.g-night .gf-wire{stroke:rgba(243,236,226,.45)} .g-frieze.g-night .gf::before{background:#D9C3A0} .g-frieze.g-night .gf img{box-shadow:0 -40px 70px -24px rgba(255,190,100,.42),0 18px 30px -10px rgba(0,0,0,.7)} .g-frieze.g-night .gf::after{background:radial-gradient(90% 62% at 50% 0,rgba(255,214,150,.55),rgba(255,214,150,0) 72%)} /* арки навігації */ .quicknav.g-night{background:var(--paper)} .g-night .qn,.g-night .qn:first-child,.g-night .qn:last-child{border-color:rgba(243,236,226,.16);border-bottom-width:1px; background:linear-gradient(to bottom,rgba(243,236,226,.02),rgba(243,236,226,.06));min-height:190px} .g-night .qn::before{background:var(--paper);border-color:rgba(243,236,226,.16)} .g-night .qn-m{display:none} .g-night .qn-t{font-size:22px;font-weight:500;letter-spacing:-.02em} /* лист директора: коротко — цитата, перший абзац, решта під кнопкою */ .dir-band.g-night{background:var(--paper)} .dir-band.g-night::after{color:rgba(201,110,70,.12)} .g-night .dir-quote .w{color:rgba(243,236,226,.16)} .g-night .dir-quote .w.on{color:#FBF6EE} .g-night .dir-letter{column-rule-color:rgba(201,110,70,.25)} .g-night .dir-avatar{box-shadow:0 0 0 1px rgba(243,236,226,.2)} .dir-more{display:none} .dir-letter.is-open .dir-more{display:block} .dir-letter:not(.is-open){columns:1;max-width:62ch} .dir-toggle{margin-top:var(--s4);background:none;border:0;padding:0 0 2px;cursor:pointer;font:inherit; font-size:var(--t-sm);color:var(--ink);border-bottom:1px solid rgba(243,236,226,.35)} /* open call у зоні — те саме тло, без градієнта */ .opencall-feature.g-night{background:var(--paper)} .opencall-feature.g-night::before{content:"";position:absolute;inset:0 auto 0 0;width:100%;pointer-events:none;z-index:-1; background:radial-gradient(60% 80% at 25% 45%,rgba(182,85,47,.22),rgba(182,85,47,0) 70%)} /* у блоці open call кольори були задані як «папір на темному»; в нічній зоні «папір» сам темний, тож повертаємо світлий текст явно */ .opencall-feature.g-night{color:var(--ink)} .opencall-feature.g-night .opencall-feature-title,.opencall-feature.g-night .ocf-terms dd{color:#FBF6EE} .opencall-feature.g-night .opencall-feature-lead{color:var(--soft);opacity:1} .opencall-feature.g-night .ocf-terms{border-top-color:var(--hair)} .opencall-feature.g-night .ocf-terms dt,.opencall-feature.g-night .ocf-note,.opencall-feature.g-night .micro{color:var(--secondary);opacity:1} .opencall-feature.g-night .pill-light{background:#F3ECE2;color:#8C4224} .opencall-feature.g-night .g-oc-arch figcaption{color:#FBF6EE} /* уся головна вночі: зали, стіна, програма, візит — на тому ж тлі */ body.g-night{position:static;z-index:auto} body.g-night .hall[data-open="true"]{background:rgba(243,236,226,.03)} body.g-night .hall-row .n{color:#E58F63} body.g-night .plan-scroll,body.g-night .plan-svg .p-fill{background:var(--paper);fill:var(--paper)} body.g-night .plan-svg .poche,body.g-night .plan-svg .p-col{fill:var(--ink)} body.g-night .wk{background:#1d1814} body.g-night .sec-rule{background:rgba(243,236,226,.35)} body.g-night .dir-name{color:var(--ink)} /* акведук: світлі лінії на темному, кінець нічної зони */ .g-aq.g-night{color:#E8DDCD;padding-bottom:var(--s8)} .g-aq.g-night figcaption{border-top-color:var(--hair)} .g-aq.g-night .t i{color:#E58F63} /* ── акведук: креслення, що прокреслюється ─────────────────── */ .g-aq{position:relative;z-index:1;background:var(--paper);padding:var(--s8) calc(var(--edge) + var(--gutter)) var(--s6); color:var(--ink)} .g-aq figure{margin:0 auto;max-width:1320px} .aq{display:block;width:100%;height:auto;overflow:visible} .aq path{stroke-width:1;vector-effect:non-scaling-stroke;stroke-opacity:.72} .aq path.fine{stroke-opacity:.32} .aq path.ground{stroke-opacity:.45} .aq path.water{stroke-opacity:.28;stroke-dasharray:.02 .015} html.g-js .aq path:not(.water){stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 2.6s var(--ease-out) calc(var(--d) * 1ms)} html.g-js .aq.is-in path:not(.water){stroke-dashoffset:0} html.g-js .aq path.water{opacity:0;transition:opacity 1.6s var(--ease) calc(var(--d) * 1ms + 600ms)} html.g-js .aq.is-in path.water{opacity:1} .g-aq figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5); align-items:baseline;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair)} .g-aq .t{font-size:24px;line-height:1.25;max-width:40ch;font-weight:300;letter-spacing:-.02em} .g-aq .t i{color:var(--terracotta)} .g-aq .m{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--secondary); text-align:right;line-height:1.7} .site-foot .g-aq{padding:0 0 64px;color:var(--foot-mute);background:none} .site-foot .g-aq figure{max-width:1600px} .site-foot .aq path{stroke-opacity:.5} .site-foot .aq path.fine{stroke-opacity:.22} /* ── заклик до митців: аркада-привид на тлі ──────────────── */ .opencall-feature{position:relative;overflow:hidden;isolation:isolate} .opencall-feature::after{content:"";position:absolute;z-index:-1;right:-4vw;bottom:-2px; width:46vw;height:118%;pointer-events:none;opacity:.5; background:url(/_grand/aqueduct.svg) right bottom / 100% auto no-repeat; filter:invert(1);mix-blend-mode:screen} /* ══ АРКАДА ЗАЛУ ═══════════════════════════════════════════════ Кожна робота — прогін. Сусідні прогони стикаються без щілини, тож їхні половинки опор складаються в одну. Згори донизу: карниз із зубчиками, верхній ярус малих арок, архітрав у три фасції, велика арка з архівольтом і замковим каменем, імпост на лінії п'ят, цоколь. Усе — одним тоном травертину і штрихом гравюри, без малюнка кладки, щоб не сперечатися з живописом. */ /* Ярус до ярусу впритул, на всю ширину: як поверхи акведука, без проміжків між рядами. Етикетки — у «цоколі» під кожним прогоном. */ .gallery{ counter-reset:bay; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); column-gap:0;row-gap:0; max-width:none;margin:0; padding:var(--s7) var(--edge) var(--s8); } figure.work{ counter-increment:bay;position:relative; container-type:inline-size;gap:0; --p:30px; /* половина опори */ --t:104px; /* верх отвору великої арки */ --av:15px; /* ширина архівольта */ } figure.work a.plate{ --r:calc(50cqw - var(--p)); --sp:calc(var(--t) + var(--r)); /* лінія п'ят */ --sr:calc(100cqw / 12 - 6px); /* мала арка */ aspect-ratio:5/7;overflow:hidden; background-color:var(--trav); background-image: /* карниз: полиця, валик, зубчики */ linear-gradient(to bottom,var(--eng) 0 1px,var(--trav-hi) 1px 6px,var(--eng) 6px 7px, transparent 7px 9px,var(--eng-soft) 9px 10px,transparent 10px), repeating-linear-gradient(to right,var(--eng-soft) 0 1px,var(--trav-lo) 1px 6px, var(--eng-soft) 6px 7px,transparent 7px 11px), /* архітрав у три фасції під верхнім ярусом */ linear-gradient(to bottom,transparent 64px,var(--eng) 64px 65px,var(--trav-hi) 65px 69px, var(--eng-soft) 69px 70px,transparent 70px 73px,var(--eng-soft) 73px 74px,transparent 74px), /* верхній ярус: шість малих арок, лише контуром */ radial-gradient(circle at 50% calc(20px + var(--sr)),var(--void) calc(var(--sr) - 1px), var(--eng) calc(var(--sr) - .5px) var(--sr),transparent calc(var(--sr) + .5px)), linear-gradient(to right,transparent calc(50% - var(--sr) - .5px),var(--eng) calc(50% - var(--sr) - .5px), var(--eng) calc(50% - var(--sr) + .5px),var(--void) calc(50% - var(--sr) + .5px), var(--void) calc(50% + var(--sr) - .5px),var(--eng) calc(50% + var(--sr) - .5px), var(--eng) calc(50% + var(--sr) + .5px),transparent calc(50% + var(--sr) + .5px)), /* імпост на лінії п'ят */ linear-gradient(to bottom,transparent calc(var(--sp) - 1px),var(--eng) calc(var(--sp) - 1px), var(--trav-hi) var(--sp),var(--trav-hi) calc(var(--sp) + 7px),var(--eng) calc(var(--sp) + 7px), rgba(74,52,30,.08) calc(var(--sp) + 8px),transparent calc(var(--sp) + 14px)), /* цоколь */ linear-gradient(to top,var(--trav-lo) 0 10px,var(--eng) 10px 11px,transparent 11px 16px, var(--eng-soft) 16px 17px,transparent 17px), /* світло зверху, легка тінь донизу */ linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(120,90,50,.05)); background-size: 100% 100%, 100% 5px, 100% 100%, calc(100% / 6) 64px, calc(100% / 6) calc(64px - 20px - var(--sr)), 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 12px, 0 0, 0 0, 0 calc(20px + var(--sr)), 0 0, 0 0, 0 0; background-repeat:no-repeat,repeat-x,no-repeat,repeat-x,repeat-x,no-repeat,no-repeat,no-repeat; } /* проліт: світла порожнеча з тінню під склепінням, архівольт кільцями */ figure.work a.plate::before{ content:"";position:absolute;z-index:0; left:var(--p);right:var(--p);top:var(--t);bottom:0; border-radius:var(--r) var(--r) 0 0; background: radial-gradient(120% 60% at 50% 0,rgba(74,52,30,.10),rgba(74,52,30,0) 70%), var(--void); box-shadow: 0 0 0 1px var(--eng), 0 0 0 5px var(--trav-hi), 0 0 0 6px var(--eng-soft), 0 0 0 calc(var(--av) - 1px) var(--trav-hi), 0 0 0 var(--av) var(--eng), inset 0 18px 30px -22px rgba(74,52,30,.35); transition:background-color .4s var(--ease); } /* клинчасті камені: шви лише в смузі архівольта, 17 клинців */ figure.work a.plate::after{ content:"";position:absolute;z-index:1;pointer-events:none; left:calc(var(--p) - var(--av));right:calc(var(--p) - var(--av)); top:calc(var(--t) - var(--av));height:calc(var(--r) + var(--av)); border-radius:calc(var(--r) + var(--av)) calc(var(--r) + var(--av)) 0 0; background:repeating-conic-gradient(from -90deg at 50% 100%, var(--eng-soft) 0 .35deg,transparent .35deg calc(180deg / 17)); -webkit-mask:radial-gradient(circle at 50% 100%,transparent calc(var(--r) + 6px),#000 calc(var(--r) + 6.5px)); mask:radial-gradient(circle at 50% 100%,transparent calc(var(--r) + 6px),#000 calc(var(--r) + 6.5px)); } /* замковий камінь: трапеція, що заходить в архітрав */ figure.work::before{ content:"";position:absolute;z-index:3;pointer-events:none; left:50%;top:calc(var(--t) - var(--av) - 12px);width:30px;height:34px; transform:translateX(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cpath d='M1.5 .5h27l-5 33h-17z' fill='%23F8F3EA' stroke='%234a341e' stroke-opacity='.34'/%3E%3Cpath d='M5.5 4.5h19' stroke='%234a341e' stroke-opacity='.18'/%3E%3C/svg%3E") center / contain no-repeat; } /* тондо в пазусі між арками, як у лоджії Брунеллескі. Малюємо на лівій опорі кожного прогону, крім першого в ряду: container-type робить прогін окремим контекстом накладання, і правий сусід перекрив би тондо, намальоване попереднім прогоном. */ figure.work::after{ content:"";position:absolute;z-index:3;pointer-events:none; left:0;top:calc(var(--t) + 12px);width:34px;height:34px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(circle,var(--void) 0 9px,var(--eng-soft) 9.5px 10px,var(--trav-hi) 10.5px 13px, var(--eng) 13.5px 14px,transparent 14.5px); } figure.work figcaption{padding-bottom:var(--s7)} .gallery figure.work:nth-child(4n+1)::after{display:none} /* робота висить у прольоті, по спільній лінії підвісу, і відкидає тінь */ figure.work img{ z-index:2;inset:auto; left:calc(var(--p) + 22px); top:calc(var(--sp) - var(--r) * .42); width:calc(100% - 2 * (var(--p) + 22px)); height:calc(100% - var(--sp) + var(--r) * .42 - 34px); filter:drop-shadow(0 14px 16px rgba(50,32,14,.16)) drop-shadow(0 2px 3px rgba(50,32,14,.18)); transition:transform .6s var(--ease-out),filter .6s var(--ease-out); } /* підпис: номер прогону римськими, під ним етикетка */ figure.work figcaption{padding:var(--s5) calc(var(--p) + 4px) 0} figure.work figcaption::before{content:counter(bay,upper-roman);display:block; margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--hair); font-size:12px;font-weight:500;letter-spacing:.24em;color:var(--secondary)} .w-title{margin-top:6px} /* проявлення прогонів при гортанні */ html.g-js .gallery figure.work{opacity:0;transform:translateY(28px); transition:opacity 1s var(--ease-out) calc(var(--i,0) * 110ms), transform 1.2s var(--ease-out) calc(var(--i,0) * 110ms)} html.g-js .gallery figure.work.is-in{opacity:1;transform:none} /* ── ключова робота залу: одна велика арочна ніша ─────────── */ .keywork{max-width:1440px;margin:0 auto;padding:var(--s8) 48px 0;gap:var(--s8);align-items:center} .keywork .plate{aspect-ratio:6/5;overflow:hidden; border-radius:50% 50% 0 0 / 34% 34% 0 0; background:radial-gradient(120% 70% at 50% 0,rgba(74,52,30,.12),rgba(74,52,30,0) 60%),var(--void); box-shadow:0 0 0 1px var(--eng),0 0 0 9px var(--trav),0 0 0 10px var(--eng-soft), 0 0 0 22px var(--trav),0 0 0 23px var(--eng); margin:23px} .keywork img{top:17%;left:9%;width:82%;height:calc(83% - 30px); filter:drop-shadow(0 18px 22px rgba(50,32,14,.2)) drop-shadow(0 2px 4px rgba(50,32,14,.2))} .keywork .eyebrow{letter-spacing:.3em;text-transform:uppercase} /* ── сторінка роботи: та сама ніша ─────────────────────────── */ .work-plate{border-radius:50% 50% 0 0 / 30% 30% 0 0; background:radial-gradient(120% 70% at 50% 0,rgba(74,52,30,.12),rgba(74,52,30,0) 60%),var(--void); box-shadow:0 0 0 1px var(--eng),0 0 0 9px var(--trav),0 0 0 10px var(--eng-soft), 0 0 0 22px var(--trav),0 0 0 23px var(--eng); margin:23px} .work-plate img{top:16%;height:calc(84% - var(--s5)); filter:drop-shadow(0 18px 22px rgba(50,32,14,.2)) drop-shadow(0 2px 4px rgba(50,32,14,.2))} .sib .p{border-radius:999px 999px 0 0} /* ── загальне проявлення блоків при гортанні ───────────────── */ html.g-js .g-rise{opacity:0;transform:translateY(22px); transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)} html.g-js .g-rise.is-in{opacity:1;transform:none} @media (min-width:1100px) and (hover:hover) and (pointer:fine){ figure.work a.plate:hover img{transform:translateY(-6px); filter:drop-shadow(0 26px 24px rgba(50,32,14,.2)) drop-shadow(0 3px 5px rgba(50,32,14,.18))} figure.work a.plate:hover::before{background-color:#fff} } /* колонки аркади за шириною: 4 · 3 · 2 · 1; тондо лише між прогонами */ @media (max-width:1279px){ .gallery{--cols:3} .gallery figure.work:nth-child(4n+1)::after{display:block} .gallery figure.work:nth-child(3n+1)::after{display:none} } @media (max-width:1099px){ .gallery{--cols:2} .gallery figure.work:nth-child(3n+1)::after{display:block} .gallery figure.work:nth-child(2n+1)::after{display:none} } @media (max-width:639px){ .gallery{--cols:1;padding:var(--s5) 12px var(--s6)} .gallery figure.work::after,.gallery figure.work:nth-child(n)::after{display:none} } @media (prefers-reduced-motion:reduce){ html.g-js .duomo .sil,html.g-js .duomo .ground,html.g-js .duomo .det>g,html.g-js .duomo .door-img{animation:none!important;stroke-dashoffset:0;opacity:1} html.g-js .aq path{stroke-dashoffset:0!important;opacity:1!important;transition:none!important} html.g-js .gallery figure.work,html.g-js .g-rise{opacity:1!important;transform:none!important} .g-frieze-track{animation:none} .dir-quote .w{color:var(--ink)} ::view-transition-old(root),::view-transition-new(root){animation:none} } /* ══ АРКАДА ВНОЧІ: тільки лінія ══════════════════════════════════ На темному тлі травертинова заливка перетворювалась на сіру каламуть. Уночі аркада — креслення, як акведук: карниз, мала аркада, архітрав, архівольти й імпости тонкими світлими лініями, без маси каменю. */ body.g-night figure.work a.plate{ background-color:transparent; background-image: linear-gradient(to bottom,var(--eng) 0 1px,transparent 1px 6px,var(--eng-soft) 6px 7px,transparent 7px), repeating-linear-gradient(to right,var(--eng-soft) 0 1px,transparent 1px 6px,var(--eng-soft) 6px 7px,transparent 7px 11px), linear-gradient(to bottom,transparent 64px,var(--eng) 64px 65px,transparent 65px 69px, var(--eng-soft) 69px 70px,transparent 70px 73px,var(--eng-soft) 73px 74px,transparent 74px), radial-gradient(circle at 50% calc(20px + var(--sr)),transparent calc(var(--sr) - .5px), var(--eng) calc(var(--sr) - .5px) var(--sr),transparent calc(var(--sr) + .5px)), linear-gradient(to right,transparent calc(50% - var(--sr) - .5px),var(--eng) calc(50% - var(--sr) - .5px), var(--eng) calc(50% - var(--sr) + .5px),transparent calc(50% - var(--sr) + .5px), transparent calc(50% + var(--sr) - .5px),var(--eng) calc(50% + var(--sr) - .5px), var(--eng) calc(50% + var(--sr) + .5px),transparent calc(50% + var(--sr) + .5px)), linear-gradient(to bottom,transparent calc(var(--sp) - 1px),var(--eng) calc(var(--sp) - 1px) var(--sp), transparent var(--sp) calc(var(--sp) + 6px),var(--eng-soft) calc(var(--sp) + 6px) calc(var(--sp) + 7px),transparent calc(var(--sp) + 7px)), linear-gradient(to top,var(--eng) 0 1px,transparent 1px 10px,var(--eng-soft) 10px 11px,transparent 11px), none; body.g-night figure.work a.plate::before{ background:var(--paper); box-shadow:0 0 0 1px var(--eng),0 0 0 5px var(--paper),0 0 0 6px var(--eng-soft), 0 0 0 calc(var(--av) - 1px) var(--paper),0 0 0 var(--av) var(--eng)} body.g-night figure.work::after{ background:radial-gradient(circle,transparent 0 9.5px,var(--eng-soft) 9.5px 10.5px,transparent 10.5px 13.5px, var(--eng) 13.5px 14.5px,transparent 14.5px)} body.g-night figure.work a.plate:hover::before{background:#12100E} body.g-night figure.work img{filter:drop-shadow(0 18px 28px rgba(0,0,0,.6))} /* ніша ключової роботи й сторінки роботи — теж лише контуром */ body.g-night .keywork .plate,body.g-night .work-plate{background:transparent; box-shadow:0 0 0 1px var(--eng),0 0 0 9px var(--paper),0 0 0 10px var(--eng-soft), 0 0 0 22px var(--paper),0 0 0 23px var(--eng)} body.g-night .keywork img,body.g-night .work-plate img{filter:drop-shadow(0 24px 34px rgba(0,0,0,.65))} } /* ══ ЮРИДИЧНІ СТОРІНКИ (усі ширини) ═══════════════════════════ */ .g-doc{padding:var(--s8) 0 var(--s9);align-items:start} .g-doc .toc{position:sticky;top:var(--s5);font-size:var(--t-sm);line-height:1.5} .g-doc .toc b{display:block;margin-bottom:var(--s3);font-weight:400;font-size:var(--t-xs); letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)} .g-doc .toc a{display:block;padding:4px 0;color:var(--secondary)} .g-doc .toc a:hover{color:var(--ink)} .g-doc .toc .docs{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair)} .g-doc .toc .docs a.on{color:var(--ink)} .g-doc article{grid-column:2 / 4;padding:0 calc(var(--edge) + var(--gutter)) 0 var(--gutter);max-width:820px} /* внутрішня лінія сітки різала б текст документа навпіл */ .stage:has(.g-doc) .lines i:nth-child(3){display:none} .g-doc .kicker{display:block;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase; color:var(--secondary);margin-bottom:var(--s4)} .g-doc h1{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--t-display); line-height:1;letter-spacing:-.02em;text-wrap:balance} .g-doc .ver{margin:var(--s4) 0 0;font-size:var(--t-sm);color:var(--secondary)} .g-doc .short{margin:var(--s6) 0 var(--s7);padding:var(--s5) var(--s6);background:var(--tint); border-left:2px solid var(--terracotta)} .g-doc .short h2{margin:0 0 var(--s3)!important;font-size:var(--t-xs)!important; letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans)!important;color:var(--secondary)} .g-doc .short ul{margin:0;padding-left:1.1em} .g-doc .short li{margin:0 0 6px} .g-doc h2{margin:var(--s7) 0 var(--s3);font-family:var(--serif);font-weight:400; font-size:var(--t-xl);line-height:1.2;scroll-margin-top:var(--s5)} .g-doc h2 .no{color:var(--terracotta);margin-right:.4em;font-variant-numeric:tabular-nums} .g-doc h3{margin:var(--s5) 0 var(--s2);font-size:var(--t-md);font-weight:400;color:var(--ink)} .g-doc p,.g-doc li{font-size:17px;line-height:1.65;color:var(--ink)} .g-doc p{margin:0 0 var(--s4)} .g-doc ul,.g-doc ol{margin:0 0 var(--s4);padding-left:1.3em} .g-doc li{margin:0 0 var(--s2)} .g-doc a{border-bottom:1px solid var(--hair)} .g-doc a:hover{border-bottom-color:var(--ink)} .g-doc table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:var(--t-sm);line-height:1.5} .g-doc th,.g-doc td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4) var(--s3) 0; border-top:1px solid var(--hair)} .g-doc th{font-weight:400;color:var(--secondary);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase} .g-doc .pay{margin:var(--s5) 0;padding:var(--s5) var(--s6);border:1px solid var(--ink); display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s5);align-items:center} .g-doc .pay .k{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)} .g-doc .pay .v{font-family:var(--serif);font-size:var(--t-xl);margin-top:4px} .g-doc .warn{padding:var(--s4) var(--s5);background:#FBF1E8;border-left:2px solid var(--terracotta)} .g-doc .hub{display:grid;gap:0;margin-top:var(--s6)} .g-doc .hub a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:baseline; padding:var(--s5) 0;border-top:1px solid var(--hair);border-bottom:0} .g-doc .hub a:last-child{border-bottom:1px solid var(--hair)} .g-doc .hub .nm{font-family:var(--serif);font-size:var(--t-2xl);line-height:1.1} .g-doc .hub .ds{display:block;margin-top:var(--s2);font-size:var(--t-sm);color:var(--secondary)} .g-doc .hub .go{font-size:var(--t-sm);color:var(--secondary)} /* незаповнені реквізити видно одразу — їх треба вписати перед публікацією */ mark.todo{background:#FFF1B8;box-shadow:none;padding:0 .25em;border-radius:2px; outline:1px dashed #C98A2C;color:var(--ink)} @media (min-width:1100px){ .g-doc h1{font-size:clamp(48px,4.4vw,72px)} .g-doc h2{font-size:24px;font-weight:400;letter-spacing:-.02em} } @media (max-width:900px){ .g-doc{padding:var(--s6) 0 var(--s8)} .g-doc .toc{position:static;padding:0 var(--s5);margin-bottom:var(--s6)} .g-doc .toc .sec-links{display:none} .g-doc .toc .docs{margin-top:0} .g-doc article{grid-column:auto;padding:0 var(--s5)} .g-doc .short{padding:var(--s4) var(--s5)} .g-doc p,.g-doc li{font-size:var(--t-md)} .g-doc .pay{grid-template-columns:1fr} .g-doc table,.g-doc thead,.g-doc tbody,.g-doc tr,.g-doc th,.g-doc td{display:block} .g-doc thead{display:none} .g-doc td{border-top:0;padding:2px 0} .g-doc tr{border-top:1px solid var(--hair);padding:var(--s3) 0} .g-doc td:first-child{color:var(--secondary);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase} } /* ══ УКАЗАТЕЛЬ АВТОРІВ НА ГОЛОВНІЙ (усі ширини) ══════════════════ Чорна стіна імен, як дошка дарувальників у мармурі: усі автори латиницею, суцільним рядком, за першою літерою прізвища. Клік — одразу на сторінку автора; поле пошуку звужує стіну на льоту, а Enter відкриває першого, хто лишився. Фон на всю ширину вікна, хоча секція живе всередині .stage з max-width. */ .g-ix{position:relative;background:#000;color:var(--foot-ink); box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax); margin-top:var(--s9);padding:var(--s9) calc(var(--edge) + var(--gutter)) var(--s9); scroll-margin-top:0} .g-ix-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:var(--s6); align-items:end;padding-bottom:var(--s6);border-bottom:1px solid var(--foot-rule)} .g-ix-k{display:block;margin-bottom:var(--s4);font-size:var(--t-xs);letter-spacing:.3em; text-transform:uppercase;color:var(--foot-dim)} .g-ix h2{margin:0;font-weight:300; font-size:clamp(38px,4.6vw,76px);line-height:1;letter-spacing:-.035em;color:var(--foot-ink)} .g-ix-sub{margin:var(--s4) 0 0;font-family:var(--serif);font-size:var(--t-lg);color:var(--foot-mute)} .g-ix-tools{display:grid;gap:var(--s4)} .g-ix-find span{display:block;margin-bottom:var(--s2);font-size:var(--t-xs);letter-spacing:.16em; text-transform:uppercase;color:var(--foot-dim)} .g-ix-find input{width:100%;box-sizing:border-box;background:transparent;border:0; border-bottom:1px solid var(--foot-mute);padding:var(--s3) 0;border-radius:0; font-size:22px;font-weight:300;color:var(--foot-ink);-webkit-appearance:none} .g-ix-find input::placeholder{color:rgba(247,238,227,.38)} .g-ix-find input:focus{outline:none;border-bottom-color:var(--foot-ink)} .g-ix-dice{justify-self:start;font-size:var(--t-sm);color:var(--foot-mute); border-bottom:1px solid var(--foot-rule)} .g-ix-az{display:flex;flex-wrap:wrap;gap:4px 2px;padding:var(--s5) 0; border-bottom:1px solid var(--foot-rule)} .g-ix-az a{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center; font-size:15px;color:var(--foot-mute);border-radius:50%; transition:background .18s var(--ease),color .18s var(--ease)} .g-ix-body{padding-top:var(--s5)} /* буква висить ліворуч, як у словнику: рядки імен не переносяться під неї */ .g-ix-l{position:relative;margin:0;padding:var(--s3) 0 var(--s3) 72px; font-size:17px;font-weight:350;line-height:1.95;border-bottom:1px solid rgba(217,181,149,.14);scroll-margin-top:var(--s5)} .g-ix-l b{position:absolute;left:0;top:var(--s3);font-weight:200;font-size:44px; line-height:1;color:var(--terracotta)} .g-ix-l a{color:var(--foot-ink);white-space:nowrap;transition:color .15s var(--ease)} .g-ix-l a::after{content:"·";margin:0 .55em;color:rgba(217,181,149,.42)} .g-ix-l a:last-child::after,.g-ix-l a.is-last::after{content:none} .g-ix-l a:focus-visible{outline:1px solid var(--foot-ink);outline-offset:3px} .g-ix-none{margin:var(--s5) 0 0;font-family:var(--serif);font-size:var(--t-lg);color:var(--foot-mute)} .g-ix-none a{color:var(--foot-ink);border-bottom:1px solid var(--foot-rule)} .g-ix [hidden]{display:none!important} @media (hover:hover) and (pointer:fine){ .g-ix-l a:hover{color:#E58F63} .g-ix-az a:hover{background:var(--foot-ink);color:#000} .g-ix-dice:hover{color:var(--foot-ink);border-bottom-color:var(--foot-ink)} } @media (max-width:900px){ .g-ix{margin-top:var(--s7);padding:var(--s8) var(--s5)} .g-ix-head{grid-template-columns:1fr;gap:var(--s5)} .g-ix-find input{font-size:21px} .g-ix-az a{min-width:32px;min-height:32px;font-size:18px} .g-ix-l{font-size:16px;line-height:1.8;padding-left:44px} .g-ix-l b{font-size:32px} .g-ix-l a{white-space:normal} } @media (max-width:420px){ .g-ix{padding-left:16px;padding-right:16px} } /* ══ ТЕЛЕФОН І ПЛАНШЕТ ═══════════════════════════════════════════ Та сама нічна будова, лише в одну колонку й дрібніше. */ @media (max-width:1099px){ .hero-copy.has-duomo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;min-height:0; padding:var(--s5) 0 var(--s7);column-gap:0} .g-duomo{grid-column:1;grid-row:1;padding:0 var(--s5) var(--s6)} .duomo{max-height:none} .has-duomo .hero-head{grid-column:1;grid-row:2;padding:0 var(--s5)} .has-duomo .hero-side{grid-column:1;grid-row:3;padding:var(--s5) var(--s5) 0} .g-duomo figcaption{font-size:10px} .g-frieze-head{padding:0 var(--s5) var(--s4)} .g-frieze-rail{padding:36px 0 26px} .g-frieze-track{gap:34px;animation-duration:140s} .gf img{height:112px;max-width:170px} .gf-l{display:none} .quicknav-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 var(--s5) var(--s7)} .qn,.qn:first-child,.qn:last-child,.g-night .qn,.g-night .qn:first-child,.g-night .qn:last-child{ min-height:118px;padding:0 6px 16px;border-top:1px solid rgba(243,236,226,.16)} .qn:first-child,.qn:nth-child(2){border-top:1px solid rgba(243,236,226,.16)} .qn-t,.g-night .qn-t{font-size:15px;margin-top:6px} .qn::before{width:10px;height:12px;margin-left:-5px} .director{padding:var(--s7) 0} .director .inC{grid-column:auto;padding:0 var(--s5)} .dir-quote{font-size:clamp(28px,7.4vw,40px);max-width:none} .dir-letter,.dir-letter.is-open{columns:1;margin-top:var(--s5)} .dir-band::after{font-size:260px;right:2vw} .dir-toggle{margin-left:0} .opencall-feature .inB{padding:var(--s5) var(--s5) var(--s6)} .g-oc-arch{width:min(78%,300px)} .g-aq{padding:var(--s6) var(--s5) var(--s5)} .g-aq figcaption{grid-template-columns:1fr;gap:var(--s2)} .g-aq .t{font-size:18px} .g-aq .m{text-align:left} figure.work{--p:22px;--t:96px;--av:13px} .keywork{padding:var(--s6) var(--s5) 0} .keywork .plate,.work-plate{margin:16px} } /* ══ ЕЛЕГАНТНО: менше написів, більше повітря ════════════════════ Замість плаката — симетрична композиція, як фасад: назва широкими тонкими капітелями, під нею собор, і нічого зайвого. */ :root{--wide:normal} .wordmark{font-stretch:var(--wide);font-weight:300;letter-spacing:.34em} .sec-title,.g-ix h2,.site-foot h2,.hall-hero h1,.artist-hero h1,.ex-hero h1{ font-stretch:var(--wide);text-transform:uppercase;font-weight:200;letter-spacing:.04em} .sec-title{font-size:18px;letter-spacing:.16em} .sec-title::before{display:none} .site-foot h2{letter-spacing:.2em} .hall-hero h1,.artist-hero h1,.ex-hero h1{font-size:clamp(30px,3.4vw,58px);line-height:1.08} .g-ix h2{font-size:clamp(26px,3vw,48px);line-height:1.1} .hall-name{font-weight:300;letter-spacing:-.02em} .qn-t,.g-night .qn-t{font-stretch:var(--wide)} /* тихі блоки: без підписів над фризом, під акведуком, біля листа */ .g-frieze-head{display:none} .g-aq figcaption{display:none} .director .dir-kicker,.director .dir-when,.director .dir-byline,.dir-sign-meta{display:none} .dir-letter:not(.is-open){display:none} @media (min-width:1100px){ /* ── перший екран: назва, собор, один вхід ───────────────────── */ .hero-copy.has-duomo{display:block!important;position:relative;height:calc(100vh - 66px);min-height:720px;max-height:1060px; padding:0;overflow:hidden} .hero-copy.has-duomo>.hero-head,.hero-copy.has-duomo>.hero-side,.hero-copy.has-duomo>.g-duomo{grid-column:auto;grid-row:auto; align-self:stretch;justify-self:stretch} /* Chrome вирівнює й абсолютні блоки: інакше старе align-self:end стискає їх у нуль */ .hero-copy.has-duomo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(50% 50% at 50% 66%,rgba(182,85,47,.09),rgba(182,85,47,0) 70%)} .has-duomo .hero-side{display:none} .has-duomo .g-duomo{position:absolute;z-index:1;left:50%;bottom:92px;height:calc(100% - 300px); transform:translateX(-50%);padding:0;margin:0} .has-duomo .g-duomo .duomo{height:100%;width:auto;max-height:none} .has-duomo .g-duomo figcaption{display:none} .has-duomo .g-duomo .credit{position:absolute;left:50%;transform:translateX(-50%);top:auto;bottom:-78px;height:auto; width:max-content;margin:0;font-size:9px;letter-spacing:.06em;opacity:.35;align-self:auto} .has-duomo .hero-cta{bottom:44px} .has-duomo .hero-head{position:absolute;inset:0;z-index:2;padding:0;pointer-events:none} .has-duomo .hero-head a{pointer-events:auto} .has-duomo .hero-kicker{display:none} .has-duomo .hero-title{position:absolute;left:0;right:0;top:clamp(48px,7vh,84px);margin:0 auto;max-width:none;text-align:center; font-stretch:var(--wide);text-transform:uppercase;font-weight:200;font-size:clamp(28px,3vw,54px); line-height:1.16;letter-spacing:.08em;color:#FBF6EE} .has-duomo .hero-title span{display:block} .has-duomo .hero-title em{font-style:normal;color:#E9A27C} .has-duomo .hero-cta{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);margin:0} .has-duomo .hero-cta .pill-ghost{display:none} .has-duomo .hero-cta .pill{background:none;border:0;padding:0;border-bottom:1px solid rgba(243,236,226,.35);border-radius:0; font-stretch:var(--wide);text-transform:uppercase;font-size:11px;letter-spacing:.32em;color:var(--ink)} /* ── входи: одна аркада, лише назви ──────────────────────────── */ .quicknav-in{gap:0;padding:28px calc(var(--edge) + var(--gutter)) var(--s8); background: linear-gradient(to bottom,var(--eng) 0 1px,transparent 1px 6px,var(--eng-soft) 6px 7px,transparent 7px) 0 0 / 100% 8px no-repeat content-box, linear-gradient(to top,var(--eng) 0 1px,transparent 1px 8px,var(--eng-soft) 8px 9px,transparent 9px) 0 100% / 100% 10px no-repeat content-box} .qn,.qn:first-child,.qn:last-child,.g-night .qn,.g-night .qn:first-child,.g-night .qn:last-child{ min-height:250px;margin:0 16px 10px;padding:0 10px 40px;background:var(--paper); border:1px solid var(--eng);border-bottom:0;border-radius:999px 999px 0 0; box-shadow:0 0 0 7px var(--paper),0 0 0 8px var(--eng-soft);transform:none} .g-night .qn::before{top:-9px;width:18px;height:22px;margin-left:-9px;background:var(--paper);border:1px solid var(--eng);border-top:0} .qn-n{display:none} .qn-t,.g-night .qn-t{margin:0;font-size:12px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:var(--ink)} @media (hover:hover) and (pointer:fine){ .g-night .qn:hover{border-color:rgba(243,236,226,.6);transform:none;background:var(--paper)} } /* ── слово редакції: знак, цитата, підпис ────────────────────── */ .dir-band.g-night::after{display:none} .director{display:block;padding:var(--s9) 0 calc(var(--s9) + 24px)} .director .dir-aside{position:static;text-align:center;padding:0} .director .dir-aside::before{content:"";display:block;width:34px;height:22px;margin:0 auto; border:1px solid var(--eng);border-bottom:0;border-radius:999px 999px 0 0} .director .inC{padding:0;margin:var(--s6) auto 0;max-width:1040px;text-align:center} .dir-quote{max-width:none;margin:0 auto;font-weight:300;font-size:clamp(34px,3.4vw,58px);line-height:1.12;letter-spacing:-.025em} .dir-letter.is-open{max-width:62ch;margin:var(--s6) auto 0;text-align:left;font-size:16px;columns:1} .dir-toggle{display:block;margin:var(--s6) auto 0;font-stretch:var(--wide);text-transform:uppercase;font-size:10px;letter-spacing:.3em; color:var(--secondary);border-bottom-color:rgba(243,236,226,.25)} .dir-sign{justify-content:center;flex-direction:column;align-items:center;border-top:0;margin-top:var(--s5);padding-top:0} .dir-signature{font-style:normal;font-stretch:var(--wide);text-transform:uppercase;font-size:11px;font-weight:400; letter-spacing:.34em;color:var(--secondary)} } /* ══ ОФІЦІЙНІШЕ: шапка як у великого музею; без стрічки й арок ═══ Прибрано «est. 2026 · a division of the journal»; назва по центру широкими капітелями, меню — дрібні капітелі з розрядкою. Рухомий фриз і арки-входи з головної зняті (24.09.2026): меню шапки їх дублює. */ .g-frieze,.quicknav{display:none!important} .header .inB,.brandstack{display:none!important} .headband{border-bottom:1px solid rgba(243,236,226,.12)} .header .inC a,.topnav a{font-stretch:var(--wide);text-transform:uppercase;font-size:10px;font-weight:400;letter-spacing:.3em} @media (min-width:901px){ .header{display:flex!important;align-items:center;justify-content:flex-end;position:relative;min-height:76px} .header .inA{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0!important;background:none!important} .wordmark{font-size:17px;letter-spacing:.42em;margin-right:-.42em} .header .inC{padding:0 calc(var(--edge) + var(--gutter))!important;gap:34px!important} } @media (max-width:900px){ .wordmark{font-size:16px;letter-spacing:.36em} .header .inC{gap:22px!important} } /* телефон: той самий спокійний перший екран — назва, собор, один вхід */ @media (max-width:1099px){ .has-duomo .hero-kicker,.has-duomo .g-duomo figcaption,.has-duomo .hero-cta .pill-ghost,.has-duomo .hero-side{display:none} .hero-copy.has-duomo{padding:var(--s6) 0 var(--s7);text-align:center} .has-duomo .hero-head{grid-row:1;padding:0 var(--s5) var(--s5)} .g-duomo{grid-row:2;padding:0 var(--s5)} .has-duomo .hero-title{margin:0 auto;font-stretch:var(--wide);text-transform:uppercase;font-weight:200; font-size:clamp(15px,4.3vw,24px);line-height:1.3;letter-spacing:.07em} .has-duomo .hero-title span{display:block} .has-duomo .hero-title em{font-style:normal;color:#E9A27C} .has-duomo .hero-cta .pill{background:none;border:0;border-bottom:1px solid rgba(243,236,226,.35);border-radius:0;padding:0 0 2px; font-stretch:var(--wide);text-transform:uppercase;font-size:10px;letter-spacing:.3em;color:var(--ink)} .has-duomo .g-duomo .credit{text-align:center;font-size:9px;opacity:.35;margin-top:8px} } @media (max-width:1099px){ .has-duomo .hero-cta{justify-content:center;display:flex} .has-duomo .hero-title{max-width:none} .dir-band::after{display:none!important} } /* ══ ВЛАСНЕ КРЕСЛЕННЯ СОБОРУ ══════════════════════════════════════ Контури кресляться рейсфедером, різьба проступає смугами знизу вгору, кладка мармуру — найостанніша і найтихіша, наприкінці спалахує позолочена статуя на вершині щипця. */ .duomo-drawn .main path{stroke-opacity:.92} .duomo-drawn .det path{stroke-opacity:.5} .duomo-drawn .hair path{stroke-opacity:.11} .duomo-drawn .gold{fill:#D9A441;stroke:none} html.g-js .duomo-drawn .main path{stroke-dasharray:1;stroke-dashoffset:1; animation:g-draw 2.4s var(--ease-out) calc(var(--d) * 1ms) forwards} html.g-js .duomo-drawn .hair{opacity:0;animation:g-fade 2s var(--ease) 2.6s forwards} html.g-js .duomo-drawn .gold{opacity:0;animation:g-gold2 1.6s var(--ease-out) 3.1s forwards} @keyframes g-gold2{0%{opacity:0}60%{opacity:1;filter:drop-shadow(0 0 8px rgba(217,164,65,.9))} 100%{opacity:1;filter:drop-shadow(0 0 3px rgba(217,164,65,.55))}} @media (prefers-reduced-motion:reduce){ html.g-js .duomo-drawn .main path,html.g-js .duomo-drawn .hair,html.g-js .duomo-drawn .gold{animation:none;stroke-dashoffset:0;opacity:1} } /* заголовок першого екрана — римські капітелі з розрядкою */ .has-duomo .hero-title{letter-spacing:.16em;line-height:1.35} @media (min-width:1100px){ .has-duomo .hero-title{font-size:clamp(20px,2vw,36px);top:clamp(40px,5vh,64px)} .has-duomo .g-duomo{height:calc(100% - 200px);bottom:78px} .has-duomo .hero-cta{bottom:30px} } .wordmark{letter-spacing:.46em} /* на телефоні лупи немає, фото не показується — підпис до нього зайвий */ @media (max-width:1099px),(hover:none){ .has-duomo .g-duomo .credit{display:none} } /* ══ ОДИН ШРИФТ, БЕЗ КУРСИВУ (24.09.2026) ═════════════════════════ Tenor Sans має лише пряме накреслення; курсив браузер домальовував би косо. Тому нахил вимкнено скрізь, включно з , , . */ html body *,html body *::before,html body *::after,html body ::placeholder,html body ::marker{ font-style:normal!important;font-synthesis:none!important} /* ══ ПЕРШИЙ ЕКРАН: ПОЗДОВЖНІЙ РОЗРІЗ ПАНТЕОНУ ══════════════════════ Креслення генерує grand/make_pantheon.py. Пошé штрихується, за колонами заливка кольором аркуша, побудова теракотова пунктиром, з окулуса по задній стіні повзе сонячна пляма (SMIL, 96 с). Лупа (grand.js) показує те саме креслення втричі ближче. */ .plate{color:#EFE6D8} .plate .main .cut{stroke-opacity:1} .plate .hatch path{stroke-opacity:.2;stroke-width:.8} .plate .hair path{stroke-opacity:.13} .plate .occ path{fill:var(--paper,#0E0C0B);stroke:none} .plate .con path{stroke:#E9A27C;stroke-opacity:.32;stroke-dasharray:7 4 1 4} .plate .ann path{stroke-opacity:.42} .plate .ann text{fill:currentColor;stroke:none;opacity:.55;letter-spacing:.22em} .plate .ann .ttl{opacity:.8;letter-spacing:.34em} .plate .ann .con-t{fill:#E9A27C;opacity:.7} .plate .gold path{fill:#D9A441;stroke:none} .plate .sun .beam{fill:url(#pl-beam);stroke:none;mix-blend-mode:screen} .plate .sun .spot{fill:url(#pl-spot);stroke:none;mix-blend-mode:screen} .plate .lens-g,.plate .lens-ring{display:none} .plate.lens-on .lens-g,.plate.lens-on .lens-ring{display:inline} .plate .lens-bg{fill:var(--paper,#0E0C0B);stroke:none} .plate .lens-ring{fill:none;stroke:#E9A27C;stroke-opacity:.75;stroke-width:1;vector-effect:non-scaling-stroke} .plate .lens-use path{vector-effect:non-scaling-stroke} html.g-js .plate .hatch,html.g-js .plate .occ{opacity:0;animation:g-fade 1.6s var(--ease) .5s forwards} html.g-js .plate .hair{opacity:0;animation:g-fade 2s var(--ease) 2.2s forwards} html.g-js .plate .con{opacity:0;animation:g-fade 2.2s var(--ease) 2.4s forwards} html.g-js .plate .ann{opacity:0;animation:g-fade 1.8s var(--ease) 2.9s forwards} html.g-js .plate .sun{opacity:0;animation:g-fade 3s var(--ease) 3.4s forwards} html.g-js .plate .gold{opacity:0;animation:g-gold2 1.6s var(--ease-out) 3.1s forwards} .plate.is-done *{animation:none!important} .plate.is-done .main path,.plate.is-done .sil,.plate.is-done .ground{stroke-dashoffset:0!important} .plate.is-done .det>g,.plate.is-done .hatch,.plate.is-done .occ,.plate.is-done .hair,.plate.is-done .con, .plate.is-done .ann,.plate.is-done .sun,.plate.is-done .gold{opacity:1!important} @media (prefers-reduced-motion:reduce){ html.g-js .plate *{animation:none!important;stroke-dashoffset:0!important} html.g-js .plate .hatch,html.g-js .plate .occ,html.g-js .plate .hair,html.g-js .plate .con,html.g-js .plate .ann, html.g-js .plate .gold,html.g-js .plate .det>g{opacity:1!important} .plate .sun{display:none} } @media (min-width:1100px){ .has-duomo .g-plate{aspect-ratio:998/586;max-width:calc(100vw - 96px);bottom:70px;height:calc(100% - 190px)} .has-duomo .g-plate .plate{width:100%;height:100%;cursor:crosshair} } /* на вузькому екрані креслення дрібне — тонші тони, щоб кесони не злипались */ @media (max-width:1099px){ .plate .det path{stroke-opacity:.3} .plate .hatch path{stroke-opacity:.11} .plate .main path{stroke-opacity:.75} .plate .ann text{font-size:0} } /* ══ OPEN CALL: файли, папка, кредит, ліцензія, підпис (24.09.2026) ══ */ .oc-form{display:grid;gap:var(--s7);font-size:var(--t-sm)} .oc-step{border:0;margin:0;padding:var(--s5) 0 0;border-top:1px solid var(--rule);min-width:0;display:grid;gap:var(--s4)} .oc-step legend{float:left;width:100%;padding:0;margin:0 0 var(--s4);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)} .oc-step legend+*{clear:left} .oc-n{display:inline-block;min-width:2.4em;color:#E9A27C;letter-spacing:.12em} .oc-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)} .oc-form label{display:grid;gap:var(--s2);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)} .oc-form .oc-wide,.oc-row2 .oc-wide{grid-column:1/-1} .oc-form input:not([type=checkbox]):not([type=radio]),.oc-form select,.oc-form textarea{width:100%;font-size:var(--t-md);line-height:1.45; text-transform:none;letter-spacing:0;color:var(--ink);border:0;border-bottom:1px solid rgba(243,236,226,.35);background:transparent; padding:var(--s2) 0;min-height:43px;border-radius:0} .oc-form textarea{min-height:160px;resize:vertical;border:1px solid rgba(243,236,226,.35);padding:var(--s3)} .oc-form input:focus,.oc-form select:focus,.oc-form textarea:focus{outline:1px solid rgba(243,236,226,.7);outline-offset:4px} .oc-form .oc-bad{outline:1px solid #E07A5F!important;outline-offset:4px} .oc-chars{justify-self:end;font-size:10px;letter-spacing:.1em;color:var(--secondary)} .oc-drop{display:grid;gap:10px;place-items:center;text-align:center;padding:48px 24px;cursor:pointer; border:1px dashed rgba(243,236,226,.35);transition:border-color .2s,background .2s} .oc-drop:hover,.oc-drop:focus-visible,.oc-drop.is-over{border-color:#E9A27C;background:rgba(233,162,124,.06);outline:0} .oc-drop-t{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .oc-drop-t u{text-decoration:none;border-bottom:1px solid #E9A27C} .oc-drop-h{max-width:52ch;font-size:12px;line-height:1.55;color:var(--secondary)} .oc-bar{display:flex;flex-wrap:wrap;align-items:end;gap:14px 22px} .oc-bar[hidden]{display:none} .oc-count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-right:auto;align-self:center} .oc-all{min-width:150px} .oc-link{background:none;border:0;padding:0 0 2px;color:var(--ink);border-bottom:1px solid rgba(243,236,226,.35);cursor:pointer; font-size:10px;letter-spacing:.24em;text-transform:uppercase;justify-self:start} .oc-link:hover{border-color:#E9A27C} .oc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px} .oc-grid:empty{display:none} .oc-card{position:relative;display:grid;align-content:start;gap:8px;padding:0 0 10px;border-bottom:1px solid var(--hair)} .oc-thumb{position:relative;aspect-ratio:4/3;background:#171310;display:grid;place-items:center;overflow:hidden} .oc-thumb img{width:100%;height:100%;object-fit:contain} .oc-no{position:absolute;left:6px;top:6px;font-size:10px;letter-spacing:.14em;color:var(--ink);background:rgba(14,12,11,.7);padding:2px 6px} .oc-meta{display:grid;gap:4px} .oc-meta input{min-height:32px!important;font-size:13px!important;padding:4px 0!important} .oc-two{display:grid;grid-template-columns:.7fr 1.3fr;gap:10px} .oc-state{font-size:10px;letter-spacing:.1em;color:var(--secondary)} .oc-card.is-processing .oc-thumb{animation:oc-pulse 1.2s ease-in-out infinite alternate} @keyframes oc-pulse{to{background:#231d18}} .oc-card.is-error .oc-state{color:#E07A5F} .oc-card.is-error .oc-thumb{outline:1px solid #E07A5F} .oc-card.is-small .oc-state{color:#E9A27C} .oc-tools{position:absolute;right:4px;top:4px;display:flex;gap:2px;opacity:0;transition:opacity .15s} .oc-card:hover .oc-tools,.oc-card:focus-within .oc-tools{opacity:1} .oc-tools button,.oc-x{width:28px;height:28px;border:0;background:rgba(14,12,11,.78);color:var(--ink);cursor:pointer;font-size:14px;line-height:1} .oc-tools button:disabled{opacity:.3;cursor:default} .oc-tools button:hover:not(:disabled),.oc-x:hover{background:#E9A27C;color:#0E0C0B} @media (hover:none){.oc-tools{opacity:1}} .oc-or{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--secondary)} .oc-or::before,.oc-or::after{content:"";flex:1;height:1px;background:var(--hair)} .oc-provider{margin:-8px 0 0;min-height:18px;font-size:12px;color:var(--secondary)} .oc-provider b{font-weight:400;color:#E9A27C;letter-spacing:.06em} .oc-sub{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)} .oc-sub span{margin-left:10px;letter-spacing:.04em;text-transform:none;color:var(--secondary)} .oc-contrib{display:grid;gap:10px} .oc-contrib-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .oc-contrib-list:empty{display:none} .oc-contrib-list li{display:grid;grid-template-columns:1fr 170px 28px;gap:12px;align-items:end} .oc-lics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .oc-form .oc-lic{position:relative;display:grid;gap:6px;align-content:start;padding:14px 14px 16px;border:1px solid var(--hair);cursor:pointer; text-transform:none;letter-spacing:0;transition:border-color .2s,background .2s} .oc-lic input{position:absolute;opacity:0;pointer-events:none} .oc-lic-name{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .oc-lic-text{font-size:12px;line-height:1.5;color:var(--secondary)} .oc-lic:hover{border-color:rgba(243,236,226,.4)} .oc-lic:has(input:checked){border-color:#E9A27C;background:rgba(233,162,124,.07)} .oc-lic:has(input:focus-visible){outline:1px solid #E9A27C;outline-offset:3px} .oc-cc-note{margin:0;font-size:12px;line-height:1.5;color:#E9A27C} .oc-preview{padding:16px 18px;border-left:1px solid #E9A27C;background:rgba(243,236,226,.03)} .oc-preview-t{margin:8px 0 0;display:grid;gap:3px;font-size:13px;line-height:1.45;color:var(--ink)} .oc-preview-t span:first-child{letter-spacing:.14em;text-transform:uppercase} .oc-preview-t span:nth-child(n+3){color:var(--secondary);font-size:12px} .oc-form .oc-check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;text-transform:none;letter-spacing:0; font-size:13px;line-height:1.5;color:var(--soft);cursor:pointer} .oc-check input{width:16px;height:16px;margin:3px 0 0;accent-color:#E9A27C} .oc-check a{color:var(--ink);border-bottom:1px solid rgba(243,236,226,.35)} .oc-sign input{font-size:22px!important;letter-spacing:.06em!important} .oc-signed{margin:0;min-height:18px;font-size:11px;letter-spacing:.12em;color:#E9A27C} .oc-send{display:grid;gap:14px;justify-items:start} .oc-submit{border:1px solid var(--ink);background:var(--ink);color:#0E0C0B;padding:14px 26px;cursor:pointer;border-radius:999px; font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:background .2s,color .2s} .oc-submit:hover{background:transparent;color:var(--ink)} .oc-submit:disabled{opacity:.5;cursor:progress} .oc-progress{width:100%;display:grid;gap:6px} .oc-progress[hidden]{display:none} .oc-progress-bar{height:2px;background:var(--hair)} .oc-progress-bar i{display:block;height:100%;width:0;background:#E9A27C;transition:width .25s} .oc-progress-t{font-size:11px;letter-spacing:.1em;color:var(--secondary)} .oc-message{min-height:20px;font-size:13px;line-height:1.5;color:var(--ink)} .oc-message.is-bad{color:#E9A27C} .oc-foot{margin:0;font-size:12px;color:var(--secondary)} .oc-form.is-busy .oc-drop,.oc-form.is-busy .oc-tools{pointer-events:none;opacity:.5} .oc-done{padding:var(--s6) 0;border-top:1px solid var(--rule)} .oc-done h2{margin:10px 0 14px;font-size:clamp(34px,4vw,54px);font-weight:400;letter-spacing:.02em} .oc-done p{max-width:56ch;line-height:1.6;color:var(--soft)} .oc-done b{font-weight:400;color:#E9A27C;letter-spacing:.14em} .oc-form .trap{position:absolute;left:-9999px} .opencall-grid:has(.oc-form){grid-template-columns:minmax(200px,.46fr) minmax(0,1.54fr)} @media (max-width:900px){ .opencall-grid:has(.oc-form){grid-template-columns:1fr} .oc-row2,.oc-lics{grid-template-columns:1fr} .oc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .oc-contrib-list li{grid-template-columns:1fr 120px 28px} .oc-drop{padding:34px 16px} } /* open call: форма на всю ширину двох правих колонок — сітці з 50 кадрів тісно в одній */ @media (min-width:901px){ .opencall:has(.oc-form) .inB{display:none} .opencall:has(.oc-form) .inC{grid-column:2 / -1;max-width:1180px;padding-right:calc(var(--edge,24px) + var(--gutter,24px))} .opencall-grid:has(.oc-form){grid-template-columns:minmax(220px,300px) minmax(0,1fr)} body:has(.oc-form) .lines i:nth-child(3){display:none} }