/**
 * DadSquad front end styles.
 *
 * Everything is namespaced under .ds- so it never collides with Divi. Colours,
 * radius and spacing come from custom properties, so the child theme (or the
 * Divi Theme Customiser) can restyle the whole system by redefining a handful
 * of variables rather than overriding rules.
 */

:root {
	--ds-ink: #16202b;
	--ds-ink-soft: #55636f;
	--ds-ink-faint: #8a949d;
	--ds-line: #e2e6ea;
	--ds-surface: #ffffff;
	--ds-surface-alt: #f5f7f9;

	--ds-brand: #1f3a5f;
	--ds-brand-dark: #16293f;
	--ds-accent: #e0762a;
	--ds-accent-dark: #c46220;
	--ds-ok: #2f7a4f;
	--ds-warn: #b3421f;

	--ds-radius: 12px;
	--ds-radius-sm: 8px;
	--ds-gap: 28px;
	--ds-shadow: 0 1px 2px rgba(22, 32, 43, .06), 0 8px 24px rgba(22, 32, 43, .07);
	--ds-shadow-lift: 0 4px 10px rgba(22, 32, 43, .09), 0 16px 40px rgba(22, 32, 43, .11);
}

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */

.ds-page__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 48px 24px 72px;
}

.ds-block {
	margin: 0 0 40px;
}

.ds-block__title {
	margin: 0 0 24px;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	line-height: 1.2;
	color: var(--ds-ink);
}

.ds-block__more {
	margin: 28px 0 0;
	text-align: center;
}

.ds-block__quiet {
	margin-left: 18px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ds-ink-faint);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-block__quiet:hover { color: var(--ds-brand); }

.ds-grid {
	display: grid;
	gap: var(--ds-gap);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	justify-content: center;
}

/* The auto-fill default handles narrow screens; these cap the column count
   once there is room for more. */
@media (min-width: 900px) {
	.ds-grid--1 { grid-template-columns: 1fr; }
	.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }

	/* Only a row that cannot fill itself gets capped and centred. An earlier
	   attempt applied the cap to every grid, which collapsed a three-column
	   block inside a 700px column down to a single stack and made the home
	   page enormous — the cap was wider than two tracks would fit, so auto-fit
	   gave up and laid out one. Keyed on the item count with :has(), so a full
	   grid keeps the fractional columns it always had. */
	/* Written as "the last child is within the first N-1" rather than
	   :not(:has(...)), because Chromium treats :has() nested inside :not() as
	   an invalid selector and throws the whole rule away silently. */
	.ds-grid--2:has(> :last-child:nth-child(1)),
	.ds-grid--3:has(> :last-child:nth-child(-n+2)),
	.ds-grid--4:has(> :last-child:nth-child(-n+3)) {
		grid-template-columns: repeat(auto-fit, minmax(0, 340px));
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------ */

.ds-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ds-card:hover,
.ds-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--ds-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
	.ds-card { transition: none; }
	.ds-card:hover,
	.ds-card:focus-within { transform: none; }
}

.ds-card.is-past { opacity: .72; }

.ds-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--ds-surface-alt);
	overflow: hidden;
}

.ds-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ds-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	opacity: .35;
}

.ds-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1 1 auto;
}

.ds-card__eyebrow {
	margin: 0;
	/* Was .75rem, which at uppercase with wide letter-spacing was genuinely
	   hard to read — it is the trade, which is the thing people scan for. */
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ds-accent-dark);
}

.ds-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.ds-card__eyebrow a:hover { text-decoration: underline; }

.ds-card__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--ds-ink);
}

.ds-card__title--sub { font-size: 1.02rem; font-weight: 600; }

.ds-card__title a {
	color: inherit;
	text-decoration: none;
}

.ds-card__title a:hover { color: var(--ds-brand); }

.ds-card__tagline,
.ds-card__excerpt,
.ds-card__note {
	margin: 0;
	color: var(--ds-ink-soft);
	font-size: .93rem;
	line-height: 1.55;
}

.ds-card__fineprint {
	margin: 0;
	font-size: .8rem;
	color: var(--ds-ink-faint);
}

.ds-card__cta {
	margin: auto 0 0;
	padding-top: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Date badge on event cards. */
.ds-datebadge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 54px;
	padding: 7px 4px 9px;
	background: var(--ds-surface);
	border-radius: var(--ds-radius-sm);
	box-shadow: var(--ds-shadow);
	line-height: 1;
}

.ds-datebadge__month {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ds-accent-dark);
}

.ds-datebadge__day {
	margin-top: 3px;
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--ds-ink);
}

.ds-ribbon {
	position: absolute;
	top: 14px;
	right: 0;
	z-index: 2;
	padding: 5px 12px;
	background: var(--ds-accent);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
}

/* ---------------------------------------------------------------------------
 * Meta lists
 * ------------------------------------------------------------------------ */

.ds-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Divi styles every ul inside its content areas, so a card rendered in one
   grew bullets in front of the date and venue. Scoping this to .entry-content
   missed the 404 template, so it is keyed on our own class instead: .ds-meta
   is a list we own everywhere it appears, and it never wants markers. */
ul.ds-meta,
ul.ds-meta > li.ds-meta__item {
	list-style: none !important;
	list-style-type: none !important;
	margin-left: 0 !important;
}

ul.ds-meta > li.ds-meta__item::marker { content: none; }

.ds-meta__item {
	position: relative;
	padding-left: 22px;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-meta__item::before {
	position: absolute;
	left: 0;
	top: 0;
	font-size: .95em;
	line-height: 1.45;
}

.ds-meta__item--when::before { content: "\1F4C5"; }
.ds-meta__item--where::before { content: "\1F4CD"; }
.ds-meta__item--cost::before { content: "\1F4B5"; }

/* ---------------------------------------------------------------------------
 * Offers, codes, tags
 * ------------------------------------------------------------------------ */

.ds-offer {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--ds-brand);
}

.ds-offer--large { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); }

.ds-code {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: var(--ds-surface-alt);
	border: 1px dashed var(--ds-brand);
	border-radius: var(--ds-radius-sm);
}

.ds-code__label {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
}

.ds-code__value {
	flex: 1 1 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ds-ink);
	background: none;
	padding: 0;
}

.ds-code__copy {
	flex: 0 0 auto;
	padding: 6px 14px;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--ds-brand);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.ds-code__copy:hover { background: var(--ds-brand-dark); }
.ds-code__copy.is-copied { background: var(--ds-ok); }

.ds-tag {
	display: inline-block;
	padding: 4px 11px;
	font-size: .75rem;
	font-weight: 700;
	border-radius: 999px;
	background: var(--ds-surface-alt);
	color: var(--ds-ink-soft);
}

.ds-tag--perk {
	background: rgba(224, 118, 42, .12);
	color: var(--ds-accent-dark);
}

.ds-tag--featured {
	vertical-align: middle;
	margin-left: 10px;
	background: rgba(31, 58, 95, .1);
	color: var(--ds-brand);
}

.ds-card__perk { margin: 0; }

.ds-card__locked-line {
	margin: 0;
	font-size: .9rem;
	color: var(--ds-ink-soft);
}

.ds-lockicon { margin-right: 4px; }

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

.ds-btn {
	display: inline-block;
	padding: 11px 22px;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ds-btn--primary {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
	color: #fff;
}

.ds-btn--primary:hover {
	background: var(--ds-accent-dark);
	border-color: var(--ds-accent-dark);
	color: #fff;
}

.ds-btn--ghost {
	background: transparent;
	border-color: var(--ds-line);
	color: var(--ds-ink);
}

.ds-btn--ghost:hover {
	border-color: var(--ds-brand);
	color: var(--ds-brand);
}

.ds-btn--link {
	padding: 6px 0;
	background: none;
	border: 0;
	color: var(--ds-brand);
	text-decoration: underline;
}

.ds-btn--small { padding: 8px 16px; font-size: .84rem; }
.ds-btn--block { display: block; width: 100%; }
.ds-btn--block + .ds-btn--block { margin-top: 10px; }

/* ---------------------------------------------------------------------------
 * Archives
 * ------------------------------------------------------------------------ */

.ds-archive__header {
	margin: 0 0 40px;
	text-align: center;
}

.ds-archive__title {
	margin: 0 0 12px;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
	line-height: 1.1;
	color: var(--ds-ink);
}

.ds-archive__intro {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--ds-ink-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

.ds-toggle {
	display: inline-flex;
	margin: 26px auto 0;
	padding: 4px;
	background: var(--ds-surface-alt);
	border-radius: 999px;
}

.ds-toggle__item {
	padding: 8px 20px;
	font-size: .87rem;
	font-weight: 700;
	color: var(--ds-ink-soft);
	text-decoration: none;
	border-radius: 999px;
}

.ds-toggle__item.is-active {
	background: var(--ds-surface);
	color: var(--ds-ink);
	box-shadow: var(--ds-shadow);
}

.ds-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
}

.ds-chip {
	padding: 7px 16px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ds-ink-soft);
	text-decoration: none;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: 999px;
}

.ds-chip:hover { border-color: var(--ds-brand); color: var(--ds-brand); }

.ds-chip.is-active {
	background: var(--ds-brand);
	border-color: var(--ds-brand);
	color: #fff;
}

/* The events filter bar. One line, dropdowns rather than chips: the chip
   version grew a row per taxonomy and pushed the events themselves off the
   screen, which defeated the point of having filters at all. */
.ds-eventbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	padding: 10px 12px;
	text-align: left;
	background: var(--ds-surface-alt);
	border: 1px solid var(--ds-line);
	border-radius: 999px;
}

/* Divi puts padding-bottom: 1em on every paragraph, and these wrappers are
   paragraphs. A flex item centres inside the content box, not the border box,
   so the 17px of padding sat below the select and pushed it 8px above the line
   everything else in the bar sat on — close enough to look like a mistake and
   small enough to survive a first look. Zeroed here rather than centring
   harder, because the padding was never wanted. */
.ds-eventbar__field {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.ds-eventbar select {
	max-width: 190px;
	padding: 8px 30px 8px 14px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ds-ink);
	background-color: var(--ds-surface);
	/* The arrow is drawn rather than left to the browser, because the native
	   control on Windows renders a grey block that reads as disabled. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2355636f' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid var(--ds-line);
	border-radius: 999px;
	appearance: none;
	cursor: pointer;
}

.ds-eventbar select:hover { border-color: var(--ds-brand); }

.ds-eventbar select:focus-visible {
	outline: 2px solid var(--ds-brand);
	outline-offset: 1px;
}

.ds-eventbar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ds-ink-soft);
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: 999px;
	cursor: pointer;
}

.ds-eventbar__toggle:hover { border-color: var(--ds-brand); }

.ds-eventbar__toggle:has(input:checked) {
	color: #fff;
	background: var(--ds-brand);
	border-color: var(--ds-brand);
}

.ds-eventbar__toggle input { margin: 0; accent-color: var(--ds-accent); }

.ds-eventbar__spacer { flex: 1 1 auto; }

.ds-eventbar__views {
	display: inline-flex;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: 999px;
}

.ds-eventbar__view {
	padding: 7px 13px;
	font-size: .95rem;
	line-height: 1.2;
	color: var(--ds-ink-faint);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-eventbar__view:hover { color: var(--ds-brand); }

.ds-eventbar__view.is-active {
	color: #fff;
	background: var(--ds-brand);
}

.ds-eventbar__clear {
	padding: 8px 4px;
	font-size: .84rem;
	font-weight: 700;
	color: var(--ds-brand);
}

.ds-eventbar__clear.is-hidden { display: none; }

@media (max-width: 720px) {
	.ds-eventbar {
		border-radius: var(--ds-radius);
	}

	.ds-eventbar__field,
	.ds-eventbar select { flex: 1 1 140px; max-width: none; width: 100%; }

	.ds-eventbar__spacer { display: none; }
}

.ds-events-results.is-loading {
	opacity: .45;
	transition: opacity .12s ease-out;
}

.ds-results-count {
	margin: 16px 0 0;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ds-ink-faint);
}

/* Compact list view. Same events, one line each, for scanning a month. */
.ds-eventlist {
	margin: 18px 0 0;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	overflow: hidden;
	background: var(--ds-surface);
}

.ds-eventrow {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 18px;
	padding: 13px 18px;
	border-top: 1px solid var(--ds-line);
}

.ds-eventrow:first-child { border-top: 0; }
.ds-eventrow:nth-child(even) { background: var(--ds-surface-alt); }
.ds-eventrow.is-past .ds-eventrow__when { color: var(--ds-ink-faint); }

.ds-eventrow__when {
	margin: 0;
	font-size: .84rem;
	font-weight: 700;
	color: var(--ds-brand);
}

.ds-eventrow__what { min-width: 0; }

.ds-eventrow__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.ds-eventrow__title a { color: var(--ds-ink); text-decoration: none; }
.ds-eventrow__title a:hover { color: var(--ds-brand); }

.ds-eventrow__meta {
	margin: 2px 0 0;
	font-size: .82rem;
	color: var(--ds-ink-soft);
}

.ds-eventrow__tags {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ds-eventrow__going {
	font-size: .8rem;
	font-weight: 700;
	color: var(--ds-ink-faint);
	white-space: nowrap;
}

.ds-eventrow__cta { margin: 0; }

.ds-tag {
	padding: 4px 10px;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ds-ink-soft);
	background: var(--ds-surface-alt);
	border: 1px solid var(--ds-line);
	border-radius: 999px;
	white-space: nowrap;
}

.ds-tag--newcomer {
	color: var(--ds-ok);
	background: rgba(47, 122, 79, .09);
	border-color: rgba(47, 122, 79, .25);
}

.ds-eventrow:nth-child(even) .ds-tag { background: var(--ds-surface); }

@media (max-width: 860px) {
	.ds-eventrow {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 14px;
		padding: 14px 16px;
	}

	.ds-eventrow__when { grid-column: 1 / -1; }
	.ds-eventrow__tags { grid-column: 1; }
	.ds-eventrow__what { grid-column: 1 / -1; }
	.ds-eventrow__cta { grid-column: 2; grid-row: 3; }
}

.ds-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 48px 0 0;
}

.ds-pagination a,
.ds-pagination span.current,
.ds-pagination span.dots {
	display: inline-block;
	min-width: 40px;
	padding: 9px 12px;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	color: var(--ds-ink-soft);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
}

.ds-pagination span.current {
	background: var(--ds-brand);
	border-color: var(--ds-brand);
	color: #fff;
}

.ds-pagination span.dots { border-color: transparent; }

/* ---------------------------------------------------------------------------
 * Single views
 * ------------------------------------------------------------------------ */

.ds-single__header { margin: 0 0 28px; }

.ds-single__eyebrow {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ds-accent-dark);
}

.ds-single__eyebrow a { color: inherit; text-decoration: none; }
.ds-single__eyebrow a:hover { text-decoration: underline; }

.ds-single__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
	line-height: 1.12;
	color: var(--ds-ink);
}

.ds-single__lede {
	margin: 14px 0 0;
	font-size: 1.15rem;
	color: var(--ds-ink-soft);
}

.ds-single__media {
	margin: 0 0 36px;
	border-radius: var(--ds-radius);
	overflow: hidden;
}

.ds-single__media img { display: block; width: 100%; height: auto; }

.ds-single__layout {
	display: grid;
	gap: 44px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.ds-single__layout { grid-template-columns: minmax(0, 1fr) 330px; }
	.ds-single__aside { position: sticky; top: 40px; }
}

.ds-single__footer {
	margin: 56px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--ds-line);
}

.ds-section { margin: 40px 0 0; }

.ds-section__title {
	margin: 0 0 18px;
	font-size: 1.3rem;
	color: var(--ds-ink);
}

.ds-fineprint {
	font-size: .87rem;
	color: var(--ds-ink-faint);
	line-height: 1.6;
}

.ds-partner-callout { margin: 44px 0 0; }

.ds-partner-callout__title {
	margin: 0 0 18px;
	font-size: 1.15rem;
	color: var(--ds-ink);
}

.ds-partner-callout .ds-card { max-width: 420px; }

/* Fact box in the sidebar. */
.ds-factbox {
	padding: 26px;
	background: var(--ds-surface-alt);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
}

.ds-factbox__title {
	margin: 0 0 18px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--ds-ink);
}

.ds-factbox__name { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; }
.ds-factbox__name a { color: var(--ds-brand); text-decoration: none; }
.ds-factbox__actions { margin-top: 22px; }

.ds-factlist { margin: 0; }

.ds-factlist dt {
	margin: 16px 0 3px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
}

.ds-factlist dt:first-child { margin-top: 0; }

.ds-factlist dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--ds-ink);
}

.ds-factlist dd a { color: var(--ds-brand); }

/* ---------------------------------------------------------------------------
 * Gating, notices, banners
 * ------------------------------------------------------------------------ */

.ds-locked {
	margin: 24px 0;
	padding: 30px 26px;
	text-align: center;
	background: var(--ds-surface-alt);
	border: 1px dashed var(--ds-line);
	border-radius: var(--ds-radius);
}

.ds-locked__icon { margin: 0 0 10px; font-size: 1.8rem; }

.ds-locked__title {
	margin: 0 0 10px;
	font-size: 1.25rem;
	color: var(--ds-ink);
}

.ds-locked__text {
	max-width: 44ch;
	margin: 0 auto 20px;
	color: var(--ds-ink-soft);
	line-height: 1.6;
}

.ds-locked__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.ds-notice {
	padding: 16px 20px;
	margin: 0 0 22px;
	background: var(--ds-surface-alt);
	border-left: 4px solid var(--ds-brand);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-ink);
}

.ds-notice h3 { margin: 0 0 6px; font-size: 1.1rem; }
.ds-notice p { margin: 0; color: var(--ds-ink-soft); }
.ds-notice--ok { border-left-color: var(--ds-ok); }
.ds-notice--error { border-left-color: var(--ds-warn); }
.ds-notice--muted { border-left-color: var(--ds-ink-faint); }

.ds-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	max-width: 880px;
	margin: 30px auto 0;
	padding: 22px 26px;
	text-align: left;
	background: var(--ds-brand);
	border-radius: var(--ds-radius);
	color: #fff;
}

.ds-banner__text { margin: 0; flex: 1 1 320px; line-height: 1.55; }
.ds-banner__text strong { display: block; }

.ds-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.ds-banner .ds-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.ds-banner .ds-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ds-empty {
	margin: 0;
	padding: 26px;
	text-align: center;
	color: var(--ds-ink-soft);
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius);
}

.ds-empty--large { padding: 64px 26px; }

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------ */

.ds-form {
	max-width: 540px;
	margin: 0 auto;
	padding: 34px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
}

.ds-form__intro {
	margin: 0 0 24px;
	color: var(--ds-ink-soft);
	line-height: 1.6;
}

.ds-form__row { margin: 0 0 20px; }

.ds-form__label {
	display: block;
	margin: 0 0 6px;
	font-size: .87rem;
	font-weight: 700;
	color: var(--ds-ink);
}

.ds-form__input {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	color: var(--ds-ink);
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
}

.ds-form__input:focus {
	outline: 2px solid var(--ds-brand);
	outline-offset: 1px;
	border-color: var(--ds-brand);
}

.ds-form__hint {
	display: block;
	margin: 6px 0 0;
	font-size: .8rem;
	color: var(--ds-ink-faint);
}

.ds-form__actions { margin: 26px 0 0; }
.ds-form__actions .ds-btn { width: 100%; }

.ds-form__foot {
	margin: 18px 0 0;
	text-align: center;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-req { color: var(--ds-warn); }

/* Honeypot: off screen rather than display:none, which some bots detect. */
.ds-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ds-loginbox {
	max-width: 420px;
	margin: 0 auto;
	padding: 34px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
}

.ds-loginbox input[type="text"],
.ds-loginbox input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
}

.ds-loginbox .login-submit input {
	width: 100%;
	padding: 12px 22px;
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	background: var(--ds-accent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.ds-loginbox__links {
	margin: 18px 0 0;
	text-align: center;
	font-size: .86rem;
}

.ds-greeting {
	max-width: 540px;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius);
}

.ds-greeting__title { margin: 0 0 8px; font-size: 1.4rem; }
.ds-greeting__text { margin: 0 0 22px; color: var(--ds-ink-soft); }

.ds-greeting__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Hero — the next event
 * ------------------------------------------------------------------------ */

.ds-hero {
	margin: 0 0 48px;
	padding: 56px 32px;
	border-radius: var(--ds-radius);
	background: var(--ds-brand);
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
}

.ds-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.ds-hero__kicker {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .8;
}

.ds-hero__title {
	margin: 0 0 14px;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
	line-height: 1.08;
	color: #fff;
}

.ds-hero__title a {
	color: inherit;
	text-decoration: none;
}

.ds-hero__title a:hover { text-decoration: underline; }

.ds-hero__when {
	margin: 0 0 18px;
	font-size: 1.1rem;
	opacity: .92;
}

.ds-hero__sep { opacity: .5; margin: 0 4px; }

.ds-hero__badge { margin: 0 0 16px; }

.ds-hero__count {
	margin: 0 0 26px;
	font-size: 1.02rem;
	opacity: .95;
}

.ds-hero__count strong {
	display: inline-block;
	padding: 3px 12px;
	margin-right: 6px;
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
}

.ds-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.ds-btn--big { padding: 15px 34px; font-size: 1.02rem; }

.ds-btn--onDark {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.ds-btn--onDark:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.ds-hero--empty { background: var(--ds-brand-dark); }

/* ---------------------------------------------------------------------------
 * RSVP
 * ------------------------------------------------------------------------ */

.ds-rsvp {
	margin-top: 22px;
	padding: 26px;
	background: var(--ds-surface);
	border: 2px solid var(--ds-brand);
	border-radius: var(--ds-radius);
}

.ds-rsvp__title {
	margin: 0 0 6px;
	font-size: 1.25rem;
	color: var(--ds-ink);
}

.ds-rsvp__nofuss {
	margin: 0 0 18px;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-rsvp__spots {
	margin: 0 0 16px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--ds-warn);
}

.ds-rsvp__form .ds-form__row { margin-bottom: 16px; }

.ds-form__input--narrow { max-width: 110px; }

/* The first-timer tick is the most important control on the site. */
.ds-rsvp__firsttimer {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 20px;
	padding: 16px;
	background: rgba(224, 118, 42, .08);
	border: 1px dashed var(--ds-accent);
	border-radius: var(--ds-radius-sm);
	cursor: pointer;
}

.ds-rsvp__firsttimer input { margin-top: 3px; flex: 0 0 auto; }
.ds-rsvp__firsttimer strong { display: block; font-size: .95rem; color: var(--ds-ink); }

.ds-rsvp__firsttimer em {
	display: block;
	margin-top: 3px;
	font-size: .84rem;
	font-style: normal;
	line-height: 1.5;
	color: var(--ds-ink-soft);
}

.ds-rsvp__done { text-align: center; }

.ds-rsvp__tick {
	margin: 0 auto 10px;
	width: 46px;
	height: 46px;
	line-height: 46px;
	font-size: 1.4rem;
	color: #fff;
	background: var(--ds-ok);
	border-radius: 50%;
}

.ds-rsvp__donetitle { margin: 0 0 8px; font-size: 1.3rem; color: var(--ds-ink); }
.ds-rsvp__done p { color: var(--ds-ink-soft); line-height: 1.6; }

.ds-rsvp__lookfor {
	margin: 16px 0;
	padding: 14px;
	text-align: left;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-ink) !important;
}

.ds-rsvp__full { text-align: center; }
.ds-rsvp__full .ds-rsvp__title { margin-bottom: 8px; }
.ds-rsvp__full p { margin: 0 0 16px; color: var(--ds-ink-soft); }

/* Who's coming */
.ds-attendees {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--ds-line);
}

.ds-attendees__count { margin: 0 0 4px; font-size: 1rem; color: var(--ds-ink); }
.ds-attendees__extra { color: var(--ds-ink-soft); font-weight: 400; }

.ds-attendees__first {
	margin: 0 0 8px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ds-accent-dark);
}

.ds-attendees__names {
	margin: 0;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.ds-attendees__empty {
	margin: 0;
	font-size: .89rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Newcomer signals
 * ------------------------------------------------------------------------ */

.ds-tag--newcomer {
	background: rgba(47, 122, 79, .13);
	color: var(--ds-ok);
	vertical-align: middle;
	margin-left: 8px;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.ds-ribbon--newcomer { background: var(--ds-ok); }

.ds-lookfor {
	margin: 40px 0 0;
	padding: 24px 26px;
	background: rgba(47, 122, 79, .07);
	border-left: 4px solid var(--ds-ok);
	border-radius: var(--ds-radius-sm);
}

.ds-lookfor__title { margin: 0 0 8px; font-size: 1.1rem; color: var(--ds-ink); }
.ds-lookfor__text { margin: 0 0 10px; font-size: 1.05rem; color: var(--ds-ink); }

.ds-lookfor__note {
	margin: 0;
	font-size: .89rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.ds-card__going,
.ds-card__turnout {
	margin: 0;
	font-size: .84rem;
	font-weight: 700;
	color: var(--ds-accent-dark);
}

.ds-card__turnout { color: var(--ds-ok); }

.ds-recap__turnout {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ds-ok);
}

/* ---------------------------------------------------------------------------
 * Crew
 * ------------------------------------------------------------------------ */

.ds-crew {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	text-align: center;
}

.ds-crew__photo { margin: 0 auto 14px; width: 110px; }

.ds-crew__photo img {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.ds-crew__name { margin: 0 0 6px; font-size: 1.1rem; color: var(--ds-ink); }

.ds-crew__line {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------ */

.ds-locked__alt {
	margin: 16px 0 0;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-form__sidestep {
	margin: -10px 0 22px;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-greeting__next {
	margin: 0 0 22px;
	padding: 20px;
	background: var(--ds-surface);
	border-radius: var(--ds-radius-sm);
}

.ds-greeting__kicker {
	margin: 0 0 6px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
}

.ds-greeting__event { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; }
.ds-greeting__event a { color: var(--ds-brand); text-decoration: none; }
.ds-greeting__when { margin: 0 0 14px; color: var(--ds-ink-soft); }

.ds-greeting__going {
	margin: 0;
	font-weight: 700;
	color: var(--ds-ok);
}

/* ---------------------------------------------------------------------------
 * Ask the squad
 *
 * Visually quieter than the RSVP box on purpose. Someone reaching for this is
 * not in the mood to be sold to, and a loud panel reads as a campaign.
 * ------------------------------------------------------------------------ */

.ds-ask {
	display: grid;
	gap: 28px;
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.ds-ask { grid-template-columns: minmax(0, 1fr) 320px; }
	.ds-ask .ds-helpnow { order: 2; }
	.ds-ask .ds-form--ask { order: 1; }
	.ds-ask--sent { grid-template-columns: 1fr; max-width: 640px; }
}

.ds-form--ask { max-width: none; }

.ds-ask__title {
	margin: 0 0 14px;
	font-size: 1.6rem;
	color: var(--ds-ink);
}

.ds-form__input--tall {
	min-height: 160px;
	line-height: 1.6;
	resize: vertical;
}

.ds-ask__check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 15px;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius-sm);
	cursor: pointer;
}

.ds-ask__check input { margin-top: 3px; flex: 0 0 auto; }
.ds-ask__check strong { display: block; font-size: .93rem; color: var(--ds-ink); }

.ds-ask__check em {
	display: block;
	margin-top: 3px;
	font-size: .83rem;
	font-style: normal;
	line-height: 1.55;
	color: var(--ds-ink-soft);
}

.ds-ask__check--urgent {
	background: rgba(224, 118, 42, .08);
	border: 1px solid rgba(224, 118, 42, .35);
}

/* Hidden by script when "send anonymously" is ticked; visible without JS. */
.ds-ask__identity.is-hidden { display: none; }

.ds-ask__next {
	padding: 22px;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius);
}

.ds-ask__next p { margin: 0 0 8px; color: var(--ds-ink-soft); }
.ds-ask__nextevent { font-size: 1.15rem; font-weight: 700; }
.ds-ask__nextevent a { color: var(--ds-brand); text-decoration: none; }

.ds-ask__nextwhen {
	display: block;
	font-size: .9rem;
	font-weight: 400;
	color: var(--ds-ink-soft);
}

.ds-ask__nextnote { margin: 0 !important; font-size: .88rem; }

/* ---------------------------------------------------------------------------
 * Urgent help
 *
 * Sober, not alarming. Red would make it feel like an emergency exit that
 * people avoid looking at.
 * ------------------------------------------------------------------------ */

.ds-helpnow {
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-left: 4px solid var(--ds-brand);
	border-radius: var(--ds-radius-sm);
}

.ds-helpnow__title {
	margin: 0 0 10px;
	font-size: 1.1rem;
	color: var(--ds-ink);
}

.ds-helpnow__intro {
	margin: 0 0 16px;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.ds-helpnow__lines p {
	margin: 0 0 12px;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--ds-ink);
}

.ds-helpnow__lines strong { color: var(--ds-brand); }

.ds-helpnow__foot {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ds-line);
	font-size: .86rem;
	color: var(--ds-ink-soft);
}

/* ---------------------------------------------------------------------------
 * Squads
 * ------------------------------------------------------------------------ */

.ds-squads {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ds-squadcard {
	position: relative;
	padding: 22px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
}

.ds-squadcard.is-mine { border-color: var(--ds-accent); border-width: 2px; }

.ds-squadcard__yours {
	margin: 0 0 8px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ds-accent-dark);
}

.ds-squadcard__name { margin: 0 0 4px; font-size: 1.2rem; }
.ds-squadcard__name a { color: var(--ds-ink); text-decoration: none; }
.ds-squadcard__name a:hover { color: var(--ds-brand); }

.ds-squadcard__city {
	margin: 0 0 12px;
	font-size: .85rem;
	color: var(--ds-ink-faint);
}

.ds-squadcard__regular {
	margin: 0 0 12px;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-ink);
}

.ds-squadcard__next {
	margin: 0 0 12px;
	padding: 12px;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius-sm);
	font-size: .9rem;
}

.ds-squadcard__label {
	display: block;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
	margin-bottom: 3px;
}

.ds-squadcard__next a { color: var(--ds-brand); text-decoration: none; font-weight: 600; }

.ds-squadcard__when {
	display: block;
	font-size: .84rem;
	color: var(--ds-ink-soft);
}

.ds-squadcard__lead {
	margin: 0 0 14px;
	font-size: .85rem;
	color: var(--ds-ink-soft);
}

.ds-squadcard__cta { margin: 0; }

/* Squad landing page */
.ds-archive__kicker {
	margin: 0 0 6px;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ds-accent-dark);
}

.ds-archive__city {
	margin: 0 0 14px;
	font-size: 1.05rem;
	color: var(--ds-ink-faint);
}

.ds-squadfacts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin: 26px 0 0;
	padding: 20px 24px;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius);
	text-align: left;
}

.ds-squadfacts p { margin: 0; }

.ds-squadfacts__label {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
	margin-bottom: 3px;
}

.ds-squadfacts strong { font-size: 1.02rem; color: var(--ds-ink); }

.ds-block__lede {
	max-width: 62ch;
	margin: -12px 0 22px;
	color: var(--ds-ink-soft);
	line-height: 1.6;
}

.ds-archive--squad .ds-block__lede { margin-left: auto; margin-right: auto; text-align: center; }

.ds-squadchat {
	padding: 26px;
	background: var(--ds-surface-alt);
	border-radius: var(--ds-radius);
	text-align: center;
}

.ds-squadchat p { color: var(--ds-ink-soft); }

/* Leader dashboard and event editor */
.ds-dashboard-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ds-dashboard-table {
	overflow-x: auto;
	margin: 0 0 32px;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
}

.ds-dashboard-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ds-surface);
}

.ds-dashboard-table th,
.ds-dashboard-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ds-line);
	text-align: left;
	vertical-align: top;
}

.ds-dashboard-table th {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
}

.ds-dashboard-table tr:last-child td { border-bottom: 0; }

.ds-recap-card,
.ds-form__group {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-surface);
}

.ds-recap-card > summary,
.ds-form__group--rare > summary {
	cursor: pointer;
	font-weight: 700;
}

.ds-recap-card > summary span {
	margin-left: 8px;
	font-weight: 400;
	color: var(--ds-ink-soft);
}

.ds-recap-form,
.ds-form__group-body { margin-top: 20px; }

.ds-event-form { max-width: 780px; }
.ds-form__group > legend { padding: 0 8px; font-weight: 800; }

/* Scoped to the event editor. Unscoped, this turned every .ds-form__row on the
   site into a three-column grid, which squeezed the inputs on the business
   request form down to 130px and wrapped their placeholder text over four
   lines. The event editor is the only form with rows that want columns. */
.ds-event-form .ds-form__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 14px;
}

.ds-event-form__photo img {
	display: block;
	width: auto;
	max-height: 180px;
	margin: 0 0 10px;
	border-radius: var(--ds-radius-sm);
}

@media (max-width: 640px) {
	.ds-form__row { grid-template-columns: 1fr; }
	.ds-dashboard-heading { align-items: flex-start; flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Check-in
   A leader does this on his phone in a car park, so the targets are big and
   the list is one tap per man rather than a form to fill in.
   --------------------------------------------------------------------------- */
.ds-recap-card__state {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 700;
	color: var(--ds-ink-faint);
}

.ds-recap-card.is-done .ds-recap-card__state { color: var(--ds-ok); }

.ds-checkin__hint {
	margin: 0 0 12px;
	font-size: .86rem;
	color: var(--ds-ink-soft);
}

.ds-checkin__empty {
	margin: 0;
	font-size: .88rem;
	color: var(--ds-ink-soft);
}

.ds-checkin__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 8px;
}

.ds-checkin__person {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	font-size: .92rem;
	background: var(--ds-surface);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
	cursor: pointer;
}

.ds-checkin__person:hover { border-color: var(--ds-brand); }

.ds-checkin__person input { width: 20px; height: 20px; margin: 0; accent-color: var(--ds-ok); flex: 0 0 auto; }

.ds-checkin__person:has(input:checked) {
	background: rgba(47, 122, 79, .08);
	border-color: rgba(47, 122, 79, .4);
}

.ds-checkin__first {
	display: block;
	font-size: .72rem;
	font-style: normal;
	font-weight: 700;
	color: var(--ds-ok);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ds-checkin__walkin { margin-top: 22px; }

.ds-checkin__walkin-fields {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 10px;
	align-items: center;
}

/* The member picker is one dropdown, not the walk-in's name/email/tickbox
   trio, so it gets its own row rather than sitting in a third of theirs. */
.ds-checkin__pickfields select {
	width: 100%;
	max-width: 420px;
}

.ds-form__input--narrow { max-width: 120px; }

@media (max-width: 600px) {
	.ds-checkin__walkin-fields { grid-template-columns: 1fr; }
}

/* Divi caps forms inside its content areas at 540px and centres them, which
   left the check-in list in a narrow column with a wide empty gutter beside
   it. These are dashboard forms, not contact forms; they want the full card. */
.ds-recap-form,
.ds-event-form,
.ds-form--dashboard {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Calendar subscription
   --------------------------------------------------------------------------- */
.ds-subscribe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin: 46px 0 0;
	padding: 26px 30px;
	background: var(--ds-surface-alt);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius);
}

.ds-subscribe__words { flex: 1 1 320px; }

.ds-subscribe__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
	line-height: 1.25;
}

.ds-subscribe__lede {
	margin: 0;
	max-width: 56ch;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ds-ink-soft);
}

.ds-subscribe__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	flex: 0 0 auto;
}

.ds-subscribe__alt {
	font-size: .86rem;
	font-weight: 600;
	color: var(--ds-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-subscribe__alt:hover { color: var(--ds-brand); }

/* Leader shortcuts sit in a table cell, so they read as links rather than a
   row of buttons competing with the event name beside them. */
.ds-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	white-space: nowrap;
}

.ds-inline-form { display: inline; margin: 0; }

.ds-linkbtn {
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	font-weight: 600;
	color: var(--ds-brand);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-linkbtn:hover { color: var(--ds-accent-dark); }
.ds-linkbtn.is-copied { color: var(--ds-ok); text-decoration: none; }

/* Which patch a paid partner covers. Sits under the name, quieter than the
   trade above it, because the trade is what people scan and the area is what
   they check. */
.ds-card__tier {
	margin: 4px 0 0;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ds-ink-soft);
}

/* Directory disclaimer. Quiet, but not hidden — it is the sort of thing that
   only does its job if somebody can actually read it. */
.ds-archive__disclaimer,
.ds-single__disclaimer {
	max-width: 78ch;
	margin: 40px auto 0;
	padding: 16px 20px;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--ds-ink-soft);
	background: var(--ds-surface-alt);
	border-left: 3px solid var(--ds-line);
	border-radius: var(--ds-radius-sm);
}

.ds-single__disclaimer { margin-top: 34px; }

/* A short grid leaves its own row left-packed, which is right for the cards
   and wrong for the block underneath: with two partners showing, the heading
   sat hard left under a half-empty row and the whole page read as off-centre.
   The prose block centres itself regardless of how full the grid above is. */
.ds-block--centred {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ds-block--centred .ds-block__lede { margin-left: auto; margin-right: auto; }

/* Tier headings sit over their own cards, so they centre with them. */
.ds-archive--businesses .ds-block__title,
.ds-archive--businesses .ds-block__lede {
	text-align: center;
}

.ds-archive--businesses .ds-block__lede {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* The squad-wide code on a listing that takes it. */
.ds-housecode {
	margin: 34px 0 0;
	padding: 20px 24px;
	background: var(--ds-surface-alt);
	border: 1px solid var(--ds-line);
	border-left: 4px solid var(--ds-accent);
	border-radius: var(--ds-radius-sm);
}

.ds-housecode__label {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ds-ink-faint);
}

.ds-housecode__note {
	margin: 10px 0 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--ds-ink-soft);
}

/* ---------------------------------------------------------------------------
   Service projects
   --------------------------------------------------------------------------- */
.ds-stage {
	display: inline-block;
	padding: 3px 10px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
}

.ds-stage--current  { color: #fff; background: var(--ds-ok); }
.ds-stage--proposed { color: var(--ds-ink-soft); background: var(--ds-surface-alt); border: 1px solid var(--ds-line); }
.ds-stage--done     { color: #fff; background: var(--ds-brand); }

.ds-card--project .ds-card__squad {
	margin-left: 8px;
	font-size: .74rem;
	font-weight: 600;
	color: var(--ds-ink-faint);
	text-transform: none;
	letter-spacing: 0;
}

.ds-meta__item--hands::before    { content: "🙋"; position: absolute; left: 0; }
.ds-meta__item--supplies::before { content: "📦"; position: absolute; left: 0; }

.ds-needs, .ds-outcome { margin-top: 34px; }

.ds-offer { margin-top: 34px; }
.ds-offer__count { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--ds-ink-soft); }

.ds-nominated {
	margin-bottom: 26px;
	padding: 18px 22px;
	border-radius: var(--ds-radius-sm);
}

.ds-nominated span { display: block; margin-top: 6px; font-weight: 400; }

.ds-form--skills, .ds-form--nominate { max-width: 720px; }

.ds-form__row--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 600px) {
	.ds-form__row--pair { grid-template-columns: 1fr; }
}