/* Shared layout primitives. Component- and page-specific rules live in
   assets/css/components/*.css and assets/css/pages/*.css respectively —
   this file only holds cross-cutting layout (containers, section rhythm). */

.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

@media (max-width: 879px) {
	.container {
		padding-left: 22px;
		padding-right: 22px;
	}
}

section {
	position: relative;
}

/* ===================================================================
   Shared interior-page hero + "rising drawer" pattern.
   Used by about.css, contact.css and (partially) 404.css.

   The hero is `position: fixed` and the content that follows
   (`.page-drawer`) starts at `margin-top: 100vh` — this is a pure-CSS
   parallax "drawer rises over the pinned hero" effect (no scroll JS
   required), ported from project/about.dc.html + project/contact.dc.html.
   404 uses a simpler, non-fixed hero (see assets/css/pages/404.css).
   =================================================================== */

.page-hero {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	overflow: hidden;
	background: var(--color-near-black-1);
	z-index: 0;
}

.page-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	filter: saturate(.76) contrast(1.04) brightness(.85);
}

.page-hero-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(125deg, rgba(10, 73, 31, .42) 0%, rgba(55, 45, 29, .5) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.page-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.page-hero-inner {
	position: relative;
	z-index: 3;
	height: 100%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 clamp(22px, 5vw, 96px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.page-hero-eyebrow span {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: rgba(247, 244, 239, .82);
}

.page-hero-title {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: .92;
	letter-spacing: .03em;
	margin: 0;
	color: var(--color-cream);
}
.hero-line-wrap {
	display: block;
	overflow: hidden;
	padding-bottom: .05em;
}
.hero-line {
	display: block;
}
.hero-line-accent {
	color: var(--color-sage);
}

.page-hero-lede {
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: clamp(1rem, 1.3vw, 1.24rem);
	line-height: 1.6;
	letter-spacing: .01em;
	color: rgba(247, 244, 239, .78);
	margin: clamp(28px, 4.2vh, 46px) 0 0;
}

.page-hero-scroll-cue {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.page-hero-scroll-cue span:first-child {
	font-family: var(--font-ui);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(247, 244, 239, .6);
}
.scroll-cue-line {
	width: 1px;
	height: 34px;
	background: rgba(247, 244, 239, .5);
	display: block;
	animation: scrollcue 2.4s ease-in-out infinite;
}

.page-drawer {
	position: relative;
	z-index: 1;
	margin-top: 100vh;
	background: var(--color-cream);
	box-shadow: 0 -40px 90px rgba(36, 27, 16, .22);
	border-top-left-radius: clamp(18px, 2.4vw, 40px);
	border-top-right-radius: clamp(18px, 2.4vw, 40px);
	overflow: hidden;
}

.section-eyebrow {
	display: block;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--color-brand-green);
}