@charset "UTF-8";
/* Встреча 14.11 в Цюрихе. Макет первого экрана сайта лаборатории, вместо бумаги заполняющийся круг
   со страницы встречи 10.10 (zurich/hero-light.css), перекрашенный в палитру сайта: волна ink, заливка forest,
   действие лаймом. Логика круга в orbital.js. 04.11 */
@property --ink-from{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --ink-to{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --fill-angle{syntax:'<angle>';initial-value:0deg;inherits:true}

.orbital-column{position:relative;min-width:0;align-self:center;margin:0 -2%}
/* 04.11: тёмную карточку «Десять мест» справа убрали по просьбе Артёма, первый экран в две колонки */
@media(min-width:1101px){.hero-layout.minimal-hero{grid-template-columns:1fr 1.25fr}}
.orbital{aspect-ratio:1;position:relative;width:100%;max-width:680px;margin:auto;isolation:isolate;--fill-angle:0deg}
.orbital-art{position:absolute;inset:0;mask-image:conic-gradient(#000 0deg var(--fill-angle),transparent var(--fill-angle) 360deg);animation:ring-build 2.6s cubic-bezier(.22,.61,.36,1) both}
.orbital-art>img{width:100%;height:100%;object-fit:contain;animation:ring-turn 120s linear infinite}
.orbital-ink{position:absolute;inset:0;mask-image:conic-gradient(transparent 0 var(--ink-from),#000 calc(var(--ink-from) + 5deg) calc(var(--ink-to) - 5deg),transparent var(--ink-to));transition:--ink-from 1.1s cubic-bezier(.65,0,.35,1),--ink-to 1.1s cubic-bezier(.65,0,.35,1)}
.orbital-ink.no-transition{transition:none}
.orbital-ink img{position:absolute;inset:0;width:100%;height:100%;animation:ring-turn 120s linear infinite}
.orbital-track{position:absolute;inset:7.5%;border:1px solid #01030e1c;border-radius:50%}
.orbital-track::after{content:'';position:absolute;inset:16%;border:1px solid #01030e14;border-radius:50%}
.orbital-fill{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from -90deg,transparent 0deg 175deg,#1832250f 175deg 250deg,transparent 250deg);mask-image:radial-gradient(transparent 53%,#000 54% 70%,transparent 71%);animation:ring-turn 80s linear reverse infinite}
.orbital-ticks{position:absolute;inset:5.7%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#01030e55 0deg .12deg,transparent .12deg 3deg);mask-image:radial-gradient(transparent 68.7%,#000 69% 70%,transparent 70.3%);opacity:.65;animation:ring-turn 140s linear infinite}
.orbital-control{position:absolute;inset:29%;border:0;border-radius:50%;background:#fff;color:#01030e;font-family:Hoves,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:6;text-align:center;overflow:hidden;box-shadow:0 0 0 1px #01030e0f}
.orbital-control>*{flex:none}
.orbital-control:focus-visible{outline:2px solid #01030e;outline-offset:10px}
.orbital-eyebrow{font-size:clamp(9px,.8vw,11px);line-height:1.6;text-transform:uppercase;letter-spacing:.13em;color:#6e6a62}
.orbital-value{font-size:clamp(48px,5.6vw,88px);letter-spacing:-.06em;line-height:1.05;margin:12px 0 6px;display:block;font-weight:300;white-space:nowrap}
.date-slash{color:#183225;padding:0 .01em}
.orbital-value.words{font-size:clamp(30px,3.4vw,52px);white-space:normal;max-width:86%;line-height:1.02}
.orbital-caption{font-size:clamp(12px,1.05vw,15px);color:#6e6a62;line-height:1.5;min-height:22px}
.orbital-play{display:block;position:relative;flex:none;width:44px;height:44px;margin-top:14px;border-radius:50%;background:#eef400;box-shadow:inset 0 2px 4px #fff9,inset 0 -3px 5px #01030e22;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.orbital-play::before{content:'';position:absolute;left:41%;top:34%;width:27%;height:32%;background:#01030e;clip-path:polygon(0 0,100% 50%,0 100%)}
.orbital-hint{font-size:10px;line-height:1.4;color:#6e6a62;margin-top:10px;letter-spacing:.04em}
.orbital.is-pulsing .orbital-value{animation:value-shift .8s cubic-bezier(.22,.61,.36,1)}
.orbital-ripple{position:absolute;inset:29%;border:1.5px solid #183225;border-radius:50%;opacity:0;pointer-events:none;z-index:5}
.orbital.is-pulsing .orbital-ripple{animation:orbit-wave 1.1s ease-out}
.orbit-note{position:absolute;font-size:10px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:#6e6a62;z-index:3}
.note-top{top:4%;left:24%;transform:rotate(-13deg)}
.note-bottom{bottom:6.5%;right:13%;transform:rotate(-26deg)}
.orbital-digits{position:absolute;inset:0;pointer-events:none;z-index:3}
.orbital-digit{position:absolute;left:50%;top:50%;width:24px;margin-left:-12px;text-align:center;font-size:10px;line-height:1;color:#6e6a62;transform:rotate(var(--angle)) translateY(var(--radius)) rotate(calc(-1 * var(--angle)));animation:digit-assemble 2.1s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--delay)}
.orbital-digit:nth-child(3n){color:#183225}
@keyframes ring-build{from{--fill-angle:0deg;transform:rotate(-20deg);opacity:.25}to{--fill-angle:360deg;transform:rotate(0);opacity:1}}
@keyframes ring-turn{to{transform:rotate(360deg)}}
@keyframes digit-assemble{from{opacity:0;transform:rotate(calc(var(--angle) - 80deg)) translateY(-30px) rotate(calc(-1 * var(--angle)));filter:blur(4px)}to{opacity:1;transform:rotate(var(--angle)) translateY(var(--radius)) rotate(calc(-1 * var(--angle)));filter:blur(0)}}
@keyframes orbit-wave{0%{transform:scale(.8);opacity:0}18%{opacity:.6}100%{transform:scale(2.35);opacity:0}}
@keyframes value-shift{0%{opacity:1;transform:translateY(0)}35%{opacity:0;transform:translateY(-12px);filter:blur(4px)}45%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none;filter:blur(0)}}
@media(any-hover:hover){.orbital-control:hover .orbital-play{transform:scale(1.1)}}

/* Ролик */
.ev-lead{max-width:720px;margin-left:auto;margin-right:auto}
.ev-player{position:relative;margin:50px auto 0;max-width:1180px}
/* кнопки ролика как на сайте третьей лаборатории: ролик идёт сам без звука, звук и весь экран по кнопке */
.ev-sound,.ev-full{position:absolute;top:16px;min-height:48px;padding:0 18px;border-radius:12px;border:0;background:#01030ecc;color:#fff;font:inherit;font-size:13px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s ease-in-out}
.ev-sound{right:16px}.ev-full{left:16px}
.ev-sound[aria-pressed="true"]{background:#eef400;color:#01030e}
@media(any-hover:hover){.ev-sound:hover,.ev-full:hover{background:#01030e}.ev-sound[aria-pressed="true"]:hover{background:#eef400}}
.ev-sound:active,.ev-full:active{transform:scale(.95)}
@media(max-width:600px){.ev-sound,.ev-full{top:10px;padding:0 14px;font-size:12px}.ev-sound{right:10px}.ev-full{left:10px}}
.ev-player video{display:block;width:100%;aspect-ratio:16/9;background:#183225;border-radius:24px}

/* Что создадите */
.ev-out{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.ev-out li{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.03em;padding:14px 22px;border:1px solid #ffffff38;border-radius:16px;color:#fff}
.ev-note{margin-top:60px;padding-top:26px;border-top:1px solid #ffffff2a;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ev-note b{font-weight:400;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;color:#eef400}
.ev-note p{font-size:17px;line-height:1.45;color:#ffffffb8;max-width:480px}

/* Как это было */
.ev-photos{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.ev-photos img{display:block;width:100%;height:100%;object-fit:cover;max-height:560px}
.ev-quotes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ev-quotes blockquote{margin:0;background:#f6f6f6;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px}
.ev-quotes p{font-size:19px;line-height:1.4;letter-spacing:-.015em}
.ev-quotes cite{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6e6a62}

/* 04.11, вечер: доказательства. Цифры под роликом, программа по часам, порталы и голосовые участников, ведущий */
.ev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px auto 0;max-width:1180px}
.ev-stats div{border-top:1px solid #ffffff2a;padding-top:18px;display:flex;flex-direction:column;gap:8px}
.ev-stats b{font-weight:300;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.04em;line-height:1;color:#fff}
.ev-stats span{font-size:15px;line-height:1.4;color:#ffffffb8;max-width:260px}

.ev-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:st}
.ev-steps>li{background:#f6f6f6;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.ev-step-time{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#183225}
.ev-steps h3{font-weight:400;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;line-height:1.08;margin-top:24px}
.ev-steps p{font-size:16px;line-height:1.45;color:#6e6a62}

.ev-portals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ev-portals article{display:flex;flex-direction:column;gap:6px}
.ev-portals img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:16px;background:#f6f6f6;margin-bottom:10px}
.ev-portals h3{font-weight:400;font-size:22px;letter-spacing:-.02em}
.ev-portals span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6e6a62}
.ev-portals p{font-size:15px;line-height:1.45;color:#01030e;margin-top:4px}
.ev-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.ev-quote{margin:0;background:#f6f6f6;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:18px}
.ev-quote blockquote{margin:0;font-size:19px;line-height:1.4;letter-spacing:-.015em}
.ev-quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.ev-quote figcaption b{font-weight:400;font-size:17px}
.ev-quote figcaption span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6e6a62}
.ev-voice{display:flex;align-items:center;gap:12px}
.ev-voice-play{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:#01030e;cursor:pointer;position:relative}
.ev-voice-play::before{content:'';position:absolute;left:40%;top:33%;width:30%;height:34%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.ev-voice.is-playing .ev-voice-play::before{clip-path:none;left:37%;width:26%;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.ev-voice-wave{flex:1;height:32px;display:flex;align-items:center;gap:2px;cursor:pointer}
.ev-voice-wave i{flex:1;border-radius:2px;background:#01030e33;min-height:3px}
.ev-voice-wave i.on{background:#183225}
.ev-voice-time{font-size:13px;color:#6e6a62;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
@media(any-hover:hover){.ev-voice-play:hover{background:#183225}}
.ev-voice-play:active{transform:scale(.95)}

.ev-host .ev-host-card{margin-top:28px;grid-template-columns:.7fr 1fr;max-width:1060px}
.ev-host .founder img{aspect-ratio:4/5}

@media(max-width:1100px){
 .ev-portals{grid-template-columns:1fr 1fr}
 .ev-steps{grid-template-columns:1fr}
 .ev-steps h3{margin-top:8px}
 .ev-voices{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .ev-stats{grid-template-columns:1fr;gap:0}
 .ev-stats div{flex-direction:row;align-items:baseline;gap:16px;padding:14px 0}
 .ev-stats b{font-size:40px;min-width:96px}
 .ev-steps,.ev-voices{grid-template-columns:1fr}
 .ev-steps h3{margin-top:8px}
 .ev-portals{grid-template-columns:1fr 1fr;gap:16px 10px}
 .ev-portals p{font-size:14px}
 .ev-host .ev-host-card{grid-template-columns:1fr}
}

@media(max-width:1100px){
 .orbital-column{grid-column:2;margin:0}
}
@media(max-width:760px){
 .orbital-column{grid-column:1/-1;margin:10px -6px 0}
 .orbital-control{inset:27%}
 .orbital-value{font-size:54px;margin-top:8px}
 .orbital-value.words{font-size:30px}
 .orbital-eyebrow,.orbital-hint{font-size:9px}
 .orbital-play{width:36px;height:36px;margin-top:8px}
 .orbit-note{font-size:8px}
 .orbital-digit{font-size:8px}
 .ev-quotes,.ev-photos,.ev-note{grid-template-columns:1fr}
 .ev-player{margin-top:32px}
 .ev-player video{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
 .orbital-art{mask-image:none;animation:none}
 .orbital-art>img,.orbital-ink img,.orbital-fill,.orbital-ticks{animation:none}
 .orbital-digit{animation:none;opacity:1}
 .orbital-ink{transition:none}
}
.ev-host .founder h3{font-size:clamp(32px,3.2vw,48px)}
.ev-host .founder .host-facts{gap:16px;margin-top:28px}
.ev-host .founder .host-facts li{font-size:17px}
.ev-host .founder .host-area{font-size:18px;line-height:1.45}
@media(min-width:761px){.ev-host .founder-body{padding:40px 44px}}
