/* NonComp business card: the style of DESIGN.md at the repo root.
   The custom properties in :root are its design tokens. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/space-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-ground: #10141f;
  --color-text: #eef1f7;
  --color-muted: #a3acbf;
  --color-soft: #c9d0dd;
  --color-card: #171d2b;
  --color-card-top: #1a2131;
  --color-line: #262d3d;
  --color-frame: #2e3648;
  --color-outline: #3a4357;
  --color-accent: #f2b544;
  --color-accent-hover: #ffd27a;
  --color-on-accent: #10141f;

  /* The accent as channels, for amber with alpha: the glow, the lines
     that fade, and the shadows. */
  --accent-rgb: 242 181 68;
  --glow-strong: rgb(var(--accent-rgb) / 0.22);
  --glow-weak: rgb(var(--accent-rgb) / 0.07);
  --glow-line: rgb(var(--accent-rgb) / 0.55);
  --dot: rgba(238, 241, 247, 0.1);

  --font-main: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --space-1: 0.5rem;
  --space-2: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 0.875rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-7: 1.5rem;
  --space-8: 1.75rem;
  --space-9: 2rem;
  --space-10: 2.5rem;
  --space-11: 3.5rem;
  --space-12: 4rem;
  --space-13: 6rem;

  --space-box: clamp(var(--space-7), 6vw, var(--space-9) + var(--space-5));

  --radius-button: 8px;
  --radius-card: 12px;
  --radius-frame: 14px;
  --radius-contact: 16px;
  --radius-row: 20px;
  --width: 84rem;
  --gutter: clamp(var(--space-5), 4vw, var(--space-10));
  --section: clamp(5rem, 10vw, 8rem);
  /* The left rail of the content below the hero. The thread runs in it. */
  --rail: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.accent {
  color: var(--color-accent);
}

.mono {
  font-family: var(--font-mono);
}

.nowrap {
  white-space: nowrap;
}

/* The page: an amber glow at the top right and at the bottom left, and a
   field of dots that fades out below the hero. */

.page {
  position: relative;
  overflow: hidden;
}

.glow,
.glow-low,
.dots {
  position: absolute;
  pointer-events: none;
}

.glow {
  top: -24rem;
  right: -18rem;
  width: 72rem;
  height: 64rem;
  background: radial-gradient(closest-side, var(--glow-strong), var(--glow-weak) 55%, transparent);
}

.glow-low {
  bottom: 4rem;
  left: -20rem;
  width: 56rem;
  height: 40rem;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.1), transparent);
}

.dots {
  top: 0;
  left: 0;
  right: 0;
  height: 56rem;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}

.wrap {
  position: relative;
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header: the logo, the links to three sections, and the mailbox. The
   privacy policy shows the mailbox only. */

.top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-8);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-decoration: none;
}

.logo:hover {
  color: var(--color-text);
}

.logo:hover .accent {
  color: var(--color-accent-hover);
}

/* The mark, B2 "Spojnice": N and C share one stroke. The shared stroke
   is amber. */
.logo-mark {
  flex-shrink: 0;
  width: 1.2em;
  height: 0.9em;
}

.logo-mark-letters {
  fill: var(--color-text);
}

.logo-mark-line {
  fill: var(--color-accent);
}

.logo:hover .logo-mark-line {
  fill: var(--color-accent-hover);
}

.top-mail {
  padding-block: var(--space-2);
  font-weight: 500;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-9);
  font-size: 1rem;
  font-weight: 500;
}

.nav a {
  color: var(--color-muted);
  text-decoration: none;
}

.nav a:hover {
  color: var(--color-text);
}

.nav .nav-mail {
  padding: var(--space-1) 1.1rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 999px;
  color: var(--color-accent);
}

.nav .nav-mail:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

/* Hero: the headline over the full width, then the lead and the buttons
   on the left, and the translated error on the right */

.hero {
  padding-block: clamp(var(--space-9), 5vw, var(--space-12)) var(--section);
}

.kicker {
  font-size: 0.875rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.kicker i {
  font-style: normal;
  color: var(--color-accent);
}

.hero h1 {
  margin-top: var(--space-7);
  font-size: clamp(3rem, 8.4vw, 8rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.hero h1 .line {
  display: block;
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--space-10), 6vw, var(--space-13));
  align-items: end;
  margin-top: clamp(var(--space-10), 5vw, var(--space-12));
}

.lead {
  max-width: 34rem;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--color-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-9);
}

.button {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.3s, transform 0.2s;
}

.button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  box-shadow: 0 0 2.5rem 0 rgb(var(--accent-rgb) / 0.35);
  transform: translateY(-2px);
}

.button-outline {
  padding: var(--space-3) 1.625rem;
  border: 2px solid var(--color-outline);
  background: transparent;
  color: var(--color-text);
}

.button-outline:hover {
  border-color: var(--color-accent);
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
}

.note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.note::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.2);
}

/* The translated error: a log window, then the same news in plain Czech */

.translate {
  overflow: hidden;
  border: 1px solid var(--color-frame);
  border-radius: var(--radius-frame);
  background: rgba(23, 29, 43, 0.85);
  box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.6), 0 0 0 1px rgb(var(--accent-rgb) / 0.06);
}

.translate-bar,
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.translate-bar i,
.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-outline);
}

.translate-file {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.translate-code {
  padding: var(--space-6) var(--space-6) var(--space-5);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.translate-code p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.translate-code .error {
  color: var(--color-text);
}

.translate-turn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-6);
  font-size: 0.75rem;
  color: var(--color-accent);
}

.translate-turn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.5), transparent);
}

.translate-arrow {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.translate-human {
  padding: var(--space-5) var(--space-6) var(--space-7);
  font-size: 1.1875rem;
  line-height: 1.45;
  font-weight: 500;
}

/* The thread: the amber stroke of the mark runs down the left rail, from
   the facts to the contact box, and fills as the page scrolls. The
   script places it, so it shows only with the script. */

.thread {
  display: none;
  position: absolute;
  left: calc(var(--gutter) + 1.125rem - 2px);
  width: 4px;
  background: var(--color-line);
  pointer-events: none;
}

.has-thread .thread {
  display: block;
}

.thread-fill {
  height: 100%;
  background: var(--color-accent);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.55);
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
}

/* Below the hero, all content keeps clear of the rail. */
.facts,
.section,
.contact {
  margin-left: var(--rail);
}

/* Facts: four numbers in a row */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
  padding-bottom: var(--section);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.fact-big {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-accent);
}

.fact-text {
  color: var(--color-muted);
}

/* Sections: each number is an amber stop on the thread */

.section {
  padding-bottom: var(--section);
  scroll-margin-top: var(--space-7);
}

.section-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-9), 4vw, var(--space-11));
}

.section-head .number {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--rail));
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8125rem;
  box-shadow: 0 0 0 6px var(--color-ground);
}

.section-head h2 {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Services: four cards, two by two */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(var(--space-8), 3vw, var(--space-10) + var(--space-1));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-frame);
  background: linear-gradient(180deg, var(--color-card-top), var(--color-card));
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.service:hover {
  border-color: var(--glow-line);
  transform: translateY(-4px);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(var(--accent-rgb) / 0.25);
}

.service-number {
  position: absolute;
  top: clamp(var(--space-8), 3vw, var(--space-10) + var(--space-1));
  right: clamp(var(--space-8), 3vw, var(--space-10) + var(--space-1));
  font-size: 0.875rem;
  color: var(--color-muted);
}

.service svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
}

.service h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.service p {
  max-width: 30rem;
  color: var(--color-muted);
}

/* Way of work: four columns, each led by a bold amber word */

.way-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.way-items p {
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-accent);
  color: var(--color-muted);
}

.way-items strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

/* References: the featured ones as big rows, each with its site in a
   browser frame. The sides swap from row to row. */

.projects {
  display: grid;
  gap: clamp(var(--space-7), 3vw, var(--space-10));
}

.project {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-7), 4vw, var(--space-12));
  align-items: center;
  padding: clamp(var(--space-7), 3vw, var(--space-10));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-row);
  background: linear-gradient(180deg, var(--color-card-top), var(--color-card));
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.project:nth-child(even) .project-text {
  order: 2;
}

a.project:hover {
  border-color: var(--glow-line);
  box-shadow: 0 2rem 4rem -2rem rgb(var(--accent-rgb) / 0.3);
  color: var(--color-text);
}

.project-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-address {
  font-size: 0.8125rem;
  color: var(--color-accent);
}

.project h3 {
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.project p {
  color: var(--color-muted);
}

.project .project-role {
  color: var(--color-soft);
}

.project-go {
  margin-top: var(--space-1);
  font-weight: 700;
  color: var(--color-accent);
}

.project-private {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.browser {
  overflow: hidden;
  border: 1px solid var(--color-frame);
  border-radius: var(--radius-card);
  background: var(--color-card);
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.7);
}

.browser-bar span {
  flex: 1;
  overflow: hidden;
  margin-left: var(--space-3);
  padding: 0.15rem var(--space-3);
  border-radius: 6px;
  background: var(--color-ground);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.browser img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.project:hover .browser img {
  transform: scale(1.03);
}

/* The archive: one row for each reference after the featured ones. A
   pointer over a row shows a preview of the site next to the pointer.
   DESIGN.md gives the markup of a row. */

.archive {
  margin-top: clamp(var(--space-11), 6vw, 5rem);
}

.archive-title {
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
}

.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 6rem 2rem;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s, padding 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.archive-row:hover {
  padding-left: var(--space-7);
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--color-text);
}

.archive-thumb {
  display: none;
}

.archive-name {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  transition: color 0.2s;
}

.archive-row:hover .archive-name {
  color: var(--color-accent);
}

.archive-what {
  font-size: 1rem;
  color: var(--color-muted);
}

.archive-type {
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-outline);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.archive-go {
  justify-self: end;
  font-size: 1.25rem;
  color: var(--color-accent);
  transition: transform 0.3s;
}

.archive-row:hover .archive-go {
  transform: translateX(0.35rem);
}

.peek {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 20rem;
  overflow: hidden;
  border: 1px solid var(--color-frame);
  border-radius: var(--radius-button);
  background: var(--color-card);
  box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.peek.on {
  opacity: 1;
}

.peek img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* Steps: an amber line above each of the four */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.step {
  position: relative;
  padding-top: var(--space-7);
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: calc(-1 * var(--space-7));
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgb(var(--accent-rgb) / 0.15));
}

.step:last-child::before {
  right: 0;
}

.step-number {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent);
}

.step h3 {
  margin-bottom: 0.375rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.step p {
  color: var(--color-muted);
}

/* About: the big number on the left, the text on the right */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--space-7), 5vw, 5rem);
  align-items: center;
  padding: clamp(var(--space-9), 5vw, var(--space-12));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-row);
  background: radial-gradient(40rem 24rem at 0% 0%, rgb(var(--accent-rgb) / 0.12), transparent), var(--color-card);
}

.about h2 {
  display: flex;
  flex-direction: column;
  font-size: 1.75rem;
  font-weight: 700;
}

.big-number {
  font-size: clamp(7rem, 16vw, 13rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--color-accent);
}

.about-text p {
  color: var(--color-soft);
}

.about-text p + p {
  margin-top: var(--space-4);
}

/* Questions: the head on the left, the answers on the right. Each one
   opens on a click, with no script. */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-9) clamp(var(--space-9), 6vw, var(--space-13));
  align-items: start;
}

.faq .section-head {
  position: sticky;
  top: var(--space-9);
}

.faq .section-head .number {
  top: 0.4rem;
  margin-top: 0;
}

.questions {
  border-top: 1px solid var(--color-line);
}

.questions details {
  border-bottom: 1px solid var(--color-line);
}

.questions summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding-block: 1.4rem;
  font-size: 1.375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.questions summary::-webkit-details-marker {
  display: none;
}

.questions summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.2s;
}

.questions details[open] summary::after {
  transform: rotate(45deg);
}

.questions summary:hover {
  color: var(--color-accent);
}

.questions details p {
  max-width: 44rem;
  padding-bottom: 1.4rem;
  color: var(--color-muted);
}

/* Contact: the amber box with dark text, where the thread ends */

.contact {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: clamp(var(--space-10), 7vw, var(--space-13)) clamp(var(--space-7), 6vw, 5rem);
  margin-bottom: var(--section);
  border-radius: calc(var(--radius-contact) + 8px);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.contact::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10rem;
  right: -10rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 160, 0.9), transparent);
  pointer-events: none;
}

.contact > * {
  position: relative;
  z-index: 1;
}

.contact h2 {
  font-size: clamp(2.75rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.contact h2 .line {
  display: block;
}

.contact > p {
  max-width: 36rem;
  font-size: 1.25rem;
}

/* The mailbox and the business phone side by side. On a phone the phone
   wraps below the mailbox. */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-9);
  margin-top: var(--space-1);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
}

.contact a {
  color: var(--color-on-accent);
  overflow-wrap: anywhere;
}

.contact a:hover {
  color: var(--color-on-accent);
  text-decoration-thickness: 2px;
}

.contact a:focus-visible {
  outline-color: var(--color-on-accent);
}

/* Privacy policy: one column of text, each channel in a card */

.policy {
  max-width: 50rem;
  padding-block: var(--space-12) var(--space-13);
}

.policy .lead {
  margin-top: var(--space-8);
}

.policy h1 {
  margin-top: var(--space-6);
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.policy .updated {
  margin-top: var(--space-5);
}

.policy section {
  margin-top: var(--space-11);
  scroll-margin-top: var(--space-7);
}

.policy h2 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.policy h3 {
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
  font-weight: 700;
}

.policy section p,
.policy li,
.policy dd {
  color: var(--color-soft);
}

.policy section p + p,
.policy section ul + p,
.policy section p + ul {
  margin-top: var(--space-3);
}

.policy section > div {
  margin-top: var(--space-9);
}

.channel {
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--color-card-top), var(--color-card));
}

.policy .channel + .channel {
  margin-top: var(--space-5);
}

.channel dl {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0;
}

.channel dt {
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-accent);
}

.channel dd {
  margin: 0;
}

.rights {
  margin: 0;
  padding-left: var(--space-6);
}

.rights li + li {
  margin-top: var(--space-1);
}

.rights li::marker {
  color: var(--color-accent);
}

.rights strong {
  color: var(--color-text);
}

/* Footer: the legal identity, and the link to the privacy policy */

.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-9);
  padding-block: var(--space-7) var(--space-10);
  border-top: 1px solid var(--color-line);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Motion: the hero rises on load, and the blocks below it rise in when
   they enter the view. Nothing moves for a visitor who asks the system
   for less motion. */

.rise {
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rise-1 {
  animation-delay: 0.1s;
}

.rise-2 {
  animation-delay: 0.2s;
}

.rise-3 {
  animation-delay: 0.35s;
}

.rise-4 {
  animation-delay: 0.5s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.can-reveal .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.can-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rise {
    animation: none;
  }

  .button,
  .service,
  .project,
  .browser img,
  .archive-row,
  .archive-go,
  .questions summary::after {
    transition: none;
  }
}

/* A touch screen has no pointer to follow. */
@media (hover: none) {
  .peek {
    display: none;
  }
}

@media (max-width: 64rem) {
  .hero-foot,
  .project,
  .about,
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .project:nth-child(even) .project-text {
    order: 0;
  }

  .facts,
  .way-items,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-9);
  }

  .faq .section-head {
    position: relative;
    top: auto;
  }
}

@media (max-width: 40rem) {
  :root {
    --rail: 2.75rem;
  }

  /* On a phone the header keeps only the logo and the mailbox. */
  .nav a:not(.nav-mail) {
    display: none;
  }

  .cards,
  .way-items,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts {
    gap: var(--space-7) var(--space-5);
  }

  .step::before {
    right: 0;
  }

  .about,
  .channel {
    padding: var(--space-7);
  }

  /* On a phone an archive row shows a small preview on its left. */
  .archive-row {
    grid-template-columns: 5rem minmax(0, 1fr) 1.5rem;
    gap: 0.25rem var(--space-5);
    padding-inline: 0;
  }

  .archive-row:hover {
    padding-left: 0;
  }

  .archive-thumb {
    display: block;
    grid-row: span 3;
    width: 5rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top left;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-button);
  }

  .archive-name,
  .archive-what,
  .archive-type {
    grid-column: 2;
  }

  .archive-go {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  /* On a phone each term of a channel stands above its text. */
  .channel dl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .channel dd + dt {
    margin-top: var(--space-3);
  }

  /* On a phone the two hero buttons share one row at equal widths. The
     grid sets the widths, so the buttons drop their side padding, and
     "Jak to probíhá" fits down to 21.25 rem. */
  .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions .button {
    padding-inline: 0;
    text-align: center;
    white-space: nowrap;
  }
}

/* On a very narrow phone the hero buttons stack at full width. */
@media (max-width: 21.25rem) {
  .actions {
    grid-template-columns: minmax(0, 1fr);
  }
}