:root{--bg:#F4F2ED;--ink:#111;--muted:#5F5A53;--pill:rgba(255,255,255,.55);--paper:#F5F5F5 url(/img/paper.jpg?v=3) 0 0/1352px auto repeat fixed;--line:rgba(17,17,17,.12);--red:#AB0303;--font:"Inter Tight",Helvetica,Arial,sans-serif;--serif:"Instrument Serif",Georgia,serif}
html[data-l=en] .l-pl,html[data-l=pl] .l-en{display:none}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
h1,h2,h3{font-weight:500;letter-spacing:-.02em}
[hidden]{display:none!important}
.d{color:var(--muted);font-size:13px}
.logo{display:block;aspect-ratio:737/266;background:var(--red);-webkit-mask:url(/img/logo-mask.png) center/contain no-repeat;mask:url(/img/logo-mask.png) center/contain no-repeat}
.tag{display:inline-block;background:var(--pill);border-radius:99px;padding:3px 10px;font-size:12px;white-space:nowrap}
.lbl{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.lbl a:hover{color:var(--ink)}
.lbl.big{color:var(--ink);font-size:15px;border:0;padding-bottom:18px}

/* top bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px 24px;background:var(--paper)}
.brand{width:92px}
.pills{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pills a,.pills button{flex:none;background:var(--pill);border:0;border-radius:99px;padding:6px 13px;font:400 13px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.pills a:hover,.pills button:hover{background:rgba(255,255,255,.85)}
.pills .on,.pills .on:hover{background:var(--ink);color:var(--bg)}
.lang{justify-self:end;display:flex;gap:10px;font-size:13px}
.lang button{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer}
html[data-l=en] .lang [data-set=en],html[data-l=pl] .lang [data-set=pl]{color:var(--ink)}
main{padding-top:88px}
.home main{padding-top:0}

/* this week + new */
.now{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:56px 24px 72px;max-width:1320px;margin:auto}
.mini{display:grid;grid-template-columns:70px 1fr;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);align-items:baseline}
.mini b{font-weight:400;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.mini:hover b{text-decoration:underline;text-underline-offset:3px}

/* story viewer */
.view{padding:0 24px 80px;max-width:1320px;margin:auto}
.tools{display:flex;justify-content:space-between;gap:12px;padding-bottom:22px}
.items.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 18px}
.items.grid .im{aspect-ratio:4/5;overflow:hidden}
.items img{height:100%;object-fit:cover}
.it h3{font-size:24px;line-height:1.12;margin:4px 0 4px}
.items.grid .tx{padding-top:10px}
.it .c{font-size:13px;color:var(--muted)}
.it:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.items.list{display:block;border-top:1px solid var(--line)}
.items.list .it{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.items.list .im{display:none}
.items.list .tx{display:grid;grid-template-columns:1fr 160px 150px;gap:16px;align-items:baseline}
.items.list h3{grid-column:1;grid-row:1;margin:0;font-size:26px}
.items.list .d{text-align:end}
.items.wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.items.wall .im{aspect-ratio:1;overflow:hidden}
.items.wall .tx{display:none}
.items.wall .it:hover{opacity:.7}

/* page titles */
.ptitle{padding:48px 24px 34px;max-width:1320px;margin:auto}
.ptitle h1{font-size:clamp(48px,9vw,128px);line-height:.95;letter-spacing:-.03em}
.ptitle p{color:var(--muted);margin-top:8px}

/* what's on */
.board{padding:0 24px 80px;max-width:1320px;margin:auto}
.days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
.days::-webkit-scrollbar{display:none}
.days button{flex:1 0 auto;background:var(--pill);border:0;border-radius:99px;padding:13px 16px;font:500 16px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap}
.days button:hover{background:rgba(255,255,255,.85)}
.days .on,.days .on:hover{background:var(--ink);color:var(--bg)}
.days .past{opacity:.35;cursor:default}
.days sup{font-size:11px;font-weight:400;margin-inline-start:3px;opacity:.65}
.free{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;white-space:nowrap}
.free input{accent-color:var(--ink)}
.dayg{padding-top:30px}
.ev{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ev .tm{font-size:14px;color:var(--muted)}
.ev b{display:block;font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.015em}
.ev .n span{font-size:14px;color:var(--muted)}
.ev:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* article */
.art .open{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;padding:34px 24px 72px;max-width:1320px;margin:auto}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.open h1{font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:600}
.dek{font-size:20px;line-height:1.35;margin-top:18px;max-width:30em}
.art .open figure img{max-height:80svh;width:auto;max-width:100%;margin-inline:auto}
.row figure img,.row figure video{max-height:82svh;width:auto;max-width:100%;margin-inline:auto}
.note{font-size:14px;color:var(--muted);margin-top:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:0 24px 64px;max-width:1320px;margin:auto}
.row.flip figure{order:-1}
.row.solo{grid-template-columns:minmax(0,1fr);padding-bottom:32px}
.row.solo .copy{max-width:640px}
.copy p{font-size:20px;line-height:1.5}
figure{overflow:hidden}
.wall{columns:4 220px;column-gap:10px;padding:0 24px 56px;max-width:1320px;margin:auto}
.wall>*{margin-bottom:10px;break-inside:avoid}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:12px 24px 56px;max-width:1320px;margin:auto}
.facts dl>div{padding:10px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{font-size:16px}
.facts dd b{font-weight:500;display:block}
.facts a{text-decoration:underline;text-underline-offset:3px}
.watch,.iglink{padding:0 24px 64px;max-width:1320px;margin:auto}
.watch iframe{display:block;width:100%;max-width:325px;aspect-ratio:9/16;border:0;background:#000}
.iglink a{text-decoration:underline;text-underline-offset:3px}

/* about */
.atext{max-width:760px;padding:0 24px 100px}
.about p{font-size:20px;line-height:1.45;margin-bottom:16px}
.about a{text-decoration:underline;text-underline-offset:3px}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;font-size:13px;color:var(--muted)}
footer div{display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* the red frame (homepage) */
body.home{background:var(--red)}
.home .panel{margin:30px;border-radius:28px;background:var(--paper);overflow:clip}
.home .bar{position:absolute;inset:30px 30px auto 30px;border-radius:28px 28px 0 0;background:none}
.home main{padding-top:0}

/* two-font headlines */
h1 b{font-weight:800;letter-spacing:-.045em}
h1 i{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:-.01em}
.ptitle.small h1{font-size:clamp(40px,6vw,84px)}

/* homepage hero */
.hero{position:relative;height:calc(100svh - 60px);min-height:620px;overflow:hidden;touch-action:pan-y}
.say{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,900px);text-align:center;pointer-events:none}
.kick{font-family:var(--serif);font-size:clamp(22px,2.4vw,34px);line-height:1}
.say h1{font-size:clamp(44px,6.4vw,108px);line-height:.9;margin:12px 0 18px;white-space:nowrap}
.sub{font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);line-height:1.2;max-width:26em;margin:auto}
.ring-items{position:absolute;inset:0}
.ri{position:absolute;left:0;top:0;will-change:transform}
.ri.photo{width:clamp(70px,7.2vw,108px);aspect-ratio:1;box-shadow:0 8px 20px -10px rgba(17,17,17,.45);transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.ri.photo img{width:100%;height:100%;object-fit:cover}
.ri.photo:hover{scale:1.12;z-index:3}
.cap{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;background:var(--ink);color:var(--bg);font-size:12px;padding:3px 9px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.ri.photo:hover .cap{opacity:1}
.ri.el{width:clamp(76px,7.6vw,116px);height:clamp(76px,7.6vw,116px);pointer-events:none;isolation:isolate}
.ri.el::before{content:"";position:absolute;inset:-6%;z-index:-1;border-radius:50%;background:radial-gradient(circle closest-side,#E8392B 0%,rgba(236,72,58,.78) 30%,rgba(242,120,106,.42) 62%,rgba(248,170,160,0) 100%)}
.ri.el img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(17,17,17,.22))}
.say{z-index:2}
/* section menu: one red box, square corners, hand-drawn underline on the current page and on hover */
.menu{justify-self:center;display:flex;gap:2px;background:#fff;padding:6px 10px;box-shadow:0 1px 0 rgba(17,17,17,.06)}
.menu a{position:relative;color:var(--ink);font:600 12px/1 var(--font);text-transform:uppercase;letter-spacing:.03em;padding:5px 8px 8px;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:6px;background:var(--red);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C20 3.5 38 3 56 4.5c-8 1.6-16 3.3-24 4.8C52 6 74 4 98 2.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5C20 3.5 38 3 56 4.5c-8 1.6-16 3.3-24 4.8C52 6 74 4 98 2.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 clip-path:inset(0 100% 0 0);transition:clip-path .35s ease}
.menu a:hover::after,.menu a.on::after{clip-path:inset(0 0 0 0)}
.wrap{max-width:1320px;margin:auto;padding:0 24px}
.chips-new{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.chip{display:flex;align-items:center;gap:9px;background:var(--pill);border-radius:99px;padding:5px 15px 5px 5px;font-size:15px}
.chip img{width:30px;height:30px;border-radius:50%}
.chip:hover{background:rgba(255,255,255,.85)}

/* photo-less card */
.ph{display:grid;place-items:center;height:100%;min-height:100%;aspect-ratio:4/5;background:var(--red);color:#fff;padding:16px;text-align:center}
.ph span{font-family:var(--serif);font-size:clamp(24px,3vw,40px);line-height:1}
.open figure .ph{aspect-ratio:4/5;max-height:70svh}

/* new in warsaw */
.spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;padding:0 24px 72px;max-width:1320px;margin:auto}
.spot{display:grid;justify-items:start;gap:6px}
.spot img{width:min(180px,100%);border-radius:50%;margin-bottom:10px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
a.spot:hover img{transform:rotate(-6deg) scale(1.04)}
.spot b{font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.1}

@media (max-width:820px){
  .bar{grid-template-columns:auto auto;padding:10px 16px}
  .menu{grid-column:1/-1;grid-row:2;justify-self:stretch;overflow-x:auto;scrollbar-width:none;padding:8px 6px}
  .menu::-webkit-scrollbar{display:none}
  main{padding-top:112px}
  .brand{width:78px}
  .home .panel{margin:14px;border-radius:20px}
  .home .bar{inset:14px 14px auto 14px}
  .hero{height:calc(100svh - 28px);min-height:640px}
  .say{width:60vw;transform:translate(-50%,-50%)}
  .ri.photo{width:50px}.ri.el{width:48px;height:48px}.cap{display:none}
  .say h1{white-space:normal;font-size:clamp(34px,10.4vw,56px)}
  .kick{font-size:18px}.sub{font-size:14px}
  .say h1 b{display:block}
  .spots{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;padding-inline:16px}
  .wrap,.atext{padding-inline:16px}
  .now,.art .open,.row,.facts{grid-template-columns:minmax(0,1fr);gap:18px}
  .now{gap:36px;padding-inline:16px}
  .view,.board,.ptitle,.art .open,.row,.facts,.watch,.iglink,.wall{padding-inline:16px}
  .art .open{padding-bottom:40px}
  .row{padding-bottom:40px}
  .row.flip figure{order:0}
  .items.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px}
  .it h3{font-size:19px}
  .items.list .tx{grid-template-columns:1fr}
  .items.list h3{font-size:22px}
  .items.list .d{text-align:start}
  .items.wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .tools{flex-direction:column}
  .copy p{font-size:18px}
  .ev{grid-template-columns:50px 1fr}
  .ev .tag{grid-column:2;justify-self:start}
}
