@font-face{font-family:B;src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:S;font-style:italic;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:B2;src:url(/assets/fonts/cyr-onest.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--paper:#f3efe6;--ink:#0d0d12;--cob:#2433ff;--lime:#d9ff40;--mu:#4a4a55;--line:rgba(13,13,18,.14)}
*{box-sizing:border-box}html,body{margin:0}body{font:17px/1.6 B,B2,system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;height:auto;display:block}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.home{font-weight:700;text-decoration:none;letter-spacing:-.02em}.lg{display:flex;gap:4px}.lg a{font-size:13px;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:99px}.lg a[aria-current]{background:var(--ink);color:var(--paper)}
.cs{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px)}
.bc{font-size:14px;color:var(--mu);margin-bottom:28px}.bc a{color:var(--mu)}
.kind{font-size:13px;font-weight:600;color:var(--mu);margin:0 0 8px;letter-spacing:.02em}
h1{font-size:clamp(52px,9vw,140px);line-height:.88;letter-spacing:-.05em;margin:0 0 18px;font-weight:800}h1 em{display:block;font:italic 400 .42em/1.1 S,B2,serif;letter-spacing:-.01em;color:var(--cob);margin-top:.15em}
.line{font-size:clamp(19px,1.8vw,24px);line-height:1.4;max-width:34ch;margin:0 0 26px;letter-spacing:-.01em}
.live{display:inline-flex;align-items:center;height:50px;padding:0 22px;border-radius:99px;background:var(--cob);color:#fff;text-decoration:none;font-weight:700}
.cover{margin:40px 0;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(13,13,18,.45)}
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,72px);margin-bottom:48px}
.txt h2,.svs h2,.more h2,.ctab h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin:0 0 10px}
.txt p{margin:0 0 28px;max-width:62ch}.hon{font-size:14px;color:var(--mu);border-top:1px solid var(--line);padding-top:14px}
aside dl{margin:0}aside dl div{padding:12px 0;border-top:1px solid var(--line)}aside dt{font-size:13px;color:var(--mu)}aside dd{margin:2px 0 0;font-weight:600}
.facts{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.facts b{display:block;font-size:34px;letter-spacing:-.04em;line-height:1}.facts span{font-size:13px;color:var(--mu)}
.shots{display:grid;gap:20px;margin-bottom:56px}.shots img{border-radius:6px;border:1px solid var(--line)}
.ctab{background:var(--ink);color:var(--paper);border-radius:6px;padding:clamp(28px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.ctab h2{color:var(--paper);font-size:clamp(28px,4vw,52px);letter-spacing:-.04em;text-transform:none;margin:0;font-weight:800}.ctab a{background:var(--lime);color:var(--ink);text-decoration:none;font-weight:700;padding:14px 22px;border-radius:99px}
.more ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.more a{display:block;text-decoration:none;padding:16px 0;border-top:1px solid var(--line)}.more b{display:block;font-size:22px;letter-spacing:-.03em}.more span{font-size:14px;color:var(--mu)}.more img{border-radius:4px;margin-bottom:10px}
.svs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:48px 0}.svs section{border-top:1px solid var(--line);padding-top:16px}.svs p{margin:0}
.q{font-size:14px;color:var(--mu);margin:32px 0}
.ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px clamp(16px,4vw,48px);border-top:1px solid var(--line);font-size:14px;color:var(--mu)}.ft a{color:var(--ink);font-weight:600}
@media(max-width:820px){.grid,.svs{grid-template-columns:1fr}}
/* signature page transition: the old page sinks into a cobalt stage, the new one is cut in from below */
@view-transition{navigation:auto}
::view-transition{background:#2433ff}
@media all{
::view-transition-old(root){animation:vt-out .72s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vt-in .84s cubic-bezier(.76,0,.24,1) .06s both}
::view-transition-group(vt-title),::view-transition-group(vt-cover){animation-duration:.84s;animation-timing-function:cubic-bezier(.76,0,.24,1);z-index:2}
}
@media not all{::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@keyframes vt-out{to{transform:scale(.9) translateY(-4%);border-radius:22px;opacity:.35}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0 round 22px);transform:translateY(12%)}to{clip-path:inset(0 0 0 0 round 0);transform:none}}
.cs h1{view-transition-name:vt-title}.cover img{view-transition-name:vt-cover}
aside{position:sticky;top:24px;align-self:start}
.cover{overflow:hidden}
@media all{
 .kind,.line,.live,.bc{animation:up .9s cubic-bezier(.16,1,.3,1) both}.bc{animation-delay:.05s}.kind{animation-delay:.12s}.line{animation-delay:.32s}.live{animation-delay:.42s}
 .cs h1{animation:rise 1.1s cubic-bezier(.16,1,.3,1) .16s both}.cs h1 em{animation:slide 1.1s cubic-bezier(.16,1,.3,1) .3s both}
 @keyframes up{from{opacity:0;transform:translateY(18px)}}@keyframes rise{from{transform:translateY(.18em)}}@keyframes slide{from{transform:translateX(-.4em)}}
 @supports (animation-timeline:view()){
  body::before{content:"";position:fixed;inset:0 0 auto;height:3px;background:var(--cob);transform-origin:0 50%;z-index:9;animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .cover{animation:cut linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .cover img{animation:zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes cut{from{clip-path:inset(0 7% 0 7% round 18px)}to{clip-path:inset(0 0 0 0 round 6px)}}
  @keyframes zoom{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1) translateY(3%)}}
  .shots img,.svs section,.more li,.txt>*{animation:in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .shots img{transform-origin:50% 100%;animation-name:tilt}
  @keyframes in{from{opacity:0;transform:translateY(48px)}}
  @keyframes tilt{from{opacity:.2;transform:perspective(1200px) rotateX(14deg) translateY(80px) scale(.94)}}
  .ctab{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes grow{from{transform:scale(.92);border-radius:40px}}
 }
}
.more a{transition:color .3s}.more a:hover b{color:var(--cob)}.more a img{transition:transform .6s cubic-bezier(.16,1,.3,1)}.more a:hover img{transform:scale(1.03)}
.live,.ctab a{transition:transform .4s cubic-bezier(.16,1,.3,1)}.live:hover,.ctab a:hover{transform:translateY(-2px)}
/* JS fallback transition for browsers without cross-document view transitions */
html.vt-leave{background:#2433ff}
html.vt-leave body{animation:vt-out .52s cubic-bezier(.76,0,.24,1) forwards;transform-origin:50% 40vh;overflow:hidden}
html.vt-enter{background:#2433ff}html.vt-enter body{animation:vt-in .84s cubic-bezier(.76,0,.24,1) both}
.cs h1 em{display:block}
html.io :is(.shots img,.svs section,.more li,.txt>*,.ctab){opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
html.io :is(.shots img,.svs section,.more li,.txt>*,.ctab).in{opacity:1;transform:none}
html.io .pbar{position:fixed;inset:0 0 auto;height:3px;background:var(--cob);transform-origin:0 50%;transform:scaleX(0);z-index:9}
@media(max-width:820px){aside{position:static}}
@supports (animation-timeline:view()){@media all{.shots img{animation-range:entry 0% entry 38%!important}}}
@keyframes tilt{from{opacity:.35;transform:perspective(1200px) rotateX(12deg) translateY(70px) scale(.95)}}
.nw{white-space:nowrap}