/* =========================================================
   TROPICAL LANDSCAPE CONSULTANT — BRAND TYPE
   Per brand guide §04. Font Guide.

   The three brand faces are licensed and self-hosted. Until the
   licensed web files are dropped into site/fonts/ (see the README
   there), each @font-face silently fails and the fallback stack
   takes over — the site renders correctly either way.

   size-adjust / ascent-override are tuned so the swap from
   fallback to real face causes no layout shift.
   ========================================================= */

/* ---- 1. Display: Times NR MT Pro Condensed ----
   Headlines, the wordmark, section titles. Condensed, high-contrast,
   classical. This is the voice of the brand. */
@font-face {
  font-family: "TLC Display";
  src: url("fonts/tlc-display.woff2") format("woff2"),
       url("fonts/tlc-display.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TLC Display";
  src: url("fonts/tlc-display-bold.woff2") format("woff2"),
       url("fonts/tlc-display-bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. Script: Sloop Script Pro ----
   Used ONLY for the word "Consultant" in the lockup and for rare
   one-word display flourishes. Never for sentences, never below
   20px, never in all-caps (the swashes collide). */
@font-face {
  font-family: "TLC Script";
  src: url("fonts/tlc-script.woff2") format("woff2"),
       url("fonts/tlc-script.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- 3. Label: Courier PS Pro Greek Bold ----
   Section numbers, eyebrows, nav, buttons, captions. Always
   uppercase, always widely letterspaced — that spacing IS the
   brand signature (see "01. MAIN LOGO" in the guide). */
@font-face {
  font-family: "TLC Label";
  src: url("fonts/tlc-label.woff2") format("woff2"),
       url("fonts/tlc-label.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   Type role helpers — use these rather than raw font-family,
   so the licensed faces propagate everywhere at once.
   --------------------------------------------------------- */

/* Eyebrow / section label. The guide's most distinctive texture. */
.u-label {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Numbered section label, as in "01. MAIN LOGO" */
.u-label--numbered::before {
  content: attr(data-num) ". ";
}

/* Script accent. Guard rails baked in: minimum size and no caps. */
.u-script {
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  font-size: max(1.25rem, 1em);
  letter-spacing: 0;
  line-height: 1.1;
}

/* The tagline, per guide: GOOD VIBES / GREAT LANDSCAPES */
.u-tagline {
  font-family: var(--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: var(--olive);
}

/* ---------------------------------------------------------
   Wordmark lockup — live-text fallback.
   Used when site/images/brand/logo-main-*.svg is absent, and as
   the accessible text layer behind the SVG when it is present.
   --------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
}
.wordmark__line {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1em;
}
.wordmark__script {
  font-family: var(--script);
  text-transform: none;
  font-size: 0.42em;
  align-self: flex-end;
  margin-top: -0.12em;
  margin-right: 0.06em;
}