/* === Main Styles === */

:root {
  	/* Fonts */
  	--font-sans: "Inter", sans-serif;
  	--font-serif: "Crimson Pro", serif;
  	--font-headline: "Bebas Neue", sans-serif;

 	/* Colors */
 	--color-cream: #e0ccb1;
 	--color-light-bg: var(--color-cream);
 	--color-dark-bg: #2a2520;
 	--color-accent: #c65d3b;
 	--color-text-dark: #2a2520;
 	--color-text-light: #f9f5ee;

 	--darker-color: #2a2520;
 	--lighter-color: #f9f5ee;
 	--contrast-color: #c65d3b;

 	--card-tone-dark: #c65d3b;
 	--card-tone-light: #355e3b;
 	--card-bg-3: #b8860b;
 	--card-bg-yellow: #ffeb3b;
 	--card-bg-1-alpha: rgba(61, 47, 37, 0.52);

 	--btn-bg: #c65d3b;
 	--btn-text: #fff;

 	--color-green: #999c4a;

 	/* Typography */
 	--text-base: 1rem;
 	--text-lg: 1.125rem;
 	--text-xl: 1.5rem;
 	--text-2xl: 2rem;
 	--text-3xl: 2.75rem;
 	--card-padding: 18px;
 	--card-height: 380px;
 }

/* Basic Reset & Body */
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}

html,
body {
	overflow-x: hidden;
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-text-dark);
	background-color: var(--color-light-bg);
}

h3 {
	margin: 0 0 0.4rem;
	color: black;
	font-family: var(--font-sans);
	font-size: clamp(1.05rem, 3vw, 1.4rem);
	line-height: 1.2;
	text-align: left;
}
.content-block .content h3 {
}
/* Links */
a {
	color: #5a5a5a;
	text-decoration: underline dotted #888;
}
/* === Layout Helpers === */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Visually hidden */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: #2a2520;
	color: #f9f5ee;
	text-decoration: none;
	font-size: 0.9rem;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

/* === Header === */

/* Header nav */
header nav {
	display: flex;
	align-items: center;
	padding: 0 24px 3px;
	border-bottom: thin solid gray;
	background-color: rgba(255, 255, 255, 0.45);
	font-size: 0.82rem;
}

header nav a {
	color: #2a2520;
	text-decoration: none;
	margin-right: 0.9rem;
}

header nav > a:first-child {
	margin-right: 0.9rem;
	flex-shrink: 0;
}

header nav > a:first-child img {
	height: 28px;
	width: auto;
	display: block;
}

header nav > a:nth-child(3) {
	background: #5c4033;
	color: #fff;
	padding: 0.2rem 0.65rem;
	font-size: 0.78rem;
	border-radius: 4px;
}

header nav button {
	margin-left: auto;
	padding: 0.25rem;
	background: transparent;
	border: 1px solid #2a2520;
	border-radius: 4px;
	color: #2a2520;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}

header nav button:hover {
	background-color: rgba(42, 37, 32, 0.08);
}

/* Visual header area
   Design logic (as of 2026-07, refined for short viewports):

   Core sizing:
   - .visual uses aspect-ratio: 800/1216 + height:auto + max-width:800px.
     Tree size is now driven by the image's natural proportions (within the max-width)
     instead of being strictly capped by viewport height %.
   - max-width:800px is always present on .visual (re-introduced). The tree doesn't look
     good when too wide and long scrolling becomes uncomfortable. Paper background on
     the sides of the 800px band keeps the layout feeling intentional and balanced.
   - Banner is separately capped (see below).

   Tall vs short viewport behavior:
   - On tall viewports (min-height 901px+): a max-height cap is applied so the header
     doesn't become excessively tall. The cap uses the previous clamp/calc expression
     (preserves the "hero" treatment and small intro peek on normal/large screens).
   - On short viewports (≤900px height): no height cap. The tree renders at its natural
     aspect-driven size (up to 800px wide / ~1216px tall). The full image integrity is
     prioritized over fitting everything on screen. Scrolling is accepted (especially
     on narrow/short viewports where users are already accustomed to it).
   - Threshold: 900px (tunable). Below this, vh no longer drives the tree size.

   Narrow / mobile:
   - The max-width:440px media query that forces height:70vh is left completely untouched.
     On iPhone the tree already fills side-to-side naturally; we do not want to change
     the mobile experience just to satisfy desktop edge cases.
   - Tablets are treated like desktop (except tap/hover behavior). When users resize
     a tablet viewport to phone-like ratios they hit the existing narrow MQ.

   Other:
   - .tree uses height:100% + width:auto + centering. When the container is at natural
     aspect (short screens) the full tree is shown without clipping. When height is
     capped (tall screens) sides may clip or paper appears on the sides.
   - Banner is % positioned relative to .visual so it floats consistently; it has its
     own max-width.
   - No attempt is made to keep a peek of the intro in short-screen edge cases.
 */
header .visual {
	aspect-ratio: 800 / 1216;
	height: auto;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

@media (min-height: 901px) {
	header .visual {
		max-height: clamp(70vh, calc(100vh - 120px), 95vh);
	}
}
@media (min-height: 901px) {
	header .visual {
		max-height: clamp(70dvh, calc(100dvh - 120px), 95dvh);
	}
}

header .visual .tree {
	/* height 100% + width:auto: always full vertical, AR preserved.
	   Container now has max-width:800px + aspect-ratio. On short screens the tree
	   renders at natural size (full image). On tall screens the height cap causes
	   the tree to be shorter than natural → width:auto + centering produces side
	   clipping or paper on the sides. */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: auto;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}

/* Ribbon banner */
header .visual .banner {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 660px;
	height: auto;
	object-fit: contain;
	z-index: 25;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* === Sections by Background === */

.light-bg {
	background-color: var(--color-light-bg);
	padding: 0;
}

.darker-bg {
	background-color: var(--color-dark-bg);
	color: var(--color-text-light);
	padding: 0;
}

.orange-bg {
	background-color: var(--color-accent);
	color: #f9f5ee;
	padding: 0;
}

header {
	background-image: url("../images/paper-texture.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	background-attachment: scroll;
	background-color: var(--color-cream);
}

/* Header intro (independent from main .container) */
header .intro {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	padding-top: 24px;
	padding-bottom: 24px;
}

header .intro h1,
header .intro h2,
.content-block h2 {
	font-family: var(--font-headline);
	font-size: clamp(1.5rem, 5.5vw, 2.75rem);
	margin: 0 0 1rem;
	line-height: 1.1;
}

header .intro p {
	font-size: clamp(0.94rem, 2.8vw, 1.125rem);
	max-width: 42rem;
	margin: 0 auto;
}



/* === Card Grid === */

.card-section {
	width: 100%;
	padding: 0;
}

.card-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.card-grid {
	display: grid;
	gap: 0;
	margin: 0;
}

.card-grid.two-col {
	grid-template-columns: repeat(2, 1fr);
}

.card {
	min-height: 320px;
	display: grid;
	background-size: cover;
	background-position: center;
	color: var(--color-text-light);
	position: relative;
	border: none;
	margin: 0;
}

.card-grid.two-col .card {
	height: var(--card-height);
	padding: var(--card-padding);
	overflow: hidden;
}

.card-content {
	height: auto;
	padding: 0;
}

.card h3 {
	color: white;
	font-family: "Recursive", var(--font-sans);
	font-variation-settings:
		"wght" 800,
		"CASL" 0.35,
		"slnt" -3;
	text-transform: uppercase;
	margin: 0 0 0.25rem;
	font-size: clamp(23px, 4.8vw, 3rem);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.card p {
	font-family: "Recursive", var(--font-sans), sans-serif;
	font-variation-settings:
		"wght" 450,
		"CASL" 0.2;
	/*text-transform: uppercase;*/
	margin: 0;
	/*padding-left: 1.5em;*/
	padding-left: clamp(.5em, 3vw, 2em);
	font-size: clamp(17px, 4.8vw, 1.4rem);
	line-height: 1.3;
	/*letter-spacing: 0.02em;*/
}

/* Note on Recursive for cards: variable axes available are CASL (casual 0-1), CRSV, MONO, slnt, wght.
No explicit 'wdth' (width/condensed) axis in this font file. 'CASL' + 'slnt' used above for lightly condensed casual effect. Adjust values as needed when viewing. */

.card-btn {
	display: block;
	background-color: #f9f5ee;
	color: #2a2520;
	padding: 0.25em 0.6em;
	font-size: 1.02rem;
	text-decoration: none;
	border: 1px solid #2a2520;
	margin-top: 0.4rem;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	font-family: var(--font-sans);
	border-radius: 4px;
}

.card.has-image.has-cta:hover .card-btn,
.card.has-image.has-cta.revealed .card-btn,
.card-btn:active {
	background-color: var(--card-bg-yellow);
	color: var(--color-text-dark);
	border-color: var(--card-bg-yellow);
}

.card.has-image.has-cta .card-content {
	display: flex;
	flex-direction: column;
}
.card.has-image.has-cta .card-btn {
	margin-top: auto;
}
.card.has-image.has-cta.revealed .card-btn,
.card.has-image.has-cta:hover .card-btn {
	margin-top: 0;
	outline: 2px solid white;
	outline-offset: -2px;
}

.picture-bar {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	height: 220px;
	overflow: hidden;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 641px) {
	.picture-bar {
		height: 244px;
		transition: height 0.4s ease;
	}
}

.picture-bar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: sepia(1);
	transition: filter 0.55s ease;
}

.picture-bar.expanded img {
	filter: none;
}

@media (hover: hover) and (pointer: fine) {
	.picture-bar:hover img {
		filter: none;
	}
}

@media (min-width: 641px) {
	.picture-bar.expanded,
	.picture-bar:hover {
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url("../images/paper-texture.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto;
		background-color: var(--color-cream);
		height: clamp(280px, var(--full-height, 520px), 520px);
	}

	.picture-bar.expanded::before,
	.picture-bar:hover::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-accent);
		mix-blend-mode: multiply;
		opacity: 0.42;
		z-index: 1;
		pointer-events: none;
	}

	.picture-bar.expanded img,
	.picture-bar:hover img {
		position: relative;
		z-index: 2;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		display: block;
		margin: auto;
		filter: none;
	}
}

.picture-bar h2 {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.35em 0.7em;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	font-family: var(--font-headline);
	font-size: clamp(1.5rem, 4.8vw, 2.5rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	z-index: 5;
	pointer-events: none;
	border-radius: 3px;
	line-height: 1;
	transition: opacity 0.25s ease;
}

@media (max-width: 640px) {
	.picture-bar.expanded h2 {
		opacity: 0;
	}
 }

.card.has-image {
	background-image: var(--card-photo);
	background-position: center;
	background-size: cover;
	color: var(--color-text-light);
}

.card.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--card-tone-light);
	mix-blend-mode: multiply;
	opacity: 0.48;
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.card-grid .card.has-image:nth-child(odd) {
	background-color: var(--card-tone-light);
	--card-tone: var(--card-tone-light);
}
.card-grid .card.has-image:nth-child(odd)::before {
	background-color: var(--card-tone-light);
}
.card-grid .card.has-image:nth-child(even) {
	background-color: var(--card-tone-dark);
	--card-tone: var(--card-tone-dark);
}
.card-grid .card.has-image:nth-child(even)::before {
	background-color: var(--card-tone-dark);
}

@media (min-width: 441px) {
	.card-section > .card-grid + .card-grid .card.has-image:nth-child(1) {
		background-color: var(--card-tone-dark);
		--card-tone: var(--card-tone-dark);
	}
	.card-section > .card-grid + .card-grid .card.has-image:nth-child(1)::before {
		background-color: var(--card-tone-dark);
	}
	.card-section > .card-grid + .card-grid .card.has-image:nth-child(2) {
		background-color: var(--card-tone-light);
		--card-tone: var(--card-tone-light);
	}
	.card-section > .card-grid + .card-grid .card.has-image:nth-child(2)::before {
		background-color: var(--card-tone-light);
	}

	/* 50% tone override for the second grid in the 4-card section (higher specificity) */
	.card-section > .card-grid + .card-grid .card.has-image:not(.static).revealed,
	.card-section > .card-grid + .card-grid .card.has-image:not(.static):hover {
		background-color: color-mix(in srgb, var(--card-tone) 50%, transparent);
	}
}

.card.has-image .card-content {
	position: relative;
	z-index: 3;
	background-color: var(--card-bg-1-alpha);
	padding: 18px;
	border-radius: 18px;
}

.card.has-image .card-content h3,
.card.has-image .card-content p {
	opacity: 1;
}

.card.has-image {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: filter 0.2s ease, background-size 0.2s ease, padding 0.2s ease, background-color 0.2s ease;
}
/* Reveal state:
   - Card element provides the textured matte (paper at natural size + 50% tone via multiply).
   - ::after hosts the photo (contain) + cream border + inner shadow around the image only.
   - Matte shows in letterbox areas outside the framed image. */
.card.has-image:not(.static).revealed {
	filter: none;
	background-image: url("../images/paper-texture.jpg");
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-color: color-mix(in srgb, var(--card-tone) 50%, transparent);
	background-blend-mode: multiply;
	padding: 0;
}

/* Framed photo (on ::after so the border hugs the contained image, not the card). */
.card.has-image:not(.static).revealed::after {
	content: '';
	position: absolute;
	inset: 4px; /* small outer strip of textured matte before the border */
	background-image: var(--card-photo);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 3px solid var(--color-cream);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 1;
	pointer-events: none;
	transition: border 0.2s ease, box-shadow 0.2s ease;
}

.card.has-image:not(.static).revealed::before {
	opacity: 0;
}
.card.has-image:not(.static):not(.has-cta).revealed .card-content {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.card.has-image:not(.static):hover {
		filter: none;
		background-image: url("../images/paper-texture.jpg");
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center;
		background-color: color-mix(in srgb, var(--card-tone) 50%, transparent);
		background-blend-mode: multiply;
		padding: 0;
	}

	/* Framed photo on hover (desktop) */
	.card.has-image:not(.static):hover::after {
		content: '';
		position: absolute;
		inset: 4px;
		background-image: var(--card-photo);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		border: 3px solid var(--color-cream);
		box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
		z-index: 1;
		pointer-events: none;
		transition: border 0.2s ease, box-shadow 0.2s ease;
}

	.card.has-image:not(.static):hover::before {
		opacity: 0;
	}
	.card.has-image:not(.static):not(.has-cta):hover .card-content {
		display: none;
	}
}

.card.has-image.has-cta.revealed .card-content,
.card.has-image.has-cta:hover .card-content {
	display: flex;
	background-color: transparent;
	justify-content: center;
}
.card.has-image.has-cta.revealed .card-content h3,
.card.has-image.has-cta.revealed .card-content p,
.card.has-image.has-cta:hover .card-content h3,
.card.has-image.has-cta:hover .card-content p {
	display: none;
}

/* Card photo URLs via custom prop (used on base + on ::after for framed reveal) */
#card-keiki {
	--card-photo: url("../images/cards-01.jpg");
}
#card-weaving {
	--card-photo: url("../images/cards-07.webp");
}
#card-plants {
	--card-photo: url("../images/cards-08.jpg");
}

#card-artists {
	--card-photo: url("../images/cards-03.jpg");
}
#card-tasting {
	--card-photo: url("../images/cards-04.jpg");
}
#card-dyeing {
	--card-photo: url("../images/cards-05.jpg");
}
#card-dish {
	--card-photo: url("../images/cards-06.jpg");
}
#card-cookoff {
	--card-photo: url("../images/cards-02a.jpg");
}
#card-music {
	--card-photo: url("../images/cards-09.jpg");
}#card-explore {
	--card-photo: url("../images/cards-10.jpg");
}
.card.has-image.has-cta:active::before {
	opacity: 0;
}

/* === Content Blocks === */

.content-block {
	text-align: center;
	padding: 24px 16px;
}
.content-block .h1 {
	font-family: 'Bebas Neue';
	font-weight: bold;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 3vw, 3rem);
	margin: 0 0 0.1em;
	letter-spacing: 0.02em;
	text-align: center;
}

.content-block p {
	max-width: 38rem;
	margin: 0 auto;
	font-size: clamp(0.94rem, 2.8vw, 1.125rem);
}
.content-block.orange-bg > .container {
	padding: 0 8px;
}

/* Basic photo + text interstitial layout (Gabe + future).
   Section is edge-to-edge for bg (vertical padding only).
   .content is the constrained inner group (max 660px).
   On phone: image hugs left edge, text has 1rem right breathing.
   gap + flex keeps them side-by-side. */
.info {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
	flex-wrap: nowrap;
}

.content-block .content > img {
	width: 25%;
	height: auto;
	flex-shrink: 0;
	object-fit: cover;
	align-self: flex-start;
	display: block;
}

.content-block .content > div {
	flex: 1;
	text-align: left;
	min-width: 0;
	padding-left: 1em;
	padding-right: 1rem;
	overflow-wrap: break-word;
}



.content-block .content p {
	margin: 0;
	max-width: none;
}

.sponsors {
	background-color: var(--color-light-bg);
	padding: 0;
}

.quip {
	background-color: var(--color-accent);
	color: var(--color-text-light);
	padding:12px;
}
.quip .h1 {
		font-family: var(--font-headline);
}

.quip p {
	font-family: var(--font-sans);
	font-variation-settings: "wght" 700;
	font-size: clamp(0.9rem, 3vw, 1.2rem);
	line-height: 1.1;
	max-width: none;
	text-align: center;
}

main {
	counter-reset: banana-fact;
}

.banana-fact {
	background-color: #FFC800;
	padding: 12px 24px;
	min-height: var(--banana-min-h, 160px);
	display: flex;
	align-items: center;
	counter-increment: banana-fact;

	/* ornament scale for banana graphics (just visual ID, not layout) */
	--banana-icon-size: 218px;
	--banana-icon-offset: -156px;
	--banana-min-h: 160px;
	--banana-box-min-h: 200px;
}
.banana-fact div {
	position: relative;
	background: yellow;
	border-radius: 1em;
	padding: 1em 0.5em;
	width: clamp(220px, 72%, 380px);
	margin: 0 auto;
	min-height: var(--banana-box-min-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.banana-fact div::before {
	content: '';
	position: absolute;
	left: var(--banana-icon-offset);
	top: 50%;
	transform: translateY(-50%);
	width: var(--banana-icon-size);
	height: var(--banana-icon-size);
	background-image: url('../images/banana-thanks-a-bunch.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
/*
.banana-fact div::after {
	content: '';
	position: absolute;
	right: var(--banana-icon-offset);
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	width: var(--banana-icon-size);
	height: var(--banana-icon-size);
	background-image: url('../images/bananas-icon.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
*/
.banana-fact .h1 {
	white-space: nowrap;
}
.banana-fact .h1::after {
	content: " #" counter(banana-fact);
}
.banana-fact p {
	font-family: "Playwrite NZ Basic", "Crimson Pro", Georgia, serif;
	font-size: clamp(1rem, 4vw, 1.3rem);
	line-height: 1.4;
	max-width: none;
	margin: 0;
	text-align: center;
}

.disclaimer {
	font-size: 0.9rem;
	line-height: 1.1;
	max-width: 300px;
	margin: 1rem auto 0;
	text-wrap: balance;
}

blockquote {
	margin: 0;
	padding: 0.5em 0;
	color: var(--darker-color);
	font-family: "Crimson Pro", Georgia, Times, serif;
	font-size: clamp(1.1rem, 4vw, 1.55rem);
	line-height: 1.5;
	font-style: italic;
	text-wrap: balance;
}

.quote {
	max-width: 600px;
	margin: 0 auto;
	padding: 1.5em;
	border: 0.5pt dotted var(--contrast-color);
	border-radius: 1.5em;
	background-color: white;
}

.content-block.quote-section {
	background-color: var(--color-green);
}

.quote blockquote {
	border-top: 1pt dotted var(--darker-color);
	border-bottom: 1pt dotted var(--darker-color);
}

/* Quote cite */
.quote cite {
	font-style: normal;
	font-size: 0.72em;
	display: block;
	margin-top: 0.35em;
	line-height: 1.3;
}

/* === Footer === */

footer {
	background-color: var(--color-green);
	color: #2a2520;
	text-align: center;
	padding: 24px;
	font-size: 0.9rem;
}
footer h3 {text-align: center;font-size: 1rem;}
.footer-inner {
	background-color: white;
	border: 2px solid #2a2520;
	padding: 18px;
	border-radius: 18px;
	display: inline-block;
}

.sponsor-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 0.6rem;
}

.sponsor-logos img {
	height: 3.5em;
	width: auto;
	max-width: 100%;
	display: block;
}

.content-block .sponsor-logos img {
	height: 5.25em;
}

/* Image links */
a:has(img),
a:has(img):hover,
a:has(img):focus,
a:has(img):active,
a:has(img):visited {
	text-decoration: none;
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 0.35em 0.85em;
	background-color: var(--btn-bg);
	color: var(--btn-text);
	text-decoration: none;
	border: 1px solid var(--btn-bg);
	border-radius: 4px;
	font-size: 0.9rem;
	font-family: var(--font-sans);
	line-height: 1.1;
}

.map-btns {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0.5em 0;
}

.map-previews {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0.5em auto 0;
	max-width: 620px;
}

.map-previews .map-preview {
	flex: 1 1 48%;
	min-width: 0;
	text-align: center;
}

.map-previews .map-preview h3 {
	/*
	font-family: var(--font-serif);
	font-size: clamp(0.9rem, 2.5vw, 1.05rem);
	margin: 0 0 0.3em;
	line-height: 1.2;
	font-weight: 600;
	*/
}

.map-previews img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid #d4c5b0;
	border-radius: 1rem;
}

@media (max-width: 600px) {
	.map-previews .map-preview {
		flex: 1 1 100%;
	}
}

.content-block .content > .map-previews {
	flex: none;
	text-align: center;
	padding: 0;
}

@media (max-width: 1024px) {
	.picture-bar::after {
		content: "tap 👆";
		position: absolute;
		bottom: 8px;
		right: 10px;
		background-color: #000;
		padding: 0.5rem;
		border-radius: 4px;
		font-size: 0.75rem;
		color: #f5e8a0;
		text-transform: uppercase;
		/*letter-spacing: 0.03em;*/
		pointer-events: none;
		z-index: 10;
		line-height: 1;
	}
	.picture-bar:hover::after,
	.picture-bar.expanded::after {
		display: none;
	}

	.card.has-image:not(.static) .card-content::after {
		content: "tap 👆";
		position: absolute;
		top: 6px;
		right: 8px;
		background-color: #000;
		padding: 0.5rem;
		border-radius: 4px;
		font-size: 0.75rem;
		color: #f5e8a0;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		pointer-events: none;
		line-height: 1;
	}

	.card.has-image.has-cta.revealed .card-content::after,
	.card.has-image.has-cta:hover .card-content::after {
		display: none;
	}
}

/* Narrow (440px) */
@media (max-width: 440px) {
	.card-grid.two-col {
		grid-template-columns: 1fr;
	}

	.card-grid.two-col .card {
		height: auto;
		min-height: 300px;
		overflow: visible;
	}

	header .visual {
		height: 70vh;
	}

	/*
	.card h3 {
		letter-spacing: 0.03em;
	}
	*/
	/*
	.card p {
		padding-left: 1em;
		font-size: clamp(17px, 3vw, 1.08rem);
	}
	*/
}