/*
 * Hauseit Typography System
 * Modular type scale (major-third ratio, 1.25× from 16px base).
 * All type decisions live here. Reference these variables and classes
 * throughout templates — never hard-code font-size or line-height.
 */

/* ── TYPE SCALE ─────────────────────────────────────────────────────────── */

:root {
	--type-xs:   12px;   /* labels, tiny eyebrows */
	--type-sm:   13px;   /* captions, secondary text */
	--type-base: 16px;   /* body text */
	--type-md:   18px;   /* lead paragraphs */
	--type-lg:   22px;   /* H4 / list headings */
	--type-xl:   28px;   /* H3 */
	--type-2xl:  36px;   /* H2 */
	--type-3xl:  48px;   /* H1 (mobile) */
	--type-4xl:  64px;   /* H1 (desktop) */
	--type-5xl:  88px;   /* hero display (homepage) */

	/* Line-heights by use */
	--lh-display:    1.05;  /* hero headlines — very tight */
	--lh-heading:    1.15;  /* H1, H2 */
	--lh-subheading: 1.3;   /* H3, H4 */
	--lh-body:       1.7;   /* body paragraphs */
	--lh-caption:    1.5;   /* captions */
	--lh-tight:      1.2;   /* labels, buttons */

	/* Letter-spacing by context */
	--tracking-tight:   -0.02em;  /* large display headings */
	--tracking-normal:   0;       /* body text */
	--tracking-wide:     0.04em;  /* small labels, caps */
	--tracking-widest:   0.08em;  /* uppercase eyebrows */
}


/* ── OPTICAL SIZING — CORMORANT GARAMOND ────────────────────────────────── */

/*
 * Cormorant Garamond supports true optical sizing. Use these classes
 * on elements directly rather than relying on tag defaults.
 */

.type-hero {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--type-4xl);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	font-feature-settings: 'liga' 1, 'kern' 1;
}

@media (max-width: 768px) {
	.type-hero {
		font-size: var(--type-3xl);
	}
}

.type-h1 {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: var(--type-4xl);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-tight);
	font-feature-settings: 'liga' 1, 'kern' 1;
}

.type-h2 {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: var(--type-2xl);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-tight);
}

.type-h3 {
	font-family: var(--font-serif);
	font-weight: 300;
	font-size: var(--type-xl);
	line-height: var(--lh-subheading);
}

.type-h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--type-lg);
	line-height: var(--lh-subheading);
}

/* Italic standfirst — lead paragraph below a headline */
.standfirst,
.type-standfirst {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--type-md);
	line-height: var(--lh-body);
	font-feature-settings: 'liga' 1;
	max-width: 42ch;
}

/* Eyebrow / label above a heading */
.eyebrow,
.type-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--type-xs);
	font-weight: 500;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	line-height: var(--lh-tight);
}

/* Caption — below images, supporting detail */
.type-caption {
	font-family: var(--font-sans);
	font-size: var(--type-sm);
	line-height: var(--lh-caption);
	color: rgba(14, 14, 14, 0.55);
}


/* ── INTER VARIABLE FONT FEATURES ───────────────────────────────────────── */

/*
 * Inter has OpenType features that activate optical refinements.
 * Applied at body level so all body text benefits automatically.
 *
 * cv11 = single-storey 'a' (more elegant at text sizes)
 * ss01 = open digits (less ambiguous)
 * ss03 = curved lowercase 'l'
 */

body {
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	text-rendering: optimizeLegibility;
}


/* ── EDITORIAL LINE LENGTHS ─────────────────────────────────────────────── */

/*
 * Constrain line length to prevent over-long lines. These max-widths
 * apply within text-block contexts — do not apply globally or grids break.
 */

.text-block h1,
.text-block h2,
.text-block h3,
.text-block h4 {
	max-width: 18ch;
}

.text-block h1 {
	max-width: 14ch;
}

.text-block p,
.editorial-body p {
	max-width: 64ch;
}

.text-block .standfirst,
.editorial-body .standfirst {
	max-width: 42ch;
}

/*
 * Section headings benefit from max-width to avoid
 * line-breaks at awkward points. Apply to key pages.
 */
.section-headline-constrained {
	max-width: 18ch;
}