:root {
  --bg: #fafaf8;
  --ink: #151514;
  --soft: #3f3f3c;
  --muted: #7a7973;
  --rule: #e5e4df;
  --accent: #c8401b;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101011;
    --ink: #ecebe7;
    --soft: #c6c5c0;
    --muted: #8b8a85;
    --rule: #27282a;
    --accent: #ff7a50;
  }
}
:root[data-theme="dark"] {
  --bg: #101011;
  --ink: #ecebe7;
  --soft: #c6c5c0;
  --muted: #8b8a85;
  --rule: #27282a;
  --accent: #ff7a50;
}

* { box-sizing: border-box; }
/* Plynulé měřítko: celé rozvržení je v rem, takže s kořenovým písmem roste
   všechno úměrně — 15 px na malém telefonu, 18 px od cca 1340 px šířky. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(15px, 14px + 0.3vw, 18px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.125rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Jeden sloupec, zarovnaný doleva s odsazením — čte se jako dopis.
   Na širokých monitorech se odsazení počítá od pomyslné stránky 76rem
   na středu, takže sloupec nezůstane přilepený u levého okraje. */
main {
  max-width: calc(37rem + 20px);
  margin-left: max(20px, min(14vw, 13rem), calc((100vw - 76rem) / 2 + 12rem));
  padding: clamp(4rem, 15vh, 9rem) 20px 4rem 0;
}

h1 {
  font: 500 1.6rem/1.2 var(--sans);
  letter-spacing: -0.025em;
  margin: 0;
}
.role {
  font: 400 0.8rem/1.6 var(--mono);
  color: var(--muted);
  margin: 0.35rem 0 3rem;
}

p { margin: 0 0 1.3rem; }
.intro p:first-child {
  font-size: calc(1.3rem + 5px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.022em;
  margin-bottom: 1.75rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color .15s;
}
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h2 {
  font: 400 0.8rem/1.6 var(--mono);
  color: var(--muted);
  margin: 0 0 1rem;
}
h2::before { content: "/ "; color: var(--accent); }
section { margin-top: 3.75rem; }

/* Teze */
.theses { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.theses li { counter-increment: t; position: relative; padding-left: 2.2rem; margin: 0 0 1.1rem; }
.theses li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0; top: 0.32rem;
  font: 400 0.75rem/1.6 var(--mono);
  color: var(--accent);
}
.theses strong { font-weight: 500; }

/* Texty */
.texts { margin: 0; padding: 0; list-style: none; }
.texts li { margin: 0 0 0.9rem; line-height: 1.5; }
.texts small { display: block; font: 400 0.75rem/1.6 var(--mono); color: var(--muted); margin-top: 0.15rem; }

figure { margin: 0 0 1.75rem; }
blockquote { margin: 0; color: var(--soft); }
figcaption { font: 400 0.8rem/1.6 var(--mono); color: var(--muted); margin-top: 0.4rem; }

.colophon {
  margin-top: 5rem;
  font: 400 0.75rem/1.6 var(--mono);
  color: var(--muted);
}

/* Článek */
.back { font: 400 0.8rem/1.6 var(--mono); color: var(--muted); margin: 0 0 3rem; display: inline-block; }
article h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 0.6rem; text-wrap: balance; }
article .meta { font: 400 0.8rem/1.6 var(--mono); color: var(--muted); margin: 0 0 2.5rem; }
article .lede { font-size: 1.3rem; line-height: 1.5; letter-spacing: -0.015em; }
article h3 { font: 500 1.1rem/1.4 var(--sans); margin: 2.5rem 0 0.6rem; letter-spacing: -0.01em; }
article ul, article ol { padding-left: 1.2rem; margin: 0 0 1.3rem; }
article li { margin: 0 0 0.45rem; }
article li::marker { color: var(--muted); }
.facts { list-style: none; padding: 0 !important; margin: 0 0 2rem !important; }
.facts li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.facts b { font: 400 0.8rem/2.1 var(--mono); color: var(--muted); }

@media (max-width: 560px) {
  main { margin-left: 0; padding: 3.5rem 20px 3rem; }
  .role { margin-bottom: 2.25rem; }
  .intro p:first-child { font-size: calc(1.17rem + 5px); }
  article .lede { font-size: 1.17rem; }
  article h1 { font-size: 1.65rem; }
  .facts li { grid-template-columns: 1fr; }
  .facts b { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }