/* Wspólne style wszystkich stron: czcionki, kolory, tło, nagłówek z nazwą i flagą.
   Strona dokłada własne style po tym pliku i może tu coś nadpisać. */
@font-face{font-family:'Fraunces';src:url('/font/fraunces.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('/font/karla.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --wall:#E8E4DC;--ink:#252220;--ink-soft:#645E57;
  --ochre:#B8801E;--plum:#7B4666;--paper:#FCFAF6;
  --good:#3F7D46;--warn:#C08420;--bad:#B04A33;
  --serif:'Fraunces',Georgia,serif;--sans:'Karla','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* telefony: cała skala (wszystko jest w rem) rośnie o 12,5%, a przeglądarka nie zmienia
   sama rozmiaru tekstu po obróceniu ekranu */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:600px){html{font-size:112.5%}}
body{
  min-height:100dvh;font-family:var(--sans);color:var(--ink);
  background:var(--wall);
  background-image:radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,.7), rgba(255,255,255,0) 65%);
  background-attachment:fixed;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.22'/></svg>");
}
#app{position:relative;z-index:1}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* nagłówek */
.topbar{padding:1.5rem clamp(1rem,4vw,3rem) .4rem}
.gora{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:nowrap}
.mark{display:inline-block;font-family:var(--serif);font-weight:700;font-size:1.32rem;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.mark span{color:var(--plum)}
.belka{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.tagline{font-size:.79rem;color:var(--ink-soft);opacity:.85;line-height:1.5;margin:.25rem 0 0}
.wroc{font-size:.82rem;color:var(--plum);text-decoration:none;border-bottom:1px solid currentColor}
.ig{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--plum);text-decoration:none}
.ig span{border-bottom:1px solid currentColor}
.kreska{border:0;height:1px;background:var(--plum);opacity:.45;margin:.9rem clamp(1rem,4vw,3rem)}
/* na telefonie nagłówek wyraźnie większy: sama skala 12,5% była tu niezauważalna */
@media (max-width:600px){
  .mark{font-size:1.7rem}
  .tagline{font-size:.95rem;line-height:1.45}
  .wroc,.ig{font-size:.95rem}
}
@media (max-width:500px){
  .topbar{padding:.5rem clamp(1rem,4vw,3rem) .4rem}
  .gora{flex-direction:column-reverse;align-items:stretch;gap:.7rem}
  .belka{width:100%;justify-content:space-between}
}

/* flaga języka */
.flaga{background:none;border:0;padding:.15rem;margin:0;cursor:pointer;line-height:0;
  perspective:240px;border-radius:2px}
.flaga .karta{display:block;transform-style:preserve-3d;backface-visibility:hidden}
.flaga svg{width:22px;height:15px;display:block;border:1px solid rgba(35,42,32,.2);
  box-shadow:0 1px 2px rgba(40,50,35,.14);transition:box-shadow .2s ease}
.flaga:hover svg{box-shadow:0 3px 8px rgba(40,50,35,.24)}
.flaga:focus-visible{outline:2px solid var(--plum);outline-offset:3px}