/**
 * Quorum - skin (per theme; NOT shared with Charter / Commons)
 *
 * Loaded after the shared theme.css. Holds only what tokens.css cannot
 * express: Quorum's contemporary, rounded surface treatment.
 *   - extra-bold display headings
 *   - a left-aligned welcome slide with the network watermark on the right
 *     and a tangerine highlighter under the h1's emphasised words
 *   - pill-chip eyebrows on section heads
 *   - tinted news cards with no top band, on a white band with a plus grid
 *   - 2px job card borders, a pill current link in the sidebar
 *   - upright text where the family uses italics (Manrope has no italic)
 */

/* Display headings at --display-weight (tokens.css) */
.brand > p:not(:has(img)),
.slide--welcome .slide__body > h1,
.page-band h1 { font-weight: var(--display-weight); }

/* Welcome slide: left-aligned, network on the right */
.slide--welcome .slide__inner {
	max-width: calc(1320px + var(--gutter) * 2);
	text-align: left;
}
.slide--welcome .slide__body { max-width: 820px; }
.slide--welcome .slide__body > p:not(:has(+ h1)) { margin-inline: 0; }
.slide--welcome .slide__body > ul { justify-content: flex-start; }
.slide--welcome .slide__watermark { left: auto; right: -140px; transform: translateY(-50%); opacity: .16; }
/* Emphasised words get a highlighter stroke instead of a colour. Ink on the
   tangerine is 10:1. */
.slide--welcome .slide__body > h1 em {
	font-style: normal;
	color: var(--ink);
	background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent-2) 70%, transparent) 60%, color-mix(in srgb, var(--accent-2) 70%, transparent) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* Conference theme line: upright, at the heading weight (the heading font has no italic) */
.slide__body > p:has(> em:only-child) { font-weight: var(--heading-weight); }
.slide__body > p:has(> em:only-child) em { font-style: normal; }
/* Conference card label: the family's --accent-2-light is 3.8:1 on the teal
   card, under 4.5:1 for small text. A paler tangerine is 4.75:1. */
.conf-card__body > p:has(+ h3) { color: color-mix(in srgb, var(--accent-2) 25%, #fff); }

/* Section-head eyebrows: pill chips tinted from their own text colour
   (raspberry chip text is 4.7:1, teal 4.9:1) */
.section-head > p:has(+ h2) {
	justify-self: start;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, currentColor 10%, #fff);
}

/* News: a white band with the plus grid; cards tinted by position, no top band */
.news-band { background: var(--surface); }
.news-list li { border-top: 0; box-shadow: none; }
.news-list li:nth-of-type(4n+1) { background: var(--cyc-1-tint); }
.news-list li:nth-of-type(4n+2) { background: var(--cyc-2-tint); }
.news-list li:nth-of-type(4n+3) { background: var(--cyc-3-tint); }
.news-list li:nth-of-type(4n+4) { background: var(--cyc-4-tint); }
.news-list li > p:has(+ h3) {
	align-self: flex-start;
	padding: 5px 10px 5px 8px;
	border-radius: var(--radius-pill);
	background: var(--surface);
}

/* Coloured bands: paths, Our work and the footer all use --primary-dark
   (lighter ultramarine). Tangerine focus rings are 2.6:1 on it, under the
   3:1 minimum, so rings on the bands are white (5.2:1). */
.paths { background: var(--primary-dark); }
.paths__list li:has(a:focus-visible) { box-shadow: inset 0 0 0 3px #fff; }
.our-work__body li:has(a:focus-visible) { box-shadow: 0 0 0 4px var(--primary-dark), 0 0 0 7px #fff; }
.site-footer :focus-visible { box-shadow: 0 0 0 3px #fff; }
.site-footer #footerEmailInput:focus { box-shadow: 0 0 0 3px var(--primary-dark), 0 0 0 6px #fff; }

/* The organization name, the fallback mark, the welcome slide's buttons and
   watermark, and the current slider dot use the same lighter ultramarine
   (Nick, 2026-10-14). As text on white it is 5.2:1. Hover goes to the full
   brand primary. Links, other buttons and the sidebar keep #2B44B5. */
.brand > p:not(:has(img)),
.brand__mark { color: var(--primary-dark); }
.slide--welcome .slide__watermark { color: var(--primary-dark); }
.slide--welcome .slide__body > ul a { color: var(--primary-dark); }
.slide--welcome .slide__body > ul a:hover { border-color: var(--primary-dark); }
.slide--welcome .slide__body > ul > li:first-child a { background: var(--primary-dark); color: #fff; }
.slide--welcome .slide__body > ul > li:first-child a:hover { background: var(--brand-primary); color: #fff; }
.hero__dot[aria-current="true"] span { background: var(--primary-dark); }

/* Jobs: heavier outline */
.job-list li { border-width: 2px; }

/* Footer logo: a rounded square, not a circle */
.footer-logo { border-radius: var(--radius-badge); }

/* Interior sidebar: an outlined white panel; links are pills */
.section-nav { padding: 22px 18px; border: 1px solid var(--line); background: var(--surface); }
.section-nav a { border-radius: var(--radius-pill); }
.section-nav a:hover { background: var(--primary-tint); color: var(--brand-primary); }
.section-nav a[aria-current="page"] {
	background: color-mix(in srgb, var(--brand-primary) 10%, #fff);   /* primary text on it: 6.9:1 */
	color: var(--brand-primary);
}

/* Pull quotes: raspberry rule, upright heading font, no panel */
.main-content blockquote {
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--accent-1);
	border-radius: 0;
	background: none;
}
.main-content blockquote p { font-style: normal; font-weight: var(--heading-weight); }