/* cashlogic.pl: wizytówka kanału, wariant A „Baner” (wybrany 20.10.2026). Strona jest przedłużeniem banera
   z YouTube i Facebooka: tusz, białe logo, złote hasło na szerokość logo, monety po bokach (prawa twarzą Kesza). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(archivo-latin-ext-wdth-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: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(archivo-latin-wdth-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;
}

:root { --ink: #141414; --white: #ffffff; --gold: #f2b526; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.strona { min-height: 100svh; display: flex; flex-direction: column; }
.hero { position: relative; flex: 1; overflow: hidden; isolation: isolate; display: flex; }
.srodek {
  --logo: clamp(260px, min(27vw, 46vh), 820px);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 7vh, 120px) 16px clamp(28px, 4vh, 64px);
}
.logo { margin: 0; width: var(--logo); }
.logo img { width: 100%; height: auto; }
/* hasło na szerokość logo jak na banerze: 0,1006 szerokości logo to rozmiar, przy którym „o pieniądzach, prosto”
   w Archivo 600 kończy się tam, gdzie tusz logo (zmierzone 20.10.2026; po zmianie hasła zmierzyć od nowa) */
.haslo {
  margin: clamp(10px, 1.3vh, 22px) 0 0;
  color: var(--gold);
  font-weight: 600;
  font-size: calc(var(--logo) * 0.1006);
  line-height: 1;
  white-space: nowrap;
}
.opis {
  margin: clamp(24px, 3.6vh, 48px) 0 0;
  max-width: 30em;
  font-size: clamp(17px, 0.8vw + 0.4vh, 27px);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.74);
  text-wrap: balance;
}
.btn {
  margin-top: clamp(22px, 3.2vh, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(17px, 0.75vw + 0.35vh, 22px);
  text-decoration: none;
}
.btn:hover { background: var(--gold); }

/* najnowszy film: w pliku ukryty, odsłania go Worker (src/worker.js), gdy na kanale jest film */
.film {
  margin-top: clamp(36px, 5.4vh, 80px);
  display: block;
  width: clamp(280px, min(30vw, 30vh * 1.78), 920px);
  color: var(--white);
  text-decoration: none;
  text-align: left;
}
.film img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(10px, 0.9vw, 18px); }
.film:hover img { outline: 3px solid var(--gold); outline-offset: 4px; }
.film-co { display: block; margin-top: 14px; font-size: clamp(14px, 0.4vw + 0.4vh, 18px); color: rgb(255 255 255 / 0.6); }
.film-tytul { display: block; margin-top: 4px; font-weight: 600; font-size: clamp(17px, 0.6vw + 0.5vh, 26px); line-height: 1.25; }

.moneta { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; }
.moneta-l { --d: clamp(240px, 26vw, 860px); width: var(--d); left: calc(var(--d) * -0.24); top: 60%; transform: translateY(-50%); }
.moneta-p { --d: clamp(220px, 22vw, 720px); width: var(--d); right: calc(var(--d) * -0.17); top: 38%; transform: translateY(-50%); }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 18px clamp(16px, 3vw, 64px) calc(18px + env(safe-area-inset-bottom));
  font-size: clamp(14px, 0.35vw + 0.4vh, 18px);
  color: rgb(255 255 255 / 0.6);
}
footer p { margin: 0; }
footer a { color: var(--white); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .linki a + a { margin-left: 20px; }

@media (max-width: 760px) {
  .srodek { --logo: min(78vw, 340px); justify-content: flex-start; padding-top: 176px; }
  .film { width: 100%; }
  .moneta-l { display: none; }
  .moneta-p { --d: 160px; right: -44px; top: 12px; transform: none; }
  footer { flex-direction: column; }
}