/* Homepage sections. Loaded on the front page only; tokens live in style.css. */

/* ---------- Hero ---------- */
.hero {
	position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden;
	min-height: clamp(26rem, 30vw + 8rem, 38rem); background: #0e1418; color: var(--color-on-dark);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(8, 12, 16, .7) 0%, rgba(8, 12, 16, .45) 42%, rgba(8, 12, 16, .08) 75%);
}
.hero-inner { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hero-places {
	display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 var(--space-lg); padding: 0; list-style: none;
	color: var(--color-on-dark-muted);
}
.hero-places li + li::before { content: "/"; margin-right: .6rem; opacity: .7; }
.hero-places a { color: inherit; }
.hero-places a:hover { color: var(--color-on-dark); }
.hero-title {
	max-width: 20ch; margin-bottom: var(--space-lg); color: var(--color-on-dark);
	font-size: var(--h1); line-height: 1.04; letter-spacing: -.012em;
}
.hero-text { max-width: 30rem; margin-bottom: var(--space-xl); color: rgba(255, 255, 255, .9); font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); line-height: 1.6; }
.hero .button { border-color: rgba(255, 255, 255, .14); }
.hero :focus-visible { outline-color: var(--color-on-dark); }
.photo-credit {
	position: absolute; right: var(--gutter); bottom: .5rem; margin: 0;
	color: rgba(255, 255, 255, .6); font-size: var(--text-2xs);
}
.photo-credit a { color: inherit; }
.photo-credit a:hover { color: var(--color-on-dark); }

@media (max-width: 700px) {
	.hero { align-items: flex-end; min-height: min(36rem, 88svh); }
	.hero-bg { object-position: 68% 60%; }
	.hero::before { background: linear-gradient(0deg, rgba(8, 12, 16, .88) 0%, rgba(8, 12, 16, .6) 55%, rgba(8, 12, 16, .15) 100%); }
	.hero-inner { padding-block: 5rem 3.25rem; }
	.hero .button { width: 100%; }
}

/* ---------- Featured story ---------- */
.featured-inner {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
	gap: var(--space-xl) clamp(2rem, 5vw, 4.5rem);
}
.featured-text { padding-left: var(--space-xs); }
.featured-title { margin-bottom: var(--space-lg); font-size: var(--h2); line-height: 1.12; }
.featured-title a { color: var(--color-heading); text-decoration: none; }
.featured-title a:hover { color: var(--color-primary); }
.featured-excerpt { max-width: 32rem; margin-bottom: var(--space-xl); color: var(--color-muted); line-height: 1.7; }
.featured-media { display: block; aspect-ratio: 15 / 7; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-sage); box-shadow: var(--shadow-sm); }
.featured-media img, .featured-media .story-image-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.featured-inner:hover .featured-media img { transform: scale(1.03); }

@media (max-width: 800px) {
	.featured-inner { grid-template-columns: minmax(0, 1fr); }
	.featured-media { order: -1; aspect-ratio: 16 / 10; }
	.featured-text { padding-left: 0; }
}

/* ---------- Places ---------- */
.places { padding-top: 0; }
.places .section-head { margin-bottom: var(--space-xl); }

/* ---------- About ---------- */
.about { padding-top: var(--space-md); }
.about-panel {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
	gap: var(--space-2xl) clamp(2rem, 6vw, 5rem);
	padding: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 6vw, 5rem);
	border-radius: var(--radius-sm); background: var(--color-sage);
}
.polaroid {
	position: relative; justify-self: center; width: 100%; max-width: 19rem; margin: 0;
	padding: .75rem .75rem 3.25rem; background: #fff; box-shadow: var(--shadow-lg); transform: rotate(-4deg);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 1 / .9; object-fit: cover; object-position: 50% 30%; }
.polaroid figcaption {
	position: absolute; right: 1.1rem; bottom: .55rem; color: #2e3430;
	font: 500 1.4rem/1 var(--font-hand); transform: rotate(-3deg);
}
.about-text h2 { max-width: 18ch; margin-bottom: var(--space-md); font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.375rem); }
.about-text p:not(.eyebrow) { max-width: 34rem; margin-bottom: var(--space-lg); font-size: var(--text-sm); line-height: 1.8; }

@media (max-width: 800px) {
	.about-panel { grid-template-columns: minmax(0, 1fr); }
	.polaroid { max-width: 16rem; }
}

/* ---------- Latest stories ---------- */
.latest { padding-top: var(--space-md); }