/* VARIABLES color:var(--wine);
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root{
    /* page colors */
    --light:#f6f4ef;
    --page:#fffdf7;
	--paper:#f1e9d9;
    --egg:#f3f2e8;
    --pale:#eef2ec;
    --shade:#edeff0;
    --wine-dark:#44151d;
    --dark:#22344c;

	/* eyebrow colors */
    --wine:#741f2b;
    --leaf:#8aa095;
    --clay:#a0751c;
    --gold:#e8be72;
    --peach:#fde9c6;
    --cream:#f5efdf;
    --forest:#4d5a54;
    --grass:#acc7b9;
    --sky:#5479ab;

	/* ink colors */
    --white:#ffffff;
    --ink:#1d1d1a;
    --muted:#3d3d38;
    --green-ink:#2e3732;
    --brown-ink:#322b1e;
    --line:#d8cdbb;

	/* alert colors */
	--red:#a11d2d;
	--alert:#b99a59;

    /* variables */
	--home-max:1000px;
	--translate:translateX(0.2rem) translateY(-0.4rem);
}

/* COLOR CLASSES––––––––––––––––––––––––––––––––––––––––––– */
.white {
	color:var(--white) !important;
}
.ink {
	color:var(--ink) !important;
}
.wine {
	color:var(--wine) !important;
}
.gold {
	color:var(--gold) !important;
}
.cream {
	color:var(--cream) !important;
}
.forest {
	color:var(--forest) !important;
}
.leaf {
	color:var(--leaf) !important;
}
.grass {
	color:var(--grass) !important;
}
.sky {
	color:var(--sky) !important;
}

.red {
	color:var(--red) !important;
}
.alert {
	color:var(--alert) !important;
}

/* SECTIONS–––––––––––––––––––––––––––––––––––––––––– */
.intro, .page-section {
    position: relative;
	background-color:var(--page) !important;
	color:var(--ink);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(255, 253, 247, 0.85);
    }
	.eyebrow, .card-label, .label {
		color:var(--wine);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--ink) !important;
    }
    p {
        color:var(--muted);
    }
    .icon, .fa {
			color:var(--wine);
		}
	.card {
		background: var(--white) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--page), black 10%) !important;
		.number {
			color: color-mix(in oklab, var(--page), black 2%) !important;
		}
		.icon {
			color:var(--wine);
			background: color-mix(in oklab, var(--page), black 2%) !important;
		}
	}
     .featured {
        border-color:color-mix(in oklab, var(--page), black 10%) !important;
        background: color-mix(in oklab, var(--page), black 4%) !important;
        border-left: 4px solid var(--wine) !important;
        .icon {
			color:var(--wine-dark) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: var(--wine) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--wine) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--wine) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--wine) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--wine-dark) !important;
		border:2px solid var(--wine-dark) !important;
		color:var(--cream) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--wine) !important;
		color:var(--wine-dark) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--wine-dark) !important;
        background-color: transparent !important;
    }
}

.light-section {
    position: relative;
	background-color:var(--light) !important;
	color:var(--green-ink);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(246, 244, 239, 0.85);
    }
	.eyebrow, .card-label, .label {
		color:var(--leaf);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--green-ink) !important;
    }
    p {
        color:var(--muted);
    }
    .icon {
			color:var(--leaf);
		}
	.card {
		background: color-mix(in oklab, var(--light), white 80%) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--light), black 10%) !important;
		.number {
			color: var(--light) !important;
		}
		.icon {
			color:var(--leaf);
			background: var(--light) !important;
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--light), black 10%) !important;
        background: color-mix(in oklab, var(--light), black 2%) !important;
        border-left: 4px solid var(--forest) !important;
        .icon {
			color:var(--forest) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: var(--forest) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--leaf) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--leaf) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--leaf) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--forest) !important;
		border:2px solid var(--forest) !important;
		color:var(--cream) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--forest) !important;
		color:var(--forest) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--forest) !important;
        background-color: transparent !important;
    }
}

.paper-section {
    position: relative;
	background-color:var(--paper) !important;
	color:var(--brown-ink);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(241, 233, 217, 0.8);
    }
	.eyebrow, .card-label, .label {
		color:var(--clay);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--brown-ink) !important;
    }
    p {
        color:var(--muted);
    }
    .icon {
			color:var(--clay);
		}
	.card {
		background: var(--white) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--paper), black 10%) !important;
		.number {
			color: color-mix(in oklab, var(--paper), black 2%) !important;
		}
		.icon {
			color:var(--clay);
			background: color-mix(in oklab, var(--paper), black 2%) !important;
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--paper), black 10%) !important;
        background: color-mix(in oklab, var(--paper), black 4%) !important;
        border-left: 4px solid color-mix(in oklab, var(--clay), black 9%) !important;
        .icon {
			color:color-mix(in oklab, var(--clay), black 9%) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: color-mix(in oklab, var(--clay), black 9%) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--clay) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--clay) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--clay) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--clay) !important;
		border:2px solid var(--clay) !important;
		color:var(--cream) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--clay) !important;
		color:var(--clay) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--clay) !important;
        background-color: transparent !important;
    }
}

.egg-section {
    position: relative;
	background-color:var(--egg) !important;
	color:var(--green-ink);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(243, 242, 232, 0.85);
    }
	.eyebrow, .card-label, .label {
		color:var(--forest);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--green-ink) !important;
    }
    p {
        color:var(--muted);
    }
    .icon {
			color:var(--forest);
		}
	.card {
		background: color-mix(in oklab, var(--egg), white 50%) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--egg), black 10%) !important;
		.number {
			color: var(--egg) !important;
		}
		.icon {
			color:var(--forest);
			background: color-mix(in oklab, var(--egg), black 4%);
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--egg), black 10%) !important;
        background: color-mix(in oklab, var(--egg), black 3%) !important;
        border-left: 4px solid var(--clay) !important;
        .icon {
			color:var(--clay) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: color-mix(in oklab, var(--clay), white 10%) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--forest) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--forest) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--forest) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--forest) !important;
		border:2px solid var(--forest) !important;
		color:var(--cream) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--forest) !important;
		color:var(--forest) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--forest) !important;
        background-color: transparent !important;
    }
}

.pale-section {
    position: relative;
	background-color:var(--pale) !important;
	color:var(--green-ink);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(238, 242, 236, 0.85);
    }
	.eyebrow, .card-label, .label {
		color:var(--leaf);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--green-ink) !important;
    }
    p {
        color:var(--forest);
    }
    .icon {
			color:var(--leaf);
		}
	.card {
		background: color-mix(in oklab, var(--pale), white 50%) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--pale), black 10%) !important;
		.number {
			color: var(--pale) !important;
		}
		.icon {
			color:var(--leaf);
			background: #fff;
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--pale), black 10%) !important;
        background: color-mix(in oklab, var(--pale), black 3%) !important;
        border-left: 4px solid var(--forest) !important;
        .icon {
			color:var(--forest) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: color-mix(in oklab, var(--forest), white 10%) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--leaf) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--leaf) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--leaf) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--leaf) !important;
		border:2px solid var(--leaf) !important;
		color:var(--white) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--leaf) !important;
		color:var(--leaf) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--leaf) !important;
        background-color: transparent !important;
    }
}

.shade-section {
    position: relative;
	background-color:var(--shade) !important;
	color:var(--dark);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(237, 239, 240, 0.85);
    }
	.eyebrow, .card-label, .label {
		color:var(--sky);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--dark) !important;
    }
    p {
        color:var(--muted);
    }
    .icon {
			color:var(--sky);
		}
	.card {
		background: color-mix(in oklab, var(--shade), white 50%) !important;
		color: var(--ink);
		border-color:color-mix(in oklab, var(--shade), black 10%) !important;
		.number {
			color: var(--shade) !important;
		}
		.icon {
			color:var(--sky);
			background: color-mix(in oklab, var(--shade), black 4%);
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--shade), black 10%) !important;
        background: color-mix(in oklab, var(--shade), black 3%) !important;
        border-left: 4px solid var(--dark) !important;
        .icon {
			color:var(--dark) !important;
			background: var(--white) !important;
		}
        .eyebrow, .card-label, .label {
            color: color-mix(in oklab, var(--dark), white 10%) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--sky) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--sky) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--sky) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--sky) !important;
		border:2px solid var(--sky) !important;
		color:var(--cream) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--sky) !important;
		color:var(--sky) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--sky) !important;
        background-color: transparent !important;
    }
}

.wine-dark-section {
    position: relative;
	background-color:var(--wine-dark) !important;
	color:var(--white);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(68, 21, 29, 0.93);
    }
    blockquote {
    	border-left: 3px solid var(--gold);
    	padding: 3rem;
    	font-family: Georgia, serif;
    	font-size: 2rem;
    	line-height: 1.65;
    	background-color: rgb(0 0 0 / 0.2) !important;
    }
	.eyebrow {
		color:var(--gold);
	}
    .card-label, .label {
		color:var(--peach);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--white);
    }
    p {
        color:var(--cream);
    }
    .icon {
			color:var(--peach);
		}
	.card {
		background: color-mix(in oklab, var(--wine-dark), white 20%) !important;
		color: var(--white) !important;
		border-color:color-mix(in oklab, var(--wine-dark), white 30%) !important;
        h1, h2, h3, h4, h5, h6 {
            color:var(--white) !important;
        }
        p {
            color:var(--cream);
        }
		.number {
			color: var(--wine-dark) !important;
		}
		.icon {
			color:var(--peach);
			background: var(--wine-dark);
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--wine-dark), white 20%) !important;
        background: color-mix(in oklab, var(--wine-dark), white 10%) !important;
        border-left: 4px solid var(--gold) !important;
        .icon {
			color:var(--gold) !important;
			background: color-mix(in oklab, var(--wine-dark), white 30%) !important;
		}
        .eyebrow, .card-label, .label {
            color: color-mix(in oklab, var(--gold), white 10%) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--peach) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--peach) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--peach) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--peach) !important;
		border:2px solid var(--peach) !important;
		color:var(--wine) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--peach) !important;
		color:var(--peach) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--peach) !important;
        background-color: transparent !important;
    }
}

.dark-section {
    position: relative;
	background-color:var(--dark) !important;
	color:var(--white);
	.shade {
        position: absolute;
        inset: 0;
        background-color: rgba(34, 52, 76, 0.85);
    }
    blockquote {
    	border-left: 3px solid var(--gold);
    	padding: 3rem;
    	font-family: Georgia, serif;
    	font-size: 2rem;
    	line-height: 1.65;
    	background-color: rgb(0 0 0 / 0.2) !important;
    }
	.eyebrow {
		color:var(--gold);
	}
    .card-label, .label {
		color:var(--peach);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--white) !important;
    }
    p {
        color:var(--white);
    }
    .icon {
			color:var(--peach);
		}
	.card {
		background: color-mix(in oklab, var(--dark), white 20%) !important;
		color: var(--white) !important;
		border-color:color-mix(in oklab, var(--dark), white 30%) !important;
        h1, h2, h3, h4, h5, h6 {
            color:var(--white);
        }
        p {
            color:var(--white);
        }
		.number {
			color: var(--dark) !important;
		}
		.icon {
			color:var(--peach);
			background: var(--dark) !important;
		}
	}
     .featured {
        border-color:color-mix(in oklab, var(--dark), white 20%) !important;
        background: color-mix(in oklab, var(--dark), white 10%) !important;
        border-left: 4px solid var(--gold) !important;
        .icon {
			color:var(--gold) !important;
			background: color-mix(in oklab, var(--dark), white 30%) !important;
		}
        .eyebrow, .card-label, .label {
            color: var(--gold) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--peach) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--peach) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--peach) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--cream) !important;
		border:2px solid var(--cream) !important;
		color:var(--dark) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--cream) !important;
		color:var(--cream) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--cream) !important;
        background-color: transparent !important;
    }
}

.forest-section {
    position: relative;
	background-color:var(--forest) !important;
	color:var(--white);
	.shade {
    	position: absolute;
    	inset: 0;
    	background-color: rgba(77, 90, 84, 0.89);
    }
    blockquote {
    	border-left: 3px solid var(--gold);
    	padding: 3rem;
    	font-family: Georgia, serif;
    	font-size: 2rem;
    	line-height: 1.65;
    	background-color: rgb(0 0 0 / 0.2) !important;
    }
	.eyebrow {
		color:var(--gold);
	}
    .card-label, .label {
		color:var(--peach);
	}
    h1, h2, h3, h4, h5, h6 {
        color:var(--white);
    }
    p {
        color:var(--cream);
    }
    .icon, i {
			color:var(--peach);
		}
	.item {
	    .icon, i {
			color:var(--grass);
	        }
		}
	.card {
		background: color-mix(in oklab, var(--forest), white 30%) !important;
		color: var(--cream) !important;
		border-color:color-mix(in oklab, var(--forest), white 40%) !important;
        h1, h2, h3, h4, h5, h6 {
            color:var(--white);
        }
        p {
            color:var(--cream);
        }
		.number {
			color: var(--forest) !important;
		}
		.icon {
			color:var(--peach);
			background: var(--forest);
		}
	}
    .featured {
        border-color:color-mix(in oklab, var(--forest), white 30%) !important;
        background: color-mix(in oklab, var(--forest), white 15%) !important;
        border-left: 4px solid var(--gold) !important;
        .icon {
			color:var(--gold) !important;
			background: color-mix(in oklab, var(--forest), white 30%) !important;
		}
        .eyebrow, .card-label, .label {
            color: var(--gold) !important;
        }
    }
	.left-line, .line-left {
		border-left-width: 4px;
		border-left-color: var(--peach) !important;
	}
	.top-line, .line-top {
		border-top-width: 4px;
		border-top-color: var(--peach) !important;
	}
	 .line-right {
		border-right-width: 4px;
		border-right-color: var(--peach) !important;
	}
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--gold) !important;
		border:2px solid var(--gold) !important;
		color:var(--forest) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--gold) !important;
		color:var(--gold) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--gold) !important;
        background-color: transparent !important;
    }
}

/* HERO ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;

    background-image: linear-gradient(black, gray), url('../../datastore/media/home-hero.jpg');
    background-size: cover;
    background-position: center;
	color: #fff;
    .eyebrow {
        color:var(--gold) !important;
    }
    h1 {
        font-size:12rem;
        color:#fff;
        text-shadow: 0 3px 24px #0008;
    }
    p {
        color:var(--cream) !important;
    }
    .hero-description {
        margin-top: 2rem;
        font-size: 2.5rem;
        line-height: 1.6;
    }
    .shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4));
    }
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--gold) !important;
		border:2px solid var(--gold) !important;
		color:var(--ink) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--gold) !important;
		color:var(--gold) !important;
	}
}

.home-hero {
	min-height: 720px;
    background: #251a16 url(../../datastore/media/home-hero.jpg) center / cover no-repeat;
    .shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(22, 18, 14, .92), rgba(22, 18, 14, .58) 55%, rgba(22, 18, 14, .2)), linear-gradient(0deg, rgba(36, 75, 59, .72), transparent 60%);
    }
    .eyebrow {
        margin: 0 0 1rem;
        color:#fff !important;
        text-transform: uppercase;
        letter-spacing: .22em;
        font-size: 1.25rem;
        font-weight: 800;
    }
    h1 {
        font-size:12rem;
        span {
            display: block;
            color: #f2cc85;
            font-size: .36em;
            letter-spacing: .13em;
            margin-bottom: 1.4rem;
        }
    }
    .subtitle {
        font-family: Georgia, serif;
        font-size: 4rem;
        font-style: italic;
        margin: 1.5rem 0;
        color: #fff2d7;
    }
    .facts {
        display: flex;
        gap: 2.5rem;
        flex-wrap: wrap;
        margin: 2rem 0;
        i {
            color: #f2cc85;
            margin-right: .6rem;
        }
        p {
            margin: 0;
            font-weight: 700;
        }
    }
    .cta-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .hero-scripture {
        margin: 2rem 0 0;
        color: #f2cc85 !important;
        font-size: 1.35rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

.camp-tools-hero {
    position: relative;
	display: flex;
	align-items: center;
    background: var(--light) url(../../assets/img/camp-tools-hero.jpg) center / cover no-repeat;
    color: var(--ink);
    .shade {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(246, 244, 239, .99), rgba(246, 244, 239, .60));
    }
}

.camp-tools-hero .hero-description {
	margin-top: 1.6rem;
	font-size: 1.6rem;
	line-height: 1.6;
}
.camp-tools-hero .eyebrow {
	color: var(--wine);
}
.camp-tools-hero h1 {
	margin: 0;
	padding-left: 0;
	color: var(--ink);
	font-size: clamp(4rem, 10vw, 6rem);
	line-height: .82;
	text-transform: uppercase;
	letter-spacing: -.055em;
	max-width: 900px;
	text-shadow: none;
}

/* BANNERS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.theme {
	position: relative;
	display: flex;
	align-items: center;
	background: #271416 url('../img/theme-banner.jpg') no-repeat center / cover;
}
.driving {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/driving-banner.jpg') no-repeat center / cover;
}
.shopping {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/shopping-banner.jpg') no-repeat center / cover;
}
.forgotten {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/remember-banner.jpg') no-repeat center / cover;
}
.children {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/children-banner.jpg') no-repeat center / cover;
}
.talent {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/talent-banner.jpg') no-repeat center / cover;
}
.wedding {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/wedding-banner.jpg') no-repeat center / cover;
}
.worship {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/worship-banner.jpg') no-repeat center / cover;
}
.campfire {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/campfire-banner.jpg') no-repeat center / cover;
}
.clothing {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/clothing-banner.jpg') no-repeat center / cover;
}
.deer {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/deer-banner.jpg') no-repeat center / cover;
}
.quiet {
    position: relative;
    display: flex;
    align-items: center;
	background: #271416 url('../img/quiet-banner.jpg') no-repeat center / cover;
}
.joy {
	position: relative;
	display: flex;
	align-items: center;
	background: #4d5a54 url('../img/joy-banner.jpg') no-repeat center / cover;
}
.pets {
	position: relative;
	display: flex;
	align-items: center;
	background: #eef2ec url('../img/pets-banner.jpg') no-repeat center / cover;
}


/* FONTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
    color: inherit;
	margin: 0 0 2rem;
	font-size: 6rem;
	line-height: .82;
	text-transform: uppercase;
	letter-spacing: -.055em;
    font-weight: bold;
}
h2 {
    color: inherit;
	text-transform:uppercase;
	font-size: 4rem;
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 1.7rem;
	font-weight: 200;
}
h3 {
    color: inherit;
	text-transform:uppercase;
	margin: 0 0 1rem;
	font-size: 3rem;
	line-height: 1.2;
	font-weight: 200;
}
h4 {
    color: inherit;
	text-transform:uppercase;
	font-size: 2.4rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
	font-weight: 200;
	margin: 2rem 0 .4rem;
}
h5 {
    color: inherit;
	font-size: 1.7rem;
	margin: 1rem 0 .2rem;
}
h6 {
    color: inherit;
    font-size: 1.8rem;
	margin: 1rem 0 .2rem;
}
p {
    font-size: 1.6rem;
    color: inherit;
}
.hebrew {
  font-family: 'Noto Serif Hebrew', "Times New Roman", Times, serif;
  direction: rtl;
}
.icon, .fa-icon {
    color: inherit;
    display: flex;
    flex: 0 0 52px;
	width: 52px;
	height: 52px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
    font-size: 2rem !important;
    line-height: 1 !important;
    border-radius: 50% !important;
}
.number-icon {
    color: var(--clay);
    font-size: 35px;
    padding: 2rem;
    font-weight: 300;
    line-height: 1;
    margin: 1rem;
    background-color: #fff;
    border-radius: 50% !important;
}
img {
	width:100%;
	max-width:100%;
	height:auto;
}
.cornhole {
    height:3rem;
    width:3rem;
}
.eyebrow {
    color: inherit;
	display: block;
	margin:0;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	font-size: 1rem;
	font-weight: 200;
}
.italic {
    font-family: "Georgia", serif !important;
    font-style: italic;
}
.lead {
    color: var(--muted);
	font-size: 2.1rem;
	font-weight: 100;
	letter-spacing: .2rem;
}
strong, .strong {font-weight: bold;}
address {
	display: flex;
	align-items: center;
    justify-content:flex-start;
	gap: 11px;
	margin: 2rem 0;
	padding: 1rem;
	border-radius: 6px;
	background-color: rgb(0 0 0 / 4%);
	color: inherit;
	font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
}

/* GRID–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid {
    display: grid;
    gap: 12px;
}
.grid-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
    margin-bottom:2rem;
    list-style: none;
}
.grid-three {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
    margin-bottom:2rem;
    list-style: none;
}
.grid-four {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
    margin-bottom:2rem;
    list-style: none;
}
.grid-five {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem;
    margin-bottom:2rem;
}
.grid-six {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.5rem;
    margin-bottom:2rem;
}
.item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    color: inherit !important;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 7px;
    background-color: rgb(255 255 255 / 30%);
    .icon {
        flex: 0 0 30px;
        margin-top: 3px;
        font-size: 18px;
        text-align: center;
    }
    strong {
        display: block;
        margin-bottom: 3px;
    }
    span, p {
        margin: 0;
        font-size: 1.4rem;
    }
}
.item>i {
    flex: 0 0 30px;
    margin-top: 3px;
    font-size: 18px;
    text-align: center;
}
.item-light {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
}
.item-dark {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    background: rgba(0, 0, 0, .1);
}
.card {
	position: relative;
	text-align:left;
	padding: 2.5rem;
    border: 1px solid var(--muted);
	border-radius: 12px;
	overflow: hidden;
    margin-bottom:1rem;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	.number {
		position: absolute;
		top: 1rem;
		right: 1rem;
		font-size: 4rem;
		font-weight: 800;
		line-height: 1;
	}
}
.featured {
    border-color:color-mix(in oklab, var(--clay), white 70%) !important;
    background: color-mix(in oklab, var(--clay), white 90%) !important;
    border-left: 4px solid var(--clay) !important;
    .icon {
        color:var(--clay) !important;
        background: var(--white) !important;
    }
    .eyebrow, .card-label, .label {
        color: var(--clay) !important;
    }
}
.flex {
    display: flex !important;
    align-items: center;
    justify-content:flex-start;
    margin: 3rem auto !important;
    padding: 3rem !important;
    gap: 26px !important;
}
.flex-row {
    display: flex !important;
    align-items: center;
    justify-content:flex-start;
    margin: 1rem auto !important;
    padding: 1rem !important;
    gap: 26px !important;
}
.alert-section {
    display: flex;
	align-items:center;
    justify-content: flex-start;
    margin: 3rem auto !important;
    padding: 3rem !important;
	gap: 26px !important;
    text-align:left !important;
    background:color-mix(in oklab, var(--clay), white 90%) !important;
    color: var(--clay) !important;
    border-radius: 9px !important;
    border:1px solid color-mix(in oklab, var(--clay), white 70%) !important;
    border-left: 5px solid var(--clay) !important;
    .eyebrow {
        color:var(--clay) !important;
    }
    h4, p {
        color:color-mix(in oklab, var(--clay), black 35%) !important;
    }
    .icon {
        color:var(--clay) !important;
        background: #fff !important;
    }
}


/* CTA ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cta {
    background-image: url('../img/home-footer-cta.jpg') !important;
	position: relative;
	display: flex;
	align-items: center;
	background: #251716 center / cover no-repeat;
	color: #fff !important;
	text-align: center;
    p {
        color:#fff !important;
    }
    .eyebrow {
        color:var(--gold) !important;
    }
    .shade {
	   position: absolute;
	   inset: 0;
	   background: #2d1519d9;
    }
    blockquote {
        margin: 3rem auto;
        padding:3rem;
        border: 0;
        font-family: Georgia, serif;
        font-size: 2rem;
        line-height: 1.5;
        text-align: center;
        background-color: rgb(0 0 0 / 0.1) !important;
    }
    .button {
		box-sizing: border-box;
		margin-right:1rem;
		background-color:var(--cream) !important;
		border:2px solid var(--cream) !important;
		color:var(--dark) !important;
	}
	.button.outline {
		background-color:transparent !important;
		border:2px solid var(--cream) !important;
		color:var(--cream) !important;
	}
    .button.text {
        border:transparent !important;
        color: var(--cream) !important;
        background-color: transparent !important;
    }
}

/* BASIC ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	background-color: var(--light);
	color:var(--ink);
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
section {
	display:block;
	padding: 6rem 0;
	color:inherit;
}

footer {
	background: var(--wine-dark) !important;
	color:var(--cream) !important;
	padding: 4rem 0;
	text-align: center;
	margin: 0;
}
.note {
    font-size: 80%;
    padding: 1rem;
    background-color: rgb(160 117 28 / 0.1) !important;
}
blockquote {
	font-family: "Georgia", serif !important;
	margin: 2em;
	padding: 2.5rem;
	font-size: 1.8rem;
	letter-spacing: .2rem;
	border-left: 4px solid var(--clay);
    background-color: rgb(160 117 28 / 0.1);
}
blockquote cite {
	display: block;
	margin-top: 1.2rem;
	font-size: 1.3rem;
	font-style: normal;
}
blockquote.italic {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 2.3rem;
	font-style: italic;
}
.container {
	max-width:1000px;
}
a {
	color:inherit;
	text-decoration:none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
a:hover {
	color:var(--wine);
	text-decoration:underline;
}
.center {
	text-align:center !important;
}
.spacing {
	margin:2rem;
}

/* GRID–––––––––––––––––––––––––––––––––––––––––––––––––– */

.gallery-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 260px 260px;
	gap: 1rem;
}
.gallery-grid img:first-child {
	grid-row: 1 / 3;
}
.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery-grid img:last-child {
	grid-column: 2 / 4;
}
.gallery-grid img:hover, .gallery-grid img:focus {
	text-decoration: none;
	transform: var(--translate);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.topic {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 21px;
	border-radius: 8px;
	background: #fff;
	text-decoration: none !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.panel {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	background: #222;
	color: #fff !important;
    h4, p {
	   color:#fff !important;
    }
    img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .67;
        transition: transform .5s;
    }
    div {
        background-color: rgba(0, 0, 0, 0.25);
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1rem 3rem;
    }
}
.panel:hover img {
	transform: scale(1.15);
}

/* Smaller than tablet */
@media (max-width: 900px) {
	.grid-two, .grid-three, .grid-four, .grid-five, .grid-six {
		display:block;
	}
	.lead {
	    font-size:1.8rem;
	}
	.lit-scripture {
        margin: 27px 0;
        padding: 20px 20px;
        background: var(--cream);
    }
	blockquote {
    	font-family: "Georgia", serif !important;
    	margin: 0;
    	padding: 0;
    	font-size: 1.6rem;
    	letter-spacing: .1rem;
    	border: none;
        background-color: transparent !important;
    }
	.panel {
		margin:1rem;
	}
}

/* Mobile Styles (Screens under 900px) */
/* NAVBAR ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.topnav {
    background: #fff;
    padding: 0;
    margin: 0;
}

.nav-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.topnav .row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    margin: 0;
}

.topnav .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 88px;
    margin: 0;
    padding: 0;
}

.topnav .brand img {
    display: block;
    float: none;
    width: auto;
    height: 40px;
    max-height: 40px;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

.topnav .navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    height: 88px;
    min-height: 88px;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #222;
}

.topnav .navbar a {
    color: #222;
}

.topnav .menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topnav .menu > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.topnav .menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    color: #222;
    text-decoration: none;
}

.topnav .menu > li > a:hover,
.topnav .menu > li > a:focus {
    background-color: #eee;
    color: var(--wine);
    border-radius: 9px;
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, .3);
}

#toggle {
    display: none;
}

.hamburger {
    display: none;
    cursor: pointer;
}

/* Mobile main navigation */
@media (max-width: 900px) {
    .nav-container {
        width: 100%;
        max-width: none;
        padding: 0 1rem;
    }

    .topnav .row {
        min-height: 80px;
        justify-content: center;
    }

    .topnav .brand {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }

    .topnav .brand img {
        width: auto;
        height: 40px;
        max-height: 40px;
        max-width: calc(100vw - 120px);
    }

    .topnav .navbar {
        width: 100%;
        height: 80px;
        min-height: 80px;
        justify-content: flex-end;
        background: transparent;
    }

    .topnav .hamburger {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid #222;
        border-radius: 9px;
        font-size: 22px;
        line-height: 1;
    }

    .topnav .hamburger:hover,
    .topnav .hamburger:active,
    .topnav .hamburger:focus {
        background-color: #f5f5f5;
        color: var(--wine);
        box-shadow: inset 0 0 1rem rgba(0, 0, 0, .3);
    }

    .topnav .menu {
        position: absolute;
        top: 100%;
        left: -1rem;
        z-index: 1000;
        display: none;
        flex-direction: column;
        width: calc(100% + 2rem);
        margin: 0;
        padding: .5rem 0;
        background: #eee;
        border: 0;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    }

    .topnav .menu > li {
        display: block;
        width: 100%;
        text-align: center;
    }

    .topnav .menu > li > a {
        display: flex;
        width: 100%;
        min-height: 48px;
        padding: 1.2rem 1.5rem;
        box-sizing: border-box;
    }

    .topnav .menu > li > a:hover,
    .topnav .menu > li > a:focus {
        background-color: #ccc;
    }

    #toggle:checked ~ .menu {
        display: flex;
    }
}
/* SUBNAV ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.subnav {
	background-color:var(--wine-dark);
	color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 20;
}
.rednav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rednav li {
	display: block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	border: 0px;
	float: left;
}
.rednav li a {
	display: block;
	position: relative;
	margin: 0;
	border: 0px;
	padding: 1.5rem;
	text-decoration: none;
	font-size: 1.3rem;
	color: inherit;
}
.subnav a:hover, .subnav a:focus {
	background-color:var(--wine);
	box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.9);
}
.camp-tools {
	display:none;
	visibility:hidden;
}
/* Mobile Styles (Screens under 900px) */
@media (max-width: 900px) {
	.camp-tools {
		display:block;
		visibility:visible;
		background-color:var(--wine-dark);
		color: var(--cream);
		position: sticky;
		bottom: 0;
		z-index: 20;
		text-align:center;
	}
	.camp-tools ul {
		display: flex;
		justify-content: space-between;
		list-style-type: none;
		padding: 0;
		margin: 0;
		box-sizing:border-box;
	}
	.camp-tools .icon {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1rem;
		border-radius: 50%;
		background: rgba(255, 255, 255, .08);
		color: var(--cream);
		font-size: 20px;
	}
	.camp-tools a:hover, .camp-tools a:focus {
		background-color:var(--wine);
		box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.9);
	}
}

/* INTRO ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fact-strip {
	padding: 3rem 0;
	background: var(--wine-dark);
	color: #fff;
}
.fact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.fact-grid div {
	padding: 2.2rem 2rem;
	border-left: 1px solid #ffffff24;
}
.fact-grid span {
	display: block;
	color: #e8be72;
	text-transform: uppercase;
	letter-spacing: .15em;
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: .4rem;
}
.fact-grid b {
	font-size: 1.65rem;
}
.intro {
	background: #fffdf7;
	text-align:center;
}
.cms-intro {
	font-size: 1.95rem;
	line-height: 1.75;
	color: var(--muted);
}
.cms-intro blockquote {
	border-left: 0;
	font-family: Georgia, serif;
	color: var(--wine);
	font-size: 2.1rem;
}
/* Mobile Styles (Screens under 900px) */
/* CONTENT ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Mobile Styles (Screens under 900px) */
/* CUSTOM SECTIONS–––––––––––––––––––––––––––––––––––––––––––––––––– */

.subtitle {
	font-family: Georgia, serif;
	font-style: italic;
	margin: 1.5rem 0;
	color: var(--cream);
	font-weight:200;
}
.family-section {
	background-color:#fff;
}
.family-layout {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 6rem;
	align-items: center;
}
.family-photo img {
	width: 100%;
	height: 620px;
	object-fit: cover;
}
.venue-section {
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 720px;
	background: var(--wine-dark);
	color: #fff;
}
.venue-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.venue-content {
	padding: 8rem max(5rem,calc((100vw - var(--home-max))/2));
	padding-left: 7rem;
}
.venue-content ul {
	columns: 2;
	margin: 2rem 0;
}
.venue-content address {
	font-style: normal;
	font-weight: 800;
	margin: 2rem 0;
}
.first-time div {
	padding: 2rem;
	border-left: 4px solid var(--gold);
	background: #fff;
}
.section-heading {
	margin-bottom: 38px;
	text-align:center;
}
.section-heading.light {
	color: #fff;
}
.rounded img {
	width: 100%;
	max-width:150px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}
.camp-now-heading h2 {
	margin: 0 0 11px;
	font-size: 32px;
}
.camp-now-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 18px;
	border: 1px solid #e2e5e1;
	border-radius: 7px;
	background: #fff;
	color: #272c28 !important;
	text-decoration: none !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.camp-now-item>i:first-child {
	flex: 0 0 34px;
	color: #637651;
	font-size: 19px;
	text-align: center;
}
.camp-now-item>div {
	flex: 1;
}
.camp-now-item strong {
	display: block;
	font-size: 14px;
}
.camp-now-item span {
	display: block;
	color: var(--muted);
	font-size: 11px;
}
.camp-now-item:hover {
	transform: var(--translate);
	border-color: #c8cec3;
	box-shadow: 0 7px 18px rgba(0, 0, 0, .045);
}
/* Mobile Styles (Screens under 900px) */
/* BUTTONS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
	display: inline-block;
	padding: 12px 20px;
	min-height: 60px !important;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.outline {
	background-color:transparent !important;
}
.button:hover, .button:focus, .text:hover, .text:focus {
	text-decoration: none;
	background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1)) !important;
	transform: var(--translate);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .2);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Mobile Styles (Screens under 900px) */
/* INFO CARDS–––––––––––––––––––––––––––––––––––––––––––––––––– */

.square {
	border-radius:0 !important;
}
.card:hover, .card:focus {
	text-decoration: none;
	transform: var(--translate);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.card.permission {
	border-left:4px solid var(--leaf);
}

.card-label {
	display: block;
	margin-bottom: 7px;
	color: var(--leaf);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.card-arrow {
	position: absolute;
	top: 50%;
	right: 20px;
	color: var(--leaf);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.3s ease;
}
.card:hover .card-arrow {
	transform: var(--translate);
}
.card.content, .card .content {
	position: relative;
	z-index: 2;
}
.card h3 {
	margin: 0 0 10px;
	color: var(--ink);
	font-size: 2rem;
	font-weight:200;
}
.card p {
	margin: 0 0 18px;
	color: var(--muted);
	font-size: 15px;
}
.location-icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--light);
	color: var(--leaf);
	font-size: 20px;
}

.location-button {
	display: inline-block;
	padding: 11px 18px;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: var(--ink);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.location-button:hover {
	background: transparent;
	color: var(--ink) !important;
}
.payment-method-features {
	margin: 22px 0;
}
.payment-method-features div {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	color: var(--muted);
	font-size: 14px;
}
.giving-inner {
	max-width: 1050px;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 55px;
	align-items: center;
	margin: 0 auto;
}
.giving-content h2 {
	margin: 0 0 13px;
	color: #fff;
	font-size: 34px;
}
.giving-content p {
	color: rgba(255, 255, 255, .7);
}
.giving-types {
	display: grid;
	gap: 12px;
}
.giving-type {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .1);
}
.giving-type:hover, .giving-type:focus {
	text-decoration: none;
	transform: var(--translate);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.giving-type>i {
	flex: 0 0 32px;
	color: var(--grass);
	font-size: 20px;
	text-align: center;
}
.giving-type strong {
	display: block;
	color: #fff;
}
.giving-type span {
	color: rgba(255, 255, 255, .58);
	font-size: 12px;
}
.camp-primary-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 9px;
	background: rgba(255, 255, 255, .045);
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.camp-primary-card:hover {
	transform: var(--translate);
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .22);
}
.camp-primary-icon {
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--grass);
	font-size: 22px;
}
.camp-primary-label {
	display: block;
	margin-bottom: 4px;
	color: var(--grass);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.camp-primary-card h3 {
	margin: 0 0 7px;
	color: #fff;
	font-size: 22px;
}
.camp-primary-card p {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .65);
	font-size: 13px;
}
.camp-primary-action {
	color: var(--grass);
	font-size: 12px;
	font-weight: 700;
}
.camp-primary-emergency {
	border-color: rgba(224, 130, 115, .45);
	background: rgba(126, 48, 40, .28);
}
.camp-primary-emergency .camp-primary-icon {
	color: #efb7ae;
}
.camp-primary-emergency .camp-primary-action {
	color: #f1c8c1;
}
.camp-primary-emergency .camp-primary-label {
	color: #f1c8c1 !important;
}
.camp-tip-section {
	padding: 65px 20px;
	background: #eef2eb;
}
.camp-tip-inner {
	max-width: 900px;
	display: flex;
	align-items: flex-start;
	gap: 25px;
	margin: 0 auto;
}
.camp-tip-icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: var(--leaf);
	font-size: 26px;
}
.camp-tip-section h2 {
	margin: 0 0 8px;
	font-size: 28px;
}
.packing-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.packing-checklist li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 9px 0;
	border-bottom: 1px solid #eef0ed;
	color: #555e58;
	font-size: 14px;
	text-align:left;
}
.packing-text-link {
	display: inline-block;
	margin-top: 17px;
	color: var(--leaf) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
}
.forgotten h2 {
	margin: 0 0 10px;
	color: #fff;
	font-size: 34px;
}
.forgotten-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 17px 19px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 6px;
	background: rgba(255, 255, 255, .045);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
.forgotten-icon {
	width: 32px;
	color: var(--grass);
	text-align: center;
	font-size: 18px;
}
.packing-section-heading h2 {
	margin: 0 0 13px;
	font-size: 34px;
	line-height: 1.2;
}
.guidelines-section-heading h2 {
	margin: 0 0 13px;
	font-size: 3rem;
	line-height: 1.2;
}
.list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #edf0ed;
	color: var(--muted);
	font-size: 14px;
}
.quiet-hours h2 {
	margin: 0 0 35px;
	color: #fff;
	text-align: center;
	font-size: 34px;
}
.quiet-hours-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 30px;
	align-items: center;
}
.quiet-hours-time {
	text-align: center;
	padding:2rem;
	border-radius:9px;
	border:1px solid var(--cream);
}
.quiet-time {
	display: block;
	margin-bottom: 5px;
	color: var(--gold);
	font-size: 29px;
	font-weight: 700;
}
.quiet-hours-time p {
	max-width: 340px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .68);
	font-size: 14px;
}
.quiet-hours-divider {
	color: var(--cream);
	font-size: 28px;
}
.attire-inner {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 60px;
	margin: 0 auto;
}
.attire-intro h2 {
	margin: 0 0 13px;
	font-size: 32px;
	font-weight:200;
}
.attire-intro p {
	margin: 0;
	font-size:1.8rem;
	color: var(--muted);
}
.attire-list {
	display: grid;
	gap: 12px;
}
.attire-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 17px;
	border-radius: 6px;
	background: #fff;
	color: var(--muted);
	font-size: 14px;
}
.attire-item i {
	margin-top: 4px;
	color: var(--leaf);
}
.allergy-secondary {
	padding: 13px 15px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .7);
	color: #5b5348;
	font-size: 14px;
}
.pets-intro {
	margin-bottom: 3rem;
}
.pets-intro h2 {
	margin: 0 0 10px;
	font-size: 32px;
	font-weight:200;
}
.pets-intro p {
	margin: 0;
	color: var(--muted);
}
.pets-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.pet-rule {
	display: flex;
	align-items: center;
    justify-content:flex-start;
	gap: 16px;
	padding: 22px;
	border: 1px solid #e2e5e1;
	border-radius: 7px;
	background: #fff;
}
.pet-rule>i {
	flex: 0 0 30px;
	margin-top: 3px;
	color: var(--leaf);
	font-size: 18px;
	text-align: center;
}
.pet-rule strong {
	display: block;
	margin-bottom: 3px;
	color:var(--forest);
}
.pet-rule p {
	margin: 0;
	color: var(--muted);
	font-size: 1.4rem;
}
.three-strikes-heading {
	margin-bottom: 4rem;
}
.three-strikes-heading h2 {
	margin: 0 0 12px;
	font-size: 34px;
}
.rrc-intro h2 {
	margin: 0 0 17px;
	font-size: 4rem;
}
/* EVENT SCHEDULE ELEMENTS–––––––––––––––––––––––––––––––––––––––––––––––––– */
.schedule h1 {
	text-align:center;
	font-size: clamp(3.8rem, 6vw, 6.5rem);
	line-height: 1;
	color: var(--wine-dark);
	margin: .5rem 0 3rem;
	letter-spacing: -.035em;
	text-shadow: none !important;
}
.schedule .hero-description {
	text-align:center;
}
.date-tabs {
	position: sticky;
	top: 0;
	z-index: 9;
	display: flex;
	overflow-x: auto;
	background: #fff;
	padding: .7rem;
	gap: .4rem;
	border: 1px solid var(--line);
	margin-bottom: 1rem;
}
.event-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	float: right;
	width: 100%;
	font-family: 'Roboto', sans-serif;
}
.event-nav>li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0px;
	float: left;
}
.event-nav>li>a {
	display: block;
	position: relative;
	margin: 0 0.5rem;
	border: 0px;
	padding: 18px 20px 18px 12px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 300;
	color: inherit;
}
.date-tabs a:hover {
	background: var(--wine);
	color: #fff;
	border-radius: 9px;
	box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.3);
}
.date-tabs a.active {
	background: var(--wine-dark);
	color: #fff;
	border-radius: 9px;
	box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.3);
}
time {
    white-space: nowrap;
    text-align:left;
}
.timeline {
	border-left: 4px solid var(--gold);
	margin-left: 7rem;
}
.timeline article {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	margin: 0 0 1.5rem;
	transform: translateX(-7rem);
}
.timeline article>div:hover, .timeline article>div:focus {
	text-decoration: none;
	transform: var(--translate);
	box-shadow: 0 15px 25px rgba(0, 0, 0, .1);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.timeline article>div {
	background: #fff;
	margin-left: 1rem;
	padding: 1.2rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.comp-badge {
	display: inline-block;
	background: #eee5d5;
	border-radius: 99px;
	padding: .15rem .7rem;
	font-size: 1.2rem;
	font-weight: 800;
	margin-bottom:1rem;
}
.timeline h3 {
	margin: .25rem 0;
	font-size: 2.4rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
	font-weight: 300;
}
.sticky {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* LITURGY
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.lit-key {
    padding: 14px 20px;
    border-bottom: 1px solid #e1e4df;
    background: #f5f5f1;
}
.lit-key-inner {
    max-width: 1000px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0 auto;
}
.lit-key-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
}
.lit-role {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: .58em;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}
.lit-leader {
    background: #202820;
    color: #fff;
}
.lit-reader {
    background: #713e43;
    color: #fff;
}
.lit-congregation {
    background: #637651;
    color: #fff;
}
.lit-all {
    background: #b99a59;
    color: #fff;
}
.lit-scripture {
    margin: 27px 0 32px;
    padding: 24px 27px;
    background: var(--cream);
}
.lit-all-declaration {
    margin: 35px 0 5px;
    padding: 25px 27px;
    border-left: 4px solid var(--clay);
    background: var(--light);
}
.lit-exchange-group {
    margin-top: 30px;
}
.lit-exchange {
    padding: 20px 0;
    border-bottom: 1px solid #edf0ec;
}








/* RESPONSIVE & BROWSER HARDENING
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
}
img, svg, video, canvas, iframe {
    max-width: 100%;
}
button, input, select, textarea {
    font: inherit;
}
a, button, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}
.container, .nav-container {
    width: min(100% - 3rem, 1200px);
    margin-inline: auto;
}
h1 { font-size: clamp(4rem, 8vw, 6rem); }
h2 { font-size: clamp(3rem, 5.5vw, 4rem); }
h3 { font-size: clamp(2.2rem, 4vw, 3rem); }
.hero h1, .home-hero h1 { font-size: clamp(5rem, 12vw, 12rem); }

@media (max-width: 900px) {
    section { padding: 4.5rem 0; }

    .grid-two, .grid-three, .grid-four, .grid-five, .grid-six,
    .family-layout, .venue-section,
    .pets-grid, .giving-inner {
        grid-template-columns: 1fr;
    }

    .grid-two, .grid-three, .grid-four, .grid-five, .grid-six {
        display: grid;
    }

    .home-hero { min-height: 600px; }
    .hero { min-height: 340px; }
    .hero .hero-description, .home-hero .subtitle {
        font-size: clamp(1.8rem, 5vw, 2.6rem);
    }

    .fact-grid { grid-template-columns: repeat(2, 1fr); }
    .family-photo img { height: min(65vh, 520px); }
    .venue-section { min-height: 0; }
    .venue-image img { max-height: 520px; }
    .venue-content { padding: 5rem 2.5rem; }
    .venue-content ul { columns: 1; }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .gallery-grid img:first-child, .gallery-grid img:last-child {
        grid-column: auto;
        grid-row: auto;
    }
    .gallery-grid img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

     .alert-section {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .timeline { margin-left: 2rem; }
    .timeline article {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        transform: translateX(-4rem);
    }

    .date-tabs {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .event-nav {
        display: flex;
        width: max-content;
        float: none;
    }
    .event-nav > li { float: none; }
    .button { min-height: 48px !important; }
}

@media (max-width: 600px) {
    .container, .nav-container { width: min(100% - 2rem, 1200px); }
    section { padding: 3.5rem 0; }
    h1 { line-height: .9; }
    .home-hero { min-height: 520px; }
    .home-hero .facts { gap: 1rem 1.5rem; }

    .fact-grid { grid-template-columns: 1fr; }
    .fact-grid div {
        border-left: 0;
        border-top: 1px solid #ffffff24;
    }
    .gallery-grid { grid-template-columns: 1fr; }

    .card,
    .camp-primary-card {
        padding: 2rem;
    }

    .button,
    .location-button {
        text-align: center !important;
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-right: 0 !important;
    }
    .cta-row { align-items: stretch; }
    .venue-content { padding: 4rem 1.5rem; }

    .timeline {
        margin-left: 0;
        border-left: 0;
    }
    .timeline article {
        display: block;
        transform: none;
    }
    .timeline article > div { margin-left: 0; }
}

/* Progressive web app affordances and device safe areas */
html { background: #641b2e; }
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.pwa-actions {
    position: fixed;
    z-index: 10000;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    pointer-events: none;
}
.pwa-action,
.pwa-toast {
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
    font: 600 14px/1.2 Arial, sans-serif;
}
.pwa-action {
    min-height: 44px;
    padding: .75rem 1rem;
    color: #fff;
    background: #641b2e;
    cursor: pointer;
    pointer-events: auto;
}
.pwa-action[hidden], .pwa-toast[hidden] { display: none !important; }
.pwa-toast {
    /* The fixed wrapper passes clicks through; the toast must accept them. */
    pointer-events: auto;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: .75rem 1rem;
    color: #27211f;
    background: #fffaf0;
}
.pwa-toast button {
    margin-left: .6rem;
    border: 0;
    color: #641b2e;
    background: transparent;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
@media (display-mode: standalone) {
    .pwa-install { display: none !important; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Camp Guidelines — responsive layout fixes */
@media (max-width: 900px) {
    .quiet-hours-grid,
    .attire-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quiet-hours-divider {
        display: none;
    }
}

@media (max-width: 600px) {
    .guidelines-section-heading h2,
    .joy-callout h2,
    .quiet-hours h2,
    .attire-intro h2,
    .pets-intro h2,
    .three-strikes-heading h2 {
        font-size: clamp(2.4rem, 8vw, 3rem);
    }

    
    .pet-rule {
        padding: 2rem;
    }

    .quiet-hours-time {
        padding: 2rem 1.5rem;
    }

    .quiet-time {
        font-size: clamp(2.2rem, 8vw, 2.9rem);
    }

    .attire-inner {
        gap: 2.5rem;
    }
}

/* Secondary subnav — mobile responsive tab bar */
@media (max-width: 900px) {
    .subnav {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .subnav .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .rednav {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: 0 .5rem;
    }

    .rednav li {
        float: none;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .rednav li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 1.2rem 1.35rem;
        font-size: 1.2rem;
        line-height: 1.2;
        text-align: center;
        touch-action: manipulation;
    }
}

@media (max-width: 600px) {
    .rednav li a {
        min-height: 46px;
        padding: 1.1rem 1.15rem;
        font-size: 1.15rem;
    }
}