@font-face{font-family:"Racama";src:url(../fonts/Racama.otf) format("opentype");font-display:swap}
:root{
  --u:min(calc(100vw / 1440),calc(100vh / 900));--ux:calc(100vw / 1440);--uy:calc(100vh / 900);
  --night:#0C0B0A;--coal:#15130F;--txt:#E4DDD5;--cream:#FDF7EC;--milk:#F8F0EA;--cedar:#9C6A50;--amber:#C98A4A;--bark:#2A1D15;--ink:#2B2724;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;--sans:"Racama","Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--night);color:var(--txt);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);cursor:default}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- units ---------- */
.a{position:absolute;left:calc(var(--l,0)*var(--ux));top:calc(var(--t,0)*var(--uy))}
.a.r{left:auto;right:calc(var(--r,0)*var(--ux))}
.a.c{left:calc(50% + (var(--l,0) - 720)*var(--u))}
.a.at{left:calc(var(--x)*var(--ux));transform:translateX(-50%);white-space:nowrap}
.a.cx{left:0;right:0;text-align:center}
.w{width:calc(var(--w)*var(--u))}

/* ---------- type ---------- */
.lbl{font-family:var(--sans);font-size:calc(10.5*var(--u));letter-spacing:.125em;text-transform:uppercase;line-height:1.35}
.lbl.dim{opacity:.55}
.body{font-size:calc(16*var(--u));line-height:1.5}
.small{font-size:calc(14*var(--u));line-height:1.5}
.h1{font-family:var(--serif);font-weight:400;font-size:calc(64*var(--u));line-height:.95;letter-spacing:.05em;text-transform:uppercase}
.h2{font-family:var(--serif);font-weight:400;font-size:calc(56*var(--u));line-height:1.02;letter-spacing:.06em;text-transform:uppercase}
.it{font-family:var(--serif);font-style:italic;font-weight:400;font-size:calc(60*var(--u));line-height:1.05}
.h3{font-family:var(--serif);font-weight:400;font-size:calc(30*var(--u));line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.card{font-family:var(--serif);font-size:calc(22*var(--u));letter-spacing:.1em;text-transform:uppercase;line-height:1.15}
.num{font-family:var(--serif);font-size:calc(40*var(--u));line-height:1}
.ital{font-family:var(--serif);font-style:italic}
.cream{color:var(--cream)}

/* split */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.si{display:inline-block;will-change:transform}

/* ---------- fullpage ---------- */
#pages{position:fixed;inset:0;overflow:hidden}
.sc{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:var(--night)}
.sc.on{visibility:visible}
.bg{position:absolute;inset:0;overflow:hidden}
.bg>.ph{position:absolute;inset:-4%;background-size:cover;background-position:center;will-change:transform}
.shade{position:absolute;inset:0;pointer-events:none}
.stage{position:absolute;left:0;top:0;width:100%;height:100%}
.glow{position:absolute;border-radius:50%;background:var(--amber);filter:blur(calc(120*var(--u)));pointer-events:none}

/* fog */
#fog{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;mix-blend-mode:screen}

/* ---------- header ---------- */
#hdr{position:fixed;left:0;right:0;top:0;height:calc(96*var(--u));z-index:20;pointer-events:none}
#hdr>*{pointer-events:auto}
.logo{position:absolute;left:calc(24*var(--u));top:calc(28*var(--u));width:calc(140*var(--u))}
.nav{position:absolute;left:50%;top:calc(24*var(--u));transform:translateX(-50%);height:calc(47*var(--u));display:flex;align-items:center;border-radius:calc(6*var(--u));
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav a{display:block;width:calc(122*var(--u));text-align:center;font-size:calc(11*var(--u));letter-spacing:.12em;text-transform:uppercase;opacity:.82;transition:opacity .5s}
.nav a:hover,.nav a.act{opacity:1}
.nav .pill{position:absolute;top:calc(6*var(--u));bottom:calc(6*var(--u));width:calc(110*var(--u));border-radius:calc(4*var(--u));background:rgba(255,255,255,.08);transition:transform .9s var(--ease)}
.hr{position:absolute;right:calc(24*var(--u));top:calc(24*var(--u));display:flex;align-items:center;gap:calc(32*var(--u))}
.hr .ph-n{font-size:calc(13*var(--u));letter-spacing:.12em}
.hr .lng{font-size:calc(11*var(--u));letter-spacing:.12em}
.mbtn{width:calc(48*var(--u));height:calc(48*var(--u));border-radius:calc(6*var(--u));background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);position:relative;backdrop-filter:blur(14px)}
.mbtn i{position:absolute;width:calc(3*var(--u));height:calc(3*var(--u));border-radius:50%;background:var(--milk);transition:transform .7s var(--ease)}
.mbtn i:nth-child(1){left:41%;top:41%}.mbtn i:nth-child(2){left:57%;top:41%}.mbtn i:nth-child(3){left:41%;top:57%}.mbtn i:nth-child(4){left:57%;top:57%}
.mbtn:hover i:nth-child(1){transform:translate(-40%,-40%)}.mbtn:hover i:nth-child(2){transform:translate(40%,-40%)}.mbtn:hover i:nth-child(3){transform:translate(-40%,40%)}.mbtn:hover i:nth-child(4){transform:translate(40%,40%)}
body.menu-open .mbtn i{opacity:0}
.mbtn .x{position:absolute;inset:30%;opacity:0;transition:opacity .4s}
.mbtn .x:before,.mbtn .x:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--milk);transform:rotate(45deg)}
.mbtn .x:after{transform:rotate(-45deg)}
body.menu-open .mbtn .x{opacity:1}

/* side progress */
#prog{position:fixed;left:calc(30*var(--u));top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:calc(10*var(--u));align-items:flex-start}
#prog b{display:block;height:1px;width:calc(14*var(--u));background:var(--milk);opacity:.3;transition:width .8s var(--ease),opacity .8s;cursor:pointer;position:relative}
#prog b.on{width:calc(34*var(--u));opacity:.95}
#prog b:after{content:attr(data-n);position:absolute;left:calc(46*var(--u));top:50%;transform:translateY(-50%);white-space:nowrap;font-size:calc(10*var(--u));letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .4s}
#prog b:hover:after{opacity:.7}
#cnt{position:fixed;right:calc(30*var(--u));bottom:calc(30*var(--u));z-index:20;font-family:var(--serif);font-size:calc(18*var(--u));letter-spacing:.06em;display:flex;gap:.4em;align-items:baseline}
#cnt .cur{display:inline-block;overflow:hidden;height:1.1em}
#cnt .cur span{display:block}
#cnt .tot{opacity:.45}

/* ---------- wobble button ---------- */
.wobble-btn{position:absolute;display:block;width:calc(var(--s,180)*var(--u));height:calc(var(--s,180)*var(--u));cursor:pointer}
.wobble-btn canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wobble-btn span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;font-size:calc(var(--f,10.5)*var(--u));letter-spacing:.125em;text-transform:uppercase;line-height:1.35;color:var(--cream);pointer-events:none;transition:letter-spacing .8s var(--ease)}
.wobble-btn:hover span{letter-spacing:.18em}

/* ---------- slice ---------- */
.slice{position:absolute;left:calc(var(--cx,0)*var(--ux) - var(--d)/2*var(--u));top:calc(var(--cy,0)*var(--uy) - var(--d)/2*var(--u));width:calc(var(--d)*var(--u));height:calc(var(--d)*var(--u))}
.slice svg{position:absolute;left:-50%;top:-50%;width:200%;height:200%;overflow:visible;pointer-events:none}
.slice .ring{transform-box:view-box;transform-origin:200px 200px;transition:transform 1.4s var(--ease)}
.slice .rot{transform-box:view-box;transform-origin:200px 200px;animation:rot var(--rd,90s) linear infinite}
.slice .rot.rev{animation-direction:reverse}
.slice .img{transition:opacity 1.1s var(--ease)}
.slice .ph-g{transform-box:view-box;transform-origin:200px 200px;transition:transform 1.4s var(--ease)}
.slice.hov:hover .ph-g,.slice.big .ph-g{transform:scale(1.03)}
.slice.hov:hover .ring.r1,.slice.big .ring.r1{transform:scale(1.03)}
.slice.hov:hover .ring.r2,.slice.big .ring.r2{transform:scale(1.07)}
.slice.hov:hover .ring.r3,.slice.big .ring.r3{transform:scale(1.11)}
.slice.hov:hover .ring.r4,.slice.big .ring.r4{transform:scale(1.15)}
.slice.hov:hover .ring.r5,.slice.big .ring.r5{transform:scale(1.19)}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}

/* ---------- lines ---------- */
.gl{position:absolute;height:1px;background:linear-gradient(90deg,rgba(248,240,234,0),rgba(248,240,234,var(--o,.35)),rgba(248,240,234,0))}

/* ---------- cursor ---------- */
#cur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:0;height:0}
#cur .dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cream);transition:transform .5s var(--ease),opacity .4s}
#cur .lab{position:absolute;width:calc(92*var(--u));height:calc(92*var(--u));margin:calc(-46*var(--u)) 0 0 calc(-46*var(--u));border-radius:50%;background:rgba(253,247,236,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  font-size:calc(10.5*var(--u));letter-spacing:.12em;text-transform:uppercase;transform:scale(0);transition:transform .7s var(--ease)}
#cur .lab small{font-size:.9em;letter-spacing:.3em}
#cur.show .lab{transform:scale(1)}
#cur.show .dot{transform:scale(0)}
@media (hover:none){#cur{display:none}}

/* ---------- section specifics ---------- */
/* hero */
.s-hero .ph{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.prog-card{position:absolute;right:calc(24*var(--ux));top:calc(632*var(--uy));width:calc(459*var(--u));height:calc(184*var(--u));border-radius:calc(8*var(--u));background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden}
.prog-card .pi{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.prog-card .pi.on{opacity:1}
.prog-card .pt{position:absolute;left:calc(28*var(--u));top:calc(26*var(--u));font-family:var(--serif);font-size:calc(17*var(--u));letter-spacing:.1em;text-transform:uppercase}
.prog-card .pd{position:absolute;left:calc(28*var(--u));top:calc(56*var(--u));width:calc(250*var(--u));font-size:calc(12*var(--u));line-height:1.4;opacity:.6}
.prog-card .pp{position:absolute;right:calc(10*var(--u));top:calc(10*var(--u));width:calc(146*var(--u));height:calc(164*var(--u));border-radius:calc(6*var(--u));background-size:cover;background-position:center}
.prog-card .more{position:absolute;left:calc(128*var(--u));top:calc(124*var(--u));height:calc(36*var(--u));display:flex;align-items:center;gap:calc(10*var(--u));font-size:calc(10.5*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.prog-card .more span{position:relative;line-height:1}
.prog-card .more span:after{content:"";position:absolute;left:0;right:0;bottom:calc(-5*var(--u));height:1px;background:currentColor;opacity:.45;transform-origin:left;transition:transform .8s var(--ease),opacity .5s}
.prog-card .more:hover span:after{opacity:.9}
.prog-card .more svg{width:calc(17*var(--u));height:calc(10*var(--u));stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .7s var(--ease)}
.prog-card .more:hover svg{transform:translateX(calc(5*var(--u)))}
.sq{position:absolute;width:calc(36*var(--u));height:calc(36*var(--u));border-radius:calc(4*var(--u));background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .4s}
.sq:hover{background:rgba(255,255,255,.16)}
.sq svg{width:40%;height:40%}
.quick{position:fixed;z-index:20;right:calc(24*var(--ux));top:50%;transform:translateY(-50%);transition:opacity .6s;width:calc(48*var(--u));border-radius:calc(6*var(--u));background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.quick a{display:flex;height:calc(48*var(--u));align-items:center;justify-content:center;position:relative}
.quick a+a{border-top:1px solid rgba(255,255,255,.08)}
.quick svg{width:calc(16*var(--u));height:calc(16*var(--u));fill:var(--milk)}
.quick a span{position:absolute;right:calc(60*var(--u));white-space:nowrap;font-size:calc(11*var(--u));letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateX(10px);transition:all .5s var(--ease);pointer-events:none}
.quick a:hover span{opacity:.9;transform:none}
.carrow{position:absolute;width:calc(56*var(--u));height:calc(56*var(--u));border-radius:50%;border:1px solid rgba(248,240,234,.25);display:flex;align-items:center;justify-content:center;transition:border-color .5s,background .5s}
.carrow:hover{border-color:rgba(248,240,234,.7);background:rgba(248,240,234,.06)}
.carrow svg{width:calc(16*var(--u));height:calc(10*var(--u));stroke:var(--milk);fill:none}

/* about read-dim */
.read .rw{transition:opacity 1.2s var(--ease)}

/* rail */
.rail{position:absolute;left:0;top:0;width:100%;height:100%}
.ri{position:absolute;left:0;top:0;will-change:transform,opacity}
.ri .meta{transition:opacity .8s var(--ease)}

/* pagination */
.pag{position:absolute}
.pag .ln{position:absolute;left:0;right:0;top:0}
.pag .pt{position:absolute;top:0;transform:translateX(-50%);cursor:pointer}
.pag .pt i{position:absolute;left:50%;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--milk);opacity:.4;transition:opacity .6s}
.pag .pt b{position:absolute;left:50%;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1px solid rgba(248,240,234,.8);transform:scale(0);transition:transform .7s var(--ease)}
.pag .pt span{position:absolute;left:50%;top:calc(18*var(--u));transform:translateX(-50%);white-space:nowrap;opacity:.45;transition:opacity .6s}
.pag .pt.on i,.pag .pt.on span{opacity:1}
.pag .pt.on b{transform:scale(1)}

/* programs scale */
.knob{position:absolute;will-change:transform;cursor:grab}
.knob:active{cursor:grabbing}
.mk{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--cream);opacity:.8}
.plab{position:absolute;transform:translateX(-50%);text-align:center;white-space:nowrap;cursor:pointer;transition:opacity .6s}
.plab .p{display:block;margin-top:4px;font-family:var(--serif);font-style:italic;font-size:calc(16*var(--u));opacity:.6;letter-spacing:0;text-transform:none}
.panel>*{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.panel.swap>*{opacity:0;transform:translateY(8px)}
.dots5 i{display:inline-block;width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;border:1px solid rgba(253,247,236,.5);margin-left:calc(8*var(--u));vertical-align:middle}
.dots5 i.f{background:rgba(253,247,236,.9)}

/* houses */
.hcard{position:absolute;right:calc(120*var(--ux));top:calc(140*var(--uy));width:calc(480*var(--u));background:rgba(12,11,10,.86);padding:calc(40*var(--u))}
.hcard .hph{position:relative;height:calc(196*var(--u));margin-top:calc(18*var(--u));overflow:hidden}
.hcard .hph div{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s var(--ease)}
.hcard .hph div.on{opacity:1}
.hcard .hdots{position:absolute;left:0;right:0;bottom:calc(12*var(--u));display:flex;justify-content:center;gap:calc(12*var(--u));z-index:2}
.hcard .hdots i{width:6px;height:6px;border-radius:50%;background:var(--cream);opacity:.4;cursor:pointer;transition:opacity .5s}
.hcard .hdots i.on{opacity:1}
.hrow{display:flex;justify-content:space-between;padding:calc(10*var(--u)) 0;font-size:calc(15*var(--u));position:relative}
.hrow+.hrow:before{content:"";position:absolute;left:-10px;right:-10px;top:0;height:1px;background:linear-gradient(90deg,rgba(248,240,234,0),rgba(248,240,234,.16),rgba(248,240,234,0))}
.hrow b{font-weight:400;color:var(--cream);opacity:.92}.hrow span{opacity:.5}
.hthumb{position:absolute;cursor:pointer;transition:opacity .8s}
.hthumb .lbl{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:calc(9.5*var(--u));top:calc(100% + 30*var(--u));opacity:.6;transition:opacity .6s}
.hthumb.on .lbl{opacity:1;color:var(--cream)}
.fadeswap{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.fadeswap.out{opacity:0;transform:translateY(10px)}

/* gallery */
.pile{position:absolute;left:0;top:calc(330*var(--uy));width:100%;height:calc(520*var(--u))}
.prow{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform;pointer-events:none}.prow .log{pointer-events:auto}
.log{transition:transform 1s var(--ease),opacity .8s var(--ease),filter .8s;cursor:pointer;z-index:1}
.pile:hover .log{opacity:.45}
.pile .log:hover{opacity:1;transform:scale(1.18);z-index:5}
.gcap{position:absolute;text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;transform:translateX(-50%);z-index:6}
.gcap.on{opacity:1}

/* afisha cards */
.ev .phr{position:absolute;inset:0;background-size:cover;background-position:center}
.ev .tag{position:absolute;left:calc(12*var(--u));top:calc(12*var(--u));padding:calc(8*var(--u));background:rgba(12,11,10,.6)}
.filters span{cursor:pointer;opacity:.55;transition:opacity .4s;position:absolute}
.filters span.on{opacity:1}

/* offers */
.orow{position:absolute;left:0;width:100%;height:calc(120*var(--u));cursor:pointer}
.orow>*{transition:opacity .5s,color .5s}
.orows:hover .orow>*{opacity:.45}
.orows .orow:hover>*{opacity:1;color:var(--cream)}
#ofollow{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .5s}
#ofollow.on{opacity:1}

/* footer */
.s-foot{background:var(--cedar)!important}
.fslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s var(--ease)}
.fslide.on{opacity:1}
.ul{position:relative}
.ul:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:.6;transform-origin:right;transition:transform .8s var(--ease)}
.ul:hover:after{transform:scaleX(0)}
.ul.draw:after{transform:scaleX(0);transform-origin:left}
.ul.draw:hover:after{transform:scaleX(1)}

/* menu */
#menu{position:fixed;inset:0;z-index:15;background:var(--night);visibility:hidden;clip-path:circle(0% at 96% 5%)}
#menu .mbg{position:absolute;inset:-60px;background-size:cover;background-position:center;opacity:.2;filter:blur(48px);transition:background-image 1s}
#menu .mshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,10,.7),rgba(12,11,10,.15) 55%,rgba(12,11,10,.35))}
.mi{position:absolute;left:calc(120*var(--ux));font-family:var(--serif);font-size:calc(52*var(--u));letter-spacing:.06em;text-transform:uppercase;line-height:1;opacity:.42;transition:opacity .6s,transform .8s var(--ease);cursor:pointer;display:flex;align-items:baseline;gap:calc(28*var(--u))}
.mi .arr{position:absolute;left:calc(-44*var(--u));top:calc(18*var(--u));width:calc(26*var(--u));opacity:0;transition:opacity .6s,transform .8s var(--ease);transform:translateX(-10px)}
.mi em{font-size:.46em;opacity:0;transition:opacity .6s;letter-spacing:0;text-transform:none}
.mi:hover,.mi.on{opacity:1;color:var(--cream);transform:translateX(calc(44*var(--u)))}
.mi:hover .arr,.mi.on .arr{opacity:1;transform:none}
.mi:hover em,.mi.on em{opacity:.7}
.mitems:hover .mi.on:not(:hover){opacity:.42;color:inherit;transform:none}
.mitems:hover .mi.on:not(:hover) .arr,.mitems:hover .mi.on:not(:hover) em{opacity:0}

/* modal / lightbox */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(12,11,10,.82);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.modal{pointer-events:none}.modal.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s var(--ease)}
.modal .box{transform:translateY(30px) scale(.98);transition:transform 1s var(--ease)}
.modal.on .box{transform:none}
.modal .close{position:absolute;right:calc(28*var(--u));top:calc(28*var(--u));width:calc(48*var(--u));height:calc(48*var(--u))}
.modal .close:before,.modal .close:after{content:"";position:absolute;left:25%;right:25%;top:50%;height:1px;background:var(--milk);transform:rotate(45deg)}
.modal .close:after{transform:rotate(-45deg)}
#lb .box img{max-width:90vw;max-height:88vh;object-fit:contain;display:block}
#lb .cap{margin-top:calc(18*var(--u));text-align:center}
.lbnav{position:absolute;top:50%;transform:translateY(-50%)}
#book .box{width:calc(560*var(--u));padding:calc(56*var(--u));background:var(--coal)}
.fld{display:block;border-bottom:1px solid rgba(248,240,234,.25);padding:calc(14*var(--u)) 0;margin-top:calc(14*var(--u));font-size:calc(15*var(--u));opacity:.7}
.chips{display:flex;gap:calc(10*var(--u));margin-top:calc(22*var(--u))}
.chips span{padding:calc(10*var(--u)) calc(16*var(--u));border:1px solid rgba(248,240,234,.25);border-radius:100px;font-size:calc(11*var(--u));letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .4s}
.chips span.on,.chips span:hover{background:var(--cream);color:var(--ink)}

/* preloader */
#pre{position:fixed;inset:0;z-index:80;background:var(--night);display:flex;align-items:center;justify-content:center}
#pre .pc{position:relative;width:calc(260*var(--u));height:calc(260*var(--u))}
#pre canvas{position:absolute;inset:0;width:100%;height:100%}
#pre img{position:absolute;left:50%;top:50%;width:calc(120*var(--u));transform:translate(-50%,-60%)}
#pre .pn{position:absolute;left:0;right:0;top:62%;text-align:center;font-family:var(--serif);font-size:calc(16*var(--u));letter-spacing:.2em;opacity:.6}

/* transition veil (light steam band) */
#veil{position:fixed;left:0;right:0;height:46vh;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(253,247,236,0),rgba(253,247,236,.08) 45%,rgba(253,247,236,.11) 50%,rgba(253,247,236,.08) 55%,rgba(253,247,236,0));filter:blur(20px)}

/* portrait notice */
#port{display:none}
@media (orientation:portrait) and (max-width:900px){#port{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:12px 16px;background:var(--coal);font-size:12px;text-align:center;opacity:.92}}
body.menu-open #prog,body.menu-open #cnt{opacity:0;pointer-events:none}#prog,#cnt{transition:opacity .6s}

.slice.log{left:calc((var(--cx) - var(--d)/2)*var(--u));top:calc((var(--cy) - var(--d)/2)*var(--u))}

body.menu-open #quick{opacity:0;pointer-events:none}
/* без выделения текста и перетаскивания картинок при drag / жестах трекпада */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg,a,.slice,.ri,.log{-webkit-user-drag:none;user-drag:none}
.rail,.knob,.pile{touch-action:pan-y}
::selection{background:transparent}
/* неактивные экраны не тратят ресурсы на анимации */
.sc:not(.on) *{animation-play-state:paused!important}
.sc.on .bg>.ph{will-change:transform}
/* Программы: фон — фото выбранной программы, размытое и приглушённое (без плашек, тон через brightness) */
.s-prog .bg>.pbg{inset:-90px;filter:blur(22px) brightness(.42) saturate(.9);will-change:opacity,transform}