/*
 * IEUM CORE DESIGN SYSTEM
 * Global typography and top-navigation rules shared by every public page.
 * Reference screens: Home and Open Art Room, 2026-07-29.
 */

@font-face {
	font-family: "LINE Seed Sans KR";
	src: url("../fonts/line-seed-kr/LINESeedKR-Bd.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

:root {
	/* Font families */
	--ieum-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--ieum-font-display: "LINE Seed Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ieum-font-latin: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

	/* Type scale */
	--ieum-type-label: 0.78rem;
	--ieum-type-caption: 0.875rem;
	--ieum-type-body: 1rem;
	--ieum-type-lead: clamp(1.05rem, 1.4vw, 1.2rem);
	--ieum-type-card-title: clamp(1.45rem, 2vw, 2rem);
	--ieum-type-section-title: clamp(2.45rem, 3.4vw, 3.125rem);
	--ieum-type-page-hero: clamp(3.8rem, 5.2vw, 5.05rem);
	--ieum-type-home-hero: clamp(3.2rem, 8vw, 6.9rem);

	/* Type rhythm */
	--ieum-leading-tight: 1.05;
	--ieum-leading-title: 1.08;
	--ieum-leading-body: 1.65;
	--ieum-leading-reading: 1.75;
	--ieum-tracking-label: 0.14em;
	--ieum-tracking-title: -0.06em;

	/* Shared header */
	--ieum-header-height: 78px;
	--ieum-header-logo-height: 56px;
	--ieum-header-menu-size: 15px;
	--ieum-header-menu-gap: 26px;
	--ieum-content-wide: 1200px;
	--ieum-header-line: rgba(29, 39, 33, 0.28);
}

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: var(--ieum-font-body);
	font-size: var(--ieum-type-body);
	line-height: var(--ieum-leading-body);
	word-break: keep-all;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ieum-font-display);
}

:where(
	.ieum-quiz__intro h2,
	.finder-heading,
	.section-heading,
	.trust-band__title,
	.open-art-choice__heading h2,
	.open-art-source__heading h2
) {
	font-size: var(--ieum-type-section-title) !important;
	letter-spacing: var(--ieum-tracking-title);
	line-height: var(--ieum-leading-tight) !important;
}

:where(.hero-kicker, .section-kicker, .card-kicker, .open-art-eyebrow) {
	font-family: var(--ieum-font-body);
	font-size: var(--ieum-type-label);
	letter-spacing: var(--ieum-tracking-label);
}

/* WordPress shared header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--ieum-header-line);
	background: color-mix(in srgb, var(--eg-paper) 94%, transparent);
	backdrop-filter: blur(14px);
}

/* Join the shared header rule directly to the framed editorial heroes. */
.wp-site-blocks > main:is(.open-art-room, .ieum-about-page, .ieum-exhibitions-page) {
	margin-block-start: 0;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 2rem;
	width: 100%;
	max-width: var(--ieum-content-wide);
	min-height: var(--ieum-header-height);
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

.ieum-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.ieum-brand__lockup {
	display: block;
	width: auto;
	height: var(--ieum-header-logo-height);
}

.site-header .wp-block-site-title a,
.site-header .wp-block-navigation-item__content {
	text-decoration: none;
}

.site-header .wp-block-navigation-item__content {
	font-family: var(--ieum-font-body);
	font-size: var(--ieum-header-menu-size);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-header .wp-block-navigation__container {
	gap: var(--ieum-header-menu-gap);
}

.site-header .wp-block-navigation {
	flex: 0 0 auto;
	margin-left: auto;
}

.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--eg-clay);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 7px;
}

/* Standalone brand-document header uses the same measurements. */
.sitebar {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--ieum-header-line);
	background: color-mix(in srgb, var(--eg-paper, #f7f4ee) 94%, transparent);
	backdrop-filter: blur(14px);
}

.sitebar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: min(var(--ieum-content-wide), calc(100% - 3rem));
	min-height: var(--ieum-header-height);
	margin: auto;
}

.sitebar-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.sitebar-brand img {
	width: auto;
	height: var(--ieum-header-logo-height);
}

.sitebar nav {
	display: flex;
	align-items: center;
	gap: var(--ieum-header-menu-gap);
}

.sitebar nav a {
	font-family: var(--ieum-font-body);
	font-size: var(--ieum-header-menu-size);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.sitebar nav a[aria-current="page"] {
	color: var(--eg-clay, #ca6548);
	text-decoration: underline;
	text-underline-offset: 7px;
}

@media (max-width: 781px) {
	:root {
		--ieum-header-logo-height: 48px;
	}

	.site-header {
		background: var(--eg-paper);
		backdrop-filter: none;
	}

	.site-header-inner {
		min-height: 68px;
		padding: 0.65rem 1rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
		color: var(--eg-ink);
		background: var(--eg-paper);
	}

	.site-header .wp-block-navigation__responsive-dialog {
		padding: 1.25rem;
	}

	.site-header .wp-block-navigation__responsive-container-close {
		top: 1.15rem;
		right: 1rem;
		display: grid;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		place-items: center;
		border: 1px solid var(--eg-line);
		border-radius: 50%;
		background: var(--eg-paper);
	}

	.site-header .wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
		padding-top: 5.5rem !important;
	}

	.site-header .wp-block-navigation__responsive-container-content::before {
		width: 100%;
		margin-bottom: 1.35rem;
		color: var(--eg-moss);
		content: "IEUM / MENU";
		font: 700 0.72rem/1 var(--ieum-font-latin);
		letter-spacing: 0.13em;
		text-align: left;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		width: 100%;
		align-items: stretch !important;
		gap: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid var(--eg-line);
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
		border-bottom: 1px solid var(--eg-line);
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 1rem 0 !important;
		font-family: var(--ieum-font-display);
		font-size: 1.35rem;
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.25;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
		align-self: center;
		color: var(--eg-moss);
		content: "→";
		font: 700 0.9rem/1 var(--ieum-font-latin);
	}

	.sitebar-inner {
		width: calc(100% - 28px);
		min-height: 68px;
	}
}

@media (max-width: 390px) {
	:root {
		--ieum-type-section-title: 2.45rem;
	}
}

/* Shared IEUM footer — approved on the About and Open Art Room pages. */
.open-art-footer-preview {
	margin-block-start: 0 !important;
	border-top: 1px solid rgba(247, 244, 238, 0.24);
	background: var(--eg-ink);
	color: var(--eg-paper);
}

.open-art-footer-preview a {
	color: inherit;
	text-decoration: none;
}

.open-art-footer-preview__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.85fr) minmax(190px, 0.65fr);
	width: min(var(--ieum-content-wide), calc(100% - 3rem));
	min-height: 280px;
	margin-inline: auto;
}

.open-art-footer-preview__brand,
.open-art-footer-preview__nav,
.open-art-footer-preview__meta {
	padding: clamp(2.75rem, 4.5vw, 4.25rem) clamp(1.5rem, 3vw, 3rem);
}

.open-art-footer-preview__brand {
	padding-left: 0;
}

.open-art-footer-preview__brand img {
	display: block;
	width: auto;
	height: 4.35rem;
}

.open-art-footer-preview__brand p {
	max-width: 390px;
	margin: 1.6rem 0 0;
	color: color-mix(in srgb, var(--eg-paper) 78%, transparent);
	font-size: 0.9rem;
	line-height: 1.8;
	word-break: keep-all;
}

.open-art-footer-preview__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: 1.05rem 1.8rem;
	border-left: 1px solid rgba(247, 244, 238, 0.24);
}

.open-art-footer-preview__nav a {
	width: max-content;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
}

.open-art-footer-preview__nav a:hover,
.open-art-footer-preview__nav a:focus-visible,
.open-art-footer-preview__nav a[aria-current="page"] {
	color: #ef8a69;
}

.open-art-footer-preview__meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-left: 1px solid rgba(247, 244, 238, 0.24);
}

.open-art-footer-preview__meta p {
	margin: 0;
	color: color-mix(in srgb, var(--eg-paper) 74%, transparent);
	font-size: 0.78rem;
	line-height: 1.75;
}

.open-art-footer-preview__meta p:first-child {
	color: var(--eg-paper);
	font-family: var(--ieum-font-display);
	font-size: 1rem;
	font-weight: 700;
}

@media (max-width: 920px) {
	.open-art-footer-preview__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
	}

	.open-art-footer-preview__meta {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 2rem;
		padding-left: 0;
		border-top: 1px solid rgba(247, 244, 238, 0.24);
		border-left: 0;
	}
}

@media (max-width: 680px) {
	.open-art-footer-preview__inner {
		grid-template-columns: 1fr;
		width: min(100% - 2rem, var(--ieum-content-wide));
	}

	.open-art-footer-preview__brand,
	.open-art-footer-preview__nav,
	.open-art-footer-preview__meta {
		padding: 2rem 0;
	}

	.open-art-footer-preview__brand img {
		height: 3.5rem;
	}

	.open-art-footer-preview__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 1px solid rgba(247, 244, 238, 0.24);
		border-left: 0;
	}

	.open-art-footer-preview__meta {
		grid-column: auto;
		align-items: end;
	}
}