/* ==========================================================================
   Agam Interiors
   Palette comes from the house: the red wall and blue door of the painting,
   the plate indigo, the limewash of the walls, turmeric from the brass.
   ========================================================================== */

:root {
	--ox: #3a0e12;
	--ox-deep: #240709;
	--lime: #e6e0d3;
	--paper: #ede6da;
	--ink: #1e1213;
	--door: #3d5284;
	--indigo: #14205f;
	--tur: #c8962a;
	--gold: #6b5018;
	--brick: #8d2d28;
	--teal: #195f6e;

	--f-display: 'Young Serif', Georgia, 'Times New Roman', serif;
	--f-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-tamil: 'Noto Serif Tamil', 'Young Serif', serif;

	--gut: clamp(1.25rem, 4vw, 4rem);
	--sec: clamp(5rem, 11vw, 10rem);
	--ease: cubic-bezier(0.7, 0, 0.2, 1);
}

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

html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--ox);
	color: var(--paper);
	font-family: var(--f-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

figure {
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--tur);
	outline-offset: 4px;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}
.site-main {
	display: block;
}
.site-main > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 1.15rem var(--gut);
	color: var(--paper);
	transition: color 0.4s ease, transform 0.55s var(--ease);
}
.site-header.is-hidden {
	transform: translateY(-110%);
}
.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}
.site-header[data-theme='light'] {
	color: var(--ink);
}
.site-header a {
	color: inherit;
	text-decoration: none;
}
.site-header .wordmark {
	display: block;
	width: 7.6rem;
	aspect-ratio: 277.44 / 59.27;
	background-color: currentColor;
	-webkit-mask: url(/wp-content/uploads/2026/09/AGAM.svg) left center / contain no-repeat;
	mask: url(/wp-content/uploads/2026/09/AGAM.svg) left center / contain no-repeat;
	font-size: 0;
	text-decoration: none;
	overflow: hidden;
}
.site-nav {
	display: flex;
	gap: clamp(1rem, 3vw, 2.25rem);
	font-size: 1rem;
}
.site-nav a {
	padding-block: 0.25rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
	background-size: 100% 1px;
}

/* Without the motion layer there is no section-aware header, so give it a ground. */
html:not(.has-motion) .site-header {
	position: sticky;
	background: var(--ox);
	color: var(--paper);
}

.site-footer {
	background: var(--gold);
	color: var(--paper);
	padding: clamp(3.5rem, 8vw, 7rem) var(--gut) 1.75rem;
}
.site-footer p {
	margin: 0;
}
.site-footer__top {
	display: grid;
	gap: 0.5rem;
	margin-bottom: clamp(3rem, 8vw, 6rem);
}
.site-footer__name {
	width: min(100%, clamp(16rem, 44vw, 38rem));
	aspect-ratio: 277.44 / 59.27;
	background-color: currentColor;
	-webkit-mask: url(/wp-content/uploads/2026/09/AGAM.svg) left center / contain no-repeat;
	mask: url(/wp-content/uploads/2026/09/AGAM.svg) left center / contain no-repeat;
	font-size: 0;
	overflow: hidden;
}
.site-footer__tag {
	font-size: 1.1rem;
	opacity: 0.8;
}
.site-footer__mail {
	margin-top: 1.5rem !important;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.site-footer__credit a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}
.site-footer__credit img {
	width: 1.5rem;
	height: 1.5rem;
}
.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(237, 230, 218, 0.2);
	font-size: 0.9rem;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.wp-block-heading {
	margin: 0;
}
.wp-block-heading,
.hero__tamil {
	font-kerning: normal;
}

.is-style-door .wp-block-button__link,
.is-style-paper .wp-block-button__link,
.wp-block-button__link {
	display: inline-block;
	padding: 1rem 1.75rem;
	border-radius: 0;
	background: var(--door);
	color: #fff;
	font-family: var(--f-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.35s var(--ease), background-color 0.25s ease, color 0.25s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-3px);
	background: #3f7fdc;
	color: #fff;
}
.is-style-paper .wp-block-button__link {
	background: var(--paper);
	color: var(--ink);
}
.is-style-paper .wp-block-button__link:hover {
	background: #fff;
	color: var(--ink);
}
.wp-block-buttons {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Hero: the painted door, then the house behind it
   Static layout first. The motion layer stacks it and drives it from scroll.
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--gold);
	color: var(--paper);
}
.hero__pin {
	position: relative;
}
.hero__stage {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--gut);
	min-height: 100svh;
	padding: 6.5rem var(--gut) 3rem;
}
.hero__intro {
	position: relative;
	display: grid;
	gap: 1.25rem;
}
.hero__tamil {
	margin: 0;
	font-family: var(--f-tamil);
	font-weight: 600;
	font-size: clamp(5rem, 13.5vw, 15rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--paper);
}
.hero__tagline {
	margin: 0;
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	color: rgba(237, 230, 218, 0.88);
}
.hero__door {
	justify-self: end;
	width: min(64svh, 100%);
	line-height: 0;
}
.hero__door img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: fill;
	clip-path: inset(8.6% 9.4% 9.8% 7.9%);
}

.hero__room {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 78svh;
	overflow: hidden;
	background: var(--ox-deep);
	color: var(--paper);
}
.hero__room::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(36, 7, 9, 0.62) 0%, rgba(36, 7, 9, 0) 24%),
		linear-gradient(to top, rgba(36, 7, 9, 0.9) 0%, rgba(36, 7, 9, 0.35) 45%, rgba(36, 7, 9, 0) 75%);
	pointer-events: none;
}
.hero__room-img {
	position: absolute;
	inset: 0;
}
.hero__room-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__copy {
	position: relative;
	z-index: 2;
	padding: 3rem var(--gut) clamp(2.5rem, 6vw, 5rem);
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}
.hero__title {
	max-width: 15ch;
	font-size: clamp(2.6rem, 7.4vw, 7.4rem);
	line-height: 1;
	letter-spacing: -0.012em;
	color: var(--paper);
}
.hero__title .w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.hero__title .w > span {
	display: inline-block;
}
.hero__lede {
	margin: 0;
	max-width: 34rem;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: rgba(237, 230, 218, 0.92);
}

/* Motion layer: everything stacked inside one pinned screen. */
.has-motion .hero__pin {
	height: 100svh;
	overflow: hidden;
}
.has-motion .hero__stage {
	position: absolute;
	inset: 0;
	min-height: 0;
}
.has-motion .hero__door {
	will-change: transform;
}
.has-motion .hero__door img,
.has-motion .hero__tamil,
.has-motion .hero__tagline {
	opacity: 0;
}
.has-motion .hero__room {
	position: absolute;
	inset: 0;
	z-index: 2;
	min-height: 0;
	visibility: hidden;
	clip-path: inset(50% 50% 50% 50%);
}
.has-motion .hero__room-img img {
	will-change: transform;
}
.has-motion .hero__lede,
.has-motion .hero__copy .wp-block-buttons {
	opacity: 0;
}
.has-motion .hero__title .w > span {
	transform: translateY(112%);
}

@media (max-width: 800px) {
	.hero__stage {
		grid-template-columns: 1fr;
		align-content: center;
		padding-top: 5.5rem;
		gap: 1.25rem;
	}
	.hero__tamil {
		font-size: clamp(5rem, 28vw, 9rem);
	}
	.hero__door {
		justify-self: center;
		width: min(76vw, 46svh);
	}
	.hero__title {
		font-size: clamp(2.4rem, 11.5vw, 4.2rem);
	}
}

/* --------------------------------------------------------------------------
   Story: Uttara's own words, read as you scroll
   -------------------------------------------------------------------------- */

.story {
	background: var(--lime);
	color: var(--ink);
	padding: var(--sec) var(--gut);
}
.story__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto;
	align-items: start;
}
.story__media {
	grid-column: 1 / span 5;
	position: sticky;
	top: 12svh;
	height: 76svh;
}
.story__media .wp-block-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition: opacity 0.9s ease, clip-path 1.1s var(--ease);
}
.story__media .wp-block-image.is-on {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}
html:not(.has-motion) .story__media .wp-block-image:first-child {
	opacity: 1;
	clip-path: inset(0);
}
.story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.story__body {
	grid-column: 7 / span 6;
	padding-block: 8svh 24svh;
}
@media (min-width: 801px) {
	.has-motion .story {
		padding-block: 0;
	}
	.has-motion .story__grid {
		min-height: 100svh;
		align-items: center;
	}
	.has-motion .story__media {
		position: relative;
		top: auto;
	}
	.has-motion .story__body {
		padding-block: 0;
	}
	.has-motion .story__text {
		font-size: clamp(1.2rem, 1.85vw, 1.85rem);
	}
}
.story__title {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	font-size: clamp(2.4rem, 5.2vw, 5rem);
}
.story__text {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.45rem, 2.35vw, 2.3rem);
	line-height: 1.38;
}
.story__text .w {
	display: inline-block;
}
.has-motion .story__text .w {
	opacity: 0.2;
}

@media (max-width: 800px) {
	.story__grid {
		display: block;
	}
	.story__media {
		position: relative;
		top: auto;
		height: auto;
		aspect-ratio: 4 / 5;
		margin-bottom: 2.5rem;
	}
	.story__media .wp-block-image:first-child {
		opacity: 1;
		clip-path: inset(0);
	}
	.story__body {
		padding-block: 0;
	}
}

/* --------------------------------------------------------------------------
   Rooms: one horizontal walk through the house
   -------------------------------------------------------------------------- */

.rooms {
	background: var(--teal);
	color: var(--paper);
	overflow: hidden;
}
.rooms__track {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 5vw, 5rem);
	width: max-content;
	height: 100svh;
	padding: 0 var(--gut) 0 var(--gut);
}
.rooms__intro {
	flex: 0 0 min(44rem, 84vw);
	padding-right: clamp(1rem, 4vw, 4rem);
}
.rooms__title {
	font-size: clamp(2.2rem, 4.8vw, 4.6rem);
	line-height: 1.05;
}
.rooms__lede {
	margin: 1.5rem 0 0;
	max-width: 28rem;
	color: rgba(237, 230, 218, 0.82);
	font-size: 1.15rem;
}
.room {
	--rh: 64svh;
	position: relative;
	flex: 0 0 auto;
	height: var(--rh);
	width: calc(var(--rh) * 1.5);
	overflow: visible;
}
.room--p {
	width: calc(var(--rh) * 0.6667);
}
.room img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.room figcaption {
	position: absolute;
	left: 0;
	top: calc(100% + 0.7rem);
	margin: 0;
	font-size: 0.95rem;
	color: rgba(237, 230, 218, 0.75);
}
.room:nth-of-type(even) {
	align-self: flex-start;
	margin-top: 14svh;
	--rh: 58svh;
	height: var(--rh);
}
.room:nth-of-type(odd) {
	align-self: flex-end;
	margin-bottom: 14svh;
}

@media (max-width: 800px) {
	.rooms {
		overflow: visible;
	}
	.rooms__track {
		width: auto;
		height: auto;
		align-items: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gut);
		padding: var(--sec) var(--gut);
		gap: 1.25rem;
		-webkit-overflow-scrolling: touch;
	}
	.rooms__intro {
		flex-basis: 82vw;
		scroll-snap-align: start;
	}
	.room,
	.room:nth-of-type(even),
	.room:nth-of-type(odd) {
		--rh: 52svh;
		height: var(--rh);
		margin: 0;
		align-self: flex-start;
		scroll-snap-align: center;
	}
	.room figcaption {
		position: static;
		margin-top: 0.7rem;
	}
}

/* --------------------------------------------------------------------------
   Objects: the wall of plates
   -------------------------------------------------------------------------- */

.objects {
	background: var(--brick);
	color: var(--paper);
	padding: var(--sec) var(--gut);
	overflow: hidden;
}
@media (min-width: 801px) {
	/* The art wall slides up over the end of the pinned rooms, so no empty teal is left behind. */
	.has-motion .objects {
		position: relative;
		z-index: 3;
		margin-top: -22svh;
	}
}
.objects__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto clamp(4rem, 9vw, 8rem);
}
.objects__title {
	grid-column: 1 / span 6;
	font-size: clamp(2.2rem, 4.8vw, 4.6rem);
}
.approach {
	grid-column: 8 / span 5;
	display: grid;
	gap: 1.75rem;
	align-content: end;
}
.approach__name {
	font-family: var(--f-body);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}
.approach__text {
	margin: 0.25rem 0 0;
	color: rgba(237, 230, 218, 0.85);
}

.objects__wall {
	columns: 4;
	column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
	max-width: 96rem;
	margin: 0 auto;
}
.wall {
	break-inside: avoid;
	margin: 0 0 clamp(0.75rem, 1.6vw, 1.5rem);
}
.objects__wall .wall {
	margin-top: 0;
}
.objects__wall.is-cols {
	columns: auto;
	display: flex;
	align-items: flex-start;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.wall-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.is-cols .wall {
	margin: 0;
}
@media (max-width: 1000px) {
	.objects__wall {
		columns: 3;
	}
}
@media (max-width: 800px) {
	.objects__wall {
		columns: 2;
	}
}
.wall img {
	width: 100%;
	height: auto;
	box-shadow: 0 1.4rem 2.6rem rgba(20, 6, 6, 0.38);
}
.has-motion .wall img {
	opacity: 0;
	transform: translate(var(--sx, 0), var(--sy, 34px)) scale(0.93);
	transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.16, 0.84, 0.24, 1);
}
.has-motion .objects {
	overflow-x: clip;
}
.has-motion .wall.is-placed img {
	opacity: 1;
	transform: none;
}
.wall--1 { grid-column: 1 / span 4; }
.wall--2 { grid-column: 6 / span 3; margin-top: 6vw; }
.wall--3 { grid-column: 10 / span 3; }
.wall--4 { grid-column: 3 / span 3; }
.wall--5 { grid-column: 7 / span 5; margin-top: 4vw; }
.wall--6 { grid-column: 1 / span 3; margin-top: 3vw; }
.wall--7 { grid-column: 5 / span 4; }
.wall--8 { grid-column: 9 / span 4; margin-top: 5vw; }
.wall--9 { grid-column: 2 / span 3; }
.wall--10 { grid-column: 6 / span 3; margin-top: 4vw; }
.wall--11 { grid-column: 2 / span 4; }
.wall--12 { grid-column: 8 / span 3; margin-top: 6vw; }
.wall--13 { grid-column: 3 / span 3; }
.wall--14 { grid-column: 7 / span 5; margin-top: 3vw; }
.wall--15 { grid-column: 1 / span 2; }
.wall--16 { grid-column: 4 / span 5; margin-top: 4vw; }
.wall--17 { grid-column: 10 / span 3; margin-top: 2vw; }
.wall--18 { grid-column: 5 / span 3; margin-top: 3vw; }

@media (max-width: 800px) {
	.objects__head {
		display: block;
	}
	.approach {
		margin-top: 2.5rem;
	}
	.objects__wall {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.wall:nth-child(odd) { grid-column: 1 / span 4; margin-top: 0; }
	.wall:nth-child(even) { grid-column: 3 / span 4; margin-top: 0; }
	.wall--15 { grid-column: 1 / span 3; }
}

/* --------------------------------------------------------------------------
   Offer
   -------------------------------------------------------------------------- */

.offer {
	background: var(--lime);
	color: var(--ink);
	padding: var(--sec) var(--gut);
}
.offer__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto clamp(4rem, 9vw, 8rem);
}
.offer__title {
	grid-column: 1 / span 5;
	font-size: clamp(2.4rem, 5.2vw, 5rem);
}
.offer__copy {
	grid-column: 7 / span 6;
	display: grid;
	gap: 1.5rem;
}
.offer__text {
	margin: 0;
	max-width: 38rem;
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.6;
}
.offer__budget {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.45rem, 2.3vw, 2.2rem);
	line-height: 1.3;
	color: var(--door);
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto;
}
.step {
	position: relative;
	padding-top: 1.75rem;
}
.step__line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ink);
	transform-origin: left center;
}
.step__n {
	margin: 0 0 1.25rem;
	font-family: var(--f-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--door);
}
.step__title {
	font-family: var(--f-body);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.25;
}
.step__text {
	margin: 0.75rem 0 0;
	max-width: 24rem;
}

@media (max-width: 800px) {
	.offer__head {
		display: block;
	}
	.offer__copy {
		margin-top: 2rem;
	}
	.steps {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   Closing call
   -------------------------------------------------------------------------- */

.cta {
	background: var(--door);
	color: #fff;
	padding: clamp(5rem, 12vw, 11rem) var(--gut);
}
.cta__inner {
	display: grid;
	gap: 1.75rem;
	justify-items: start;
	max-width: 96rem;
	margin: 0 auto;
}
.cta__title {
	max-width: 14ch;
	font-size: clamp(2.8rem, 8vw, 8rem);
	line-height: 1;
	color: #fff;
}
.cta__text {
	margin: 0;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */

.page-hero {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	align-items: center;
	min-height: 100svh;
	padding: 8rem var(--gut) var(--sec);
}
.page-hero--light {
	background: var(--lime);
	color: var(--ink);
}
.page-hero__copy {
	grid-column: 1 / span 7;
	display: grid;
	gap: 2rem;
}
.page-hero__title {
	font-size: clamp(3rem, 8vw, 8rem);
	line-height: 1;
	letter-spacing: -0.012em;
	max-width: 11ch;
}
.page-hero__lede {
	margin: 0;
	max-width: 36rem;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	line-height: 1.55;
}
.page-hero__img {
	grid-column: 8 / span 5;
	aspect-ratio: 5 / 4;
}
.page-hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 85% 50%;
}

.prose {
	background: var(--lime);
	color: var(--ink);
	padding: 0 var(--gut) var(--sec);
}
.prose__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto;
}
.prose__title {
	grid-column: 1 / span 5;
	font-size: clamp(2rem, 4vw, 3.6rem);
}
.prose__body {
	grid-column: 7 / span 6;
	display: grid;
	gap: 1.5rem;
}
.prose__text {
	margin: 0;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.65;
	max-width: 38rem;
}
.namepair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: clamp(4rem, 9vw, 8rem) auto 0;
}
.namepair__word {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}
.namepair__ta {
	font-family: var(--f-tamil);
	font-weight: 600;
	font-size: clamp(4.5rem, 12vw, 11rem);
	line-height: 1.25;
	color: var(--door);
}
.namepair__en {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
}
.namepair__gloss {
	font-size: 1.05rem;
}
.namepair__word--quiet .namepair__ta {
	color: rgba(30, 18, 19, 0.35);
}
.namepair__word--quiet .namepair__en,
.namepair__word--quiet .namepair__gloss {
	opacity: 0.6;
}

.roles {
	background: var(--ox);
	color: var(--paper);
	padding: var(--sec) var(--gut);
}
.roles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gut);
	max-width: 96rem;
	margin: 0 auto;
}
.role__title {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	margin-bottom: 1rem;
}
.role__text {
	margin: 0;
	max-width: 24rem;
	color: rgba(237, 230, 218, 0.88);
}

.contact {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gut);
	min-height: 100svh;
	padding: 8rem var(--gut) var(--sec);
	background: var(--teal);
	align-items: start;
}
.contact__intro {
	grid-column: 1 / span 6;
	display: grid;
	gap: 2rem;
}
.contact__title {
	font-size: clamp(3rem, 7.5vw, 7.5rem);
	line-height: 1;
	max-width: 10ch;
}
.contact__lede {
	margin: 0;
	max-width: 30rem;
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}
.contact__door {
	width: min(20rem, 70%);
}
.contact__door.wp-block-image {
	overflow: hidden;
	aspect-ratio: 2 / 3;
}
.contact__door.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.contact__details {
	grid-column: 8 / span 5;
	display: grid;
	gap: 3rem;
	padding-top: 1rem;
}
.contact__label {
	font-family: var(--f-body);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}
.contact__mail {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 1.9vw, 1.9rem);
	line-height: 1.2;
	overflow-wrap: break-word;
}
.contact__mail a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
.contact__text {
	margin: 0;
	max-width: 24rem;
}

.generic {
	min-height: 70svh;
	padding: 9rem var(--gut) var(--sec);
	background: var(--ox);
}
.generic__title {
	font-size: clamp(2.4rem, 6vw, 5rem);
}
.generic__text,
.generic__content {
	margin-top: 1.5rem;
	max-width: 40rem;
}

@media (max-width: 800px) {
	.page-hero,
	.contact,
	.prose__grid {
		display: block;
	}
	.page-hero {
		min-height: 0;
		padding-top: 6.5rem;
	}
	.page-hero__img {
		margin-top: 2.5rem;
		aspect-ratio: 4 / 3;
	}
	.prose__body {
		margin-top: 1.5rem;
	}
	.namepair,
	.roles__grid {
		grid-template-columns: 1fr;
	}
	.roles__grid {
		gap: 2.5rem;
	}
	.contact {
		min-height: 0;
		padding-top: 6.5rem;
	}
	.contact__details {
		margin-top: 3rem;
	}
	.contact__door {
		width: min(16rem, 60%);
	}
}

/* --------------------------------------------------------------------------
   Reduced motion: nothing is pinned, scrubbed or revealed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.hero__latin {
	position: absolute;
	background-color: var(--paper);
	-webkit-mask: url(/wp-content/uploads/2026/09/AGAM.svg) center / contain no-repeat;
	mask: url(/wp-content/uploads/2026/09/AGAM.svg) center / contain no-repeat;
	pointer-events: none;
}

/* About: the shelf photo is framed to the chosen crop (x 82-1045, y 123-960 of the 1200x960 original), statue included. */
.page-hero__img:has(img[src*="DSCF0172"]) {
	aspect-ratio: 963 / 837;
	overflow: hidden;
}
.page-hero__img img[src*="DSCF0172"] {
	display: block;
	width: 124.61%;
	max-width: none;
	height: auto;
	margin: -12.77% 0 0 -8.52%;
	object-fit: fill;
}