@font-face{font-family:"Antykwa";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ap-regular.woff2) format("woff2")}
@font-face{font-family:"Antykwa";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/ap-italic.woff2) format("woff2")}
@font-face{font-family:"Antykwa";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/ap-bold.woff2) format("woff2")}
@font-face{font-family:"Antykwa";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/ap-bolditalic.woff2) format("woff2")}
@font-face{font-family:"Antykwa";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/ap-light.woff2) format("woff2")}
@font-face{font-family:"Antykwa";font-weight:300;font-style:italic;font-display:swap;src:url(../fonts/ap-light-italic.woff2) format("woff2")}
@font-face{font-family:"Antykwa Cond";font-weight:700;font-display:swap;src:url(../fonts/ap-cond-bold.woff2) format("woff2")}
@font-face{font-family:"Antykwa Cond";font-weight:400;font-display:swap;src:url(../fonts/ap-cond-regular.woff2) format("woff2")}
@font-face{font-family:"Antykwa Cond";font-weight:300;font-display:swap;src:url(../fonts/ap-light-cond.woff2) format("woff2")}
@font-face{font-family:"Antykwa Expd";font-weight:700;font-display:swap;src:url(../fonts/ap-expd-bold.woff2) format("woff2")}

:root{
  --wall:#625d55;
  --paper:#efe7d6;
  --paper-afisz:#e9dfc6;
  --paper-slip:#f3eee2;
  --paper-back:#ddd4c0;
  --ink:#1d1b1e;
  --red:#d22f27;
  --gold:#e2a62e;
  --cyan:#1f84c2;
  --green:#1f4a37;
  --navy:#15173a;
  --serif:"Antykwa","Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;
  --cond:"Antykwa Cond","Antykwa","Palatino Linotype",Georgia,serif;
  --expd:"Antykwa Expd","Antykwa",Georgia,serif;
  --u:1vh;
  --gx:calc(50vw - 59.2 * var(--u));
  --t-paste:1150ms;
  --e-paste:cubic-bezier(.42,.08,.32,1);
  --e-out:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--wall);color:var(--ink);font-family:var(--serif);font-kerning:normal;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

.wall{position:fixed;inset:0;background:var(--wall) url(../tex/wall.webp) center/cover;z-index:0}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.28))}
.scraps{position:absolute;inset:0;filter:saturate(.72) brightness(.84) contrast(.95)}
.scrap{position:absolute;overflow:hidden;font-family:var(--cond);font-weight:700;line-height:.82;text-transform:uppercase;white-space:nowrap}
.scrap::after{content:"";position:absolute;inset:0;background:url(../tex/paper.webp) center/cover;mix-blend-mode:multiply;opacity:.9}
.scrap i{font-style:normal;position:absolute}
.stain{position:absolute;border-radius:46% 54% 42% 58%/55% 44% 56% 45%;background:rgba(30,26,20,.16);filter:blur(1px)}

.sheet{position:absolute;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));transform-origin:50% 40%}
.paper{position:absolute;inset:0;overflow:hidden}
.pin{position:absolute;inset:0;overflow:hidden;background:var(--pbg,var(--paper));box-shadow:inset 0 0 0 1px rgba(60,45,25,.18);isolation:isolate}
.pin::before{content:"";position:absolute;inset:0;background:url(../tex/speckle.webp) center/cover;opacity:.85;pointer-events:none;z-index:6}
.pin::after{content:"";position:absolute;inset:0;background:url(../tex/paper.webp) center/cover;mix-blend-mode:multiply;pointer-events:none;z-index:7}
html:not(.js) .paper{background:var(--pbg,var(--paper))}
.pin>.wet{position:absolute;inset:0;background:#3b2c1c;mix-blend-mode:multiply;opacity:0;pointer-events:none;z-index:8}
.pin>.sheen{position:absolute;top:0;bottom:0;left:-70%;width:60%;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,250,235,.55) 50%,rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;opacity:0;pointer-events:none;z-index:9}
.roll{position:absolute;left:-1.2%;right:-1.2%;top:0;height:calc(3.6 * var(--u));margin-top:calc(-1.8 * var(--u));border-radius:calc(1.8 * var(--u));background:linear-gradient(180deg,#71695a 0%,#b3a993 14%,#e9e1cf 36%,#fbf6ea 48%,#ddd4c1 64%,#9d937e 86%,#5d564a 100%);box-shadow:0 calc(1.6 * var(--u)) calc(2 * var(--u)) calc(-.8 * var(--u)) rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:20}
.roll::before,.roll::after{content:"";position:absolute;top:8%;bottom:8%;width:calc(1.4 * var(--u));border-radius:50%;background:radial-gradient(circle at 50% 50%,#3d382f 0 22%,#cfc6b2 26% 100%)}
.roll::before{left:calc(-.5 * var(--u))}
.roll::after{right:calc(-.5 * var(--u))}
.torn-core{position:absolute;inset:0;background:#f7f2e6;pointer-events:none}
.piece{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;z-index:30}
.piece>*{position:absolute;inset:0}
.piece .shade{position:absolute;inset:0;z-index:40;background:linear-gradient(0deg,rgba(20,14,8,.65),rgba(20,14,8,.1) 55%,rgba(20,14,8,0));opacity:0;pointer-events:none}
.piece-back{background:var(--paper-back) url(../tex/paper.webp) center/cover;background-blend-mode:multiply;transform:rotateX(180deg)}
.piece-back::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 40%,rgba(120,100,60,.25),transparent 70%),radial-gradient(50% 30% at 70% 70%,rgba(120,100,60,.2),transparent 70%)}

.board{position:fixed;inset:0;z-index:10}
.js .screen{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.js .screen.vis{visibility:visible}
.screen .sheet{pointer-events:auto}
.poster{left:var(--gx);top:calc(7.5 * var(--u));width:calc(58.8 * var(--u));height:calc(84 * var(--u))}
.poster .paper{--pbg:var(--paper)}
.night .poster .paper{--pbg:var(--navy)}
.solemn .poster .paper{--pbg:#ebe4d5}
.poster svg{display:block;width:100%;height:100%}
.afisz{left:calc(var(--gx) + 61.4 * var(--u));top:calc(10.5 * var(--u));width:calc(36 * var(--u));height:calc(77 * var(--u))}

.art .t-sc{font-family:var(--serif);font-variant:small-caps;font-variant-numeric:oldstyle-nums}
.art .t-it{font-family:var(--serif);font-style:italic}
.art .t-num{font-family:var(--serif);font-weight:700;font-variant-numeric:lining-nums tabular-nums}

.afisz .paper{--pbg:var(--paper-afisz)}
.afisz .pin{display:flex;flex-direction:column;padding:calc(2.6 * var(--u)) calc(2.5 * var(--u)) calc(2.2 * var(--u))}
.afisz .pin>*{position:relative;z-index:1}
.afisz .pin>.wet,.afisz .pin>.sheen{position:absolute}
.a-kicker{display:flex;justify-content:space-between;font-variant:small-caps;font-size:calc(1.5 * var(--u));letter-spacing:.14em;padding-bottom:calc(.9 * var(--u));border-bottom:calc(.35 * var(--u)) solid var(--ink);box-shadow:0 calc(.55 * var(--u)) 0 -1px var(--paper-afisz),0 calc(.6 * var(--u)) 0 0 var(--ink)}
.afisz h2{font-family:var(--cond);font-weight:700;font-size:calc(8.6 * var(--u));white-space:nowrap;line-height:.86;text-transform:uppercase;letter-spacing:-.005em;color:var(--spot);margin:calc(2 * var(--u)) 0 calc(.7 * var(--u))}
.afisz h2.long{font-size:calc(5.4 * var(--u));line-height:.9;white-space:normal}
.a-sub{font-style:italic;font-size:calc(2.15 * var(--u));line-height:1.15;padding-bottom:calc(1.2 * var(--u));margin-bottom:calc(1.2 * var(--u));border-bottom:1px solid var(--ink)}
.a-motto{font-style:italic;font-size:calc(1.5 * var(--u));line-height:1.35;margin-bottom:calc(1.2 * var(--u));padding-left:calc(1.2 * var(--u));border-left:calc(.4 * var(--u)) solid var(--spot)}
.facts{list-style:none;display:flex;flex-direction:column;gap:calc(1 * var(--u) * var(--k,1))}
.facts li{display:grid;grid-template-columns:calc(9.2 * var(--u)) 1fr;column-gap:calc(1.2 * var(--u));align-items:baseline;padding-top:calc(.9 * var(--u) * var(--k,1));border-top:1px dotted rgba(29,27,30,.45)}
.facts li:first-child{border-top:0;padding-top:0}
.facts b{font-family:var(--cond);font-weight:700;font-size:calc(2.5 * var(--u) * var(--k,1));line-height:.95;color:var(--spot);font-variant-numeric:lining-nums;hyphens:none}
.facts span{font-size:calc(1.56 * var(--u) * var(--k,1));line-height:1.3;hyphens:manual}
.a-next{margin-top:auto;padding-top:calc(1.2 * var(--u));border-top:calc(.35 * var(--u)) solid var(--ink);display:flex;justify-content:space-between;align-items:baseline;font-variant:small-caps;letter-spacing:.08em;font-size:calc(1.5 * var(--u));text-decoration:none;transition:color .14s ease-out}
.a-next em{font-family:var(--cond);font-weight:700;font-style:normal;font-variant:normal;letter-spacing:0;font-size:calc(2.4 * var(--u));text-transform:uppercase;color:var(--spot);transition:transform .16s var(--e-out)}
.a-next::after{content:"→";font-variant:normal;margin-left:.4em}
.a-next:hover em,.a-next:focus-visible em{transform:translateX(calc(.6 * var(--u)))}
.a-next:hover{color:var(--spot)}
.a-next:active em{transform:translateX(calc(.2 * var(--u)))}

.slip{z-index:60}
.js .slip:not(.shown) .paper{clip-path:inset(0 0 100% 0)}
.slip .paper{--pbg:var(--paper-slip)}
.metryczka{left:max(10px,calc(var(--gx) - 21 * var(--u)));top:calc(9 * var(--u));width:calc(19 * var(--u));height:calc(41 * var(--u))}
.metryczka .pin{padding:calc(1.8 * var(--u)) calc(1.7 * var(--u));display:flex;flex-direction:column}
.metryczka .pin>*{position:relative;z-index:1}
.metryczka .pin>.wet,.metryczka .pin>.sheen{position:absolute}
.m-kicker{font-variant:small-caps;letter-spacing:.14em;font-size:calc(1.35 * var(--u));border-bottom:1px solid var(--ink);padding-bottom:calc(.6 * var(--u))}
.metryczka h1{font-family:var(--cond);font-weight:700;font-size:calc(4.7 * var(--u));white-space:nowrap;line-height:.86;text-transform:uppercase;color:var(--red);margin:calc(1.2 * var(--u)) 0 calc(1.4 * var(--u))}
.metryczka h1 em{display:block;font-family:var(--serif);font-weight:400;font-style:italic;text-transform:none;font-size:calc(2.3 * var(--u));line-height:1.1;color:var(--ink);margin-top:calc(.4 * var(--u))}
.metryczka dl{display:flex;flex-direction:column;gap:calc(.55 * var(--u));font-size:calc(1.42 * var(--u));line-height:1.2}
.metryczka dl div{display:flex;flex-direction:column;border-top:1px dotted rgba(29,27,30,.45);padding-top:calc(.45 * var(--u))}
.metryczka dt{font-variant:small-caps;letter-spacing:.08em;font-size:.9em;color:#5b5348}
.metryczka dd{font-weight:700;font-variant-numeric:lining-nums}

.ogloszenie{left:calc(var(--gx) + 99.6 * var(--u));top:calc(26 * var(--u));width:calc(18.8 * var(--u));height:calc(54 * var(--u))}
.ogloszenie .paper{overflow:visible}
.ogloszenie .paper.rolling{overflow:hidden}
.ogloszenie .pin{box-shadow:none;background:none;isolation:auto;overflow:visible}
.ogloszenie .pin::before,.ogloszenie .pin::after{display:none}
.o-body{position:absolute;left:0;right:0;top:0;bottom:calc(22 * var(--u));background:var(--paper-slip) url(../tex/paper.webp) center/cover;background-blend-mode:multiply;box-shadow:inset 0 0 0 1px rgba(60,45,25,.15);padding:calc(1.8 * var(--u)) calc(1.6 * var(--u))}
.o-head{font-family:var(--serif);font-weight:700;font-style:italic;font-size:calc(3.1 * var(--u));line-height:1;color:var(--ink);text-align:center;padding-bottom:calc(.8 * var(--u));border-bottom:calc(.3 * var(--u)) double var(--ink)}
.o-sub{font-style:italic;font-size:calc(1.55 * var(--u));line-height:1.3;text-align:center;margin-top:calc(1.1 * var(--u))}
.o-arrow{display:block;text-align:center;font-size:calc(2.6 * var(--u));line-height:1;margin-top:calc(.8 * var(--u));color:var(--red)}
.tabs{list-style:none;position:absolute;left:0;right:0;bottom:0;height:calc(22 * var(--u));display:flex}
.tabs li{flex:1;position:relative}
.tabs a{position:absolute;inset:0;display:flex;align-items:center;gap:0;writing-mode:vertical-rl;padding:calc(1.2 * var(--u)) 0;font-size:calc(1.62 * var(--u));text-decoration:none;color:var(--ink);background:var(--paper-slip) url(../tex/paper.webp) center/cover;background-blend-mode:multiply;border-left:1px dashed rgba(29,27,30,.5);transform-origin:50% 0;transition:transform .16s var(--e-out),background-color .14s ease-out;outline:none}
.tabs li:first-child a{border-left:0}
.tabs a span{font-family:var(--cond);font-weight:700;font-size:calc(2.3 * var(--u));color:var(--red);writing-mode:horizontal-tb;margin-bottom:calc(2.6 * var(--u))}
.tabs a:hover{transform:rotate(-4deg) translateY(calc(.3 * var(--u)))}
.tabs a:active{transform:rotate(-7deg) translateY(calc(.6 * var(--u)))}
.tabs a:focus-visible{box-shadow:inset 0 0 0 calc(.3 * var(--u)) var(--red)}
.tabs a[aria-current="page"]{color:var(--red)}
.tabs li.torn a{clip-path:polygon(0 0,100% 0,100% 26%,84% 27.5%,66% 25.5%,48% 28%,30% 25.8%,14% 27.6%,0 26.4%)}
.tabs li.torn a:hover{transform:rotate(-2deg)}
.tabs a[aria-disabled="true"]{cursor:default}
.tab-fall{position:fixed;pointer-events:none;z-index:90;writing-mode:vertical-rl}

.gl{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:80}
.no-gl .gl{display:none}
.no-gl body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;background:radial-gradient(120% 90% at 50% 40%,rgba(255,250,235,.06),rgba(0,0,0,.22));mix-blend-mode:multiply}

.pin>svg{position:absolute;inset:0}
.layer{pointer-events:none;z-index:1;will-change:transform}
.flow path{animation:flow 16s steps(240) infinite}
@keyframes flow{to{stroke-dashoffset:-320}}
.layer.birds{animation:bob 2.6s ease-in-out infinite alternate}
.layer.birds.b{animation-duration:3.1s;animation-delay:-1.3s}
@keyframes bob{to{transform:translate(.5%,-.6%)}}
.layer.sway{animation:sway 5.5s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
@keyframes sway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.5deg)}}
.layer .key{transition:fill .09s ease-out}
.layer .key.down{fill:#c4b68e}
.layer .lamp{animation:lamp 11s steps(1) infinite;animation-delay:var(--d)}
@keyframes lamp{0%{opacity:1}46%{opacity:.12}82%{opacity:1}}
.layer.n-pink{animation:flick 8s steps(1) infinite}
.layer.n-cyan{animation:flick2 11s steps(1) infinite}
.layer.n-yell{animation:hum 4s ease-in-out infinite alternate}
.layer.n-star{animation:flick2 6s steps(1) infinite reverse}
@keyframes flick{0%,100%{opacity:1}31%{opacity:.25}32%{opacity:1}33%{opacity:.45}34.5%{opacity:1}71%{opacity:1}72%{opacity:.6}73%{opacity:1}}
@keyframes flick2{0%,100%{opacity:1}52%{opacity:.3}53%{opacity:1}88%{opacity:.7}89%{opacity:1}}
@keyframes hum{from{opacity:.86}to{opacity:1}}
.js .screen:not(.vis) .layer{animation-play-state:paused}

.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .flow path,.layer,.layer .lamp{animation:none!important}
  .tabs a,.a-next em{transition:none}
  .tabs a:hover,.tabs a:active{transform:none}
}

html:not(.js) body{overflow:auto}
html:not(.js) .screen{position:relative;height:100vh}
html:not(.js) .roll{display:none}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}