/* ==========================================================================
   WC Finder — Theme styles
   Aesthetic: editorial public utility — Swiss design clarity, warm humanity.
   Fraunces (display serif) + DM Sans (body) + JetBrains Mono (mono).
   Cream paper background, deep teal-green primary, terracotta accent.
   ========================================================================== */

:root {
	/* Palette */
	--c-bg: #F5F1E8;
	--c-bg-elev: #FBF7EE;
	--c-bg-deep: #EFEADD;
	--c-ink: #16140F;
	--c-ink-soft: #4A4639;
	--c-ink-muted: #7A7361;
	--c-line: #DDD4BE;
	--c-line-soft: #E9E1CC;
	--c-primary: #2D5A4F;
	--c-primary-deep: #1F3F37;
	--c-primary-soft: #CFE1DA;
	--c-accent: #C8633D;
	--c-accent-deep: #A14E2D;
	--c-danger: #B23A2A;
	--c-success: #2D5A4F;
	--c-on-primary: #F5F1E8;

	/* Type */
	--ff-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
	--ff-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

	/* Scale */
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.625rem;
	--fs-2xl: 2.25rem;
	--fs-3xl: clamp(2.5rem, 5vw, 4rem);
	--fs-display: clamp(3.5rem, 8vw, 6.5rem);

	/* Space */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;
	--sp-10: 128px;

	/* Radius */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 16px;
	--r-pill: 999px;

	/* Misc */
	--container: 1200px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--ff-body);
	font-size: var(--fs-base);
	line-height: 1.55;
	font-feature-settings: "ss01", "ss02";
	-webkit-font-smoothing: antialiased;
	background-image: radial-gradient(circle at 1px 1px, var(--c-line-soft) 1px, transparent 0);
	background-size: 24px 24px;
}

a { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
a:hover { color: var(--c-primary-deep); }
a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }

img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--ff-display);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--c-ink);
	margin: 0;
	font-variation-settings: "opsz" 144;
}

p { margin: 0 0 1em; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-ink);
	color: var(--c-bg);
	padding: var(--sp-3) var(--sp-5);
	z-index: 999;
	text-decoration: none;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

/* ===== Header ===== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(245, 241, 232, 0.85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sp-5); padding: var(--sp-4) var(--sp-5);
}
.site-brand {
	display: inline-flex; align-items: center; gap: var(--sp-3);
	color: var(--c-ink); text-decoration: none; font-weight: 500;
}
.site-brand__mark {
	width: 32px; height: 32px; color: var(--c-primary);
	display: inline-flex; align-items: center; justify-content: center;
}
.site-brand__name { font-family: var(--ff-display); font-size: 1.25rem; letter-spacing: -0.01em; }

.site-nav__list, .site-footer__list {
	display: flex; gap: var(--sp-6); list-style: none; padding: 0; margin: 0;
}
.site-nav__list a {
	color: var(--c-ink); text-decoration: none;
	font-size: var(--fs-sm); font-weight: 500;
	padding: var(--sp-2) 0; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease);
}
.site-nav__list a:hover { border-bottom-color: var(--c-ink); }

.site-account { display: inline-flex; gap: var(--sp-3); align-items: center; }

@media (max-width: 720px) {
	.site-nav { display: none; }
}

/* ===== Buttons ===== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-sm);
	text-decoration: none; border: 1px solid transparent; border-radius: var(--r-pill);
	transition: transform 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
	cursor: pointer; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-deep); color: var(--c-on-primary); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }
.btn--inverse { background: var(--c-bg); color: var(--c-ink); }
.btn--inverse:hover { background: var(--c-bg-elev); }
.btn--large { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* ===== Hero ===== */
.hero { position: relative; padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; }
.hero__grain {
	position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-3);
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--c-ink-soft); margin: 0 0 var(--sp-6);
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }

.hero__title {
	font-size: var(--fs-display); font-weight: 400; line-height: 0.95;
	max-width: 14ch; margin: 0 0 var(--sp-6);
	font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 50;
}
.hero__title em { font-style: italic; color: var(--c-accent); font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100; }

.hero__lede { max-width: 56ch; font-size: var(--fs-lg); color: var(--c-ink-soft); margin: 0 0 var(--sp-6); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-8); }

.hero__stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sp-5); padding: var(--sp-6) 0 0; border-top: 1px solid var(--c-line); margin: 0;
}
.hero__stat dt {
	font-family: var(--ff-mono); font-size: var(--fs-xs);
	letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 var(--sp-2);
}
.hero__stat dd { margin: 0; font-family: var(--ff-display); font-size: var(--fs-2xl); font-weight: 400; color: var(--c-ink); line-height: 1; }
.hero__stat--accent dd { color: var(--c-accent); font-style: italic; }

/* ===== Sections ===== */
.section-header { margin: 0 0 var(--sp-7); max-width: 60ch; }
.section-header__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.section-header__lede { font-size: var(--fs-lg); color: var(--c-ink-soft); margin: 0; }

.features { padding: var(--sp-9) 0; }
.feature-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0;
	border-top: 1px solid var(--c-line);
}
.feature-grid__item {
	padding: var(--sp-6) var(--sp-5);
	border-bottom: 1px solid var(--c-line);
	border-right: 1px solid var(--c-line);
}
.feature-grid__item:nth-child(even) { background: var(--c-bg-elev); }
.feature-grid__num {
	font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--c-ink-muted);
	letter-spacing: 0.1em; display: block; margin: 0 0 var(--sp-4);
}
.feature-grid__item h3 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.feature-grid__item p { color: var(--c-ink-soft); margin: 0; }

.cta-band {
	background: var(--c-primary); color: var(--c-on-primary);
	padding: var(--sp-8) 0; margin: var(--sp-9) 0 0;
	position: relative; overflow: hidden;
}
.cta-band::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(245, 241, 232, 0.08) 1px, transparent 0);
	background-size: 24px 24px;
}
.cta-band__inner {
	position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-6);
	align-items: center; justify-content: space-between;
}
.cta-band__kicker {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--c-primary-soft); margin: 0 0 var(--sp-3);
}
.cta-band__title { font-size: var(--fs-2xl); color: var(--c-on-primary); margin: 0; max-width: 22ch; }

/* ===== Auth shell ===== */
.auth-shell {
	display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 73px);
}
.auth-shell--reverse { grid-template-columns: 1fr 1fr; }
.auth-shell--reverse .auth-shell__rail { order: 2; }
.auth-shell--reverse .auth-shell__form { order: 1; }

.auth-shell__rail {
	background: var(--c-primary); color: var(--c-on-primary);
	display: flex; align-items: center; justify-content: center;
	padding: var(--sp-8) var(--sp-7);
	position: relative; overflow: hidden;
}
.auth-shell__rail::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(245, 241, 232, 0.06) 1px, transparent 0);
	background-size: 32px 32px;
}
.auth-shell__rail-inner { position: relative; max-width: 38ch; }
.auth-shell__rail-kicker {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--c-primary-soft); margin: 0 0 var(--sp-6);
}
.auth-shell__pull {
	font-family: var(--ff-display); font-size: 1.75rem; line-height: 1.2; font-weight: 400;
	font-style: italic; margin: 0; quotes: none;
}
.auth-shell__pull cite { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); font-style: normal; color: var(--c-primary-soft); font-family: var(--ff-body); }
.auth-shell__perks {
	list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4);
	font-size: var(--fs-lg);
}
.auth-shell__perks li { display: flex; gap: var(--sp-3); align-items: baseline; }
.auth-shell__perks span { color: var(--c-accent); font-family: var(--ff-display); }

.auth-shell__form {
	display: flex; align-items: center; justify-content: center;
	padding: var(--sp-8) var(--sp-5);
}

.auth-card { width: 100%; max-width: 440px; }
.auth-card__header { margin-bottom: var(--sp-6); }
.auth-card__title { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); }
.auth-card__lede { color: var(--c-ink-soft); margin: 0; }

.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card__alt { margin-top: var(--sp-6); text-align: center; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.auth-card__legal { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-ink-muted); }
.auth-card__legal a { color: var(--c-ink-soft); }

@media (max-width: 800px) {
	.auth-shell, .auth-shell--reverse { grid-template-columns: 1fr; min-height: auto; }
	.auth-shell__rail { display: none; }
	.auth-shell__form { padding: var(--sp-6) var(--sp-5); }
}

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; }
.field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); }
.field__hint-link { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.field__hint { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0; }
.field__input {
	width: 100%; padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line); background: var(--c-bg-elev); border-radius: var(--r-md);
	font-family: inherit; font-size: var(--fs-base); color: var(--c-ink);
	transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(45, 90, 79, 0.15); }
.field__input::placeholder { color: var(--c-ink-muted); }

.field-check { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-soft); cursor: pointer; }
.field-check input { accent-color: var(--c-primary); width: 18px; height: 18px; }

.form-alert {
	padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
	font-size: var(--fs-sm); border: 1px solid; margin-bottom: var(--sp-5);
}
.form-alert--error { background: #FBE9E5; border-color: #E5B4AB; color: #7A1F12; }
.form-alert--notice { background: #E5EFEB; border-color: #BCD3C9; color: var(--c-primary-deep); }

/* ===== Dashboard ===== */
.dashboard { padding: var(--sp-8) 0 var(--sp-9); }
.dashboard__header { margin-bottom: var(--sp-7); max-width: 60ch; }
.dashboard__kicker {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 var(--sp-3);
}
.dashboard__title { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); }
.dashboard__lede { color: var(--c-ink-soft); font-size: var(--fs-lg); margin: 0; }

.dashboard__stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-3); margin: 0 0 var(--sp-7);
}
.stat-card {
	padding: var(--sp-5) var(--sp-5);
	background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.stat-card__label {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 var(--sp-3);
}
.stat-card__value { font-family: var(--ff-display); font-size: 2.5rem; line-height: 1; margin: 0 0 var(--sp-2); font-weight: 400; }
.stat-card__hint { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }
.stat-card--accent { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.stat-card--accent .stat-card__label, .stat-card--accent .stat-card__hint { color: var(--c-primary-soft); }

.dashboard__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
}
@media (max-width: 900px) { .dashboard__grid { grid-template-columns: 1fr; } }

.panel {
	background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--r-lg);
	padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
}
.panel__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.panel__title { font-size: var(--fs-xl); margin: 0; }
.panel__link { font-size: var(--fs-sm); color: var(--c-primary); }
.panel__divider { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-3) 0; }

.dashboard__grid > .panel:last-child { grid-column: 1 / -1; }

/* ===== Item list ===== */
.item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.item-list__row {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
	padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line-soft);
}
.item-list__row:last-child { border-bottom: 0; }
.item-list__row--stacked { flex-direction: column; gap: var(--sp-2); }
.item-list__main { flex: 1; min-width: 0; }
.item-list__title { font-family: var(--ff-display); font-size: var(--fs-lg); color: var(--c-ink); text-decoration: none; }
.item-list__title:hover { color: var(--c-primary-deep); }
.item-list__meta { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.item-list__excerpt { color: var(--c-ink-soft); margin: 0; font-size: var(--fs-sm); }
.item-list__date { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0; font-family: var(--ff-mono); }
.item-list__rating { color: var(--c-accent); letter-spacing: 0.1em; font-size: var(--fs-sm); margin: var(--sp-2) 0; }

.rating-pill {
	display: inline-flex; align-items: center; gap: var(--sp-1);
	background: var(--c-bg-deep); color: var(--c-ink); font-size: var(--fs-xs);
	padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
	font-family: var(--ff-mono); white-space: nowrap;
}

/* ===== Profile form ===== */
.profile-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.profile-form__actions { display: flex; align-items: center; gap: var(--sp-3); }
.profile-form__status { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.profile-form__status[data-state="success"] { color: var(--c-success); }
.profile-form__status[data-state="error"] { color: var(--c-danger); }
.profile-form__danger-label { font-size: var(--fs-sm); font-weight: 500; margin: 0 0 var(--sp-1); }
.profile-form__danger-hint { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0 0 var(--sp-3); }

/* ===== Empty states ===== */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--c-ink-soft); }
.empty-state h1, .empty-state h2 { margin-bottom: var(--sp-3); }
.empty-state--inline { padding: var(--sp-5) 0; text-align: left; }

/* ===== Directory ===== */
.directory { padding: var(--sp-8) 0 var(--sp-9); }
.directory__header { margin-bottom: var(--sp-7); }
.directory__kicker {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 var(--sp-3);
}
.directory__title { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); }
.directory__lede { color: var(--c-ink-soft); font-size: var(--fs-lg); margin: 0; max-width: 60ch; }

.directory__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0;
	border-top: 1px solid var(--c-line);
}
.directory-card {
	border-bottom: 1px solid var(--c-line);
	border-right: 1px solid var(--c-line);
}
.directory-card__link {
	display: block; padding: var(--sp-5); color: var(--c-ink); text-decoration: none;
	height: 100%; transition: background 0.15s var(--ease);
}
.directory-card__link:hover { background: var(--c-bg-elev); color: var(--c-ink); }
.directory-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.directory-card__title { font-size: var(--fs-lg); margin: 0; font-weight: 500; }
.directory-card__addr { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.directory-card__tags {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.directory-card__tags li {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
	padding: var(--sp-1) var(--sp-3); background: var(--c-bg-deep); border-radius: var(--r-pill); color: var(--c-ink-soft);
}

/* ===== Toilet detail ===== */
.toilet-detail { padding: var(--sp-7) 0 var(--sp-9); }
.back-link {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	color: var(--c-ink-soft); font-size: var(--fs-sm); text-decoration: none;
	margin-bottom: var(--sp-6);
}
.back-link:hover { color: var(--c-ink); }
.toilet-detail__header { margin-bottom: var(--sp-7); }
.toilet-detail__kicker {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 var(--sp-3);
}
.toilet-detail__title { font-size: var(--fs-3xl); margin: 0 0 var(--sp-3); max-width: 22ch; }
.toilet-detail__address { font-size: var(--fs-lg); color: var(--c-ink-soft); margin: 0 0 var(--sp-5); }

.tag-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-row__item {
	font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
	padding: var(--sp-2) var(--sp-3); background: var(--c-bg-elev); border: 1px solid var(--c-line);
	border-radius: var(--r-pill); color: var(--c-ink-soft);
}

.toilet-detail__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-7); }
@media (max-width: 800px) { .toilet-detail__grid { grid-template-columns: 1fr; } }

.toilet-detail__body h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3); }
.toilet-detail__body p { color: var(--c-ink-soft); }

.map-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4); }
.map-card img { display: block; width: 100%; }

.meta-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.meta-list__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line-soft); }
.meta-list__row dt { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-muted); margin: 0; }
.meta-list__row dd { margin: 0; font-size: var(--fs-sm); }
.meta-list code { font-family: var(--ff-mono); font-size: var(--fs-xs); }

/* ===== Site footer ===== */
.site-footer { background: var(--c-ink); color: var(--c-bg-deep); padding: var(--sp-7) 0 var(--sp-5); margin-top: var(--sp-9); }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__brand .site-brand__name { color: var(--c-bg); font-size: var(--fs-lg); }
.site-footer__tagline { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; max-width: 36ch; }
.site-footer__list { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.site-footer__list a { color: var(--c-bg-deep); font-size: var(--fs-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--c-bg); }
.site-footer__copy { color: var(--c-ink-muted); font-size: var(--fs-xs); margin: 0; }

/* ===== Prose ===== */
.prose p { color: var(--c-ink-soft); }
.prose a { color: var(--c-primary); }
.prose code { font-family: var(--ff-mono); font-size: 0.875em; background: var(--c-bg-deep); padding: 0.1em 0.3em; border-radius: var(--r-sm); }

/* ===== Animations on load (subtle, staggered) ===== */
.hero__eyebrow, .hero__title, .hero__lede, .hero__actions, .hero__stats {
	opacity: 0; transform: translateY(8px);
	animation: rise 0.7s var(--ease) forwards;
}
.hero__title { animation-delay: 0.05s; }
.hero__lede { animation-delay: 0.15s; }
.hero__actions { animation-delay: 0.25s; }
.hero__stats { animation-delay: 0.35s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* OSM attribution footer line, rendered only when the importer plugin is active. */
.site-footer__attribution,
.site-footer__attribution .wcfinder-osm-attribution {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(245, 241, 232, 0.55); /* on dark footer */
  letter-spacing: 0.01em;
}
.site-footer__attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__attribution a:hover {
  color: var(--c-bg);
}
