/* ==========================================================================
   INESJ — Tokens
   Fonts · colour backdrops · type scale · spacing · motion
   See docs/INESJ-System.md §3 and §5.
   ========================================================================== */

/* Fonts — self-hosted, SIL Open Font License (see assets/fonts/OFL-*.txt) --- */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 62% 112%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 62% 112%;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The INESJ signature: Jost ExtraBold (geometric, Futura lineage). One small
   file, preloaded. */
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-extrabold-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-adjusted fallbacks: while Archivo loads, Arial is scaled to the same
   width so headings and statements do not jump when the font swaps in. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica");
	font-weight: 400 599;
	size-adjust: 100%;
}

@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
	font-weight: 600 900;
	size-adjust: 100%;
}

/* Animatable page colours (the backdrop "room") ---------------------------- */

@property --bg {
	syntax: "<color>";
	inherits: true;
	initial-value: #eeeae3;
}

@property --fg {
	syntax: "<color>";
	inherits: true;
	initial-value: #131211;
}

@property --accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #d8321e;
}

:root {
	/* Palette ------------------------------------------------------------ */
	--c-paper: #eeeae3;      /* fibre paper — Landing, Work */
	--c-ink: #131211;        /* text, wordmark — Talents, viewfinder */
	--c-safelight: #8e1f14;  /* the darkroom — About */
	--c-studio: #cbccc6;     /* seamless grey — Brands */
	--c-newsprint: #e3ddd1;  /* the press — Coverage */
	--c-signal: #d8321e;     /* accent: large type and marks only */
	--c-blush: #f2c5b8;      /* accent inside the safelight room */
	--c-closing: var(--c-ink);       /* Contact — the opening, in negative */
	--c-closing-fg: var(--c-paper);

	/* Placeholder prints: photographic tones, so an empty layout still reads
	   as a wall of pictures rather than grey boxes. */
	--tone-1: #c7ae94;
	--tone-2: #7d8883;
	--tone-3: #3f4448;
	--tone-4: #a8583f;
	--tone-5: #b3a28a;
	--tone-6: #5d6a76;
	--tone-7: #9d8d6d;
	--tone-8: #2b2826;

	/* Type ---------------------------------------------------------------- */
	--font-sans: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
	--font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--font-mark: "Jost", Futura, "Century Gothic", "Avenir Next", Arial, sans-serif;

	--fs-label: 0.71875rem;                                    /* 11.5px */
	--fs-small: 0.875rem;
	--fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	--fs-lede: clamp(1.125rem, 0.98rem + 0.5vw, 1.4375rem);
	--fs-title: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);          /* category titles (serif) */
	--fs-statement: clamp(1.75rem, 1.05rem + 2.6vw, 3.5rem);
	--fs-masthead: clamp(4.25rem, 0.6rem + 12.4vw, 15rem);
	--fs-numeral: clamp(15rem, 44vw, 42rem);

	/* The INESJ logo: width of the lockup (about 35 % of a desktop screen, well
	   under half), and the word's measured width in em so it fills that width
	   exactly. Since v1.6 the word is tracked tighter (-0.06 em: 2.380 em wide
	   instead of 2.421); the widths shrank by the same ratio, so the letters
	   kept their size. 1.6.5 made the whole block 10 % smaller. */
	--sig-w: min(72.2vw, 22.29rem);
	--wm-em: 2.380;
	--wm-lsb: 0.072em;

	/* Space ----------------------------------------------------------------- */
	--margin: clamp(16px, 3.2vw, 56px);
	--gutter: clamp(12px, 1.4vw, 24px);
	--header-h: 56px;

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: clamp(32px, 2.8vw, 44px);
	--s-7: clamp(48px, 4.8vw, 76px);
	--s-8: clamp(72px, 8vw, 128px);
	--s-9: clamp(104px, 13vw, 208px);
	--chapter-pad: clamp(112px, 12vh + 64px, 216px);

	--line: 1px;
	--radius-photo: clamp(4px, 0.42vw, 8px);  /* photographs: slightly rounded corners (6 px on a laptop) */

	/* Motion -------------------------------------------------------------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-ui: 180ms;
	--dur-reveal: 900ms;
	--dur-backdrop: 800ms;
}

@media (min-width: 48em) {
	:root {
		--sig-w: 46.72vw;
	}
}

@media (min-width: 64em) {
	:root {
		--sig-w: clamp(340px, 35.04vw, 658px);
	}
}

/* The sky palette (Customize → INESJ → Colours; the default since v1.6) — same
   roles, other colours: cloud → pale blue → sky → dark blue-grey. The sky is
   the one large field of blue, in About; elsewhere blue only marks small
   things (the active chapter, the viewfinder, selected text, the contact
   links' underline). Contact closes the page on cloud white, like the
   opening. */
html.palette-sky {
	--c-paper: #f2f5f8;      /* Cloud — Landing, Work; text on dark */
	--c-ink: #17212b;        /* Night — text, Talents, viewfinder */
	--c-safelight: #a8cbe8;  /* Sky — About, with dark text */
	--c-studio: #dde5ec;     /* Haze — For Brands */
	--c-newsprint: #e8eef4;  /* Pale sky — Coverage */
	--c-signal: #7eaed6;     /* Sky — small marks on light and dark */
	--c-blush: #f2f5f8;      /* Cloud — marks inside the sky (About) */
	--c-closing: var(--c-paper);  /* Cloud — Contact and the closing wall, like the opening */
	--c-closing-fg: var(--c-ink);

	--tone-1: #b9c7cf;
	--tone-2: #5f6f7b;
	--tone-3: #2b3742;
	--tone-4: #7eaed6;
	--tone-5: #c9d3d8;
	--tone-6: #41505c;
	--tone-7: #94a8b4;
	--tone-8: #161d24;
}

/* Backdrops -----------------------------------------------------------------
   Each chapter declares data-backdrop. Without JavaScript every chapter paints
   its own field. With JavaScript (html.has-backdrops) the whole page shares
   one colour that cross-fades as chapters reach the middle of the screen. */

[data-backdrop="paper"] {
	--bg: var(--c-paper);
	--fg: var(--c-ink);
	--accent: var(--c-signal);
}

[data-backdrop="safelight"] {
	--bg: var(--c-safelight);
	--fg: var(--c-paper);
	--accent: var(--c-blush);
}

[data-backdrop="studio"] {
	--bg: var(--c-studio);
	--fg: var(--c-ink);
	--accent: var(--c-signal);
}

[data-backdrop="ink"] {
	--bg: var(--c-ink);
	--fg: var(--c-paper);
	--accent: var(--c-signal);
}

[data-backdrop="newsprint"] {
	--bg: var(--c-newsprint);
	--fg: var(--c-ink);
	--accent: var(--c-signal);
}

/* Contact, the last room: night in the warm palette (the opening in
   negative), cloud white in the sky one (the opening again). */
[data-backdrop="closing"] {
	--bg: var(--c-closing);
	--fg: var(--c-closing-fg);
	--accent: var(--c-signal);
}

/* Sky: About is light, so its text is dark. (The first selector is the page
   itself, which takes the backdrop of the chapter on screen.) */
.palette-sky[data-backdrop="safelight"],
.palette-sky [data-backdrop="safelight"] {
	--fg: var(--c-ink);
}