/* =====================================================================================================
   FLUX TYPE — flux.photography
   The FLUX typography system approved by Dante 2026-11-06 (source of truth:
   FLUX_WORDPRESS/theme/flux/assets/css/flux-type.css). Same fonts, weights, tracking and fluid sizes;
   only the selectors are mapped to this site's markup.
   Inter Display (SIL OFL, self-hosted, /fonts/OFL-Inter.txt) Bold 700 for titles; Courier New stays for
   everything you read or press: nav, body, buttons, option cards, labels, captions, forms.
   The FLUX SVG wordmark and the nav (flux-nav.css) are untouched.
   <html data-type="courier"> (or not loading this file) gives back the all-Courier design.
   ===================================================================================================== */

@font-face { font-family: "Inter Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-display-500.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-display-700.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/inter-display-900.woff2") format("woff2"); }

:root {
	--flux-display: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--flux-track-tight: -0.035em; /* oversized titles */
	--flux-track: -0.02em;        /* titles at reading size */
}

/* ---------- 1. Page titles (H1 of tool pages): oversized, Bold, tight  (= .flux-mark-sm) ---------- */
html:not([data-type="courier"]) h1.flux-title {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(38px, 7vw, 104px);
	line-height: .9;
	letter-spacing: var(--flux-track-tight);
	text-transform: uppercase;
	overflow-wrap: anywhere;
	text-wrap: balance;
	margin-bottom: .22em;
}

/* the one-word 404: full oversized page title  (= .flux-mark) */
html:not([data-type="courier"]) h1.flux-title-xl { font-size: clamp(56px, 11.5vw, 176px); line-height: .86; }

/* ---------- 2. Big tile titles (homepage)  (= .flux-tile .name / .flux-fx-tile.is-main b) ---------- */
html:not([data-type="courier"]) .tile .name {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.12;
	letter-spacing: var(--flux-track);
	text-wrap: balance;
	overflow-wrap: break-word;
}
html:not([data-type="courier"]) .tile.main .name { font-size: clamp(26px, 3vw, 40px); line-height: 1.02; }

/* ---------- 3. Feature card titles: Quick Generate, Contact Sheets, Protocol steps  (= .flux-fx-tile b) ---------- */
html:not([data-type="courier"]) .gen b {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

/* ---------- narrow screens: never overflow ---------- */
@media (max-width: 480px) {
	html:not([data-type="courier"]) h1.flux-title { font-size: clamp(32px, 10.8vw, 72px); } /* long words fit a 320px phone */
	html:not([data-type="courier"]) .gen > div { min-width: 0; }
	html:not([data-type="courier"]) .gen b { font-size: clamp(12.5px, 4vw, 16px); letter-spacing: -0.02em; overflow-wrap: anywhere; } /* two cards per row on a 320px phone (LANDSCAPE, SADDLE STITCH) */
}