/* Reset, typografia, body, .display, .sec-h i sceny */
/* Instrument Sans z własnego serwera (D-017): zmienny WOFF2 z paczki @fontsource-variable/instrument-sans, licencja OFL w assets/fonts/ */
@font-face{font-family:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;
  src:url(../assets/fonts/instrument-sans-latin-ext-standard-normal.woff2) format("woff2-variations"),url(../assets/fonts/instrument-sans-latin-ext-standard-normal.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:"Instrument Sans";font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;
  src:url(../assets/fonts/instrument-sans-latin-standard-normal.woff2) format("woff2-variations"),url(../assets/fonts/instrument-sans-latin-standard-normal.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:"Instrument Sans";font-style:italic;font-display:swap;font-weight:400 700;font-stretch:75% 100%;
  src:url(../assets/fonts/instrument-sans-latin-ext-standard-italic.woff2) format("woff2-variations"),url(../assets/fonts/instrument-sans-latin-ext-standard-italic.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:"Instrument Sans";font-style:italic;font-display:swap;font-weight:400 700;font-stretch:75% 100%;
  src:url(../assets/fonts/instrument-sans-latin-standard-italic.woff2) format("woff2-variations"),url(../assets/fonts/instrument-sans-latin-standard-italic.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}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
/* przy Lenis przewijanie prowadzi skrypt; natywne płynne przewijanie by z nim walczyło */
html.lenis{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* pas pod wycięciem ekranu w kolorze menu */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--night)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
input[type=range]{width:100%;accent-color:var(--blue)}
a,button,summary,label,input,select{touch-action:manipulation}
main:focus{outline:none}

/* symbol logo wstawiony raz na początku <body> */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* link „Przejdź do treści”, widoczny dopiero po Tab */
.skip{position:fixed;z-index:60;left:12px;top:12px;padding:10px 16px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* duże nagłówki: wąska szerokość kroju, ciasne światło */
.display{font-stretch:78%;font-weight:600;letter-spacing:-0.045em;line-height:.92}

/* sceny */
.scene{padding-block:clamp(80px,10vw,136px)}
.scene.mist{background:var(--mist)}
.scene.night{position:relative;isolation:isolate;color:var(--on-night)}
/* tło granatowej sceny jako osobna warstwa: przy przewijaniu rozszerza się z zaokrąglonej karty do pełnej szerokości
   (zmienne --cx, --ct, --cb i --cr ustawia motion.js, T-032); bez JS zmienne mają 0, czyli pełne tło */
.scene.night::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);
  clip-path:inset(var(--ct,0px) var(--cx,0px) var(--cb,0px) var(--cx,0px) round var(--cr,0px))}
.scene.night :focus-visible{outline-color:var(--blue-bright)}
.scene-title{font-size:clamp(36px,5.4vw,76px)}
/* słowa nagłówków jako osobne pudełka: wchodzą po kolei (revealHeadings w motion.js, T-032) */
.scene-title .w{display:inline-block}
.scene-lead{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink-2);max-width:40ch}
.scene.night .scene-lead{color:var(--on-night-2)}

/* nagłówek sceny: tytuł z lewej, tekst wiodący z prawej, wyrównane do dołu */
.sec-h{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.sec-h h2{max-width:16ch}
.sec-h .scene-lead{margin:0}

@media (max-width:980px){
  .sec-h{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}