/*
  Music Mountain — archive and song page.
  Developer Bible v1.0, section 12. Loads only on music screens.

  Nothing here restyles a shared component. The archive borrows the
  destination cards, buttons, and wave dividers already used on the homepage
  so Music Mountain looks like the same world, not a second website.
*/

/* ---------------------------------------------------------------
   Music Mountain — the map page

   Rick's painting fills the window. It is scaled to cover, so there is never
   a bar or a soft edge anywhere; on a wide screen it is the picture's top sky
   and bottom strip that fall outside the frame.

   The stage box IS the painting, sized in real units rather than percentages
   of a parent, which is what lets the markers sit at percentages of the
   artwork and still land on their signs at any size.
   --------------------------------------------------------------- */

.mm {
	position: relative;
	overflow: hidden;
	background: #123B6D;
	--mm-head: 0px;                                     /* the header floats over the map */
	--mm-h: calc( 100svh - var( --mm-head ) );           /* what the map gets */
	--mm-w: 100vw;                                      /* never narrower than the window */
	--mm-sh: calc( var( --mm-w ) / 1.5 );                /* the painting's height */
}

.mm__stage {
	position: absolute;
	top: 0;
	left: 50%;
	width: var( --mm-w );
	height: var( --mm-sh );
	/* Crop is split, leaning to the top: all six painted signs have to stay in
	   view, and the sky above the arch is the part that can be spared. */
	transform: translateX( -50% ) translateY( calc( -0.38 * ( var( --mm-sh ) - var( --mm-h ) ) ) );
}

.mm__scene {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/* Hit areas over the painted signs. Invisible until reached, because the sign
   is already drawn; a box on top would only smudge it. */
.mm__spot {
	position: absolute;
	left: var(--l);
	top: var(--t);
	width: var(--w);
	height: var(--h);
	border-radius: 10px;
	display: block;
	z-index: 2;
	animation: mm-breathe 4.5s ease-in-out infinite;
}

.mm__spot:nth-of-type(even) { animation-delay: 2.2s; }

.mm__spot:hover {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
}

.mm__spot:focus-visible {
	outline: 4px solid #FFF8EA;
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.22);
}

/* The signs breathe, so a child can see they are there to be pressed. */
@keyframes mm-breathe {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 248, 234, 0); }
	50%      { box-shadow: 0 0 22px 6px rgba(255, 248, 234, 0.42); }
}

/* ---------------------------------------------------------------
   The mountain is alive

   Drawn, not downloaded. Everything here stops under
   prefers-reduced-motion, at the foot of this file.
   --------------------------------------------------------------- */

.mm__life {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.mm-note {
	position: absolute;
	left: var(--x);
	top: 84%;
	line-height: 1;
	opacity: 0;
	/* The climb runs on `top`, a percentage of the painting, so it is right at
	   any size. The sway rides on transform, which lets the two run at
	   different speeds without fighting over one property. */
	animation:
		mm-rise var(--dur) linear var(--delay) infinite,
		mm-sway 5.5s ease-in-out var(--delay) infinite alternate;
}

.mm-note::before {
	content: "\266A";
	display: block;
	font-family: var(--font-head);
	font-size: 30px;
	color: #FFFFFF;
	text-shadow: 0 2px 7px rgba(18, 59, 109, 0.6);
}

.mm-note--1::before { content: "\266B"; color: #FFE9A8; }
.mm-note--2::before { content: "\266A"; color: #FFC9D2; font-size: 23px; }

@keyframes mm-rise {
	0%   { top: 84%; opacity: 0; }
	14%  { opacity: 0.9; }
	80%  { opacity: 0.7; }
	100% { top: 4%; opacity: 0; }
}

@keyframes mm-sway {
	from { transform: translateX(-16px) rotate(-9deg); }
	to   { transform: translateX(16px) rotate(9deg); }
}

/* Stage lights and lanterns. */
.mm-spark {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 224, 150, 0.75) 40%, rgba(255, 224, 150, 0) 70%);
	opacity: 0;
	animation: mm-twinkle 3.4s ease-in-out var(--delay) infinite;
}

@keyframes mm-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.5); }
	45%      { opacity: 1; transform: scale(1.4); }
	70%      { opacity: 0.25; transform: scale(0.9); }
}

/* Fireflies outside Quiet Song Hollow. */
.mm-fly {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle, #FFF6C9 0%, rgba(242, 181, 68, 0.85) 45%, rgba(242, 181, 68, 0) 72%);
	animation: mm-drift 9s ease-in-out var(--delay) infinite;
}

@keyframes mm-drift {
	0%, 100% { transform: translate(0, 0);         opacity: 0.25; }
	25%      { transform: translate(18px, -14px);  opacity: 1; }
	50%      { transform: translate(-12px, -24px); opacity: 0.6; }
	75%      { transform: translate(-20px, -8px);  opacity: 1; }
}

/* A butterfly crosses the meadow, and the morning sun breathes. */
.mm-bfly {
	position: absolute;
	left: 20%;
	top: 46%;
	width: 15px;
	height: 15px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: linear-gradient(120deg, #F2B544 0%, #E9762B 70%);
	box-shadow: 0 0 0 1px rgba(90, 45, 10, 0.35);
	animation: mm-flutter 26s ease-in-out 2s infinite;
}

@keyframes mm-flutter {
	0%   { transform: translate(0, 0) rotate(0deg);          opacity: 0; }
	8%   { opacity: 1; }
	25%  { transform: translate(150px, -70px) rotate(14deg); }
	50%  { transform: translate(320px, 20px) rotate(-10deg); }
	75%  { transform: translate(470px, -60px) rotate(12deg); }
	92%  { opacity: 1; }
	100% { transform: translate(620px, -10px) rotate(0deg);  opacity: 0; }
}

.mm-sun {
	position: absolute;
	right: 4%;
	top: 2%;
	width: 20%;
	height: 26%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 249, 220, 0.55) 0%, rgba(255, 235, 170, 0.22) 45%, rgba(255, 235, 170, 0) 72%);
	animation: mm-glow 7s ease-in-out infinite;
}

@keyframes mm-glow {
	0%, 100% { opacity: 0.45; transform: scale(0.94); }
	50%      { opacity: 1;    transform: scale(1.06); }
}


/* The sunburst turns, slowly. */
.mm-rays {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	background: conic-gradient(
		from 0deg,
		rgba(255, 250, 220, 0.30) 0deg 6deg,
		rgba(255, 250, 220, 0) 6deg 26deg,
		rgba(255, 250, 220, 0.22) 26deg 31deg,
		rgba(255, 250, 220, 0) 31deg 52deg
	);
	mix-blend-mode: screen;
	animation: mm-turn 90s linear infinite;
}

@keyframes mm-turn {
	to { transform: rotate(360deg); }
}

/* Petals come down over the meadow. */
.mm-petal {
	position: absolute;
	left: var(--x);
	top: -3%;
	width: 9px;
	height: 9px;
	border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
	background: var(--c, #F7B8C6);
	opacity: 0;
	animation: mm-fall-petal var(--dur) linear var(--delay) infinite;
}

@keyframes mm-fall-petal {
	0%   { top: -3%; opacity: 0; transform: translateX(0) rotate(0deg); }
	10%  { opacity: 0.85; }
	50%  { transform: translateX(38px) rotate(180deg); }
	85%  { opacity: 0.7; }
	100% { top: 78%; opacity: 0; transform: translateX(-24px) rotate(360deg); }
}

/* And the whole world breathes, very slightly, so nothing is ever quite
   still even where the paint cannot be taken apart. */
.mm__scene { animation: mm-breathe-scene 26s ease-in-out infinite; }

@keyframes mm-breathe-scene {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.014); }
}

/* ---------------------------------------------------------------
   Now Playing

   Sits exactly on its painted frame, so Rick's artwork needs no retouching
   and the panel can still show the song that is really featured. Everything
   inside is sized from the panel's own width, so it shrinks as one piece.
   --------------------------------------------------------------- */

.mm__np {
	position: absolute;
	z-index: 3;
	/* The inner parchment of the painted frame, measured off the artwork, so
	   the panel lands inside the wood rather than across it. */
	left: 85.09%;
	top: 26.76%;
	width: 13.54%;
	height: 35.74%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.5%;
	/* Percentages here resolve against the stage, not the panel, so they stay
	   small on purpose. */
	padding: 1.2% 0.9%;
	/* The painted frame is the frame; this only fills the parchment inside it. */
	background: #EFD1A0 radial-gradient(120% 105% at 50% 42%, #F6DDB2 0%, #F0D2A1 55%, #DCB27F 100%);
	border-radius: 3px;
	container-type: inline-size;
	overflow: hidden;
}

.mm__np-head {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 13cqw;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: #5B3D8F;
	text-transform: uppercase;
}

.mm__np-art {
	display: block;
	width: 100%;
	border: 2px solid #C79A55;
	border-radius: 4px;
	overflow: hidden;
	flex: none;
}

.mm__np-art:focus-visible { outline: 3px solid #FFF8EA; outline-offset: 2px; }

.mm__np-title {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: 11cqw;
	line-height: 1.15;
	color: #123B6D;
	text-align: center;
}

.mm__np-by {
	display: flex;
	align-items: center;
	gap: 4cqw;
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: 9cqw;
	line-height: 1.1;
	color: #A62C39;
}

.mm__np-audio {
	width: 100%;
	height: 22cqw;
	min-height: 0;
}

.mm__np-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4%;
	width: 100%;
	padding: 4% 2%;
	background: #7953B8;
	border-radius: var(--pill);
	color: #FFFFFF;
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: 10cqw;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.mm__np-cta:hover { background: #8A62CB; color: #FFFFFF; }
.mm__np-cta:focus-visible { outline: 3px solid #FFF8EA; outline-offset: 2px; }
.mm__np-cta svg { width: 8cqw; height: 8cqw; }

/* Shown only while a song is really running, so four still bars never sit
   there pretending something is playing. */
.mm-eq { display: none; }

.is-playing .mm-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 1cqw;
	height: 9cqw;
}

.mm-eq i {
	display: block;
	width: 2cqw;
	height: 30%;
	border-radius: 1px;
	background: #A62C39;
	animation: mm-bounce 0.9s ease-in-out infinite;
}

.mm-eq i:nth-child(2) { animation-delay: 0.15s; }
.mm-eq i:nth-child(3) { animation-delay: 0.30s; }
.mm-eq i:nth-child(4) { animation-delay: 0.45s; }

@keyframes mm-bounce {
	0%, 100% { height: 28%; }
	50%      { height: 100%; }
}

/* ---------------------------------------------------------------
   The category shelf

   The painted bar is cropped away on a wide screen, so it is rebuilt here
   with Rick's own icons and pinned to the foot of the window.
   --------------------------------------------------------------- */

.mm__bar {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(1140px, calc(100vw - 40px));
	/* Tall enough, and flush with the foot of the window, so the painted bar
	   underneath can never show a sliver of itself below the real one. */
	min-height: 132px;
	padding: 8px;
	background: #DFC694 linear-gradient(#EFDDB8, #DFC694);
	border: 3px solid #A8762F;
	border-radius: 14px;
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	box-shadow: inset 0 0 0 2px #F3E6C9, 0 -6px 26px rgba(0, 0, 0, 0.4);
}

.mm__bar-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mm__bar-row > li + li { border-left: 1px solid rgba(120, 86, 34, 0.35); }

.mm__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 10px 8px 12px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: var(--navy);
	background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
	transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}

.mm__cat:hover {
	background: rgba(255, 255, 255, 0.62);
	transform: translateY(-3px);
	box-shadow: 0 6px 0 rgba(120, 86, 34, 0.28);
}
.mm__cat:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.mm__cat-icon {
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	box-shadow: 0 3px 7px rgba(90, 60, 20, 0.4);
	animation: mm-bob 5s ease-in-out infinite;
}

.mm__bar-row > li:nth-child(even) .mm__cat-icon { animation-delay: 1.4s; }
.mm__bar-row > li:nth-child(3n) .mm__cat-icon { animation-delay: 2.6s; }

@keyframes mm-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

.mm__cat-name {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: 15px;
	line-height: 1.15;
	color: #123B6D;
}

.mm__cat-blurb {
	font-size: 12px;
	line-height: 1.2;
	color: #4A3A22;
}

/* ---------------------------------------------------------------
   Rows of songs
   --------------------------------------------------------------- */

.music-row--soft { background: var(--lavender-soft); }

.song-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-24);
}

.song-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: var(--navy);
	background: var(--panel);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: 14px;
	box-shadow: 0 5px 0 #EFE3CD;
	transition: transform var(--ease), box-shadow var(--ease);
}

.song-card:hover  { transform: translateY(-5px); box-shadow: 0 10px 0 rgba(18, 59, 109, 0.13); }
.song-card:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(18, 59, 109, 0.16); }
.song-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.song-card__art {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
}

/* The play mark says "this is a song" before a child can read the title. */
.song-card__play {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--pill);
	background: var(--forest);
	box-shadow: 0 3px 0 #2E6B33;
}

.song-card__title {
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-h3-size);
	line-height: 1.25;
	color: var(--navy);
}

.song-card__meta {
	font-size: var(--t-small-size);
	color: var(--soft);
}

.chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 18px;
	border-radius: var(--pill);
	background: var(--panel);
	border: 2px solid var(--line);
	color: var(--navy);
	font-weight: var(--w-bold);
	font-size: var(--t-adult-size);
	text-decoration: none;
}

.chip:hover { background: var(--sky-soft); border-color: var(--sky); color: var(--navy); }
.chip:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------------------------------------------------------------
   Song page
   --------------------------------------------------------------- */

.song-head {
	background: var(--sky-soft);
	padding-top: var(--space-48);
	padding-bottom: var(--space-64);
}

.song-head__inner {
	display: grid;
	gap: var(--space-32);
	align-items: center;
}

.song-head__art .art {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	max-width: 420px;
}

/* WCAG 2.2 asks for at least 24 by 24; the eyebrow's own line box is shorter. */
.song-head__back {
	display: inline-block;
	color: #1B588F;
	padding: 3px 0;
	min-height: 24px;
}

.song-head__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h1-size);
	line-height: var(--t-h1-lh);
	color: var(--navy);
	margin: 0 0 var(--space-12);
}

.song-head__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--t-adult-size);
	color: var(--body);
	margin: 0 0 var(--space-24);
}

.song-player { max-width: 520px; }

/* The big button section 12 asks for. Script adds it, so it is only styled
   when it is really there. */
.song-play {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	min-height: 64px;
	padding: 12px 32px 16px;
	margin-bottom: var(--space-24);
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: 22px;
	line-height: 1.2;
	color: #FFFFFF;
	background: var(--forest);
	border: 0;
	border-radius: var(--pill);
	box-shadow: 0 5px 0 #2E6B33;
	cursor: pointer;
}

.song-play:hover  { background: #47A34E; }
.song-play:active { box-shadow: 0 2px 0 #2E6B33; transform: translateY(2px); }
.song-play:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.song-play__mark { display: flex; }

/* The browser's own controls are used on purpose: they are already keyboard
   reachable and already speak the family's language. */
.song-player__audio {
	width: 100%;
	min-height: var(--tap-min);
	display: block;
}

.song-player__note {
	font-size: var(--t-small-size);
	color: var(--body);
	margin: var(--space-12) 0 0;
}

.song-body { background: var(--cream); }

.song-body__inner {
	display: grid;
	gap: var(--space-48);
}

.song-block { margin-bottom: var(--space-48); }
.song-block:last-child { margin-bottom: 0; }

.song-block__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h2-size);
	line-height: var(--t-h2-lh);
	color: var(--navy);
	margin: 0 0 var(--space-16);
}

.song-block__text {
	font-size: var(--t-lead-size);
	line-height: var(--t-lead-lh);
	color: var(--body);
}

.song-block__text p { margin: 0 0 var(--space-16); }
.song-block__text p:last-child { margin-bottom: 0; }

.song-video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	background: var(--navy);
}

.song-block--learn {
	background: var(--forest-soft);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
}

.song-scripture {
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-h3-size);
	color: #2B6230;
	margin: var(--space-16) 0 0;
}

/* Section 12 asks for lyrics in large text, so a child can follow along. */
.song-lyrics {
	font-size: var(--t-child-size);
	line-height: var(--t-child-lh);
	color: var(--navy);
	background: var(--panel);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
}

.song-lyrics p { margin: 0 0 var(--space-24); }
.song-lyrics p:last-child { margin-bottom: 0; }

.song-aside {
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	margin-bottom: var(--space-24);
}

.song-aside--family { background: var(--gold-soft); }
.song-aside--corner { background: var(--lavender-soft); }

.song-aside__title {
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-h3-size);
	color: var(--navy);
	margin: 0 0 var(--space-12);
}

.song-aside__text {
	font-size: var(--t-adult-size);
	line-height: var(--t-adult-lh);
	color: var(--body);
}

.song-aside__text p { margin: 0 0 var(--space-12); }
.song-aside__text p:last-child { margin-bottom: 0; }

.song-downloads { background: var(--gold-soft); }

.song-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
}

/* ---------------------------------------------------------------
   Larger screens
   --------------------------------------------------------------- */

@media (min-width: 720px) {
	.song-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   Music Mountain, small screens

   A phone cannot hold the map at a readable size, so below 900px the picture
   goes back to being a whole picture at the top and the seven places become
   large buttons under it. Nothing reachable on one is missing from the other.
   --------------------------------------------------------------- */

@media (max-width: 899px) {
	.mm__spot,
	.mm__np,
	/* The map is a thumbnail down here; drifting notes across it would only be
	   noise, and it saves a phone's battery. */
	.mm__life {
		display: none;
	}

	.mm__scene { animation: none; }

	.mm { background: var(--cream); }

	.mm__stage {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1536 / 1024;
		transform: none;
	}

	.mm__bar {
		position: static;
		width: auto;
		transform: none;
		margin: var(--space-24) 20px var(--space-32);
		padding: 10px;
	}

	.mm__bar-row { grid-template-columns: 1fr; gap: 6px; }
	.mm__bar-row > li + li { border-left: 0; border-top: 1px solid rgba(120, 86, 34, 0.35); }

	.mm__cat {
		flex-direction: row;
		align-items: center;
		gap: var(--space-12);
		min-height: var(--tap-min);
		text-align: left;
		padding: 8px 10px;
	}

	.mm__cat-icon { width: 40px; height: 40px; animation: none; }
	.mm__cat-name, .mm__cat-blurb { display: block; }
}

/* ---------------------------------------------------------------
   Music Mountain, one screen

   Rick's map is a single view that does not scroll. The page is held to the
   height of the window and the footer stands down, because the map is the
   whole of it. Below 900px the stacked version scrolls as normal.
   --------------------------------------------------------------- */

@media (min-width: 900px) {
	body.mm-page {
		height: 100svh;
		overflow: hidden;
	}

	body.mm-page .mm { height: 100svh; }
	body.mm-page .site-footer { display: none; }

	/* The header rides over the picture instead of taking a slice off the top
	   of it, and slides away when nobody is using it. It comes straight back
	   on any movement, key press, or focus. */
	body.mm-page .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transition: transform 0.35s ease, opacity 0.35s ease;
	}

	body.mm-page.is-idle .site-header {
		transform: translateY(-100%);
		opacity: 0;
	}
}

@media (min-width: 1040px) {
	.song-head__inner {
		grid-template-columns: 1.15fr 1fr;
		gap: var(--space-64);
	}

	.song-body__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.song-card { transition: none; }
	.song-card:hover,
	.song-card:active { transform: none; }

	/* A family who asks for less motion gets the mountain perfectly still.
	   The lanterns stay lit, the notes simply stop drifting. */
	.mm-note,
	.mm-spark,
	.mm-fly,
	.mm-bfly,
	.mm-sun,
	.mm-rays,
	.mm-petal,
	.mm__scene,
	.mm__spot,
	.mm__cat,
	.mm__cat-icon,
	.mm-eq i {
		animation: none;
		transition: none;
	}

	.mm__cat:hover { transform: none; }

	.mm-note { opacity: 0.75; }
	.mm-petal { display: none; }
	body.mm-page .site-header { transition: none; }
	.mm-spark { opacity: 0.8; }
}

/* ---------------------------------------------------------------
   Find a Song, and one place on the mountain

   Music Mountain is one screen that does not scroll, so searching and
   browsing live on their own page (Rick's note, 2 August 2026). These two
   pages reuse the song cards above and only add their own heading band.
   --------------------------------------------------------------- */

.accent { color: var(--lavender); }

.find__head,
.cat__head {
	background: var(--sky-soft);
	padding-top: var(--space-32);
	padding-bottom: var(--space-48);
	text-align: center;
}

/* WCAG 2.2 asks for at least 24 by 24; a bare line of text is shorter. */
.find__back,
.cat__back {
	display: inline-block;
	color: #1B588F;
	font-weight: var(--w-bold);
	padding: 3px 0;
	min-height: 24px;
}

.find__title,
.cat__title {
	font-family: var(--font-head);
	font-weight: var(--w-extrabold);
	font-size: var(--t-h1-size);
	line-height: var(--t-h1-lh);
	color: var(--navy);
	margin: var(--space-12) 0 10px;
}

.find__lead,
.cat__lead {
	font-size: var(--t-lead-size);
	color: var(--body);
	margin: 0 auto;
	max-width: 46ch;
}

.cat__icon {
	display: block;
	width: 96px;
	height: 96px;
	margin: var(--space-16) auto 0;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(90, 60, 20, 0.35);
}

/* The search box. Stacked on a phone, side by side once there is room. */
.find__search {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
	margin: var(--space-24) auto 0;
}

.find__field {
	width: 100%;
	min-height: 52px;
	font-size: var(--t-adult-size);
}

.find__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
}

.find__empty,
.cat__empty {
	text-align: center;
	font-size: var(--t-lead-size);
	color: var(--body);
	margin: 0;
}

.find__pages,
.cat__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	margin-top: var(--space-32);
}

.find__pages-at {
	font-size: var(--t-adult-size);
	color: var(--body);
}

/* WordPress draws these links itself, and unstyled they are both too pale
   and far under the 24 by 24 that WCAG 2.2 asks for. */
.cat__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--pill);
	background: var(--panel);
	border: 2px solid var(--line);
	color: var(--navy);
	font-weight: var(--w-bold);
	text-decoration: none;
}

.cat__pages .page-numbers.current {
	background: var(--sky);
	border-color: var(--sky);
	color: #FFFFFF;
}

.cat__pages .page-numbers:hover { background: var(--sky-soft); color: var(--navy); }
.cat__pages .page-numbers:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.cat__pages .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cat__pages .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

.cat__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
}

/* Browse by kind of song — Rick's own coins off the painted shelf. */
.find__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-16);
}

.find__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: var(--space-16) 10px;
	text-align: center;
	text-decoration: none;
	color: var(--navy);
	background: var(--panel);
	border: var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 5px 0 #EFE3CD;
	transition: transform var(--ease), box-shadow var(--ease);
}

.find__cat:hover  { transform: translateY(-5px); box-shadow: 0 10px 0 rgba(18, 59, 109, 0.13); }
.find__cat:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(18, 59, 109, 0.16); }
.find__cat:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.find__cat-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: 0 3px 7px rgba(90, 60, 20, 0.4);
}

.find__cat-name {
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-adult-size);
	line-height: 1.25;
}

/* A story or an activity filed under the same Browse term has no cover. */
.song-card--plain {
	justify-content: center;
	min-height: 120px;
	text-align: center;
}

@media (min-width: 560px) {
	.find__search { flex-direction: row; }
	.find__field { flex: 1; }
	.find__go { flex: 0 0 auto; padding-left: var(--space-24); padding-right: var(--space-24); }
	.find__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.find__head,
	.cat__head { padding-top: var(--space-48); }
	.find__cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.find__cat-icon { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	.find__cat { transition: none; }
	.find__cat:hover,
	.find__cat:active { transform: none; }
}

/* The one small way off the mountain to the Find a Song page. Kept low and
   to the left so the picture is still the page. */
.mm__find {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: var(--space-16) auto 0;
	padding: 8px 18px;
	border-radius: var(--pill);
	background: #FFF8EA;
	border: 2px solid #A8762F;
	box-shadow: 0 3px 0 #A8762F;
	color: #123B6D;
	font-family: var(--font-head);
	font-weight: var(--w-bold);
	font-size: var(--t-adult-size);
	text-decoration: none;
}

.mm__find:hover { background: #FFFFFF; color: #123B6D; }
.mm__find:focus-visible { outline: 3px solid #FFF8EA; outline-offset: 3px; }

@media (max-width: 899px) {
	/* On a phone the mountain stacks, so this simply sits in the flow. */
	.mm__find { display: flex; width: max-content; }
}

@media (min-width: 900px) {
	.mm__find {
		position: absolute;
		z-index: 4;
		left: 16px;
		top: 112px;
		margin: 0;
	}
}