/* Taste of Northeast — project override. Loads after Bootstrap. */

:root {
	--navy: #1d428a;
	--navy-deep: #12264f;
	--navy-mid: #2a4a8c;
	--gold: #fdb913;
	--gold-soft: #ffd15a;
	--cream: #f6efe0;
	--paper: #fffdf8;
	--ink: #1a1914;
	--muted: #5c574c;
	--brick: #8b3d32;
	--folk-band: url("../img/brand/folk-band.svg");
}

html {
	scroll-behavior: smooth;
}

.site-section,
.site-hero {
	scroll-margin-top: 4.75rem;
}

body {
	font-family: "Source Sans 3", system-ui, sans-serif;
	color: var(--ink);
	background: var(--cream);
}

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

a {
	color: var(--navy);
}

a:hover {
	color: var(--brick);
}

.skip-link {
	position: absolute;
	left: .75rem;
	top: -3rem;
	z-index: 2000;
	background: var(--gold);
	color: var(--navy-deep);
	padding: .5rem .75rem;
	font-weight: 700;
}

.skip-link:focus {
	top: .75rem;
}

/* --- type --- */

.site-kicker {
	font-family: Oswald, sans-serif;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--gold);
	margin-bottom: .5rem;
}

.site-title {
	font-family: Oswald, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.05;
	color: var(--navy-deep);
}

.site-lede {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.35;
	color: var(--navy);
}

.food-name {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--navy-deep);
	text-transform: none;
	letter-spacing: 0;
}

h1, h2, h3,
.h1, .h2, .h3 {
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* --- folk stripe --- */

.site-folk {
	height: 14px;
	background-image: var(--folk-band);
	background-repeat: repeat-x;
	background-size: 120px 14px;
}

/* --- nav --- */

.site-nav {
	background: rgba(18, 38, 79, .92);
	backdrop-filter: blur(8px);
	padding-top: .35rem;
	padding-bottom: .35rem;
}

.site-nav .navbar-brand {
	display: flex;
	align-items: center;
	gap: .65rem;
	color: #fff;
	font-family: Oswald, sans-serif;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .95rem;
}

.site-nav .navbar-brand:hover,
.site-nav .navbar-brand:focus {
	color: var(--gold-soft);
}

.brand-mark {
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}

.brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-nav .nav-link {
	color: rgba(255, 255, 255, .88);
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .45rem .7rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
	color: var(--gold);
}

.site-nav .navbar-toggler {
	border-color: rgba(232, 180, 34, .55);
}

.site-nav .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8b422' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- hero (the one dominant element) --- */

.site-hero {
	min-height: 100vh;
	position: relative;
	display: flex;
	align-items: flex-end;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(18, 38, 79, .45) 0%, rgba(18, 38, 79, .28) 38%, rgba(18, 38, 79, .88) 100%),
		url("../img/photos/festival-01.webp") center 28% / cover no-repeat;
	padding: 7rem 0 4rem;
}

/* the wordmark is navy-on-transparent, so it needs a light plate to read over a photo */
.hero-wordmark {
	margin: 0 0 1.25rem;
	width: min(30rem, 92vw);
	background: rgba(255, 253, 248, .95);
	border-bottom: 5px solid var(--gold);
	padding: 1.1rem 1.35rem .95rem;
	box-shadow: 0 12px 34px rgba(18, 38, 79, .38);
}

.hero-wordmark img {
	width: 100%;
	height: auto;
	display: block;
}

.hero-dates {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1.35rem, 3vw, 2rem);
	color: var(--gold-soft);
	margin-bottom: 1rem;
}

.hero-hours {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	margin-bottom: 1.5rem;
}

.hero-hours dt {
	font-family: Oswald, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--gold);
	margin: 0;
}

.hero-hours dd {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.hero-copy {
	max-width: 36rem;
}

.hero-chip {
	display: inline-block;
	background: var(--gold);
	color: var(--navy-deep);
	font-family: Oswald, sans-serif;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .78rem;
	padding: .35rem .7rem;
	margin-bottom: 1.25rem;
}

.btn-gold {
	background: var(--gold);
	color: var(--navy-deep);
	font-family: Oswald, sans-serif;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 2px solid var(--gold);
	padding: .65rem 1.15rem;
}

.btn-gold:hover,
.btn-gold:focus {
	background: var(--gold-soft);
	border-color: var(--gold-soft);
	color: var(--navy-deep);
}

.btn-ghost {
	background: transparent;
	color: #fff;
	font-family: Oswald, sans-serif;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 2px solid rgba(255, 255, 255, .75);
	padding: .65rem 1.15rem;
}

.btn-ghost:hover,
.btn-ghost:focus {
	background: #fff;
	color: var(--navy-deep);
	border-color: #fff;
}

/* --- sections --- */

.site-section {
	padding: 4.5rem 0;
}

.site-section-tight {
	padding: 3.25rem 0;
}

.bg-paper {
	background: var(--paper);
}

.bg-navy {
	background-color: var(--navy-deep);
	background-image: radial-gradient(circle, rgba(232, 180, 34, .55) 1px, transparent 1.4px);
	background-size: 26px 26px;
	color: #fff;
}

.bg-navy .site-title,
.bg-navy h2,
.bg-navy h3 {
	color: #fff;
}

.bg-navy .site-lede {
	color: var(--gold-soft);
}

.bg-navy p,
.bg-navy .text-body {
	color: rgba(255, 255, 255, .88);
}

/* The default link navy is invisible on this ground. Same treatment as the
   footer, which sits on the same colour. */
.bg-navy a:not(.btn) {
	color: var(--gold-soft);
	text-decoration-color: rgba(255, 209, 90, .55);
}

.bg-navy a:not(.btn):hover,
.bg-navy a:not(.btn):focus {
	color: #fff;
	text-decoration-color: currentColor;
}

/* --- experience tiles: heading over image, not nested cards --- */

.exp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 768px) {
	.exp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.exp-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.exp-tile {
	position: relative;
	min-height: 16rem;
	overflow: hidden;
	color: #fff;
	display: flex;
	align-items: flex-end;
	padding: 1.15rem 1.1rem;
}

.exp-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.exp-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 38, 79, .05) 20%, rgba(18, 38, 79, .82) 100%);
	z-index: 1;
}

.exp-tile h3,
.exp-tile p {
	position: relative;
	z-index: 2;
	margin: 0;
}

.exp-tile h3 {
	font-size: 1.15rem;
	color: var(--gold-soft);
	margin-bottom: .25rem;
}

.exp-tile p {
	font-size: .95rem;
	color: rgba(255, 255, 255, .92);
}

.exp-tile.span-2 {
	grid-column: span 1;
}

@media (min-width: 992px) {
	.exp-tile.span-2 {
		grid-column: span 2;
		min-height: 20rem;
	}
}

/* --- food --- */

.food-head {
	max-width: 46rem;
}

/* Band label with a rule. Reads as a menu heading, not a card header. */
.food-sub {
	font-family: Oswald, sans-serif;
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .18em;
	color: var(--navy);
	margin: 3.25rem 0 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid rgba(28, 58, 120, .16);
}

.food-sub:first-child {
	margin-top: 0;
}

/* Feature platter: the one dominant food image, paired with its own note. */
.food-feature {
	display: grid;
	margin: 2.75rem 0 0;
}

.food-feature img {
	display: block;
	width: 100%;
	height: auto;
}

.food-feature figcaption {
	background: var(--paper);
	border-top: 3px solid var(--gold);
	padding: 1.5rem 1.5rem 1.75rem;
}

.food-feature .food-name {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	margin: 0 0 .6rem;
}

.food-feature figcaption p:last-child {
	margin-bottom: 0;
	color: var(--muted);
}

@media (min-width: 992px) {
	.food-feature {
		grid-template-columns: 1.6fr 1fr;
	}

	.food-feature figcaption {
		border-top: 0;
		border-left: 3px solid var(--gold);
		padding: 2.25rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Every dish photo is square. Prominence comes from the tile size: two lead
   dishes at half width, three sandwiches at a third. */
.dish-lead,
.dish-row {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.dish-lead {
		grid-template-columns: repeat(2, 1fr);
	}

	.dish-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}
}

.dish img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	/* Several sources are shot on white, which would dissolve into the page. */
	border: 1px solid rgba(28, 58, 120, .12);
	margin-bottom: 1rem;
}

.dish .food-name {
	font-size: clamp(1.7rem, 2.5vw, 2.15rem);
	margin: 0 0 .4rem;
}

.dish p {
	margin-bottom: 0;
	color: var(--muted);
}

.dish-sm .food-name {
	font-size: 1.5rem;
}

.dish-sm p {
	font-size: .95rem;
}

/* On a phone the small dishes read better as menu rows than as three
   full-width squares stacked one after another. */
@media (max-width: 767.98px) {
	.dish-row {
		gap: 1.5rem;
	}

	.dish-sm {
		display: grid;
		grid-template-columns: 6.5rem 1fr;
		column-gap: 1rem;
		row-gap: .2rem;
		align-items: start;
	}

	.dish-sm img {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.dish-sm .food-name,
	.dish-sm p {
		grid-column: 2;
	}
}

.food-also {
	margin: 1.75rem 0 0;
	color: var(--muted);
}

.food-also strong {
	color: var(--navy-deep);
	font-weight: 600;
}

.food-extras {
	margin-top: 3.25rem;
	background: var(--paper);
	border-top: 3px solid var(--gold);
	padding: 1.75rem 1.5rem 2rem;
}

.food-sides {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--muted);
}

.food-sides li + li {
	margin-top: .35rem;
}

.food-sides-split {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 1rem 2.5rem;
}

@media (min-width: 576px) {
	.food-sides-split {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.food-sides-split {
		grid-template-columns: repeat(3, 1fr);
	}
}

.food-sides-split li + li {
	margin-top: 0;
}

.food-sides-split strong {
	display: block;
	font-weight: 600;
	color: var(--navy-deep);
}

.bake-sale {
	display: grid;
	gap: 2rem;
	margin-top: 3.25rem;
}

@media (min-width: 992px) {
	.bake-sale {
		grid-template-columns: 5fr 7fr;
		gap: 2.5rem;
		align-items: start;
	}
}

.bake-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}

.bake-strip img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid rgba(28, 58, 120, .12);
}

/* Three across on a phone leaves thumbnails too small to read, so the first
   one leads at full width instead. */
@media (max-width: 575.98px) {
	.bake-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.bake-strip img:first-child {
		grid-column: span 2;
		aspect-ratio: 3 / 2;
	}
}

/* --- schedule --- */

.day-col h3 {
	color: var(--gold);
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

.sched {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sched li {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: .75rem;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sched-note {
	color: rgba(255, 255, 255, .75);
}

.sched time {
	font-family: Oswald, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-soft);
	font-size: .85rem;
}

/* --- visit facts --- */

.fact-label {
	font-family: Oswald, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .75rem;
	color: var(--navy);
	margin-bottom: .2rem;
}

.fact-value {
	margin-bottom: 0;
}

/* --- gallery --- */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}

@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gallery-grid button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1;
}

.gallery-grid button:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .18s ease;
}

.gallery-grid button:hover img {
	transform: scale(1.05);
}

.gallery-grid .wide {
	grid-column: span 2;
	aspect-ratio: 2 / 1;
}

/* --- accordion FAQ --- */

.accordion-item {
	background: transparent;
	border-color: rgba(28, 58, 120, .15);
}

.accordion-button {
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .95rem;
	background: var(--paper);
	color: var(--navy-deep);
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	background: var(--navy-deep);
	color: var(--gold);
	box-shadow: none;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .2rem rgba(232, 180, 34, .35);
}

.accordion-body {
	background: var(--paper);
}

/* --- sponsors --- */

.measure {
	max-width: 40rem;
}

.sponsor-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
}

@media (min-width: 768px) {
	.sponsor-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 992px) {
	.sponsor-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Every box is the same white plate at the same height. Logos are trimmed to
   their ink by bin/prep-sponsor-logos, so filling the box with object-fit gives
   them comparable visual weight instead of letting a square mark render at a
   third the width of a wide one. */
.sponsor-logo {
	background: #fff;
	border: 1px solid rgba(28, 58, 120, .10);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.1rem 1.25rem;
	height: 8.5rem;
}

.sponsor-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Two sponsors only supplied light art for a dark ground. Their box goes black and
   the art is flattened onto the same black, so there is no seam. */
.sponsor-logo.on-tile {
	background: #000;
	border-color: #000;
}

.partner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
}

.partner-row img {
	max-height: 4rem;
	width: auto;
	max-width: 14rem;
	object-fit: contain;
}

/* --- footer --- */

.site-footer {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, .82);
	padding: 3rem 0 2rem;
}

.site-footer a {
	color: var(--gold-soft);
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .footer-name {
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
	margin-bottom: .35rem;
}

.footer-fine {
	font-size: .9rem;
}

.exp-tile > div {
	position: relative;
	z-index: 2;
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.15rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.modal-content {
	background: #111;
	color: #fff;
	border: 0;
}

.carousel-item img {
	width: 100%;
	max-height: 85vh;
	object-fit: contain;
	margin: 0 auto;
}