/* ServiceLine typography system: architectural display + quiet grotesk body. */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display/ClashDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Named roles keep editorial hierarchy stable across every route. */
  --type-display-xl: clamp(3.35rem, 7.1vw, 7.5rem);
  --type-display-lg: clamp(2.7rem, 5.15vw, 5.5rem);
  --type-display-md: clamp(2rem, 3.45vw, 3.7rem);
  --type-section: clamp(1.65rem, 2.45vw, 2.6rem);
  --type-subheading: clamp(1.05rem, 1.35vw, 1.25rem);
  --type-body-lg: clamp(1.0625rem, 1.1vw, 1.25rem);
  --type-body: 1rem;
  --type-meta: 0.75rem;
  --type-eyebrow: 0.6875rem;
  --type-nav: 0.75rem;
  --type-button: 0.6875rem;
  --type-caption: 0.8125rem;

  --leading-display: 0.94;
  --leading-section: 1.02;
  --leading-subheading: 1.18;
  --leading-body: 1.62;
  --leading-body-lg: 1.5;
  --leading-meta: 1.4;

  --tracking-display: -0.035em;
  --tracking-section: -0.025em;
  --tracking-ui: 0.1em;
  --tracking-meta: 0.035em;

  /* Compatibility aliases for existing component hooks. */
  --leading-tight: var(--leading-section);
  --leading-normal: var(--leading-body);
  --tracking-tight: var(--tracking-section);
  --tracking-wide: var(--tracking-ui);

  --measure-body: 39rem;
  --measure-body-narrow: 32rem;
  --measure-display-wide: 15ch;
  --measure-display-compact: 11ch;
}

/* Display XL / Large / Medium / Section Heading. The scale is compact
   enough for photography to retain visual authority. */
.text-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  color: var(--text-primary);
  text-transform: uppercase;
  text-wrap: balance;
  hanging-punctuation: first allow-end last;
}
/* The two largest display sizes carry the brand at Medium weight, not
   Semibold: at 5-7.5rem, Medium reads as refined architectural authority
   (editorial / luxury-real-estate register) where Semibold reads as loud.
   Tighter optical tracking compensates so the caps still lock together as
   one confident mass. Section-scale and smaller stay Semibold for punch. */
.text-display--xxl { font-size: var(--type-display-xl); font-weight: 500; line-height: var(--leading-display); letter-spacing: -0.038em; }
.text-display--xl { font-size: var(--type-display-lg); font-weight: 500; line-height: 0.95; letter-spacing: -0.034em; }
.text-display--lg { font-size: var(--type-display-md); }
.text-display--md { font-size: var(--type-section); }
.text-display--sm { font-size: var(--type-subheading); line-height: var(--leading-subheading); letter-spacing: -0.018em; }

/* On phones the display collapses to a narrower column where Medium can
   look thin against photography — restore a touch of weight there. */
@media (max-width: 767px) {
  .text-display--xxl,
  .text-display--xl { font-weight: 600; letter-spacing: -0.03em; }
}

/* Structural mask for the existing line-reveal system. */
.text-reveal-mask { display: block; overflow: hidden; }
.text-word { display: inline-block; will-change: transform; }

.text-stage-index {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.85;
  color: transparent;
  opacity: 0.14;
  -webkit-text-stroke: 1px var(--color-concrete-300);
  font-size: clamp(5rem, 16vw, 15rem);
  pointer-events: none;
  user-select: none;
}

/* Body / Body Muted: reading text has a consistent, calm measure. */
.text-body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  max-width: var(--measure-body);
  text-wrap: pretty;
}
.text-body--lg {
  font-size: var(--type-body-lg);
  line-height: var(--leading-body-lg);
  max-width: 42rem;
}
.text-body--muted { color: var(--text-muted); }

/* Eyebrow / Metadata / Navigation / Buttons / Captions. */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--accent);
}
.text-eyebrow--muted { color: var(--text-muted); }
.text-meta {
  font-family: var(--font-body);
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  color: var(--text-muted);
  letter-spacing: var(--tracking-meta);
}
.text-subheading {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: 600;
  line-height: var(--leading-subheading);
  letter-spacing: -0.018em;
  text-transform: uppercase;
}
.text-nav,
.text-button {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}
.text-nav { font-size: var(--type-nav); }
.text-button { font-size: var(--type-button); }
.text-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  line-height: var(--leading-meta);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  :root {
    --type-display-xl: clamp(2.6rem, 11vw, 3.8rem);
    --type-display-lg: clamp(2rem, 9vw, 3.2rem);
    --type-display-md: clamp(1.7rem, 7.3vw, 2.2rem);
    --type-section: clamp(1.45rem, 6vw, 1.9rem);
    --type-body-lg: 1rem;
    --type-body: 0.95rem;
    --leading-body: 1.75;
    --type-eyebrow: 0.75rem;
  }
  .text-display { text-wrap: pretty; }
  .text-body { max-width: 100%; }
}