/* ==========================================================================
   Layout: header/nav, footer, grid, section rhythm
   ========================================================================== */

/* ---- Site header ------------------------------------------------------- */

.amn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--amn-bg);
	border-bottom: 1px solid var(--amn-line);
}
.amn-theme-dark .amn-header {
	background: var(--amn-navy);
	border-bottom-color: var(--amn-line-navy);
}

/* Overlaid, see-through header used on every page except Blog / Shop /
   Cart / Checkout / single Product (see $amn_solid_header in header.php).
   Fixed, not absolute: absolute only anchors it to the top of the document
   once, so it scrolls away with the rest of the page past the hero — fixed
   keeps it pinned to the viewport (sticky) while still staying out of flow,
   so it doesn't push the full-bleed hero down the way position: sticky
   would (sticky still occupies its normal document-flow space). */
.amn-header.amn-header--transparent,
.amn-theme-dark .amn-header.amn-header--transparent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.amn-header.amn-header--on-dark {
	color: var(--amn-on-navy);
}

/* The transparent header is taken out of flow, so the page starts at y=0
   underneath it. Anything that isn't a full-height hero — the Dossier
   hero and the plain sections its child pages open with — has to reserve
   that space itself, or its heading runs under the nav. The full-bleed
   heroes (home slider, Exhibition) are excluded on purpose: their image
   is meant to run behind the header. */
.amn-header--transparent ~ #amn-main > .amn-section:first-child,
.amn-header--transparent ~ #amn-main > .amn-dossier-hero:first-child {
	padding-top: calc(var(--amn-header-h) + 1.5rem);
}
.amn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 22px var(--gutter);
}

.amn-logo {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.15;
	white-space: nowrap;
}
.amn-logo img { max-height: 40px; width: auto; }
/* The theme's own mark (square artwork, so height drives the size). */
.amn-logo .amn-logo__mark { display: block; height: 80px; width: auto; max-height: none; }

/* Institutional wordmark (desktop) vs. MN monogram (compact/mobile) —
   section 1. Only applies when no Customizer logo is set: that branch
   never prints .amn-logo__full, so it is unaffected and always shows. */
.amn-logo__full { display: inline-block; }
.amn-logo__mono { display: none; }

/* Signature image logo: navy tile on the light header, white-on-transparent
   on the navy (dark theme) and over-hero headers. */
.amn-logo .amn-logo__mark--dark { display: none; }
.amn-header--on-dark .amn-logo .amn-logo__mark--light,
.amn-theme-dark .amn-header .amn-logo .amn-logo__mark--light { display: none; }
.amn-header--on-dark .amn-logo .amn-logo__mark--dark,
.amn-theme-dark .amn-header .amn-logo .amn-logo__mark--dark { display: block; }

@media (max-width: 640px) {
	.amn-logo .amn-logo__mark { height: 60px; }
	.amn-logo__full { display: none; }
	.amn-logo__mono { display: block; }
	/* Keep the reserved header space in step with the smaller logo. */
	:root { --amn-header-h: 104px; }
}

.amn-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
	flex-wrap: wrap;
}
.amn-nav li { list-style: none; }
.amn-nav a {
	font-size: 1rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, opacity .2s ease;
	opacity: .82;
}
.amn-nav a:hover,
.amn-nav .current-menu-item > a,
.amn-nav .current_page_item > a {
	opacity: 1;
	border-bottom-color: currentColor;
}

/* ---- Submenu (hover dropdown on desktop, disclosure on mobile) ---------- */

/* main.js injects this into every parent item; the desktop menu opens on
   hover and has its own caret, so it only appears in the mobile drawer. */
.amn-nav__expand { display: none; }

.amn-nav .menu-item-has-children {
	position: relative;
}
.amn-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.amn-nav .menu-item-has-children > a::after {
	content: '';
	width: 5px;
	height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	opacity: .6;
	transition: transform .2s ease;
}
.amn-nav .menu-item-has-children:hover > a::after,
.amn-nav .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg);
}

.amn-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 210px;
	background: var(--amn-bg);
	border: 1px solid var(--amn-line);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 110;
}
.amn-theme-dark .amn-nav .sub-menu {
	background: var(--amn-navy);
	border-color: var(--amn-line-navy);
}
.amn-nav .sub-menu a {
	display: block;
	padding: 9px 20px;
	font-size: 1rem;
	white-space: nowrap;
	border-bottom: none;
	opacity: .75;
	color: var(--amn-ink);
}
.amn-nav .sub-menu a:hover { opacity: 1; }
.amn-theme-dark .amn-nav .sub-menu a { color: var(--amn-on-navy); }

.amn-nav .menu-item-has-children:hover > .sub-menu,
.amn-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/* This threshold (and the matching one below, plus main.js's off-canvas
   drawer toggle which reads the same breakpoint has no JS-side duplicate —
   it's pure CSS) was raised from 900px to 1080px: with the desktop text
   wordmark now at full size (section 2's fix — previously the desktop
   header rendered no logo at all, so this never came up), the full 7-item
   nav plus logo plus header-right cluster doesn't reliably fit in one row
   below ~1080px. Confirmed live at 1024px: three items wrapped to a second
   row and visually collided with the hero. 1280px and 1440px (the brief's
   named desktop breakpoints) fit correctly above this threshold; 1024px
   and 768px (its named tablet breakpoints) now correctly get the mobile
   drawer nav instead of a cramped inline one. */
@media (max-width: 1080px) {
	/* Submenus are collapsed here and opened by the chevron button that
	   main.js adds; the desktop hover dropdown does not apply. */
	.amn-nav .menu-item-has-children { position: static; }
	.amn-nav .menu-item-has-children > a::after { display: none; }

	.amn-nav .sub-menu {
		position: static;
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		background: var(--amn-bg-alt);
		border: none;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.amn-theme-dark .amn-nav .sub-menu { background: rgba(244, 242, 236, .05); }
	.amn-nav .sub-menu a {
		padding: 13px calc(var(--gutter) + 14px);
		font-size: .8rem;
		opacity: .8;
	}
	.amn-nav .sub-menu li:not(:last-child) { border-bottom: 1px solid var(--amn-line); }
	.amn-theme-dark .amn-nav .sub-menu li:not(:last-child) { border-bottom-color: var(--amn-line-navy); }
}

.amn-header__right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.amn-lang-toggle {
	display: flex;
	gap: 4px;
	font-size: 1rem;
	letter-spacing: .08em;
	opacity: .8;
}
.amn-lang-toggle a[aria-current="true"] { text-decoration: underline; opacity: 1; }
/* The mobile-drawer copy only appears inside the open nav at narrow
   widths (see the max-width: 1080px block below) — on desktop it would
   otherwise sit duplicated and unstyled inside the inline nav row. */
.amn-nav .amn-lang-toggle--mobile { display: none; }

/* Header text is 1rem on wide desktops. Between the mobile drawer (1080px)
   and ~1360px that no longer fits one row, so it steps down instead of
   letting the nav wrap into the hero (measured live 2026-10-04). */
@media (min-width: 1081px) and (max-width: 1360px) {
	.amn-header .amn-nav a, .amn-header .amn-lang-toggle, .amn-header .amn-inquiries { font-size: .9375rem; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
	.amn-header .amn-nav a, .amn-header .amn-lang-toggle, .amn-header .amn-inquiries { font-size: .8125rem; letter-spacing: .04em; }
}
@media (min-width: 1081px) and (max-width: 1120px) {
	.amn-header .amn-nav a, .amn-header .amn-lang-toggle, .amn-header .amn-inquiries { font-size: .78rem; }
}
/* Dropdown links don't share the nav row, so they keep 1rem at every desktop width. */
@media (min-width: 1081px) {
	.amn-header .amn-nav .sub-menu a { font-size: 1rem; }
}

.amn-inquiries {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* One size for every header action icon. The mail icon carries inline
   width/height attributes and the cart icon was sized in shop.css, so the
   two never matched — this is the single source of truth for both. */
.amn-inquiries svg,
.amn-cart-toggle svg { width: 20px; height: 20px; }

.amn-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
}
.amn-menu-toggle span { width: 22px; height: 1px; background: currentColor; }

/* The full wordmark logo (80px tall, ~250px wide — introduced when the
   desktop header's missing logo was fixed) plus all 7 primary nav items
   plus the full header-right cluster (language switch, "Collector
   Inquiries" text, cart) don't fit one line below ~1500px: measured and
   confirmed via a live DOM check at 1440px, "Contact" — the nav's own
   flex-wrap: wrap lets it wrap rather than overflow — drops to a second
   row, which then visually collides with the hero content below it.
   Dropping the "Collector Inquiries" text label (icon remains, the link
   itself is unchanged) reclaims width for the 1081-1500px zone (small
   laptop screens) between the mobile-drawer threshold and comfortably
   wide desktops. The mobile block below (max-width: 1080px) already
   hides this same label for its own reasons — harmless overlap, not a
   conflict, since both just set the same display: none. */
@media (max-width: 1500px) and (min-width: 901px) {
	.amn-header__right .amn-inquiries-label { display: none; }
}
/* Hiding the inquiries label alone closes the gap at 1440px but not at
   1280px (confirmed live: still ~30-40px short, "Contact" still wraps) —
   the text wordmark itself also needs to give a little, the same way the
   image-logo era of this file already shrank at the mobile breakpoint. */
@media (max-width: 1360px) and (min-width: 901px) {
	.amn-logo__full { font-size: .88rem; }
}

@media (max-width: 1080px) {
	/* Slide-in drawer from the right, matching the cart drawer. */
	.amn-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(360px, 86vw);
		display: block;
		gap: 0;
		padding: calc(var(--amn-header-h) + .5rem) 0 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--amn-bg);
		box-shadow: -18px 0 50px rgba(8, 12, 26, .18);
		transform: translateX(100%);
		opacity: 1;
		visibility: hidden;
		transition: transform .38s cubic-bezier(.4, 0, .2, 1), visibility .38s;
		z-index: 90;
	}
	.amn-theme-dark .amn-nav { background: var(--amn-navy); }
	.amn-nav.is-open { transform: translateX(0); visibility: visible; }

	/* Rows, not a centred stack. Top-level items may be <li> (a WordPress
	   menu) or bare <a> (the hard-coded fallback), so both are styled. */
	.amn-nav > li,
	.amn-nav > a { display: block; border-bottom: 1px solid var(--amn-line); }
	.amn-theme-dark .amn-nav > li,
	.amn-theme-dark .amn-nav > a { border-bottom-color: var(--amn-line-navy); }
	.amn-nav > li { display: flex; flex-wrap: wrap; align-items: center; }
	.amn-nav > li > a { flex: 1; min-width: 0; }
	.amn-nav a {
		padding: 15px var(--gutter);
		font-size: .84rem;
		border-bottom: none;
		opacity: 1;
	}
	.amn-nav a:hover,
	.amn-nav .current-menu-item > a,
	.amn-nav .current_page_item > a { border-bottom-color: transparent; }

	/* Injected by main.js next to every parent item. */
	.amn-nav__expand {
		flex: none;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		padding: 0;
		color: inherit;
		opacity: .55;
		transition: opacity .2s ease;
	}
	.amn-nav__expand:hover { opacity: 1; }
	.amn-nav__expand svg {
		width: 15px;
		height: 15px;
		transition: transform .25s ease;
	}
	.amn-nav .menu-item-has-children.is-open > .amn-nav__expand { opacity: 1; }
	.amn-nav .menu-item-has-children.is-open > .amn-nav__expand svg { transform: rotate(90deg); }
	.amn-menu-toggle { display: inline-flex; z-index: 95; }
	.amn-header__right .amn-inquiries-label { display: none; }
	/* The language switch moves into the drawer itself at this width,
	   per "directly accessible in the mobile menu" — the header-bar
	   copy would otherwise compete with the cart/inquiries icons. */
	.amn-header__right > .amn-lang-toggle:not(.amn-lang-toggle--mobile) { display: none; }
	.amn-nav .amn-lang-toggle--mobile {
		display: flex;
		gap: 6px;
		margin: 20px var(--gutter) 0;
		padding-top: 18px;
		border-top: 1px solid var(--amn-line);
		font-size: .78rem;
		letter-spacing: .08em;
	}
	.amn-theme-dark .amn-nav .amn-lang-toggle--mobile { border-top-color: var(--amn-line-navy); }

	/* The nav is fixed and out of flow at this width, which left the inner
	   row with three space-between children (logo, toggle, actions) and
	   parked the toggle in the middle of the header. Pin the logo left and
	   let everything else group at the right, with the toggle last. */
	.amn-header__inner { justify-content: flex-start; gap: 0; }
	.amn-logo { margin-right: auto; }
	.amn-header__right { gap: 20px; }
	.amn-menu-toggle { order: 3; margin-left: 20px; }
}

/* ---- Footer -------------------------------------------------------------- */

.amn-footer { background: var(--amn-navy); color: var(--amn-on-navy-soft); }

.amn-footer__cta {
	padding: 3.2rem var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	border-bottom: 1px solid var(--amn-line-navy);
}
.amn-footer__cta h3 { color: var(--amn-on-navy); max-width: 30ch; margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.amn-footer__grid {
	padding: 3.5rem var(--gutter) 2.5rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
}
@media (max-width: 800px) {
	.amn-footer__grid { grid-template-columns: 1fr 1fr; }
}

.amn-footer__brand { font-family: var(--font-serif); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amn-on-navy); margin-bottom: 1rem; }
.amn-footer address { font-style: normal; font-size: .85rem; line-height: 1.7; opacity: .85; margin-bottom: 1rem; }
.amn-footer a { font-size: .85rem; opacity: .85; }
.amn-footer a:hover { opacity: 1; text-decoration: underline; }
.amn-footer__col-title { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-bottom: 1rem; }
.amn-footer__col ul li { margin-bottom: .65rem; }

.amn-social { display: flex; gap: 14px; margin-top: 1.1rem; }
.amn-social a { display: inline-flex; opacity: .8; }
.amn-social a:hover { opacity: 1; }

.amn-footer__bottom {
	padding: 1.4rem var(--gutter) 2rem;
	display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: center; justify-content: space-between;
	font-size: .78rem; opacity: .6;
	border-top: 1px solid var(--amn-line-navy);
}
.amn-footer__legal { display: flex; gap: 1.4rem; }

/* ---- Section rhythm & grid helpers ---------------------------------------- */

.amn-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.amn-section--tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }

.amn-section--navy { background: var(--amn-navy); color: var(--amn-on-navy-soft); }
.amn-section--navy-deep { background: var(--amn-navy-deep); color: var(--amn-on-navy-soft); }
.amn-section--bordered { border-top: 1px solid var(--amn-line); border-bottom: 1px solid var(--amn-line); }
.amn-theme-dark .amn-section--bordered { border-color: var(--amn-line-navy); }

.amn-grid { display: grid; gap: clamp(20px, 2.4vw, 40px); }
.amn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.amn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.amn-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
	.amn-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.amn-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.amn-grid--2, .amn-grid--3, .amn-grid--4 { grid-template-columns: 1fr; }
}

.amn-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	color: var(--amn-on-navy);
	background: linear-gradient(180deg, rgba(0,0,53,.35), rgba(0,0,53,.75)), var(--amn-navy);
	background-size: cover;
	background-position: center;
}
/* Hero copy is bottom-aligned, so this top padding is invisible on a tall
   viewport — it only bites on short ones, where the copy would otherwise
   ride up under the overlaid header (Contact, Research and its children). */
.amn-hero__inner { padding: var(--amn-header-h) var(--gutter) 4rem; max-width: 900px; }
.amn-hero .amn-eyebrow, .amn-hero p { color: var(--amn-on-navy-soft); }
.amn-hero h1 { color: var(--amn-on-navy); }
/* About hero: preserve contrast against the dark field. */.amn-about-v2 .amn-about-v2__hero h1 { color: #f4f1ea; }
.amn-about-v2 .amn-about-v2__hero h1 { color: #f4f1ea !important; -webkit-text-fill-color: #f4f1ea !important; }

/* Header text: one size, 0.75rem, at every width (requested 2026-10-07).
   Overrides the per-breakpoint steps above, the dropdown and the mobile drawer. */
.amn-header .amn-nav a,
.amn-header .amn-nav .sub-menu a,
.amn-header .amn-lang-toggle,
.amn-header .amn-nav .amn-lang-toggle--mobile,
.amn-header .amn-inquiries {
	font-size: .75rem;
}


/* Research navigation: third-level Artistic Language pages (2026-10-08). */
@media (min-width: 1081px) {
	.amn-nav .sub-menu .sub-menu {
		top: -11px;
		left: 100%;
		transform: translate(6px, 0);
	}
	.amn-nav .sub-menu .menu-item-has-children:hover > .sub-menu,
	.amn-nav .sub-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: translate(0, 0);
	}
	.amn-nav .sub-menu .menu-item-has-children > a {
		display: flex;
		justify-content: space-between;
	}
	.amn-nav .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-45deg);
		margin-top: 0;
	}
	.amn-nav .sub-menu .menu-item-has-children:hover > a::after,
	.amn-nav .sub-menu .menu-item-has-children:focus-within > a::after {
		transform: rotate(135deg);
	}
}


/* Keep Artistic Language children visible inside the opened mobile Research drawer. */
@media (max-width: 1080px) {
	.amn-nav .sub-menu .sub-menu {
		max-height: none !important;
		overflow: visible;
		background: transparent;
	}
	.amn-nav .sub-menu .menu-item-has-children > .amn-nav__expand {
		display: none !important;
	}
	.amn-nav .sub-menu .sub-menu a {
		padding-left: calc(var(--gutter) + 28px);
		opacity: .68;
	}
}