/* LoudMemories — the archive. Page-only rules; the design system and chrome
   live in core/css/lm-base.css. Token ladder from the design export
   (LoudMemoriesClaudeDesign/archive.css). */

:root {
	/* The archive runs wider than the record pages — the index needs a facet
	   column beside the results from 1024px up. */
	--lm-max: 1200px;

	--h1: 2.375rem;
	--index-cols: 1fr;
	--index-gap: 1.5rem;
	--row-dir: column;
	--row-align: flex-start;
	--stub-w: auto;
	--map-h: 13rem;
}
@media (min-width: 480px) {
	:root {
		--h1: 3rem;
		--row-dir: row;
		--row-align: center;
		--stub-w: 4.25rem;
		--map-h: 15rem;
	}
}
@media (min-width: 768px) {
	:root { --h1: 4rem; --index-gap: 2rem; --map-h: 20rem; }
}
@media (min-width: 1024px) {
	:root { --h1: 5rem; --index-cols: 14rem 1fr; --index-gap: 2.5rem; --map-h: 25rem; }
}
@media (min-width: 1280px) {
	:root { --h1: 5.75rem; --index-cols: 15.5rem 1fr; --map-h: 28rem; }
}

/* ------------------------------------------------------------ the hero */

.ar-title {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: var(--h1);
	font-weight: 700;
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.ar-lead {
	margin: 16px 0 0;
	max-width: 34rem;
	font-size: clamp(0.9375rem, 3.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--lm-muted);
	text-wrap: pretty;
}

.ar-search {
	margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 44rem;
}
.ar-search-field {
	flex: 1 1 15rem;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 3.25rem;
	padding: 0 16px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	background: var(--lm-panel);
	--lm-field-fill: var(--lm-panel);
}
.ar-search-field:focus-within { border-color: var(--lm-green-lt); }
.ar-search-field > span { flex: 0 0 auto; color: var(--lm-green-lt); font-size: 1rem; }
.ar-search-field input {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--lm-ink);
	font-family: var(--lm-mono);
	font-size: 0.875rem;
}
.ar-search .lm-btn { flex: 0 0 auto; min-height: 3.25rem; padding: 0 clamp(1.25rem, 4vw, 1.75rem); }

/* The year beside the search box, and the city among the chips. Both are
   plain selects — eighty years and several hundred cities are a list to pick
   from, and the browser's own picker is better at that on a phone than
   anything built out of buttons. */
.ar-search-year,
.ar-picker {
	appearance: none;
	-webkit-appearance: none;
	background: var(--lm-panel) linear-gradient(45deg, transparent 49%, var(--lm-muted) 50%) no-repeat right 1.05rem top 1.45rem / 6px 6px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	color: var(--lm-ink);
	font-family: var(--lm-mono);
	font-size: 0.875rem;
	padding: 0 2.25rem 0 14px;
	min-width: 0;
}
.ar-search-year:focus,
.ar-picker:focus { outline: none; border-color: var(--lm-green-lt); }
.ar-search-year option,
.ar-picker option { background: var(--lm-panel); color: var(--lm-ink); }

.ar-search-year { flex: 0 0 auto; height: 3.25rem; }

.ar-picker {
	width: 100%;
	height: 2.5rem;
	background-position: right 1.05rem top 1.05rem;
}

.ar-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 5vw, 3rem);
	margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
}
.ar-stats > div { min-width: 0; }
.ar-stats dt {
	margin: 0 0 5px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.ar-stats dd {
	margin: 0;
	font-family: var(--lm-mono);
	font-size: clamp(1.125rem, 4vw, 1.5rem);
	font-weight: 700;
	color: var(--lm-ink);
}

/* -------------------------------------------------------- 01 the index */

.ar-index {
	display: grid;
	grid-template-columns: var(--index-cols);
	gap: var(--index-gap);
	align-items: start;
}

.ar-facets { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ar-facet-group { margin: 0; padding: 0; border: none; min-width: 0; }
.ar-facet-group legend {
	padding: 0;
	margin: 0 0 10px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.ar-facet-group legend em { font-style: normal; opacity: .7; }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ar-facet {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: 20px;
	cursor: pointer;
	transition: border-color .16s, color .16s;
	background: transparent;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
}
.ar-facet:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.ar-facet span { color: var(--lm-muted); font-size: 0.625rem; }
.ar-facet[aria-pressed="true"] {
	background: rgba(var(--lm-green-dk-rgb), .5);
	border-color: var(--lm-green-lt);
	color: var(--lm-on-green);
}
.ar-facet[aria-pressed="true"] span { color: var(--lm-on-green); }

.ar-results { min-width: 0; }
.ar-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--lm-line-strong);
}
.ar-summary { margin: 0; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }
.ar-count { color: var(--lm-green-lt); font-weight: 700; }

.ar-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-sorts > span {
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-muted);
	margin-right: 2px;
}
.ar-sort {
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: 20px;
	cursor: pointer;
	transition: border-color .16s, color .16s;
	background: transparent;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
}
.ar-sort:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.ar-sort[aria-pressed="true"] {
	background: rgba(var(--lm-green-dk-rgb), .5);
	border-color: var(--lm-green-lt);
	color: var(--lm-on-green);
}

.ar-clear-wrap { padding: 12px 0 0; }
.ar-clear {
	font-family: var(--lm-sans);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 8px 14px;
	min-height: 2.25rem;
	border-radius: 2px;
	border: 1px dashed rgba(var(--lm-red-mid-rgb), .6);
	background: transparent;
	color: var(--lm-red);
	cursor: pointer;
}
.ar-clear:hover { border-color: var(--lm-red); color: var(--lm-ink); }

.ar-rows { margin: 0; padding: 0; list-style: none; }
.ar-rows > li { border-bottom: 1px solid var(--lm-line); }
.ar-rows.is-loading { opacity: .45; }

.ar-row {
	color: inherit;
	display: flex;
	flex-direction: var(--row-dir);
	align-items: var(--row-align);
	gap: clamp(0.75rem, 2.5vw, 1.25rem);
	padding: 16px 12px;
	margin: 0 -12px;
	border-radius: 3px;
	transition: background .16s;
}
.ar-row:hover { background: rgba(var(--lm-panel-rgb), .85); color: inherit; }

.ar-row-date {
	flex: 0 0 var(--stub-w);
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
	font-family: var(--lm-mono);
	border-left: 2px solid rgba(var(--lm-green-lt-rgb), .45);
	padding-left: 10px;
}
.ar-dd { font-size: 1.125rem; font-weight: 700; color: var(--lm-ink); line-height: 1; }
.ar-mon { font-size: 0.625rem; letter-spacing: .1em; color: var(--lm-green-lt); text-transform: uppercase; }
.ar-yy { font-size: 0.75rem; color: var(--lm-muted); }

.ar-row-main { flex: 1 1 auto; min-width: 0; }
.ar-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ar-row-artist { font-family: var(--lm-sans); font-size: 1.0625rem; color: var(--lm-ink); letter-spacing: .01em; }
.ar-mine {
	font-family: var(--lm-mono);
	font-size: 0.5625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
	border: 1px solid rgba(var(--lm-green-lt-rgb), .5);
	border-radius: 2px;
	padding: 2px 6px;
}
.ar-row-place { display: block; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); margin-top: 4px; }

.ar-row-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--lm-mono); font-size: 0.625rem; }
.ar-chip { padding: 4px 8px; border-radius: 2px; border: 1px solid rgba(var(--lm-ink-rgb), .16); color: var(--lm-muted); }
.ar-chip.is-rated { color: var(--lm-on-green); border-color: rgba(var(--lm-green-lt-rgb), .4); }
.ar-chip.is-written { color: var(--lm-on-gold); border-color: rgba(var(--lm-gold-rgb), .4); }
.ar-chip.is-shot { color: var(--lm-ink); border-color: var(--lm-line-strong); }

.ar-empty {
	padding: 44px 24px;
	text-align: center;
	border: 1px dashed var(--lm-line-strong);
	border-radius: 3px;
	margin-top: 18px;
}
.ar-empty p { margin: 0 0 18px; font-size: 0.875rem; color: var(--lm-muted); line-height: 1.6; }
.ar-empty .ar-empty-head {
	margin: 0 0 6px;
	font-family: var(--lm-sans);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lm-ink);
}
.ar-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.ar-more { padding: 20px 0 0; display: flex; justify-content: center; }

/* ------------------------------------------------------ 02 on this day */

.ar-otd { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ar-otd-row {
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(0.625rem, 3vw, 1.25rem);
	padding: 14px 12px;
	margin: 0 -12px;
	border-radius: 3px;
	border-bottom: 1px solid var(--lm-line);
	transition: background .16s;
}
.ar-otd-row:hover { background: rgba(var(--lm-panel-rgb), .85); color: inherit; }
.ar-otd-year { flex: 0 0 3.25rem; font-family: var(--lm-mono); font-size: 1rem; font-weight: 700; color: var(--lm-gold); }
.ar-otd-artist { flex: 1 1 10rem; min-width: 0; font-family: var(--lm-sans); font-size: 1rem; color: var(--lm-ink); }
.ar-otd-place { flex: 1 1 12rem; min-width: 0; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }
.ar-otd-ago { flex: 0 0 auto; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }

/* --------------------------------------------------------- 03 decades */

.ar-decades { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ar-decade {
	width: 100%;
	display: flex;
	align-items: center;
	gap: clamp(0.625rem, 2.5vw, 1.125rem);
	padding: 10px 12px;
	margin: 0 -12px;
	border: none;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	text-align: left;
	min-height: 2.75rem;
	transition: background .16s;
}
.ar-decade:hover { background: rgba(var(--lm-panel-rgb), .85); }
.ar-decade-label { flex: 0 0 3.5rem; font-family: var(--lm-mono); font-size: 0.8125rem; letter-spacing: .04em; color: var(--lm-muted); }
.ar-decade[aria-pressed="true"] .ar-decade-label { color: var(--lm-on-green); }
.ar-decade-track {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.375rem;
	background: rgba(var(--lm-ink-rgb), .07);
	border-radius: 2px;
	overflow: hidden;
	display: block;
}
.ar-decade-bar { display: block; height: 100%; background: rgba(var(--lm-green-lt-rgb), .55); }
.ar-decade[aria-pressed="true"] .ar-decade-bar { background: var(--lm-green); }
.ar-decade-count { flex: 0 0 4.5rem; text-align: right; font-family: var(--lm-mono); font-size: 0.8125rem; font-weight: 700; color: var(--lm-ink); }

/* ----------------------------------------------------------- 04 world */

.ar-map-wrap { background: var(--lm-panel); border: 1px solid var(--lm-line); border-radius: 3px; overflow: hidden; }
.ar-map { width: 100%; height: var(--map-h); background: var(--lm-bg); }
.ar-map-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px clamp(0.875rem, 3vw, 1.375rem);
	border-top: 1px solid var(--lm-line);
}
.ar-map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ar-map-legend li { display: flex; align-items: center; gap: 7px; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }
.ar-map-legend b { color: var(--lm-ink); }
.ar-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; background: var(--lm-green); }
.ar-map-count { font-family: var(--lm-mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lm-muted); }

.ar-country-marker { border-radius: 50%; background: rgba(var(--lm-green-rgb), .35); border: 1px solid var(--lm-green-lt); }
.leaflet-popup-content { margin: 12px; line-height: 1.5; font-family: var(--lm-mono); font-size: 0.75rem; }
.leaflet-popup-content h3 { font-family: var(--lm-sans); font-size: 0.9375rem; margin: 0 0 6px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--lm-panel-2); color: var(--lm-ink); }
.leaflet-container a.leaflet-popup-close-button { color: var(--lm-muted); }

/* ---------------------------------------------------------- 05 venues */

.ar-venues {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 14px;
}
.ar-venues a {
	color: inherit;
	display: flex;
	gap: 14px;
	height: 100%;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: 16px 18px;
	transition: border-color .16s;
}
.ar-venues a:hover { border-color: rgba(var(--lm-green-lt-rgb), .6); color: inherit; }
.ar-venue-rank { flex: 0 0 1.75rem; font-family: var(--lm-mono); font-size: 1.125rem; font-weight: 700; color: var(--lm-muted); }
.ar-venue-body { min-width: 0; display: block; }
.ar-venue-name { display: block; font-family: var(--lm-sans); font-size: 0.9375rem; color: var(--lm-ink); line-height: 1.25; }
.ar-venue-place { display: block; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); margin-top: 4px; }
.ar-venue-meta { display: block; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-green-lt); margin-top: 8px; }

/* ------------------------------------------------------------ 06 gaps */

.ar-gaps {
	background: rgba(var(--lm-gold-dk-rgb), .28);
	border: 1px dashed rgba(var(--lm-gold-rgb), .5);
	border-radius: 3px;
	padding: clamp(1.125rem, 4vw, 1.75rem);
}
.ar-gaps-lead {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--lm-ink);
	font-style: italic;
	max-width: 38rem;
	text-wrap: pretty;
}
.ar-gaps ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ar-gaps li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(var(--lm-gold-rgb), .28);
}
.ar-gap-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ar-gap-artist { font-family: var(--lm-sans); font-size: 1rem; color: var(--lm-ink); }
.ar-gap-meta { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }
.ar-gap-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ar-gap-missing {
	font-family: var(--lm-mono);
	font-size: 0.5938rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-gold);
	border: 1px solid rgba(var(--lm-gold-rgb), .4);
	border-radius: 2px;
	padding: 3px 7px;
}
.ar-gap-fill {
	font-family: var(--lm-sans);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 9px 14px;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	border-radius: 2px;
	border: 1px solid rgba(var(--lm-ink-rgb), .3);
	background: transparent;
	color: var(--lm-ink);
}
.ar-gap-fill:hover { border-color: var(--lm-gold); color: var(--lm-gold); }

/* ------------------------------------------------- 03 what people wrote --
   A member never sees the front page — root redirects them to their journal —
   and the front page held the only link in the body of the site to the
   reviews. So the way in lives here now: four of the newest, then the button.
   The cards are quiet on purpose; the writing is the thing worth looking at,
   not the frame around it. */
.ar-reviews {
	margin: 0 0 clamp(1.25rem, 4vw, 1.75rem);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}
@media (min-width: 768px) { .ar-reviews { grid-template-columns: 1fr 1fr; gap: 12px; } }

.ar-review {
	height: 100%;
	padding: clamp(1rem, 3vw, 1.25rem);
	background: var(--lm-panel-2);
	border-left: 3px solid var(--lm-green-dk);
	border-radius: 3px;
	transition: border-color .16s;
}
.ar-review:hover { border-left-color: var(--lm-green-lt); }

.ar-review h3 {
	margin: 0 0 4px;
	font-family: var(--lm-sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
}
.ar-review h3 a { color: var(--lm-ink); }
.ar-review h3 a:hover { color: var(--lm-gold); }

.ar-review-place {
	margin: 0 0 12px;
	font-family: var(--lm-sans);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-muted);
}

.ar-review-words {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--lm-ink);
	text-wrap: pretty;
}

.ar-review-by {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: var(--lm-sans);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.ar-review-by a { color: var(--lm-muted); }
.ar-review-by a:hover { color: var(--lm-ink); }
.ar-review-score { color: var(--lm-on-green); }

.ar-reviews-after {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.ar-reviews-after span {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--lm-muted);
}

/* ------------------------------------------------------------- ticker */

.ix-ticker { background: var(--lm-panel); border-bottom: 1px solid rgba(var(--lm-ink-rgb), .1); }
.ix-ticker-in {
	max-width: var(--lm-max);
	margin: 0 auto;
	padding: 10px var(--lm-gutter);
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	color: var(--lm-muted);
}
.ix-ticker-live {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	color: var(--lm-green-lt);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ix-ticker-live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lm-green);
	animation: lm-pulse 2.4s ease-in-out infinite;
}
/* Every entry sits in the same grid cell, so the bar is one line high whatever
   is showing and nothing below it moves when the line changes. Only the one
   with .is-on is visible — and it is visibility rather than opacity alone, so
   the links in the entries behind it are neither clickable nor in the tab
   order. */
.ix-ticker-feed {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}
.ix-ticker-item {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	/* Visibility is held back until the fade is over, or the entry going out
	   would blink away and leave the bar empty while the next one arrives. */
	transition: opacity .45s ease, visibility 0s linear .45s;
}
.ix-ticker-item.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease, visibility 0s linear 0s;
}
/* The site-wide reduced-motion rule cuts every duration to nothing but leaves
   delays alone, which would hold the outgoing entry visible on top of the one
   replacing it for most of a second. */
@media (prefers-reduced-motion: reduce) {
	.ix-ticker-item { transition-delay: 0s !important; }
}
.ix-ticker p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-ticker p a { color: var(--lm-muted); }
.ix-ticker p a:hover { color: var(--lm-ink); }
.ix-ticker-ago { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }