/* Viki Yoga Club · «Щоденник»: редакційна сітка 12 колонок, папір і чорнило, темні сцени для цитати і вступу */
@font-face{font-family:'Oranienbaum';src:url(fonts/oran-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:'Oranienbaum';src:url(fonts/oran-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:'Golos Text';src:url(fonts/golos-cyr.woff2) format('woff2');font-weight:400 500;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:'Golos Text';src:url(fonts/golos-lat.woff2) format('woff2');font-weight:400 500;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}

:root{
  --paper:#eef0ea;--paper-2:#e4e7df;--ink:#181c19;--soft:#58615a;--line:#c6ccc2;--sage:#6f7e69;
  --night:#141714;--night-2:#1c201c;--cream:#efede5;--cream-soft:#b9bdb3;
  --d:'Oranienbaum',Georgia,serif;--t:'Golos Text',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,4vw,56px);--sec:clamp(96px,13vw,200px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--t);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}
.skip:focus{left:8px}

.nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);background-color:transparent;transition:background-color .3s;padding-bottom:19px;background-image:linear-gradient(to right,var(--line) calc(var(--gap,-99px) - 4px),transparent calc(var(--gap,-99px) - 4px),transparent calc(var(--gap,-99px) + 4px),var(--line) calc(var(--gap,-99px) + 4px));background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
.nav.is-stuck{background-color:rgba(238,240,234,.92)}   /* фон лише коли прилипла до верху, інакше стежка під нею блідне */
.logo{font-family:var(--d);font-size:22px;text-decoration:none;line-height:1}
.nav nav{display:flex;gap:30px;font-size:14px;color:var(--soft)}
.nav nav a{text-decoration:none;padding:8px 0}
.nav nav a:hover{color:var(--ink)}
.nav .nav-join{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}

.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.h2{font-family:var(--d);font-weight:400;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.h3{font-family:var(--d);font-weight:400;font-size:clamp(28px,3.2vw,48px);line-height:1.15;text-wrap:balance}
.body{max-width:36ch;font-size:18px;line-height:1.7}
.body+.body{margin-top:18px}
.small{font-size:13px;line-height:1.55;color:var(--soft)}
.link{display:inline-block;margin-top:26px;font-size:14px;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
/* зона натискання ≥ 44 px для дрібних посилань, вигляд не змінюється */
.nav .logo,.nav nav a,.link,.foot a{position:relative}
.nav .logo::after,.nav nav a::after,.link::after,.foot a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.sec{padding:var(--sec) var(--gut)}
/* стежка від верху сторінки (під лісом) до вступу; на темних секціях multiply ховає її сама */
main{position:relative}
.trail{position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none;mix-blend-mode:multiply;overflow:visible}
.trail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.trail-ghost{stroke:var(--line);stroke-width:1}
.trail-ink{stroke:var(--ink);stroke-width:1.1}
figcaption{font-size:12px;color:var(--soft);margin-top:10px;letter-spacing:.02em}
.frame{overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}

/* туман: перший екран, WebGL поверх фото, без WebGL лишається просто фото */
.mist{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:transparent;z-index:40}
.mist.has-gl picture{visibility:hidden}
.mist-img,.mist-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mist-cv{opacity:0;transition:opacity 1.6s ease}
.mist-cv.is-on{opacity:1}
.mist-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,16,13,.28) 0%,rgba(12,16,13,0) 22%,rgba(12,16,13,0) 50%,rgba(12,16,13,.5) 100%)}
.mist-copy{position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:clamp(24px,4vh,44px);bottom:clamp(72px,12vh,120px);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:#f4f3ee}
.mist-logo{font-family:var(--d);font-size:24px}
.mist-line{font-family:var(--d);font-size:clamp(46px,6.6vw,112px);line-height:.98;letter-spacing:-.02em;max-width:13ch;text-shadow:0 2px 30px rgba(10,14,11,.35)}
.mist-line span{display:block}
.mist-line span+span{color:rgba(244,243,238,.78)}
.mist-hint{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,243,238,.8)}

/* герой */
.hero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;padding:clamp(24px,4vw,56px) var(--gut) clamp(72px,9vw,140px)}
.issue{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);padding-bottom:17px;background-image:linear-gradient(to right,var(--line) calc(var(--gap,-99px) - 4px),transparent calc(var(--gap,-99px) - 4px),transparent calc(var(--gap,-99px) + 4px),var(--line) calc(var(--gap,-99px) + 4px));background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}   /* риска з проміжком там, де її перетинає стежка */
.hero-title{grid-column:1/-1;grid-row:2;font-family:var(--d);font-weight:400;font-size:clamp(68px,12.4vw,210px);line-height:.9;letter-spacing:-.03em;margin-top:clamp(28px,4vw,56px);position:relative;z-index:2;pointer-events:none}
.hero-title .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .l>span{display:inline-block}
.hero-title .r{padding-left:22%}
.hero-right{grid-column:8/13;grid-row:2/4;align-self:start}
.ph-main{margin-top:clamp(180px,17vw,300px)}
.ph-main .frame{aspect-ratio:3/4}
.ph-side{grid-column:2/5;grid-row:3;margin-top:clamp(40px,5vw,80px);align-self:start}
.ph-side .frame{aspect-ratio:4/5}
/* чайна церемонія гравюрою: предмети окремо, з'їжджаються зліва і стають на чабань */
.hero{overflow-x:clip;position:relative;z-index:4}   /* над стежкою і тоді, коли GSAP фіксує блок окремим шаром */
.ph-side.tea{grid-column:1/7;margin-top:clamp(56px,7vw,110px)}
.tea-set{position:relative;aspect-ratio:1/.86}
.tea-set .t{position:absolute;height:auto;display:block}
.t-tray{left:0;bottom:0;width:100%}
.t-pitcher{left:55%;bottom:56%;width:26%}
.t-teapot{left:6%;bottom:37%;width:48%}
.t-cup-a{left:17%;bottom:31%;width:20%}
.t-cup-b{left:39%;bottom:36%;width:19%}
.t-buddha{left:62%;bottom:41%;width:19%}
.lede{margin-top:clamp(40px,4vw,64px)}   /* під фото пагоди, у правій колонці */
.lede p{font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:32ch}

/* цитата: слова проявляються під час скролу */
.quote{position:relative;z-index:4;height:280vh;background:var(--night);color:var(--cream)}   /* стежка йде під фото й цитатою */
.q-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.q-bg{position:absolute;inset:0}
.q-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.8)}
.q-bg img:first-child{opacity:1}
.q-bg::after{content:"";position:absolute;inset:0;background:rgba(17,19,17,.6)}
.q-text{position:relative;z-index:2;max-width:17ch;padding:0 var(--gut);font-family:var(--d);font-size:clamp(36px,5.6vw,92px);line-height:1.08;text-align:center;text-wrap:balance}
.q-text .w{opacity:.16}
.q-sign{position:absolute;bottom:clamp(28px,6vh,64px);z-index:2;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-soft)}

/* клуб */
.club{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px}
.club .kicker{grid-column:1/4}
.statement{grid-column:1/12;font-family:var(--d);font-weight:400;font-size:clamp(36px,4.8vw,76px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.zoom{grid-column:2/12;margin-top:clamp(56px,7vw,110px)}
.call{background:var(--night);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,23,20,.45)}
.call-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;font-size:12px;color:var(--cream-soft);letter-spacing:.04em}
.call-bar .dots{display:flex;gap:6px}.call-bar .dots i{width:9px;height:9px;border-radius:50%;background:#3a3f3a}
.call-bar .live{margin-left:auto;color:var(--cream)}
.call-bar .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#d9584b;margin-right:8px;vertical-align:1px}
.call img{width:100%}
.facts{grid-column:2/12;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--line);padding-top:28px}
.facts dt{font-family:var(--d);font-size:26px;line-height:1.1;margin-bottom:10px}
.facts dd{font-size:15px;line-height:1.6;color:var(--soft)}

/* фото-есе */
.essay{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;row-gap:0;background:var(--paper-2);overflow-x:clip}
.essay-text{grid-column:1/6;grid-row:1/3;align-self:start}
.essay-text .body{margin-top:28px}
.e1{grid-column:7/11;grid-row:1}.e1 .frame{aspect-ratio:2/3}
.e2{grid-column:10/13;grid-row:2;margin-top:-8vw}.e2 .frame{aspect-ratio:2/3}
.e3{grid-column:2/6;grid-row:3;margin-top:-14vw}.e3 .frame{aspect-ratio:2/3}

/* тиждень як зміст журналу */
.week{max-width:1240px;margin:0 auto}
.week-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(36px,5vw,64px)}
.week-head .kicker{flex-basis:100%;margin-bottom:0}
.tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:30px;padding:7px 14px;color:var(--soft)}
.toc{list-style:none;border-top:1px solid var(--ink)}
.toc li{display:grid;grid-template-columns:200px 90px 1fr auto;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.toc .d{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.toc .t{font-variant-numeric:tabular-nums;font-size:17px}
.toc .n{font-family:var(--d);font-size:clamp(28px,3vw,44px);line-height:1.1}
.toc .w{font-size:15px;color:var(--soft);text-align:right}
.week .small{margin-top:20px}

/* про мене */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;align-items:start}
.a-photo{grid-column:1/6}.a-photo .frame{aspect-ratio:2/3}
.a-text{grid-column:7/12;padding-top:clamp(20px,6vw,100px)}
.a-text .h2{margin-bottom:32px}

.edu{margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.edu summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding:16px 0;font-size:15px;min-height:44px;align-items:center}
.edu summary::-webkit-details-marker{display:none}
.edu summary::after{content:"+";font-size:20px;color:var(--soft)}
.edu[open] summary::after{content:"−"}
.edu ul{list-style:none;padding:0 0 18px}
.edu li{font-size:15px;line-height:1.6;color:var(--soft);padding:6px 0}
.voice{display:flex;align-items:center;gap:16px;margin-top:30px}
.voice[hidden]{display:none}
.voice-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--ink);background:none;display:grid;place-items:center;cursor:pointer}
.voice-ico{width:0;height:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.voice-t{font-family:var(--d);font-size:24px;line-height:1.1}

/* слова учасників */
.voices{max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.pull{max-width:min(860px,68%);margin-top:clamp(56px,7vw,110px)}
.pull-r{margin-left:auto;text-align:right}
.pull blockquote{font-family:var(--d);font-size:clamp(30px,3.7vw,58px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.pull figcaption{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px;color:var(--ink)}
.pull-r figcaption{justify-content:flex-end}
.pull figcaption img{width:auto;height:64px;border-radius:6px;border:1px solid var(--line)}
.pull figcaption small{color:var(--soft);font-size:12px}

/* офлайн */
.offline{padding-left:0;padding-right:0}
.off-head{padding:0 var(--gut);max-width:1240px;margin:0 auto}
.off-head .h3{max-width:30ch}
.strip{display:flex;gap:20px;overflow-x:auto;padding:clamp(40px,5vw,72px) var(--gut) 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:none;scroll-snap-align:start}
.strip img{height:clamp(300px,34vw,520px);width:auto;object-fit:cover}

/* вступ */
.join{background:var(--night);color:var(--cream);padding:var(--sec) var(--gut)}
.join-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,140px);align-items:start}
.join .kicker,.join .small{color:var(--cream-soft)}
.join .h2{margin-bottom:28px}
.form{display:flex;flex-direction:column}
.form label{font-size:13px;letter-spacing:.06em;color:var(--cream-soft);margin:22px 0 8px}
.form label:first-child{margin-top:0}
.form input{font:inherit;font-size:18px;color:var(--cream);background:transparent;border:0;border-bottom:1px solid #4b514b;padding:12px 0;border-radius:0;min-height:48px}
.form input:focus{outline:none;border-bottom-color:var(--cream)}
.form input::placeholder{color:#6f756f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{margin-top:36px;font:inherit;font-size:16px;letter-spacing:.04em;color:var(--night);background:var(--cream);border:0;border-radius:40px;padding:18px 30px;min-height:56px;cursor:pointer;transition:background .3s}
.btn:hover{background:#fff}
.btn[disabled]{opacity:.55;cursor:default}
.f-msg{min-height:24px;margin:16px 0 10px;font-size:15px}
.f-msg a{color:var(--cream)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;align-items:baseline;padding:36px var(--gut) 44px;background:var(--night);color:var(--cream-soft);font-size:14px;border-top:1px solid #2a2f2a}
.foot .logo{color:var(--cream)}

@media (max-width:900px){
  .facts{grid-template-columns:1fr 1fr}
  .toc li{grid-template-columns:1fr auto;gap:6px 16px}
  .toc .n{grid-column:1/-1}.toc .w{grid-column:1/-1;text-align:left}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav nav a:not(.nav-join){display:none}
  .issue span:last-child{display:none}
  .hero-title{font-size:clamp(58px,17vw,84px)}
  .hero-title .r{padding-left:14%}
  .hero-right{display:contents}
  .ph-main{grid-column:3/13;grid-row:3;margin-top:28px}
  .ph-side.tea{grid-column:1/-1;grid-row:5;margin-top:44px;width:92%}
  .lede{grid-column:1/-1;grid-row:4;margin-top:clamp(36px,4vw,64px)}
  .statement,.zoom,.facts{grid-column:1/-1}
  .club .kicker{grid-column:1/-1}
  .facts{grid-template-columns:1fr;gap:24px}
  .call{border-radius:10px}
  .essay-text{grid-column:1/-1;grid-row:1;position:static;margin-bottom:40px}
  .e1{grid-column:1/9;grid-row:2}
  .e2{grid-column:7/13;grid-row:3;margin-top:-16vw}
  .e3{grid-column:2/10;grid-row:4;margin-top:24px}
  .a-photo{grid-column:1/-1}
  .a-text{grid-column:1/-1;padding-top:40px}
  .pull,.pull-r{max-width:none;text-align:left;margin-left:0}
  .pull-r figcaption{justify-content:flex-start}
  .strip img{height:300px}
  .join-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.q-text .w{opacity:1}}

/* екран завантаження (assets/loader.js, ?loader=1|2|3) */
html.is-loading{overflow:hidden}
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:opacity 1.2s ease}
.loader.is-out{opacity:0;pointer-events:none}
.ld-mark{position:absolute;left:0;right:0;bottom:max(32px,6vh);text-align:center;font-family:var(--d);font-size:20px}
.ld-mark-c{top:50%;bottom:auto;transform:translateY(-50%);font-size:19px}
.ld-breath{display:grid;justify-items:center;gap:40px}
.ld-ring{width:150px;height:150px;border:1px solid var(--ink);border-radius:50%;animation:ld-breath 8s ease-in-out infinite}
@keyframes ld-breath{0%,100%{transform:scale(.5)}50%{transform:scale(1)}}
.ld-word{font-family:var(--d);font-size:22px;color:var(--soft)}
.loader-1.is-out .ld-ring{animation:none;transform:scale(14);opacity:0;transition:transform 1.4s cubic-bezier(.6,0,.4,1),opacity 1.4s ease}
.ld-enso{width:min(58vw,250px);height:auto}
.ld-enso path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.loader-2.is-out .ld-enso{transform:scale(1.08);transition:transform 1.4s ease}
.ld-trail{position:absolute;inset:0;width:100%;height:100%}
.ld-trail path{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round}
.ld-trail .ld-ghost{stroke:var(--line)}
.ld-pct{position:absolute;left:0;top:0;font-size:12px;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--soft)}
.loader-3{transition:transform 1.3s cubic-bezier(.7,0,.3,1)}
.loader-3.is-out{opacity:1;transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.ld-ring{animation:none;transform:scale(.8)}.loader,.loader-3{transition:opacity .4s}.loader-3.is-out{transform:none;opacity:0}}