/**
 * Athar: front end.
 *
 * Typography and colour are the theme's job on purpose: this file owns
 * layout, rhythm, measure and image treatment only. That is the whole
 * integration promise, sections look native inside any theme.
 *
 * Every rule is scoped under .athar-scope, and every box property is a
 * logical one, so RTL needs no overrides.
 */

/* The viewport minus its scrollbar. 100vw counts the scrollbar, so a
   100vw-wide section overflows the page by exactly that much and the whole
   document gains a horizontal scroll. athar_bleed_script() measures the gutter
   and writes this onto the root element; 0px keeps the pre-script paint sane.
   It lives on :root, not .athar-scope, or the local declaration would shadow
   the measured value. */
:root {
	--athar-sbw: 0px;
}

.athar-scope {
	--athar-vw: calc(100vw - var(--athar-sbw, 0px));

	--athar-rhythm: clamp(2.5rem, 6vw, 4.5rem);
	--athar-rhythm-tight: clamp(1.25rem, 3vw, 2rem);
	--athar-measure: 68ch;
	--athar-measure-wide: 80ch;
	--athar-radius: 6px;
	--athar-hairline: color-mix(in srgb, currentColor 14%, transparent);
	/* Quiet, and still legible: 62% of a near-black ink on white measures 4.8:1,
	   which leaves nothing in hand for a theme whose ink is a shade lighter.
	   68% keeps the same reading and clears 5.8:1. */
	--athar-quiet: color-mix(in srgb, currentColor 68%, transparent);
}

/* A focus ring we can promise.
   The theme owns colour and type here on purpose, which means it may also have
   removed the browser's outline, and every control below is one this plugin
   drew. currentColor rather than the accent: it inherits whatever ink the
   section is set in, so it stays visible on a tint, on a dark panel and over a
   background image alike. */
.athar-scope a:focus-visible,
.athar-scope button:focus-visible,
.athar-scope input:focus-visible,
.athar-scope [tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The vertical rhythm reads through the style layer's custom properties, with
   the old behaviour as the fallback: a section nobody has styled carries no
   --athar-s-mt at all and lands on exactly the rhythm it always had. The first
   section falls back to nothing instead, so the page still opens flush, but
   an explicit choice on it is honoured. */
.athar-scope > .athar-section {
	margin-block-start: var(--athar-s-mt, var(--athar-rhythm));
	margin-block-end: var(--athar-s-mb, 0px);

	/* Stated, not inherited from the theme: the style layer's backgrounds add
	   padding, and a section whose inline-size is pinned to the viewport
	   (--athar-vw) would grow past the page edge under content-box and put a
	   horizontal scrollbar on the whole document. */
	box-sizing: border-box;
}

.athar-scope > .athar-section:first-child {
	margin-block-start: var(--athar-s-mt, 0px);
}

/* With the language toggle drawn, the first section is no longer the scope's
   first child, and the page must still open flush. */
.athar-scope > .athar-langs + .athar-section {
	margin-block-start: var(--athar-s-mt, 0px);
}

/* ------------------------------------------------------ the language toggle

   Deliberately small and unstyled-looking: it is a utility, not a call to
   action, and it borrows the theme's own colour like everything else here. */

.athar-scope .athar-langs {
	display: flex;
	align-items: center;
	margin-block-end: var(--athar-rhythm-tight);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.athar-scope .athar-langs__item {
	padding-block: 0.25em;
	padding-inline: 0.8em;
	border-inline-end: 1px solid var(--athar-hairline);
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 140ms ease;
}

.athar-scope .athar-langs__item:first-child {
	padding-inline-start: 0;
}

.athar-scope .athar-langs__item:last-child {
	border-inline-end: 0;
}

.athar-scope .athar-langs__item.is-current {
	opacity: 1;
	font-weight: 600;
}

.athar-scope .athar-langs__item:hover,
.athar-scope .athar-langs__item:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.athar-scope img {
	max-inline-size: 100%;
	block-size: auto;
}

.athar-scope .athar-img {
	display: block;
	inline-size: 100%;
	border-radius: var(--athar-radius);
}

/* ------------------------------------------------------------------ cover */

.athar-scope .athar-cover {
	position: relative;
	display: grid;
	overflow: hidden;
}

.athar-scope .athar-cover__media {
	grid-area: 1 / 1;
	position: relative;
}

.athar-scope .athar-cover__img {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 78vh;
	object-fit: cover;
	border-radius: 0;
}

.athar-scope .athar-cover__body {
	grid-area: 1 / 1;
	align-self: end;
	z-index: 1;
	inline-size: 100%;
	box-sizing: border-box;
	padding: clamp(1.5rem, 5vw, 4rem);
	max-inline-size: var(--athar-measure-wide);
}

/* No image: the headline stands on its own, in the content column. */
.athar-scope .athar-cover:not(.athar-align-full) .athar-cover__body {
	padding: 0;
	max-inline-size: var(--athar-measure-wide);
}

.athar-scope .athar-cover__heading {
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;
}

.athar-scope .athar-cover__sub {
	margin-block: 0.5em 0;
	margin-inline: 0;
	opacity: 0.8;
	text-wrap: pretty;
}

/* A flat scrim, not a gradient: enough contrast for text over any photo
   without the glossy look. */
.athar-scope .athar-tone-dark .athar-cover__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 16, 0.42);
}

/* Only over a scrim, a text-only cover keeps the theme's ink. */
.athar-scope .athar-cover.athar-align-full.athar-tone-dark .athar-cover__body {
	color: #fff;
}

/* ------------------------------------------------------------------- text */

.athar-scope .athar-text {
	max-inline-size: var(--athar-measure);
	margin-inline: auto;
}

.athar-scope .athar-width-normal {
	max-inline-size: var(--athar-measure-wide);
}

.athar-scope .athar-text__heading {
	margin-block: 0 var(--athar-rhythm-tight);
	margin-inline: 0;
	line-height: 1.25;
	text-wrap: balance;
}

.athar-scope .athar-text__body > :first-child {
	margin-block-start: 0;
}

.athar-scope .athar-text__body > :last-child {
	margin-block-end: 0;
}

.athar-scope .athar-text__body p {
	text-wrap: pretty;
}

.athar-scope .athar-text__body ul,
.athar-scope .athar-text__body ol {
	padding-inline-start: 1.4em;
}

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

.athar-scope .athar-image {
	margin-block: 0;
	margin-inline: 0;
}

/* Three classes on purpose, exactly like the bleed rules below: per-type rules
   further down this file reset margin-inline on figures, and at equal
   specificity the later rule would win and stop a narrowed section centring. */
.athar-scope .athar-section.athar-align-normal {
	max-inline-size: var(--athar-measure-wide);
	margin-inline: auto;
}

.athar-scope .athar-align-full .athar-img,
.athar-scope .athar-cover .athar-img {
	border-radius: 0;
}

.athar-scope .athar-image__caption {
	margin-block-start: 0.75em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
	text-align: start;
}

.athar-scope .athar-align-full .athar-image__caption,
.athar-scope .athar-align-wide .athar-image__caption {
	max-inline-size: var(--athar-measure);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ------------------------------------------------------------ full bleed
   The alignfull/alignwide classes are printed for themes that look for them,
   but a block theme's constrained-layout CSS only matches *direct* children
   of its container, our sections sit one level down inside .athar-scope, so
   the classes alone never reach them. The escape hatch therefore runs for
   every theme: .athar-scope has no width of its own, so it measures the
   content column, and 50% - 50vw lands exactly on the viewport edges either
   way. Where a theme already applies the same margin the declarations
   coincide rather than stack. */

/* inline-size is stated, not left to auto: themes that recognise .alignfull
   often pin a `width` on it (Twenty Twenty-One does, below 482px), and a
   width we never declare wins uncontested no matter how specific our margins
   are. Declaring it makes the bleed independent of the theme's opinion. */
/* The .athar-section qualifier is not decoration: per-section rules below
   reset margin-inline on figures, and at equal specificity the later rule
   would win and collapse the bleed. Three classes keeps these authoritative
   no matter what is appended to this file. */
.athar-scope .athar-section.athar-align-full {
	margin-inline: calc(50% - var(--athar-vw) / 2);
	inline-size: var(--athar-vw);
	max-inline-size: var(--athar-vw);
}

.athar-scope .athar-section.athar-align-wide {
	margin-inline: calc(50% - 0.46 * var(--athar-vw));
	inline-size: calc(0.92 * var(--athar-vw));
	max-inline-size: calc(0.92 * var(--athar-vw));
}

/* Classic themes have no content padding to sit inside, so wide images give
   the edges a little more room back. */
.athar-classic-layout .athar-scope .athar-section.athar-align-wide {
	margin-inline: calc(50% - 0.44 * var(--athar-vw));
	inline-size: calc(0.88 * var(--athar-vw));
	max-inline-size: calc(0.88 * var(--athar-vw));
}

@media (max-width: 782px) {
	.athar-scope .athar-section.athar-align-wide,
	.athar-classic-layout .athar-scope .athar-section.athar-align-wide {
		margin-inline: 0;
		inline-size: 100%;
		max-inline-size: 100%;
	}
}

/* ------------------------------------------------------------------ split */

.athar-scope .athar-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

/* `start` and `end` are the reading edges, so the same stored value puts the
   image on the right in Arabic and on the left in English. */
.athar-scope .athar-split--end .athar-split__media {
	order: 2;
}

.athar-scope .athar-split__img {
	inline-size: 100%;
}

.athar-scope .athar-split__heading {
	margin-block: 0 0.6em;
	margin-inline: 0;
	line-height: 1.25;
	text-wrap: balance;
}

.athar-scope .athar-split__text > :first-child {
	margin-block-start: 0;
}

.athar-scope .athar-split__text > :last-child {
	margin-block-end: 0;
}

.athar-scope .athar-split__text p {
	text-wrap: pretty;
}

@media (max-width: 782px) {
	.athar-scope .athar-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.athar-scope .athar-split--end .athar-split__media {
		order: 0;
	}
}

/* ---------------------------------------------------------------- gallery */

.athar-scope .athar-gallery {
	margin-block: 0;
	margin-inline: 0;
}

.athar-scope .athar-gallery__grid {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.athar-scope .athar-gallery--cols-3 .athar-gallery__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.athar-scope .athar-gallery__cell {
	display: block;
	min-inline-size: 0;
}

.athar-scope .athar-gallery__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.athar-scope .athar-gallery__caption {
	margin-block-start: 0.9em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
	text-align: start;
}

@media (max-width: 600px) {
	.athar-scope .athar-gallery__grid,
	.athar-scope .athar-gallery--cols-3 .athar-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ video */

.athar-scope .athar-video {
	margin-block: 0;
	margin-inline: 0;
}

.athar-scope .athar-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--athar-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.athar-scope .athar-video--vertical .athar-video__frame {
	aspect-ratio: 9 / 16;
	max-inline-size: 30rem;
	margin-inline: auto;
}

/* Providers hand back an iframe with its own width and height attributes;
   the frame owns the shape instead. */
.athar-scope .athar-video__frame iframe,
.athar-scope .athar-video__frame object,
.athar-scope .athar-video__frame video,
.athar-scope .athar-video__frame embed {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.athar-scope .athar-video__caption {
	margin-block-start: 0.9em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
	text-align: start;
}

/* ------------------------------------------------------------------ stats */

.athar-scope .athar-stats {
	max-inline-size: var(--athar-measure-wide);
	margin-inline: auto;
}

.athar-scope .athar-stats__intro {
	margin-block: 0 var(--athar-rhythm-tight);
	margin-inline: 0;
	max-inline-size: var(--athar-measure);
	text-wrap: pretty;
}

.athar-scope .athar-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding-block-start: var(--athar-rhythm-tight);
	border-block-start: 1px solid var(--athar-hairline);
}

.athar-scope .athar-stats__item {
	min-inline-size: 0;
}

.athar-scope .athar-stats__value {
	margin: 0;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.athar-scope .athar-stats__label {
	margin-block: 0.35em 0;
	margin-inline: 0;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--athar-quiet);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ quote */

.athar-scope .athar-quote {
	max-inline-size: var(--athar-measure);
	margin-block: 0;
	margin-inline: auto;
	padding-inline-start: clamp(1rem, 3vw, 2rem);
	border-inline-start: 2px solid var(--athar-hairline);
}

.athar-scope .athar-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.6rem);
	line-height: 1.45;
	text-wrap: pretty;
}

.athar-scope .athar-quote__body > :first-child {
	margin-block-start: 0;
}

.athar-scope .athar-quote__body > :last-child {
	margin-block-end: 0;
}

.athar-scope .athar-quote__by {
	margin-block-start: 1.1em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
}

.athar-scope .athar-quote__person {
	font-weight: 600;
}

.athar-scope .athar-quote__person + .athar-quote__role::before {
	content: "·";
	margin-inline: 0.5em;
}

/* --------------------------------------------------------- before & after */

.athar-scope .athar-ba__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--athar-radius);
	line-height: 0;
	touch-action: pan-y;
}

.athar-scope .athar-ba__layer {
	inset: 0;
}

.athar-scope .athar-ba__layer--after {
	position: relative;
}

/* The "before" half is clipped down to the handle. Without the script it
   simply rests at the halfway mark, which still reads as a comparison. */
.athar-scope .athar-ba__layer--before {
	position: absolute;
	clip-path: inset(0 50% 0 0);
}

[dir="rtl"] .athar-scope .athar-ba__layer--before {
	clip-path: inset(0 0 0 50%);
}

.athar-scope .athar-ba__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
}

.athar-scope .athar-ba__line {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: 2px;
	margin-inline-start: -1px;
	background: #fff;
	pointer-events: none;
}

/* The range is the whole stage: clicking anywhere moves the handle, and the
   thumb is drawn as the handle itself. */
.athar-scope .athar-ba__range {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
}

.athar-scope .athar-ba__range::-webkit-slider-runnable-track {
	background: transparent;
	block-size: 100%;
}

.athar-scope .athar-ba__range::-moz-range-track {
	background: transparent;
	block-size: 100%;
}

.athar-scope .athar-ba__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(20, 18, 16, 0.18);
	cursor: ew-resize;
}

.athar-scope .athar-ba__range::-moz-range-thumb {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(20, 18, 16, 0.18);
	cursor: ew-resize;
}

.athar-scope .athar-ba__range:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.athar-scope .athar-ba__labels {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-block-start: 0.9em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
}

/* ------------------------------------------------------------------- next */

.athar-scope .athar-next {
	max-inline-size: var(--athar-measure-wide);
	margin-inline: auto;
	padding-block-start: var(--athar-rhythm-tight);
	border-block-start: 1px solid var(--athar-hairline);
}

.athar-scope .athar-next__link {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.5vw, 1.75rem);
	padding-block: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.athar-scope .athar-next__media {
	flex: 0 0 auto;
	inline-size: clamp(4.5rem, 12vw, 7.5rem);
	overflow: hidden;
	border-radius: var(--athar-radius);
	line-height: 0;
}

.athar-scope .athar-next__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.athar-scope .athar-next__text {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.athar-scope .athar-next__kicker {
	font-size: 0.8em;
	letter-spacing: 0.04em;
	color: var(--athar-quiet);
}

.athar-scope .athar-next__title {
	font-size: clamp(1.15rem, 2.6vw, 1.75rem);
	line-height: 1.25;
	font-weight: 600;
	text-wrap: balance;
}

.athar-scope .athar-next__link:hover .athar-next__title,
.athar-scope .athar-next__link:focus-visible .athar-next__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.athar-scope .athar-next__arrow {
	flex: 0 0 auto;
	inline-size: 24px;
	block-size: 24px;
	color: var(--athar-quiet);
	transition: transform 160ms ease, color 160ms ease;
}

.athar-scope .athar-next__arrow svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* The arrow points the way the text reads. */
[dir="rtl"] .athar-scope .athar-next__arrow svg {
	transform: scaleX(-1);
}

.athar-scope .athar-next__link:hover .athar-next__arrow,
.athar-scope .athar-next__link:focus-visible .athar-next__arrow {
	color: inherit;
	transform: translateX(3px);
}

[dir="rtl"] .athar-scope .athar-next__link:hover .athar-next__arrow,
[dir="rtl"] .athar-scope .athar-next__link:focus-visible .athar-next__arrow {
	transform: translateX(-3px);
}

/* =========================================================== composed types

   One section type the agency built, drawn by includes/views/sections/custom.php.
   Everything below is driven by the modifier classes that template emits and by
   two custom properties; nothing is inline, nothing is !important, and the type
   inherits colour and typography from the theme exactly as the shipped types do.

   The measure is stated here rather than through athar-align-normal because a
   composed section may be a grid, and the align classes are reserved for the
   width layer, which still wins, being three classes deep. */

.athar-scope .athar-custom {
	--athar-cb-gap: clamp(1rem, 2.6vw, 1.75rem);

	display: grid;
	gap: var(--athar-cb-gap);
	max-inline-size: var(--athar-measure-wide);
	margin-inline: auto;
}

.athar-scope .athar-custom--two-col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.athar-scope .athar-custom__col {
	display: grid;
	gap: var(--athar-cb-gap);
	align-content: start;
	min-inline-size: 0;
}

.athar-scope .athar-custom--grid {
	grid-template-columns: repeat(var(--athar-cb-across, 3), minmax(0, 1fr));
}

.athar-scope .athar-custom--across-2 {
	--athar-cb-across: 2;
}

.athar-scope .athar-custom--across-3 {
	--athar-cb-across: 3;
}

.athar-scope .athar-custom--across-4 {
	--athar-cb-across: 4;
}

@media (max-width: 782px) {
	.athar-scope .athar-custom--two-col,
	.athar-scope .athar-custom--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------- the blocks */

.athar-scope .athar-cb {
	min-inline-size: 0;
}

.athar-scope .athar-cb--center {
	text-align: center;
}

.athar-scope .athar-cb--w-narrow {
	max-inline-size: var(--athar-measure);
}

.athar-scope .athar-cb--w-normal {
	max-inline-size: var(--athar-measure-wide);
}

.athar-scope .athar-cb--center.athar-cb--w-narrow,
.athar-scope .athar-cb--center.athar-cb--w-normal {
	margin-inline: auto;
}

/* A grid cell is already the width it is; narrowing inside one only makes the
   row ragged, so the width knob steps aside there. */
.athar-scope .athar-custom--grid > .athar-cb {
	max-inline-size: none;
}

.athar-scope .athar-cb__heading {
	margin: 0;
	line-height: 1.25;
	text-wrap: balance;
}

.athar-scope .athar-cb--h-s .athar-cb__heading {
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.athar-scope .athar-cb--h-l .athar-cb__heading {
	font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.athar-scope .athar-cb--h-xl .athar-cb__heading {
	font-size: clamp(2.1rem, 5.5vw, 3.6rem);
}

.athar-scope .athar-cb__text > :first-child {
	margin-block-start: 0;
}

.athar-scope .athar-cb__text > :last-child {
	margin-block-end: 0;
}

.athar-scope .athar-cb__text p {
	text-wrap: pretty;
}

.athar-scope .athar-cb__text ul,
.athar-scope .athar-cb__text ol {
	padding-inline-start: 1.4em;
	text-align: start;
}

/* ------------------------------------------------------------------ media */

.athar-scope .athar-cb__media {
	display: block;
	line-height: 0;
}

.athar-scope .athar-cb--ratio-16-9 .athar-cb__img {
	aspect-ratio: 16 / 9;
}

.athar-scope .athar-cb--ratio-4-3 .athar-cb__img {
	aspect-ratio: 4 / 3;
}

.athar-scope .athar-cb--ratio-square .athar-cb__img {
	aspect-ratio: 1 / 1;
}

.athar-scope .athar-cb--fit-cover .athar-cb__img {
	object-fit: cover;
}

/* Fitting inside the shape leaves room around the picture; the frame keeps it
   from reading as a mistake. */
.athar-scope .athar-cb--fit-contain .athar-cb__img {
	object-fit: contain;
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.athar-scope .athar-cb__gallery {
	display: grid;
	grid-template-columns: repeat(var(--athar-cb-cols, 3), minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.athar-scope .athar-cb--cols-2 .athar-cb__gallery {
	--athar-cb-cols: 2;
}

.athar-scope .athar-cb--cols-3 .athar-cb__gallery {
	--athar-cb-cols: 3;
}

.athar-scope .athar-cb--cols-4 .athar-cb__gallery {
	--athar-cb-cols: 4;
}

.athar-scope .athar-cb__cell {
	display: block;
	min-inline-size: 0;
	line-height: 0;
}

.athar-scope .athar-cb__cell .athar-cb__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 600px) {
	.athar-scope .athar-cb__gallery {
		--athar-cb-cols: 2;
	}
}

.athar-scope .athar-cb__video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--athar-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.athar-scope .athar-cb__video iframe,
.athar-scope .athar-cb__video object,
.athar-scope .athar-cb__video video,
.athar-scope .athar-cb__video embed {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* ---------------------------------------------------------------- button */

.athar-scope .athar-cb__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75em;
	padding-block: 0.5em;
	padding-inline: 1.4em;
	border: 1px solid currentColor;
	border-radius: var(--athar-radius);
	font-size: 0.95em;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
	transition: background-color 160ms ease, color 160ms ease;
}

/* A solid button is the one place a composed section names a colour. It cannot
   be `background: currentColor`, because setting the label colour on the same
   element would resolve the fill to the label's colour too, so the pair is
   declared as tokens instead, which a theme can override in one line. Same two
   values the dark background panel already uses. */
.athar-scope .athar-cb__button--solid {
	background: var(--athar-solid-bg, #1f1d1a);
	border-color: var(--athar-solid-bg, #1f1d1a);
	color: var(--athar-solid-ink, #f4f2ee);
}

.athar-scope .athar-cb__button--solid:hover,
.athar-scope .athar-cb__button--solid:focus-visible {
	opacity: 0.88;
}

.athar-scope .athar-cb__button--outline:hover,
.athar-scope .athar-cb__button--outline:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.athar-scope .athar-cb__button--link {
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------- numbers */

.athar-scope .athar-cb__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
}

.athar-scope .athar-cb__stat {
	min-inline-size: 0;
}

.athar-scope .athar-cb__statvalue {
	margin: 0;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.athar-scope .athar-cb__statlabel {
	margin-block: 0.35em 0;
	margin-inline: 0;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--athar-quiet);
	text-wrap: pretty;
}

/* ----------------------------------------------------------------- quote */

.athar-scope .athar-cb__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	line-height: 1.45;
	text-wrap: pretty;
}

.athar-scope .athar-cb__quote > :first-child {
	margin-block-start: 0;
}

.athar-scope .athar-cb__quote > :last-child {
	margin-block-end: 0;
}

.athar-scope .athar-cb__by {
	margin-block: 0.9em 0;
	margin-inline: 0;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
}

/* ------------------------------------------------------- rule and spacing */

.athar-scope .athar-cb__rule {
	margin: 0;
	border: 0;
	border-block-start: 1px solid var(--athar-hairline);
}

.athar-scope .athar-cb__space {
	display: block;
	block-size: var(--athar-cb-space, 1.5rem);
}

.athar-scope .athar-cb--space-s {
	--athar-cb-space: 0.5rem;
}

.athar-scope .athar-cb--space-m {
	--athar-cb-space: 1.5rem;
}

.athar-scope .athar-cb--space-l {
	--athar-cb-space: 3rem;
}

.athar-scope .athar-cb--space-xl {
	--athar-cb-space: 5rem;
}

/* ============================================================ style layer

   Everything below is driven by classes and custom properties written onto the
   section element by athar_section_attrs(). Nothing here is inline, nothing is
   !important, and a section nobody has styled matches none of it.

   Spacing and corner radius are not here at all: they resolve through
   --athar-s-mt / --athar-s-mb in the rhythm rules at the top of this file and
   through --athar-radius, which every rule in this stylesheet already reads.
   Overriding a token beats writing a new rule for each element that uses it. */

/* ----------------------------------------------------------- text alignment */

.athar-scope .athar-s-center {
	text-align: center;
}

/* Captions and credits are pinned to the reading start by their own rules;
   inside a centred section they should follow the section instead. */
.athar-scope .athar-s-center .athar-image__caption,
.athar-scope .athar-s-center .athar-gallery__caption,
.athar-scope .athar-s-center .athar-video__caption,
.athar-scope .athar-s-center .athar-quote__by,
.athar-scope .athar-s-center .athar-stats__intro {
	text-align: inherit;
	margin-inline: auto;
}

/* A quote's rule reads as a margin note; centred, it has nothing to hang off. */
.athar-scope .athar-s-center.athar-quote {
	padding-inline-start: 0;
	border-inline-start: 0;
}

/* Two columns cannot be centred, but their contents can. */
.athar-scope .athar-s-center .athar-split__body {
	text-align: inherit;
}

/* --------------------------------------------------------------- headings */

/* Heading size is the theme's job until someone says otherwise, the class is
   only present when the style layer has an opinion, so the default path never
   touches the theme's own scale. */
.athar-scope .athar-s-hsize .athar-cover__heading,
.athar-scope .athar-s-hsize .athar-text__heading,
.athar-scope .athar-s-hsize .athar-split__heading,
.athar-scope .athar-s-hsize .athar-next__title,
.athar-scope .athar-s-hsize .athar-quote__body {
	font-size: var(--athar-s-h);
	line-height: 1.2;
}

/* --------------------------------------------------------------- dividers */

.athar-scope .athar-s-divider-before {
	border-block-start: 1px solid var(--athar-hairline);
	padding-block-start: var(--athar-rhythm-tight);
}

.athar-scope .athar-s-divider-after {
	border-block-end: 1px solid var(--athar-hairline);
	padding-block-end: var(--athar-rhythm-tight);
}

/* ------------------------------------------------------------- backgrounds */

.athar-scope .athar-s-bg {
	padding-block: var(--athar-rhythm-tight);
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	border-radius: var(--athar-radius);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Edge to edge means edge to edge: rounded corners on a bleeding section leave
   four slivers of page showing through. Qualified with .athar-section for the
   same reason the bleed rules are. */
.athar-scope .athar-section.athar-align-full.athar-s-bg {
	border-radius: 0;
}

/* A tint of the inherited ink, so the panel belongs to whatever palette the
   theme brought with it rather than to a colour we picked. */
.athar-scope .athar-s-bg--tint {
	background-color: color-mix(in srgb, currentColor 5%, transparent);
}

.athar-scope .athar-s-bg--dark {
	background-color: #1f1d1a;
	color: #f4f2ee;
}

/* A hairline over a dark panel has to come from the panel's own ink. */
.athar-scope .athar-s-bg--dark {
	--athar-hairline: rgba(244, 242, 238, 0.18);
	--athar-quiet: rgba(244, 242, 238, 0.7);
}

.athar-scope .athar-s-bg--image {
	background-image: var(--athar-s-bg-image);
	color: #fff;

	/* The overlay as an inset ring wide enough to fill any box. A ::before
	   would be simpler, but .athar-cover is a grid container and a pseudo
	   element there becomes a grid item and moves the layout. This paints
	   over the background, under the content, and costs no box at all. */
	box-shadow: inset 0 0 0 100vmax rgba(20, 18, 16, var(--athar-s-overlay, 0.45));

	--athar-hairline: rgba(255, 255, 255, 0.22);
	--athar-quiet: rgba(255, 255, 255, 0.72);
}

/* An image panel needs real room around its text or the picture reads as a
   mistake rather than a backdrop. */
.athar-scope .athar-s-bg--image,
.athar-scope .athar-s-bg--dark {
	padding-block: clamp(1.75rem, 5vw, 3.5rem);
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.athar-scope * {
		animation: none !important;
		transition: none !important;
	}
}

/* ========================================================= the portfolio

   The archive page: a filter bar of plain links and a grid of cards. Like
   everything else here it owns layout and rhythm only, the type and the ink
   are the theme's, which is what lets the grid sit on any page without
   announcing that a plugin drew it. */

.athar-scope.athar-portfolio {
	/* Its own box, so the shortcode can land on a page beside other content
	   without inheriting or leaking margins. */
	margin-block: var(--athar-rhythm-tight);
}

.athar-scope .athar-portfolio__results {
	/* The one element the script swaps. Reserving nothing and moving nothing:
	   a swap replaces the cards in place. */
	display: block;
}

.athar-portfolio.is-athar-loading .athar-portfolio__results {
	opacity: 0.55;
	transition: opacity 120ms ease;
}

/* ------------------------------------------------------------ filter bar */

.athar-scope .athar-filters {
	margin-block-end: var(--athar-rhythm-tight);
	padding-block-end: var(--athar-rhythm-tight);
	border-block-end: 1px solid var(--athar-hairline);
}

.athar-scope .athar-filters__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em 0.9em;
}

.athar-scope .athar-filters__row + .athar-filters__row {
	margin-block-start: 0.6em;
}

.athar-scope .athar-filters__label {
	flex: 0 0 auto;
	min-inline-size: 6ch;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	color: var(--athar-quiet);
}

.athar-scope .athar-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-scope .athar-filters__item {
	margin: 0;
	padding: 0;
}

.athar-scope .athar-filters__link {
	display: inline-block;
	padding-block: 0.3em;
	padding-inline: 0.8em;
	border: 1px solid var(--athar-hairline);
	border-radius: 999px;
	font-size: 0.9em;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
	transition: opacity 140ms ease, border-color 140ms ease;
}

.athar-scope .athar-filters__link:hover,
.athar-scope .athar-filters__link:focus-visible {
	opacity: 1;
	border-color: currentColor;
}

.athar-scope .athar-filters__link.is-current {
	opacity: 1;
	font-weight: 600;
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 7%, transparent);
}

.athar-scope .athar-filters__reset {
	margin-block: 0.7em 0;
	font-size: 0.85em;
}

.athar-scope .athar-filters__clear {
	color: inherit;
	opacity: 0.72;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.athar-scope .athar-filters__clear:hover,
.athar-scope .athar-filters__clear:focus-visible {
	opacity: 1;
}

/* ------------------------------------------------------------- the grid */

.athar-scope .athar-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(var(--athar-cards, 3), minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-scope .athar-portfolio__grid--of-2 {
	--athar-cards: 2;
}

.athar-scope .athar-portfolio__grid--of-3 {
	--athar-cards: 3;
}

.athar-scope .athar-portfolio__grid--of-4 {
	--athar-cards: 4;
}

@media (max-width: 900px) {
	.athar-scope .athar-portfolio__grid {
		--athar-cards: 2;
	}
}

@media (max-width: 600px) {
	.athar-scope .athar-portfolio__grid {
		--athar-cards: 1;
	}
}

.athar-scope .athar-pcard {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

.athar-scope .athar-pcard__link {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	color: inherit;
	text-decoration: none;
}

.athar-scope .athar-pcard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--athar-radius);
	line-height: 0;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.athar-scope .athar-pcard__media--empty {
	aspect-ratio: 4 / 3;
}

.athar-scope .athar-pcard__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 240ms ease;
}

.athar-scope .athar-pcard__link:hover .athar-pcard__img,
.athar-scope .athar-pcard__link:focus-visible .athar-pcard__img {
	transform: scale(1.02);
}

.athar-scope .athar-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-inline-size: 0;
}

.athar-scope .athar-pcard__title {
	font-size: clamp(1.05rem, 1.9vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.athar-scope .athar-pcard__link:hover .athar-pcard__title,
.athar-scope .athar-pcard__link:focus-visible .athar-pcard__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.athar-scope .athar-pcard__client {
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--athar-quiet);
}

.athar-scope .athar-pcard__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-scope .athar-pcard__pill {
	margin: 0;
	padding-block: 0.15em;
	padding-inline: 0.6em;
	border: 1px solid var(--athar-hairline);
	border-radius: 999px;
	font-size: 0.75em;
	line-height: 1.5;
	color: var(--athar-quiet);
}

.athar-scope .athar-portfolio__empty {
	margin: 0;
	padding-block: clamp(3rem, 10vw, 6rem);
	text-align: center;
	color: var(--athar-quiet);
	text-wrap: pretty;
}

/* ------------------------------------------------------------ pagination */

.athar-scope .athar-pages {
	margin-block-start: var(--athar-rhythm-tight);
	padding-block-start: var(--athar-rhythm-tight);
	border-block-start: 1px solid var(--athar-hairline);
}

.athar-scope .athar-pages__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-scope .athar-pages__item {
	margin: 0;
	padding: 0;
}

.athar-scope .athar-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.2em;
	min-block-size: 2.2em;
	padding-inline: 0.6em;
	border: 1px solid var(--athar-hairline);
	border-radius: var(--athar-radius);
	font-size: 0.9em;
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
}

.athar-scope .athar-pages a.page-numbers:hover,
.athar-scope .athar-pages a.page-numbers:focus-visible {
	opacity: 1;
	border-color: currentColor;
}

.athar-scope .athar-pages .page-numbers.current {
	opacity: 1;
	font-weight: 600;
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 7%, transparent);
}

.athar-scope .athar-pages .page-numbers.dots {
	border-color: transparent;
}

/* ------------------------------------------------------- the client strip

   [athar_clients] is the one piece of Athar that can land on a page the
   plugin knows nothing about, so it asks for nothing from its surroundings:
   no measure, no background, no font of its own. */

.athar-scope.athar-clients {
	margin-block: clamp(1.5rem, 4vw, 3rem);
}

.athar-scope .athar-clients__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: clamp(1rem, 3vw, 2.25rem);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athar-scope .athar-clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* Logos arrive at every size and in every colour. A shared box and a single
   greyscale rest state is what makes an unruly set read as one row. */
.athar-scope .athar-clients__img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 56px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: opacity 160ms ease, filter 160ms ease;
}

.athar-scope .athar-clients__link {
	display: block;
	border: 0;
	text-decoration: none;
}

.athar-scope .athar-clients__link:hover .athar-clients__img,
.athar-scope .athar-clients__link:focus-visible .athar-clients__img {
	filter: grayscale(0);
	opacity: 1;
}