/* =========================================================================
   Ogou Music — the shell.

   The chrome of a page the plugin draws end to end: the bar across the top,
   the band the front page opens with, the sections under it, the footer, and
   the player that sits along the bottom.

   This file exists because the old one could not be repainted. `ogou-frontend.css`
   was written for a dark site and then asked to be a light one, and the
   corrections it needed are still in it — a hundred and forty `!important`
   declarations fighting a theme's content column, and six hundred and ninety
   colours written as literals in inline styles where no token can reach them.
   Sweeping that file was tried, in 4.0.0, and it shipped a site with black
   text on black bands.

   So this is not a sweep. The page under these rules has no theme column to
   fight, because `Ogou_Layout` prints the document itself and the theme never
   gets a turn. Every colour here is a token. There is not one `!important`,
   and there is nothing to be important over.

   The old file still loads, and still dresses what sits *inside* these
   sections — cards, forms, the dashboard. The two meet at the token layer and
   nowhere else, which is the only join that can be trusted while both exist.

   Everything is prefixed `ogou-sh-`. A name that collides with the old file
   is a name that inherits its corrections.
   ========================================================================= */

/* =========================================================================
   A dark panel, declared.

   Some components are deliberately dark and stay dark on a page of any
   colour: the hero, the radio, the help screens, the sign-in card, the chart
   band. That is a design decision and a good one — a dark slab gives a long
   page a middle, and artwork sits better on it.

   What broke is that those components were dark by accident of their own
   surface literal, while the text inside them came from `--ogou-text`. The
   token moved to daylight; the surface did not. So the hero's own statistics
   were being set in near-black on near-black, and the radio's track title
   with it. That is the 4.0.0 failure again, one layer in — and no amount of
   fixing the chrome around it was ever going to reach it, which is the fair
   complaint that produced this block.

   So being dark becomes something a component *says* rather than something
   it happens to be. `.ogou-dark` pins every token inside it to the night
   values. Anything in there — a heading, a price, a border, a button, a
   component written next year by somebody who has never read this file —
   is then correct without knowing it is on a dark panel.

   It is the whole night palette rather than two or three values on purpose.
   Picking out "the ones that matter" is how the next one gets missed.
   ========================================================================= */

/*
 * `.ogou-dark-day` is the third selector rather than a block of its own.
 *
 * The radio and the help screens are panels on the page, not bands across
 * it. At night the page is already this colour, and a panel the same shade
 * as what is behind it is not a panel, it is a hole — so they take the
 * contract only while the page is light, and at night fall back to the
 * ordinary card tokens that lift them off the background.
 *
 * Listed here instead of in a second rule because the token list must not
 * exist twice. Two copies drift, and the one that drifts is the one fewer
 * people read.
 */
.ogou-dark,
.ogou-sh-band,
html[data-ogou-shell][data-ogou-theme="light"] .ogou-dark-day,
html[data-ogou-shell][data-ogou-theme="auto"] .ogou-dark-day {
	--ogou-bg:      #17130f;
	--ogou-surface: #1e1914;
	--ogou-card:    #241d17;
	--ogou-card-2:  #2a231b;

	--ogou-text:  #f6f0e8;
	--ogou-muted: #a99d90;

	--ogou-brand:     #ff8a3d;
	--ogou-brand-ink: #ff9a56;
	--ogou-glow:      #ffb020;
	--ogou-gold:      #ffb020;
	--ogou-gold-ink:  #ffd08a;
	--ogou-fire:      linear-gradient(120deg, #ff5a1f, #ffb020);
	--ogou-on-accent: #1a1309;

	--ogou-ok:         #2fd4b6;
	--ogou-ok-ink:     #8ff0da;
	--ogou-on-ok:      #04261f;
	--ogou-danger:     #ff3d57;
	--ogou-danger-ink: #ffb4bf;
	--ogou-info:       #4c8dff;
	--ogou-info-ink:   #b9cdff;

	--ogou-wash-1: rgba(255, 255, 255, .035);
	--ogou-wash-2: rgba(255, 255, 255, .06);
	--ogou-wash-3: rgba(255, 255, 255, .10);
	--ogou-wash-4: rgba(255, 255, 255, .15);

	--ogou-line-1: rgba(255, 255, 255, .09);
	--ogou-line-2: rgba(255, 255, 255, .14);
	--ogou-line-3: rgba(255, 255, 255, .20);
	--ogou-line-4: rgba(255, 255, 255, .32);
	--ogou-border: var(--ogou-line-1);

	--ogou-shade-1: rgba(0, 0, 0, .30);
	--ogou-shade-2: rgba(0, 0, 0, .42);
	--ogou-shade-3: rgba(0, 0, 0, .55);
	--ogou-shade-4: rgba(0, 0, 0, .72);

	--ogou-scrim: rgba(0, 0, 0, .46);

	--ogou-lift: rgba(255, 255, 255, .10);
	--ogou-sink: rgba(255, 255, 255, .028);

	--ogou-tint-a:    40%;
	--ogou-tint-b:    16%;
	--ogou-tint-base: #140f0b;

	--ogou-band: #241d17;

	color: var(--ogou-text);
	color-scheme: dark;
}

/*
 * `auto` on a phone set to dark takes the contract back off again, for the
 * same reason the palette blocks do.
 */
@media (prefers-color-scheme: dark) {
	html[data-ogou-shell][data-ogou-theme="auto"] .ogou-dark-day {
		--ogou-bg: inherit; --ogou-surface: inherit; --ogou-card: inherit; --ogou-card-2: inherit;
		--ogou-text: inherit; --ogou-muted: inherit;
		--ogou-band: inherit;
	}
}

/* -------------------------------------------------------------------------
   The document
   ------------------------------------------------------------------------- */

.ogou-shell {
	margin: 0;
	background: var(--ogou-bg);
	color: var(--ogou-text);
	font-family: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/*
	 * Belt and braces against the one layout bug that keeps coming back.
	 *
	 * A full-bleed band pulled out with `margin-left: calc(50% - 50vw)` is a
	 * hair wider than the viewport once a scrollbar appears, and the page
	 * then scrolls sideways by that hair. It is invisible on a desktop and
	 * obvious on a phone, where it shows up as the whole page sliding.
	 */
	overflow-x: hidden;
}

.ogou-shell * ,
.ogou-shell *::before,
.ogou-shell *::after { box-sizing: border-box; }

/*
 * Room under the bar.
 *
 * Every page began hard against the header: the cover on a track page touched
 * it, the hero started at its edge, and the whole site read as cramped. The
 * old templates each pushed themselves down by hand with a `margin-top`, and
 * when the layout took over there was nothing left doing it.
 *
 * Stated once, here, on the element every page is inside. A section that
 * genuinely wants to sit against the bar — a full-bleed band — turns it off
 * for itself rather than every other page having to add it back.
 */
.ogou-sh-main { display: block; min-height: 40vh; padding-top: 28px; }

@media (max-width: 560px) { .ogou-sh-main { padding-top: 18px; } }

/* The hero carries its own top spacing and the wash behind it starts at the
   very top, so it is the one section that does not want this. */
.ogou-sh-main > .ogou-sh-hero:first-child { margin-top: -28px; }
@media (max-width: 560px) { .ogou-sh-main > .ogou-sh-hero:first-child { margin-top: -18px; } }

/* Headings are the display face; body text is not. */
.ogou-shell h1, .ogou-shell h2, .ogou-shell h3,
.ogou-sh-logo, .ogou-sh-figure b {
	font-family: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.08;
}

/*
 * The one script face, and a hard limit on where it may appear.
 *
 * Caveat carries two phrases on the front page and one in the closing band.
 * It is here to make a sentence sound like a person said it, which stops
 * working the moment it is the fourth thing on the screen wearing it.
 */
.ogou-sh-hand {
	font-family: 'Caveat', 'Bricolage Grotesque', cursive;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -.005em;
	font-size: 1.06em;
	color: var(--ogou-brand-ink);
}

.ogou-sh-wrap {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 24px;
}

.ogou-sh-tabular { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.ogou-sh-b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	padding: 10px 17px;
	border-radius: 999px;
	border: 1px solid var(--ogou-line-2);
	background: transparent;
	color: var(--ogou-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.ogou-sh-b:hover { background: var(--ogou-wash-2); border-color: var(--ogou-line-3); color: var(--ogou-text); }
.ogou-sh-b:active { transform: translateY(1px); }

.ogou-sh-b-p {
	background: var(--ogou-brand);
	border-color: transparent;
	color: var(--ogou-on-accent);
}
.ogou-sh-b-p:hover { background: var(--ogou-brand); border-color: transparent; color: var(--ogou-on-accent); filter: brightness(1.07); }

.ogou-sh-b-lg { font-size: 14.5px; padding: 13px 25px; }

/* Focus is visible on every control in here, and it is the same ring. */
.ogou-shell :focus-visible {
	outline: 2px solid var(--ogou-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   The bar across the top
   ------------------------------------------------------------------------- */

.ogou-sh-hd {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ogou-bg);
	border-bottom: 1px solid var(--ogou-line-1);
}
body.admin-bar .ogou-sh-hd { top: 32px; }

/*
 * On a phone the admin bar is not fixed.
 *
 * WordPress pins its bar to the top of the window on a desktop and lets it
 * scroll away on anything under 782px — which means "46px from the top" is
 * right for exactly one scroll position and wrong for every other. Once the
 * bar has gone the sticky header hovered 46px below the top edge with the
 * page showing through the gap, and the content started under it.
 *
 * The bar still pushes the page down by its own height, because WordPress
 * sets `html { margin-top }` for that. So on a phone the header sticks to the
 * real top, and the bar is simply above it until it is scrolled off.
 *
 * This only ever shows to somebody logged in. It still has to be right,
 * because the person logged in is the one checking the site.
 */
@media (max-width: 782px) {
	/*
	 * 46px while the bar is on screen. Under 600px WordPress makes the bar
	 * absolute, so the script below moves the header up as the bar scrolls
	 * off — `top: 0` from the start put the header behind the bar at the top
	 * of every page on a phone, and it only appeared once you had scrolled.
	 */
	body.admin-bar .ogou-sh-hd { top: 46px; }
}

.ogou-sh-hd > .ogou-sh-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block: 12px;
}

.ogou-sh-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-size: 19px;
	letter-spacing: -.045em;
	color: var(--ogou-text);
	text-decoration: none;
}
.ogou-sh-logo img { display: block; height: 32px; width: auto; max-width: 180px; }
/* Two logos set: the night one is hidden by day, the day one by night. */
html[data-ogou-theme="light"] .ogou-sh-logo img[data-ogou-logo="dark"],
html:not([data-ogou-theme="light"]) .ogou-sh-logo img[data-ogou-logo="light"] { display: none; }
.ogou-sh-logo svg { width: 20px; height: 20px; color: var(--ogou-brand); flex: 0 0 auto; }

.ogou-sh-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}
.ogou-sh-nav a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ogou-muted);
	text-decoration: none;
	padding: 7px 11px;
	border-radius: 9px;
	white-space: nowrap;
	transition: color .14s ease, background .14s ease;
}
.ogou-sh-nav a:hover { color: var(--ogou-text); background: var(--ogou-wash-1); }
.ogou-sh-nav a[aria-current] { color: var(--ogou-text); font-weight: 700; }

.ogou-sh-hd-r {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

/*
 * The theme switch, restyled for this bar.
 *
 * `Ogou_Theme::button()` prints `.ogou-theme-sw`, and the old stylesheet
 * dresses it in `!important` from end to end — it had to, because on the old
 * pages that button sits in the host theme's header, outside `.ogou`, where
 * Hello Elementor styles every bare button into a pink lozenge.
 *
 * In here it is inside a document the plugin wrote, so there is no theme rule
 * to beat and `!important` would only beat this file's own. Matching the old
 * selector's specificity is enough: two classes to its one.
 */
.ogou-sh-hd .ogou-theme-sw,
.ogou-sh-ft .ogou-theme-sw {
	width: 32px;
	height: 32px;
	padding: 0;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ogou-line-2);
	background: transparent;
	color: var(--ogou-muted);
	cursor: pointer;
	box-shadow: none;
	transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.ogou-sh-hd .ogou-theme-sw:hover { color: var(--ogou-text); background: var(--ogou-wash-2); }
.ogou-sh-hd .ogou-theme-sw svg { width: 15px; height: 15px; display: block; }

/* One picture at a time: the moon offers the dark, the sun offers the light. */
.ogou-shell .ogou-theme-sw .ogou-th-sun { display: none; }
html[data-ogou-theme="dark"] .ogou-shell .ogou-theme-sw .ogou-th-moon { display: none; }
html[data-ogou-theme="dark"] .ogou-shell .ogou-theme-sw .ogou-th-sun { display: block; }

.ogou-sh-lang {
	display: flex;
	flex: 0 0 auto;
	border: 1px solid var(--ogou-line-2);
	border-radius: 999px;
	overflow: hidden;
}
.ogou-sh-lang a {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 9px;
	color: var(--ogou-muted);
	text-decoration: none;
	transition: color .14s ease, background .14s ease;
}
.ogou-sh-lang a:hover { color: var(--ogou-text); background: var(--ogou-wash-2); }
.ogou-sh-lang a[aria-current] { background: var(--ogou-brand); color: var(--ogou-on-accent); }

/*
 * The support badge and the balance.
 *
 * Both are carried over from the old bar, and both are shaped like the theme
 * switch beside them — a circle for the one that is an icon, a pill for the
 * one that is a number. Keeping the family small is what stops a header
 * becoming a row of unrelated widgets.
 */
.ogou-sh-help {
	position: relative;
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ogou-line-2);
	color: var(--ogou-muted);
	text-decoration: none;
	transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.ogou-sh-help:hover { color: var(--ogou-text); background: var(--ogou-wash-2); }
.ogou-sh-help svg { width: 15px; height: 15px; display: block; }
.ogou-sh-help.has-new { color: var(--ogou-brand-ink); border-color: var(--ogou-brand); }

.ogou-sh-dot {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ogou-brand);
	color: var(--ogou-on-accent);
	font-size: 9.5px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
}

.ogou-sh-hd .ogou-head-balance {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid var(--ogou-line-2);
	background: transparent;
	color: var(--ogou-text);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ogou-sh-hd .ogou-head-balance:hover { background: var(--ogou-wash-2); border-color: var(--ogou-line-3); }
.ogou-sh-hd .ogou-head-balance-i { font-size: 12px; line-height: 1; }

/* On a phone the balance goes; the badge stays, because it is the one that
   is telling somebody something they do not already know. */
@media (max-width: 560px) {
	.ogou-sh-hd .ogou-head-balance { display: none; }
}

.ogou-sh-burger {
	display: none;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid var(--ogou-line-2);
	background: transparent;
	color: var(--ogou-text);
	cursor: pointer;
}
.ogou-sh-burger svg { width: 17px; height: 17px; display: block; }

/*
 * The drawer.
 *
 * Collapsed with `grid-template-rows: 0fr`, not `display: none`, so that it
 * can be animated — and so that a browser's find-in-page still reaches the
 * links inside it, which `display: none` takes away.
 */
.ogou-sh-drawer {
	display: none;
	border-top: 1px solid var(--ogou-line-1);
	background: var(--ogou-bg);
}
.ogou-sh-drawer > div { padding: 10px 24px 18px; }
.ogou-sh-drawer a {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--ogou-text);
	text-decoration: none;
	padding: 11px 2px;
	border-bottom: 1px solid var(--ogou-line-1);
}
.ogou-sh-drawer a:last-child { border-bottom: 0; }
.ogou-sh-hd.is-open .ogou-sh-drawer { display: block; }

@media (max-width: 900px) {
	.ogou-sh-nav { display: none; }
	.ogou-sh-burger { display: inline-flex; }
	.ogou-sh-hd-r { gap: 6px; }
	.ogou-sh-hd > .ogou-sh-wrap { gap: 10px; }
	/* `!important` to match the armour further down, which marks
	   `display` on these buttons so a theme cannot reshape them. A rule
	   that hides something has to carry the same weight as the rule that
	   shows it, or the bar overflows and the menu goes off the edge. */
	.ogou-shell .ogou-sh-hd-r .ogou-sh-b:not(.ogou-sh-b-p) { display: none !important; }
}

/*
 * Below this the buttons leave the bar entirely, and that is not a matter of
 * taste.
 *
 * "Upload your music" is `white-space: nowrap`, as a button has to be, so it
 * refuses to shrink. On a 390px screen the row was 542px wide and the burger
 * — the last thing in it — sat 152px past the right edge. The page did not
 * scroll sideways to reveal it, because `.ogou-shell` hides horizontal
 * overflow, so there was no sign anything was wrong: the bar simply looked
 * tidy and the menu could not be opened at all.
 *
 * It was found by measuring the button's position against the window rather
 * than by looking at a screenshot, in which it is invisible by definition.
 * Anything that must be reachable is now measured that way.
 *
 * What goes is the pair of buttons; both are in the drawer, which is where
 * somebody on a phone is already looking for them.
 */
@media (max-width: 680px) {
	/* Three classes, because the armour below scores two plus an
	   element and would otherwise win. Specificity, not shouting:
	   both rules are already `!important`. */
	.ogou-shell .ogou-sh-hd-r .ogou-sh-b { display: none !important; }
	.ogou-sh-logo { font-size: 17px; }
	.ogou-sh-logo img { height: 28px; }
}

/*
 * Under 600px the language pills leave the bar for the drawer.
 *
 * A wordmark 180px wide, the switch, three pills, the help button and the
 * burger do not fit in 400px: the logo was the thing that gave, and it was
 * cut off. The pills are the least used of the lot, so they go one tap
 * further. The logo itself is capped a little smaller too.
 */
.ogou-sh-drawer-lang { display: none; }
@media (max-width: 600px) {
	.ogou-sh-hd-r .ogou-sh-lang { display: none; }
	.ogou-sh-drawer-lang { display: flex; justify-content: flex-start; padding: 12px 0 6px; }
	.ogou-sh-drawer-lang .ogou-sh-lang { border: 1px solid var(--ogou-line-2); }
	.ogou-sh-drawer .ogou-sh-drawer-lang .ogou-sh-lang a { display: block; padding: 7px 14px; font-size: 12.5px; border-bottom: 0; }
	.ogou-sh-drawer .ogou-sh-drawer-lang .ogou-sh-lang a[aria-current="true"] { background: var(--ogou-brand); color: var(--ogou-on-accent); }
	.ogou-sh-logo { flex: 0 1 auto; min-width: 0; }
	.ogou-sh-logo img { height: 26px; max-width: 150px; }

	/*
	 * The menu button, big enough to be the thing you hit.
	 *
	 * At 31px it was the same size as the help button beside it, and on a
	 * phone people opened the support page when they wanted the menu. Now it
	 * is the largest control in the bar, filled so it reads as a button,
	 * with a thicker icon and a little more air before it. The help button
	 * stays small and hollow, so the two no longer look like a pair.
	 */
	.ogou-shell .ogou-sh-burger {
		width: 46px !important;
		height: 40px !important;
		margin-left: 4px;
		background-color: var(--ogou-wash-2) !important;
		border-color: var(--ogou-line-3) !important;
		border-radius: 12px !important;
	}
	.ogou-sh-burger svg { width: 24px; height: 24px; stroke-width: 2.4; }
	.ogou-sh-help { width: 30px; height: 30px; }
	.ogou-sh-help svg { width: 14px; height: 14px; }
}

/* The drawer's own call to action, which the bar no longer has room for. */
.ogou-sh-drawer .ogou-sh-b {
	display: flex !important;
	width: 100%;
	width: 100% !important;
	margin-top: 12px;
	padding-block: 12px !important;
	border-bottom: 0;
}
@media (max-width: 420px) {
	.ogou-sh-wrap { padding-inline: 16px; }
	.ogou-sh-drawer > div { padding-inline: 16px; }
	.ogou-sh-lang a { padding: 6px 7px; font-size: 10px; }
}

/*
 * The narrowest phones still in use, where the bar does not fit by 23px.
 *
 * Adding the support badge back took the row from 360 to 383 wide on a 360px
 * screen, and the burger went off the edge again — the same failure as before,
 * caught the same way, by measuring rather than looking.
 *
 * Nothing is removed. The logo is allowed to give up its word and keep its
 * mark, the gaps close, and the gutter narrows. Everything that was reachable
 * stays reachable, which is the only rule this bar has.
 */
@media (max-width: 400px) {
	.ogou-sh-wrap { padding-inline: 13px; }
	.ogou-sh-hd > .ogou-sh-wrap { gap: 7px; }
	.ogou-sh-hd-r { gap: 5px; }
	/*
	 * `0 1 auto`, not `0 0 auto`.
	 *
	 * `min-width: 0` on its own changed nothing, because the logo was still
	 * refusing to shrink — a flex item only gives up width when its
	 * shrink factor says it may, and `flex: 0 0 auto` says it may not. The
	 * name then truncates and the mark stays, which is the right thing to
	 * lose last.
	 */
	.ogou-sh-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
	.ogou-sh-logo span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ogou-sh-help { width: 29px; height: 29px; }
	.ogou-sh-burger { width: 44px; height: 40px; }

	/*
	 * The switch needs `!important` here and only here.
	 *
	 * Its rules in `ogou-frontend.css` all carry it — they had to, because on
	 * the old pages the button sits in the host theme's header where Hello
	 * Elementor styles every bare button into a pink lozenge. Those rules
	 * still load, so a plain declaration in this file loses to them and the
	 * button stayed 34px wide while everything around it shrank.
	 */
	.ogou-sh-hd .ogou-theme-sw { width: 29px !important; height: 29px !important; }
}

/*
 * `in srgb`, never `in oklab`, when the other colour is `transparent`.
 *
 * `transparent` is transparent *black*. Interpolating towards it in oklab
 * walks the colour through black on the way, so a card mixed 88% with
 * transparent comes out grey rather than paler — which is exactly what the
 * player bar did: a pale bar was asked for and a dark grey slab arrived, on
 * a white page. In srgb the browser premultiplies and the result is the
 * colour at reduced alpha, which is what "mix with transparent" is meant
 * to mean.
 */

/* -------------------------------------------------------------------------
   The opening band
   ------------------------------------------------------------------------- */

.ogou-sh-hero {
	position: relative;
	padding-block: 52px 0;
	overflow: hidden;
}

/*
 * The wash behind the headline.
 *
 * A radial gradient in the brand, at a few percent, placed off-centre. It is
 * doing one job: giving the top of the page a direction, so the eye starts at
 * the headline rather than anywhere. `color-mix` because the brand token is
 * one colour in daylight and another at night, and the wash has to be the
 * right one of the two without being written down twice.
 */
.ogou-sh-hero::before {
	content: "";
	position: absolute;
	/*
	 * The whole hero, not a 430px box over its top half. The box ended
	 * mid-headline, and at its bottom edge the wash was still a few percent
	 * of brand — so it stopped on a hard horizontal line above the search.
	 * Anchored at the top and faded out by 85% of its reach, it is gone
	 * before the hero ends and there is no edge anywhere.
	 */
	inset: 0;
	background: radial-gradient(
		62% 110% at 30% 0%,
		color-mix(in srgb, var(--ogou-brand) 13%, transparent),
		transparent 85%
	);
	pointer-events: none;
}
.ogou-sh-hero > .ogou-sh-wrap { position: relative; }

.ogou-sh-live {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogou-muted);
	border: 1px solid var(--ogou-line-2);
	border-radius: 999px;
	padding: 6px 14px 6px 10px;
	margin-bottom: 22px;
	text-decoration: none;
}
.ogou-sh-live:hover { color: var(--ogou-text); border-color: var(--ogou-line-3); }
.ogou-sh-live i {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ogou-ok);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--ogou-ok) 55%, transparent);
	animation: ogou-sh-pulse 2.4s ease-out infinite;
}
@keyframes ogou-sh-pulse {
	70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ogou-ok) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ogou-ok) 0%, transparent); }
}

/*
 * 56px, not 76.
 *
 * At seventy-six the headline filled the first screen on its own and the
 * script phrase inside it came out the size of a sign. A headline that large
 * is not emphatic, it is loud — and loud is the other half of what tires
 * somebody reading. The page still opens with it; it just no longer shouts
 * before anything has been said.
 */
.ogou-sh-hero h1 {
	font-size: clamp(31px, 5.2vw, 56px);
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 16px;
	max-width: 19ch;
	text-wrap: balance;
}
.ogou-sh-hero .ogou-sh-sub {
	font-size: 16.5px;
	color: var(--ogou-muted);
	max-width: 46ch;
	margin: 0 0 26px;
}

.ogou-sh-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	padding: 7px 7px 7px 16px;
	background: var(--ogou-card);
	border: 1px solid var(--ogou-line-2);
	border-radius: 15px;
	box-shadow: 0 10px 30px var(--ogou-shade-2);
}
.ogou-sh-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ogou-muted); }
.ogou-sh-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ogou-text);
	font-family: inherit;
	font-size: 15px;
	outline: none;
}
.ogou-sh-search input::placeholder { color: var(--ogou-muted); }
.ogou-sh-search input:focus-visible { outline: none; }
.ogou-sh-search:focus-within { border-color: var(--ogou-line-4); }

.ogou-sh-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.ogou-sh-chips a {
	font-size: 12px;
	font-weight: 600;
	color: var(--ogou-muted);
	text-decoration: none;
	border: 1px solid var(--ogou-line-2);
	border-radius: 999px;
	padding: 5px 12px;
	transition: color .14s ease, border-color .14s ease;
}
.ogou-sh-chips a:hover { color: var(--ogou-text); border-color: var(--ogou-line-3); }

/*
 * The five numbers.
 *
 * They answer the only question a first-time visitor actually has, which is
 * whether any of this is real. A count is the cheapest honest answer there
 * is, so they are read from the database rather than written into the page.
 */
.ogou-sh-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--ogou-line-1);
}
.ogou-sh-figure b {
	display: block;
	font-size: 25px;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.ogou-sh-figure span {
	display: block;
	margin-top: 1px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ogou-muted);
}

@media (max-width: 560px) {
	.ogou-sh-hero { padding-block: 34px 0; }
	.ogou-sh-figures { gap: 14px 22px; }
	.ogou-sh-figure b { font-size: 21px; }
}

/* -------------------------------------------------------------------------
   A section, and its heading
   ------------------------------------------------------------------------- */

.ogou-sh-sec { padding-block: 54px 0; }
@media (max-width: 560px) { .ogou-sh-sec { padding-block: 38px 0; } }

.ogou-sh-sh {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 20px;
}
.ogou-sh-sh h2 {
	font-size: clamp(21px, 3vw, 30px);
	margin: 0;
}
.ogou-sh-sh p {
	margin: 3px 0 0;
	font-size: 13.5px;
	color: var(--ogou-muted);
}
.ogou-sh-sh > a {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--ogou-brand-ink);
	text-decoration: none;
	white-space: nowrap;
}
.ogou-sh-sh > a:hover { text-decoration: underline; }
@media (max-width: 480px) {
	.ogou-sh-sh { flex-wrap: wrap; align-items: baseline; }
	.ogou-sh-sh > a { margin-left: 0; width: 100%; }
}

/*
 * A shelf of cards.
 *
 * `auto-fill` with a floor rather than a column count: the number of columns
 * is then a consequence of how much room there is, and there is no breakpoint
 * to get wrong. 150px is the smallest a cover can be and still be a cover.
 */
.ogou-sh-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px;
}
@media (max-width: 420px) {
	.ogou-sh-shelf { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/*
 * A long title wraps; it does not push the grid.
 *
 * A grid track is `1fr`, which means "an equal share of what is left" — and
 * what is left is computed from the content, so an item that refuses to be
 * narrower than its longest line makes the whole row wider than the window.
 * At 320px "Nan Zòrèy Mwen" was doing exactly that: one card 149px wide in a
 * 140px track, and the page 17px too wide.
 *
 * `min-width: 0` lets the track be the size the grid says, and
 * `overflow-wrap` lets the word break rather than stick out. Stated here
 * rather than inside the card, because it is true of anything put on a shelf
 * and the cards are not the only thing that will be.
 */
.ogou-sh-shelf > *,
.ogou-sh-chart > *,
.ogou-sh-faces > * { min-width: 0; }

.ogou-sh-shelf h4,
.ogou-sh-shelf a,
.ogou-sh-pillar h3 { overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   The chart band
   ------------------------------------------------------------------------- */

/*
 * Deep in both palettes, and that is a question of rhythm rather than colour.
 *
 * A page that is one shade from top to bottom reads as one long thing, and
 * the eye stops looking for where it is. One band that goes dark gives the
 * page a middle — and it makes the chart feel like the result it is, rather
 * than the fourth grid of covers.
 *
 * The ink is `--ogou-text` of the night palette, written out, because the
 * band is dark in both themes and so its text cannot come from a token that
 * flips with them.
 */
.ogou-sh-band {
	margin-top: 56px;
	padding-block: 48px;
	background: var(--ogou-band);
	color: #f6f0e8;
}
.ogou-sh-band .ogou-sh-sh h2 { color: #f6f0e8; }
.ogou-sh-band .ogou-sh-sh p  { color: #a99d90; }
.ogou-sh-band .ogou-sh-sh > a { color: var(--ogou-glow); }

.ogou-sh-chart {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px 16px;
}

.ogou-sh-rank {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.ogou-sh-rank em {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -.07em;
	color: #6e6155;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}
.ogou-sh-rank img {
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border-radius: 9px;
	object-fit: cover;
	background: #2a231b;
}
.ogou-sh-rank div { min-width: 0; }
.ogou-sh-rank b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ogou-sh-rank span {
	display: block;
	font-size: 11.5px;
	color: #a99d90;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ogou-sh-rank:hover b { color: var(--ogou-glow); }

/* -------------------------------------------------------------------------
   Artists
   ------------------------------------------------------------------------- */

.ogou-sh-faces {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 18px 16px;
}
.ogou-sh-face {
	min-width: 0;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.ogou-sh-face img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 9px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ogou-card-2);
	box-shadow: 0 8px 22px var(--ogou-shade-2);
	transition: transform .18s ease;
}
.ogou-sh-face:hover img { transform: translateY(-3px); }
.ogou-sh-face b {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ogou-sh-face span { display: block; font-size: 11px; color: var(--ogou-muted); }

/* -------------------------------------------------------------------------
   Why an artist would come here
   ------------------------------------------------------------------------- */

.ogou-sh-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 24px 22px;
}
.ogou-sh-pillar span {
	display: inline-flex;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: color-mix(in srgb, var(--ogou-brand) 12%, var(--ogou-bg));
	color: var(--ogou-brand-ink);
}
.ogou-sh-pillar span svg { width: 19px; height: 19px; }
.ogou-sh-pillar h3 {
	font-size: 16px;
	letter-spacing: -.02em;
	margin: 0 0 4px;
}
.ogou-sh-pillar p { margin: 0; font-size: 13.5px; color: var(--ogou-muted); }

/* -------------------------------------------------------------------------
   Where the money goes
   ------------------------------------------------------------------------- */

/*
 * The one thing on this page no other music platform prints.
 *
 * It was not on the front page at all, which is the strangest omission in the
 * whole site: the split is the argument. So it is a bar, at the real ratio,
 * with the real figures on a real price — not a pie chart and not a sentence
 * saying "fair".
 */
.ogou-sh-money {
	margin-top: 54px;
	padding: 38px 32px;
	background: var(--ogou-surface);
	border: 1px solid var(--ogou-line-1);
	border-radius: 22px;
}
.ogou-sh-money h2 {
	font-size: clamp(21px, 3vw, 30px);
	margin: 0 0 6px;
}
.ogou-sh-money > p {
	margin: 0 0 24px;
	max-width: 54ch;
	font-size: 14.5px;
	color: var(--ogou-muted);
}

.ogou-sh-split {
	display: flex;
	height: 54px;
	margin-bottom: 14px;
	border-radius: 11px;
	overflow: hidden;
}
.ogou-sh-split span {
	display: flex;
	align-items: center;
	padding-inline: 16px;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
}
.ogou-sh-split .ogou-sh-sp-a { background: var(--ogou-brand); color: var(--ogou-on-accent); }
.ogou-sh-split .ogou-sh-sp-b { background: var(--ogou-card-2); color: var(--ogou-muted); font-size: 11px; padding-inline: 8px; }
.ogou-sh-split .ogou-sh-sp-c { background: var(--ogou-band); color: #f6f0e8; font-size: 12px; }

.ogou-sh-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 12.5px;
	color: var(--ogou-muted);
}
.ogou-sh-legend b { color: var(--ogou-text); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
	.ogou-sh-money { padding: 24px 18px; border-radius: 16px; }
	/* Stacked, because three labels will not fit across a phone and a bar
	   with its words clipped off explains nothing. */
	.ogou-sh-split { flex-direction: column; height: auto; }
	.ogou-sh-split span { padding: 11px 14px; }
}

/* -------------------------------------------------------------------------
   The closing band
   ------------------------------------------------------------------------- */

.ogou-sh-cta {
	margin-top: 54px;
	padding-block: 48px;
	border-top: 1px solid var(--ogou-line-1);
	text-align: center;
}
.ogou-sh-cta h2 {
	font-size: clamp(24px, 4vw, 40px);
	letter-spacing: -.04em;
	margin: 0 0 10px;
}
.ogou-sh-cta p {
	margin: 0 auto 22px;
	max-width: 48ch;
	font-size: 15px;
	color: var(--ogou-muted);
}
.ogou-sh-cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* -------------------------------------------------------------------------
   The footer, which is a site map
   ------------------------------------------------------------------------- */

.ogou-sh-ft {
	margin-top: 10px;
	padding-block: 40px 26px;
	background: var(--ogou-surface);
	border-top: 1px solid var(--ogou-line-1);
}
.ogou-sh-ft-grid {
	display: grid;
	grid-template-columns: 1.7fr repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 820px) { .ogou-sh-ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .ogou-sh-ft-grid { grid-template-columns: 1fr; gap: 22px; } }

.ogou-sh-ft h2 {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ogou-muted);
	margin: 0 0 11px;
}
.ogou-sh-ft-col a {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	color: var(--ogou-text);
	text-decoration: none;
	opacity: .82;
}
.ogou-sh-ft-col a:hover { opacity: 1; color: var(--ogou-brand-ink); }

.ogou-sh-ft-about p {
	margin: 10px 0 14px;
	max-width: 36ch;
	font-size: 13.5px;
	color: var(--ogou-muted);
}

.ogou-sh-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ogou-sh-social a {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ogou-line-2);
	color: var(--ogou-muted);
	text-decoration: none;
	transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.ogou-sh-social a:hover { color: var(--ogou-text); background: var(--ogou-wash-2); border-color: var(--ogou-line-3); }
.ogou-sh-social a svg { width: 16px; height: 16px; }

.ogou-sh-ft-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--ogou-line-1);
	font-size: 12px;
	color: var(--ogou-muted);
}
.ogou-sh-ft-foot a { color: inherit; text-decoration: none; }
.ogou-sh-ft-foot a:hover { color: var(--ogou-text); }

/* -------------------------------------------------------------------------
   Room at the bottom for the player
   ------------------------------------------------------------------------- */

/*
 * The player bar is fixed, so it covers whatever the last thing on the page
 * is. Padding on the shell rather than on the footer: the footer is not on
 * every page and the player is.
 *
 * Only while the bar is actually up. The player script puts
 * `ogou-mini-open` on <body> when it shows the bar and takes it off when it
 * closes it; reserving the room all the time left a blank band under the
 * footer on every page where nothing was playing.
 */
.ogou-shell.has-player .ogou-sh-ft,
.ogou-shell.has-player .ogou-sh-main { padding-bottom: 0; }
.ogou-shell.has-player { padding-bottom: 0; transition: padding-bottom .25s ease; }
.ogou-shell.has-player.ogou-mini-open { padding-bottom: 88px; }

/* -------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */

/*
 * Sections arrive as they come into view, and they do it without JavaScript.
 *
 * `animation-timeline: view()` ties the animation to the element's own
 * progress through the viewport, so there is no scroll listener, no observer
 * and nothing to run on the main thread while somebody is scrolling — which
 * on the phones this site is read on is the whole point.
 *
 * Behind `@supports`, because a browser without it must not be left holding
 * an element at `opacity: 0` forever. Without the feature the rule never
 * applies and the section is simply there, which is the correct fallback.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes ogou-sh-rise {
			from { opacity: 0; transform: translateY(18px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		.ogou-sh-sec,
		.ogou-sh-band,
		.ogou-sh-money,
		.ogou-sh-cta {
			animation: ogou-sh-rise linear both;
			animation-timeline: view();
			/*
			 * Finished by the time the element is a quarter of the way up the
			 * window, and not started until it is just below the fold. A
			 * section that is still fading while somebody is reading it is a
			 * section that is in the way.
			 */
			animation-range: entry 5% cover 26%;
		}

		/* The hero is already on the screen when the page loads; it has
		   nothing to arrive from. */
		.ogou-sh-hero { animation: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.ogou-shell *,
	.ogou-shell *::before,
	.ogou-shell *::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
}

/* -------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------- */

@media print {
	.ogou-sh-hd, .ogou-sh-ft, .ogou-sh-cta, .ogou-sh-search { display: none; }
	.ogou-shell { padding-bottom: 0; background: #fff; color: #000; }
}

/* =========================================================================
   THE BRIDGE

   What happens to the old components when they are put inside the layout.

   They were built for a page with a different shape: the store bled out to
   the window edges because it had to escape a theme's content column; it
   fixed itself at three cards a row because at the width that column left it,
   three was all that fitted; the search box was sized to be the first thing
   on a page that began with it. None of that is true any more. The layout
   gives them a column that is already the right width, and they are now one
   section among seven rather than the whole page.

   So the shell restates their layout — and only their layout. Nothing here
   changes what a card is or how it behaves; it changes how many go in a row
   and how tall they are, which are decisions that belong to the page.

   Scoped under `.ogou-sh-main` throughout. Outside the layout every one of
   these components is exactly what it was.
   ========================================================================= */

/* ---- the store, no longer the whole page ---- */

.ogou-sh-main .ogou-store,
.ogou-sh-main .ogou-library,
.ogou-sh-main .ogou-dash,
.ogou-sh-main .ogou-single,
.ogou-sh-main .ogou-album {
	/*
	 * The full-bleed pull, undone.
	 *
	 * `margin-left: calc(50% - 50vw)` drags a section out to the window edges
	 * and then pads its content back to the middle. That was the only way to
	 * get a band out of a theme's column. Inside the layout it widens a
	 * section that was already the right width and then adds 22px of padding
	 * to a page that already has 24 — so the store sat wider than the header
	 * above it and the footer below, which is why the music page looked like
	 * a different site.
	 */
	/*
	 * `!important` on every line, because that is what is being answered.
	 *
	 * The rules that set these carry `!important` themselves — the store has
	 * been fighting a page builder for its own width and its own padding for
	 * a year, and won that fight by shouting. Specificity does not settle it:
	 * an `!important` declaration beats a plain one however specific the
	 * selector. So this matches it, and only on the properties in dispute.
	 *
	 * What it undoes: the full-bleed pull out to the window edges, which
	 * existed solely to escape a theme's content column; the 32px panel
	 * padding inside a column that already has its own; and the panel itself.
	 */
	width: auto !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow-x: visible;

	/*
	 * A column, not nothing.
	 *
	 * The first version of this rule set `margin: 0; padding: 0` and stopped
	 * there, which took the full-bleed pull off and left the section with no
	 * width at all. On the store that was invisible, because the store is
	 * inside `.ogou-page-main`, which has a column of its own. A track page is
	 * not: `single-track.php` puts `.ogou-single` straight into `<main>`, so
	 * removing its padding put the cover against the window edge and the page
	 * came apart.
	 *
	 * The same 1140 as every other band, so a track page lines up with the bar
	 * above it. A section that is already inside a column inherits a second
	 * `auto` margin and a few more pixels of gutter, which costs nothing.
	 */
	max-width: 1140px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

@media (max-width: 560px) {
	.ogou-sh-main .ogou-store,
	.ogou-sh-main .ogou-library,
	.ogou-sh-main .ogou-dash,
	.ogou-sh-main .ogou-single,
	.ogou-sh-main .ogou-album { padding: 0 16px !important; }
}

/*
 * A section inside the page column does not need a second gutter.
 */
.ogou-sh-main .ogou-page-main .ogou-store,
.ogou-sh-main .ogou-page-main .ogou-library,
.ogou-sh-main .ogou-page-main .ogou-dash { padding: 0 !important; }

/*
 * As many cards as fit, not three.
 *
 * Three was right for a narrow column and is wrong for the full width: at
 * 1400px it makes a cover 420px across, which is a poster, not a shelf. The
 * same `auto-fill` the home page uses puts six or seven there and the cards
 * stay the size a card should be.
 */
.ogou-sh-main .ogou-store .ogou-grid,
.ogou-sh-main .ogou-store .ogou-grid-public,
.ogou-sh-main .ogou-library .ogou-grid {
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 18px;
}

@media (max-width: 480px) {
	.ogou-sh-main .ogou-store .ogou-grid,
	.ogou-sh-main .ogou-store .ogou-grid-public,
	.ogou-sh-main .ogou-library .ogou-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* The search box is a control on a page, not the page's headline. */
.ogou-sh-main .ogou-search { max-width: 620px; margin-inline: auto; }
.ogou-sh-main .ogou-search input[type="search"] {
	background: var(--ogou-card);
	color: var(--ogou-text);
	border: 1px solid var(--ogou-line-2);
	font-size: 15px;
	padding: 13px 16px;
}
.ogou-sh-main .ogou-search input[type="search"]::placeholder { color: var(--ogou-muted); }

/* ---- a card on a shelf ---- */

/*
 * Every card the same height, with its price and button along the bottom.
 *
 * A card is as tall as what is in it, and what is in it varies: one track has
 * a `feat.` line, another's artist name wraps to two, a third has no genre.
 * So the row came out ragged and the buy buttons sat at five different
 * heights — which is the thing that made the shelf look unfinished.
 *
 * A column that grows and a footer pushed down by `margin-top: auto` fixes it
 * without anybody having to measure anything, and it keeps working when a
 * title arrives next year that is longer than any of these.
 */
.ogou-sh-main .ogou-sh-shelf > .ogou-card,
.ogou-sh-main .ogou-grid > .ogou-card,
.ogou-sh-main .ogou-grid-public > .ogou-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ogou-sh-main .ogou-card > .ogou-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.ogou-sh-main .ogou-card .ogou-card-foot,
.ogou-sh-main .ogou-card .ogou-card-actions,
.ogou-sh-main .ogou-card .ogou-card-stats {
	margin-top: auto;
	padding-top: 10px;
}

/*
 * A button's label does not break.
 *
 * "Download" came back as three lines — "Do / wnl / oad" — because the price
 * beside it is two lines of its own and the button was given what was left.
 * A control whose text has been broken mid-word is a control nobody trusts.
 * It keeps its words; the row wraps instead.
 */
.ogou-sh-main .ogou-card .ogou-btn,
.ogou-sh-main .ogou-card a.ogou-btn,
.ogou-sh-main .ogou-card button.ogou-btn {
	white-space: nowrap;
	flex: 0 0 auto;
}
.ogou-sh-main .ogou-card .ogou-card-stats,
.ogou-sh-main .ogou-card .ogou-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.ogou-sh-main .ogou-card .ogou-price { white-space: nowrap; }

/* The cover is square, and stays square however wide the card gets. */
.ogou-sh-main .ogou-card .ogou-cover {
	aspect-ratio: 1 / 1;
	height: auto;
	flex: 0 0 auto;
}

/* ---- the bar along the bottom ---- */

/*
 * The player follows the page.
 *
 * It was a dark glass bar, always, because the site was always dark. On a
 * light page it is the one piece of furniture still wearing the old theme —
 * and it is on every page, so it is the piece that makes the rest look
 * half-finished.
 *
 * `--ogou-card` rather than a colour of its own: at night it is the dark bar
 * it always was, and in daylight it is a pale one, without either being
 * written down here.
 */
/*
 * Nothing here for the player.
 *
 * The bar is styled against `#ogou-mini` in `Ogou_Player`, and an id beats
 * every class selector this file could write. So it is fixed where it is
 * declared — see that class for why — and this is the note that stops
 * somebody adding a rule here that silently does nothing.
 */

/* ---- the menu button ---- */

/*
 * `!important`, and only on `display`.
 *
 * The burger was showing on a desktop beside a full navigation bar, wearing a
 * pink border. Both come from the same place: the page builder resets every
 * `button` on the page, and the plugin's own stylesheet has been carrying a
 * block of armour against that reset for a year — see `Ogou_Assets::armor_css`.
 * The layout now strips the builder on its own pages, which removes the
 * border; this is the belt to that braces, because a menu that appears when
 * it should not is confusing and a menu that vanishes when it should not is
 * a page nobody can navigate.
 *
 * Nothing else here is marked. Only the two states of one property.
 */
.ogou-sh-burger { display: none !important; }

@media (max-width: 900px) {
	.ogou-sh-burger { display: inline-flex !important; }
}

/* =========================================================================
   ELEVATION

   Two complaints, one cause.

   "The shadows on the grid are too much, it doesn't look modern", and "the
   grids are inside a block, which is distracting". They are the same thing:
   every card carried `0 18px 46px` of shadow, and five cards in a row at 18px
   gaps have shadows that overlap. What overlaps does not read as five
   shadows. It reads as one soft rectangle behind the whole shelf — a panel
   nobody drew, with no edge anybody can point at, which is exactly why it is
   distracting rather than simply ugly.

   So the fix is not to tidy the panel. It is to stop making it.

   A card on a page does not need to float. It needs to be separable from the
   page and from the card beside it, and a one-pixel line does that at a
   quarter of the cost. Lift is kept for the things that genuinely sit above
   the page — the bar along the bottom, a dialog, the drawer — and for the
   moment a card is pointed at, where a small tight shadow is information
   rather than decoration.

   Named as a scale so there is somewhere to put the next one:

     --ogou-e0   on the page. No shadow. A line.
     --ogou-e1   pointed at. 6px, close, barely there.
     --ogou-e2   above the page: the player, a sheet, the drawer.
     --ogou-e3   over everything: a dialog.
   ========================================================================= */

.ogou-shell {
	--ogou-e0: none;
	--ogou-e1: 0 2px 6px var(--ogou-shade-1);
	--ogou-e2: 0 6px 20px var(--ogou-shade-2);
	--ogou-e3: 0 18px 50px var(--ogou-shade-3);
}

/*
 * Cards sit on the page.
 *
 * `!important` because the rules being answered carry it — the same reason
 * the store's width needed it. The inset white hairline goes with the
 * shadow: it was the top edge of a raised object, and nothing here is
 * raised any more. A border and a radius are the whole card now.
 */
.ogou-sh-main .ogou-card,
.ogou-sh-main .ogou-sh-shelf > .ogou-card,
.ogou-sh-main .ogou-grid > .ogou-card,
.ogou-sh-main .ogou-grid-public > .ogou-card {
	box-shadow: var(--ogou-e0) !important;
	border: 1px solid var(--ogou-line-1) !important;
	border-radius: 16px !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background-image: none !important;
	background-color: var(--ogou-card) !important;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/*
 * Pointed at: a small lift and a line that darkens.
 *
 * Four pixels of travel was a bounce. Two is a response.
 */
.ogou-sh-main .ogou-card:hover {
	box-shadow: var(--ogou-e1) !important;
	border-color: var(--ogou-line-3) !important;
	transform: translateY(-2px) !important;
}

/*
 * No glow on a button.
 *
 * `0 8px 22px rgba(255,90,31,.30)` under an orange button puts an orange
 * haze on the page around it. It was there to make the button feel pressable
 * on a dark page; on a light one it reads as a smudge, and it is the second
 * thing making the shelf look soft.
 */
.ogou-sh-main .ogou-btn,
.ogou-sh-main a.ogou-btn,
.ogou-sh-main button.ogou-btn,
.ogou-sh-main .ogou-pill.active,
.ogou-sh-main .ogou-page.active {
	box-shadow: none !important;
}
.ogou-sh-main .ogou-btn:hover,
.ogou-sh-main a.ogou-btn:hover,
.ogou-sh-main button.ogou-btn:hover {
	box-shadow: none !important;
	transform: none !important;
	filter: brightness(1.06);
}

/* The shelf's own figures and faces, to the same scale. */
.ogou-sh-face img { box-shadow: var(--ogou-e0); border: 1px solid var(--ogou-line-1); }
.ogou-sh-face:hover img { box-shadow: var(--ogou-e1); }
.ogou-sh-search { box-shadow: var(--ogou-e0); }
.ogou-sh-search:focus-within { box-shadow: var(--ogou-e1); }

/* What is genuinely above the page keeps its lift. */
.ogou-shell .ogou-modal,
.ogou-shell .ogou-queue-panel,
.ogou-shell .ogou-appmenu-sheet { box-shadow: var(--ogou-e3); }

/* =========================================================================
   ARMOUR

   The shell's own controls, defended the way the old ones already are.

   `Ogou_Assets::armor_css()` has carried a block like this for a year, with
   the comment explaining why: a page builder resets every `button` and
   `input` on the page, and a control styled only in our own stylesheet loses
   that fight. The shell's buttons were written without it, on the assumption
   that stripping the builder on these pages was enough — and the search
   button came back white with a red outline anyway.

   Stripping it is still the real fix and it is done (see `Ogou_Lean`). This
   is the belt to that braces, because the builder is not the only thing that
   styles a bare `button`: a theme does, the next theme will, and an operator
   who turns the layout off but keeps the shell stylesheet would see the same
   thing. Marked only on the properties that decide what a button looks like
   — never on layout, never on anything another rule here needs to win.
   ========================================================================= */

.ogou-shell .ogou-sh-b,
.ogou-shell a.ogou-sh-b,
.ogou-shell button.ogou-sh-b {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	padding: 10px 17px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	border-radius: 999px !important;
	border: 1px solid var(--ogou-line-2) !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--ogou-text) !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.ogou-shell .ogou-sh-b-p,
.ogou-shell a.ogou-sh-b-p,
.ogou-shell button.ogou-sh-b-p {
	background: var(--ogou-brand) !important;
	border-color: transparent !important;
	color: var(--ogou-on-accent) !important;
}

.ogou-shell .ogou-sh-b-lg { font-size: 14.5px !important; padding: 13px 25px !important; }

.ogou-shell .ogou-sh-b:hover { background: var(--ogou-wash-2) !important; }
.ogou-shell .ogou-sh-b-p:hover { background: var(--ogou-brand) !important; filter: brightness(1.07); }

/* The field beside it, for the same reason. */
.ogou-shell .ogou-sh-search input[type="search"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--ogou-text) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	height: auto !important;
}

/* And the three small round controls in the bar. */
.ogou-shell .ogou-sh-help,
.ogou-shell .ogou-sh-burger,
.ogou-shell .ogou-theme-sw {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background-image: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	/* The border too: the theme's accent is what drew a pink ring around
	   the menu button on a phone. One colour, one width, ours. */
	border: 1px solid var(--ogou-line-2) !important;
	background-color: transparent !important;
	color: var(--ogou-text) !important;
}
.ogou-shell .ogou-sh-burger { border-radius: 10px !important; }
.ogou-shell .ogou-sh-help,
.ogou-shell .ogou-theme-sw { border-radius: 50% !important; color: var(--ogou-muted) !important; }

/* =========================================================================
   ON A PHONE

   The front page was ten thousand seven hundred pixels tall.

   Everything had been made to stack: six cards became three rows of two,
   seven artists became three rows of circles with one left over on its own,
   four reasons to join became four full-width blocks. Each of those decisions
   is reasonable on its own and together they turn a front page into a
   twenty-six-screen scroll, which is why it reads as badly arranged rather
   than merely long.

   A shelf of records is the one thing a phone already knows how to do, and
   every music app on the device does it the same way: the row runs sideways
   and the next record is half-visible at the edge, which is what tells you
   there is more. It shows the same six records in a fifth of the height, and
   it is the same gesture people already use everywhere else.

   So on a phone the shelves scroll sideways, the reasons go two across, and
   the figures sit on one line. The store keeps its grid — a page somebody
   opened to browse should show as much as it can at once, which is the
   opposite thing and wants the opposite answer.
   ========================================================================= */

@media (max-width: 680px) {

	/* ---- a shelf runs sideways ---- */

	.ogou-sh-shelf {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 46vw;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;

		/*
		 * Out to the edges, and padded back.
		 *
		 * A row that stops at the page gutter looks like it has ended. Letting
		 * it run to the screen edge and putting the gutter inside it instead
		 * means the next card is cut by the screen rather than by a margin,
		 * which is the whole signal that there is more to the right.
		 */
		margin-inline: -16px;
		padding-inline: 16px;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.ogou-sh-shelf::-webkit-scrollbar { display: none; }
	.ogou-sh-shelf > * { scroll-snap-align: start; }

	/* ---- so does the row of artists ---- */

	.ogou-sh-faces {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 86px;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		margin-inline: -16px;
		padding-inline: 16px;
		scrollbar-width: none;
	}
	.ogou-sh-faces::-webkit-scrollbar { display: none; }

	/* ---- four reasons, two at a time ---- */

	.ogou-sh-pillars { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
	.ogou-sh-pillar span { width: 32px; height: 32px; margin-bottom: 9px; }
	.ogou-sh-pillar span svg { width: 16px; height: 16px; }
	.ogou-sh-pillar h3 { font-size: 14.5px; }
	.ogou-sh-pillar p { font-size: 12.5px; }

	/* ---- the figures on one line ---- */

	.ogou-sh-figures {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 14px 10px;
		margin-top: 26px;
		padding-top: 20px;
	}
	.ogou-sh-figure b { font-size: 19px; }
	.ogou-sh-figure span { font-size: 9.5px; letter-spacing: .09em; }

	/* ---- the chart, two across ---- */

	.ogou-sh-chart { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
	.ogou-sh-rank { gap: 9px; }
	.ogou-sh-rank em { font-size: 28px; }
	.ogou-sh-rank img { width: 42px; height: 42px; }
	.ogou-sh-rank b { font-size: 12.5px; }
	.ogou-sh-rank span { font-size: 10.5px; }

	/* ---- less air between bands ---- */

	.ogou-sh-sec { padding-block: 34px 0; }
	.ogou-sh-band { margin-top: 36px; padding-block: 32px; }
	.ogou-sh-money { margin-top: 34px; }
	.ogou-sh-cta { margin-top: 34px; padding-block: 34px; }
	.ogou-sh-sh { margin-bottom: 14px; }

	/* ---- the footer, two columns rather than four stacked ---- */

	.ogou-sh-ft-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
	.ogou-sh-ft-about { grid-column: 1 / -1; }
	.ogou-sh-ft { padding-block: 30px 22px; }
}

@media (max-width: 380px) {
	.ogou-sh-shelf { grid-auto-columns: 54vw; }
	.ogou-sh-chart { grid-template-columns: 1fr; }
}

/*
 * A row that scrolls does not animate itself into view.
 *
 * `animation-timeline: view()` on a horizontally scrolling element fights the
 * element's own scrolling, and on a phone that reads as the row stuttering
 * under a thumb.
 */
@supports (animation-timeline: view()) {
	@media (max-width: 680px) {
		.ogou-sh-sec, .ogou-sh-band, .ogou-sh-money, .ogou-sh-cta { animation: none; }
	}
}

/*
 * The radio dock stays hidden when it says it is hidden.
 *
 * `[hidden]` is a UA rule — `display: none` at the lowest weight there is —
 * so any author rule that sets `display` on the element beats it. The dock
 * was given a class for the dark-panel contract and inherited a `display`
 * along with it, which is how an empty pale rectangle ended up pinned to the
 * bottom-right corner of every page.
 */
#ogou-radio-dock[hidden],
.ogou[hidden],
.ogou-shell [hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   A track page is not a card

   The cover carried `0 40px 90px` of shadow and a white hairline across its
   top — the same raised-object treatment the cards had, at four times the
   size. On a pale page that reads as a panel somebody drew around the whole
   page, which is what "it is inside a section" means. There is no section;
   there is one very large shadow.

   Same elevation scale as everything else: the artwork is a picture on the
   page, with a line around it so it has an edge.
   ------------------------------------------------------------------------- */

.ogou-sh-main .ogou-single-cover,
.ogou-sh-main .ogou-album-cover,
.ogou-sh-main .ogou-artist-hero {
	box-shadow: var(--ogou-e0) !important;
	border: 1px solid var(--ogou-line-1) !important;
}

.ogou-sh-main .ogou-single-inner { gap: 36px; }

@media (max-width: 820px) {
	/* The cover stops being a full-width square: at 390px that is 390px of
	   artwork before a single word of the track. */
	.ogou-sh-main .ogou-single-inner { gap: 20px; }

	/*
	 * `width`, not `max-width`.
	 *
	 * The first version said `max-width: 280px; margin-inline: auto`, which
	 * reads as "no wider than 280, centred" and is not what a grid item
	 * hears. With auto margins on both sides and no width of its own, the
	 * item shrinks to its content — and its content is a picture positioned
	 * absolutely, which has no size. The cover came out two pixels square:
	 * the border, and nothing inside it. On a phone the track page opened
	 * with the genre label and no artwork at all.
	 */
	.ogou-sh-main .ogou-single-cover {
		width: min(280px, 100%);
		max-width: none;
		margin-inline: auto;
		justify-self: center;
	}
}

/* -------------------------------------------------------------------------
   The page column

   Lived in `page-ogou.php` as an inline rule, which meant only the pages
   that template drew got a column. The affiliate page, routed through the
   layout from its own plugin, printed `.ogou-page-main` and got nothing —
   content against the window edge. A rule that any page may need belongs
   where any page can reach it.
   ------------------------------------------------------------------------- */
.ogou-sh-main > .ogou-page-main { max-width: 1140px; margin: 0 auto; padding: 26px 24px 48px; }
@media (max-width: 560px) { .ogou-sh-main > .ogou-page-main { padding: 18px 16px 34px; } }

/*
 * Text that is only for a screen reader.
 *
 * `.screen-reader-text` is WordPress's own convention, and every theme
 * defines it — which is how it came to be undefined here: the layout prints
 * the document, the theme's stylesheet is stripped, and the label in front of
 * the search field, which was never meant to be seen, was seen. It read
 * "Search" twice in a row.
 *
 * This is the pattern WordPress itself uses: still in the document for
 * assistive technology, clipped to nothing for everyone else.
 */
.ogou-shell .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* =========================================================================
   THE SCALE

   "The old site was easier." It was: it was louder.

   The old header was fifteen-pixel capitals in bold on a dark bar. The old
   store was three cards across, each cover the width of a hand. The old
   buttons were tall and orange and could not be missed. None of it was
   subtle and all of it could be used with a thumb, in sunlight, by somebody
   who was not reading carefully — which is the person every music site is
   actually built for.

   The first version of this design traded that for finish: thirteen-pixel
   grey navigation, cards a hundred and seventy pixels wide, buttons sized to
   look tidy. It photographs better and it is harder to use, and the second
   of those is the one that counts.

   So the scale goes back up. Not to the old site's volume — the type was
   shouting — but to a size where every control is obviously a control and
   every cover is obviously a record. This block overrides the sizes stated
   earlier in the file; they are left in place so the reasoning above them
   still reads, and because what changed is the number, not the idea.
   ========================================================================= */

/* ---- the bar: things you can read from arm's length ---- */

.ogou-sh-hd > .ogou-sh-wrap { padding-block: 14px; gap: 26px; }
.ogou-sh-logo { font-size: 21px; }
.ogou-sh-logo img { height: 36px; }
.ogou-sh-nav { gap: 6px; }
.ogou-sh-nav a {
	font-size: 15px;
	font-weight: 700;
	color: var(--ogou-text);
	padding: 8px 13px;
	border-radius: 10px;
}
.ogou-sh-nav a[aria-current] { background: var(--ogou-wash-2); }

/* ---- buttons: tall enough for a thumb ---- */

.ogou-shell .ogou-sh-b,
.ogou-shell a.ogou-sh-b,
.ogou-shell button.ogou-sh-b { font-size: 14.5px !important; padding: 11px 19px !important; }
.ogou-shell .ogou-sh-b-lg { font-size: 16px !important; padding: 15px 28px !important; }

/* ---- sections: headings that announce ---- */

.ogou-sh-sh h2 { font-size: clamp(24px, 3.4vw, 34px); }
.ogou-sh-sh p { font-size: 14.5px; }
.ogou-sh-sh > a { font-size: 14.5px; }
.ogou-sh-sec { padding-block: 48px 0; }

/* ---- a shelf: covers the width of a hand ---- */

.ogou-sh-shelf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.ogou-sh-main .ogou-store .ogou-grid,
.ogou-sh-main .ogou-store .ogou-grid-public,
.ogou-sh-main .ogou-library .ogou-grid {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

/* ---- a card: a title you can read, a button you can press ---- */

.ogou-sh-main .ogou-card .ogou-card-body h4 { font-size: 16px; }
.ogou-sh-main .ogou-card .ogou-by,
.ogou-sh-main .ogou-card .ogou-artist { font-size: 13.5px; }
.ogou-sh-main .ogou-card .ogou-price { font-size: 15px; }
.ogou-sh-main .ogou-card .ogou-btn,
.ogou-sh-main .ogou-card a.ogou-btn,
.ogou-sh-main .ogou-card button.ogou-btn {
	font-size: 14px !important;
	padding: 10px 19px !important;
	border-radius: 999px !important;
}

/* ---- the hero: a little shorter, a lot more direct ---- */

.ogou-sh-hero { padding-block: 44px 0; }
.ogou-sh-hero h1 { font-size: clamp(32px, 5.4vw, 58px); }
.ogou-sh-hero .ogou-sh-sub { font-size: 17px; margin-bottom: 22px; }
.ogou-sh-search { max-width: 640px; padding: 8px 8px 8px 18px; }
.ogou-sh-search input { font-size: 16px; }
.ogou-sh-chips a { font-size: 13.5px; padding: 7px 14px; }

/* ---- the footer: WhatsApp as a thing you press ---- */

.ogou-sh-wa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 11px 18px;
	border-radius: 999px;
	background: #25d366;
	color: #0a2e18;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}
.ogou-sh-wa:hover { filter: brightness(1.05); color: #0a2e18; }
.ogou-sh-wa svg { width: 17px; height: 17px; }
.ogou-sh-social a { width: 38px; height: 38px; }
.ogou-sh-social a svg { width: 18px; height: 18px; }
.ogou-sh-ft-col a { font-size: 14.5px; margin-bottom: 9px; }

/* ---- on a phone: bigger covers, fewer words ---- */

@media (max-width: 680px) {
	.ogou-sh-shelf { grid-auto-columns: 60vw; gap: 14px; }
	.ogou-sh-faces { grid-auto-columns: 96px; }
	.ogou-sh-sh h2 { font-size: 24px; }
	.ogou-sh-hero h1 { font-size: 34px; }
	.ogou-sh-hero .ogou-sh-sub { font-size: 16px; }
	.ogou-sh-nav a { font-size: 16px; }
	.ogou-sh-drawer a { font-size: 17px; padding: 14px 2px; }
	.ogou-shell .ogou-sh-b-lg { width: 100%; }
	.ogou-sh-cta-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 380px) {
	.ogou-sh-shelf { grid-auto-columns: 68vw; }
}

/* The bigger bar needs the phone rules from 680 down, not only from 400:
   at 430 the logo at its new size pushed the burger 19px off the edge. */
@media (max-width: 680px) {
	.ogou-sh-hd > .ogou-sh-wrap { gap: 10px; }
	.ogou-sh-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 18px; }
	.ogou-sh-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ogou-sh-logo img { height: 30px; }
}

/* =========================================================================
   THE CARD, AS IT WAS DRAWN

   The mockup that was agreed on has a card with no box around it. The cover
   is the card: a rounded square of artwork with a small white play button in
   its corner, and under it, sitting directly on the page, the title, the
   artist, the price on the left and a short pill on the right. Nothing is
   framed, because the artwork is the frame.

   What shipped instead was the old card wearing new colours — a bordered
   box with the artwork inside it, the play button hidden until hover, and
   the price and button stacked in a footer. "Make these grids for light too,
   really do it" is the request to build what was shown, not a version of it.

   So this restates the card from the outside, on the real markup, under the
   layout only. `!important` where the old stylesheet uses it, which is most
   places, because the old card defends itself against a page builder on
   every line.
   ========================================================================= */

/* ---- no box ---- */

.ogou-sh-main .ogou-card,
.ogou-sh-main .ogou-sh-shelf > .ogou-card,
.ogou-sh-main .ogou-grid > .ogou-card,
.ogou-sh-main .ogou-grid-public > .ogou-card {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}
.ogou-sh-main .ogou-card:hover {
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ---- the cover is the card ---- */

.ogou-sh-main .ogou-card .ogou-cover {
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: var(--ogou-e1) !important;
	background: var(--ogou-card-2) !important;
	transition: transform .18s ease, box-shadow .18s ease !important;
}
.ogou-sh-main .ogou-card:hover .ogou-cover {
	transform: translateY(-3px);
	box-shadow: var(--ogou-e2) !important;
}
/* The dark gradient the old card pulled over the bottom of every cover on
   hover: artwork does not need a shadow laid on it to be artwork. */
.ogou-sh-main .ogou-card .ogou-cover::after { display: none !important; }

/* ---- the play button lives in the corner and is always there ---- */

.ogou-sh-main .ogou-card .ogou-cover .ogou-play-overlay {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	right: 10px !important;
	bottom: 10px !important;
	transform: none !important;
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	opacity: 1 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .94) !important;
	color: #141414 !important;
	font-size: 15px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transition: transform .14s ease !important;
}
.ogou-sh-main .ogou-card .ogou-cover .ogou-play-overlay:hover { transform: scale(1.08) !important; }
.ogou-sh-main .ogou-card .ogou-cover .ogou-play-overlay svg { fill: #141414 !important; }

/* The three small pills along the top of the cover stay, quieter. */
.ogou-sh-main .ogou-card .ogou-cover .ogou-like,
.ogou-sh-main .ogou-card .ogou-cover .ogou-queue-add,
.ogou-sh-main .ogou-card .ogou-cover .ogou-share {
	width: 32px !important;
	height: 32px !important;
	top: 9px !important;
	font-size: 11px !important;
}

/* ---- the words, on the page ---- */

.ogou-sh-main .ogou-card > .ogou-card-body {
	padding: 11px 2px 0 !important;
	background: transparent !important;
}
.ogou-sh-main .ogou-card .ogou-card-body h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 3px !important;
	letter-spacing: -.01em;
}
.ogou-sh-main .ogou-card .ogou-by {
	font-size: 12.5px !important;
	color: var(--ogou-muted) !important;
	margin: 0 0 2px !important;
}
.ogou-sh-main .ogou-card .ogou-by .ogou-artist { color: var(--ogou-muted) !important; font-weight: 600 !important; }
.ogou-sh-main .ogou-card .ogou-by .ogou-artist:hover { color: var(--ogou-brand-ink) !important; }
.ogou-sh-main .ogou-card .ogou-card-body .ogou-genre {
	font-size: 9.5px !important;
	letter-spacing: .12em !important;
	margin: 0 0 8px !important;
	color: var(--ogou-muted) !important;
	opacity: .8;
}

/* ---- price left, pill right, one line ---- */

.ogou-sh-main .ogou-card .ogou-card-stats,
.ogou-sh-main .ogou-card .ogou-card-foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}
.ogou-sh-main .ogou-card .ogou-price {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--ogou-text) !important;
	background: none !important;
	padding: 0 !important;
	font-variant-numeric: tabular-nums;
}
.ogou-sh-main .ogou-card .ogou-price.is-free { color: var(--ogou-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
.ogou-sh-main .ogou-card .ogou-btn,
.ogou-sh-main .ogou-card a.ogou-btn,
.ogou-sh-main .ogou-card button.ogou-btn {
	font-size: 11.5px !important;
	font-weight: 800 !important;
	padding: 7px 14px !important;
	border-radius: 999px !important;
	background: var(--ogou-brand) !important;
	background-image: none !important;
	color: var(--ogou-on-accent) !important;
	box-shadow: none !important;
	line-height: 1 !important;
}
.ogou-sh-main .ogou-card .ogou-btn:hover { filter: brightness(1.07); transform: none !important; }

/* ---- the shelf, with the air the drawing had ---- */

.ogou-sh-shelf,
.ogou-sh-main .ogou-store .ogou-grid,
.ogou-sh-main .ogou-store .ogou-grid-public,
.ogou-sh-main .ogou-library .ogou-grid { gap: 22px 18px; }

/* ---- the search box floats; it is the one thing that should ---- */

.ogou-sh-search { box-shadow: 0 10px 30px var(--ogou-shade-2); }
.ogou-sh-search:focus-within { box-shadow: 0 14px 36px var(--ogou-shade-3); }

/* =========================================================================
   THE BAR, FIXED

   Sticky was the right idea and the wrong mechanism. `position: sticky`
   stops working the moment any ancestor has `overflow` set, and the shell
   sets `overflow-x: hidden` on the body to stop a full-bleed band scrolling
   the page sideways — so on the live site the bar scrolled away with
   everything else, and the request came back as "make it fixed".

   Fixed it is. The page gets the bar's height as padding so nothing starts
   under it, and the bar takes a faint shadow once the page has moved, so it
   reads as sitting on the content rather than painted on it. The admin bar
   is handled the same way as before: pinned above on a desktop, scrolled
   away on a phone.
   ========================================================================= */

.ogou-sh-hd {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: color-mix(in srgb, var(--ogou-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid var(--ogou-line-1);
	transition: box-shadow .18s ease, border-color .18s ease;
}
.ogou-sh-hd.is-scrolled {
	box-shadow: 0 6px 24px var(--ogou-shade-2);
	border-bottom-color: transparent;
}

/* Room for it. The bar is 66px on a desktop and 58px on a phone; the hero's
   negative margin is dropped because there is nothing left above it to pull
   up into. */
.ogou-shell { padding-top: 66px; }
.ogou-sh-main { padding-top: 28px; }
.ogou-sh-main > .ogou-sh-hero:first-child { margin-top: -28px; }
@media (max-width: 680px) {
	.ogou-shell { padding-top: 58px; }
	.ogou-sh-main { padding-top: 18px; }
	.ogou-sh-main > .ogou-sh-hero:first-child { margin-top: -18px; }
}

body.admin-bar .ogou-sh-hd { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ogou-sh-hd { top: 46px; } }

/* The drawer opens under a fixed bar, so it has to scroll on its own. */
.ogou-sh-drawer { max-height: calc(100vh - 58px); overflow-y: auto; }

/* ---- WhatsApp, with the questions prepared ---- */

.ogou-sh-wa-menu { position: relative; display: inline-block; margin: 0 0 14px; }
.ogou-sh-wa-menu > summary { list-style: none; cursor: pointer; margin: 0; }
.ogou-sh-wa-menu > summary::-webkit-details-marker { display: none; }
.ogou-sh-wa-menu[open] > summary { filter: brightness(.96); }

.ogou-sh-wa-list {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 30;
	min-width: 280px;
	max-width: min(360px, calc(100vw - 32px));
	padding: 8px;
	background: var(--ogou-card);
	border: 1px solid var(--ogou-line-2);
	border-radius: 14px;
	box-shadow: var(--ogou-e3);
}
.ogou-sh-wa-list p {
	margin: 4px 10px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogou-muted);
}
.ogou-sh-wa-list a {
	display: block;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--ogou-text);
	text-decoration: none;
	opacity: 1;
	margin: 0;
}
.ogou-sh-wa-list a:hover { background: var(--ogou-wash-2); color: var(--ogou-text); }
.ogou-sh-wa-list a.is-plain { color: var(--ogou-muted); border-top: 1px solid var(--ogou-line-1); margin-top: 4px; border-radius: 0 0 9px 9px; }

/* In the footer the list opens upward; on a phone there may be no room, so
   it opens downward and the page simply grows. */
@media (max-width: 680px) {
	.ogou-sh-wa-list { position: static; margin-top: 10px; max-width: none; }
}

/* =========================================================================
   SIGN IN — a clean card

   The sign-in card was a dark panel on a white page, and it was alone on
   that page: the page carrying it was never one the plugin owned, so it had
   no bar across the top and no footer, just a floating dark box. Now the
   page is owned (see `Ogou_Pages::pages()`), so it has the bar — and the
   card itself follows the page: card colour, hairline, a soft lift, nothing
   glassy, nothing glossy. The buttons are flat brand, like every other
   button in the design.
   ========================================================================= */

.ogou-sh-main .ogou-auth { padding: 30px 16px 60px; }

.ogou-sh-main .ogou-auth-card {
	max-width: 440px;
	padding: 34px 32px 30px;
	background: var(--ogou-card) !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1px solid var(--ogou-line-1) !important;
	border-radius: 22px !important;
	box-shadow: var(--ogou-e2) !important;
	color: var(--ogou-text) !important;
}

.ogou-sh-main .ogou-auth-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ogou-brand-ink) !important;
}
.ogou-sh-main .ogou-auth-card h2,
.ogou-sh-main #ogou-auth-title {
	font-size: 28px !important;
	letter-spacing: -.03em;
	margin: 6px 0 20px !important;
	color: var(--ogou-text) !important;
}

/* The two tabs: a pill group, like the language pills in the bar. */
.ogou-sh-main .ogou-auth-tabs {
	display: flex !important;
	gap: 4px !important;
	padding: 4px !important;
	margin: 0 0 22px !important;
	background: var(--ogou-wash-2) !important;
	border: 1px solid var(--ogou-line-1) !important;
	border-radius: 999px !important;
}
.ogou-sh-main .ogou-auth-tab,
.ogou-sh-main html body .ogou-auth-tab {
	flex: 1 1 0 !important;
	padding: 10px 14px !important;
	border-radius: 999px !important;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--ogou-muted) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	text-align: center;
}
.ogou-sh-main .ogou-auth-tab.is-on,
.ogou-sh-main .ogou-auth-tab.active,
.ogou-sh-main .ogou-auth-tab[aria-selected="true"] {
	background: var(--ogou-card) !important;
	color: var(--ogou-text) !important;
	box-shadow: var(--ogou-e1) !important;
}

.ogou-sh-main .ogou-auth-card label,
.ogou-sh-main .ogou-auth-form label {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogou-muted) !important;
	margin: 0 0 6px !important;
}
.ogou-sh-main .ogou-auth-card input[type="text"],
.ogou-sh-main .ogou-auth-card input[type="email"],
.ogou-sh-main .ogou-auth-card input[type="password"] {
	background: var(--ogou-bg) !important;
	border: 1px solid var(--ogou-line-2) !important;
	border-radius: 12px !important;
	padding: 13px 14px !important;
	font-size: 15px !important;
	color: var(--ogou-text) !important;
}
.ogou-sh-main .ogou-auth-card input:focus { border-color: var(--ogou-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ogou-brand) 18%, transparent) !important; }

.ogou-sh-main .ogou-auth-card .ogou-btn,
.ogou-sh-main .ogou-auth-card .ogou-btn-block {
	background: var(--ogou-brand) !important;
	background-image: none !important;
	color: var(--ogou-on-accent) !important;
	border-radius: 12px !important;
	padding: 14px 20px !important;
	font-size: 15px !important;
	box-shadow: none !important;
}
.ogou-sh-main .ogou-auth-alt { color: var(--ogou-muted) !important; font-size: 14px; }
.ogou-sh-main .ogou-auth-alt:hover { color: var(--ogou-brand-ink) !important; }

/* The "or" rule between Google and the form. */
.ogou-sh-main .ogou-auth-or { color: var(--ogou-muted) !important; font-size: 11px; letter-spacing: .14em; }
.ogou-sh-main .ogou-auth-or::before,
.ogou-sh-main .ogou-auth-or::after { background: var(--ogou-line-1) !important; }

/* =========================================================================
   BUY — the same card, as a dialog
   ========================================================================= */

.ogou-shell .ogou-modal-overlay {
	background: color-mix(in srgb, var(--ogou-text) 55%, transparent) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ogou-shell .ogou-modal {
	background: var(--ogou-card) !important;
	background-image: none !important;
	border: 1px solid var(--ogou-line-1) !important;
	border-radius: 22px !important;
	box-shadow: var(--ogou-e3) !important;
	padding: 28px 28px 24px !important;
	color: var(--ogou-text) !important;
}
.ogou-shell .ogou-modal h3,
.ogou-shell .ogou-modal h2 { font-size: 20px !important; letter-spacing: -.02em; margin: 0 40px 10px 0 !important; color: var(--ogou-text) !important; }
.ogou-shell .ogou-modal-price { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.04em; color: var(--ogou-text) !important; margin: 0 0 14px !important; }
.ogou-shell .ogou-modal-fee { color: var(--ogou-muted) !important; font-size: 14px; }
.ogou-shell .ogou-modal-fee b, .ogou-shell .ogou-modal-fee strong { color: var(--ogou-text) !important; }
.ogou-shell .ogou-modal-hint { color: var(--ogou-muted) !important; font-size: 13px; }

/* The close button, a quiet circle. */
.ogou-shell .ogou-modal .ogou-modal-x,
.ogou-shell .ogou-modal button.ogou-modal-x {
	width: 34px !important; height: 34px !important;
	border-radius: 50% !important;
	border: 1px solid var(--ogou-line-2) !important;
	background: transparent !important;
	color: var(--ogou-muted) !important;
	box-shadow: none !important;
}

/* The ways to pay: cards you choose between, the chosen one outlined in brand. */
.ogou-shell .ogou-gw-list,
.ogou-shell .ogou-pay-list { display: flex; flex-direction: column; gap: 10px !important; margin: 18px 0 !important; }
.ogou-shell .ogou-modal .ogou-gw,
.ogou-shell .ogou-gw,
.ogou-shell .ogou-modal .ogou-pay,
.ogou-shell .ogou-pay {
	background: var(--ogou-bg) !important;
	border: 1.5px solid var(--ogou-line-2) !important;
	border-radius: 14px !important;
	padding: 14px 16px !important;
	color: var(--ogou-text) !important;
	box-shadow: none !important;
	transition: border-color .14s ease, background .14s ease !important;
}
.ogou-shell .ogou-gw:hover,
.ogou-shell .ogou-pay:hover { border-color: var(--ogou-line-4) !important; }
.ogou-shell .ogou-gw.is-on,
.ogou-shell .ogou-gw:has(input:checked),
.ogou-shell .ogou-pay.is-on,
.ogou-shell .ogou-pay:has(input:checked) {
	border-color: var(--ogou-brand) !important;
	background: color-mix(in srgb, var(--ogou-brand) 6%, var(--ogou-card)) !important;
}
.ogou-shell .ogou-gw input[type="radio"],
.ogou-shell .ogou-pay input[type="radio"] { accent-color: var(--ogou-brand); width: 18px !important; height: 18px !important; flex: 0 0 auto; margin: 0; }
.ogou-shell .ogou-pay { display: flex !important; align-items: center !important; gap: 12px !important; }
.ogou-shell .ogou-pay-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ogou-shell .ogou-pay-text strong { font-size: 15px; color: var(--ogou-text); }
.ogou-shell .ogou-pay-text em { font-style: normal; font-size: 12.5px; color: var(--ogou-muted); }
.ogou-shell .ogou-pay-mark { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.ogou-shell .ogou-pay-mark img, .ogou-shell .ogou-pay-mark svg { height: 22px; width: auto; }

/* The pay button: flat, full width, the brand. */
.ogou-shell .ogou-modal .ogou-btn,
.ogou-shell .ogou-modal .ogou-btn-block,
.ogou-shell .ogou-modal button.ogou-btn {
	background: var(--ogou-brand) !important;
	background-image: none !important;
	color: var(--ogou-on-accent) !important;
	border-radius: 14px !important;
	padding: 15px 20px !important;
	font-size: 16px !important;
	box-shadow: none !important;
	width: 100% !important;
}
.ogou-shell .ogou-modal .ogou-btn-outline,
.ogou-shell .ogou-modal .ogou-btn-ghost {
	background: transparent !important;
	color: var(--ogou-text) !important;
	border: 1px solid var(--ogou-line-2) !important;
}

/* ---- the page for an address that names nothing ---- */
.ogou-sh-lost { padding-bottom: 36px; }
.ogou-sh-lost .ogou-sh-live { pointer-events: none; }
.ogou-sh-lost .ogou-sh-cta-row { margin-top: 22px; justify-content: flex-start; }
.ogou-sh-lost + .ogou-sh-sec { padding-top: 10px; }

/* ---- the length, readable on any artwork ---- */
.ogou-sh-main .ogou-card .ogou-cover .ogou-card-time {
	left: 10px !important; right: auto !important; bottom: 12px !important; top: auto !important;
	transform: none !important;
	padding: 4px 8px; border-radius: 999px;
	background: rgba(10, 10, 16, .72); color: #f4f4f6 !important;
	font-size: 11.5px !important; font-weight: 700; letter-spacing: .02em;
	text-shadow: none; line-height: 1;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ogou-sh-main .ogou-card .ogou-cover .ogou-card-time:empty { display: none; }

/* ---- the single page: a play button you can see ---- */
.ogou-sh-main .ogou-single-cover .ogou-play-overlay {
	background: #fff !important; color: #141414 !important; border: 0 !important;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .38) !important;
	/* Centred by auto margins, not by a translate: two rules were each
	   centring it their own way and together they put it off by half. */
	inset: 0 !important; left: 0 !important; top: 0 !important; margin: auto !important; transform: none !important;
}
.ogou-sh-main .ogou-single-cover .ogou-play-overlay svg { fill: #141414; width: 34px; height: 34px; }
.ogou-sh-main .ogou-single-cover .ogou-play-overlay:hover,
.ogou-sh-main .ogou-single-cover .ogou-play-overlay:focus-visible { background: var(--ogou-brand) !important; color: #fff !important; transform: scale(1.06) !important; }
.ogou-sh-main .ogou-single-cover .ogou-play-overlay:hover svg { fill: #fff; }
.ogou-sh-main .ogou-single-cover .ogou-play-overlay.is-playing .ogou-ico-play { display: none; }
.ogou-sh-main .ogou-single-cover .ogou-play-overlay.is-playing .ogou-ico-pause { display: block; }