/* Shared by privacy.html and privacy.pl.html.
   A deliberately small subset of index.html's system — the same palette, the
   same two typefaces, the same gutter — hand-written rather than copied. The
   landing page's <style> block is 700 lines of hero canvas and blob geometry,
   and its <defs> are rewritten in place by scripts/extract_logo_blobs.py; a
   second copy of either would drift silently. The mark here is <img
   src="/favicon.svg">, which is generated from the same logo. */

:root{
  --paper:#FFFFFF;
  --paper-2:#F2F4ED;
  --ink:#16211C;
  --ink-2:#4F5C55;
  --line:rgba(22,33,28,.13);
  --violet:#5343C6;
  --rasp:#DC4A79;
  --gut:clamp(20px,5vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Karla,ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.col{max-width:44em}

/* ---------- header ---------- */
/* Wraps, unlike index.html's header. The Polish nav is materially longer
   ("Wróć na stronę" / "Zaloguj się"), and it has one more item than the
   landing page's — the language toggle — so on a narrow phone the row runs out
   of width. Without wrap a flex row overflows rather than breaks. */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
  flex-wrap:wrap;
  padding:26px var(--gut);
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'opsz' 24,'SOFT' 100,'WONK' 1;
  font-size:22px;font-weight:500;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);
}
.logo img{display:block;width:26px;height:26px}
.nav{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.nav a{
  font-size:14.5px;letter-spacing:.01em;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .25s,border-color .25s;white-space:nowrap;
}
.nav a:hover{color:var(--ink);border-color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-color:var(--ink)}

/* ---------- page ---------- */
main{padding:clamp(28px,6vh,64px) 0 clamp(56px,10vh,110px)}

.display{
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1;
  font-weight:400;letter-spacing:-.022em;line-height:1.06;
}
h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.stamp{
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;margin-bottom:22px;
}
.lead{
  font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.62;
  color:var(--ink-2);margin-top:24px;
}

h2{
  font-family:Fraunces,Georgia,serif;
  font-variation-settings:'opsz' 48,'SOFT' 100,'WONK' 1;
  font-weight:400;font-size:clamp(1.4rem,3vw,1.85rem);
  letter-spacing:-.015em;line-height:1.2;
  margin:clamp(40px,6vh,68px) 0 0;
  padding-top:26px;border-top:1px solid var(--line);
}
h3{
  font-size:1rem;font-weight:600;letter-spacing:.005em;
  margin:26px 0 0;
}
p{margin-top:16px}
ul{margin:14px 0 0;padding-left:1.15em}
li{margin-top:9px}
li::marker{color:var(--rasp)}
strong{font-weight:600}
a{color:var(--violet)}
a:hover{color:var(--ink)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;background:var(--paper-2);
  padding:1px 5px;border-radius:4px;
}

/* A claim the page has to soften. Not a warning box — the register of the
   rest of the site does not shout — just a quiet left rule. */
.aside{
  margin-top:20px;padding:2px 0 2px 18px;
  border-left:2px solid var(--line);
  color:var(--ink-2);font-size:.96em;
}
.aside p:first-child{margin-top:0}


footer{
  border-top:1px solid var(--line);
  padding:30px 0 44px;font-size:14px;color:var(--ink-2);
}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-in a{color:var(--ink-2)}

:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}

@media (max-width:720px){
  body{font-size:16px}
  .top{padding:20px var(--gut)}
  .nav{gap:16px}
}