/* ==========================================================================
   ATELIER DH — Typography
   Quiet luxury. Inter for system/utility, Source Serif 4 for editorial.
   ========================================================================== */

/* --- Base --- */
body {
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";      /* Inter stylistic set — alt G/R for a quieter texture */
  font-variant-numeric: tabular-nums;
}

/* --- Headings — sans by default, serif reserved for the editorial moments below --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-primary);
  font-weight: var(--fw-light);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-md);  letter-spacing: 0; }
h4 { font-size: var(--fs-body); font-weight: var(--fw-regular); letter-spacing: 0; }

/* --- Nav Labels: ALL CAPS, Light, widely tracked --- */
.nav-label,
.brxe-nav-menu a,
.nav-primary a {
  font-family: var(--ff-primary);
  font-size: 0.82rem;                 /* ~13 px — +~9% for readable intent */
  font-weight: var(--fw-light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg);
  text-decoration: none;
}

/* --- Micro Labels (section labels, metadata, fact labels) --- */
.micro-label {
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* --- Editorial tagline (Source Serif 4 italic — Studio / Contact intros only) --- */
.tagline {
  font-family: var(--ff-accent);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}

/* --- Body Text — generous measure, soft contrast --- */
.body-text,
.brxe-text {
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.7;
  max-width: var(--max-w-text);
  color: var(--c-fg);
}

/* --- Project Title (overlay on grid cards) --- */
.project-title {
  font-family: var(--ff-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  color: var(--c-fg);
}

/* --- Project Location (sub-label on grid cards) --- */
.project-location {
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* --- Facts Row (Single Project) --- */
.fact-label {
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mute);
}

.fact-value {
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--c-fg);
}

/* --- One-Liner Statement (Single Project) ------------------------------------
   The editorial device of the site. Serif italic, large, calm, spacious.
   Left-aligned by default — let the layout sit naturally on the grid.
   ----------------------------------------------------------------------------*/
.one-liner {
  font-family: var(--ff-accent);
  /* 09.11.2026 (Joe chose option C): capped at 64 px so the photograph leads; phone stays 44 px. Was var(--fs-display) (up to 112 px), line-height 1.05. */
  font-size: clamp(2.75rem, 4.45vw, 4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
  color: var(--c-fg);
  text-wrap: balance;
}

/* --- CTA Links — light weight, wide tracking, thin rule --- */
.cta-link {
  font-family: var(--ff-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 0.35em;
  transition: border-color var(--dur-base) var(--ease-editorial);
}

.cta-link:hover,
.cta-link:focus-visible {
  border-color: var(--c-fg);
}

/* --- Links (global reset) --- */
a {
  color: var(--c-fg);
  text-decoration: none;
}