/* Mobile-first: base styles describe the narrow screen with no media query.
   Wider layouts are added only via min-width, at exactly two breakpoints —
   601px (hero lockup fits one line) and 760px (two-column layouts). */

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }
html, body{ background: var(--paper); }

body{
  font-family: var(--font-body);
  color: var(--ink);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Load-bearing: #cennik bleeds its background with width: 100vw, which counts
     the scrollbar. Without this the page scrolls ~15px sideways on desktop. */
  overflow-x: hidden;
}

body::before{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 25% 15%, oklch(85% 0.04 80 / .18), transparent 40%),
    radial-gradient(circle at 80% 70%, oklch(82% 0.05 60 / .14), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .55;
}
body > *{ position: relative; z-index: 1; }

/* The noise layer dithers the gradients; without it this dark a background
   bands into visible steps on 8-bit screens. */
body.palette-dark::before{
  background-image:
    radial-gradient(circle at 22% 12%, oklch(42% 0.05 142 / .22), transparent 46%),
    radial-gradient(circle at 82% 74%, oklch(58% 0.13 108 / .10), transparent 52%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
  opacity: .85;
}

/* Keeps the sticky topbar off section headings jumped to from the nav. */
section[id]{ scroll-margin-top: calc(var(--topbar-h) + 16px); }

a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }

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

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

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Size comes from the component class (.sec-title, .sched-name, …), not the
   element — this sets typeface, weight and vertical rhythm only. */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}