/*
 * Accessibility layer (WCAG 2.2 AA). Loaded after the legacy bundles so it can
 * darken the few brand colours that fail contrast on the cream (#f5ddd8) bg,
 * and add focus / skip-link / target-size affordances. Desktop look is otherwise
 * unchanged — only sub-AA text colours move (approved 2026-06-15).
 */

/* --- Screen-reader-only text + skip link --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	background: #20215c;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

/* --- Visible keyboard focus (2.4.7) --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #20215c;
	outline-offset: 2px;
}

/* --- Contrast (1.4.3): darken the three failing brand colours on cream --- */

/* Brand-pink body links: #ec008c (3.27:1) -> #b3006a (~5:1). Pink headings and
   decorative pink (the cube, backgrounds) are not links, so stay #ec008c. */
a {
	color: #b3006a;
}

/* "share +" toggle: was #cdb9be (1.43:1) base / #908497 hover. */
.share_menu li a.display_share,
.share_menu li a.display_share:hover {
	color: #5b5566;
}

/* Dim / muted gray labels: #908497 (2.73:1) -> #5b5566 (~5.5:1). */
.page_content.studio_profile h3,
.page_content.studio_profile .dim,
.page_content.conversations.detail h4,
.page_content.conversations.detail h5,
.page_content.explore .data_story h3,
footer .copyright p,
footer .copyright p a {
	color: #5b5566;
}

/* Small pink headings (h5 ~16px, data-story h4) are below the large-text
   threshold, so #ec008c (3.27:1) fails — darken to #b3006a. The big hero
   headings (h1/h2) are large text and pass at 3:1, so they stay brand pink. */
.page_content section h5,
.page_content.about section h5,
.page_content.home section h5,
.page_content.studios h5,
.page_content.exhibition_info h5,
.page_content.explore .data_story h4 {
	color: #b3006a;
}

/* The "78 Participating Studios" box: white on #ec008c is 4.24:1 — darken the
   box background so the small white text passes. */
.page_content.home section.grid_roundup .totalstudios {
	background-color: #b3006a;
}

/* Links inside prose must be distinguishable without colour alone (1.4.1):
   underline content links (the base a{} is text-decoration:none). */
.page_content p a,
.page_content .credits a,
.page_content .author_bio a {
	text-decoration: underline;
}

/* Studio-profile data-viz / bleed bands: white text on #ec008c (4.24:1) or
   on the light gold (#e6c59d, 1.63:1). Darken the pink fills; switch the gold
   bar to dark text. */
.page_content.studio_profile .graph .bar.pink,
.page_content.studio_profile section.bleed {
	background-color: #b3006a;
}
.page_content.studio_profile .graph .bar.gold .bar_text h4,
.page_content.studio_profile .graph .bar.gold .bar_text p {
	color: #20215c;
}

/* "Outside our scope" disciplines: pink-on-white labels (#ec008c 4.24:1 and
   the lighter #ef79ac dim 2.62:1) -> darker pink. */
.page_content.studio_profile ul.nondiscipline li .title,
.page_content.studio_profile ul.nondiscipline li .dim {
	color: #b3006a;
}

/* The studio-name link inside the conversation-detail H1 reads as pink on a
   navy heading (2.17:1 vs surround); underline so it's distinguishable. */
.page_content.conversations.detail h1 a {
	text-decoration: underline;
}

/* --- Target size (2.5.8): >=24px tap targets for the tight footer link
   lists + the studio website / "Elsewhere" links (the nav links are already
   ~40px tall). --- */
footer .more_info li a,
footer .social_links li a,
footer .contact .addr a,
.page_content.studio_profile .studio_website a,
.page_content.studio_profile ul.elsewhere li a,
.page_content.exhibition_info #panel ul li a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}