/*/ ========================================================================
	Fonts
======================================================================== /*/

@font-face {
	font-family: "TRT Northem";
	src: url("../fonts/TRTNorthem-Regular.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "TRT Northem";
	src: url("../fonts/TRTNorthem-Medium.otf") format("opentype");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "MADE Carving";
	src: url("../fonts/MADECARVING-Light.otf") format("opentype");
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "MADE Carving";
	src: url("../fonts/MADECARVING-Regular.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

/* Font Awesome 5 Pro brands, subset to the single Instagram glyph: 672 bytes
	rather than the 77KB full brands file. Adding any other Font Awesome icon
	to this site means regenerating the subset first — see the README. */
@font-face {
	font-family: "Font Awesome 5 Brands";
	src: url("../fonts/fa-brands-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}


/*/ ========================================================================
	Theme Tokens
======================================================================== /*/

:root {
	--bs-body-bg: #e5dec8;
	--bs-body-color: #4d5a31;
	--bs-body-font-family: "MADE Carving", Georgia, serif;
	--bs-body-font-size: .9375rem;
	--bs-body-font-weight: 300;
	--bs-emphasis-color: #4d5a31;
	--bs-border-color: rgba(77, 90, 49, .4);
	--bs-dark-rgb: 77, 90, 49;
	--bs-light-rgb: 229, 222, 200;
	--bs-link-color-rgb: 77, 90, 49;
	--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-font-display: "TRT Northem", Georgia, serif;

	/* Theme values not expressed as Bootstrap tokens */
	--ox-green: #4d5a31;
	--ox-green-dark: #3E4529;
	--ox-cream: #e5dec8;
	--ox-rule: #b3b39d;
	--ox-input-border: #9c9c84;
}


/*/ ========================================================================
	Typography
======================================================================== /*/

h1, h2, .h1, .h2 {
	font-family: var(--bs-font-display);
	font-weight: 400;
}

/* The hero copy column is a query container, so the headline can size itself
	against the column rather than the viewport. See .hero-copy h1 below. */
.hero-copy {
	container-type: inline-size;
}

h1 {
	font-size: clamp(32px, 4.2vw, 46px);
	line-height: 1.14;
}

/* Sizing the headline as a share of its own column keeps the ratio of column
	width to font size constant, so it wraps to the same three lines at every
	width. Tying it to the viewport instead needs a column override at each
	breakpoint, because Bootstrap's container is fixed within a breakpoint
	while vw keeps climbing. 11.4cqi lands just past 46px on the desktop
	column, so the clamp pins it to exactly 46px there. */
.hero-copy h1 {
	font-size: clamp(28px, 11.4cqi, 46px);
}

.text-uppercase {
	letter-spacing: .18em;
}

hr {
	color: var(--ox-green);
	opacity: .4;
}

/* Eyebrow: small uppercase display type used for labels and meta rows */
.eyebrow {
	font-family: var(--bs-font-display);
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* Announcement bar meta row */
.topbar-meta {
	color: rgb(var(--bs-light-rgb));
	font-family: var(--bs-font-sans-serif);
	font-size: 11px;
	letter-spacing: .15em;
}

/* Italic intro paragraph under the headline */
.lede {
	font-size: 17px;
}

/* Typekit script face used for the "Opening 2026" line */
.script-accent {
	font-family: "espiritu-script", cursive;
	font-size: 34px;
}

/* The alternate layout sets a full sentence in the script face rather than two
	words, so it has to shed size on narrow screens where a fixed 34px overruns
	the column. Kept off .script-accent so index.html renders unchanged. */
.script-accent-fluid {
	font-size: clamp(22px, 5.2vw, 34px);
}

.text-balance {
	text-wrap: balance;
}


/*/ ========================================================================
	Buttons
======================================================================== /*/

.btn {
	--bs-btn-font-size: .75rem;
	--bs-btn-padding-y: .85rem;
	--bs-btn-padding-x: 1.4rem;
	font-family: var(--bs-font-sans-serif);
}

.btn-dark {
	--bs-btn-bg: var(--ox-green);
	--bs-btn-border-color: var(--ox-green);
	--bs-btn-color: var(--ox-cream);
	--bs-btn-hover-bg: var(--ox-green-dark);
	--bs-btn-hover-border-color: var(--ox-green-dark);
	--bs-btn-hover-color: var(--ox-cream);
	--bs-btn-active-bg: var(--ox-green-dark);
	--bs-btn-active-border-color: var(--ox-green-dark);
	--bs-btn-active-color: var(--ox-cream);
}

.btn-outline-dark {
	--bs-btn-color: var(--ox-green);
	--bs-btn-border-color: var(--ox-green);
	--bs-btn-border-width: 2px;
	--bs-btn-font-weight: 400;
	--bs-btn-hover-bg: var(--ox-green);
	--bs-btn-hover-border-color: var(--ox-green);
	--bs-btn-hover-color: var(--ox-cream);
	--bs-btn-active-bg: var(--ox-green);
	--bs-btn-active-border-color: var(--ox-green);
	--bs-btn-active-color: var(--ox-cream);
}

/* Cream outline for buttons on the green field. Bootstrap hardcodes
	btn-outline-light to #f8f9fa, which reads blue-white against this palette. */
.btn-outline-cream {
	--bs-btn-color: var(--ox-cream);
	--bs-btn-border-color: rgba(229, 222, 200, .55);
	--bs-btn-hover-bg: var(--ox-cream);
	--bs-btn-hover-border-color: var(--ox-cream);
	--bs-btn-hover-color: var(--ox-green);
	--bs-btn-active-bg: var(--ox-cream);
	--bs-btn-active-border-color: var(--ox-cream);
	--bs-btn-active-color: var(--ox-green);
}

/* Next to a cream input, btn-dark steps down to the darker green so the field
	and its button stay two blocks rather than one. Hover lifts back to --ox-green,
	the reverse of the usual direction, because darker would sink into the frame. */
.frame-dark .btn-dark {
	--bs-btn-bg: var(--ox-green-dark);
	--bs-btn-border-color: var(--ox-green-dark);
	--bs-btn-hover-bg: var(--ox-green);
	--bs-btn-hover-border-color: var(--ox-green);
	--bs-btn-active-bg: var(--ox-green);
	--bs-btn-active-border-color: var(--ox-green);
}

/* Disabled submit stays legible rather than washing out on cream */
.btn-dark:disabled,
.btn-dark.disabled {
	--bs-btn-disabled-bg: var(--ox-green);
	--bs-btn-disabled-border-color: var(--ox-green);
	--bs-btn-disabled-color: var(--ox-cream);
	--bs-btn-disabled-opacity: .45;
}


/*/ ========================================================================
	Icons
======================================================================== /*/

.fab {
	display: inline-block;
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-instagram::before {
	content: "\f16d";
}

/* Button labels are letter-spaced, so the icon already carries a little
	trailing space; this only tops it up to a readable gap. */
.btn .fab {
	margin-right: .4em;
}


/*/ ========================================================================
	Components
======================================================================== /*/

/* Double-rule frame: 2px outer border plus an inset hairline */
.frame-inner {
	--bs-border-color: var(--ox-green);
}

.frame-inner::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid var(--ox-rule);
	pointer-events: none;
}

/* Inverted frame that echoes the primary logo: a green field ringed by two
	cream rules. The green edge is the boundary, so the box carries no border of
	its own and both pseudo-elements are free to draw the pair. Needs
	.position-relative on the box for the two rules to anchor to it. */
.frame-dark {
	background-color: var(--ox-green);
	color: var(--ox-cream);
	padding: 3rem;
}

.frame-dark::before,
.frame-dark::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(229, 222, 200, .55);
	pointer-events: none;
}

.frame-dark::before {
	inset: 8px;
}

.frame-dark::after {
	inset: 13px;
}

/* Below sm the frame keeps its vertical padding but eases off the sides, so the
	stacked field and buttons keep a usable width on a phone */
@media (max-width: 575.98px) {
	.frame-dark {
		padding: 3rem 2rem;
	}
}

/* Signup and contact sit side by side from lg up. Below that they stack and the
	hairline between them turns horizontal, so it swaps which axis carries the 1px. */
.signup-divider {
	background-color: rgba(229, 222, 200, .3);
	height: 1px;
}

/* The follow button needs more room than a Bootstrap gap step gives it, or it
	reads as part of the input group rather than a separate action */
.signup-actions {
	column-gap: 2rem;
	row-gap: 1rem;
}

/* lg is the first width where the form column still leaves the field a workable
	size once the contact column takes its 240px. See the container query below. */
@media (min-width: 992px) {
	/* Half a gutter lands inside each column as padding, so 6rem is what leaves the
		3rem of clear space the design keeps either side of the hairline. Bootstrap's
		gutter utilities stop at gx-5, so this sets the variable they would set. */
	.frame-dark .row {
		--bs-gutter-x: 6rem;
	}

	.signup-divider {
		height: auto;
		width: 1px;
	}

	/* Lets the input group shrink rather than holding the column open at its
		min-content width */
	.signup-col-form {
		min-width: 0;
	}

	/* Column widths are border-box, so the contact copy only measures 240px once
		the gutter padding is added on top of it */
	.signup-col-contact {
		width: calc(240px + var(--bs-gutter-x));
	}
}

/* The field reads as a cream block on the green field, so its text and
	placeholder take the body green rather than the cream used around them */
.frame-dark .form-control {
	--bs-border-color: var(--ox-cream);
	background-color: var(--ox-cream);
	color: var(--ox-green);
}

.frame-dark .form-control::placeholder {
	color: rgba(77, 90, 49, .5);
}

/* The base focus rule sets border-color outright, not through the token, so
	matching its specificity is the only way to keep the ring off the green. */
.frame-dark .form-control:focus {
	background-color: var(--ox-cream);
	border-color: var(--ox-green-dark);
	color: var(--ox-green);
}

.form-control {
	--bs-border-color: var(--ox-input-border);
}

/* Bootstrap's default blue focus glow reads as off-theme on cream */
.form-control:focus,
.form-select:focus {
	background-color: transparent;
	border-color: var(--ox-green);
	box-shadow: none;
}

/* The signup form is a query container so its input group answers to its own
	width. The viewport can't answer this: the form sits in a column whose
	share of the page changes at lg, xl, and xxl, so the same viewport width
	means different field widths. See .hero-copy for the same technique. */
#mc-embedded-subscribe-form {
	container-type: inline-size;
}

/* The button takes a fixed 134px of the group, so a 20rem group leaves about
	150px to type in and anything narrower drops below that. Under it the group
	stacks: full-width field above a full-width button. lg is the tightest width
	that holds the row, at 344px of form once the contact column takes its 240px,
	leaving 211px to type in; below sm the form measures 302px on a 390px screen
	and the group stacks. Selectors are keyed to the ID because
	Bootstrap sets the row geometry through a six-part :not() chain that no
	realistic class selector outranks. */
@container (max-width: 20rem) {
	#mc-embedded-subscribe-form .input-group {
		flex-direction: column;
	}

	/* Bootstrap sizes children for a row: 1% wide, pulled 1px left so
		neighbors share one border. Stacked, they fill the width instead. */
	#mc-embedded-subscribe-form .input-group > * {
		margin-left: 0;
		width: 100%;
	}

	/* The 1px pull that collapses the shared border turns vertical */
	#mc-embedded-subscribe-form .input-group > :not(:first-child) {
		margin-top: -1px;
	}
}

/* Mailchimp's bot trap parks the field off-screen rather than hiding it, since
	a bot that skips display:none fields still fills a field it can measure. The
	form is the containing block here, because the container-type above applies
	layout containment. Named apart from .honeypot, which belongs to Crema
	Captcha and hides its field outright. */
.mc-honeypot {
	position: absolute;
	left: -5000px;
}


/*/ ========================================================================
	Alerts (form status messages)
======================================================================== /*/

.alert {
	border-radius: 0;
	font-size: 14px;
	margin-bottom: 0;
	margin-top: 1rem;
	padding: .75rem 1rem;
}

.alert-success {
	--bs-alert-color: var(--ox-green);
	--bs-alert-bg: rgba(77, 90, 49, .1);
	--bs-alert-border-color: var(--ox-green);
}

.alert-danger {
	--bs-alert-color: #8a2b2b;
	--bs-alert-bg: rgba(138, 43, 43, .08);
	--bs-alert-border-color: rgba(138, 43, 43, .5);
}


/*/ ========================================================================
	Footer
======================================================================== /*/

/* Copyright line sits a step below .eyebrow, matching the original layout */
.footer-meta {
	font-size: 12px;
	letter-spacing: .12em;
	opacity: .75;
}

/* A hairline rule reads better than an underline under letter-spaced caps */
.footer-meta a {
	border-bottom: 1px solid rgba(77, 90, 49, .35);
	padding-bottom: 1px;
	text-decoration: none;
}


/*/ ========================================================================
	Spacing Scale Extension (Bootstrap stops at 5)
======================================================================== /*/

.gap-6 { gap: 5.5rem !important; }
.row-gap-6 { row-gap: 5.5rem !important; }
.column-gap-6 { column-gap: 5.5rem !important; }

.p-6 { padding: 5.5rem !important; }
.px-6 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
.py-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

.m-6 { margin: 5.5rem !important; }
.mx-6 { margin-left: 5.5rem !important; margin-right: 5.5rem !important; }
.my-6 { margin-top: 5.5rem !important; margin-bottom: 5.5rem !important; }
.mt-6 { margin-top: 5.5rem !important; }
.mb-6 { margin-bottom: 5.5rem !important; }

@media (min-width: 576px) {
	.gap-sm-6 { gap: 5.5rem !important; }
	.py-sm-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
	.mt-sm-6 { margin-top: 5.5rem !important; }
	.mb-sm-6 { margin-bottom: 5.5rem !important; }
}

@media (min-width: 768px) {
	.gap-md-6 { gap: 5.5rem !important; }
	.py-md-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
	.mt-md-6 { margin-top: 5.5rem !important; }
	.mb-md-6 { margin-bottom: 5.5rem !important; }
}

@media (min-width: 992px) {
	.gap-lg-6 { gap: 5.5rem !important; }
	.py-lg-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
	.mt-lg-6 { margin-top: 5.5rem !important; }
	.mb-lg-6 { margin-bottom: 5.5rem !important; }
}

@media (min-width: 1200px) {
	.gap-xl-6 { gap: 5.5rem !important; }
	.py-xl-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
	.mt-xl-6 { margin-top: 5.5rem !important; }
	.mb-xl-6 { margin-bottom: 5.5rem !important; }
}

@media (min-width: 1400px) {
	.gap-xxl-6 { gap: 5.5rem !important; }
	.py-xxl-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
	.mt-xxl-6 { margin-top: 5.5rem !important; }
	.mb-xxl-6 { margin-bottom: 5.5rem !important; }
}


/*/ ========================================================================
	Modal (Oxbow theme)
======================================================================== /*/

.modal-oxbow .modal-content {
	background-color: var(--ox-cream);
	border: 2px solid var(--ox-green);
	border-radius: 0;
}

/* Matches the inset hairline on the signup frame */
.modal-oxbow .modal-content::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid var(--ox-rule);
	pointer-events: none;
	z-index: 1;
}

.modal-oxbow .modal-header,
.modal-oxbow .modal-body,
.modal-oxbow .modal-footer {
	position: relative;
	z-index: 2;
}

.modal-oxbow .modal-header {
	border-bottom: 0;
	padding: 2rem 2rem .5rem;
}

.modal-oxbow .modal-title {
	font-family: var(--bs-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.modal-oxbow .modal-intro {
	font-size: 14px;
	line-height: 1.9;
	margin: .25rem 0 0;
}

.modal-oxbow .modal-body {
	padding: 1rem 2rem 2rem;
}

.modal-oxbow .btn-close {
	--bs-btn-close-opacity: .5;
	--bs-btn-close-hover-opacity: 1;
	--bs-btn-close-focus-shadow: none;
	border-radius: 0;
}

.modal-oxbow .form-label {
	font-family: var(--bs-font-display);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: .4rem;
}

.modal-oxbow .form-control,
.modal-oxbow .form-select {
	--bs-border-color: var(--ox-input-border);
	background-color: transparent;
	border-radius: 0;
	color: var(--bs-body-color);
	font-size: .9375rem;
	padding: .6rem .8rem;
}

.modal-oxbow .form-control::placeholder {
	color: rgba(77, 90, 49, .5);
}

/* Native select arrow recolored to the theme green */
.modal-oxbow .form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234d5a31' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/*/ ========================================================================
	Captcha
======================================================================== /*/

/* The checkbox is injected into .captcha by the captcha plugin */
.modal-oxbow .captcha {
	margin-top: 1.25rem;
}

.modal-oxbow .captcha .form-check {
	margin-bottom: 0 !important;
}

.modal-oxbow .captcha .form-check-input {
	--bs-form-check-bg: transparent;
	border-color: var(--ox-input-border);
	border-radius: 0;
	margin-top: .15rem;
}

.modal-oxbow .captcha .form-check-input:checked {
	background-color: var(--ox-green);
	border-color: var(--ox-green);
}

.modal-oxbow .captcha .form-check-input:focus {
	border-color: var(--ox-green);
	box-shadow: none;
}

.modal-oxbow .captcha .form-check-label {
	font-size: 14px;
	padding-left: .25rem;
}

/* Honeypot: never visible, never focusable by a human */
.honeypot {
	display: none !important;
}