/* ---------------------------------------------------------------------------
 * AWTW Core — the rules the theme used to own.
 *
 * Bulma and themes/advocates/style.css both disappear at theme switch, and
 * every rule in here is load-bearing. Values are the theme's own; the two
 * offsets marked DERIVED differ because the theme's header is position:fixed
 * and out of flow while Elementor's is in flow. See BILLBOARD-SPEC.md.
 *
 * Paths are relative to this file, so the watermark resolves wherever the
 * plugin is installed.
 * ------------------------------------------------------------------------- */

/* ------------------------------------------------------------ body ground
 *
 * HOME-SPEC.md records "Body background | #333333" and it was never applied,
 * so staging rendered white below the footer where live continues in charcoal.
 * Only visible on a page short enough that the footer does not reach the
 * bottom of the viewport, which is why it survived every earlier check - and
 * why the client spotted it before the tooling did.
 *
 * Set here rather than in the global kit: writing background_background and
 * background_color into the kit's page settings does not emit a body rule at
 * all - the regenerated kit CSS contains no background-color - so the kit is
 * the wrong lever for this.
 *
 * Safe because every section band carries its own white background, which is
 * exactly how the theme worked.
 * ------------------------------------------------------------------------- */

/* It goes on `html`, not `body`, and that distinction is the whole thing.
 *
 * Live shows charcoal BELOW the footer but the header still reads as light
 * grey - and the header is translucent, rgba(193,194,193,0.8), so it takes its
 * tone from whatever is behind it. Putting the charcoal on `body` satisfied the
 * first half and broke the second: the bar went noticeably darker than live's.
 *
 * So the charcoal is behind the document, and `body` stays white. `body` only
 * grows to the height of its content, so the charcoal shows through below the
 * footer on a short page, while the white `body` sits behind the header. Both
 * halves match.
 *
 * !important because this stylesheet is enqueued without a declared dependency
 * on Elementor's kit CSS, which loads afterwards and wins at equal specificity.
 * Verified: the rule was being served and simply losing the cascade.
 */
html {
	background-color: #333333 !important;
}

body {
	background-color: #FFFFFF !important;
}

/* ------------------------------------------------------------ header bar
 *
 * The theme has TWO numbers here and the rebuild had been deriving everything
 * from one of them, which put every title page's content 22px too low. Found
 * by the full-site visual diff on 2026-09-04; verify.py cannot see 22px.
 *
 *   .top-bar      { position: fixed; height: 115px; overflow: visible; }
 *   .main-content { margin-top: 100px; }
 *
 * 115 is what the BAR LOOKS LIKE. 100 is where CONTENT STARTS. They differ on
 * purpose: the bar is rgba(193,194,193,0.8) at z-index 20, so live deliberately
 * overlaps the top 15px of the content area with a translucent band. Live's own
 * inner .container is 122px inside that 115px bar and simply overflows it -
 * which is why `height` is the right control and `min_height` is not: Elementor
 * min-height does not clamp, so the band grew to its content's 122px and pushed
 * everything down 7px. The other 15px was the overlap, never replicated.
 *
 * Both rules also land on the sticky SPACER, which Elementor clones from this
 * container with the same classes - that clone is what actually occupies flow.
 * The negative margin-bottom takes its 115px contribution down to live's 100px,
 * so `.awtw-header` renders 115 tall while the document is offset by 100.
 *
 * Every offset below is derived from the 100, NOT from the 115.
 */
/* `.awtw-header.e-con`, and both halves of that selector are load-bearing.
 *
 * Elementor's frontend.min.css carries, in ONE rule:
 *
 *     .e-con { --height: auto; height: var(--height); min-height: var(--min-height) }
 *
 * so it both reads the custom property and supplies its own `auto` default. A
 * plain `.awtw-header { --height: 115px }` is specificity 0,1,0 - identical to
 * `.e-con` - and awtw.css is enqueued without a dependency on Elementor's CSS,
 * so Elementor loads afterwards and wins on order. Measured: the declaration
 * was served correctly and `--height` still computed to `auto`, leaving the bar
 * at its content's 122px. Two classes beats one, which is also why the spacer
 * rule below worked first time while this one did not.
 *
 * Setting the property Elementor's own rule reads, rather than `height`
 * directly, keeps this working with the framework instead of against it - and
 * needs no !important. */
/* BOTH OF THESE ARE DESKTOP-ONLY NUMBERS, and shipping them unscoped is what
 * broke mobile.
 *
 * 115px is live's .top-bar height at DESKTOP. Below 900px live's bar is 67px
 * and its right-hand column is off-canvas, so nothing has to fit. Staging's
 * header still stacked all six widgets vertically - tagline, logo, social,
 * search, Donate, menu - which needs 316px, and `overflow: visible` then did
 * exactly what it says: measured at 390px, the search form landed at y=169 and
 * the menu at y=273, both on top of the page's own content. That is the search
 * box sitting across the "CONTACT" heading and the hamburger floating in the
 * first paragraph.
 *
 * 900px, not Elementor's 767px: live switches at `max-width: 900px` in
 * themes/advocates/style.css, and matching the reference's breakpoint matters
 * more than matching the framework's. Done in CSS rather than by moving
 * Elementor's own breakpoint, because `viewport_md` also drives every grid's
 * mobile column count - Bulma stacks at 769px, so widening Elementor's mobile
 * band to 900 would collapse every multi-column row 130px too early.
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 901px) {
	.awtw-header.e-con {
		--height: 115px;       /* live's .top-bar height, exactly */
		min-height: 115px;     /* the floor the template used to carry as min_height */
		overflow: visible;     /* its 122px of content spills, exactly as live's does */
	}

	.awtw-header.elementor-sticky__spacer {
		margin-bottom: -15px;  /* 115 bar - 15 = live's 100px content offset */
	}
}

/* ---------------------------------------------------- the header below 900px
 *
 * Live, measured at a 390px viewport (375px of content):
 *
 *   .top-bar          67px tall, still rgba(193,194,193,0.8)
 *   .top-bar__tagline display: none
 *   .branding         y=7  x=21  200x39, max-width 200px, margin-left 14px
 *   .branding img     y=28 x=21  200x12, margin-top 21px
 *   .menu-toggle      y=14 x=325 36x42, fixed top/right 14px, 28px, #000
 *   .mobile-shelf     fixed, left:-250px, 250px wide, full height, opaque
 *   .main-content     margin-top: 100px - UNCHANGED from desktop
 *
 * That last line is the odd one and it is real: live keeps content at 100px
 * while shrinking the bar to 67, so there is 33px of white between the two.
 * The bar is `position: fixed` on live, so its height and the content offset
 * are independent; ours is a sticky bar whose spacer occupies the flow, which
 * is why the spacer needs +33px here where desktop needs -15px. Both arrive at
 * live's 100px from a different direction.
 *
 * The utility row and the nav row are hidden rather than moved: their content
 * exists a second time inside the off-canvas panel, which is what live's shelf
 * holds. See the note on search_widget() in build_header_footer.py.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
	.awtw-header.e-con {
		--height: 67px;
		min-height: 67px;
		overflow: visible;
	}

	.awtw-header.elementor-sticky__spacer {
		margin-bottom: 33px;   /* 67 bar + 33 = live's 100px content offset */
	}

	/* The 12-column grid becomes a row: logo left, burger right, which is where
	 * live puts them. Elementor's own mobile column count would stack them, and
	 * that is a 1-column grid at 767px anyway - not live's 900. */
	.awtw-header-grid.e-con {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	/* Two classes on the two that are CONTAINERS. `.awtw-utility` alone is
	 * (0,1,0) and ties with Elementor's own `.e-con { display: flex }`, which
	 * loads later and wins - measured, both still computed `display: flex`
	 * inside this very media query while the tagline next to them went to
	 * `none` correctly, because a widget is not an `.e-con`. Third time this
	 * exact trap has cost a fix; see `.awtw-header.e-con` above. */
	.awtw-tagline {
		display: none;
	}

	.awtw-utility.e-con,
	.awtw-navrow.e-con {
		display: none;
	}

	/* flex: 0 0 200px, not just max-width. The header grid is a flex row here
	 * and the branding is a flex ITEM, so it shrank to 181px to make room for
	 * the burger beside it and took the logo down with it - live's is a flat
	 * 200. Same lesson as the desktop utility row: in a flex row the widths
	 * have to be pinned, not merely capped. */
	.awtw-branding.e-con {
		max-width: 200px;
		padding: 0;
		margin-left: 14px;
	}

	/* The child selector, because two classes were not enough AGAIN: with
	 * `.awtw-branding.e-con { flex: 0 0 200px }` the computed value came back
	 * `0 1 auto`, so something in Elementor's own container CSS outranks
	 * (0,2,0) here. Measured consequence: the column shrank to 181px to make
	 * room for the burger and the 200px logo shrank with it. Specificity
	 * (0,4,0) settles it without !important. */
	.awtw-header-grid.e-con > .awtw-branding.e-con {
		flex: 0 0 200px;
	}

	/* Live's logo is a flat 200px wide here - `.top-bar .branding` caps the
	 * wrapper at 200 and the 250px image fills it. Stated on the image too,
	 * because the widget carries `width: 250px` from the template and the
	 * container cap alone left it at 181. */
	.awtw-logo img {
		width: 200px;
		max-width: 200px;
		height: auto;
		margin-top: 21px;
	}

	/* 7px, not 14: the header band already contributes 7px of padding on that
	 * side, and live's toggle sits 14px from the edge in total. */
	/* FIXED, at live's own coordinates. It was in the header's flex row,
	 * which put it at x=221 y=7 once the panel opened - inside the panel's
	 * 250px and underneath the overlay, so it was neither visible nor
	 * clickable and there was no way to close the menu but the Esc key.
	 *
	 * Live's is `position: fixed; top: 1rem; right: 1rem; z-index: 9999`,
	 * deliberately OUTSIDE `.top-bar`, so it survives the overlay and stays
	 * put. Ours needs the same, and the z-index has to clear Elementor's
	 * off-canvas, which sits at 2147483630 - hence the otherwise absurd
	 * number. The 42px line-height centres the 28px glyph in live's 36x42
	 * tap target, which lands its top at y=21 as measured. */
	.awtw-burger {
		display: block;
	}

	/* `.awtw-burger.elementor-widget`, because one class is not enough AGAIN.
	 * Elementor's own widget rule sets `position: relative` at (0,1,0), ties
	 * with a lone `.awtw-burger`, and loads afterwards. Measured: `position`
	 * computed `relative` while the declaration was being served, so `top` and
	 * `right` became relative OFFSETS - the button ended up at x=207 with its
	 * glyph 36px from the viewport edge instead of live's 14. Fifth time this
	 * shape of cascade fight has cost a fix. */
	.awtw-burger.elementor-widget {
		position: fixed;
		top: 14px;
		right: 14px;
		margin: 0;
		/* Clears Elementor's off-canvas, which sits at 2147483630 - hence the
		 * otherwise absurd number. Live's own toggle only needs 9999 because
		 * it is a child of <body>; ours shares the header's stacking context
		 * with the panel, so it has to outrank it directly. */
		z-index: 2147483631;
	}

	.awtw-burger-x { display: none; }

	/* THE GLYPH SWAP, keyed off <body>.
	 *
	 * Elementor's sticky header CLONES the whole thing to make its spacer, so
	 * the document holds TWO burgers and TWO panels - verified, 2 of each - and
	 * either panel may be the one that opens. A sibling selector on the panel's
	 * own `aria-hidden` would therefore only reach one of the two burgers. The
	 * `e-off-canvas__no-scroll` class that `prevent_scroll` puts on <body>
	 * says "a panel is open" without caring which, so both burgers respond.
	 *
	 * White, because live's toggle goes white over its 85%-black overlay. */
	body.e-off-canvas__no-scroll .awtw-burger-bars { display: none; }
	body.e-off-canvas__no-scroll .awtw-burger-x { display: block; }

	/* Live: `<a class="menu-toggle">` is 36x42 at x=325 - its right edge 14px
	 * off the viewport - holding a 28px glyph that sits 7px down inside it, so
	 * the glyph itself lands at y=21. The widget spans the flex row's leftover
	 * width, so the glyph is pushed right rather than the box being shrunk. */
	.awtw-burger .elementor-icon-wrapper {
		text-align: right;
		line-height: 0;
	}

	/* live's tap target is 36x42 around a 28px glyph, which puts the glyph's
	 * top at y=21 with the anchor at y=14. A 42px line-height does NOT do
	 * that: the SVG is a block, so line-height leaves it at the top of the box
	 * and it measured y=14. Centring it explicitly gives live's 21. */
	.awtw-burger .elementor-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 42px;
		font-size: 28px;
		line-height: 1;
	}

	/* 36 wide for a 28px-tall glyph, which looks odd written down but is live's:
	 * its `<i>` carries `zmdi-hc-fw` (fixed width), so the tap target is 36x42
	 * around a 28px mark. Matching the box keeps the touch area the same size
	 * as live's rather than 8px narrower. */
	.awtw-burger .elementor-icon svg {
		width: 36px;
		height: 28px;
		fill: #000000;
	}
}

/* The burger exists at every width and is only wanted below live's 900. Kept
 * out of the media query above so there is exactly one rule saying when it
 * shows, rather than a default that another stylesheet could win against. */
@media screen and (min-width: 901px) {
	.awtw-burger {
		display: none;
	}
}

/* ONE burger, not two. Elementor's sticky header clones the container to build
 * its spacer, and the clone is what occupies the flow - so every header widget
 * exists twice in the document. That was invisible while the burger was in
 * flow inside a hidden row, but two `position: fixed` buttons would stack on
 * the same 36x42 spot: one visible button, two tap targets, and the second one
 * pointing at a duplicate element id.
 *
 *
 * The selector is doubled to reach (0,3,0). The rule that SHOWS the X is
 * `body.e-off-canvas__no-scroll .awtw-burger-x`, which is (0,2,1) because
 * `body` is an element, and a plain `.elementor-sticky__spacer .awtw-burger`
 * at (0,2,0) loses to it - measured, two X buttons visible at once. */
.elementor-sticky__spacer.elementor-sticky__spacer .awtw-burger {
	display: none;
}

/* --------------------------------------- the shelf's slide: NOT REPRODUCED
 *
 * Live's shelf slides in: `.mobile-shelf { transition: .2s linear }` with
 * `.menu-open` translating it into view. Staging's panel appears instantly,
 * and this records why, so the next attempt does not repeat mine.
 *
 * Elementor's off-canvas has no slide of its own. With `entrance_animation`
 * empty it marks the panel `no-animation` and runs a 1ms opacity/visibility
 * flip; that is the working, instant behaviour shipping now.
 *
 * THREE ways to add a slide were tried and all three left the panel PARKED
 * OFF SCREEN, which is worse than instant because the menu becomes unusable:
 *
 *   1. `entrance_animation: slideInLeft` on the widget - the panel stayed at
 *      translateX(-100%), measured at x=-386.
 *   2. A transform transition on `.e-off-canvas__content` keyed off
 *      `[aria-hidden]` - the transition never advanced. The panel starts life
 *      inside a hidden, `inert` subtree, and with aria-hidden already `false`,
 *      no rule matching and no inline style, the computed transform was still
 *      matrix(1,0,0,1,-250,0).
 *   3. A keyframe animation, first on `__content` and then on `__main` where
 *      Elementor animates - both held the `from` state indefinitely, at 0%
 *      progress, at 80ms and 220ms and one second in.
 *
 * CAVEAT worth knowing before trying again: all of that was measured inside a
 * same-origin iframe, and Chrome throttles animation ticks in iframes. The
 * animations may well run for a real visitor. It was not shipped because an
 * unverifiable animation whose failure mode is an unusable menu is a bad
 * trade, not because it is proven impossible.
 *
 * The likeliest real fix is to stop fighting the state machine: move the
 * off-canvas widget OUT of the sticky header - Elementor clones that header to
 * build its spacer, so the panel exists twice and either copy may be the one
 * that opens - and drive the transform from the `e-off-canvas__no-scroll`
 * body class, which is the one hook that fires reliably.
 * ------------------------------------------------------------------------- */


/* The shelf's own submenus. Live's `.main-menu .sub-menu` inside the shelf is
 * `position: static; opacity: 1; visibility: visible; transform: none` with
 * `padding: .5rem 0` - i.e. every submenu is ALREADY OPEN in the panel rather
 * than waiting for a hover that a touch screen cannot produce. Elementor's
 * vertical nav-menu keeps them as hover dropdowns, so they are unfolded here.
 * Live's indents: `margin: 0 1.5rem` plus `padding: 0 .75rem` on the links,
 * against the 14px root - 21px and 10.5px. */
/* Three classes, and `display` is the one that matters.
 *
 * The first attempt set position/opacity/visibility and no `display` at all,
 * so the submenus stayed at Elementor's `display: none` and the panel showed
 * six links where live shows all of them. `position: static` was losing too:
 * Elementor's own `.elementor-nav-menu--main .elementor-nav-menu--dropdown` is
 * (0,2,0), the same as a two-class rule here, and it loads afterwards.
 *
 * !important on `display` only. Elementor's vertical menu is driven by
 * SmartMenus, which collapses a submenu by writing `display: none` as an
 * INLINE style - and no selector outranks an inline style. Live's shelf has
 * every submenu permanently open, so the collapse has to be unavailable rather
 * than merely overridden. The other declarations need no !important and do not
 * get it. */
.awtw-nav-shelf .elementor-nav-menu .elementor-nav-menu--dropdown,
.awtw-nav-shelf .elementor-nav-menu .sub-menu {
	display: block !important;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	width: 100%;
	padding: 7px 0;
	background-color: transparent;
	box-shadow: none;
}

/* Live's shelf indents its submenu links `margin: 0 1.5rem` plus
 * `padding: 0 .75rem` - 21px and 10.5px against the 14px root. The COLOUR is
 * not here: it is a setting on the shelf's own nav widget, which is where
 * Elementor will actually let it win. */
.awtw-nav-shelf .elementor-nav-menu .sub-menu a {
	margin: 0 21px;
	padding: 0 10.5px;
	text-align: left;
}

/* Bulma's paragraph rhythm is `p:not(:last-child) { margin-bottom: 1em }` - the
 * LAST paragraph in a block gets nothing. Elementor's kit emits a plain
 * `p { margin-block-end: 1em }`, which includes the last one, so every content
 * block ran one paragraph-margin tall. On a news card that is the whole
 * difference: live's card-content is 389px (21 + 95 + 21 + 231 + 21) and
 * staging's was 412.
 *
 * Restoring the `:last-child` exemption rather than removing the kit's spacing,
 * because the kit value is right for every paragraph except the final one. */
/* EVERY RULE BELOW THAT NAMES THE POST-CONTENT WIDGET ALSO NAMES `.content`.
 *
 * These were scoped to `.elementor-widget-theme-post-content` because that was
 * the only place a page body lived. It is not any more: the single-page
 * template now renders live's entry-content partial through a shortcode, so
 * the body sits in `.columns > .column.is-12 > .content`, exactly as live's
 * does - and the widget class stops matching.
 *
 * Measured consequence when it stopped: /law-clerks-interns/ went from 19.2%
 * to 61.7% and /chronology-of-success-2018/ from 11.1% to 50.4%, because their
 * lists and figures silently lost every rule here. A template change moved the
 * markup out from under a selector, which is a failure mode worth naming: the
 * rules were still being served and still correct, and simply no longer
 * applied to anything.
 *
 * `.content` is live's own hook - these ARE Bulma's `.content ul` and friends -
 * so naming it is the more faithful selector. The widget class stays alongside
 * for the templates that still use the widget directly.
 * ------------------------------------------------------------------------- */

.content p:last-child,
.card-content .content p:last-child,
.elementor-widget-theme-post-content p:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------- lists in page content
 *
 * Bulma gave every list in `.content` a 1em vertical rhythm and a 2em indent,
 * with NO padding-left - the marker hangs off the margin. Elementor's reset
 * zeroes the margins and uses a 40px padding-left instead, so every list sat
 * 15.4px tight top and bottom and 10px too far right.
 *
 * Measured on live, /chronology-of-success-2018/: ul margin 15.4/15.4,
 * padding-left 0, li left edge x=407 against a content column starting at 377
 * - i.e. 1em top and bottom, 2em of left margin, at the list's own 15.4px.
 *
 * The compounding matters more than the 15px: this page has one list per
 * month, so the shortfall accumulated to 42px by December.
 *
 * Scoped to the post-content widget so it cannot reach Elementor's own menus,
 * which are also `ul` and are laid out by their widget.
 * ------------------------------------------------------------------------- */

.content ul,
.content ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol{
	margin: 1em 0 1em 2em;
	padding-left: 0;
}

.content ul,
.elementor-widget-theme-post-content ul{ list-style: disc outside; }
.content ol,
.elementor-widget-theme-post-content ol{ list-style: decimal outside; }
.content li,
.elementor-widget-theme-post-content li{ margin: 0; }

/* Figures in page content. Live: `margin: 7.7px 0 7.7px 15.4px` on a
 * right-floated `display:table` figure - i.e. 0.5em top and bottom, 1em on the
 * inner side, at the figure's own 15.4px. Elementor's reset gives 0 top and
 * 15.4px bottom: the same TOTAL, but all of it on one side, so it collapses
 * against neighbouring margins differently and each image drifts a few px.
 * Written in em so it tracks the size the way live's does. `aligncenter` was
 * not observed on the pages measured, so it is left alone deliberately. */
/* Only the FLOATED figures take the vertical rhythm. Measured on live: an
 * `alignright` figure on /chronology-of-success-2018/ has
 * `margin: 7.7px 0 7.7px 15.4px`, but a plain `wp-block-image` on
 * /featured-artists-program/ has `margin-top: 0` and sits flush under the
 * heading at y=197.
 *
 * Applying .5em to every figure put 7.7px above the first block on any page
 * whose content opens with a full-width image - which is exactly 8px, the
 * offset that made /featured-artists-program/ and /2024-recognition-list/
 * pixel-identical to live except for being 8px low. */
.content figure.alignright,
.content figure.alignleft,
.elementor-widget-theme-post-content figure.alignright,
.elementor-widget-theme-post-content figure.alignleft{
	margin-top: .5em;
	margin-bottom: .5em;
}

.content figure.alignright,
.elementor-widget-theme-post-content figure.alignright{
	float: right;
	margin-left: 1em;
	margin-right: 0;
}

.content figure.alignleft,
.elementor-widget-theme-post-content figure.alignleft{
	float: left;
	margin-right: 1em;
	margin-left: 0;
}

/* ------------------------------------------------- header search + nav state
 *
 * Two differences measured in the header on 2026-09-05, both on every page.
 *
 * 1. THE SEARCH BOX. Live is a 1px black outline on a transparent fill - the
 *    border sits on `div.search-field-group`, NOT on the input, which is why
 *    the generator's border settings (which Elementor applies to the input)
 *    produced nothing. Elementor's own container ships a #f1f2f3 fill.
 *
 * 2. THE ANCESTOR NAV ITEM. Live highlights the whole trail: on /videos/, which
 *    lives under Happenings, live paints "HAPPENINGS" #7E8279 with black text.
 *    Elementor only marks the exact current item (`.elementor-item-active`),
 *    which the generator already styles correctly - WordPress puts
 *    `current-menu-ancestor` on the parent LI and nothing styles it.
 *
 * Both need !important: Elementor's per-element CSS is written as
 * `.elementor-19646 .elementor-element.elementor-element-XXXX ...`, four
 * classes deep, which no hand-written selector here can outrank on specificity.
 * Same reason the html/body background rules above carry it.
 * ------------------------------------------------------------------------- */

.awtw-header .elementor-search-form__container {
	border: 1px solid #000 !important;
	background-color: transparent !important;
}

.awtw-header .current-menu-ancestor > .elementor-item,
.awtw-header .current-page-ancestor > .elementor-item,
.awtw-header .current-menu-parent > .elementor-item {
	background-color: #7E8279 !important;
	color: #000 !important;
}

/* ------------------------------------------------------------ footer menu
 *
 * Live's footer menu is NOT a flex row. Measured on /contact/:
 *
 *   ul.footer-menu  display: block, padding 0
 *   li              display: inline-block, margin 0 21px 14px 0
 *   a               padding: 0 3.5px
 *
 * Elementor's nav menu is flex, and its wrapped second row behaves differently:
 * the row sat 14px too high (rows 25px apart against live's 39) and started
 * 11px in, because the flex row's item spacing applies to the first item of the
 * wrapped line too. Live's inline-block items simply wrap to the ul's left edge.
 *
 * So the menu is put back to live's own mechanism rather than fighting the flex
 * spacing controls - `menu_row_space` on the widget had no effect on the
 * wrapped row at all.
 * ------------------------------------------------------------------------- */

.awtw-footer-nav .elementor-nav-menu {
	display: block;
}

/* Only the WRAP behaviour is taken from live, not the spacing. Elementor
 * already applies the 21px item spacing and the 3.5px anchor padding from the
 * widget's own settings; adding live's margins on top double-spaced the row and
 * pushed "Events" onto the second line. The bottom margin is the one thing
 * Elementor's flex row does not give a wrapped line - `menu_row_space` had no
 * effect on it. */
.awtw-footer-nav .elementor-nav-menu > li {
	display: inline-block;
	/* 25 = live's 21px li margin-right plus the ~4px of whitespace its
	 * inline-block items get from the newlines in the theme's markup. Measured
	 * anchor-to-anchor on live: Donate 380, Contact 467, News 557, Events 630. */
	margin: 0 25px 14px 0;
}

/* ---------------------------------------------------------- page billboard */

.awtw-hero-slider {
	position: relative;
	width: 100%;
	height: 85vh;          /* theme: .hero-slider { height: 85vh } */
	z-index: 0;
	margin-top: -100px;    /* DERIVED from the 100px content offset above, so
	                          the hero still reaches y=0 like the theme's
	                          absolute top:0. Was -115, the BAR height, which
	                          is the wrong one of the two numbers. */
	overflow: hidden;
}

.awtw-hero-slider .slide {
	display: flex;
	background-position: 50% top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.awtw-hero-slider .logo-overlay {
	position: absolute;
	top: 105px;
	height: calc(85vh - 110px);
	width: auto;
}

.awtw-hero-slider .slide-content {
	position: relative;
	margin: auto;          /* centres the block; the text inside is right-aligned */
	padding: 92px 42px;
	z-index: 10;
	text-align: right;
}

.awtw-hero-slider .slide-content a { text-decoration: none; }
.awtw-hero-slider .slide-content .title { color: #fff; }

.awtw-hero-slider .slide-content .title.is-1 {
	font-family: "alternate-gothic-no-3-d", sans-serif;
	font-size: 98px;
	line-height: 84px;
	margin-bottom: 0;
	text-transform: uppercase;
}

.awtw-hero-slider .slide-content .title.is-4 {
	font-family: "fira-sans", sans-serif;
	font-weight: bold;
	font-size: 21px;
}

/* ------------------------------------------------------ simple banner page */

.awtw-simple-banner {
	background-color: #fff;
	padding-top: 25px;     /* DERIVED: live's section.simple-banner-wrap starts
	                          at y=0 with padding-top:125px (115 bar + 10 gap),
	                          measured. The header is in flow here and offsets
	                          the document by 100, so 125 - 100 = 25. Was 10,
	                          which assumed a 115px offset. */
}

.awtw-simple-banner .awtw-banner-inner {
	max-width: 1152px;
	margin: 0 auto;
}

.awtw-simple-banner img { display: block; width: 100%; }

/* --------------------------------------------- home hero (Pro Slides widget)
 *
 * The Slides widget has NO height control - verified against its own schema on
 * this install, all 278 controls. `slides_height` does not exist, so the
 * generator's setting was silently ignored and the hero rendered at Elementor's
 * default instead of the theme's 85vh. Height is therefore set here.
 *
 * The watermark has to sit BETWEEN the photo and the text, which is how the
 * theme layers it (img.logo-overlay inside div.slide, with .slide-content at
 * z-index 10 above it). A pseudo-element on the container cannot get between
 * two of the widget's own children, so it goes on the slide: ::after above
 * .swiper-slide-bg, with .swiper-slide-inner lifted above that.
 * ------------------------------------------------------------------------- */

/* Every layer gets 85vh explicitly rather than a percentage of its parent.
 *
 * The chain does not resolve otherwise: Elementor gives .swiper-slide-bg
 * `min-height:100%` in normal flow (not absolute), so it depends on its
 * ancestors having a resolved height, and Swiper writes inline styles onto the
 * wrapper at runtime. Percentages through that produced a slide 85vh tall with
 * the photo filling only the top third.
 *
 * !important because this file is enqueued without a declared dependency on
 * widget-slides.min.css, so load order - and therefore which equal-specificity
 * rule wins - is not guaranteed. */
.awtw-hero-slides .elementor-slides-wrapper,
.awtw-hero-slides .swiper-wrapper,
.awtw-hero-slides .swiper-slide,
.awtw-hero-slides .swiper-slide-bg {
	height: 85vh !important;
}

.awtw-hero-slides .swiper-slide {
	position: relative;
}

.awtw-hero-slides .swiper-slide::after {
	content: "";
	position: absolute;
	top: 105px;
	left: 0;
	height: calc(85vh - 110px);
	width: calc(85vh - 110px);
	background: url(ghosted-circle-logo.png) no-repeat left center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.awtw-hero-slides .swiper-slide-inner {
	position: relative;
	z-index: 2;
}

/* The theme right-aligns slide copy (.slide-content.has-text-right). The
 * Slides widget exposes alignment only per-slide behind its custom_style
 * switcher, so it is set here for every slide instead. */
.awtw-hero-slides .elementor-slide-heading,
.awtw-hero-slides .elementor-slide-description {
	text-align: right;
}

/* ...and the block that copy sits in has to be FULL WIDTH, or right-aligning
 * it means nothing.
 *
 * `.swiper-slide-contents` is a flex item of `.swiper-slide-inner`, so with no
 * width of its own it shrinks to fit its text. Measured at 390px: the heading
 * box was 189px wide sitting at x=91, where live's `.slide-content` is the
 * full 291px (375 less the 92/42 padding) at x=42. The text wrapped to the
 * same three lines either way - the height was already live's 168 - but it sat
 * centred in the slide instead of ranged against the right padding edge, so
 * every line ended ~53px short of where live ends it.
 *
 * Live's `.slide-content` is a plain block with `margin: auto`, which fills
 * its container and then centres; this is the flex equivalent. */
.awtw-hero .awtw-hero-slides.awtw-hero-slides .swiper-slide .swiper-slide-contents {
	width: 100%;
	/* The cap that was actually doing it: `max-width: 66%`, Elementor's own
	 * default for the Slides widget's content width. 66% of the 291px content
	 * box is 192, which is exactly what the heading measured. The generator
	 * sets `content_width` to the 1152px measure and that key is plainly being
	 * ignored - the computed value stayed 66% - so the measure is stated here
	 * instead, where it can be verified.
	 *
	 * 900, and the number needs its working shown. Measured on live at three
	 * widths, `.slide-content` is 984 at 1440 and at 1100 and only 785 at 800 -
	 * so it is `width: 100%` capped at 984 - and its HEADING is 900, because
	 * live's 42px of horizontal padding sits on `.slide-content` itself.
	 *
	 * Here the padding is on `.swiper-slide-inner` instead (that is what
	 * `slides_padding` sets), so this element is already inside it and a 984
	 * cap produced a 984 heading against live's 900. The cap therefore has to
	 * be live's heading width, not live's block width.
	 *
	 * Elementor's own 66% default gave 885 at 1440 - 15px off - and the 1152px
	 * measure I reached for first was 252px out. At 390px `width: 100%` wins
	 * over all of them and gives live's 291. */
	max-width: 900px;
}

/* --------------------------------------------------- active nav item
 *
 * Live gives the current page's nav item a grey #7E8279 background box. The
 * generator was setting `background_color_menu_item_active` on the Nav Menu
 * widget, which did nothing, so the active item rendered with no background.
 * Elementor marks the current item with .elementor-item-active, so it is set
 * here instead - deterministic, and one less undocumented control to trust.
 * ------------------------------------------------------------------------- */

.awtw-nav .elementor-item.elementor-item-active,
.awtw-nav .elementor-item.elementor-item-current-menu-item {
	background-color: #7E8279;
}

/* ------------------------------------------- what Bulma used to do for us
 *
 * The ACF shortcodes emit the theme's own class names - strong.title.is-4 for a
 * field label, ul.filing-list for repeater rows, .reveal-trigger for an
 * accordion bar - because that kept the theme's CSS applying to them while the
 * theme was still active. Bulma and style.css left with the theme, so these
 * rules have to live here now.
 *
 * 04-TEMPLATE-INVENTORY.md flagged exactly this: "anything still relying on
 * .content, .columns or .column.is-* has to be re-measured before that switch".
 * Values are from HOME-SPEC.md's measured single-case spec.
 * ------------------------------------------------------------------------- */

/* The 404's copy paragraph has NO bottom margin.
 *
 * Live's 404 is outside `.content`, so Bulma's paragraph rhythm never reaches
 * it and the theme reset leaves `margin: 0` - measured, live's <p> is 375x46,
 * exactly two lines. The global kit's `paragraph_spacing: 1em` does reach the
 * text-editor widget here, which made the block 62px and pushed the search
 * form and the whole footer 16px down.
 * ------------------------------------------------------------------------- */
/* Two classes deep, because the kit's paragraph spacing is
 * `.elementor-kit-<id> p` - one class and one element, (0,1,1) - which ties
 * with a plain `.awtw-404 p` and loads afterwards. Measured: the block stayed
 * 62px with the rule being served. */
.awtw-404 .elementor-widget-text-editor p {
	margin: 0;
}

/* ------------------------------------------------------ .loop-entry
 *
 * The theme's own, and it was missing entirely:
 *
 *     .loop-entry { padding: 2rem 0; border-bottom: 1px dotted #bababa }
 *     .loop-entry:first-child { padding-top: 0 }   <- deliberately NOT copied
 *
 * 2rem is 28px at the 14px root. This is the dotted rule that separates one
 * entry from the next, and it is used in two places: every hit on the search
 * results page (staging emits all ten, exactly as live does, and they were all
 * missing their divider and their padding), and the intro paragraph on
 * /contact/, which live wraps in `<div class="content loop-entry">`.
 *
 * Measured on /contact/ at 390px before this: "Contact Information:" at y=424
 * against live's 460, and every element below it 36px high - 7px of top
 * padding the paragraph was not getting, 28px of bottom padding, and the 1px
 * border. Fixing the heading rhythm above had already removed the compounding
 * part of that error, which left a flat 36px and pointed straight here.
 * ------------------------------------------------------------------------- */
.loop-entry {
	padding: 28px 0;
	border-bottom: 1px dotted #BABABA;
}

/* THE `:first-child` HALF IS OMITTED ON PURPOSE. Copying live's stylesheet
 * here would have produced a difference live does not have.
 *
 * Measured on live at 390px: the FIRST loop-entry carries `padding: 28px 0`
 * like every other one, on both pages that use the class - /contact/ and the
 * search results. So live's own `:first-child` rule never actually matches;
 * something always precedes the entry inside its parent.
 *
 * Staging's DOM differs, because Elementor's wrappers are not the theme's. On
 * the search page the first entry IS its parent's first child, so the rule
 * fired and took 28px off the top of the first hit alone - a gap live does not
 * have. Phase 1 replicates the rendered result, and that result is 28px on all
 * ten.
 *
 * On /contact/ it made no difference either way: the page-title widget
 * precedes the intro, so the intro is not a first child there. */

/* ------------------------------------ Bulma's .content heading rhythm
 *
 * Absent. Headings inside a `.content` block were falling back to the theme
 * reset's `h1..h6 { margin: 8px 0 16px }` - an element-only selector, (0,0,1),
 * which is why a plain `.content h3` at (0,1,1) is enough to beat it and no
 * doubled class is needed here.
 *
 * The miss is the TOP margin. Bulma gives a heading that follows something
 * else a substantial lead-in - `.content h3:not(:first-child)` is 1.3333em,
 * 30.8px at the 23.1px h3 - and gives the first heading in a block none at
 * all. Staging had a flat 8px on both. Measured on /contact/ at 390px, live
 * against staging: "Contact Information:" at y=460 vs 432 and "Portland
 * Office:" at 601 vs 559, the error growing with each heading down the page.
 *
 * Written in `em` exactly as Bulma writes it, so each margin resolves against
 * its own heading's size. Sizes are NOT set here - the kit already carries the
 * em scale (see build_kit.py) - only the margins that went missing with it.
 * ------------------------------------------------------------------------- */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	margin-top: 0;
}

.content h1 { margin-bottom: 0.5em; }
.content h2 { margin-bottom: 0.5714em; }
.content h3 { margin-bottom: 0.6666em; }
.content h4 { margin-bottom: 0.8em; }
.content h5 { margin-bottom: 0.8888em; }
.content h6 { margin-bottom: 1em; }

.content h1:not(:first-child) { margin-top: 1em; }
.content h2:not(:first-child) { margin-top: 1.1428em; }
.content h3:not(:first-child) { margin-top: 1.3333em; }

/* Bulma's `.content:not(:last-child) { margin-bottom: 1.5rem }` - 21px at the
 * theme's 14px root. Absent, and it is load-bearing wherever a `.content`
 * block is followed by a sibling.
 *
 * Measured on live's our-story: the stats heading's `.content` wrapper ends at
 * y=452 and carries `margin: 0 0 21px`, so the `.columns` below it (whose own
 * -10.5px gutter pulls back up) lands at 462.5. Staging had no margin there,
 * so every stat row sat 18px high - and because the pitch was already right,
 * the whole block was uniformly off rather than progressively wrong, which is
 * what pointed at a single missing gap.
 *
 * `:not(:last-child)` matters: Bulma exempts the final block, so a `.content`
 * that ends its container contributes nothing. That is why pages whose
 * `.content` IS the last child never showed this.
 * ------------------------------------------------------------------------- */
.content:not(:last-child) {
	margin-bottom: 21px;
}

/* ------------------------------------------------- Gravity Forms fields
 *
 * The theme styled exactly two things about its forms and both died with it:
 *
 *   .subscribe-form-field input[type="text"] {
 *       background-color: rgba(255,255,255,0.50);
 *       padding: .75rem !important;   ( = 10.5px )
 *       border: none; }
 *   .gform_button { background: #333; border: none; color: #eaeaea;
 *                   text-transform: uppercase; }
 *
 * Without them Gravity Forms' own defaults show through: measured on the home
 * newsletter at 390px, staging's inputs were 42px tall with `8px 16px` of
 * padding against live's 52px at 10.5px, and the submit button 42x86 against
 * live's 32x70. The form ran 426px against live's 344.
 *
 * `!important` on the padding because live uses it, and for the same reason:
 * Gravity Forms sets field padding from its own stylesheet at a specificity
 * that a class selector does not reach.
 *
 * This is NOT a mobile-only fix - the same fields are wrong at every width,
 * and the contact form uses them too.
 * ------------------------------------------------------------------------- */
.subscribe-form-field input[type="text"] {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 10.5px !important;
	border: none;
}

/* THE SUBMIT BUTTON IS A DELIBERATE DEVIATION FROM LIVE - the fifth, and the
 * first one the client asked for rather than one forced by the platform.
 *
 * Live's theme says `.gform_button { background: #333333; color: #eaeaea }` -
 * a black button that goes green on hover. The client asked for the brand
 * green as the resting state, on every form:
 *
 *     "it's showing as a magenta-esque color. Previously it was black until
 *      you toggled over it and then it became our brand color green. I would
 *      prefer it the brand color green if at all possible."
 *
 * #93B558 is the Donate button's green and #A4BF73 the theme's own button
 * hover, so both values are the site's, not invented.
 *
 * THE MAGENTA WAS REAL and worth recording, because a plain `.gform_button`
 * rule did not fix it. The button computed `color: #CC3366` on a transparent
 * background - the theme reset's link colour showing through
 * `[type="submit"], button { background-color: transparent; color: #CC3366 }`.
 *
 * ATTRIBUTE SELECTORS CARRY CLASS-LEVEL SPECIFICITY. `[type="submit"]` is
 * (0,1,0), which TIES with `.gform_button`, and the reset loads afterwards -
 * so the rule was being served and losing silently. `.gform_wrapper
 * .gform_button` is (0,2,0) and settles it. Worth remembering: this is the
 * same class of fight as `.awtw-x` against `.e-con`, but the opponent does not
 * look like a class at a glance.
 * ------------------------------------------------------------------------- */
.gform_wrapper .gform_button {
	background: #93B558;
	border: none;
	color: #FFFFFF;
	text-transform: uppercase;
}

.gform_wrapper .gform_button:hover {
	background: #A4BF73;
	color: #FFFFFF;
}

/* Live's feature boxes are SQUARE, and a script is what makes them so.
 *
 * `.feature-box` carries only `min-height: 300px` in the theme's stylesheet;
 * the height you actually see is set by the same JavaScript that writes the
 * board page's inline `height`. Measured on live at 390px, freshly loaded:
 * the Threats boxes are 333x333 (their column is 333 wide, the section having
 * 21px of padding) and the icon-boxes are 375x375 (that section has none).
 * At desktop both are 384x384, because 1152/3 is 384.
 *
 * So the rule is width, not a number. `aspect-ratio` states that declaratively
 * and needs no script, and the 300px floor beneath it is live's own.
 *
 * This replaces a `min_height_mobile: 333` that was right only in the Threats
 * section and only at 390px.
 * ------------------------------------------------------------------------- */
.awtw-feature {
	aspect-ratio: 1 / 1;
}

/* The home stat rows: number BESIDE the label, as live has it.
 *
 * An Elementor container carries `width: var(--width)` with `--width: 100%`,
 * so both halves of the pair were full-width and the number wrapped onto its
 * own line - each stat ran 110px tall against live's 83, and five of them put
 * the band 135px out. Shrink-to-fit is what inline-block gives live's
 * `.counter--left` and `.counter-description`.
 *
 * Two classes, because a single one ties with `.e-con` and loses on load
 * order - the same fight as `.awtw-header.e-con`. `--width` is set as well as
 * `width`, because Elementor's rule reads the property rather than the value.
 * ------------------------------------------------------------------------- */
.awtw-stat-numcell.e-con,
.awtw-stat-label.e-con {
	--width: auto;
	width: auto;
}

/* ------------------------------------------------- Bulma's .title scale
 *
 * This was being rebuilt one selector at a time. `.title.is-3` and
 * `strong.title.is-4` below, and `.feature-box__title--staff .title.is-2`
 * further down, were each measured separately - and all three agree exactly
 * with Bulma's own scale against the theme's 14px root, because that is where
 * they came from:
 *
 *     .title      2rem    = 28px       .title.is-3   2rem    = 28px
 *     .title.is-1 3.5rem  = 49px       .title.is-4   1.5rem  = 21px
 *     .title.is-2 2.75rem = 38.5px     .title.is-5   1.25rem = 17.5px
 *
 * with `line-height: 1.125` and, from the theme's own override of Bulma:
 *
 *     .title { font-family: alternate-gothic-no-2-d; text-transform:
 *              uppercase; color: #000 }
 *
 * The sizes nobody had needed yet were simply absent, so any heading a
 * shortcode emits as `title is-1` fell through to the kit's h2 typography:
 * our-story's "HOW WE ADD UP FOR THE WEST" rendered at 26.95px in Title Case
 * where live has 49px uppercase Alternate Gothic. The same h1 is on /events/
 * and on all three taxonomy archives.
 *
 * font-weight is deliberately NOT set here. It is not constant on live - the
 * card titles are 400 and `strong.title.is-4` is 300 - so it stays with the
 * rules that measured it.
 * ------------------------------------------------------------------------- */
/* `.title.title`, doubled deliberately. The kit emits
 * `.elementor-kit-19684 h2 { font-family: fira-sans; line-height: 30.32px }`,
 * which is (0,1,1) - one class and one element - against a single `.title`'s
 * (0,1,0), and Elementor's CSS loads afterwards. Measured with the plain
 * selector: font-size took (because `.title.is-1` is (0,2,0) and wins) while
 * the FAMILY and LINE-HEIGHT did not, so the heading rendered 49px Fira Sans
 * at a 30.32px line-height. Fira Sans is far wider than Alternate Gothic, so
 * it wrapped to three overlapping lines where live takes two.
 *
 * Repeating the class is the honest way to reach (0,2,0) here: the alternative
 * is naming the kit's own id selector, which changes whenever the kit is
 * re-imported, or !important, which specificity makes unnecessary. */
.title.title {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 28px;
	line-height: 1.125;
	text-transform: uppercase;
	color: #000;
	margin-top: 0;
}

/* Bulma exempts the last child, which is why this is not a flat margin. */
.title:not(:last-child) { margin-bottom: 21px; }

.title.is-1 { font-size: 49px; }
.title.is-2 { font-size: 38.5px; }
.title.is-4 { font-size: 21px; }
.title.is-5 { font-size: 17.5px; }
.title.is-6 { font-size: 14px; }

/* live: `.section__title.title { margin-bottom: .25rem }` */
.section__title.title { margin-bottom: 3.5px; }

/* --------------------------------------------------- the counter stat rows
 *
 * None of this existed. The theme's counter styles went with the theme and
 * were never replaced, so our-story's stat block rendered every number at the
 * body's 15.4px, stacked above its label, where live has a 49px Alternate
 * Gothic number sitting BESIDE a two-tier label. Both `.counter` and
 * `.counter-description` are inline-block on live, which is what puts them on
 * one line; without the rules they were plain blocks.
 *
 * This is not a mobile-only fault - it was wrong at every width. It showed up
 * in the mobile pass because that pass was the first to look at the page.
 *
 * Values are live's own, rem resolved against the theme's 14px root:
 *   .counter              3.5rem = 49px, line-height .95, 1rem = 14px below
 *   .counter--left        inline-block, .5rem = 7px to its right
 *   .counter-description  1.2rem = 16.8px, line-height .95, inline-block, left
 *   .top-line             block, 2rem = 28px  - the larger first line
 *
 * The padding is live's `.page-template-tpl-2col` variant - measured on live's
 * our-story as `0 21px 40px`, i.e. Bulma's 1.5rem sides with the 3.5rem top
 * suppressed. That body class does not exist here, and our-story is the only
 * page carrying this markup (staging's home builds its stats from native
 * Elementor counter widgets instead), so the variant is stated directly.
 * ------------------------------------------------------------------------- */
.number-section-1 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	text-align: center;
	padding: 0 21px 40px;
}

.number-section-2 { font-weight: 300; }

.counter {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 49px;
	line-height: 0.95;
	margin-bottom: 14px;
}

.counter span { font-weight: normal; }

.counter--left {
	display: inline-block;
	margin-right: 7px;
}

.counter-column { position: relative; }

.counter-description {
	font-size: 16.8px;
	line-height: 0.95;
}

.number-section-1 .counter-description {
	display: inline-block;
	text-align: left;
}

.counter-description .top-line {
	display: block;
	font-size: 28px;
}

strong.title.is-4 {
	display: inline-block;
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 21px;
	line-height: 23.625px;
	font-weight: 300;
	text-transform: uppercase;
	color: #000;
}

.title.is-3 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 28px;
	line-height: 31.5px;
	font-weight: 400;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 21px;
}

.case-thumbnail { margin-bottom: 14px; }

/* 100%, not the 272px this used to hard-code.
 *
 * 272 is what live's thumbnail measures at DESKTOP, where the sidebar's is-3
 * column is 293.25 wide less its 21px of padding. It is not a property of the
 * image - live's is `width: 100%` of whatever the column is. At 390px that
 * column is 333 and live's thumbnail is 333x278; staging's stayed 272 wide and
 * 241 tall, 43px short, on all 191 case pages.
 *
 * 100% still gives exactly 272 at desktop, so nothing moves up there. */
/* NOT `display: block`, which this used to say. Live's thumbnail is an INLINE
 * image, and that is measurable: its `.case-thumbnail` wrapper is 284px tall
 * around a 278px image - the 6px descender of the line box it sits in. Forcing
 * it to a block removed exactly those 6px. Fifth appearance of this pattern,
 * after the footer logo, the 1% badge, the Candid seal and the home icons. */
.case-thumbnail img {
	width: 100%;
	height: auto;
}

/* Measured off live with getComputedStyle, not assumed: the list keeps its
 * disc bullets and Bulma's asymmetric margins. This rule used to say
 * `list-style: none; margin: 0`, which quietly flattened the Case Filings
 * list the theme had bulleted. */
.filing-list {
	list-style: disc outside;
	margin: 15.4px 30.8px 14px;
	padding: 0;
}

.filing-list a { color: #93B25D; }

/* The wrapper the theme puts round each bar+panel pair. */
.case-filings {
	background: #f3f3f3;
	margin-bottom: 14px;
}

/* The accordion bar. Background measured off live at #DDDDDD. */
.reveal-trigger {
	display: block;
	background-color: #DDDDDD;
	padding: 5.6px 14px 2.1px;
	cursor: pointer;
	border: 0;
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 21px;
	line-height: 31.5px;
	text-transform: uppercase;
	color: #000;
	transition: .1s linear;
}

/* The green is a HOVER state on live, not an open state - worth stating,
 * because a screenshot taken with the cursor resting on an open bar looks
 * exactly like an "active bar" style that live does not have. */
.reveal-trigger:hover { background-color: #A3B87C; }

/* Live floats a zmdi glyph right. zmdi left with the theme, so the glyph is
 * CSS content and awtw-reveal.js only has to toggle one class. */
.trigger-icon {
	float: right;
	margin-top: 4.2px;
}

.trigger-icon::before { content: "+"; }

.reveal-trigger.is-open .trigger-icon::before { content: "\2212"; }  /* U+2212 minus, as a CSS escape so this file stays ASCII */

.reveal-box {
	display: none;
	padding: 7px;
}

.reveal-trigger.is-open + .reveal-box { display: block; }

/* ------------------------------------------------------ listings and cards
 *
 * The listing shortcodes emit live's own Bulma card markup - .card,
 * .card-image, .card-content, .card-footer, .card-footer-item - so these rules
 * replace what Bulma was doing before the theme switch. Same situation as
 * .title.is-4. Values follow live's rendering; the grid is three across at the
 * 1152px measure, which is what 10 cards per page lays out as.
 * ------------------------------------------------------------------------- */

/* The theme's own masonry rules, verbatim from style.css. One column, two at
 * 800px, three at 960px, with a 2% gutter - Masonry reads the two sizer divs
 * for those widths, so the percentages are the layout, not a suggestion. */
.masonry-grid { margin-bottom: 21px; }

.masonry-grid:after { content: ""; display: block; clear: both; }

.grid-sizer,
.grid-item { width: 100%; }

.grid-item { margin-bottom: 14px; float: left; }

/* The grey placeholder is why a card with no featured image still shows a
 * block rather than collapsing - 4 of the 10 cards on live's first blog page
 * have no image. */
.grid-item .card-image {
	position: relative;
	background-color: #eee;
	min-height: 45px;
}

/* No `display: block`. Live leaves every card image inline with
 * `vertical-align: baseline`, so each carries the descender space beneath it -
 * measured on /cases/, a 240px image inside a 247px wrapper, and on
 * /the-advocates/partners/, 238px inside 251px with 7px of top padding.
 * `display: block` removes it and shortens EVERY listing card on every listing
 * page. This rule also outranks `.partner-logo img`, so it was overriding the
 * partner fix as well. */
.grid-item .card-image img { width: 100%; height: auto; }

/* The date badge on post cards, pinned top-right inside the image area. */
.case-status {
	background-color: #fff;
	padding: 3.5px 10.5px;
	position: absolute;
	top: 7px;
	right: 7px;
}

.masonry-grid .card {
	background-color: #fff;
	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
}

/* 21px, not 14. Bulma's `.card-content` is 1.5rem, which is 21px at the
 * theme's 14px root - the same wrong-base slip as the partner cards. */
.masonry-grid .card-content { padding: 21px; }

/* Measured on live /news/: the card title is 28px/31.5px with 21px beneath it.
 * The note here used to read "Bulma 1.5em against the 15.4px base", which gives
 * 23.1px - but live's card titles are not Bulma's is-3, the theme overrides
 * them. Every listing card was ~40px short as a result, on every listing page.
 */
.masonry-grid .card-content .title.is-3 {
	font-size: 28px;
	line-height: 31.5px;
	margin-top: 0;          /* live's card title has none; something was giving it 8px */
	margin-bottom: 21px;
}

/* Card titles are LINKS, and live paints them the link green - measured on
 * /news/: the h2 is black, the anchor inside it is rgb(147,178,93) = #93B25D.
 * This rule forced them black, so every card heading on every listing page was
 * the wrong colour. It is the most visible single difference left on those
 * pages, and a pixel diff shows it as a solid block wherever a title sits. */
.masonry-grid .card-content .title.is-3 a { color: #93B25D; }

.masonry-grid .card-footer {
	display: flex;
	border-top: 1px solid #EDEDED;
}

.masonry-grid .card-footer-item {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	padding: 10.5px;
	color: #93B25D;
}

@media screen and (min-width: 800px) {
	.grid-sizer,
	.grid-item { width: 48%; }
}

@media screen and (min-width: 960px) {
	.grid-sizer,
	.grid-item { width: 31.3333%; }
}

.gutter-sizer { width: 2%; }

/* ------------------------------------------------- Bulma's column system
 *
 * Five of the theme's templates lay out with .columns / .column.is-N - staff,
 * board, partners, archives, contact and our-story. Bulma left with the theme,
 * so the grid has to come from here. Gutter is the theme's 0.75rem, which is
 * 10.5px against the 14px root - the same figure the single-case sidebar was
 * measured at.
 * ------------------------------------------------------------------------- */

.columns {
	display: flex;
	margin-left: -10.5px;
	margin-right: -10.5px;
	margin-top: -10.5px;
}

.columns:last-child { margin-bottom: -10.5px; }
.columns.is-multiline { flex-wrap: wrap; }

.column {
	display: block;
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 10.5px;
}

.column.is-paddingless { padding: 0; }

.column.is-3  { flex: none; width: 25%; }
.column.is-4  { flex: none; width: 33.3333%; }
.column.is-8  { flex: none; width: 66.6667%; }
.column.is-9  { flex: none; width: 75%; }
.column.is-12 { flex: none; width: 100%; }
.column.is-narrow { flex: none; width: auto; }

@media screen and (max-width: 768px) {
	.columns { display: block; }
	.column.is-3,
	.column.is-4,
	.column.is-8,
	.column.is-9 { width: 100%; }
}

/* ------------------------------------------------- staff / board portraits
 *
 * .feature-box--staff is a square photo with a translucent band pinned to the
 * bottom carrying the name and job title. The photo is a background image at
 * grid-thumbnail (500x500 hard crop).
 *
 * "rendered 272x272 on live" is what this note used to say, and it was wrong.
 * Measured 2026-09-04 on both /the-advocates/staff/ and /board/ at a 1920
 * viewport: the boxes are **628x628**, three across, full bleed.
 *
 * The square comes from the theme's JS, which sets an inline
 * `height: 627.984px` to match each box's own width - there is no CSS rule for
 * it at all, which is why reading the stylesheets found nothing. That JS left
 * with the theme, so this file had a fixed `min-height: 272px` standing in for
 * it and the portraits came out 391x272 rectangles at half the intended size.
 *
 * `aspect-ratio` does the same job in CSS, at any column width, with no script.
 * `background-size` is `100% auto` on live, not `cover`: it fits the width and
 * lets the top of the image crop, which is what keeps faces in frame.
 * ------------------------------------------------------------------------- */

.feature-box--staff {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1 / 1;   /* live's JS-set square, as CSS */
	min-height: 300px;     /* live's own min-height */
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #eee;
}

/* The name band, measured on live /the-advocates/board/ 2026-09-05.
 *
 * It is ABSOLUTE and pinned to the bottom of the square on live; here it was in
 * flow, held down by the box's `justify-content: flex-end`. That works until a
 * name wraps to two lines, when a flow band changes the box's own layout and an
 * absolute one does not.
 *
 * The rest were measured rather than derived:
 *   background  0.5 alpha, not 0.75
 *   padding     10.5px 7px 5.6px, not 10.5px 14px
 *   name        38.5px/43.3125px weight 300 centred, not 26.95/30.32 weight 400
 *
 * The name size is the wrong-base error one more time - Bulma's is-2 is 1.75em,
 * which is 26.95 against the 15.4px base, and live's is 38.5.
 * `awtw_common.box_title()` has carried the correct 38.5/43.3125 all along for
 * the feature boxes IT builds; only this shortcode-rendered copy was wrong.
 *
 * NOT replicated: live's band renders 613px wide inside a 628px box, because
 * the theme leaves `overflow: auto scroll` on .feature-box and the browser
 * reserves a 15px scrollbar gutter for it. That is an artifact of a stray
 * overflow rule, not a design, so the band spans the full width here.
 */
.feature-box__title--staff {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 10.5px 7px 5.6px;
	/* The job-title line under the name. The theme sizes it off
	 * `.feature-box__title { font-size: 1.2rem }` - 16.8px against the 14px
	 * root - and the kit's 15.4px body size was showing through instead.
	 * Measured on live: 16.8/25.2, which is also what makes the band 85px
	 * tall rather than 83. */
	font-size: 16.8px;
	line-height: 25.2px;
}

/* THE SUB-LINE'S COLOUR, AND WHY THIS SELECTOR HAS TWO CLASSES.
 *
 * Every portrait card is wrapped in an <a>, so the job-title line inherits the
 * link colour: it rendered in #93B25D link green where live has black.
 *
 * `.awtw-advocates a` was already here and was already losing. Elementor's kit
 * emits `.elementor-kit-19684 a { color: ... }` - two classes worth of
 * specificity (0,2,0) against this rule's (0,1,1) - so the kit won on every
 * advocate card on the site. Same shape as the `.awtw-header.e-con` and
 * `.awtw-bulma-row.e-con` cases: a single class does not outrank an Elementor
 * global, and the fix is a second class, not !important.
 *
 * `.columns` is on the same element as `.awtw-advocates`, so (0,2,1) wins on
 * specificity and needs no load-order luck. The h2 has its own `color: #000`
 * below and was never affected, which is why the NAMES looked right and only
 * the line under them was green.
 */
.columns.awtw-advocates a { text-decoration: none; color: #000; }

.feature-box__title--staff .title.is-2 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 38.5px;
	line-height: 43.3125px;
	font-weight: 300;
	text-align: center;
	text-transform: uppercase;
	color: #000;
	margin: 0;
}


/* The advocate page's photo/bio row.
 *
 * The generator gives this grid Bulma's -10.5px side margins, which correctly
 * pulls the photo out to the 377px measure edge - but Elementor's container
 * carries an explicit width, so the negative margin SHIFTS the grid without
 * WIDENING it. Live's row is 1173px (1152 + 21), which is what makes is-3
 * 293.25px and the photo 272px; without the width the columns stay at 288 and
 * the photo comes out 267 with the bio 16px narrow - and a narrower bio column
 * rewraps the text, so everything below it moves too.
 */
/* Bulma's `.columns` gutter, the width half.
 *
 * The generators give these rows `margin: -10.5px` (awtw_common.BULMA_ROW),
 * which pulls the row out to the measure edge and cancels the columns' top
 * padding. But Elementor's container carries an explicit width, so the negative
 * margin SHIFTS the row without WIDENING it, and live's row is 1152 + 21 =
 * 1173 - which is what makes an is-3 column 293.25px and its content 272px.
 *
 * Two classes, because one ties with Elementor's own `.e-con { width }` and
 * loses on load order - the same cascade that caught `.awtw-header`. --width is
 * the property Elementor's rule actually reads.
 */
.awtw-bulma-row.e-con {
	--width: calc(100% + 21px);
	width: calc(100% + 21px);
}

/* --------------------------------------------------------------- partners */

.partner-grid .grid-sizer,
.partner-grid .grid-item { width: 100%; }

@media screen and (min-width: 800px) {
	.partner-grid .grid-sizer,
	.partner-grid .grid-item { width: 48%; }
}

@media screen and (min-width: 960px) {
	.partner-grid .grid-sizer,
	.partner-grid .grid-item { width: 22%; }
}

/* Padding measured off live 2026-09-04, /the-advocates/partners/: the logo
 * block is `7px 7px 0` and the caption block a full `21px`. Both were missing
 * here - the logo had none and the caption 14px - so every one of the 85 cards
 * came out 13px short and the page 469px shorter than live's 5900. Bulma's
 * `.card-content` default is 1.5rem = 21px at this root; the 14px was the wrong
 * base again. */
.partner-logo {
	background-color: transparent;
	padding: 7px 7px 0;
}

/* NOT `display: block`. Live leaves the logo inline with `vertical-align:
 * baseline` inside a 23.1px line-height, so each one carries ~6px of descender
 * space beneath it: the block measures 251px around a 238px image with 7px of
 * top padding. `display: block` removes that gap and every card came out 6px
 * short - 85 cards, and masonry stacks the shortfall down each column.
 * The same inline-descender gap the footer's 1% badge and Candid seal needed. */
.partner-logo img { width: 100%; height: auto; }

.partner-grid .card-content {
	text-align: center;
	padding: 21px;
}

.partner-grid .card-content .title.is-4 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 19.25px;
	line-height: 21.66px;
	text-transform: uppercase;
	color: #000;
}

/* --------------------------------------------------------------- archives */

.archives .card { background-color: #fff; }
.archives .card a { text-decoration: none; color: #000; }
.archives .card-image img { display: block; width: 100%; height: auto; }

.archives .title.is-4 {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 19.25px;
	line-height: 21.66px;
	text-transform: uppercase;
	padding: 7px;
	margin: 0;
}

.has-text-centered { text-align: center; }

/* ---------------------------------------------------- our-story sidebar */

.our-friends-sidebar .card {
	background-color: #F5F5F5;
	margin-bottom: 14px;
}

.our-friends-sidebar .card-content { padding: 14px; }

/* ------------------------------------------- floating donate promo
 *
 * The theme's rules, verbatim. Off-canvas by default; awtw-floatie.js adds
 * .is-floatie after 45 seconds to slide it in. Keeping the transform-based
 * reveal matters - it is what makes the close button slide it back out rather
 * than blink it away.
 * ------------------------------------------------------------------------- */

.floatie-box {
	position: fixed;
	top: 35%;
	left: 0;
	max-width: 320px;
	z-index: 999;
	transform: translateX(-100%);
	transition: transform .3s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.floatie-box.is-floatie { transform: translateX(0); }

.floatie-box img { display: block; max-width: 100%; height: auto; }

.floatie-box strong {
	font-weight: bold;
	color: #fff;
	font-size: 15.4px;
}

.floatie-box-content {
	position: absolute;
	top: 14px;
	right: 1%;
	width: 65%;
	font-size: 14px;
	color: #fff;
}

.floatie-box-link {
	font-family: "alternate-gothic-no-2-d", sans-serif;
	color: #eee;
	text-transform: uppercase;
	font-size: 35px;
}

.floatie-box-link:hover { color: #fff; }

.floatie-box-close {
	position: absolute;
	top: 75%;
	right: 7px;
	font-size: 28px;
	cursor: pointer;
}

/* ------------------------------------------------------------- case filter */

.awtw-case-filter .columns {
	display: flex;
	gap: 10.5px;
	margin-bottom: 21px;
	align-items: flex-start;
}

.awtw-case-filter .column { flex: 1 1 0; position: relative; }
.awtw-case-filter .column.is-narrow { flex: 0 0 auto; }

.awtw-case-filter .filter-element {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5.6px 10.5px;
	border: 1px solid #DBDBDB;
	background-color: #fff;
	font-family: "fira-sans", sans-serif;
	font-size: 15.4px;
	line-height: 23.1px;
	color: #363636;
	cursor: pointer;
}

.awtw-case-filter .filter-submit {
	cursor: pointer;
	background-color: #8EA663;
	border-color: #8EA663;
	color: #fff;
	justify-content: center;
}

.awtw-case-filter .filter-submit:hover { background-color: #A4BF73; }

.awtw-case-filter .filter-dropdown,
.awtw-case-filter .filter-dropdown > li { list-style: none; margin: 0; padding: 0; }

.awtw-case-filter .case-filter-list {
	display: none;
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid #DBDBDB;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.awtw-case-filter .filter-dropdown.is-open .case-filter-list { display: block; }

.awtw-case-filter .case-filter-list li {
	padding: 5.6px 10.5px;
	cursor: pointer;
	min-height: 34px;
}

.awtw-case-filter .case-filter-list li:hover { background-color: #F5F5F5; }

@media screen and (max-width: 900px) {
	/* A NEGATIVE MARGIN, not padding, and the sign is the whole point.
	 *
	 * Live states this as `.simple-banner-wrap { padding-top: 68px }` and its
	 * section starts at y=0, because live's .top-bar is position:fixed and out
	 * of flow - every top-level thing on the page starts at 0 and states its
	 * own clearance. Ours is a sticky bar whose spacer OCCUPIES the flow, so
	 * the document already starts 100px down (67px bar + the 33px the spacer
	 * adds to reach live's content offset). Padding can only push further
	 * down, and 10px put the image at 110 against live's 68.
	 *
	 * -32 brings the section to 100 - 32 = 68, so the image lands exactly
	 * where live's does. Same mechanism the desktop hero uses to sit under the
	 * bar; only the number differs.
	 *
	 * The white ground live paints from 0 to 68 behind its translucent bar is
	 * not reproduced here and does not need to be: body is white underneath. */
	.awtw-simple-banner {
		margin-top: -32px;
		padding-top: 0;
	}

	.awtw-case-filter .columns { flex-wrap: wrap; }
	.awtw-case-filter .column { flex: 1 1 100%; }
}

/* Live has FOUR rules at this breakpoint and only the first was replicated.
 * `.number-section-1 { text-align: center }` and
 * `.number-section-1 .counter-description { text-align: left }` are already
 * the base values in the counter block above, so they need nothing here. The
 * staff box's bottom margin did need stating. */
@media screen and (max-width: 480px) {
	.awtw-hero-slider .slide-content .title.is-1 {
		font-size: 70px;
		line-height: 56px;
	}

	/* THE SAME RULE, for the OTHER hero. Live has one hero implementation and
	 * this rebuild has two: the billboard pages render the theme's own markup
	 * (above), and home uses a Pro Slides widget, which this rule had never
	 * been applied to. So home's slide headings stayed at the desktop 98px/84
	 * on a phone - inside a 291px box (375 less live's 92/42 padding, which
	 * already matched), which is what put the letters off the edge and wrapped
	 * them badly.
	 *
	 * FIVE classes, and they are all load-bearing. Elementor writes the
	 * widget's typography as
	 * `.elementor-35 .elementor-element.elementor-element-<id>
	 *  .elementor-slide-heading` - (0,4,0), and generated per page, so the id
	 * cannot be named here because it changes on every rebuild. Four classes
	 * would tie and lose on load order; `.awtw-hero-slides` is doubled to make
	 * five. Everything else on this hero already matched live: description
	 * 21px/23.625, padding 92px 42px, content width 375.
	 *
	 * 70/56 is live's own `5rem / 4rem` at this breakpoint. */
	.awtw-hero .awtw-hero-slides.awtw-hero-slides .swiper-slide-inner .elementor-slide-heading {
		font-size: 70px;
		line-height: 56px;
	}

	/* live: `.feature-box--staff { margin-bottom: 1rem }` */
	.feature-box--staff {
		margin-bottom: 14px;
	}
}

/* --------------------------------------------------- the advocate contact card
 *
 * Live: `.contact-card-info { font-weight: bold }` in the old theme's
 * style.css, inside `.content`, so it also picks up `.content p`'s 15.4px
 * bottom margin. The shortcode widget carries the size and weight; this is
 * the margin, and the zero top margin because it is the first thing in the
 * column. */
.awtw-advocate-contact .contact-card-info {
	font-weight: 700;
	margin: 0 0 15.4px;
}

/* ===========================================================================
 * THE HOME PAGE'S FEATURED-ARTICLE CAROUSEL
 *
 * Live's third icon box is a slick carousel of four editor-picked posts from
 * the ACF `featured_articles` field on the front page. The rebuild shipped the
 * first item only, static - build_home.py's own note said the cell "becomes a
 * Loop Carousel once the loop-item template exists", and it never did.
 *
 * The slides are emitted by `[awtw_featured_articles]`, so they are plain
 * markup rather than Elementor containers. That means the geometry the replica
 * gets from per-element Elementor CSS - the 300px floor, the 7.5px side
 * padding, the background sizing - has to be restated here, and the numbers
 * below are that same geometry, not new ones.
 * ======================================================================== */
.awtw-fa-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 300px;
}

.awtw-fa-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0 7.5px;
	/* live's `.feature-box`: width-fitted, centred, no repeat - NOT `cover`,
	 * which crops the annual-report cover's lettering. */
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

.awtw-fa-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* The translucent band, pinned to the top exactly as `feature_box()` builds
 * it: BAND_50 at 10.5px top / 7px sides / 5.6px bottom. */
.awtw-fa-band {
	background-color: rgba(255, 255, 255, 0.5);
	padding: 10.5px 7px 5.6px;
	width: 100%;
}

/* `.awtw-box-title` gets its type from Elementor per element, which does not
 * reach shortcode output, so the same values are stated here: Alternate Gothic
 * 38.5/43.3125, weight 300, uppercase, centred, black. */
/* THREE classes for the colour, and the reason is the one this build keeps
 * relearning: the global kit styles `a` at (0,2,0) as `.elementor-kit-19684 a`,
 * and its stylesheet is enqueued AFTER awtw.css. A one-class rule here does not
 * merely tie - it loses on load order, and the titles came out in link green
 * over the photograph instead of black on the band. */
.awtw-fa-slider .awtw-fa-band .awtw-fa-title,
.awtw-fa-slider .awtw-fa-band .awtw-fa-title:hover,
.awtw-fa-slider .awtw-fa-band .awtw-fa-title:focus {
	color: #000000;
	text-decoration: none;
}

.awtw-fa-title {
	display: block;
	font-family: "alternate-gothic-no-2-d", sans-serif;
	font-size: 38.5px;
	line-height: 43.3125px;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

/* The dots, copied from the old theme's `.slick-dots` rules including the
 * green it used only inside this slider. */
.awtw-fa-dots {
	position: absolute;
	bottom: 1rem;
	left: 0;
	width: 100%;
	padding: .5rem;
	margin: 0;
	text-align: center;
	list-style: none;
	z-index: 2;
}

.awtw-fa-dots li { display: inline-block; }

.awtw-fa-dots button {
	background: transparent;
	width: 12px;
	height: 12px;
	padding: 0;
	margin: 0 .15rem;
	font-size: 0;
	line-height: 0;
	border: 1px solid #A4B87E;
	border-radius: 50%;
	outline: none;
	transition: .25s linear;
	cursor: pointer;
}

.awtw-fa-dots button.is-active {
	background-color: #A4B87E;
	cursor: default;
}

/* Without JavaScript the first slide is the one that shows, which is the
 * static box the site has been serving since cutover - so a failure here is a
 * step back to where it was, not a blank space. */
.no-js .awtw-fa-slide:first-child,
.awtw-fa-slider:not(:has(.is-active)) .awtw-fa-slide:first-child {
	opacity: 1;
	visibility: visible;
}