@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-stack: "Archivo", system-ui, sans-serif;
  --ground: #DEE1DB;
  --figure: #16191C;
  --quiet: 0.65;          /* secondary text; 0.55 does not reach AA on this pair */
  --edge: clamp(1.25rem, 3.2vw, 3rem);
  --small: 0.9rem;
  --tiny: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #16191C;
    --figure: #DEE1DB;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Nadpis roste s oknem. Aby se s ním na velkých monitorech zvětšoval
     i zbytek sazby, škáluje se root font: pod ~1420 px drží 16 px, na
     1920 px je ~18 px, strop 22 px. Vše je v rem/ch, takže se kompozice
     zvětšuje jako celek. Procenta místo px kvůli uživatelsky zvětšenému
     výchozímu písmu. */
  font-size: clamp(100%, 0.45vw + 60%, 137.5%);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--figure);
  font-family: var(--font-stack);
  font-weight: 400;
  font-size: var(--small);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:root[data-lang="en"] .l-cs { display: none; }
:root:not([data-lang="en"]) .l-en { display: none; }

.panel {
  position: relative;   /* kotva pro .gridlay */
  flex: 1;
  padding: var(--edge);
}

/* Konstrukční mřížka. Ukáže se jen během změny velikosti okna (řídí lang.js)
   a kreslí skutečné tracky: absolutní dítě .panel s padding: inherit má
   content box totožný s mřížkou, takže dvanáctiny sedí na sloupce přesně. */
.gridlay {
  display: none;
  position: absolute;
  inset: 0;
  padding: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.gridlay::before {
  content: "";
  display: block;
  height: 100%;
  box-shadow: inset 0 0 0 1px var(--figure);
  background-image: repeating-linear-gradient(
    to right, var(--figure) 0 1px, transparent 1px calc(100% / 12));
}

.gridlay.show { opacity: 0.16; }

.wordmark {
  font-weight: 500;
  margin: 0;
}

.langswitch {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--tiny);
  line-height: 1.45;
  opacity: var(--quiet);
}

.langbtn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.langbtn[aria-pressed="true"] { font-weight: 500; text-decoration: underline; }

h1 {
  font-weight: 700;
  /* Sevřeno šířkou i výškou: 8.4vw je největší velikost, při které se
     nejdelší přirozený řádek vejde do okna; výškový strop drží nadpis
     v horních dvou pětinách i na širokoúhlých monitorech. */
  font-size: clamp(3.5rem, min(8.4vw, 15vh), 26rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

/* Anglický nadpis sází tři řádky proti dvěma českým; menší písmo srovná
   výšku bloku a v pevné osmiřádkové mřížce se nikdy nepotká s textem. */
:root[data-lang="en"] h1 {
  font-size: clamp(3.5rem, min(8.4vw, 12.6vh), 26rem);
}

.brief { max-width: 38ch; }
.brief p { margin: 0 0 0.9rem; }
.brief p:last-child { margin-bottom: 0; }

.registry {
  font-size: var(--tiny);
  font-weight: 500;
  line-height: 1.6;
  opacity: var(--quiet);
  margin: 0;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2.5rem;
  padding: 0 var(--edge) var(--edge);
  font-size: var(--tiny);
  opacity: var(--quiet);
}

footer p { margin: 0; }

/* UTC readout — jediný živý údaj na stránce; plní ho lang.js, bez JS není */
.utc {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* crossfade při přepnutí jazyka (View Transitions API, jinde se nic neděje) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Kompozice do rohů. Řádky jsou obsahové, takže se bloky nemohou překrýt
   ani v úzkém nebo nízkém okně. */
@media (min-width: 48rem) {
  .gridlay { display: block; }

  .panel {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: clamp(1.75rem, 5vh, 4rem);
    align-content: start;
    overflow-x: clip;
  }

  .wordmark   { grid-area: 1 / 1 / 2 / 7; }
  .langswitch { grid-area: 1 / 7 / 2 / 13; justify-self: end; }
  h1          { grid-area: 2 / 1 / 3 / 13; }
  .registry   { grid-area: 3 / 1 / 4 / 5; align-self: end; }
  .brief      { grid-area: 3 / 6 / 4 / 13; justify-self: end; max-width: 54ch; }
}

/* Teprve když je dost výšky, drží se stránka v jednom viewportu a rohy se
   rozestoupí do pevné osmiřádkové mřížky. */
@media (min-width: 85rem) and (min-height: 48rem) {
  html, body { height: 100dvh; overflow: hidden; }

  .panel {
    grid-template-rows: repeat(8, 1fr);
    row-gap: 0;
    align-content: stretch;
    overflow: hidden;
  }

  h1        { grid-area: 2 / 1 / 6 / 13; align-self: start; }
  .registry { grid-area: 8 / 1 / 9 / 5; }
  .brief    { grid-area: 6 / 6 / 9 / 13; align-self: end; max-width: 43ch; }

  /* osm řádků existuje jen tady, jinde by osminy lhaly */
  .gridlay::before {
    background-image:
      repeating-linear-gradient(
        to right, var(--figure) 0 1px, transparent 1px calc(100% / 12)),
      repeating-linear-gradient(
        to bottom, var(--figure) 0 1px, transparent 1px calc(100% / 8));
  }
}

/* narrow: vertical flow, same three sizes */
@media (max-width: 47.999rem) {
  .panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.25rem 1rem;
    align-content: start;
    overflow-x: clip;
  }

  .wordmark   { grid-area: 1 / 1; }
  .langswitch { grid-area: 1 / 2; justify-self: end; }
  h1          { grid-area: 2 / 1 / 3 / 3; margin-block: 1.5rem; }
  .brief      { grid-area: 3 / 1 / 4 / 3; }
  .registry   { grid-area: 4 / 1 / 5 / 3; }

  footer { padding-top: 2.5rem; }
}

@media print {
  html, body { height: auto; overflow: visible; }
  body { background: #FFF; color: #000; }
  .panel { display: block; overflow: visible; padding: 0; }
  /* justify-self still aligns block-level boxes once the grid is gone */
  .brief, .langswitch { justify-self: auto; align-self: auto; }
  .langswitch, .utc, .gridlay { display: none; }
  h1 { font-size: 2.4rem; margin: 1.5rem 0; }
  .brief, .registry { max-width: none; margin-bottom: 1.5rem; }
  .registry, footer { opacity: 1; }
  footer { padding: 0; }
  a { text-decoration: none; }
}