/* =========================================================================
   Single article (single.php).
   Scoped to .ar — mobile-first, min-width media queries only.
   2px buttons, 4px imagery (sharper-corner direction, Aug 2026).

   The brief was "very text-heavy": the work here is mostly typographic —
   a readable measure, subheadings with real weight above them, and space
   between sections — plus the components in functions/article.php that give
   an editor something to break the text with.
   ========================================================================= */

.ar {
	--ar-navy: #181d46;
	--ar-lightblue: #90cdeb;
	--ar-band-grey: #f5f5f5;
	--ar-band-blue: #f1f5f5;
	--ar-text: #1a1a1a;
	--ar-muted: #59607a;
	--ar-line: #e2e6ee;
	--ar-gutter: 20px;

	font-family: 'FFDINStd', Arial, sans-serif;
	color: var(--ar-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.ar { --ar-gutter: 40px; }
}

.ar *,
.ar *::before,
.ar *::after { box-sizing: border-box; }

.ar-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--ar-gutter);
}

/* The reading column. ~68 characters is the point where the eye stops having
   to hunt for the start of the next line. */
.ar-container--narrow { max-width: 780px; }

/* The theme fades every link on hover and sets them all to 600 (desktop.css).
   Neither suits body copy, where links sit mid-sentence. */
.ar a:hover { opacity: 1; }
.ar .ar-body a { font-weight: inherit; }

/* Navy, not the brand Light Blue: #90cdeb against white is 1.73:1, well under
   the 3:1 WCAG 2.2 needs for a focus indicator. */
.ar a:focus-visible {
	outline: 3px solid var(--ar-navy);
	outline-offset: 2px;
}

/* ---- Header -------------------------------------------------------------- */

.ar-head { padding: 40px 0 28px; }

.ar .ar-head__eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ar-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--ar-lightblue);
	padding-bottom: 3px;
}

.ar-head__title {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.12;
	color: var(--ar-navy);
	text-wrap: balance;
}

.ar-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--ar-muted);
}

@media (min-width: 768px) {
	.ar-head { padding: 56px 0 32px; }
	.ar-head__title { font-size: 44px; }
}

/* ---- Hero image ---------------------------------------------------------- */

.ar-hero { margin: 0 0 40px; }

/* Sized to the reading column, not the full container. Left full-width it
   rendered 1360px across and 860px tall — taller than the text column is
   wide, and dominating the article before a word had been read. Most featured
   images here are only 600px square, so it was upscaling them 2.3x as well.

   Most of these featured images are square, so a crop is unavoidable at any
   landscape ratio; what matters is that the result is consistent and lines up
   with the column. */
.ar-hero__img {
	display: block;
	width: 100%;
	height: auto;
	/* 16:9 so the image fills the column width exactly. A max-height instead
	   would shrink the width to satisfy it, leaving the picture inset from the
	   text below and looking like a mistake. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
}

.ar-hero__caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ar-muted);
}

@media (min-width: 900px) {
	.ar-hero { margin-bottom: 56px; }
}

/* ---- Body ---------------------------------------------------------------- */

/* 18px is the smallest size that still reads comfortably for 1,000+ words;
   1.65 leading gives the eye a clear return path on a 68-character line. */
.ar-body {
	font-size: 18px;
	line-height: 1.65;
}

/* Only the first child loses its top margin. An earlier version reset every
   direct child, which at (0,2,0) silently beat every rule below it and left
   subheadings with no space above them at all — the opposite of the brief. */
.ar-body > .ar-container--narrow > :first-child { margin-top: 0; }

.ar-body p {
	margin: 0 0 1.35em;
	color: var(--ar-text);
}

/* The opening paragraph carries the reader in, so it gets a size up. */
.ar-body > .ar-container--narrow > p:first-of-type {
	font-size: 21px;
	line-height: 1.5;
	color: var(--ar-navy);
}

/* Subheadings: the client asked for stronger ones. Space above is what
   actually signals a new section, so it is roughly double the space below. */
.ar-body h2 {
	margin: 2em 0 0.6em;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-navy);
	text-wrap: balance;
}

.ar-body h3 {
	margin: 1.8em 0 0.5em;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-navy);
}

.ar-body h4 {
	margin: 1.6em 0 0.4em;
	font-size: 18px;
	font-weight: 600;
	color: var(--ar-navy);
}

/* framework.css resets every heading to inherit its size and weight, so an
   h1, h5 or h6 typed into the copy would otherwise be indistinguishable from
   a paragraph. A handful of the 377 posts use them. */
.ar-body h1 {
	margin: 1.8em 0 0.5em;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-navy);
}

.ar-body :is(h5, h6) {
	margin: 1.5em 0 0.4em;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ar-navy);
}

.ar-body :is(h2, h3, h4):first-child { margin-top: 0; }

@media (min-width: 768px) {
	.ar-body { font-size: 19px; }
	.ar-body > .ar-container--narrow > p:first-of-type { font-size: 23px; }
	.ar-body h2 { font-size: 30px; }
	.ar-body h3 { font-size: 23px; }
}

.ar-body :is(ul, ol) {
	margin: 0 0 1.35em;
	padding-left: 1.3em;
}

.ar-body li { margin-bottom: 0.5em; }

.ar-body li::marker { color: var(--ar-navy); }

.ar .ar-body a {
	color: var(--ar-navy);
	text-decoration: underline;
	text-decoration-color: var(--ar-lightblue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ar .ar-body a:hover { text-decoration-color: var(--ar-navy); }

.ar-body strong { font-weight: 600; }

/* Images added through the editor. WordPress emits .alignnone/.aligncenter
   wrappers and .wp-caption; all of them run the full reading width. */
.ar-body :is(img, .wp-caption, figure) {
	max-width: 100%;
	height: auto;
}

.ar-body :is(figure, .wp-caption) {
	margin: 2.2em 0;
	/* WP writes an inline pixel width on .wp-caption. Cap rather than clear it:
	   forcing `auto` and stretching the image to 100% upscales a small upload
	   to the full measure and makes it soft. */
	max-width: 100% !important;
}

.ar-body :is(figure, .wp-caption) img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* A picture big enough to carry the measure should fill it. */
.ar-body :is(figure, .wp-caption).is-wide img { width: 100%; }

.ar-body :is(figcaption, .wp-caption-text) {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ar-muted);
	text-align: left;
}

.ar-body > .ar-container--narrow > img { margin: 2.2em 0; border-radius: 4px; }

.ar-body hr {
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--ar-line);
}

.ar-body table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
	font-size: 16px;
}

.ar-body :is(th, td) {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ar-line);
	text-align: left;
}

.ar-body th {
	font-weight: 600;
	color: var(--ar-navy);
	border-bottom-width: 2px;
}

/* A plain blockquote in the copy, distinct from the [pullquote] component. */
.ar-body blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--ar-lightblue);
	font-size: 20px;
	line-height: 1.5;
	color: var(--ar-navy);
}

.ar-body blockquote p:last-child { margin-bottom: 0; }

/* ---- Component: pull quote ----------------------------------------------- */

/* Breaks out of the measure slightly so it reads as a lift, not a paragraph. */
.ar-pullquote {
	margin: 2.4em 0;
	padding: 0;
	border-top: 2px solid var(--ar-navy);
	border-bottom: 2px solid var(--ar-navy);
}

.ar-pullquote blockquote {
	margin: 0;
	padding: 24px 0 0;
	border: 0;
}

.ar-pullquote p {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ar-navy);
	text-wrap: balance;
}

.ar-pullquote figcaption {
	padding: 14px 0 24px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ar-muted);
}

/* Without a citation the bottom padding has to come from the quote instead. */
.ar-pullquote blockquote:last-child { padding-bottom: 24px; }

@media (min-width: 768px) {
	.ar-pullquote p { font-size: 30px; }
}

/* ---- Component: figures --------------------------------------------------- */

.ar-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 2.4em 0;
	background: var(--ar-line);
	border: 1px solid var(--ar-line);
	border-radius: 4px;
	overflow: hidden;
}

.ar-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: var(--ar-band-blue);
}

.ar-stat__value {
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
	color: var(--ar-navy);
	font-variant-numeric: tabular-nums;
}

.ar-stat__label {
	font-size: 16px;
	line-height: 1.4;
	color: var(--ar-text);
}

.ar-stat__source {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ar-muted);
}

@media (min-width: 600px) {
	.ar-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---- Component: in short --------------------------------------------------- */

.ar-takeaways {
	margin: 2.4em 0;
	padding: 24px;
	background: var(--ar-band-grey);
	border-left: 3px solid var(--ar-navy);
	border-radius: 0 4px 4px 0;
}

/* An h2 by markup so it sits correctly in the document outline, but an eyebrow
   by design. Needs to outrank `.ar-body h2`, which it sits inside. */
.ar-body .ar-takeaways__title,
.ar-takeaways__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-navy);
}

.ar-takeaways__body { font-size: 17px; line-height: 1.55; }

.ar-takeaways__body :is(ul, ol) { margin: 0; padding-left: 1.2em; }
.ar-takeaways__body li { margin-bottom: 0.45em; }
.ar-takeaways__body li:last-child { margin-bottom: 0; }
.ar-takeaways__body p:last-child { margin-bottom: 0; }

/* ---- Foot ----------------------------------------------------------------- */

.ar-foot { padding: 8px 0 48px; }

.ar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--ar-line);
	list-style: none;
}

.ar .ar-tags a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--ar-band-blue);
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ar-navy);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.ar .ar-tags a:hover { background: var(--ar-lightblue); }

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

.ar .ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ar .ar-btn:hover { opacity: 1; }

.ar .ar-btn--light { background: var(--ar-lightblue); color: var(--ar-navy); }
.ar .ar-btn--light:hover { background: #fff; }

.ar .ar-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.ar .ar-btn--ghost:hover { background: #fff; color: var(--ar-navy); box-shadow: inset 0 0 0 1px #fff; }

.ar .ar-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- CTA -------------------------------------------------------------------- */

.ar-cta { padding: 0 0 56px; }

.ar-cta__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 24px;
	background: var(--ar-navy);
	border-radius: 4px;
	color: #fff;
}

.ar-cta__heading {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.ar-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 52ch;
}

.ar-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 768px) {
	.ar-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px;
	}
	.ar-cta__actions { flex: 0 0 auto; }
}

/* ---- Related ------------------------------------------------------------------ */

.ar-related {
	padding: 56px 0;
	background: var(--ar-band-grey);
}

.ar-related__heading {
	margin: 0 0 28px;
	font-size: 26px;
	font-weight: 600;
	color: var(--ar-navy);
}

.ar-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.ar .ar-card__link { text-decoration: none; color: inherit; display: block; }

.ar-card__media {
	aspect-ratio: 409 / 232;
	overflow: hidden;
	border-radius: 4px;
	background: var(--ar-band-blue);
}

.ar-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ar-card__link:hover .ar-card__media img { transform: scale(1.03); }

.ar-card__title {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-navy);
}

@media (min-width: 768px) {
	.ar-related__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.ar-related { padding: 88px 0; }
	.ar-related__heading { font-size: 32px; }
}

/* ---- Gravity Forms in article content -------------------------------------
   A few older posts embed a form with [gravityform]. Nothing styled it here,
   and the input rule in css/desktop.css leaves text fields at border: 0, so
   they vanished on the white page. That rule chains six :not() selectors to
   specificity (0,7,2), and Gravity Forms' theme.min.css loads after the
   theme, so the field and button rules below repeat the chain and carry
   .gravity-theme. Field borders are darker than the product form's #eaeaea
   (which sits on a grey band) to keep 3:1 against white.
   ------------------------------------------------------------------------ */

.ar-body .gform_wrapper.gravity-theme {
	--ar-field-line: #868ba0;
	--ar-error: #dd1829;
	margin: 40px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--ar-line);
}

.ar-body .gform_wrapper.gravity-theme .gform_title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-navy);
}

.ar-body .gform_wrapper.gravity-theme :is(.gform_description, .gform_required_legend) {
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--ar-muted);
}

.ar-body .gform_wrapper.gravity-theme :is(.gfield_label, .gform-field-label) {
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ar-navy);
}

.ar-body .gform_wrapper.gravity-theme .gform-field-label--type-sub {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--ar-muted);
}

.ar-body .gform_wrapper.gravity-theme .gfield_required { color: var(--ar-error); }

.ar-body .gform_wrapper.gravity-theme .gsection {
	margin: 8px 0 0;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ar-line);
}

.ar-body .gform_wrapper.gravity-theme .gsection_title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--ar-navy);
}

.ar-body .gform_wrapper.gravity-theme .gsection_description {
	margin: 8px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ar-text);
}

body .ar-body .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .ar-body .gform_wrapper.gravity-theme textarea,
body .ar-body .gform_wrapper.gravity-theme select {
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--ar-field-line);
	border-radius: 4px;
	background: #fff;
	/* 16px stops iOS zooming the viewport when a field takes focus. */
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ar-text);
	box-shadow: none;
}

body .ar-body .gform_wrapper.gravity-theme textarea {
	min-height: 130px;
	resize: vertical;
}

/* Gravity Forms sizes .small/.medium inputs to a fraction of the column (a
   100px name box). Fill it instead, as the product form does; the date
   picker keeps its width so the calendar icon stays beside it. */
body .ar-body .gform_wrapper.gravity-theme :is(.ginput_container_text, .ginput_container_email, .ginput_container_phone, .ginput_container_number, .ginput_container_textarea, .ginput_container_select) :is(input, textarea, select) {
	width: 100%;
}

/* The theme swaps selects for Selectric's div, which brings its own border. */
.ar-body .gform_wrapper.gravity-theme .selectric {
	border-color: var(--ar-field-line);
	border-radius: 4px;
}

body .ar-body .gform_wrapper.gravity-theme :is(input, textarea, select):focus {
	border-color: var(--ar-navy);
	outline: 2px solid var(--ar-navy);
	outline-offset: 1px;
}

.ar-body .gform_wrapper.gravity-theme .gf_progressbar_title {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--ar-muted);
}

.ar-body .gform_wrapper.gravity-theme .gf_progressbar {
	border-radius: 2px;
	background: var(--ar-band-grey);
}

.ar-body .gform_wrapper.gravity-theme .gf_progressbar_percentage {
	border-radius: 2px;
	background: var(--ar-navy);
	color: #fff;
}

.ar-body .gform_wrapper.gravity-theme :is(.gform_footer, .gform_page_footer) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
}

body .ar-body .gform_wrapper.gravity-theme :is(.gform_button, .gform_next_button, .gform_previous_button, input[type=submit]) {
	min-height: 50px;
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	background: var(--ar-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	/* Gravity Forms capitalises and the legacy theme uppercases button text. */
	text-transform: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .ar-body .gform_wrapper.gravity-theme :is(.gform_button, .gform_next_button, input[type=submit]):hover,
body .ar-body .gform_wrapper.gravity-theme .gform_previous_button {
	background: #fff;
	color: var(--ar-navy);
	box-shadow: inset 0 0 0 1px var(--ar-navy);
}

body .ar-body .gform_wrapper.gravity-theme .gform_previous_button:hover {
	background: var(--ar-band-grey);
}

body .ar-body .gform_wrapper.gravity-theme :is(.gform_button, .gform_next_button, .gform_previous_button, input[type=submit]):focus-visible {
	outline: 2px solid var(--ar-navy);
	outline-offset: 2px;
}

body .ar-body .gform_wrapper.gravity-theme .gfield_error :is(input, textarea, select) { border-color: var(--ar-error); }

.ar-body .gform_wrapper.gravity-theme :is(.validation_message, .gfield_validation_message) {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--ar-error);
}