/* ═══ Archivo Variable · self-hosted, wght 100-900 + wdth 62-125 ═══════════
   One family carries the whole page. The width axis is the hierarchy device:
   expanded for the register of an official notice, normal for reading.      */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.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;
}

:root {
  /* ── Ink ───────────────────────────────────────────────────────────────
     Printing ink on absorbent stock never renders as true black.           */
  --ink:          #161a21;
  --ink-2:        #4a505a;
  --ink-3:        #626976;

  /* ── Paper ─────────────────────────────────────────────────────────────
     Cool, faintly blue-grey. Deliberately not warm cream.                  */
  --paper:        #f2f4f6;
  --paper-2:      #eaedf0;

  /* ── Rules ─────────────────────────────────────────────────────────── */
  --rule:         #cbd0d6;
  --rule-strong:  #161a21;

  /* ── Stamp ─────────────────────────────────────────────────────────────
     Oxide red, the ink of a Dienstsiegel. Cool-leaning, never terracotta.
     Budget: five appearances on the page. Never a fill for decoration.     */
  --stamp:        #ac2f22;
  --stamp-deep:   #8d2419;

  /* ── Type scale · modular 1.25, fluid ─────────────────────────────── */
  --t-100:  0.8125rem;
  --t-200:  0.9375rem;
  --t-300:  1.0625rem;
  --t-400:  clamp(1.1875rem, 1.12rem + 0.34vw, 1.328rem);
  --t-500:  clamp(1.375rem, 1.24rem + 0.60vw, 1.660rem);
  --t-600:  clamp(1.625rem, 1.38rem + 1.05vw, 2.076rem);
  --t-700:  clamp(2rem, 1.50rem + 2.20vw, 3.25rem);
  --t-800:  clamp(2.75rem, 1.30rem + 6.30vw, 6rem);

  /* Plakatgrad für die Modulkürzel. Sie sind der zweite Blickfang der Seite
     nach dem Namen, deshalb eigener Grad statt eines Stufe der Textskala.
     Die Obergrenze ist von "FI-AA" bestimmt, dem breitesten Kürzel: es muss
     in die 3 von 12 Spalten der Registerspalte passen. */
  --t-code: clamp(2.1rem, 1.35rem + 3.2vw, 4.25rem);
  --t-code-lead: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);

  /* Linienstärken, gestaffelt. Die Hierarchie der Seite wird von ihnen
     getragen, nicht von Rahmen oder Flächen. */
  --rule-hair:  1px;
  --rule-mid:   2px;
  --rule-heavy: 4px;
  --rule-plate: 6px;

  /* ── Measure ─────────────────────────────────────────────────────────
     Hard rule from the brief: 60-75 characters of running text. Archivo's
     average glyph is narrower than its `0`, so a `ch` value buys roughly
     1.16 characters. 62ch measures out at about 72 characters, 54ch at 63. */
  --measure:      62ch;
  --measure-narrow: 54ch;

  /* ── Grid ────────────────────────────────────────────────────────── */
  --gutter:       clamp(1rem, 2.2vw, 2rem);
  --container:    1240px;
  --pad-x:        clamp(1.25rem, 4.5vw, 3.5rem);

  /* ── Vertical rhythm ─────────────────────────────────────────────── */
  --sec-y:        clamp(4.5rem, 3rem + 6.5vw, 9rem);

  /* ── Motion ──────────────────────────────────────────────────────────
     Strong curves. The CSS defaults lack the punch that reads as
     intentional, and ease-in is never used on entrances.                  */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-rule:    cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:    140ms;
  --dur-hover:    200ms;
  --dur-enter:    620ms;
  --dur-rule:     540ms;
}

/* ═══ Reset ══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body, h1, h2, h3, h4, p, figure, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul { list-style: none; }

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

button { font: inherit; color: inherit; }

/* Laid lines were tried here and cut. Paper's tooth is random fibre; any
   repeating gradient fine enough to suggest it is invisible, and any strength
   you can actually see reads as banding on a screen. The material comes from
   ink weight instead: the 6px nameplate rule, the 4px section rules, and the
   poster-scale module codes. */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-300);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══ Links ══════════════════════════════════════════════════════════════
   Hover is a rule wiping in from the left, borrowed from the gazette's own
   vocabulary, rather than a colour fade.                                   */

a {
  color: inherit;
  text-decoration: none;
}

.sec a:not(.btn),
.foot a:not(.btn),
.bar__nav a {
  position: relative;
  display: inline-block;
}

.sec a:not(.btn)::after,
.foot a:not(.btn)::after,
.bar__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1px;
  background: var(--stamp);
  clip-path: inset(0 100% 0 0);
}

@media (hover: hover) and (pointer: fine) {
  .sec a:not(.btn)::after,
  .foot a:not(.btn)::after,
  .bar__nav a::after {
    transition: clip-path var(--dur-hover) var(--ease-out);
  }
  .sec a:not(.btn):hover::after,
  .foot a:not(.btn):hover::after,
  .bar__nav a:hover::after {
    clip-path: inset(0 0 0 0);
  }
}

a:focus-visible::after { clip-path: inset(0 0 0 0); }

/* ═══ Focus ══════════════════════════════════════════════════════════════ */

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

::selection {
  background: var(--stamp);
  color: var(--paper);
}

/* ═══ Utilities ══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: -100%;
  left: var(--pad-x);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-200);
  font-weight: 600;
}

.skip:focus-visible {
  top: 0.75rem;
  outline-color: var(--paper);
}