/* The eclipse lander. Standalone: this page does not load app.css or site.css,
   because it is shared into places that have never heard of us and it should
   arrive as the event, not as our website with an event on it.
   Tokens are the site's dark palette pulled tighter, plus one borrowed accent:
   corona white-gold, used for the thing itself and nothing else. */

:root {
	--bg:          #06060a;
	--bg-deep:     #030305;
	--surface:     #0e0e14;
	--surface-2:   #15151d;
	--text:        #f3f3f6;
	--text-muted:  #9d9da8;
	--text-faint:  #6a6a75;
	--accent:      #5b8cff;
	--accent-strong:#83a4ff;
	--corona:      #ffd9a0;
	--corona-hot:  #fff4e2;
	--border:      #1c1c24;
	--border-strong:#2b2b35;
	--ok:          #4ade80;
	--warn:        #fbbf24;
	--solid-bg:    #fafafa;
	--solid-fg:    #06060a;
	--radius-sm:   5px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--wrap:        1200px;
	--font-display:"Fraunces", Georgia, serif;
	--font-body:   "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font-family: var(--font-body); font-size: 16px; line-height: 1.6;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.02em; }
a { color: var(--accent-strong); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Stripped top bar ─────────────────────────────────────────────────────── */
.ec-top {
	position: fixed; inset: 0 0 auto 0; z-index: 60; height: 62px;
	display: flex; align-items: center;
	background: linear-gradient(180deg, rgba(6,6,10,.92), rgba(6,6,10,0));
	backdrop-filter: blur(6px);
}
.ec-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ec-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.ec-brand img { height: 26px; width: auto; display: block; }
.ec-brand span { font-family: var(--font-display); font-size: 15px; letter-spacing: -.01em; opacity: .92; }
.ec-top__right { display: flex; align-items: center; gap: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
	appearance: none; border: 1px solid transparent; cursor: pointer;
	font: inherit; font-weight: 600; font-size: 14px;
	padding: 10px 16px; border-radius: var(--radius-md);
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,.32); }
.btn--solid { background: var(--solid-bg); color: var(--solid-fg); }
.btn--solid:hover { background: #e7e7ea; }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: #3a3a46; }
.btn--sm { padding: 7px 12px; font-size: 13px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ec-hero {
	position: relative; min-height: 100svh; display: flex; align-items: center;
	padding: 96px 0 64px; overflow: hidden;
	background: radial-gradient(120% 90% at 50% 42%, #0d0d18 0%, #06060a 62%, #030305 100%);
}
/* Width and height, not just inset: a canvas is a replaced element, so `inset:0`
   with `height:auto` resolves to its intrinsic 300x150 rather than stretching,
   and the starfield was painting into a strip at the top of the hero. */
.ec-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ec-hero .wrap { position: relative; z-index: 2; }
.ec-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .ec-hero__grid { grid-template-columns: 1fr; gap: 36px; } }

.ec-kicker {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
	font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--corona); padding: 5px 11px; border-radius: 999px;
	border: 1px solid rgba(255,217,160,.22); background: rgba(255,217,160,.06);
}
.ec-hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); margin-bottom: 18px; }
.ec-hero h1 em { font-style: normal; color: var(--corona); }
.ec-lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text-muted); max-width: 56ch; margin: 0 0 28px; }
.ec-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Countdown */
.ec-count { display: flex; gap: 10px; margin: 0 0 30px; flex-wrap: wrap; }
.ec-count__unit {
	min-width: 78px; padding: 12px 14px; text-align: center;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ec-count__n { display: block; font-size: 28px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.ec-count__l { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.ec-count--live .ec-count__n { color: var(--corona); }
.ec-live-note { color: var(--corona); font-weight: 600; }

/* The black sun. Pure CSS: a hard black disc over a corona built from stacked
   radial gradients and a slow conic sweep for the streamers. No photograph,
   which also means no licence and nothing to download. */
.ec-sun { position: relative; aspect-ratio: 1; width: min(460px, 78vw); margin: 0 auto; }
.ec-sun__glow, .ec-sun__rays, .ec-sun__ring, .ec-sun__disc { position: absolute; inset: 0; border-radius: 50%; }
/* The outer corona. Concentric radial stops only: the first version used a
   conic-gradient for the streamers and it rendered as a boxy pinwheel, because a
   conic fills its whole box and the blur applied after the mask dragged the
   corners back into view. Radial gradients cannot do that. */
.ec-sun__glow {
	background:
		radial-gradient(circle at 50% 50%,
			rgba(255,246,232,.34) 0%,
			rgba(255,232,196,.26) 21%,
			rgba(255,214,160,.15) 30%,
			rgba(255,196,128,.07) 42%,
			rgba(255,176,100,.028) 54%,
			rgba(255,160,90,0) 68%);
	filter: blur(3px); animation: ec-breathe 8s ease-in-out infinite;
}
/* Streamers, kept faint and clipped to a ring so they read as structure in the
   corona rather than as spokes on a wheel. */
.ec-sun__rays {
	background:
		radial-gradient(ellipse 62% 15% at 50% 50%, rgba(255,242,220,.14), rgba(255,242,220,0) 70%),
		radial-gradient(ellipse 15% 58% at 50% 50%, rgba(255,242,220,.10), rgba(255,242,220,0) 70%),
		radial-gradient(ellipse 52% 13% at 50% 50%, rgba(255,242,220,.09), rgba(255,242,220,0) 70%);
	-webkit-mask-image: radial-gradient(circle, transparent 34%, #000 44%, rgba(0,0,0,.5) 62%, transparent 76%);
	        mask-image: radial-gradient(circle, transparent 34%, #000 44%, rgba(0,0,0,.5) 62%, transparent 76%);
	filter: blur(7px); animation: ec-spin 210s linear infinite;
}
/* The bright inner corona, tight to the limb. This is what sells it: in a real
   eclipse the ring at the edge is far brighter than anything further out. */
.ec-sun__ring {
	inset: 30.5%;
	background: radial-gradient(circle,
		rgba(255,250,242,1) 0%, rgba(255,248,238,.98) 52%,
		rgba(255,236,208,.72) 68%, rgba(255,214,168,.28) 82%, rgba(255,200,140,0) 100%);
	filter: blur(3px);
	animation: ec-breathe 8s ease-in-out infinite reverse;
}
.ec-sun__disc {
	inset: 33%; background: #000; box-shadow: 0 0 0 1px rgba(0,0,0,.95);
}
.ec-sun__bead { display: none; }
@keyframes ec-spin   { to { transform: rotate(360deg); } }
@keyframes ec-breathe{ 0%,100% { opacity: .88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.ec-sec { padding: 88px 0; border-top: 1px solid var(--border); }
.ec-sec--flush { padding-bottom: 0; }
.ec-sec__head { max-width: 62ch; margin-bottom: 34px; }
.ec-sec__head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 12px; }
.ec-sec__head p { color: var(--text-muted); margin: 0; }
.ec-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 12px; }

/* Stat row */
.ec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ec-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.ec-stat__n { font-size: 30px; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ec-stat__n small { font-size: 15px; font-weight: 500; color: var(--text-faint); }
.ec-stat__l { margin-top: 8px; color: var(--text-muted); font-size: 13.5px; }

/* City lookup */
.ec-find { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .ec-find { grid-template-columns: 1fr; } }
.ec-field { position: relative; }
.ec-field input {
	width: 100%; font: inherit; font-size: 15px; color: var(--text);
	background: #101017; border: 1px solid #2c2c35; border-radius: var(--radius-md);
	padding: 12px 14px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ec-field input::placeholder { color: var(--text-faint); }
.ec-field input:hover { border-color: #3a3a46; }
.ec-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.28); }
.ec-findbar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ec-select {
	font: inherit; font-size: 13px; color: var(--text);
	background: #101017; border: 1px solid #2c2c35; border-radius: var(--radius-md);
	padding: 7px 10px; flex: 1 1 140px; min-width: 0;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ec-select:hover { border-color: #3a3a46; }
.ec-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.28); }
.ec-findnote { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); min-height: 18px; }
.ec-results { margin-top: 10px; max-height: 340px; overflow: auto; border-radius: var(--radius-md); overscroll-behavior: contain; }
.ec-results__group {
	position: sticky; top: 0; z-index: 1; padding: 7px 12px;
	background: var(--surface-2); border-bottom: 1px solid var(--border);
	font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.ec-results button {
	display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: baseline;
	background: transparent; border: 0; border-bottom: 1px solid var(--border);
	color: var(--text); font: inherit; text-align: left; padding: 11px 12px; cursor: pointer;
	transition: background 140ms ease;
}
.ec-results button:hover { background: var(--surface-2); }
.ec-results b { font-weight: 600; }
.ec-results i { font-style: normal; color: var(--text-faint); font-size: 13px; }
.ec-results em { font-style: normal; color: var(--corona); font-variant-numeric: tabular-nums; font-weight: 600; }

.ec-readout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; min-height: 220px; }
.ec-readout__place { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; }
.ec-readout__sub { color: var(--text-faint); font-size: 13px; margin: 0 0 20px; }
.ec-readout__big { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.ec-readout__pct { font-size: 54px; font-weight: 650; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--corona); }
.ec-readout__tag { font-size: 13px; color: var(--text-muted); }
.ec-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ec-badge--total { background: rgba(255,217,160,.14); color: var(--corona); border: 1px solid rgba(255,217,160,.3); }
.ec-badge--partial { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); }
.ec-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.ec-times div { background: #0b0b11; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.ec-times dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.ec-times dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.ec-mapwrap { position: relative; height: min(78vh, 760px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Specificity, deliberately. MapLibre attaches `.maplibregl-map` to this element
   and its stylesheet loads after ours, so a bare `.ec-map` loses the cascade to
   `.maplibregl-map{position:relative}`. The container then had no positioning
   and no height, MapLibre read clientHeight 0, fell back to its 400x300 default
   canvas, and the map rendered as an empty box. Explicit dimensions rather than
   inset alone, so it cannot collapse again. */
.ec-mapwrap .ec-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-map canvas { outline: none; }
.ec-mapctl {
	position: absolute; top: 16px; left: 16px; z-index: 5; width: 232px;
	background: rgba(10,10,16,.9); backdrop-filter: blur(10px);
	border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 14px;
}
.ec-mapctl h3 { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; font-weight: 600; }

/* The layers button. Hidden on a desktop, where the panel simply stays open. */
.ec-mapctl__toggle {
	display: none; align-items: center; gap: 8px; width: 100%;
	font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
	background: transparent; border: 0; padding: 0; cursor: pointer;
}
.ec-mapctl__toggle svg { flex: 0 0 auto; }
.ec-mapctl__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,.32); border-radius: var(--radius-sm); }
.ec-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; cursor: pointer; }
.ec-toggle input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: #24242e; border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background 140ms ease; flex: 0 0 auto; }
.ec-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #7b7b88; transition: transform 140ms ease, background 140ms ease; }
.ec-toggle input:checked { background: rgba(91,140,255,.28); border-color: var(--accent); }
.ec-toggle input:checked::after { transform: translateX(14px); background: var(--accent-strong); }
.ec-toggle input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,.32); }
.ec-legend { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }
.ec-legend span { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.ec-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

.ec-maphint { position: absolute; right: 16px; bottom: 42px; z-index: 5; max-width: 264px; font-size: 12px; color: var(--text-muted); background: rgba(10,10,16,.92); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; backdrop-filter: blur(10px); transition: border-color 140ms ease; }
.ec-maphint b { color: var(--text); font-weight: 600; }
.ec-maphint__armed { display: none; }
.ec-maphint--armed { border-color: var(--corona); }
.ec-maphint--armed .ec-maphint__idle { display: none; }
.ec-maphint--armed .ec-maphint__armed { display: inline; color: var(--corona); }

/* MapLibre popups, restyled to the page. Scoped under .ec-mapwrap for the same
   cascade reason as .ec-map above: maplibre-gl.css loads after this file, so a
   bare `.maplibregl-popup-content` loses to its own white background and the
   popup rendered as light-on-light. */
.ec-mapwrap .maplibregl-popup-content { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 0; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.6); font-family: var(--font-body); }
.ec-mapwrap .maplibregl-popup-close-button { color: var(--text-faint); font-size: 18px; padding: 2px 8px; background: transparent; z-index: 2; }
.ec-mapwrap .maplibregl-popup-close-button:hover { background: transparent; color: var(--text); }
.ec-mapwrap .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--border-strong); }
.ec-mapwrap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--border-strong); }
.ec-mapwrap .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--border-strong); }
.ec-mapwrap .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--border-strong); }

.ec-pop { width: 268px; }
.ec-pop__hd { padding: 13px 14px 11px; border-bottom: 1px solid var(--border); }
.ec-pop__hd h4 { margin: 0 0 3px; font-family: var(--font-display); font-size: 16px; }
.ec-pop__hd p { margin: 0; font-size: 12px; color: var(--text-faint); }
.ec-pop__stats { display: flex; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ec-pop__stat b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ec-pop__stat span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
/* Capped so the whole popup clears the map's bottom edge rather than
   being clipped by it; the list scrolls inside. */
.ec-pop__body { padding: 12px 14px; max-height: 186px; overflow: auto; overscroll-behavior: contain; }
.ec-pop__body h5 { margin: 0 0 9px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.ec-stay { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.ec-stay:last-child { border-bottom: 0; }
.ec-stay img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; background: var(--surface-2); }
.ec-stay__m { min-width: 0; flex: 1; }
.ec-stay__n { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ec-stay__d { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.ec-stay__p { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px; white-space: nowrap; }
.ec-pop__stay { border-top: 1px solid var(--border); }
.ec-staybtn {
  display: block; width: 100%; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--surface-2); border: 0; border-radius: 0;
  padding: 11px 14px; cursor: pointer; text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.ec-staybtn:hover { background: #1d1d26; color: var(--corona); }
.ec-pop__note { font-size: 11px; color: var(--text-faint); padding: 9px 14px; border-top: 1px solid var(--border); }
.ec-spin { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: ec-spin 700ms linear infinite; margin: 14px auto; }

/* Lodging price pin */
.ec-pricepin {
	background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
	border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 650;
	font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
	box-shadow: 0 3px 10px rgba(0,0,0,.5); transition: background 140ms ease, border-color 140ms ease;
}
.ec-pricepin:hover { background: var(--surface-2); border-color: var(--corona); }
.ec-anchorpin { cursor: pointer; }

/* ── Anchor cards ─────────────────────────────────────────────────────────── */
.ec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.ec-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-align: left; cursor: pointer; font: inherit; color: var(--text); transition: border-color 140ms ease, background 140ms ease; }
.ec-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ec-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,140,255,.32); }
.ec-card h3 { font-size: 1.15rem; margin-bottom: 3px; }
.ec-card__sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; }
.ec-card__row { display: flex; gap: 16px; }
.ec-card__row b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ec-card__row span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* ── Share ────────────────────────────────────────────────────────────────── */
.ec-card__near { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }

.ec-share { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-share a, .ec-share button {
	display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
	border-radius: var(--radius-md); border: 1px solid var(--border-strong);
	background: var(--surface); color: var(--text); text-decoration: none;
	font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}
.ec-share a:hover, .ec-share button:hover { background: var(--surface-2); border-color: #3a3a46; }
.ec-share svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
/* ── Map stacking ─────────────────────────────────────────────────────────
   A popup is the thing the reader asked for; the controls are furniture. On a
   phone the layers panel and the zoom buttons were covering the hotel list,
   which is the one part of the page that has to be readable. Popups sit above
   everything on the map, at every screen size. */
.ec-mapwrap .maplibregl-popup { z-index: 30; }
.ec-mapctl { z-index: 6; }
.ec-mapwrap .maplibregl-ctrl-top-right,
.ec-mapwrap .maplibregl-ctrl-bottom-right,
.ec-mapwrap .maplibregl-ctrl-bottom-left { z-index: 6; }
.ec-maphint { z-index: 5; }

@media (max-width: 760px) {
	.ec-mapwrap { height: min(82vh, 620px); }

	/* Collapsed to a button until asked for, and pushed clear of the fixed top
	   bar: scrolling the map to the top of the viewport otherwise parks the
	   layers button directly underneath the logo. */
	.ec-mapctl { width: auto; max-width: calc(100vw - 32px); padding: 10px 12px; top: 76px; }
	.ec-mapctl__toggle { display: flex; }
	.ec-mapctl__body { display: none; }
	.ec-mapctl.is-open .ec-mapctl__body { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
	.ec-mapctl.is-open { width: 232px; }
	.ec-mapctl h3 { display: none; }

	/* A 268px popup on a 360px screen wastes a third of the width, and the
	   hotel list is the reason someone opened it. */
	.ec-mapwrap .maplibregl-popup { max-width: calc(100vw - 24px) !important; }
	.ec-pop { width: min(320px, calc(100vw - 40px)); }
	.ec-pop__body { max-height: 46vh; }

	/* The hint is desktop advice about a mouse wheel. */
	.ec-maphint { display: none; }
}

.ec-foot { border-top: 1px solid var(--border); padding: 40px 0 56px; color: var(--text-faint); font-size: 13px; }
.ec-foot__row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.ec-foot a { color: var(--text-muted); text-decoration: none; }
.ec-foot a:hover { color: var(--text); text-decoration: underline; }
.ec-linkbtn {
	background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
	color: var(--text-muted); cursor: pointer; text-decoration: none;
}
.ec-linkbtn:hover { color: var(--text); text-decoration: underline; }
.ec-disclose { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); max-width: 78ch; line-height: 1.6; }
.ec-disclose strong { color: var(--text-muted); }

/* ── The short version ──────────────────────────────────────────────────────
   Definition list rather than prose: these are the six things a reader arrives
   wanting, and a paragraph would bury them. */
.ec-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0; }
.ec-facts > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.ec-facts dt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.ec-facts dd { margin: 7px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ── The next one ───────────────────────────────────────────────────────────
   The only offer on this page a late arrival can act on, so it gets real
   weight rather than a footer link. */
.ec-next { border-top: 1px solid var(--border); }
.ec-next__grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6, 40px); align-items: center; }
@media (max-width: 860px) { .ec-next__grid { grid-template-columns: 1fr; gap: 28px; } .ec-next__art { margin: 0 auto; } }
.ec-next__art { position: relative; width: 190px; aspect-ratio: 1; }
.ec-next__corona, .ec-next__disc { position: absolute; inset: 0; border-radius: 50%; }
.ec-next__corona {
	background: radial-gradient(circle,
		rgba(255,250,242,.95) 30%, rgba(255,236,208,.68) 36%,
		rgba(255,214,168,.24) 47%, rgba(255,196,128,.07) 62%, rgba(255,180,110,0) 76%);
	filter: blur(2px);
}
.ec-next__disc { inset: 31%; background: #000; }
.ec-next h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 10px 0 14px; }

/* Email capture */
.ec-notify { margin-top: 22px; max-width: 520px; }
.ec-notify__label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ec-notify__row { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-notify input {
	flex: 1 1 240px; min-width: 0; font: inherit; font-size: 15px; color: var(--text);
	background: #101017; border: 1px solid #2c2c35; border-radius: var(--radius-md);
	padding: 11px 14px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ec-notify input::placeholder { color: var(--text-faint); }
.ec-notify input:hover { border-color: #3a3a46; }
.ec-notify input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.28); }
.ec-notify__note { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }
.ec-notify__note--ok { color: var(--ok); }
.ec-notify__note--bad { color: var(--warn); }
.ec-notify.is-done .ec-notify__row { display: none; }