/* elunaskarnzeph.com — Linotype hot-metal composing room. Geometry from refs/figma/lib.js + pages.js. */
:root{
  --lead:#8C9096;--leadMid:#6E7279;--leadLight:#BFC3C8;--shine:#E6E8EA;--leadDeep:#33363B;--leadNight:#232528;
  --paper:#EAE5D9;--paper2:#DED7C7;--ink:#18191B;--inkSoft:#3E4045;--brass:#BC8A3E;--brassDark:#7C5622;--brassLight:#E4C07A;
  --disp:"News Cycle","Arial Narrow",Arial,sans-serif;--text:"Source Serif 4",Georgia,serif;
  --px:20px;
  --l1:0 1.2px 2.4px rgba(35,37,40,.036),0 6px 12px rgba(35,37,40,.048),0 16.8px 33.6px -4.8px rgba(35,37,40,.06);
  --l2:0 2px 4px rgba(35,37,40,.06),0 10px 20px rgba(35,37,40,.08),0 28px 56px -8px rgba(35,37,40,.1);
  --l3:0 3.6px 7.2px rgba(35,37,40,.108),0 18px 36px rgba(35,37,40,.144),0 50.4px 100.8px -14.4px rgba(35,37,40,.18);
  /* note «Движение»: one casting step */
  --step:80ms;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--leadDeep);color:var(--ink);font:400 16px/1.6 var(--text);font-optical-sizing:auto}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--brass);color:var(--ink);padding:10px 16px;font:700 16px var(--disp)}
.skip:focus{top:12px}
.page{display:flex;flex-direction:column;min-height:100vh}
.col{flex:1;min-width:0;background:var(--lead)}
.in{max-width:1128px;margin-inline:auto}

/* grain-noise: kit grain, overlay, on every lead ground */
.gr{position:relative;--g:.18}
.gr::after{content:"";position:absolute;inset:0;background:url(/assets/img/grain.png) 0 0/256px;mix-blend-mode:overlay;opacity:var(--g);pointer-events:none}
.g14{--g:.14}.g10{--g:.1}.g08{--g:.08}

/* slug: lit top face 12 %, face, dark bottom face 22 % */
.slug{position:relative;display:block;background:linear-gradient(180deg,var(--shine) 0,var(--leadLight) 12%,var(--leadMid) 12%,var(--leadMid) 78%,var(--leadDeep) 78%)}
.slug::after{content:"";position:absolute;inset:12% 0 22%;background:url(/assets/img/grain.png) 0 0/256px;mix-blend-mode:overlay;opacity:.18;pointer-events:none}
.slug.dull{background:linear-gradient(180deg,var(--leadLight) 0,var(--lead) 12%,var(--leadMid) 12%,var(--leadMid) 78%,var(--leadDeep) 78%)}
.fc{position:absolute;inset:12% 0 22%;overflow:hidden;display:flex;align-items:center;white-space:nowrap;font:700 1em/1 var(--disp)}
/* relief: raised letters, light from the upper left */
.rl{--rh:var(--shine);--rm:var(--leadLight);--rl:var(--leadMid);--ra:.6;display:inline-block;padding:.08em .04em;letter-spacing:-.01em;background:linear-gradient(180deg,var(--rh),var(--rm) 45%,var(--rl));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(max(2px,.028em) max(2px,.039em) max(1px,.017em) rgba(35,37,40,var(--ra))) drop-shadow(-1px -1px 0 rgba(255,255,255,.25))}
.rl--m{transform:scaleX(-1)}
.mark{width:var(--s,38px);height:var(--s,38px);font-size:calc(var(--s,38px)*.7);box-shadow:var(--l1);flex:none}
.mark .fc{justify-content:center}
.mark--f{--s:40px}.mark--c{--s:36px}
.chev{width:12px;height:8px;flex:none;color:var(--brassDark)}
.chev.r{transform:rotate(-90deg);color:inherit}
/* stamp: brass matrix chip */
.stamp{position:relative;display:inline-block;padding:6px 10px 4px;background:var(--brass);border-bottom:2px solid var(--brassDark);border-radius:2px;font:700 12px/1.2 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.stamp::before{content:"";position:absolute;left:calc(50% - 5px);top:0;width:10px;height:5px;background:var(--brassDark);clip-path:polygon(0 0,100% 0,50% 100%)}
/* cast bar */
.btn{--hi:var(--brassLight);--bg:var(--brass);--dk:var(--brassDark);display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border:0;border-bottom:6px solid var(--dk);border-radius:4px;background:linear-gradient(180deg,var(--hi) 0,var(--bg) 35%) padding-box;box-shadow:var(--l1);font:700 17px/1.25 var(--disp);color:var(--ink);text-decoration:none;transition:transform var(--step) steps(2),border-bottom-width var(--step) steps(2),margin-bottom var(--step) steps(2)}
.btn .chev{color:var(--ink)}
.btn:hover{transform:translateY(3px);border-bottom-width:3px;margin-bottom:3px}
.btn--l{--hi:var(--shine);--bg:var(--leadLight);--dk:var(--leadMid)}
.btn--s{padding:11px 16px;font-size:15px}
.key{--w:100;display:inline-flex;justify-content:center;align-items:center;width:calc(var(--w)*.8px);min-height:46px;padding:10px 4px;border-top:2px solid var(--shine);border-bottom:7px solid var(--leadMid);border-radius:4px;background:linear-gradient(180deg,var(--shine),var(--leadLight) 60%) padding-box;box-shadow:var(--l1);font:700 15px/1.2 var(--disp);color:var(--ink);text-align:center;flex:none}
.galley{border:4px solid var(--leadDeep);border-radius:4px;background:var(--paper2);padding:12px}
.cc{display:block}
.cc img{width:100%;border-radius:4px;box-shadow:var(--l1)}
.cb{height:max(24px,16cqw);aspect-ratio:auto}
.cc{container-type:inline-size}
.cc--g .cb{height:44px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crumbs li{display:flex;align-items:center;gap:10px;font:400 14px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{font-weight:700}
.crumbs .chev{width:9px;height:6px;color:var(--ink)}

/* casting: words and lines arrive in 80 ms steps, like matrices assembling into a line */
@keyframes cast{0%{opacity:0;transform:translateY(-.25em)}50%{opacity:1;transform:translateY(-.1em)}99%,100%{opacity:1;transform:none}}
.w{display:inline-block}
.js .cast .w,.js .cast .ln,.js .cast .mat{opacity:0}
.js .cast.is-cast .w,.js .cast.is-cast .ln,.js .cast.is-cast .mat{animation:cast calc(var(--step)*2) step-end both;animation-delay:calc(var(--i,0)*var(--step))}

/* header (mobile) */
.rail{background:var(--leadDeep)}
.rail-in{padding:12px var(--px) 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);font:700 19px/1.2 var(--disp)}
.nav{display:flex;gap:4px;margin-top:10px;padding:6px 0 10px;border-top:2px solid var(--leadNight)}
.nav a{display:block;padding:8px 12px;border-radius:2px;font:700 14px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.nav a:hover{color:var(--brassLight)}
.nav a.is-on{background:var(--brass);color:var(--ink)}
.dom{display:none}

/* hero (mobile scheme) */
.hero{background:var(--lead);overflow:hidden;padding:28px var(--px) 32px}
.stage{--lh:34px;display:flex;flex-direction:column;gap:14px;position:relative}
.h1{font:700 clamp(38px,12.8vw,76px)/.96 var(--disp);letter-spacing:-.02em}
.sf{font-size:16px;max-width:560px}
.cta .btn{align-self:flex-start}
.gal{position:relative;padding-top:44px;margin-inline:calc(var(--px)*-1)}
.mats{position:absolute;right:15px;top:-8px;display:flex;gap:3px}
.mat{position:relative;display:block;width:30px;height:78px;border-radius:2px;background:linear-gradient(90deg,var(--brassLight) 0,var(--brass) 30%,var(--brassDark) 100%);box-shadow:3px 4px 4px rgba(35,37,40,.45);overflow:hidden}
.mat:nth-child(3n+2){margin-top:4px}
.mat:nth-child(n+6){display:none}
.mat::before{content:"";position:absolute;left:23%;top:0;width:54%;height:10px;background:var(--lead);clip-path:polygon(0 0,100% 0,50% 100%)}
.mat b{display:none}
.tray{position:relative;z-index:1;background:var(--leadNight);border-radius:4px;padding:12px 8px 12px 0;box-shadow:var(--l3);font-size:19px}
.tray::before,.tray::after{content:"";position:absolute;left:0;right:0;height:12px}
.tray::before{top:0;background:linear-gradient(180deg,var(--shine),var(--leadLight) 40%,var(--leadDeep))}
.tray::after{bottom:0;background:linear-gradient(180deg,var(--leadLight),var(--leadDeep))}
.tray li{height:var(--lh);padding-block:2px}
.tl{height:100%}
.tl .fc{justify-content:flex-end;padding-right:18px}
.tl .rl{--rh:#CDD0D4;--rm:#AEB2B7;--rl:#94989E;--ra:.35}
.pt{font:700 18px/1.25 var(--disp)}
.proof{background:var(--paper);border-top:6px solid var(--ink);border-radius:2px;padding:12px;box-shadow:var(--l1)}
.proof li+li a{border-top:2px solid var(--paper2)}
.proof a{display:flex;align-items:center;gap:12px;min-height:44px;font:600 16px/1.2 var(--text);text-decoration:none}
.proof a>span:not(.stamp){flex:1}
.proof a:hover>span:not(.stamp){text-decoration:underline}
.facts{font:700 12px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.tag{display:none}

/* sections */
.sec{padding:48px var(--px)}
.paper{background:var(--paper)}
.ttl{font:700 32px/1 var(--disp);letter-spacing:-.01em}
.g-head{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.g-l{font-size:15px;color:var(--inkSoft)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.tiles li{position:relative}
.tiles li:hover,.tiles li:focus-within{z-index:2}
/* Tile hover: cover rises one step (8 px, 80 ms, steps(2)); the slug is cast taller */
.tile{display:block;container-type:inline-size;text-decoration:none;color:var(--paper)}
.tin{display:block;position:relative;height:116cqw;transition:transform var(--step) steps(2)}
.tc{position:absolute;inset:0 0 auto}
.tc img{width:100%;border-radius:4px;box-shadow:var(--l1);transition:box-shadow var(--step) steps(2)}
.tb{position:absolute;left:0;right:0;top:100cqw;height:16cqw;overflow:hidden;background:linear-gradient(180deg,var(--shine) 0,var(--leadLight) 12%,var(--leadMid) 12%,var(--leadMid) 78%,var(--leadDeep) 78%);transition:height var(--step) steps(2)}
.tb-in{position:absolute;inset:12% 0 22%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding-inline:4.7cqw;opacity:0}
.tt{font:700 max(15px,7cqw)/1.05 var(--disp);color:var(--paper)}
.tile:hover .tin,.tile:focus-visible .tin{transform:translateY(-8px)}
.tile:hover .tc img,.tile:focus-visible .tc img{box-shadow:var(--l3)}
.tile:hover .tb,.tile:focus-visible .tb{height:max(32.35cqw,88px)}
.tile:hover .tb-in,.tile:focus-visible .tb-in{opacity:1}
.tile:focus-visible{outline:none}
.tile:focus-visible .tin{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px;height:calc(100cqw + max(32.35cqw,88px))}

.keys{background:var(--leadDeep);color:var(--paper);overflow:hidden;padding:52px var(--px) 60px}
.keys-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px}
.k-l p{font-size:15px;margin-top:20px}
.kr{display:flex;flex-direction:column;gap:12px;padding-block:20px;border-top:3px solid var(--leadMid)}
.kk{display:flex;flex-direction:column;gap:8px}
.caps{display:flex;flex-wrap:wrap;gap:6px 6px}
.kl{font:700 13px/1.3 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--brassLight)}
.kt{font-size:15px}
.etaoin{position:absolute;left:-20px;bottom:-50px;font:700 100px/120px var(--disp);white-space:nowrap}
.rl--e{--ra:.4;opacity:.9;background-image:linear-gradient(180deg,var(--leadMid) 22%,#3D4046 52%,var(--leadNight) 82%)}

.about-b{background:var(--lead);overflow:hidden;padding:52px var(--px) 120px}
.about-b .in{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:relative;z-index:1}
.kick{font:700 14px/1.3 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.state{font:700 26px/1.12 var(--disp);letter-spacing:-.01em;max-width:840px}
.ab-s{position:absolute;right:-70px;bottom:20px;width:300px;height:76px;font-size:56px;box-shadow:var(--l2)}
.ab-s .fc,.ph-s .fc,.gb-s .fc{padding-left:18px}

/* inner head */
.phead{background:var(--lead);overflow:hidden;padding:36px var(--px) 120px}
.phead .in{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.ph-t{font:700 clamp(36px,11.6vw,64px)/.98 var(--disp);letter-spacing:-.02em;max-width:744px}
.ph-l{max-width:552px}
.ph-u,.meta{font:400 13px/1.4 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.ph-u{font-weight:700}
.ph-s{position:absolute;right:-110px;bottom:12px;width:300px;height:84px;font-size:64px;box-shadow:var(--l2)}

/* catalogue */
.rows-s{padding-block:24px 48px}
.row{display:flex;flex-direction:column;gap:16px;padding-block:24px;border-top:3px solid var(--leadDeep)}
.row:first-child{border-top-width:6px}
.row:last-child{border-bottom:6px solid var(--leadDeep)}
.row-c{display:block}
.row-t{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1;min-width:0}
.row-h{font:700 30px/1 var(--disp);letter-spacing:-.01em}
.row-o{color:var(--inkSoft)}
.row-f{display:flex;flex-direction:column;gap:6px;padding-block:12px 4px;width:100%}
.row-f dt,.fdl dt,.kdl dt{font:700 12px/1.4 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--inkSoft)}
.row-f dd{font-size:15px}

/* guide */
.ghead{background:var(--lead);padding:24px var(--px) 36px}
.gh{display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}
.gh-t{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;min-width:0}
.g-t{font:700 40px/.96 var(--disp);letter-spacing:-.02em}
.ft{font:700 15px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.fdl{width:100%;margin-top:-12px;border-bottom:4px solid var(--leadDeep)}
.fdl div{display:flex;gap:16px;padding-block:8px;border-top:2px solid var(--leadDeep)}
.fdl div:first-child{border-top-width:4px}
.fdl dt{flex:0 0 96px;font-size:13px;letter-spacing:.06em;color:var(--ink)}
.fdl dd{font-size:15px;flex:1;min-width:0}
.tabs{position:sticky;top:0;z-index:5;background:var(--leadDeep);padding-inline:var(--px)}
.tabs ul{display:flex;flex-wrap:wrap;gap:2px}
.tabs a{display:block;padding:14px 12px;border-bottom:4px solid transparent;font:700 14px/1.3 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.tabs a:hover{color:var(--brassLight)}
.tabs a.is-on{background:var(--brass);border-bottom-color:var(--brassDark);color:var(--ink)}
.gbody-s{padding-block:32px 48px;overflow:clip}
.gbody{position:relative;z-index:1;display:flex;flex-direction:column;gap:36px}
.gmain{display:flex;flex-direction:column;gap:32px}
.panel{display:flex;flex-direction:column;gap:16px;scroll-margin-top:90px}
.pn-h{display:flex;align-items:center;gap:12px;font:700 26px/1.15 var(--disp)}
.pn-h .chev{width:14px;height:10px}
.h3{font:700 19px/1.25 var(--disp)}
.ml{display:flex;flex-direction:column;gap:12px}
.ml li{display:flex;gap:12px;font-size:15px}
.ml .chev{margin-top:9px}
.gk li{display:flex;align-items:center;gap:18px;padding-block:10px;border-bottom:2px solid var(--paper2);font-size:15px}
.gk .key{--w:137.5}
.q{font:700 16px/1.4 var(--text)}
.a{font-size:15px;margin-top:-8px}
.gw{display:flex;flex-direction:column;gap:12px;font-size:15px}
.gw-h{font:700 22px/1.2 var(--disp)}
.gside{display:flex;flex-direction:column;gap:32px}
.poki{font:700 16px/1.3 var(--disp);text-underline-offset:2px}
.poki:hover{color:var(--brassDark)}
.sim{display:flex;flex-direction:column;gap:14px}
.sim li{padding-block:10px;border-top:2px solid var(--leadDeep)}
.sim a{display:flex;gap:14px;text-decoration:none}
.sim img{width:76px;height:76px;border-radius:4px;flex:none}
.sim b{display:block;font:700 17px/1.2 var(--disp)}
.sim a:hover b{text-decoration:underline}
.sim small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--inkSoft)}
.gb-s{display:none}

/* about + legal */
.abody{display:flex;flex-direction:column;gap:30px}
.tc2{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:3px solid var(--leadDeep)}
.tc2 h2{font:700 22px/1.1 var(--disp)}
.tc2>div{display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.6}
.tc2>div a,.fq a,.kbox a{text-underline-offset:2px}
.sub{font:700 26px/1.2 var(--disp)}
.kbox{display:flex;flex-direction:column;gap:14px;padding:20px 16px}
.kdl div{display:flex;flex-direction:column;gap:2px;padding-block:8px;border-top:2px solid var(--leadDeep)}
.kdl dt{font-size:13px;letter-spacing:.06em;color:var(--ink)}
.fq{display:flex;flex-direction:column;gap:6px;padding-block:16px;border-bottom:2px solid var(--leadDeep)}
.fq h3{font:700 16px/1.4 var(--text)}
.fq p{font-size:15px}

/* footer */
.foot{background:var(--leadNight);color:var(--leadLight);padding:44px var(--px) 28px;--g:.14}
.foot .in{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px}
.f-top{display:flex;flex-direction:column;gap:14px;font-size:15px}
.f-br{display:flex;align-items:center;gap:14px;font:700 22px/1.2 var(--disp);color:var(--paper);text-decoration:none;flex:none}
.f-t{font:700 14px/1.3 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--brassLight)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.f-grid a{display:flex;flex-direction:column;gap:4px;height:100%;min-height:78px;padding:14px;border:3px solid var(--leadDeep);text-decoration:none}
.f-grid b{font:700 15px/1.25 var(--disp);color:var(--paper)}
.f-grid span{font:400 12px/1.3 var(--disp);color:var(--leadLight);overflow-wrap:anywhere}
.f-grid a:hover{background:var(--leadDeep)}
.f-grid a:hover b{color:var(--brassLight)}
.f-bot{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;border-top:3px solid var(--leadDeep);font-size:14px}
.f-mail{font:700 16px/1.3 var(--disp);color:var(--brassLight)}
.f-s{font:400 14px/1.4 var(--disp)}
.f-c{padding:0;border:0;background:none;font:400 14px/1.4 var(--disp);color:var(--leadLight);text-decoration:underline}
.f-c:hover{color:var(--brassLight)}

/* cookie */
.cookie{position:fixed;left:15px;right:15px;bottom:15px;z-index:20;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 30px);overflow:auto;padding:20px;border:4px solid var(--leadDeep);border-radius:4px;background:var(--paper);box-shadow:var(--l3);--g:.08}
.cookie>*{position:relative;z-index:1}
.ck-h{display:flex;align-items:center;gap:12px;font:700 20px/1.2 var(--disp)}
.ck-p{font-size:15px}
.ck-acts{display:flex;flex-direction:column;gap:12px}
.ck-acts .btn,.ck-manage .btn{justify-content:center}
.ck-manage{display:flex;flex-direction:column;align-items:stretch;gap:10px;font-size:15px}
.ck-manage label{display:flex;align-items:center;gap:8px}
.ck-manage input{accent-color:var(--brassDark);width:16px;height:16px}
.ck-l{font:700 14px/1.3 var(--disp);text-underline-offset:2px;align-self:flex-start}

@media (min-width:768px) and (max-width:1199px){
  :root{--px:40px}
  .sf{font-size:18px}
  .pt{font-size:20px}
  .mat:nth-child(n+6){display:block}
  .mat:nth-child(n+11){display:none}
  .g-head{flex-direction:row;align-items:flex-end;gap:32px}.g-head .ttl{flex:0 1 55%}.g-l{flex:1}
  .galley{border-width:6px;padding:20px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
  .ttl{font-size:44px}
  .state{font-size:36px}
  .kr{flex-direction:row;gap:28px}.kk{flex:0 0 300px}.kt{flex:1;font-size:17px}.key{width:calc(var(--w)*1px)}
  .row{flex-direction:row;gap:32px}.row-c{flex:0 0 220px}.row-f{flex-direction:row}.row-f div{flex:1;padding-right:16px}
  .gh{flex-direction:row;gap:32px;align-items:flex-start}.gh-c{flex:0 0 280px}.cc--g .cb{height:50px}
  .f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f-top{flex-direction:row;align-items:center;gap:32px}
  .ph-t{font-size:64px}.g-t{font-size:60px}
  .tc2{flex-direction:row;gap:32px}.tc2 h2{flex:0 0 240px}
  .ck-acts{flex-direction:row}
  .cookie{right:auto;width:500px;padding:28px 30px;border-width:6px}
}

/* side-rail layout: frame 1368, content 1256 */
@media (min-width:1200px){
  :root{--px:64px}
  body{font-size:17px}
  .page{flex-direction:row}
  .rail{position:relative;flex:0 0 112px}
  .rail::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:78px;background:repeating-linear-gradient(90deg,var(--leadNight) 0 2px,transparent 2px 19px)}
  .rail-in{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:44px;height:100vh;min-height:520px;padding:32px 0}
  .brand{--s:60px}.brand-t{display:none}.brand .mark{--s:60px}
  .nav{flex-direction:column;align-items:center;gap:44px;margin:0;padding:0;border:0}
  .nav a{padding:14px 8px;font-size:18px;letter-spacing:.04em;writing-mode:vertical-rl;transform:rotate(180deg)}
  .nav a.is-on{border-left:2px solid var(--brassDark)}
  .dom{display:block;margin-top:auto;font:400 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--leadLight);writing-mode:vertical-rl;transform:rotate(180deg)}

  /* hero stage keeps the frame's coordinates */
  .hero{padding:0;container-type:inline-size}
  .stage{--u:min(100cqw/1256,1.2px);--lh:calc(54*var(--u));display:block;width:calc(1256*var(--u));height:calc(900*var(--u));margin-inline:auto}
  .stage>*{position:absolute}
  .h1{left:calc(64*var(--u));top:calc(60*var(--u));width:calc(792*var(--u));font-size:calc(96*var(--u));line-height:.94}
  .sf{left:calc(908*var(--u));top:calc(72*var(--u));width:calc(284*var(--u));font-size:calc(19*var(--u));line-height:1.5}
  .cta{left:calc(908*var(--u));top:calc(264*var(--u))}
  .cta .btn{font-size:calc(17*var(--u));padding:calc(15*var(--u)) calc(22*var(--u))}
  .gal{left:calc(-30*var(--u));top:calc(384*var(--u));width:calc(838*var(--u));margin:0;padding:0}
  .mats{left:calc(454*var(--u));right:auto;top:calc(-74*var(--u));gap:calc(3*var(--u))}
  .mat{width:calc(30*var(--u));height:calc(78*var(--u))}
  .mat:nth-child(n+6){display:block}
  .mat:nth-child(3n+2){margin-top:calc(4*var(--u))}
  .mat::before{height:calc(10*var(--u))}
  .mat b{position:absolute;left:0;right:0;top:calc(52*var(--u));display:block;text-align:center;font:700 calc(18*var(--u))/1 var(--disp);color:var(--brassDark)}
  /* the galley runs off the left edge on screens wider than the frame */
  .tray{margin-left:-100vw;font-size:calc(31*var(--u));padding:calc(12*var(--u)) calc(8*var(--u)) calc(12*var(--u)) 0}
  .tray::before,.tray::after{height:calc(12*var(--u))}
  .tl .fc{padding-right:calc(28*var(--u))}
  .pt{left:calc(838*var(--u));top:calc(350*var(--u));width:calc(354*var(--u));font-size:calc(20*var(--u))}
  .proof{left:calc(832*var(--u));top:calc(384*var(--u));width:calc(360*var(--u));padding:calc(12*var(--u)) calc(18*var(--u))}
  .proof a{min-height:var(--lh);font-size:calc(18*var(--u));gap:calc(12*var(--u))}
  .facts{left:calc(64*var(--u));top:calc(768*var(--u));width:calc(500*var(--u));font-size:calc(14*var(--u));letter-spacing:.08em}
  .tag{display:block;left:calc(64*var(--u));top:calc(798*var(--u));width:calc(600*var(--u));font-size:calc(17*var(--u))}

  .sec{padding:88px var(--px) 96px}
  .ttl{font-size:56px}
  .g-head{flex-direction:row;align-items:flex-end;gap:48px;margin-bottom:40px}.g-head .ttl{flex:0 1 600px}.g-l{flex:0 1 360px;font-size:18px}
  .galley{border-width:6px;padding:28px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
  .keys{padding:104px var(--px) 112px}
  .keys .ttl{font-size:52px}
  .keys-in{flex-direction:row;gap:96px}
  .k-l{flex:0 0 360px}.k-l p{font-size:18px}
  .k-r{flex:1;min-width:0}
  .kr{flex-direction:row;gap:28px}.kk{flex:0 0 300px}.kt{flex:1;font-size:17px}
  .key{width:calc(var(--w)*1px)}
  .etaoin{left:-40px;bottom:-92px;font-size:230px;line-height:260px}
  .about-b{padding:104px var(--px) 150px}
  .about-b .in{gap:36px}
  .state{font-size:46px}
  .ab-s{right:-150px;bottom:30px;width:620px;height:120px;font-size:96px}
  .ab-s .fc{padding-left:24px}

  .phead{padding:72px var(--px) 88px}
  .phead .in{gap:22px}
  .ph-t{font-size:84px}
  .ph-l{font-size:20px}
  .ph-s{right:-180px;bottom:20px;width:560px;height:150px;font-size:120px}

  .rows-s{padding-block:64px 96px}
  .row{flex-direction:row;gap:48px;padding-block:40px}
  .row-c{flex:0 0 264px}
  .row-t{gap:14px}
  .row-h{font-size:48px}
  .row-o{font-size:20px}
  .row-f{flex-direction:row;gap:0}.row-f div{flex:1;padding-right:20px}

  .ghead{padding:56px var(--px) 72px}
  .gh{flex-direction:row;gap:56px;align-items:flex-start}
  .gh-c{flex:0 0 clamp(320px,35cqw,440px);width:440px}
  .gh-t{gap:16px}
  .cc--g .cb{height:64px}
  .g-t{font-size:80px}
  .g-s{font-size:20px}
  .fdl dt{flex-basis:130px}
  .tabs a{padding:18px 26px;font-size:16px}
  .tabs ul{gap:6px}
  .gbody-s{padding-block:64px 96px}
  .gbody{flex-direction:row;gap:clamp(48px,7vw,96px)}
  .gmain{flex:648 1 0;min-width:0;gap:48px}
  .gside{flex:360 1 0;min-width:0}
  .pn-h{font-size:34px}
  .panel p.p{font-size:18px}
  .ml li{font-size:17px}
  .gk li{font-size:17px}
  .gk .key{--w:150}
  .q{font-size:18px}.a{font-size:17px}
  .gb-s{display:block;position:absolute;right:-140px;bottom:80px;width:560px;height:130px;font-size:84px;box-shadow:var(--l2)}
  .gb-s .fc{padding-left:20px}

  .abody{gap:48px}
  .ab-b{padding-block:72px 96px}
  .tc2{flex-direction:row;gap:48px;padding-top:24px;border-top-width:4px}
  .tc2 h2{flex:0 0 360px;font-size:26px}
  .tc2>div{flex:1;font-size:17px}
  .sub{font-size:34px}
  .kbox{padding:28px}
  .kdl div{flex-direction:row;gap:16px}.kdl dt{flex:0 0 200px}
  .fq h3{font-size:18px}.fq p{font-size:16px}

  .foot{padding:72px var(--px) 44px}
  .foot .in{gap:32px}
  .f-top{flex-direction:row;align-items:center;gap:32px;font-size:16px}
  .f-top p{max-width:552px}
  .mark--f{--s:52px}
  .f-br{font-size:28px}
  .f-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .f-grid a{min-height:92px}
  .f-grid b{font-size:17px}
  .f-bot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 28px}

  .cookie{left:136px;right:auto;bottom:24px;width:500px;padding:28px 30px;border-width:6px}
  .ck-h{font-size:24px}.ck-p{font-size:16px}
  .ck-acts{flex-direction:row}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile:hover .tin,.tile:focus-visible .tin,.btn:hover{transform:none}
}

/* game page, phone: breadcrumbs sit above the cover, as in «Murder / mobile» */
@media (max-width:767px){
  .gh-t{display:contents}
  .gh .crumbs{order:-1}
  .gh .stamp{align-self:flex-start}
  .ft{margin-top:0}
  .fdl{margin-top:-14px}
}

.soc{display:flex;align-items:center;gap:4px;margin-left:-12px}.soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit;transition:opacity .15s}.soc a:hover{opacity:.65}.soc a:focus-visible{outline:2px solid currentColor;outline-offset:-4px}