/* Hybrid Minds book site. Night / sodium / Vein neon. */
@font-face{font-family:"HM Shout";src:url("../fonts/big-shoulders-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"HM Body";src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"HM Mono";src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-display:swap}
/* Russian letters: Fira Sans (Mozilla), only loaded when a page has Cyrillic text */
@font-face{font-family:"HM Shout Cyr";src:url("../fonts/fira-compressed-bold-cyrillic.woff2") format("woff2");font-weight:700;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"HM Shout Cyr";src:url("../fonts/fira-compressed-extrabold-cyrillic.woff2") format("woff2");font-weight:800;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"HM Shout Cyr";src:url("../fonts/fira-compressed-heavy-cyrillic.woff2") format("woff2");font-weight:900;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"HM Body Cyr";src:url("../fonts/fira-sans-regular-cyrillic.woff2") format("woff2");font-weight:400;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"HM Body Cyr";src:url("../fonts/fira-sans-italic-cyrillic.woff2") format("woff2");font-weight:400;font-style:italic;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:"HM Body Cyr";src:url("../fonts/fira-sans-bold-cyrillic.woff2") format("woff2");font-weight:700;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
:root{
  --night:#07060b; --panel:#120f1c; --line:#2a2140;
  --text:#ece8f2; --dim:#aaa5ba; --mist:#8f8ca0;
  --sodium:#ffc23d; --cherry:#ff2d55; --violet:#a46cff; --blue:#6fd3ff;
  --shout:"HM Shout","HM Shout Cyr",Impact,"Arial Narrow",sans-serif;
  --body:"HM Body","HM Body Cyr",ui-sans-serif,system-ui,sans-serif;
  --mono:"HM Mono",ui-monospace,monospace;
  --pad:clamp(20px,4vw,64px);
  --cut:clamp(14px,1.6vw,26px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--body);font-size:clamp(17px,1.2vw,19px);line-height:1.6;
  font-stretch:92%;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dw{display:inline-block;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--sodium);color:var(--night);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
.dim{color:var(--mist)}

/* header */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad);border-bottom:1px solid var(--line);background:rgba(7,6,11,.92)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--shout);font-weight:800;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.site-header ul{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.site-header nav a{text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:12px 2px;display:inline-block}
.site-header nav a:hover{color:var(--sodium)}
.cut-btn,.ghost-btn{display:inline-block;font-family:var(--mono);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:0;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cut-btn{background:var(--sodium);color:var(--night)}
.site-header nav .cut-btn{padding:11px 18px;color:var(--night)}
.cut-btn:hover,.site-header nav .cut-btn:hover{background:var(--blue);color:var(--night)}
.ghost-btn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--cherry)}
.ghost-btn:hover{background:var(--cherry);color:var(--night)}

/* language switch: in the header on wide screens, a slim row above it on tablets and phones */
.site-header .lang{display:flex;gap:2px}
.site-header nav .lang a{padding:12px 5px;color:var(--mist)}
.site-header nav .lang a:hover,.site-header nav .lang a[aria-current]{color:var(--sodium)}
.lang-bar{display:none}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:2px solid var(--cherry);isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-bg{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--night) 0%,rgba(7,6,11,.86) 38%,rgba(7,6,11,.35) 70%,rgba(7,6,11,.5) 100%),
             linear-gradient(0deg,var(--night) 0%,rgba(7,6,11,0) 45%)}
.hud{position:absolute;inset:14px;pointer-events:none;z-index:2}
.hud-c{position:absolute;width:26px;height:26px;border:2px solid var(--blue)}
.hud-c.tl{left:0;top:0;border-right:0;border-bottom:0}
.hud-c.tr{right:0;top:0;border-left:0;border-bottom:0;border-color:var(--cherry)}
.hud-c.bl{left:0;bottom:0;border-right:0;border-top:0;border-color:var(--cherry)}
.hud-c.br{right:0;bottom:0;border-left:0;border-top:0}
.hud-top{position:absolute;left:38px;right:38px;top:4px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--blue)}
.hud-status{color:var(--sodium)}
.hud-status::before{content:"● ";color:var(--cherry)}
.hud-meter{position:absolute;left:38px;top:28px;width:min(240px,40%);height:4px;background:var(--line)}
.hud-meter span{position:absolute;inset:0;background:var(--cherry);transform-origin:left;transform:scaleX(.72)}
.ticker{position:absolute;left:0;right:0;bottom:4px;overflow:hidden;white-space:nowrap;font-size:11px;color:var(--sodium)}
.ticker span{display:inline-block;padding-left:40px}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(64px,6vw,96px) var(--pad) clamp(72px,7vw,104px)}
.eyebrow{font-size:16px;color:var(--dim);margin-bottom:clamp(14px,2vw,24px)}
.eyebrow .mono{color:var(--sodium);margin-right:12px;font-size:12px}
h1{font-weight:400}
.h-big{font-family:var(--shout);font-weight:900;text-transform:uppercase;font-size:clamp(72px,12vw,200px);line-height:.82;letter-spacing:.005em;
  text-shadow:-.03em 0 0 rgba(255,45,85,.8),.03em 0 0 rgba(111,211,255,.7)}
.h-big>span{display:block}
.slab{display:inline-block;margin:clamp(18px,2.4vw,30px) 0 0;padding:10px 20px;background:var(--sodium);color:var(--night);font-size:clamp(13px,1.2vw,17px);
  transform:skewY(-3deg);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,100% 100%,14px 100%,0 50%)}
.hero-lead{max-width:44ch;margin-top:clamp(22px,2.6vw,34px);font-size:1.12em;color:var(--text)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-cover{position:relative;justify-self:center;max-width:420px;width:100%}
.hero-cover img{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px var(--line);transform:rotate(1.5deg)}
.hero-cover::before{content:"";position:absolute;inset:-12px -12px 30px 12px;border:2px solid var(--blue);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 90%,6% 90%,6% 10%,0 10%);opacity:.7}
.hero-cover figcaption{margin-top:16px;font-size:11px;color:var(--mist);text-align:center}

/* sections */
section{scroll-margin-top:64px}
section:not(.hero){padding:clamp(72px,9vw,130px) var(--pad);border-bottom:1px solid var(--line);position:relative}
.label{font-size:12px;color:var(--blue);display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,32px)}
.label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--blue),transparent);max-width:420px}
h2{font-family:var(--shout);font-weight:800;text-transform:uppercase;font-size:clamp(42px,6vw,96px);line-height:.92;letter-spacing:.005em;max-width:20ch;margin-bottom:clamp(32px,4vw,56px)}
h3{font-family:var(--shout);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.4vw,36px);line-height:.95;margin-bottom:10px}
.n{display:block;font-size:11px;color:var(--sodium);margin-bottom:14px}
.note{color:var(--mist);font-size:15px;max-width:60ch}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px);max-width:1150px;color:var(--dim)}
.two-col p+p{margin-top:1em}
.lead{color:var(--text);font-size:1.15em}
.stamp{color:var(--sodium);font-size:.85em}
.question{color:var(--text);border-left:3px solid var(--cherry);padding-left:16px}

.strata{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:clamp(32px,4vw,56px);color:var(--dim)}
.strata li{background:var(--panel);padding:22px 24px;border-top:3px solid var(--violet)}
.strata li:first-child{border-color:var(--sodium)}
.strata li:last-child{border-color:var(--mist)}
.strata .mono{display:block;font-size:11px;color:var(--blue);margin-bottom:8px}
.strata strong{display:block;font-family:var(--shout);font-size:30px;text-transform:uppercase;color:var(--text);line-height:1;margin-bottom:8px}
.wide-art{margin-bottom:clamp(32px,4vw,56px)}
.wide-art img{width:100%;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.wide-art figcaption{margin-top:10px;font-size:11px;color:var(--mist)}
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.places li{position:relative;background:var(--panel);padding:26px 24px 28px;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.places li::before{content:"";position:absolute;left:0;top:0;width:44%;height:4px;background:var(--sodium)}
.places li:nth-child(3n+2)::before{background:var(--cherry)}
.places li:nth-child(3n)::before{background:var(--blue)}
.places p{color:var(--dim);font-size:16px}

.crew-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.crew-grid li{background:var(--panel);display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.crew-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-bottom:3px solid var(--cherry)}
.crew-grid li:nth-child(even) img{border-color:var(--blue)}
.crew-txt{padding:20px 20px 26px}
.crew-txt p{color:var(--dim);font-size:16px}
.crew-txt .q{margin-top:12px;color:var(--sodium);font-style:italic;font-size:15px}

.gal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:28px;align-items:start}
.gal-grid li{grid-column:span 2}
.gal-grid .g-wide{grid-column:span 4}
.gal-grid .g-half{grid-column:span 3}
.gal-grid a{display:block;overflow:hidden;background:var(--panel)}
.gal-grid img{width:100%;transition:transform .4s}
.gal-grid a:hover img{transform:scale(1.03)}
.gal-grid p{font-size:11px;color:var(--mist);margin-top:8px}

.excerpt .prose{max-width:66ch;font-size:1.08em;line-height:1.75}
.excerpt .prose p+p{margin-top:1em}
.excerpt .prose p:first-child::first-letter{font-family:var(--shout);font-weight:900;float:left;font-size:4.2em;line-height:.8;padding:.06em .1em 0 0;color:var(--sodium)}
.dateline{color:var(--blue);font-size:13px;margin-bottom:24px}
.excerpt .note{margin-top:28px}
.excerpt .ex-lang{margin:-12px 0 24px}

.signup{overflow:hidden}
.signup::before{content:"";position:absolute;right:-6vw;top:12%;width:44vw;height:76%;pointer-events:none;
  background:repeating-linear-gradient(-58deg,rgba(255,194,61,.07) 0 14px,transparent 14px 34px);clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
.signup .lead{max-width:44ch;margin-bottom:20px}
.list-note{display:inline-block;background:var(--cherry);color:var(--night);font-size:12px;padding:6px 12px;margin-bottom:20px}
.form{position:relative;max-width:560px}
.form label{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.form .row{display:flex;gap:10px;flex-wrap:wrap}
.form input{flex:1 1 240px;min-height:48px;padding:10px 14px;background:var(--panel);border:2px solid var(--line);color:var(--text);font:inherit}
.form input::placeholder{color:var(--mist)}
.form [disabled]{cursor:not-allowed;opacity:.75}
.form .cut-btn[disabled]:hover{background:var(--sodium)}
.signup.thanks{min-height:62vh}

.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:32px var(--pad);color:var(--dim);font-size:14px}
.site-footer .mono{font-size:12px;color:var(--blue)}
.foot-brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700}

@media (prefers-reduced-motion:no-preference){
  .h-big{animation:rgb-split 4.2s steps(1) 2.6s infinite}
  .slab{animation:slam .5s cubic-bezier(.2,1.6,.4,1) 1.4s both}
  .hud-meter span{animation:meter 2.8s steps(9) infinite alternate}
  .ticker span{animation:tick 30s linear infinite}
  .hero-bg{animation:boot 1.1s steps(7) .1s both}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gal-grid img{transition:none}}
@keyframes rgb-split{
  0%{text-shadow:-.03em 0 0 rgba(255,45,85,.8),.03em 0 0 rgba(111,211,255,.7);transform:none}
  92%{text-shadow:-.08em 0 0 rgba(255,45,85,.9),.06em 0 0 rgba(111,211,255,.85);transform:translateX(.02em) skewX(-6deg)}
  94%{text-shadow:.05em 0 0 rgba(255,45,85,.9),-.07em 0 0 rgba(111,211,255,.85);transform:translateX(-.03em)}
  96%{text-shadow:-.03em 0 0 rgba(255,45,85,.8),.03em 0 0 rgba(111,211,255,.7);transform:none}
}
@keyframes slam{from{transform:skewY(-3deg) translateX(-120%);opacity:0}to{transform:skewY(-3deg) translateX(0);opacity:1}}
@keyframes boot{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:.55;clip-path:inset(0 0 0 0)}}
@keyframes meter{from{transform:scaleX(.2)}to{transform:scaleX(.95)}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1100px){
  .site-header .lang{display:none}
  .lang-bar{display:flex;justify-content:flex-end;gap:2px;padding:2px var(--pad) 0}
  .lang-bar a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--mist);padding:8px 6px}
  .lang-bar a:hover,.lang-bar a[aria-current]{color:var(--sodium)}
}
/* tablets: the trailer has its own button in the hero, so its menu link waits for wider screens */
@media (max-width:980px){
  .hide-md{display:none}
  .site-header{gap:12px}
  .site-header ul{gap:clamp(10px,1.4vw,30px)}
}
@media (max-width:1000px){
  .crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hide-sm{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:56px}
  .hero-cover{max-width:190px;order:-1;justify-self:start;margin-left:6px}
  .hero-cover figcaption{display:none}
  .hero-cover::before{inset:-8px -8px 10px 8px}
  .hud{inset:8px}.hud-top{left:30px;right:30px;font-size:10px;white-space:nowrap}.hud-meter{display:none}
  .h-big{font-size:clamp(72px,24vw,120px)}
  .two-col,.strata,.places{grid-template-columns:minmax(0,1fr)}
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid li{grid-column:span 1}
  .gal-grid .g-wide,.gal-grid .g-half{grid-column:span 2}
  .signup::before{width:80vw;opacity:.6}
}
@media (max-width:420px){
  .crew-grid{grid-template-columns:minmax(0,1fr)}
  .brand span{font-size:20px}
}
.ex-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.ex-art{position:sticky;top:90px}
.ex-art img{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.ex-art figcaption{margin-top:12px;font-size:11px;color:var(--mist);line-height:1.5}
@media (max-width:760px){.ex-grid{grid-template-columns:minmax(0,1fr)}.ex-art{position:static;max-width:420px}}
/* trailer */
.tri{display:inline-block;width:0;height:0;border-style:solid;border-width:.42em 0 .42em .72em;border-color:transparent transparent transparent currentColor;margin-right:.6em;vertical-align:-.04em}
.ghost-blue{box-shadow:inset 0 0 0 2px var(--blue)}
.ghost-blue:hover{background:var(--blue)}
section.trailer{padding-top:clamp(48px,5vw,80px);background:radial-gradient(ellipse at 50% 0%,rgba(164,108,255,.14),transparent 60%),var(--night)}
.tr-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px;margin-bottom:clamp(24px,3vw,40px)}
.tr-head h2{margin-bottom:0;font-size:clamp(42px,4.6vw,76px)}
.tr-head .slab{margin:0 0 .4em}
.tr-frame{position:relative;max-width:max(480px,min(1200px,calc((100vh - 380px) * 1.78)));margin:0 auto;padding:30px 14px}
.tr-frame .hud-c{width:22px;height:22px}
.tr-bar{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.2;color:var(--blue);position:absolute;left:30px;right:30px;white-space:nowrap;overflow:hidden}
.tr-top{top:8px}.tr-bot{bottom:8px;color:var(--mist)}
.tr-bar>span{overflow:hidden;text-overflow:ellipsis}
.tr-sig{color:var(--sodium)}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cherry);margin-right:8px;vertical-align:0}
.tr-screen{position:relative;aspect-ratio:16/9;background:#000 url("../img/trailer-poster.webp") center/cover no-repeat;
  box-shadow:0 0 0 1px var(--line),0 30px 90px rgba(0,0,0,.75),-6px 0 0 -3px rgba(255,45,85,.55),6px 0 0 -3px rgba(111,211,255,.5);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.tr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.tr-video.on{background:#000}
.tr-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;width:100%;padding:clamp(14px,3vw,40px);
  border:0;margin:0;cursor:pointer;color:var(--text);text-align:left;font:inherit;
  background:linear-gradient(0deg,rgba(7,6,11,.72) 0%,rgba(7,6,11,0) 46%)}
.tr-cover[hidden]{display:none}
.tr-play{position:relative;flex:none;display:grid;place-items:center;width:clamp(64px,8vw,104px);height:clamp(64px,8vw,104px);background:var(--sodium);color:var(--night);
  font-size:clamp(26px,3.2vw,42px);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:background .15s}
.tr-play .tri{margin:0 0 0 .18em}
.tr-cta{display:flex;flex-direction:column;gap:6px;font-size:clamp(14px,1.4vw,18px);font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.tr-sub{font-size:11px;font-weight:600;color:var(--blue)}
.tr-cover:hover .tr-play,.tr-cover:focus-visible .tr-play{background:var(--blue)}
.tr-cover:focus-visible{outline:3px solid var(--blue);outline-offset:-6px}
@media (max-width:760px){
  .tr-screen{background-image:url("../img/trailer-poster-sm.webp")}
  .tr-frame{padding:26px 8px;margin:0 -8px}
  .tr-bar{left:24px;right:24px;font-size:9px}
  .tr-bot .tr-sig{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .tr-play::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--cherry);animation:tr-ping 2.4s ease-out infinite}
  .rec{animation:tr-blink 1.6s steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){.tr-play{transition:none}}
@keyframes tr-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
@keyframes tr-blink{50%{opacity:.2}}