/*
 * The home page.
 *
 * Seven parts, in the owner's order: the hero, about us with the search,
 * languages, categories with reading, the player, reaching out, and what the
 * search does. Everything is built from the tokens in tokens.css, so light and
 * dark need no rules here beyond the hero, whose background is its own picture.
 *
 * The page keeps the site's one width (the wide one) and arranges what is inside
 * it with flex-wrap and auto-fit grids, so a column drops below its neighbour
 * when there is no room and no breakpoint has to guess where that is.
 */

/* ── Small things used everywhere on the page ────────────────────────────── */

/*
 * Said to search engines and screen readers, not drawn.
 *
 * Clipped to a pixel, which is how WordPress hides its own form labels, and
 * which a search engine reads as ordinary content for people who cannot see.
 * Not display:none, not a tiny font, not text coloured like its background:
 * those are the tricks search engines look for.
 */
.gks-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

:root { --gks-danger: #A1262E; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --gks-danger: #FF8A8F; }
}

:root[data-theme="dark"] { --gks-danger: #FF8A8F; }

/* ── The sections ────────────────────────────────────────────────────────── */

main .gks-sec {
	--gks-sec-gap: clamp(1.25rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: var(--gks-sec-gap);
	margin-block: 0;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	border-top: 1px solid var(--gks-rule-soft);
}

/* The hero is a band of its own; a hairline under it would only be a seam. */
main .gks-hero + .gks-sec { border-top: 0; }

main .gks-sec > * { margin-block: 0; }

/* Words that run the whole width of the page are hard to read; the cards and
   grids under them still use all of it. */
main .gks-sec > p { max-width: 46rem; }

/* An eyebrow and the heading it belongs to sit close, not a paragraph apart. */
.gks-headgroup {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

main .gks-headgroup > * { margin-block: 0; }

/* Two or three columns that stack when there is no room. */
.gks-cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

main .gks-cols > * { margin-block: 0; }

.gks-col {
	flex: 1 1 24rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.gks-col--wide { flex: 1.3 1 24rem; }
.gks-col--narrow { flex: 1 1 20rem; }

/* Columns that end together, for a row whose right side should reach the foot of its left. */
.gks-cols--even { align-items: stretch; }

/* A column left on its own, because its neighbour had nothing to show, keeps a readable line. */
.gks-cols > .gks-col:only-child { max-width: 46rem; }

main .gks-col > * { margin-block: 0; }

.gks-eyebrow,
p.gks-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gks-muted);
}

p.gks-lead {
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--gks-ink);
}

p.gks-small {
	font-size: var(--wp--preset--font-size--small);
	color: var(--gks-muted);
}

/*
 * A label for the paragraph under it, so it sits with that paragraph and not a
 * full gap away from it. The negative margin takes back most of the column's
 * own gap, and only for a label that is directly in one.
 */
main .gks-col > h3.gks-subhead { margin-bottom: -1.1rem; }

/* The same label straight inside a section, where the gap to take back is the section's own. */
main .gks-sec > h3.gks-subhead { margin-bottom: calc(var(--gks-sec-gap) * -1 + 0.4rem); }

h3.gks-subhead {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gks-accent);
}

/* A quiet box on the page: the search, the demos, the two ways to reach us. */
.gks-card-box {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.1rem, 2.4vw, 1.9rem);
	background: var(--gks-surface);
	border: 1px solid var(--gks-rule-soft);
	border-radius: 6px;
}

main .gks-card-box > * { margin-block: 0; }

.gks-card-box .gks-hero-search {
	max-width: none;
	margin: 0;
}

/* The whole field answers a click, magnifier included. */
.gks-hero-search__label {
	display: flex;
	align-items: center;
	cursor: text;
}

/* On a narrow screen a long hint ends in "…" instead of being cut off. */
.gks-card-box .gks-hero-search__input,
.gks-card-box .gks-hero-search__input::placeholder { text-overflow: ellipsis; }

/*
 * The page's own top and bottom padding is for pages that begin with a heading.
 * This one begins with a full-width band, which belongs right under the header
 * line, and ends with a section that already has all the room it needs above the
 * footer, so neither is wanted here.
 */
#gks-content:has(> .gks-hero) { padding-block: 0; }

/* ── 1. The hero ─────────────────────────────────────────────────────────── */

.gks-hero {
	--hero-ink: #F5F4EF;
	--hero-sub: rgba(245, 244, 239, 0.84);
	--hero-card: rgba(6, 22, 18, 0.34);
	--hero-edge: rgba(245, 244, 239, 0.18);
	--hero-now: rgba(245, 244, 239, 0.12);
	--hero-label: #A8DDCF;
	--hero-btn: #F5F4EF;
	--hero-btn-ink: #123229;
	--hero-wave: rgba(255, 238, 214, 0.14);
	--hero-drift: rgba(255, 214, 160, 0.22);
	--hero-bg:
		radial-gradient(58% 85% at 6% 0%, rgba(126, 214, 190, 0.40) 0%, rgba(126, 214, 190, 0) 62%),
		radial-gradient(44% 66% at 100% 10%, rgba(244, 162, 128, 0.30) 0%, rgba(244, 162, 128, 0) 66%),
		radial-gradient(40% 62% at 90% 114%, rgba(255, 196, 128, 0.72) 0%, rgba(238, 128, 92, 0.34) 40%, rgba(238, 128, 92, 0) 74%),
		radial-gradient(44% 70% at 32% 110%, rgba(47, 111, 99, 0.95) 0%, rgba(47, 111, 99, 0) 70%),
		linear-gradient(160deg, #0A2520 0%, #11392F 44%, #1B5246 100%);

	position: relative;
	overflow: hidden;
	margin-block: 0;
	background: var(--hero-bg);
	color: var(--hero-ink);
}

/*
 * The same band, a shade deeper, on a dark page. Both are dark teal; the
 * difference is only that the one on a light page has to hold its own against
 * all that paper and the one on a dark page has to not glare.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gks-hero {
		--hero-card: rgba(6, 22, 18, 0.38);
		--hero-wave: rgba(255, 234, 208, 0.12);
		--hero-drift: rgba(240, 190, 130, 0.14);
		--hero-bg:
			radial-gradient(58% 85% at 6% 0%, rgba(100, 196, 172, 0.30) 0%, rgba(100, 196, 172, 0) 62%),
			radial-gradient(44% 66% at 100% 10%, rgba(226, 142, 112, 0.22) 0%, rgba(226, 142, 112, 0) 66%),
			radial-gradient(40% 62% at 90% 114%, rgba(240, 170, 108, 0.56) 0%, rgba(214, 110, 80, 0.28) 40%, rgba(214, 110, 80, 0) 74%),
			radial-gradient(44% 70% at 32% 110%, rgba(35, 91, 80, 0.9) 0%, rgba(35, 91, 80, 0) 70%),
			linear-gradient(160deg, #06140F 0%, #0C2A23 44%, #16453B 100%);
	}
}

:root[data-theme="dark"] .gks-hero {
	--hero-card: rgba(6, 22, 18, 0.38);
	--hero-wave: rgba(255, 234, 208, 0.12);
	--hero-drift: rgba(240, 190, 130, 0.14);
	--hero-bg:
		radial-gradient(58% 85% at 6% 0%, rgba(100, 196, 172, 0.30) 0%, rgba(100, 196, 172, 0) 62%),
		radial-gradient(44% 66% at 100% 10%, rgba(226, 142, 112, 0.22) 0%, rgba(226, 142, 112, 0) 66%),
		radial-gradient(40% 62% at 90% 114%, rgba(240, 170, 108, 0.56) 0%, rgba(214, 110, 80, 0.28) 40%, rgba(214, 110, 80, 0) 74%),
		radial-gradient(44% 70% at 32% 110%, rgba(35, 91, 80, 0.9) 0%, rgba(35, 91, 80, 0) 70%),
		linear-gradient(160deg, #06140F 0%, #0C2A23 44%, #16453B 100%);
}

/*
 * The site's focus ring is teal, which is the one colour that cannot be seen on
 * this band. Keyboard users get a pale one here instead.
 */
.gks-hero :where(a, button):focus-visible { outline-color: var(--hero-ink); }

.gks-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

.gks-hero__waves,
.gks-hero__grain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gks-hero__waves g { stroke: var(--hero-wave); }

/* Film grain: the texture that stops a gradient looking like a screen. */
.gks-hero__grain {
	opacity: 0.12;
	mix-blend-mode: overlay;
}

/*
 * A patch of warm light that drifts very slowly behind the words, so the band is
 * not a still picture. It is one layer moved with transform (which the browser
 * does on the graphics card and without repainting the gradients under it), at a
 * pace nobody would call movement: a crossing takes 48 seconds. It is stopped
 * while the hero is out of view (motion.js adds is-away) and never runs for a
 * person who asked for less motion.
 */
.gks-hero__bg::before {
	content: "";
	position: absolute;
	inset: -30% -15%;
	background: radial-gradient(38% 52% at 68% 34%, var(--hero-drift) 0%, transparent 72%);
	animation: gks-drift 48s ease-in-out infinite alternate;
	will-change: transform;
}

.gks-hero.is-away .gks-hero__bg::before { animation-play-state: paused; }

@keyframes gks-drift {
	from { transform: translate3d(-5%, 3%, 0) scale(1); }
	to { transform: translate3d(6%, -4%, 0) scale(1.1); }
}

/*
 * The hero arrives in order: the line over the verse, the verse, then the song.
 * CSS only, so it needs no script and always ends with everything showing.
 */
.gks-hero__verse > .gks-hero__eyebrow { animation: gks-rise 600ms var(--gks-ease) both; }
.gks-hero__quote { animation: gks-rise 700ms var(--gks-ease) 90ms both; }
.gks-hero__song { animation: gks-rise 700ms var(--gks-ease) 260ms both; }

@media (prefers-reduced-motion: reduce) {
	.gks-hero__bg::before,
	.gks-hero__verse > .gks-hero__eyebrow,
	.gks-hero__quote,
	.gks-hero__song { animation: none; }
}

.gks-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: min(100%, var(--wp--style--global--wide-size, 73.75rem));
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 6rem) var(--gks-gutter) clamp(2.5rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	gap: clamp(2.25rem, 6vw, 5rem);
}

.gks-hero__eyebrow,
p.gks-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hero-sub);
}

/* The top half: the verse, as the one thing on the page that is not about songs. */
.gks-hero__verse {
	max-width: 62rem;
	margin-inline: auto;
	text-align: center;
}

.gks-hero__quote {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

/*
 * Four sizes, picked in PHP by how long the verse is (GKS_Home::verse_size). The
 * half it sits in has one height, so a short verse is drawn large and a long one
 * steps down until it fits; every band ends up about the same number of lines.
 */
.gks-hero__quote p {
	margin: 0;
	font-size: clamp(1.75rem, 4.4vw, 3.5rem);
	font-weight: 300;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--hero-ink);
}

.gks-hero__quote--m p { font-size: clamp(1.6rem, 3.4vw, 2.75rem); }
.gks-hero__quote--s p { font-size: clamp(1.45rem, 2.8vw, 2.25rem); }
.gks-hero__quote--xs p { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

/* Devanagari, Tamil and the rest carry marks above and below the line that 1.25 would clip. */
.gks-hero__quote:not(:lang(en)) p { line-height: 1.6; }

/* The bottom half: the song. */
.gks-hero__song {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.75rem clamp(1.75rem, 4vw, 3.5rem);
}

/*
 * From tablet width up the hero is two equal halves, the verse above and the song
 * below. The rows are 1fr, so both take the height of the taller one and the verse
 * gets exactly half of the band however long or short it is. The space that used
 * to sit round the outside of the band is inside the halves instead, so "half"
 * means half of the whole thing. On a phone they simply stack.
 */
@media (min-width: 48rem) {
	.gks-hero__inner {
		display: grid;
		grid-auto-rows: 1fr;
		gap: 0;
		padding-block: 0;
	}

	.gks-hero__verse,
	.gks-hero__song {
		box-sizing: border-box;
		padding-block: clamp(2.25rem, 4.2vw, 3.5rem);
	}

	.gks-hero__verse {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.gks-hero__song { align-content: center; }
}

.gks-hero__info {
	flex: 1 1 17rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}

.gks-hero__info > * { margin-block: 0; }

.gks-hero__title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--hero-ink);
	text-decoration: none;
}

.gks-hero__title:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.gks-hero__roman,
.gks-hero__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	color: var(--hero-sub);
}

.gks-hero__roman { font-size: 0.875rem; }
.gks-hero__meta { font-size: 0.8125rem; }

.gks-hero__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.1rem;
	margin-top: 0.35rem;
}

/* The shared play button, dressed for this band. */
.gks-hero__controls .gks-handoff { margin: 0; }

.gks-hero__controls .gks-handoff__play,
.gks-hero__controls .gks-handoff__play:hover,
.gks-hero__controls .gks-handoff.is-current .gks-handoff__play {
	padding: 0.55rem 1.5rem;
	border: 0;
	background: var(--hero-btn);
	color: var(--hero-btn-ink);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 0.875rem;
	font-weight: 600;
}

.gks-hero__controls .gks-handoff__play:hover { filter: brightness(1.06); }

/*
 * Playing, with the sound off. The button says what one press does ("Sound on"
 * and a crossed loudspeaker), and the bars beside it say the song is going.
 */
.gks-handoff__ico--muted { display: none; }
.gks-handoff.is-previewing .gks-handoff__ico--play { display: none; }
.gks-handoff.is-previewing .gks-handoff__ico--muted { display: inline-block; }

.gks-hero__status {
	display: none;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 0.8125rem;
	color: var(--hero-sub);
}

.gks-handoff.is-previewing + .gks-hero__status { display: inline-flex; }

.gks-hero__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
}

.gks-hero__eq i {
	display: block;
	width: 3px;
	height: 4px;
	border-radius: 1px;
	background: var(--hero-label);
	animation: gks-eq 1.1s ease-in-out infinite;
}

.gks-hero__eq i:nth-child(2) { animation-delay: -0.4s; }
.gks-hero__eq i:nth-child(3) { animation-delay: -0.8s; }

@keyframes gks-eq {
	0%, 100% { height: 4px; }
	50% { height: 14px; }
}

.gks-hero__open {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1rem;
	font-weight: 400;
	color: var(--hero-ink);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.gks-hero__card {
	flex: 1.5 1 24rem;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(0.9rem, 2vw, 1.5rem);
	background: var(--hero-card);
	border: 1px solid var(--hero-edge);
	border-radius: 6px;
}

/* ── A few lines of a song, with a strip to change layer ─────────────────── */

.gks-excerpt {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.gks-excerpt__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.gks-excerpt__label {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--gks-accent);
}

.gks-excerpt__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
}

.gks-excerpt__tab {
	min-height: 2.75rem;
	padding: 0 0.65rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--gks-muted);
}

.gks-excerpt__tab[aria-selected="true"] {
	color: var(--gks-ink);
	box-shadow: inset 0 -2px 0 var(--gks-accent);
}

.gks-excerpt__tab:hover { color: var(--gks-ink); }

.gks-excerpt__lines {
	padding: 0.5rem 0.9rem;
	border-radius: 4px;
	transition: background 0.35s ease;
}

/* The native layer takes the size its script needs; the rest are Latin. */
.gks-excerpt .gks-ln {
	font-size: clamp(1.2rem, 2.2vw, var(--wp--preset--font-size--lyric-native));
}

.gks-excerpt .gks-ln--latin {
	font-size: clamp(1.0625rem, 1.8vw, var(--wp--preset--font-size--lyric));
}

/* Lit while the recording is on it, the way a block is on the song page. */
.gks-excerpt.is-playing .gks-excerpt__lines { background: var(--gks-now); }

/* In the hero the palette is the band's, not the page's. */
.gks-hero .gks-excerpt__label { color: var(--hero-label); }
.gks-hero .gks-excerpt__tab { color: var(--hero-sub); }
.gks-hero .gks-excerpt__tab:hover { color: var(--hero-ink); }

.gks-hero .gks-excerpt__tab[aria-selected="true"] {
	color: var(--hero-ink);
	box-shadow: inset 0 -2px 0 var(--hero-label);
}

.gks-hero .gks-ln,
.gks-hero .gks-ln[data-l^='meaning'] { color: var(--hero-ink); }

.gks-hero .gks-excerpt.is-playing .gks-excerpt__lines { background: var(--hero-now); }

/* Smaller here than on the page: the song is the lower half of the band, not the whole of it. */
.gks-hero .gks-excerpt__label { font-size: 1rem; }
.gks-hero .gks-excerpt__tab { min-height: 2.5rem; font-size: 0.875rem; }
.gks-hero .gks-excerpt .gks-ln { font-size: clamp(1rem, 1.5vw, 1.25rem); }
.gks-hero .gks-excerpt .gks-ln--latin { font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); }

/*
 * A screen with some height (a laptop or a desktop): the header and the hero
 * together are never taller than the window, and the hero is never taller than
 * 46rem however big the window, so on a large display the next section shows
 * underneath instead of the hero filling everything.
 *
 * --e is the hero's own em: 1rem when the hero is 46rem tall, less in a shorter
 * window. What would not fit a shorter hero (the verse, the song's type, the
 * spacing round it) is written in terms of it, so the hero shrinks as a whole and
 * nothing overflows or is cut off. The width of the screen still decides how
 * large the type may be; the height of the hero decides how large it may not.
 *
 * Under 38rem of window height there is no room to do that well, so the hero
 * keeps the natural height it had before and the page scrolls. 4.25rem is the
 * header. Phones, which stack, are not touched.
 */
@media (min-width: 48rem) and (min-height: 38rem) {
	.gks-hero {
		--gks-hero-h: min(46rem, calc(100svh - 4.25rem));
		--e: calc(var(--gks-hero-h) / 46);
		height: var(--gks-hero-h);
	}

	.gks-hero__inner {
		height: 100%;
		grid-auto-rows: minmax(0, 1fr);
	}

	.gks-hero__verse,
	.gks-hero__song { padding-block: calc(var(--e) * 2.5); }

	/* The verse: four sizes by length, each also held to what the hero is tall enough for. */
	.gks-hero__quote { margin-top: calc(var(--e) * 0.75); }
	.gks-hero__quote p { font-size: min(clamp(1.75rem, 4.4vw, 3.5rem), calc(var(--e) * 3.5)); }
	.gks-hero__quote--m p { font-size: min(clamp(1.6rem, 3.4vw, 2.5rem), calc(var(--e) * 2.5)); }
	.gks-hero__quote--s p { font-size: min(clamp(1.45rem, 2.8vw, 2rem), calc(var(--e) * 2)); }
	.gks-hero__quote--xs p { font-size: min(clamp(1.25rem, 2.2vw, 1.5rem), calc(var(--e) * 1.5)); }

	/* The song. Nothing under 12px, whatever the window. */
	.gks-hero__song { row-gap: calc(var(--e) * 1.5); }
	.gks-hero__info { gap: calc(var(--e) * 0.5); }
	.gks-hero__title { font-size: min(clamp(1.25rem, 2vw, 1.5rem), calc(var(--e) * 1.5)); }
	.gks-hero__roman { font-size: max(0.75rem, min(0.875rem, calc(var(--e) * 0.875))); }
	.gks-hero__meta { font-size: max(0.75rem, min(0.8125rem, calc(var(--e) * 0.8125))); }
	.gks-hero__controls { margin-top: calc(var(--e) * 0.25); }
	.gks-hero__open { min-height: max(1.75rem, calc(var(--e) * 2.2)); }

	.gks-hero__card { padding: calc(var(--e) * 1.25); }
	.gks-hero .gks-excerpt { gap: calc(var(--e) * 0.4); }
	.gks-hero .gks-excerpt__tab { min-height: calc(var(--e) * 2.25); }
	.gks-hero .gks-excerpt__lines { padding: calc(var(--e) * 0.3) calc(var(--e) * 0.9); }
	.gks-hero .gks-excerpt .gks-ln { font-size: max(0.875rem, min(clamp(1rem, 1.5vw, 1.25rem), calc(var(--e) * 1.25))); }
	.gks-hero .gks-excerpt .gks-ln--latin { font-size: max(0.8125rem, min(clamp(0.9375rem, 1.2vw, 1.0625rem), calc(var(--e) * 1.0625))); }
}

/* ── 2. About us, and the search ─────────────────────────────────────────── */

.gks-problems {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-problems li {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--gks-rule);
}

/* Two ways on, set in a box that matches the one above it. */
.gks-card-box--links { padding-block: 0.4rem; gap: 0; }

.gks-morelinks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-morelinks li { margin: 0; }
.gks-morelinks li + li { border-top: 1px solid var(--gks-rule-soft); }

.gks-morelinks a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.25rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1rem;
	font-weight: 400;
	color: var(--gks-accent);
	text-decoration: none;
}

.gks-morelinks a:hover span { text-decoration: underline; text-underline-offset: 0.3em; }
.gks-morelinks .gks-icon { flex: none; }

.gks-problems strong {
	display: block;
	font-weight: 500;
	color: var(--gks-ink);
}

.gks-problems span { color: var(--gks-muted); }

/*
 * The line under a reason is a small second line, not running text: the small
 * size, which is the phone scale's where there is one (tokens.css) and the
 * theme's otherwise. The four are written to about the same length, so the
 * cards come out the same height.
 */
.gks-problems li > span:not(.gks-problems__ico) {
	font-size: var(--gks-t-small, var(--wp--preset--font-size--small));
	line-height: 1.5;
}

/* A badge over each reason, so the problem can be seen before it is read. */
.gks-problems li > .gks-problems__ico {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.7rem;
	border-radius: 8px;
	background: var(--gks-accent-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gks-accent) 24%, transparent);
	color: var(--gks-accent);
}

.gks-problems__ico svg {
	width: 1.3rem;
	height: 1.3rem;
}

.gks-tryrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--gks-muted);
}

.gks-tryrow .gks-chips {
	display: contents;
}

.gks-tryrow .gks-chip {
	align-items: center;
	padding: 0.25rem 0.9rem;
	color: var(--gks-ink);
}

/* ── 3. Languages ────────────────────────────────────────────────────────── */

/*
 * The same columns as the category cards (chrome.css): as many 16rem-or-wider
 * columns as fit, and empty ones kept, so a card is never wider than a column.
 * With only two languages in the archive they stay two normal cards, lined up
 * from the left, instead of stretching across the page.
 */
.gks-langs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-langs li { margin: 0; display: flex; }

.gks-lang {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.1rem;
	background: var(--gks-surface);
	border: 1px solid var(--gks-rule-soft);
	border-radius: 6px;
	color: var(--gks-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform var(--gks-dur-fast) var(--gks-ease);
}

/* Hover answers with colour, not with movement. */
.gks-lang:hover {
	border-color: var(--gks-accent);
	background-color: color-mix(in srgb, var(--gks-accent) 5%, var(--gks-surface));
}

.gks-lang__native {
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.5;
}

.gks-lang__name,
.gks-lang__ways,
.gks-lang__facts {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

.gks-lang__name { font-size: 0.9375rem; font-weight: 500; }

.gks-lang__ways {
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.5;
	color: var(--gks-muted);
}

.gks-lang__facts {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: var(--wp--preset--font-size--label);
	color: var(--gks-ink);
}

/* A language with nothing in it yet is still a link, and still honest. */
.gks-lang.is-empty .gks-lang__facts { color: var(--gks-muted); }

/* ── 4. Categories and playlists, and reading ────────────────────────────── */

/* Row one: the words, and under them a row of cards for what there is to browse. */
.gks-browse {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.gks-browse__head {
	max-width: 46rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

main .gks-browse__head > * { margin-block: 0; }

/* The two parts of the page are different jobs: a hairline between them says so. */
.gks-browse + .gks-cols {
	padding-top: var(--gks-sec-gap);
	border-top: 1px solid var(--gks-rule-soft);
}

.gks-browse__groups {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* Each group is its own label and link, then its cards (the shared .gks-cards grid in chrome.css). */
.gks-browse__group {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.gks-browse__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.gks-browse__top h3.gks-subhead { margin: 0; }

/* "All categories": the link that goes with a row of cards, at the end of the row's own label. */
.gks-browse__all {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1rem;
	font-weight: 400;
	color: var(--gks-accent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* A real target for a thumb, not just for the words. */
.gks-browse__all::after {
	content: "";
	position: absolute;
	inset: -0.6rem -0.3rem;
}

/* Fills its column, so the sample ends level with the words beside it. */
.gks-readdemo {
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(0.9rem, 2vw, 1.5rem);
	background: var(--gks-surface);
	border: 1px solid var(--gks-rule-soft);
	border-radius: 6px;
}

/*
 * The sample lines, three pixels under the page's usual size (25px becomes 22px
 * for the original script, 20px becomes 17px for the other two), in every tab.
 */
.gks-readdemo .gks-excerpt .gks-ln {
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
}

.gks-readdemo .gks-excerpt .gks-ln--latin {
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
}

.gks-steps {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-steps li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin: 0;
}

.gks-steps__n {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--gks-accent);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--gks-accent);
}

.gks-steps strong { font-weight: 500; color: var(--gks-ink); }

/* ── 5. The player ───────────────────────────────────────────────────────── */

.gks-points {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-points li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
}

.gks-points .gks-icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.2rem;
	color: var(--gks-accent);
}

.gks-points strong {
	display: block;
	font-weight: 500;
	color: var(--gks-ink);
}

.gks-pcol { flex: 1.1 1 24rem; gap: 0.6rem; }

.gks-pdemo {
	overflow: hidden;
	background: var(--gks-surface);
	border: 1px solid var(--gks-rule-soft);
	border-radius: 6px;
}

.gks-pdemo__top {
	padding: clamp(0.9rem, 2vw, 1.4rem);
	border-bottom: 1px solid var(--gks-rule-soft);
}

.gks-pdemo .gks-handoff { margin: 0; }

.gks-pdemo .gks-song {
	padding: clamp(0.9rem, 2vw, 1.4rem);
	/* The reader's chosen text size is set on this element by song.js, so a smaller size cannot be set there. */
	--gks-demo-scale: 0.85;
}

/*
 * Three pixels under a song page's size (20px becomes 17px): this is a sample,
 * shown beside the words that describe it. It still follows the reader's own
 * text-size choice, and takes the same fraction off whatever that is.
 */
.gks-pdemo .gks-song .gks-ln {
	font-size: calc(var(--wp--preset--font-size--lyric-native) * var(--gks-read, 1) * var(--gks-demo-scale));
}

.gks-pdemo .gks-song .gks-ln--latin {
	font-size: calc(var(--wp--preset--font-size--lyric) * var(--gks-read, 1) * var(--gks-demo-scale));
}

.gks-pdemo .gks-lbl {
	font-size: calc(var(--wp--preset--font-size--lyric-native) * var(--gks-read, 1) * var(--gks-demo-scale));
}

.gks-pdemo .gks-lbl--latin {
	font-size: calc(var(--wp--preset--font-size--lyric) * var(--gks-read, 1) * var(--gks-demo-scale));
}

.gks-pdemo .gks-lyrics { gap: var(--wp--preset--spacing--40); }

.gks-pdemo__hint {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	color: var(--gks-muted);
}

/* ── 6. Reaching out ─────────────────────────────────────────────────────── */

.gks-reach-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.5rem;
}

.gks-reach-row > .gks-card-box { flex: 1 1 20rem; min-width: 0; }
.gks-reach-row > .gks-card-box--form { flex: 1.2 1 22rem; }

.gks-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.4rem;
}

/* At the foot of its box, level with the Send button in the box beside it. */
main .gks-card-box > .gks-buttons { margin-top: auto; }

.gks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid var(--gks-accent);
	border-radius: 3px;
	background: var(--gks-accent);
	color: var(--gks-ground);
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.gks-button:hover { filter: brightness(1.08); }

.gks-button--ghost {
	background: transparent;
	color: var(--gks-accent);
}

.gks-mistake { display: flex; flex-direction: column; gap: 1rem; }

.gks-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.gks-form[hidden],
.gks-form__thanks[hidden],
.gks-form__error[hidden] { display: none; }

.gks-field label {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--gks-ink);
}

.gks-field label span {
	font-weight: 400;
	color: var(--gks-muted);
}

/* The look (fill, quiet line, teal line on focus) is the site's field style in chrome.css; this only sizes them. */
.gks-field input,
.gks-field textarea,
.gks-field select {
	width: 100%;
}

.gks-field textarea {
	min-height: 7rem;
}

/* Out of sight but not display:none: a bot skips what it can tell is hidden. */
.gks-field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gks-form__error {
	margin: 0;
	color: var(--gks-danger);
	font-size: var(--wp--preset--font-size--small);
}

.gks-form__send,
.gks-form__again {
	align-self: flex-start;
	min-height: 2.75rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gks-accent);
	border-radius: 3px;
	background: var(--gks-accent);
	color: var(--gks-ground);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.0625rem;
	font-weight: 600;
}

.gks-form__again {
	background: transparent;
	color: var(--gks-accent);
}

.gks-form__send[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.gks-form__thanks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1rem;
	background: var(--gks-accent-soft);
	border: 1px solid var(--gks-accent);
	border-radius: 6px;
}

.gks-form__thanks p { margin: 0; color: var(--gks-ink); }

.gks-form__mail {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--gks-muted);
}

.gks-form__mail a { color: var(--gks-accent); }

/* ── 7. About the search ─────────────────────────────────────────────────── */

.gks-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1.25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gks-facts li { margin: 0; }

.gks-facts strong {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 500;
	color: var(--gks-ink);
}

.gks-sample__lead {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--label);
	color: var(--gks-muted);
}

.gks-sample .gks-results__list {
	padding: clamp(0.9rem, 2vw, 1.4rem);
	background: var(--gks-surface);
	border: 1px solid var(--gks-rule-soft);
	border-radius: 6px;
}

.gks-sample .gks-row { border-bottom: 0; padding: 0; }

/* ── Phones: the type scale ──────────────────────────────────────────────────
 *
 * Few sizes, one for each kind of text, so the page reads like an app (the scale
 * and its names are in tokens.css). The verse of the day is the one thing bigger
 * than a title. Everything here is scoped to .gks-home, so a page of another kind
 * is untouched, and the page takes the body size as its own: only the text that
 * sets a size for itself needs saying below.
 *
 * Not touched on purpose: the CTA buttons (17px, bold) and the CTA links (1rem,
 * normal), which the owner set; and the fields, which stay at 16px because a
 * phone zooms in on anything smaller.
 */
@media (max-width: 37.5rem) {

	.gks-home {
		font-size: var(--gks-t-body);
		line-height: 1.55;
	}

	/* The hero. */
	.gks-home .gks-hero__eyebrow {
		font-size: var(--gks-t-label);
		letter-spacing: 0.1em;
	}

	.gks-home .gks-hero__quote p { font-size: var(--gks-t-verse); }
	.gks-home .gks-hero__quote--m p { font-size: 1.875rem; }
	.gks-home .gks-hero__quote--s p { font-size: 1.625rem; }
	.gks-home .gks-hero__quote--xs p { font-size: 1.375rem; }

	.gks-home .gks-hero__title { font-size: var(--gks-t-title); }

	.gks-home .gks-hero__roman,
	.gks-home .gks-hero__meta,
	.gks-home .gks-hero__status { font-size: var(--gks-t-small); }

	.gks-home .gks-handoff__play { font-size: var(--gks-t-control); }

	/* The sample of a song, in the hero and under "Listen". */
	.gks-home .gks-excerpt__label { font-size: var(--gks-t-body); }
	.gks-home .gks-excerpt__tab { font-size: var(--gks-t-control); }

	/* Latin letters at the body size, the original script a little larger, as it must be. */
	.gks-home .gks-hero .gks-excerpt .gks-ln,
	.gks-home .gks-readdemo .gks-excerpt .gks-ln { font-size: 1.125rem; }

	.gks-home .gks-hero .gks-excerpt .gks-ln--latin,
	.gks-home .gks-readdemo .gks-excerpt .gks-ln--latin { font-size: var(--gks-t-body); }

	.gks-home .gks-pdemo .gks-song { --gks-demo-scale: 0.75; }

	/* The sections. */
	.gks-home .gks-eyebrow { font-size: var(--gks-t-label); }

	.gks-home .gks-sec h2 {
		font-size: var(--gks-t-title);
		line-height: 1.25;
	}

	.gks-home p.gks-lead {
		font-size: var(--gks-t-lead);
		line-height: 1.5;
	}

	.gks-home h3.gks-subhead { font-size: var(--gks-t-label); }

	.gks-home .gks-card-box h3 {
		font-size: var(--gks-t-lead);
		line-height: 1.35;
	}

	.gks-home p.gks-small,
	.gks-home .gks-tryrow,
	.gks-home .gks-pdemo__hint,
	.gks-home .gks-form__mail { font-size: var(--gks-t-small); }

	.gks-home .gks-chip { font-size: var(--gks-t-control); }

	/* Languages and cards. */
	.gks-home .gks-lang__native { font-size: var(--gks-t-title); }
	.gks-home .gks-lang__name { font-size: var(--gks-t-control); }
	.gks-home .gks-card__name { font-size: var(--gks-t-lead); }
	.gks-home .gks-card__note { font-size: var(--gks-t-small); }

	/* The form and the search. */
	.gks-home .gks-field label { font-size: var(--gks-t-control); }
	.gks-home .gks-field label span { font-size: var(--gks-t-small); }
	.gks-home .gks-hero-search__input { font-size: 1rem; }

	/* The sample result under "What the search does". */
	.gks-home .gks-sample .gks-row__roman { font-size: var(--gks-t-small); }
	.gks-home .gks-sample .gks-row__line { font-size: var(--gks-t-body); }
}

/* ── Phones: room to breathe, and rows you swipe ─────────────────────────────
 *
 * Each section is its own thing and not a continuation of the last, so there is
 * more air round it; and the song under the verse starts well clear of the verse.
 *
 * Three lists that were stacked or tiled (the problems, the languages, the
 * categories and playlists) become a row you swipe sideways, the way an app does
 * it. A card is sized so that two whole cards and a tenth of the next fit on the
 * screen (2.1 cards): the sliver of the third is what tells a thumb there is more.
 * The row runs out to the edge of the screen and settles on a card when let go.
 * Every word stays in the page for search engines, and a link in a row is still a
 * link for the keyboard.
 */
@media (max-width: 37.5rem) {

	.gks-home .gks-sec {
		--gks-sec-gap: 1.5rem;
		padding-block: 4rem;
	}

	.gks-home .gks-hero__inner { gap: 4rem; }

	/* "Listen, and read it your way" is a section of its own that happens to follow the cards: the same distance. */
	.gks-home .gks-browse + .gks-cols {
		margin-top: 2.5rem;
		padding-top: 4rem;
	}

	.gks-home .gks-langs,
	.gks-home .gks-cards,
	.gks-home .gks-problems {
		display: flex;
		gap: 0.75rem;
		/* Out to both edges of the screen, with the first card still lined up with the text. */
		margin-inline: calc(var(--gks-gutter) * -1);
		/* Room above and below, so a focus ring is not cut off by the row's own scrolling. */
		margin-block: -0.4rem;
		padding: 0.4rem var(--gks-gutter);
		scroll-padding-inline: var(--gks-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.gks-home .gks-langs::-webkit-scrollbar,
	.gks-home .gks-cards::-webkit-scrollbar,
	.gks-home .gks-problems::-webkit-scrollbar { display: none; }

	/* Two whole cards, a gutter, two gaps, and a tenth of the next: (screen - gutter - 2 gaps) / 2.1. */
	.gks-home .gks-langs > li,
	.gks-home .gks-cards > li,
	.gks-home .gks-problems > li {
		flex: 0 0 calc((100vw - var(--gks-gutter) - 1.5rem) / 2.1);
		min-width: 0;
		scroll-snap-align: start;
	}

	/* One or two cards fit the screen whole, so there is nothing to swipe to: they share the width. */
	.gks-home :is(.gks-langs, .gks-cards, .gks-problems) > li:only-child,
	.gks-home :is(.gks-langs, .gks-cards, .gks-problems) > li:first-child:nth-last-child(2),
	.gks-home :is(.gks-langs, .gks-cards, .gks-problems) > li:first-child:nth-last-child(2) ~ li {
		flex: 1 1 0;
	}

	.gks-home .gks-cards > li { display: flex; }

	.gks-home .gks-card__link {
		height: auto;
		flex: 1;
	}

	/* The problems were plain text under a line; in a row each one is a card, like its neighbours. */
	.gks-home .gks-problems > li {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		padding: 1rem 1.1rem;
		background: var(--gks-surface);
		border: 1px solid var(--gks-rule-soft);
		border-radius: 6px;
	}

	/*
	 * Once, a moment after a row that really does swipe has arrived, its cards slide
	 * a little to the left and back: the same hint a thumb would give. A row of one
	 * or two fits the screen and has nothing to show, so it is left still. It uses
	 * the translate property, which does not fight the rise the cards arrive with.
	 */
	html.gks-js :is(.gks-langs, .gks-problems).gks-reveal.is-in > li:first-child:nth-last-child(n + 3),
	html.gks-js :is(.gks-langs, .gks-problems).gks-reveal.is-in > li:first-child:nth-last-child(n + 3) ~ li {
		animation: gks-nudge 1100ms var(--gks-ease) 900ms 1;
	}
}

@keyframes gks-nudge {
	0%, 100% { translate: 0 0; }
	45% { translate: -22px 0; }
}