/* Paleta i krój z aplikacji — strona ma wyglądać jak ta sama rzecz,
   nie jak wizytówka obok niej. Wartości przepisane z src/theme.ts. */
:root {
  --papier: #F4F1E8;
  --kratka: #FFFDF7;
  --pole-definicji: #E7E3D6;
  --linia: #2A2723;
  --druk: #3A362F;
  --atrament: #1E3A64;
  --zolty: #FBF0B8;
  --przygaszony: #8A8477;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--druk);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.srodek { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { font-family: "Architects Daughter", cursive; color: var(--atrament); font-weight: 400; }
h1 { font-size: 3rem; margin: 0 0 .4rem; line-height: 1.1; }
h2 { font-size: 1.9rem; margin: 2.5rem 0 .8rem; }
h3 { font-size: 1.35rem; margin: 1.8rem 0 .5rem; }

a { color: var(--atrament); }
a:hover { text-decoration: none; }

header { padding: 4rem 0 2rem; }
.lead { font-size: 1.2rem; color: var(--druk); margin: 0 0 2rem; }

/* Ramka telefonu rysowana CSS-em, nie obrazkiem: skaluje się bez rozmycia
   i nie trzeba trzymać drugiego pliku. Zrzut ma już w sobie pasek stanu
   i wyspę, więc ramka dokłada wyłącznie obudowę. */
.telefon {
  position: relative;
  width: min(19rem, 72vw);
  margin: 0 0 2.5rem;
  padding: .55rem;
  background: linear-gradient(160deg, #3a3a3e, #17171a 45%, #2c2c30);
  border-radius: 2.9rem;
  box-shadow:
    0 .1rem .3rem rgba(0,0,0,.35),
    0 1.6rem 2.8rem rgba(42,39,35,.28);
}
.telefon img {
  display: block;
  /* `height: auto` jest konieczne: obrazek ma atrybuty width/height (dzięki nim
     przeglądarka rezerwuje miejsce i strona nie skacze przy wczytywaniu),
     ale bez tego wysokość zostałaby na wartości z atrybutu. */
  width: 100%;
  height: auto;
  border-radius: 2.4rem;
  background: var(--papier);
}
/* Wyspa dynamiczna. Zrzut z `simctl` jej nie zawiera — rysuje ją aplikacja
   Simulatora, nie framebuffer urządzenia — więc dokładamy ją tutaj.
   Położenie zmierzone z samego zrzutu: środek paska stanu wypada na 3,72%
   jego wysokości. */
.telefon::after {
  content: "";
  position: absolute;
  top: calc(.55rem + (100% - 1.1rem) * 0.0372 - .8rem);
  left: 50%;
  transform: translateX(-50%);
  width: 5.5rem;
  height: 1.6rem;
  border-radius: .8rem;
  background: #0b0b0d;
}

ul.cechy { list-style: none; padding: 0; }
ul.cechy li { padding: .45rem 0 .45rem 1.6rem; position: relative; }
ul.cechy li::before {
  content: ""; position: absolute; left: .2rem; top: 1.05em;
  width: .5rem; height: .5rem; background: var(--atrament);
}

footer {
  margin-top: 4rem; padding: 1.5rem 0 3rem;
  border-top: 2px solid var(--linia);
  font-size: .92rem; color: var(--przygaszony);
}
footer a { color: var(--przygaszony); }

/* Polityka prywatności: długi tekst, więc węższa kolumna i luźniejszy oddech. */
.dokument { max-width: 40rem; padding-top: 3rem; }
.dokument p, .dokument li { color: var(--druk); }
.dokument .data { color: var(--przygaszony); font-size: .92rem; }
.dokument table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.dokument th, .dokument td {
  border: 1px solid var(--pole-definicji); padding: .5rem .6rem;
  text-align: left; vertical-align: top; font-size: .95rem;
}
.dokument th { background: var(--pole-definicji); font-weight: 600; }

@media (max-width: 30rem) {
  h1 { font-size: 2.3rem; }
  body { font-size: 16px; }
}