/*
 * Artickle theme — additions beyond theme.json.
 * RTL-safe: logical properties only (no physical left/right positioning).
 * v2: dual-brand bento system + micro-interactions.
 */

/* Smooth in-page anchor jumps (hub CTAs → sections) */
html {
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
 * Bento grid — responsive collapse.
 * Desktop spans come from native block Grid layout (columnCount: 6).
 * These queries collapse gracefully: tablet 2-up, phone 1-up.
 * ------------------------------------------------------------------------- */
@media ( max-width: 1023px ) {
	.artickle-bento.wp-block-group {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
	.artickle-bento.wp-block-group > * {
		grid-column: span 2 / span 2 !important;
		grid-row: auto !important;
	}
}
@media ( max-width: 599px ) {
	.artickle-bento.wp-block-group {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}
	.artickle-bento.wp-block-group > * {
		grid-column: 1 / -1 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Cards — micro-interactions.
 * Tilt (--rx/--ry) and glow position (--mx/--my) are set by
 * assets/js/artickle-interactions.js on fine pointers only.
 * ------------------------------------------------------------------------- */
/* Tilt, reveal and parallax transforms are owned by GSAP (artickle-motion.js).
   CSS keeps the hover shadow, glow and exposure effects. */
.artickle-card {
	position: relative;
	overflow: hidden;
	transition: box-shadow 200ms ease;
}
.artickle-card:hover {
	box-shadow: var( --wp--preset--shadow--lifted );
}
.artickle-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( 260px circle at var( --mx, 50% ) var( --my, 50% ), rgb( 255 255 255 / 0.22 ), transparent 62% );
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}
.artickle-card:hover::after {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Full-bleed image cards (PRIMARY card style) — wp:cover as bento cell.
 * Overlay dim is part of the micro-animation: hover raises exposure
 * (dim fades) and the image gently scales. Fine pointers get tilt+glow too.
 * ------------------------------------------------------------------------- */
.artickle-card--bleed {
	border-radius: var( --wp--custom--radius--large );
}
.artickle-card--bleed .wp-block-cover__background {
	transition: opacity 450ms ease;
}
.artickle-card--bleed:hover .wp-block-cover__background {
	opacity: 0.22 !important;
}
@media ( prefers-reduced-motion: reduce ) {
	.artickle-card--bleed .wp-block-cover__background {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Bento goes full width: alignwide bento grids stretch to the band's edge
 * padding instead of capping at wideSize.
 * ------------------------------------------------------------------------- */
.wp-block-group.artickle-bento.alignwide {
	max-width: none !important;
}

/* ---------------------------------------------------------------------------
 * Transparent header overlay — used by the "Landing — Video hero" template.
 * The header stays a normal template part; the template's body class provides
 * the positioning contract: the site wrapper becomes the containing block,
 * the first in-flow content (the hero) starts at the very top, and the header
 * floats over it. White text, frosted CTA.
 * ------------------------------------------------------------------------- */
body.page .wp-site-blocks {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Seamless section flow: full-width bands own their spacing internally, so
 * the root and landing-page block gaps (white slivers between dark sections)
 * are removed. Blog post content keeps its normal paragraph rhythm.
 * ------------------------------------------------------------------------- */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}
body.page .wp-block-post-content > * {
	margin-block-start: 0 !important;
}
.artickle-header-overlay {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 30;
}
/* Legibility scrim: white logo/nav must survive bright hero media (e.g. a
   video frame of open sky). Lives inside the header's stacking context, so
   z-index -1 keeps it behind the logo/nav but above the hero. */
.artickle-header-overlay::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 175%;
	background: linear-gradient( to bottom, rgb( 0 0 0 / 0.55 ), rgb( 0 0 0 / 0 ) );
	pointer-events: none;
	z-index: -1;
}
/* No admin-bar offset: core's html-margin bump already moves the whole canvas
   below the bar, and the absolute header anchors to the shifted canvas — any
   extra inset double-compensates and opens a bare strip above the header. */

/* Header CTA swap: Enrichment (lime) pages show Login → app.artickle.sa,
   everything else shows Get in Touch. Both live in the header part. */
.artickle-header-login {
	display: none;
}
body.artickle-env-lime .artickle-header-login {
	display: block;
}
body.artickle-env-lime .artickle-header-cta {
	display: none;
}
.artickle-header-overlay.wp-block-group.has-base-background-color,
.artickle-header-overlay .wp-block-group.has-base-background-color {
	background-color: transparent !important;
}
.artickle-header-overlay,
.artickle-header-overlay a,
.artickle-header-overlay .wp-block-site-title a,
.artickle-header-overlay .wp-block-navigation a,
.artickle-header-overlay .wp-block-navigation__responsive-container-open {
	color: #ffffff;
}
/* ---------------------------------------------------------------------------
 * Desktop inline nav — underline draw + section-colored hovers (overlay header).
 * currentColor underline picks up the hover color automatically.
 * ------------------------------------------------------------------------- */
header .wp-block-navigation .wp-block-navigation-item__content {
	background-image: linear-gradient( currentColor, currentColor );
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	padding-block-end: 2px;
	transition: background-size 250ms ease, color 180ms ease;
}
header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background-size: 100% 2px;
}
/* On the dark overlay header, top-level section links glow in their brand color */
.artickle-header-overlay .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/enrichment"]:hover,
.artickle-header-overlay .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/enrichment"]:focus-visible {
	color: var( --wp--preset--color--accent-2 );
}
.artickle-header-overlay .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/events"]:hover,
.artickle-header-overlay .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > a[href*="/events"]:focus-visible {
	color: var( --wp--preset--color--accent-1 );
}

/* ---------------------------------------------------------------------------
 * Desktop dropdown: transparent panel, pill items that turn black on hover
 * (lime-on-white was unreadable). Items keep their own contrast pill.
 * ------------------------------------------------------------------------- */
header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0.35rem 0;
	/* align the panel's start edge with its menu item (core right-anchors
	   submenus in right-justified navs, pushing the panel leftward) */
	inset-inline-start: 0 !important;
	inset-inline-end: auto !important;
}
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	background-color: transparent;
	color: #ffffff !important;
	border-radius: 8px;
	padding: 0.5rem 0.9rem;
	margin-block-end: 0.25rem;
	/* lime underline, drawn left→right on hover like the main menu items */
	background-image: linear-gradient( var( --wp--preset--color--accent-2 ), var( --wp--preset--color--accent-2 ) );
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	transition: background-color 180ms ease, color 180ms ease, background-size 250ms ease;
}
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var( --wp--preset--color--contrast );
	background-size: 100% 2px;
	color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * Floating "Get in Touch" action button (mobile): replaces the header CTA,
 * sticky lower start corner (successor of the legacy WhatsApp bubble).
 * ------------------------------------------------------------------------- */
.wp-block-buttons.artickle-fab {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	z-index: 40;
	display: none;
}
.artickle-fab .wp-block-button__link {
	background-color: var( --wp--preset--color--contrast );
	color: #ffffff;
	box-shadow: var( --wp--preset--shadow--lifted );
	border: 1px solid rgb( 224 249 0 / 0.5 );
}
@media ( max-width: 781px ) {
	/* Hero contact CTA is redundant with the floating button */
body.page .wp-block-post-content > .wp-block-cover .wp-block-button:has( > .wp-block-button__link[href*="/contact-us/"] ) {
		display: none;
	}
	.wp-block-buttons.artickle-fab {
		display: block;
	}
	header .wp-block-buttons:not( .artickle-fab ) {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Full-screen menu overlay — designed takeover (all headers, mobile trigger).
 * Black canvas, oversized links, section-colored hovers, brand strip footer.
 * GSAP staggers the items in (artickle-menu.js); works without JS too.
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--contrast ) !important;
	color: #ffffff;
	padding: clamp( 1.5rem, 5vw, 3rem );
	display: flex;
	flex-direction: column;
}
.wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	flex: 0 0 6px;
	margin-block-start: auto;
	background: linear-gradient( 90deg, var( --wp--preset--color--accent-2 ) 0 50%, var( --wp--preset--color--accent-1 ) 50% 100% );
	border-radius: 3px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	padding-block-start: 0;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: clamp( 1.9rem, 8vw, 3rem );
	font-weight: 800;
	line-height: 1.25;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp( 1.05rem, 4.5vw, 1.35rem );
	font-weight: 500;
	color: rgb( 255 255 255 / 0.72 );
}
/* Section-colored hovers inside the menu */
.wp-block-navigation__responsive-container.is-menu-open a[href*="/enrichment"]:hover,
.wp-block-navigation__responsive-container.is-menu-open a[href*="/enrichment"]:focus {
	color: var( --wp--preset--color--accent-2 );
}
.wp-block-navigation__responsive-container.is-menu-open a[href*="/events"]:hover,
.wp-block-navigation__responsive-container.is-menu-open a[href*="/events"]:focus {
	color: var( --wp--preset--color--accent-1 );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #ffffff;
	align-self: flex-end;
}
.artickle-header-overlay .wp-block-button__link {
	background-color: rgb( 255 255 255 / 0.16 );
	color: #ffffff;
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}
.artickle-header-overlay .wp-block-button__link:hover {
	background-color: #ffffff;
	color: var( --wp--preset--color--contrast );
}

/* ---------------------------------------------------------------------------
 * Video hero content: bottom-anchored (the showreel has its own baked-in
 * animated text — page content must not overlap it). Mobile: aligned to the
 * end edge and stacked.
 * ------------------------------------------------------------------------- */
@media ( max-width: 781px ) {
body.page .wp-block-post-content > .wp-block-cover.is-position-bottom-center .wp-block-cover__inner-container {
		text-align: end;
	}
body.page .wp-block-post-content > .wp-block-cover.is-position-bottom-center h1,
body.page .wp-block-post-content > .wp-block-cover.is-position-bottom-center p {
		text-align: end !important;
	}
body.page .wp-block-post-content > .wp-block-cover.is-position-bottom-center .wp-block-buttons {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end !important;
	}
}

/* ---------------------------------------------------------------------------
 * Enrichment hero storyboard sequence: the band clips the off-screen title
 * pushes; the tagline flash cards position over the tagline's slot; the
 * typewriter caret blinks in the section accent.
 * ------------------------------------------------------------------------- */
.artickle-env-lime .wp-block-post-content > :first-child {
	overflow: clip;
	position: relative;
}

/* Mobile: the floating header needs guaranteed clearance above hero content —
   the animated sequences start too high otherwise and collide with the logo. */
@media ( max-width: 781px ) {
body.page .wp-block-post-content > :first-child {
		padding-block-start: clamp( 7.5rem, 26vw, 10rem ) !important;
	}
}

/* Full-width hero media layer (image slider / video) behind the animated
   text. Slides are plain image blocks; JS crossfades when there are 2+.
   Without JS only the first slide shows. A dim keeps the text readable. */
.artickle-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* escape the band's constrained-layout child cap — full bleed by default */
	max-width: none !important;
	margin: 0 !important;
	width: auto;
}
/* Width setting: wide / content keep the media as a centered band */
.artickle-hero-media--wide,
.artickle-hero-media--content {
	inset-inline: 50%;
	transform: translateX( -50% );
	width: 100%;
}
.artickle-hero-media--wide {
	max-width: 1340px !important;
}
.artickle-hero-media--content {
	max-width: 760px !important;
}
/* Fit setting: contain letterboxes against the band color */
.artickle-hero-media--contain img,
.artickle-hero-media--contain video {
	object-fit: contain;
}
.artickle-hero-media figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
}
.artickle-hero-media img,
.artickle-hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.artickle-hero-media figure + figure {
	opacity: 0;
}
.artickle-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb( 0 0 0 / 0.55 );
}
/* Text and CTAs stack above the media layer */
.artickle-env-lime .wp-block-post-content > :first-child > *:not( .artickle-hero-media ) {
	position: relative;
	z-index: 1;
}
.artickle-caret {
	display: inline-block;
	width: 0.55ch;
	height: 1em;
	margin-inline-start: 2px;
	vertical-align: text-bottom;
	background-color: var( --wp--preset--color--accent-2 );
}

/* Scroll reveals are GSAP-driven (initial states set only from JS, so content
   is never hidden without it). Reduced-motion is handled by gsap.matchMedia. */

/* ---------------------------------------------------------------------------
 * Buttons — per-colorway hovers (blocks set only background/text attrs).
 * ------------------------------------------------------------------------- */
.wp-element-button {
	transition: background-color 180ms ease, color 180ms ease, translate 180ms ease;
}
.wp-element-button:hover {
	translate: 0 -2px;
}
/* Default black pill → dark gray */
.wp-block-button__link.wp-element-button:not( .has-background ):hover {
	background-color: #222222;
	color: #ffffff;
}
/* Lime (Enrichment) → black bg, lime text */
.wp-element-button.has-accent-2-background-color:hover {
	background-color: var( --wp--preset--color--contrast ) !important;
	color: var( --wp--preset--color--accent-2 ) !important;
}
/* Orange (Events) → black bg, orange text */
.wp-element-button.has-accent-1-background-color:hover {
	background-color: var( --wp--preset--color--contrast ) !important;
	color: var( --wp--preset--color--accent-1 ) !important;
}
/* Explicit black pill → invert */
.wp-element-button.has-contrast-background-color:hover {
	background-color: var( --wp--preset--color--base ) !important;
	color: var( --wp--preset--color--contrast ) !important;
}

/* ---------------------------------------------------------------------------
 * Media placeholder frame — owner replaces with real media, then deletes note.
 * ------------------------------------------------------------------------- */
.artickle-placeholder {
	border: 2px dashed var( --wp--preset--color--accent-4 );
	border-radius: var( --wp--custom--radius--large );
	background: var( --wp--preset--color--accent-5 );
	min-height: 280px;
	display: grid;
	place-items: center;
	text-align: center;
	color: var( --wp--preset--color--accent-4 );
}

/* ---------------------------------------------------------------------------
 * Animated abstract placeholders (.artickle-anim + variant class):
 * black card, thin lime keyline, GSAP-drawn SVG scene behind a label.
 * Owner replaces the block with real media whenever ready.
 * ------------------------------------------------------------------------- */
.artickle-anim {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	background-color: var( --wp--preset--color--contrast );
	border: 1px solid rgb( 224 249 0 / 0.35 );
	border-radius: var( --wp--custom--radius--large );
	display: grid;
	align-content: end;
	justify-items: center;
}
.artickle-anim__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.artickle-anim > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Header wordmark: the designed SVG logo, section-colored.
 * Base letterforms follow the header text color (black on solid header,
 * white on the overlay); accent letters take the section color —
 * lime on Enrichment pages, orange on Events (and by default elsewhere).
 * ------------------------------------------------------------------------- */
:root {
	--artickle-logo-accent: var(--wp--preset--color--accent-1);
}
body.artickle-env-lime {
	--artickle-logo-accent: var(--wp--preset--color--accent-2);
}
body.artickle-env-orange {
	--artickle-logo-accent: var(--wp--preset--color--accent-1);
}
.artickle-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.artickle-logo svg {
	display: block;
}
.artickle-logo .artickle-logo__base {
	fill: currentColor;
}
.artickle-logo .artickle-logo__accent {
	fill: var(--artickle-logo-accent);
}

/* Pathway badges: logo icon (currentColor) + lime discipline chip */
.artickle-pathway-badge {
	display: block;
	margin-block-end: 0.75rem;
	opacity: 0.95;
}

/* Legacy numbered badge (kept for any remaining usage) */
.artickle-pathway-number {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--hero );
	font-weight: 800;
	line-height: 1;
	opacity: 0.18;
}

/* Checklist columns (instruments, ensembles, school services) */
.artickle-checklist ul {
	list-style: none;
	padding-inline-start: 0;
}
.artickle-checklist li {
	padding-inline-start: 1.75em;
	position: relative;
	margin-block-end: 0.4em;
}
.artickle-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.3em;
	width: 1.1em;
	height: 0.94em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042.5%2036.24'%3E%3Cpath%20d='M19.09,36.24c-3.66,0-6.92-.8-9.79-2.4-2.87-1.6-5.14-3.76-6.8-6.49-1.67-2.73-2.5-5.81-2.5-9.23s.83-6.43,2.5-9.16c1.67-2.73,3.93-4.91,6.8-6.53C12.17.81,15.44,0,19.09,0h23.26v8.12h-7.22c.97,1.44,1.72,3,2.26,4.69.53,1.69.8,3.46.8,5.31,0,3.43-.83,6.5-2.5,9.23-1.67,2.73-3.93,4.89-6.8,6.49-2.87,1.6-6.13,2.4-9.79,2.4ZM19.09,28.12c1.94,0,3.62-.44,5.03-1.32,1.41-.88,2.5-2.07,3.26-3.57s1.15-3.2,1.15-5.1-.38-3.54-1.15-5.07-1.85-2.75-3.26-3.68c-1.41-.93-3.09-1.39-5.03-1.39s-3.62.46-5.03,1.39c-1.41.93-2.5,2.15-3.26,3.68s-1.14,3.22-1.14,5.07.38,3.6,1.14,5.1,1.85,2.7,3.26,3.57c1.41.88,3.09,1.32,5.03,1.32Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042.5%2036.24'%3E%3Cpath%20d='M19.09,36.24c-3.66,0-6.92-.8-9.79-2.4-2.87-1.6-5.14-3.76-6.8-6.49-1.67-2.73-2.5-5.81-2.5-9.23s.83-6.43,2.5-9.16c1.67-2.73,3.93-4.91,6.8-6.53C12.17.81,15.44,0,19.09,0h23.26v8.12h-7.22c.97,1.44,1.72,3,2.26,4.69.53,1.69.8,3.46.8,5.31,0,3.43-.83,6.5-2.5,9.23-1.67,2.73-3.93,4.89-6.8,6.49-2.87,1.6-6.13,2.4-9.79,2.4ZM19.09,28.12c1.94,0,3.62-.44,5.03-1.32,1.41-.88,2.5-2.07,3.26-3.57s1.15-3.2,1.15-5.1-.38-3.54-1.15-5.07-1.85-2.75-3.26-3.68c-1.41-.93-3.09-1.39-5.03-1.39s-3.62.46-5.03,1.39c-1.41.93-2.5,2.15-3.26,3.68s-1.14,3.22-1.14,5.07.38,3.6,1.14,5.1,1.85,2.7,3.26,3.57c1.41.88,3.09,1.32,5.03,1.32Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
 * Logo marquee (clients & partners): GSAP drives the track; CSS shapes it.
 * Reduced motion / no JS: the row is a normal scrollable strip.
 * ------------------------------------------------------------------------- */
.artickle-marquee {
	overflow: hidden;
}
.artickle-marquee .artickle-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp( 2.5rem, 6vw, 5rem );
	width: max-content;
	padding-inline: clamp( 1.25rem, 3vw, 2.5rem );
}
.artickle-marquee .artickle-marquee__track .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}
/* Dark band: real logo colors (accurate previews), slightly dimmed at rest,
   full on hover. Per-logo corrections via classes on the image block:
   --invert = all-black marks (always shown white); --boost = dark-leaning
   marks lifted for legibility on black. */
.artickle-marquee .artickle-marquee__track img {
	height: 83px;
	width: auto;
	max-width: none;
	filter: opacity( 0.85 );
	transition: filter 250ms ease;
}
.artickle-marquee .artickle-marquee__track img:hover {
	filter: none;
}
.artickle-marquee .artickle-logo--invert img,
.artickle-marquee .artickle-logo--invert img:hover {
	filter: invert( 1 ) opacity( 0.85 );
}
.artickle-marquee .artickle-logo--invert img:hover {
	filter: invert( 1 );
}
.artickle-marquee .artickle-logo--boost img {
	filter: brightness( 1.5 ) opacity( 0.85 );
}
.artickle-marquee .artickle-logo--boost img:hover {
	filter: brightness( 1.15 );
}
@media ( prefers-reduced-motion: reduce ) {
	.artickle-marquee {
		overflow-x: auto;
	}
}

/* Dual-accent brand strip (footer / dividers): lime → orange */
.artickle-brand-strip {
	height: 6px;
	border: none;
	margin: 0;
	background: linear-gradient( 90deg, var( --wp--preset--color--accent-2 ) 0 50%, var( --wp--preset--color--accent-1 ) 50% 100% );
}

/* Dark (black) surfaces: links must be light (the global link color is black
   and element-level link styling beats the surface's inherited text color) */
.has-contrast-background-color a:not( .wp-block-button__link ) {
	color: var( --wp--preset--color--base );
}
.has-contrast-background-color a:not( .wp-block-button__link ):hover {
	opacity: 0.75;
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Brand wordmark override: every occurrence of the word "artickle" renders in
 * MuseoModerno bold, even mid-sentence. Spans are injected by
 * assets/js/artickle-wordmark.js; content itself is never modified.
 * ------------------------------------------------------------------------- */
.artickle-wordmark {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	text-transform: lowercase;
}


/* ---------------------------------------------------------------------------
 * Instrument icon bullets (Music page). Original artickle glyphs, no external
 * license. Icons map by list position; unknown/added items fall back to the
 * note glyph via the custom-property default.
 * ------------------------------------------------------------------------- */
.artickle-checklist ul.artickle-instruments-a li::before,
.artickle-checklist ul.artickle-instruments-b li::before {
	--icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9.5%203h1.8l8.2%202.2v3.1l-7.5-2v9.9a3.6%203.6%200%201%201-2.5-3.4z'%2F%3E%3C%2Fsvg%3E");
	width: 1.3em;
	height: 1.3em;
	inset-block-start: 0.08em;
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}
ul.artickle-instruments-a li:nth-child(1)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M3%204h4.2v16H3zM9.9%204h4.2v16H9.9zM16.8%204h4.2v16h-4.2zM6.6%204h3.4v9.5H6.6zM13.5%204h3.4v9.5h-3.4z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(2)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11%201.5h2v7.2h-2z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12.3'%20r%3D'3.5'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17.4'%20r%3D'4.5'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(3)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10.9%201.5h2.2v7h-2.2z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12.2'%20r%3D'3.8'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17.4'%20r%3D'4.8'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(4)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.2%201h1.6v6.4h-1.6z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10.9'%20r%3D'3.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.8'%20r%3D'4.3'%2F%3E%3Cpath%20d%3D'M11.5%2019.6h1v3.4h-1z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(5)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1%200.8h1.8v6h-1.8z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10.6'%20r%3D'3.9'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'16'%20r%3D'5.1'%2F%3E%3Cpath%20d%3D'M11.5%2020.6h1v2.8h-1z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(6)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1%202.6h1.8v7h-1.8z'%2F%3E%3Cpath%20d%3D'M9.9%200.8h4.2v2.4H9.9z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'13'%20r%3D'3.4'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17.8'%20r%3D'4.4'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(7)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.2%204.4h1.6v5.4h-1.6z'%2F%3E%3Cpath%20d%3D'M10.2%202.8h3.6v2H10.2z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'13.6'%20r%3D'2.9'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17.7'%20r%3D'3.7'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-a li:nth-child(8)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'4'%20y%3D'11'%20width%3D'16'%20height%3D'8'%20rx%3D'1.2'%2F%3E%3Cpath%20d%3D'M4.6%202.4l6.4%206.6-1.5%201.4-6.3-6.6zM19.4%202.4l-6.4%206.6%201.5%201.4%206.3-6.6z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(1)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Crect%20x%3D'1.5'%20y%3D'10.4'%20width%3D'21'%20height%3D'3.6'%20rx%3D'1.8'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'7.6'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'13.5'%20cy%3D'7.6'%20r%3D'1.3'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'7.6'%20r%3D'1.3'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(2)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10.7%201.4l2.6%200.1-0.4%202.2h-1.9z'%2F%3E%3Cpath%20d%3D'M10.5%203.8h3v11.4h-3z'%2F%3E%3Cpath%20d%3D'M8.8%2015.2h6.4l1.9%205.6H6.9z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(3)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9%201.6h3v2H9z'%2F%3E%3Cpath%20d%3D'M9.6%203.4h1.9c0%205.4%200.1%209.2%201.9%2011.4%201.5%201.8%204.3%201.7%205.3%200.2l1.8%201.2c-1.7%202.9-6.2%203.2-8.6%200.8-2.6-2.7-2.3-8-2.3-13.6z'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'13.2'%20r%3D'2.2'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(4)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'7.4'%20r%3D'4.2'%2F%3E%3Cpath%20d%3D'M10.3%2012.4h3.4l1.6%209.8H8.7z'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(5)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10.2%201.4l3.2%201.2-2.4%206.2-2.7-1z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'14.6'%20r%3D'6.2'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(6)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5.4%2020.4L17.6%203.4l2%201.4L7.4%2021.8z'%2F%3E%3Ccircle%20cx%3D'13.4'%20cy%3D'10.4'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'11.2'%20cy%3D'13.4'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'16.4'%20r%3D'1'%2F%3E%3C%2Fsvg%3E"); }
ul.artickle-instruments-b li:nth-child(7)::before { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9.5%203h1.8l8.2%202.2v3.1l-7.5-2v9.9a3.6%203.6%200%201%201-2.5-3.4z'%2F%3E%3C%2Fsvg%3E"); }