/* The public site's stylesheet (AC-M0-W8-01, AC-M0-W8-04).
 *
 * Cubist / Art Deco (D-036), expressed through STRUCTURE — rules, angles, faceted dividers,
 * asymmetry and a strong grid — never by applying period ornament on top of a generic layout.
 * Photography carries the page and chrome recedes: no decorative gradients, no glassmorphism,
 * no motion for its own sake.
 *
 * EVERY VALUE COMES FROM A TOKEN. No component reads a hue and no component invents a spacing
 * value (§3.3: if a value is needed that is not on the scale, the scale is wrong and the
 * DOCUMENT is amended — not this file).
 *
 * NO EXTERNAL REQUESTS. No @import of a font service, no CDN, no remote asset. That is what
 * keeps D-013's no-cookie-banner position true, and AC-M0-W8-03 asserts the SET of external
 * hosts in the rendered page is empty.
 */
/* THE @import CHAIN MOVED INTO base.html AS THREE <link> TAGS (W7c).
 *
 * This file used to `@import url('tokens.css')` and `@import url('app.css')`. That worked, and
 * it hid two of the three stylesheets from every gate that reads template source -- and it made
 * the browser discover 30 KB of component CSS only after parsing this file.
 *
 * base.html now links tokens, app and main in that order, which is the order the imports
 * produced. THIS FILE MUST REMAIN LAST: `body` is declared here and in app.css and in nothing
 * else, so its rule depends on coming after. Do not reorder the links without re-measuring
 * that overlap. */

/* --- reset, only what the design actually needs ------------------------------------------ */

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  /* Polish runs 10-20% longer than English (§4). Never let the browser hyphenate its way out
   * of a layout that should have been elastic in the first place. */
  text-wrap: pretty;
}

/* --- keyboard access: non-negotiable baseline (§2) ---------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -10);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border: var(--border-hairline) solid var(--color-border);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-2);
}

/* --- typography does the structural work -------------------------------------------------- */

/* AC-M6-W3-03. `text-transform: uppercase` AND `h4` come from the design package, which
 * sets both on `h1, h2, h3, h4`. Neither arrived in M5-W1 and the reason is recorded in
 * app.css's HOME PAGE banner: the port kept OUR rules for the 59 shared selectors, on the
 * grounds that "the tokens are what carry the new look". Sound for components — and
 * `text-transform` is NOT a token, so the heading treatment fell through the gap between
 * *tokens carry the look* and *shared rules keep ours*. The approved mockup carries
 * uppercase 23 times; the component headings (.c-journal__title, .c-section__head h2,
 * .c-card__heading) already had it, which is why only the GENERIC headings were wrong and
 * why nobody saw it.
 *
 * TWO VALUES IN THE PACKAGE'S RULE ARE DELIBERATELY NOT TAKEN HERE: its `letter-spacing:
 * 0.03em` (ours is --tracking-tight) and its `margin: 0` (ours keeps a bottom margin).
 * Both change every heading on every page and neither is what this criterion asked for;
 * they are reported as measured differences for a ruling, not changed on the way past. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

/* AC-M6-W12-06. EVERY STEP DOWN ONE. Marcin: "rozmiary nagłówków są generalnie o wiele za
 * duże, niech będą takie jak na SG".
 *
 * WHY THIS WAS NEVER CAUGHT BY LOOKING. `D-087` makes the delivery the visual reference, and
 * the delivery HAS NO GENERIC HEADING SCALE — its `h1, h2, h3, h4` rule sets family, weight,
 * line-height, letter-spacing, transform and margin, and NO font-size; there is no bare `h1 {}`
 * rule in the package at all. Every heading size it ships is on a component:
 * `.c-section__head h2` and `.c-journal__title` at `--text-lg`, `.c-carousel__body h1` at
 * `--text-2xl`. So these three values are ours, invented, and there was never anything to
 * compare them against.
 *
 * `--text-3xl` COULD NOT HAVE BEEN VALIDATED. It sized exactly one thing — the generic `h1` —
 * and `AC-M5-W6-04` made the home page's only `h1` visually hidden for `R-054`. The reference
 * page never puts that step on screen, so no amount of looking at it would have shown the
 * problem. It was not observation that failed; there was nothing to observe.
 *
 * THE RULING IS THAT THE BIGGEST THING ON ANY PAGE IS `--text-2xl`, which is what the home
 * page's largest heading already is. A page title and the hero landing on the same step is the
 * point rather than a collision: they never appear together, because the home page is the only
 * page with a hero and its own `h1` is hidden. */
h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.15em;
}

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

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

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- the M0 page shell lived here and has been RETIRED (AC-M1-W7b-02) ----------------------
 *
 * `.shell`, `.container`, `.masthead*`, `.locale-switch*`, `.page` and `.colophon*` were this
 * file's own vocabulary from M0-W8, when the shell was all there was. W7b adopts the delivered
 * component vocabulary -- `.c-shell`, `.c-header`, `.c-nav`, `.c-locale`, `.l-page`, `.c-footer`
 * -- because the package's markup and class names are the deliverable, and running both would
 * have meant two shells drifting apart.
 *
 * DELETED RATHER THAN LEFT IN PLACE. Every one of these selectors matched nothing after
 * base.html was rewritten, and a stylesheet full of rules for markup that no longer exists is
 * the CSS form of the component nobody imports (RC-072). The behaviour they carried is not
 * lost: the locale switcher's "reachable without opening a menu" requirement now sits on
 * `.c-locale`, and the reasoning moved with it into base.html where the markup is.
 */

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

/* Nothing in the interface depends on motion to be understood (§3.6), so the transitions are
 * added only where they are welcome rather than removed where they are not. */
@media (prefers-reduced-motion: no-preference) {
  .masthead__nav a,
  .locale-switch__option,
  a {
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }
}