/* Bráškovice V · teaser. Styly převzaté z prototypu (design/prototype/index.html), varianty přes body[data-theme]. */

/* ============ FONTY (self-hosted, stejné soubory jako Google Fonts; tools/fetch-fonts.mjs) ============ */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#231F20;--night:#292B68;--indigo:#4649A6;--violet:#5747A6;--magenta:#EE37A1;--pink:#F14B8C;
  --orange:#F48034;--yellow:#F8E004;--gin:#A63899;--white:#FFFFFF;
  --sunset:linear-gradient(180deg,#4649A6 0%,#5747A6 25%,#C23AA4 55%,#EE37A1 75%,#F48034 100%);
  --holo:linear-gradient(115deg,#E4F6FF 0%,#B9E3F5 18%,#D9C8F2 38%,#F6CFE6 55%,#FFF0DA 72%,#C8F0E4 88%,#E4F6FF 100%);
  --pink-l:#F9B8DD;
  --teaser-pos-mobile:55% 45%;
  --teaser-pos-desktop:50% 40%;
  --tilt:-6deg;
  --display:"Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sc:41,43,104;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Stránka je tmavá sama (i meta color-scheme v index.html): Samsung Internet a Chrome na Androidu ji pak v tmavém režimu
   neztmavují (bílé tlačítko by zešedlo, pole e-mailu zčernalo, fotka pohasla). Samsung hledá i pravidlo pro tmavý režim. */
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}
html.js body:not(.go){overflow:hidden} /* pod intrem a bránou se stránka nescrolluje */
body{margin:0;background:var(--ink);color:var(--white);font:500 19px/1.4 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--pink-l);text-underline-offset:3px}
a:hover{color:var(--white)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
:focus-visible{outline:3px solid var(--white);outline-offset:3px}
/* nadpisy dostávají fokus jen programově (čtečky), rámeček by po odeslání Enterem obkreslil celou šířku */
#win-h:focus,#already-h:focus,#gate-no:focus,.logo-wrap:focus{outline:none}
.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* buttons */
.btn-y{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:56px;padding:12px 26px;
  position:relative;overflow:hidden;background:var(--holo);color:var(--ink);border:3px solid var(--ink);font-family:var(--display);font-size:24px;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;box-shadow:5px 5px 0 var(--magenta);transition:transform .12s ease,box-shadow .12s ease;line-height:1}
.btn-y::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:translate3d(-120%,0,0) skewX(-18deg);transition:transform .6s ease;pointer-events:none}
.btn-y:hover::after{transform:translate3d(320%,0,0) skewX(-18deg)}
.btn-y:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--magenta)}
.btn-y:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--magenta)}
.btn-y:focus-visible{outline:3px solid var(--white);outline-offset:4px}
.btn-o:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.btn-y[disabled],.btn-y[aria-disabled="true"]{cursor:progress;transform:none;box-shadow:3px 3px 0 var(--magenta);opacity:.85}
.btn-o{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:52px;padding:10px 20px;background:transparent;
  color:var(--white);border:2px solid var(--white);font-family:var(--display);font-size:20px;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;transition:background .15s,color .15s,transform .12s;line-height:1}
.btn-o:hover{background:var(--white);color:var(--ink)}
.btn-o:active{transform:translate(2px,2px)}

/* ============ INTRO ============ */
.intro{position:fixed;inset:0;z-index:200;background:#000;overflow:hidden;display:none}
html.js .intro{display:block}
.intro.clear{background:transparent;pointer-events:none}
.intro.clear .gate-layer,.intro.clear .skip{pointer-events:none}
.intro.quick{transition:opacity .5s ease}
.intro.quick.fade{opacity:0}
.intro .quick-emblem{position:absolute;left:50%;top:50%;width:96px;transform:translate(-50%,-50%);opacity:0}
.intro.quick .quick-emblem{opacity:1}
.pn{position:absolute;inset:0;filter:drop-shadow(6px 6px 0 var(--magenta));opacity:0;
  transform:translate3d(var(--fx,0),var(--fy,0),0);
  transition:transform .55s cubic-bezier(.2,.9,.25,1.12) var(--d,0s),opacity .25s linear var(--d,0s)}
.pc{position:absolute;inset:0;clip-path:var(--clip);background:#fff}
.pc img{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);max-width:none;object-fit:cover;object-position:var(--op);filter:contrast(1.08)}
.pc .ht{position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.55) 1px,transparent 1.7px) 0 0/6px 6px;mix-blend-mode:multiply;opacity:.45}
.pn-a{--fx:-40%;--d:0s;--clip:polygon(0 0,100% 0,100% 35%,0 45%);--l:0;--t:0;--w:100%;--h:45%;--op:32% 40%}
.pn-b{--fx:40%;--d:.32s;--clip:polygon(0 47%,100% 37%,100% 63%,0 71%);--l:0;--t:37%;--w:100%;--h:34%;--op:55% 30%}
.pn-c{--fy:40%;--d:.64s;--clip:polygon(0 73%,100% 65%,100% 87%,0 87%);--l:0;--t:65%;--w:100%;--h:22%;--op:26% 40%}
@media (min-aspect-ratio:1/1){
  .pn-a{--clip:polygon(0 0,47% 0,40% 86%,0 86%);--w:47%;--h:86%;--op:38% 50%}
  .pn-b{--clip:polygon(48.5% 0,100% 0,100% 40%,44.8% 46%);--l:44%;--t:0;--w:56%;--h:46%;--op:50% 28%}
  .pn-c{--fx:40%;--fy:0;--clip:polygon(44.5% 49%,100% 43%,100% 86%,41.5% 86%);--l:41%;--t:43%;--w:59%;--h:43%;--op:30% 45%}
}
.intro.run .pn{opacity:1;transform:none}
.intro.out .pn{transition-delay:0s;transition-duration:.6s;transition-timing-function:cubic-bezier(.6,0,.8,.4)}
.intro.out .pn-a{transform:translate3d(-115%,0,0)}
.intro.out .pn-b{transform:translate3d(115%,0,0)}
.intro.out .pn-c{transform:translate3d(115%,0,0)}
.loader{position:absolute;left:0;right:0;bottom:0;padding:0 calc(20px + var(--sar)) calc(22px + var(--sab)) calc(20px + var(--sal));display:grid;gap:10px;transition:opacity .3s}
.tip{min-height:2.6em;display:flex;align-items:flex-end;font:600 18px/1.25 var(--body);text-transform:uppercase;letter-spacing:.03em;transition:opacity .2s}
.tip b{font-family:var(--display);font-weight:400;color:var(--magenta);margin-right:.35em;letter-spacing:.05em}
.bar{height:12px;border:2px solid var(--white);background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;background:var(--holo);transform:scaleX(0);transform-origin:0 50%}
.intro.run .bar i{transition:transform 2.3s cubic-bezier(.4,.1,.3,1);transform:scaleX(1)}
.intro.gating .loader,.intro.out .loader{opacity:0}
.skip{position:absolute;top:calc(14px + var(--sat));right:calc(14px + var(--sar));z-index:3;min-height:44px;padding:8px 16px;background:rgba(0,0,0,.7);
  border:2px solid var(--white);font:600 16px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.skip:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
html:not(.bv-ready) .skip{visibility:hidden} /* bez app.js by tlačítko nic nedělalo */
/* pojistka: app.js se nenačetl nebo spadl (index.html), místo černé obrazovky výzva k novému načtení */
.fail{display:none}
html.bv-fail .fail{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;background:#000;text-align:center;font:600 22px/1.3 var(--body)}
html.bv-fail .fail p{margin:0}
.gate-layer{position:absolute;inset:0;display:flex;overflow-y:auto;padding:24px calc(18px + var(--sar)) calc(24px + var(--sab)) calc(18px + var(--sal));
  background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.intro.gating .gate-layer{opacity:1;visibility:visible;transition:opacity .35s}
.intro.out .gate-layer{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.gate{margin:auto;width:min(100%,540px);background:var(--ink);border:3px solid var(--white);box-shadow:10px 10px 0 var(--magenta);padding:30px 24px 28px;
  transform:translateY(24px) rotate(-1.5deg);transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.intro.gating .gate{transform:rotate(-1.5deg)}
.gate h2{margin:28px 0 14px;font-size:clamp(40px,11vw,64px);transform:rotate(var(--tilt));transform-origin:0 50%}
.gate h2 em{font-style:normal;color:var(--magenta)}
.gate p{margin:26px 0 22px;font:700 26px/1.2 var(--body);text-transform:uppercase;letter-spacing:.02em}
.gate .row{display:flex;flex-wrap:wrap;gap:14px}
.gate .row .btn-y{flex:1 1 180px}
.gate .row .btn-o{flex:1 1 140px;min-height:56px}
.gate-no{font:600 24px/1.3 var(--body)}
.busted{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(72px,22vw,128px);line-height:.9;letter-spacing:.02em;color:var(--magenta);
  text-shadow:4px 4px 0 var(--night);transform:rotate(var(--tilt));transform-origin:0 50%;margin:0 0 22px}
.intro.gating .gate-no:not([hidden]) .busted{animation:busted .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes busted{0%{transform:scale(3) rotate(-14deg);opacity:0}55%{transform:scale(.94) rotate(-4deg);opacity:1}100%{transform:rotate(var(--tilt))}}
.intro.busted-on .gate{animation:shake .4s linear .25s both}
body.calm .busted{text-shadow:none;color:var(--hi);letter-spacing:.06em}
body.calm .intro.busted-on .gate{animation:none}
body[data-theme="minimal"] .busted{color:#fff}
@media (prefers-reduced-motion:reduce){.intro.gating .gate-no:not([hidden]) .busted,.intro.busted-on .gate{animation:none}}
.gate-no strong{display:block;font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--magenta);margin-bottom:12px;text-transform:uppercase}

/* ============ MAIN / HERO ============ */
main{display:block;position:relative;background:var(--night)}
body.iris main{clip-path:circle(0% at 50% 50%)}
body.iris.opening main{clip-path:circle(142% at 50% 50%);transition:clip-path .95s cubic-bezier(.65,0,.35,1)}
.hero{position:relative;isolation:isolate;overflow:hidden}
.media{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;overflow:hidden;z-index:-1;background:var(--violet)}
.kb{position:absolute;inset:0;animation:none;transform:none} /* fotka stojí (klient schválil celý obraz 2:3 beze zoomu); výřez dělá object-position */
.px{position:absolute;inset:-14px;will-change:transform}
.px img,.px video{width:100%;height:100%;object-fit:cover;object-position:var(--teaser-pos-mobile)}
.px video{position:absolute;inset:0}
.rays{position:absolute;left:50%;top:52%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,170,.16) 0deg 3deg,rgba(255,214,170,0) 3deg 13deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 40%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 18%,transparent 40%);
  mix-blend-mode:screen;opacity:.55;animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--sc),.55) 0%,rgba(var(--sc),0) 24%),
  linear-gradient(0deg,#292B68 0%,rgba(var(--sc),.92) 26%,rgba(var(--sc),.35) 50%,rgba(var(--sc),0) 64%)}
.fxl{display:none;position:absolute;pointer-events:none}
body.fx .fxl{display:block}
.scan{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,rgba(0,0,0,0) 1px 3px);opacity:.55}
.grain{inset:-60px;opacity:.13;mix-blend-mode:overlay;animation:grain .9s steps(5) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-24px,12px,0)}40%{transform:translate3d(18px,-20px,0)}60%{transform:translate3d(-10px,-30px,0)}80%{transform:translate3d(26px,16px,0)}100%{transform:translate3d(0,0,0)}}

.wrap{position:relative;padding:0 calc(20px + var(--sar)) 0 calc(20px + var(--sal))}
.col{max-width:560px;margin:0 auto}
.above{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:calc(18px + var(--sat)) 0 calc(92px + var(--sab))}
.gap{flex:1 1 auto;min-height:12svh}
.logo-wrap{position:relative;margin:0 auto;width:min(80vw,340px);aspect-ratio:1200/737}
.logo-wrap img{position:absolute;inset:0;width:100%;height:100%}
.logo-wrap .glow{filter:drop-shadow(0 0 5px var(--magenta)) drop-shadow(0 0 18px var(--magenta));opacity:.75}
html.js .logo-wrap{opacity:0}
body.go .logo-wrap{opacity:1;animation:drop .95s both}
body.go .logo-wrap .glow{animation:neon 1.1s linear .75s both}
@keyframes drop{
  0%{transform:translate3d(0,-120vh,0) rotate(12deg);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  56%{transform:translate3d(0,14px,0) rotate(-2.5deg) scale(1.03,.97);animation-timing-function:ease-out}
  76%{transform:translate3d(0,-7px,0) rotate(1deg)}
  100%{transform:none}}
@keyframes neon{0%{opacity:0}8%{opacity:1}12%{opacity:.1}20%{opacity:1}26%{opacity:.25}34%{opacity:1}100%{opacity:.75}}
body.go .col{animation:thud .35s ease-out .52s both}
@keyframes thud{0%,100%{transform:none}30%{transform:translate3d(0,5px,0)}60%{transform:translate3d(0,-2px,0)}}
.rv{opacity:1}
html.js .rv{opacity:0;transform:translate3d(0,18px,0)}
body.go .rv{opacity:1;transform:none;transition:opacity .6s ease var(--d,.6s),transform .6s cubic-bezier(.2,.8,.3,1) var(--d,.6s)}
.kicker{margin:0 0 8px;font:700 17px/1.2 var(--body);letter-spacing:.16em;color:var(--white);text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.claim{margin:0 0 20px;font:600 clamp(24px,6.6vw,32px)/1.12 var(--body);text-wrap:pretty;text-shadow:0 2px 12px rgba(var(--sc),.8)}
.claim strong{display:block;font-family:var(--display);font-weight:400;font-size:1.28em;text-transform:uppercase;letter-spacing:.01em;margin-top:4px}

.cd{transform:rotate(var(--tilt));transform-origin:0 50%;margin:34px 0 10px}
.cd-l{font:700 16px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px}
.units{display:flex;gap:clamp(10px,3.4vw,22px)}
.u{display:flex;flex-direction:column;align-items:flex-start}
.num{display:flex;font-family:var(--display);font-size:clamp(46px,15vw,88px);line-height:1.05;color:var(--white);font-variant-numeric:tabular-nums;
  text-shadow:3px 3px 0 var(--magenta),6px 6px 0 var(--night)}
.dg{display:inline-block;width:.54em;text-align:center;overflow:hidden;height:auto;min-height:1.12em;padding-right:.08em}
.dg span{display:block}
.dg span.in{animation:dgIn .38s cubic-bezier(.2,.9,.3,1.25)}
@keyframes dgIn{from{transform:translate3d(0,-70%,0);opacity:0}}
.ul{font:700 15px/1 var(--body);letter-spacing:.18em;margin-top:2px}

.live{margin:6px 0 10px}
.live h2{margin:30px 0 18px;font-size:clamp(58px,17vw,104px);color:var(--white);text-shadow:4px 4px 0 var(--magenta),8px 8px 0 var(--night);transform:rotate(var(--tilt));transform-origin:0 50%}
.live .btn-y{width:100%;font-size:26px;min-height:64px}

/* card */
.card{position:relative;background:rgba(35,31,32,.92);border:3px solid var(--white);box-shadow:8px 8px 0 var(--magenta);padding:0 20px 22px;margin:0 0 56px;scroll-margin-top:24px}
.wanted{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 -20px 18px;padding:10px 20px;background:var(--holo);color:var(--ink)}
.wanted span{font-family:var(--display);font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.stars{display:flex;gap:4px}
.star{width:28px;height:28px}
.star polygon{fill:transparent;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;transition:fill .2s}
.star.on polygon{fill:var(--magenta)}
.star.on{animation:pop .35s cubic-bezier(.2,.9,.3,1.6)}
.stars.blink .star polygon{animation:blink .22s steps(1) 6}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes blink{0%{fill:var(--magenta)}50%{fill:var(--white)}}
.card h2{margin:48px 0 10px;font-size:clamp(38px,10.5vw,52px);color:var(--white);transform:rotate(var(--tilt));transform-origin:0 50%;text-shadow:3px 3px 0 var(--magenta)}
.card .lead{margin:14px 0 18px;font-size:19px;line-height:1.35;text-wrap:pretty}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font:700 16px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.field input{width:100%;height:56px;padding:0 14px;border:3px solid var(--white);background:var(--white);color:var(--ink);font:600 21px/1 var(--body);border-radius:0;-webkit-appearance:none;appearance:none;color-scheme:only light} /* bílé pole: vyplňování a kurzor světlé, „only“ = vynucený tmavý režim ho nezačerní */
.field input::placeholder{color:#6b6568}
.field input:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--magenta)}
.field input[aria-invalid="true"]{border-color:var(--pink)}
.sug{font-size:18px;color:var(--white)}
.sug button{background:none;border:0;padding:4px 0;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:36px;color:var(--pink-l)}
.err{margin:0;color:#FF8FC0;font-weight:700;font-size:18px}
.chk{position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;margin:6px 0 8px;font-size:17px;line-height:1.35;cursor:pointer}
.chk input{position:absolute;opacity:0;width:30px;height:30px;margin:0;cursor:pointer}
.chk .box{width:30px;height:30px;border:3px solid var(--white);display:grid;place-items:center;background:transparent;transition:background .15s}
.chk .box::after{content:"";width:8px;height:15px;border:solid var(--white);border-width:0 4px 4px 0;transform:rotate(45deg) translate(-1px,-2px) scale(0);transition:transform .15s cubic-bezier(.2,.9,.3,1.6)}
.chk input:checked+.box{background:var(--magenta);border-color:var(--magenta)}
.chk input:checked+.box::after{transform:rotate(45deg) translate(-1px,-2px) scale(1)}
.chk input:focus-visible+.box{outline:3px solid var(--white);outline-offset:3px}
.chk-opt{margin-top:2px}
.chk{min-height:44px} /* dotyková plocha i u jednořádkového souhlasu (WCAG 2.5.5) */
.hp{display:none} /* honeypot: display:none, aby ho nevyplnil autofill ani správce hesel (naivní boti ano) */
.card .btn-y.submit{width:100%;margin-top:16px;font-size:26px;min-height:62px}
.status{margin:12px 0 0;min-height:1.4em;font-weight:700;font-size:18px}
.status.bad{color:#FF8FC0}
.already h2{margin-top:6px}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.acts>*{flex:1 1 200px}
.soc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font:700 17px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.soc a{padding:8px 0}

/* sticky */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:22px calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal));
  background:linear-gradient(0deg,rgba(35,31,32,.96) 55%,rgba(35,31,32,0));transform:translate3d(0,110%,0);transition:transform .3s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.sticky.show{transform:none;pointer-events:auto}
.sticky .btn-y{width:100%;font-size:24px}

/* series */
.series{position:relative;background:linear-gradient(180deg,var(--night) 0%,#1d1e4a 60%,var(--ink) 100%);padding:48px 0 64px}
.series-in{max-width:1280px;margin:0 auto}
.series h2{margin:40px calc(20px + var(--sar)) 6px calc(20px + var(--sal));font-size:clamp(40px,11vw,72px);transform:rotate(var(--tilt));transform-origin:0 50%;text-shadow:3px 3px 0 var(--magenta)}
.series .sub{margin:16px calc(20px + var(--sar)) 24px calc(20px + var(--sal));font-size:19px;color:#E3E1F5}
.track{list-style:none;margin:0;padding:10px calc(20px + var(--sar)) 22px calc(20px + var(--sal));display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.sc{position:relative;flex:0 0 min(72vw,280px);scroll-snap-align:start;min-height:280px;padding:18px 18px 20px;background:var(--ink);border:3px solid var(--white);box-shadow:6px 6px 0 var(--indigo);
  display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
.sc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--magenta)}
.sc .yr{font:700 18px/1 var(--body);letter-spacing:.2em;color:var(--pink-l)}
.sc .rn{font-family:var(--display);font-size:96px;line-height:1;margin:10px 0 auto;text-shadow:4px 4px 0 var(--magenta);transform:rotate(var(--tilt));transform-origin:0 50%}
.sc .nm{font:700 22px/1.15 var(--body);margin-top:16px;text-wrap:pretty}
.sc .ks{font:600 17px/1 var(--body);letter-spacing:.08em;margin-top:8px;color:#CFCBE8}
/* Fotky lahví v kartách I až IV (karta V zůstává tajná, bez fotky). Fotka je vrstva pod obsahem karty,
   gradient drží rok nahoře a název s počtem kusů dole čitelné. Rozměry dává karta, ne fotka (CLS 0). */
.sc .ph{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1a1719}
.sc .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .3s}
.sc:hover .ph img{transform:scale(1.07)}
.sc .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,31,32,.55) 0%,rgba(35,31,32,0) 26%,
  rgba(35,31,32,0) 44%,rgba(35,31,32,.88) 72%,#231F20 100%)}
.sc.has-ph>*:not(.ph){position:relative;z-index:1}
.sc.has-ph{min-height:380px}
.sc.has-ph .rn{text-shadow:4px 4px 0 var(--magenta),0 2px 18px rgba(0,0,0,.5)}
@media (min-width:960px){.sc.has-ph{min-height:440px}}
@media (prefers-reduced-motion:reduce){
  .sc .ph img{transition:none}
  .sc:hover .ph img{transform:scale(1.02)}
}
.sc.lock{background:var(--sunset);box-shadow:6px 6px 0 var(--magenta)}
.sc.lock .blurred{position:absolute;inset:0;padding:18px;filter:blur(7px);opacity:.9;pointer-events:none}
.sc.lock .rn{color:var(--night)}
.glitch{position:relative;font-family:var(--display);font-size:64px;line-height:1;color:var(--white);margin:auto 0 0;text-shadow:3px 3px 0 var(--night)}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:#B9E3F5;clip-path:inset(10% 0 55% 0);animation:gl1 2.4s steps(1) infinite}
.glitch::after{color:var(--magenta);clip-path:inset(55% 0 8% 0);animation:gl2 3.1s steps(1) infinite}
@keyframes gl1{0%,86%,100%{transform:none}88%{transform:translate3d(-6px,0,0)}92%{transform:translate3d(5px,0,0)}96%{transform:translate3d(-2px,0,0)}}
@keyframes gl2{0%,80%,100%{transform:none}83%{transform:translate3d(6px,0,0)}88%{transform:translate3d(-5px,0,0)}}
.lk{position:relative;display:flex;flex-direction:column;height:100%;gap:8px}
.lk svg{width:40px;height:40px;margin-top:auto}
.lk .open{font-family:var(--display);font-size:28px;line-height:1;text-transform:uppercase;letter-spacing:.02em;text-shadow:2px 2px 0 var(--night)}
.series .again{margin:22px calc(20px + var(--sar)) 0 calc(20px + var(--sal))}
.series .again .btn-y{width:100%;max-width:420px}

/* footer */
footer{background:var(--ink);padding:36px calc(20px + var(--sar)) calc(40px + var(--sab)) calc(20px + var(--sal));border-top:3px solid transparent;border-image:var(--holo) 1}
.foot{max-width:1280px;margin:0 auto;display:grid;gap:14px;font-size:17px;color:#D9D5DA}
.foot .who{display:flex;align-items:center;gap:14px;font:700 19px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.foot .who picture{flex:none}
.foot .who img{width:44px;height:auto}
.foot p{margin:0}
.foot .resp{font-weight:700;color:var(--white)}

/* success */
.win{position:fixed;inset:0;z-index:150;overflow:auto;display:grid;place-items:center;padding:calc(24px + var(--sat)) calc(18px + var(--sar)) calc(24px + var(--sab)) calc(18px + var(--sal));
  background:linear-gradient(180deg,rgba(var(--sc),.97) 0%,rgba(87,71,166,.96) 38%,rgba(194,58,164,.95) 72%,rgba(244,128,52,.95) 100%);opacity:0;transition:opacity .3s}
.win.show{opacity:1}
.win-in{position:relative;width:min(100%,600px);text-align:center}
.win .stars{justify-content:center;margin-bottom:10px}
.win .star{width:40px;height:40px}
.win .star polygon{stroke:var(--white);fill:var(--magenta)}
.win h2{margin:0;font-size:clamp(60px,18vw,120px);color:var(--white);text-shadow:4px 4px 0 var(--magenta),9px 9px 0 var(--night);transform:rotate(var(--tilt))}
.win.show h2{animation:slam .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes slam{0%{transform:scale(2.8) rotate(-12deg);opacity:0}60%{transform:scale(.92) rotate(-5deg);opacity:1}100%{transform:rotate(var(--tilt))}}
.win.show .win-in{animation:shake .4s linear .3s both}
@keyframes shake{0%,100%{transform:none}15%{transform:translate3d(-10px,6px,0)}30%{transform:translate3d(9px,-7px,0)}45%{transform:translate3d(-7px,-3px,0)}60%{transform:translate3d(6px,5px,0)}80%{transform:translate3d(-3px,2px,0)}}
.resp-pts{margin:22px 0 18px;font-family:var(--display);font-size:clamp(34px,9vw,48px);letter-spacing:.03em;text-shadow:3px 3px 0 var(--night)}
.resp-pts span{color:var(--white);display:inline-block;min-width:3.2ch;text-align:left;font-variant-numeric:tabular-nums}
.win-card{background:var(--ink);border:3px solid var(--white);box-shadow:8px 8px 0 var(--night);padding:22px 20px;text-align:left}
.win-card p{margin:0;font-size:21px;line-height:1.35}
.win-card .doi,.already .doi{margin-top:12px;color:var(--pink-l);font-weight:700}
.win-close{position:absolute;top:calc(12px + var(--sat));right:calc(12px + var(--sar));min-height:44px;padding:8px 14px;background:rgba(0,0,0,.4);border:2px solid var(--white);
  font:700 16px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.win-close:hover{background:var(--white);color:var(--ink)}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:160;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--sab));z-index:210;transform:translate3d(-50%,20px,0);opacity:0;padding:12px 18px;background:var(--holo);color:var(--ink);
  font-family:var(--display);font-size:22px;letter-spacing:.03em;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--magenta);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate3d(-50%,0,0)}
.radio{position:fixed;top:calc(12px + var(--sat));right:calc(12px + var(--sar));z-index:70;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  background:rgba(35,31,32,.8);border:2px solid var(--white);font:700 15px/1 var(--body);letter-spacing:.14em}
.radio i{display:flex;gap:2px;align-items:flex-end;height:14px}
.radio i b{width:3px;height:5px;background:var(--magenta)}
.radio[aria-pressed="true"] i b{animation:eq .6s ease-in-out infinite alternate}
.radio i b:nth-child(2){animation-delay:.2s}.radio i b:nth-child(3){animation-delay:.4s}
@keyframes eq{to{height:14px}}

/* launched */
body.launched #cd,body.launched #signup,body.launched #already{display:none!important}

/* ============ DESKTOP ============ */
@media (min-width:960px){
  body{font-size:20px}
  .media{height:100%;bottom:0}
  .px img,.px video{object-position:var(--teaser-pos-desktop)}
  .scrim{background:linear-gradient(90deg,rgba(35,31,32,.9) 0%,rgba(var(--sc),.78) 30%,rgba(var(--sc),.25) 50%,rgba(var(--sc),0) 62%),
    linear-gradient(0deg,rgba(var(--sc),.6) 0%,rgba(var(--sc),0) 30%)}
  body[data-side="right"] .scrim{background:linear-gradient(270deg,rgba(35,31,32,.9) 0%,rgba(var(--sc),.78) 30%,rgba(var(--sc),.25) 50%,rgba(var(--sc),0) 62%),
    linear-gradient(0deg,rgba(var(--sc),.6) 0%,rgba(var(--sc),0) 30%)}
  body[data-side="right"]{--teaser-pos-desktop:38% 50%}
  .hero{min-height:100vh;min-height:100svh;display:flex;align-items:center}
  .wrap{width:100%;display:grid;grid-template-columns:minmax(460px,40%) 1fr;padding:0 calc(56px + var(--sar)) 0 calc(56px + var(--sal))}
  body[data-side="right"] .wrap{grid-template-columns:1fr minmax(460px,40%)}
  body[data-side="right"] .col{grid-column:2}
  .col{margin:0;max-width:540px;width:100%;padding:36px 0}
  .above{min-height:0;padding:0}
  .gap{display:none}
  .logo-wrap{margin:0 0 18px;width:min(100%,330px)}
  .claim{font-size:30px}
  .num{font-size:78px}
  .card{margin:22px 0 0;padding:0 24px 22px}
  .wanted{margin:0 -24px 16px;padding:10px 24px}
  .card h2{font-size:48px;margin-top:44px}
  .card .lead{margin:12px 0 14px}
  .sticky{display:none}
  .series{padding:80px 56px 96px}
  .series h2,.series .sub,.series .again{margin-left:0;margin-right:0}
  .track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:10px 0 22px}
  .sc{min-height:320px}
  .series .again{margin-top:30px}
  .foot{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
}
@media (min-width:960px) and (max-height:820px){
  .logo-wrap{width:260px;margin-bottom:10px}
  .num{font-size:64px}
  .claim{font-size:26px;margin-bottom:12px}
  .card .lead{font-size:18px}
}
@media (min-width:1600px){.wrap{grid-template-columns:minmax(560px,36%) 1fr}body[data-side="right"] .wrap{grid-template-columns:1fr minmax(560px,36%)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kb,.rays,.grain,.glitch::before,.glitch::after,.radio i b{animation:none!important}
  body.go .logo-wrap{animation:none;transition:opacity .5s}
  body.go .logo-wrap .glow{animation:none}
  body.go .col{animation:none}
  html.js .rv{transform:none}
  .dg span.in,.star.on,.stars.blink .star polygon{animation:none}
  .win.show h2{animation:none}
  .win.show .win-in{animation:none}
  .pn{transition:opacity .3s!important;transform:none!important}
  .btn-y,.sc{transition:none}
}
/* ============ VARIANTY (calm) ============ */
/* B: --acc-ink o chlup tmavší než --ink (#231F20 na magentě má 4,42:1), aby 20px text tlačítek splnil WCAG AA 4,5:1; oku nepostřehnutelné */
body[data-theme="pulnoc"]{--acc:#EE37A1;--acc-ink:#1E1A1B;--bg:#231F20;--bg2:#1a1719;--hi:#EE37A1;--hi2:#F57BC0;--line:rgba(255,255,255,.26);--sc:35,31,32}
body[data-theme="zapad"]{--acc:#F48034;--acc-ink:#231F20;--bg:#292B68;--bg2:#212257;--hi:#F48034;--hi2:#F9A56E;--line:rgba(255,255,255,.3);--sc:41,43,104}
body[data-theme="minimal"]{--acc:#FFFFFF;--acc-ink:#231F20;--bg:#231F20;--bg2:#231F20;--hi:#EE37A1;--hi2:#CFCACC;--line:rgba(255,255,255,.2);--sc:35,31,32}
body.calm{--tilt:0deg;--holo:var(--acc)}
body.calm main{background:var(--bg)}
body.calm .btn-y{border:2px solid transparent;padding:10px 24px;box-shadow:none;color:var(--acc-ink);letter-spacing:.1em;font-size:20px}
body.calm .btn-y::after{display:none}
body.calm .btn-y:hover{transform:none;box-shadow:none;filter:brightness(1.1)}
@media (hover:hover){body[data-theme="minimal"] .btn-y:hover{filter:none;background:#E6E2E4}} /* D: bílou zesvětlit nejde, odezva ztmavením (text 12,7:1) */
body.calm .btn-y:active{transform:translateY(1px);box-shadow:none}
body.calm .btn-y[disabled],body.calm .btn-y[aria-disabled="true"]{box-shadow:none}
body.calm .btn-o{border-width:1px;letter-spacing:.1em;font-size:18px}
body.calm .skip,body.calm .radio,body.calm .win-close{border-width:1px}
body.calm .pn{filter:none}
body.calm .tip b{color:var(--hi2)}
body.calm .gate{border:1px solid var(--line);box-shadow:none;transform:none!important}
body.calm .gate h2{letter-spacing:.03em}
body.calm .gate h2 em,body.calm .gate-no strong{color:var(--hi2)}
body.calm .rays{opacity:.28}
body.calm .scan{opacity:.3}
body.calm .grain{opacity:.07}
body.calm .logo-wrap .glow{opacity:.4}
body.calm .kicker{color:var(--hi2);letter-spacing:.24em;font-size:15px}
body.calm .claim strong{letter-spacing:.03em}
body.calm .num{color:#fff;text-shadow:none}
body.calm .ul,body.calm .cd-l{color:var(--hi2)}
body.calm .live h2{color:#fff;text-shadow:none;letter-spacing:.03em}
body.calm .card{background:rgba(var(--sc),.88);border:1px solid var(--line);box-shadow:none}
body.calm .wanted{background:transparent;color:#fff;border-bottom:1px solid var(--line);margin-bottom:0}
body.calm .wanted span{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.2em;color:var(--hi2)}
body.calm .star{width:22px;height:22px}
body.calm .star polygon{stroke:#fff;stroke-width:1.2}
body.calm .star.on polygon,body.calm .win .star polygon{fill:var(--hi)}
body.calm .card h2{color:#fff;text-shadow:none;font-size:clamp(32px,9vw,42px);letter-spacing:.04em;margin-top:30px}
body.calm .field input{border-width:1px}
body.calm .field input:focus{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--hi)}
body.calm .chk .box{border-width:1.5px}
body.calm .chk input:checked+.box{background:var(--acc);border-color:var(--acc)}
body.calm .chk .box::after{border-color:var(--acc-ink);border-width:0 3px 3px 0}
body.calm .series{background:var(--bg2)}
body.calm .series h2{text-shadow:none;font-size:clamp(34px,9vw,56px);letter-spacing:.04em}
body.calm .sc{background:transparent;border:1px solid var(--line);box-shadow:none}
body.calm .sc:hover{transform:none;box-shadow:none;border-color:#fff}
body.calm .sc .yr{color:var(--hi2)}
body.calm .sc .rn{text-shadow:none;font-size:76px;color:#fff}
body.calm .sc.lock{box-shadow:none;border-color:transparent}
body.calm .sc.lock .rn{color:#fff}
body.calm .sc.has-ph .rn{text-shadow:0 0 3px rgba(0,0,0,.7),0 2px 18px rgba(0,0,0,.55)}
body.calm .sc .ph img{filter:saturate(.85)}
body[data-theme="minimal"] .sc .ph img{filter:grayscale(1) contrast(1.05)}
body[data-theme="minimal"] .sc:hover .ph img{filter:none}
body.calm .glitch{text-shadow:none}
body.calm .glitch::before,body.calm .glitch::after{display:none}
body.calm .lk .open{text-shadow:none;letter-spacing:.04em}
body.calm footer{background:var(--bg2);border-top:1px solid var(--line);border-image:none}
body.calm .win h2{color:#fff;text-shadow:none;letter-spacing:.03em;font-size:clamp(52px,14vw,96px)}
body.calm.go .win.show .win-in,body.calm .win.show .win-in{animation:shakeSoft .35s linear .3s both}
@keyframes shakeSoft{0%,100%{transform:none}25%{transform:translate3d(-4px,2px,0)}50%{transform:translate3d(3px,-2px,0)}75%{transform:translate3d(-2px,1px,0)}}
body.calm .resp-pts{text-shadow:none;letter-spacing:.06em}
body.calm .win-card{border:1px solid var(--line);box-shadow:none}
body.calm .win-card .doi,body.calm .already .doi{color:var(--hi2)}
body.calm .toast{border:0;box-shadow:none;color:var(--acc-ink)}
body[data-theme="pulnoc"] .win,body[data-theme="minimal"] .win{background:rgba(35,31,32,.97)}
body[data-theme="zapad"] .win{background:linear-gradient(180deg,rgba(41,43,104,.98) 0%,rgba(41,43,104,.96) 45%,rgba(194,58,164,.94) 85%,rgba(244,128,52,.94) 100%)}
body[data-theme="pulnoc"] .sc.lock{background:linear-gradient(180deg,#3a2240 0%,#A63899 100%)}
body[data-theme="zapad"] .sc.lock{background:linear-gradient(180deg,#5747A6 0%,#EE37A1 70%,#F48034 100%)}
body[data-theme="minimal"] .sc.lock{background:#302b2d;border-color:var(--line)}
body[data-theme="minimal"] .sc.lock .blurred{text-align:right} /* rozmazané „V“ do rohu, ať rok 2026 nečte přes bílou (1,6:1 → 8,6:1) */
body[data-theme="minimal"] .logo-wrap .glow{display:none}
body[data-theme="minimal"] .rays{display:none}
body[data-theme="minimal"] .kicker,body[data-theme="minimal"] .claim .c1,body[data-theme="minimal"] .already .lead,body[data-theme="minimal"] .series .sub{display:none}
/* D: pod nadpisem formuláře jen krátký řádek (schváleno 2. 10.), stejný mechanismus jako .claim .c2/.c3 */
body[data-theme="minimal"] .not-d{display:none}
body[data-theme="minimal"] .only-d{display:inline!important}
body[data-theme="minimal"] .card .lead{color:var(--hi2)}
body[data-theme="minimal"] .claim{margin-bottom:12px}
body[data-theme="minimal"] .claim .c2{display:none}
body[data-theme="minimal"] .claim .c3{display:inline!important}
body[data-theme="minimal"] .claim strong{margin-top:0}
body[data-theme="minimal"] .card h2{margin:26px 0 18px}
body[data-theme="minimal"] .num{font-weight:400}
@media (prefers-reduced-motion:reduce){body.calm.go .win.show .win-in,body.calm .win.show .win-in{animation:none}.sticky{transition:none}}
.demo-sw{position:fixed;left:calc(12px + var(--sal));bottom:calc(12px + var(--sab));z-index:190;display:flex;gap:4px;padding:4px;background:rgba(20,18,20,.88);border:1px solid rgba(255,255,255,.25);font:600 15px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.demo-sw a{display:flex;align-items:center;min-height:40px;padding:0 12px;color:#fff;text-decoration:none}
.demo-sw a:hover{background:rgba(255,255,255,.12);color:#fff}
.demo-sw a[aria-current="true"]{background:#fff;color:#231F20}
@media (max-width:959px){.demo-sw{bottom:auto;top:calc(12px + var(--sat));left:50%;transform:translateX(-50%)}}

/* ============ POLISH B a D (návrhy z design a a11y review) ============ */
/* Čitelnost textu přes fotku (WCAG AA, akceptační kritérium README): scrim končí barvou stránky
   místo navy z varianty A (pruh na konci hero), je silnější v pásu s textem a drobné růžové popisky
   jsou světlejší. Platí pro B i D (stejné pozadí #231F20). Měřit: node tools/contrast.mjs (znovu po výměně fotky). */
@media (max-width:959px){
  body[data-theme="pulnoc"] .scrim,body[data-theme="minimal"] .scrim{background:linear-gradient(180deg,rgba(var(--sc),.55) 0%,rgba(var(--sc),0) 24%),
    linear-gradient(0deg,rgb(var(--sc)) 0,rgba(var(--sc),.9) 140px,rgba(var(--sc),.82) 480px,rgba(var(--sc),0) 680px)}
}
/* D: text je kratší (bez kickeru a první věty claimu), scrim drží jen pás s textem a fotka nad ním zůstává světlá
   (hlavní motiv fotky: lahev a ruka). Zastávky jdou s textem: o safe-area dole (.above má padding 92 px + sab) a o rezervu
   pro cookie lištu (--lift, .above pak má padding max(92 px + sab, lišta + 16 px)). Po změně textu nebo fotky přeměřit. */
@media (max-width:959px){
  body[data-theme="minimal"] .scrim{background:linear-gradient(180deg,rgba(var(--sc),.55) 0%,rgba(var(--sc),0) 24%),
    linear-gradient(0deg,rgb(var(--sc)) 0,rgba(var(--sc),.9) 140px,rgba(var(--sc),.82) calc(270px + var(--sab) + var(--lift,0px)),rgba(var(--sc),0) calc(470px + var(--sab) + var(--lift,0px)))}
  html.cc-pre body[data-theme="minimal"]{--lift:max(0px,calc(var(--cc-pre,0px) - 76px - var(--sab)))}
}
/* Desktop: scrim vázaný na textový sloupec (.wrap: padding 56 px, sloupec minmax(460px,40%), od 1600 px
   minmax(560px,36%)), ne na šířku okna. Procentní zastávky nechávaly na úzkém desktopu a u vyšších oken SEK
   pod AA a se side: "right" (text zarovnaný k vnitřní hraně sloupce) i popisky pod 3:1. Se side right jde zprava. */
@media (min-width:960px){
  body[data-theme="pulnoc"],body[data-theme="minimal"]{--scrim-dir:90deg;--scrim-col:max(460px,calc((100% - 112px) * .4))}
  body[data-theme="pulnoc"][data-side="right"],body[data-theme="minimal"][data-side="right"]{--scrim-dir:270deg}
  body[data-theme="pulnoc"] .scrim,body[data-theme="minimal"] .scrim{background:linear-gradient(var(--scrim-dir),rgba(35,31,32,.9) 0,rgba(var(--sc),.8) calc(56px + var(--scrim-col)),
    rgba(var(--sc),.3) calc(206px + var(--scrim-col)),rgba(var(--sc),0) calc(356px + var(--scrim-col))),
    linear-gradient(0deg,var(--bg2) 0%,rgba(var(--sc),.6) 8%,rgba(var(--sc),0) 30%)}
}
@media (min-width:1600px){body[data-theme="pulnoc"],body[data-theme="minimal"]{--scrim-col:max(560px,calc((100% - 112px) * .36))}}
/* D, text vlevo: nejširší text mimo kartu je odpočet, karta má vlastní pozadí (.88). Plný pás končí 120 px před
   pravou hranou karty, ať je vidět lahev v ruce. Se side right beze změny (text u vnitřní hrany sloupce). */
@media (min-width:960px){
  body[data-theme="minimal"][data-side="left"] .scrim{background:linear-gradient(90deg,rgba(35,31,32,.9) 0,rgba(var(--sc),.8) calc(var(--scrim-col) - 64px),
    rgba(var(--sc),.3) calc(86px + var(--scrim-col)),rgba(var(--sc),0) calc(236px + var(--scrim-col))),
    linear-gradient(0deg,var(--bg2) 0%,rgba(var(--sc),.6) 8%,rgba(var(--sc),0) 30%)}
}
body[data-theme="pulnoc"] .hero .kicker,body[data-theme="pulnoc"] .hero .cd-l,body[data-theme="pulnoc"] .hero .ul{color:var(--pink-l)}
/* Česká typografie: spojovník v „e-mail“ se nesmí lámat na konci řádku */
.nw{white-space:nowrap}
/* Víceřádkové nadpisy v Antonu: při proložení .95 zasahují háčky a čárky do řádku nad nimi
   („ZĄKÁZKA“ v oslavě, „PRO/DOSPĚLÉ“ v bráně, „TO/PÁR“ v BUSTED). */
.gate h2,.win h2,.gate-no strong{line-height:1.12}
/* Tlačítka vedle sebe na desktopu na jeden řádek („PŘIDAT DO / KALENDÁŘE“ v kartě Už tě máme) */
@media (min-width:960px){.acts>*{flex:1 1 auto;white-space:nowrap}}
/* Desktop s běžnou výškou okna (notebooky 1366×768 až 1536×864, 1440×900, okna 1280×720 a 1536×730): tlačítko
   formuláře nad ohyb i se dvěma souhlasy (každý 44 px). Stejný obsah, jen menší logo, odpočet a mezery. */
@media (min-width:960px) and (max-height:940px){
  .logo-wrap{width:210px;margin-bottom:8px}
  .claim{font-size:26px;margin-bottom:12px}
  .cd{margin:12px 0 4px}
  .num{font-size:62px}
  body.calm .card h2{font-size:38px;margin:22px 0 6px}
  .card .lead{font-size:18px;margin:6px 0 10px}
  .chk{margin:2px 0}
  .chk-opt{margin-top:0}
  .card .btn-y.submit{margin-top:6px}
  .col{padding:24px 0}
}
@media (min-width:960px) and (max-height:840px){
  .logo-wrap{width:150px;margin-bottom:4px}
  .kicker{margin-bottom:4px}
  .claim{font-size:23px;margin-bottom:8px}
  .cd{margin:8px 0 2px}
  .num{font-size:52px}
  .card{margin-top:14px}
  body.calm .wanted{padding-top:8px;padding-bottom:8px}
  body.calm .card h2{font-size:34px;margin:16px 0 4px}
  .card .lead{font-size:17px;line-height:1.3;margin:2px 0 6px}
  .field{margin-bottom:10px}
  .field input{height:50px}
  .chk{margin:0}
  .card .btn-y.submit{min-height:54px;margin-top:6px}
  .col{padding:16px 0}
}
/* D: v pásmu 841 až 940 px výšky (1440×900, 1080p) se po zkrácení textů vejde větší logo a odpočet, tlačítko zůstane nad ohybem;
   do 840 px (1366×768 s lištami prohlížeče) ne. */
@media (min-width:960px) and (min-height:841px) and (max-height:940px){body[data-theme="minimal"] .logo-wrap{width:270px}body[data-theme="minimal"] .num{font-size:70px}}
/* Chybný stav pole: v calm variantách byl jen 1px růžový rámeček na bílém (skoro neviditelný)
   a chybová barva splývala s akcenty. Silnější rámeček a značka „!“ (rozlišení tvarem, ne jen barvou). */
body.calm .field input[aria-invalid="true"]{border-width:3px}
.err::before{content:"!";content:"!" / "";display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-right:.45em;border-radius:50%;
  background:#FF8FC0;color:#231F20;font-size:.8em;line-height:1;vertical-align:.12em}
/* Zamčená karta V v B: rozmazané bílé „V“ leželo přímo pod rokem (2026 mělo kontrast 1,04:1)
   a průhledný rámeček ukazoval opakovaný gradient (světlá linka nahoře). Tmavé V jako ve variantě A. */
body[data-theme="pulnoc"] .sc.lock{background:linear-gradient(180deg,#3a2240 0%,#A63899 100%) border-box}
body[data-theme="pulnoc"] .sc.lock .rn{color:var(--ink);opacity:.55}
/* Po spuštění: vedle „JE TO VENKU“ nemá stát budoucí čas („TAHLE ZAČNE 17. 10.“) */
body.launched .claim strong{display:none}
/* B bez zbytků navy palety z varianty A: podtitul a počty kusů v sérii neutrálně (ne fialkově),
   pod fotkou při pomalém načítání tmavá místo fialové plochy. */
body[data-theme="pulnoc"] .series .sub{color:#D9D5DA}
body[data-theme="pulnoc"] .sc .ks,body[data-theme="minimal"] .sc .ks{color:#CFCACC} /* D: počty kusů zpátky (přání klienta 2. 10.) */
body[data-theme="pulnoc"] .media,body[data-theme="minimal"] .media{background:var(--bg)}

/* ============ COOKIE LIŠTA (souhlas s GA4, jen s CONFIG.ga4Id) ============ */
/* Mobil: dole přes celou šířku (sticky lišta mezitím počká), desktop: karta v rohu naproti textu.
   Přijmout a Odmítnout stejně výrazné (obě obrysová tlačítka), magenta zůstává hlavnímu CTA. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:12px calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal));
  background:var(--ink);border-top:1px solid var(--line,rgba(255,255,255,.26));transform:translate3d(0,110%,0);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.cc.show{transform:none}
html.win-on .cc{visibility:hidden}
.cc-in{max-width:560px;margin:0 auto}
.cc-t{margin:0 0 4px;font:600 14px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--hi2,var(--pink-l))}
.cc-t:focus{outline:none}
.cc-x{margin:0;font-size:16px;line-height:1.35;color:#fff;text-wrap:pretty}
.cc-now{margin:6px 0 0;font-weight:700;font-size:16px;color:var(--hi2,var(--pink-l))}
.cc-row{display:flex;gap:10px;margin-top:10px}
.cc-row .btn-o{flex:1 1 0;min-height:46px;padding:8px 12px}
/* telefon na šířku a tablet: tlačítka vedle textu, lišta o polovinu nižší */
@media (min-width:600px) and (max-width:959px){
  .cc-in{max-width:none;display:grid;grid-template-columns:1fr minmax(260px,32%);column-gap:20px;align-items:center}
  .cc-t,.cc-x,.cc-now{grid-column:1}
  .cc-row{grid-column:2;grid-row:1 / span 3;margin-top:0}
}
/* Mobil (zpětná vazba klienta): jeden rytmus mezer. Mezi bloky stránky 56 px (odpočet → karta → série → patička),
   v kartě 16 a 24 px; prázdný řádek stavu pod tlačítkem nezabírá místo. Spodní odsazení hero (--above-pb) drží na první
   obrazovce místo pro sticky lištu nebo cookie lištu. Karta záporným okrajem dožene místo pro sticky lištu (92 px) a na první obrazovce
   zůstane pod ní: vykoukne vždy jen 46 px (pod 15 %, sticky lišta ji nebere jako „vidět“), i na iPhonu s bradou (--sab; mezera nad kartou
   je tam 56 px + brada). S cookie lištou (GA4) je mezera nad kartou větší: místo zůstává i po volbě, ať obsah neposkočí.
   Po spuštění (karta schovaná, sticky lišta na první obrazovce není, „Je to venku“ je vidět) místo pro lištu netřeba: tlačítko → série 56 px.
   Výška první obrazovky (--svh z app.js) je jako 100svh, jen se nezmenší, když klávesnice zmenší okno (Samsung Internet, starší
   Chrome/Firefox): jinak se hero při psaní zkrátí, formulář vyjede nahoru a pole e-mailu zmizí nad horním okrajem. */
@media (max-width:959px){
  .col{--above-pb:calc(92px + var(--sab))}
  html.cc-pre .col{--above-pb:max(calc(92px + var(--sab)),calc(var(--cc-pre,0px) + 16px))}
  .media{height:calc(var(--svh,1svh) * 100)}
  .above,html.cc-pre .above{min-height:calc(var(--svh,1svh) * 100);padding-bottom:var(--above-pb)}
  .gap{min-height:calc(var(--svh,1svh) * 12)}
  .card{margin:-46px 0 0;padding-bottom:24px} /* 56 − spodní okraj odpočtu (10) − místo pro sticky lištu (92) */
  /* 30 + spodní okraj bloku „Je to venku“ (10) + 16 v sérii = 56; série nezačíná přesně na ohybu, ať háčky a čárky nadpisu
     (Anton s řádkováním .95 je má nad rámečkem) nevykukují na první obrazovce */
  body.launched .col{--above-pb:calc(30px + var(--sab))}
  html.cc-pre body.launched .col{--above-pb:max(calc(30px + var(--sab)),calc(var(--cc-pre,0px) + 16px))}
  body.launched .series{padding-top:16px}
  .series{padding-top:56px;padding-bottom:56px}
  .series h2{margin-top:0}
  body[data-theme="minimal"] .card h2{margin-top:24px}
  .card .lead{margin-bottom:24px}
  .field{gap:8px;margin-bottom:16px}
  .chk{margin:0 0 16px}
  .chk-opt{margin-top:0}
  .chk+.err{margin:-8px 0 16px} /* chyba souhlasu 8 px pod ním, další souhlas 16 px pod chybou */
  .card .btn-y.submit{margin-top:8px}
  .status:empty{min-height:0;margin-top:0}
}
@media (max-width:959px){.status:has(>.sr:only-child){min-height:0;margin-top:0}} /* jen souhrn pro čtečky: vidět není nic */
@media (max-width:959px) and (max-height:800px){html.cc-pre .gap{min-height:0}html.cc-pre .logo-wrap{width:min(60vw,236px)}}
@media (max-width:959px) and (max-height:640px){html.cc-pre .logo-wrap{width:min(46vw,180px)}html.cc-pre .cd{margin-top:18px}}
html.cc-on{scroll-padding-bottom:var(--cc-h,0px)}
html.cc-on footer{padding-bottom:calc(40px + var(--sab) + var(--cc-h,0px))}
html.cc-on .toast{bottom:calc(var(--cc-h,0px) + 16px)}
@media (min-width:960px){
  .cc{left:auto;right:calc(24px + var(--sar));bottom:calc(24px + var(--sab));width:400px;padding:18px 20px 20px;border:1px solid var(--line,rgba(255,255,255,.26));
    transform:translate3d(0,calc(100% + 48px),0)}
  body[data-side="right"] .cc{right:auto;left:calc(24px + var(--sal))}
}
@media (prefers-reduced-motion:reduce){.cc,.cc.show{transition:none}}
/* Patička: zásady a nastavení cookies vedle sebe, dotykové cíle 44 px */
.foot .links{display:flex;flex-wrap:wrap;gap:0 24px}
/* Desktop: se sítěmi 2×2 (značka a sítě nahoře, věk a odkazy dole), dřív sítě padaly na samostatný řádek */
@media (min-width:960px){
  .foot{grid-template-columns:1fr auto;grid-template-areas:"who soc" "resp links";gap:10px 28px}
  .foot .who{grid-area:who}.foot .resp{grid-area:resp}.foot .links{grid-area:links;justify-content:flex-end}.foot .soc{grid-area:soc;margin-top:0;justify-content:flex-end}
}
.foot .links a,.lnk{display:inline-flex;align-items:center;min-height:44px}
.lnk{padding:0;background:none;border:0;color:var(--pink-l);font:inherit;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--white)}
/* Sítě: dotykové cíle 44 px (dřív 33 px) */
.soc a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* ============ BUSTED: cesta zpátky ============ */
.gate-back{margin-top:20px}
.gate-back button{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:4px 0;background:none;border:0;font:600 19px/1.2 var(--body);color:#D9D5DA;text-align:left}
.gate-back button span{color:var(--hi2,var(--pink-l));text-decoration:underline;text-underline-offset:3px}
.gate-back button:hover span{color:var(--white)}
.gate-back:not([hidden]){animation:backIn .4s ease both}
@keyframes backIn{from{opacity:0}}
#gate-q:focus{outline:none}
@media (prefers-reduced-motion:reduce){.gate-back:not([hidden]){animation:none}}