/*
 * Lincoln Town Square — design system.
 *
 * As of PHASE 2 this carries the shared primitives (icon presentation, the
 * typography scale, buttons, badges, rules, focus ring), the global chrome
 * (urgent bar, masthead, stream nav, footer), and every rule that used to be
 * injected inline from PHP or pasted into Customizer -> Additional CSS.
 * Cards and archives arrive in phase 3, article layout in phase 5, the account
 * surfaces in phases 7-9 — do not add them here early.
 *
 * Reads its values from ltsq-tokens.css, which is enqueued as a dependency.
 * No hex belongs in this file.
 *
 * SCOPING RULE, and it matters. This stylesheet loads on every front-end page
 * of a live Divi site, so it deliberately contains NO global reset and no bare
 * element selectors that paint anything. Everything is scoped to a .ltsq-
 * class, or to a stable hand-typed class on a Divi row. A global reset would
 * reach straight into Divi's own modules and every plugin's output, which is
 * not a thing this redesign can afford to do blind. The one deliberate
 * exception is the :focus-visible ring — see the note above it.
 */

/* --------------------------------------------------------------------------
 * Icons
 *
 * One rule governs every glyph. Presentation is set here rather than baked
 * into the geometry in inc/icon-data.php, so a single change restyles all 37,
 * and currentColor lets each glyph inherit the colour of its context — which is
 * what makes an icon inside a [data-stream] container pick up the stream colour
 * for free.
 * ------------------------------------------------------------------------ */

.ltsq-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Sized by the caller via ltsq_icon( $name, $size ), which sets font-size. */

/* --------------------------------------------------------------------------
 * Typography scale
 *
 * Utility classes, not layout. A later phase composes pages out of these; this
 * phase only establishes that the numbers in the spec exist somewhere real.
 * ------------------------------------------------------------------------ */

.ltsq-hero-headline {
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-hero);
	line-height: var(--lts-lh-hero);
	font-weight: 600;
	color: var(--lts-ink);
	margin: 0;
	text-wrap: pretty;
}

.ltsq-h1 {
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-h1);
	line-height: var(--lts-lh-h1);
	font-weight: 600;
	color: var(--lts-ink);
	max-width: var(--lts-measure-h1);
	margin: 0;
	text-wrap: pretty;
}

.ltsq-page-title {
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-page-title);
	line-height: var(--lts-lh-page-title);
	font-weight: 600;
	color: var(--lts-ink);
	margin: 0;
}

.ltsq-dek {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-dek);
	line-height: var(--lts-lh-dek);
	font-weight: 400;
	color: var(--lts-text-dek);
	max-width: var(--lts-measure-dek);
	margin: 0;
}

.ltsq-prose {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-body);
	line-height: var(--lts-lh-body);
	font-weight: 400;
	color: var(--lts-text-body);
	max-width: var(--lts-measure-body);
}

.ltsq-prose h2 {
	font-family: var(--lts-font-display);
	font-size: 28px;
	font-weight: 600;
	color: var(--lts-ink);
}

/*
 * Kicker — the small uppercase line that sits over a title. This is the app's
 * ScreenHeader pattern (kicker over a Newsreader title) carried to the web.
 * On a dark ground the caller sets the colour; the default here is for light.
 */
.ltsq-kicker {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--lts-ls-kicker);
	text-transform: uppercase;
	color: var(--lts-text-muted);
	margin: 0;
}

/*
 * Section header — "LATEST LOCAL NEWS" and friends. The 2px rule under it is
 * part of the component, not something the page adds, so a section header can
 * never appear without its rule.
 */
.ltsq-section-header {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-section-header);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-ink);
	margin: 0 0 var(--lts-space-3);
	padding-bottom: var(--lts-space-2);
	border-bottom: var(--lts-rule-section);
}

.ltsq-meta {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 500;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Badges
 *
 * Two distinct components that are easy to confuse, so they are named apart:
 *
 *   .ltsq-badge      the taxonomy TERM badge that inc/badges.php has rendered
 *                    since before the redesign — source_label, alert_severity,
 *                    story_status. Sized in em because it sits inline in body
 *                    copy. Phase 2 moved its rules here, into the MIGRATED
 *                    section near the bottom of this file, and deleted the
 *                    inline block that used to define them.
 *
 *   .ltsq-type-badge the redesign's STREAM badge — 10px/800 uppercase white on
 *                    the stream colour, pinned to a card or a hero image. New
 *                    in this design; nothing else renders it.
 *
 * The stream badge is one rule for all six streams plus sponsored, because it
 * reads var(--lts-stream) rather than naming a colour.
 * ------------------------------------------------------------------------ */

.ltsq-type-badge {
	display: inline-block;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: var(--lts-ls-badge);
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 8px;
	border-radius: var(--lts-radius);
	background: var(--lts-stream);
	color: var(--lts-on-stream); /* near-black on amber (M21); white elsewhere */
}

/*
 * The outlined variant, used for a second badge on a card that already carries
 * a stream badge — DEVELOPING on a news card, for instance.
 */
.ltsq-type-badge--outline {
	background: transparent;
	color: var(--lts-stream-text);
	box-shadow: inset 0 0 0 1px var(--lts-stream);
}

/* --------------------------------------------------------------------------
 * Buttons
 *
 * Before the redesign the teal button was declared in four separate places
 * (inc/developing-stories.php, inc/coming-soon.php, the Customizer's Additional
 * CSS, and Divi's own button settings) with no shared value. This is the one
 * declaration.
 * ------------------------------------------------------------------------ */

.ltsq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lts-space-2);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-button);
	font-weight: 700;
	line-height: 1;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--lts-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--lts-transition), color var(--lts-transition), border-color var(--lts-transition);
}

.ltsq-btn--primary {
	background: var(--lts-teal);
	color: #fff;
}

.ltsq-btn--primary:hover,
.ltsq-btn--primary:focus {
	background: var(--lts-teal-pressed);
	color: #fff;
}

/*
 * Secondary picks up the stream colour on hover, so the same button reads as
 * "this belongs to Events" or "this belongs to Alerts" depending only on which
 * [data-stream] container it sits in.
 */
.ltsq-btn--secondary {
	background: transparent;
	color: var(--lts-ink);
	box-shadow: inset 0 0 0 2px var(--lts-ink);
}

.ltsq-btn--secondary:hover,
.ltsq-btn--secondary:focus {
	color: var(--lts-stream-text);
	box-shadow: inset 0 0 0 2px var(--lts-stream);
}

/* Filled in the stream colour — the amber "Submit a notice", the blue
 * "Add what you know", the purple "Publish event". */
.ltsq-btn--stream {
	background: var(--lts-stream);
	color: var(--lts-on-stream);
}

.ltsq-btn--stream:hover,
.ltsq-btn--stream:focus {
	color: var(--lts-on-stream);
	/* Darkening the amber notice fill takes its near-black text to 4.0:1, so
	   that stream lightens instead (5.9:1). See ltsq-tokens.css. */
	filter: var(--lts-stream-hover-filter);
}

/* --------------------------------------------------------------------------
 * Rules, surfaces and layout primitives
 * ------------------------------------------------------------------------ */

.ltsq-wrap {
	max-width: var(--lts-maxw);
	margin-inline: auto;
	padding-inline: var(--lts-gutter);
}

/*
 * Content caps at --lts-maxw and centres; the BAND it sits in stays full
 * bleed. That is what "content width 1240px max, 24px page padding" means on a
 * screen wider than the artboard — the artboards are exactly 1240 wide, so
 * they cannot show the distinction themselves, and reading them literally
 * would leave the masthead and nav running edge to edge at 1440 while the
 * archive grid stopped at 1240. Nothing would line up.
 */
.ltsq-masthead__inner,
.ltsq-nav__inner,
.ltsq-titleband,
.ltsq-chips,
.ltsq-footer__inner {
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin-inline: auto;
	box-sizing: border-box;
}

.ltsq-section-rule { border-top: var(--lts-rule-section); }
.ltsq-hairline     { border-top: var(--lts-rule-hairline); }

.ltsq-surface {
	background: var(--lts-surface);
	border-radius: var(--lts-radius);
}

/*
 * The stream-accented panel: a surface with a 4px left border in the stream
 * colour. The same shape serves the alerts rail, the developing-story callout
 * and every governance note panel in the design.
 */
.ltsq-panel {
	background: var(--lts-surface);
	border-left: var(--lts-stream-border-left) solid var(--lts-stream);
	border-radius: var(--lts-radius);
	padding: var(--lts-space-3) var(--lts-space-4);
}

/* Alerts use a heavier left border, matching the pre-redesign archive rule. */
.ltsq-panel--severity {
	border-left-width: var(--lts-severity-border-left);
	border-left-color: var(--lts-severity);
}

/* The story chooser above the contribution form (issue #344). */
.ltsq-storypick { margin: 0 0 var(--lts-space-4); }
.ltsq-storypick__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lts-space-2); margin: var(--lts-space-2) 0; }
.ltsq-storypick__label { font-weight: 600; }
.ltsq-storypick__select { min-height: 44px; max-width: 100%; padding: 0 var(--lts-space-2); border: 1px solid var(--lts-border); border-radius: var(--lts-radius); background: #fff; }

/*
 * Empty states. Before the redesign these were ::before content hacks keyed to
 * positional Divi classes (.et_pb_blog_1_tb_body), which broke whenever a row
 * was reordered. From phase 3 they are real markup; this is their style.
 */
.ltsq-empty {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	color: var(--lts-text-muted);
	margin: 0;
	padding: var(--lts-space-4) 0;
}

/* --------------------------------------------------------------------------
 * Focus
 *
 * The one deliberately global rule in this file, and the one place Phase 1
 * changes something outside a .ltsq- component. It is scoped to :focus-visible,
 * so it appears only for keyboard users and never alters the site's resting
 * appearance; and what it replaces is the browser default, which on a charcoal
 * masthead is close to invisible. Treating that as "no visual change" would be
 * a technicality — it is a small accessibility improvement, applied early on
 * purpose so every later phase inherits it rather than each re-solving focus.
 * ------------------------------------------------------------------------ */

:focus-visible {
	outline: var(--lts-focus-ring);
	outline-offset: var(--lts-focus-offset);
}

/*
 * On the charcoal chrome the teal ring is 2.2:1, under the 3:1 a focus
 * indicator needs (review M21). The pale teal the footer already uses for link
 * hovers is about 6:1 there. Light pages keep the teal ring above.
 */
.ltsq-masthead :focus-visible,
.ltsq-nav :focus-visible,
.ltsq-footer :focus-visible,
.ltsq-urgent-bar :focus-visible {
	outline-color: var(--lts-footer-link-hover);
}

/* ==========================================================================
 * GLOBAL CHROME — phase 2
 *
 * Markup comes from inc/site-chrome.php and inc/alert-banner.php. Values are
 * taken from artboard 01's chrome, which is identical on all 21.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * The Divi containers
 *
 * The Theme Builder header and footer wrap our shortcodes in Divi's own
 * section/row/column markup, which ships generous default padding and a
 * max-width. The chrome is full-bleed, so that has to be zeroed.
 *
 * Scoped to stable hand-typed classes (Row -> Advanced -> CSS Class), never to
 * Divi's positional .et_pb_row_0_tb_header names. Those position numbers shift
 * whenever a row is added, reordered or removed, and relying on them made the
 * pre-redesign header CSS silently stop matching the right row twice in one
 * session — a lesson recorded at length in the Additional CSS this replaces.
 * ------------------------------------------------------------------------ */

.lts-chrome-row,
.lts-alert-banner-row {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.lts-chrome-row .et_pb_column,
.lts-alert-banner-row .et_pb_column {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Divi gives header/footer sections their own padding too. */
.et-l--header .et_pb_section,
.et-l--footer .et_pb_section {
	padding: 0 !important;

	/*
	 * AND A 60px FLEX GAP, which is the part phase 2 missed.
	 *
	 * Divi 5 lays a section out as `display: flex; flex-direction: column`
	 * with `row-gap: 60px` by default. Divi 4 had no flex sections, so zeroing
	 * padding and margin used to be the whole job — and the gap then went
	 * unnoticed for eleven phases because it is invisible against a white page
	 * body and only shows up between two dark bands.
	 *
	 * The result on every page was a 60px white stripe above the masthead and
	 * another between the masthead and the stream nav, which reads as a broken
	 * empty alert bar. It is not: the alert bar collapses correctly (see
	 * below). The chrome is three bands stacked flush, exactly as artboard 01
	 * draws them, so the gap is zero.
	 */
	gap: 0 !important;
}

/*
 * Divi's default column min-height is 1px, which leaves a 1px hairline of page
 * background above the masthead once the gap above is gone and no urgent alert
 * is live. Zero it: a column with content is sized by its content, so this only
 * ever affects the empty case.
 */
.lts-chrome-row .et_pb_column,
.lts-alert-banner-row .et_pb_column {
	min-height: 0 !important;
}

/* --------------------------------------------------------------------------
 * Urgent alert bar
 *
 * Renders only when an Urgent alert is published — inc/alert-banner.php returns
 * an empty string otherwise, so the row collapses to zero height with no CSS
 * involvement. That is deliberate and is why there is no hide-when-empty rule
 * here to go stale.
 * ------------------------------------------------------------------------ */

.ltsq-urgent-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px var(--lts-gutter);
	background: var(--lts-sev-urgent);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.ltsq-urgent-bar:hover,
.ltsq-urgent-bar:focus {
	background: var(--lts-sev-urgent-hover);
	color: #fff;
}

.ltsq-urgent-bar-text {
	flex: 1;
	min-width: 0;
}

.ltsq-urgent-bar-kicker {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
}

.ltsq-urgent-bar-cta {
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

.ltsq-urgent-bar-cta-text { text-decoration: underline; }

/* The chevron is the mobile form of "Read more"; one or the other, never both. */
.ltsq-urgent-bar-cta .ltsq-icon { display: none; }

/* --------------------------------------------------------------------------
 * Masthead
 * ------------------------------------------------------------------------ */

.ltsq-masthead {
	display: block;
	background: var(--lts-ink);
	color: #fff;
}

.ltsq-masthead__inner {
	display: flex;
	align-items: flex-end;
	gap: var(--lts-space-4);
	flex-wrap: wrap;
	padding: 18px var(--lts-gutter) 16px;
}

.ltsq-masthead__brand {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--lts-space-3);
	text-decoration: none;
	color: inherit;
}

/*
 * !important, and not by preference. The source is a 1024x1024 badge, and
 * Divi 5's own Logo Sizing panel generates a rule that computes the <img> to
 * width:0 — a real, reproduced Divi bug documented in
 * lean-bootstrap/04-divi-template-plan.md:16. Constraining height here is the
 * approach that has actually worked on this site since 2026-08-22.
 */
.ltsq-masthead__logo {
	height: 54px !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto;
	display: block;
}

.ltsq-masthead__names {
	min-width: 0;
	display: block;
}

.ltsq-masthead__kicker-short { display: none; }

.ltsq-masthead__kicker {
	display: block;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--lts-ls-kicker);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.ltsq-masthead__wordmark {
	display: block;
	margin-top: 2px;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-wordmark);
	font-weight: 600;
	line-height: var(--lts-lh-wordmark);
	color: #fff;
}

.ltsq-masthead__actions {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	flex-shrink: 0;
}

.ltsq-masthead__search {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	height: 40px;
	width: 220px;
	padding: 0 12px;
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.6);
	box-sizing: border-box;
}

.ltsq-masthead__search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	padding: 0;
	box-shadow: none;
}

.ltsq-masthead__search input::placeholder { color: rgba(255, 255, 255, 0.6); }

/*
 * The input keeps outline:none, so the ring goes on the whole visible field
 * instead (review M21: the field had no focus indicator at all).
 */
.ltsq-masthead__search:focus-within {
	outline: var(--lts-focus-ring);
	outline-offset: var(--lts-focus-offset);
	outline-color: var(--lts-footer-link-hover);
}

.ltsq-masthead__saved {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--lts-transition);
}

.ltsq-masthead__saved:hover,
.ltsq-masthead__saved:focus {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.ltsq-masthead__saved-count {
	position: absolute;
	top: 5px;
	right: 5px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lts-teal);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-counter);
	font-weight: 800;
	line-height: 1;
}

/*
 * The count is rendered with the `hidden` attribute when it is zero. `hidden`
 * sets display:none from the UA stylesheet at the lowest possible specificity,
 * which the display:flex above silently beats — so without this rule the badge
 * shows a "0" on every page for every reader with nothing saved. Caught at
 * 390px, but it was wrong at every width.
 */
.ltsq-masthead__saved-count[hidden] { display: none; }

.ltsq-masthead__contribute {
	height: 40px;
	padding: 0 18px;
}

/* Inner pages: same masthead, less of it. */
.ltsq-masthead--condensed .ltsq-masthead__inner { padding: 14px var(--lts-gutter); }
.ltsq-masthead--condensed .ltsq-masthead__logo { height: 38px !important; }
.ltsq-masthead--condensed .ltsq-masthead__wordmark { font-size: 22px; }

/* --------------------------------------------------------------------------
 * Stream navigation
 *
 * One rule set serves all six streams. The colour comes from --lts-stream,
 * rebound per item by the data-stream attribute the walker emits, so adding a
 * seventh stream is a token change and a menu item — not new CSS.
 * ------------------------------------------------------------------------ */

.ltsq-nav {
	background: var(--lts-ink-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ltsq-nav__inner {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	padding: 0 var(--lts-gutter);
}

.ltsq-nav__spacer { flex: 1; }

.ltsq-nav__item {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	padding: 13px 16px;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color var(--lts-transition), border-color var(--lts-transition);
}

/* Developing, for visitors who cannot see it (inc/site-chrome.php). */
.ltsq-nav__item[hidden] { display: none; }

.ltsq-nav__item:hover,
.ltsq-nav__item:focus {
	color: #fff;
	border-bottom-color: var(--lts-stream);
}

.ltsq-nav__item.is-active {
	color: #fff;
	font-weight: 700;
	border-bottom-color: var(--lts-stream);
}

/* Home carries no swatch and sits flush with the gutter. */
.ltsq-nav__item--home { padding-left: 0; padding-right: 18px; }

/*
 * Home has no stream, so --lts-stream resolves to the site teal via the
 * :root fallback. The design shows its active underline in white instead,
 * which reads as "you are here" rather than "this is the News colour".
 */
.ltsq-nav__item--home.is-active,
.ltsq-nav__item--home:hover { border-bottom-color: #fff; }

.ltsq-nav__swatch {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	background: var(--lts-stream);
}

/* The utility group, pushed right by the spacer: quieter, no swatch, no rule. */
.ltsq-nav__item--utility {
	padding: 13px 14px;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
	border-bottom-color: transparent !important;
}

.ltsq-nav__item--utility:hover,
.ltsq-nav__item--utility:focus { color: #fff; }

.ltsq-nav__inner > .ltsq-nav__item--utility:last-child { padding-right: 0; }

/* --------------------------------------------------------------------------
 * Footer
 *
 * The text colours are unchanged from the pre-redesign production footer. The
 * band itself moves from #333F48 to the deeper #2C363E, matching the nav, so
 * the page is bookended by the same darker tone.
 * ------------------------------------------------------------------------ */

.ltsq-footer {
	background: var(--lts-ink-deep);
	padding: 44px var(--lts-gutter) 36px;
}

.ltsq-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	max-width: var(--lts-maxw);
	margin-inline: auto;
}

.ltsq-footer__disclosure {
	margin: 0;
	max-width: 76ch;
	color: var(--lts-footer-text);
	font-family: var(--lts-font-ui);
	font-size: 14px;
	line-height: 1.7;
}

.ltsq-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin-top: 20px;
}

.ltsq-footer__legal-link {
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--lts-transition);
}

.ltsq-footer__legal-link:hover,
.ltsq-footer__legal-link:focus { color: var(--lts-footer-link-hover); }

.ltsq-footer__copyright {
	margin: 20px 0 0;
	color: var(--lts-footer-copyright);
	font-family: var(--lts-font-ui);
	font-size: 13px;
}

/* "Built on Town Square™" on the copyright line (2026-09-26, ADR-0006): as
   quiet as the line it sits on, underlined so it still reads as a link. */
.ltsq-footer__platform {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--lts-transition);
}

.ltsq-footer__platform:hover,
.ltsq-footer__platform:focus { color: var(--lts-footer-link-hover); }

/* The community standards' nine numbered grounds on the Terms page
   ([ltsq_community_standards], 2026-09-26). Divi's `.entry-content ol` (0,1,1)
   puts the numbers inside the text with no padding, so a wrapped ground ran
   back under its own number at phone width. Hang them outside instead, like
   the bulleted lists above it on the same page. !important because the same
   Divi rule also carries `#left-area ol` (1,0,1), which no class selector can
   outrank; the /app/ lists needed the same (see its note on Divi and <ul>). */
.ltsq-standards ol.ltsq-standards__grounds {
	list-style-position: outside !important;
	padding-left: 1.6em !important;
}

.ltsq-standards ol.ltsq-standards__grounds > li { margin-bottom: 4px; }

.ltsq-footer__aside {
	border-left: 2px solid rgba(255, 255, 255, 0.14);
	padding-left: 40px;
}

.ltsq-footer__aside-kicker { color: rgba(255, 255, 255, 0.55); }

.ltsq-footer__aside-body {
	margin: 10px 0 0;
	color: var(--lts-footer-text);
	font-family: var(--lts-font-ui);
	font-size: 14px;
	line-height: 1.7;
}

/* ==========================================================================
 * MIGRATED RULES
 *
 * Everything below was injected inline from PHP or pasted into Customizer ->
 * Additional CSS before phase 2. Retokenized, otherwise unchanged in effect.
 * ========================================================================== */

/* --- Taxonomy term badges (was inc/badges.php) -------------------------- */

.ltsq-badge {
	display: inline-block;
	font-family: var(--lts-font-ui);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.25em 0.75em;
	margin: 0 0.5em 0.5em 0;
	border-radius: var(--lts-radius);
	background: #e5e5e5;
	color: #333;
}

.ltsq-badge-source_label { background: #e5e5e5; color: #333; }
.ltsq-badge-story_geo_scope { background: #e5e5e5; color: #333; }
.ltsq-badge-alert_severity-advisory { background: var(--lts-sev-advisory); color: var(--lts-text); }
.ltsq-badge-alert_severity-important { background: var(--lts-sev-important); color: var(--lts-text); }
.ltsq-badge-alert_severity-urgent { background: var(--lts-sev-urgent); color: #fff; }
.ltsq-badge-story_status { background: var(--lts-story); color: #fff; }

/*
 * The Divi Blog module's archive left-border cues used to live here, keyed to
 * the taxonomy classes get_post_class() emits. Phase 3 deleted them: the
 * archives now render through ltsq_render_card(), which sets data-stream and
 * data-severity explicitly instead of inferring them from a class WordPress
 * happens to add. That was the last rule in the redesign depending on Divi's
 * Blog module markup.
 */

/* --- Developing Story shortcodes (was inc/developing-stories.php) -------- */

.ltsq-story-summary {
	background: var(--lts-surface);
	border-left: var(--lts-stream-border-left) solid var(--lts-story);
	padding: 14px 18px;
	margin: 0 0 var(--lts-space-4);
}

.ltsq-story-cta-button {
	display: inline-block;
	font-family: var(--lts-font-ui);
	font-weight: 700;
	padding: 12px 28px;
	border-radius: var(--lts-radius);
	background-color: var(--lts-teal);
	color: #fff !important;
	text-decoration: none !important;
}

.ltsq-story-cta-button:hover { background-color: var(--lts-teal-pressed); }

.ltsq-story-timeline { list-style: none; margin: 0; padding: 0; }
.ltsq-story-timeline-item { padding: 10px 0; border-bottom: var(--lts-rule-hairline); }
.ltsq-story-timeline-date { color: var(--lts-text-muted); font-size: 0.9em; margin-right: var(--lts-space-2); }

.ltsq-story-timeline-label {
	display: inline-block;
	font-family: var(--lts-font-ui);
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.2em 0.6em;
	border-radius: var(--lts-radius);
	margin-right: var(--lts-space-2);
}

.ltsq-story-timeline-verified .ltsq-story-timeline-label { background: var(--lts-story); color: #fff; }
.ltsq-story-timeline-community .ltsq-story-timeline-label { background: #e5e5e5; color: #333; }

/* ==========================================================================
 * RESPONSIVE
 *
 * The full mobile pass is phase 12. This is only what the chrome needs in
 * order not to be broken in the meantime.
 * ========================================================================== */

@media (max-width: 980px) {

	.ltsq-masthead__inner {
		align-items: center;
		padding: 12px var(--lts-gutter);
	}

	.ltsq-masthead__logo { height: 40px !important; }
	.ltsq-masthead__wordmark { font-size: 21px; white-space: nowrap; }

	/*
	 * The artboard's mobile masthead is one row: brand, search icon, saved
	 * icon. The full search FIELD and the Contribute button both come back
	 * above this breakpoint; at 390px they are what makes the row wrap.
	 * Contribute is not lost — it is the first thing in the Submit page the
	 * nav still reaches, and phase 12 adds the hamburger the design shows.
	 */
	.ltsq-masthead__search { display: none; }
	.ltsq-masthead__contribute { display: none; }

	.ltsq-masthead__kicker-full { display: none; }
	.ltsq-masthead__kicker-short { display: inline; }

	.ltsq-nav__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ltsq-nav__inner::-webkit-scrollbar { display: none; }

	.ltsq-nav__item { white-space: nowrap; }

	.ltsq-urgent-bar-cta-text { display: none; }
	.ltsq-urgent-bar-cta .ltsq-icon { display: inline-block; }

	.ltsq-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--lts-space-5); }

	.ltsq-footer__aside {
		border-left: 0;
		border-top: 2px solid rgba(255, 255, 255, 0.14);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	/*
	 * Ported verbatim in intent from the Additional CSS this replaces, and
	 * kept because the reason is still live.
	 *
	 * The mobile dropdown menu is positioned relative to its nearest
	 * positioned ancestor. When that ancestor is a narrow, content-width
	 * column, the dropdown inherits the narrow width and renders as a
	 * compressed sliver instead of a real full-width menu. Escaping to
	 * position:fixed relative to the viewport fixes it.
	 *
	 * This applied to Divi's own .et_mobile_menu before the redesign. The new
	 * chrome does not use Divi's Menu module at all, so nothing should be
	 * emitting .et_mobile_menu any more — but the rule is harmless if unmatched
	 * and expensive to rediscover, and any Divi module elsewhere on the site
	 * can still produce one.
	 */
	.et_mobile_menu {
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	.ltsq-masthead__wordmark { font-size: 18px; }
	.ltsq-masthead__logo { height: 34px !important; }
	.ltsq-masthead__contribute { padding: 0 12px; font-size: 13px; }
}

/* ==========================================================================
 * ARCHIVES — title band, filter chips, cards, pagination, rail
 *
 * Phase 3. Markup comes from inc/cards.php. Values are from artboards 02
 * (Local News), 05 (Alerts) and 07 (Community Notices).
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Title band
 * ------------------------------------------------------------------------ */

.ltsq-titleband {
	border-bottom: var(--lts-rule-section);
	padding: 32px var(--lts-gutter) var(--lts-space-4);
}

.ltsq-titleband__kicker {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lts-stream-text);
}

.ltsq-titleband__swatch {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	background: var(--lts-stream);
}

.ltsq-titleband .ltsq-page-title { margin: 10px 0 0; }

.ltsq-titleband__desc {
	margin: 10px 0 0;
	max-width: 64ch;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	color: var(--lts-text-dek);
}

/* --------------------------------------------------------------------------
 * Filter chips
 *
 * Plain links, full page loads. The active chip fills with the stream colour,
 * which is the web form of the app's FeedListScreen filter row — same
 * behaviour, square instead of pill.
 * ------------------------------------------------------------------------ */

.ltsq-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding: var(--lts-space-3) var(--lts-gutter);
	border-bottom: var(--lts-rule-hairline);
	background: var(--lts-surface);
}

.ltsq-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: var(--lts-space-2) 14px;
	background: var(--lts-bg);
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	color: var(--lts-text-muted);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--lts-transition), color var(--lts-transition);
}

.ltsq-chip:hover,
.ltsq-chip:focus {
	border-color: var(--lts-stream);
	color: var(--lts-ink);
}

.ltsq-chip.is-active {
	background: var(--lts-stream);
	border-color: var(--lts-stream);
	color: var(--lts-on-stream);
}

/* The Alerts chips carry a severity swatch; category chips do not. */
.ltsq-chip__swatch {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	background: var(--lts-severity);
}

.ltsq-chip.is-active .ltsq-chip__swatch { background: #fff; }

/*
 * The Alerts "All" chip fills charcoal rather than alert red — the artboard is
 * explicit about it, and it is right: a red "All" would read as a severity.
 */
[data-stream="alert"] .ltsq-chip.is-active,
.ltsq-chips--alert .ltsq-chip.is-active { background: var(--lts-ink); border-color: var(--lts-ink); }

/* --------------------------------------------------------------------------
 * Archive layout
 * ------------------------------------------------------------------------ */

.ltsq-archive {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0 40px;
	padding: 28px var(--lts-gutter) 44px;
	max-width: var(--lts-maxw);
	margin-inline: auto;
}

.ltsq-archive--full { grid-template-columns: minmax(0, 1fr); }

.ltsq-archive__main { min-width: 0; }

.ltsq-archive__rail {
	min-width: 0;
	border-left: var(--lts-rule-column);
	padding-left: 40px;
}

.ltsq-cards { display: flex; flex-direction: column; gap: var(--lts-space-3); }

/* Community Notices are a two-up grid rather than a list. */
.ltsq-cards--panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ltsq-cards--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

/* --------------------------------------------------------------------------
 * The card
 *
 * One rule set. The stream colour arrives through --lts-stream, rebound by the
 * data-stream attribute the renderer sets, so News, Notices, Alerts, Events,
 * Directory, Developing Stories and the sponsored unit are the same component.
 * ------------------------------------------------------------------------ */

.ltsq-card {
	background: var(--lts-surface);
	border: 1px solid var(--lts-border);
	border-left: var(--lts-stream-border-left) solid var(--lts-stream);
	border-radius: var(--lts-radius);
	min-width: 0;
}

/*
 * Sponsored: charcoal rule and a WHITE fill, deliberately distinct from the
 * surface fill every editorial card uses. CLAUDE.md requires paid placement to
 * be visually and textually distinguishable from editorial content — this is
 * the visual half, and the disclosure line in the renderer is the textual half.
 */
.ltsq-card--sponsored { background: var(--lts-bg); }

/* Alerts carry a heavier rule in the severity colour, not the stream colour. */
.ltsq-card--severity {
	border-left-width: var(--lts-severity-border-left);
	border-left-color: var(--lts-severity);
}

.ltsq-card--list { display: flex; gap: 18px; }

.ltsq-card__thumb {
	flex: 0 0 200px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lts-border);
	color: var(--lts-placeholder-glyph);
	overflow: hidden;
	text-decoration: none;
}

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

/* Keep list and compact thumbnails at 16:9 rather than the card's full
 * height. Stretched, a 104px or 200px column cropped the middle out of a
 * wide featured image: the first real stories on Production (2026-09-16) use
 * 1.9:1 branded graphics, and the cards showed "…ure" from "Square".
 * The phone layout already sets 16:9 on the list card; this matches it. */
.ltsq-card--list .ltsq-card__thumb,
.ltsq-card--compact .ltsq-card__thumb {
	align-self: flex-start;
	aspect-ratio: 16 / 9;
}

.ltsq-card--grid { display: block; }
.ltsq-card--grid .ltsq-card__thumb { aspect-ratio: 16 / 9; width: 100%; }

.ltsq-card--list .ltsq-card__body { padding: var(--lts-space-3) 18px var(--lts-space-3) 0; }
.ltsq-card--grid .ltsq-card__body,
.ltsq-card--panel .ltsq-card__body { padding: 18px 20px; }

.ltsq-card__body { min-width: 0; }

.ltsq-card__badges { display: flex; align-items: center; gap: var(--lts-space-2); flex-wrap: wrap; }

/* The card's type badge is a shade tighter than the standalone primitive. */
.ltsq-card__badges .ltsq-type-badge { padding: 3px 8px; }
.ltsq-card__badges .ltsq-type-badge--outline { padding: 2px 7px; }

/*
 * On an alert card the badge says the SEVERITY ("Advisory", "Urgent"), so it
 * has to be coloured by severity too. Taking the stream colour would paint
 * every badge alert-red regardless of what it said — an Advisory labelled in
 * the Urgent colour, which is the one direction an alert must never mislead in.
 */
.ltsq-card--severity .ltsq-card__badges .ltsq-type-badge { background: var(--lts-severity); color: var(--lts-on-severity); }

.ltsq-card__title {
	margin: 10px 0 6px;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-card-title-archive);
	font-weight: 600;
	line-height: var(--lts-lh-card-title-archive);
}

.ltsq-cards--panel .ltsq-card__title { font-size: 22px; }

.ltsq-card__title a {
	color: var(--lts-ink);
	text-decoration: none;
	transition: color var(--lts-transition);
}

.ltsq-card__title a:hover,
.ltsq-card__title a:focus { color: var(--lts-teal); }

.ltsq-card__excerpt {
	margin: 0 0 var(--lts-space-2);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.55;
	color: var(--lts-text-dek);
}

.ltsq-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lts-text-muted);
}

.ltsq-card__avatar {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
}

.ltsq-card__verified { display: inline-flex; color: var(--lts-teal); }

/* --------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------ */

.ltsq-pagination {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	flex-wrap: wrap;
	padding-top: 12px;
}

.ltsq-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	padding: 0 var(--lts-space-2);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	color: var(--lts-ink);
	font-family: var(--lts-font-ui);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--lts-transition);
}

.ltsq-pagination a.page-numbers:hover,
.ltsq-pagination a.page-numbers:focus { border-color: var(--lts-teal); }

.ltsq-pagination .page-numbers.current {
	background: var(--lts-ink);
	border-color: var(--lts-ink);
	color: #fff;
	font-weight: 700;
}

.ltsq-pagination .page-numbers.dots { border-color: transparent; }

/* --------------------------------------------------------------------------
 * Rail
 * ------------------------------------------------------------------------ */

.ltsq-rail { display: flex; flex-direction: column; gap: 28px; }

.ltsq-rail__head {
	margin: 0 0 var(--lts-space-2);
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-ink);
}

.ltsq-rail__body {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	line-height: 1.6;
	color: var(--lts-text-muted);
}

/*
 * The same two roles under their component-scoped names.
 *
 * .ltsq-rail__head / __body came first, in phase 3, for the archive rails.
 * Phases 7 and 8 wrote .ltsq-panel__title / __body inside .ltsq-panel without
 * noticing they had never been defined — so every governance panel on
 * /account/ and /organization/ rendered its heading as a 26px Newsreader
 * headline, because the only rule matching an undefined h2 in a Divi page is
 * Divi's own `h2 { font-size: 26px }`.
 *
 * Defined here rather than in ltsq-account.css because a panel is a design
 * system component, not an account-area one — the article rails use it too.
 * An undefined BEM class inside a Divi page is never invisible; it silently
 * inherits the theme.
 */
.ltsq-panel__title {
	margin: 0 0 var(--lts-space-2);
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-ink);
}

.ltsq-panel__body {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.65;
	color: var(--lts-text-dek);
}

.ltsq-panel__body + .ltsq-panel__body { margin-top: var(--lts-space-2); }

/* A plain bordered panel, no stream accent. */
.ltsq-panel-plain {
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	padding: var(--lts-space-3);
}

/* The governance panels take the charcoal accent rather than a stream colour:
   they are the platform speaking about itself, not a content stream. */
.ltsq-panel--ink { border-left-color: var(--lts-ink); }

.ltsq-legend { display: flex; flex-direction: column; gap: 12px; }
.ltsq-legend__row { display: flex; gap: 10px; }

.ltsq-legend__bar {
	width: 6px;
	flex: 0 0 6px;
	background: var(--lts-severity);
}

.ltsq-legend__name {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lts-ink);
}

.ltsq-legend__desc {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Ad slot
 * ------------------------------------------------------------------------ */

.ltsq-adslot {
	border: 1px solid var(--lts-border);
	background: var(--lts-surface);
	padding: var(--lts-space-3);
}

.ltsq-adslot__label {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: var(--lts-ls-badge);
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-adslot__unit { margin-top: 10px; }

.ltsq-adslot__unit--empty {
	background: var(--lts-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8899a0;
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
}

.ltsq-adslot__cta {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--lts-teal);
	text-decoration: none;
}

.ltsq-adslot__cta:hover { color: var(--lts-teal-pressed); }

/* Unsold well: a house message, not a grey "300 × 250" box (backlog/41).
   Two-class selectors so The Events Calendar's .tribe-common paragraph reset
   does not flatten the title and spacing on /events/. */
.ltsq-adslot .ltsq-adslot__house-title {
	margin: 10px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lts-text);
}

.ltsq-adslot .ltsq-adslot__house-body {
	margin: 6px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	line-height: 1.5;
	color: var(--lts-text-muted);
}

.ltsq-adslot .ltsq-adslot__house-cta { margin-top: 12px; }

/* --------------------------------------------------------------------------
 * Responsive — the full pass is phase 12; this is what archives need now.
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {

	.ltsq-archive {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lts-space-5);
		padding: var(--lts-space-4) var(--lts-gutter) var(--lts-space-5);
	}

	.ltsq-archive__rail {
		border-left: 0;
		border-top: var(--lts-rule-column);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	.ltsq-cards--panel { grid-template-columns: minmax(0, 1fr); }

	/* A 200px thumbnail beside text does not work at 390px. */
	.ltsq-card--list { flex-direction: column; gap: 0; }
	.ltsq-card--list .ltsq-card__thumb { flex-basis: auto !important; aspect-ratio: 16 / 9; width: 100%; }
	.ltsq-card--list .ltsq-card__body { padding: var(--lts-space-3) 18px; }

	.ltsq-card__title { font-size: 20px; }
	.ltsq-titleband { padding: var(--lts-space-4) var(--lts-gutter); }
	/* The same step down the singles take (article, alert and story heads). */
	.ltsq-titleband .ltsq-page-title { font-size: 30px; }
	.ltsq-chips { padding: 12px var(--lts-gutter); }
}

/* ==========================================================================
 * DIVI LINK-COLOUR OVERRIDE
 *
 * Divi 5 emits `.et-db #et-boc .et-l a { color: var(--gcid-link-color,#3e7c74) }`
 * into its per-page inline CSS. That is an ID selector — specificity (1,2,1) —
 * and every Theme Builder layout renders inside #et-boc, so it reaches every
 * anchor in every component in this file and beats any class-based rule we can
 * realistically write. A white label on a teal chip came out teal on teal:
 * present in the DOM, invisible on screen.
 *
 * It is also INTERMITTENT, which is what made it confusing. Divi 5's dynamic
 * assets only emit the rules a given page is judged to need, so the same
 * component reads white on one archive and teal on the next.
 *
 * Raising specificity to beat it would mean writing `#et-boc .et-l a.ltsq-...`
 * in front of a dozen selectors — hard-coupling this stylesheet to Divi's
 * internal wrapper markup, which is exactly what the rest of the redesign
 * avoids. !important on the handful of colour declarations that matter is the
 * smaller, more legible price, and it is the same approach this project already
 * uses for the Divi logo-sizing bug and the AyeCode variable patch.
 *
 * Scoped to colour only. Nothing here overrides layout.
 * ========================================================================== */

.ltsq-masthead__brand,
.ltsq-masthead__saved { color: #fff !important; }

.ltsq-masthead__contribute,
.ltsq-btn--primary { color: #fff !important; }
.ltsq-btn--stream { color: var(--lts-on-stream) !important; }

.ltsq-btn--secondary { color: var(--lts-ink) !important; }
.ltsq-btn--secondary:hover,
.ltsq-btn--secondary:focus { color: var(--lts-stream-text) !important; }

.ltsq-nav__item { color: rgba(255, 255, 255, 0.82) !important; }
.ltsq-nav__item:hover,
.ltsq-nav__item:focus,
.ltsq-nav__item.is-active { color: #fff !important; }
.ltsq-nav__item--utility { color: rgba(255, 255, 255, 0.7) !important; }
.ltsq-nav__item--utility:hover,
.ltsq-nav__item--utility:focus { color: #fff !important; }

.ltsq-footer__legal-link { color: #fff !important; }
.ltsq-footer__legal-link:hover,
.ltsq-footer__legal-link:focus { color: var(--lts-footer-link-hover) !important; }

.ltsq-chip { color: var(--lts-text-muted) !important; }
.ltsq-chip:hover,
.ltsq-chip:focus { color: var(--lts-ink) !important; }
.ltsq-chip.is-active { color: var(--lts-on-stream) !important; }

.ltsq-card__title a { color: var(--lts-ink) !important; }
.ltsq-card__title a:hover,
.ltsq-card__title a:focus { color: var(--lts-teal) !important; }

.ltsq-pagination .page-numbers { color: var(--lts-ink) !important; }
.ltsq-pagination .page-numbers.current { color: #fff !important; }

.ltsq-adslot__cta { color: var(--lts-teal) !important; }
.ltsq-adslot__cta:hover { color: var(--lts-teal-pressed) !important; }

.ltsq-urgent-bar { color: #fff !important; }

/* ==========================================================================
 * HOMEPAGE — phase 4
 *
 * Markup from inc/homepage.php. Values from artboard 01 (`#p-home`).
 * ========================================================================== */

.ltsq-home-section {
	border-top: var(--lts-rule-section);
	padding: 28px 0 40px;
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--lts-gutter);
	box-sizing: border-box;
}

.ltsq-home-section--lead { padding-top: 36px; }

/* --------------------------------------------------------------------------
 * Section header
 *
 * The icon takes the section's stream colour; the title stays charcoal. That
 * split is deliberate — six coloured headings in a row would compete with the
 * cards, which are the thing actually carrying stream identity down the page.
 * ------------------------------------------------------------------------ */

.ltsq-sechead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.ltsq-sechead__icon { display: inline-flex; color: var(--lts-stream); }

.ltsq-sechead__title {
	margin: 0;
	flex: 1;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-section-header);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-ink);
}

.ltsq-sechead__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 1. Lead — hero + alerts rail
 * ------------------------------------------------------------------------ */

.ltsq-home-lead {
	display: grid;
	grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
	gap: 0 40px;
}

/* No featured story: the rail carries the section on its own. */
.ltsq-home-lead--norail { grid-template-columns: minmax(0, 1fr); }

/* ...and it is the only column, so the divider it draws beside the hero has
 * nothing to divide. Seen on Production 2026-09-16 with no featured story:
 * a stray rule down the left of the alerts. */
.ltsq-home-lead--norail .ltsq-alertrail {
	border-left: 0;
	border-top: 0;
	padding-left: 0;
	padding-top: 0;
}

.ltsq-hero { min-width: 0; }

.ltsq-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	width: 100%;
	background: var(--lts-ink);
	color: rgba(255, 255, 255, 0.28);
	overflow: hidden;
	text-decoration: none;
}

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

.ltsq-hero__badge {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: var(--lts-fs-kicker);
	padding: 6px 12px;
}

.ltsq-hero__title {
	margin: 20px 0 0;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-hero);
	line-height: var(--lts-lh-hero);
	font-weight: 600;
	text-wrap: pretty;
}

.ltsq-hero__title a { color: var(--lts-ink); text-decoration: none; }
.ltsq-hero__title a:hover { color: var(--lts-teal); }

.ltsq-hero__dek {
	margin: 12px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 18px;
	line-height: 1.55;
	color: var(--lts-text-dek);
	max-width: 60ch;
}

.ltsq-hero__meta { margin-top: 14px; }

/* --- Alerts rail --- */

.ltsq-alertrail {
	min-width: 0;
	border-left: var(--lts-rule-column);
	padding-left: 40px;
}

.ltsq-alertrail .ltsq-sechead {
	padding-bottom: 10px;
	border-bottom: var(--lts-rule-section);
	margin-bottom: 0;
}

.ltsq-alertrail .ltsq-sechead__title { font-size: 13px; }
.ltsq-alertrail .ltsq-sechead__link { font-size: 12px; }

.ltsq-alertrail__item {
	border-left: var(--lts-stream-border-left) solid var(--lts-severity);
	border-bottom: var(--lts-rule-hairline);
	padding: 14px 0 14px 14px;
}

.ltsq-alertrail__item:last-of-type { border-bottom: 0; }

.ltsq-alertrail__badge { background: var(--lts-severity); color: var(--lts-on-severity); padding: 3px 8px; }

.ltsq-alertrail__title {
	margin: 8px 0 4px;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.ltsq-alertrail__title a { color: var(--lts-ink); text-decoration: none; }
.ltsq-alertrail__title a:hover { color: var(--lts-teal); }

.ltsq-alertrail__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	color: var(--lts-text-muted);
}

/*
 * The governance note. Required surface — see inc/homepage.php.
 */
.ltsq-alertrail__note {
	margin: 20px 0 0;

	/*
	 * !important ON THE PADDING, and only here.
	 *
	 * Divi ships `.et_pb_text p { padding-bottom: 1em }` and
	 * `.et_pb_text p:last-of-type { padding-bottom: 0 }`. This note is a <p>,
	 * it is a padded BOX rather than a run of prose, and it is always the last
	 * paragraph in its module — so Divi's (0,2,1) rule flattened its bottom
	 * padding to zero against this class's (0,1,0), and the last line of the
	 * copy sat directly on the border. It reads as text clipped by the box.
	 *
	 * A longer selector could win on specificity, but every version of that
	 * couples this rule to where the note happens to sit in the homepage
	 * markup, which is exactly the positional coupling the chrome CSS above
	 * exists to avoid. One documented !important is the smaller cost.
	 *
	 * Sitewide scan for the same signature — a <p> with top padding and no
	 * bottom padding — found this element and nothing else, on eight page
	 * types, so this is deliberately not a blanket paragraph reset. Divi's 1em
	 * on our other paragraphs is absorbed by the layout and changing it
	 * globally would re-space all 21 screens.
	 */
	padding: var(--lts-space-3) !important;

	background: var(--lts-surface);
	border: 1px solid var(--lts-border);
	font-family: var(--lts-font-ui);
	font-size: 12px;
	line-height: 1.6;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Card grids
 * ------------------------------------------------------------------------ */

.ltsq-cards--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ltsq-cards--four  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* --- Developing story card --- */

.ltsq-card--story .ltsq-card__body { padding: var(--lts-space-3); }

.ltsq-card--story .ltsq-card__title {
	margin: 10px 0 6px;
	font-size: 20px;
	line-height: 1.25;
}

.ltsq-card__updated {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-card__count {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 600;
	color: var(--lts-stream-text);
}

.ltsq-card--story .ltsq-card__excerpt { font-size: 13.5px; color: var(--lts-text-muted); }

/* --- Grid card (Events, Directory): accent on TOP, not the left edge --- */

.ltsq-card--grid {
	display: block;
	border-left: 1px solid var(--lts-border);
	border-top: var(--lts-stream-border-top) solid var(--lts-stream);
}

.ltsq-card--grid .ltsq-card__body { padding: 14px; }

.ltsq-card--grid .ltsq-card__title {
	margin: 6px 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-card-title);
	font-weight: 700;
	line-height: var(--lts-lh-card-title);
}

/* Directory cards carry no image, and sit on white rather than surface. */
.ltsq-card--grid:not(:has(.ltsq-card__thumb)) { background: var(--lts-bg); padding: 0; }
.ltsq-card--grid:not(:has(.ltsq-card__thumb)) .ltsq-card__body { padding: var(--lts-space-3); }

.ltsq-card__kicker {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-stream-text);
}

/* "+2 more dates" under the date of an event shown once for its series
   (issue #200). Its own line, so a narrow card never starts one with "·". */
.ltsq-card__moredates { display: block; }

.ltsq-card--grid .ltsq-card__meta { margin-top: 6px; font-size: 12.5px; }

/* --- Compact card (homepage news / notices) --- */

.ltsq-card--compact { display: flex; gap: 14px; }

.ltsq-card--compact .ltsq-card__thumb { flex: 0 0 104px; }

.ltsq-card--compact .ltsq-card__body { padding: 12px 14px 12px 0; }

.ltsq-card--compact .ltsq-card__title {
	margin: 8px 0 4px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-card-title);
	font-weight: 700;
	line-height: var(--lts-lh-card-title);
}

.ltsq-card--compact .ltsq-card__excerpt {
	margin: 0 0 6px;
	font-size: var(--lts-fs-meta);
	line-height: 1.5;
	color: var(--lts-text-muted);
}

.ltsq-card--compact .ltsq-card__meta { font-size: 12px; }

/* --------------------------------------------------------------------------
 * 4. News | Notices
 * ------------------------------------------------------------------------ */

.ltsq-home-streams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 40px;
}

.ltsq-home-stream { min-width: 0; }
.ltsq-home-stream .ltsq-sechead { margin-bottom: var(--lts-space-3); }
.ltsq-home-stream .ltsq-cards { gap: 14px; }

/* The 2px rule between the two columns. */
.ltsq-home-stream + .ltsq-home-stream {
	border-left: var(--lts-rule-column);
	padding-left: 40px;
}

/* --------------------------------------------------------------------------
 * 6. Contribute band
 * ------------------------------------------------------------------------ */

.ltsq-contribute {
	border-top: var(--lts-rule-section);
	background: var(--lts-ink);
	color: #fff;
	padding: 36px 40px;
	margin: 0 auto 56px;
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	box-sizing: border-box;
	display: grid;
	/* Three columns since the app promo joined this band: contribute, then
	   organizations, then the app. The 980px rule below already collapses
	   every aside to a full-width block with a top rule, so the third one
	   needs no separate mobile treatment. */
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.ltsq-contribute__kicker { color: rgba(255, 255, 255, 0.55); }

.ltsq-contribute__title {
	margin: var(--lts-space-2) 0 0;
	font-family: var(--lts-font-display);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.ltsq-contribute__body {
	margin: 12px 0 0;
	max-width: 56ch;
	font-family: var(--lts-font-ui);
	font-size: 15px;
	line-height: 1.7;
	color: var(--lts-footer-text);
}

.ltsq-contribute__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.ltsq-contribute__actions .ltsq-btn { font-size: 15px; padding: 12px 22px; }

/* A ghost button for a dark ground — the secondary button's charcoal outline
   would be invisible here. */
.ltsq-btn--ghost {
	background: transparent;
	color: #fff !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.ltsq-btn--ghost:hover,
.ltsq-btn--ghost:focus { box-shadow: inset 0 0 0 2px #fff; }

.ltsq-contribute__aside {
	border-left: 2px solid rgba(255, 255, 255, 0.18);
	padding-left: 40px;
}

.ltsq-contribute__link {
	display: inline-flex;
	align-items: center;
	gap: var(--lts-space-2);
	margin-top: var(--lts-space-3);
	font-family: var(--lts-font-ui);
	font-size: 15px;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none;
}

/* A second link in the same column (the organizations guide, #313) goes on
   its own line rather than wrapping beside the first. */
.ltsq-contribute__link + .ltsq-contribute__link {
	display: flex;
	width: fit-content;
}

/* --------------------------------------------------------------------------
 * Responsive — the full pass is phase 12.
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {

	.ltsq-home-lead,
	.ltsq-home-streams,
	.ltsq-contribute { grid-template-columns: minmax(0, 1fr); gap: var(--lts-space-5); }

	.ltsq-alertrail,
	.ltsq-home-stream + .ltsq-home-stream,
	.ltsq-contribute__aside {
		border-left: 0;
		border-top: var(--lts-rule-column);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	.ltsq-contribute__aside { border-top-color: rgba(255, 255, 255, 0.18); }

	.ltsq-cards--three,
	.ltsq-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ltsq-hero__title { font-size: 26px; }
	.ltsq-hero__dek { font-size: 16px; }
	.ltsq-contribute { padding: var(--lts-space-4); }
}

@media (max-width: 640px) {
	.ltsq-cards--three,
	.ltsq-cards--four { grid-template-columns: minmax(0, 1fr); }
	.ltsq-card--compact { flex-direction: column; gap: 0; }
	.ltsq-card--compact .ltsq-card__thumb { flex-basis: auto; aspect-ratio: 16 / 9; }
	.ltsq-card--compact .ltsq-card__body { padding: 12px 14px; }
}

/* ==========================================================================
 * ARTICLE SINGLES — phase 5
 *
 * Markup from inc/article-parts.php and the reworked timeline in
 * inc/developing-stories.php. Values from artboards 03, 04, 06 and 15.
 * ========================================================================== */

.ltsq-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0 40px;
	padding: 0 var(--lts-gutter) 44px;
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin-inline: auto;
	box-sizing: border-box;
}

.ltsq-article__main { min-width: 0; padding-top: 28px; }

.ltsq-article__rail {
	min-width: 0;
	border-left: var(--lts-rule-column);
	padding: 28px 0 0 40px;
}

/* --------------------------------------------------------------------------
 * Breadcrumb, badges, headline, dek
 * ------------------------------------------------------------------------ */

.ltsq-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	flex-wrap: wrap;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	color: var(--lts-text-muted);
}

.ltsq-article__badges {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	flex-wrap: wrap;
	margin-top: var(--lts-space-3);
}

.ltsq-article__badges .ltsq-type-badge { padding: 4px 9px; }
.ltsq-article__badges .ltsq-badge { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; padding: 4px 9px; }

/*
 * The article H1. Divi's own post-title module is not used on these templates,
 * so this is the single <h1> on the page — directory-browsing.spec.ts asserts
 * exactly one, and more than one would also be an accessibility regression.
 */
.ltsq-article__title {
	margin: var(--lts-space-3) 0 0;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-h1);
	line-height: var(--lts-lh-h1);
	font-weight: 600;
	color: var(--lts-ink);
	max-width: var(--lts-measure-h1);
	text-wrap: pretty;
}

.ltsq-article__dek {
	margin: 18px 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-dek);
	line-height: var(--lts-lh-dek);
	font-weight: 400;
	color: var(--lts-text-dek);
	max-width: var(--lts-measure-dek);
}

/* --------------------------------------------------------------------------
 * Byline
 * ------------------------------------------------------------------------ */

.ltsq-article__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding: 14px 0;
	border-top: var(--lts-rule-hairline);
	border-bottom: var(--lts-rule-hairline);
}

.ltsq-article__author {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lts-text-muted);
}

/* The byline avatar is larger than a card's. */
.ltsq-article__author .ltsq-card__avatar { width: 22px; height: 22px; font-size: 10px; }
.ltsq-article__author .ltsq-card__verified .ltsq-icon { font-size: 14px !important; }

.ltsq-article__times {
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	color: var(--lts-text-muted);
}

.ltsq-article__spacer { flex: 1; }

.ltsq-article__action {
	display: inline-flex;
	align-items: center;
	/* Declared, not inherited from a button reset — see the note on
	 * button.ltsq-save for why that reset must stay out of this. */
	background: transparent;
	gap: 7px;
	/*
	 * Declared, not inherited. The byline is a flex row with its own
	 * line-height, and an <a> picks that up while a <button> uses the UA's
	 * `normal` — so Save and Share, which the design draws as one pair of
	 * identical controls, came out 9px different in height the moment Save
	 * became a real form button in phase 6. The artboard defines this box as
	 * padding + font-size, so pin the third term.
	 */
	line-height: 1.4;
	padding: 7px 13px;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 600;
	color: var(--lts-ink) !important;
	text-decoration: none;
	transition: border-color var(--lts-transition);
}

.ltsq-article__action:hover,
.ltsq-article__action:focus { border-color: var(--lts-teal); }

/* --------------------------------------------------------------------------
 * Hero image and body
 * ------------------------------------------------------------------------ */

.ltsq-article__hero { margin: var(--lts-space-4) 0 0; }

.ltsq-article__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: var(--lts-border);
}

.ltsq-article__hero figcaption {
	margin-top: 10px;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	color: var(--lts-text-muted);
}

/*
 * The body copy.
 *
 * Scoped to .ltsq-article__body — the container [ltsq_article_body] emits —
 * and NOT to the row wrapper. That distinction is the whole point: the source
 * box, the story callout and the timeline are siblings of the prose inside the
 * same row, and each carries its own <h2>. A rule written as
 * `.lts-article-body h2` (0,1,1) swept all of them up and beat
 * `.ltsq-sourcebox__kicker` (0,1,0), rendering an 800-weight 14px uppercase
 * kicker as a 28px Newsreader headline. Scope prose typography to the prose.
 */
.ltsq-article__body {
	max-width: var(--lts-measure-body);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-body);
	line-height: var(--lts-lh-body);
	font-weight: 400;
	color: var(--lts-text-body);
}

/*
 * Per-stream headline scale. The artboards do not use one article H1 size:
 * News is 52px/20ch (03), the Notice single 46px/20ch (15), the Alert band
 * 46px/24ch (06) and the Developing Story header 48px/22ch (04). That is a
 * deliberate hierarchy — a News story is the flagship treatment — so it is
 * expressed here rather than flattened to the single row the build spec's
 * typography table records. The alert and story headers carry their own
 * classes; only the shared shell needs a stream-scoped override.
 */
.ltsq-article[data-stream="community_notice"] .ltsq-article__title { font-size: 46px; }
.ltsq-article[data-stream="community_notice"] .ltsq-article__dek { font-size: 19px; }

.ltsq-article__body h2 {
	font-family: var(--lts-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--lts-ink);
	margin: var(--lts-space-5) 0 var(--lts-space-3);
}

.ltsq-article__body h3 {
	font-family: var(--lts-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--lts-ink);
	margin: var(--lts-space-4) 0 var(--lts-space-2);
}

.ltsq-article__body p,
.ltsq-article__body ul,
.ltsq-article__body ol {
	margin: 0 0 var(--lts-space-3);
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

.ltsq-article__body li { margin-bottom: 8px; }

/* Facebook post embeds keep their own pixel size, capped to the column; the
   class is added in ltsq_article_body_unfit_social_embeds() (#280). */
.ltsq-article__body .ltsq-social-embed {
	display: block;
	max-width: 100%;
}

.ltsq-article__body blockquote {
	margin: var(--lts-space-4) 0;
	padding-left: var(--lts-space-3);
	border-left: 3px solid var(--lts-stream);
	font-family: var(--lts-font-display);
	font-size: 22px;
	line-height: 1.45;
	color: var(--lts-ink);
}

/* --------------------------------------------------------------------------
 * Developing-story callout and source box
 * ------------------------------------------------------------------------ */

.ltsq-storycallout {
	margin-top: 28px;
	background: var(--lts-surface);
	border: 1px solid var(--lts-border);
	border-left: var(--lts-stream-border-left) solid var(--lts-stream);
	padding: 18px 20px;
	max-width: var(--lts-measure-body);
}

.ltsq-storycallout__kicker {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-stream-text);
}

.ltsq-storycallout__title {
	margin: var(--lts-space-2) 0 6px;
	font-family: var(--lts-font-display);
	font-size: 22px;
	font-weight: 600;
}

.ltsq-storycallout__title a { color: var(--lts-ink) !important; text-decoration: none; }
.ltsq-storycallout__title a:hover { color: var(--lts-stream-text) !important; }

.ltsq-storycallout__body {
	margin: 0 0 12px;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	line-height: 1.6;
	color: var(--lts-text-muted);
}

.ltsq-sourcebox {
	margin-top: var(--lts-space-4);
	border: 1px solid var(--lts-border);
	padding: 18px 20px;
	max-width: var(--lts-measure-body);
}

.ltsq-sourcebox__kicker {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-sourcebox__body {
	margin: var(--lts-space-2) 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-dek);
}

/* --------------------------------------------------------------------------
 * Alert severity band
 *
 * One rule set; three severities; the colour comes from --lts-severity.
 * Building this in Divi would have meant three duplicate templates, because
 * Divi cannot recolour a section from a taxonomy term.
 * ------------------------------------------------------------------------ */

.ltsq-alertband {
	background: var(--lts-severity);
	color: var(--lts-on-severity); /* near-black on advisory/important (M21) */
}

/*
 * An alert past its own expiry (backlog/48 PR 8, QA front-3). The shortcode
 * drops data-severity so no severity colour shows, and the :root fallback for
 * that is the hairline grey with WHITE text, which is unreadable. So an expired
 * band sets its own neutral pair: body text on the card surface, with a
 * hairline to separate it from the white page below.
 */
.ltsq-alertband[data-expired] {
	--lts-severity: var(--lts-surface);
	--lts-on-severity: var(--lts-text);
	--lts-severity-text: var(--lts-text-muted);
	border-bottom: 1px solid var(--lts-border);
}

/*
 * A FULL-BLEED BAND BUTTS AGAINST THE NAV.
 *
 * Divi gives every Theme Builder body section 54px of top padding. On every
 * other template that is right: the first thing in the body is content at the
 * 1240px measure, and 54px of air above it reads as deliberate. These two are
 * the design's only full-bleed elements below the nav — they run the whole
 * viewport and recolour the top of the page, one by alert severity and one for
 * a developing story — and a white stripe between the charcoal nav and a
 * full-width coloured band reads as a rendering fault rather than as spacing.
 *
 * Confirmed by measuring every template rather than by reading the markup:
 * across sixteen pages exactly two elements below the nav are viewport-width,
 * and both are listed here. The urgent bar is also full-bleed but sits ABOVE
 * the masthead, so it is not part of this.
 *
 * NO `.et-l--body` IN THE SELECTOR, and that is not an oversight. The alert
 * template wraps its body layout in `.et-l--body`; the developing-story
 * template does not — its section sits straight inside `#main-content`. An
 * earlier version of this rule required that wrapper and silently fixed the
 * alert page while leaving the story page broken, which is exactly the class of
 * bug the redesign keeps hitting: a selector that describes where something
 * happens to sit rather than what it is.
 *
 * :has() so the condition is "this section starts with a full-bleed band",
 * matching the reasoning behind the .et_pb_column:has(.ltsq-identity) rule.
 * Only padding-TOP — the section's bottom padding and its 60px row gap still
 * separate the band from whatever follows it.
 */
.et_pb_section:has(> .et_pb_row:first-child .ltsq-alertband),
.et_pb_section:has(> .et_pb_row:first-child .ltsq-storyhead) {
	padding-top: 0 !important;
}

/*
 * The alert single's row gap, though, is the ~100px of dead space between the
 * band and the byline (review §5.1, screen 06): 60px gap + the main column's
 * 28px + the byline's 22px and top rule. The artboard has 28px and no rule.
 * Alert only; the developing-story header keeps its spacing.
 */
.et_pb_section:has(> .et_pb_row:first-child .ltsq-alertband) {
	gap: 0 !important;
	row-gap: 0 !important;
}

.ltsq-article[data-stream="alert"] .ltsq-article__byline {
	margin-top: 0;
	border-top: 0;
}

.ltsq-alertband__inner {
	padding: 28px var(--lts-gutter);
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin-inline: auto;
	box-sizing: border-box;
}

.ltsq-alertband__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Inverted: white fill, severity-coloured text (the deeper text shade on amber/orange, M21). */
.ltsq-alertband__badge {
	background: #fff;
	color: var(--lts-severity-text);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-badge);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--lts-radius);
}

.ltsq-alertband__effect {
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-on-severity);
	opacity: 0.88;
}

.ltsq-alertband__title {
	margin: 14px 0 0;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-hero);
	font-weight: 600;
	line-height: 1.1;
	max-width: 24ch;
	color: var(--lts-on-severity);
	text-wrap: pretty;
}

.ltsq-alertband__lede {
	margin: 14px 0 0;
	max-width: 62ch;
	font-family: var(--lts-font-ui);
	font-size: 19px;
	line-height: 1.55;
	color: var(--lts-on-severity);
}

/* --------------------------------------------------------------------------
 * Developing Story header
 * ------------------------------------------------------------------------ */

.ltsq-storyhead {
	background: var(--lts-surface);
	border-bottom: var(--lts-rule-section);
}

.ltsq-storyhead__inner {
	padding: 32px var(--lts-gutter) 26px;
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin-inline: auto;
	box-sizing: border-box;
}

.ltsq-storyhead__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ltsq-storyhead__top .ltsq-type-badge { font-size: var(--lts-fs-kicker); padding: 4px 10px; }

.ltsq-storyhead__kicker {
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-storyhead__title {
	margin: 12px 0 0;
	font-family: var(--lts-font-display);
	font-size: 48px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lts-ink);
	max-width: 22ch;
	text-wrap: pretty;
}

.ltsq-storyhead__desc {
	margin: 12px 0 0;
	max-width: 64ch;
	font-family: var(--lts-font-ui);
	font-size: 18px;
	line-height: 1.6;
	color: var(--lts-text-dek);
}

/* A story that has become a news story (roadmap #70): in place of the
   contribute button, a pointer to its final report. */
.ltsq-storyhead__complete {
	flex-basis: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--lts-border);
	border-left: 3px solid var(--lts-stream);
	background: var(--lts-surface);
	font-family: var(--lts-font-ui);
	font-size: 15px;
	line-height: 1.5;
	color: var(--lts-ink);
}

.ltsq-storyhead__complete a { font-weight: 700; }

.ltsq-storyhead__stats {
	display: flex;
	align-items: flex-end;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: var(--lts-rule-hairline);
}

.ltsq-storyhead__spacer { flex: 1; }
.ltsq-storyhead__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ltsq-storyhead__actions .ltsq-btn { font-size: 15px; }

.ltsq-stat__label {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-stat__value {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: 28px;
	font-weight: 600;
	color: var(--lts-ink);
}

/* --------------------------------------------------------------------------
 * Timeline
 * ------------------------------------------------------------------------ */

.ltsq-story-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--lts-space-4);
	border-left: var(--lts-rule-column);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ltsq-story-timeline-item {
	position: relative;
	padding: 0;
	border: 0;
}

.ltsq-story-timeline__marker {
	position: absolute;
	left: -31px;
	top: 5px;
	width: 14px;
	height: 14px;
	background: var(--lts-stream);
}

/* A community contribution is marked in the neutral hairline, not the story
   blue — it is an input to the story, not an update of it. */
.ltsq-story-timeline--community .ltsq-story-timeline__marker { background: var(--lts-border); }

.ltsq-story-timeline__when {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-stream-text);
}

.ltsq-story-timeline__title {
	margin: 6px 0 8px;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-card-title-archive);
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-story-timeline__title a { color: var(--lts-ink) !important; text-decoration: none; }
.ltsq-story-timeline__title a:hover { color: var(--lts-stream-text) !important; }

.ltsq-story-timeline__body {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.7;
	color: var(--lts-text-body);
	max-width: 62ch;
}

/* A contribution is shown in full (roadmap #70): its paragraphs, then its
   photo or clip. Divi's paragraph rules must not add their own gaps. */
.ltsq-story-timeline__body p { margin: 0 0 0.8em !important; padding: 0 !important; }
.ltsq-story-timeline__body p:last-child { margin-bottom: 0 !important; }

.ltsq-story-timeline__media {
	margin: 12px 0 0;
	max-width: 62ch;
}

.ltsq-story-timeline__media img,
.ltsq-story-timeline__media video {
	display: block;
	width: 100%;
	height: auto;
}

/* A contribution's permalink is its anchor here: land it below the sticky
   masthead, and mark which entry the link pointed at. */
.ltsq-story-timeline-item[id] { scroll-margin-top: 96px; }
.ltsq-story-timeline-item:target .ltsq-story-timeline__title { color: var(--lts-stream-text); }

/*
 * The AI-update disclosure. A required compensating control under CLAUDE.md's
 * 2026-08-26 exception — see ltsq_build_story_timeline_entries().
 */
.ltsq-story-disclosure {
	margin-top: 12px;
	border: 1px solid var(--lts-border);
	background: var(--lts-surface);
	padding: 12px 14px;
	max-width: 62ch;
}

.ltsq-story-disclosure__kicker {
	display: flex;
	align-items: center;
	gap: var(--lts-space-2);
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: var(--lts-ls-section-header);
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-story-disclosure__body {
	margin: 6px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Rail additions
 * ------------------------------------------------------------------------ */

.ltsq-rail__headrule {
	padding-bottom: 10px;
	border-bottom: var(--lts-rule-section);
	margin-bottom: 0;
}

.ltsq-rail__headrule .ltsq-rail__head { margin: 0; }

.ltsq-rail__item {
	display: block;
	border-left: var(--lts-stream-border-left) solid var(--lts-stream);
	border-bottom: var(--lts-rule-hairline);
	padding: 12px 0 12px 12px;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lts-ink) !important;
	text-decoration: none;
}

.ltsq-rail__item:last-child { border-bottom: 0; }
.ltsq-rail__item:hover { color: var(--lts-stream-text) !important; }

.ltsq-rail__itemmeta {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {

	.ltsq-article { grid-template-columns: minmax(0, 1fr); gap: var(--lts-space-5); }

	.ltsq-article__rail {
		border-left: 0;
		border-top: var(--lts-rule-column);
		padding: var(--lts-space-4) 0 0;
	}

	.ltsq-article__title { font-size: 30px; }
	.ltsq-article__dek { font-size: 17px; }
	.ltsq-article__body { font-size: 17px; }

	/* The notice single's larger desktop size is more specific than the two
	   rules above, so it needs its own step down (review §5.2). */
	.ltsq-article[data-stream="community_notice"] .ltsq-article__title { font-size: 30px; }
	.ltsq-article[data-stream="community_notice"] .ltsq-article__dek { font-size: 17px; }

	.ltsq-alertband__title { font-size: 30px; }
	.ltsq-alertband__lede { font-size: 17px; }
	.ltsq-storyhead__title { font-size: 30px; }

	.ltsq-storyhead__stats { gap: var(--lts-space-4); }
	.ltsq-storyhead__spacer { display: none; }
	.ltsq-storyhead__actions { width: 100%; }
	.ltsq-storyhead__actions .ltsq-btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
 * Saved items and story follow (phase 6)
 *
 * The controls are <form><button> for a signed-in reader and <a> for an
 * anonymous one — see inc/saved-items.php for why. The form exists only to
 * carry the nonce, so it is display:contents: the button has to be a direct
 * flex child of the byline or the actions row, exactly where the anchor used
 * to sit, or the two states lay out differently.
 *
 * display:contents is safe here because the form has no box of its own to
 * lose — no background, border, padding or margin — and its only rendered
 * child is the button. Its accessibility semantics are irrelevant: a form
 * element is not exposed as a landmark unless it is named.
 * ------------------------------------------------------------------------ */

.ltsq-save-form {
	display: contents;
	margin: 0;
	padding: 0;
}

/*
 * Reset the UA button so .ltsq-article__action and .ltsq-btn style it exactly
 * as they style the anchor that shipped in phase 5.
 *
 * KEEP THIS RULE AS SHORT AS IT IS, and never add a property that a component
 * class might also set. `button.ltsq-save` is (0,1,1) and every component class
 * it is combined with is (0,1,0), so ANYTHING declared here wins. Three
 * properties have been tried and removed:
 *
 *   `font: inherit` made the button render at the BYLINE's type (14px/500)
 *   instead of the control's (13px/600), beside a Share link that got it right.
 *
 *   `border: 0` removed the control's 1px hairline and 11px of its height.
 *
 *   `background: none` made the phase 9 Follow button INVISIBLE — white text on
 *   no background — because that button is `.ltsq-btn--primary`, which is a
 *   component that does set a background.
 *
 * None of the three was needed: an author rule already beats the UA stylesheet,
 * so a component that wants a background, a border or a font declares one. What
 * is left below is only what the UA imposes and no component would ever set.
 */
button.ltsq-save {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ltsq-save { text-decoration: none; }

/* The saved/following state. Kept as a border and ink change rather than a
 * fill: these sit next to Share and the primary "Add what you know" button,
 * and a filled bookmark would read as the page's main action. */
.ltsq-article__action.is-saved,
.ltsq-btn--secondary.is-saved {
	border-color: var(--lts-stream);
	color: var(--lts-stream-text) !important;
}

.ltsq-article__action.is-saved .ltsq-icon,
.ltsq-btn--secondary.is-saved .ltsq-icon {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
 * Organization public profile — artboard 14 (phase 9)
 *
 * In the design system rather than in ltsq-account.css, because this is a
 * PUBLIC page: ltsq-account.css is gated to /account/, /sign-in/ and the
 * console, and gating it to a public post type as well would ship the whole
 * account stylesheet to every reader of a directory listing.
 * ------------------------------------------------------------------------ */

/* The page wrapper chain carries no padding on this template, so the gutter
   lives on the profile itself; the max-width grows by the same amount so the
   desktop content width stays at --lts-maxw. */
.ltsq-orgprofile {
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin: 0 auto;
	padding-inline: var(--lts-gutter);
	box-sizing: border-box;
}

/*
 * Widen Divi's own wrapper on this one template.
 *
 * Setting _et_pb_use_builder on the organization record makes Divi's single.php
 * skip its title and sidebar, but the page still renders inside `.container`,
 * which the Customizer caps at 1080px and 80% width — about 923px at a 1440px
 * viewport, against a 1240px design. Scoped to the single organization body
 * class so it cannot affect any other template, and expressed against
 * `.container`, which is stable Divi API, rather than a positional class.
 */
body.single-ltsq_org #main-content .container {
	width: 100%;
	max-width: var(--lts-maxw);
	padding-left: var(--lts-space-3);
	padding-right: var(--lts-space-3);
}

.ltsq-orgprofile__band {
	border-bottom: var(--lts-rule-section);
	padding: var(--lts-space-5) 0 0;
}

.ltsq-orgprofile__head {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.ltsq-orgprofile__tile {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
	background: var(--lts-stream);
	color: #fff;
	font-family: var(--lts-font-display);
	font-size: 34px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ltsq-orgprofile__headtext { flex: 1; min-width: 280px; }

.ltsq-orgprofile__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lts-stream-text);
}

.ltsq-orgprofile__swatch {
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--lts-stream);
}

.ltsq-orgprofile__name {
	margin: 8px 0 0;
	font-family: var(--lts-font-display);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--lts-ink);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * badge-check, in the site teal. NEVER a shield, never a crest, never the word
 * "official" — Lincoln Town Square is privately owned and not affiliated with
 * the Town of Lincoln, and a shield beside an organization's name is precisely
 * the visual that implies otherwise. The rail panel next to it says so in
 * words; this is the same statement in an icon.
 */
.ltsq-orgprofile__verified { display: inline-flex; }
.ltsq-orgprofile__verified .ltsq-icon { color: var(--lts-teal); }

.ltsq-orgprofile__desc {
	margin: 10px 0 0;
	max-width: 62ch;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lts-text-dek);
}

.ltsq-orgprofile__provenance {
	margin: 10px 0 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	color: var(--lts-text-muted);
}

.ltsq-orgprofile__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* The Share button's outline treatment, from the artboard: a 2px ink border
 * rather than the hairline the secondary button uses elsewhere, because it sits
 * beside a filled primary and has to hold its own. */
.ltsq-btn--outline {
	border: 2px solid var(--lts-ink);
	background: transparent;
	color: var(--lts-ink) !important;
	font-weight: 700;
	padding: 9px 16px;
}

.ltsq-btn--outline:hover,
.ltsq-btn--outline:focus {
	border-color: var(--lts-teal);
	color: var(--lts-teal) !important;
}

/* --------------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------------ */

.ltsq-orgprofile__tabs {
	display: flex;
	margin-top: var(--lts-space-4);
	flex-wrap: wrap;
}

.ltsq-orgprofile__tab {
	padding: 12px 18px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	font-weight: 600;
	line-height: 1.4;
	color: var(--lts-text-muted) !important;
	text-decoration: none;
	/* The active underline sits ON the band's bottom rule, so the tab strip and
	 * the 2px section rule read as one edge rather than two stacked lines. */
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.ltsq-orgprofile__tab:first-child { padding-left: 0; }

.ltsq-orgprofile__tab:hover,
.ltsq-orgprofile__tab:focus { color: var(--lts-ink) !important; }

.ltsq-orgprofile__tab.is-current {
	color: var(--lts-ink) !important;
	font-weight: 700;
	border-bottom-color: var(--lts-stream);
}

/* --------------------------------------------------------------------------
 * Body and rail
 * ------------------------------------------------------------------------ */

.ltsq-orgprofile__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0 40px;
	padding: 28px 0 44px;
}

.ltsq-orgprofile__main { min-width: 0; }

/* No rail content (unverified, no linked listing, already claimed): no empty
   column and no bare divider (review §5.1, screen 14). */
.ltsq-orgprofile__grid--full { grid-template-columns: minmax(0, 1fr); }

.ltsq-orgprofile__rail {
	min-width: 0;
	border-left: 2px solid var(--lts-border);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.ltsq-orgprofile__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ltsq-orgprofile__about {
	max-width: 66ch;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-body);
	line-height: 1.7;
	color: var(--lts-text-body);
}

.ltsq-orgdetails {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ltsq-orgdetail {
	display: flex;
	gap: 10px;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-nav);
	line-height: 1.5;
	color: var(--lts-text-dek);
}

/* The placeholder glyph colour from the token table — muted enough that the
 * value reads first and the icon only tells you which kind of value it is. */
.ltsq-orgdetail .ltsq-icon {
	flex: 0 0 16px;
	margin-top: 3px;
	color: var(--lts-placeholder-glyph);
}

.ltsq-panel--verified {
	border-left: 4px solid var(--lts-teal);
	background: var(--lts-surface);
}

.ltsq-panel--verified .ltsq-panel__title .ltsq-icon { color: var(--lts-teal); }

/* --------------------------------------------------------------------------
 * 390px
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.ltsq-orgprofile__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lts-space-4) 0;
	}

	.ltsq-orgprofile__rail {
		border-left: 0;
		border-top: 2px solid var(--lts-border);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	.ltsq-orgprofile__name { font-size: 30px; }

	.ltsq-orgprofile__tile {
		width: 56px;
		height: 56px;
		flex: 0 0 56px;
		font-size: 22px;
	}

	/* The tab strip scrolls rather than wrapping to two rows — four wrapped
	 * tabs push the whole page down before a reader has seen anything. */
	.ltsq-orgprofile__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.ltsq-orgprofile__tab {
		flex: none;
		white-space: nowrap;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.ltsq-orgprofile__actions .ltsq-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
 * MOVED HERE FROM ltsq-account.css IN PHASE 9, and the reason matters.
 *
 * The identity switcher is rendered by [ltsq_masthead] — so it appears in the
 * chrome of EVERY page, on every signed-in org member's screen. Its styles were
 * written in phase 7 into ltsq-account.css, which is deliberately gated to
 * /account/, /sign-in/ and the organization console. Everywhere else the
 * control rendered as a bare <details>: a browser disclosure triangle, an
 * unstyled avatar, and the menu in the page flow rather than as a dropdown.
 *
 * Global chrome belongs in the global stylesheet. Found by loading an
 * organization's public profile as a signed-in member — the one combination
 * neither phase 7 nor phase 8 happened to look at.
 * ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
 * Identity switcher
 *
 * <details>/<summary>, no JavaScript. Whichever row is picked is the name that
 * goes on anything submitted next, so the current identity is marked
 * unmistakably and an organization that cannot post right now is shown greyed
 * and inert rather than hidden — somebody looking for their shop needs to be
 * told why it is not selectable, not left wondering where it went. Same rules
 * as PostingAsSheet.tsx.
 * ------------------------------------------------------------------------ */

/*
 * THE STACKING FIX, and it has to reach outside our own markup.
 *
 * Divi wraps every Theme Builder module in `.et_pb_column_N_tb_header` carrying
 * `position: relative; z-index: 2`. The masthead is in one such column and the
 * stream nav is in the next, both at z-index 2 — so they are siblings in one
 * stacking context and DOCUMENT ORDER decides, which puts the nav on top. No
 * z-index on a descendant of the masthead can escape that: a child cannot
 * out-rank its own stacking context's peer.
 *
 * The dropdown therefore opened *behind* the nav bar, and only in the strip
 * where the two overlap — visible as the menu's middle third being sliced out.
 * elementFromPoint() is what proves it; a screenshot alone looks like a
 * rendering artifact.
 *
 * So the containing COLUMN is what gets lifted. Matched with :has() on our own
 * class rather than on Divi's positional `_1_tb_header` number, which changes
 * whenever somebody reorders the header layout. `.et_pb_column` is stable Divi
 * API; the numbered variant is not.
 */
.et_pb_column:has(.ltsq-identity) { z-index: 3; }

.ltsq-identity {
	position: relative;
	z-index: 60;
}

.ltsq-identity > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .10);
	padding: 6px 12px 6px 8px;
	cursor: pointer;
	list-style: none;
}

.ltsq-identity > summary::-webkit-details-marker { display: none; }
.ltsq-identity > summary::marker { content: ""; }

.ltsq-identity__avatar {
	width: 26px;
	height: 26px;
	flex: none;
	background: var(--lts-teal);
	color: #fff;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-kicker);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ltsq-identity__text { line-height: 1.2; text-align: left; }

.ltsq-identity__kicker {
	display: block;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.ltsq-identity__name {
	display: block;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-meta);
	font-weight: 700;
	color: #fff;
}

.ltsq-identity__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	min-width: 280px;
	background: #fff;
	border: 1px solid var(--lts-border);
	box-shadow: 0 6px 24px rgba(32, 30, 29, .18);
	padding: var(--lts-space-2);
}

.ltsq-identity__blurb {
	margin: 4px 6px var(--lts-space-2);
	font-family: var(--lts-font-ui);
	font-size: 12px;
	line-height: 1.5;
	color: var(--lts-text-muted);
}

.ltsq-identity__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 8px;
	font-family: var(--lts-font-ui);
	font-size: 14px;
	color: var(--lts-ink) !important;
	text-decoration: none;
}

.ltsq-identity__row:hover { background: var(--lts-surface); }

.ltsq-identity__row .ltsq-identity__avatar { width: 30px; height: 30px; }

.ltsq-identity__rowname { font-weight: 700; }

.ltsq-identity__rowsub {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--lts-text-muted);
}

/* Inert, not hidden. */
.ltsq-identity__row.is-disabled {
	background: var(--lts-surface);
	color: var(--lts-text-muted) !important;
	cursor: not-allowed;
}

.ltsq-identity__row.is-disabled .ltsq-identity__avatar {
	background: var(--lts-border);
	color: var(--lts-text-muted);
}


@media (max-width: 900px) {

	/*
	 * The switcher collapses to its avatar and chevron.
	 *
	 * At 375px the masthead already carries a logo, a date kicker, a wordmark,
	 * search, the saved badge and Contribute. A fourth text control squeezed the
	 * kicker column to about ten pixels and wrapped "THU 10 SEPTEMBER" to ONE
	 * LETTER PER LINE. The names are still in the menu itself, which is where
	 * somebody choosing an identity actually reads them.
	 *
	 * Scoped to the SUMMARY, not to .ltsq-identity__text everywhere: the org
	 * composer's "posting as" chip reuses the same two inner classes, and the
	 * unscoped version hid its text too.
	 */
	.ltsq-identity > summary .ltsq-identity__text { display: none; }

	.ltsq-identity > summary {
		gap: 4px;
		padding: 6px 8px;
		min-height: 44px;
	}

	.ltsq-identity__menu {
		min-width: 0;
		width: min(88vw, 300px);
	}
}

/* --------------------------------------------------------------------------
 * The standard pages — screens 10, 11, 12 and 18 (phase 11)
 *
 * In the design system rather than in ltsq-account.css because these four are
 * public pages. The account stylesheet is gated, and these share only its
 * panel/field/table components, which the gate now includes them for.
 * ------------------------------------------------------------------------ */

/*
 * Side gutter inside the wrapper (review §5.2). These pages are Divi
 * full-width builder pages with no .container, so nothing else pads them:
 * at 1440 max-width centring put the content at x=100 and hid the problem,
 * and below ~1290px the body ran to the viewport edge while the header and
 * footer kept their 24px. The wider max-width keeps x=100 at 1440.
 */
.ltsq-pagegrid {
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0 40px;
	padding: 28px var(--lts-gutter) 44px;
	box-sizing: border-box;
}

.ltsq-pagegrid__main { min-width: 0; }

.ltsq-pagegrid__rail {
	min-width: 0;
	border-left: 2px solid var(--lts-border);
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ltsq-pagegrid__rail .ltsq-panel { margin: 0; }

/* --------------------------------------------------------------------------
 * Screen 10 — the three route cards
 *
 * A 3px top border in the stream colour, which is the same cue the homepage
 * stat cells and the Events/Directory grid cards use. A reader who has seen the
 * purple on an event anywhere else already knows what the purple card is for.
 * ------------------------------------------------------------------------ */

.ltsq-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: var(--lts-space-5);
}

.ltsq-route {
	border: 1px solid var(--lts-border);
	border-top: 3px solid var(--lts-stream);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ltsq-route__title {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-route__body {
	margin: 0;
	flex: 1;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-dek);
}

.ltsq-route__cta {
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lts-stream-text) !important;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * "Posting as"
 * ------------------------------------------------------------------------ */

.ltsq-postingas {
	border: 1px solid var(--lts-border);
	background: var(--lts-surface);
	padding: 14px 16px;
	margin: 0 0 var(--lts-space-3);
	max-width: 660px;
}

.ltsq-postingas__name {
	margin: 4px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 15px;
	font-weight: 700;
	color: var(--lts-ink);
}

.ltsq-postingas__body {
	margin: 6px 0 0;
	font-family: var(--lts-font-ui);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--lts-text-muted);
}

/* --------------------------------------------------------------------------
 * Panels used by these pages
 * ------------------------------------------------------------------------ */

.ltsq-steps {
	margin: 0;
	padding-left: 18px;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--lts-text-muted);
}

.ltsq-panel__links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--lts-font-ui);
	font-size: 13.5px;
	line-height: 1.9;
}

/*
 * The emergency diversion. Alert red, on both screens that carry it, because
 * this is the one panel where being noticed matters more than fitting in.
 */
.ltsq-panel--emergency {
	border: 1px solid var(--lts-border);
	border-left: 4px solid var(--lts-alert);
	background: var(--lts-surface);
}

.ltsq-panel--emergency .ltsq-panel__title { color: var(--lts-alert); }
.ltsq-panel--emergency .ltsq-panel__title .ltsq-icon { color: var(--lts-alert); }

.ltsq-panel--disclosure {
	border: 1px solid var(--lts-border);
	border-left: 4px solid var(--lts-ink);
	background: var(--lts-surface);
	max-width: 76ch;
}

/* --------------------------------------------------------------------------
 * Screen 11 — placements
 * ------------------------------------------------------------------------ */

.ltsq-placements {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: var(--lts-space-5);
}

.ltsq-placement {
	border: 1px solid var(--lts-border);
	padding: 16px;
}

.ltsq-placement__size {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-badge);
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--lts-text-muted);
}

.ltsq-placement__label {
	margin: 8px 0 6px;
	font-family: var(--lts-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-placement__body {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-excerpt);
	line-height: 1.6;
	color: var(--lts-text-dek);
}

/*
 * The listing tiers were a .ltsq-orgtable here until 2026-09-17, with a 520px
 * minimum, a 640px stacking block and !important on the cells to beat
 * ltsq-account.css's own 640px. They are three columns now
 * (ltsq-ad-flow.css section G), so all of that is gone rather than ported.
 */

/* --------------------------------------------------------------------------
 * Screen 12 — the ownership callout
 *
 * A 6px Alert-red left border, heavier than any other rule on the site. That
 * is deliberate: "we are not the town" is the fact a reader most needs and most
 * easily assumes the opposite of, and it should out-shout everything around it.
 * ------------------------------------------------------------------------ */

.ltsq-callout {
	border-left: 6px solid var(--lts-alert);
	background: var(--lts-surface);
	padding: 18px 20px;
	margin: 0 0 var(--lts-space-4);
	max-width: 76ch;
}

.ltsq-callout__body {
	margin: 0;
	font-family: var(--lts-font-ui);
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--lts-text-dek);
}

.ltsq-callout__body + .ltsq-callout__body { margin-top: 10px; }

.ltsq-callout__body--strong {
	font-weight: 700;
	color: var(--lts-ink);
}

/* A numbered list in a page's main column (/for-organizations/, #313). Divi's
   `.entry-content ol` (0,1,1) sets the numbers inside the text with no indent
   and outranks .ltsq-steps, so this needs the extra class. */
.ltsq-pagegrid__main ol.ltsq-steps {
	list-style-position: outside;
	padding: 0 0 0 1.4em;
	margin: 0 0 var(--lts-space-3);
	line-height: var(--lts-lh-body);
}

.ltsq-pagegrid__main ol.ltsq-steps > li + li { margin-top: var(--lts-space-2); }

/* The body copy on About, at the article measure. */
.ltsq-pagegrid__main > p,
.ltsq-pagegrid__main .ltsq-pagebody {
	max-width: var(--lts-measure-body);
	font-family: var(--lts-font-ui);
	font-size: var(--lts-fs-body);
	line-height: var(--lts-lh-body);
	color: var(--lts-text-body);
}

.ltsq-pagegrid__main h2 {
	margin: var(--lts-space-5) 0 var(--lts-space-2);
	font-family: var(--lts-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--lts-ink);
}

/* --------------------------------------------------------------------------
 * 390px
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.ltsq-pagegrid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lts-space-4) 0;
	}

	.ltsq-pagegrid__rail {
		border-left: 0;
		border-top: 2px solid var(--lts-border);
		padding-left: 0;
		padding-top: var(--lts-space-4);
	}

	.ltsq-routes,
	.ltsq-placements { grid-template-columns: minmax(0, 1fr); }

	.ltsq-route__cta,
	.ltsq-pagegrid .ltsq-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ==========================================================================
 * PHASE 12 — mobile web (screen 21)
 *
 * Phase 2 already collapsed the masthead to one row, hid the search field and
 * Contribute, swapped the urgent bar's "Read more" for a chevron and made the
 * nav scroll horizontally. What it did NOT do is make the nav items look like
 * anything other than the desktop nav — they were still 14px text links with
 * 18px of padding, scrolling. This is the chip treatment.
 * ========================================================================== */

@media (max-width: 980px) {

	/*
	 * THE STREAM NAV BECOMES THE APP'S FILTER ROW.
	 *
	 * Deliberately the same object the app shows on its feed: a horizontally
	 * scrolling strip of colour-swatched chips on the charcoal band, current
	 * one filled. Somebody who uses both should not have to learn the
	 * navigation twice, and the swatch colours are already the same tokens.
	 *
	 * The Walker from phase 2 emits both forms — swatch span, label span — and
	 * CSS picks which one this is. No markup branches on viewport width.
	 */
	.ltsq-nav__inner {
		gap: 8px;
		/* 14px, the artboard's own figure, not the page gutter — a scrolling
		 * strip wants its first chip near the edge so it reads as scrollable. */
		padding: 6px 14px;
		align-items: center;
	}

	.ltsq-nav__item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: none;
		border: 1px solid rgba(255, 255, 255, .25);
		padding: 6px 12px;
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.3;
		color: #fff !important;

		/*
		 * DIVERGENCE FROM THE ARTBOARD, on purpose. The mock draws a ~30px
		 * chip; this is 44. A static mock does not have to be hit with a thumb
		 * on a moving bus, and the backlog's own done-criterion is that every
		 * tap target is at least 44px. The padding, type and swatch are the
		 * artboard's — only the height floor is ours, and the chips read the
		 * same because the strip grew with them.
		 */
		min-height: 44px;
		box-sizing: border-box;
	}

	/* The bottom border the desktop nav uses for the current item would draw a
	 * line under one chip in a scrolling row, which reads as a rendering fault
	 * rather than as state. The fill replaces it. */
	.ltsq-nav__item,
	.ltsq-nav__item.is-active { border-bottom-width: 1px; }

	.ltsq-nav__item.is-active {
		background: #fff;
		border-color: #fff;
		color: var(--lts-ink) !important;
		font-weight: 700;
	}

	/* 7px on mobile, 8px on desktop — the artboard's numbers. */
	.ltsq-nav__swatch { width: 7px; height: 7px; }

	/* The active chip's fill already carries the meaning, and a colour swatch
	 * on white would be the only place on the site where a stream colour sits
	 * on a light chip. */
	.ltsq-nav__item.is-active .ltsq-nav__swatch { display: none; }

	/* The utility group (Advertise, About, Sign in) keeps scrolling after the
	 * streams rather than being pushed off by a flex spacer that has no room
	 * to grow. */
	.ltsq-nav__spacer { display: none; }

	.ltsq-nav__item--utility {
		border-color: rgba(255, 255, 255, .14);
		color: rgba(255, 255, 255, .82) !important;
	}

	/*
	 * The masthead's own controls reach 44px too.
	 *
	 * The saved button measured 40px — close enough to look right and not
	 * close enough to hit. It is the only control left in the compressed
	 * masthead besides the brand, so it is worth the four pixels.
	 */
	.ltsq-masthead__saved {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/*
	 * The wordmark at the artboard's 21px.
	 *
	 * Phase 2 asked for this and did not get it: `.ltsq-masthead__wordmark` is
	 * (0,1,0) and the brand link's own type rule reaches it at higher
	 * specificity, so the wordmark stayed at its fluid desktop size. Stated
	 * through the brand link here so it actually wins.
	 */
	.ltsq-masthead__brand .ltsq-masthead__wordmark {
		font-size: 21px;
		line-height: 1.15;
	}
}

/* --------------------------------------------------------------------------
 * Wide content scrolls inside itself, never the page
 *
 * The done-criterion for this phase is that no screen scrolls sideways. The
 * things that would are all tables and pre blocks, and each already has a
 * scroll container — this is the backstop for anything a later phase adds
 * without one, because the failure mode (the whole page shifting under a
 * thumb) is bad enough to be worth a blanket rule.
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {

	.ltsq-account__main table,
	.ltsq-pagegrid__main table,
	.ltsq-orgprofile__main table { display: block; overflow-x: auto; }

	pre, code { overflow-x: auto; max-width: 100%; }
}

/* ----------------------------------------------------------------------
   The mobile app beta (/app/) — see inc/app-beta.php. One CTA component,
   used by the page, the footer, the homepage band and the coming-soon page,
   so the beta's two states never disagree from one surface to the next.
   -------------------------------------------------------------------- */

.ltsq-app-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lts-space-3);
	align-items: center;
	margin: var(--lts-space-4) 0;
}

.ltsq-app-cta__note {
	flex: 1 1 100%;
	margin: 0;
	color: var(--lts-text-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* In the footer this sits on the dark band, where the muted ink above would
   nearly vanish. */
.ltsq-footer__aside .ltsq-app-cta__link {
	display: inline-flex;
	align-items: center;
	margin-top: var(--lts-space-3);
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ltsq-app-promo {
	border: var(--lts-rule-column);
	padding: var(--lts-space-4);
	background: var(--lts-surface);
}

.ltsq-app-promo__title {
	margin: var(--lts-space-2) 0 var(--lts-space-2);
	font-family: var(--lts-font-display);
	font-size: 22px;
	line-height: 1.2;
}

.ltsq-app-promo__body {
	margin: 0 0 var(--lts-space-3);
	color: var(--lts-text-muted);
	line-height: 1.55;
}

/* ----------------------------------------------------------------------
   The app page (/app/) — markup from inc/app-beta.php.

   Six sections, all built from components that already exist: the plugin
   band supplies the hero, .ltsq-routes supplies the feature cards, and
   .ltsq-home-section supplies the section rhythm. What is new here is the
   arrangement — two columns where there was one, and a charcoal signup band
   where there was a bordered box.

   Stream accents are never named directly. Each card and each deep-dive
   column carries data-stream and reads --lts-stream / --lts-stream-text back
   out of ltsq-tokens.css, which is why there is no colour in this section at
   all beyond white on the charcoal band.
   -------------------------------------------------------------------- */

/* --- 1. Hero ---------------------------------------------------------- */

.ltsq-apphero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--lts-space-5);
	align-items: center;
	/* The proof row below draws the next rule; two rules 24px apart read as
	   a mistake. */
	border-bottom: 0;
}

/* No screenshot set — the copy takes the whole band rather than leaving a
   32px gap beside nothing. See ltsq_app_beta_shot_url(). */
.ltsq-apphero__copy:only-child { grid-column: 1 / -1; }

.ltsq-apphero .ltsq-pluginband__title { max-width: 18ch; }

/* The band's own dek is 16px, sized for an archive header. This one is the
   page's selling sentence and takes the larger dek scale. */
.ltsq-apphero .ltsq-pluginband__dek {
	font-size: var(--lts-fs-dek);
	line-height: var(--lts-lh-dek);
	max-width: 52ch;
}

.ltsq-apphero__actions {
	margin-top: var(--lts-space-4);
	align-items: center;
}

/*
 * ltsq_render_app_beta_cta_shortcode() stays the single implementation of the
 * beta's buttons, so its wrapper arrives here whether the hero wants one or
 * not. display:contents lifts the buttons out of it and into the hero's own
 * row, next to "See what it does", without a second copy of the CTA markup.
 */
.ltsq-apphero__actions .ltsq-app-cta { display: contents; }

.ltsq-apphero__note {
	margin: var(--lts-space-3) 0 0;
	max-width: 54ch;
	line-height: 1.55;
}

.ltsq-apphero__shot { justify-self: center; }

.ltsq-apphero__frame {
	max-width: 288px;
	padding: 10px;
	background: var(--lts-surface);
	border: var(--lts-rule-hairline);
	box-sizing: border-box;
}

.ltsq-apphero__frame .ltsq-appshot__img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--lts-bg);
}

/* --- 2. Proof row ----------------------------------------------------- */

/*
 * DIVI OUTRANKS A SINGLE CLASS ON ANY <ul> INSIDE A BUILDER PAGE.
 *
 * `#left-area ul, .entry-content ul, .et-l--body ul` sets list-style: disc and
 * padding-left: 1em at specificity 0,1,1 — one element selector more than
 * `.ltsq-appproof` can reach. Both of this page's structural lists are layout
 * rather than prose, so they opt out explicitly, and that is the only reason
 * !important appears anywhere in this section. Markers inherit, so declaring
 * it on the <ul> is enough to clear the <li> too.
 *
 * Any future component that lays a <ul> out as a grid inside a Divi page has
 * the same fight ahead of it.
 */
.ltsq-appproof {
	list-style: none !important;
	margin: 0 auto;
	max-width: calc(var(--lts-maxw) + (var(--lts-gutter) * 2));
	padding: 0 var(--lts-gutter);
	padding-left: var(--lts-gutter) !important;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: var(--lts-rule-section);
	border-bottom: var(--lts-rule-hairline);
}

.ltsq-appproof__cell {
	margin: 0;
	padding: var(--lts-space-4) var(--lts-space-3);
}

.ltsq-appproof__cell + .ltsq-appproof__cell { border-left: var(--lts-rule-hairline); }

/* The outer cells drop their side padding so the first and last lines sit on
   the page gutter rather than 16px inside it. */
.ltsq-appproof__cell:first-child { padding-left: 0; }
.ltsq-appproof__cell:last-child { padding-right: 0; }

/*
 * The design asks for 26px here, which is the one size in it with no token
 * behind it. Taking the 24px token instead, which the handoff offers as the
 * alternative — a new token for one figure on one page would be a token that
 * exists to describe itself.
 */
.ltsq-appproof__figure {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: var(--lts-fs-card-title-archive);
	font-weight: 600;
	line-height: 1.15;
	color: var(--lts-ink);
}

.ltsq-appproof__line {
	display: block;
	margin: 6px 0 0;
	line-height: 1.5;
}

/* --- 3. What the app does --------------------------------------------- */

/* The proof row already drew this section's top rule. */
.ltsq-appfeatures { border-top: 0; }

/* .ltsq-routes is the three-up submit-routes grid; four cards read better
   two-up. Declared after the 900px rule that collapses .ltsq-routes, so these
   stay two-up down to their own 760px breakpoint. */
.ltsq-appcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ltsq-appshots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lts-space-4);
}

/*
 * The page renders only the subjects that have an image, so this grid can hold
 * one, two or three. At three the cells fill the row as the design intends; at
 * fewer, a column-width cell makes a single phone screen a 400x860 slab with
 * two thirds of the row empty beside it, so the cells cap at the hero frame's
 * own 288px and the row reads as an illustration instead.
 */
.ltsq-appshots:not(:has(.ltsq-appshots__item:nth-child(3))) {
	grid-template-columns: repeat(3, minmax(0, 288px));
}

.ltsq-appshots__item { margin: 0; }

/* 9:16 rather than the screenshot's native 9:19.5 — the design crops these
   from the top, which is where everything worth seeing is. The hero keeps its
   whole screen. */
.ltsq-appshots__item .ltsq-appshot__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: top;
	background: var(--lts-surface);
	border: var(--lts-rule-hairline);
	box-sizing: border-box;
}

.ltsq-appshots__caption {
	display: block;
	margin-top: 10px;
}

/* --- 4. Contribution and business ------------------------------------- */

.ltsq-appdeep {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lts-space-5);
}

/* The column is already narrower than the body measure cap, so the cap only
   makes the paragraph ragged. */
.ltsq-appdeep__lede {
	margin: 0;
	max-width: none;
}

/* Same Divi fight as .ltsq-appproof above. */
.ltsq-appdeep__list {
	list-style: none !important;
	margin: var(--lts-space-3) 0 0;
	padding: 0 !important;
	border-top: var(--lts-rule-hairline);
}

.ltsq-appdeep__list li {
	padding: 12px 0 12px 14px;
	border-left: var(--lts-stream-border-left) solid var(--lts-stream);
	border-bottom: var(--lts-rule-hairline);
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--lts-text-body);
}

.ltsq-appdeep__list li:last-child { border-bottom: 0; }

.ltsq-appdeep__foot {
	grid-column: 1 / -1;
	margin: var(--lts-space-3) 0 0;
	line-height: 1.55;
}

/* --- 5. The signup band ------------------------------------------------ */

.ltsq-appsignup {
	background: var(--lts-ink);
	color: #fff;
}

.ltsq-appsignup__inner {
	padding-top: 44px;
	padding-bottom: 44px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lts-space-5);
	align-items: start;
}

.ltsq-appsignup__kicker { color: rgba(255, 255, 255, 0.55); }

.ltsq-appsignup__title {
	margin: var(--lts-space-2) 0 0;
	max-width: 20ch;
	font-family: var(--lts-font-display);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.12;
	color: #fff;
}

.ltsq-appsignup__body {
	margin: 12px 0 0;
	max-width: 50ch;
	font-family: var(--lts-font-ui);
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.ltsq-appsignup__form { max-width: 420px; }

.ltsq-appsignup__note {
	margin: var(--lts-space-3) 0 0;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

/* --- 6. Testing and questions ----------------------------------------- */

.ltsq-appclose {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lts-space-5);
}

.ltsq-appclose__p {
	margin: 0 0 var(--lts-space-3);
	max-width: none;
}

.ltsq-appclose__p:last-of-type { margin-bottom: 0; }

.ltsq-appfaq {
	padding: var(--lts-space-3) 0;
	border-bottom: var(--lts-rule-hairline);
}

.ltsq-appfaq:last-of-type { border-bottom: 0; }

.ltsq-appfaq__q {
	margin: 0;
	font-family: var(--lts-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-appfaq__a {
	margin: var(--lts-space-2) 0 0;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.65;
	color: var(--lts-text-body);
}

.ltsq-appclose__privacy {
	display: block;
	margin: var(--lts-space-3) 0 0;
}

/* --- Responsive -------------------------------------------------------
   One breakpoint does most of the work: every two-column grid on the page
   collapses at 860px, as does the screenshot row. The cards and the proof
   row each take one of their own.
   -------------------------------------------------------------------- */

@media (max-width: 860px) {

	.ltsq-apphero,
	.ltsq-appdeep,
	.ltsq-appclose,
	.ltsq-appsignup__inner,
	.ltsq-appshots { grid-template-columns: minmax(0, 1fr); }

	.ltsq-apphero__shot { justify-self: start; }

	.ltsq-appproof { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Two-up: the rule belongs between the columns, so it moves to the second
	   cell of each row, and the third and fourth cells gain a top rule. */
	.ltsq-appproof__cell {
		padding-left: var(--lts-space-3);
		padding-right: var(--lts-space-3);
		border-left: 0;
	}

	.ltsq-appproof__cell:nth-child(2n + 1) { padding-left: 0; }

	.ltsq-appproof__cell:nth-child(2n) {
		padding-right: 0;
		border-left: var(--lts-rule-hairline);
	}

	.ltsq-appproof__cell:nth-child(n + 3) { border-top: var(--lts-rule-hairline); }
}

@media (max-width: 760px) {
	.ltsq-appcards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.ltsq-app-cta .ltsq-btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {

	.ltsq-appproof { grid-template-columns: minmax(0, 1fr); }

	/* Same specificity as the two-up rules above, and later, so these win. */
	.ltsq-appproof__cell:nth-child(2n + 1),
	.ltsq-appproof__cell:nth-child(2n) {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
	}

	.ltsq-appproof__cell + .ltsq-appproof__cell { border-top: var(--lts-rule-hairline); }
}

/* ----------------------------------------------------------------------
   The app's release notes and download page (/app/releases/) — markup
   from inc/app-releases-page.php (roadmap #64).

   Built on the /app/ page above: the hero IS .ltsq-apphero, with the QR
   code where /app/ shows a phone, and every section is a
   .ltsq-home-section. Lists here are layout, not prose, so each opts out
   of Divi's list styling with !important (see the note on .ltsq-appproof).
   -------------------------------------------------------------------- */

/* --- 1. Hero ---------------------------------------------------------- */

.ltsq-apprel-hero__facts {
	margin: var(--lts-space-2) 0 0;
	font-variant-numeric: tabular-nums;
}

.ltsq-apprel-qr {
	justify-self: center;
	max-width: 220px;
	text-align: center;
}

.ltsq-apprel-qr__code {
	padding: 12px;
	background: #fff;
	border: var(--lts-rule-hairline);
	color: var(--lts-ink);
	line-height: 0;
}

.ltsq-apprel-qr__code svg {
	display: block;
	width: 100%;
	height: auto;
}

.ltsq-apprel-qr__caption {
	margin: var(--lts-space-2) 0 0;
	line-height: 1.5;
}

/* --- 2. What's new ---------------------------------------------------- */

.ltsq-apprel-new__headline {
	margin: 0 0 var(--lts-space-3);
	font-size: var(--lts-fs-dek);
	line-height: var(--lts-lh-dek);
	color: var(--lts-text-dek);
}

.ltsq-apprel-notes {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	max-width: var(--lts-measure-body);
	border-top: var(--lts-rule-hairline);
}

.ltsq-apprel-notes li {
	padding: 10px 0 10px 14px;
	border-left: var(--lts-stream-border-left) solid var(--lts-teal);
	border-bottom: var(--lts-rule-hairline);
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--lts-text-body);
}

.ltsq-apprel-new__meta {
	margin: var(--lts-space-3) 0 0;
}

/* --- 3. Installing and updating ---------------------------------------- */

.ltsq-apprel-how,
.ltsq-apprel-help {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lts-space-5);
}

.ltsq-apprel-how__lede,
.ltsq-apprel-how__p,
.ltsq-apprel-help__p {
	margin: 0 0 var(--lts-space-3);
	max-width: none;
}

/* Numbered by a counter rather than the list marker: Divi's ol rule would
   otherwise indent and restyle the numbers inside a builder page. */
.ltsq-apprel-steps {
	list-style: none !important;
	counter-reset: ltsq-apprel-step;
	margin: 0;
	padding: 0 !important;
}

.ltsq-apprel-steps li {
	counter-increment: ltsq-apprel-step;
	position: relative;
	padding: 0 0 var(--lts-space-3) 44px;
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lts-text-body);
}

.ltsq-apprel-steps li::before {
	content: counter(ltsq-apprel-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lts-ink);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
}

.ltsq-apprel-steps li strong { color: var(--lts-ink); }

/* --- 4. iPhone, 5. permissions ------------------------------------------ */

.ltsq-apprel-iphone .ltsq-prose {
	margin: 0 0 var(--lts-space-3);
}

.ltsq-apprel-perms__list {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--lts-space-5);
}

.ltsq-apprel-perms__list li {
	padding: 12px 0;
	border-bottom: var(--lts-rule-hairline);
	font-family: var(--lts-font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--lts-text-body);
}

.ltsq-apprel-perms__list li strong {
	display: block;
	color: var(--lts-ink);
}

.ltsq-apprel-perms__foot {
	margin: var(--lts-space-3) 0 0;
	line-height: 1.55;
}

/* --- 6. Earlier versions ------------------------------------------------ */

.ltsq-apprel-rel {
	border-bottom: var(--lts-rule-hairline);
}

.ltsq-apprel-rel__summary {
	display: flex;
	align-items: baseline;
	gap: var(--lts-space-2);
	padding: 12px 0;
	cursor: pointer;
	font-family: var(--lts-font-ui);
}

.ltsq-apprel-rel__version {
	font-family: var(--lts-font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--lts-ink);
}

.ltsq-apprel-rel[open] .ltsq-apprel-notes { margin-bottom: var(--lts-space-3); }

.ltsq-apprel-rel__headline {
	margin: 0 0 var(--lts-space-2);
	max-width: none;
}

.ltsq-apprel-history__foot {
	margin: var(--lts-space-3) 0 0;
}

/* --- 7. Help and checking the file -------------------------------------- */

.ltsq-apprel-help__privacy { display: block; }

.ltsq-apprel-verify { margin: 0 0 var(--lts-space-2); }

.ltsq-apprel-verify__hash {
	margin: 0 0 var(--lts-space-3);
}

.ltsq-apprel-verify__hash code {
	display: block;
	padding: 8px 10px;
	background: var(--lts-surface);
	border: var(--lts-rule-hairline);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lts-text);
	word-break: break-all;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 860px) {

	.ltsq-apprel-how,
	.ltsq-apprel-help,
	.ltsq-apprel-perms__list { grid-template-columns: minmax(0, 1fr); }

	/* Someone this narrow is almost certainly holding the phone already: a
	   code to scan with it is no use. */
	.ltsq-apprel-qr { display: none; }
}

/* ======================================================================
 * Print and reduced motion (2026-09-28, #238)
 *
 * Printing an article gives the article: headline, byline, image, body,
 * the source box with its link written out, and the ownership disclosure.
 * Navigation, ads, the rail, the save/share controls and signups do not
 * print. Nothing here changes the screen.
 * ====================================================================== */

@media print {
	.ltsq-urgent-bar,
	.ltsq-nav,
	.ltsq-masthead__actions,
	.ltsq-masthead__search,
	.ltsq-masthead__saved,
	.ltsq-breadcrumb,
	.ltsq-rail,
	.ltsq-adslot,
	.ltsq-article__action,
	.ltsq-article__spacer,
	.ltsq-save-form,
	.ltsq-digest,
	.ltsq-footer__aside,
	.ltsq-footer__legal,
	.ltsq-footer__platform {
		display: none !important;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
	}

	.ltsq-article__body {
		font-size: 12pt;
		line-height: 1.5;
	}

	.ltsq-article__hero img {
		max-height: 10cm;
		width: auto;
	}

	a {
		color: inherit !important;
		text-decoration: underline;
	}

	/* A printed page cannot be clicked: write the source's address out. */
	.ltsq-sourcebox a[href^="http"]::after {
		content: " (" attr(href) ")";
		word-break: break-all;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
	}

	img,
	figure {
		break-inside: avoid;
	}
}

/* ------------------------------------------------------------------
 * Accessibility sweep, 2026-10-02 (issue #345)
 * ------------------------------------------------------------------ */

/* Divi hides a search block's label in a widget area with display:none,
 * which hides it from screen readers too. Visually hidden instead. */
.et_pb_widget .wp-block-search__label {
	display: block !important;
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ltsq-search-title {
	margin: 0 0 var(--lts-space-4, 24px);
	font-family: var(--lts-font-display, inherit);
	font-size: 32px;
	line-height: 1.2;
	color: var(--lts-ink);
}

/* A link inside running text is told apart by more than its colour
 * (axe link-in-text-block). Only class-less links in paragraphs and in the
 * site's own text blocks: buttons, cards and navigation keep their look. */
#main-content p a:not([class]),
#main-content .entry-content li a:not([class]),
.ltsq-article__body li a:not([class]),
.ltsq-pagebody a:not([class]),
.ltsq-prose a:not([class]),
.ltsq-panel__body a:not([class]),
.ltsq-feedback__body a:not([class]),
.ltsq-postingas__body a:not([class]),
.ltsq-org-byline .ltsq-org-byline__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* GeoDirectory's own `.geodir_post_meta a { text-decoration: none }` outranks
 * the rule above for the byline on a listing. */
.geodir_post_meta .ltsq-org-byline .ltsq-org-byline__name { text-decoration: underline !important; }

/* Tap targets at least 24px tall (WCAG 2.5.8). The block-level links were a
 * fraction under; inline ones get padding, which grows the target without
 * moving the line. */
.ltsq-sechead__link,
.ltsq-contribute__link,
.ltsq-footer__legal-link,
.ltsq-app-cta__link,
.ltsq-breadcrumb a,
.tribe-events-c-nav__prev,
.tribe-events-c-nav__today,
.tribe-events-c-nav__next,
.tribe-events-c-subscribe-dropdown__button-text,
.geodir-category-list-view .gd-badge {
	min-height: 24px;
}

.ltsq-card__title a,
.geodir_post_meta a,
.geodir-entry-title a,
.pagination .alignleft a,
.pagination .alignright a {
	padding-block: 4px;
}

/* The search block's button in a Divi widget area: Divi's grey on grey was
 * 4.1:1. */
.et_pb_widget .wp-block-search__button { color: var(--lts-ink); }

@media (max-width: 767px) {
	/* A card with no image showed its placeholder glyph as a 22 by 12 pixel
	 * link once the phone layout stacked it. The title is the same link. */
	.ltsq-card--compact .ltsq-card__thumb:not(:has(img)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}