@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand */
  --ink: #134e4a;
  --copper: #c2703d;
  --copper-text: #9a5226;

  /* Neutrals */
  --bg: #f4f4f2;
  --surface: #fff;
  --text: #1c2826;
  --muted: #667370;
  --line: #d9dddb;
  --on-accent: #fff;
  --on-accent-muted: rgba(255, 255, 255, .8);

  /* Spacing: label above a title, title above its text, between blocks */
  --space-label: 12px;
  --space-title: .4em;
  --space-block: 40px;

  --radius: 14px;
  --cut: -14.04deg;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.65, 0, .2, 1);
  --ease-blade: cubic-bezier(.5, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 17px/1.6 "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

html[lang="cs"] :is([lang="en"], [lang="de"]):not(button),
html[lang="en"] :is([lang="cs"], [lang="de"]):not(button),
html[lang="de"] :is([lang="cs"], [lang="en"]):not(button) { display: none; }

/* Type */
h1, h2, h3 {
  margin-bottom: var(--space-title);
  color: var(--ink); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.lead { max-width: 52ch; font-size: clamp(1.08rem, 1.4vw, 1.3rem); }
.lead + .lead { margin-top: .8em; }
.kicker { margin-bottom: var(--space-label); font-size: 15px; color: var(--muted); }

/* Header */
.header {
  position: absolute; z-index: 20; inset: 0 0 auto;
  height: 84px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: block; text-decoration: none; }
.logo svg { display: block; width: auto; height: 30px; }
.header-actions { display: flex; align-items: center; gap: 28px; }
.lang { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; }
.lang button { padding: 4px 10px; border-radius: 999px; color: var(--muted); transition: color .3s; }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Mark: one layer per blade, offset set by site.js */
.mark { position: relative; aspect-ratio: 34 / 40; }
.mark .blade { position: absolute; inset: 0; will-change: transform; backface-visibility: hidden; }
.mark .blade svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark .blade-a svg { fill: var(--ink); }
.mark .blade-b svg { fill: var(--copper); }
.mark--part .blade-a { animation: part-a .6s var(--ease-blade) .3s both; }
.mark--part .blade-b { animation: part-b .6s var(--ease-blade) .3s both; }
@keyframes join-a {
  from { transform: translate3d(var(--bx, 4.8235%), calc(-1 * var(--by, 16.4%)), 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes join-b {
  from { transform: translate3d(calc(-1 * var(--bx, 4.8235%)), var(--by, 16.4%), 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes part-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--bx, 4.8235%), calc(-1 * var(--by, 16.4%)), 0); }
}
@keyframes part-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--bx, 4.8235%)), var(--by, 16.4%), 0); }
}

/* Button */
.button {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  color: var(--ink); font-weight: 600; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .35s, box-shadow .35s;
}
.button svg { color: var(--muted); transition: transform .4s var(--ease), color .35s; }
.button:hover, .button:focus-visible { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.button:hover svg, .button:focus-visible svg { color: var(--ink); transform: translateX(5px); }

/* Reveal */
.reveal {
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.is-ready .reveal { opacity: 1; transform: none; }

/* Footer on sub-pages */
.site-footer { padding: 32px var(--gutter); font-size: 13px; color: var(--muted); }

@media (max-width: 820px) {
  body { font-size: 16px; }
  .header { height: 72px; }
  .header-actions { gap: 14px; }
  .logo svg { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}