/* ============================================================================
   HERO BAND

   Full width, photographic, with an adjustable overlay. Breaks out of whatever
   container Elementor puts it in, because a hero that stops short of the edges
   reads as a mistake.
   ========================================================================== */
.uaia-hero-band{
	position:relative;
	overflow:hidden;
	width:100%;
	min-height:clamp(320px,44vh,520px);
	display:flex;align-items:flex-end;
	/* No overlap. The card used to be pulled up over this band, which looked
	   good in isolation and kept landing on top of the subheading at some
	   viewport or other. A clean gap cannot collide with anything. */
	padding:clamp(80px,11vh,140px) 0 clamp(56px,7vh,88px);
	isolation:isolate;
	margin-top:0;
	margin-bottom:0;
}
/* The photograph itself, behind everything, filling the band. */
.uaia-hero-band__img{
	position:absolute;inset:0;z-index:0;
	width:100%;height:100%;
	object-fit:cover;object-position:center;
	display:block;
}

.uaia-hero-band::after{
	content:"";position:absolute;inset:0;z-index:1;
	background:
		radial-gradient(
			ellipse 70% 58% at 50% 60%,
			rgba(20,16,13,0.85) 0%,
			rgba(20,16,13,0) 74%
		),
		linear-gradient(
			to bottom,
			rgba(20,16,13,0.45) 0%,
			rgba(20,16,13,0.3) 45%,
			rgba(20,16,13,0.6) 100%
		);
	opacity:var(--hero-overlay,.42);
}
.uaia-hero-band__inner{
	position:relative;z-index:2;
	width:100%;max-width:min(64rem,100%);
	margin-inline:auto;
	padding-inline:clamp(20px,4vw,40px);
	text-align:center;
}
.uaia-hero-band__eyebrow{
	/*
	 * A chip rather than loose amber text. Amber on a warm photograph, which
	 * is most photographs of people outdoors, has almost no contrast and the
	 * line disappears. Putting the amber behind ink coloured type keeps the
	 * colour in the palette and makes it legible over any image.
	 */
	display:inline-block;
	margin:0 0 18px;
	padding:7px 15px;
	background:var(--amber,#F2A413);
	color:var(--on-light,#14100D);
	border-radius:var(--r-pill,999px);
	font-family:var(--font-body,inherit);
	font-size:.7rem;font-weight:700;
	letter-spacing:.18em;text-transform:uppercase;
	box-shadow:0 6px 18px rgba(20,16,13,.3);
}
.uaia-hero-band__heading{
	margin:0 auto 16px;max-width:22ch;
	text-shadow:0 2px 24px rgba(20,16,13,.55);
	font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1.04;
	font-size:clamp(2rem,5vw,3.4rem);
	color:var(--ivory,#F6F0E6);
}
.uaia-hero-band__sub{
	margin:0 auto;max-width:46ch;
	font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.6;
	color:rgba(246,240,230,.94);
	text-shadow:0 1px 16px rgba(20,16,13,.6);
}

/* The card sits below the band with real space between them. */
.uaia-hero-band + .uaia-wrap{margin-top:clamp(28px,4vw,52px)}

/* The wrapper that keeps the card centred whatever container it lands in. */
.uaia-wrap{
	position:relative;z-index:3;
	margin-top:clamp(34px,5vw,64px);
	/* Deliberately not flex. A flex child that cannot shrink below its
	   container overflows to the LEFT, off screen and unreachable. Auto
	   margins centre without that failure mode. */
	display:block;
	width:100%;max-width:100%;
	margin-inline:auto;
	padding-inline:clamp(16px,4vw,40px);
	box-sizing:border-box;
}

/* The hero band reaches the edges of the page. Elementor puts padding on its
   containers, which left a visible margin either side of a full width image
   and made it read as a mistake rather than a design. */
.elementor-widget-container:has(.uaia-hero-band),
.elementor-widget-shortcode:has(.uaia-hero-band),
.elementor-widget-wrap:has(.uaia-hero-band),
.elementor-column:has(.uaia-hero-band) > .elementor-widget-wrap,
.e-con:has(.uaia-hero-band),
.e-con-inner:has(.uaia-hero-band){
	padding-left:0!important;
	padding-right:0!important;
	padding-top:0!important;
	--padding-inline-start:0px;
	--padding-inline-end:0px;
	--padding-block-start:0px;
}

/* The section holding the hero must not add space above it either. A band that
   starts partway down the page leaves a dark strip that reads as a gap rather
   than as a design. */
.elementor-section:has(.uaia-hero-band),
.elementor-section:has(.uaia-hero-band) > .elementor-container,
.elementor-column:has(.uaia-hero-band){
	padding-top:0!important;
	margin-top:0!important;
}

/* The widget itself, in case Elementor put the spacing there. */
.elementor-widget-shortcode:has(.uaia-hero-band){margin-top:0!important}

/* ============================================================================
   ON A PAGE THAT IS NOT BUILT WITH ELEMENTOR

   The theme wraps ordinary page content in .uaia-page, which adds generous top
   padding and prints its own left aligned title, and in .uaia-entry, which
   caps width at 760px for reading prose.

   A hero band inside that reads as broken: a dark gap above it, a heading
   sitting outside it, and a form squeezed into a column meant for text. When
   this form is on the page, those wrappers stand down.
   ========================================================================== */
.uaia-page:has(.uaia-hero-band){padding-top:0}
.uaia-page:has(.uaia-hero-band) > .u-wrap{max-width:none;padding-inline:0}

/* The hero carries the page title, so the theme's own title would be a second
   heading saying the same thing in a different place. */
.uaia-page:has(.uaia-hero-band) .uaia-page__head{display:none}

/* The reading width column must not cage the form. */
.uaia-entry:has(.uaia-wrap),
.uaia-entry:has(.uaia-hero-band){max-width:none;width:100%}
.uaia-page:has(.uaia-wrap) > .u-wrap{max-width:none}

/* Without a hero the title stays, but it is centred so it agrees with the
   card underneath rather than sitting off to one side. */
.uaia-page:has(.uaia-wrap) .uaia-page__head{text-align:center;max-width:none}

/* Elementor's wrappers do not centre themselves, and the theme's own
   full width rules are scoped to widgets whose type begins uaia_, which the
   Shortcode widget is not. So the whole ancestor chain is corrected here, the
   same way the theme corrects its own sections. Without this the card sits
   left of centre no matter what the card itself does. */
.elementor-widget-shortcode:has(.uaia-wrap),
.elementor-widget-container:has(.uaia-wrap),
.elementor-element:has(.uaia-wrap),
.elementor-widget-wrap:has(.uaia-wrap),
.elementor-column:has(.uaia-wrap),
.elementor-container:has(.uaia-wrap),
.elementor-section:has(.uaia-wrap),
.e-con:has(.uaia-wrap),
.e-con-inner:has(.uaia-wrap),
.entry-content:has(.uaia-wrap),
.uaia-entry:has(.uaia-wrap){
	width:100%!important;
	max-width:100%!important;
	margin-left:auto!important;
	margin-right:auto!important;
	float:none!important;
}
.elementor-column:has(.uaia-wrap) > .elementor-widget-wrap{padding-inline:0!important}



/* ============================================================================
   CHAPTER REQUEST FORM

   A light panel on the page, not another dark box. The site is deliberately
   dark, and a dark form on a dark page disappears into it. An ivory card reads
   as premium, gives the type real contrast, and makes the one place asking a
   stranger for their details feel like the most considered page on the site.

   Every value falls back, so the form still looks deliberate under any theme.
   ========================================================================== */

/* The panel is centred by its own margins and by a flex wrapper, so it stays
   centred whether Elementor gives it a full width or a boxed container. */
.uaia-panel{
	max-width:min(64rem,100%);
	--p-ink:var(--ink,#14100D);
	--p-amber:var(--amber,#F2A413);
	--p-sage:var(--sage,#7E9270);
	--p-clay:var(--clay,#D2551F);
	--p-radius:var(--r-lg,22px);

	/* Light by default. */
	--p-bg:#FFFDF9;
	--p-field:#F6F1E8;
	--p-text:var(--on-light,#14100D);
	--p-dim:rgba(20,16,13,.72);
	--p-dimmer:rgba(20,16,13,.5);
	--p-line:rgba(20,16,13,.13);

	width:100%;
	max-width:min(64rem,100%);
	margin-inline:auto;
	background:var(--p-bg);
	color:var(--p-text);
	border-radius:var(--p-radius);
	box-shadow:0 30px 70px rgba(0,0,0,.34);
	overflow:hidden;
	position:relative;
	text-align:left;
}

.uaia-panel--dark{
	--p-bg:var(--ink-2,#1D1815);
	--p-field:var(--ink-3,#241D17);
	--p-text:var(--ivory,#F6F0E6);
	--p-dim:rgba(246,240,230,.74);
	--p-dimmer:rgba(246,240,230,.5);
	--p-line:rgba(246,240,230,.13);
}

/* An amber edge along the top, so the card reads as deliberate. */
.uaia-panel::before{
	content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;
	background:linear-gradient(90deg,var(--p-amber),var(--p-clay) 58%,var(--p-sage));
}

.uaia-panel__body{padding:clamp(30px,4vw,54px) clamp(24px,3.6vw,52px)}

/* ---- with a photograph: image on the left, form on the right ------------ */
.uaia-panel--split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch}
.uaia-panel__media{position:relative;margin:0;min-height:100%;background:var(--p-ink)}
.uaia-panel__media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.uaia-panel__media figcaption{
	position:absolute;inset:auto 0 0 0;
	padding:44px 26px 24px;
	background:linear-gradient(to top,rgba(20,16,13,.9),transparent);
	color:var(--ivory,#F6F0E6);
	font-family:var(--font-display,inherit);
	font-size:1.02rem;line-height:1.4;letter-spacing:-.01em;
}

/* ---------------------------------------------------------------- heading */
.uaia-form__heading{
	margin:0 0 10px;
	font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.025em;line-height:1.1;
	font-size:clamp(1.5rem,2.6vw,2.05rem);
	color:var(--p-text);
}
.uaia-form__intro{
	margin:0 0 30px;
	font-size:.98rem;line-height:1.62;
	color:var(--p-dim);
}

/* ----------------------------------------------------------------- fields */
.uaia-form{max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
.uaia-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.uaia-form__field{margin:0 0 18px}
.uaia-form__field label{
	display:block;font-family:var(--font-body,inherit);
	font-size:.74rem;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;
	color:var(--p-dimmer);margin-bottom:7px;
}
.uaia-form__field label span{color:var(--p-clay)}

.uaia-form input[type=text],
.uaia-form input[type=email],
.uaia-form input[type=tel],
.uaia-form input[type=password],
.uaia-form input[type=url],
.uaia-form input[type=number],
.uaia-form input[type=date],
.uaia-form input[type=month],
.uaia-form select,
.uaia-form textarea{
	width:100%;min-height:52px;padding:13px 15px;
	background:var(--p-field);color:var(--p-text);
	border:1px solid var(--p-line);border-radius:var(--r-md,12px);
	font:inherit;font-size:.96rem;
	transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
	-webkit-appearance:none;appearance:none;
}
.uaia-form textarea{min-height:104px;resize:vertical;line-height:1.6}
.uaia-form input::placeholder,.uaia-form textarea::placeholder{color:var(--p-dimmer);opacity:.66}

/* A drawn chevron, because the native one cannot be styled. */
.uaia-form select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23BB4B09' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 15px center;
	padding-right:42px;cursor:pointer;
}
.uaia-panel--dark .uaia-form select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2A413' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.uaia-form input:hover,.uaia-form select:hover,.uaia-form textarea:hover{border-color:rgba(20,16,13,.26)}
.uaia-panel--dark .uaia-form input:hover,
.uaia-panel--dark .uaia-form select:hover,
.uaia-panel--dark .uaia-form textarea:hover{border-color:rgba(246,240,230,.26)}

.uaia-form input:focus,.uaia-form select:focus,.uaia-form textarea:focus{
	outline:none;background:var(--p-bg);
	border-color:var(--p-amber);
	box-shadow:0 0 0 3px rgba(242,164,19,.24);
}

.uaia-form__hint{display:block;font-size:.76rem;line-height:1.45;color:var(--p-dimmer);margin-top:6px}

/* -------------------------------------------------------------- checkbox */
.uaia-form__check{
	margin:2px 0 20px;padding:15px 17px;
	background:var(--p-field);border:1px solid var(--p-line);
	border-radius:var(--r-md,12px);transition:border-color .25s ease;
}
.uaia-form__check:hover{border-color:var(--p-amber)}
.uaia-form__check label{
	display:flex;gap:12px;align-items:flex-start;
	font-size:.93rem;line-height:1.5;font-weight:500;
	letter-spacing:0;text-transform:none;
	color:var(--p-text);margin:0;cursor:pointer;
}
.uaia-form__check input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--p-amber);cursor:pointer}

/* ---------------------------------------------------------------- submit */
.uaia-form__submit{margin:26px 0 0}
.uaia-form__submit button{
	font-family:var(--font-body,inherit);
	font-size:.95rem;font-weight:600;letter-spacing:.01em;
	background:var(--p-ink);color:var(--ivory,#F6F0E6);
	border:0;border-radius:var(--r-pill,999px);
	padding:16px 38px;min-height:54px;width:100%;cursor:pointer;
	transition:transform .25s ease,background .25s ease;
}
.uaia-form__submit button:hover{transform:translateY(-2px);background:var(--p-clay)}
.uaia-panel--dark .uaia-form__submit button{background:var(--p-amber);color:var(--p-ink)}
.uaia-panel--dark .uaia-form__submit button:hover{background:var(--light-surface,#F6F0E6)}
.uaia-form__submit button:focus-visible{outline:3px solid var(--p-amber);outline-offset:3px}

.uaia-form__privacy{
	margin:16px 0 0;font-size:.76rem;line-height:1.55;color:var(--p-dimmer);
}

/* --------------------------------------------------------------- states */
.uaia-form__error{
	padding:13px 16px;margin:0 0 22px;border-radius:var(--r-md,12px);
	background:rgba(210,85,31,.14);border-left:3px solid var(--p-clay);
	color:var(--p-text);font-size:.9rem;line-height:1.5;
}

.uaia-form__thanks{
	padding:clamp(34px,5vw,60px) clamp(26px,4vw,52px);
	border-left:4px solid var(--p-sage);
	font-family:var(--font-display,inherit);
	font-size:clamp(1.15rem,2.2vw,1.55rem);
	line-height:1.45;letter-spacing:-.015em;
	color:var(--p-text);text-align:center;
}

/* The honeypot must be reachable by a bot and invisible to a person, so it is
   moved off screen rather than hidden with display:none. */
.uaia-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------- responsive */



/* The city field is a combobox, so it keeps the text input look rather than
   the select look. The browser draws its own suggestion list. */
.uaia-form input[list]{background-image:none;padding-right:15px}

/* A locked city field should look locked, not broken. */
.uaia-form input:disabled{
	opacity:.55;cursor:not-allowed;
	background:transparent;
	border-style:dashed;
}

/* Interaction. Nothing decorative, only feedback that something happened. */
.uaia-form__field{position:relative}
.uaia-form input:not(:placeholder-shown):valid,
.uaia-form textarea:not(:placeholder-shown):valid{border-color:rgba(126,146,112,.55)}
.uaia-form input[required]:not(:placeholder-shown):invalid{border-color:var(--p-clay)}

.uaia-form__submit button{position:relative;overflow:hidden}
.uaia-form__submit button::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
	transform:translateX(-120%);
	transition:transform .7s ease;
}
.uaia-form__submit button:hover::after{transform:translateX(120%)}



/* Shown only to an editor, when the form has been placed on a page twice. */
.uaia-dupe-note{
	max-width:46rem;margin:24px auto;padding:14px 18px;
	border:1px dashed var(--amber,#F2A413);border-radius:var(--r-md,12px);
	background:rgba(242,164,19,.08);
	color:var(--ivory,#F6F0E6);
	font-size:.86rem;line-height:1.55;text-align:center;
}

/* ============================================================================
   SIDE PANEL

   Shown when no photograph is given, so the layout is two columns either way
   and the plain shortcode produces what the preview shows.
   ========================================================================== */
.uaia-panel__aside{
	padding:clamp(30px,4vw,54px) clamp(24px,3.4vw,44px);
	background:linear-gradient(160deg,var(--night,#14100D),var(--night-2,#1D1815));
	color:var(--ivory,#F6F0E6);
	display:flex;flex-direction:column;justify-content:center;
	position:relative;
}
.uaia-panel__eyebrow{
	margin:0 0 14px;
	font-family:var(--font-body,inherit);
	font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
	color:var(--amber-ink,#F2A413);
}
.uaia-panel__title{
	margin:0 0 22px;
	font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.025em;line-height:1.12;
	font-size:clamp(1.35rem,2.4vw,1.9rem);
	color:var(--ivory,#F6F0E6);
}
.uaia-panel__points{margin:0 0 24px;padding:0;list-style:none}
.uaia-panel__points li{
	position:relative;
	padding:0 0 14px 26px;
	font-size:.92rem;line-height:1.55;
	color:rgba(246,240,230,.78);
}
.uaia-panel__points li::before{
	content:"";position:absolute;left:0;top:7px;
	width:9px;height:9px;border-radius:50%;
	background:var(--amber,#F2A413);
}
.uaia-panel__points li:last-child{padding-bottom:0}
.uaia-panel__foot{
	margin:0;padding-top:20px;
	border-top:1px solid rgba(246,240,230,.16);
	font-family:var(--font-display,inherit);
	font-size:.98rem;line-height:1.4;
	color:rgba(246,240,230,.9);
}



/* The diagnostic panel. Only rendered when ?uaia-form-debug=1 is in the URL
   and only for somebody who can edit pages. */
.uaia-debug{
	max-width:64rem;margin:24px auto;padding:20px 24px;
	background:#0B0B0B;color:#D8FFD8;
	border-left:3px solid var(--amber,#F2A413);border-radius:10px;
	font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	white-space:pre;overflow:auto;
}

/* If the side image could not load it is removed entirely, so the card falls
   back to a single column rather than showing a broken image glyph or an
   empty half. A missing file should look like a choice, not a fault. */
.uaia-panel--nomedia{grid-template-columns:1fr}

/* The media column needs a real height on a phone. Without one, a grid row of
   indeterminate height plus a percentage height on the figure resolves to
   nothing and the photograph occupies no space at all. */



/* ============================================================================
   RESPONSIVE

   One block, in one place, written once. The previous version was patched
   repeatedly until the rules contradicted each other and a failed edit could
   sit unnoticed.
   ========================================================================== */

/* ---- tablets and large phones ------------------------------------------ */
@media (max-width: 900px) {
	/*
	 * The photograph beside the form is hidden on a phone.
	 *
	 * Stacked above the form it is decoration the visitor has to scroll past
	 * before reaching the thing they came to do, and it costs a download on a
	 * connection that may not have one to spare. The hero already carries the
	 * imagery. The side panel does the same on the text version.
	 */
	.uaia-panel__media,
	.uaia-panel__aside{display:none}

	.uaia-panel--split{grid-template-columns:1fr}

}

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 640px) {
	.uaia-hero-band{
		min-height:280px;
		padding:56px 0 44px;
		margin:0;
	}

	/* One light gradient instead of two stacked ones. On a short band the
	   whole area sits inside the dense part of the radial, and the two
	   composite to roughly 80 percent dark, which looks like no image. */
	/* The photograph itself, behind everything, filling the band. */
.uaia-hero-band__img{
	position:absolute;inset:0;z-index:0;
	width:100%;height:100%;
	object-fit:cover;object-position:center;
	display:block;
}

.uaia-hero-band::after{
		/* Lighter again on a phone. A screen held at arm's length in daylight
		   at reduced brightness needs far less than a monitor does, and the
		   chip and text shadow are already carrying legibility. */
		background:linear-gradient(
			to bottom,
			rgba(20,16,13,0.22) 0%,
			rgba(20,16,13,0.4) 60%,
			rgba(20,16,13,0.55) 100%
		);
	opacity:var(--hero-overlay,.42);
}

	.uaia-hero-band__inner{padding-inline:18px}
	.uaia-hero-band__eyebrow{font-size:.62rem;letter-spacing:.14em;padding:6px 12px;margin-bottom:14px}
	.uaia-hero-band__heading{font-size:clamp(1.6rem,7.4vw,2.1rem);text-shadow:0 2px 18px rgba(20,16,13,.8)}
	.uaia-hero-band__sub{display:none}

	.uaia-hero-band + .uaia-wrap{margin-top:22px}
	.uaia-wrap{padding-inline:14px}

	.uaia-panel{border-radius:var(--r-md,14px)}
	.uaia-panel__body{padding:24px 18px}

	.uaia-form__row{grid-template-columns:1fr}
	.uaia-form__submit button{width:100%;padding-inline:22px}
	.uaia-form__intro{margin-bottom:24px}
}

/* ---- small phones -------------------------------------------------------- */
@media (max-width: 380px) {
	.uaia-panel__body{padding:20px 15px}
	.uaia-hero-band__heading{font-size:1.5rem}
	.uaia-wrap{padding-inline:10px}
}

/* When the photograph cannot load, the band keeps its dark ground and the
   words rather than showing a broken image. A missing file should look like a
   plain band, not like a fault. */
.uaia-hero-band--nophoto{background:linear-gradient(160deg,var(--night,#14100D),var(--night-2,#1D1815))}
.uaia-hero-band--nophoto::after{opacity:.35}

/* A photograph that failed to load says so, to an editor only. Silent
   fallbacks look like a design choice and hide the real problem, which in
   this case is never in the stylesheet. */
.uaia-hero-band[data-failed]::before{
	content:"The hero photograph did not load. Open its URL directly in this browser to see why.";
	position:absolute;inset:auto 0 0 0;z-index:3;
	padding:9px 14px;
	background:var(--clay,#D2551F);color:#fff;
	font:600 11px/1.4 ui-monospace,Menlo,Consolas,monospace;
	text-align:center;
}
body:not(.logged-in) .uaia-hero-band[data-failed]::before{display:none}

/* ============================================================================
   CHAPTER SETUP

   Forty four fields is an evening's work. The sections are spaced so it reads
   as several short forms rather than one long one, and progress is shown so
   somebody can see the end of it.
   ========================================================================== */
.uaia-setup__progress{margin:0 0 34px}
.uaia-setup__bar{
	height:7px;border-radius:999px;overflow:hidden;
	background:rgba(20,16,13,.1);
}
.uaia-setup__bar span{
	display:block;height:100%;border-radius:999px;
	background:linear-gradient(90deg,var(--p-amber,#F2A413),var(--p-sage,#7E9270));
	transition:width .4s ease;
}
.uaia-setup__progress p{
	margin:9px 0 0;font-size:.78rem;font-weight:600;
	letter-spacing:.05em;text-transform:uppercase;
	color:var(--p-dimmer,rgba(20,16,13,.5));
}

.uaia-setup__section{
	padding:28px 0 8px;
	border-top:1px solid var(--p-line,rgba(20,16,13,.13));
}
.uaia-setup__section:first-of-type{border-top:0;padding-top:0}
.uaia-setup__title{
	margin:0 0 6px;
	font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;
	font-size:1.22rem;color:var(--p-text,#14100D);
}
.uaia-setup__why{
	margin:0 0 22px;max-width:46rem;
	font-size:.9rem;line-height:1.6;
	color:var(--p-dim,rgba(20,16,13,.74));
}

/* A field nobody will ever see published should look different from one that
   will, so a lead can answer it honestly. */
.uaia-form__field--private{
	padding:15px 17px;
	background:rgba(126,146,112,.09);
	border-left:3px solid var(--p-sage,#7E9270);
	border-radius:var(--r-md,12px);
}
.uaia-setup__private{
	float:right;font-style:normal;font-size:.66rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;
	color:var(--p-sage,#7E9270);
}

.uaia-form__saved{
	padding:14px 17px;margin:0 0 24px;border-radius:var(--r-md,12px);
	background:rgba(126,146,112,.16);border-left:3px solid var(--p-sage,#7E9270);
	color:var(--p-text,#14100D);font-size:.92rem;
}

@media(max-width:640px){
	.uaia-setup__section{padding-top:22px}
	.uaia-setup__private{float:none;display:block;margin-top:4px}
}

/* ============================================================================
   THE LEAD AREA

   A light workspace, not a dark dashboard.

   The public pages are dark and photographic because they are selling
   something. This is where somebody works, often for an hour at a time, and
   dark panels on a dark page made it read as a control panel bolted onto the
   site. Ivory matches the forms elsewhere, gives the type real contrast, and
   makes an unpaid volunteer's admin feel considered rather than tolerated.
   ========================================================================== */
.uaia-lead{
	--w-bg:#FFFDF9;
	--w-soft:#F6F1E8;
	--w-ink:var(--ink,#14100D);
	--w-dim:rgba(20,16,13,.72);
	--w-dimmer:rgba(20,16,13,.5);
	--w-line:rgba(20,16,13,.12);
	--w-amber:var(--amber,#F2A413);
	--w-sage:var(--sage,#7E9270);
	--w-clay:var(--clay,#D2551F);

	/* The form fields inside read these, so they have to be set here or every
	   input falls back to a border too faint to see. */
	--p-bg:#FFFDF9;
	--p-field:#F6F1E8;
	--p-text:var(--on-light,#14100D);
	--p-dim:rgba(20,16,13,.74);
	--p-dimmer:rgba(20,16,13,.5);
	--p-line:rgba(20,16,13,.18);
	--p-amber:var(--amber,#F2A413);
	--p-clay:var(--clay,#D2551F);
	--p-sage:var(--sage,#7E9270);
	--p-ink:var(--ink,#14100D);
	--p-radius:var(--r-md,14px);

	width:100%;max-width:min(64rem,100%);margin-inline:auto;
	background:var(--w-bg);
	color:var(--w-ink);
	border-radius:var(--r-lg,22px);
	box-shadow:0 30px 70px rgba(0,0,0,.34);
	overflow:hidden;position:relative;
}
.uaia-lead::before{
	content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;
	background:linear-gradient(90deg,var(--w-amber),var(--w-clay) 58%,var(--w-sage));
}

/* ---- who you are, and the way out ---------------------------------------- */
.uaia-lead__top{
	display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
	padding:clamp(28px,3.6vw,42px) clamp(24px,3.4vw,44px) 22px;
	border-bottom:1px solid var(--w-line);
}
.uaia-lead__hello{
	margin:0 0 7px;font-size:.7rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;
	color:var(--w-dimmer);
}
.uaia-lead__name{
	margin:0;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1.08;
	font-size:clamp(1.5rem,3vw,2.2rem);color:var(--w-ink);
}
.uaia-lead__out{
	flex:none;padding:9px 16px;border-radius:var(--r-pill,999px);
	font-size:.8rem;font-weight:600;text-decoration:none;
	color:var(--w-dim);box-shadow:inset 0 0 0 1px var(--w-line);
	transition:background .25s ease,color .25s ease;
}
.uaia-lead__out:hover{background:var(--w-ink);color:#fff;box-shadow:none}

/* ---- moving around ------------------------------------------------------- */
.uaia-lead__nav{
	display:flex;gap:4px;flex-wrap:wrap;
	padding:16px clamp(24px,3.4vw,44px);
	background:var(--w-soft);
	border-bottom:1px solid var(--w-line);
}
.uaia-lead__nav a{
	padding:9px 16px;border-radius:var(--r-pill,999px);
	font-size:.84rem;font-weight:600;text-decoration:none;
	color:var(--w-dim);
	transition:background .2s ease,color .2s ease;
}
.uaia-lead__nav a:hover{background:rgba(20,16,13,.06);color:var(--w-ink)}
.uaia-lead__nav a.is-on{background:var(--w-ink);color:#fff}

/* ---- the numbers --------------------------------------------------------- */
.uaia-lead__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:14px;
	padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,44px) 0;
}
.uaia-lead__card{
	padding:22px 20px;border-radius:var(--r-md,14px);
	background:var(--w-soft);
	border:1px solid var(--w-line);
}
.uaia-lead__figure{
	margin:0 0 2px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.04em;line-height:1;
	font-size:2.6rem;color:var(--w-ink);
}
.uaia-lead__label{
	margin:0 0 7px;font-size:.74rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:var(--w-dimmer);
}
.uaia-lead__note{margin:0;font-size:.86rem;line-height:1.5;color:var(--w-dim)}

/* ---- the one thing worth doing ------------------------------------------- */
.uaia-lead__next{
	margin:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,44px) clamp(28px,3.6vw,44px);
	padding:26px 26px 28px;border-radius:var(--r-md,14px);
	background:linear-gradient(150deg,rgba(242,164,19,.14),rgba(242,164,19,.05));
	border:1px solid rgba(242,164,19,.3);
}
.uaia-lead__nextlabel{
	margin:0 0 9px;font-size:.7rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:var(--w-clay);
}
.uaia-lead__next p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--w-ink)}
.uaia-lead__go{
	display:inline-flex;align-items:center;margin-top:18px;
	padding:13px 26px;border-radius:var(--r-pill,999px);
	background:var(--w-ink);color:#fff;
	font-size:.88rem;font-weight:600;text-decoration:none;
	transition:transform .25s ease,background .25s ease;
}
.uaia-lead__go:hover{transform:translateY(-2px);background:var(--w-clay)}

/* ---- panels and tables --------------------------------------------------- */
.uaia-lead__panel,
.uaia-lead__empty{
	margin:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,44px) clamp(28px,3.6vw,44px);
}
.uaia-lead__empty{
	padding:44px 28px;text-align:center;
	border-radius:var(--r-md,14px);background:var(--w-soft);
	border:1px solid var(--w-line);
}
.uaia-lead__panel h3,
.uaia-lead__empty h3{
	margin:0 0 8px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.35rem;color:var(--w-ink);
}

.uaia-lead__table{width:100%;border-collapse:collapse;margin-top:20px;font-size:.9rem}
.uaia-lead__table th{
	text-align:left;padding:0 14px 11px 0;
	font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--w-dimmer);border-bottom:1px solid var(--w-line);
}
.uaia-lead__table td{
	padding:14px 14px 14px 0;
	border-bottom:1px solid rgba(20,16,13,.07);
	color:var(--w-dim);
}
.uaia-lead__table strong{color:var(--w-ink)}

/* The setup form sits inside the workspace, so it drops its own card rather
   than showing a panel inside a panel. Scoped tightly, because .uaia-panel is
   shared with the other plugin and a loose override here would change its
   forms too. */
.uaia-lead > .uaia-panel,
.uaia-lead > * > .uaia-panel{
	max-width:none;margin:0;box-shadow:none;border-radius:0;background:transparent;
}
.uaia-lead > .uaia-panel::before,
.uaia-lead > * > .uaia-panel::before{display:none}
.uaia-lead > .uaia-panel > .uaia-panel__body,
.uaia-lead > * > .uaia-panel > .uaia-panel__body{
	padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,44px);
}

@media(max-width:640px){
	.uaia-lead{border-radius:var(--r-md,14px)}
	.uaia-lead__top{flex-direction:column;gap:14px;padding:24px 20px 18px}
	.uaia-lead__nav{padding:14px 20px;gap:4px}
	.uaia-lead__nav a{padding:9px 13px;font-size:.8rem}
	.uaia-lead__grid{padding:22px 20px 0}
	.uaia-lead__next,.uaia-lead__panel,.uaia-lead__empty{margin:22px 20px 26px}
	.uaia-lead__table thead{display:none}
	.uaia-lead__table td{display:block;padding:4px 0;border:0}
	.uaia-lead__table tr{display:block;padding:15px 0;border-bottom:1px solid rgba(20,16,13,.09)}
	.uaia-lead .uaia-panel__body{padding:22px 20px}
}

/* ============================================================================
   FIELDS, EVERYWHERE

   A field has to look like a field. The border was faint enough that a form
   read as a list of labels with gaps under them.
   ========================================================================== */
.uaia-form input[type=text],
.uaia-form input[type=email],
.uaia-form input[type=tel],
.uaia-form input[type=url],
.uaia-form input[type=date],
.uaia-form input[type=month],
.uaia-form input[type=number],
.uaia-form select,
.uaia-form textarea{
	border-width:1.5px;
	border-color:var(--p-line,rgba(20,16,13,.18));
	box-shadow:0 1px 2px rgba(20,16,13,.04) inset;
}
.uaia-form input:hover,
.uaia-form select:hover,
.uaia-form textarea:hover{border-color:rgba(20,16,13,.32)}

/* ============================================================================
   SIGN IN

   Compact, on a photograph. This is the first thing a lead sees and it should
   take ten seconds, not feel like an administrative hurdle.
   ========================================================================== */
.uaia-signin{
	/*
	 * The card sits outside .uaia-panel and .uaia-lead, so it inherits none of
	 * their variables. Every rule reading --p-text then fell back to the dark
	 * page's ivory and the whole form was cream on cream, present but
	 * invisible.
	 */
	--p-bg:#FFFDF9;
	--p-field:#F6F1E8;
	--p-text:var(--on-light,#14100D);
	--p-dim:rgba(20,16,13,.74);
	--p-dimmer:rgba(20,16,13,.5);
	--p-line:rgba(20,16,13,.18);
	--p-amber:var(--amber,#F2A413);
	--p-clay:var(--clay,#D2551F);
	--p-sage:var(--sage,#7E9270);
	--p-ink:var(--ink,#14100D);
	--p-radius:var(--r-md,14px);

	color:var(--p-text);
	width:100%;max-width:min(58rem,100%);margin-inline:auto;
	display:grid;grid-template-columns:1.05fr 1fr;
	border-radius:var(--r-lg,22px);overflow:hidden;
	background:#FFFDF9;
	box-shadow:0 26px 60px rgba(20,16,13,.22), 0 2px 8px rgba(20,16,13,.08);
	position:relative;
}
.uaia-signin::before{
	content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:3;
	background:linear-gradient(90deg,var(--amber,#F2A413),var(--clay,#D2551F) 58%,var(--sage,#7E9270));
}

.uaia-signin__art{
	position:relative;min-height:380px;
	background:linear-gradient(150deg,var(--night,#14100D),var(--night-2,#1D1815));
	display:flex;align-items:flex-end;
	overflow:hidden;
}
.uaia-signin__art img{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;display:block;
	transform:scale(1.04);
	transition:transform 1.2s var(--ease,cubic-bezier(.2,.7,.2,1));
}
.uaia-signin:hover .uaia-signin__art img{transform:scale(1)}
.uaia-signin__art::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(to top,rgba(20,16,13,.88),rgba(20,16,13,.25) 62%,rgba(20,16,13,.4));
}
.uaia-signin__words{
	position:relative;z-index:2;padding:34px 30px;color:var(--ivory,#F6F0E6);
}
.uaia-signin__eyebrow{
	display:inline-block;margin:0 0 12px;padding:6px 13px;
	background:var(--amber,#F2A413);color:var(--on-light,#14100D);
	border-radius:var(--r-pill,999px);
	font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.uaia-signin__line{
	margin:0;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.025em;line-height:1.15;
	font-size:clamp(1.3rem,2.4vw,1.75rem);
	text-shadow:0 2px 20px rgba(20,16,13,.6);
}

/* Equal space above and below. The column centres its contents, so uneven
   padding shows immediately as a form sitting high or low in its own half. */
.uaia-signin__body{
	padding-block:clamp(40px,4.4vw,56px);
	padding-inline:clamp(26px,3.2vw,44px);
}
.uaia-signin__body .uaia-form__heading{margin-bottom:6px;font-size:clamp(1.4rem,2.4vw,1.75rem)}
.uaia-signin__body .uaia-form__intro{margin-bottom:24px;font-size:.9rem}

@media(max-width:760px){
	.uaia-signin{grid-template-columns:1fr}
	.uaia-signin__art{min-height:180px}
	.uaia-signin__words{padding:24px 22px}
	.uaia-signin__line{font-size:1.2rem}
}

/* ============================================================================
   MOTION

   Restrained. Things arrive, they do not perform. Everything here is off for
   anybody who has asked their system for reduced motion.
   ========================================================================== */
.uaia-reveal{opacity:0;transform:translateY(14px)}
.uaia-reveal.is-in{
	opacity:1;transform:none;
	transition:opacity .55s var(--ease,cubic-bezier(.2,.7,.2,1)),
	           transform .55s var(--ease,cubic-bezier(.2,.7,.2,1));
}
.uaia-lead__card.uaia-reveal.is-in{transition-delay:calc(var(--i,0) * 70ms)}

.uaia-lead__card{transition:transform .3s ease,box-shadow .3s ease}
.uaia-lead__card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,16,13,.08)}

.uaia-lead__nav a{position:relative}
.uaia-lead__nav a.is-on{transition:background .25s ease}

.uaia-form__field{position:relative}
.uaia-form input:focus,
.uaia-form select:focus,
.uaia-form textarea:focus{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
	.uaia-reveal,.uaia-reveal.is-in{opacity:1;transform:none;transition:none}
	.uaia-lead__card:hover{transform:none}
	.uaia-signin__art img,.uaia-signin:hover .uaia-signin__art img{transform:none;transition:none}
	.uaia-form input:focus,.uaia-form select:focus,.uaia-form textarea:focus{transform:none}
}

/* A form inside the workspace gets a surface, so the fields sit on something
   rather than floating on the page. */
.uaia-lead__panel--form{
	padding:26px 24px 28px;border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
}
.uaia-lead__panel--form .uaia-form input,
.uaia-lead__panel--form .uaia-form select{background:#FFFDF9}

/* Stated outright, because this card can be placed on any page and must not
   depend on what it happens to sit inside. */
.uaia-signin__body .uaia-form__heading{color:var(--on-light,#14100D)}
.uaia-signin__body .uaia-form__intro{color:rgba(20,16,13,.74)}
.uaia-signin__body .uaia-form__privacy,
.uaia-signin__body .uaia-form__privacy a{color:rgba(20,16,13,.55)}
.uaia-signin__body .uaia-form__privacy a{text-decoration:underline}
.uaia-signin__body label{color:rgba(20,16,13,.5)}
.uaia-signin__body input[type=text],
.uaia-signin__body input[type=password]{color:var(--on-light,#14100D)}

/* The sign in form uses the same field classes as every other form, so it
   needs nothing of its own beyond a little breathing room. */
.uaia-signin__body #uaia-signin{margin-top:4px}
.uaia-signin__body .uaia-form__submit{margin-top:22px}
.uaia-signin__body .uaia-form__submit button{width:100%}

/* The sign in column is centred. There is one thing to do on it, and a left
   aligned heading over a full width button reads as two different layouts. */
.uaia-signin__body{
	display:flex;flex-direction:column;justify-content:center;
	text-align:center;
}
.uaia-signin__body .uaia-form__intro{margin-inline:auto;max-width:30ch}

/* Fields stay left aligned inside, because a centred label above a full width
   box is harder to scan, not easier. */
.uaia-signin__body .uaia-form__field{text-align:left}

/* ============================================================================
   THE SIGN IN PAGE

   A band behind the card, so it is not a white rectangle floating on black.
   Warm rather than bright: this page is asking somebody to work, and a loud
   background competes with the one thing on it.
   ========================================================================== */
.uaia-signin-page{
	position:relative;
	padding-block:clamp(48px,7vw,96px);
	padding-inline:clamp(16px,4vw,40px);
}
.uaia-signin-page::before{
	content:"";position:absolute;inset:0;z-index:0;
	/*
	 * Warm and light rather than near black.
	 *
	 * The card is ivory, and an ivory card on a near black page is a hole cut
	 * in the screen. A sand ground with amber and terracotta washes puts the
	 * card on something, and the whole page then reads as one surface rather
	 * than as a login box dropped onto the site.
	 */
	background:
		radial-gradient(ellipse 70% 60% at 18% 12%, rgba(242,164,19,.5), transparent 68%),
		radial-gradient(ellipse 60% 55% at 88% 88%, rgba(210,85,31,.34), transparent 70%),
		radial-gradient(ellipse 50% 45% at 92% 8%, rgba(126,146,112,.26), transparent 72%),
		linear-gradient(155deg, #F3E7D3 0%, #EBDCC4 48%, #E3D2B7 100%);
}
.uaia-signin-page > *{position:relative;z-index:1}

/* With a photograph behind instead, the card needs separating from it. */
.uaia-signin-page--photo::after{
	content:"";position:absolute;inset:0;z-index:0;
	background:linear-gradient(160deg,rgba(20,16,13,.82),rgba(20,16,13,.62));
}
.uaia-signin-page--photo{background-size:cover;background-position:center}

/* ============================================================================
   THE CHAPTER PAGE

   Built entirely from what a lead answered. A panel appears only where there
   is something behind it, because an empty Employment heading tells an
   arriving family the chapter has nothing for them.
   ========================================================================== */
.uaia-cp{width:100%}

/* ---- the chapter page ---------------------------------------------------

   One measure, set once. The sections were each declaring their own width
   and two of them declared none, so the page ran edge to edge on a wide
   screen and every band started in a different place.

   The site's own --wrap and --gutter, so a chapter page is the same shape
   as every other page. Prose caps itself separately in characters, because
   a reading line and a container are different measurements.
   -------------------------------------------------------------------------- */
.uaia-cp{
	/* The site's own container, not a second one invented here. A chapter
	   page that is narrower and more padded than every other page reads as
	   a different site, and 58rem against the site's 1240px was 300px
	   narrower with nearly double the side padding. */
	--cp-measure:var(--wrap,1240px);
	--cp-gutter:var(--gutter,22px);

	/* One scale for the whole page. Every band had invented its own clamp,
	   which is why nothing lined up and the page felt loose: the gap above
	   the directory was not the gap above the events. */
	--cp-band:var(--section-y,clamp(28px,3.7vw,48px)); /* between bands: the theme sets it */
	--cp-box:clamp(18px,2.4vw,26px);    /* inside a card            */
	--cp-gap:clamp(10px,1.4vw,14px);    /* between cards            */
	--cp-tight:clamp(8px,1vw,12px);     /* between related lines    */

	width:100%;
}

/* ---------------------------------------------------------------------------
   EVERY TOP LEVEL BLOCK ON A CHAPTER PAGE

   Each widget renders its own outermost element straight into an Elementor
   section, so each one needed its own container, and three separate blocks
   shipped without one: the shelf ran off both edges, then the ask section
   did, then the events. Fixing them one at a time was never going to finish.

   This is the list. Anything new dropped onto a chapter page goes in it, and
   nothing here sets its own width.
   --------------------------------------------------------------------------- */
.uaia-cp__section,
.uaia-cp__mast,
.uaia-cp__intel,
.uaia-cp__bizwrap,
.uaia-cp__events,
.uaia-cp__teamwrap,
.uaia-cp__stats,
.uaia-cp__cta,
.uaia-ask,
.uaia-ch,
.uaia-dir__national{
	width:100%;
	max-width:min(var(--cp-measure,var(--wrap,1240px)),100%);
	margin-inline:auto;
	padding-inline:var(--cp-gutter,var(--gutter,22px));
}

/* The bands that tint the full viewport are the exception: the background
   spans, the contents do not.

   The gutter has to move INSIDE with the contents. It was on the outer band,
   which made the inner box 44 pixels narrower than the site container and
   stopped it centring, so on a wide screen the masthead started 20 pixels
   left of the header, the shelf and the footer. This reproduces the site's
   own .u-wrap exactly, which is what everything else lines up to. */
.uaia-cp__section--soft,
.uaia-cp__mast{max-width:none;padding-inline:0}
.uaia-cp__mast > .uaia-cp__mastinner,
.uaia-cp__section--soft > *{
	box-sizing:border-box;
	max-width:min(var(--cp-measure,var(--wrap,1240px)),100%);
	margin-inline:auto;
	padding-inline:var(--cp-gutter,var(--gutter,22px));
}

/* Vertical rhythm, once, on the same list. */
.uaia-cp__section,
.uaia-cp__intel,
.uaia-cp__bizwrap,
.uaia-cp__events,
.uaia-cp__teamwrap,
.uaia-cp__stats,
.uaia-cp__cta,
.uaia-ch,
.uaia-ask{padding-block:var(--cp-band,clamp(34px,4.5vw,58px))}

/* The container is the site's width; the reading measure is not. A line of
   body text at 1240px is unreadable, so prose caps itself in characters
   while the grids and cards use the full width. */
.uaia-cp .uaia-cp__lead,
.uaia-cp .uaia-cp__note,
.uaia-cp .uaia-cp__served,
.uaia-cp .uaia-cp__intro{max-width:62ch}

/* Every card on the page shares one radius, one border and one inset.
   Three different radii and four different paddings is what makes a page
   read as assembled rather than designed. */
.uaia-cp .uaia-ev,
.uaia-cp .uaia-dir__card,
.uaia-cp .uaia-biz__card,
.uaia-cp .uaia-ch__guide,
.uaia-cp .uaia-team__card,
.uaia-cp .uaia-q{
	padding:var(--cp-box);
	border-radius:var(--r-md,12px);
	margin-top:var(--cp-gap);
}
.uaia-cp .uaia-ev:first-child,
.uaia-cp .uaia-dir__card:first-child,
.uaia-cp .uaia-q:first-child{margin-top:0}

/* Section headings sit closer to what they introduce. They were floating
   a whole band away from their own content. */
.uaia-cp .uaia-cp__heading{margin-bottom:var(--cp-tight)}
.uaia-cp .uaia-cp__lead{margin-bottom:var(--cp-box)}

/* ---- the masthead --------------------------------------------------------

   Type led, not photograph led. The page is about one city and the people
   already in it, so the city is the largest thing on it and the photograph
   is a held object with a real edge rather than a wash behind everything.

   What this replaced: a full bleed image under a dark scrim with a tracked
   all caps pill and a middot city list on top of it, which is the hero every
   generated page has and which told a reader nothing.
   -------------------------------------------------------------------------- */
.uaia-cp__words{min-width:0}


.uaia-cp__title{
	margin:0;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.035em;line-height:.98;
	color:var(--ivory,#F6F0E6);
	/* No text shadow. The photograph is in its own panel now, so contrast
	   is controlled rather than patched. */
}
.uaia-cp__titlelead{
	display:block;
	font-size:clamp(1.3rem,3vw,2rem);
	font-weight:600;letter-spacing:-.02em;
	color:var(--dim,rgba(246,240,230,.66));
}
.uaia-cp__city{
	display:block;
	font-size:clamp(2.5rem,7vw,4.4rem);
	/* Pulled left so the cap edge lines up with the text above it rather
	   than the glyph's own side bearing. */
	margin-left:-.045em;
}

/* A hairline under the city, then the places it covers as a sentence. */
.uaia-cp__served{
	margin:clamp(16px,2.4vw,24px) 0 0;
	padding-top:clamp(14px,2vw,20px);
	border-top:1px solid var(--line,rgba(246,240,230,.14));
	font-size:.98rem;line-height:1.55;max-width:38ch;
	color:var(--dim,rgba(246,240,230,.74));
}

.uaia-cp__actions{
	display:flex;gap:14px;flex-wrap:wrap;align-items:center;
	margin-top:clamp(22px,3vw,32px);
}
.uaia-cp__go,.uaia-cp__ask{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:54px;padding:16px 28px;border-radius:var(--r-pill,999px);
	font-size:.94rem;font-weight:600;text-decoration:none;
	transition:background .25s ease,box-shadow .25s ease,color .25s ease;
}
.uaia-cp__go{background:var(--amber,#F2A413);color:var(--on-light,#14100D)}
.uaia-cp__go:hover,.uaia-cp__go:focus-visible{background:var(--light-surface,#F6F0E6)}
.uaia-cp__ask{
	color:var(--ivory,#F6F0E6);padding-inline:4px;
	box-shadow:inset 0 -1px 0 0 color-mix(in srgb, currentColor 40%, transparent);
	border-radius:0;min-height:0;
}
.uaia-cp__ask:hover,.uaia-cp__ask:focus-visible{
	box-shadow:inset 0 -1px 0 0 var(--amber,#F2A413);color:var(--amber-ink,#F2A413);
}
.uaia-cp__note{
	margin:clamp(16px,2.4vw,22px) 0 0;
	font-size:.92rem;line-height:1.6;max-width:42ch;
	color:var(--dim,rgba(246,240,230,.7));
}

/* ---- sections ------------------------------------------------------------ */
.uaia-cp__section{
	/* Was 8vw, which on a wide screen is over 100px of nothing between every
	   band. Compact reads as considered; cavernous reads as unfinished. */
}
/* The tinted band spans the viewport, its contents do not. Previously the
   contents did too, which is why the page looked edge to edge. */
.uaia-cp__section--soft{
	background:var(--ink-2,#1D1815);
}
.uaia-cp__section--soft > *{
	max-width:min(var(--cp-measure,var(--wrap,1240px)),100%);
	margin-inline:auto;
}

/* Sentence case, modest tracking, and dim rather than amber. A tracked all
   caps label in the accent colour shouts a category name louder than the
   heading it sits above, and it is the same label on every generated page.
   Where a section genuinely needs orienting, this still does it quietly. */
.uaia-cp__eyebrow{
	margin:0 0 10px;font-family:var(--font-body,inherit);
	font-size:.82rem;font-weight:600;letter-spacing:.01em;text-transform:none;
	color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-cp__heading{
	margin:0 0 14px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1.1;
	font-size:clamp(1.7rem,4vw,2.7rem);color:var(--ivory,#F6F0E6);
	max-width:22ch;
}
.uaia-cp__heading--small{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:6px}
.uaia-cp__lead{
	margin:0 0 40px;font-size:1.02rem;line-height:1.62;
	color:var(--dim,rgba(246,240,230,.74));max-width:52ch;
}

/* ---- the intelligence grid ----------------------------------------------- */
.uaia-cp__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:16px;
}
.uaia-cp__panel{
	padding:28px 26px 30px;border-radius:var(--r-md,14px);
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.13));
	border-top:3px solid var(--amber,#F2A413);
	transition:transform .3s ease,border-color .3s ease;
}
.uaia-cp__panel:hover{transform:translateY(-3px)}
.uaia-cp__panel--schools{border-top-color:var(--sage,#7E9270)}
.uaia-cp__panel--employment{border-top-color:var(--clay,#D2551F)}
.uaia-cp__panel--markets{border-top-color:var(--gold,#BBA119)}
.uaia-cp__panel--worship{border-top-color:var(--sage,#7E9270)}

.uaia-cp__panel h3{
	margin:0 0 8px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.25rem;
	color:var(--ivory,#F6F0E6);
}
.uaia-cp__why{
	margin:0 0 18px;font-size:.86rem;line-height:1.55;
	color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-cp__sublabel{
	margin:18px 0 8px;font-size:.68rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;
	color:var(--amber-ink,#F2A413);
}
.uaia-cp__list{margin:0;padding:0;list-style:none}
.uaia-cp__list li{
	position:relative;padding:0 0 11px 20px;
	font-size:.92rem;line-height:1.55;color:var(--dim,rgba(246,240,230,.78));
}
.uaia-cp__list li::before{
	content:"";position:absolute;left:0;top:9px;
	width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;
}
.uaia-cp__list li:last-child{padding-bottom:0}

.uaia-cp__tip{
	margin:32px 0 0;padding:20px 24px;border-radius:var(--r-md,14px);
	background:rgba(242,164,19,.1);border-left:3px solid var(--amber,#F2A413);
	font-size:1rem;line-height:1.55;color:var(--ivory,#F6F0E6);
}
.uaia-cp__tip span{
	display:block;margin-bottom:6px;
	font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:var(--amber-ink,#F2A413);
}

/* ---- businesses ---------------------------------------------------------- */
.uaia-cp__biz{
	margin:0;padding:0;list-style:none;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;
}
.uaia-cp__biz li{
	padding:20px 22px;border-radius:var(--r-md,14px);
	background:rgba(246,240,230,.05);
	border:1px solid var(--line,rgba(246,240,230,.12));
	font-size:.94rem;line-height:1.55;color:var(--dim,rgba(246,240,230,.82));
	transition:background .25s ease;
}
.uaia-cp__biz li:hover{background:rgba(246,240,230,.09)}

/* ---- who runs it --------------------------------------------------------- */
.uaia-cp__person{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.uaia-cp__face{
	width:150px;height:150px;flex:none;
	border-radius:var(--r-md,14px);object-fit:cover;
	border:1px solid var(--line,rgba(246,240,230,.14));
}
.uaia-cp__years{
	margin:0 0 14px;font-size:.82rem;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-cp__bio{
	margin:0;font-size:1rem;line-height:1.65;
	color:var(--dim,rgba(246,240,230,.8));max-width:52ch;
}

@media(max-width:640px){
	.uaia-cp__actions{flex-direction:column;align-items:stretch}
	.uaia-cp__go,.uaia-cp__ask{width:100%}
	.uaia-cp__grid{grid-template-columns:1fr}
	.uaia-cp__person{gap:18px}
	.uaia-cp__face{width:110px;height:110px}
}

/* ============================================================================
   CHAPTER SECTIONS, AS WIDGETS

   These use the same vocabulary as the landing page, so a chapter reads as the
   same organisation rather than a second site. Layout is Elementor's; the
   content comes from the chapter's own setup form.
   ========================================================================== */

/* ---- numbers -------------------------------------------------------------- */
.uaia-cp__stats{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
	gap:1px;background:var(--line,rgba(246,240,230,.13));
	border-block:1px solid var(--line,rgba(246,240,230,.13));
}
.uaia-cp__stat{padding:28px 24px;background:var(--ink,#14100D);text-align:center}
.uaia-cp__statnum{
	margin:0 0 4px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.04em;line-height:1;
	font-size:clamp(2rem,4vw,2.9rem);color:var(--amber-ink,#F2A413);
}
.uaia-cp__statlabel{
	margin:0;font-size:.72rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--dimmer,rgba(246,240,230,.5));
}

/* ---- team ---------------------------------------------------------------- */
.uaia-cp__team{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
}
.uaia-cp__member{
	padding:28px 24px 30px;border-radius:var(--r-md,14px);
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.13));
	text-align:center;
	transition:transform .3s ease;
}
.uaia-cp__member:hover{transform:translateY(-3px)}
.uaia-cp__member .uaia-cp__face{
	width:96px;height:96px;border-radius:50%;object-fit:cover;
	margin:0 auto 16px;display:block;
}
.uaia-cp__initials{
	display:flex;align-items:center;justify-content:center;
	width:96px;height:96px;margin:0 auto 16px;border-radius:50%;
	background:linear-gradient(150deg,var(--amber,#F2A413),var(--clay,#D2551F));
	color:var(--on-light,#14100D);
	font-family:var(--font-display,inherit);font-weight:700;font-size:2rem;
}
.uaia-cp__role{
	margin:0 0 6px;font-size:.66rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-cp__membername{
	margin:0 0 6px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.2rem;
	color:var(--ivory,#F6F0E6);
}
.uaia-cp__member .uaia-cp__years{margin:0 0 12px}
.uaia-cp__member .uaia-cp__bio{margin:0;font-size:.9rem;max-width:none}
.uaia-cp__thin{
	margin:26px 0 0;padding:16px 20px;border-radius:var(--r-md,14px);
	background:rgba(242,164,19,.09);border-left:3px solid var(--amber,#F2A413);
	font-size:.92rem;line-height:1.55;color:var(--dim,rgba(246,240,230,.8));
}

/* ---- call to action ------------------------------------------------------- */
.uaia-cp__cta{
	border-radius:var(--r-lg,22px);
	background:linear-gradient(140deg,var(--amber,#F2A413),var(--gold,#BBA119));
	color:var(--on-light,#14100D);text-align:center;
}
.uaia-cp__cta h2{
	margin:0 auto 12px;max-width:20ch;
	font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1.08;
	font-size:clamp(1.7rem,4vw,2.7rem);
}
.uaia-cp__cta p{
	margin:0 auto 28px;max-width:44ch;
	font-size:1.02rem;line-height:1.6;color:rgba(20,16,13,.78);
}
.uaia-cp__ctago{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:56px;padding:17px 36px;border-radius:var(--r-pill,999px);
	background:var(--ink,#14100D);color:var(--ivory,#F6F0E6);
	font-size:.95rem;font-weight:600;text-decoration:none;
	transition:transform .25s ease;
}
.uaia-cp__ctago:hover{transform:translateY(-2px)}

/* Shown to an editor when a section has nothing to render, so a blank space in
   the builder is explained rather than mysterious. */
.uaia-cp__empty{
	padding:22px 24px;border:1px dashed var(--amber,#F2A413);
	border-radius:var(--r-md,14px);background:rgba(242,164,19,.07);
	color:var(--dim,rgba(246,240,230,.75));
	font-size:.9rem;line-height:1.5;text-align:center;
}

@media(max-width:640px){
	.uaia-cp__team{grid-template-columns:1fr}
	.uaia-cp__stats{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   QUESTIONS

   A question with an owner and a status, rather than a thread. The section is
   the memory a group chat cannot be.
   ========================================================================== */
.uaia-ask{
	display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);
	align-items:start;
}
.uaia-ask__list{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.uaia-ask__item{
	border-radius:var(--r-md,14px);
	background:rgba(246,240,230,.05);
	border:1px solid var(--line,rgba(246,240,230,.12));
	transition:background .25s ease;
}
.uaia-ask__item:hover{background:rgba(246,240,230,.08)}
.uaia-ask__item summary{
	padding:17px 22px;cursor:pointer;list-style:none;
	font-size:.98rem;line-height:1.5;font-weight:600;
	color:var(--ivory,#F6F0E6);
}
.uaia-ask__item summary::-webkit-details-marker{display:none}
.uaia-ask__item summary::after{content:" +";color:var(--amber-ink,#F2A413);font-weight:700}
.uaia-ask__item[open] summary::after{content:" \2212"}
.uaia-ask__answer{
	padding:0 22px 20px;font-size:.94rem;line-height:1.65;
	color:var(--dim,rgba(246,240,230,.78));
}
.uaia-ask__answer p{margin:0 0 10px}
.uaia-ask__by{
	margin:12px 0 0!important;font-size:.76rem;font-weight:600;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--amber-ink,#F2A413);
}

/* ---- in the lead area ---------------------------------------------------- */
.uaia-lead__count{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:20px;height:20px;margin-left:7px;padding:0 6px;
	border-radius:999px;background:var(--w-clay,#D2551F);color:#fff;
	font-size:.68rem;font-weight:700;
}
.uaia-q{
	padding:20px 22px;margin-top:14px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-dimmer,rgba(20,16,13,.3));
}
.uaia-q--new{border-left-color:var(--w-clay,#D2551F)}
.uaia-q--claimed{border-left-color:var(--w-amber,#F2A413)}
.uaia-q--answered{border-left-color:var(--w-sage,#7E9270)}
.uaia-q__meta{
	display:flex;gap:12px;align-items:baseline;margin:0 0 8px;
	font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.uaia-q__state{color:var(--w-ink,#14100D)}
.uaia-q__when{color:var(--w-dimmer,rgba(20,16,13,.5))}
.uaia-q__text{margin:0;font-size:1rem;line-height:1.55;color:var(--w-ink,#14100D)}
.uaia-q__answer{
	margin-top:12px;padding-top:12px;
	border-top:1px solid var(--w-line,rgba(20,16,13,.12));
	font-size:.94rem;line-height:1.6;color:var(--w-dim,rgba(20,16,13,.74));
}
.uaia-q__form{margin-top:14px}
.uaia-q__actions{margin:0 0 12px}
.uaia-q__claim{
	padding:9px 18px;border:0;border-radius:var(--r-pill,999px);
	background:var(--w-ink,#14100D);color:#fff;
	font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
	transition:background .25s ease;
}
.uaia-q__claim:hover{background:var(--w-clay,#D2551F)}
.uaia-q .uaia-form__submit{margin-top:12px}
.uaia-q .uaia-form__submit button{width:auto;padding:12px 26px;min-height:46px}

@media(max-width:900px){
	.uaia-ask{grid-template-columns:1fr}
}

/* ============================================================================
   EVENTS

   A date block and a line about where, because the two things somebody needs
   are when and whether they can find it.
   ========================================================================== */
.uaia-evs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:8px}
.uaia-evc{
	display:flex;gap:20px;align-items:flex-start;
	padding:24px 22px;border-radius:var(--r-md,14px);
	background:rgba(246,240,230,.05);
	border:1px solid var(--line,rgba(246,240,230,.12));
	transition:transform .3s ease,background .3s ease;
}
.uaia-evc:hover{transform:translateY(-3px);background:rgba(246,240,230,.08)}
.uaia-evc__date{
	flex:none;width:64px;padding:12px 0;text-align:center;
	border-radius:var(--r-md,12px);
	background:var(--amber,#F2A413);color:var(--on-light,#14100D);
}
.uaia-evc__day{
	display:block;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.7rem;line-height:1;letter-spacing:-.03em;
}
.uaia-evc__mon{
	display:block;margin-top:2px;
	font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.uaia-evc__kind{
	margin:0 0 5px;font-size:.66rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-evc__body h3{
	margin:0 0 7px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.15rem;
	color:var(--ivory,#F6F0E6);
}
.uaia-evc__when{margin:0 0 4px;font-size:.9rem;font-weight:600;color:var(--ivory,#F6F0E6)}
.uaia-evc__where{margin:0 0 8px;font-size:.88rem;line-height:1.5;color:var(--dim,rgba(246,240,230,.74))}
.uaia-evc__about{margin:0;font-size:.88rem;line-height:1.55;color:var(--dimmer,rgba(246,240,230,.55))}
.uaia-evc__family{
	margin:10px 0 0;display:inline-block;padding:4px 11px;
	border-radius:var(--r-pill,999px);background:rgba(126,146,112,.2);
	font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--sage-ink,#7E9270);
}
.uaia-evs__past{margin-top:34px;padding-top:26px;border-top:1px solid var(--line,rgba(246,240,230,.13))}
.uaia-evs__past ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.uaia-evs__past li{
	display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
	font-size:.9rem;color:var(--dim,rgba(246,240,230,.7));
}
.uaia-evs__past li span{color:var(--dimmer,rgba(246,240,230,.45));font-size:.82rem}

/* ---- in the lead area ---------------------------------------------------- */
.uaia-ev{
	display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:16px 18px;margin-top:12px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
}
.uaia-ev__kind{
	margin:0 0 3px;font-size:.64rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--w-clay,#D2551F);
}
.uaia-ev__title{
	margin:0 0 3px;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.02rem;color:var(--w-ink,#14100D);
}
.uaia-ev__when{margin:0;font-size:.86rem;color:var(--w-dim,rgba(20,16,13,.7))}
.uaia-ev__remove{
	flex:none;padding:8px 15px;border:0;border-radius:var(--r-pill,999px);
	background:transparent;box-shadow:inset 0 0 0 1px var(--w-line,rgba(20,16,13,.18));
	color:var(--w-dim,rgba(20,16,13,.7));
	font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
	transition:background .25s ease,color .25s ease;
}
.uaia-ev__remove:hover{background:var(--w-clay,#D2551F);color:#fff;box-shadow:none}

/* Edit sits beside Remove and matches it, except that it is the safe one of
   the two: it hovers to the chapter's own green rather than to the colour
   that means this is about to be taken down. */
.uaia-ev__actions{display:flex;align-items:center;gap:8px;flex:none}
.uaia-ev__actions form{margin:0}
.uaia-ev__fix{
	flex:none;padding:8px 15px;border-radius:var(--r-pill,999px);
	box-shadow:inset 0 0 0 1px var(--w-line,rgba(20,16,13,.18));
	color:var(--w-dim,rgba(20,16,13,.7));text-decoration:none;
	font:inherit;font-size:.78rem;font-weight:600;white-space:nowrap;
	transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.uaia-ev__fix:hover,
.uaia-ev__fix:focus-visible{background:#4F6B43;color:#fff;box-shadow:none}

/* A photograph carries its caption and its two controls, so the actions sit
   under the picture rather than beside it. */
.uaia-ph__one figcaption{
	margin:7px 0 0;font-size:.82rem;line-height:1.45;color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-ph__one .uaia-ev__actions{margin-top:8px;justify-content:flex-start}

/* Something shown in a form that cannot be changed there. It looks like a
   field so the form reads evenly, and is plainly not one. */
.uaia-cn__fixed{
	display:block;padding:8px 11px;border-radius:8px;
	border:1px dashed rgba(20,16,13,.2);background:rgba(20,16,13,.03);
	color:var(--cn-dim);font-size:.87rem;line-height:1.5;
}

/* The photograph being corrected, above its own form. */
.uaia-cn__photoshot{margin:0 0 16px}









/* Waiting on somebody. The only colour on the screen. */


/* A group that is folded away. It reads as a heading until you open it, so
   the sidebar still scans as one list rather than a list plus a control. */
.uaia-cn__navfold{margin:0}
.uaia-cn__navfold summary{
	list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
	margin:14px 0 6px;padding:0 8px;
	font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cn-side-dim,rgba(255,255,255,.45));
}
.uaia-cn__navfold summary::-webkit-details-marker{display:none}
.uaia-cn__navfold summary::after{
	content:"";width:5px;height:5px;margin-left:2px;
	border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
	transform:rotate(-45deg);transition:transform .2s ease;
}
.uaia-cn__navfold[open] summary::after{transform:rotate(45deg)}
.uaia-cn__navfold summary:hover{color:var(--cn-side-ink,rgba(255,255,255,.8))}
.uaia-cn__navfold summary:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px;border-radius:4px}
/* The nav's own lists are display:grid, and an explicit display on the
   contents of a closed details defeats the browser's own collapsing, so a
   folded group was still showing every item. Said here rather than relied on. */
.uaia-cn__navfold:not([open]) ul{display:none}

/* The chapter chooser in the top bar. It sits on a dark header, so it is
   outlined rather than filled, and names what it is: somebody who forgets
   which chapter they are working in edits the wrong one. */
.uaia-cn__pick{display:flex;align-items:center;gap:8px;margin:0 auto 0 0;padding-left:18px}
.uaia-cn__pick label{
	font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--cn-dim);white-space:nowrap;
}
.uaia-cn__pick select{
	padding:6px 10px;border-radius:8px;border:1px solid rgba(20,16,13,.18);
	background:#fff;color:var(--cn-ink);font:inherit;font-size:.82rem;font-weight:600;
	max-width:220px;cursor:pointer;
}
.uaia-cn__pick select:focus-visible{outline:2px solid var(--cn-accent);outline-offset:1px}

/* One quiet line where somebody lands, in place of the band that used to run
   across the top of every screen. */
.uaia-cn__note{
	margin:0 0 16px;color:var(--cn-dim);font-size:.88rem;line-height:1.55;max-width:62ch;
}

/* The way from a row into the thing it is about. */
.uaia-cn__rowgo{
	display:inline-block;margin-left:6px;font-size:.76rem;font-weight:600;
	color:#8A5A06;text-decoration:none;border-bottom:1px solid rgba(138,90,6,.35);
}
.uaia-cn__rowgo:hover,
.uaia-cn__rowgo:focus-visible{border-bottom-color:#8A5A06}

@media (max-width:760px){
	/* On a phone the bar cannot hold the screen name, the chooser and the
	   person on one line without the chooser sitting on top of the title, so
	   the chooser takes a line of its own underneath. */
	.uaia-cn__top{flex-wrap:wrap;row-gap:10px}
	.uaia-cn__where{flex:1 1 auto;min-width:0}
	.uaia-cn__pick{order:3;flex:1 1 100%;padding-left:0;margin:0}
	.uaia-cn__pick select{flex:1 1 auto;max-width:none}
}

.uaia-cn__photoshot img{
	display:block;max-width:320px;width:100%;height:auto;border-radius:10px;
	box-shadow:0 1px 3px rgba(20,16,13,.14);
}
.uaia-ev__past{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.uaia-ev__past li{
	display:flex;justify-content:space-between;gap:14px;
	font-size:.9rem;color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-ev__past li span{color:var(--w-dimmer,rgba(20,16,13,.45));font-size:.82rem}

@media(max-width:640px){
	.uaia-evs{grid-template-columns:1fr}
	.uaia-ev{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   THE DIRECTORY

   Ordered by how many members have used somebody, because that is the only
   ordering that is not an opinion.
   ========================================================================== */
.uaia-dir__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:8px}
.uaia-dir__card{
	padding:24px 22px;border-radius:var(--r-md,14px);
	background:rgba(246,240,230,.05);
	border:1px solid var(--line,rgba(246,240,230,.12));
	transition:transform .3s ease,border-color .3s ease;
}
.uaia-dir__card:hover{transform:translateY(-3px);border-color:rgba(246,240,230,.26)}
.uaia-dir__kind{
	margin:0 0 7px;font-size:.64rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-dir__card h3{
	margin:0 0 8px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.12rem;color:var(--ivory,#F6F0E6);
}
.uaia-dir__about{margin:0 0 8px;font-size:.9rem;line-height:1.55;color:var(--dim,rgba(246,240,230,.74))}
.uaia-dir__where{margin:0 0 10px;font-size:.85rem;color:var(--dimmer,rgba(246,240,230,.5))}
.uaia-dir__contact{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.uaia-dir__contact a{font-size:.88rem;font-weight:600;color:var(--amber-ink,#F2A413)}
.uaia-dir__vouched{
	margin:0;padding:7px 13px;display:inline-block;
	border-radius:var(--r-pill,999px);background:rgba(126,146,112,.2);
	font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--sage-ink,#7E9270);
}
.uaia-dir__unvouched{
	margin:0;font-size:.76rem;font-style:italic;
	color:var(--dimmer,rgba(246,240,230,.42));
}
.uaia-dir__note{
	margin:11px 0 0;font-size:.88rem;line-height:1.55;font-style:italic;
	color:var(--dim,rgba(246,240,230,.72));
}
.uaia-dir__owned{
	margin:11px 0 0;font-size:.66rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--gold,#BBA119);
}
.uaia-dir__foot{
	margin:26px 0 0;font-size:.84rem;line-height:1.6;
	color:var(--dimmer,rgba(246,240,230,.5));max-width:64ch;
}

/* ============================================================================
   ARRIVALS AND THE MONTH
   ========================================================================== */
.uaia-arr{
	padding:20px 22px;margin-top:14px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-clay,#D2551F);
}
.uaia-arr__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.uaia-arr__top h4{
	margin:0 0 3px;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.1rem;color:var(--w-ink,#14100D);
}
.uaia-arr__when{margin:0;font-size:.84rem;color:var(--w-dim,rgba(20,16,13,.7))}
.uaia-arr__pct{
	flex:none;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.4rem;color:var(--w-clay,#D2551F);
}
.uaia-arr__need{
	margin:12px 0 0;padding:11px 15px;border-radius:var(--r-md,10px);
	background:rgba(242,164,19,.14);
	font-size:.9rem;line-height:1.5;color:var(--w-ink,#14100D);
}
.uaia-arr__form{margin-top:16px}
.uaia-arr__step{
	display:flex;gap:12px;align-items:flex-start;
	padding:11px 0;border-top:1px solid rgba(20,16,13,.08);cursor:pointer;
}
.uaia-arr__step input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--w-sage,#7E9270)}
.uaia-arr__step strong{
	display:block;font-size:.95rem;font-weight:600;color:var(--w-ink,#14100D);
}
.uaia-arr__step em{
	display:block;margin-top:3px;font-style:normal;
	font-size:.82rem;line-height:1.5;color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-arr__step.is-done strong{text-decoration:line-through;color:var(--w-dimmer,rgba(20,16,13,.45))}

.uaia-rep{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
	gap:12px;margin-top:18px;
}
.uaia-rep__fig{
	padding:18px 16px;border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	text-align:center;
}
.uaia-rep__n{
	display:block;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.04em;line-height:1;
	font-size:2rem;color:var(--w-ink,#14100D);
}
.uaia-rep__l{
	display:block;margin-top:5px;font-size:.72rem;font-weight:600;
	letter-spacing:.05em;color:var(--w-dimmer,rgba(20,16,13,.5));
}

@media(max-width:640px){
	.uaia-dir__grid{grid-template-columns:1fr}
	.uaia-rep{grid-template-columns:1fr 1fr}
	.uaia-arr__top{flex-direction:column;gap:8px}
}

/* ============================================================================
   EMERGENCY

   No public amounts, no progress bar. A family in grief should not see the
   internet told how far short of burying their father the community is.
   ========================================================================== */
.uaia-x{
	padding:20px 22px;margin-top:14px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-ink,#14100D);
}
.uaia-x__top h4{
	margin:0 0 3px;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.12rem;color:var(--w-ink,#14100D);
}
.uaia-x__about{margin:10px 0 0;font-size:.92rem;line-height:1.55;color:var(--w-dim,rgba(20,16,13,.74))}
.uaia-x__money{display:flex;gap:26px;flex-wrap:wrap;margin:16px 0 0}
.uaia-x__n{
	display:block;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1;
	font-size:1.7rem;color:var(--w-sage,#7E9270);
}
.uaia-x__n--soft{color:var(--w-dimmer,rgba(20,16,13,.45))}
.uaia-x__l{
	display:block;margin-top:3px;font-size:.68rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-x__warn{
	margin:14px 0 0;padding:11px 15px;border-radius:var(--r-md,10px);
	background:rgba(210,85,31,.12);border-left:3px solid var(--w-clay,#D2551F);
	font-size:.84rem;line-height:1.5;color:var(--w-ink,#14100D);
}
.uaia-x__pledge{margin-top:16px;padding-top:16px;border-top:1px solid rgba(20,16,13,.1)}
.uaia-x__pledge .uaia-form__submit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.uaia-x__pledge .uaia-form__submit button[type=submit]{width:auto;padding:12px 26px;min-height:46px}

/* ============================================================================
   ANNOUNCEMENTS

   One at a time, with an end date, so it disappears on its own.
   ========================================================================== */
.uaia-ann{
	width:100%;max-width:min(72rem,100%);margin:0 auto 26px;
	border-radius:var(--r-md,14px);overflow:hidden;
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.14));
	border-left:3px solid var(--amber,#F2A413);
}
.uaia-ann--ask{border-left-color:var(--sage,#7E9270)}
.uaia-ann--grave{
	border-left-color:var(--clay,#D2551F);
	background:linear-gradient(120deg,rgba(210,85,31,.16),rgba(210,85,31,.05));
}
.uaia-ann__inner{padding:20px 24px}
.uaia-ann__title{
	margin:0;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.08rem;
	color:var(--ivory,#F6F0E6);
}
.uaia-ann__body{
	margin:7px 0 0;font-size:.92rem;line-height:1.6;
	color:var(--dim,rgba(246,240,230,.76));max-width:64ch;
}
.uaia-ann__more{
	display:inline-block;margin-top:12px;
	font-size:.86rem;font-weight:600;color:var(--amber-ink,#F2A413);
}

/* Inside the light workspace it has to invert. */
.uaia-lead .uaia-ann{
	margin:0 clamp(24px,3.4vw,44px) 0;
	background:var(--w-soft,#F6F1E8);
	border-color:var(--w-line,rgba(20,16,13,.12));
	border-left-color:var(--w-amber,#F2A413);
}
.uaia-lead .uaia-ann__title{color:var(--w-ink,#14100D)}
.uaia-lead .uaia-ann__body{color:var(--w-dim,rgba(20,16,13,.74))}
.uaia-lead .uaia-ann__more{color:var(--w-clay,#D2551F)}

@media(max-width:640px){
	.uaia-x__money{gap:18px}
	.uaia-lead .uaia-ann{margin-inline:20px}
}

/* ============================================================================
   CHAPTER HEALTH

   A list of what would move the chapter, not a mark out of a hundred. The
   score is never shown, because a number invites comparison and chapters are
   not competing with each other.
   ========================================================================== */
.uaia-health__tier{
	display:inline-block;margin:0 0 18px;padding:8px 18px;
	border-radius:var(--r-pill,999px);
	background:var(--w-ink,#14100D);color:#fff;
	font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.uaia-health{margin:0;padding:0;list-style:none}
.uaia-health li{
	display:flex;gap:14px;align-items:flex-start;
	padding:14px 0;border-top:1px solid rgba(20,16,13,.08);
}
.uaia-health li:first-child{border-top:0}
.uaia-health__mark{
	flex:none;width:24px;height:24px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(20,16,13,.08);color:var(--w-dimmer,rgba(20,16,13,.4));
	font-size:.8rem;font-weight:700;
}
.uaia-health li.is-met .uaia-health__mark{background:var(--w-sage,#7E9270);color:#fff}
.uaia-health strong{display:block;font-size:.98rem;font-weight:600;color:var(--w-ink,#14100D)}
.uaia-health em{
	display:block;margin-top:2px;font-style:normal;font-size:.8rem;
	font-weight:600;letter-spacing:.05em;text-transform:uppercase;
	color:var(--w-dimmer,rgba(20,16,13,.45));
}
.uaia-health__todo{
	display:block;margin-top:6px;font-size:.88rem;line-height:1.5;
	color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-health__done{
	margin:20px 0 0;padding:14px 18px;border-radius:var(--r-md,12px);
	background:rgba(126,146,112,.16);border-left:3px solid var(--w-sage,#7E9270);
	font-size:.92rem;line-height:1.55;color:var(--w-ink,#14100D);
}

/* ============================================================================
   MENTOR MATCHING

   A shortlist with reasons, and a person who chooses.
   ========================================================================== */
.uaia-mm{
	padding:20px 22px;margin-top:14px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
}
.uaia-mm h4{
	margin:0 0 3px;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.08rem;color:var(--w-ink,#14100D);
}
.uaia-mm__trade{
	margin:0 0 6px;font-size:.7rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--w-clay,#D2551F);
}
.uaia-mm__wants{margin:0 0 8px;font-size:.88rem;color:var(--w-dim,rgba(20,16,13,.72))}
.uaia-mm__about{
	margin:0 0 14px;padding:11px 15px;border-radius:var(--r-md,10px);
	background:rgba(242,164,19,.12);
	font-size:.9rem;line-height:1.55;color:var(--w-ink,#14100D);
}
.uaia-mm__none{
	margin:12px 0 0;font-size:.88rem;line-height:1.55;font-style:italic;
	color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-mm__cand{
	display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:13px 0;border-top:1px solid rgba(20,16,13,.09);
}
.uaia-mm__cand.is-full{opacity:.5}
.uaia-mm__cand strong{display:block;font-size:.98rem;color:var(--w-ink,#14100D)}
.uaia-mm__cand span{
	display:block;margin-top:2px;font-size:.82rem;
	color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-mm__cand em{
	display:block;margin-top:5px;font-style:italic;font-size:.86rem;
	color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-mm__cand button{
	flex:none;padding:10px 20px;border:0;border-radius:var(--r-pill,999px);
	background:var(--w-ink,#14100D);color:#fff;
	font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
	transition:background .25s ease;
}
.uaia-mm__cand button:hover:not(:disabled){background:var(--w-clay,#D2551F)}
.uaia-mm__cand button:disabled{cursor:not-allowed;background:rgba(20,16,13,.25)}

@media(max-width:640px){
	.uaia-mm__cand{flex-direction:column;align-items:flex-start}
	.uaia-mm__cand button{width:100%}
}

/* ============================================================================
   A MEMBER'S OWN JOURNEY

   No progress bar and no percentage. Somebody eight months in who has not got
   a licence yet does not need a number telling them they are 40% of a person.
   ========================================================================== */
.uaia-jn{margin-top:20px}
.uaia-jn:first-of-type{margin-top:8px}
.uaia-jn__tier{
	margin:0 0 8px;font-size:.68rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--w-clay,#D2551F);
}
.uaia-jn__step{
	display:flex;gap:12px;align-items:center;
	padding:11px 0;border-top:1px solid rgba(20,16,13,.08);cursor:pointer;
}
.uaia-jn__step input{flex:none;width:19px;height:19px;accent-color:var(--w-sage,#7E9270)}
.uaia-jn__step span{font-size:.96rem;color:var(--w-ink,#14100D)}
.uaia-jn__step.is-done span{color:var(--w-dimmer,rgba(20,16,13,.45));text-decoration:line-through}

/* ============================================================================
   STATUS

   Set apart, because what it says about itself matters as much as the field.
   ========================================================================== */
.uaia-st{border-left:3px solid var(--w-sage,#7E9270)}
.uaia-st__promises{
	margin:0 0 20px;padding:16px 20px 16px 36px;
	border-radius:var(--r-md,12px);
	background:rgba(126,146,112,.12);
	font-size:.9rem;line-height:1.6;color:var(--w-ink,#14100D);
}
.uaia-st__promises li{margin-bottom:5px}
.uaia-st__promises li:last-child{margin-bottom:0}
.uaia-st__reads{
	margin:24px 0 0;font-size:.72rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--w-dimmer,rgba(20,16,13,.5));
}

/* ============================================================================
   LOCAL NOTES AND REPORTS

   A note is visibly local and visibly dated, so nobody mistakes it for the
   guide it sits under.
   ========================================================================== */
.uaia-note{
	margin:34px 0 0;padding:22px 24px;
	border-radius:var(--r-md,14px);
	background:rgba(242,164,19,.1);
	border-left:3px solid var(--amber,#F2A413);
}
.uaia-note__label{
	margin:0 0 8px;font-size:.66rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-note__text{
	margin:0;font-size:1rem;line-height:1.62;color:var(--ivory,#F6F0E6);
}
.uaia-note__by{
	margin:12px 0 0;font-size:.78rem;
	color:var(--dimmer,rgba(246,240,230,.5));
}

.uaia-rep__report{margin:22px 0 0}
.uaia-rep__report summary{
	cursor:pointer;list-style:none;display:inline-block;
	font-size:.8rem;font-weight:600;
	color:var(--dimmer,rgba(246,240,230,.5));
	border-bottom:1px dotted currentColor;
}
.uaia-rep__report summary::-webkit-details-marker{display:none}
.uaia-rep__report summary:hover{color:var(--amber-ink,#F2A413)}
.uaia-rep__report .uaia-form{
	margin-top:16px;max-width:34rem;padding:20px 22px;
	border-radius:var(--r-md,14px);
	background:rgba(246,240,230,.05);
	border:1px solid var(--line,rgba(246,240,230,.12));
}
.uaia-rep__report label{color:var(--dimmer,rgba(246,240,230,.55))}
.uaia-rep__report textarea,.uaia-rep__report input[type=email]{
	background:var(--ink,#14100D);color:var(--ivory,#F6F0E6);
	border-color:rgba(246,240,230,.2);
}
.uaia-rep__report .uaia-form__submit button{width:auto;padding:12px 26px;min-height:46px}
.uaia-rep__thanks{
	margin:22px 0 0;padding:13px 18px;border-radius:var(--r-md,12px);
	background:rgba(126,146,112,.16);border-left:3px solid var(--sage,#7E9270);
	font-size:.9rem;color:var(--ivory,#F6F0E6);
}
.uaia-arr__wa{font-weight:600;color:var(--w-sage,#7E9270)}

/* ============================================================================
   PHOTOGRAPHS AND TEAM
   ========================================================================== */
.uaia-ph{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
	gap:12px;margin-top:16px;
}
.uaia-ph__one{margin:0;position:relative;border-radius:var(--r-md,12px);overflow:hidden}
.uaia-ph__one img{display:block;width:100%;height:130px;object-fit:cover}
.uaia-ph__one form{position:absolute;top:7px;right:7px}
.uaia-ph__one button{
	padding:6px 12px;border:0;border-radius:var(--r-pill,999px);
	background:rgba(20,16,13,.78);color:#fff;
	font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
	opacity:0;transition:opacity .2s ease,background .2s ease;
}
.uaia-ph__one:hover button,.uaia-ph__one:focus-within button{opacity:1}
.uaia-ph__one button:hover{background:var(--w-clay,#D2551F)}

.uaia-tm{
	display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:16px 18px;margin-top:12px;
	border-radius:var(--r-md,14px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
}
.uaia-tm__empty{
	margin:4px 0 0;font-size:.88rem;line-height:1.5;font-style:italic;
	color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-form input[type=file]{
	width:100%;padding:13px 15px;
	background:var(--p-field,#F6F1E8);color:var(--p-text,#14100D);
	border:1.5px dashed var(--p-line,rgba(20,16,13,.24));
	border-radius:var(--r-md,12px);font:inherit;font-size:.92rem;cursor:pointer;
}
.uaia-form input[type=file]:hover{border-color:var(--p-amber,#F2A413)}

@media(max-width:640px){
	.uaia-ph{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
	.uaia-ph__one button{opacity:1}
	.uaia-tm{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   PROFILES AND THE MEMBER DIRECTORY
   ========================================================================== */
.uaia-pf{border-left:3px solid var(--w-amber,#F2A413)}
.uaia-pf__state{
	margin:0 0 18px;padding:12px 16px;border-radius:var(--r-md,10px);
	background:rgba(20,16,13,.06);
	font-size:.92rem;font-weight:600;color:var(--w-ink,#14100D);
}
.uaia-pf__field{
	padding:14px 0;border-top:1px solid rgba(20,16,13,.08);
}
.uaia-pf__field--care{background:rgba(210,85,31,.05);padding-inline:14px;border-radius:var(--r-md,10px)}
.uaia-pf__toggle{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.uaia-pf__toggle input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--w-sage,#7E9270)}
.uaia-pf__toggle strong{display:block;font-size:.98rem;color:var(--w-ink,#14100D)}
.uaia-pf__toggle em{
	display:block;margin-top:3px;font-style:normal;font-size:.84rem;line-height:1.5;
	color:var(--w-dimmer,rgba(20,16,13,.52));
}
.uaia-pf__field input[type=text],.uaia-pf__field textarea{margin-top:10px}
.uaia-pf__already{
	margin:8px 0 0 31px;font-size:.9rem;font-weight:600;
	color:var(--w-dim,rgba(20,16,13,.7));
}

.uaia-pc{
	padding:24px 22px;border-radius:var(--r-md,14px);
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.13));
	transition:transform .3s ease,border-color .3s ease;
}
.uaia-pc:hover{transform:translateY(-3px);border-color:rgba(246,240,230,.28)}
.uaia-pc h3{
	margin:0 0 6px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.1rem;color:var(--ivory,#F6F0E6);
}
.uaia-pc__you{
	margin-left:8px;padding:3px 9px;border-radius:var(--r-pill,999px);
	background:rgba(242,164,19,.2);color:var(--amber-ink,#F2A413);
	font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.uaia-pc__trade{
	margin:0 0 6px;font-size:.66rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-pc__where{margin:0 0 10px;font-size:.86rem;color:var(--dim,rgba(246,240,230,.7))}
.uaia-pc__about{margin:0 0 12px;font-size:.9rem;line-height:1.55;color:var(--dim,rgba(246,240,230,.74))}
.uaia-pc__reach{display:flex;gap:14px;margin:0}
.uaia-pc__reach a{font-size:.86rem;font-weight:600;color:var(--amber-ink,#F2A413)}

/* ============================================================================
   FUNDING DRIVES

   The bar is cleared money only. What is promised sits beside it in a quieter
   colour and is never added to it.
   ========================================================================== */
.uaia-dr{
	padding:28px 26px;border-radius:var(--r-lg,18px);
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.14));
}
.uaia-dr__title{
	margin:0 0 8px;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.02em;font-size:1.35rem;color:var(--ivory,#F6F0E6);
}
.uaia-dr__about{
	margin:0 0 20px;font-size:.95rem;line-height:1.6;
	color:var(--dim,rgba(246,240,230,.74));max-width:58ch;
}
.uaia-dr__bar{
	height:10px;border-radius:999px;overflow:hidden;
	background:rgba(246,240,230,.1);
}
.uaia-dr__bar span{
	display:block;height:100%;border-radius:999px;
	background:var(--sage,#7E9270);
	transition:width .6s ease;
}
.uaia-dr__figures{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.uaia-dr__n{
	display:block;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.03em;line-height:1;
	font-size:1.6rem;color:var(--sage-ink,#7E9270);
}
.uaia-dr__n--soft{color:var(--dimmer,rgba(246,240,230,.45))}
.uaia-dr__l{
	display:block;margin-top:4px;font-size:.66rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-dr__ends{
	margin:14px 0 0;font-size:.8rem;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink,#F2A413);
}
.uaia-dr__form{margin-top:24px;padding-top:22px;border-top:1px solid var(--line,rgba(246,240,230,.13))}
.uaia-dr__form label{color:var(--dimmer,rgba(246,240,230,.55))}
.uaia-dr__form input{
	background:var(--ink,#14100D);color:var(--ivory,#F6F0E6);
	border-color:rgba(246,240,230,.2);
}
.uaia-dr__next{
	margin-top:24px;padding:22px 24px;border-radius:var(--r-md,14px);
	background:rgba(126,146,112,.14);border-left:3px solid var(--sage,#7E9270);
}
.uaia-dr__next h4{
	margin:0 0 12px;font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.05rem;color:var(--ivory,#F6F0E6);
}
.uaia-dr__ref{
	margin:0 0 14px;font-size:.72rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-dr__ref strong{
	display:block;margin-top:5px;
	font-family:var(--font-mono,monospace);font-size:1.5rem;letter-spacing:.14em;
	color:var(--amber-ink,#F2A413);text-transform:none;
}
.uaia-dr__next ol{margin:0 0 14px 18px;padding:0;color:var(--dim,rgba(246,240,230,.8))}
.uaia-dr__next li{margin-bottom:7px;font-size:.94rem;line-height:1.55}
.uaia-dr__honest{
	margin:0;font-size:.86rem;line-height:1.55;color:var(--dimmer,rgba(246,240,230,.55));
}
.uaia-dr__tax{
	margin:20px 0 0;padding-top:16px;
	border-top:1px solid var(--line,rgba(246,240,230,.12));
	font-size:.82rem;line-height:1.55;color:var(--dimmer,rgba(246,240,230,.5));
}
.uaia-prefs__all{margin-top:26px;padding-top:22px;border-top:1px solid var(--p-line,rgba(20,16,13,.14))}

/* Attendance intent. A count, not a ticket. */
.uaia-evc__count{
	margin:10px 0 0;font-size:.72rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--sage-ink,#7E9270);
}
.uaia-evc__rsvp{margin-top:12px}
.uaia-evc__rsvp summary{
	cursor:pointer;list-style:none;display:inline-block;
	padding:9px 20px;border-radius:var(--r-pill,999px);
	background:rgba(242,164,19,.16);color:var(--amber-ink,#F2A413);
	font-size:.82rem;font-weight:600;
	transition:background .25s ease,color .25s ease;
}
.uaia-evc__rsvp summary::-webkit-details-marker{display:none}
.uaia-evc__rsvp summary:hover{background:var(--amber,#F2A413);color:var(--on-light,#14100D)}
.uaia-evc__rsvp .uaia-form{margin-top:14px}
.uaia-evc__rsvp label{color:var(--dimmer,rgba(246,240,230,.55))}
.uaia-evc__rsvp input{
	background:var(--ink,#14100D);color:var(--ivory,#F6F0E6);
	border-color:rgba(246,240,230,.2);
}
.uaia-evc__rsvp .uaia-form__submit{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.uaia-evc__rsvp .uaia-form__submit button[type=submit]{width:auto;padding:12px 24px;min-height:46px}
.uaia-evc__said{
	margin:12px 0 0;padding:11px 16px;border-radius:var(--r-md,10px);
	background:rgba(126,146,112,.18);
	font-size:.9rem;color:var(--ivory,#F6F0E6);
}

/* ============================================================================
   CONTRIBUTION

   No points, no levels, no leaderboard. The numbers are counts of real things
   and are never compared to anybody.
   ========================================================================== */
.uaia-cb{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none}
.uaia-cb li{display:block}
.uaia-cb__n{
	display:block;font-family:var(--font-display,inherit);
	font-weight:700;letter-spacing:-.04em;line-height:1;
	font-size:1.9rem;color:var(--w-sage,#7E9270);
}
.uaia-cb__l{
	display:block;margin-top:4px;max-width:14ch;
	font-size:.8rem;line-height:1.35;color:var(--w-dim,rgba(20,16,13,.7));
}
.uaia-cb__second{margin-top:32px;padding-top:24px;border-top:1px solid rgba(20,16,13,.1)}
.uaia-nd{
	display:block;padding:15px 18px;margin-top:10px;text-decoration:none;
	border-radius:var(--r-md,12px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-amber,#F2A413);
	transition:transform .25s ease,border-color .25s ease;
}
.uaia-nd:hover{transform:translateX(3px);border-left-color:var(--w-clay,#D2551F)}
.uaia-nd__kind{
	display:block;margin-bottom:4px;font-size:.62rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--w-clay,#D2551F);
}
.uaia-nd strong{display:block;font-size:.98rem;line-height:1.45;color:var(--w-ink,#14100D)}
.uaia-nd__why{
	display:block;margin-top:4px;font-size:.82rem;
	color:var(--w-dimmer,rgba(20,16,13,.5));
}

/* Cohorts. A list of names and a nudge, not a system. */
.uaia-co{
	display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:15px 18px;margin-top:11px;
	border-radius:var(--r-md,12px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-sage,#7E9270);
}
.uaia-co.is-done{opacity:.55;border-left-color:var(--w-line,rgba(20,16,13,.2))}
.uaia-co__who{margin:3px 0 0;font-size:.96rem;line-height:1.45;color:var(--w-ink,#14100D)}
.uaia-co__done{
	flex:none;font-size:.68rem;font-weight:700;
	letter-spacing:.12em;text-transform:uppercase;color:var(--w-sage,#7E9270);
}
@media(max-width:640px){
	.uaia-co{flex-direction:column;align-items:flex-start}
}

/* Household and documents. */
.uaia-hh__docs{
	margin:30px 0 8px;padding-top:24px;
	border-top:1px solid rgba(20,16,13,.1);
	font-family:var(--font-display,inherit);
	font-weight:700;font-size:1.08rem;color:var(--w-ink,#14100D);
}
.uaia-hh__group{margin-top:20px}
.uaia-hh__why{
	margin:10px 0 0;padding:10px 14px;border-radius:var(--r-md,10px);
	background:rgba(242,164,19,.12);
	font-size:.86rem;line-height:1.5;color:var(--w-dim,rgba(20,16,13,.75));
}
.uaia-arr__house{
	margin:8px 0 0;font-size:.82rem;font-weight:600;
	letter-spacing:.04em;color:var(--w-clay,#D2551F);
}

/* A chart drawn as SVG, with the figures underneath for anybody who cannot
   see it and for anybody who wants the actual number. */
.uaia-chart{margin:16px 0 0}
.uaia-chart__svg{display:block;width:100%;height:120px;color:#7E9270}
.uaia-chart__table{width:100%;margin-top:10px;border-collapse:collapse;font-size:.8rem}
.uaia-chart__table th{
	text-align:left;font-weight:600;padding:4px 8px 4px 0;
	color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-chart__table td{text-align:right;padding:4px 0;font-variant-numeric:tabular-nums}
.uaia-chart__table tr{border-bottom:1px solid rgba(20,16,13,.06)}

/* Last month's goal, at the top of this month's report. */
.uaia-rep__goal{
	margin:0 0 22px;padding:16px 20px;
	border-radius:var(--r-md,12px);
	background:rgba(242,164,19,.14);border-left:3px solid var(--w-amber,#F2A413);
}
.uaia-rep__goal p{margin:0;font-size:.98rem;line-height:1.55;color:var(--w-ink,#14100D)}
.uaia-rep__goalnote{
	margin-top:9px !important;font-size:.85rem !important;
	color:var(--w-dim,rgba(20,16,13,.7)) !important;
}

/* The handbook, and the loop. */
.uaia-hb{
	margin-top:11px;border-radius:var(--r-md,12px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	overflow:hidden;
}
.uaia-hb summary{
	cursor:pointer;list-style:none;padding:15px 18px;
	display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
}
.uaia-hb summary::-webkit-details-marker{display:none}
.uaia-hb__when{
	flex:none;font-size:.64rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--w-clay,#D2551F);
}
.uaia-hb__title{font-weight:600;font-size:1rem;color:var(--w-ink,#14100D)}
.uaia-hb__now{
	font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--w-sage,#7E9270);
}
.uaia-hb__does{margin:0 18px;padding-left:18px;color:var(--w-dim,rgba(20,16,13,.78))}
.uaia-hb__does li{margin-bottom:8px;font-size:.94rem;line-height:1.55}
.uaia-hb__hard{
	margin:14px 18px 18px;padding:12px 16px;border-radius:var(--r-md,10px);
	background:rgba(242,164,19,.14);
	font-size:.9rem;line-height:1.55;color:var(--w-ink,#14100D);
}
.uaia-hb__rule{
	padding:14px 0;border-top:1px solid rgba(20,16,13,.08);
}
.uaia-hb__ruletitle{
	margin:0 0 5px;font-weight:700;font-size:.98rem;color:var(--w-ink,#14100D);
}
.uaia-hb__rule p:last-child{
	margin:0;font-size:.92rem;line-height:1.6;color:var(--w-dim,rgba(20,16,13,.76));
}

.uaia-loop{border-left:3px solid var(--w-sage,#7E9270)}
.uaia-loop__one{
	margin:0 0 12px;padding:14px 18px;border-radius:var(--r-md,10px);
	background:rgba(126,146,112,.14);
	font-size:1rem;line-height:1.6;color:var(--w-ink,#14100D);
}
.uaia-anniv{
	margin:0 clamp(24px,3.4vw,44px) 18px;padding:12px 18px;
	border-radius:var(--r-md,10px);
	background:rgba(246,240,230,.06);
	font-size:.92rem;color:var(--w-dim,rgba(20,16,13,.75));
}

/* A member's own questions, including the ones nobody answered. */
.uaia-mq{
	padding:16px 18px;margin-top:11px;
	border-radius:var(--r-md,12px);
	background:var(--w-soft,#F6F1E8);
	border:1px solid var(--w-line,rgba(20,16,13,.12));
	border-left:3px solid var(--w-sage,#7E9270);
}
.uaia-mq--new{border-left-color:var(--w-clay,#D2551F)}
.uaia-mq--claimed{border-left-color:var(--w-amber,#F2A413)}
.uaia-mq__q{
	margin:0 0 8px;font-weight:600;font-size:.98rem;color:var(--w-ink,#14100D);
}
.uaia-mq__a{margin:0;font-size:.94rem;line-height:1.6;color:var(--w-dim,rgba(20,16,13,.8))}
.uaia-mq__state{
	margin:0;font-size:.88rem;font-style:italic;color:var(--w-dim,rgba(20,16,13,.72));
}
.uaia-mq__sorry{
	margin:8px 0 0;font-size:.84rem;line-height:1.5;color:var(--w-dimmer,rgba(20,16,13,.55));
}

/* The journal, folded away by default. */
.uaia-jr summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline}
.uaia-jr summary::-webkit-details-marker{display:none}
.uaia-jr__title{
	font-family:var(--font-display,inherit);font-weight:700;
	font-size:1.08rem;color:var(--w-ink,#14100D);
}
.uaia-jr__count{
	font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--w-dimmer,rgba(20,16,13,.45));
}
.uaia-jr__entry{
	padding:14px 0;border-top:1px solid rgba(20,16,13,.08);
	display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.uaia-jr__when{
	margin:0;font-size:.66rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--w-dimmer,rgba(20,16,13,.45));
}
.uaia-jr__text{
	margin:0;font-size:.98rem;line-height:1.65;color:var(--w-ink,#14100D);
	white-space:pre-wrap;
}
.uaia-oc{display:flex;gap:10px;flex-wrap:wrap}
.uaia-oc button{
	width:auto !important;padding:12px 22px !important;min-height:46px;
	font-size:.88rem !important;
}

/* Who is meeting you, what you kept, and the save button on a guide. */
.uaia-soft{border-left:3px solid var(--w-sage,#7E9270)}
.uaia-soft__who{display:flex;gap:16px;align-items:center;margin:4px 0 14px}
.uaia-soft__who img{
	flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;
}
.uaia-soft__name{
	margin:0;font-family:var(--font-display,inherit);font-weight:700;
	font-size:1.08rem;color:var(--w-ink,#14100D);
}
.uaia-soft__role{
	margin:2px 0 0;font-size:.8rem;letter-spacing:.04em;
	text-transform:uppercase;color:var(--w-dimmer,rgba(20,16,13,.5));
}
.uaia-kept{margin:0;padding-left:18px}
.uaia-kept li{margin-bottom:7px;font-size:.96rem;line-height:1.5}
.uaia-savebar{margin:clamp(26px,4vw,40px) 0 0}
.uaia-savebar button{
	padding:11px 20px;min-height:46px;border-radius:var(--r-pill,999px);
	background:transparent;border:1px solid var(--line,rgba(246,240,230,.3));
	color:var(--ivory,#F6F0E6);font-size:.88rem;font-weight:600;cursor:pointer;
	transition:border-color .25s ease,background .25s ease;
}
.uaia-savebar button:hover{border-color:var(--amber,#F2A413)}
.uaia-savebar button.is-on{
	background:rgba(126,146,112,.2);border-color:var(--sage,#7E9270);
}

/* The cohort, as names and nothing else. */
.uaia-coh__names{
	margin:0 0 14px;padding:14px 18px;border-radius:var(--r-md,10px);
	background:rgba(126,146,112,.14);
	font-size:1.02rem;line-height:1.6;color:var(--w-ink,#14100D);
}

/* The soft band, set by class rather than by an inline Elementor colour, so
   it follows the page between dark and light. */
.uaia-band-soft{background:var(--ink-2,#1D1815)}

/* Moved from assets/directory.css, which was never enqueued, so the
   national listings rendered with no styling at all. */
/* Listings that work from anywhere, kept visually apart from local ones. */
.uaia-dir__national{
	margin-top:clamp(30px,4vw,48px);padding-top:26px;
	border-top:1px solid var(--line,rgba(246,240,230,.14));
}
.uaia-dir__natlabel{
	margin:0 0 14px;font-size:.66rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink,#7E9270);
}
.uaia-dir__card.is-national{border-left:3px solid var(--sage,#7E9270)}
.uaia-dir__natnote{
	margin:14px 0 0;font-size:.84rem;line-height:1.55;
	color:var(--dimmer,rgba(246,240,230,.5));
}

/* ============================================================================
   THE PHOTO WALL

   Every chapter's photographs on the Gallery page. Columns rather than a
   grid, because leads upload photographs in every shape, and a grid either
   crops them or leaves ragged gaps; columns let each keep its own height.
   ========================================================================== */
.uaia-wall__head{margin-bottom:clamp(16px,2.2vw,24px)}
.uaia-wall__title{
	margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
	font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;color:var(--ivory);
}
.uaia-wall__intro{margin:8px 0 0;font-size:.98rem;line-height:1.6;color:var(--dim);max-width:56ch}

.uaia-wall__filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(16px,2.2vw,24px)}
.uaia-wall__filter button{
	padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;
	font:inherit;font-size:.86rem;font-weight:600;
	color:var(--dim);background:transparent;border:1px solid var(--line);
	transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.uaia-wall__filter button:hover{border-color:var(--amber);color:var(--ivory)}
.uaia-wall__filter button.is-on{background:var(--amber);border-color:var(--amber);color:var(--on-light)}
.uaia-wall__filter button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.uaia-wall__grid{columns:3 260px;column-gap:clamp(10px,1.4vw,14px)}
.uaia-wall__item{
	break-inside:avoid;margin:0 0 clamp(10px,1.4vw,14px);
	border-radius:var(--r-md);overflow:hidden;
	background:var(--ink-2);border:1px solid var(--line);
}
.uaia-wall__item[hidden]{display:none}
.uaia-wall__item img{display:block;width:100%;height:auto}
.uaia-wall__item figcaption{padding:10px 14px 12px;font-size:.84rem;line-height:1.5;color:var(--dim)}
.uaia-wall__item figcaption a{font-weight:600;color:var(--ivory);text-decoration:none}
.uaia-wall__item figcaption a:hover{color:var(--amber-ink)}
.uaia-wall__item figcaption span{display:block;margin-top:2px}

@media (max-width: 720px){
	body.uaia-center-mobile .uaia-wall__filter{justify-content:center}
	body.uaia-center-mobile .uaia-wall__intro{margin-inline:auto}
}

/* ============================================================================
   CHAPTER PAGES, IN THE SITE'S PAGE DESIGN

   The chapter pages now share the inner pages' language: photographs held
   inside the page margins with rounded corners, one contrasting band, cards,
   and a closing photograph. What makes a chapter page its own is what only a
   chapter has: the city's name at its largest over the chapter's own
   photograph, a small card in the corner saying where else it covers and how
   long it has been meeting, and the chapter's figures on a strip laid over
   the bottom edge of the photograph.

   Text on a photograph is always light, whatever the mode, because the
   photograph is always darkened behind it.
   ========================================================================== */

/* ---- the opening --------------------------------------------------------- */
.uaia-cp__mast{padding-block:clamp(14px,1.6vw,22px) 0;background:none;border:0;position:relative}
.uaia-cp__mastinner{display:block}
.uaia-cp__card{
	position:relative;overflow:hidden;isolation:isolate;
	display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
	gap:clamp(20px,3vw,40px);
	min-height:clamp(440px,60vh,620px);
	padding:clamp(26px,4vw,56px) clamp(26px,4vw,56px) clamp(64px,7vw,96px);
	border-radius:var(--r-lg,22px);
	background:
		radial-gradient(120% 90% at 85% 0%,rgba(242,164,19,.22),transparent 60%),
		var(--night,#0E0B09);
}
.uaia-cp__photo{
	position:absolute;inset:0;z-index:-2;
	width:100%;height:100%;object-fit:cover;display:block;
}
.uaia-cp__card::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	opacity:var(--cp-dark,.85);
	background:
		linear-gradient(90deg,rgba(20,16,13,.96) 0%,rgba(20,16,13,.78) 45%,rgba(20,16,13,.5) 100%),
		linear-gradient(0deg,rgba(20,16,13,.7) 0%,rgba(20,16,13,0) 55%);
}
.uaia-cp__mast--plain .uaia-cp__card::before{opacity:.4}
.uaia-cp__card .uaia-cp__title{color:var(--light-surface,#F6F0E6)}
.uaia-cp__card .uaia-cp__titlelead{color:rgba(246,240,230,.78)}
.uaia-cp__card .uaia-cp__city{font-size:clamp(2.8rem,8vw,5.8rem);letter-spacing:-.045em}
.uaia-cp__card .uaia-cp__note{color:rgba(246,240,230,.82)}
.uaia-cp__card .uaia-cp__ask{color:var(--light-surface,#F6F0E6)}
.uaia-cp__card .uaia-cp__ask:hover,
.uaia-cp__card .uaia-cp__ask:focus-visible{color:var(--accent-on-dark,#F2A413);box-shadow:inset 0 -1px 0 0 var(--accent-on-dark,#F2A413)}

/* The corner card: where else it covers, and since when. */
.uaia-cp__facts{
	align-self:end;max-width:300px;
	padding:16px 20px;border-radius:var(--r-md,14px);
	background:rgba(20,16,13,.5);border:1px solid rgba(246,240,230,.18);
	-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.uaia-cp__facts p{margin:0;font-size:.92rem;line-height:1.5;color:rgba(246,240,230,.86)}
.uaia-cp__facts .uaia-cp__served{padding:0;border:0;max-width:none}
.uaia-cp__facts p + p{margin-top:8px;padding-top:8px;border-top:1px solid rgba(246,240,230,.16)}
.uaia-cp__since{font-weight:600;color:var(--light-surface,#F6F0E6)}

/* ---- the figures, laid over the photograph's bottom edge ----------------- */
.uaia-cp__stats{
	position:relative;isolation:isolate;
	gap:0;background:none;border:0;
	padding-block:0!important;
}
.uaia-cp__stats::before{
	content:"";position:absolute;z-index:-1;
	inset:0 var(--cp-gutter,var(--gutter,22px));
	background:var(--ink-2,#1D1815);
	border:1px solid var(--line,rgba(246,240,230,.13));
	border-radius:var(--r-lg,22px);
	box-shadow:0 22px 48px rgba(0,0,0,.28);
}
.uaia-cp__stat{
	background:none;padding:clamp(20px,2.4vw,28px) 18px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.uaia-cp__stat + .uaia-cp__stat{border-left:1px solid var(--line,rgba(246,240,230,.13))}
.uaia-cp__statlabel{
	font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;
	color:var(--dim,rgba(246,240,230,.72));
}
.e-con:has(.uaia-cp__mast) + .e-con .uaia-cp__stats,
.uaia-cp__mast + .uaia-cp__stats{margin-top:calc(-1 * clamp(40px,5vw,60px));z-index:2}

/* ---- local knowledge, on the contrasting band ----------------------------
   The band is drawn behind the section, inset to the site's measure, and the
   section's own colours are swapped inside it, so everything that already
   reads --ivory, --dim, --line and --ink-2 follows without a rule each. */
.uaia-cp__intel{
	position:relative;isolation:isolate;
	--band-pad:clamp(26px,4vw,56px);
	padding-block:calc(var(--cp-band,48px) * .5 + var(--band-pad))!important;
	--ivory:var(--inverse-text,#14100D);
	--dim:color-mix(in srgb,var(--inverse-text,#14100D) 74%,transparent);
	--dimmer:color-mix(in srgb,var(--inverse-text,#14100D) 62%,transparent);
	--line:color-mix(in srgb,var(--inverse-text,#14100D) 14%,transparent);
	--ink-2:color-mix(in srgb,var(--inverse-text,#14100D) 5%,var(--inverse-bg,#F6F0E6));
	--amber-ink:#8A5A06;
	color:var(--inverse-text,#14100D);
}
html[data-theme="light"] .uaia-cp__intel{--amber-ink:#F2A413}
.uaia-cp__intel::before{
	content:"";position:absolute;z-index:-1;
	inset:calc(var(--cp-band,48px) * .5) var(--cp-gutter,var(--gutter,22px));
	background:var(--inverse-bg,#F6F0E6);border-radius:var(--r-lg,22px);
}
.uaia-cp__intel > *{margin-inline:var(--band-pad)}
.uaia-cp__intel .uaia-cp__panel{box-shadow:none}
.uaia-cp__intel .uaia-cp__tip{background:color-mix(in srgb,var(--amber,#F2A413) 16%,transparent)}

/* ---- businesses, as cards ------------------------------------------------ */
.uaia-cp__biz li{
	background:var(--ink-2,#1D1815);border:1px solid var(--line,rgba(246,240,230,.12));
	border-radius:var(--r-md,14px);color:var(--ivory,#F6F0E6);font-weight:500;
}
.uaia-cp__biz li:hover{background:var(--ink-2,#1D1815);border-color:var(--amber,#F2A413)}

/* ---- the close, on a photograph ------------------------------------------ */
.uaia-cp__cta.uaia-cp__cta--photo{background:none;text-align:left;border-radius:0}
.uaia-cp__cta--photo .uaia-cp__ctacard{
	position:relative;overflow:hidden;isolation:isolate;
	display:flex;align-items:flex-end;
	min-height:clamp(300px,32vw,400px);
	padding:clamp(26px,4vw,56px);
	border-radius:var(--r-lg,22px);background:var(--night,#0E0B09);
}
.uaia-cp__cta--photo .uaia-cp__ctacard::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:
		linear-gradient(90deg,rgba(20,16,13,.92) 0%,rgba(20,16,13,.7) 50%,rgba(20,16,13,.45) 100%),
		linear-gradient(0deg,rgba(20,16,13,.55) 0%,rgba(20,16,13,0) 60%);
}
.uaia-cp__cta--photo h2{margin:0 0 12px;color:var(--light-surface,#F6F0E6)}
.uaia-cp__cta--photo p{margin:0 0 24px;color:rgba(246,240,230,.84)}
.uaia-cp__cta--photo .uaia-cp__ctago{background:var(--amber,#F2A413);color:var(--on-light,#14100D)}
.uaia-cp__ctawords{max-width:36rem}

/* ---- a page that never goes blank ----------------------------------------
   Sections wait hidden until the reveal script shows them as they scroll
   into view. If that script never runs, blocked, delayed or broken, they
   would stay hidden for good; after a moment they show anyway. */
.uaia-reveal:not(.is-in){animation:uaia-reveal-late .6s ease 2.5s forwards}
@keyframes uaia-reveal-late{to{opacity:1;transform:none}}

@media (max-width: 860px){
	.uaia-cp__card{grid-template-columns:minmax(0,1fr);min-height:clamp(480px,78vh,620px)}
	.uaia-cp__facts{max-width:none}
	.uaia-cp__stat + .uaia-cp__stat{border-left:0;border-top:1px solid var(--line,rgba(246,240,230,.13))}
	.uaia-cp__stats{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width: 720px){
	body.uaia-center-mobile .uaia-cp__card{text-align:center}
	body.uaia-center-mobile .uaia-cp__card .uaia-cp__actions{justify-content:center}
	body.uaia-center-mobile .uaia-cp__facts{text-align:center}
	body.uaia-center-mobile .uaia-cp__cta--photo .uaia-cp__ctacard{justify-content:center;text-align:center}
	body.uaia-center-mobile .uaia-cp__ctawords{margin-inline:auto}
	/* A bulleted list keeps its bullets beside its words. Centred lines
	   with the bullets left at the edge read as broken. */
	body.uaia-center-mobile .uaia-cp__panel .uaia-cp__list{text-align:left}
}

/* ============================================================================
   THE CONSOLE

   One screen for everybody who runs anything: a sidebar of sections, a bar
   naming where you are, and the work itself. Laid out like the dashboard the
   client chose as the reference, in UAIA's own colours and type.

   It sets its own colours rather than inheriting the page's, because this is
   a working screen rather than part of the public site, and it must read the
   same whichever mode somebody has chosen.
   ========================================================================== */
.uaia-cn{
	--cn-bg:#F4F6F3;
	--cn-panel:#FFFFFF;
	--cn-ink:#14100D;
	--cn-dim:rgba(20,16,13,.62);
	--cn-line:rgba(20,16,13,.10);
	--cn-side:#14100D;
	--cn-side-ink:rgba(246,240,230,.72);
	--cn-side-on:#F6F0E6;
	--cn-accent:#F2A413;
	--cn-ok:#4F6B43;
	--cn-wait:#8A5A06;
	--cn-stop:#A8401A;
	--cn-r:18px;

	display:grid;grid-template-columns:270px minmax(0,1fr);
	min-height:100vh;min-height:100svh;
	background:var(--cn-bg);color:var(--cn-ink);
	font-family:var(--font-body,system-ui,sans-serif);
	margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;
}
.uaia-cn *{box-sizing:border-box}
.uaia-cn__skip{position:absolute;left:-9999px}
.uaia-cn__skip:focus{left:12px;top:12px;z-index:9;background:var(--cn-panel);padding:10px 16px;border-radius:999px}

/* ---- the sidebar --------------------------------------------------------- */
.uaia-cn__side{
	background:var(--cn-side);color:var(--cn-side-ink);
	padding:22px 16px;display:flex;flex-direction:column;gap:18px;
	position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
}
.uaia-cn__brand{padding:4px 8px 6px}
.uaia-cn__brand img{display:block;width:min(150px,100%);height:auto}
.uaia-cn__brand .uaia-logo__art--onlight{display:none}
.uaia-cn__brand .uaia-logo__art--ondark{display:block}

/* The list is long enough now to run off the bottom of the screen, so the
   list scrolls rather than the whole side: the logo stays at the top and Sign
   out stays where it can be reached. min-height is what lets a flex child be
   shorter than its own contents, and so scroll at all. */
.uaia-cn__nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.uaia-cn__nav::-webkit-scrollbar{width:6px}
.uaia-cn__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.uaia-cn__nav::-webkit-scrollbar-track{background:transparent}
.uaia-cn__navgroup{
	margin:18px 10px 8px;font-size:.68rem;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:rgba(246,240,230,.42);
}
.uaia-cn__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.uaia-cn__nav a{
	display:flex;align-items:center;gap:11px;
	padding:11px 12px;border-radius:12px;
	font-size:.93rem;font-weight:500;color:var(--cn-side-ink);text-decoration:none;
	transition:background .2s ease,color .2s ease;
}
.uaia-cn__nav a:hover{background:rgba(246,240,230,.08);color:var(--cn-side-on)}
.uaia-cn__nav a.is-on{background:var(--cn-accent);color:#14100D;font-weight:600}
.uaia-cn__icon{width:19px;height:19px;flex:none}
.uaia-cn__nav a span:not(.uaia-cn__badge){flex:1;min-width:0}
.uaia-cn__badge{
	flex:none;min-width:22px;padding:2px 7px;border-radius:999px;
	background:var(--cn-stop);color:#fff;
	font-size:.72rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;
}
.uaia-cn__nav a.is-on .uaia-cn__badge{background:#14100D;color:#F6F0E6}
.uaia-cn__out{
	display:flex;align-items:center;gap:11px;
	padding:12px;border-radius:12px;
	color:var(--cn-side-ink);text-decoration:none;font-size:.92rem;font-weight:500;
	border:1px solid rgba(246,240,230,.14);
}
.uaia-cn__out:hover{background:rgba(246,240,230,.08);color:var(--cn-side-on)}

/* ---- the bar and the work ------------------------------------------------ */
.uaia-cn__body{min-width:0;display:flex;flex-direction:column}
.uaia-cn__top{
	display:flex;align-items:center;gap:16px;
	padding:18px clamp(16px,2.4vw,30px);
	background:var(--cn-panel);border-bottom:1px solid var(--cn-line);
	position:sticky;top:0;z-index:4;
}
.uaia-cn__where{flex:1;min-width:0}
.uaia-cn__title{
	margin:0;font-family:var(--font-display,inherit);font-weight:700;
	letter-spacing:-.02em;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;color:var(--cn-ink);
}
.uaia-cn__sub{margin:2px 0 0;font-size:.88rem;color:var(--cn-dim)}
.uaia-cn__who{display:flex;align-items:center;gap:10px;flex:none}
.uaia-cn__name{font-size:.9rem;font-weight:600}
.uaia-cn__face{
	display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
	background:var(--cn-accent);color:#14100D;font-weight:700;
}
.uaia-cn__menu{display:none;background:none;border:0;padding:8px;cursor:pointer}
.uaia-cn__menu span{display:block;width:22px;height:2px;background:var(--cn-ink);position:relative}
.uaia-cn__menu span::before,.uaia-cn__menu span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--cn-ink)}
.uaia-cn__menu span::before{top:-7px}
.uaia-cn__menu span::after{top:7px}

.uaia-cn__main{
	padding:clamp(16px,2.4vw,30px);display:grid;gap:clamp(14px,1.8vw,20px);align-content:start;
	/* Capped so a line of text never runs the width of a large monitor, and so
	   the register and the panels under it share a right edge. */
	width:100%;max-width:1120px;
}

/* ---- the pieces ---------------------------------------------------------- */
.uaia-cn__panel{background:var(--cn-panel);border:1px solid var(--cn-line);border-radius:var(--cn-r);overflow:hidden}
.uaia-cn__panelhead{display:flex;align-items:center;gap:14px;padding:18px 20px 0}
.uaia-cn__paneltitle{margin:0;font-family:var(--font-display,inherit);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;flex:1}
.uaia-cn__panelgo{font-size:.86rem;font-weight:600;color:#8A5A06;text-decoration:none}
.uaia-cn__panelbody{padding:18px 20px 20px}

.uaia-cn__needs{display:grid;gap:10px}
.uaia-cn__need{
	display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
	padding:16px 18px;border-radius:14px;text-decoration:none;color:inherit;
	background:rgba(20,16,13,.03);border:1px solid var(--cn-line);border-left:4px solid var(--cn-wait);
}
.uaia-cn__need--stop{border-left-color:var(--cn-stop)}
.uaia-cn__need:hover{background:rgba(20,16,13,.05)}
.uaia-cn__needn{
	grid-row:1 / span 2;align-self:center;
	font-family:var(--font-display,inherit);font-weight:700;font-size:1.7rem;line-height:1;
	font-variant-numeric:tabular-nums;color:var(--cn-ink);
}
.uaia-cn__needwhat{font-weight:600;font-size:.98rem}
.uaia-cn__needwhy{font-size:.86rem;color:var(--cn-dim);line-height:1.5}

.uaia-cn__tablewrap{overflow-x:auto;margin:0 -20px -20px;padding:0 20px 20px}
.uaia-cn__table{width:100%;border-collapse:collapse;font-size:.9rem}
.uaia-cn__table th{
	text-align:left;padding:10px 12px;font-size:.74rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:var(--cn-dim);white-space:nowrap;
	border-bottom:1px solid var(--cn-line);
}
.uaia-cn__table td{padding:13px 12px;border-bottom:1px solid var(--cn-line);vertical-align:middle}
.uaia-cn__table tr:last-child td{border-bottom:0}
.uaia-cn__table a{color:inherit}
.uaia-cn__rowname{font-weight:600}
.uaia-cn__dim{color:var(--cn-dim)}
.uaia-cn__empty{margin:0;padding:22px 0;text-align:center;color:var(--cn-dim);font-size:.94rem}

.uaia-cn__pill{
	display:inline-block;padding:4px 11px;border-radius:999px;
	font-size:.76rem;font-weight:700;white-space:nowrap;
	background:rgba(20,16,13,.07);color:var(--cn-dim);
}
.uaia-cn__pill--ok{background:rgba(79,107,67,.14);color:var(--cn-ok)}
.uaia-cn__pill--wait{background:rgba(242,164,19,.18);color:var(--cn-wait)}
.uaia-cn__pill--stop{background:rgba(168,64,26,.14);color:var(--cn-stop)}

.uaia-cn--bare{grid-template-columns:minmax(0,1fr);place-items:center}
.uaia-cn__nothing{max-width:32rem;padding:40px;text-align:center}
.uaia-cn__nothing h2{font-family:var(--font-display,inherit);margin:0 0 10px}
.uaia-cn__nothing .uaia-cn__out{display:inline-flex;margin-top:18px;color:var(--cn-ink);border-color:var(--cn-line)}

/* The lead screens were built for the old layout and set their own width and
   background. Inside the console the panel around them does that. */
.uaia-cn__main > .uaia-lead,
.uaia-cn__main .uaia-lead__panel,
.uaia-cn__main .uaia-panel{max-width:none;margin-inline:0}

@media (max-width: 1000px){
	.uaia-cn{grid-template-columns:minmax(0,1fr)}
	.uaia-cn__menu{display:block}
	.uaia-cn__side{
		position:fixed;inset:0 auto 0 0;width:min(280px,84vw);z-index:8;
		transform:translateX(-102%);transition:transform .28s ease;
	}
	.uaia-cn.is-open .uaia-cn__side{transform:none;box-shadow:0 0 0 100vmax rgba(20,16,13,.5)}
}
@media (max-width: 640px){
	.uaia-cn__name{display:none}
	.uaia-cn__need{grid-template-columns:minmax(0,1fr)}
	.uaia-cn__needn{grid-row:auto}
}

/* ============================================================================
   THE CONSOLE, SECOND PASS

   The site's header and footer were showing above and below it, which put the
   site's logo over the console's own and offered a visitor's menu to somebody
   working. The console is the page.

   Everything is also a size smaller: the first pass was built at the sizes
   the public pages use, and a working screen holds far more on it.
   ========================================================================== */
body.uaia-console-page .uaia-header,
body.uaia-console-page .uaia-footer,
body.uaia-console-page .uaia-drawer{display:none!important}
body.uaia-console-page #uaia-main{padding:0!important;margin:0!important;max-width:none!important}
body.uaia-console-page{background:#F4F6F3}

/* Every heading inside the console is the console's, not the public page's.
   The panel headings were inheriting the site's cream heading colour, which
   on a white panel is all but invisible. */
.uaia-cn h1,.uaia-cn h2,.uaia-cn h3,.uaia-cn h4,
.uaia-cn__paneltitle,.uaia-cn__title{color:var(--cn-ink)!important}
.uaia-cn p,.uaia-cn li,.uaia-cn td,.uaia-cn th{color:inherit}
/* And every bold word. The site sets strong to ivory, which is right on the
   dark public pages and invisible on a white panel: a sentence beginning with
   a bold clause lost that clause entirely. Inheriting means a bold word in a
   quiet note stays quiet and a bold word in body text stays dark, which is
   what bold is for. */
.uaia-cn strong,.uaia-cn b{color:inherit}
.uaia-cn__side h1,.uaia-cn__side h2,.uaia-cn__side p{color:inherit!important}

/* ---- a size smaller ------------------------------------------------------ */
.uaia-cn{--cn-r:14px;grid-template-columns:238px minmax(0,1fr);font-size:15px}
.uaia-cn__side{padding:18px 12px;gap:14px}
.uaia-cn__brand{padding:2px 6px 2px}
.uaia-cn__brand img{width:min(124px,100%)}
.uaia-cn__navgroup{margin:14px 10px 6px;font-size:.64rem}
.uaia-cn__nav a{padding:9px 10px;font-size:.88rem;gap:10px;border-radius:10px}
.uaia-cn__icon{width:17px;height:17px}
.uaia-cn__out{padding:10px;font-size:.86rem}
.uaia-cn__top{padding:14px clamp(14px,2vw,24px)}
.uaia-cn__title{font-size:clamp(1.15rem,1.7vw,1.4rem)}
.uaia-cn__sub{font-size:.82rem}
.uaia-cn__face{width:32px;height:32px;font-size:.88rem}
.uaia-cn__name{font-size:.85rem}
.uaia-cn__main{padding:clamp(14px,2vw,24px);gap:clamp(12px,1.4vw,16px)}
.uaia-cn__panelhead{padding:15px 17px 0}
.uaia-cn__paneltitle{font-size:1rem}
.uaia-cn__panelbody{padding:14px 17px 17px}





/* ---- what is waiting ----------------------------------------------------- */
.uaia-cn__need{padding:13px 15px;border-radius:11px;gap:2px 12px}
.uaia-cn__needn{font-size:1.4rem}
.uaia-cn__needwhat{font-size:.92rem}
.uaia-cn__needwhy{font-size:.82rem}

/* ---- the charts ---------------------------------------------------------- */
.uaia-cn__pair{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(12px,1.4vw,16px);align-items:start}
.uaia-cn__chartwrap{margin:0}
/* The viewBox sets the shape. A fixed height with a different shape would
   stretch the labels and the rounded corners sideways. */
.uaia-cn__chart{display:block;width:100%;height:auto;overflow:visible}
.uaia-cn__grid{stroke:rgba(20,16,13,.10);stroke-width:1}
.uaia-cn__axis{fill:rgba(20,16,13,.52);font-size:11px;font-family:var(--font-body,inherit)}
.uaia-cn__bar{fill:#4F6B43;transition:fill .2s ease}
.uaia-cn__bar:hover{fill:#2F4A38}
.uaia-cn__barlabel{fill:#14100D;font-size:12px;font-weight:700;font-family:var(--font-body,inherit)}

.uaia-cn__hbars{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.uaia-cn__hbars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center}
.uaia-cn__hbarname{font-size:.86rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uaia-cn__hbarn{font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.uaia-cn__hbartrack{grid-column:1 / -1;height:7px;border-radius:999px;background:rgba(20,16,13,.07);overflow:hidden}
.uaia-cn__hbarfill{display:block;height:100%;border-radius:999px;background:#4F6B43}

.uaia-cn__figures{margin-top:12px}
.uaia-cn__figures summary{font-size:.8rem;color:var(--cn-dim);cursor:pointer}
.uaia-cn__figures table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.84rem}
.uaia-cn__figures th{text-align:left;font-weight:500;color:var(--cn-dim);padding:5px 0;border-bottom:1px solid var(--cn-line)}
.uaia-cn__figures td{text-align:right;font-variant-numeric:tabular-nums;padding:5px 0;border-bottom:1px solid var(--cn-line)}

@media (max-width: 900px){
	.uaia-cn__pair{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   THE CONSOLE, TIGHTER

   Denser again: smaller radii, less padding, a smaller base size. A working
   screen is judged by how much it shows without scrolling, not by how
   comfortable one card looks on its own.
   ========================================================================== */
.uaia-cn{--cn-r:11px;grid-template-columns:214px minmax(0,1fr);font-size:14px}
.uaia-cn__side{padding:14px 10px;gap:10px}
.uaia-cn__brand img{width:min(104px,100%)}
.uaia-cn__navgroup{margin:12px 9px 4px;font-size:.6rem;letter-spacing:.12em}
.uaia-cn__nav a{padding:7px 9px;font-size:.84rem;gap:9px;border-radius:8px}
.uaia-cn__icon{width:15px;height:15px}
.uaia-cn__badge{min-width:19px;padding:1px 6px;font-size:.68rem}
.uaia-cn__out{padding:8px 9px;font-size:.82rem;border-radius:8px}
.uaia-cn__top{padding:11px 18px}
.uaia-cn__title{font-size:1.12rem}
.uaia-cn__sub{font-size:.78rem}
.uaia-cn__face{width:28px;height:28px;font-size:.8rem}
.uaia-cn__main{padding:16px 18px;gap:12px}
.uaia-cn__panelhead{padding:13px 15px 0;gap:10px}
.uaia-cn__paneltitle{font-size:.94rem}
.uaia-cn__panelgo{font-size:.8rem}
.uaia-cn__panelbody{padding:12px 15px 14px}









.uaia-cn__need{padding:10px 13px;border-radius:9px;border-left-width:3px}
.uaia-cn__needn{font-size:1.2rem}
.uaia-cn__needwhat{font-size:.87rem}
.uaia-cn__needwhy{font-size:.78rem;line-height:1.45}
.uaia-cn__needs{gap:8px}

.uaia-cn__table{font-size:.85rem}
.uaia-cn__table th{padding:8px 10px;font-size:.68rem}
.uaia-cn__table td{padding:10px 10px}
.uaia-cn__tablewrap{margin:0 -15px -14px;padding:0 15px 14px}
.uaia-cn__pill{padding:3px 9px;font-size:.71rem}
.uaia-cn__empty{padding:16px 0;font-size:.88rem}
.uaia-cn__chart{height:auto}
.uaia-cn__hbars{gap:9px}
.uaia-cn__hbarname,.uaia-cn__hbarn{font-size:.82rem}
.uaia-cn__hbartrack{height:6px}

/* ---- forms --------------------------------------------------------------- */
.uaia-cn__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px 14px}
/* Without this a short field stretches to the height of the tallest one
   beside it, and a number box ends up as tall as a paragraph. */
.uaia-cn__field{margin:0;display:grid;gap:5px;min-width:0;align-content:start}
.uaia-cn__fields{align-items:start}
.uaia-cn__field--wide{grid-column:1 / -1}
.uaia-cn__field--check{grid-column:1 / -1;display:block}
.uaia-cn__field label{font-size:.79rem;font-weight:600;color:var(--cn-ink)}
.uaia-cn__field input[type=text],
.uaia-cn__field input[type=url],
.uaia-cn__field input[type=email],
.uaia-cn__field input[type=date],
.uaia-cn__field input[type=number],
.uaia-cn__field select,
.uaia-cn__field textarea{
	width:100%;padding:8px 11px;border-radius:8px;
	border:1px solid rgba(20,16,13,.18);background:#fff;color:var(--cn-ink);
	font:inherit;font-size:.87rem;line-height:1.5;
}
.uaia-cn__field textarea{resize:vertical;min-height:90px}
.uaia-cn__field input:focus,.uaia-cn__field select:focus,.uaia-cn__field textarea:focus{
	outline:none;border-color:var(--cn-accent);box-shadow:0 0 0 3px rgba(242,164,19,.2);
}
.uaia-cn__field--check label{display:flex;align-items:center;gap:8px;font-weight:500}
.uaia-cn__help{font-size:.75rem;color:var(--cn-dim);line-height:1.45}

.uaia-cn__formgo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:13px;border-top:1px solid var(--cn-line)}
.uaia-cn__btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:8px 16px;border:0;border-radius:8px;cursor:pointer;
	background:var(--cn-accent);color:#14100D;
	font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;
	transition:filter .2s ease;
}
.uaia-cn__btn:hover{filter:brightness(.94)}
.uaia-cn__btn--quiet{background:transparent;color:var(--cn-dim);box-shadow:inset 0 0 0 1px var(--cn-line)}
.uaia-cn__btn--quiet:hover{color:var(--cn-ink)}
.uaia-cn__btn--danger{background:transparent;color:var(--cn-stop);margin-left:auto;box-shadow:inset 0 0 0 1px rgba(168,64,26,.3)}
.uaia-cn__btn--danger:hover{background:rgba(168,64,26,.08)}

.uaia-cn__said{
	margin:0 0 12px;padding:10px 14px;border-radius:9px;
	font-size:.86rem;font-weight:600;
	background:rgba(79,107,67,.13);color:#3E5635;
}
.uaia-cn__said--stop{background:rgba(168,64,26,.12);color:#A8401A}

/* The panel's action doubles as the new record button. */
.uaia-cn__panelhead .uaia-cn__panelgo{
	padding:6px 13px;border-radius:999px;font-weight:600;
	background:var(--cn-accent);color:#14100D;
}

/* ============================================================================
   THE SCREENS THAT CAME FROM WP-ADMIN

   Eighteen screens were written for the WordPress dashboard and are now shown
   on the console where they stand, rather than rewritten. They use WordPress's
   own classes, so those classes are given the console's look here. This is a
   small, named set, not a copy of wp-admin's stylesheet, which would fight
   the console for every rule.
   ========================================================================== */
.uaia-cn__wpscreen{color:var(--cn-ink);font-size:.88rem;line-height:1.6}
.uaia-cn__wpscreen .wrap{margin:0;padding:0;max-width:none}
.uaia-cn__wpscreen h1,
.uaia-cn__wpscreen h2,
.uaia-cn__wpscreen h3{
	font-family:var(--font-display,inherit);font-weight:700;letter-spacing:-.01em;
	color:var(--cn-ink);margin:18px 0 8px;padding:0;
}
.uaia-cn__wpscreen h1{font-size:1.1rem;margin-top:0}
.uaia-cn__wpscreen h2{font-size:1rem}
.uaia-cn__wpscreen h3{font-size:.92rem}
.uaia-cn__wpscreen p{margin:0 0 10px}
.uaia-cn__wpscreen a{color:#8A5A06}
.uaia-cn__wpscreen .description{display:block;font-size:.78rem;color:var(--cn-dim);line-height:1.45;margin-top:4px}
.uaia-cn__wpscreen hr{border:0;border-top:1px solid var(--cn-line);margin:18px 0}
.uaia-cn__wpscreen code{
	background:rgba(20,16,13,.06);padding:2px 6px;border-radius:5px;
	font-size:.84em;word-break:break-all;
}

/* Tables. */
.uaia-cn__wpscreen table.widefat,
.uaia-cn__wpscreen table.wp-list-table,
.uaia-cn__wpscreen table.form-table{
	width:100%;border-collapse:collapse;border:0;box-shadow:none;background:none;margin:10px 0 16px;
}
.uaia-cn__wpscreen table th,
.uaia-cn__wpscreen table td{
	padding:9px 10px;text-align:left;vertical-align:top;
	border-bottom:1px solid var(--cn-line);background:none;
}
.uaia-cn__wpscreen table thead th{
	font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--cn-dim);white-space:nowrap;
}
.uaia-cn__wpscreen table.striped tbody tr:nth-child(odd){background:rgba(20,16,13,.02)}
.uaia-cn__wpscreen table.form-table th{width:190px;font-weight:600;font-size:.82rem}

/* Fields, matching the console's own. */
.uaia-cn__wpscreen input[type=text],
.uaia-cn__wpscreen input[type=email],
.uaia-cn__wpscreen input[type=url],
.uaia-cn__wpscreen input[type=number],
.uaia-cn__wpscreen input[type=date],
.uaia-cn__wpscreen input[type=search],
.uaia-cn__wpscreen input[type=password],
.uaia-cn__wpscreen select,
.uaia-cn__wpscreen textarea{
	padding:8px 11px;border-radius:8px;
	border:1px solid rgba(20,16,13,.18);background:#fff;color:var(--cn-ink);
	font:inherit;font-size:.87rem;line-height:1.5;max-width:100%;
}
.uaia-cn__wpscreen textarea{width:100%;resize:vertical}
/* wp-admin sizes these in columns of a fixed width font it no longer uses, so
   a card number or an address is cut off halfway. Room to read the answer. */
.uaia-cn__wpscreen input.regular-text,
.uaia-cn__wpscreen input[type=email],
.uaia-cn__wpscreen input[type=url]{width:100%;max-width:420px}
.uaia-cn__wpscreen input.small-text{width:90px}
.uaia-cn__wpscreen .widefat{max-width:100%}
.uaia-cn__wpscreen input:focus,
.uaia-cn__wpscreen select:focus,
.uaia-cn__wpscreen textarea:focus{
	outline:none;border-color:var(--cn-accent);box-shadow:0 0 0 3px rgba(242,164,19,.2);
}
.uaia-cn__wpscreen label{font-size:.84rem}

/* Buttons. */
.uaia-cn__wpscreen .button,
.uaia-cn__wpscreen .button-primary,
.uaia-cn__wpscreen input[type=submit],
.uaia-cn__wpscreen button[type=submit]{
	display:inline-flex;align-items:center;justify-content:center;
	padding:8px 16px;border:0;border-radius:8px;cursor:pointer;
	background:rgba(20,16,13,.06);color:var(--cn-ink);
	font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;
	box-shadow:inset 0 0 0 1px var(--cn-line);
	transition:filter .2s ease,background .2s ease;
}
.uaia-cn__wpscreen .button-primary,
.uaia-cn__wpscreen input[type=submit],
.uaia-cn__wpscreen button[type=submit]{background:var(--cn-accent);color:#14100D;box-shadow:none}
.uaia-cn__wpscreen .button:hover,
.uaia-cn__wpscreen .button-primary:hover,
.uaia-cn__wpscreen input[type=submit]:hover{filter:brightness(.95)}

/* Notices. */
.uaia-cn__wpscreen .notice{
	margin:0 0 12px;padding:10px 14px;border:0;border-left:3px solid var(--cn-line);
	border-radius:0 9px 9px 0;background:rgba(20,16,13,.04);box-shadow:none;
	font-size:.85rem;
}
.uaia-cn__wpscreen .notice p{margin:0}
.uaia-cn__wpscreen .notice-success{background:rgba(79,107,67,.12);border-left-color:#4F6B43;color:#3E5635}
.uaia-cn__wpscreen .notice-warning{background:rgba(242,164,19,.14);border-left-color:#8A5A06;color:#7A4F05}
.uaia-cn__wpscreen .notice-error{background:rgba(168,64,26,.11);border-left-color:#A8401A;color:#A8401A}
.uaia-cn__wpscreen .notice-success a,
.uaia-cn__wpscreen .notice-warning a,
.uaia-cn__wpscreen .notice-error a{color:inherit}

/* wp-admin hides things behind its own screen reader class. */
.uaia-cn__wpscreen .screen-reader-text{
	position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.uaia-cn__wpscreen p.submit{margin:14px 0 0;padding:0}

/* ==========================================================================
   NARROW SCREENS, SAID LAST
   The console was laid out as sidebar plus content, then tightened twice, and
   each tightening pass restated the grid: 238px and then 214px for the
   sidebar. Both came after the rule that collapses that column on a narrow
   screen, so both won, and on a phone the whole console was rendering inside
   a 214px strip with the rest of the screen empty. The sidebar itself was
   correctly hidden, which is what made it hard to see: the space it used to
   occupy was still being reserved.

   Anything about a narrow screen now lives here, after every pass, so nothing
   can quietly undo it again.
   ========================================================================== */
@media (max-width:1000px){
	.uaia-cn{grid-template-columns:minmax(0,1fr)}
	.uaia-cn__menu{display:block}
	.uaia-cn__side{
		position:fixed;inset:0 auto 0 0;width:min(280px,84vw);z-index:8;
		transform:translateX(-102%);transition:transform .28s ease;
	}
	.uaia-cn.is-open .uaia-cn__side{transform:none;box-shadow:0 0 0 100vmax rgba(20,16,13,.5)}
}

@media (max-width:640px){
	.uaia-cn__name{display:none}

	/* Six cards one per row is six screens of scrolling before the first
	   thing that needs doing. Two across, tighter, and the mark smaller. */
	.uaia-cn__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.uaia-cn__card{padding:14px;border-radius:16px}
	.uaia-cn__chip{width:34px;height:34px;border-radius:11px;margin-bottom:8px}
	.uaia-cn__chip .uaia-cn__icon{width:16px;height:16px}
	.uaia-cn__cardn{font-size:1.5rem}
	.uaia-cn__cardwhat{font-size:.8rem}
	.uaia-cn__cardnote{margin-top:6px;padding:3px 8px;font-size:.68rem}
	.uaia-cn__need{grid-template-columns:minmax(0,1fr)}
	.uaia-cn__needn{grid-row:auto}

	/* The chart keeps its proportions, so at this width it is about 100px
	   tall and its axis text renders at five pixels. Five pixel text is not
	   small, it is absent, so it goes: the bars still answer the question the
	   chart is for, which is whether the line is going up, and The figures
	   underneath gives the exact numbers to anybody who wants them. */
	.uaia-cn__axis,
	.uaia-cn__barlabel{display:none}
	.uaia-cn__figures summary{
		padding:7px 0;font-size:.86rem;font-weight:600;color:#8A5A06;
	}
}

/* ==========================================================================
   THE CARDS
   Built from the dashboard the client supplied: a tinted mark per measure,
   generous corners, a soft shadow, and a different hue for each thing being
   counted so a row is read by shape before it is read by number.

   The hues are the organisation's own rather than the reference's lilac and
   lime: amber from the logo, then clay, green, indigo and plum. Every one is
   used twice over, once at a tenth strength behind the mark and once at full
   strength for the mark itself, and every full strength value clears 5.9:1 on
   a white card, so the colour is readable rather than decorative.
   ========================================================================== */
.uaia-cn{
	--hue-amber:#8A5A06;  --wash-amber:rgba(242,164,19,.26);
	--hue-clay:#A8401A;   --wash-clay:rgba(194,80,28,.19);
	--hue-green:#3E5635;  --wash-green:rgba(79,107,67,.20);
	--hue-indigo:#2F4A6B; --wash-indigo:rgba(47,74,107,.17);
	--hue-plum:#6B3A5B;   --wash-plum:rgba(107,58,91,.17);
}

.uaia-cn__cards{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));
	gap:clamp(12px,1.4vw,18px);margin:0 0 clamp(14px,1.8vw,20px);
}

.uaia-cn__card{
	display:grid;gap:4px;align-content:start;
	padding:20px;border-radius:20px;
	background:var(--cn-panel);border:1px solid var(--cn-line);
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 8px 20px -14px rgba(20,16,13,.22);
	color:inherit;text-decoration:none;
	transition:transform .2s ease,box-shadow .2s ease;
}
a.uaia-cn__card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,16,13,.05),0 16px 30px -16px rgba(20,16,13,.3)}
a.uaia-cn__card:focus-visible{outline:2px solid var(--cn-accent);outline-offset:3px}

/* The mark, in its own colour on a wash of the same. */
.uaia-cn__chip{
	display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
	margin-bottom:10px;background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__chip .uaia-cn__icon{width:19px;height:19px}

.uaia-cn__cardn{
	font-family:var(--font-display,inherit);font-weight:700;letter-spacing:-.025em;
	font-size:clamp(1.7rem,2.4vw,2.05rem);line-height:1;
	font-variant-numeric:tabular-nums;color:var(--cn-ink);
}
.uaia-cn__cardwhat{font-size:.88rem;line-height:1.35;color:var(--cn-dim)}

/* How it moved, as a badge rather than a sentence. */
.uaia-cn__cardnote{
	justify-self:start;margin-top:8px;padding:4px 10px;border-radius:999px;
	font-size:.74rem;font-weight:700;line-height:1.3;
	background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__cardnote--up{background:var(--wash-green);color:var(--hue-green)}
.uaia-cn__cardnote--down{background:var(--wash-clay);color:var(--hue-clay)}
.uaia-cn__cardnote--wait{background:var(--wash-amber);color:var(--hue-amber)}

.uaia-cn__card--amber{--card-hue:var(--hue-amber);--card-wash:var(--wash-amber)}
.uaia-cn__card--clay{--card-hue:var(--hue-clay);--card-wash:var(--wash-clay)}
.uaia-cn__card--green{--card-hue:var(--hue-green);--card-wash:var(--wash-green)}
.uaia-cn__card--indigo{--card-hue:var(--hue-indigo);--card-wash:var(--wash-indigo)}
.uaia-cn__card--plum{--card-hue:var(--hue-plum);--card-wash:var(--wash-plum)}

/* ==========================================================================
   THE SHELL, FROM THE REFERENCE
   The supplied dashboard sits the dark sidebar as a rounded panel floating on
   a tinted page rather than running edge to edge, and gives everything on it
   generous corners. Same here, in the organisation's own warm sand instead of
   the reference's lilac.

   Said after every tightening pass, because two of those restate the grid and
   whatever comes last is what happens.
   ========================================================================== */
.uaia-cn{
	--cn-bg:#F3EEE4;
	background:var(--cn-bg);
	gap:0;
}

@media (min-width:1001px){
	.uaia-cn{
		padding:14px;gap:14px;
		grid-template-columns:214px minmax(0,1fr);
	}
	.uaia-cn__side{
		position:sticky;top:14px;height:calc(100vh - 28px);height:calc(100svh - 28px);
		border-radius:22px;padding:20px 14px;
	}
	.uaia-cn__body{
		border-radius:22px;overflow:hidden;background:var(--cn-bg);
		border:1px solid rgba(20,16,13,.06);
	}
	.uaia-cn__top{border-radius:22px 22px 0 0}
}

/* Panels pick up the same corner so nothing on the page is sharper than the
   frame around it. */
.uaia-cn__panel{border-radius:18px;box-shadow:0 1px 2px rgba(20,16,13,.04),0 8px 20px -14px rgba(20,16,13,.18)}
.uaia-cn__need{
	border-radius:16px;background:var(--cn-panel);
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 6px 16px -14px rgba(20,16,13,.3);
}
.uaia-cn__need--stop{border-left-color:var(--hue-clay)}
.uaia-cn__need--wait{border-left-color:var(--cn-accent)}
.uaia-cn__needn{color:var(--cn-ink)}

/* The lead screens were written for the public page, which is dark, and they
   bring its cream panels and its ivory button text with them. Inside the
   console they wear the console's clothes: the invite button was ivory on
   cream and could not be seen at all. */
.uaia-cn .uaia-lead__panel{
	background:var(--cn-panel);border:1px solid var(--cn-line);border-radius:18px;
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 8px 20px -14px rgba(20,16,13,.18);
	padding:20px;
}
.uaia-cn .uaia-form__submit button,
.uaia-cn .uaia-form button[type=submit]{
	background:var(--cn-accent);color:#14100D;border-radius:10px;
	min-height:0;padding:11px 22px;width:auto;
}
.uaia-cn .uaia-form__submit button:hover,
.uaia-cn .uaia-form button[type=submit]:hover{background:var(--cn-accent);filter:brightness(.95);transform:none}
.uaia-cn .uaia-form__submit button::after{display:none}
.uaia-cn .uaia-ev__kind{color:var(--hue-clay)}
.uaia-cn .uaia-tm{
	background:var(--cn-panel);border:1px solid var(--cn-line);border-radius:14px;
}

/* ==========================================================================
   THE INNER PAGES
   The chapter screens were written for the public chapter page, which is dark
   and cream, and they are driven by that page's tokens. Dropped inside the
   console they brought the whole public palette with them: cream cards
   sitting inside white panels like holes, fields the colour of the page they
   are on, and quiet text at 3.5:1.

   Rather than override the forty rules that use those tokens, the tokens
   themselves are given console values here. Every component built on them
   follows, and the public page is untouched.
   ========================================================================== */
.uaia-cn{
	--w-ink:var(--cn-ink);
	--w-dim:var(--cn-dim);
	--w-dimmer:#6B635C;          /* was .5 alpha, 3.46:1; this is 5.3:1 */
	--w-line:var(--cn-line);
	--w-soft:var(--cn-panel);    /* no cream card inside a white panel */
	--w-bg:var(--cn-bg);
	--w-clay:var(--hue-clay);
	--w-sage:var(--hue-green);
	--w-amber:var(--cn-accent);

	--p-text:var(--cn-ink);
	--p-ink:var(--cn-ink);
	--p-dim:var(--cn-dim);
	--p-dimmer:#6B635C;
	--p-line:var(--cn-line);
	--p-field:var(--cn-panel);
	--p-bg:var(--cn-panel);
	--p-amber:var(--cn-accent);
	--p-clay:var(--hue-clay);
	--p-sage:var(--hue-green);
	--p-radius:12px;
}

/* A card inside a panel is white with a hairline, the way the dashboard's
   rows are, and carries the same corner. */
.uaia-cn .uaia-ev,
.uaia-cn .uaia-q,
.uaia-cn .uaia-tm,
.uaia-cn .uaia-dir__card,
.uaia-cn .uaia-mm{
	border-radius:14px;
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 6px 16px -14px rgba(20,16,13,.3);
}

/* The site sets every h4 in small spaced capitals, which is right for its own
   section labels and wrong for an event's name: October Mixer was being shown
   as O C T O B E R  M I X E R. */
.uaia-cn h4{letter-spacing:-.01em;text-transform:none;font-family:var(--font-display,inherit)}
.uaia-cn h2,.uaia-cn h3,.uaia-cn h4{text-decoration:none}

/* Field labels in the same voice as the console's own editor: sentence case,
   quiet, close to the field. Spaced capitals read as a system shouting. */
.uaia-cn .uaia-form__field label{
	text-transform:none;letter-spacing:normal;
	font-size:.82rem;font-weight:600;color:var(--cn-ink);margin-bottom:6px;
}

/* A field as wide as the panel for a date is a date box four hundred pixels
   too wide. Short answers get short fields. */
.uaia-cn .uaia-form input[type=date],
.uaia-cn .uaia-form input[type=time],
.uaia-cn .uaia-form input[type=number]{max-width:200px}
.uaia-cn .uaia-form input[type=text],
.uaia-cn .uaia-form input[type=email],
.uaia-cn .uaia-form input[type=url],
.uaia-cn .uaia-form input[type=tel],
.uaia-cn .uaia-form select{max-width:460px}
.uaia-cn .uaia-form textarea{max-width:680px;min-height:96px}
.uaia-cn .uaia-form__field{margin-bottom:14px}

/* Claiming a question is an ordinary action on this screen, not the loudest
   thing on it, so it is quiet and the answer button stays the bright one. */
.uaia-cn .uaia-q__claim{
	background:transparent;color:var(--cn-ink);
	box-shadow:inset 0 0 0 1px rgba(20,16,13,.2);border-radius:10px;padding:8px 16px;
}
.uaia-cn .uaia-q__claim:hover{background:rgba(20,16,13,.05)}

/* The state of a question, as a quiet word rather than spaced capitals. */
.uaia-cn .uaia-q__meta{
	text-transform:none;letter-spacing:normal;font-size:.8rem;font-weight:600;gap:10px;
}
.uaia-cn .uaia-q__when{font-weight:400;color:var(--w-dimmer)}
.uaia-cn .uaia-ev__kind{
	letter-spacing:.08em;font-size:.66rem;color:var(--hue-clay);
}

/* The console's main column already spaces what is in it, so a screen that
   also carries its own margins ends up with a band of empty page between two
   panels wider than the space inside either one. */
.uaia-cn .uaia-lead__panel{margin:0}
.uaia-cn .uaia-lead{display:grid;gap:clamp(14px,1.8vw,20px)}
.uaia-cn .uaia-lead__panel + .uaia-lead__panel{margin-top:clamp(14px,1.8vw,20px)}

/* A form of short answers in one column leaves half the panel empty and
   makes a three field form as tall as the screen. Two across, with anything
   that needs the room taking the whole width. */
.uaia-cn .uaia-form{
	/* Two across rather than three: a cell has to hold a sentence, and at
	   three the answer to what the chapter is aiming at next was cut off
	   halfway through the word welcome. */
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
	gap:0 20px;align-items:start;max-width:none;
}
.uaia-cn .uaia-form__field{margin:0 0 14px;min-width:0}
.uaia-cn .uaia-form__field input:not([type=checkbox]):not([type=radio]),
.uaia-cn .uaia-form__field select,
.uaia-cn .uaia-form__field textarea{max-width:none;width:100%}
/* A tick is a tick. Given the width of the row it pushed its own label out
   of the box and off the side of the panel, because the label is a flex row
   and the box was told to take all of it. */
.uaia-cn .uaia-form__check input[type=checkbox],
.uaia-cn .uaia-form__check input[type=radio],
.uaia-cn .uaia-form__field input[type=checkbox],
.uaia-cn .uaia-form__field input[type=radio]{
	flex:none;width:19px;height:19px;min-width:19px;max-width:19px;
}
.uaia-cn .uaia-form__check label{display:flex;gap:12px;align-items:flex-start;min-width:0}
.uaia-cn .uaia-form__check{overflow:visible}
/* A box for a single digit does not need the width of a sentence. Capped
   inside its cell rather than given a cell of its own, so the labels above
   still line up across the row. */
.uaia-cn .uaia-form__field input[type=number],
.uaia-cn .uaia-form__field input[type=date],
.uaia-cn .uaia-form__field input[type=time]{max-width:180px}
/* A long answer, a note, the buttons and anything explaining the form take
   the full width rather than half of it. */
.uaia-cn .uaia-form__field:has(textarea),
.uaia-cn .uaia-form__submit,
.uaia-cn .uaia-form__privacy,
.uaia-cn .uaia-form__error,
.uaia-cn .uaia-form__check,
.uaia-cn .uaia-form__saved,
.uaia-cn .uaia-q__actions{grid-column:1 / -1}
.uaia-cn .uaia-form__submit{margin:4px 0 0}

/* ==========================================================================
   A COLOUR PER SCREEN
   Eighteen white pages in a row feel like one page that keeps changing its
   mind. Each screen now carries a hue, set on the console itself from the
   screen being shown, and everything inside it reads from that one value:
   the mark beside its name, the rule under a panel heading, the pill on a
   row, the empty state.

   One hue at a time, so the colour says which screen you are on rather than
   decorating it, and the dashboard stays the only place where several hues
   appear together, because there the colour is telling things apart.
   ========================================================================== */
/* The fallback is said first. A modifier carries the same weight as the
   plain class, so a default written underneath would win over every one of
   them and every screen would come out amber. */
.uaia-cn{--screen:var(--hue-amber);--screen-wash:var(--wash-amber)}
.uaia-cn--amber{--screen:var(--hue-amber);--screen-wash:var(--wash-amber)}
.uaia-cn--clay{--screen:var(--hue-clay);--screen-wash:var(--wash-clay)}
.uaia-cn--green{--screen:var(--hue-green);--screen-wash:var(--wash-green)}
.uaia-cn--indigo{--screen:var(--hue-indigo);--screen-wash:var(--wash-indigo)}
.uaia-cn--plum{--screen:var(--hue-plum);--screen-wash:var(--wash-plum)}

/* The mark beside the name of the screen, in the bar. */
.uaia-cn__screenmark{
	display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;
	background:var(--screen-wash);color:var(--screen);
}
.uaia-cn__screenmark .uaia-cn__icon{width:19px;height:19px}

/* A panel heading carries a short rule in the screen's colour, which gives a
   page of stacked panels a spine. */
.uaia-cn .uaia-lead__panel > h3,
.uaia-cn__panelhead h2,
.uaia-cn__paneltitle{
	position:relative;padding-left:14px;
}
.uaia-cn .uaia-lead__panel > h3::before,
.uaia-cn__panelhead h2::before,
.uaia-cn__paneltitle::before{
	content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
	border-radius:999px;background:var(--screen);
}

/* The state of a thing, as a coloured word people can find at a glance
   instead of a grey label they have to read. */
.uaia-cn .uaia-q__state{
	display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
	background:var(--wash-amber);color:var(--hue-amber);
	font-size:.74rem;font-weight:700;
}
.uaia-cn .uaia-q--new .uaia-q__state{background:var(--wash-clay);color:var(--hue-clay)}
.uaia-cn .uaia-q--claimed .uaia-q__state{background:var(--wash-indigo);color:var(--hue-indigo)}
.uaia-cn .uaia-q--answered .uaia-q__state{background:var(--wash-green);color:var(--hue-green)}
.uaia-cn .uaia-q--new{border-left-color:var(--hue-clay)}
.uaia-cn .uaia-q--answered{border-left-color:var(--hue-green)}

/* What kind of event, the same way: a tinted word rather than small capitals
   that have to be deciphered. */
.uaia-cn .uaia-ev__kind{
	display:inline-flex;align-items:center;margin-bottom:7px;
	padding:3px 10px;border-radius:999px;
	background:var(--screen-wash);color:var(--screen);
	font-size:.72rem;font-weight:700;letter-spacing:normal;text-transform:none;
}

/* An empty screen is an invitation, so it looks like one rather than like a
   missing section. */
.uaia-cn__empty{
	display:grid;justify-items:center;gap:10px;
	padding:34px 20px;text-align:center;
	color:var(--cn-dim);font-size:.92rem;line-height:1.5;
}
.uaia-cn__empty::before{
	content:"";width:46px;height:46px;border-radius:50%;
	background:var(--screen-wash);
}

/* A photograph is a card like any other row: the picture on top at a fixed
   shape, then what it shows, then the two things you can do to it. The old
   treatment hid Remove on the picture until you hovered, which on a phone
   means never, and clipped the caption against the rounded corner because
   the figure itself was the thing being rounded. */
.uaia-cn .uaia-ph{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.uaia-cn .uaia-ph__one{
	display:grid;align-content:start;overflow:visible;
	background:var(--cn-panel);border:1px solid var(--cn-line);border-radius:14px;
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 6px 16px -14px rgba(20,16,13,.3);
}
.uaia-cn .uaia-ph__one img{
	width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;
	border-radius:13px 13px 0 0;
}
.uaia-cn .uaia-ph__one figcaption{margin:0;padding:10px 12px 0;font-size:.84rem;color:var(--cn-ink)}
.uaia-cn .uaia-ph__one form{position:static}
.uaia-cn .uaia-ph__one .uaia-ev__actions{padding:8px 12px 12px;margin:0;gap:8px}
.uaia-cn .uaia-ph__one button{
	opacity:1;padding:8px 15px;border-radius:999px;
	background:transparent;color:var(--cn-dim);
	box-shadow:inset 0 0 0 1px var(--cn-line);font-size:.78rem;font-weight:600;
}
.uaia-cn .uaia-ph__one button:hover{background:var(--hue-clay);color:#fff;box-shadow:none}

/* Two notes in a row ran together as one paragraph. */
.uaia-cn .uaia-lead__note + .uaia-lead__note{margin-top:8px}
.uaia-cn .uaia-lead__note{margin-bottom:4px}

/* The thing a screen is mainly for gets the brand colour; everything else
   stays quiet, so there is one obvious next move per page. */
.uaia-cn .uaia-form__submit button,
.uaia-cn .uaia-form button[type=submit]{box-shadow:0 6px 16px -10px rgba(242,164,19,.9)}

/* ==========================================================================
   MORE THAN ONE ANSWER
   Several of the setup questions ask for a list: the school districts, the
   clinics, the employers. They were a single box with "one per line"
   underneath, which asks somebody to keep a list in their head and punctuate
   it correctly, and most people answer with one thing and move on.

   One row per answer, a cross to take one off, and Add another at the end.
   They are plain inputs and plain buttons, so the form still submits every
   row with no script at all; the script only saves having to reload the page
   to get the next box.
   ========================================================================== */
/* One answer per row, said explicitly. A grid with no template of its own
   was picking one up and laying the answers out side by side, which cut a
   school district and what to bring with it down to twenty characters. */
.uaia-rep{display:grid;grid-template-columns:1fr;gap:8px}
.uaia-rep__row{display:flex;align-items:center;gap:8px}
.uaia-rep__row input{flex:1 1 auto;min-width:0}

.uaia-rep__drop{
	flex:none;width:34px;height:34px;border:0;border-radius:10px;cursor:pointer;
	background:transparent;color:var(--cn-dim,rgba(20,16,13,.62));
	box-shadow:inset 0 0 0 1px var(--cn-line,rgba(20,16,13,.1));
	font:inherit;font-size:1.15rem;line-height:1;
	transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.uaia-rep__drop:hover{background:var(--hue-clay,#A8401A);color:#fff;box-shadow:none}
.uaia-rep__drop:focus-visible{outline:2px solid var(--cn-accent,#F2A413);outline-offset:2px}
.uaia-rep__drop[hidden]{display:none}

.uaia-rep__add{
	justify-self:start;margin-top:2px;padding:8px 15px;
	border:0;border-radius:999px;cursor:pointer;
	background:var(--screen-wash,rgba(242,164,19,.26));color:var(--screen,#8A5A06);
	box-shadow:none;font:inherit;font-size:.82rem;font-weight:700;
	transition:filter .2s ease;
}
.uaia-rep__add::before{content:"+";margin-right:7px;font-weight:700}
.uaia-rep__add:hover{filter:brightness(.94)}
.uaia-rep__add:focus-visible{outline:2px solid var(--cn-accent,#F2A413);outline-offset:2px}

/* A question that takes a list needs the width of the panel, not half of it. */
.uaia-cn .uaia-form__field:has(.uaia-rep){grid-column:1 / -1}
.uaia-cn .uaia-rep__row input{width:auto}

/* ==========================================================================
   KEYBOARD FOCUS
   Checked by walking every focusable element on every screen and reading back
   whether anything was drawn. These three were showing nothing: the menu
   button, every link in the sidebar, and the submit buttons on the screens
   that came from wp-admin. The sidebar is the main navigation, so that one
   mattered most.
   ========================================================================== */
.uaia-cn__menu:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px;border-radius:6px}
.uaia-cn__nav a:focus-visible{outline:2px solid var(--cn-accent);outline-offset:-2px;border-radius:8px}
.uaia-cn__out:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px}
.uaia-cn__skip:focus{outline:2px solid var(--cn-accent);outline-offset:2px}
.uaia-cn__wpscreen .button:focus-visible,
.uaia-cn__wpscreen .button-primary:focus-visible,
.uaia-cn__wpscreen input[type=submit]:focus-visible,
.uaia-cn__wpscreen button:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px}
.uaia-cn__rowname:focus-visible,
.uaia-cn__panelgo:focus-visible,
.uaia-cn__table a:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px;border-radius:3px}

/* Someone who has asked for less movement gets none of it. */
@media (prefers-reduced-motion:reduce){
	.uaia-cn *,
	.uaia-cn *::before,
	.uaia-cn *::after{
		animation-duration:.01ms !important;animation-iteration-count:1 !important;
		transition-duration:.01ms !important;scroll-behavior:auto !important;
	}
}

/* ==========================================================================
   A LIST ON A PHONE
   Five columns in 390px gave every cell two lines, squeezed the email to
   nothing, and still ran off the side. A chapter lead reads this on a phone,
   so below 720px the table stops being a table: each row stacks, the first
   cell is its heading, and every other cell shows the name of its column
   beside the value, the way the register reads. A cell with nothing in it is
   left out entirely rather than printed as a label with a blank after it.
   ========================================================================== */
@media (max-width:720px){
	.uaia-cn__tablewrap{overflow-x:visible;margin:0;padding:0}
	.uaia-cn__table,
	.uaia-cn__table tbody,
	.uaia-cn__table tr,
	.uaia-cn__table td{display:block;width:auto}
	.uaia-cn__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

	.uaia-cn__table tr{
		padding:14px 0;border-bottom:1px solid var(--cn-line);
	}
	.uaia-cn__table tr:last-child{border-bottom:0}

	.uaia-cn__table td{padding:0;border:0}

	/* The name of the record, as the heading of its block. */
	.uaia-cn__table td:first-child{
		font-size:1rem;font-weight:600;line-height:1.35;margin-bottom:6px;
	}

	/* Everything else: what it is, then what it says. */
	.uaia-cn__table td[data-label]{
		display:flex;align-items:baseline;justify-content:space-between;gap:14px;
		padding:3px 0;font-size:.86rem;line-height:1.45;
	}
	.uaia-cn__table td[data-label]::before{
		content:attr(data-label);
		flex:none;color:var(--cn-dim);font-size:.78rem;
	}

	/* A cell with nothing in it is left out, rather than printed as a label
	   with a blank after it. Said after the rule above, which also sets
	   display, because the two have the same weight and the later one wins. */
	.uaia-cn__table td[data-empty]{display:none}

	/* The heading and the button cannot share a line at this width without
	   the heading breaking into three. */
	.uaia-cn__panelhead{flex-wrap:wrap;row-gap:10px}
	.uaia-cn__panelhead h2{flex:1 1 100%}
}

/* ==========================================================================
   THE BOARD
   The dashboards the client chose as the reference do not put four identical
   cards in a row. They put a greeting and two or three large figures at the
   top, then a board of cards of different sizes underneath: one dark card
   holding what is still outstanding, one filled card holding the figure the
   screen is about, and the rest carrying a small picture each.

   Twelve columns, so a card can take five twelfths or seven and the board
   stops reading as a row of boxes. Below a tablet there is no twelfth of
   anything left, so a card is simply wide or it is not.

   Said after every other pass in this file, because two earlier passes
   restate the grid and whatever comes last is what happens.
   ========================================================================== */

/* ---- the greeting, and the figures beside it ----------------------------- */
.uaia-cn__hello{
	display:flex;align-items:flex-end;justify-content:space-between;
	gap:clamp(16px,2.6vw,36px);flex-wrap:wrap;
}
.uaia-cn__hellosay{min-width:0}
.uaia-cn__hellotitle{
	margin:0;font-family:var(--font-display,inherit);font-weight:800;
	font-size:clamp(1.55rem,3.3vw,2.4rem);line-height:1.04;letter-spacing:-.035em;
	color:var(--cn-ink);
}
.uaia-cn__hellosub{margin:7px 0 0;font-size:.9rem;color:var(--cn-dim)}

.uaia-cn__tally{
	display:flex;align-items:flex-end;list-style:none;margin:0;padding:0;
	gap:clamp(16px,2.6vw,34px);
}
.uaia-cn__tallyone + .uaia-cn__tallyone{
	padding-left:clamp(16px,2.6vw,34px);border-left:1px solid var(--cn-line);
}
.uaia-cn__tallyin{display:grid;gap:3px;color:inherit;text-decoration:none}
.uaia-cn__tallyn{
	font-family:var(--font-display,inherit);font-weight:800;
	font-size:clamp(1.45rem,2.5vw,2rem);line-height:1;letter-spacing:-.035em;
	font-variant-numeric:tabular-nums;color:var(--cn-ink);
}
.uaia-cn__tallylab{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--cn-dim)}
.uaia-cn__tallylab .uaia-cn__icon{width:15px;height:15px;color:var(--hue-amber)}
a.uaia-cn__tallyin:hover .uaia-cn__tallyn{color:var(--hue-amber)}

/* ---- the board ----------------------------------------------------------- */
.uaia-cn__bento{
	display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
	gap:clamp(11px,1.25vw,16px);align-items:stretch;
}

.uaia-cn__tile{
	grid-column:span var(--span,4);
	display:flex;flex-direction:column;min-width:0;
	padding:clamp(16px,1.6vw,21px);border-radius:22px;
	background:var(--cn-panel);border:1px solid var(--cn-line);color:inherit;text-decoration:none;
	box-shadow:0 1px 2px rgba(20,16,13,.04),0 10px 24px -16px rgba(20,16,13,.24);
	transition:transform .2s ease,box-shadow .2s ease;
}
a.uaia-cn__tile:hover{transform:translateY(-2px);box-shadow:0 2px 5px rgba(20,16,13,.06),0 18px 34px -18px rgba(20,16,13,.32)}

.uaia-cn__tile--amber{--card-hue:var(--hue-amber);--card-wash:var(--wash-amber)}
.uaia-cn__tile--clay{--card-hue:var(--hue-clay);--card-wash:var(--wash-clay)}
.uaia-cn__tile--green{--card-hue:var(--hue-green);--card-wash:var(--wash-green)}
.uaia-cn__tile--indigo{--card-hue:var(--hue-indigo);--card-wash:var(--wash-indigo)}
.uaia-cn__tile--plum{--card-hue:var(--hue-plum);--card-wash:var(--wash-plum)}

.uaia-cn__tilehead{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.uaia-cn__tile .uaia-cn__chip{
	flex:none;width:38px;height:38px;border-radius:13px;margin:0;
	background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__tilekick{
	flex:1;min-width:0;font-size:.87rem;font-weight:700;line-height:1.3;color:var(--cn-ink);
}
.uaia-cn__tilego{
	flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
	background:rgba(20,16,13,.055);color:var(--cn-ink);text-decoration:none;
	transition:background .2s ease,color .2s ease;
}
a.uaia-cn__tilego:hover,
a.uaia-cn__tile:hover .uaia-cn__tilego{background:var(--card-hue,var(--hue-amber));color:#FFFFFF}
.uaia-cn__arrow{width:16px;height:16px}

.uaia-cn__tilen{
	margin:0;font-family:var(--font-display,inherit);font-weight:800;
	font-size:clamp(1.8rem,2.9vw,2.5rem);line-height:1;letter-spacing:-.035em;
	font-variant-numeric:tabular-nums;color:var(--cn-ink);
}
.uaia-cn__tilesay{margin:7px 0 0;font-size:.86rem;line-height:1.45;color:var(--cn-dim);max-width:36ch}
.uaia-cn__tilenote{
	align-self:flex-start;margin:12px 0 0;padding:4px 11px;border-radius:999px;
	font-size:.75rem;font-weight:700;line-height:1.3;
	background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__tilenote--up{background:var(--wash-green);color:var(--hue-green)}
.uaia-cn__tilenote--down{background:var(--wash-clay);color:var(--hue-clay)}

/* A drawing that follows a figure sits at the foot of the card, so cards of
   unequal content line their drawings up with each other. A card whose body IS
   the content starts right under the heading instead: pushed down, a list of
   four events left a hand's width of nothing above it. */
.uaia-cn__tilebody{padding-top:15px;min-width:0}
.uaia-cn__tilehead + .uaia-cn__tilebody{padding-top:2px}
.uaia-cn__tilen + .uaia-cn__tilebody,
.uaia-cn__tilesay + .uaia-cn__tilebody,
.uaia-cn__tilenote + .uaia-cn__tilebody{margin-top:auto}

/* Two or three counts, at the foot of a card that would otherwise be a number
   and a hole. */
.uaia-cn__facts{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:7px;
}
.uaia-cn__facts li{display:grid;gap:3px;padding:11px 11px 12px;border-radius:14px;background:var(--card-wash,var(--wash-amber))}
.uaia-cn__facts b{
	font-family:var(--font-display,inherit);font-weight:800;font-size:1.2rem;
	line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
	color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__facts span{font-size:.72rem;line-height:1.3;color:var(--cn-dim)}

/* ---- the one filled card ------------------------------------------------- */
.uaia-cn__tile--fill{
	background:linear-gradient(145deg,#F8C551 0%,#F2A413 58%,#E59309 100%);
	border-color:rgba(20,16,13,.12);color:#14100D;
}
.uaia-cn__tile--fill .uaia-cn__tilekick,
.uaia-cn__tile--fill .uaia-cn__tilen{color:#14100D}
.uaia-cn__tile--fill .uaia-cn__tilesay{color:#3C2E0D}
.uaia-cn__tile--fill .uaia-cn__chip{background:rgba(20,16,13,.13);color:#14100D}
.uaia-cn__tile--fill .uaia-cn__tilego{background:#14100D;color:#F6F0E6}
.uaia-cn__tile--fill .uaia-cn__tilebody{margin-top:auto;margin-bottom:auto}
.uaia-cn__tile--fill .uaia-cn__ringtrack{stroke:rgba(20,16,13,.16)}
.uaia-cn__tile--fill .uaia-cn__ringdone{stroke:#14100D}
.uaia-cn__tile--fill .uaia-cn__ringmid i{color:#3C2E0D}
a.uaia-cn__tile--fill:hover .uaia-cn__tilego{background:#14100D;color:#F6F0E6}

/* ---- the one dark card --------------------------------------------------- */
.uaia-cn__tile--dark{background:#14100D;border-color:rgba(246,240,230,.13);color:#F6F0E6}
.uaia-cn__tile--dark .uaia-cn__tilekick,
.uaia-cn__tile--dark .uaia-cn__tilen{color:#F6F0E6}
.uaia-cn__tile--dark .uaia-cn__tilesay{color:rgba(246,240,230,.70)}
.uaia-cn__tile--dark .uaia-cn__chip{background:rgba(246,240,230,.12);color:var(--cn-accent)}
.uaia-cn__tile--dark .uaia-cn__tilego{background:rgba(246,240,230,.12);color:#F6F0E6}
a.uaia-cn__tile--dark:hover .uaia-cn__tilego{background:var(--cn-accent);color:#14100D}

/* ---- a ring, for one thing out of another -------------------------------- */
.uaia-cn__ring{position:relative;display:grid;place-items:center;width:min(170px,100%);margin:4px auto 0}
.uaia-cn__ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.uaia-cn__ringtrack{fill:none;stroke:rgba(20,16,13,.11);stroke-width:13}
.uaia-cn__ringdone{fill:none;stroke:var(--card-hue,var(--hue-amber));stroke-width:13;stroke-linecap:round}
.uaia-cn__ringmid{position:absolute;display:grid;justify-items:center;gap:3px;text-align:center;padding:0 18px}
.uaia-cn__ringmid b{
	font-family:var(--font-display,inherit);font-weight:800;font-size:1.85rem;
	line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.uaia-cn__ringmid i{font-style:normal;font-size:.75rem;line-height:1.3;color:var(--cn-dim)}

/* ---- bars, small enough to live inside a card ---------------------------- */
.uaia-cn__sparkwrap{min-width:0}
.uaia-cn__spark{display:flex;align-items:flex-end;gap:clamp(4px,.9vw,9px);height:clamp(76px,8.5vw,102px)}
.uaia-cn__sparkbar{
	flex:1;min-width:0;height:var(--h,4%);border-radius:7px;
	background:var(--card-hue,var(--hue-amber));opacity:.3;
}
.uaia-cn__sparkbar.is-now{opacity:1}
.uaia-cn__sparkfoot{display:flex;justify-content:space-between;margin:9px 0 0;font-size:.74rem;color:var(--cn-dim)}

/* The bars on a tile take the tile's colour, and so does the ranked list that
   used to be green whatever card it sat on. */
.uaia-cn__tile .uaia-cn__hbarfill{background:var(--card-hue,var(--hue-amber))}

/* ---- what is in the diary ------------------------------------------------ */
.uaia-cn__agenda{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.uaia-cn__agin{
	display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
	padding:8px 9px;border-radius:14px;color:inherit;text-decoration:none;
	transition:background .2s ease;
}
a.uaia-cn__agin:hover{background:rgba(20,16,13,.045)}
.uaia-cn__agday{
	display:grid;place-items:center;width:46px;padding:7px 0;border-radius:13px;line-height:1;
	background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
}
.uaia-cn__agday b{font-family:var(--font-display,inherit);font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.uaia-cn__agday i{font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:4px}
.uaia-cn__agwhat{min-width:0}
.uaia-cn__agname{display:block;font-weight:600;font-size:.92rem;line-height:1.3;color:var(--cn-ink)}
.uaia-cn__agwhen{display:block;margin-top:2px;font-size:.78rem;line-height:1.4;color:var(--cn-dim)}
.uaia-cn__agn{
	flex:none;min-width:28px;padding:4px 9px;border-radius:999px;text-align:center;
	background:var(--card-wash,var(--wash-amber));color:var(--card-hue,var(--hue-amber));
	font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}

/* ---- what is still outstanding, on the dark card ------------------------- */
.uaia-cn__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.uaia-cn__listin{
	display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
	padding:10px 11px;border-radius:14px;color:inherit;text-decoration:none;
	transition:background .2s ease;
}
a.uaia-cn__listin:hover{background:rgba(246,240,230,.075)}
.uaia-cn__listmark{
	display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;
	background:rgba(246,240,230,.10);color:#F6F0E6;
}
.uaia-cn__listrow--stop .uaia-cn__listmark{background:rgba(242,164,19,.22);color:var(--cn-accent)}
.uaia-cn__listwhat{min-width:0}
.uaia-cn__listname{display:block;font-weight:600;font-size:.91rem;line-height:1.35;color:#F6F0E6}
.uaia-cn__listwhy{display:block;margin-top:3px;font-size:.78rem;line-height:1.5;color:rgba(246,240,230,.68)}
.uaia-cn__listn{
	flex:none;min-width:30px;padding:5px 10px;border-radius:999px;text-align:center;
	background:rgba(246,240,230,.13);color:#F6F0E6;
	font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.uaia-cn__listrow--stop .uaia-cn__listn{background:var(--cn-accent);color:#14100D}
.uaia-cn__empty--dark{color:rgba(246,240,230,.68)}

/* ---- a photograph as the whole of a card --------------------------------- */
.uaia-cn__shot{
	position:relative;margin:0;border-radius:16px;overflow:hidden;
	aspect-ratio:16 / 10;background:rgba(20,16,13,.05);
}
.uaia-cn__shot img{display:block;width:100%;height:100%;object-fit:cover}
.uaia-cn__shotsay{
	position:absolute;left:8px;right:8px;bottom:8px;display:grid;gap:2px;
	padding:8px 11px;border-radius:12px;background:rgba(20,16,13,.80);color:#F6F0E6;
}
.uaia-cn__shotsay b{
	font-size:.82rem;font-weight:600;line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.uaia-cn__shotsay i{font-style:normal;font-size:.72rem;color:rgba(246,240,230,.74)}

/* Said for anybody who cannot see the arrow, and nobody else. */
.uaia-cn__sr{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- the keyboard -------------------------------------------------------- */
.uaia-cn__tallyin:focus-visible,
a.uaia-cn__tile:focus-visible,
.uaia-cn__tilego:focus-visible,
.uaia-cn__agin:focus-visible,
.uaia-cn__listin:focus-visible{outline:2px solid var(--cn-accent);outline-offset:3px}
.uaia-cn__tile--fill a:focus-visible,
.uaia-cn__tile--fill.uaia-cn__tile--open:focus-visible{outline-color:#14100D}

@media (prefers-reduced-motion:reduce){
	.uaia-cn__tile,a.uaia-cn__tile:hover{transition:none;transform:none}
}

/* ==========================================================================
   THE BOARD ON A SMALLER SCREEN, SAID LAST
   A tablet cannot carry twelve columns, and a board where a wide card leaves
   half a row empty beside it is worse than one where every card is the same
   width. Two equal columns there, one on a phone.
   ========================================================================== */
@media (max-width:980px){
	.uaia-cn__bento{grid-template-columns:repeat(2,minmax(0,1fr))}
	.uaia-cn__tile{grid-column:span 1}
}

@media (max-width:620px){
	.uaia-cn__bento{grid-template-columns:minmax(0,1fr)}
	.uaia-cn__tile{grid-column:span 1}

	.uaia-cn__hello{align-items:flex-start;gap:16px}
	.uaia-cn__tally{gap:14px;flex-wrap:wrap}
	.uaia-cn__tallyone + .uaia-cn__tallyone{padding-left:14px}
	.uaia-cn__tilesay{max-width:none}
	.uaia-cn__listin,
	.uaia-cn__agin{gap:10px;padding:9px 8px}
}