/* NAUxObjet landing page (template-objet.php). Everything is scoped to body.naux-objet. */
body.naux-objet {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #231f20;
	font-family: 'Noto Sans Edit', 'Noto Sans KR Edit', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}
.naux-objet img { max-width: 100%; height: auto; display: block; }
.naux-objet a { color: inherit; }
.naux-objet h1, .naux-objet h2, .naux-objet h3 { font-family: inherit; color: inherit; text-transform: none; }
/* The theme sets word-break: break-all on text elements, which splits English words mid-word. */
.naux-objet h1, .naux-objet h2, .naux-objet h3, .naux-objet p, .naux-objet ol, .naux-objet ul, .naux-objet li, .naux-objet blockquote { word-break: keep-all; overflow-wrap: break-word; }
.naux-objet [id] { scroll-margin-top: 90px; }

/* Header */
.objet-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px clamp(20px, 5vw, 64px);
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Logo: the PNG is used as a mask so it can take a texture. On hover the same watercolour wash as
   the NAUx logo (--naux-logo-texture, set in Additional CSS) fades in while the solid colour
   fades out. Width is set from the height (logo is 324 x 272) rather than with aspect-ratio,
   which Safari 14 and older lack: there the header logo would collapse to zero width. */
.objet-logo-mark {
	position: relative;
	display: block;
	height: 46px;
	width: calc(46px * 324 / 272);
	-webkit-mask: url(../images/nauxobjet-logo.png) center / contain no-repeat;
	mask: url(../images/nauxobjet-logo.png) center / contain no-repeat;
	background: #231f20;
	transition: background-color .4s ease-out;
}
.objet-logo-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--naux-logo-texture, url(../images/logo-texture-wash.png)) center / cover;
	opacity: 0;
	transition: opacity .3s ease .3s;
}
/* Hover only where there is a mouse: on touch screens a tap would leave the wash on.
   Keyboard focus is a separate rule, so browsers without :focus-visible still get the hover. */
@media (hover: hover) {
	.objet-logo:hover .objet-logo-mark,
	.objet-logo-mark--footer:hover {
		background-color: transparent;
		transition: background-color .7s ease-in-out;
	}
	.objet-logo:hover .objet-logo-mark::after,
	.objet-logo-mark--footer:hover::after {
		opacity: 1;
		transition: opacity .3s ease;
	}
}
.objet-logo:focus-visible .objet-logo-mark {
	background-color: transparent;
	transition: background-color .7s ease-in-out;
}
.objet-logo:focus-visible .objet-logo-mark::after {
	opacity: 1;
	transition: opacity .3s ease;
}
.objet-nav { display: flex; gap: clamp(14px, 3vw, 36px); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.objet-nav a { text-decoration: none; }
.objet-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Hero, on the brochure cover gray */
.objet-hero { background: #e7e8ea; text-align: center; padding: clamp(56px, 9vw, 120px) 20px clamp(48px, 7vw, 96px); }
.objet-kicker { margin: 0 0 18px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #555; }
.objet-title { margin: 0; font-size: clamp(34px, 5.6vw, 66px); font-weight: 300; line-height: 1.15; }
.objet-gloam { font-weight: 700; letter-spacing: 0.34em; margin-right: 0.06em; }
.objet-sub { margin: 16px 0 0; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.1em; word-spacing: 0.25em; }
.objet-hero img { width: min(900px, 94%); margin: clamp(32px, 5vw, 64px) auto 0; }
.objet-cta {
	display: inline-block; margin-top: clamp(28px, 4vw, 44px); padding: 12px 30px;
	border: 1px solid #231f20; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; font-weight: 400;
}
.objet-cta:hover { background: #231f20; color: #fff; }

/* Sections */
.objet-section { max-width: 1160px; margin: 0 auto; padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 48px); }
.objet-section h2 { margin: 0 0 6px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.25; }
.objet-lead { margin: 0 0 clamp(24px, 3vw, 40px); font-size: 15px; letter-spacing: 0.06em; color: #555; }
.objet-section p { margin: 0 0 1.1em; }
.objet-ko { word-break: keep-all; }
.objet-en { color: #555; }
.objet-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.objet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.objet-wide { margin: 0 0 clamp(32px, 5vw, 56px); }
.objet-section h3 { margin: 28px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.objet-section h3:first-of-type { margin-top: 0; }

/* Quote */
.objet-quote { background: #f3f2f0; text-align: center; padding: clamp(64px, 9vw, 128px) 20px; }
.objet-quote img { width: min(520px, 90%); margin: 0 auto; }
.objet-quote blockquote { margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; border: 0; font-style: italic; font-size: clamp(17px, 2vw, 22px); letter-spacing: 0.02em; }

/* Editions */
.objet-editions { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.objet-editions li { margin: 0; }
.objet-num { display: block; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.objet-editions h3 { margin: 2px 0 0; font-size: 17px; }
.objet-editions p { font-size: 13.5px; line-height: 1.65; }
.objet-italic { font-style: italic; color: #555; margin-bottom: 10px !important; }
.objet-meta { font-size: 12.5px; color: #777; letter-spacing: 0.02em; }

/* Brochure */
.objet-brochure { text-align: center; }
.objet-brochure ._df_thumb { float: none; display: inline-block; margin: 8px auto 0; }

/* Footer */
.objet-footer { border-top: 1px solid #e5e5e5; padding: 48px 20px 60px; text-align: center; font-size: 13px; color: #555; }
.objet-logo-mark--footer { height: 44px; width: calc(44px * 324 / 272); margin: 0 auto 18px; }
.objet-footer p { margin: 4px 0; }
.objet-footer a { text-decoration: none; }
.objet-footer a:hover { text-decoration: underline; }
.objet-copy { margin-top: 14px !important; color: #999; }

@media (max-width: 1024px) {
	.objet-editions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.objet-split, .objet-cols { grid-template-columns: 1fr; }
	.objet-editions { grid-template-columns: repeat(2, 1fr); }
	.objet-header { padding: 10px 18px; }
	.objet-logo-mark { height: 38px; width: calc(38px * 324 / 272); }
	.objet-logo-mark--footer { height: 40px; width: calc(40px * 324 / 272); }
	.objet-nav { gap: 14px; font-size: 11px; }
}