/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * Hallmark · genre: editorial · macrostructure: Index-First · theme: Grid
 * theme axes: light paper / grotesk-heavy-lowercase / ultramarine
 * enrichment: none (typography + Grid marks kit) · nav: N9 · footer: Ft4
 * tone: utilitarian/technical · anchor hue: ultramarine oklch(45% 0.19 264)
 * audience: general visitors — a project index, no sales CTA
 *
 * slop test: 58 / 58 · contrast: pass (40–41) · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 *
 * Every figure on this page is real Google Analytics 4 data for
 * 2025-08-07 → 2026-08-06 (12 months), rounded. Monthly averages are
 * the 12-month total divided by 12. The ranking follows the exact
 * values. Nothing is invented.
 */

@import url("tokens.css");

/* ====================================================================
   Base
   ==================================================================== */

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

html, body {
  overflow-x: clip;              /* clip, never hidden */
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

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

:focus-visible {
  outline: var(--rule-ink) solid var(--color-focus);
  outline-offset: 3px;
  /* Focus rings appear instantly — never transitioned. */
}

/* ====================================================================
   Shell + the exposed 12-column hairline grid
   The rails are content, not scaffolding. They stay visible everywhere,
   including across the plate.
   ==================================================================== */

.shell {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.rails {
  position: absolute;
  inset-block: 0;
  inset-inline: var(--gutter);
  z-index: var(--z-ground);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-rule) 0,
    var(--color-rule) 1px,
    transparent 1px,
    transparent var(--rail-step)
  );
}

.grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
}

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

/* Air is structural — bands breathe, and never all by the same amount. */
.band { position: relative; }
.band--head  { padding-block: var(--space-2xl) var(--space-3xl); overflow: clip; }
.band--index { padding-block: var(--space-2xl) var(--space-2xl); }
.band--rest  { padding-block: var(--space-3xl) var(--space-2xl); }

@media (min-width: 60rem) {
  .band--head  { padding-block: var(--space-3xl) var(--space-4xl); }
  .band--index { padding-block: var(--space-3xl) var(--space-3xl); }
  .band--rest  { padding-block: var(--space-4xl) var(--space-3xl); }
}

/* ====================================================================
   Type roles
   ==================================================================== */

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-transform: lowercase;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-display-s); }

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

/* The label voice — quiet caps counterpoint to the giant lowercase display.
   Sets captions, table headers, meta rows, folios and units.
   It never sits above a heading as a kicker. */
.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.3;
}

.lede {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink);
}

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

.tnum { font-variant-numeric: tabular-nums; }

/* ====================================================================
   The marks kit — constructed geometry, aligned to the grid or to
   type metrics. Nothing floats freehand.
   ==================================================================== */

/* The period square — a solid square where a full stop would fall. */
.period {
  display: inline-block;
  width: 0.52em;
  height: 0.52em;
  background: var(--color-accent);
  vertical-align: baseline;
  margin-inline-start: 0.06em;
}

/* The cropped numeral — art, not a heading. Hangs past the band edge.
   Suppressed below 60rem, where it would sit behind the display type. */
.numeral { display: none; }

@media (min-width: 60rem) {
  .numeral { display: block; }
}

.numeral {
  position: absolute;
  inset-block-start: var(--space-2xl);
  inset-inline-end: calc(var(--gutter) * -0.55);
  z-index: var(--z-ground);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-numeral);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--color-ink) 8%, transparent);
  user-select: none;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* The register — print registration crosshair, used as a folio device. */
.register {
  position: relative;
  display: inline-block;
  inline-size: 16px;
  block-size: 16px;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  flex: none;
}
.register::before,
.register::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
}
.register::before { inset-block: -4px; inset-inline-start: 50%; inline-size: 1px; transform: translateX(-50%); }
.register::after  { inset-inline: -4px; inset-block-start: 50%; block-size: 1px; transform: translateY(-50%); }

/* The border chevron — signage-style arrow drawn from borders alone. */
.chevron-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  transition: transform var(--dur-base) var(--ease-out);
}
.chevron {
  inline-size: 8px;
  block-size: 8px;
  border-top: var(--rule-ink) solid var(--color-accent);
  border-right: var(--rule-ink) solid var(--color-accent);
  transform: rotate(45deg);
}

/* The bar — data-ful stepped bars, set against real numbers. */
.bar-track {
  position: relative;
  block-size: var(--rule-signal);
  inline-size: 100%;
  background: var(--color-paper-3);
}
.bar-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--bar, 0%);
  background: var(--color-accent);
}

/* ====================================================================
   Skip link
   ==================================================================== */

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: var(--z-skip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.skip:focus {
  inset-inline-start: var(--gutter);
  inset-block-start: var(--space-sm);
}

/* ====================================================================
   N9 · Edge-aligned minimal nav
   Wordmark hard-left, language toggle hard-right, nothing between.
   The space IS the design — do not fill it with a link row.
   ==================================================================== */

.nav {
  position: relative;
  z-index: var(--z-nav);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Language toggle — the single right-hand affordance N9 allows. */
.lang {
  display: flex;
  align-items: stretch;
  border: var(--rule-hair) solid var(--color-ink);
  flex: none;
}

.lang__btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  min-block-size: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.lang__btn + .lang__btn { border-inline-start: var(--rule-hair) solid var(--color-ink); }

@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { background: var(--color-paper-3); }
}
.lang__btn:active { background: var(--color-paper-3); }
.lang__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.lang__btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

@media (pointer: coarse) {
  .lang__btn { min-block-size: 44px; }
}

/* ====================================================================
   Header band
   ==================================================================== */

.head__title { grid-column: 1 / -1; }

.head__lede {
  grid-column: 1 / -1;
  margin-block-start: var(--space-lg);
  max-inline-size: 62ch;
}

.head__meta {
  grid-column: 1 / -1;
  margin-block-start: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-ink) solid var(--color-ink);
}

@media (min-width: 60rem) {
  .head__title { grid-column: 1 / 10; }
  .head__lede  { grid-column: 1 / 7; }   /* running text never spans past 6 */
  .head__meta  { grid-column: 1 / 10; }
}

/* ====================================================================
   The plate — the one poster moment. A full-bleed band flooded with
   the signal ink. Zero radius, zero shadow, butts flush. Only one.
   ==================================================================== */

.plate {
  position: relative;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  overflow: clip;
  padding-block: var(--space-2xl);
}

@media (min-width: 60rem) {
  .plate { padding-block: var(--space-3xl); }
}

/* The rails continue across the plate — the grid is never interrupted. */
.plate .rails {
  background-image: repeating-linear-gradient(
    to right,
    var(--color-plate-rail) 0,
    var(--color-plate-rail) 1px,
    transparent 1px,
    transparent var(--rail-step)
  );
}

.plate .label { color: color-mix(in oklab, var(--color-accent-ink) 78%, transparent); }

.plate__caption {
  grid-column: 1 / -1;
  padding-block-end: var(--space-lg);
}

.figure {
  grid-column: 1 / -1;
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-plate-rail);
}

.figure__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-figure);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}

.figure__unit { display: block; margin-block-start: var(--space-xs); }
.figure__avg  { display: block; margin-block-start: var(--space-2xs); }

.plate__note {
  grid-column: 1 / -1;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-plate-rail);
}

@media (min-width: 60rem) {
  .plate__caption { grid-column: 1 / 7; }
  .figure         { grid-column: span 4; }
  .plate__note    { grid-column: 1 / 8; }
}

/* ====================================================================
   The index — 10 ranked rows riding the twelve columns.
   The links themselves are the buttons.
   ==================================================================== */

.index__head { grid-column: 1 / -1; }

.index__note {
  grid-column: 1 / -1;
  margin-block-start: var(--space-md);
  max-inline-size: 58ch;
}

@media (min-width: 60rem) {
  .index__head { grid-column: 1 / 9; }
  .index__note { grid-column: 1 / 7; }
}

.index__list {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-block-start: var(--rule-ink) solid var(--color-ink);
}

/* Column header — label voice setting table headers. Desktop only:
   below 60rem each row carries its own inline unit instead. */
.index__colhead { display: none; }

@media (min-width: 60rem) {
  .index__colhead {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-block-start: var(--space-xl);
    padding-block: var(--space-sm);
    border-block-start: var(--rule-ink) solid var(--color-ink);
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
  .index__colhead > :nth-child(1) { grid-column: 1 / 2; }
  .index__colhead > :nth-child(2) { grid-column: 2 / 8; }
  .index__colhead > :nth-child(3) { grid-column: 8 / 10; }
  .index__colhead > :nth-child(4) { grid-column: 10 / 13; text-align: end; }

  .index__list { margin-block-start: 0; border-block-start: 0; }
}

.row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}

.row__num {
  grid-column: 1 / 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.35em;
}

.row__main { grid-column: 2 / 3; grid-row: 1; }

.row__arrow { grid-column: 3 / 4; grid-row: 1; padding-block-start: 0.5em; }

.row__desc {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-inline-size: 60ch;
}

/* Below 60rem the market tag and the figures share one meta line.
   At 60rem the wrapper goes `display: contents` so both become direct
   grid items and take their own columns on the twelve. */
.row__meta {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
}

.row__data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
}

.row__users {
  font-weight: 700;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row__avg { white-space: nowrap; }
.row__tag { white-space: nowrap; }

.row__bar { grid-column: 2 / 4; grid-row: 3; }

@media (min-width: 60rem) {
  .row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    row-gap: var(--space-sm);
    align-items: start;
    padding-block: var(--space-lg);
  }
  .row__meta  { display: contents; }
  .row__num   { grid-column: 1 / 2;   grid-row: 1; padding-block-start: 0.4em; }
  .row__main  { grid-column: 2 / 8;   grid-row: 1; padding-inline-end: var(--space-lg); }
  .row__tag   { grid-column: 8 / 10;  grid-row: 1; padding-block-start: 0.4em; }
  .row__data  { grid-column: 10 / 13; grid-row: 1; display: block; text-align: end; position: relative; }
  .row__arrow { grid-column: 1 / 2;   grid-row: 2; justify-self: start; padding: 0; }
  .row__bar   { grid-column: 10 / 13; grid-row: 2; }
  .row__users { font-size: var(--text-lg); }
  .row__avg   { display: block; margin-block-start: var(--space-2xs); }
  /* Visually the column header carries the unit; keep it in the
     accessibility tree so every row still announces one. */
  .row__unit {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* Hover geometry — the chevron answers the pointer with a snapped
   transform along its axis. Two primitives on this page, no more. */
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: var(--color-paper-2); }
  .row:hover .chevron-wrap { transform: translateX(8px); }
}
.row:focus-visible { background: var(--color-paper-2); }
.row:focus-visible .chevron-wrap { transform: translateX(8px); }
.row:active { background: var(--color-paper-3); }

/* ====================================================================
   Rest of the network — a comparative stepped-bar figure on real data.
   ==================================================================== */

.rest__head { grid-column: 1 / -1; }

.rest__body {
  grid-column: 1 / -1;
  margin-block-start: var(--space-lg);
  max-inline-size: 60ch;
}

.rest__figure {
  grid-column: 1 / -1;
  margin-block-start: var(--space-xl);
  border-block-start: var(--rule-ink) solid var(--color-ink);
}

@media (min-width: 60rem) {
  .rest__head   { grid-column: 1 / 8; }
  .rest__body   { grid-column: 1 / 7; }
  .rest__figure { grid-column: 7 / 13; margin-block-start: 0; }
}

.step {
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.step__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-block-end: var(--space-sm);
}

.step__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step--minor .bar-fill { background: color-mix(in oklab, var(--color-accent) 34%, var(--color-paper-3)); }

/* ====================================================================
   Ft4 · Dense typographic colophon
   One block of small credits, source and contact. No link columns,
   no social row, no copyright tail.
   ==================================================================== */

.colophon {
  border-block-start: var(--rule-ink) solid var(--color-ink);
  padding-block: var(--space-2xl) var(--space-xl);
}

.colophon__folio {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.colophon__text {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-muted);
}

.colophon__text p + p { margin-block-start: var(--space-md); }

.colophon__contact {
  grid-column: 1 / -1;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

@media (min-width: 60rem) {
  .colophon__folio   { grid-column: 1 / 3; margin-block-end: 0; }
  .colophon__text    { grid-column: 3 / 9; }
  .colophon__contact { grid-column: 9 / 13; margin-block-start: 0; border-block-start: 0; padding-block-start: 0; display: block; }
  .colophon__contact a { display: block; }
  .colophon__contact a + a { margin-block-start: var(--space-sm); }
}

.link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--color-accent); }
}
.link:active { text-decoration-color: var(--color-accent); }

/* ====================================================================
   Bilingual PL / EN. Default PL; JS flips :root[data-lang].
   Without CSS, both languages remain readable — a safe degradation.
   ==================================================================== */

:root[data-lang="pl"] .i18n-en { display: none; }
:root[data-lang="en"] .i18n-pl { display: none; }

/* ====================================================================
   Reduced motion — kills transitions and smooth scroll.
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .rails, .numeral, .lang, .skip { display: none; }
  .plate { background: var(--color-paper); color: var(--color-ink); }
}