/* Faces of Desire — Base element styles & editorial primitives.
   Imported last from styles.css. */

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand); color: var(--text-on-teal); }

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

/* — Editorial type primitives (utility classes) — */
.fod-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-ui-s);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fod-eyebrow--teal { color: var(--brand); }

.fod-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.fod-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}
.fod-lede {
  font-family: var(--font-body);
  font-size: var(--t-body-xl);
  font-weight: var(--w-regular);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}
.fod-label {
  font-family: var(--font-ui);
  font-size: var(--t-ui-s);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* — Hairline divider — */
.fod-rule { height:1px; border:0; background: var(--border-hairline); margin:0; }

/* — Focus visibility for keyboard users — */
:focus-visible { outline: none; box-shadow: var(--ring); }

/* — Faint film grain overlay helper (apply to a fixed full-screen layer) — */
.fod-grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}