/* meta-code.sk - the site's one stylesheet (.claude/_architecture-guidelines.md, "CSS
   architecture"). Order: @font-face rules, the tokens, the dark theme, base element styles,
   layout, components (one BEM block each), then the reduced-motion overrides. Components use
   the tokens, never literal values, so the dark theme only overrides colour tokens.
   scripts/style.test.mjs checks the tokens, the contrast pairs, the fonts and the motion. */

/* --- Fonts ------------------------------------------------------------------------------- */

/* Instrument Sans (text and headings) and JetBrains Mono (labels): OFL, self-hosted WOFF2 from
   Fontsource, licences beside the files. Each face is two files: latin, declared with no
   unicode-range, and latin-ext, declared after it with its range. For a character in that
   range the later face is checked first (CSS Fonts 4, sections 4.5.1 and 5.2), so the Slovak
   letters č ď ľ ĺ ň ŕ š ť ž come from the latin-ext file and never fall back mid-word. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2?v=20261103") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2?v=20261103") 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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2?v=20261103") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-500-normal.woff2?v=20261103") 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;
}

/* --- Tokens ------------------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* Colour: warm paper, ink type, one electric accent. Every text and focus pair is listed in
     the tech spec and recomputed by scripts/style.test.mjs. */
  --color-paper: #f6f3ec;
  --color-surface: #ece7dc;
  --color-ink: #15141a;
  --color-muted: #57534b;
  --color-line: #d8d1c3;
  --color-line-strong: #847e71;
  --color-accent: #1f40ff;
  --color-on-accent: #ffffff;
  --color-focus: var(--color-accent);
  --logo-filter: none;

  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.1875rem, 1.07rem + 0.5vw, 1.4375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.25rem + 2.6vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --text-4xl: clamp(2.5rem, 1.25rem + 5vw, 5rem);
  --leading: 1.6;
  --leading-snug: 1.4;
  --leading-tight: 1.1;
  --leading-display: 1.02;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  /* Space and layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --space-hero: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  --space-head-top: clamp(2.5rem, 1.25rem + 5vw, 6rem);
  --space-head-bottom: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --space-block: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1rem, 0.25rem + 3vw, 2.5rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  --width-content: 80rem;
  --width-text: 40rem;
  --width-lead: 36rem;
  --width-heading: 52rem;
  --width-art: 35rem;
  --logo-height: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  --target-min: 2.5rem;
  --target-compact: 2rem;
  --target-large: 3rem;

  /* Shape */
  --radius: 0.25rem;
  --border: 1px;
  --focus-ring: 3px;
  --focus-offset: 3px;
  --radius-round: 50%;

  /* Time. The hero's "line by line" timeline: row i (0-5) draws its code at i x step, its node
     at i x step + 720ms, its link at i x step + 960ms; hub j (0-3) pops at j x step + 1680ms
     and draws its mesh at j x step + 1800ms. The last part ends at 2520ms (under 3s). */
  --duration: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-step: 120ms;
  --hero-draw: 480ms;
  --hero-pop: 240ms;
  --hero-at-tail: 60ms;
  --hero-at-node: 720ms;
  --hero-at-link: 960ms;
  --hero-at-hub: 1680ms;
  --hero-at-mesh: 1800ms;
}

/* --- Dark theme -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #121110;
    --color-surface: #1c1b19;
    --color-ink: #f2efe8;
    --color-muted: #a8a397;
    --color-line: #2f2d29;
    --color-line-strong: #78736a;
    --color-accent: #7ea2ff;
    --color-on-accent: #121110;
    /* The logo is a black wordmark: white on a dark page. */
    --logo-filter: invert(1);
  }
}

/* --- Base -------------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: break-word;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration) var(--ease-standard);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

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

address {
  font-style: normal;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  white-space: nowrap;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* --- Layout ------------------------------------------------------------------------------ */

/* Every content row shares one width: the content column with a gutter on each side. */
.site-header__inner,
.page-head,
.hero__inner,
.band__inner,
.not-found,
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--width-content));
  margin-inline: auto;
}

/* --- Components -------------------------------------------------------------------------- */

/* The skip link: off screen until it has keyboard focus. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* The language offer (built by site.js on English pages only): a non-modal banner above the
   header. */
.lang-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--gutter);
  border-bottom: var(--border) solid var(--color-line);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.lang-offer__text {
  flex: 1 1 16rem;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.lang-offer__accept,
.lang-offer__decline {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-4);
  border: var(--border) solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.lang-offer__accept {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.lang-offer__decline {
  border-color: var(--color-line-strong);
  background: transparent;
  color: var(--color-ink);
}

/* The header: logo, navigation and the language switch. Two rows below 48rem (the logo, then
   the navigation with the switch at its end), one row above; it wraps instead of hiding
   anything, so it needs no script, and the Tab order follows the reading order. */
.site-header {
  border-bottom: var(--border) solid var(--color-line);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand brand"
    "nav switch";
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3) var(--space-1);
}

.site-header__brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.site-header__logo {
  width: auto;
  height: var(--logo-height);
  filter: var(--logo-filter);
}

.site-nav {
  grid-area: nav;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-underline-offset: 0.5em;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

@media (min-width: 48rem) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav switch";
    column-gap: var(--space-8);
    padding-block: var(--space-4);
  }

  .site-nav {
    justify-self: end;
  }

  .site-nav__list {
    column-gap: var(--space-8);
  }
}

/* The language switch (generated by scripts/build-i18n.py): EN | SK, the current one marked by
   aria-current and an underline, not by colour alone. */
.lang-switch {
  grid-area: switch;
  align-self: start;
  justify-self: end;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-compact);
  min-height: var(--target-min);
  color: var(--color-muted);
  text-decoration: none;
  text-underline-offset: 0.5em;
}

.lang-switch__item:hover,
.lang-switch__item[aria-current] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.lang-switch__item[aria-current] {
  text-decoration-color: var(--color-accent);
}

.lang-switch__separator {
  color: var(--color-line-strong);
}

/* A mono uppercase label: eyebrows, breadcrumbs, footer headings, terms. Mixed into an element
   of another block (class="hero__eyebrow mono-label"). */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Buttons: a link styled as a call to action. Primary on the accent, secondary outlined. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 100%;
  min-height: var(--target-large);
  padding: var(--space-2) var(--space-6);
  border: var(--border) solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-decoration: none;
  transition:
    background-color var(--duration) var(--ease-standard),
    border-color var(--duration) var(--ease-standard),
    color var(--duration) var(--ease-standard);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button--secondary {
  border-color: var(--color-line-strong);
  background: transparent;
  color: var(--color-ink);
}

.button--secondary:hover {
  border-color: var(--color-ink);
}

.button__label {
  overflow-wrap: anywhere;
}

.button__icon {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration) var(--ease-out);
}

.button:hover .button__icon {
  transform: translateX(var(--space-1));
}

/* The breadcrumb on inner pages: Home / the page. */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/" / "";
  color: var(--color-line-strong);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-compact);
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.breadcrumb__current {
  color: var(--color-ink);
}

/* An inner page's head: breadcrumb, h1, lead and an optional call to action. */
.page-head {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  padding-block: var(--space-head-top) var(--space-head-bottom);
}

.page-head__title {
  max-width: var(--width-heading);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-display);
}

.page-head__lead {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* The in-page index inside a page head (/ai/): as wide as the content column. */
.page-head__toc {
  justify-self: stretch;
  margin-top: var(--space-4);
}

/* A case study's facts inside its page head (/work/airamax/): as wide as the content column. */
.page-head__facts {
  justify-self: stretch;
  margin-top: var(--space-2);
}

/* A page head that sets its title and lead side by side from 64rem (/ai/): the title in columns
   1-6, the lead in 7-12, the breadcrumb and the index across the row. It keeps the index on the
   first 1440 x 900 screen in Slovak, whose title and lead run longer. Stacked below 64rem. */
@media (min-width: 64rem) {
  .page-head--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .page-head--split .page-head__breadcrumb,
  .page-head--split .page-head__toc {
    grid-column: 1 / -1;
  }

  .page-head--split .page-head__title {
    grid-column: 1 / span 6;
  }

  .page-head--split .page-head__lead {
    grid-column: 7 / -1;
  }
}

/* The home page's first screen: eyebrow, h1, subline, calls to action, proof line and the
   "line by line" art. One column; from 64rem the text takes columns 1-7 and the art 8-12. */
.hero {
  border-bottom: var(--border) solid var(--color-line);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-hero);
}

.hero__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.hero__title-line {
  display: block;
}

/* A static cursor after the last line: decoration, no text. */
.hero__title-line:last-child::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.8em;
  margin-inline-start: 0.08em;
  vertical-align: -0.05em;
  background: var(--color-accent);
}

.hero__lead {
  max-width: var(--width-lead);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  max-width: var(--width-lead);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--color-line);
}

.hero__proof-link {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.hero__art {
  width: 100%;
  max-width: var(--width-art);
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .hero__proof {
    grid-column: 1 / span 7;
  }

  .hero__art {
    grid-column: 8 / -1;
    grid-row: 1 / span 5;
    justify-self: end;
  }
}

/* The hero's "line by line" art (inline SVG, aria-hidden, no text): six code lines draw one by
   one, end in nodes, link into three hubs and meet in the accent node. It plays once; its final
   state is the static picture, which is what Reduce Motion shows. */
.hero-art {
  --i: 0;
}

.hero-art__row:nth-child(2),
.hero-art__hub:nth-child(2) {
  --i: 1;
}

.hero-art__row:nth-child(3),
.hero-art__hub:nth-child(3) {
  --i: 2;
}

.hero-art__row:nth-child(4),
.hero-art__hub:nth-child(4) {
  --i: 3;
}

.hero-art__row:nth-child(5) {
  --i: 4;
}

.hero-art__row:nth-child(6) {
  --i: 5;
}

.hero-art__gutter {
  stroke: var(--color-line);
  stroke-width: 1;
}

.hero-art__code,
.hero-art__link,
.hero-art__mesh {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

.hero-art__code {
  stroke: var(--color-ink);
  stroke-width: 4;
  animation: hero-draw var(--hero-draw) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--hero-step));
}

.hero-art__code--tail {
  stroke: var(--color-muted);
  animation-delay: calc(var(--i) * var(--hero-step) + var(--hero-at-tail));
}

.hero-art__link {
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
  animation: hero-draw var(--hero-draw) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--hero-step) + var(--hero-at-link));
}

.hero-art__node {
  fill: var(--color-paper);
  stroke: var(--color-ink);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-pop var(--hero-pop) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--hero-step) + var(--hero-at-node));
}

.hero-art__hub-node {
  fill: var(--color-ink);
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-pop var(--hero-pop) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--hero-step) + var(--hero-at-hub));
}

.hero-art__hub-node--accent {
  fill: var(--color-accent);
}

.hero-art__mesh {
  stroke: var(--color-ink);
  stroke-width: 1.5;
  animation: hero-draw var(--hero-draw) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--hero-step) + var(--hero-at-mesh));
}

@keyframes hero-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }
}

@keyframes hero-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
}

/* A full-width band of a page; its inner row holds the content. */
.band {
  padding-block: var(--space-section);
}

.band--rule {
  border-top: var(--border) solid var(--color-line);
}

.band--surface {
  background: var(--color-surface);
}

/* A shorter band, for a run of many sections of one kind (/ai/'s ten focus areas). */
.band--compact {
  padding-block: var(--space-block);
}

/* A section's head: a mono label above its h2, and an optional lead. */
.section-head {
  display: grid;
  gap: var(--space-3);
  max-width: var(--width-heading);
  margin-bottom: var(--space-10);
}

.section-head__title {
  font-size: var(--text-2xl);
}

.section-head__lead {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* A numbered section head: an accent mono number from the `numbered` counter, which the element
   holding the sections resets (.focus-areas). The number is decoration with empty alternative
   text; it is never written into the HTML. */
.section-head--numbered {
  counter-increment: numbered;
}

.section-head--numbered::before {
  content: counter(numbered, decimal-leading-zero) / "";
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

/* A spec sheet of facts: term and value rows between hairlines. */
.spec-list {
  border-top: var(--border) solid var(--color-line);
}

.spec-list__row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border) solid var(--color-line);
}

.spec-list__value {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.spec-list__link {
  color: var(--color-ink);
  text-decoration-color: var(--color-line-strong);
}

.spec-list__link:hover {
  text-decoration-color: var(--color-accent);
}

@media (min-width: 48rem) {
  .spec-list__row {
    grid-template-columns: minmax(8rem, 3fr) 9fr;
    column-gap: var(--grid-gap);
    align-items: baseline;
  }
}

/* Long-form text (the privacy notice): numbered sections between hairlines. */
.prose {
  display: grid;
  gap: var(--space-12);
  max-width: var(--width-text);
  counter-reset: section;
}

.prose__section {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: var(--border) solid var(--color-line);
  counter-increment: section;
}

/* The band above already draws a rule: the first section adds none of its own. */
.prose__section:first-child {
  padding-top: 0;
  border-top: 0;
}

.prose__title {
  font-size: var(--text-xl);
}

.prose__title::before {
  content: counter(section, decimal-leading-zero) / "";
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

/* The in-page index of a long page (/ai/'s ten focus areas): numbered links between hairlines,
   one column, two from 48rem, filled down then across so the reading and Tab order match. The
   number is a CSS counter with empty alternative text: the list itself is the order. */
.toc {
  display: grid;
  gap: var(--space-3);
}

.toc__list {
  padding: 0;
  list-style: none;
  border-top: var(--border) solid var(--color-line);
  counter-reset: toc;
}

.toc__item {
  border-bottom: var(--border) solid var(--color-line);
  counter-increment: toc;
  break-inside: avoid;
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-height: var(--target-min);
  padding-block: var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.toc__link::before {
  content: counter(toc, decimal-leading-zero) / "";
  flex: none;
  width: var(--space-8);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

/* Balanced like the headings it names, so a long title never leaves one word alone (the Slovak
   "(AI Act)" stays together). */
.toc__title {
  text-wrap: balance;
}

.toc__link:hover .toc__title {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

@media (min-width: 48rem) {
  .toc__list {
    columns: 2;
    column-gap: var(--grid-gap);
  }
}

/* A focus area on /ai/: the numbered head (title and one-liner) and the body (what it is, the
   use cases, how we deliver it, and in two areas the AIRAmax proof line). One column; from
   64rem the head takes columns 1-5 and stays in view while the body, in columns 7-12, is read. */
.focus-areas {
  counter-reset: numbered;
}

.focus-area__body {
  display: grid;
  gap: var(--space-3);
  max-width: var(--width-text);
}

.focus-area__label {
  margin-top: var(--space-6);
}

.focus-area__label:first-child {
  margin-top: 0;
}

.focus-area__cases {
  padding: 0;
  list-style: none;
  border-top: var(--border) solid var(--color-line);
}

/* Each use case opens with a short accent line: the "line by line" motif, as decoration. */
.focus-area__case {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: var(--border) solid var(--color-line);
}

.focus-area__case::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 0.8em);
  left: 0;
  width: var(--space-3);
  height: calc(2 * var(--border));
  background: var(--color-accent);
}

.focus-area__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--color-line);
}

.focus-area__proof-link {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

@media (min-width: 64rem) {
  .focus-area__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .focus-area__head {
    grid-column: 1 / span 5;
    position: sticky;
    top: var(--space-8);
    margin-bottom: 0;
  }

  .focus-area__body {
    grid-column: 7 / -1;
  }
}

/* A grid of short titled points (/ai/'s four approach rules): a strong hairline above each,
   one column, two from 48rem. */
.point-grid {
  display: grid;
  gap: var(--space-10) var(--grid-gap);
}

.point-grid__item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--color-line-strong);
}

.point-grid__title {
  font-size: var(--text-xl);
}

.point-grid__text {
  max-width: var(--width-text);
}

@media (min-width: 48rem) {
  .point-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Six points in two rows of three from 64rem (the home page's principles). */
@media (min-width: 64rem) {
  .point-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The facts of a case study (/work/airamax/'s page head): short term and value pairs, each under
   a hairline. One column, two from 48rem, four from 64rem. */
.case-facts {
  display: grid;
  column-gap: var(--grid-gap);
}

.case-facts__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: var(--border) solid var(--color-line);
}

.case-facts__value {
  line-height: var(--leading-snug);
}

.case-facts__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-compact);
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

@media (min-width: 48rem) {
  .case-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .case-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A section of a case study: the head (a label, the h2 and an optional lead) and the body (the
   text, a flow, a quote, a guardrail, cards). One column; from 64rem the head takes columns 1-5
   and stays in view while the body, in columns 7-12, is read, as on /ai/'s focus areas. */
.case-spread__body {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  max-width: var(--width-text);
}

.case-spread__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* The turn of the problem: the sentence that answers it, behind an accent rule. */
.case-spread__turn {
  padding-left: var(--space-5);
  border-left: calc(2 * var(--border)) solid var(--color-accent);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* A guardrail: the rule the product keeps in that part, boxed, with an accent mono label. */
.case-spread__guardrail {
  padding: var(--space-4) var(--space-5);
  border: var(--border) solid var(--color-line-strong);
  border-radius: var(--radius);
}

.case-spread__guardrail-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}

.case-spread__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

@media (min-width: 64rem) {
  .case-spread__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .case-spread__head {
    grid-column: 1 / span 5;
    position: sticky;
    top: var(--space-8);
    margin-bottom: 0;
  }

  .case-spread__body {
    grid-column: 7 / -1;
  }
}

/* A flow of steps, drawn as one line with a node per step: the "line by line" motif in CSS. The
   steps are the list's text, so the generator translates them; the rail and the nodes are
   decoration. The person's step has the accent node. */
.case-flow {
  margin-block: var(--space-2);
  padding: 0;
  list-style: none;
}

.case-flow__step {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-8);
}

.case-flow__step:last-child {
  padding-bottom: 0;
}

/* The rail, from this step's node to the next one's. */
.case-flow__step::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  bottom: calc(-1 * var(--space-3));
  left: calc((var(--space-3) - var(--border)) / 2);
  border-left: var(--border) solid var(--color-line-strong);
}

.case-flow__step:last-child::before {
  content: none;
}

/* The node. */
.case-flow__step::after {
  content: "";
  position: absolute;
  top: calc((var(--text-xs) * var(--leading-snug) - var(--space-3)) / 2);
  left: 0;
  width: var(--space-3);
  height: var(--space-3);
  border: calc(2 * var(--border)) solid var(--color-ink);
  border-radius: var(--radius-round);
  background: var(--color-paper);
}

.case-flow__step--human::after {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.case-flow__actor {
  display: block;
  margin-bottom: var(--space-1);
}

.case-flow__actor--human {
  color: var(--color-accent);
}

/* A sentence quoted from a case study's source, set large between hairlines, with its source. */
.case-quote {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  padding-block: var(--space-6);
  border-block: var(--border) solid var(--color-line);
}

.case-quote__text {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.case-quote__text::before {
  content: "\201C" / "";
  display: block;
  color: var(--color-accent);
  font-size: var(--text-2xl);
  line-height: 1;
}

/* Cards that each lead to a focus area on /ai/: one column, two from 48rem. The whole card is one
   link; its hairline border turns accent on hover, and focus shows the site's outline. */
.focus-cards {
  display: grid;
  gap: var(--grid-gap);
  padding: 0;
  list-style: none;
}

.focus-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  min-height: var(--target-large);
  padding: var(--space-5);
  border: var(--border) solid var(--color-line-strong);
  border-radius: var(--radius);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease-standard);
}

.focus-card:hover {
  border-color: var(--color-accent);
}

.focus-card__title {
  font-size: var(--text-lg);
}

.focus-card:hover .focus-card__title {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.focus-card__text {
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .focus-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The home page's grid of the ten focus areas: each card numbered 01-10, the number its section
   carries on /ai/. A CSS counter with empty alternative text, never written into the HTML, so the
   link's accessible name still begins with the area's title. */
.focus-cards--numbered {
  counter-reset: focus-card;
}

.focus-cards--numbered .focus-card {
  counter-increment: focus-card;
}

.focus-cards--numbered .focus-card::before {
  content: counter(focus-card, decimal-leading-zero) / "";
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

/* The home page's case study teaser: the head (label and h2) beside the body (the lead, at most
   two more facts and the link) from 64rem; stacked below. Each fact opens with the accent tick of
   /ai/'s use cases, the "line by line" motif. */
.teaser__inner {
  display: grid;
  gap: var(--space-8);
}

.teaser__head {
  margin-bottom: 0;
}

.teaser__body {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  max-width: var(--width-text);
}

.teaser__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.teaser__facts {
  justify-self: stretch;
  padding: 0;
  list-style: none;
  border-top: var(--border) solid var(--color-line-strong);
}

.teaser__fact {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: var(--border) solid var(--color-line-strong);
}

.teaser__fact::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + 0.8em);
  left: 0;
  width: var(--space-3);
  height: calc(2 * var(--border));
  background: var(--color-accent);
}

@media (min-width: 64rem) {
  .teaser__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .teaser__head {
    grid-column: 1 / span 5;
  }

  .teaser__body {
    grid-column: 7 / -1;
  }
}

/* How we work: the four delivery steps on one rail. Each step sits under a strong hairline that an
   accent segment starts, numbered 01-04 by a CSS counter (the ol keeps the order for assistive
   technology). One column, two from 48rem, four in a row from 64rem, where the rail runs on
   unbroken. */
.delivery-steps {
  display: grid;
  gap: var(--space-10) var(--grid-gap);
  padding: 0;
  list-style: none;
  counter-reset: delivery-step;
}

.delivery-steps__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--border) solid var(--color-line-strong);
  counter-increment: delivery-step;
}

.delivery-steps__item::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--border));
  left: 0;
  width: var(--space-8);
  height: calc(2 * var(--border));
  background: var(--color-accent);
}

.delivery-steps__title {
  font-size: var(--text-xl);
}

.delivery-steps__title::before {
  content: counter(delivery-step, decimal-leading-zero) / "";
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
}

.delivery-steps__text {
  max-width: var(--width-text);
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .delivery-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .delivery-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .delivery-steps__item {
    padding-inline-end: var(--grid-gap);
  }
}

/* Beyond AI: the four services as rows between hairlines, the title beside its text from 48rem. */
.service-list {
  padding: 0;
  list-style: none;
  border-top: var(--border) solid var(--color-line);
}

.service-list__item {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--border) solid var(--color-line);
}

.service-list__title {
  font-size: var(--text-xl);
}

.service-list__text {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

@media (min-width: 48rem) {
  .service-list__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--grid-gap);
    align-items: baseline;
  }
}

/* The closing call to action on a page: a sentence and a button on the surface band. */
.cta-band__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.cta-band__title {
  max-width: var(--width-heading);
  font-size: var(--text-2xl);
}

.cta-band__text {
  max-width: var(--width-text);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 64rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--grid-gap);
  }

  .cta-band__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* The 404 page: the code, the bilingual h1, then the English and the Slovak block side by side
   from 48rem. */
.not-found {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-section);
}

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

.not-found__title {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-display);
}

.not-found__title-alt {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: 0.6em;
}

.not-found__versions {
  display: grid;
  gap: var(--space-8);
}

.not-found__version {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border) solid var(--color-line);
}

.not-found__links {
  display: grid;
  justify-items: start;
  padding: 0;
  list-style: none;
}

.not-found__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-weight: var(--weight-medium);
}

@media (min-width: 48rem) {
  .not-found__versions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

/* The footer: the company, how to reach it, social profiles and the legal line. */
.site-footer {
  border-top: var(--border) solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__name {
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.site-footer__tagline {
  margin-top: var(--space-1);
}

.site-footer__title {
  margin-bottom: var(--space-3);
}

.site-footer__line {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-compact);
}

.site-footer__address,
.site-footer__list {
  display: grid;
  justify-items: start;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-compact);
  color: var(--color-ink);
  text-decoration-color: var(--color-line-strong);
  overflow-wrap: anywhere;
}

.site-footer__link:hover,
.site-footer__link[aria-current="page"] {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border) solid var(--color-line);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

/* --- Reduced motion ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-art__code,
  .hero-art__link,
  .hero-art__node,
  .hero-art__hub-node,
  .hero-art__mesh {
    animation: none;
  }
}