/* ==========================================================================
   Atelier Marlon Nikolai — Base: reset, variables, typography
   ========================================================================== */

:root {
	/* Light "editorial" surface (Catalog, About, Exhibitions, Dossier…) */
	--amn-bg: #F7F5F1;
	--amn-bg-alt: #F0EDE7;
	--amn-surface: #FFFFFF;
	--amn-ink: #14192B;
	--amn-ink-soft: #4A4E5C;
	--amn-body: #5B5E68;
	--amn-line: #DEDAD1;

	/* Dark "atelier" surface (Home, Contact, Research hub, CTA bands).
	   --amn-navy is the institutional Deep Navy CI colour (brief section 1) —
	   used directly wherever a flat dark surface is needed (hero, nav,
	   footer, headers). --amn-navy-deep/-soft are darker/lighter companions
	   in the same hue, for gradient and layered-depth use, so nothing in the
	   dark palette reads as generic neutral black any more. */
	--amn-navy: #000035;
	--amn-navy-deep: #00002A;
	--amn-navy-soft: #171E38;
	--amn-on-navy: #F4F2EC;
	--amn-on-navy-soft: rgba(244, 242, 236, 0.68);
	--amn-line-navy: rgba(244, 242, 236, 0.16);

	/* White, cool, subtle prismatic light — replaces the previous warm
	   brass/gold accent (section 1: "Replace gold, warm-yellow or amber
	   light effects with white, cool and subtle prismatic/spectral light"
	   / "Do not use gold as a regular interface colour"). Deliberately a
	   *pale cool* tone for flat text use (eyebrows, active-dot labels),
	   plus a spectral gradient for glow/light effects — never a flat gold
	   fill. --amn-prism-gradient suits round marks (carousel dots);
	   --amn-prism-gradient-linear suits thin bars/rules. */
	--amn-cool-accent: #C9D3E0;
	--amn-prism-1: #EAF3FF;
	--amn-prism-2: #F4EBFF;
	--amn-prism-3: #EAFBF3;
	--amn-prism-gradient: conic-gradient(from 180deg at 50% 50%, #fff, var(--amn-prism-1), #fff, var(--amn-prism-2), #fff, var(--amn-prism-3), #fff);
	--amn-prism-gradient-linear: linear-gradient(90deg, #fff, var(--amn-prism-1), var(--amn-prism-2), var(--amn-prism-3), #fff);

	/* Status. Reserved intentionally does NOT reuse the old brass accent
	   value any more (they used to be the literal same hex) — a muted
	   clay keeps it warm/attention-getting without reading as gold. */
	--amn-status-available: #1F3A93;
	--amn-status-reserved: #8C6E63;
	--amn-status-placed: #8A8A85;

	/* Type */
	--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container: 1360px;
	--gutter: clamp(20px, 4vw, 64px);

	/* Height of the site header: logo (80px) plus its 22px padding top and
	   bottom. Pages under the transparent header reserve this much space,
	   so it has to track .amn-logo__mark's height. */
	--amn-header-h: 124px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--amn-bg);
	color: var(--amn-body);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color .3s ease;
}

body.amn-theme-dark { background: var(--amn-navy); color: var(--amn-on-navy-soft); }

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-serif);
	color: var(--amn-ink);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}

.amn-theme-dark h1,
.amn-theme-dark h2,
.amn-theme-dark h3,
.amn-theme-dark h4 { color: var(--amn-on-navy); }

h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.amn-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: var(--amn-ink-soft);
	max-width: 46ch;
}
.amn-theme-dark .amn-lede { color: var(--amn-on-navy-soft); }

.amn-eyebrow {
	font-family: var(--font-sans);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--amn-ink-soft);
	margin: 0 0 1.25rem;
}
.amn-eyebrow a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.amn-theme-dark .amn-eyebrow { color: var(--amn-on-navy-soft); }

.amn-rule {
	width: 42px;
	height: 2px;
	background: #000;
	opacity: 1;
	margin: 0 0 1.5rem;
}

.amn-label {
	font-size: 1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.container--narrow { max-width: 900px; }

/* Centred 1280px reading column (single Exhibition). Unlike .amn-bleed,
   .container brings the auto margins, so capping the width here keeps the
   block centred instead of parking it against the left gutter. */
.container--1280 { max-width: 1280px; }

/* Full-bleed replacement for .container: same gutter inset, no max-width cap. */
.amn-bleed {
	width: 100%;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.amn-serif-italic { font-style: italic; }

::selection { background: var(--amn-navy); color: var(--amn-on-navy); }

/* ---- Prismatic light primitive ------------------------------------------
   Shared "white, cool, subtle prismatic light" effect (section 1 and the
   Home "Light / Chrome Encounter" / "Details Light Hook" interactions —
   see assets/js/main.js). A low-opacity spectral gradient laid over an
   element via ::before, not a flat gold glow. Reduced-motion safe: the
   rotation only ever runs when motion is allowed, and the element still
   reads correctly fully static. */
.amn-prism-glow { position: relative; isolation: isolate; }
.amn-prism-glow::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 1;
	background: var(--amn-prism-gradient);
	opacity: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	transition: opacity .5s ease;
}
.amn-prism-glow:hover::before,
.amn-prism-glow:focus-within::before,
.amn-prism-glow.is-active::before { opacity: .22; }

@media (prefers-reduced-motion: no-preference) {
	.amn-prism-glow.amn-prism-glow--spin::before { animation: amn-prism-spin 14s linear infinite; }
}
@keyframes amn-prism-spin { to { transform: rotate(360deg); } }