/* drunaperkoquill.com — litho tin toys: two inks over a key line, 45° screen, one lamp from the upper left */
:root{--tin:#F2E9D3;--tin2:#E7DABB;--paper:#FBF6EA;--red:#C23123;--red2:#A3271C;--teal:#13615F;--teal2:#0E4746;--ink:#1D1A17;--ink2:#4A433B;--brass:#C99A2E;--mustard:#EDB927;--d:Bevan,Georgia,serif;--t:"Spline Sans",system-ui,sans-serif;--m:"Spline Sans Mono",ui-monospace,monospace;--pad:64px;--sh:6px;--st:9px;--dr:2.7px}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tin);color:var(--ink);font:400 16px/1.4 var(--t);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0;font-weight:400}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
i{display:block;font-style:normal}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.foot :focus-visible,.sa :focus-visible{outline-color:var(--mustard)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* printed parts */
.bead{height:7px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.pl{min-width:0;padding:4px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--sh) var(--sh) 0 var(--ink)}
.pf{height:100%;padding:24px;border:1px solid var(--ink);border-radius:8px}
.kn{flex:none;display:flex;align-items:center;justify-content:center;width:var(--k,34px);height:var(--k,34px);border:2px solid var(--ink);border-radius:50%;background:var(--red);box-shadow:2px 2px 0 var(--ink);color:var(--paper);font:400 calc(var(--k,34px)*.46)/1 var(--d)}
.kn.tl{background:var(--teal)}
.kn.sm{--k:30px}.kn.md{--k:42px}.kn.md2{--k:40px}.kn.lg{--k:52px}.kn.xl{--k:60px}
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--ink);border-radius:3px;background:var(--tin2);font:500 12px/1.2 var(--m);letter-spacing:.06em;text-transform:uppercase}
.tag.pp{background:var(--paper)}
.tag.mu{background:var(--mustard)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.btn{display:inline-block;align-self:flex-start;padding:16px 26px;border:2px solid var(--ink);border-radius:12px;background:var(--red);box-shadow:4.2px 4.2px 0 var(--ink);color:var(--paper);font:700 17px/1.2 var(--t);text-decoration:none;white-space:pre-wrap;cursor:pointer;transition:transform .1s steps(2),box-shadow .1s steps(2)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.pp{background:var(--paper);color:var(--ink)}
.btn.tlb{background:var(--teal);overflow-wrap:anywhere}
.lnk{align-self:flex-start;color:var(--red);font:600 17px/1.4 var(--t)}
.lnk.tl{color:var(--teal)}
.lnk.mu{color:var(--mustard)}
.st::after{content:"";position:absolute;inset:0}
.gc{position:relative;transition:box-shadow .15s steps(3)}
.gc:hover,.gc:focus-within{box-shadow:10px 10px 0 var(--ink)}
.h-scr,.g-scr,.a-scr,.ph-scr,.foot::before{position:absolute;left:0;top:0;pointer-events:none}

/* header */
.top{position:relative;z-index:30;background:var(--tin)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad)}
.logo{display:flex;align-items:center;gap:10px;font:400 24px/1.1 var(--d);text-decoration:none}
.lk-b{position:relative;flex:none;width:40px;height:40px;border:2px solid var(--ink);border-radius:8px;background:var(--red);box-shadow:2px 2px 0 var(--ink)}
.lk-b .wk{position:absolute;left:0;top:5px;width:36px;height:26.4px}
.mn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;padding:0;border:2px solid var(--ink);border-radius:8px;background:var(--paper);cursor:pointer}
.mn i{width:18px;height:2.5px;background:var(--ink)}
#nav ul{display:flex;gap:36px}
#nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:17px;font-weight:500;text-decoration:none}
#nav a::after{content:"";width:22px;height:4px;border-radius:2px;background:transparent}
#nav a:hover::after{background:var(--ink)}
#nav .is-on{color:var(--red);font-weight:700}
#nav .is-on::after,#nav .is-on:hover::after{background:var(--red)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--tin);height:880px;container-type:inline-size}
.h-scr{width:980px;height:560px;background:url(/assets/img/ht-hero-d.svg) repeat-y;opacity:.5}
.stage{--u:min(100cqw/1368,1.2px);position:absolute;left:50%;top:0;width:calc(1368*var(--u));height:880px;margin-left:calc(-684*var(--u))}
.hero{--fy:784px}
.floor{position:absolute;left:calc(50% - 50vw);width:100vw;top:var(--fy);height:96px;border-top:3px solid var(--ink);background:radial-gradient(circle at 25% 25%,var(--teal2) var(--dr),transparent calc(var(--dr) + .5px)) 0 0/var(--st) var(--st),radial-gradient(circle at 75% 75%,var(--teal2) var(--dr),transparent calc(var(--dr) + .5px)) 0 0/var(--st) var(--st),var(--teal)}
.floor::after{content:"";position:absolute;left:50%;top:17px;width:min(1232px,calc(100vw - 2*var(--pad)));height:5px;margin-left:calc(min(1232px,calc(100vw - 2*var(--pad)))/-2);background:radial-gradient(circle at 2.5px 2.5px,var(--tin) 2.5px,transparent 3px) 0 0/22px 5px repeat-x}
.stage h1{display:contents;font:400 150px/1 var(--d)}
.w{position:absolute;z-index:1;font:400 calc(150*var(--u))/1 var(--d);letter-spacing:-.02em;color:var(--ink);text-shadow:5px 5px 0 var(--red);white-space:nowrap}
.w1{right:calc(770*var(--u));top:96px}
.w2{left:calc(842*var(--u));top:96px}
.w3{right:calc(884*var(--u));top:246px}
.w4{left:calc(956*var(--u));top:246px}
.robot{position:absolute;z-index:3;left:calc(499*var(--u));top:42px;width:calc(441.75*var(--u));height:760px;filter:drop-shadow(14px 10px 0 rgb(29 26 23 / .22))}
.hero .robot img{width:100%;height:100%;max-width:none;object-fit:contain}
.ft{position:absolute;width:16px;height:7px;margin-left:-8px;border:1.5px solid var(--ink);border-radius:1px;background:var(--tin2)}
.f1{left:22%;top:31.8%}.f2{left:78%;top:31.8%}.f3{left:50%;top:61.8%}
.seam{position:absolute;left:19%;top:30.5%;width:62%;border-top:2px solid rgb(242 233 211 / .9)}
.key{position:absolute;z-index:2;left:calc(395*var(--u));top:422px;width:150px;height:110px;transform-origin:0 0;rotate:-6deg}
.key .wk{display:block;width:100%;height:100%;transform-origin:50% 50%;animation:wind 7s linear infinite}
@keyframes wind{to{transform:rotateX(360deg)}}
.h-ui{position:absolute;inset:0;pointer-events:none}
.h-ui>*{pointer-events:auto}
.sf{position:absolute;left:var(--pad);top:520px;width:380px;display:flex;flex-direction:column;gap:24px;z-index:4}
.sf p{font-size:20px;line-height:1.45}
.panel{position:absolute;z-index:4;right:var(--pad);top:430px;width:360px}
.panel .pf{display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.p-h{display:flex;align-items:center;justify-content:space-between}
.p-h h2{font:400 26px/1.25 var(--d)}
.p-h i{width:34px;height:6px;background:radial-gradient(circle at 3px 3px,var(--red) 3px,transparent 3.5px) 0 0/14px 6px repeat-x}
.panel ul{display:flex;flex-direction:column;gap:12px}
.panel li{position:relative;display:flex;align-items:center;gap:12px}
.panel li>span:not(.kn){flex:1;min-width:0}
.panel a{display:block;font-size:16px;font-weight:600;line-height:1.25;text-decoration:none}
.panel a::after{content:"";position:absolute;inset:0}
.panel li:hover a{text-decoration:underline}
.panel small{display:block;font:500 12px/1.3 var(--m);letter-spacing:.02em;color:var(--teal)}

/* G */
.sg{position:relative;overflow:hidden;padding:88px var(--pad) 104px;background:var(--tin2)}
.g-scr{width:360px;height:1400px;background:url(/assets/img/ht-g-d.svg) repeat-y;opacity:.35}
.g-head{position:relative;display:flex;align-items:flex-end;gap:48px;margin-bottom:40px}
.g-head h2{flex:none;font:400 64px/1 var(--d)}
.g-head p{width:420px;font-size:18px;color:var(--ink2)}
.stag{position:relative;display:flow-root}
.stag li{width:calc(50% - 20px);margin-bottom:32px}
.stag li:nth-child(odd){float:left;clear:left}
.stag li:nth-child(even){float:right;clear:right}
.stag li:nth-child(2){margin-top:120px}
.stag li:nth-last-child(-n+2){margin-bottom:0}
.row .pf{display:flex;gap:22px;padding:18px}
.c-top{flex:none;display:flex;align-items:flex-start;gap:14px}
.c-cv{flex:none;width:206px;padding:5px;border-radius:12px;background:var(--ink)}
.c-cv img{width:100%;border-radius:8px}
.c-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.toy{font:500 12px/1.3 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.c-t h3{font:400 30px/1.1 var(--d)}
.o{font-size:16px;line-height:1.45;color:var(--ink2)}
.c-t .lnk{font-size:15px}

/* A */
.sa{position:relative;overflow:hidden;display:flex;gap:72px;padding:88px var(--pad);background:var(--teal2)}
.a-scr{width:100%;height:220px;background:url(/assets/img/ht-lid-d.svg) repeat-x}
.a-t{position:relative;flex:none;width:440px;display:flex;flex-direction:column;gap:18px;color:var(--tin)}
.a-t h2{font:400 56px/1 var(--d);color:var(--paper)}
.a-t p{font-size:18px;line-height:1.55}
.sa .fp{position:relative;flex:1}
.fp .pf{padding:10px 28px}
.fg{display:flex;gap:36px}
.fg>div{flex:1;min-width:0}
.fct{padding:16px 0;border-bottom:1px solid var(--ink)}
.fg>div .fct:last-child{border-bottom:0}
.fct dt,.fa dt,.ro dt{font:500 12px/1.3 var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.fct dt{line-height:1.5}
.fct dd{margin-top:4px;font-size:18px;font-weight:500;overflow-wrap:anywhere}
.fct a{text-decoration:none}

/* footer */
.foot{position:relative;overflow:hidden;container-type:inline-size;display:flex;flex-direction:column;gap:36px;padding:56px var(--pad) 36px;background:var(--red);color:var(--paper)}
.foot::before{content:"";width:100%;height:260px;background:url(/assets/img/ht-foot-d.svg) repeat-x}
.foot>*{position:relative}
.f-top{display:flex;gap:64px}
.f-a{flex:none;width:420px;display:flex;flex-direction:column;gap:12px}
.f-l{font-size:18px}
.f-d{font-size:14px}
.f-cols{display:flex;flex-wrap:wrap;gap:20px 56px}
.f-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:16px;font-weight:500}
.f-c h2{font:500 12px/1.3 var(--m);letter-spacing:.08em;text-transform:uppercase}
.f-c a{text-decoration:none}
.f-c a:hover{text-decoration:underline}
.base button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.wm{font:400 calc((100cqw - 2*var(--pad) - 15px)/9.57)/1 var(--d);text-shadow:8px 8px 0 var(--ink);white-space:nowrap}
.base{display:flex;justify-content:space-between;gap:8px;font:500 13px/1.3 var(--m)}

/* inner heads */
.ph{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:38px var(--pad) 48px;background:var(--tin)}
.ph>*{position:relative}
.ph>.ph-scr{position:absolute;width:1368px;height:300px;background:url(/assets/img/ht-head-d.svg) repeat-y;opacity:.35}
.ph h1{max-width:900px;font:400 72px/1.06 var(--d);overflow-wrap:anywhere}
.ph p{max-width:680px;font-size:19px;color:var(--ink2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 13px/1.4 var(--m);letter-spacing:.04em;color:var(--ink2)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs b{font-weight:500;color:var(--red)}
.crumbs span{font:14px/1 var(--t)}

/* catalogue */
.cat{padding:66px var(--pad) 96px;background:var(--tin2)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 44px;align-items:start}
.card .pf{display:flex;flex-direction:column;gap:12px;padding:14px}
.cw{position:relative;overflow:hidden;border-radius:8px}
.cw img{width:100%}
.cs{position:absolute;right:0;top:0;width:120px;height:120px;--c:var(--teal);opacity:.9;background:radial-gradient(circle at 25% 25%,var(--teal) var(--dr),transparent calc(var(--dr) + .5px)) 0 0/var(--st) var(--st),radial-gradient(circle at 75% 75%,var(--teal) var(--dr),transparent calc(var(--dr) + .5px)) 0 0/var(--st) var(--st)}
.cs::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s steps(3);background:radial-gradient(circle at 25% 25%,var(--red) calc(var(--dr) + .6px),transparent calc(var(--dr) + 1.1px)) 0 0/var(--st) var(--st),radial-gradient(circle at 75% 75%,var(--red) calc(var(--dr) + .6px),transparent calc(var(--dr) + 1.1px)) 0 0/var(--st) var(--st)}
.card:hover .cs::after,.card:focus-within .cs::after{opacity:1}
.cw .kn{position:absolute;left:10px;top:10px}
.card h2{font:400 26px/1.1 var(--d)}
.card .o{font-size:15px}
.ky{font:500 12px/1.4 var(--m);color:var(--teal)}
.lnk.ik{color:var(--ink);font-size:15px}
.card:hover .ik,.card:focus-within .ik{color:var(--red)}

/* guide spread */
.sp-t{padding:28px var(--pad) 0}
.spread{display:flex;padding:28px var(--pad) 88px}
.lp{flex:none;width:520px;display:flex;flex-direction:column;gap:28px;padding-right:48px}
.cvh{position:relative}
.cvp{padding:5px;border-radius:12px;background:var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink)}
.cvp img{width:100%;border-radius:8px}
.cvh .kn{position:absolute;left:-14px;top:-14px}
.fa .pf{padding:8px 20px}
.fa h2{font:400 24px/1.6 var(--d)}
.fa dl>div{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--ink)}
.fa dt{flex:none;width:120px;line-height:1.75}
.fa dd{flex:1;min-width:0;font-size:15px;font-weight:500}
.fold{flex:none;width:7px;border-left:3px solid var(--ink);border-right:1px solid var(--ink)}
.rp{flex:1;min-width:0;display:flex;flex-direction:column;gap:34px;padding-left:56px}
.hd{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hd h1{font:400 68px/1.02 var(--d)}
.su{font-size:20px;line-height:1.5}
.me{font:500 13px/1.4 var(--m);color:var(--ink2)}
.b{display:flex;flex-direction:column;gap:12px}
.b>h2{font:400 30px/1.15 var(--d)}
.tx{max-width:640px;font-size:17px;line-height:1.6}
.kys{display:flex;flex-wrap:wrap;gap:10px}
.kc{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-size:15px;font-weight:500}
.tip{display:flex;gap:14px}
.tip p{font-size:16px;line-height:1.55}
.we{display:flex;gap:10px}
.we i{flex:none;width:10px;height:10px;margin-top:6px;border-radius:2px;background:var(--red)}
.we p{font-size:16px;line-height:1.5}
.sims{display:flex;gap:14px}
.sim{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--ink);border-radius:12px;background:var(--paper);transition:box-shadow .15s steps(3)}
.sim:hover,.sim:focus-within{box-shadow:4px 4px 0 var(--ink)}
.sim img{flex:none;width:72px;border-radius:8px}
.sim a{font-size:15px;font-weight:700;text-decoration:none}
.sim p{font-size:13px;line-height:1.4;color:var(--ink2)}
.wh{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:1px dashed var(--ink);border-radius:12px;background:var(--tin2)}
.wh h2{font-size:16px;font-weight:700}
.wh p{font-size:15px;line-height:1.5;color:var(--ink2)}
.wh .lnk{font-size:15px}
.qa{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--ink)}
.b .qa:nth-of-type(n){margin:0}
.qa h3{font-size:16px;font-weight:700}
.qa p{font-size:15px;line-height:1.5;color:var(--ink2)}

/* about */
.abb{display:flex;align-items:flex-start;gap:56px;padding:64px var(--pad) 88px;background:var(--tin2)}
.abc{flex:1;min-width:0;display:flex;flex-direction:column;gap:40px}
.ab-s{display:flex;gap:20px}
.ab-s>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ab-s h2{font:400 30px/1.15 var(--d)}
.ab-s p{font-size:17px;line-height:1.6}
.kt{flex:none;width:440px}
.kt .pf{display:flex;flex-direction:column;gap:14px}
.kt h2{font:400 30px/1.15 var(--d)}
.kb{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.kt .we{align-items:center}.kt .we i{margin:0}.kt .we p{font-size:15px;line-height:1.4}
.kt dl{display:flex;flex-direction:column;gap:14px}
.ro{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--ink)}
.ro dd{font-size:16px;font-weight:500;overflow-wrap:anywhere}

/* legal */
.lgb{display:flex;justify-content:center;padding:56px var(--pad) 88px;background:var(--tin2)}
.lpl{width:820px;max-width:100%}
.lpl .pf{display:flex;flex-direction:column;gap:22px;padding:36px 40px}
.lsum{font-size:18px;font-weight:500;line-height:1.55}
.lpl section{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--ink)}
.lpl h2{font:400 24px/1.2 var(--d)}
.lpl section p{font-size:16px;line-height:1.65}

/* cookie */
.cookie{position:fixed;z-index:60;right:24px;bottom:24px;width:468px;max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);overflow:auto;--sh:4px}
.cookie .pf{display:flex;flex-direction:column;gap:14px;padding:16px}
.ck-t{display:flex;align-items:center;gap:10px}
.ck-t h2{font:400 24px/1.2 var(--d)}
.ck-p{font-size:15px;line-height:1.5}
.ck-acts{display:flex;gap:12px}
.cookie .btn{padding:13px 20px;font-size:15px;box-shadow:2.8px 2.8px 0 var(--ink)}
.cookie .lnk{font-size:14px}
.ck-manage{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}
.ck-manage label{display:flex;align-items:center;gap:8px}
.ck-manage input{accent-color:var(--teal)}

/* tablet and phone: the 360 stage, centred and scaled */
@media (max-width:1199.98px){
  :root{--pad:40px}
  .hero{height:auto;--fy:calc(430*var(--u));--u:min(100cqw/360,1.6px);container-type:inline-size;overflow:hidden;padding-top:calc(494*var(--u))}
  .h-scr{width:100%;height:260px;background:url(/assets/img/ht-hero-m.svg) repeat-x}
  .stage{--u:min(100cqw/360,1.6px);width:calc(360*var(--u));height:calc(494*var(--u));margin-left:calc(-180*var(--u))}
  .floor{height:calc(64*var(--u));background-size:var(--st) var(--st),var(--st) var(--st),auto}
  .floor::after{top:calc(11*var(--u))}
  .stage h1{display:block;position:absolute;z-index:1;left:0;right:0;top:calc(28*var(--u));text-align:center;font-size:calc(64*var(--u))}
  .w{position:static;font-size:calc(64*var(--u));text-shadow:3px 3px 0 var(--red)}
  .w2::after{content:"\A";white-space:pre}
  .robot{left:calc(92.8*var(--u));top:calc(144*var(--u));width:calc(174.4*var(--u));height:calc(300*var(--u));filter:drop-shadow(8px 6px 0 rgb(29 26 23 / .22))}
  .ft{width:8px;height:4px;margin-left:-4px}
  .seam{border-top-width:1px}
  .key{left:calc(34.8*var(--u));top:calc(294*var(--u));width:calc(82.5*var(--u));height:calc(60.5*var(--u))}
  .h-ui{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:start;padding:28px var(--pad) 44px}
  .sf,.panel{position:relative;inset:auto;width:auto;right:auto;top:auto;left:auto}
  .a-t{flex:0 1 340px}
  .sa{gap:36px}
  .f-top{flex-direction:column;gap:28px}
  .f-a{width:auto;max-width:560px}
  .g-head h2{flex:0 1 auto}
  .row .pf{flex-direction:column}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .spread{flex-direction:column}
  .lp{width:auto;max-width:600px;padding:0 0 24px}
  .fold{width:auto;height:7px;border:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
  .rp{padding:24px 0 0}
  .abb{flex-direction:column;gap:32px}
  .kt{width:100%;max-width:520px}
}
/* phone */
@media (max-width:767.98px){
  :root{--pad:16px;--sh:4px;--st:7px;--dr:2.1px}
  .bar{padding:14px var(--pad)}
  .logo{font-size:19px}
  .lk-b{width:32px;height:32px}
  .lk-b .wk{left:0;top:4px;width:28.5px;height:20.9px}
  .mn{display:flex}
  #nav{display:none;position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 8px);padding:6px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
  .open #nav{display:block}
  #nav ul{flex-direction:column;gap:0}
  #nav a{align-items:flex-start;padding:10px 0}
  #nav a::after{display:none}
  .btn{padding:13px 20px;font-size:15px;box-shadow:2.8px 2.8px 0 var(--ink)}
  .lnk{font-size:15px}
  .h-ui{display:flex;flex-direction:column;gap:28px;padding:28px var(--pad) 44px}
  .sf{gap:16px}
  .sf p{font-size:16px}
  .panel{width:100%}
  .panel .pf{gap:10px;padding:14px}
  .p-h h2{font-size:22px}
  .kn.lg{--k:40px}.kn.md{--k:36px}.kn.md2{--k:32px}.kn.xl{--k:44px}
  .panel .kn{--k:30px}
  .panel a{font-size:15px}
  .sg{padding:48px var(--pad) 56px}
  .g-scr{width:200px;height:2600px;background-image:url(/assets/img/ht-g-m.svg)}
  .g-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
  .g-head h2{font-size:38px}
  .g-head p{width:auto;font-size:15px}
  .stag li,.stag li:nth-child(n){float:none;width:auto;margin:0 0 24px}
  .stag li:last-child{margin-bottom:0}
  .row .pf{gap:14px;padding:14px}
  .c-cv{width:210px;max-width:calc(100% - 54px)}
  .c-t{gap:8px}
  .c-t h3{font-size:26px}
  .o{font-size:15px}
  .c-t .lnk{font-size:14px}
  .sa{flex-direction:column;gap:28px;padding:48px var(--pad)}
  .a-scr{background-image:url(/assets/img/ht-lid-m.svg)}
  .a-t{flex:none;width:auto}
  .a-t h2{font-size:36px}
  .a-t p{font-size:16px}
  .fp .pf{padding:6px 14px}
  .fg{flex-direction:column;gap:0}
  .fg>div:first-child .fct:last-child{border-bottom:1px solid var(--ink)}
  .fct dd{font-size:16px}
  .foot{gap:24px;padding:36px var(--pad) 24px}
  .foot::before{background-image:url(/assets/img/ht-foot-m.svg)}
  .f-top{gap:22px}
  .f-l{font-size:15px}
  .f-d{font-size:13px}
  .f-cols{gap:20px 28px}
  .f-c{font-size:15px}
  .f-c:last-child{flex-basis:100%}
  .wm{text-shadow:4px 4px 0 var(--ink)}
  .base{flex-direction:column;align-items:flex-start}
  .ph{gap:14px;padding:20px var(--pad) 28px}
  .ph>.ph-scr{width:100%;height:220px;background-image:url(/assets/img/ht-head-m.svg)}
  .ph h1{font-size:38px}
  .ph p{font-size:16px}
  .crumbs ol{font-size:12px}
  .cat{padding:28px var(--pad) 48px}
  .grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .card .pf{padding:12px}
  .card h2{font-size:24px}
  .sp-t{padding:16px var(--pad) 0}
  .spread{padding:16px var(--pad) 40px}
  .lp{max-width:none;gap:18px}
  .cvh .kn{left:-6px;top:-6px}
  .fa .pf{padding:6px 14px}
  .fa h2{font-size:21px}
  .fa dt{width:96px}
  .rp{gap:24px}
  .hd h1{font-size:38px}
  .su{font-size:16px}
  .b>h2{font-size:24px}
  .tx{font-size:15px}
  .tip p,.we p{font-size:15px}
  .sims{flex-direction:column}
  .abb{gap:28px;padding:28px var(--pad) 44px}
  .abc{gap:26px}
  .ab-s{gap:12px}
  .ab-s h2,.kt h2{font-size:24px}
  .ab-s p{font-size:15px}
  .kt{max-width:none}
  .kt .pf{padding:16px}
  .lgb{padding:24px var(--pad) 40px}
  .lpl .pf{padding:18px 14px}
  .lsum{font-size:16px}
  .lpl h2{font-size:20px}
  .lpl section p{font-size:15px}
  .cookie{left:15px;right:15px;bottom:12px;width:auto;max-width:none}
  .ck-acts{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .key .wk{animation:none}
  .btn,.gc,.cs::after,.sim{transition:none}
}

/* social icons (footer) */
.soc{display:flex;gap:10px;margin-top:4px}
.sic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:var(--dr) solid var(--paper);border-radius:50%;color:var(--paper);transition:background .15s steps(3),color .15s steps(3)}
.sic:hover{background:var(--paper);color:var(--red)}
.sic .si{width:18px;height:18px}