/* =====================================================================================================
   FLUX TYPE — Inter Display headings (approved by Dante 2026-11-06)
   Inter Display (SIL OFL, self-hosted, Bold 700 / Black 900) for titles and statements;
   Courier New stays for everything you read or press: body, nav, buttons, links, labels, captions,
   dates, metadata, forms, H3/H4.
   Every rule is scoped to html:not([data-type="courier"]); setting data-type="courier" on <html>
   (or not loading this file) gives back the original all-Courier design.
   Sizes are fluid (clamp + vw) so type scales continuously as the window is resized.
   ===================================================================================================== */

: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): oversized, black, tight ---------- */
html:not([data-type="courier"]) .flux-mark,
html:not([data-type="courier"]) h1.flux-mark {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(56px, 11.5vw, 176px);
	line-height: .86;
	letter-spacing: var(--flux-track-tight);
	text-transform: uppercase;
}
html:not([data-type="courier"]) .flux-mark-sm,
html:not([data-type="courier"]) h1.flux-mark-sm {
	font-size: clamp(38px, 7vw, 104px);
	line-height: .9;
	letter-spacing: var(--flux-track-tight);
	overflow-wrap: anywhere;
	text-wrap: balance;
}
/* the DANTE SISOFO wordmark is the approved SVG — untouched */
html:not([data-type="courier"]) .flux-name.flux-mark:has(svg) { letter-spacing: 0; } /* only the SVG wordmark — text titles like START HERE stay oversized */

/* page / essay / lesson titles (single posts, pages, courses) */
html:not([data-type="courier"]) h1.wp-block-post-title,
html:not([data-type="courier"]) .flux-page-title,
html:not([data-type="courier"]) .flux-lesson-title,
html:not([data-type="courier"]) .flux-course-hero h1 {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(34px, 5.6vw, 76px);
	line-height: 1.0;
	letter-spacing: var(--flux-track-tight);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;
	max-width: 20ch;
}
html:not([data-type="courier"]) .flux-course-hero h1.flux-mark { max-width: none; }

/* ---------- 2. Section headings (H2) inside writing; essay / blog post titles in lists ---------- */
html:not([data-type="courier"]) .flux-content h2,
html:not([data-type="courier"]) .wp-block-post-content h2 {
	font-family: var(--flux-display);
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.1;
	letter-spacing: var(--flux-track);
	text-transform: none;
	text-wrap: balance;
	margin-top: 1.8em;
}
html:not([data-type="courier"]) .wp-block-post-title:not(h1),
html:not([data-type="courier"]) .flux-stream-t,
html:not([data-type="courier"]) .flux-lead-title,
html:not([data-type="courier"]) .flux-card-title,
html:not([data-type="courier"]) .flux-feat-t,
html:not([data-type="courier"]) .flux-first-t,
html:not([data-type="courier"]) .flux-ps-t {
	font-family: var(--flux-display);
	font-weight: 700;
	letter-spacing: var(--flux-track);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}
html:not([data-type="courier"]) .flux-stream-t { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.06; }
html:not([data-type="courier"]) .flux-lead-title.wp-block-post-title { font-size: clamp(30px, 4.8vw, 60px); line-height: 1.0; letter-spacing: var(--flux-track-tight); max-width: 18ch; }
/* plain lists of posts (Writing rows, search, collections): bold display at a reading size */
html:not([data-type="courier"]) .flux-rows .wp-block-post-title { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.2; }

/* ---------- 3. Statements and featured quotations: Black ---------- */
html:not([data-type="courier"]) .flux-home-sentence,
html:not([data-type="courier"]) .flux-lead-sentence,
html:not([data-type="courier"]) .flux-note blockquote,
html:not([data-type="courier"]) .flux-note blockquote p,
html:not([data-type="courier"]) .flux-bt-drawn a,
html:not([data-type="courier"]) .flux-content blockquote p {
	font-family: var(--flux-display);
	font-weight: 900;
	letter-spacing: var(--flux-track);
	text-wrap: balance;
}
/* homepage line beside the name: lighter + smaller so DANTE SISOFO leads (Dante, 2026-11-06) */
html:not([data-type="courier"]) .flux-home-sentence { font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; max-width: 16ch; }
html:not([data-type="courier"]) .flux-bt-drawn a { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.02; }
html:not([data-type="courier"]) .flux-content blockquote p { font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; }

/* ---------- 4. Homepage feature titles ---------- */
html:not([data-type="courier"]) .flux-lead-index b,
html:not([data-type="courier"]) .flux-fx-tile b,
html:not([data-type="courier"]) .flux-learn-go b,
html:not([data-type="courier"]) .flux-pp-head b,
html:not([data-type="courier"]) .flux-fv-title,
html:not([data-type="courier"]) .flux-way-t {
	font-family: var(--flux-display);
	font-weight: 700;
	letter-spacing: var(--flux-track);
}
html:not([data-type="courier"]) .flux-lead--e .flux-lead-index b { font-size: clamp(20px, 2.4vw, 32px); }
html:not([data-type="courier"]) .flux-fx-tile b { font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -0.01em; }
html:not([data-type="courier"]) .flux-fx-tile.is-main b { font-size: clamp(26px, 3vw, 40px); letter-spacing: var(--flux-track); }
html:not([data-type="courier"]) .flux-learn-go b { font-size: clamp(18px, 1.8vw, 24px); }
html:not([data-type="courier"]) .flux-pp-head b { font-size: 16px; }
html:not([data-type="courier"]) .flux-fv-title { font-size: clamp(18px, 2vw, 26px); text-transform: none; line-height: 1.12; }
html:not([data-type="courier"]) .flux-way-t { font-size: clamp(20px, 2vw, 26px); }

/* ---------- 5. Photography archive: years ---------- */
html:not([data-type="courier"]) .flux-tl-yh b,
html:not([data-type="courier"]) .flux-ca-year header b,
html:not([data-type="courier"]) .flux-year > summary b,
html:not([data-type="courier"]) .flux-nb-year > summary b {
	font-family: var(--flux-display);
	font-weight: 700;
	letter-spacing: var(--flux-track-tight);
	line-height: .9;
}
html:not([data-type="courier"]) .flux-tl-yh b { font-size: clamp(48px, 8vw, 120px); }
html:not([data-type="courier"]) .flux-ca-year header b { font-size: clamp(36px, 5vw, 72px); }
html:not([data-type="courier"]) .flux-year > summary b,
html:not([data-type="courier"]) .flux-nb-year > summary b { font-size: clamp(24px, 2.6vw, 34px); }

/* ---------- 6. Collections, Learn, courses, books ---------- */
html:not([data-type="courier"]) .flux-col-mark,
html:not([data-type="courier"]) .flux-col-head h1,
html:not([data-type="courier"]) .flux-cf-title,
html:not([data-type="courier"]) .flux-step-t,
html:not([data-type="courier"]) .flux-lix-h,
html:not([data-type="courier"]) .flux-shelf-head h2,
html:not([data-type="courier"]) .flux-path-list .flux-step-t,
html:not([data-type="courier"]) .flux-book-body h4,
html:not([data-type="courier"]) .flux-tile .name,
html:not([data-type="courier"]) .flux-lib .flux-card h3,
html:not([data-type="courier"]) .flux-paths h3 {
	font-family: var(--flux-display);
	font-weight: 700;
	letter-spacing: var(--flux-track);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}
html:not([data-type="courier"]) .flux-cf-title { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.02; letter-spacing: var(--flux-track-tight); text-transform: uppercase; }
html:not([data-type="courier"]) .flux-step-t { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.15; }
html:not([data-type="courier"]) .flux-book-body h4 { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.12; }
html:not([data-type="courier"]) .flux-tile .name { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.12; }

/* ---------- Courier stays (made explicit, so nothing above leaks into it) ---------- */
html:not([data-type="courier"]) h3:not(.flux-cf-title):not(.flux-card-title),
html:not([data-type="courier"]) h4:not(.flux-book-body h4),
html:not([data-type="courier"]) .flux-sec-head,
html:not([data-type="courier"]) .flux-label,
html:not([data-type="courier"]) .flux-res-h,
html:not([data-type="courier"]) .flux-books-h,
html:not([data-type="courier"]) .flux-tl-yh span,
html:not([data-type="courier"]) .flux-search-title,
html:not([data-type="courier"]) .flux-pnav-h {
	font-family: "Courier New", Courier, monospace;
}
html:not([data-type="courier"]) .flux-lib .flux-card h3,
html:not([data-type="courier"]) .flux-paths h3 { font-family: var(--flux-display); }


/* ---------- narrow screens: never overflow ---------- */
@media (max-width: 480px) {
	html:not([data-type="courier"]) .flux-mark,
	html:not([data-type="courier"]) h1.flux-mark { font-size: clamp(32px, 10.8vw, 72px); } /* "PHOTOGRAPHS" fits a 320px phone */
	html:not([data-type="courier"]) h1.wp-block-post-title,
	html:not([data-type="courier"]) .flux-page-title,
	html:not([data-type="courier"]) .flux-lesson-title { font-size: clamp(30px, 9vw, 40px); max-width: none; }
}

/* Learn: the intro sits to the right of LEARN (like the homepage), stacks on phones */
.flux-learn-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 48px; }
.flux-learn-hero > .flux-lede { flex: 0 1 44ch; margin: 0 0 6px; }