/*
 * PROMINENT — the visual system: faces, palette, type roles, spacing.
 *
 * Loaded only with Design: PROMINENT (inc/prominent/design.php), after
 * AnyMag's own stylesheets. AnyMag's colour settings answer these tokens
 * (`var(--ink)` …) in that mode, so everything AnyMag prints follows them —
 * including into Dark, because a token is redefined per appearance and a hex
 * value is not.
 *
 * Appearance: no attribute follows the reader's system; `data-appearance`
 * on <html> ("light" | "dark") overrides it.
 *
 * THE VALUES ARE FRONT ROW'S (approved by the owner on 2026-10-03; the
 * prototype "PROMINENT Front Row", source in docs/anymag/design/
 * concept-front-row/). A white gallery wall and near-black ink by day, the
 * same inverted by night, NO accent colour of its own: the photographs carry
 * the colour. A condensed high-contrast Didone — the family of the
 * PROMINENT logotype — for every editorial voice; a clean grotesque for
 * reading and furniture. The PLATE values (ivory, claret, noir, champagne,
 * Bodoni Moda + Jost) were rejected on 2026-10-03 and are not here.
 *
 * Token NAMES are kept from the earlier system so every rule that reads them
 * follows; `--accent` is ink, because Front Row marks a state with an
 * underline or an italic, never with a colour.
 */

/* Faces — self-hosted, SIL Open Font Licence (../fonts/prominent/OFL.txt).
   Noto Serif Display carries width (62.5–100%) and weight; the display roles
   set it condensed. Hanken Grotesk is the text and furniture face. Latin and
   Cyrillic for the Didone (Ukrainian names appear in Cyrillic in the copy),
   Latin and Latin Extended for the grotesque; each file loads only when a
   page uses its characters. */

@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/prominent/hanken-grotesk-latin-ext-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 700;
	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: "Hanken Grotesk";
	src: url("../fonts/prominent/hanken-grotesk-latin-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 700;
	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: "Hanken Grotesk";
	src: url("../fonts/prominent/hanken-grotesk-latin-ext-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	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: "Hanken Grotesk";
	src: url("../fonts/prominent/hanken-grotesk-latin-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	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: "Noto Serif Display";
	src: url("../fonts/prominent/noto-serif-display-cyrillic-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 300 700;
	font-stretch: 62.5% 100%;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Noto Serif Display";
	src: url("../fonts/prominent/noto-serif-display-latin-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 300 700;
	font-stretch: 62.5% 100%;
	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: "Noto Serif Display";
	src: url("../fonts/prominent/noto-serif-display-cyrillic-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 62.5% 100%;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Noto Serif Display";
	src: url("../fonts/prominent/noto-serif-display-latin-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 62.5% 100%;
	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;
}

/* Bodoni Moda and Jost stay available in AnyMag's font menus. */
@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/prominent/bodoni-moda-latin-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
}
@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/prominent/bodoni-moda-latin-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/prominent/jost-latin-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/prominent/jost-latin-variable-italic.woff2") format("woff2");
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Two faces, three roles. Display is every editorial voice — headlines,
	   section titles, quotations, the cover's caption; Text is running copy;
	   UI is every label, control and piece of furniture. */
	--font-display: "Noto Serif Display", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
	--font-text: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-ui: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* The Didone is set condensed: 72% for headlines, 68% for the largest
	   sizes, 80% for small italic lines. */
	--display-stretch: 72%;
	--display-stretch-xl: 68%;
	--display-stretch-s: 80%;
	--t-body: 17px;
	--t-lead: 1.6;
	--t-copy: 1.16rem;            /* 18.5px: the story column */
	--t-copy-lead: 1.72;
	--t-lbl: .75rem;              /* 12px small capitals */
	--t-lbl-s: .72rem;
	--t-act: .75rem;
	--t-nav: .75rem;
	--t-cap: .95rem;
	--t-h1: clamp(3.1rem, 5.3vw, 6rem);         /* a story's headline */
	--t-stand: clamp(1.15rem, 1.35vw, 1.32rem); /* a story's dek */
	--t-open: clamp(3.3rem, 6vw, 6.75rem);      /* the front page's lead */
	--t-hero: clamp(1.65rem, 2.2vw, 2.25rem);   /* a card headline, large */
	--t-card: clamp(1.4rem, 1.8vw, 1.85rem);    /* a card headline */
	--t-ent: clamp(1.4rem, 1.75vw, 1.8rem);     /* a list row */
	--t-idx: clamp(3.5rem, 6.4vw, 7rem);        /* a section title */
	--t-quote: clamp(2.1rem, 3.3vw, 3.5rem);    /* a quotation */
	--t-menu: clamp(34px, 3vw, 52px);           /* menu-panel items */

	/* Tracking: small capitals carry a little (.07em); nothing else is
	   tracked. One value, so the owner's "no excessive letter-spacing" is
	   kept by construction. */
	--track-label: .07em;
	--track-nav: .07em;
	--track-wide: .07em;
	--track-act: .07em;
	--track-rail: .07em;
	--track-icon: .07em;
	--track-small: .07em;
	--gut: clamp(40px, 3.4vw, 56px);
	--pad: clamp(20px, 3.4vw, 52px);
	--sec-y: clamp(80px, 9vw, 136px);
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* The spread has no seam: the photograph meets the white page. (No
	   zero-length token here: W3TC's CSSTidy writes `0px` as `0`, and a
	   calc() that adds a unitless 0 is invalid — the cover once shrank to
	   320 of 720px that way.) Every custom property name is lower case:
	   CSSTidy lower-cases declarations, never the var() that reads them. */

	--header-h: 64px;
	--control: 44px;
	--tap: 44px;
	--stroke: 1.5px;

	/* DAY — a white gallery wall, near-black ink. The second ink, the
	   second paper and the curtain's second ink are the approved Front Row
	   concept's own values (`--ink-2: #66666A`, `--paper-2: #F2F2F0`,
	   `--on-night-2: #9A9A9E`; dark `#9C9CA0` / `#1A1A1A`), and the curtain
	   is `#0B0B0B` in both editions, as it is there. */
	--paper: #fff;
	--paper-2: #f2f2f0;
	--paper-3: #e6e6e3;
	--sheet: #f7f7f5;
	--ink: #0b0b0b;
	--ink-2: #66666a;
	--ink-3: #6e6e72;
	--rule: rgba(11, 11, 11, .12);
	--rule-2: rgba(11, 11, 11, .3);
	--accent: #0b0b0b;
	--acc: var(--accent);
	--on-accent: #fff;
	--focus: #0b0b0b;
	--img-a: #e6e6e3;
	--img-b: #2a2a2a;
	--scrim: rgba(0, 0, 0, .55);
	--glass: rgba(255, 255, 255, .96);
	--disc: #fff;
	--disc-ink: #0b0b0b;
	/* The inverted block (the footer, the menu curtain): black by day and by
	   night — a curtain is a curtain. */
	--leaf: #0b0b0b;
	--leaf-2: #1a1a1a;
	--leaf-3: #262626;
	--leaf-ink: #f4f4f2;
	--leaf-ink-2: #9a9a9e;
	--leaf-ink-3: rgba(244, 244, 242, .5);
	--leaf-acc: #f4f4f2;
	--leaf-rule: rgba(244, 244, 242, .16);
	--leaf-rule-2: rgba(244, 244, 242, .4);
	/* Type on a photograph: white whatever the edition. */
	--on-photo: #fff;
	--on-photo-2: rgba(255, 255, 255, .86);
	--on-photo-rule: rgba(255, 255, 255, .5);
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.76, 0, .24, 1);
	color-scheme: light;
}

@media only screen and (max-width: 960px) {
	:root {
		--header-h: 58px;
		--pad: 20px;
		--gut: 20px;
	}
}

/* NIGHT — the same wall in black. The same block twice: once for a reader
   who chose Dark, once for a reader whose device is dark and who chose
   nothing. */

:root[data-appearance="dark"] {
	--paper: #0b0b0b;
	--paper-2: #1a1a1a;
	--paper-3: #202020;
	--sheet: #080808;
	--ink: #f4f4f2;
	--ink-2: #9c9ca0;
	--ink-3: #8e8e92;
	--rule: rgba(244, 244, 242, .15);
	--rule-2: rgba(244, 244, 242, .36);
	--accent: #f4f4f2;
	--on-accent: #0b0b0b;
	--focus: #f4f4f2;
	--img-a: #202020;
	--img-b: #0e0e0e;
	--scrim: rgba(0, 0, 0, .62);
	--glass: rgba(11, 11, 11, .96);
	--disc: #f4f4f2;
	--disc-ink: #0b0b0b;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-appearance="light"]) {
		--paper: #0b0b0b;
		--paper-2: #1a1a1a;
		--paper-3: #202020;
		--sheet: #080808;
		--ink: #f4f4f2;
		--ink-2: #9c9ca0;
		--ink-3: #8e8e92;
		--rule: rgba(244, 244, 242, .15);
		--rule-2: rgba(244, 244, 242, .36);
		--accent: #f4f4f2;
		--on-accent: #0b0b0b;
		--focus: #f4f4f2;
		--img-a: #202020;
		--img-b: #0e0e0e;
		--scrim: rgba(0, 0, 0, .62);
		--glass: rgba(11, 11, 11, .96);
		--disc: #f4f4f2;
		--disc-ink: #0b0b0b;
			color-scheme: dark;
	}
}