/* ============================================================
   BASE — Unreal
   Light resets + base element styling bound to tokens.
   The default canvas is BLACK (dark theme). Add
   data-theme="light" on a wrapper for the light palette.
   ============================================================ */

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

* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display face, uppercase-friendly */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; transition: var(--t-colors); }

img, picture, svg, video { display: block; max-width: 100%; }

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

::selection { background: var(--white); color: var(--ink-900); }
[data-theme="light"] ::selection { background: var(--ink-900); color: var(--white); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

hr { border: none; border-top: var(--stroke-rule) solid var(--border-subtle); }

/* ---- Layout helpers ---- */
.u-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.u-container-lg { max-width: var(--container-2xl); }
.u-container-md { max-width: var(--container-md); }
.u-section { padding-block: var(--section-y); }

/* ---- Logo utility ---- */
/* Transparent logos ship as BLACK. On dark surfaces invert to white. */
.u-logo { display: block; height: auto; }
.u-logo--white { filter: invert(1) brightness(2); }

/* ---- Editorial rule (thin divider w/ label) ---- */
.u-rule { border-top: var(--stroke-rule) solid var(--border-subtle); }

/* ---- Film grain overlay (apply to a full-bleed wrapper) ---- */
.u-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  mix-blend-mode: overlay;
}

/* ---- Duotone image treatment ---- */
.u-img-bw { filter: var(--img-duotone); }