/* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */

/* Responsive line breaks: copy that needs a different manual break
   pattern on mobile vs desktop carries both <br class="brk-d"> and
   <br class="brk-m"> inline, and only one set renders per breakpoint. */
.brk-m { display: none; }

@media (max-width: 768px) {
  .brk-d { display: none; }
  .brk-m { display: inline; }
}

@font-face {
  font-family: 'Scto Grotesk A';
  src: url('/assets/fonts/tipografia/scto-grotesk-a-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Scto Grotesk A';
  src: url('/assets/fonts/tipografia/scto-grotesk-a-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Scto Grotesk A';
  src: url('/assets/fonts/tipografia/scto-grotesk-a-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Scto Grotesk A';
  src: url('/assets/fonts/tipografia/scto-grotesk-a-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment';
  src: url('/assets/fonts/tipografia/pp-fragment-serif-3.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  background-color: var(--color-bg-dark); /* fallback before Three.js canvas loads */
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-soft);
  background-color: transparent; /* Three.js canvas provides the background */
  overflow-x: hidden;
}

/* ─── SECTION HEADINGS ──────────────────────────────────────────── */

.section-title,
h1.section-title {
  font-family: var(--font-headline);
  font-size: var(--fs-headline-2);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-heading);
}

/* ─── PAGE HERO ─────────────────────────────────────────────────── */

.page-hero h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-headline-2);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.page-hero h1 em {
  color: var(--color-highlight);
}

/* ─── CASE STUDY ────────────────────────────────────────────────── */

.cs-headline {
  font-family: var(--font-headline);
  font-size: var(--fs-headline-2);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-heading);
}

.cs-headline em {
  color: var(--color-highlight);
}

/* ─── BODY COPY ─────────────────────────────────────────────────── */

.body-large,
.page-hero p,
.cs-summary p {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-tight);
  color: var(--color-muted);
}

.hero-descriptor {
  max-width: 420px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-pink);
  text-wrap: pretty;
}

/* ─── EYEBROW / LABEL ───────────────────────────────────────────── */

.eyebrow,
.cs-role,
.stat-label,
.phase-num,
.section-eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.project-tag {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ─── PROJECT CARD ──────────────────────────────────────────────── */

.project-title {
  font-family: var(--font-family);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-subhead);
}

.project-year {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
}

/* ─── FOOTER CTA EMAIL ──────────────────────────────────────────── */

.footer-email {
  display: block;
  font-family: var(--font-family);
  font-size: var(--fs-headline-1);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  color: var(--color-text-soft);
  transition: color var(--duration-base) var(--ease-smooth);
}

.footer-email:hover {
  color: var(--color-highlight);
}

.footer-eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: calc(var(--spacing) * 8);
}

/* ─── NAV ───────────────────────────────────────────────────────── */

.nav-logo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: var(--color-text-dark);
}

.nav-logo-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-dark);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.nav-links a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
}

.nav-availability {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-cta);
  line-height: var(--lh-uppercase);
  color: var(--color-available);
}

/* ─── METRIC NUMBERS ────────────────────────────────────────────── */

.metric-num {
  font-size: var(--fs-headline-2);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text-soft);
}

.metric-label {
  font-size: var(--fs-body);
  color: var(--color-muted);
}

/* ─── MARQUEE ───────────────────────────────────────────────────── */