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

:root {
	/* The home page runs wider than the record pages. */
	--lm-max: 1200px;

	--h1: 2.25rem;
	--card-min: 100%;
	--hero-cols: 1fr;
	--hero-gap: 2.25rem;
	--mem-h: 14rem;
	--mem-cols: minmax(0, 1fr);
	--row-dir: column;
	--row-align: flex-start;
	--year-w: auto;
	--guess-in: 2.25rem;
	--build-cols: 1fr;
}
@media (min-width: 480px) {
	:root {
		--h1: 2.875rem;
		--row-dir: row;
		--row-align: center;
		--year-w: 4.25rem;
		--mem-h: 16rem;
		--guess-in: 2.75rem;
	}
}
@media (min-width: 768px) {
	:root {
		--h1: 3.75rem;
		--card-min: 17rem;
		--mem-h: 13rem;
		--mem-cols: repeat(3, minmax(0, 1fr));
		--build-cols: 1.02fr 0.98fr;
	}
}
@media (min-width: 1024px) {
	:root {
		--h1: 4.5rem;
		--hero-cols: 1.08fr 0.92fr;
		--hero-gap: 3rem;
		--card-min: 18rem;
		--mem-h: 15.5rem;
	}
}
@media (min-width: 1280px) { :root { --h1: 5.25rem; } }

/* ------------------------------------------------------------- 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; }

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

.ix-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--lm-line); }
.ix-hero-bg { position: absolute; inset: 0; opacity: .3; background-size: cover; background-position: center; }
.ix-hero-tint {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(92deg, var(--lm-bg) 12%, rgba(var(--lm-bg-rgb), .72) 52%, rgba(var(--lm-bg-rgb), .45)),
		radial-gradient(115% 95% at 46% 0%, rgba(var(--lm-green-dk-rgb), .5), transparent 62%),
		radial-gradient(80% 90% at 4% 100%, rgba(var(--lm-gold-dk-rgb), .34), transparent 66%);
}
.ix-hero-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		repeating-linear-gradient(45deg, rgba(var(--lm-ink-rgb), .035) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(-45deg, rgba(var(--lm-bg-rgb), .3) 0 1px, transparent 1px 5px);
}
.ix-hero-in {
	position: relative;
	max-width: var(--lm-max);
	margin: 0 auto;
	padding: clamp(2.25rem, 7vw, 4.75rem) var(--lm-gutter) clamp(2.25rem, 6vw, 3.5rem);
	display: grid;
	grid-template-columns: var(--hero-cols);
	gap: var(--hero-gap);
	align-items: center;
}
.ix-hero-copy { min-width: 0; }
.ix-hero-eyebrow {
	margin: 0 0 14px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lm-gold);
}
.ix-hero h1 {
	font-family: var(--lm-sans);
	font-size: var(--h1);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	line-height: .9;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--lm-ink);
}
.ix-hero h1 span { color: var(--lm-green-lt); }
.ix-hero-lead {
	margin: 18px 0 0;
	max-width: 34rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--lm-muted);
	text-wrap: pretty;
}
.ix-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: clamp(1.25rem, 3.5vw, 1.75rem); }
.ix-hero-actions .lm-btn { padding: 14px 24px; font-size: 0.8125rem; }
.ix-hero-fine {
	margin: 14px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .06em;
	line-height: 1.7;
	color: var(--lm-muted);
}

/* The guess widget: a dashed slip pinned under the headline. */
.ix-guess {
	margin: clamp(1.5rem, 4vw, 2rem) 0 0;
	max-width: 34rem;
	border: 1px dashed rgba(var(--lm-gold-rgb), .5);
	border-radius: 3px;
	padding: clamp(1rem, 3vw, 1.375rem);
	background: rgba(var(--lm-bg-rgb), .66);
}
.ix-guess label {
	display: block;
	margin: 0 0 10px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.ix-guess-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.ix-guess-row input {
	width: 5.5ch;
	min-width: 5.5ch;
	font-family: var(--lm-mono);
	font-weight: 700;
	font-size: var(--guess-in);
	line-height: 1.1;
	color: var(--lm-ink);
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--lm-gold);
	padding: 0 0 4px;
	text-align: center;
}
.ix-guess-row span {
	font-family: var(--lm-sans);
	font-size: 0.875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.ix-guess-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ix-guess-chips button {
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .06em;
	padding: 11px 14px;
	min-height: 2.75rem;
	border-radius: 2px;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
	transition: border-color .16s, color .16s, background .16s;
}
.ix-guess-chips button:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }
.ix-guess-chips button[aria-pressed="true"] {
	background: rgba(var(--lm-green-dk-rgb), .5);
	border-color: var(--lm-green-lt);
	color: var(--lm-on-green);
}
.ix-guess-out { margin: 16px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--lm-ink); text-wrap: pretty; }
.ix-guess-out b { font-family: var(--lm-mono); font-size: 0.8125rem; color: var(--lm-green-lt); font-weight: 400; }
.ix-guess-meta { margin: 8px 0 0; font-family: var(--lm-mono); font-size: 0.6875rem; letter-spacing: .06em; color: var(--lm-muted); }

/* Hero art: a polaroid pinned over a paper ticket. */
.ix-hero-art { min-width: 0; display: flex; justify-content: center; }
.ix-hero-art-in { position: relative; width: 100%; max-width: 23rem; padding: clamp(1rem, 4vw, 2rem) 0; }
.ix-polaroid {
	position: absolute;
	right: -4%;
	top: 0;
	width: 47%;
	transform: rotate(6.5deg);
	background: var(--lm-ink);
	padding: 7px 7px 24px;
	box-shadow: 0 14px 30px rgba(var(--lm-shadow-rgb), .55);
}
.ix-polaroid-img { position: relative; aspect-ratio: 1/1; background: var(--lm-panel-2); overflow: hidden; }
.ix-polaroid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-polaroid-cap {
	font-family: var(--lm-mono);
	font-size: 0.5625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-on-paper);
	padding-top: 6px;
}

.ix-paper {
	position: relative;
	background: var(--lm-ink);
	color: var(--lm-bg);
	box-shadow: 0 20px 44px rgba(var(--lm-shadow-rgb), .6);
}
.ix-hero-art .ix-paper { transform: rotate(-1.6deg); margin-top: clamp(2.5rem, 9vw, 3.5rem); }
.ix-paper-top { padding: 16px clamp(1rem, 3.5vw, 1.25rem) 14px; }
.ix-paper-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	font-family: var(--lm-mono);
	font-size: 0.5938rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-on-paper);
}
.ix-paper-artist {
	margin: 14px 0 0;
	font-family: var(--lm-sans);
	font-size: clamp(1.5rem, 6vw, 2rem);
	line-height: .98;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lm-bg);
}
.ix-paper-place { margin: 8px 0 0; font-family: var(--lm-mono); font-size: 0.6875rem; letter-spacing: .04em; color: var(--lm-panel-2); }
.ix-paper-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 14px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .06em;
	color: var(--lm-on-paper);
}
.ix-paper-facts b { color: var(--lm-bg); font-weight: 700; }
.ix-paper-tear { position: relative; border-top: 2px dashed rgba(var(--lm-bg-rgb), .35); }
.ix-paper-tear i {
	position: absolute;
	top: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--lm-bg);
}
.ix-paper-tear i.is-left { left: -9px; }
.ix-paper-tear i.is-right { right: -9px; }
.ix-paper-bottom { padding: 16px clamp(1rem, 3.5vw, 1.25rem); }
.ix-paper-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ix-paper-score b { font-family: var(--lm-sans); font-weight: 700; font-size: 1.25rem; color: var(--lm-green-dk); }
.ix-paper-score span {
	font-family: var(--lm-mono);
	font-size: 0.5938rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-on-paper);
}
.ix-paper-quote { margin: 12px 0 0; font-size: 0.8438rem; line-height: 1.55; font-style: italic; color: var(--lm-panel-2); text-wrap: pretty; }
.ix-paper-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	margin-top: 14px;
	font-family: var(--lm-mono);
	font-size: 0.5938rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-on-paper);
}

/* ------------------------------------------------- 01 on this day ---- */

.ix-onthisday { margin: 0; padding: 0; list-style: none; }
.ix-onthisday > li { border-bottom: 1px dashed rgba(var(--lm-ink-rgb), .18); }
.ix-onthisday article {
	display: flex;
	flex-direction: var(--row-dir);
	align-items: flex-start;
	gap: clamp(0.75rem, 2.5vw, 1.5rem);
	padding: 20px 12px;
	margin: 0 -12px;
	border-radius: 3px;
	transition: background .16s;
}
.ix-onthisday article:hover { background: rgba(var(--lm-panel-rgb), .7); }
.ix-year { margin: 0; flex: 0 0 var(--year-w); font-family: var(--lm-mono); font-size: 1.125rem; font-weight: 700; color: var(--lm-gold); line-height: 1; }
.ix-otd-body { flex: 1 1 auto; min-width: 0; }
.ix-otd-body h3 { margin: 0; }
.ix-otd-body h3 a { font-family: var(--lm-sans); font-size: 1.125rem; font-weight: 500; color: var(--lm-ink); }
.ix-otd-body h3 a:hover { color: var(--lm-green-lt); }
.ix-otd-place { margin: 5px 0 0; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-muted); }
.ix-otd-quote { margin: 11px 0 0; font-size: 0.9375rem; line-height: 1.6; font-style: italic; color: var(--lm-ink); max-width: 44rem; text-wrap: pretty; }
.ix-otd-by { margin: 11px 0 0; font-family: var(--lm-mono); font-size: 0.6563rem; letter-spacing: .06em; color: var(--lm-muted); }
.ix-otd-by a { color: var(--lm-muted); }
.ix-otd-by a:hover { color: var(--lm-ink); }
.ix-otd-score { margin: 0; flex: 0 0 auto; font-family: var(--lm-sans); font-size: 1rem; font-weight: 600; color: var(--lm-green-lt); }
.ix-after { padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ix-after span { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-muted); }

/* ------------------------------------------------- 02 stub builder --- */

.ix-build { display: grid; grid-template-columns: var(--build-cols); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.ix-build-form {
	min-width: 0;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: clamp(1rem, 3vw, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ix-field label {
	display: block;
	margin-bottom: 9px;
	font-family: var(--lm-sans);
	font-size: 0.8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.ix-field input[type="text"] {
	width: 100%;
	font-family: var(--lm-mono);
	font-size: 0.9375rem;
	color: var(--lm-ink);
	background: var(--lm-bg);
	border: 1px solid var(--lm-line-strong);
	border-radius: 2px;
	padding: 13px 14px;
	min-height: 2.75rem;
}
.ix-field input#ix-note { font-family: var(--lm-serif); font-style: italic; }
.ix-field input[type="text"]:focus { border-color: var(--lm-green-lt); outline: none; }
.ix-field input[type="range"] { width: 100%; min-height: 2.75rem; cursor: pointer; }
.ix-field input#ix-year { accent-color: var(--lm-gold); }
.ix-field input#ix-score { accent-color: var(--lm-green); }
.ix-field-hint { margin: 10px 0 0; font-family: var(--lm-mono); font-size: 0.625rem; line-height: 1.6; color: var(--lm-muted); }
.ix-readout { margin: 2px 0 0; font-family: var(--lm-mono); font-size: 0.8125rem; }
.ix-readout.is-year { color: var(--lm-gold); }
.ix-readout.is-score { color: var(--lm-green-lt); }
.ix-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ix-chips button {
	font-family: var(--lm-mono);
	font-size: 0.6563rem;
	padding: 10px 12px;
	min-height: 2.75rem;
	border-radius: 2px;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--lm-line-strong);
	color: var(--lm-muted);
	transition: border-color .16s, color .16s;
}
.ix-chips button:hover { border-color: var(--lm-green-lt); color: var(--lm-green-lt); }

.ix-build-preview { min-width: 0; }
.ix-build-preview .ix-paper { transform: rotate(-1deg); max-width: 26rem; margin: 0 auto; box-shadow: 0 18px 40px rgba(var(--lm-shadow-rgb), .5); }
/* The words the card shows before you have typed any. They have to read as
   waiting rather than written, and still a shade lighter than --lm-on-paper,
   which is what real writing on the card uses.

   It was #8B8F95 at 2.78:1, then a hex literal at #686C72 chosen for the 4.5
   the quote line needs at 14px. Both were literals, which the palette rule
   forbids precisely because a literal cannot follow a theme -- and 4.5 is the
   AA figure on a site that holds text to 7:1. --lm-on-paper-soft is 7.05:1 on
   the sheet, and the sheet reads the same under both themes. */
.ix-build-preview .ix-paper-artist.is-empty,
.ix-build-preview .ix-paper-quote.is-empty { color: var(--lm-on-paper-soft); }
.ix-progress-wrap { margin: 20px auto 0; max-width: 26rem; }
.ix-progress { display: flex; align-items: center; gap: 12px; }
.ix-progress-track { flex: 1 1 auto; min-width: 0; height: 0.375rem; background: rgba(var(--lm-ink-rgb), .07); border-radius: 2px; overflow: hidden; display: block; }
.ix-progress-track i { display: block; height: 100%; background: var(--lm-green); transition: width .18s; }
.ix-progress-label { flex: 0 0 auto; font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 700; color: var(--lm-green-lt); }
.ix-build-cta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.ix-build-note { margin: 12px 0 0; font-family: var(--lm-mono); font-size: 0.6875rem; line-height: 1.7; color: var(--lm-muted); }

/* -------------------------------------------------- 03 explore cards - */

.ix-explore {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
	gap: 14px;
}
.ix-explore li { display: flex; min-width: 0; }
.ix-explore a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
	padding: 20px;
	color: var(--lm-ink);
	transition: border-color .16s, transform .16s;
}
.ix-explore a:hover { border-color: rgba(var(--lm-green-lt-rgb), .55); transform: translateY(-2px); color: var(--lm-ink); }
.ix-explore-eyebrow { font-family: var(--lm-mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lm-gold); }
.ix-explore h3 { margin: 0; font-family: var(--lm-sans); font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--lm-ink); }
.ix-explore p { margin: 0; font-size: 0.8438rem; line-height: 1.55; color: var(--lm-muted); text-wrap: pretty; }
.ix-explore-stat { margin-top: auto; padding-top: 6px; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-green-lt); }

/* --------------------------------------------------- 04 memories ----- */

.ix-memories { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: var(--mem-cols); gap: clamp(0.875rem, 2.4vw, 1.375rem); }
.ix-memories li { display: flex; min-width: 0; }
.ix-memories article {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	background: var(--lm-panel);
	border: 1px solid var(--lm-line);
	border-radius: 3px;
}
.ix-mem-photo { position: relative; height: var(--mem-h); background: var(--lm-panel-2); overflow: hidden; border-radius: 2px 2px 0 0; }
.ix-mem-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix-mem-photo .is-fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(var(--lm-bg-rgb), .82), transparent 58%);
}
.ix-mem-photo .is-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .4;
	background-image: repeating-linear-gradient(45deg, rgba(var(--lm-ink-rgb), .04) 0 1px, transparent 1px 5px);
}
.ix-mem-year {
	position: absolute;
	left: 12px;
	bottom: 11px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-gold);
}
.ix-mem-body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: clamp(1.0625rem, 3vw, 1.375rem);
	border-top: 2px dashed rgba(var(--lm-ink-rgb), .16);
}
.ix-mem-body > i {
	position: absolute;
	top: -9px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--lm-bg);
}
.ix-mem-body > i.is-left { left: -9px; }
.ix-mem-body > i.is-right { right: -9px; }
.ix-mem-body h3 {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: clamp(1.125rem, 3.4vw, 1.375rem);
	line-height: 1.05;
	text-transform: uppercase;
	font-weight: 700;
}
.ix-mem-body h3 a { color: var(--lm-ink); }
.ix-mem-body h3 a:hover { color: var(--lm-green-lt); }
.ix-mem-place { margin: 0; font-family: var(--lm-mono); font-size: 0.6563rem; letter-spacing: .05em; color: var(--lm-muted); }
.ix-mem-quote { margin: 6px 0 0; font-size: 1rem; line-height: 1.55; font-style: italic; color: var(--lm-ink); text-wrap: pretty; }
.ix-mem-foot {
	margin-top: auto;
	padding-top: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	font-family: var(--lm-mono);
	font-size: 0.6563rem;
	letter-spacing: .06em;
	color: var(--lm-muted);
}
.ix-mem-foot b { color: var(--lm-green-lt); font-weight: 700; }