/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

/* ── Hero heading ───────────────────────────────────── */
.hero-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 6vw, 6.4rem);
    font-weight: 400; /* Lighter, more editorial */
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--clr-black);
    text-transform: none; /* Let the HTML control casing for elegance */
    word-break: break-word;
    hyphens: none;
    text-shadow: none; /* Cleaner, no drop shadow */
}

/* ── Subtext ─────────────────────────────────────────── */
.hero-subtext {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 300;
    color: var(--clr-black);
    opacity: 0.7;
    line-height: 1.6;
    max-width: 420px;
}

/* ── Label tag ───────────────────────────────────────── */
.tag-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--clr-black);
    opacity: 0.55;
}

/* ── CTA text ────────────────────────────────────────── */
.cta-text {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Nav typography ──────────────────────────────────── */
.nav-brand-text {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.nav-link-text {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ── Project card typography ─────────────────────────── */
.card-title {
    font-family: var(--font-sans); /* Switch to sans for modern luxury */
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--clr-black);
}

.card-sub {
    font-family: var(--font-serif); /* Serif for category */
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: var(--clr-black);
    opacity: 0.6;
}

/* ── Loader typography ───────────────────────────────── */
.loader-brand {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--clr-ivory);
}

.loader-tagline {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-top: var(--sp-xs);
}