/* obserwacje sections: owned by the obserwacje session; tokens are mapped by the page shell.
   Scope: :is(#obs,#obs-aneks), the story region and the appendix region.
   Layout: every band sits on one grid. The spine (7fr) carries the story: title, text, chart.
   The margin (4fr) carries the subject (top) or the verdict (bottom), then legend, source and tables. */
:is(#obs,#obs-aneks){
  --pl-red:#dc143c;--pl-white:#f4f1e6;--pl-onred:#ffffff;--pl-onwhite:#0e0e0c;
}
html[data-theme="light"] :is(#obs,#obs-aneks){--pl-white:#ffffff}
/* grey context marks one step brighter than the shell's --dot: readable at a glance, still well under the yellow */
html :is(#obs,#obs-aneks){--lo:color-mix(in srgb,var(--dot) 55%,var(--muted))}
html[data-theme="light"] :is(#obs,#obs-aneks) .pt li .k.ab{border-color:var(--lo)}
#obs{--sec-pad:clamp(112px,12.5vw,184px);--gap-bd:clamp(56px,6.4vw,96px);--ttl:clamp(46px,7.2vw,112px);--grid:minmax(0,7fr) minmax(32px,1fr) minmax(0,4fr)}
@property --sw{syntax:'<percentage>';inherits:true;initial-value:100%}

/* kicker: a 3px rule, then the track label; the disc only on the side opener */
#obs .kick{position:relative;display:flex;align-items:center;gap:12px;padding-top:14px;color:var(--muted)}
#obs .kick::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform-origin:0 50%}
#obs .kick .mono{font-size:12px;letter-spacing:.1em}
#obs .kick b{font-weight:600;color:var(--mark)}
#obs .kick+.bd{margin-top:clamp(28px,3vw,44px)}

/* titles: one mask per line, padded for Polish accents above and ogonki below */
#obs .ttl{display:flex;flex-direction:column;align-items:flex-start;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--ttl);line-height:1.02;letter-spacing:.004em;color:var(--ink)}
#obs .ttl .l{display:block;max-width:100%;overflow:hidden;padding:.26em .08em .34em;margin:-.26em -.08em -.34em}
/* Anton ogonki reach .31em below the baseline and Ż/Ś/Ó accents .24em above the caps; at this leading they touch the neighbouring line */
#obs .ttl .l.og{margin-bottom:-.07em}
#obs .ttl .l.ac{margin-top:-.14em}
#obs .ttl .l>span{display:block}
/* hero title: always two lines, „O czym rapuje” / „polski rap”. The size fits the longer line (6.07em in Anton) into its column. */
#obs .hero .bd{container-type:inline-size}
#obs .hero-t{--ttl:min(clamp(56px,8.6vw,128px),calc(100cqi / 6.3))}
#obs .hero-t .l>span{white-space:nowrap}
#obs .hero-t .x{display:inline-block;background:var(--loud);color:var(--onloud);padding:.04em .1em 0;margin-left:-.1em;line-height:.95}
#obs .hero-t .l{padding-left:.12em;margin-left:-.12em}
#obs .sub-h{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.8vw,40px);line-height:1;letter-spacing:.005em;color:var(--ink)}

/* text */
#obs .txt{max-width:64ch}
:is(#obs,#obs-aneks) .txt p+p{margin-top:1em}
:is(#obs,#obs-aneks) .txt a{color:var(--sec);text-decoration:underline;text-underline-offset:3px}
#obs .bd>:is(.ttl,.sub-h)+:is(.txt,.stand){margin-top:clamp(24px,2.6vw,36px)}
#obs .bd+.bd{margin-top:var(--gap-bd)}
#obs .fig+.bd{margin-top:calc(var(--gap-bd) * 1.25)}

/* intro: the side opener */
#obs .hero{padding-top:clamp(56px,6.5vw,104px)}
#obs .stand{max-width:44ch;margin:0;font-size:clamp(19px,1.8vw,25px);line-height:1.42;color:var(--ink)}

/* sections */
#obs .sec{padding-top:var(--sec-pad)}
#obs-aneks .sec{padding-top:64px}
#obs-aneks .sec-h{display:flex;align-items:baseline;gap:16px;border-top:3px solid var(--ink);padding-top:12px}
#obs-aneks .sec-h h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,6.4vw,92px);line-height:.96;letter-spacing:.002em}

/* verdict: the punchline and the one number per section. Money (A4) keeps one accent, gold, for the highlight too */
#obs #pieniadze{--loud:var(--gold)}
html[data-theme="light"] #obs #pieniadze{--loud:var(--gold-l)}
#obs .bd-t{min-width:0}
#obs .bd>.txt.t2{margin-top:clamp(28px,4vw,44px)}
#obs .punch{margin:0;max-width:19ch;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.3vw,47px);line-height:1.24;letter-spacing:.005em;color:var(--ink);text-wrap:balance}
#obs .punch{isolation:isolate}
#obs .punch .x{position:relative;padding:0 .1em;margin-left:-.1em;white-space:nowrap;line-height:1.44;color:var(--onloud)}
#obs .punch .x::before{content:'';position:absolute;z-index:-1;left:0;top:.24em;width:var(--sw,100%);height:1.04em;background:var(--loud)}
/* The bar covers the caps only, and its line gets extra leading so the bar never paints over an ogonek on the line above.
   Text is dark inside the bar and ink outside it, so an ogonek hanging below the bar stays visible.
   The bar is the ::before above, not a third background layer: Firefox paints nothing of a border-box layer
   that shares an element with text-clipped layers, which left the phrase invisible there. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #obs .punch .x{color:transparent;
    background:linear-gradient(var(--onloud),var(--onloud)) 0 .24em/var(--sw,100%) 1.04em no-repeat,linear-gradient(var(--ink),var(--ink));
    -webkit-background-clip:text;background-clip:text}
}
#obs .big{margin:0}
#obs .punch+.big{margin-top:clamp(40px,5vw,72px)}
#obs .big b{display:block;font-family:var(--display);font-weight:400;font-size:var(--ttl);line-height:.86;letter-spacing:-.01em;color:var(--mark);white-space:nowrap}
#obs .cu-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;-webkit-user-select:none;user-select:none}
#obs .big.w b{font-size:calc(var(--ttl) * .86)}
#obs .big b small{font-size:.5em;color:var(--ink);letter-spacing:0}
#obs .big .ar{color:var(--muted)}
/* before → after: the earlier value is drawn hollow, like the do-2014 rings in the charts */
#obs .big .b1{color:transparent;-webkit-text-stroke:max(1.5px,.022em) var(--mark)}
#obs .big .b1 small{color:inherit}
#obs .big .ar{display:inline-block;width:.6em;height:.36em;margin:0 .07em;vertical-align:.25em;overflow:hidden;text-indent:200%;white-space:nowrap;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Cpath d='M0 18h55M40 4l15 14-15 14' fill='none' stroke='%23000' stroke-width='4.5'/%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 60 36'%3E%3Cpath d='M0 18h55M40 4l15 14-15 14' fill='none' stroke='%23000' stroke-width='4.5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
#obs .big .rise{display:inline-block;vertical-align:top;overflow:hidden;padding:.08em .04em;margin:-.08em -.04em}
#obs .big .rise>span{display:inline-block}
#obs .big>span{display:block;margin-top:16px;max-width:36ch;font:400 11px/1.55 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-wrap:balance}

/* figures: a chart row (chart in the spine, legend and sources in the margin) or a wide figure */
#obs .fig{position:relative;margin:var(--gap-bd) 0 0}
:is(#obs,#obs-aneks) .fig svg{width:100%;height:auto;overflow:visible}
#obs .cr-k{margin-bottom:14px}
#obs .cr-k .legend{margin:0}
#obs .cr-k .axt{margin-top:12px}
#obs .ff{margin-top:16px}
#obs .wide>.sub-h{margin-bottom:20px}
#obs .wide>.legend{margin-bottom:16px}
#obs .slot{display:none}
:is(#obs,#obs-aneks) .src{margin-top:12px;max-width:90ch;font:400 11px/1.55 var(--mono);letter-spacing:.02em;color:var(--muted);text-wrap:pretty}
:is(#obs,#obs-aneks) .txt p{text-wrap:pretty}
:is(#obs,#obs-aneks) .fn{margin-top:10px;max-width:80ch;font:400 12px/1.6 var(--mono);letter-spacing:.02em;color:var(--muted)}
:is(#obs,#obs-aneks) .fn a{color:var(--sec);text-decoration:underline;text-underline-offset:3px}
:is(#obs,#obs-aneks) .legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 14px;color:var(--muted)}
:is(#obs,#obs-aneks) .legend span{display:inline-flex;align-items:center;gap:8px}
:is(#obs,#obs-aneks) .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lo)}
:is(#obs,#obs-aneks) .legend i.hi{background:var(--mark)}
:is(#obs,#obs-aneks) .legend i.sec{background:var(--sec)}
:is(#obs,#obs-aneks) .legend i.hollow{background:none;border:2px solid var(--lo)}
:is(#obs,#obs-aneks) .legend i.faint{width:5px;height:5px;margin:0 2.5px;opacity:.6}
:is(#obs,#obs-aneks) .legend i.bar{width:16px;height:8px;border-radius:0 3px 3px 0}
:is(#obs,#obs-aneks) .fig.meme img{display:block;width:100%;max-width:680px;height:auto}
#obs .bd-t .fig.meme{margin:0}
#obs .pt-w{margin-top:clamp(40px,4.4vw,64px);max-width:770px}

/* figure rows: the chart, then one row with the caption on the left and the table buttons on the right.
   A table opens in its drawer under that row at full width, so the button never moves. On a phone the buttons wrap under the caption. */
#obs .fig:is(.cr,.wide){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:clamp(20px,3vw,48px)}
#obs .fig:is(.cr,.wide)>*{flex:0 0 100%;min-width:0}
#obs .fig:is(.cr,.wide)>.ff{order:1;flex:1 1 340px;max-width:none;margin-top:18px}
#obs .fig:is(.cr,.wide)>.tb{order:2;flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#obs .fig:is(.cr,.wide)>.tb details.tbl{margin:0}
#obs .fig:is(.cr,.wide)>.tbd{order:3;display:none;margin-top:14px}
#obs .fig:has(>.tb>details[data-k="1"][open])>.tbd[data-k="1"],#obs .fig:has(>.tb>details[data-k="2"][open])>.tbd[data-k="2"]{display:block}

/* years: the numbers move onto the title line when every panel of the chart has room (obserwacje.js fitHeads) */
:is(#obs,#obs-aneks) .yy .yt.inl{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
:is(#obs,#obs-aneks) .yy .yt.inl .yv{flex:none;margin-top:0}
#obs .fit-probe .yt h4{display:inline-block;white-space:nowrap}
#obs .fit-probe .yt .yv{display:inline-block}

/* desktop grid. The text column stacks title, text and chart. The margin column (.bd-t) spans every row from the text down;
   the grid puts its extra height into the last, empty 1fr row, so a tall verdict never pushes the chart away from its text. */
@media (min-width:1100px){
  #obs .bd{display:grid;grid-template-columns:var(--grid);align-items:start}
  #obs .bd{grid-template-rows:auto auto auto 1fr}
  #obs .bd>:is(.ttl,.sub-h){grid-column:1;grid-row:1}
  #obs .hero-t{--ttl:min(clamp(56px,8.6vw,128px),calc(100cqi * 7 / 12 / 6.3))}
  #obs .bd>:is(.txt,.stand){grid-column:1;grid-row:2}
  #obs .bd>.txt.t2{grid-row:3;margin-top:1em}
  #obs .bd>.fig{grid-column:1;grid-row:3;min-width:0}
  #obs .bd>.bd-t{grid-column:3;grid-row:2/-1;align-self:stretch;margin-top:clamp(24px,2.6vw,36px)}
  #obs .bd.bd-m>.bd-t{grid-row:1/-1;margin-top:0}
  /* the meme's top edge sits on the cap line of the first title line, not on the line box */
  #obs .bd.bd-m>.bd-t>.meme{margin-top:calc(var(--ttl) * .067)}
  #obs .bd-t>.vd{position:sticky;top:clamp(48px,12vh,128px)}
  #obs .bd-t>.meme+.vd{margin-top:clamp(48px,5vw,72px)}
  #obs .bd.bd-up{grid-template-rows:auto 1fr}
  #obs .bd.bd-up>.bd-t{grid-row:1/span 2;align-self:start;margin-top:0}
  #obs .bd>.slot{display:block;position:relative;grid-column:3;grid-row:1;align-self:start;height:0}
  #obs .bd>.txt{max-width:54ch;font-size:18px}
  #obs .fig.wide>.sub-h,#obs .fig.wide>.sub-h+.legend{flex:0 1 auto}
}
:is(#obs,#obs-aneks) svg text{font-family:var(--sans)}
:is(#obs,#obs-aneks) .ax text,:is(#obs,#obs-aneks) .tk{font:400 11px var(--mono);fill:var(--muted);letter-spacing:.02em}
:is(#obs,#obs-aneks) .gl{stroke:var(--rule);stroke-width:1}
:is(#obs,#obs-aneks) .base{stroke:var(--faint);stroke-width:1}
:is(#obs,#obs-aneks) .lbl{font-size:14px;font-weight:500;fill:var(--ink)}
:is(#obs,#obs-aneks) .lbl-m{font:400 11px var(--mono);fill:var(--muted);letter-spacing:.02em}
:is(#obs,#obs-aneks) .grp{font:500 11px var(--mono);fill:var(--ink);letter-spacing:.08em;text-transform:uppercase}
:is(#obs,#obs-aneks) .f-hi{fill:var(--mark)} :is(#obs,#obs-aneks) .f-sec{fill:var(--sec)} :is(#obs,#obs-aneks) .f-lo{fill:var(--lo)} :is(#obs,#obs-aneks) .f-bg{fill:var(--bg)}
:is(#obs,#obs-aneks) .s-hi{stroke:var(--mark)} :is(#obs,#obs-aneks) .s-lo{stroke:var(--lo)} :is(#obs,#obs-aneks) .s-link{stroke:var(--link)}
:is(#obs,#obs-aneks) .ring{stroke:var(--bg);stroke-width:2}
:is(#obs,#obs-aneks) .hit{fill:transparent;cursor:default}
:is(#obs,#obs-aneks) .hov-row{fill:var(--bg3);opacity:0;transition:opacity .12s}
:is(#obs,#obs-aneks) .row:hover .hov-row{opacity:1}

/* small multiples */
:is(#obs,#obs-aneks) .sm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 22px;margin-top:6px}
:is(#obs,#obs-aneks) .sm figure{min-width:0}
:is(#obs,#obs-aneks) .sm .st{display:block;border-top:1px solid var(--rule);padding-top:10px}
:is(#obs,#obs-aneks) .sm h3{margin:0;font:400 clamp(20px,1.7vw,26px)/1.02 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
:is(#obs,#obs-aneks) .sm .rt{display:block;margin-top:7px;font:500 12px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#obs,#obs-aneks) .sm figure.hi .st{border-top:2px solid var(--mark)}
:is(#obs,#obs-aneks) .sm figure.hi h3{color:var(--ink)}
@media (max-width:1100px){:is(#obs,#obs-aneks) .sm{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){:is(#obs,#obs-aneks) .sm{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){:is(#obs,#obs-aneks) .sm{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* rok po roku */
:is(#obs,#obs-aneks) .sm figure,:is(#obs,#obs-aneks) .yy figure{display:flex;flex-direction:column}
:is(#obs,#obs-aneks) .sm figure>svg,:is(#obs,#obs-aneks) .yy figure>svg{margin-top:auto}
:is(#obs,#obs-aneks) .forms{margin:6px 0 8px;font:400 10.5px/1.45 var(--mono);letter-spacing:.02em;color:var(--muted);overflow-wrap:anywhere}
:is(#obs,#obs-aneks) .yy-g{margin-top:48px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
:is(#obs,#obs-aneks) .yy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 26px;margin-top:12px}
:is(#obs,#obs-aneks) .yy figure{min-width:0}
:is(#obs,#obs-aneks) .yy .yt{display:block;border-top:1px solid var(--rule);padding-top:10px}
:is(#obs,#obs-aneks) .yy h4{margin:0;font:400 clamp(21px,1.9vw,28px)/1.02 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
:is(#obs,#obs-aneks) .yy .yv{display:block;margin-top:7px;font:400 12px var(--mono);letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#obs,#obs-aneks) .legend i.ln{width:16px;height:2px;border-radius:0;background:var(--mark)}
:is(#obs,#obs-aneks) .legend i.avg{width:16px;height:2px;border-radius:0;background:var(--lo);opacity:.6}
:is(#obs,#obs-aneks) .legend i.rule{width:1px;height:12px;border-radius:0;background:var(--faint)}
:is(#obs,#obs-aneks) .yy-note{margin-top:10px;font:400 11px/1.55 var(--mono);color:var(--muted)}
:is(#obs,#obs-aneks) .cnt{margin-top:8px;max-width:90ch}
:is(#obs,#obs-aneks) .cnt dt{margin-top:10px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
:is(#obs,#obs-aneks) .cnt dd{margin:2px 0 0;font:400 11.5px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}
:is(#obs,#obs-aneks) .cnt .ex{margin-top:14px;font:400 11.5px/1.6 var(--mono);color:var(--muted)}

/* money company */
:is(#obs,#obs-aneks) .row.sel .hov-row{opacity:1}
:is(#obs,#obs-aneks) .axt{margin-top:6px;max-width:60ch;font:400 11px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
:is(#obs,#obs-aneks) .legend i.tick{width:2px;height:12px;border-radius:0;background:var(--faint);opacity:.7}
:is(#obs,#obs-aneks) .legend i.seg{width:16px;height:10px;border-radius:2px;background:var(--g1)}
:is(#obs,#obs-aneks) .legend i.seg.hi{background:var(--mark)}

/* places table */
:is(#obs,#obs-aneks) .pt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;max-width:720px;margin-top:30px}
:is(#obs,#obs-aneks) .pt h3{padding-bottom:6px;border-bottom:2px solid var(--ink);font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:is(#obs,#obs-aneks) .pt li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:32px;border-bottom:1px solid var(--rule);font-size:15px}
:is(#obs,#obs-aneks) .pt li .k{width:10px;height:10px;border-radius:50%}
:is(#obs,#obs-aneks) .pt li .k.pl{background:var(--mark)}
:is(#obs,#obs-aneks) .pt li .k.ab{border:2px solid var(--lo)}
:is(#obs,#obs-aneks) .pl-band{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
:is(#obs,#obs-aneks) .pl-val{font-size:15px;font-weight:600}
:is(#obs,#obs-aneks) .pt li .v{font:400 12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* race */
:is(#obs,#obs-aneks) .ctl{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
:is(#obs,#obs-aneks) .ctl button{min-height:40px;min-width:92px;padding:0 14px;background:var(--loud);color:var(--onloud);border:0;cursor:pointer;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
:is(#obs,#obs-aneks) .ctl input[type=range]{flex:1 1 200px;min-width:0;accent-color:var(--mark);height:28px}
:is(#obs,#obs-aneks) .ctl .st{font:400 11px var(--mono);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#obs,#obs-aneks) .yr{font-family:var(--display);fill:var(--faint);opacity:.55}
/* dumbbell labels sit on gridlines on a phone; a background-coloured halo keeps them legible */
#obs :is(#c-meme,#c-mc) text{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
#obs :is(#c-meme,#c-mc) .row:is(:hover,.sel) text{stroke:var(--bg3)}
:is(#obs,#obs-aneks) .bar-v{font:400 11.5px var(--mono);fill:var(--muted);font-variant-numeric:tabular-nums}

/* tables */
:is(#obs,#obs-aneks) details.tbl{margin-top:18px}
:is(#obs,#obs-aneks) details.tbl+details.tbl{margin-top:8px}
:is(#obs,#obs-aneks) details.tbl summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:1px solid var(--ink);cursor:pointer;list-style:none;
  font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
:is(#obs,#obs-aneks) details.tbl summary::-webkit-details-marker{display:none}
:is(#obs,#obs-aneks) details.tbl summary::after{content:'↓';font-size:13px;transition:transform .15s}
:is(#obs,#obs-aneks) details.tbl[open] summary::after{transform:rotate(180deg)}
:is(#obs,#obs-aneks) details.tbl summary:hover{background:var(--ink);color:var(--bg)}
:is(#obs,#obs-aneks) .tw{overflow-x:auto;max-width:100%;margin-top:6px}
:is(#obs,#obs-aneks) .tw table{border-collapse:collapse;font:400 12px var(--mono);font-variant-numeric:tabular-nums}
:is(#obs,#obs-aneks) .tw th,:is(#obs,#obs-aneks) .tw td{padding:6px 12px 6px 0;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
:is(#obs,#obs-aneks) .tw th{font-weight:500;color:var(--muted)}
:is(#obs,#obs-aneks) .tw th:first-child,:is(#obs,#obs-aneks) .tw td:first-child{text-align:left}

/* aneks: płyty roku */
:is(#obs,#obs-aneks) #aneks-plyty{margin-top:56px}
:is(#obs,#obs-aneks) #aneks-plyty h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:.005em}
:is(#obs,#obs-aneks) #aneks-plyty h4{margin-top:34px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
:is(#obs,#obs-aneks) .pl-notes{max-width:66ch;margin:18px 0 0;padding:0;list-style:none}
:is(#obs,#obs-aneks) .pl-notes li{position:relative;padding:10px 0 10px 18px;border-top:1px solid var(--rule)}
:is(#obs,#obs-aneks) .pl-notes li::before{content:"";position:absolute;left:0;top:21px;width:6px;height:6px;border-radius:50%;background:var(--lo)}
:is(#obs,#obs-aneks) .pl-notes b{font-weight:600}
:is(#obs,#obs-aneks) #aneks-plyty details.tbl{margin-top:24px}
:is(#obs,#obs-aneks) details.plyty{margin-top:18px}
:is(#obs,#obs-aneks) details.plyty>summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:1px solid var(--ink);cursor:pointer;list-style:none;
  font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
:is(#obs,#obs-aneks) details.plyty>summary::-webkit-details-marker{display:none}
:is(#obs,#obs-aneks) details.plyty>summary::after{content:'↓';font-size:13px;transition:transform .15s}
:is(#obs,#obs-aneks) details.plyty[open]>summary::after{transform:rotate(180deg)}
:is(#obs,#obs-aneks) details.plyty>summary:hover{background:var(--ink);color:var(--bg)}
:is(#obs,#obs-aneks) details.plyty .txt{margin-top:22px}
@media (min-width:1100px){
  :is(#obs,#obs-aneks) .pl-cols{columns:2;column-gap:56px;margin-top:8px}
  :is(#obs,#obs-aneks) .pl-cols .txt{max-width:none}
  :is(#obs,#obs-aneks) .pl-cols .txt p,:is(#obs,#obs-aneks) .pl-cols .pl-notes li,:is(#obs,#obs-aneks) .pl-cols h4{break-inside:avoid}
  :is(#obs,#obs-aneks) .pl-cols .pl-notes{max-width:none}
}
:is(#obs,#obs-aneks) #aneks-plyty .tw table{width:100%}
:is(#obs,#obs-aneks) #aneks-plyty .tw td{vertical-align:top;text-align:left;white-space:normal;line-height:1.5}
:is(#obs,#obs-aneks) #aneks-plyty .tw th{text-align:left}
:is(#obs,#obs-aneks) #aneks-plyty .tw td:nth-child(2){min-width:180px}
:is(#obs,#obs-aneks) #aneks-plyty .tw td:nth-child(3),:is(#obs,#obs-aneks) #aneks-plyty .tw td:nth-child(4){min-width:220px}

/* tooltip */
#obs-tip{position:fixed;left:0;top:0;z-index:120;pointer-events:none;min-width:150px;max-width:250px;padding:10px 12px;background:var(--ink);color:var(--bg);
  font-size:13px;line-height:1.4;opacity:0;transition:opacity .12s}
#obs-tip.on{opacity:1}
#obs-tip.wide{max-width:min(380px,calc(100vw - 16px))}
#obs-tip span.sh{margin-top:7px;opacity:.65;text-transform:uppercase;letter-spacing:.06em}
#obs-tip b{display:block;font-family:var(--display);font-weight:400;font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
#obs-tip span{display:block;font:400 11px/1.55 var(--mono);letter-spacing:.03em}

#obs .yy-g:first-child{margin-top:0}

/* scroll-linked wipe on 05: the edge and its readout */
#obs .pl-edge line{stroke:var(--ink);stroke-width:1.5}
#obs .pl-edge text{font:600 15px var(--sans);fill:var(--ink);text-anchor:end}

@media (max-width:1099px){
  #obs .bd>.bd-t{margin-top:clamp(28px,4vw,44px)}
  #obs .bd.bd-up>.bd-t{margin:clamp(24px,4vw,36px) 0 0;order:0}
  #obs .bd.bd-up{display:flex;flex-direction:column}
  #obs .bd.bd-up>.ttl{order:-2}
  #obs .bd.bd-up>.bd-t{order:-1}
  #obs .bd-t .fig.meme{max-width:560px}
  #obs .bd.bd-m{display:flex;flex-direction:column}
  #obs .bd.bd-m>.ttl{order:-2}
  #obs .bd.bd-m>.bd-t{display:contents}
  #obs .bd.bd-m>.bd-t>.meme{order:-1;margin-top:clamp(24px,4vw,36px)}
  #obs .bd.bd-m>.bd-t>.vd{margin-top:clamp(28px,4vw,44px)}
}
@media (max-width:760px){
  #obs{--sec-pad:88px;--gap-bd:44px}
  #obs .hero-t{--ttl:min(56px,calc((100vw - 32px) / 6.3))}
  #obs .hero{padding-top:64px}
  #obs .big>span{margin-top:12px}
  :is(#obs,#obs-aneks) .sm{gap:22px 16px}
  :is(#obs,#obs-aneks) .yy{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  :is(#obs,#obs-aneks) .pt{grid-template-columns:minmax(0,1fr);gap:24px}
  #obs .yy-g{margin-top:36px}
}
#obs .yy-ax{display:none}
/* phone: years get the full width; the thirteen objects become rows (name left, sparkline right) */
@media (max-width:600px){
  #obs #c-years .yy{grid-template-columns:minmax(0,1fr);gap:30px}
  #obs #c-obj .sm figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
  #obs #c-obj .sm figure.hi{border-top:2px solid var(--mark)}
  #obs #c-obj .sm .st{grid-column:1;border-top:0;padding-top:0}
  #obs #c-obj .sm h3{line-height:1.12}
  #obs #c-obj .sm .forms{grid-column:1;margin:6px 0 0}
  #obs #c-obj .sm figure>svg{grid-column:2;grid-row:1/span 2;margin-top:0;align-self:end}
}
/* objects (A2): compact rows (name, factor, words, sparkline) at every width. From 900px Rośnie and Znika stand side by side
   and Stoi runs under both; every row takes two tracks of one shared grid (title line, words line), so a wrapped title
   never shifts its neighbour's factor, words or plot. obserwacje.js sets each cell through --r and --c. */
#obs #c-obj .sm{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:0}
#obs #c-obj .yy-g{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:clamp(40px,4.4vw,60px);padding:0 0 12px;border-top:0;
  font:400 clamp(22px,2.1vw,30px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--mark)}
#obs #c-obj .yy-g:first-child{margin-top:0}
#obs #c-obj .yy-ax{display:inline;font:400 11px var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted)}
@media (min-width:601px){
  #obs #c-obj .sm figure{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:14px 0 12px;border-top:1px solid var(--rule)}
  #obs #c-obj .sm figure.hi{border-top:2px solid var(--mark)}
  #obs #c-obj .sm .st{display:contents}
  #obs #c-obj .sm h3{grid-column:1;grid-row:1;align-self:baseline;font-size:clamp(19px,1.5vw,23px);line-height:1.06}
  #obs #c-obj .sm .rt{grid-column:2;grid-row:1;align-self:baseline;margin:0;text-align:right}
  #obs #c-obj .sm .forms{grid-column:1/3;grid-row:2;margin:6px 0 0}
  #obs #c-obj .sm figure>svg{grid-column:3;grid-row:1/span 2;margin:0;align-self:end}
}
@media (min-width:900px){
  #obs #c-obj .sm{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,88px)}
  #obs #c-obj .sm>.yy-g{grid-row:var(--r);grid-column:var(--c)}
  #obs #c-obj .sm>.yy-g[data-g="znika"]{margin-top:0}
  #obs #c-obj .sm>figure{grid-row:var(--r)/span 2;grid-column:var(--c);grid-template-rows:subgrid}
}

/* motion. Pre-states exist only while obserwacje.js runs with motion allowed (html.obs-m);
   .m-in is the entered state, set once per element by the script. */
@media (prefers-reduced-motion:no-preference){
  html.obs-m #obs .kick::before{transform:scaleX(0);transition:transform 1.1s var(--e-out)}
  html.obs-m #obs .kick .mono{opacity:0;transition:opacity .5s linear .3s}
  html.obs-m #obs .kick.m-in::before{transform:none}
  html.obs-m #obs .kick.m-in .mono{opacity:1}
  html.obs-m #obs .kick-side .disc{transform:rotate(-200deg);transition:transform 1.2s var(--e-out)}
  html.obs-m #obs .kick-side.m-in .disc{transform:none}

  html.obs-m #obs .ttl .l>span{transform:translateY(1.75em);transition:transform 1.05s var(--e-out)}
  html.obs-m #obs .ttl .l:nth-child(2)>span{transition-delay:.09s}
  html.obs-m #obs .ttl .l:nth-child(3)>span{transition-delay:.18s}
  html.obs-m #obs .ttl.m-in .l>span{transform:none}

  html.obs-m #obs :is(.txt,.stand,.sub-h){opacity:0;transition:opacity .55s linear .12s}
  html.obs-m #obs :is(.txt,.stand,.sub-h).m-in{opacity:1}

  html.obs-m #obs .punch{opacity:0;transition:opacity .45s linear}
  html.obs-m #obs .punch .x{--sw:0%;transition:--sw .8s cubic-bezier(.65,0,.25,1) .55s}
  html.obs-m #obs .punch.m-in{opacity:1}
  html.obs-m #obs .punch.m-in .x{--sw:100%}

  html.obs-m #obs .big{opacity:0;transition:opacity .35s linear}
  html.obs-m #obs .big.m-in{opacity:1}
  html.obs-m #obs .big .ar{transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e-out) .4s}
  html.obs-m #obs .big.m-in .ar{transform:none}
  html.obs-m #obs .big .rise>span{transform:translateY(1.15em);transition:transform 1.1s var(--e-out) .1s}
  html.obs-m #obs .big.m-in .rise>span{transform:none}
  html.obs-m #obs .big>span{opacity:0;transition:opacity .5s linear .6s}
  html.obs-m #obs .big.m-in>span{opacity:1}

  html.obs-m #obs .meme img{clip-path:inset(0 0 100% 0);transform:scale(1.06);transition:clip-path 1.15s cubic-bezier(.7,0,.2,1),transform 1.7s var(--e-out)}
  html.obs-m #obs .meme.m-in img{clip-path:inset(0);transform:none}

  html.obs-m #obs :is(#c-meme,#c-mc,#c-pro,#c-mtld):not(.m-in){opacity:0}
  html.obs-m #obs :is(.yy,.sm) figure{opacity:0;transform:translateY(14px);transition:opacity .5s linear calc(var(--k,0) * 90ms),transform .9s var(--e-out) calc(var(--k,0) * 90ms)}
  html.obs-m #obs :is(.yy,.sm) figure.m-in{opacity:1;transform:none}
  html.obs-m #obs .pt li{opacity:0;transform:translateY(8px);transition:opacity .4s linear calc(var(--k,0) * 45ms),transform .7s var(--e-out) calc(var(--k,0) * 45ms)}
  html.obs-m #obs .pt-w.m-in li{opacity:1;transform:none}
}
@media print{html.obs-m #obs *{transition:none!important}}

/* A3 zaimki (desktop): the chart stands right of the title and text, as wide as the title leaves; the verdict runs under the
   quote carousel, punch left, number right. */
@media (min-width:1100px){
  #obs #zaimki .bd:not(.bd-v){grid-template-columns:max-content clamp(40px,4vw,72px) minmax(0,1fr);grid-template-rows:auto 1fr}
  #obs #zaimki .ttl .l>span{white-space:nowrap}
  #obs #zaimki .bd>.ttl{grid-column:1;grid-row:1}
  #obs #zaimki .bd>.txt{grid-column:1;grid-row:2;width:0;min-width:100%;max-width:none}
  #obs #zaimki .bd>.fig{grid-column:3;grid-row:1/3;align-self:start;margin-top:0}
  #obs #zaimki .bd-v{display:block}
  #obs #zaimki .bd-v>.vd{display:grid;grid-template-columns:var(--grid);align-items:center}
  #obs #zaimki .vd>.punch{grid-column:1;max-width:26ch}
  #obs #zaimki .vd>.big{grid-column:3;margin-top:0}
}

/* =====================================================================
   WERS: one system for every lyric line on the page, the motto and the quote carousels (A3, A4, A6).
   Up to 2014 = outline, from 2015 = fill, the charts' open and filled dots carried into type: the card, the year numeral
   and the key-word box switch together, so the era reads by fill and shape, never by hue.
   Without the script a track is a plain scroll-snap list. obserwacje.js (armQuotes) builds each head (counter, segments,
   controls), runs the auto-advance and puts a 7-inch on every card whose song has a preview.
   ===================================================================== */
#obs{--w-line:500 clamp(19px,1.5vw,21px)/1.36 var(--sans)}

/* key word: one box, two fills, drawn from the left by --sw */
#obs :is(.qc-q,.motto) blockquote p{margin:0;isolation:isolate}
#obs :is(.qc-q,.motto) b{position:relative;font-weight:700;font-style:normal;white-space:nowrap;padding:.03em .2em .05em;margin:0 .02em}
#obs :is(.qc-q,.motto) b::before{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:var(--sw,100%);box-shadow:inset 0 0 0 2px var(--mark)}
#obs .qc-q.new b::before{box-shadow:none;background:var(--onloud)}
#obs .qc-q.new b{color:var(--loud)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #obs .qc-q.new b{color:transparent;background:linear-gradient(var(--loud),var(--loud)) 0 0/var(--sw,100%) 100% no-repeat,linear-gradient(var(--onloud),var(--onloud));-webkit-background-clip:text;background-clip:text}
}

/* card: year and topic, the line, the credit (artist in the poster face over the song) */
#obs .qc{margin-top:var(--gap-bd)}
#obs .qc+.bd{margin-top:var(--gap-bd)}
#obs .qc-q{--qc-fg:var(--ink);--qc-bg:var(--bg);--qc-ring:var(--lo);
  position:relative;display:flex;flex-direction:column;gap:14px;width:100%;margin:0;padding:18px 20px;border:2px solid var(--lo);background:var(--qc-bg);color:var(--qc-fg);transition:box-shadow .28s var(--e-out)}
#obs .qc-q.new{--qc-fg:var(--onloud);--qc-bg:var(--loud);--qc-ring:transparent;border-color:var(--loud)}
#obs .qc-tag{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
#obs .qc-y{font:400 clamp(34px,2.9vw,42px)/.84 var(--display);letter-spacing:.01em}
#obs .qc-q.old .qc-y{color:transparent;-webkit-text-stroke:1.5px var(--qc-fg)}
#obs .qc-t{min-width:0;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--muted)}
#obs .qc-q.new .qc-t{color:inherit}
#obs .qc-q blockquote{flex:1 0 auto;margin:0 0 4px;font:var(--w-line);letter-spacing:-.003em;text-wrap:pretty}
#obs .qc-q figcaption{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-height:40px}
#obs .qc-q.can-play figcaption{padding-right:56px}
#obs .qc-a{font:400 17px/1 var(--display);letter-spacing:.025em;text-transform:uppercase}
#obs .qc-q cite{font:500 13px/1.3 var(--sans);font-style:normal}
/* current: the card the carousel stands on gets the page's hard offset shadow */
#obs .qc-c.is-on .qc-q{box-shadow:6px 6px 0 var(--ink)}

/* head: label, counter and controls, then one segment per card with a gap where 2015 starts.
   The current segment fills over the timer while the carousel counts and shows full while it holds. */
#obs .qc-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:18px;padding-top:12px;border-top:1px solid var(--rule)}
#obs .qc-k{margin:0;color:var(--muted)}
#obs .qc-ctl{display:flex;align-items:center;gap:8px;margin-left:auto}
#obs .qc-ctl[hidden],#obs .qc-ctl [hidden]{display:none}
#obs .qc-n{min-width:62px;margin-right:4px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
#obs .qc-n b{font-weight:500;color:var(--ink)}
#obs .qc-ctl button{min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
#obs .qc-ctl :is(.qc-prev,.qc-next){font:400 18px/1 var(--sans);letter-spacing:0}
#obs .qc-ctl button:hover{background:var(--ink);color:var(--bg)}
#obs .qc :is(button,.qc-tr):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){#obs .qc-ctl{flex:1 0 100%} #obs .qc-n{min-width:0;margin-right:auto;text-align:left}}
#obs .qc-seg{display:flex;align-items:center;gap:3px;flex:1 0 100%;height:8px}
#obs .qc-seg i{position:relative;flex:1;height:2px;background:var(--faint)}
#obs .qc-seg i.e15{margin-left:12px}
#obs .qc-seg i.is-on{height:4px}
#obs .qc-seg i.is-on::after{content:'';position:absolute;inset:0;background:var(--mark);transform-origin:0 50%}

/* track: the right and bottom padding leave room for the offset shadow */
#obs .qc-tr{position:relative;display:flex;gap:clamp(12px,1.4vw,18px);margin:0;padding:0 8px 18px 0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
#obs .qc-c{display:flex;flex:0 0 min(84%,380px);min-width:0;scroll-snap-align:start}
#obs .qc-c.qc-pair{flex-basis:min(92%,620px)}
#obs .qc-tr:has(>.qc-pair){gap:clamp(20px,2.8vw,40px)}
#obs .qc-pw{display:flex;flex-direction:column;gap:10px;width:100%}
#obs .qc-ctx{margin:0;padding-top:10px;border-top:2px solid var(--lo);color:var(--ink)}
#obs .qc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
@media (max-width:760px){#obs .qc-two{grid-template-columns:minmax(0,1fr)}}

/* play: a 7-inch on the card, and the whole card is its button. ▶ at rest, ❚❚ while playing; the label turns at 33⅓ rpm
   and the ring is the share of the preview played (--p, set by obserwacje.js from the page player) */
#obs .qc-pl{position:absolute;inset:-2px;z-index:1;margin:0;padding:0;border:0;background:none;cursor:pointer;color:var(--qc-fg)}
#obs .qc .qc-pl:focus-visible{outline:2px solid var(--qc-fg);outline-offset:-8px}
#obs .qc-disc{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;
  background:conic-gradient(from 200deg,transparent 0 8%,rgba(255,255,255,.15) 13%,transparent 19% 58%,rgba(255,255,255,.09) 63%,transparent 69%),repeating-radial-gradient(circle,#1f1f1c 0 1px,#0b0b0a 1.3px 2.3px);
  box-shadow:0 0 0 1.5px var(--qc-ring);transition:transform .2s var(--e-out)}
#obs .qc-disc i{position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle at 50% 16%,rgba(14,14,12,.6) 0 1.3px,transparent 1.8px),var(--loud)}
#obs .qc-disc::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:8px;margin:-4px 0 0 -2.5px;background:var(--onloud);clip-path:polygon(0 0,100% 50%,0 100%)}
#obs .qc-disc::before{content:'';position:absolute;inset:-5px;border-radius:50%;opacity:0;
  background:conic-gradient(var(--qc-fg) calc(var(--p,0) * 1turn),color-mix(in srgb,var(--qc-fg) 18%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
#obs :is(.qc-q,.motto).on .qc-disc::before{opacity:1}
#obs :is(.qc-q,.motto).on .qc-disc::after{width:7px;margin-left:-3.5px;clip-path:none;background:linear-gradient(90deg,var(--onloud) 0 2.5px,transparent 2.5px 4.5px,var(--onloud) 4.5px)}
#obs :is(.qc-pl,.m-pl):hover .qc-disc{transform:scale(1.07)}

/* motto: the first lyric on the page, set as the system's opening */
#obs .motto{--qc-fg:var(--ink);--qc-ring:var(--lo);position:relative;margin:0;max-width:440px}
#obs .motto .m-q{display:block;height:.26em;margin:0 0 .16em -.027em;font:400 clamp(88px,7.4vw,112px)/0 var(--display);translate:0 -.28em;color:var(--mark);-webkit-user-select:none;user-select:none}
#obs .motto blockquote{margin:0;font:500 clamp(20px,1.75vw,24px)/1.38 var(--sans);letter-spacing:-.006em;color:var(--ink);text-wrap:balance}
#obs .motto figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
#obs .motto .m-a{font:400 18px/1 var(--display);letter-spacing:.025em;text-transform:uppercase;color:var(--ink)}
#obs .motto cite{font:500 14px/1.3 var(--sans);font-style:normal;color:var(--ink)}
#obs .motto .m-pl{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto;padding:0;border:0;background:none;cursor:pointer;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
#obs .motto .m-pl .qc-disc{position:relative;right:auto;bottom:auto;flex:none;width:32px;height:32px}
#obs .motto .m-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* motion: pre-states only while obserwacje.js runs with motion allowed (html.obs-m) */
@media (prefers-reduced-motion:no-preference){
  html.obs-m #obs .qc{opacity:0;transform:translateY(18px);transition:opacity .5s linear,transform .9s var(--e-out)}
  html.obs-m #obs .qc.m-in{opacity:1;transform:none}
  html.obs-m #obs .qc.ticking .qc-seg i.is-on::after{animation:w-fill var(--qc-ms,4500ms) linear both}
  html.obs-m #obs .qc-c.is-on .qc-q b{animation:w-kw .42s var(--e-out) .08s both}
  html.obs-m #obs :is(.qc-q,.motto).on .qc-disc i{animation:w-spin 1.8s linear infinite}
  /* motto: the mark drops in, the words land on the beat, the box draws round „słowa” as it lands, the credit comes last */
  html.obs-m #obs .motto .m-q{opacity:0;transform:translateY(-.06em) scale(.7);transform-origin:10% 85%;transition:opacity .2s linear,transform .55s cubic-bezier(.3,1.5,.5,1)}
  html.obs-m #obs .motto .w{display:inline-block;opacity:0;transform:translateY(-.36em);transition:opacity .14s linear var(--d),transform .36s cubic-bezier(.3,1.6,.5,1) var(--d)}
  html.obs-m #obs .motto b.w{--sw:0%;transition:opacity .14s linear var(--d),transform .36s cubic-bezier(.3,1.6,.5,1) var(--d),--sw .42s var(--e-out) calc(var(--d) + .24s)}
  html.obs-m #obs .motto figcaption{opacity:0;transition:opacity .4s linear var(--m-end,2.4s)}
  html.obs-m #obs .motto.m-in :is(.m-q,.w){opacity:1;transform:none}
  html.obs-m #obs .motto.m-in b.w{--sw:100%}
  html.obs-m #obs .motto.m-in figcaption{opacity:1}
  html.obs-m #obs .motto.w-re :is(.m-q,.w){transition:none;opacity:0}
  html.obs-m #obs .motto.w-re b.w{--sw:0%}
}
@keyframes w-fill{from{transform:scaleX(0)}}
@keyframes w-kw{from{--sw:0%}to{--sw:100%}}
@keyframes w-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){
  #obs :is(.qc,.motto),#obs :is(.qc,.motto) *,#obs :is(.qc,.motto) *::before,#obs :is(.qc,.motto) *::after{transition:none!important;animation:none!important}
}
/* print: every card, no controls. The key word keeps a drawn box and the text colour of its line, so it prints with or without background graphics */
@media print{
  #obs .qc-tr{flex-wrap:wrap;overflow:visible}
  #obs :is(.qc-ctl,.qc-seg,.qc-pl),#obs .motto .m-pl{display:none}
  #obs .qc-q.can-play figcaption{padding-right:0}
  #obs .qc-c.is-on .qc-q{box-shadow:none}
  #obs :is(.qc-q,.motto) b::before,#obs .qc-q.new b::before{box-sizing:border-box;width:100%;background:none;box-shadow:none;border:2px solid currentColor}
  #obs .qc-q.new b{color:inherit;background:none}
  #obs .motto :is(.m-q,.w,figcaption){opacity:1!important;transform:none!important}
  #obs .motto b.w{--sw:100%}
}

/* otwarcie: full-bleed opening above #obs (outside the #obs scope, always dark over the video).
   The graffiti gets the height the subtitle and the action row leave: --otw-rest. */
#otwarcie{--otw-h:clamp(540px,100svh - var(--mast-h,64px),1100px);--otw-rest:300px;
  position:relative;height:var(--otw-h);overflow:hidden;isolation:isolate;
  background:#0e0e0c url(/ranking/2026/obserwacje/otwarcie/tlo.webp) center/cover;color:#f4f1e6}
#otwarcie .otw-bg{position:absolute;inset:0;z-index:-1}
#otwarcie .otw-v{display:block;width:100%;height:100%;object-fit:cover}
#otwarcie .otw-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(14,14,12,.25),rgba(14,14,12,.74) 80%),linear-gradient(to bottom,rgba(14,14,12,0) 60%,rgba(14,14,12,.9))}
#otwarcie .otw-in{height:100%;width:var(--shell,min(100% - 32px,1320px));margin-inline:auto;padding:28px 0 40px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,28px);text-align:center}
#otwarcie .otw-graf{align-self:stretch;margin:0;line-height:0}
#otwarcie .otw-gsvg{display:block;margin-inline:auto;overflow:visible;height:auto;width:min(100%,1080px,calc((var(--otw-h) - var(--otw-rest)) * var(--otw-ar,1.58)))}
#otwarcie .otw-h{margin:0;font:400 clamp(22px,2.7vw,40px)/1.05 var(--display,'Anton',Impact,sans-serif);letter-spacing:.03em;text-transform:uppercase;color:#f4f1e6;text-wrap:balance}
#otwarcie .otw-h span{color:var(--loud,#f2e14c)}
#otwarcie .otw-act{margin-top:clamp(4px,1.2vh,14px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px}
#otwarcie .otw-go{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:0 30px 0 24px;border:0;cursor:pointer;
  background:var(--loud,#f2e14c);color:#0e0e0c;box-shadow:6px 6px 0 #dc143c;
  font:400 clamp(26px,3vw,36px)/1 var(--display,'Anton',Impact,sans-serif);letter-spacing:.02em;text-transform:uppercase}
/* the button's 7-inch: the same disc as every lyric on the page. ▶ until Hades plays, ❚❚ while the label turns */
#otwarcie .otw-ic{position:relative;flex:none;width:1.2em;height:1.2em;border-radius:50%;
  background:conic-gradient(from 200deg,transparent 0 8%,rgba(255,255,255,.15) 13%,transparent 19% 58%,rgba(255,255,255,.09) 63%,transparent 69%),repeating-radial-gradient(circle,#1f1f1c 0 1px,#0b0b0a 1.3px 2.3px)}
#otwarcie .otw-ic::after{content:'';position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle at 50% 16%,rgba(14,14,12,.6) 0 1.4px,transparent 1.9px),var(--loud,#f2e14c)}
#otwarcie .otw-ic::before{content:'';position:absolute;z-index:1;left:50%;top:50%;width:.19em;height:.22em;margin:-.11em 0 0 -.07em;background:#0e0e0c;clip-path:polygon(0 0,100% 50%,0 100%)}
#otwarcie[data-state="playing"] .otw-ic::before{margin-left:-.095em;clip-path:none;background:linear-gradient(90deg,#0e0e0c 0 34%,transparent 34% 66%,#0e0e0c 66%)}
@media (prefers-reduced-motion:no-preference){html.obs-m #otwarcie[data-state="playing"] .otw-ic::after{animation:w-spin 1.8s linear infinite}}
#otwarcie .otw-go:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #dc143c}
#otwarcie .otw-go:focus-visible,#otwarcie .otw-down:focus-visible{outline:3px solid #f4f1e6;outline-offset:5px}
#otwarcie .otw-down{display:inline-flex;align-items:center;min-height:44px;color:#cfccbf;font:400 11px/1.2 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
#otwarcie .otw-down:hover{color:#f4f1e6}
#otwarcie[data-state="playing"] .otw-down,#otwarcie[data-state="paused"] .otw-down{display:none}
@media (prefers-reduced-motion:no-preference){
  #otwarcie .otwg-ink{animation:otwGraf var(--d,.8s) linear var(--at,.15s) both}
  #otwarcie .otw-h{animation:otwUp .8s var(--e-out,cubic-bezier(.2,.8,.2,1)) 1.2s both}
  #otwarcie .otw-act{animation:otwUp .8s var(--e-out,cubic-bezier(.2,.8,.2,1)) 1.4s both}
  #otwarcie[data-state="idle"] .otw-go{animation:otwBounce 1.9s 2.6s infinite}
  #otwarcie[data-state="idle"] .otw-go::after{content:'';position:absolute;inset:0;border:2px solid var(--loud,#f2e14c);pointer-events:none;opacity:0;animation:otwRing 1.9s 2.6s infinite}
  #otwarcie .otw-go:hover,#otwarcie .otw-go:focus-visible{animation-play-state:paused}
}
@keyframes otwGraf{from{stroke-dashoffset:1001}to{stroke-dashoffset:0}}
@keyframes otwUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes otwBounce{0%,55%,100%{transform:translateY(0)}64%{transform:translateY(-16px)}72%{transform:translateY(0)}79%{transform:translateY(-7px)}86%{transform:translateY(0)}}
@keyframes otwRing{0%,55%{opacity:0;transform:none}64%{opacity:.9;transform:none}100%{opacity:0;transform:scale(1.18,1.5)}}
@media (max-width:760px){
  #otwarcie{--otw-rest:320px}
  #otwarcie .otw-in{padding:20px 0 76px}
  #otwarcie .otw-h{font-size:clamp(18px,6vw,28px)}
}

/* otwarcie gate (obserwacje.js): until a choice is made, both choices grow with the reader's push.
   Only scale and paint change, never layout: .otw-down keeps its button box (padding, a transparent border) from the start. */
#otwarcie .otw-act{position:relative}
#otwarcie .otw-down{gap:.55em;padding:0 16px;border:2px solid transparent;transition:border-color .3s linear,background-color .3s linear,color .3s linear,text-decoration-color .3s linear}
#otwarcie[data-gx="row"] .otw-go{transform-origin:100% 50%}
#otwarcie[data-gx="row"] .otw-down{transform-origin:0 50%}
#otwarcie[data-gx="col"] :is(.otw-go,.otw-down){transform-origin:50% 0}
#otwarcie.g-on .otw-go{box-shadow:calc(6px + 7px * var(--gp,0)) calc(6px + 7px * var(--gp,0)) 0 #dc143c}
#otwarcie.g-on .otw-down{border-color:rgba(244,241,230,.9);background-color:rgba(14,14,12,.55);color:#f4f1e6;text-decoration-color:transparent}
#otwarcie.g-on .otw-down:hover{border-color:var(--loud,#f2e14c)}
#otwarcie .otw-hint{position:absolute;left:50%;top:calc(100% + 20px);width:max-content;max-width:calc(100vw - 32px);margin:0;text-align:center;pointer-events:none;
  font:400 12px/1.3 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.1em;text-transform:uppercase;color:#f4f1e6;
  opacity:0;translate:-50% calc(var(--gdy,0px) + 8px);transition:opacity .45s linear,translate .6s var(--e-out,cubic-bezier(.2,.8,.2,1))}
#otwarcie .otw-hint.on{opacity:1;translate:-50% var(--gdy,0px)}
@media (prefers-reduced-motion:no-preference){
  #otwarcie.g-hot[data-state="idle"] .otw-go::after{animation:otwRingHot .8s linear infinite}
}
@keyframes otwRingHot{from{opacity:.95;transform:none}to{opacity:0;transform:scale(1.2,1.55)}}

/* A7 search: find an artist on the MTLD swarm. The list floats over the plot; the status line explains a miss. */
#mtld .mq{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 24px;margin:0 0 22px}
#mtld .mq[hidden]{display:none}
#mtld .mq-c{flex:0 1 400px;min-width:0}
#mtld .mq-l{display:block;margin:0 0 7px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#mtld .mq-f{position:relative}
#mtld .mq-f input{display:block;width:100%;height:44px;margin:0;padding:0 44px 0 12px;border:1px solid var(--rule);border-radius:0;background:var(--bg);color:var(--ink);font:400 16px/1.2 var(--sans);-webkit-appearance:none;appearance:none;transition:border-color .15s linear}
#mtld .mq-f input::placeholder{color:var(--faint);opacity:1}
#mtld .mq-f input:hover{border-color:var(--muted)}
#mtld .mq-f input:focus{border-color:var(--ink)}
#mtld .mq-f input:focus-visible{outline:2px solid var(--ink);outline-offset:-1px}
#mtld .mq-x{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer}
#mtld .mq-x[hidden]{display:none}
#mtld .mq-x::before,#mtld .mq-x::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;transform:rotate(45deg)}
#mtld .mq-x::after{transform:rotate(-45deg)}
#mtld .mq-x:hover{color:var(--ink)}
#mtld .mq-x:focus-visible{outline-offset:-5px}
#mtld .mq-lb{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:352px;margin:0;padding:4px 0;overflow-y:auto;overscroll-behavior:contain;list-style:none;background:var(--bg2);border:1px solid var(--ink);box-shadow:0 18px 40px -14px rgb(0 0 0 / .5)}
#mtld .mq-lb[hidden]{display:none}
#mtld .mq-o{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;min-height:44px;padding:11px 12px 11px 15px;cursor:pointer;font:400 16px/1.3 var(--sans);color:var(--ink);-webkit-tap-highlight-color:transparent}
#mtld .mq-o mark{background:none;color:inherit;font-weight:700}
#mtld .mq-o .mq-d{font:400 11px/1.4 var(--mono);letter-spacing:.03em;color:var(--muted)}
#mtld .mq-o.off .mq-n{color:var(--muted)}
#mtld .mq-o:hover{background:var(--bg3)}
#mtld .mq-o[aria-selected="true"]{background:var(--bg3);box-shadow:inset 3px 0 0 var(--mark)}
#mtld .mq-st{flex:1 1 220px;margin:0;font:400 12px/20px var(--mono);letter-spacing:.02em;color:var(--muted);text-wrap:pretty}
#mtld .mq-st.vis{padding:12px 0}
#mtld .mq-st b{font-weight:500;color:var(--ink)}
#mtld .mq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* in the plot: the pick gets a ring and a bigger dot (filled or hollow as before), the rest dims; one label */
#mtld g.dots circle{transition:opacity .2s linear}
#mtld svg.mq-on g.dots circle:not(.mq-me){opacity:.42}
#mtld .mq-hov{fill:none;stroke:var(--mark);stroke-width:2}
#mtld .mq-halo{fill:none;stroke:var(--bg);stroke-width:6}
#mtld .mq-ring{fill:none;stroke:var(--mark);stroke-width:2.5}
#mtld .mq-dot{fill:var(--ink)}
#mtld .mq-dot.h{fill:var(--bg);stroke:var(--ink);stroke-width:2}
#mtld .mq-tag{pointer-events:none}
#mtld .mq-tag rect{fill:var(--ink)}
#mtld .mq-tn{font:600 14px var(--sans);fill:var(--bg)}
#mtld .mq-tv{font:400 11px var(--mono);letter-spacing:.02em;fill:var(--bg);opacity:.78}
@media (max-width:600px){
  #mtld .mq-c{flex-basis:100%}
  #mtld .mq-st.vis{padding:4px 0 0}
}
@media (prefers-reduced-motion:reduce){#mtld g.dots circle{transition:none}}
@media print{#mtld .mq{display:none}}

/* A4 figure */
.fg{--fz-d:#a89d85;--fg-r:transparent;--fg-rd:#5d5950;--fg-beat:.667s;overflow:visible}html[data-theme="light"] .fg{--fg-r:#8f8877;--fg-rd:transparent}.fg-0,.fg-2,.fg-4{fill:none;stroke-linecap:round;stroke-dasharray:0 4.2}.fg-0{stroke:var(--fg-r);stroke-width:5.6}.fg-1{fill:url(#fg-fb)}.fg-2{stroke:url(#fg-fb);stroke-width:4.4}.fg-3{fill:url(#fg-fl)}.fg-4{stroke:url(#fg-fl);stroke-width:4.4}.fg-ds{fill:var(--fz-d);opacity:.45}.fg-cr{fill:none;stroke:url(#fg-au);stroke-width:2.4;stroke-linecap:round}.fg-cg{fill:none;stroke:#fff3c8;stroke-width:.75;stroke-dasharray:1.1 2.2;opacity:.8}.fg-bl{fill:none;stroke:#d9a93a;stroke-width:1.1}.fg-c1{fill:none;stroke:rgba(122,84,16,.6);stroke-width:.9}.fg-c2{fill:none;stroke:rgba(255,241,189,.55);stroke-width:.5}.fg-su{fill:#ebe6d8;stroke:var(--fg-r);stroke-width:.7}.fg-tr{stroke:#bdb6a5;stroke-width:.5}.fg-lg{fill:url(#fg-pt);stroke:var(--fg-rd);stroke-width:.8}.fg-fd{fill:none;stroke:#36342f;stroke-width:.9;stroke-linecap:round}.fg-fn{fill:none;stroke:#6f6a5e;stroke-width:.65;stroke-linecap:round}.fg-hr{fill:url(#fg-hg);stroke:var(--fg-rd);stroke-width:.7}.fg-sh{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.7;stroke-linecap:round}.fg-gl{fill:#fff;opacity:.8;transform:translateX(-12px)}.fg-nz{fill:none;stroke:#77725f;stroke-width:.85;stroke-linecap:round}.fg-tt{stroke:#6b4a0e;stroke-width:.4}.fg-sp{fill:#fffaf0;transform-box:fill-box;transform-origin:center;transform:scale(.75)}.fg-ch{transform-box:view-box;transform-origin:60px 46.6px}.fg-hd{transform-box:view-box;transform-origin:60px 47px;rotate:-3deg}.fg-kk{transform-box:view-box;transform-origin:72.6px 104px;rotate:-5deg}@keyframes fg-swing{14%{transform:rotate(6deg)}32%{transform:rotate(-4.2deg)}50%{transform:rotate(2.6deg)}68%{transform:rotate(-1.4deg)}84%{transform:rotate(.6deg)}}@keyframes fg-bob{25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}@keyframes fg-nod{30%{transform:translateY(1.6px) rotate(2deg)}}@keyframes fg-kick{14%{transform:rotate(-14deg)}40%{transform:none}}@keyframes fg-glint{0%{transform:translateX(-12px)}18%,100%{transform:translateX(44px)}}@keyframes fg-spark{12%{transform:scale(1.35) rotate(45deg)}30%,100%{transform:scale(.75) rotate(90deg)}}#obs .kick .fg{--fg-h:calc(var(--sec-pad) * .931);position:absolute;z-index:1;right:0;top:calc(var(--fg-h) * -0.6875);height:var(--fg-h);width:calc(var(--fg-h) * .75);pointer-events:none;filter:drop-shadow(0 6px 7px rgba(0,0,0,.28))}@media (prefers-reduced-motion:no-preference){html.obs-m #obs .kick .fg{opacity:0;translate:0 -36%;transition:opacity .12s linear .7s,translate .56s cubic-bezier(.3,1.4,.5,1) .7s}html.obs-m #obs .kick.m-in .fg{opacity:1;translate:none}html:not(.rm) #obs .kick.m-in .fg-ch{animation:fg-swing 2.6s ease-out 1.15s}html:not(.rm) #obs .kick.m-in .fg-gl{animation:fg-glint 3.9s cubic-bezier(.5,0,.3,1) 1.6s}html:not(.rm) #obs .kick.m-in .fg-sp{animation:fg-spark 2.3s ease-out 2.1s}html.rap-on:not(.rm) #obs .kick.m-in .fg-hd{animation:fg-nod var(--fg-beat) cubic-bezier(.3,0,.3,1) infinite}html.rap-on:not(.rm) #obs .kick.m-in .fg-ch{animation:fg-bob calc(var(--fg-beat) * 2) ease-in-out infinite}html.rap-on:not(.rm) #obs .kick.m-in .fg-kk{animation:fg-kick calc(var(--fg-beat) * 2) ease-out infinite}html.rap-on:not(.rm) #obs .kick.m-in .fg-gl{animation:fg-glint calc(var(--fg-beat) * 4) cubic-bezier(.5,0,.3,1) infinite}html.rap-on:not(.rm) #obs .kick.m-in .fg-sp{animation:fg-spark calc(var(--fg-beat) * 4) ease-out calc(var(--fg-beat) * 2) infinite}}