/*
Theme Name: Gradespace Music
Theme URI: https://thegradespace.com
Description: A block theme for music schools: warm, musical and easy to read, with a slideshow hero, instrument tiles, tutor profiles, lesson prices and a booking form. Seven designs (Amp, Recital, Little Notes, Classic, Stage Lights, The Staff, Studio Colour), each with seven colour palettes, chosen under Site Settings → Design & colours. Design only: tutors, lessons and bookings live in the Gradespace Music plugin.
Author: Gradespace
Author URI: https://thegradespace.com
Version: 0.2.3
Update URI: https://thegradespace.com/updates/gradespace-music-theme
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: gradespace-music-theme
License: GPL-2.0-or-later
*/

/* Bump Version above on every release: it busts browser caches (?ver=).

   Colour rules (so every design and palette works):
   - text uses "ink" and "muted"; pages "surface", bands "soft"/"brand-tint";
   - "brand" and "accent" carry white text, "gold" carries dark text;
   - dark bands use "night" (and the Stage Lights design darkens the header,
     page headings, hero and footer); only text on photos stays literal. */

:root {
	/* Gradespace Core's dialogs, cookie banner and contact sheet use these. */
	--gsc-brand: var(--wp--preset--color--brand);
	--gsc-ink: var(--wp--preset--color--ink);
	--gsc-muted: var(--wp--preset--color--muted);
	--gsc-line: var(--wp--preset--color--line);
	--gsc-tint: var(--wp--preset--color--brand-tint);
	--gsc-soft: var(--wp--preset--color--soft);
	--gsc-surface: var(--wp--preset--color--white);
	--gsc-danger: #b3261e;
	--gsc-font: var(--wp--preset--font-family--body);
	--gsc-font-display: var(--wp--preset--font-family--display);
	--gsc-radius: var(--wp--custom--radius--sm);
	/* The plugin's blocks. */
	--gsmu-radius: var(--wp--custom--radius--md);
	--gsmu-radius-sm: var(--wp--custom--radius--sm);
	--gsmu-gutter: clamp(1rem, 4vw, 3.5rem);
	--gsmu-line-soft: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	--gsmu-glass: color-mix(in srgb, var(--wp--preset--color--surface) 82%, transparent);
	--gsmu-staff: color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
	--gsmu-staff-2: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	--gsmu-i-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='18' r='4'/%3E%3Cpath d='M12 18V2l7 4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* In-page links land just below the stuck header: its measured height (Core's --gsc-header-h,
   without a notice bar that scrolls away), plus the admin bar when there is one (it scrolls away
   on phones), plus a little air. Without Core's measurement: 6.5rem, as before. */
html { scroll-padding-top: calc(var(--gsc-header-h, 5.5rem) + var(--wp-admin--admin-bar--height, 0px) + 1rem); scroll-behavior: smooth; }
@media (max-width: 600px) { html { scroll-padding-top: calc(var(--gsc-header-h, 5.5rem) + 1rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
::selection { background: var(--wp--preset--color--accent); color: #fff; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.wp-site-blocks > * + * { margin-block-start: 0; } /* Header, main and footer sit flush. */
.gsmu-main { overflow-wrap: break-word; }
.wp-block-post-content > .alignfull:first-child, .gsmu-main > .alignfull:first-child { margin-top: 0; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--wp--preset--color--accent); }
.gsmu-lead, .gsmu-muted { color: var(--wp--preset--color--muted); }
.gsmu-center { margin-inline: auto; }
.gsmu-center.gsmu-picker { justify-items: center; }
.gsmu-center.gsmu-picker .gsmu-picker__chips { justify-content: center; }
.gsmu-center.gsmu-picker .gsmu-picker__go { justify-self: center; }
/* Instrument tiles on phones: three to a row (the block's own grid fits only one under ~380px). */
@media (max-width: 599px) {
	body .gsmu-picker.is-tiles .gsmu-picker__chips { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 0.5rem; }
	body .gsmu-picker.is-tiles .gsmu-picker__chip { min-height: 5.75rem; padding: 0.75rem 0.5rem; font-size: 0.9375rem; text-align: center; }
}
.gsmu-rounded img, .gsmu-rounded { border-radius: var(--wp--custom--radius--md); }
@media (min-width: 782px) { .gsmu-sticky { position: sticky; top: 7rem; align-self: flex-start; } } /* the whole column sticks as one piece (its heading, text and links stay together) */

/* ---- Header -------------------------------------------------------------
   Sticky, with the blur on a pseudo-element: a backdrop-filter on the header
   itself would trap the fixed mobile menu inside it. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }
header.wp-block-template-part:has(.is-menu-open) { z-index: 200; }
header.wp-block-template-part::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--gsmu-glass); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid var(--gsmu-line-soft);
}
.gsmu-header { min-height: 72px; }
@media (min-width: 1024px) {
	/* Logo | menu in the true centre | actions. */
	.gsmu-header.wp-block-group { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content minmax(max-content, 1fr); align-items: center; } /* the name column gives way first, never the menu or the actions */
	.gsmu-header > .gsmu-brand { justify-self: start; }
	.gsmu-header > .gsmu-nav { justify-self: center; }
	.gsmu-header > .gsmu-header__actions { justify-self: end; }
	/* WooCommerce adds its account icon after the menu: brand | menu | account + actions, the menu centred between them. */
	.gsmu-header.wp-block-group:has(> .wp-block-woocommerce-customer-account) { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content minmax(0, 1fr) max-content max-content; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-brand { grid-column: 1; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-nav { grid-column: 3; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .wp-block-woocommerce-customer-account { grid-column: 5; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-header__actions { grid-column: 6; }
	.gsmu-brand .wp-block-site-title { max-width: 20rem; }
}
/* The name gives way on small screens: it wraps (two lines at most, then an ellipsis)
   instead of pushing the account icon or the menu button off the bar. */
.gsmu-brand { min-width: 0; }
.gsmu-brand .wp-block-site-logo { flex-shrink: 0; }
.gsmu-brand .wp-block-site-logo img { display: block; height: auto; }
.gsmu-brand .wp-block-site-title { margin: 0; line-height: 1.05; min-width: 0; overflow-wrap: break-word; }
.gsmu-brand .wp-block-site-title a { color: var(--wp--preset--color--ink); text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.gsmu-header .wp-block-woocommerce-customer-account { flex-shrink: 0; }
.gsmu-header .wp-block-woocommerce-customer-account a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
.gsmu-nav .wp-block-navigation-item__content { padding: 0.5rem 0.85rem; border-radius: 999px; color: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent); text-decoration: none; transition: background 0.2s, color 0.2s; }
.gsmu-nav .wp-block-navigation-item__content:hover, .gsmu-nav .current-menu-item > .wp-block-navigation-item__content { background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent); color: var(--wp--preset--color--ink); }
.gsmu-nav.wp-block-navigation { gap: 0.1rem; }
.gsmu-nav .wp-block-navigation__submenu-container {
	min-width: 12rem !important; padding: 0.5rem !important; border: 0 !important; border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white) !important; box-shadow: 0 0 0 1px var(--gsmu-line-soft), 0 16px 36px -12px rgb(0 0 0 / 0.25);
}
.gsmu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 0.6rem 0.85rem !important; border-radius: calc(var(--wp--custom--radius--sm) * 0.7); }
.gsmu-nav .wp-block-navigation-submenu__toggle { padding: 0.5rem 0.85rem; border-radius: 999px; }
.gsmu-nav .wp-block-navigation-item.has-child { gap: 0; padding-right: 0 !important; }
@media (min-width: 1024px) {
	/* "Discover ⌄": one pill round the label and its arrow, whichever part is hovered, focused or open.
	   The pill is the menu item itself; the arrow (a button when submenus open on hover, a span when
	   they open on click) sits inside the label's right padding. */
	.gsmu-nav .wp-block-navigation__container > .has-child { border-radius: 999px; transition: background 0.2s; }
	.gsmu-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding: 0.5rem 1.85rem 0.5rem 0.85rem; background: none !important; }
	.gsmu-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		box-sizing: border-box; align-self: stretch; display: flex; align-items: center; justify-content: flex-start;
		width: 1.85rem; height: auto; margin: 0 0 0 -1.85rem; padding: 0 0.85rem 0 0.4rem; border-radius: 0 999px 999px 0; background: none;
	}
	.gsmu-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg { width: 0.6rem; height: 0.6rem; margin: 0; }
	.gsmu-nav .wp-block-navigation__container > .has-child:hover,
	.gsmu-nav .wp-block-navigation__container > .has-child:has(> :focus-visible),
	.gsmu-nav .wp-block-navigation__container > .has-child:has(> [aria-expanded="true"]) { background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent); }
	.gsmu-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
	.gsmu-look-stage .gsmu-nav .wp-block-navigation__container > .has-child:hover,
	.gsmu-look-stage .gsmu-nav .wp-block-navigation__container > .has-child:has(> :focus-visible),
	.gsmu-look-stage .gsmu-nav .wp-block-navigation__container > .has-child:has(> [aria-expanded="true"]) { background: rgb(255 255 255 / 0.1); }
	.gsmu-look-stage .gsmu-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content { color: #fff; }
}
.gsmu-header__actions .wp-block-button__link { padding: 0.6rem 1.1rem; white-space: nowrap; }
.gsmu-book-btn .wp-block-button__link::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--gsmu-i-music) center / contain no-repeat; mask: var(--gsmu-i-music) center / contain no-repeat; }
/* Menu collapses to the button below 1024px (core only does this below 600px). */
@media (min-width: 600px) and (max-width: 1023px) {
	.gsmu-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.gsmu-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Below 1024px: name on the left; account icon, Book button and the menu button grouped on the right, menu button last. */
@media (max-width: 1023px) {
	.gsmu-header > .gsmu-brand { flex: 0 1 auto; margin-right: auto; }
	.gsmu-header > .gsmu-nav { order: 3; flex-shrink: 0; }
	.gsmu-header > .wp-block-woocommerce-customer-account { order: 1; }
	.gsmu-header > .gsmu-header__actions { order: 2; flex-shrink: 0; }
}
@media (max-width: 599px) { .gsmu-header.wp-block-group { gap: 0.5rem !important; } }
/* With WooCommerce's account icon the full menu needs more room: keep the menu button up to 1199px. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.gsmu-header.wp-block-group:has(> .wp-block-woocommerce-customer-account) { display: flex !important; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-brand { margin-right: auto; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-nav { order: 3; flex-shrink: 0; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .wp-block-woocommerce-customer-account { order: 1; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) > .gsmu-header__actions { order: 2; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) .gsmu-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.gsmu-header:has(> .wp-block-woocommerce-customer-account) .gsmu-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Phones: logo, name and the menu button; "Book" moves into the open menu. */
.gsmu-nav .gsmu-nav-cta { display: none !important; }
@media (max-width: 599px) {
	.gsmu-header__actions { display: none !important; }
	.gsmu-brand .wp-block-site-title { font-size: 1.1rem !important; white-space: normal; max-width: 11rem; }
	.wp-block-navigation__responsive-container.is-menu-open .gsmu-nav-cta { display: block !important; margin-top: 0.75rem; border-bottom: 0 !important; }
	.wp-block-navigation__responsive-container.is-menu-open .gsmu-nav-cta--book { margin-top: 1.5rem; }
	.wp-block-navigation__responsive-container.is-menu-open .gsmu-nav-cta .wp-block-navigation-item__content {
		display: flex !important; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem !important; border-radius: 999px;
		font-family: var(--wp--preset--font-family--body); font-size: 1rem !important; font-weight: 700;
	}
	.wp-block-navigation__responsive-container.is-menu-open .gsmu-nav-cta--book .wp-block-navigation-item__content { background: var(--wp--preset--color--accent) !important; color: #fff !important; }
	.wp-block-navigation__responsive-container.is-menu-open .gsmu-nav-cta--call .wp-block-navigation-item__content { background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--ink) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); }
}
/* The open phone menu: a full-height list with dividers and big tap targets. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; --navigation-layout-align: flex-start;
	height: 100dvh; overflow-y: auto; padding: 1rem 1.5rem calc(4rem + env(safe-area-inset-bottom)) !important;
	background: var(--wp--preset--color--surface) !important; color: var(--wp--preset--color--ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem !important; align-items: stretch !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--gsmu-line-soft); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block; width: 100%; padding: 0.8rem 0.25rem !important; border-radius: 0;
	font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--ink); text-align: left; background: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { display: flex !important; flex-direction: column; align-items: stretch !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: block; width: 100%; padding: 1rem 0.25rem 0.35rem !important; background: none; border: 0; text-align: left; cursor: default;
	font-family: var(--wp--preset--font-family--body); font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; width: 100% !important; margin: 0 !important; left: 0 !important;
	padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.15rem; padding: 0.5rem 0.25rem !important; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
/* The menu button: three bars that turn into a cross. The cross is the close button inside the open
   menu, placed exactly over the menu button (assets/js/motion.js sets --gsmu-burger-top/right), so the
   bars seem to morph; closing plays it backwards. Without motion, the cross is simply there. */
.gsmu-nav .wp-block-navigation__responsive-container-open > svg,
.gsmu-nav .wp-block-navigation__responsive-container-close > svg { display: none; }
.gsmu-nav .wp-block-navigation__responsive-container-open,
.gsmu-nav .wp-block-navigation__responsive-container-close {
	position: relative; width: 44px; height: 44px;
	background: linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat;
}
.gsmu-nav .wp-block-navigation__responsive-container-open::before, .gsmu-nav .wp-block-navigation__responsive-container-open::after,
.gsmu-nav .wp-block-navigation__responsive-container-close::before, .gsmu-nav .wp-block-navigation__responsive-container-close::after {
	content: ""; position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
}
.gsmu-nav .wp-block-navigation__responsive-container-open::before { transform: translateY(-6px); }
.gsmu-nav .wp-block-navigation__responsive-container-open::after { transform: translateY(6px); }
.gsmu-nav .wp-block-navigation__responsive-container-close { background-size: 0 2px; }
.gsmu-nav .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); }
.gsmu-nav .wp-block-navigation__responsive-container-close::after { transform: rotate(-45deg); }
.gsmu-nav .is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: var(--gsmu-burger-top, 1rem); right: var(--gsmu-burger-right, 1rem); left: auto; }
@keyframes gsmu-menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsmu-menu-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gsmu-menu-item { from { opacity: 0; transform: translateY(-0.6rem); } to { opacity: 1; transform: none; } }
@keyframes gsmu-x-top { from { transform: translateY(-6px); } 45% { transform: none; } to { transform: rotate(45deg); } }
@keyframes gsmu-x-bottom { from { transform: translateY(6px); } 45% { transform: none; } to { transform: rotate(-45deg); } }
@keyframes gsmu-x-mid { from { background-size: 20px 2px; } 45% { background-size: 0 2px; } to { background-size: 0 2px; } }
@keyframes gsmu-x-top-back { from { transform: rotate(45deg); } 55% { transform: none; } to { transform: translateY(-6px); } }
@keyframes gsmu-x-bottom-back { from { transform: rotate(-45deg); } 55% { transform: none; } to { transform: translateY(6px); } }
@keyframes gsmu-x-mid-back { from { background-size: 0 2px; } 55% { background-size: 0 2px; } to { background-size: 20px 2px; } }
@media (prefers-reduced-motion: no-preference) {
	/* Opacity only on the panel: a transform there would move the fixed close button with it. */
	.gsmu-nav .wp-block-navigation__responsive-container.is-menu-open { animation: gsmu-menu-in 0.22s ease-out both; }
	.gsmu-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { animation: gsmu-menu-item 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(40ms + var(--gsmu-i, 0) * 30ms); }
	.gsmu-nav .is-menu-open .wp-block-navigation__responsive-container-close { animation: gsmu-x-mid 0.26s ease-in-out both; }
	.gsmu-nav .is-menu-open .wp-block-navigation__responsive-container-close::before { animation: gsmu-x-top 0.26s ease-in-out both; }
	.gsmu-nav .is-menu-open .wp-block-navigation__responsive-container-close::after { animation: gsmu-x-bottom 0.26s ease-in-out both; }
	.gsmu-nav .wp-block-navigation__responsive-container.is-menu-open.is-closing { animation: gsmu-menu-out 0.2s ease-in both; }
	.gsmu-nav .is-menu-open.is-closing .wp-block-navigation__container > .wp-block-navigation-item { animation: none; }
	.gsmu-nav .is-menu-open.is-closing .wp-block-navigation__responsive-container-close { animation: gsmu-x-mid-back 0.2s ease-in-out both; }
	.gsmu-nav .is-menu-open.is-closing .wp-block-navigation__responsive-container-close::before { animation: gsmu-x-top-back 0.2s ease-in-out both; }
	.gsmu-nav .is-menu-open.is-closing .wp-block-navigation__responsive-container-close::after { animation: gsmu-x-bottom-back 0.2s ease-in-out both; }
}

/* ---- Buttons, labels, cards ---------------------------------------------- */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border-color: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-white .wp-block-button__link { background: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-white .wp-block-button__link:hover { background: var(--wp--preset--color--gold-tint); border-color: var(--wp--preset--color--gold-tint); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-soft .wp-block-button__link { background: var(--wp--preset--color--brand-tint); border-color: var(--wp--preset--color--brand-tint); color: var(--wp--preset--color--brand-deep); }
.is-dark .wp-block-button.is-style-outline .wp-block-button__link, .gsmu-cta .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / 0.45); }
.is-dark .wp-block-button.is-style-outline .wp-block-button__link:hover, .gsmu-cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; color: #fff; }
.is-style-eyebrow { margin: 0; font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.is-style-eyebrow a { color: inherit; text-decoration: none; }
.is-style-eyebrow a::before { content: "← "; }
.is-dark .is-style-eyebrow { color: var(--wp--preset--color--gold); }
.is-style-chip { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; margin: 0; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent); background: var(--wp--preset--color--white); font-size: 0.75rem !important; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.is-style-chip::before { content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: currentColor; -webkit-mask: var(--gsmu-i-music) center / contain no-repeat; mask: var(--gsmu-i-music) center / contain no-repeat; }
.is-style-card { padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft); }
.gsmu-more-link { margin: 0; }
.gsmu-more-link a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 700; text-decoration: none; }
.gsmu-more-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gsmu-aside-card { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft); }
.gsmu-form-card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft), 0 20px 40px -28px rgb(0 0 0 / 0.35); }
ol.gsmu-steps { padding-left: 1.2rem; }
ol.gsmu-steps li { margin-bottom: 0.5rem; }

/* ---- Sections ---------------------------------------------------------- */
.gsmu-head h2 { margin: 0; }
.gsmu-head .gsmu-lead { margin: 0; }
.is-dark, .is-dark h1, .is-dark h2, .is-dark h3 { color: #fff; }
.is-dark .gsmu-lead, .is-dark .gsmu-muted { color: rgb(255 255 255 / 0.78); }
.gsmu-points .gsmu-point { padding: 1.4rem; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft); }
.gsmu-point h3, .gsmu-point p { margin: 0; }
.gsmu-cta h2 { margin: 0; color: #fff; }
.gsmu-cta p { margin: 0; color: rgb(255 255 255 / 0.85); }
.gsmu-cta { gap: 1.5rem; position: relative; overflow: hidden; isolation: isolate; }
.gsmu-cta::after { content: ""; position: absolute; right: -4rem; bottom: -3.5rem; width: 16rem; height: 10rem; z-index: -1; opacity: 0.25;
	background-image: repeating-linear-gradient(to bottom, #fff 0 2px, transparent 2px 22px); transform: rotate(-8deg); }

/* The hero: text beside the slideshow. */
.gsmu-hero { position: relative; isolation: isolate; }
.gsmu-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 34%), radial-gradient(circle at 96% 80%, color-mix(in srgb, var(--wp--preset--color--brand) 12%, transparent), transparent 30%); }
.gsmu-hero__title { margin: 0; line-height: 0.98 !important; text-wrap: balance; }
.gsmu-hero__text .gsmu-lead { margin: 0; max-width: 36rem; }
.gsmu-hero__text .wp-block-buttons { margin: 0; }
@media (max-width: 781px) { .gsmu-hero__aside { width: 100%; } }

/* Page headings. */
.gsmu-pagehead { position: relative; isolation: isolate; background: radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 32%), linear-gradient(90deg, var(--wp--preset--color--surface), var(--wp--preset--color--white)); border-bottom: 1px solid var(--gsmu-line-soft); }
.gsmu-pagehead__title, .gsmu-pagehead h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.75rem) !important; line-height: 0.98; text-wrap: balance; }
.gsmu-pagehead .gsmu-lead, .gsmu-pagehead .wp-block-term-description { margin: 0.9rem 0 0; max-width: 42rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--large); }
.gsmu-post-meta { color: var(--wp--preset--color--muted); }

/* The music staff: five lines across the page (the design's signature). */
.gsmu-staff-rule { height: 46px; margin: 0 !important; background-image:
	linear-gradient(to bottom, transparent 0 7px, var(--gsmu-staff-2) 7px 8px, transparent 8px),
	linear-gradient(to bottom, transparent 0 16px, var(--gsmu-staff) 16px 17px, transparent 17px),
	linear-gradient(to bottom, transparent 0 25px, var(--gsmu-line-soft) 25px 26px, transparent 26px),
	linear-gradient(to bottom, transparent 0 34px, var(--gsmu-staff) 34px 35px, transparent 35px),
	linear-gradient(to bottom, transparent 0 43px, var(--gsmu-staff-2) 43px 44px, transparent 44px); }
.wp-block-separator.is-style-staff { height: 41px; border: 0 !important; background: none !important; opacity: 1;
	background-image: repeating-linear-gradient(to bottom, var(--gsmu-staff) 0 1px, transparent 1px 10px) !important; }

/* A picture panel drawn in the palette (piano keys), until a photo replaces it. */
.gsmu-art { position: relative; display: grid; place-items: center; min-height: 20rem; overflow: hidden; border-radius: var(--wp--custom--radius--lg); isolation: isolate; }
.gsmu-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1;
	background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.92) 0 calc(100% / 14 - 3px), transparent calc(100% / 14 - 3px) calc(100% / 14)); }
.gsmu-art::before { content: ""; position: absolute; left: 0; right: 0; bottom: 14%; height: 24%; z-index: 0;
	background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 14 * 0.66), var(--wp--preset--color--night) calc(100% / 14 * 0.66) calc(100% / 14 * 1.34), transparent calc(100% / 14 * 1.34) calc(100% / 14 * 2)); opacity: 0.9; }
.gsmu-art .gsc-badge { margin-bottom: 30%; }
.gsmu-art .gsc-badge .gsc-icon { width: 4rem !important; height: 4rem !important; }

/* ---- Footer ---------------------------------------------------------------- */
.gsmu-footer { background: var(--wp--preset--color--white); border-top: 1px solid var(--gsmu-line-soft); }
/* Footer columns share the width evenly however many there are: remove or add a
   column in the Site Editor and the rest close up (no gaps). The brand column is a
   little wider; on small laptops it takes its own row; two per row on phones and
   portrait tablets (an odd one out stretches across). */
.gsmu-footer__grid { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.gsmu-footer__grid > * { flex: 1 1 0; margin: 0 !important; min-width: 0; }
.gsmu-footer__grid > .gsmu-footer__brand { flex-grow: 1.35; }
@media (max-width: 1100px) { .gsmu-footer__grid > .gsmu-footer__brand { flex-basis: 100%; } }
@media (max-width: 781px) { .gsmu-footer__grid > * { flex-basis: calc(50% - var(--wp--preset--spacing--40)); } }
/* Address, opening hours and phone numbers need the full width on small phones (by content, not position). */
@media (max-width: 480px) { .gsmu-footer__grid { column-gap: 1rem; } .gsmu-footer__grid > :has(.gsmu-info, .gsmu-footer__hours, a[href^="tel:"]) { flex-basis: 100%; } }
.gsmu-footer__name { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.gsmu-footer__name a { color: inherit; text-decoration: none; }
.gsmu-footer__soft { margin: 0; color: var(--wp--preset--color--muted); }
.gsmu-footer__title { margin: 0; font-family: var(--wp--preset--font-family--body) !important; font-size: 0.8125rem !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.gsmu-footer__links { margin: 0; line-height: 2.1; font-size: 0.9375rem; }
.gsmu-footer__links a { color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent); text-decoration: none; }
.gsmu-footer__links a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.gsmu-footer .gsmu-info, .gsmu-footer__hours { font-size: 0.9375rem; }
.gsmu-footer .gsmu-info a { overflow-wrap: anywhere; }
.gsmu-footer__bar { border-top: 1px solid var(--gsmu-line-soft); color: var(--wp--preset--color--muted); }
.gsmu-footer__bar p, .gsmu-footer__bar .wp-block-site-title { margin: 0; font-size: inherit !important; font-family: inherit !important; font-weight: 400 !important; }
.gsmu-footer__bar a { color: inherit; }
.gsmu-social.wp-block-social-links { gap: 0.5rem; }
.gsmu-social .wp-social-link { background: var(--wp--preset--color--brand-tint) !important; color: var(--wp--preset--color--brand-deep) !important; }
@media (pointer: coarse) { .gsmu-footer__links a { display: inline-block; min-height: 44px; line-height: 44px; } .gsmu-footer__links { line-height: 1.2; } }

/* ---- Cards, archives, articles ------------------------------------------- */
.gsmu-cards .wp-block-post-template { gap: var(--wp--preset--spacing--40); }
.gsmu-card { height: 100%; overflow: hidden; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft); transition: transform 0.2s, box-shadow 0.2s; }
.gsmu-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gsmu-line-soft), 0 18px 36px -24px rgb(0 0 0 / 0.35); }
.gsmu-card .wp-block-post-featured-image { width: 100%; margin: 0; }
.gsmu-card__body { flex: 1; width: 100%; padding: 1.2rem 1.35rem 1.4rem; }
.gsmu-card__body > * { margin: 0 !important; }
.gsmu-card .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.gsmu-card .wp-block-post-title a:hover { color: var(--wp--preset--color--brand); }
.gsmu-card .wp-block-post-excerpt { color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
.gsmu-card .wp-block-post-excerpt p { margin: 0; }
.is-resources .gsmu-card { border-top: 4px solid var(--wp--preset--color--accent); }
.gsmu-resource-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.gsmu-resource-meta span { padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--wp--preset--color--soft); color: var(--wp--preset--color--muted); font-size: 0.75rem; font-weight: 700; }
.gsmu-term-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; list-style: none; }
.gsmu-term-pills li { margin: 0; }
.gsmu-term-pills a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: var(--wp--preset--color--white); box-shadow: 0 0 0 1px var(--gsmu-line-soft); color: var(--wp--preset--color--ink); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.gsmu-term-pills a:hover, .gsmu-term-pills .current-cat a { background: var(--wp--preset--color--brand); color: #fff; }
.gsmu-pagination { margin-top: var(--wp--preset--spacing--50); gap: 0.4rem; font-weight: 700; }
.gsmu-pagination a, .gsmu-pagination .current { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 999px; text-decoration: none; }
.gsmu-pagination .current { background: var(--wp--preset--color--brand); color: #fff; }
.gsmu-article { font-size: 1.0625rem; line-height: 1.8; }
.gsmu-article h2 { margin-top: 2em; }
.gsmu-post-nav { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--gsmu-line-soft); }
.gsmu-search .wp-block-search__input { min-height: 3rem; padding: 0 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; }
.gsmu-search .wp-block-search__button { border-radius: 999px; }
.gsmu-profile__photo .wp-block-post-featured-image { margin: 0; }
.gsmu-profile__text { display: grid; gap: 1rem; align-content: start; }
.gsmu-profile__text > * { margin: 0 !important; }
.gsmu-past-title { margin-top: var(--wp--preset--spacing--60) !important; }
.gsmu-404__notes { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--wp--preset--color--brand-tint); -webkit-text-stroke: 2px var(--wp--preset--color--brand); }

/* ---- Motion: headings rise in; sections reveal on scroll (assets/js/motion.js). */
@media (prefers-reduced-motion: no-preference) {
	.gsmu-rise > * { animation: gsmu-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
	.gsmu-rise > *:nth-child(2) { animation-delay: 0.1s; }
	.gsmu-rise > *:nth-child(3) { animation-delay: 0.2s; }
	.gsmu-rise > *:nth-child(4) { animation-delay: 0.3s; }
	.gsmu-will-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
	.gsmu-will-reveal.is-in { opacity: 1; transform: none; }
	.gsmu-will-reveal.is-now { transition: none; } /* revealed at once for a jump link, so it lands where it should */
}
@keyframes gsmu-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Designs: the same content, a different look (Site Settings → Design).
   ===================================================================== */

/* A · Stage Lights: a dark stage around light content. */
.gsmu-look-stage { --gsmu-glass: color-mix(in srgb, var(--wp--preset--color--night) 84%, transparent); --gsmu-staff: color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent); --gsmu-staff-2: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }
.gsmu-look-stage header.wp-block-template-part::before { border-bottom-color: rgb(255 255 255 / 0.08); }
.gsmu-look-stage .gsmu-header, .gsmu-look-stage .gsmu-brand .wp-block-site-title a { color: #fff; }
.gsmu-look-stage .gsmu-nav .wp-block-navigation-item__content, .gsmu-look-stage .gsmu-nav .wp-block-navigation-submenu__toggle { color: rgb(255 255 255 / 0.85); }
.gsmu-look-stage .gsmu-nav .wp-block-navigation-item__content:hover, .gsmu-look-stage .gsmu-nav .current-menu-item > .wp-block-navigation-item__content { background: rgb(255 255 255 / 0.1); color: #fff; }
.gsmu-look-stage .gsmu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.gsmu-look-stage .wp-block-navigation__responsive-container-open { color: #fff; }
.gsmu-look-stage .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.gsmu-look-stage .gsmu-hero, .gsmu-look-stage .gsmu-pagehead { background: radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent), transparent 34%), radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--wp--preset--color--gold) 18%, transparent), transparent 30%), var(--wp--preset--color--night); color: #fff; border-bottom: 0; }
.gsmu-look-stage .gsmu-hero::before { display: none; }
.gsmu-look-stage .gsmu-hero h1, .gsmu-look-stage .gsmu-pagehead h1 { color: #fff; }
.gsmu-look-stage .gsmu-hero .gsmu-lead, .gsmu-look-stage .gsmu-pagehead .gsmu-lead, .gsmu-look-stage .gsmu-pagehead .wp-block-term-description, .gsmu-look-stage .gsmu-pagehead .gsmu-post-meta { color: rgb(255 255 255 / 0.78); }
.gsmu-look-stage .gsmu-hero .is-style-eyebrow, .gsmu-look-stage .gsmu-pagehead .is-style-eyebrow, .gsmu-look-stage .gsmu-hero em, .gsmu-look-stage .gsmu-pagehead em { color: var(--wp--preset--color--gold); }
.gsmu-look-stage .gsmu-hero .is-style-chip { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); color: var(--wp--preset--color--gold); }
.gsmu-look-stage .gsmu-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.gsmu-look-stage .gsmu-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; }
.gsmu-look-stage .has-brand-tint-background-color { background: var(--wp--preset--color--night) !important; color: #fff; }
.gsmu-look-stage .has-brand-tint-background-color h2, .gsmu-look-stage .has-brand-tint-background-color .gsmu-event__title a { color: #fff; }
.gsmu-look-stage .has-brand-tint-background-color .is-style-eyebrow, .gsmu-look-stage .has-brand-tint-background-color .gsmu-more-link a { color: var(--wp--preset--color--gold); }
.gsmu-look-stage .has-brand-tint-background-color .gsmu-events.is-cards .gsmu-event { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); box-shadow: none; }
.gsmu-look-stage .has-brand-tint-background-color .gsmu-event__meta, .gsmu-look-stage .has-brand-tint-background-color .gsmu-empty { color: rgb(255 255 255 / 0.75); }
.gsmu-look-stage .has-brand-tint-background-color .gsmu-event__date { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--night); }
.gsmu-look-stage .gsmu-cta { background: linear-gradient(120deg, var(--wp--preset--color--night), var(--wp--preset--color--brand-deep)) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.gsmu-look-stage .gsmu-footer { background: var(--wp--preset--color--night); color: rgb(255 255 255 / 0.85); border-top: 0; }
.gsmu-look-stage .gsmu-footer .gsmu-footer__name, .gsmu-look-stage .gsmu-footer__links a, .gsmu-look-stage .gsmu-footer .gsmu-info, .gsmu-look-stage .gsmu-footer .gsmu-info a, .gsmu-look-stage .gsmu-footer__soft, .gsmu-look-stage .gsmu-footer__bar { color: rgb(255 255 255 / 0.8); }
.gsmu-look-stage .gsmu-footer__links a:hover { color: #fff; }
.gsmu-look-stage .gsmu-footer__title { color: var(--wp--preset--color--gold); }
.gsmu-look-stage .gsmu-footer__bar { border-top-color: rgb(255 255 255 / 0.12); }
.gsmu-look-stage .gsmu-footer .gsmu-info .gsc-icon { color: var(--wp--preset--color--gold); }
.gsmu-look-stage .gsmu-footer .gsmu-info.is-hours div { border-bottom-color: rgb(255 255 255 / 0.12); }
.gsmu-look-stage .gsmu-social .wp-social-link { background: rgb(255 255 255 / 0.1) !important; color: #fff !important; }
.gsmu-look-stage .gsmu-staff-rule { background-color: var(--wp--preset--color--night); }
.gsmu-look-stage .gsmu-types.is-rows .gsmu-type__n { color: var(--wp--preset--color--accent); }
.gsmu-look-stage .gsmu-quote.is-lead { background: var(--wp--preset--color--night); color: #fff; }
.gsmu-look-stage .gsmu-quote.is-lead figcaption span { color: rgb(255 255 255 / 0.7); }
.gsmu-look-stage .gsmu-quote__mark { color: var(--wp--preset--color--gold); }
.gsmu-look-stage .gsmu-tutors.is-portraits .gsmu-tutor__photo { box-shadow: 0 0 0 6px var(--wp--preset--color--surface), 0 0 0 8px var(--wp--preset--color--gold); }

/* B · The Staff: editorial and flat, staff lines behind page headings. */
.gsmu-look-staff .gsmu-pagehead { background: var(--wp--preset--color--surface); }
.gsmu-look-staff .gsmu-pagehead::before, .gsmu-look-staff .gsmu-hero::before {
	content: ""; position: absolute; inset: auto 0 1rem; height: 5.05rem; z-index: -1;
	background: linear-gradient(to bottom, var(--gsmu-staff) 0 1px, transparent 1px) 0 0 / 100% 1.25rem; }
.gsmu-look-staff h1 em, .gsmu-look-staff h2 em { color: var(--wp--preset--color--brand); }
.gsmu-look-staff .is-style-eyebrow, .gsmu-look-staff .gsmu-footer__title { color: var(--wp--preset--color--brand); letter-spacing: 0.14em; }
.gsmu-look-staff .is-style-chip { border-radius: 4px; }
.gsmu-look-staff .gsmu-card, .gsmu-look-staff .gsmu-point, .gsmu-look-staff .gsmu-aside-card, .gsmu-look-staff .gsmu-form-card, .gsmu-look-staff .gsmu-tutor, .gsmu-look-staff .gsmu-events.is-cards .gsmu-event, .gsmu-look-staff .gsmu-quote.is-card, .gsmu-look-staff .gsmu-faq, .gsmu-look-staff .gsmu-step, .gsmu-look-staff .gsmu-types.is-cards .gsmu-type {
	box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 16%, transparent) !important; }
.gsmu-look-staff .gsmu-card:hover { transform: none; border-color: var(--wp--preset--color--brand) !important; }
.gsmu-look-staff .has-soft-background-color { background: var(--wp--preset--color--white) !important; border-block: 1px solid var(--gsmu-line-soft); }
.gsmu-look-staff .has-brand-tint-background-color { background: var(--wp--preset--color--surface) !important; border-block: 1px solid var(--gsmu-line-soft); }
.gsmu-look-staff .gsmu-cta { background: var(--wp--preset--color--ink) !important; }
.gsmu-look-staff .gsmu-footer { background: var(--wp--preset--color--surface); }

/* C · Studio Colour: rounder and brighter, colour chips and tiles. */
.gsmu-look-studio .gsmu-nav .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--ink); color: #fff; }
.gsmu-look-studio .gsmu-pagehead { background: var(--wp--preset--color--brand-tint); border-bottom: 0; }
.gsmu-look-studio .gsmu-hero::before { background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--wp--preset--color--gold) 28%, transparent), transparent 30%), radial-gradient(circle at 70% 88%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent 32%); }
.gsmu-look-studio .gsmu-points .gsmu-point { box-shadow: none; }
.gsmu-look-studio .gsmu-points .gsmu-point:nth-child(4n+1) { background: var(--wp--preset--color--brand-tint); }
.gsmu-look-studio .gsmu-points .gsmu-point:nth-child(4n+2) { background: var(--wp--preset--color--gold-tint); }
.gsmu-look-studio .gsmu-points .gsmu-point:nth-child(4n+3) { background: var(--wp--preset--color--accent-tint); }
.gsmu-look-studio .gsmu-points .gsmu-point:nth-child(4n+4) { background: var(--wp--preset--color--soft); }
.gsmu-look-studio .is-style-eyebrow { color: var(--wp--preset--color--brand); }
.gsmu-look-studio .gsmu-hero__title em { color: var(--wp--preset--color--brand); }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip { border-color: transparent; }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip:nth-child(4n+1) { background: var(--wp--preset--color--brand-tint); }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip:nth-child(4n+2) { background: var(--wp--preset--color--gold-tint); }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip:nth-child(4n+3) { background: var(--wp--preset--color--accent-tint); }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip:nth-child(4n+4) { background: var(--wp--preset--color--soft); }
.gsmu-look-studio .gsmu-picker.is-tiles .gsmu-picker__chip[aria-pressed="true"] { background: var(--wp--preset--color--brand); color: #fff; }
.gsmu-look-studio .gsmu-footer { background: var(--wp--preset--color--brand-tint); border-top: 0; }

/* Touch screens: tappable things at least 44px (links inside sentences excepted). */
@media (pointer: coarse) {
	.gsmu-card .wp-block-post-title a { display: inline-flex; align-items: center; min-height: 44px; }
	.wp-lightbox-container button.lightbox-trigger { width: 44px !important; height: 44px !important; }
}

/* A tutor without a photo yet: the profile text takes the whole width. */
.gsmu-profile__photo:not(:has(img)) { display: none; }

/* Sample photos (only on pages made after "Sample photos" was imported). */
.gsmu-photo-tiles { margin-top: var(--wp--preset--spacing--50); }
.gsmu-photo-tile, .gsmu-photo-lesson, .gsmu-story__photo { margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius--md); }
.gsmu-photo-lesson, .gsmu-story__photo { border-radius: var(--wp--custom--radius--lg); }
.gsmu-photo-tile { position: relative; }
.gsmu-photo-tile img, .gsmu-photo-lesson img, .gsmu-story__photo img { display: block; width: 100%; height: auto; }
.gsmu-photo-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.5rem 0.9rem 0.75rem; background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.6)); color: #fff; font-weight: 600; text-align: left; }
.gsmu-photo-lesson figcaption { margin-top: 0.6rem; font-size: var(--wp--preset--font-size--small); }
.wp-block-columns:has(> .wp-block-column > .gsmu-photo-lesson) { margin-bottom: var(--wp--preset--spacing--50); }
.gsmu-credits li { margin-bottom: 0.5rem; }
.gsmu-look-staff .gsmu-photo-tile, .gsmu-look-staff .gsmu-photo-lesson, .gsmu-look-staff .gsmu-story__photo { border-radius: 4px; }
@media (max-width: 600px) { .gsmu-photo-tiles.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem; } .gsmu-photo-tile figcaption { padding: 1.5rem 0.5rem 0.45rem; font-size: 0.8rem; } }
/* Hero slides with a photo: a deeper shade under the words so they read over light photos. */
.gsmu-hero-slides > .gsmu-slide:has(> figure)::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.08) 25%, rgb(0 0 0 / 0.78)); }
.gsmu-hero-slides > .gsmu-slide:has(> figure) .gsmu-slide__title { text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }