/**
 * AIContestList — Contest directory (Template B / C; design-system §48, §103–§104).
 * /contests/, /contests/open|upcoming|archive/, /contests/category/[slug]/.
 *
 * Editorial Light · density moderate where scanning matters · motion 5/10.
 * The homepage's language, carried over: hairline editorial grid, Iris light,
 * serif italic accents, gradient hairline segments, deadline "lights".
 * Filters, toolbar, chips, pagination and the floating Filters button are shared
 * with the Prompt Library and live in browse.css (loaded first).
 * Tokens only. Breakpoints: 768 (tablet) · 1024 (desktop layout).
 */

/* ---------------------------------------------------------------
   HERO — answer first, wall label on the right
--------------------------------------------------------------- */
.acl .acl-dir-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(16px, 2vw, 28px) 0 clamp(36px, 4.4vw, 64px);
}

/* The homepage's editorial column lines at light-surface strength */
.acl .acl-dir-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(to right, var(--overlay-ink-03) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.acl .acl-dir-hero__glow {
	position: absolute;
	top: -48%;
	right: -14%;
	z-index: -1;
	width: min(920px, 100vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--iris-12) 0%, rgba(88, 199, 255, .06) 38%, transparent 66%);
	pointer-events: none;
}

.acl .acl-dir-hero__grid {
	display: grid;
	gap: clamp(32px, 4vw, 48px);
}

.acl .acl-dir-hero__eyebrow {
	margin-bottom: var(--space-5);
}

.acl .acl-dir-hero__title {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 clamp(20px, 2.4vw, 36px);
	font-size: clamp(2.75rem, 7.4vw, 7rem);
	font-weight: 600;
	line-height: .94;
	letter-spacing: -.052em;
}

.acl .acl-dir-hero__lead,
.acl .acl-dir-hero__accent {
	display: block;
}

.acl .acl-dir-hero__accent {
	font-style: italic;
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.022em;
	padding: 0 .04em .08em 0;
}

/* Ink into Iris — the homepage hero's gradient voice, kept AA on porcelain */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.acl .acl-dir-hero__accent {
		background: linear-gradient(100deg, var(--acl-ink) 0%, var(--acl-ink) 22%, var(--acl-iris) 78%, var(--acl-iris-hover) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.acl .acl-dir-hero__copy {
	max-width: 64ch;
}

.acl .acl-dir-hero__intro {
	margin: 0 0 var(--space-5);
	font-size: var(--text-md);
	line-height: 1.6;
	color: var(--text-secondary);
}

/* Answer-first summary: a quiet Quick Answer (article-template §4.1 recipe) */
.acl .acl-dir-hero__answer {
	margin: 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--interactive-primary);
	font-size: clamp(1.0625rem, .5vw + .9rem, 1.25rem);
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

/* Staged entrance, once (design-system §59). No JS or reduced motion: static. */
.acl-js .acl .acl-dir-hero [data-acl-stage] { animation: acl-rise var(--motion-hero) var(--ease-enter) both; }
.acl-js .acl .acl-dir-hero [data-acl-stage="1"] { animation-delay: 60ms; }
.acl-js .acl .acl-dir-hero [data-acl-stage="2"] { animation-delay: 120ms; }
.acl-js .acl .acl-dir-hero [data-acl-stage="3"] { animation-delay: 200ms; }
.acl-js .acl .acl-dir-hero [data-acl-stage="4"] { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
	.acl-js .acl .acl-dir-hero [data-acl-stage] { animation: none; }
}

/* ---------------------------------------------------------------
   WALL LABEL — one real number, live facts, the deadline horizon
--------------------------------------------------------------- */
.acl .acl-dir-figure {
	position: relative;
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-strong);
}

.acl .acl-dir-figure::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 72px;
	height: 1px;
	background: var(--gradient-ai);
}

.acl .acl-dir-figure__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-5);
}

.acl .acl-dir-figure__num {
	font-size: clamp(4.5rem, 9vw, 8.5rem);
	line-height: .78;
	letter-spacing: -.035em;
	font-variant-numeric: lining-nums;
	color: var(--text-primary);
}

.acl .acl-dir-figure__caption {
	max-width: 13ch;
	padding-bottom: .2em;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-secondary);
}

.acl .acl-dir-figure__keys {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.acl .acl-dir-key {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.acl .acl-dir-key::before {
	content: "";
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--acl-iris);
	box-shadow: 0 0 10px var(--iris-36);
}

.acl .acl-dir-key--closing::before { background: var(--acl-ai-pink); box-shadow: 0 0 10px rgba(255, 121, 198, .55); }
.acl .acl-dir-key--upcoming::before { background: var(--acl-ai-blue); box-shadow: 0 0 10px rgba(88, 199, 255, .55); }

.acl .acl-dir-key__num {
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

/* Deadline horizon: one light per week, the next 12 weeks */
.acl .acl-horizon {
	margin-top: var(--space-6);
}

.acl .acl-horizon__bars {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	height: 76px;
	border-bottom: 1px solid var(--border-strong);
}

.acl .acl-horizon__bar {
	position: relative;
	justify-self: center;
	width: 2px;
	height: calc(10% + var(--acl-h, 0) * 90%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(to top, var(--iris-08), var(--acl-iris));
	transform-origin: 50% 100%;
}

.acl .acl-horizon__bar::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--acl-iris);
	box-shadow: 0 0 12px 1px var(--iris-36);
}

.acl .acl-horizon__bar.is-now { background: linear-gradient(to top, rgba(255, 121, 198, .1), var(--acl-ai-pink)); }
.acl .acl-horizon__bar.is-now::after { background: var(--acl-ai-pink); box-shadow: 0 0 12px 2px rgba(255, 121, 198, .5); }

.acl .acl-horizon__bar.is-empty {
	height: 3px;
	background: var(--border-strong);
}

.acl .acl-horizon__bar.is-empty::after { display: none; }

.acl .acl-horizon__ticks {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin-top: var(--space-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--text-secondary);
	white-space: nowrap;
}

.acl .acl-horizon__caption {
	margin-top: var(--space-3);
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--text-secondary);
	max-width: 44ch;
}

/* Entrance (directory.js arms the figure — lights down, no transition — then marks it
   live once it is on screen, which is when the transitions apply):
   the figures count up from 0 and each week's light climbs from the baseline to its
   height, left to right, the head light riding the top. Without JS, or with reduced
   motion, everything is simply shown at its final state. */
.acl .acl-dir-figure.is-armed.is-live .acl-horizon__bar:not(.is-empty) {
	transition: height 1100ms cubic-bezier(.2, .85, .25, 1.12);
	transition-delay: calc(120ms + var(--acl-i, 0) * 70ms);
}
.acl .acl-dir-figure.is-armed:not(.is-live) .acl-horizon__bar:not(.is-empty) { height: 0; }
.acl .acl-dir-figure.is-armed.is-live .acl-horizon__bar:not(.is-empty)::after {
	transition: opacity 240ms var(--ease-enter), transform 600ms var(--ease-enter);
	transition-delay: calc(120ms + var(--acl-i, 0) * 70ms);
}
.acl .acl-dir-figure.is-armed:not(.is-live) .acl-horizon__bar:not(.is-empty)::after { opacity: 0; transform: scale(.4); }
/* The current week lands with one soft pulse. */
.acl .acl-dir-figure.is-live .acl-horizon__bar.is-now::after { animation: acl-light-land 900ms var(--ease-enter) 1200ms 1 both; }
@keyframes acl-light-land {
	0% { box-shadow: 0 0 12px 2px rgba(255, 121, 198, .5); }
	40% { box-shadow: 0 0 22px 7px rgba(255, 121, 198, .55); }
	100% { box-shadow: 0 0 12px 2px rgba(255, 121, 198, .5); }
}
.acl .acl-dir-figure [data-acl-count] { display: inline-block; }

@media (min-width: 1024px) {
	.acl .acl-dir-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
		gap: var(--space-16);
		align-items: end;
	}

	.acl .acl-dir-hero__title .acl-dir-hero__lead { white-space: nowrap; }
}

/* Working states (filtered, page 2+): heading only, results sooner */
.acl .acl-dir-hero--compact { padding-bottom: clamp(24px, 3vw, 40px); }
.acl .acl-dir-hero--compact .acl-dir-hero__title { margin-bottom: 0; font-size: clamp(2.25rem, 4.8vw, 4.5rem); }
.acl .acl-dir-hero--compact .acl-dir-hero__glow { top: -80%; opacity: .7; }

/* Directory crumbs are short: keep them on one line (the detail page wraps long titles) */
.acl .acl-dir-hero .acl-breadcrumb { margin-bottom: clamp(20px, 2.6vw, 36px); }
.acl .acl-dir-hero .acl-breadcrumb__item--current { flex-basis: auto; }
.acl .acl-dir-hero .acl-breadcrumb__item--current::before { display: block; }

/* Phones: the answer sentence already states the live counts, so the wall label keeps
   only its number and the horizon — the part a sentence can't show. */
@media (max-width: 599px) {
	.acl .acl-dir-hero { padding-bottom: var(--space-8); }
	.acl .acl-dir-hero__grid { gap: var(--space-8); }
	.acl .acl-dir-figure__keys { display: none; }
	.acl .acl-dir-figure__lead { margin-bottom: 0; }
	.acl .acl-horizon { margin-top: var(--space-5); }
}

@media (max-width: 479px) {
	.acl .acl-dir-hero__title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
	.acl .acl-dir-hero__eyebrow { margin-bottom: var(--space-4); }
	.acl .acl-dir-hero__intro { font-size: var(--text-base); }
	.acl .acl-dir-hero__answer { font-size: 1.0625rem; }
	.acl .acl-dir-figure__num { font-size: 4.25rem; }
	.acl .acl-horizon__bars { height: 56px; }
}

/* ---------------------------------------------------------------
   STATUS TABS — real hub links with live counts
--------------------------------------------------------------- */
.acl .acl-dir-browser {
	padding-bottom: var(--section-y-compact);
}

.acl .acl-dir-tabs {
	position: relative;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--border-default);
}

.acl .acl-dir-tabs::-webkit-scrollbar { display: none; }

.acl .acl-dir-tabs__list {
	display: flex;
	gap: clamp(24px, 3.4vw, 48px);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.acl .acl-dir-tabs__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	min-height: 56px;
	padding: var(--space-4) 0 var(--space-3);
	font-size: clamp(1rem, .45vw + .88rem, 1.25rem);
	font-weight: 500;
	letter-spacing: -.015em;
	white-space: nowrap;
	color: var(--text-secondary);
	border-radius: var(--radius-xs);
}

.acl .acl-dir-tabs__count {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.acl .acl-dir-tabs__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--interactive-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--motion-slow) var(--ease-enter);
}

.acl .acl-dir-tabs__link:hover { color: var(--text-primary); }
.acl .acl-dir-tabs__link:hover::after { transform: scaleX(.3); }

.acl .acl-dir-tabs__link[aria-current="page"] { color: var(--text-primary); }
.acl .acl-dir-tabs__link[aria-current="page"]::after { transform: scaleX(1); }
.acl .acl-dir-tabs__link[aria-current="page"] .acl-dir-tabs__count { color: var(--interactive-soft-text); }

.acl .acl-dir-tabs__link:focus-visible { outline-offset: -2px; }

/* Phones: four equal columns, label over count — all hubs visible, no sideways scroll */
@media (max-width: 599px) {
	.acl .acl-dir-tabs {
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.acl .acl-dir-tabs__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
		width: auto;
	}

	.acl .acl-dir-tabs__link {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-height: 64px;
		padding: var(--space-3) var(--space-2) var(--space-3) 0;
		font-size: var(--text-sm);
		letter-spacing: 0;
	}

	.acl .acl-dir-tabs__count {
		font-size: 1.25rem;
		font-weight: 600;
		letter-spacing: -.02em;
		line-height: 1.1;
	}

	.acl .acl-dir-tabs__link[aria-current="page"] .acl-dir-tabs__count { color: var(--text-primary); }
	.acl .acl-dir-tabs__link::after { right: var(--space-3); }
}

/* Category hub: no category field, so two selects + the More toggle (browse.css bar) */
@media (min-width: 1024px) {
	/* On a category hub there is no category field: two selects + toggle */
	.acl .acl-dir[data-hub] .acl-filters__fields:not(:has(#acl-f-category)) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
	}
}

/* ---------------------------------------------------------------
   LEDGER — results by deadline month (an exhibition programme)
--------------------------------------------------------------- */
.acl .acl-dir-results {
	border-top: 1px solid var(--border-strong);
	transition: opacity var(--motion-base) var(--ease-standard);
}

.acl .acl-dir-results[aria-busy="true"] { opacity: .45; }

.acl .acl-ledger,
.acl .acl-ledger__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.acl .acl-ledger__group + .acl-ledger__group { border-top: 1px solid var(--border-default); }

.acl .acl-ledger__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-3);
	margin: 0;
	font-weight: 400;
}

.acl .acl-ledger__kicker {
	flex-basis: 100%;
	margin-bottom: var(--space-1);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.acl .acl-ledger__month {
	font-style: italic;
	font-size: clamp(2.25rem, 4.2vw, 4.25rem);
	line-height: .92;
	letter-spacing: -.02em;
	color: var(--text-primary);
}

.acl .acl-ledger__year {
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.acl .is-tba .acl-ledger__month { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.02; }

.acl .acl-ledger__now {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--text-primary);
}

.acl .acl-ledger__now::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acl-ai-pink);
	box-shadow: 0 0 8px rgba(255, 121, 198, .6);
}

/* Rows: the Competition Card row variant, tuned for a long ledger */
.acl .acl-ledger__item:last-child .acl-card--row { border-bottom: 0; }

.acl .acl-ledger .acl-card--row { padding-left: var(--space-3); }

.acl .acl-ledger .acl-card__fact--prize dd {
	color: var(--text-secondary);
}

/* Closing within 7 days: the homepage's pink "now" light replaces a repeated badge */
.acl .acl-ledger [data-state="closing-soon"] .acl-card__fact--time dd {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.acl .acl-ledger [data-state="closing-soon"] .acl-card__fact--time dd::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acl-ai-pink);
	box-shadow: 0 0 8px rgba(255, 121, 198, .6);
}

/* Rows with nothing left in the kicker but the category stay tight */
.acl .acl-ledger .acl-card--row .acl-card__kicker:not(:has(.acl-badge)) { margin-bottom: var(--space-1); }

/* Desktop: sticky month rail beside the rows */
@media (min-width: 1024px) {
	.acl .acl-ledger__group {
		display: grid;
		grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
		column-gap: var(--space-12);
	}

	.acl .acl-ledger__head {
		position: sticky;
		top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--space-6));
		align-self: start;
		padding: var(--space-8) 0 var(--space-6);
	}

	.acl .acl-ledger__title { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	.acl .acl-ledger__kicker { margin: 0; }
}

/* Phones & tablets: a slim sticky month bar gives orientation while scrolling */
@media (max-width: 1023px) {
	.acl .acl-ledger__head {
		position: sticky;
		top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
		z-index: 5;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
		margin-inline: calc(var(--gutter) * -1);
		padding: var(--space-3) var(--gutter);
		background: var(--glass-bg-solid);
		-webkit-backdrop-filter: saturate(140%) blur(14px);
		backdrop-filter: saturate(140%) blur(14px);
		border-bottom: 1px solid var(--border-default);
	}

	.acl .acl-ledger__kicker {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.acl .acl-ledger__month { font-size: 1.875rem; line-height: 1; }
	.acl .is-tba .acl-ledger__month { font-size: 1.5rem; }
	.acl .acl-ledger__now { margin: 0; }
}

/* Phones: facts run inline so each row stays compact and scannable */
@media (max-width: 767px) {
	.acl .acl-ledger .acl-card--row {
		align-items: start;
		gap: var(--space-4);
		padding: var(--space-5) var(--space-8) var(--space-5) 0;
	}

	.acl .acl-ledger .acl-card--row .acl-card__stamp { width: 48px; min-width: 0; padding-top: 2px; }
	.acl .acl-ledger .acl-card--row .acl-card__title { font-size: 1.125rem; }

	.acl .acl-ledger .acl-card--row .acl-stamp__day { font-size: 2.25rem; }
	.acl .acl-ledger .acl-card--row .acl-card__arrow { right: 0; }

	/* Countdown on its own line, then the other facts inline. Every fact carries a
	   leading dot; the list is shifted left by one separator and clipped, so a dot
	   never starts a line however the facts wrap. */
	.acl .acl-ledger .acl-card--row .acl-card__facts {
		--acl-sep: 19px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 0;
		margin-left: calc(var(--acl-sep) * -1);
		clip-path: inset(0 0 0 var(--acl-sep));
		font-size: var(--text-sm);
	}

	.acl .acl-ledger .acl-card--row .acl-card__fact {
		display: inline-flex;
		align-items: center;
	}

	.acl .acl-ledger .acl-card--row .acl-card__fact--time { flex-basis: 100%; }

	.acl .acl-ledger .acl-card--row .acl-card__fact::before {
		content: "";
		flex: none;
		width: 3px;
		height: 3px;
		margin: 0 8px;
		border-radius: 50%;
		background: var(--text-tertiary);
	}
}

/* ---------------------------------------------------------------
   FIELD NOTES (category hubs)
--------------------------------------------------------------- */
.acl .acl-dir-notes { padding-top: var(--section-y-compact); padding-bottom: 0; }

.acl .acl-dir-notes__inner {
	position: relative;
	display: grid;
	gap: var(--space-10);
	padding-top: var(--space-10);
	border-top: 1px solid var(--border-strong);
}

.acl .acl-dir-notes__inner::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--gutter);
	width: clamp(64px, 10vw, 160px);
	height: 1px;
	background: var(--gradient-ai);
}

.acl .acl-dir-notes__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-3xl);
	line-height: 1.08;
	letter-spacing: -.03em;
	max-width: 16ch;
}

.acl .acl-dir-notes__lede {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-secondary);
	max-width: 42ch;
}

.acl .acl-dir-notes__cols {
	display: grid;
	gap: var(--space-10);
}

.acl .acl-dir-notes__h {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.acl .acl-dir-notes__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border-strong);
}

.acl .acl-dir-notes__list li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--border-default);
	font-size: var(--text-md);
	line-height: 1.4;
}

.acl .acl-dir-notes__n {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--interactive-primary);
	font-variant-numeric: tabular-nums;
}

.acl .acl-dir-notes__check {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-strong);
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-style: italic;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

@media (min-width: 768px) {
	.acl .acl-dir-notes__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
}

@media (min-width: 1024px) {
	.acl .acl-dir-notes__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); }
}

/* ---------------------------------------------------------------
   CATEGORY INDEX + METHOD / SUBMIT
--------------------------------------------------------------- */
.acl .acl-dir-fields { padding-bottom: var(--section-y-compact); }

.acl .acl-dir-method { padding-top: 0; }

.acl .acl-dir-method__grid {
	display: grid;
	gap: var(--space-6);
}

.acl .acl-dir-method__trust {
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-strong);
}

.acl .acl-dir-method__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-2xl);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.acl .acl-dir-method__body {
	max-width: 60ch;
	margin: 0 0 var(--space-4);
	color: var(--text-primary);
}

.acl .acl-dir-method__safety {
	max-width: 60ch;
	margin: 0 0 var(--space-5);
	padding-left: var(--space-4);
	border-left: 1px solid var(--border-strong);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.acl .acl-dir-method__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The one Immersive Dark moment on the page: a small, quiet stage */
.acl .acl-dir-method__submit {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--space-4);
	min-height: 280px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-xl);
	background: var(--bg-page);
	color: var(--text-primary);
}

.acl .acl-dir-method__submit::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -60%;
	right: -30%;
	width: 110%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(var(--acl-iris-rgb) / .32) 0%, rgba(88, 199, 255, .08) 40%, transparent 66%);
}

.acl .acl-dir-method__submit::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--gradient-ai);
	opacity: .5;
}

.acl .acl-dir-method__cta-title {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-style: italic;
	line-height: 1.02;
	letter-spacing: -.02em;
	max-width: 14ch;
	color: var(--text-primary);
}

.acl .acl-dir-method__cta-body {
	margin: 0 0 var(--space-2);
	color: var(--text-secondary);
	max-width: 40ch;
}

@media (min-width: 1024px) {
	.acl .acl-dir-method__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--space-16);
		align-items: stretch;
	}
}

@media (max-width: 479px) {
	.acl .acl-dir-method__submit .acl-btn { width: 100%; }
}