/* jolenvraskvault.com: papel picado street banners. Tissue flags on cords, hard noon sun (shadow dx:dy = 3:5, tinted, never black),
   lace shadows on lime-wash walls. Breakpoints: <768 mobile, 768-1199 tablet, >=1200 desktop (Figma 1368). */
:root{
  --wash:#F6F0E4;--wash2:#EDE3CF;--ink:#2A1630;--ink2:#5B4660;
  --rosa:#B80066;--rosaD:#7E0047;--rosaL:#FBD3E6;--teal:#00747C;--tealD:#00505A;--tealL:#CDEDEE;
  --mari:#F09600;--mariD:#9C5C00;--mariL:#FCE6BE;--lime:#6FA826;--limeD:#43701A;--limeL:#E1F0C8;
  --violet:#6B3FA0;--violetD:#40206A;--violetL:#E4D8F2;--sky:#2F6DB5;--skyD:#1B4479;--skyL:#D5E3F4;
  --hair:rgba(42,22,48,.35);--disp:'Stardos Stencil',Georgia,serif;--text:'Afacad',system-ui,sans-serif;
  --sun:.6;--hdr:96px;
}
.t-rosa{--c:var(--rosa);--cd:var(--rosaD);--cl:var(--rosaL);--cp:var(--rosa)}
.t-violet{--c:var(--violet);--cd:var(--violetD);--cl:var(--violetL);--cp:var(--violet)}
.t-teal{--c:var(--teal);--cd:var(--tealD);--cl:var(--tealL);--cp:var(--teal)}
.t-lime{--c:var(--lime);--cd:var(--limeD);--cl:var(--limeL);--cp:var(--limeD)}
.t-mari{--c:var(--mari);--cd:var(--mariD);--cl:var(--mariL);--cp:var(--mariD)}
.t-sky{--c:var(--sky);--cd:var(--skyD);--cl:var(--skyL);--cp:var(--sky)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--wash);color:var(--ink);font:400 16px/1.55 var(--text);overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;font-weight:600}
.skip:focus{top:12px}
.w{width:min(1224px,100% - 32px);margin-inline:auto}
.pc{width:18px;height:18px;flex:none}

/* lace shadow on the wall (pattern tile 240 at .5) */
.lc{position:relative;z-index:0}
.lc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lace) 0 0/120px;opacity:var(--lo,.12);pointer-events:none}
.l-magenta{--lace:url(/assets/img/lace-magenta.png)}.l-teal{--lace:url(/assets/img/lace-teal.png)}
.l-marigold{--lace:url(/assets/img/lace-marigold.png)}.l-ink{--lace:url(/assets/img/lace-ink.png)}
/* scalloped hem under bands, flags and cards */
.hem,.strip,.pk,.kc,.bn,.lt{position:relative;z-index:1}
.hem::after,.strip::after,.pk::after,.kc::after,.bn::after,.lt::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--hs,10px);background:radial-gradient(ellipse 50% 100% at 50% 0,var(--hb) 97%,transparent 100%) 0 0/var(--hw,22px) 100% repeat-x;pointer-events:none}

/* buttons, chips, links */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:0;border-radius:4px;background:var(--bb);color:#fff;font:600 15px/1.2 var(--text);text-decoration:none;cursor:pointer;box-shadow:calc(3px*var(--sun)) calc(5px*var(--sun)) 0 var(--bs);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:calc(3px*var(--sun) + 2px) calc(5px*var(--sun) + 3px) 0 var(--bs)}
.b-rosa{--bb:var(--rosa);--bs:var(--rosaD)}.b-teal{--bb:var(--teal);--bs:var(--tealD)}.b-lime{--bb:var(--limeD);--bs:var(--limeD)}
.chip{display:inline-block;font:600 12px/1.25 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--cd,var(--ink))}
.h2{font:700 32px/1 var(--disp);letter-spacing:-.01em}

/* header: sticky, logo + indexed nav */
.top{position:sticky;top:0;z-index:50;background:var(--wash);border-bottom:1px solid rgba(42,22,48,.5)}
.tp{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px 0 16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--disp);letter-spacing:-.01em}
.logo .fl{width:22px;height:auto}
.nav ul{display:flex;gap:20px}
.nav a{display:flex;align-items:center;gap:8px;font:500 15px/1.2 var(--text);text-decoration:none}
.nav .pc{width:14px;height:14px}
.nav a:hover{color:var(--rosa)}
.nav a[aria-current]{color:var(--rosa);font-weight:700;text-decoration:underline}

/* hero: three banner lines over the street photo */
.hero{position:relative;container-type:inline-size;overflow:hidden;background:var(--sky) url(/assets/img/hero-m.webp) center/cover;padding-bottom:28px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(42,22,48,.45))}
.hs{position:relative;--u:min(100cqw/360,1.5px);--cx:calc((100cqw - 360*var(--u))/2);height:calc(382*var(--u));
  --fs:40;--pt:10;--pb:18;--gap:16;--mw:20;--hsz:10}
.hl{font:inherit}
.bn{position:absolute;display:block;right:calc(-80*var(--u));transform-origin:0 0;filter:drop-shadow(1.8px 3px 0 var(--sh));--hs:calc(var(--hsz)*var(--u));--hw:calc(22*var(--u))}
.bt{display:block;overflow:hidden;background:var(--hb);padding:calc(var(--pt)*var(--u)) 0 calc(var(--pb)*var(--u))}
.b1{--hb:var(--rosa);--fg:#fff;--sh:var(--rosaD);top:calc(32*var(--u));left:calc(-8*var(--u));transform:rotate(-2deg)}
.b3{--hb:var(--ink);--fg:var(--mari);--sh:var(--violetD);top:calc(268*var(--u));left:calc(var(--cx) - 10*var(--u));transform:rotate(-1.2deg)}
.tr,.half,.rep{display:flex;align-items:center}
.tr{width:max-content;margin-left:calc(16*var(--u))}
.bw{font:700 calc(var(--fs)*var(--u))/1 var(--disp);letter-spacing:-.01em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.bw,.bm{margin-right:calc(var(--gap)*var(--u))}
.bm{width:calc(var(--mw)*var(--u));height:auto;flex:none}
.b1 .tr{animation:slideL 60s linear infinite}
.b3 .tr{animation:slideR 72s linear infinite}
@keyframes slideL{to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:none}}
/* middle line: one letter per flag on a cord, swaying the other way */
.ll{position:absolute;top:calc(150*var(--u));left:calc(var(--cx) + 12*var(--u));width:calc(336*var(--u));--sag:calc(10*var(--u));--fw:calc(26*var(--u));--lg:calc(2*var(--u))}
.lw{display:grid;grid-template-columns:repeat(12,1fr);position:relative;animation:sway 9s ease-in-out infinite alternate}
.lw .cord{position:absolute;left:calc(-40*var(--u));width:calc(100% + 80*var(--u));height:calc(var(--sag)*1.25);top:calc(var(--sag)*-.125 - 3*var(--u))}
.lt{display:block;width:var(--fw);height:calc(var(--fw)*1.3 - 6*var(--u));background:var(--hb);opacity:.95;transform-origin:0 0;transform:translateY(calc(var(--v)*var(--sag) - 2*var(--u))) rotate(var(--r));filter:drop-shadow(calc(.72*var(--u)) calc(1.2*var(--u)) 0 var(--sh));--hs:calc(6*var(--u));--hw:calc(var(--fw)/3)}
.lt b{display:block;padding-top:calc(var(--fw)*.18);text-align:center;font:700 calc(var(--fw)*.82)/1 var(--disp);color:var(--ink)}
.c-rosaL{--hb:var(--rosaL);--sh:var(--ink)}.c-mari{--hb:var(--mari);--sh:var(--mariD)}.c-lime{--hb:var(--lime);--sh:var(--limeD)}.c-sky{--hb:var(--sky);--sh:var(--skyD)}
@keyframes sway{from{transform:translateX(calc(-14*var(--u)))}to{transform:translateX(calc(14*var(--u)))}}
.hero:hover .mv,.hero:focus-within .mv,.mq:hover .mv,.mq:focus-within .mv{animation-play-state:paused}
/* fact strip: UI layer pinned under the last line */
.strip{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:16px 16px 24px;background:var(--wash);border-radius:4px;filter:drop-shadow(2.7px 4.5px 0 var(--ink));--hb:var(--wash)}
.strip>p{font-size:15px}
.hf{display:flex;flex-wrap:wrap;gap:10px 12px}
.hf li{display:flex;align-items:center;gap:8px;font:600 12px/1.25 var(--text);letter-spacing:.09em;text-transform:uppercase}
.hf .pc{width:14px;height:14px;color:var(--c)}

/* sections */
.sec{padding:56px 0 64px}
.hd{display:grid;gap:14px;max-width:760px;margin-bottom:24px}
.hd p{color:var(--ink2)}

/* G: one flag-row per game */
.gs{padding:48px 0 56px}
.rows{border-top:1px solid rgba(42,22,48,.6)}
.gr{position:relative;display:grid;grid-template-columns:120px 1fr;gap:14px;padding:20px 0 24px;border-bottom:1px solid var(--hair);transition:background-color .3s,padding .3s}
.gcv{aspect-ratio:4/3;transition:transform .3s}
.cv{width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:calc(6px*var(--sun)) calc(10px*var(--sun)) 0 var(--cd);transition:box-shadow .3s}
.gt{display:grid;gap:8px;align-content:start}
.gt h3{font:700 22px/1 var(--disp)}
.gt a{text-decoration:none}
.gt a::after{content:"";position:absolute;inset:0;z-index:1}
.gt a:focus-visible{outline:none}
.gt a:focus-visible::after{outline:3px solid var(--teal);outline-offset:-3px}
.gt p{color:var(--ink2)}
.gl{grid-column:1/-1;display:grid;gap:6px}
.gl div{display:flex;gap:10px;align-items:baseline}
.gl dt{font:600 12px/1.25 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--cd);flex:none}
.gl dd{font-size:15px}
.go{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--text)}
.go .pc{color:var(--cp)}
.gr:hover,.gr:focus-within{background:var(--cl);padding-left:12px}
.gr:hover .gcv,.gr:focus-within .gcv{transform:rotate(1.5deg)}
.gr:hover .cv,.gr:focus-within .cv{box-shadow:calc(9px*var(--sun)) calc(15px*var(--sun)) 0 var(--cd)}

/* D: three picks hang from one cord */
.ds{background:var(--wash2);overflow-x:clip}
.pkw{position:relative;padding-top:18px}
.pkw .cord{position:absolute;top:2px;left:calc(50% - 50vw);width:100vw;height:40px;z-index:0}
.pks{position:relative;z-index:1;display:grid;gap:28px;align-items:start}
.pk{padding:24px 20px 40px;background:var(--hb);color:var(--pf);filter:drop-shadow(calc(6px*var(--sun)) calc(10px*var(--sun)) 0 var(--pd));--hs:10px;--hw:22px}
.p-mari{--hb:var(--mari);--pd:var(--mariD);--pf:var(--ink)}.p-violet{--hb:var(--violet);--pd:var(--violetD);--pf:#fff}.p-teal{--hb:var(--teal);--pd:var(--tealD);--pf:#fff}
.pk h3{font:700 22px/1.05 var(--disp);margin-bottom:12px}
.pk p{margin-bottom:12px}
.pk ul{display:grid;gap:10px}
.pk a{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:underline}
.pk a:hover{text-decoration-thickness:2px}
.pk .pc{width:16px;height:16px}

/* T: marquee along a rosa band */
.mq{background:var(--rosa);color:#fff;padding:16px 0 24px;overflow:hidden}
.mq-t{display:flex;width:max-content;margin-left:16px;animation:slideL 55s linear infinite}
.mq-u{display:flex;align-items:center}
.mq-u li{margin-right:16px;font:600 19px/1.2 var(--text);white-space:nowrap}
.mq-u a{text-decoration:none}
.mq-u a:hover{text-decoration:underline}
.mq-u .mk img{width:16px;height:auto}

/* P: one game in focus */
.ps{position:relative;overflow-x:clip}
.dflag{display:none}
.pr,.ghr{display:flex;flex-direction:column;gap:24px}
.pcv{width:100%;aspect-ratio:4/3}
.pcv .cv{box-shadow:calc(9px*var(--sun)) calc(15px*var(--sun)) 0 var(--cd)}
.pt{display:grid;gap:18px;justify-items:start}
.pts{display:grid;gap:10px}
.pts li,.pl li{display:flex;align-items:center;gap:10px;font-weight:500}
.pts .pc{color:var(--limeD)}

/* F: questions left, answers right */
.fq{background:var(--wash2)}
.fq .h2{margin-bottom:24px;max-width:760px}
.gbk .fr{margin:-14px 0 0}
.gbk .fr div{padding:18px 0}
.qal{border-top:1px solid rgba(42,22,48,.6)}
.qa{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid rgba(42,22,48,.3)}
.qa h3{display:flex;gap:12px;font:700 20px/1.1 var(--disp)}
.qa h3 .pc{width:20px;height:20px;color:var(--cp);margin-top:1px}
.qa .last{color:var(--rosaD)}

/* footer: four tissue sheets laid over each other */
.foot{background:var(--wash2);padding:48px 0 36px}
.fst{display:grid;gap:16px}
.fc{display:grid;gap:10px;align-content:start;padding:20px 18px 26px;border-radius:4px;background:var(--fb);color:var(--ff);box-shadow:calc(4.5px*var(--sun)) calc(7.5px*var(--sun)) 0 var(--fd)}
.fc0{--fb:var(--rosa);--ff:#fff;--fd:var(--rosaD)}.fc1{--fb:var(--wash);--ff:var(--ink);--fd:var(--ink);border:1px solid rgba(42,22,48,.3)}
.fc2{--fb:var(--mari);--ff:var(--ink);--fd:var(--mariD)}.fc3{--fb:var(--teal);--ff:#fff;--fd:var(--tealD)}
.fc h2{font:700 22px/1.1 var(--disp)}
.fc ul{display:grid;gap:8px}
.fc a,.fc button{font:500 17px/1.3 var(--text);text-decoration:none}
.fc a:hover,.fc button:hover{text-decoration:underline}
.fc button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.fc0 .logo{font-size:21px}
.fc0 p{font-size:16px}
.fc0 .fm{font-weight:700;text-decoration:underline}
.fc3 li{display:flex;align-items:center;gap:8px;font-size:16px}
.si{width:16px;height:16px;flex:none}
.fb{display:grid;gap:12px;padding-top:28px;font-size:14px;color:var(--ink2)}

/* inner page head */
.ph{background:var(--wash2);padding:24px 0 40px;--hb:var(--wash2)}
.ph .w{position:relative;display:grid;gap:16px}
.ph h1{font:700 36px/1 var(--disp);letter-spacing:-.01em;max-width:820px}
.ph p{color:var(--ink2);max-width:760px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--ink2)}
.crumbs li{display:flex;gap:8px}
.crumbs li+li::before{content:"›"}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.bun{display:none}

/* games: accordion sheets, sorted by genre */
.acs{padding:32px 0 56px}
.acl{display:grid;gap:10px}
.ac{background:var(--wash);border:1px solid var(--hair);border-radius:4px;transition:background-color .25s}
.ac[open]{background:var(--cl);box-shadow:calc(4.5px*var(--sun)) calc(7.5px*var(--sun)) 0 var(--cd)}
.ac summary{display:grid;grid-template-columns:64px 1fr auto;column-gap:12px;align-items:center;padding:14px;cursor:pointer;list-style:none}
.ac summary::-webkit-details-marker{display:none}
.ac .th{grid-row:1/3;width:64px;height:48px;box-shadow:calc(3px*var(--sun)) calc(5px*var(--sun)) 0 var(--cd)}
.ac h2{grid-column:2;font:700 20px/1.05 var(--disp)}
.ac summary .chip{grid-column:2;margin-top:4px}
.ac:not([open]) summary .chip{display:none}
.ax{grid-column:3;grid-row:1/3;width:22px;height:22px;color:var(--cp);transition:transform .25s}
.ac[open] .ax{transform:rotate(45deg)}
.ac[open] .th{display:none}
.ac[open] summary{grid-template-columns:1fr auto}
.ac[open] h2,.ac[open] summary .chip{grid-column:1}
.ac[open] .ax{grid-column:2}
.ac summary:hover h2{text-decoration:underline;text-decoration-thickness:2px}
.ab{display:flex;flex-direction:column;gap:16px;padding:0 14px 20px}
.ab>.cv{aspect-ratio:4/3;height:auto}
.ab>div{display:grid;gap:4px}
.fr{display:grid;margin:8px 0}
.fr div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid rgba(42,22,48,.2)}
.fr dt{flex:none;width:104px;font:600 12px/1.6 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.tl{display:inline-flex;align-items:center;gap:8px;padding-top:12px;font:600 15px/1.2 var(--text)}
.tl .pc{color:var(--cp)}
.tl:hover{text-decoration-thickness:2px}

/* game page */
.gh{background:var(--cl);padding:20px 0 40px;--hb:var(--cl)}
.ghr{margin-top:16px;gap:20px}
.ght{display:grid;gap:18px;align-content:center}
.gh h1{font:700 36px/.98 var(--disp);letter-spacing:-.01em}
.gh .mt{font-size:14px;color:var(--ink2)}
.gbd{padding:32px 0 56px}
.gbi{display:flex;flex-direction:column;gap:24px}
.toc{padding:20px 20px 24px;background:var(--wash2);border:1px solid rgba(42,22,48,.25);border-radius:4px;align-self:stretch}
.toc>p{font:600 12px/1.25 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.toc a{display:flex;align-items:center;gap:10px;padding:7px 0;font:500 16px/1.25 var(--text);text-decoration:none}
.toc .pc{width:16px;height:16px;color:var(--ink2)}
.toc a:hover span{text-decoration:underline}
.toc a[aria-current]{color:var(--cd);font-weight:700}
.toc a[aria-current] .pc{color:var(--cd)}
.gm{display:grid;gap:32px;min-width:0}
.gbk{display:grid;gap:14px;align-content:start}
.gbk h2{font:700 24px/1.05 var(--disp)}
.keys div{display:flex;align-items:center;gap:16px}
.keys dt{flex:none}
kbd{display:inline-block;padding:6px 12px;background:var(--wash);border:1px solid rgba(42,22,48,.5);border-radius:4px;box-shadow:1.5px 2.5px 0 var(--ink);font:600 15px/1.2 var(--text)}
.keys{display:grid;gap:12px}
.pl{display:grid;gap:12px}
.pl li{align-items:flex-start;gap:12px;font-weight:400}
.pl .pc{width:20px;height:20px;color:var(--cd);margin-top:2px}
.pw .pc{color:var(--ink2)}
.sim{display:grid;gap:20px}
.sim a{display:flex;align-items:center;gap:14px;text-decoration:none}
.sim img{flex:none;width:96px;height:72px;object-fit:cover;border-radius:4px;box-shadow:3px 5px 0 var(--ink2)}
.sim span{display:grid;gap:4px}
.sim b{font-size:17px}
.sim a:hover b{text-decoration:underline}
.sim small{font-size:15px;color:var(--ink2)}
.gfq{display:grid;gap:14px}
.gfq h3{font:700 18px/1.3 var(--text)}
.wh{display:grid;gap:10px;padding:18px 20px 22px;background:var(--wash2);border:1px solid rgba(42,22,48,.25);border-radius:4px;color:var(--ink2)}
.wh a{font:600 15px/1.3 var(--text);text-decoration:underline}
.wh a:hover{color:var(--ink)}

/* about */
.abt{position:relative;overflow-x:clip}
.col{display:grid;gap:32px;max-width:760px}
.col section h2{font:700 24px/1.1 var(--disp);margin-bottom:12px}
.col section p+p{margin-top:12px}
.kc{display:grid;gap:12px;padding:22px 18px 30px;background:var(--rosa);color:#fff;border-radius:4px 4px 0 0;filter:drop-shadow(calc(6px*var(--sun)) calc(10px*var(--sun)) 0 var(--rosaD));--hb:var(--rosa);--hs:10px}
.kc h2{font:700 24px/1.1 var(--disp)}
.kc ul{display:grid;gap:8px}
.kc li{display:flex;align-items:center;gap:10px}
.kc dl{display:grid;gap:6px}
.kc dl div{display:flex;gap:16px}
.kc dt{flex:none;width:100px;font:600 14px/1.5 var(--text);letter-spacing:.08em;text-transform:uppercase}
.kc dd{font-weight:600}

/* legal */
.lgl .col{gap:24px}
.sum{font-size:17px;font-weight:500;padding-bottom:24px;border-bottom:1px solid rgba(42,22,48,.4)}
.lgl section h2{font-size:22px}
.ctl{display:grid;gap:6px;padding:18px 20px;background:var(--wash2);border:1px solid rgba(42,22,48,.25);border-radius:4px;font-size:15px}

/* cookie: a small sheet with its own bunting */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:grid;gap:14px;max-width:500px;max-height:calc(100vh - 24px);overflow:auto;padding:20px 18px 30px;background:var(--wash);border:1px solid rgba(42,22,48,.3);border-radius:4px;box-shadow:calc(4.5px*var(--sun)) calc(7.5px*var(--sun)) 0 var(--ink)}
.cookie[hidden]{display:none}
.ck-b{position:relative;height:36px;margin:-14px -2px 0;display:flex;justify-content:space-around}
.ck-b svg{position:absolute;left:0;top:0;width:100%;height:10px}
.ck-b i{display:block;transform:translateY(calc(var(--v)*7px - 1px))}
.ck-b img{width:18px;height:auto;filter:drop-shadow(1px 1.5px 0 rgba(42,22,48,.55))}
.cookie h2{font:700 22px/1.05 var(--disp)}
.ck-acts{display:flex;flex-wrap:wrap;gap:12px}
.ck-manage[hidden]{display:none}
.ck-manage{display:grid;gap:8px;padding:12px 0;border-block:1px solid rgba(42,22,48,.2)}
.ck-manage label{display:flex;align-items:center;gap:10px}
.ck-manage input{width:18px;height:18px;accent-color:var(--teal)}
.ck-manage .btn{justify-self:start}
.ck-l{justify-self:start;font:600 15px/1.2 var(--text);color:var(--ink2);text-decoration:underline}

/* ---------- tablet ---------- */
@media (min-width:768px){
  :root{--sun:.8;--hdr:84px}
  body{font-size:17px}
  .w{width:min(1224px,100% - 80px)}
  .tp{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 0 22px}
  .logo{font-size:24px}.logo .fl{width:25px}
  .nav ul{gap:28px}
  .nav a{font-size:17px}
  .nav .pc{width:16px;height:16px}
  .hero{background-image:url(/assets/img/hero-1200.webp);padding-bottom:calc(66*min(100cqw/1368,1.15px))}
  .hs{--u:min(100cqw/1368,1.15px);--cx:calc((100cqw - 1368*var(--u))/2);height:calc(610*var(--u));--fs:96;--pt:18;--pb:30;--gap:34;--mw:40;--hsz:14}
  .bn{filter:drop-shadow(3px 5px 0 var(--sh));--hw:calc(36*var(--u))}
  .b1{top:calc(46*var(--u));left:calc(-40*var(--u));transform:rotate(-2deg)}
  .b3{top:calc(426*var(--u));left:calc(var(--cx) + 230*var(--u));transform:rotate(-1deg)}
  .tr{margin-left:calc(40*var(--u))}
  .ll{top:calc(236*var(--u));left:calc(var(--cx) + 60*var(--u));width:calc(1060*var(--u));--sag:calc(26*var(--u));--fw:calc(1060*var(--u)/12 - 6*var(--u))}
  .lt{filter:drop-shadow(calc(2.4*var(--u)) calc(4*var(--u)) 0 var(--sh));height:calc(var(--fw)*1.3 - 10*var(--u));--hs:calc(10*var(--u))}
  @keyframes sway{from{transform:translateX(calc(-24*var(--u)))}to{transform:translateX(calc(24*var(--u)))}}
  .strip{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:24px 28px 32px;filter:drop-shadow(3.6px 6px 0 var(--ink));--hs:14px;--hw:36px}
  .strip>p{font-size:17px;flex:1 1 100%}
  .hf{flex:1;gap:12px 22px}
  .hf li{font-size:13px}
  .hf .pc{width:16px;height:16px}
  .btn{padding:14px 22px;font-size:17px}
  .h2{font-size:44px}
  .sec{padding:80px 0 88px}
  .hd{gap:14px;margin-bottom:32px}
  .gs{padding:72px 0 80px}
  .gr{grid-template-columns:160px 1fr;gap:16px 24px;padding:26px 0 30px}
  .gr:hover,.gr:focus-within{padding-left:20px}
  .gt h3{font-size:28px}
  .gl{grid-column:2;grid-template-columns:100px 120px 1fr;gap:24px}
  .gl div{flex-direction:column;gap:6px}
  .gl dd{font-size:16px}
  .go{grid-column:2;font-size:17px}
  .go .pc,.tl .pc{width:22px;height:22px}
  .pks{grid-template-columns:repeat(3,1fr);gap:24px}
  .pkw{padding-top:28px}
  .pkw .cord{top:6px}
  .pk{padding:30px 24px 48px;--hs:14px;--hw:36px}
  .pk h3{font-size:26px}
  .p-mari{transform:rotate(-1.2deg)}.p-violet{transform:rotate(1deg)}.p-teal{transform:rotate(-.8deg)}
  .mq{padding:22px 0 30px}
  .mq-t{margin-left:40px}
  .mq-u li{margin-right:22px;font-size:23px}
  .mq-u .mk img{width:20px}
  .pr,.ghr{flex-direction:row;align-items:center;gap:40px}
  .pcv{flex:0 0 45%}
  .h2.big,.pt .h2{font-size:44px}
  .fq .h2{margin-bottom:32px}
  .qa{grid-template-columns:minmax(0,360px) 1fr;gap:40px;padding:24px 0}
  .qa h3{font-size:22px}
  .foot{padding:64px 0 44px}
  .fst{grid-template-columns:repeat(2,1fr);gap:20px}
  .fc{padding:26px 24px 32px}
  .fc0{transform:rotate(1deg)}.fc1{transform:rotate(-.8deg)}.fc2{transform:rotate(.6deg)}.fc3{transform:rotate(-1deg)}
  .fb{grid-template-columns:1fr auto;gap:24px;padding-top:40px}
  .ph{padding:32px 0 56px;--hs:14px;--hw:36px}
  .ph .w{gap:20px}
  .ph h1{font-size:56px}
  .acs{padding:48px 0 80px}
  .acl{gap:14px}
  .ac summary{grid-template-columns:96px 1fr auto;column-gap:24px;padding:20px 24px}
  .ac .th{width:96px;height:72px}
  .ac h2{font-size:28px}
  .ac:not([open]) summary .chip{display:block}
  .ax{width:28px;height:28px}
  .ab{flex-direction:row;align-items:flex-start;gap:32px;padding:4px 24px 30px}
  .ab>.cv{flex:0 0 40%;width:40%}
  .fr dt{width:130px;font-size:13px}
  .gh{padding:32px 0 60px;--hs:14px;--hw:36px}
  .ghr{margin-top:28px;gap:40px}
  .gh h1{font-size:52px}
  .gh .ght>p:not(.mt){font-size:19px}
  .gbd{padding:56px 0 88px}
  .gbk h2{font-size:30px}
  .sim{grid-template-columns:repeat(2,1fr)}
  .col{gap:44px}
  .col section h2,.kc h2{font-size:30px}
  .kc{padding:30px 32px 38px;--hs:14px;--hw:36px}
  .sum{font-size:20px;padding-bottom:32px}
  .lgl section h2{font-size:28px}
  .lgl .col{gap:32px}
  .cookie{left:24px;right:auto;bottom:24px;width:min(500px,calc(100% - 48px));padding:30px 30px 40px}
  .ck-b{margin:-24px -10px 0;height:42px}
  .ck-b img{width:22px}
  .cookie h2{font-size:26px}
  .ck-l{font-size:17px}
}

/* ---------- desktop (Figma 1368) ---------- */
@media (min-width:1200px){
  :root{--sun:1;--hdr:84px}
  body{font-size:19px}
  .w{width:min(1224px,100% - 144px)}
  .tp{padding:22px 0 26px}
  .logo{font-size:26px}.logo .fl{width:27px}
  .nav ul{gap:34px}
  .hero{background-image:url(/assets/img/hero.webp)}
  .bn{filter:drop-shadow(4.8px 8px 0 var(--sh))}
  .strip{flex-wrap:nowrap;gap:40px;padding:26px 32px 34px;filter:drop-shadow(4.5px 7.5px 0 var(--ink))}
  .strip>p{flex:0 0 520px;font-size:18px}
  .h2{font-size:56px}
  .hd p{font-size:19px}
  .sec{padding:96px 0 104px}
  .hd{margin-bottom:36px}
  .gs{padding:88px 0 96px}
  .gr{grid-template-columns:200px 330px auto auto;align-items:center;gap:28px;padding:30px 28px 34px 0}
  .gr:hover,.gr:focus-within{padding-left:28px}
  .gt h3{font-size:32px}
  .gl,.go{grid-column:auto}
  .gl{grid-template-columns:100px 120px 180px}
  .pk{padding:34px 30px 52px}
  .pk h3{font-size:30px}
  .pks{gap:36px}
  .pk p,.pk a{font-size:16px}
  .mq{padding:26px 0 34px}
  .mq-t{margin-left:72px}
  .mq-u li{margin-right:26px;font-size:26px}
  .mq-u .mk img{width:22px}
  .pr{gap:64px}
  .pcv{flex:0 0 520px}
  .pt{width:500px}
  .pt .h2{font-size:56px}
  .pts li{font-size:17px}
  .pts .pc{width:18px;height:18px}
  .dflag{display:block;position:absolute;pointer-events:none;opacity:.95;height:auto}
  .df-p{width:380px;right:-190px;top:160px;transform:rotate(-4deg);transform-origin:0 0;filter:drop-shadow(6px 10px 0 var(--limeD))}
  .df-a{width:300px;right:-40px;top:60px;transform:rotate(5deg);transform-origin:0 0;filter:drop-shadow(6px 10px 0 var(--mariD))}
  .qa{grid-template-columns:460px 1fr;gap:56px;padding:26px 0}
  .qa h3{font-size:24px}
  .foot{padding:72px 0 56px}
  .fst{display:flex;gap:0;align-items:flex-start}
  .fc{width:300px;padding:28px 26px 34px}
  .fc+.fc{margin-left:-18px}
  .fc0{width:380px;transform:rotate(1.5deg)}.fc1{transform:rotate(-1deg)}.fc2{transform:rotate(.8deg)}.fc3{transform:rotate(-1.6deg)}
  .fc0 .logo{font-size:24px}
  .fb{padding-top:44px}
  .ph{padding:40px 0 64px}
  .ph .w{gap:24px}
  .ph h1{font-size:72px}
  .ph p{font-size:19px}
  .bun{display:flex;justify-content:space-evenly;position:absolute;right:-32px;top:-16px;width:340px;height:110px}
  .bun svg{position:absolute;left:0;top:0;width:100%;height:38px}
  .bun i{display:block;transform:translateY(calc(var(--v)*30px - 2px)) rotate(var(--r));transform-origin:0 0}
  .bun img{width:56px;height:auto;filter:drop-shadow(3px 5px 0 rgba(42,22,48,.55))}
  .acs{padding:56px 0 96px}
  .ac h2{font-size:30px}
  .ab{gap:40px}
  .ab>.cv{flex:0 0 380px;width:380px}
  .gh{padding:36px 0 72px}
  .ghr{gap:64px}
  .ghr .pcv{flex:0 0 520px}
  .gh h1{font-size:72px}
  .gh .ght>p:not(.mt){font-size:20px}
  .gbd{padding:64px 0 96px}
  .gbi{flex-direction:row;align-items:flex-start;gap:72px}
  .toc{position:sticky;top:calc(var(--hdr) + 20px);flex:0 0 auto;min-width:260px;align-self:flex-start}
  .toc a{white-space:nowrap}
  .gbk .fr div{padding:24px 0}
  .gm{flex:0 1 780px;gap:48px}
  .gbk h2{font-size:36px}
  .col section h2,.kc h2{font-size:36px}
  .col{gap:48px}
  .kc{padding:32px 34px 40px}
  .kc li{font-size:17px}
  .sum{font-size:21px}
  .lgl section h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mv{animation:none!important}
  .gr,.gcv,.cv,.btn,.ax,.ac{transition:none}
}

/* social icons (footer) */
.fc3 li.soc{display:flex;gap:10px}
.sic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:4px;background:rgba(255,255,255,.16);color:#fff;transition:background .16s,color .16s}
.sic:hover{background:#fff;color:var(--tealD)}
.sic .si{width:18px;height:18px}