/* ============================================================
   H-BOX — BASE RESET + BRAND MOTIF UTILITIES
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; text-wrap: pretty; }

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

::selection { background: var(--brand-200); color: var(--ink-900); }

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

/* ---- Display / heading helpers ---- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.h-subtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--text-body);
}
.h-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  color: var(--text-brand);
}

/* ---- Editorial accents (furo-inspired) ---- */
/* Italic serif emphasis word set inside a Montserrat display headline */
.h-emph {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
/* Monospace micro-label / kicker / ticker */
.h-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ============================================================
   BRAND MOTIF: Hachures (diagonal red hatching from the logo)
   ============================================================ */
.hbx-hachures {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--brand-500) 0,
    var(--brand-500) 2px,
    transparent 2px,
    transparent 7px
  );
}
.hbx-hachures-soft {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 0,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 2px,
    transparent 2px,
    transparent 8px
  );
}
/* A hachures swatch that fades out — used as a corner accent */
.hbx-hachures-fade {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--brand-500) 0,
    var(--brand-500) 2px,
    transparent 2px,
    transparent 7px
  );
  -webkit-mask-image: linear-gradient(-45deg, #000, transparent 75%);
  mask-image: linear-gradient(-45deg, #000, transparent 75%);
}

/* ============================================================
   BRAND MOTIF: Hexagon (logo geometry)
   ============================================================ */
.hbx-hex {
  clip-path: var(--clip-hex-tall);
  aspect-ratio: 1 / 1;
}

/* Dot grid — sober technical background texture */
.hbx-dotgrid {
  background-image: radial-gradient(var(--ink-200) 1px, transparent 1px);
  background-size: 22px 22px;
}

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