/* Complete image-led experience. Material and interaction remain ahead of decoration. */
:root { --experience-ink: #25332b; --experience-paper: #fcfbf8; --elevare-page: #fcfbf8; }
body { background: var(--experience-paper); }
.site-main { background: var(--experience-paper); }
.main-navigation { display: flex; align-items: center; gap: 1.75rem; }
.navigation-spaces { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; text-decoration: none; color: inherit; }
.site-header__cta { font-size: .8125rem; }
.button { border-radius: 0; font-weight: 500; }
.button--primary { background: var(--experience-ink); border-color: var(--experience-ink); }
a:focus-visible,summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
h1 { overflow-wrap: break-word; }
/* Discovery: a story entrance, with the palette immediately within reach. */
.experience-catalog { padding: 0; }
.discovery-hero { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 35rem; background: #ece9e1; }
.discovery-hero__copy { padding: clamp(3rem,6vw,6rem) var(--editorial-gutter); align-self: center; }
.discovery-hero h1 { font-size: clamp(3.75rem,6.4vw,6.5rem); max-width: 9ch; line-height: .98; margin: 0 0 2rem; }
.discovery-hero__copy > p:not(.editorial-eyebrow) { max-width: 32ch; margin-bottom: 2rem; font-size: 1rem; color: var(--elevare-ink-soft); }
.discovery-hero figure { position: relative; margin: 0; min-width: 0; }
.discovery-hero figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.discovery-hero figcaption { position: absolute; bottom: 1rem; right: 1rem; padding: .4rem .75rem; background: var(--experience-paper); font-size: .6875rem; }
.collection-paths { padding-block: 3rem 4rem; }
.collection-paths__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; }
.collection-paths__grid a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .75rem; padding-block: 1rem; border-block: 1px solid var(--elevare-line); color: inherit; text-decoration: none; font-size: .9375rem; }
.collection-paths__grid img { width: 3rem; height: 3rem; object-fit: cover; }
.collection-paths__grid small { display: block; margin-top: .25rem; color: var(--elevare-ink-soft); font-size: .6875rem; }
.discovery-colors { padding-bottom: 6rem; scroll-margin-top: 3rem; }
.discovery-colors__heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2.5rem; }
.discovery-colors__heading h2 { font-size: clamp(2.25rem,4vw,4rem); max-width: 18ch; margin: 0; }
.discovery-colors__heading > p { max-width: 28ch; font-size: .875rem; color: var(--elevare-ink-soft); margin: 0; }
.discovery-search { display: grid; grid-template-columns: auto minmax(10rem,25rem) 1fr; gap: 1rem; align-items: center; border-top: 1px solid var(--elevare-line); padding-block: 1.5rem; margin-top: 1rem; }
.discovery-search[hidden],.discovery-search [hidden],.product-card[hidden] { display: none !important; }
.discovery-search > label { font-size: .8125rem; }
.discovery-search__field { display: flex; gap: .75rem; align-items: center; }
.discovery-search input { width: 100%; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid #8c918a; padding: .75rem .25rem; border-radius: 0; font: inherit; font-size: .875rem; }
.discovery-search__clear { background: transparent; border: 0; padding: .75rem .25rem; cursor: pointer; font-size: .75rem; text-decoration: underline; }
.discovery-search__status { justify-self: end; margin: 0; font-size: .75rem; color: var(--elevare-ink-soft); }
.discovery-search__empty { grid-column: 1 / -1; padding: 2rem 0; }
.experience-catalog .product-grid,.site-main--catalog .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem 2rem; }
.product-card__media { aspect-ratio: 1 / 1; border: 0; }
.product-card__title { font-size: clamp(1.125rem,1.5vw,1.5rem); font-weight: 400; }
.product-card__body { position: relative; padding-top: 1rem; padding-right: 2rem; }
.product-card__body::after { content: '↗'; position: absolute; top: 1rem; right: 0; font-size: 1.25rem; }
.product-card__badge { font-size: .625rem; margin-top: .65rem; color: #626b63; }
.product-card__code { font-size: .75rem; }
.product-card__placeholder { background: #eae7df; }
/* Collection detail is an introduction beside its room photograph. */
.site-main--catalog { padding-top: 1.5rem; }
.site-main--catalog > .container > .breadcrumb { margin-bottom: 1.5rem; }
.collection-experience { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; padding-bottom: 4rem; margin: 0; }
.collection-experience__copy h1 { font-size: clamp(3rem,5.5vw,5.5rem); line-height: 1.02; max-width: 11ch; }
.collection-experience .archive-description { max-width: 38ch; }
.collection-experience__image { margin: 0; min-width: 0; }
.collection-experience__image img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.collection-colors { padding-bottom: 5rem; }
.site-main--catalog > .container { padding-bottom: 0; }
/* Shared product experience has honest layouts for each available media set. */
.product-study--slab .study-product-scene { padding-inline: var(--editorial-gutter); background: #eeeae2; }
.product-study--slab .study-product-scene > img { height: auto; min-height: 0; max-height: 70svh; object-fit: contain; }
.product-study--slab .study-product-scene figcaption { padding-right: 0; }
.product-study--room .study-product-scene > img,
.study-second-space > img { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: contain; }
.study-photo-pending { padding-block: 4rem; background: #eeeae2; }
.study-photo-pending > p:last-child { max-width: 45ch; font-size: 1.25rem; }
.study-material--no-slab { grid-template-columns: 1fr; }
.study-material--no-slab .study-material__image { display: none; }
.study-material--no-slab .study-material__body { max-width: 56rem; }
.study-authored { max-width: 80ch; padding-block: 3rem; }
.study-material__body:not(:has(figure)) { align-self: center; }
.study-product-heading h1 { font-size: clamp(2.75rem,5.7vw,6rem); }
.study-product-heading > div { min-width: 0; }
.study-product-heading > a { flex-shrink: 0; }
.study-sample { background: #26382c; color: #fff; }
.study-sample .editorial-eyebrow { color: #d2d9d0; }
.study-sample .button { background: #fcfbf8; color: #26382c; border-color: #fcfbf8; }
/* About: a wide opening, a material story, a quiet typographic manifesto. */
.experience-about { padding: 1.5rem 0 0; }
.about-opening { padding-block: 1rem 3.5rem; }
.about-opening h1 { max-width: 16ch; font-size: clamp(3.5rem,6.5vw,6.5rem); line-height: 1; margin-bottom: 2rem; }
.about-opening > p:last-child { max-width: 46ch; color: var(--elevare-ink-soft); }
.about-opening__image { margin: 0; }
.about-opening__image img { display: block; width: 100%; max-height: 43rem; aspect-ratio: 2 / 1; object-fit: cover; }
.about-story { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6rem; padding-block: 7rem; }
.experience-about h2 { font-size: clamp(2.25rem,4vw,4rem); line-height: 1.1; }
.about-story h2 { max-width: 13ch; }
.about-story p { max-width: 50ch; }
.about-story__lead { font-size: clamp(1.25rem,1.8vw,1.5rem); }
.about-principles { background: #ece9e1; padding-block: 5rem; }
.about-principles h2 { max-width: 18ch; }
.about-principles__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4rem; margin-top: 4rem; }
.about-principles__grid > div { border-top: 1px solid #c4c8be; padding-top: 1.5rem; }
.about-principles__grid span { font-size: .6875rem; }
.about-principles__grid h3 { font-size: 1.5rem; margin-block: 2rem 1rem; }
.about-principles__grid p { font-size: .9375rem; color: var(--elevare-ink-soft); }
.about-material-story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6rem; align-items: center; padding-block: 7rem; }
.about-material-story figure { margin: 0; }
.about-material-story img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-material-story p:not(.editorial-eyebrow) { max-width: 37ch; color: var(--elevare-ink-soft); }
.about-local { background: #26382c; color: #fff; padding-block: 5rem; }
.about-local .editorial-eyebrow { color: #d2d9d0; }
.about-local h2 { max-width: 18ch; }
.about-local address { margin-block: 2rem; font-size: .9375rem; font-style: normal; }
.about-local address a { color: inherit; }
.about-local .button { color: #26382c; background: #fcfbf8; border-color: #fcfbf8; }
/* Contact: invitation above, direct contacts beside an open form. */
.site-main--contact { padding-top: 1.5rem; }
.contact-header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; max-width: none; padding-block: 1rem 4rem; margin: 0; }
.contact-header__title { font-size: clamp(3.25rem,5.5vw,5.5rem); max-width: 10ch; line-height: 1.02; }
.contact-header__image { margin: 0; }
.contact-header__image img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.contact { grid-template-columns: .8fr 1.2fr; gap: 7rem; border-top: 1px solid var(--elevare-line); padding-top: 4rem; }
.contact__details { grid-column: 1; grid-row: 1; }
.contact__form { grid-column: 2; grid-row: 1; border: 0; background: transparent; padding: 0; }
.contact__name { font-size: 1.5rem; }
.contact__address { font-size: .9375rem; overflow-wrap: anywhere; }
.contact__map:has(.contact__map-placeholder) { aspect-ratio: auto; min-height: 0; padding: 1rem 0; border: 0; background: transparent; }
.contact__map-placeholder { font-size: .75rem; max-width: 32ch; padding: 0; text-align: left; }
.contact__form input[type="text"],.contact__form input[type="email"],.contact__form input[type="tel"],.contact__form textarea { background: transparent; border: 0; border-bottom: 1px solid #a5aaa0; border-radius: 0; padding-inline: .25rem; box-shadow: none; }
.contact__form input:focus,.contact__form textarea:focus { outline: 2px solid #667361; outline-offset: 3px; }
.contact__form .ff-el-group { margin-bottom: 1.75rem; }
.contact__form .ff-el-input--label label { font-weight: 400; }
/* Documents and utility pages use the same scale, with a calm reading column. */
.site-main--legal { padding-top: 1.5rem; }
.legal-header { max-width: none; padding-block: 1rem 3rem; border-bottom: 1px solid var(--elevare-line); }
.legal-header__title { font-size: clamp(3.5rem,6vw,6rem); margin-bottom: 1.5rem; }
.legal { grid-template-columns: minmax(12rem,1fr) minmax(0,2.5fr); gap: 5rem; }
.legal__doc { max-width: 72ch; padding-left: 0; }
.legal__toc { background: transparent; border: 0; padding: 0; }
.legal__toc-list { padding-left: 0; list-style: none; }
.legal__toc-item a { display: block; padding-block: .65rem; font-size: .8125rem; border-bottom: 1px solid var(--elevare-line); text-decoration: none; }
.legal__content h2 { scroll-margin-top: 6rem; font-size: 1.75rem; }
.site-main--thanks > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding-block: 4rem; }
.thanks { padding: 0; }
.thanks__title { font-size: clamp(3rem,5vw,5rem); }
.thanks-image { margin: 0; }
.thanks-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.error-404 { max-width: 55rem; padding-block: 3rem 6rem; }
.error-404 h1 { font-size: clamp(3rem,5vw,5rem); }
.site-layout { gap: 4rem; }
.site-footer { padding-top: 4rem; background: #efede7; }
.site-footer__inner { gap: 3rem; }
.site-footer__bottom { margin-top: 3rem; }
@media (max-width: 1100px) {
	.main-navigation { gap: 1rem; }
	.navigation-spaces { font-size: .75rem; }
	.main-navigation .menu { gap: 1rem; }
	.site-header__inner { gap: 1rem; }
	.contact { gap: 3rem; }
	.collection-paths__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 782px) {
	.main-navigation { display: none; }
	.main-navigation.is-open { display: block; }
	.navigation-spaces { display: flex; padding: .75rem 0; font-size: 1rem; }
	.discovery-hero { min-height: 0; grid-template-columns: 1fr 1fr; }
	.discovery-hero__copy { padding-block: 3rem; }
	.discovery-hero h1 { font-size: 3.5rem; }
	.experience-catalog .product-grid,.site-main--catalog .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 1.25rem; }
	.collection-experience { gap: 2rem; }
	.contact-header { gap: 2rem; }
	.about-story,.about-material-story { gap: 3rem; }
	.legal { grid-template-columns: 1fr; gap: 3rem; }
	.legal__toc { position: static; }
	.site-main--thanks > .container { gap: 2rem; }
}
@media (max-width: 600px) {
	.discovery-hero { grid-template-columns: 1fr; }
	.discovery-hero h1 { font-size: 4.25rem; }
	.discovery-hero figure img { height: 20rem; }
	.discovery-hero__copy { padding-block: 3rem; }
	.collection-paths { padding-block: 2rem 3rem; }
	.collection-paths__grid { gap: .5rem 1rem; }
	.collection-paths__grid a { grid-template-columns: 2rem 1fr; gap: .5rem; font-size: .8125rem; }
	.collection-paths__grid img { width: 2rem; height: 2rem; }
	.collection-paths__grid a > span:last-child { display: none; }
	.discovery-colors__heading { display: block; margin-bottom: 2rem; }
	.discovery-colors__heading > p { margin-top: 1.5rem; }
	.discovery-search { grid-template-columns: 1fr auto; gap: .5rem; }
	.discovery-search > label { grid-column: 1 / -1; }
	.discovery-search__field { grid-column: 1; }
	.discovery-search__status { grid-column: 2; }
	.product-card__body { padding-right: 1rem; }
	.product-card__body::after { font-size: 1rem; }
	.product-card__title { font-size: 1.0625rem; line-height: 1.25; }
	.product-card__badge { font-size: .5625rem; }
	.collection-experience { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 3rem; }
	.collection-experience__copy h1 { font-size: 3.5rem; max-width: none; }
	.collection-experience__image img { aspect-ratio: 4 / 3; }
	.collection-colors,.discovery-colors { padding-bottom: 3.5rem; }
	.study-product-heading h1 { font-size: 2.75rem; }
	.about-opening { padding-bottom: 2rem; }
	.about-opening h1 { font-size: 3.5rem; }
	.about-opening__image img { aspect-ratio: 4 / 5; }
	.about-story,.about-material-story { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3.5rem; }
	.about-principles { padding-block: 3.5rem; }
	.about-principles__grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
	.about-principles__grid h3 { margin-top: 1rem; }
	.about-local { padding-block: 3.5rem; }
	.contact-header { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 3rem; }
	.contact-header__title { font-size: 3.5rem; }
	.contact-header__image img { aspect-ratio: 4 / 3; }
	.contact { display: flex; flex-direction: column; gap: 3rem; padding-top: 2.5rem; }
	.contact__form { order: 0; }
	.contact__details { order: 1; padding-top: 2rem; border-top: 1px solid var(--elevare-line); }
	.legal-header__title { font-size: 3rem; }
	.legal-header { padding-bottom: 2rem; }
	.site-main--thanks > .container { grid-template-columns: 1fr; padding-block: 3rem; }
	.thanks-image img { aspect-ratio: 4 / 3; }
	.thanks__title { font-size: 3rem; }
	.site-footer { padding-top: 3rem; }
}
/* Keep plugin controls consistent with the rest of the open form. */
/* textarea is named explicitly: Fluent Forms styles its own with a higher
   specificity than the class alone, so the message box was left on the
   plugin's font (-apple-system, which is Segoe UI on Windows) and its own
   padding, while every other field used Archivo. Same field set, two
   different looks, and a different pair of looks on each operating system. */
.contact__form textarea.ff-el-form-control,
.contact__form .ff-el-form-control { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid #a5aaa0; box-shadow: none; font: inherit; font-size: .9375rem; padding: .65rem .25rem; }
.contact__form .ff_submit_btn_wrapper button { border-radius: 0; }
.contact__map:has(.contact__map-placeholder) { justify-content: flex-start; align-items: flex-start; }
@media (min-width: 783px) { .contact__details { position: sticky; top: 2rem; align-self: start; } }

/* Interaction feedback stays subtle and does not depend on motion. */
.swatch-strip__status { font-size: .75rem; color: var(--elevare-ink-soft); }
.swatch.is-loading { opacity: .55; }
.product-card__link:focus-visible { outline: 2px solid var(--experience-ink); outline-offset: 6px; }
.product-card__body::after { transition: transform 200ms ease; }
.product-card__link:hover .product-card__body::after,
.product-card__link:focus-visible .product-card__body::after { transform: translate(3px, -3px); }
.discovery-search input:focus-visible { outline: 2px solid var(--experience-ink); outline-offset: 3px; }
.discovery-search__clear { min-height: 44px; }
@media (max-width: 600px) {
	.discovery-hero h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); }
	.discovery-search { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
	.product-card__body::after { transition: none; }
}

.hero-controls { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-inline: clamp(1rem, 3vw, 3rem); pointer-events: none; }
.hero-controls[hidden] { display: none; }
.hero-controls button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: rgb(19 27 23 / 25%); color: #fff; cursor: pointer; font-size: 1.35rem; line-height: 1; pointer-events: auto; transition: background-color 200ms ease, border-color 200ms ease; }
.hero-controls button:hover { background: rgb(19 27 23 / 65%); border-color: #fff; }
.hero-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* --- Rows that scroll sideways --------------------------------------- *
 * One set of rules for every such row. The scrollbar is hidden: macOS draws
 * it as an overlay that fades away, Windows as a permanent grey bar under the
 * pictures, so the same row read as two different designs. With the bar gone
 * the arrows are how a mouse moves the row, and the row keeps its tab stop and
 * its native wheel and trackpad scrolling.
 */
.carousel { position: relative; }
[data-carousel-track] { scrollbar-width: none; -ms-overflow-style: none; }
[data-carousel-track]::-webkit-scrollbar { width: 0; height: 0; }
.carousel__controls {
	position: absolute; z-index: 2; left: 0; right: 0; top: 40%;
	display: flex; align-items: center; justify-content: space-between;
	padding-inline: 1rem; pointer-events: none; transform: translateY(-50%);
}
.carousel__controls[hidden] { display: none; }
.carousel__controls button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: rgb(19 27 23 / 40%); color: #fff; cursor: pointer; font-size: 1.35rem; line-height: 1; pointer-events: auto; transition: background-color 200ms ease, border-color 200ms ease; }
.carousel__controls button:not([aria-disabled="true"]):hover { background: rgb(19 27 23 / 75%); border-color: #fff; }
.carousel__controls button[aria-disabled="true"] { opacity: .45; cursor: default; }
.carousel__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* The arrows are an invitation, not furniture: on a mouse they appear when the
 * pointer is over the row and whenever something inside it holds focus, so a
 * keyboard never tabs onto an invisible button. Hidden with visibility rather
 * than display, so the controller can still measure them. On touch there is no
 * hover to come back from, so they stay. */
@media (hover: hover) and (pointer: fine) {
	.carousel__controls,
	.hero-controls { opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms ease; }
	.carousel:hover > .carousel__controls,
	.carousel:focus-within > .carousel__controls,
	.home-hero:hover .hero-controls,
	.home-hero:focus-within .hero-controls { opacity: 1; visibility: visible; }
}
.home-reveal-pending { opacity: 0; transform: translateY(20px); }
.home-reveal-ready { transition: opacity 650ms ease-out, transform 650ms ease-out; }
.home-reveal-pending:focus-within { opacity: 1; transform: none; }
@media (max-width: 782px) {
	.hero-controls { top: 32%; bottom: auto; }
}
@media (max-width: 700px) {
	.carousel__controls { padding-inline: .75rem; }
}

@media (min-width: 783px) {
	.site-header { position: sticky; top: 0; z-index: 100; }

	/* The home cover is one screen: the banner and the collection strip share
	   100svh between them, and the header lies over the top of the banner
	   rather than stacking above it. It carries a light veil of the page's own
	   paper so the navigation and the logo are not left competing with the
	   photograph — see the header rules below. */
	.home:has(.home-editorial .home-hero__media) .home-cover {
		height: 100svh;
		display: flex;
		flex-direction: column;
	}
	.home:has(.home-editorial .home-hero__media) .home-cover > .home-hero {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		max-height: none;
	}
	.home:has(.home-editorial .home-hero__media) .home-cover > .home-palette { flex: 0 0 auto; }

	.home:has(.home-editorial .home-hero__media) .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* A veil of the page's own paper, not a dark band: enough to lift the
		   navigation and the logo off the photograph without hiding what is
		   behind them. The blur is what lets the tint stay this light — it
		   takes the detail out from under the type, so the type has something
		   even to sit on, while the picture either side of the header is left
		   exactly as shot. */
		background: rgb(250 249 246 / 62%);
		backdrop-filter: blur(14px) saturate(115%);
		-webkit-backdrop-filter: blur(14px) saturate(115%);
		transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
	}
	/* Where the browser cannot blur, the veil carries the contrast on its own. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.home:has(.home-editorial .home-hero__media) .site-header {
			background: rgb(250 249 246 / 85%);
		}
	}
	/* Once the reader has left the cover the header is over ordinary page
	   ground again, so it takes the solid bar every other page uses. */
	.home:has(.home-editorial .home-hero__media) .site-header.is-scrolled {
		background: var(--elevare-surface);
		color: var(--experience-ink);
		box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-header, .hero-controls, .hero-controls button, .carousel__controls, .carousel__controls button, .home-reveal-ready { transition: none !important; }
	.home-reveal-pending { opacity: 1; transform: none; }
}

/* Localized, low-contrast contour accents behind image-and-text sections. */
:is(.discovery-hero:has(figure), .home-material:has(.home-material__image),
    .about-material-story:has(figure), .study-material:not(.study-material--no-slab),
    .collection-experience:has(.collection-experience__image),
    .contact-header:has(.contact-header__image), .site-main--thanks > .container:has(.thanks-image)) {
	position: relative;
	isolation: isolate;
}
:is(.discovery-hero:has(figure), .home-material:has(.home-material__image),
    .about-material-story:has(figure), .study-material:not(.study-material--no-slab),
    .collection-experience:has(.collection-experience__image),
    .contact-header:has(.contact-header__image), .site-main--thanks > .container:has(.thanks-image))::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: min(38%, 28rem);
	height: min(55%, 23rem);
	background-image:
		repeating-radial-gradient(ellipse 95% 70% at 0% 100%, transparent 0 27px, rgba(var(--wave-line), .17) 28px 29px, transparent 30px 54px),
		radial-gradient(ellipse at 35% 60%, rgba(var(--wave-wash), .68), transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}
.discovery-hero:has(figure) { --wave-line: 85, 106, 87; --wave-wash: 214, 226, 211; }
.collection-experience:has(.collection-experience__image) { --wave-line: 131, 105, 77; --wave-wash: 237, 220, 195; }
.contact-header:has(.contact-header__image) { --wave-line: 91, 108, 121; --wave-wash: 211, 225, 230; }
.home-material:has(.home-material__image) { --wave-line: 123, 102, 91; --wave-wash: 234, 218, 210; }
.about-material-story:has(figure) { --wave-line: 122, 113, 79; --wave-wash: 230, 225, 199; }
.study-material:not(.study-material--no-slab) { --wave-line: 110, 100, 121; --wave-wash: 225, 217, 232; }
.site-main--thanks > .container:has(.thanks-image) { --wave-line: 96, 116, 104; --wave-wash: 207, 229, 218; }
.discovery-hero:has(figure)::before { left: 0; bottom: 0; }
.collection-experience:has(.collection-experience__image)::before { left: 2%; top: 0; transform: rotate(18deg); }
.contact-header:has(.contact-header__image)::before { left: 1%; bottom: 0; transform: rotate(-24deg); }
.home-material:has(.home-material__image)::before { right: 0; bottom: 0; transform: rotate(180deg); }
.about-material-story:has(figure)::before { right: 2%; top: 0; transform: rotate(145deg); }
.study-material:not(.study-material--no-slab)::before { right: 0; bottom: 4%; transform: rotate(215deg); }
.site-main--thanks > .container:has(.thanks-image)::before { left: 3%; top: 0; transform: rotate(32deg); }
@media (max-width: 700px) {
	:is(.discovery-hero:has(figure), .home-material:has(.home-material__image),
	    .about-material-story:has(figure), .study-material:not(.study-material--no-slab),
	    .collection-experience:has(.collection-experience__image),
	    .contact-header:has(.contact-header__image), .site-main--thanks > .container:has(.thanks-image))::before { width: 60%; height: 25%; }
}


/* --- The header over the banner -------------------------------------- *
 * One ink, on every banner. Until 1.9.1 this was decided per banner by
 * sampling the photograph, because a fully transparent header had no ground
 * of its own and no single colour cleared 4.5:1 on all four. The veil gives it
 * one, so the measuring, the caching, the light/dark switch and the fallback
 * for an unreadable file all came out — about seventy lines of script and
 * thirty of stylesheet for something a translucent plate settles outright.
 *
 * Measured from the rendered pixels, veil and blur included: the ink reads
 * between 7.83:1 and 12.02:1 across the four banners, worst case on the logo.
 */
.home:has(.home-editorial .home-hero__media) .site-header,
.home:has(.home-editorial .home-hero__media) .site-header .main-navigation a,
.home:has(.home-editorial .home-hero__media) .site-header .site-title a {
	color: var(--experience-ink);
}