/* QuadBlock — base element defaults & a few brand utilities.
 * Kept light: tokens do the work. Utilities mirror the brand's core motifs
 * (mono eyebrows, WIRED label tags, halftone fields) so cards & kits stay DRY.
 */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--sky); color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Eyebrow: wide-tracked mono kicker (WIRED + Team8) ---- */
.qb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Label tag: WIRED black/colored block label ---- */
.qb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  padding: 5px 9px 4px;
  line-height: 1;
}
.qb-tag--sky    { background: var(--sky);    color: var(--ink); }
.qb-tag--cobalt { background: var(--cobalt); color: var(--white); }
.qb-tag--ember  { background: var(--ember);  color: var(--ink); }

/* ---- Halftone field helpers (removed — brand no longer uses dot texture) ---- */

/* ---- Display headline helper ---- */
.qb-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  text-wrap: balance;
}

/* ---- Angled "shape blocks" (Team8 signature) ----
 * Solid color blocks with one diagonal/chevron edge that interlock to
 * frame text and photos along a shared seam. Pair --right with --left on a
 * 2-up grid so the chevron points into the adjacent media. Generous radius
 * keeps the squircle softness even where the clip cuts.
 */
.qb-block {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
/* Right edge slants inward (block sits LEFT of a photo) */
.qb-block--chevron-r { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%); }
/* Left edge notched to receive the chevron (media sits RIGHT) */
.qb-block--notch-l   { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
/* A single sliced corner — quieter usage for cards/cutouts */
.qb-block--slice-tr  { clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 100%, 0 100%); }
.qb-block--slice-bl  { clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 84%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}