/* base.css — layer order is declared here, once, for the whole site. */
@layer tokens, base, layout, components, sections;

/* --- Self-hosted faces. Two Ubuntu weights, three Poppins. No others. ----- */
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Reset: only what we actually need. ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;              /* CSS only — never a JS scroll library */
  scroll-padding-block-start: calc(var(--pwp-header-h-condensed) + var(--pwp-space-5));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--pwp-bg);
  color: var(--pwp-fg);
  font-family: var(--pwp-ff-body);
  font-size: var(--pwp-fs-body);
  line-height: var(--pwp-lh-body);
  font-weight: var(--pwp-fw-regular);
  padding-block-end: var(--pwp-stickybar-h);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display weights follow 03-design-system/02-typography.md: H1/H2 are Ubuntu 700,
   H3/H4 step down to 500. One global heading weight flattened the whole scale. */
h1, h2, h3, h4 {
  font-family: var(--pwp-ff-display);
  text-wrap: balance;                   /* kills headline widows — craft rubric §4 */
}
h1, h2 { font-weight: var(--pwp-fw-bold); }
h3, h4 { font-weight: var(--pwp-fw-medium); }


p { text-wrap: pretty; max-width: 68ch; }

/* Numbers are typography here, not text: never let figures shimmy. */
.pwp-num, [data-pwp-count], table td { font-variant-numeric: tabular-nums; }

a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

img, svg, video { display: block; max-inline-size: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(a):focus-visible,
:where(button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--pwp-focus);
  outline-offset: 2px;
  border-radius: var(--pwp-radius-xs);
}

/* Accent fragment inside headings: visual emphasis, still semantic. */
em.pwp-accent-word {
  font-style: normal;
  color: var(--pwp-accent-text);
}

/* Icon sprite host: symbols only, takes no space and is never painted. */
.pwp-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }