/* =========================================================================
   Excelinks blog
   Tokens → layout overrides → index → article → shared → responsive
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

.excelinks-blog {
	--xl-blue: #496ddb;
	--xl-blue-light: #6f8ee8;
	--xl-blue-dark: #3f5fc4;
	--xl-blue-link: #3a5ac0;
	--xl-blue-link-hover: #2b46a3;

	--xl-green: #2ba84a;
	--xl-mint: #b7f09c;

	--xl-ink: #0e1116;
	--xl-body: #2b3148;
	--xl-muted: #5a6480;
	--xl-white: #ffffff;

	--xl-tint: #f2f5fd;
	--xl-tint-2: #edf1fc;
	--xl-line: #e2e8f8;
	--xl-line-strong: #d3dcf2;
	--xl-avatar: #dce4fa;

	--xl-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
	--xl-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	--xl-radius-sm: 10px;
	--xl-radius: 14px;
	--xl-radius-lg: 20px;

	--xl-gutter: 80px;
	--xl-max: 1440px;
	--xl-measure: 760px;
}

/* -------------------------------------------------------------------------
   2. GeneratePress layout overrides — full width, no sidebar
   ---------------------------------------------------------------------- */

.excelinks-blog .site.grid-container,
.excelinks-blog .site-content.grid-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.excelinks-blog .site-content {
	display: block;
	padding: 0;
}

.excelinks-blog #primary,
.excelinks-blog .content-area {
	width: 100%;
	max-width: 100%;
	float: none;
	padding: 0;
	margin: 0;
}

.excelinks-blog #right-sidebar,
.excelinks-blog #left-sidebar,
.excelinks-blog .sidebar,
.excelinks-blog .widget-area {
	display: none;
}

/* Site header ------------------------------------------------------------

   Your header is transparent and absolutely positioned so it picks up
   whatever is behind it. Nothing here changes that. Instead every blog hero
   puts a band of brand blue behind the header's own height, so the white nav
   links always have blue underneath them — on the index, on archives, on
   search and on single posts.

   --xl-header-band is that height. Measure your header and adjust here if it
   isn't 88px; it's the only number involved.
   ---------------------------------------------------------------------- */

.excelinks-blog {
	--xl-header-band: 88px;
}

.excelinks-blog .site-header,
.excelinks-blog #masthead {
	background-color: transparent;
}

.excelinks-blog .site-main,
.excelinks-blog .separate-containers .site-main {
	margin: 0;
}

.excelinks-blog .inside-article,
.excelinks-blog .entry-content,
.excelinks-blog #page {
	padding: 0;
	margin: 0;
}

.excelinks-blog .site-content {
	margin-top: 0 !important;
}

/* Typography reset inside the blog scope.

   Colour and font-family deliberately do NOT go on .excelinks-blog. That is a
   body class, so it wraps the whole document — your site header and footer
   included. Anything in there that inherits its colour rather than declaring
   one (the CONTACT US button does) would pick up the blog's dark body text
   and go unreadable on the blue bar. Scoping to .site-main keeps it to the
   content this plugin actually renders. */
.excelinks-blog {
	background: var(--xl-white);
}

.excelinks-blog .site-main {
	font-family: var(--xl-font-display);
	color: var(--xl-body);
}

.excelinks-blog .site-main h1,
.excelinks-blog .site-main h2,
.excelinks-blog .site-main h3,
.excelinks-blog .site-main h4 {
	font-family: var(--xl-font-display);
	color: var(--xl-ink);
	letter-spacing: -0.02em;
	font-weight: 800;
}

/* Headings default to ink, so every heading that sits on blue has to win
   that rule on specificity rather than lose to it. */
.excelinks-blog .site-main .xl-hero-index__title,
.excelinks-blog .site-main .xl-band__heading,
.excelinks-blog .site-main .xl-newsletter__heading {
	color: var(--xl-white);
}

/* Links get no blanket colour. A rule broad enough to catch every link in
   the content is also broad enough to out-specify the buttons and pills that
   set their own colour, which is what was turning the CTA button blue. Only
   prose links are coloured here; components colour themselves. */
.excelinks-blog .site-main a {
	text-decoration: none;
}

.excelinks-blog .site-main .xl-content a,
.excelinks-blog .site-main .xl-takeaways a,
.excelinks-blog .site-main .xl-bio__text a,
.excelinks-blog .site-main .xl-noresults__list a {
	color: var(--xl-blue-link);
}

.excelinks-blog .site-main .xl-content a:hover,
.excelinks-blog .site-main .xl-content a:focus-visible,
.excelinks-blog .site-main .xl-takeaways a:hover,
.excelinks-blog .site-main .xl-bio__text a:hover {
	color: var(--xl-blue-link-hover);
}

/* Belt and braces: whatever your header does elsewhere, it keeps doing here.
   Nothing in this file should reach into it. */
.excelinks-blog .site-header,
.excelinks-blog #masthead,
.excelinks-blog .site-footer,
.excelinks-blog #colophon {
	font-family: inherit;
	color: inherit;
}

.excelinks-blog a:focus-visible,
.excelinks-blog button:focus-visible,
.excelinks-blog input:focus-visible {
	outline: 3px solid var(--xl-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
   3. Shared pieces
   ---------------------------------------------------------------------- */

.xl-shell {
	max-width: var(--xl-max);
	margin: 0 auto;
	padding-left: var(--xl-gutter);
	padding-right: var(--xl-gutter);
	box-sizing: border-box;
}

.xl-eyebrow {
	margin: 0;
	font-family: var(--xl-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--xl-ink);
}

.xl-eyebrow--light {
	color: var(--xl-white);
}

.xl-eyebrow--link {
	color: var(--xl-blue-link);
	letter-spacing: 0.16em;
	font-size: 11px;
}

.xl-btn {
	display: inline-block;
	font-family: var(--xl-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	padding: 18px 30px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.xl-btn--white {
	background: var(--xl-white);
	color: var(--xl-ink);
}

.xl-btn--white:hover {
	color: var(--xl-ink);
	transform: translateY(-1px);
}

.xl-btn--mint {
	background: var(--xl-mint);
	color: var(--xl-ink);
}

.xl-btn--mint:hover {
	color: var(--xl-ink);
	transform: translateY(-1px);
}

.xl-btn--outline {
	background: transparent;
	color: var(--xl-ink);
	border: 1.5px solid var(--xl-ink);
	padding: 16px 30px;
}

.xl-btn--outline:hover {
	background: var(--xl-ink);
	color: var(--xl-white);
}

@media (prefers-reduced-motion: reduce) {
	.xl-btn {
		transition: none;
	}
	.xl-btn:hover {
		transform: none;
	}
}

/* Covers ---------------------------------------------------------------- */

.xl-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 26px;
	border-radius: var(--xl-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.xl-cover__text {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.xl-cover__mark {
	position: absolute;
	top: 22px;
	left: 26px;
	width: 30px;
	opacity: 0.85;
}

.xl-cover__mark svg {
	width: 100%;
	height: auto;
	display: block;
}

.xl-cover--v1 {
	background: var(--xl-ink);
	color: var(--xl-white);
}

.xl-cover--v2 {
	background: var(--xl-mint);
	color: var(--xl-ink);
}

.xl-cover--v3 {
	background: var(--xl-blue);
	color: var(--xl-white);
}

.xl-cover--v4 {
	background: var(--xl-tint-2);
	color: var(--xl-ink);
	border: 1px solid var(--xl-avatar);
}

.xl-cover--image {
	padding: 0;
	border: none;
}

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

/* Post cards ------------------------------------------------------------ */

.xl-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.xl-card__link {
	display: block;
	color: inherit;
}

.xl-card__link .xl-cover {
	transition: transform 0.2s ease;
}

.xl-card__link:hover .xl-cover {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.xl-card__link .xl-cover {
		transition: none;
	}
	.xl-card__link:hover .xl-cover {
		transform: none;
	}
}

.xl-card__title {
	margin: 0;
	font-size: 21px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--xl-ink);
}

.xl-card__link:hover .xl-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.xl-card__meta {
	font-size: 14px;
	color: var(--xl-muted);
}

/* Band ------------------------------------------------------------------ */

/* A contained card rather than a full-bleed band. Full bleed put brand blue
   directly against the footer's blue, which reads as a seam between two
   nearly-identical colours instead of one surface. Inset, with white above
   and below, the band is clearly its own object and the footer starts
   cleanly. */
/* Spacing is padding, not margin, and deliberately so. As the last child of
   .site-main the band's bottom margin collapses out of its parent instead of
   pushing the footer down — which is why the gap appeared on single posts,
   where an <article> wrapper sits in between and blocks the collapse, but
   vanished on the index. Padding cannot collapse. */
.xl-band {
	color: var(--xl-white);
	max-width: var(--xl-max);
	margin: 0 auto;
	padding: 96px var(--xl-gutter) 104px;
	box-sizing: border-box;
}

.xl-band__inner {
	background: linear-gradient(120deg, var(--xl-blue) 0%, var(--xl-blue-dark) 100%);
	border-radius: 24px;
	padding: 64px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.xl-band__heading {
	margin: 14px 0 0;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--xl-white);
	max-width: 15ch;
}

.xl-band__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	flex-shrink: 0;
}

.xl-band__note {
	margin: 0;
	font-family: var(--xl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--xl-white);
	max-width: 32ch;
}

/* -------------------------------------------------------------------------
   4. Blog index
   ---------------------------------------------------------------------- */

/* Padding-top clears the transparent header and then adds real breathing
   room, so the eyebrow never crowds the nav. */
.xl-hero-index {
	background: linear-gradient(180deg, var(--xl-blue) 0%, var(--xl-blue-dark) 100%);
	color: var(--xl-white);
	padding: calc(var(--xl-header-band) + 56px) 0 84px;
	text-align: center;
}

.xl-hero-index__title {
	margin: 18px auto 0;
	max-width: 16ch;
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 0.96;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--xl-white);
}

.xl-hero-index__title em {
	font-style: normal;
	color: var(--xl-ink);
}

.xl-hero-index__intro {
	margin: 22px auto 0;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--xl-white);
}

.xl-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
	padding: 0;
	list-style: none;
}

.xl-filters a {
	display: inline-block;
	font-family: var(--xl-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--xl-white);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 12px 20px;
}

.xl-filters a:hover {
	color: var(--xl-ink);
	background: var(--xl-white);
	border-color: var(--xl-white);
}

.xl-filters .is-current a,
.xl-filters a[aria-current='page'] {
	color: var(--xl-ink);
	background: var(--xl-white);
	border-color: var(--xl-white);
}

/* On a white background rather than on blue. */
.xl-filters--light {
	justify-content: flex-start;
	margin-top: 26px;
}

.xl-filters--light a {
	color: var(--xl-ink);
	border-color: var(--xl-line-strong);
}

.xl-filters--light a:hover {
	color: var(--xl-white);
	background: var(--xl-ink);
	border-color: var(--xl-ink);
}

/* Section headers ------------------------------------------------------- */

.xl-section {
	padding-top: 88px;
}

.xl-section__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 32px;
}

.xl-section__head::after {
	content: '';
	flex-grow: 1;
	height: 1px;
	background: var(--xl-line);
}

.xl-section__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--xl-green);
	flex-shrink: 0;
}

.xl-section__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.xl-section__title {
	margin: 0;
	font-size: 32px;
}

/* Featured -------------------------------------------------------------- */

.xl-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	color: inherit;
}

.xl-featured .xl-cover {
	aspect-ratio: 8 / 5;
	padding: 44px;
}

.xl-featured .xl-cover__text {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.02;
}

.xl-featured .xl-cover__mark {
	top: auto;
	bottom: 40px;
	left: 44px;
	width: 44px;
}

.xl-featured__title {
	margin: 18px 0 0;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.06;
}

.xl-featured__excerpt {
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 1.62;
	color: #39405a;
	max-width: 46ch;
}

.xl-featured__more {
	display: inline-block;
	margin-top: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--xl-ink);
	border-bottom: 2px solid var(--xl-ink);
	padding-bottom: 4px;
}

.xl-featured__more:hover {
	color: var(--xl-blue-link);
	border-color: var(--xl-blue-link);
}

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

.xl-byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
}

.xl-byline__person {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #39405a;
}

/* Avatars ---------------------------------------------------------------

   Initials sit underneath, the photo on top. If there is no photo, or the
   photo fails to load (Gravatar blocked, avatars switched off in Settings →
   Discussion), the initials show through instead of an empty circle.
   ---------------------------------------------------------------------- */

.xl-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--xl-avatar-size, 38px);
	height: var(--xl-avatar-size, 38px);
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--xl-avatar);
	overflow: hidden;
}

.xl-avatar__initials {
	font-size: calc(var(--xl-avatar-size, 38px) * 0.38);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--xl-blue-link);
	user-select: none;
}

.xl-avatar img,
.xl-avatar .avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 999px;
}

.xl-byline__avatar {
	--xl-avatar-size: 38px;
}

.xl-byline__name {
	font-weight: 700;
	color: var(--xl-blue-link);
}

.xl-badge,
.xl-byline__badge {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.xl-bio__name .xl-badge {
	width: 20px;
	height: 20px;
}

.xl-byline__rule {
	width: 1px;
	height: 26px;
	background: var(--xl-line-strong);
}

/* Grid ------------------------------------------------------------------ */

.xl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

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

.xl-pagination {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

.xl-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.xl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	box-sizing: border-box;
	border-radius: var(--xl-radius-sm);
	border: 1.5px solid var(--xl-line);
	font-size: 15px;
	font-weight: 600;
	color: var(--xl-ink);
}

.xl-pagination .page-numbers:hover {
	border-color: var(--xl-ink);
}

.xl-pagination .page-numbers.current {
	background: var(--xl-ink);
	border-color: var(--xl-ink);
	color: var(--xl-white);
}

/* Newsletter ------------------------------------------------------------ */

.xl-newsletter {
	color: var(--xl-white);
	max-width: var(--xl-max);
	margin: 0 auto;
	padding: 96px var(--xl-gutter) 0;
	box-sizing: border-box;
}

.xl-newsletter__inner {
	background: linear-gradient(120deg, var(--xl-blue) 0%, var(--xl-blue-dark) 100%);
	border-radius: 24px;
	padding: 56px 64px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.xl-newsletter__heading {
	margin: 12px 0 0;
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--xl-white);
	max-width: 18ch;
}

.xl-newsletter__form {
	width: 440px;
	max-width: 100%;
	flex-shrink: 0;
}

.xl-newsletter__label {
	display: block;
	font-family: var(--xl-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--xl-white);
	margin-bottom: 10px;
}

.xl-newsletter__row {
	display: flex;
	gap: 10px;
}

.xl-newsletter__input {
	flex-grow: 1;
	height: 54px;
	box-sizing: border-box;
	padding: 0 16px;
	font-family: var(--xl-font-display);
	font-size: 15px;
	color: var(--xl-ink);
	background: var(--xl-white);
	border: none;
	border-radius: var(--xl-radius-sm);
}

.xl-newsletter__row .xl-btn {
	padding: 0 24px;
	height: 54px;
	border-radius: var(--xl-radius-sm);
}

/* -------------------------------------------------------------------------
   5. Single article
   ---------------------------------------------------------------------- */

/* The band of blue at the top is what the transparent header sits on, so the
   white nav links stay readable above an otherwise pale hero. */
.xl-hero-post {
	background: linear-gradient(
		180deg,
		var(--xl-blue) 0,
		var(--xl-blue) var(--xl-header-band),
		var(--xl-tint) var(--xl-header-band)
	);
	padding: calc(var(--xl-header-band) + 48px) 0 64px;
}

.xl-hero-post__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.xl-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--xl-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.xl-breadcrumb span {
	color: #8a94b4;
	font-weight: 500;
}

.xl-hero-post__meta {
	margin: 18px 0 0;
	font-family: var(--xl-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--xl-muted);
}

.xl-hero-post__title {
	margin: 16px 0 0;
	font-size: clamp(30px, 3.9vw, 50px);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.xl-hero-post .xl-cover {
	aspect-ratio: 13 / 10;
	border-radius: var(--xl-radius-lg);
	padding: 44px;
}

.xl-hero-post .xl-cover__text {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: -0.025em;
}

.xl-hero-post .xl-cover__mark {
	top: auto;
	bottom: 40px;
	left: 44px;
	width: 52px;
}

/* Article body ---------------------------------------------------------- */

.xl-article-body {
	max-width: var(--xl-measure);
	margin: 0 auto;
	padding: 64px var(--xl-gutter) 0;
	box-sizing: border-box;
}

.xl-lead {
	margin: 0 0 40px;
	font-size: clamp(20px, 2.1vw, 25px);
	line-height: 1.42;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--xl-ink);
}

.xl-takeaways {
	background: var(--xl-tint);
	border-radius: 16px;
	padding: 32px 34px;
	margin-bottom: 48px;
}

.xl-takeaways__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.xl-takeaways__title {
	margin: 0;
	font-size: 20px;
	letter-spacing: -0.01em;
}

.xl-takeaways ul {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.xl-takeaways li {
	font-size: 17px;
	line-height: 1.58;
	color: #39405a;
}

.xl-takeaways li::marker {
	color: var(--xl-blue);
}

/* Content from the editor ----------------------------------------------- */

.xl-content {
	font-size: 18px;
	line-height: 1.68;
	color: var(--xl-body);
}

.xl-content > * + * {
	margin-top: 26px;
}

.xl-content h2 {
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.12;
	margin-top: 56px;
	margin-bottom: 0;
}

.xl-content h3 {
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.2;
	font-weight: 700;
	margin-top: 40px;
	margin-bottom: 0;
}

.xl-content h2 + p,
.xl-content h3 + p {
	margin-top: 16px;
}

.xl-content p {
	margin-bottom: 0;
}

.xl-content ul,
.xl-content ol {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xl-content li::marker {
	color: var(--xl-blue);
}

.xl-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.xl-content img,
.xl-content figure img {
	border-radius: var(--xl-radius);
	height: auto;
}

.xl-content figcaption {
	font-family: var(--xl-font-mono);
	font-size: 12px;
	color: var(--xl-muted);
	margin-top: 10px;
}

.xl-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.xl-content th,
.xl-content td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--xl-line);
}

.xl-content th {
	font-family: var(--xl-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--xl-blue-link);
}

/* Pull quote / callout: add the class "xl-callout" to a blockquote or a
   group block in the editor, or just use a plain blockquote. */
.xl-content blockquote,
.xl-content .xl-callout {
	background: var(--xl-ink);
	color: var(--xl-white);
	border: none;
	border-radius: 16px;
	padding: 34px 38px;
	margin-left: 0;
	margin-right: 0;
	font-size: clamp(19px, 2.1vw, 24px);
	line-height: 1.38;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.xl-content blockquote p,
.xl-content .xl-callout p {
	margin: 0;
	color: var(--xl-white);
}

.xl-content blockquote cite,
.xl-content .xl-callout cite {
	display: block;
	margin-top: 14px;
	font-family: var(--xl-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--xl-mint);
}

/* Bios ------------------------------------------------------------------ */

.xl-bios {
	margin-top: 64px;
	background: var(--xl-tint);
	border-top: 3px solid var(--xl-blue);
	border-radius: 0 0 16px 16px;
	padding: 34px 38px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.xl-bio {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.xl-bio + .xl-bio {
	border-top: 1px solid #d9e1f6;
	padding-top: 22px;
}

.xl-bio__avatar {
	--xl-avatar-size: 64px;
}

.xl-bio__name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--xl-ink);
}

.xl-bio__name svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Search ---------------------------------------------------------------- */

.xl-searchform {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 30px auto 0;
}

.xl-hero-index--left .xl-searchform {
	margin-left: 0;
	margin-right: 0;
}

.xl-searchform__input {
	flex-grow: 1;
	height: 56px;
	box-sizing: border-box;
	padding: 0 18px;
	font-family: var(--xl-font-display);
	font-size: 16px;
	color: var(--xl-ink);
	background: var(--xl-white);
	border: none;
	border-radius: var(--xl-radius-sm);
}

.xl-searchform__input::placeholder {
	color: #7b85a3;
}

.xl-searchform .xl-btn {
	height: 56px;
	padding: 0 26px;
	border-radius: var(--xl-radius-sm);
}

.xl-searchcount {
	margin: 20px 0 0;
	font-family: var(--xl-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--xl-white);
}

.xl-noresults {
	max-width: 62ch;
}

.xl-noresults__list {
	margin: 20px 0 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 17px;
	line-height: 1.6;
	color: #39405a;
}

.xl-noresults__list li::marker {
	color: var(--xl-blue);
}

/* Utility ---------------------------------------------------------------- */

.xl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.xl-bio__text {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.62;
	color: #39405a;
}

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

.xl-related {
	padding-top: 88px;
}

.xl-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--xl-line);
	padding-bottom: 20px;
	margin-bottom: 28px;
}

.xl-related__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.xl-related .xl-cover {
	aspect-ratio: 16 / 11;
	padding: 20px;
}

.xl-related .xl-card__title {
	font-size: 18px;
	line-height: 1.28;
}

.xl-dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.xl-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--xl-line-strong);
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.xl-dots button[aria-selected='true'] {
	width: 34px;
	background: var(--xl-blue-link);
}

/* -------------------------------------------------------------------------
   6. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.excelinks-blog {
		--xl-gutter: 48px;
	}
}

@media (max-width: 1024px) {
	.xl-featured,
	.xl-hero-post__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Headline first, cover under it — the same order as the mobile board.
	   column-reverse put the cover above the breadcrumb, which is why it
	   was colliding with the header. */
	.xl-hero-post__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.xl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.xl-related__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.xl-related__track::-webkit-scrollbar {
		display: none;
	}

	.xl-related__track > * {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}

	.xl-dots {
		display: flex;
	}

	.xl-band__inner,
	.xl-newsletter__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.xl-band__heading,
	.xl-newsletter__heading {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.excelinks-blog {
		--xl-gutter: 20px;
	}

	/* The header is shorter on mobile, but the clearance still has to be
	   calculated from it rather than replaced with a flat number. */
	.excelinks-blog {
		--xl-header-band: 64px;
	}

	.xl-hero-index {
		padding: calc(var(--xl-header-band) + 36px) 0 52px;
		text-align: left;
	}

	.xl-hero-index__title,
	.xl-hero-index__intro {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.xl-filters {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: calc(var(--xl-gutter) * -1);
		margin-right: calc(var(--xl-gutter) * -1);
		padding-left: var(--xl-gutter);
		padding-right: var(--xl-gutter);
	}

	.xl-filters::-webkit-scrollbar {
		display: none;
	}

	.xl-filters li {
		flex-shrink: 0;
	}

	.xl-section,
	.xl-related {
		padding-top: 56px;
	}

	.xl-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.xl-article-body {
		padding-top: 32px;
	}

	.xl-hero-post {
		padding: calc(var(--xl-header-band) + 28px) 0 36px;
	}

	.xl-hero-post .xl-cover,
	.xl-featured .xl-cover {
		padding: 24px;
	}

	.xl-hero-post .xl-cover__mark,
	.xl-featured .xl-cover__mark {
		bottom: 22px;
		left: 24px;
		width: 34px;
	}

	.xl-takeaways,
	.xl-bios {
		padding: 22px;
	}

	.xl-content blockquote,
	.xl-content .xl-callout {
		padding: 24px;
	}

	.xl-byline {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.xl-byline__rule {
		display: none;
	}

	.xl-related__track > * {
		flex-basis: 78%;
	}

	.xl-newsletter__row {
		flex-direction: column;
	}

	.xl-newsletter__row .xl-btn {
		width: 100%;
	}

	.xl-searchform {
		flex-direction: column;
		max-width: 100%;
	}

	.xl-searchform .xl-btn {
		width: 100%;
	}

	.xl-band {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.xl-newsletter {
		padding-top: 56px;
	}

	.xl-band__inner,
	.xl-newsletter__inner {
		border-radius: 18px;
		padding: 36px 24px;
	}
}

/* =========================================================================
   7. Theme overrides

   GeneratePress writes its typography settings as inline CSS in the <head>,
   which lands after this file and wins on source order. Anything the
   customiser can set — heading sizes, list indents, paragraph spacing — has
   to out-specify it rather than rely on order. Adding .excelinks-blog in
   front does that, and keeps it scoped to the blog either way.
   ====================================================================== */

.excelinks-blog .xl-content h2,
.excelinks-blog .xl-takeaways .xl-takeaways__title {
	font-family: var(--xl-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--xl-ink);
}

.excelinks-blog .xl-content h2 {
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.12;
	margin-top: 56px;
	margin-bottom: 0;
}

.excelinks-blog .xl-content h3 {
	font-family: var(--xl-font-display);
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--xl-ink);
	margin-top: 40px;
	margin-bottom: 0;
}

.excelinks-blog .xl-takeaways .xl-takeaways__title {
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}

.excelinks-blog .xl-content h2 + p,
.excelinks-blog .xl-content h3 + p {
	margin-top: 16px;
}

/* Themes routinely add a left margin to lists on top of the padding, which
   pushes bullets far off the text column on narrow screens. */
.excelinks-blog .xl-content ul,
.excelinks-blog .xl-content ol,
.excelinks-blog .xl-takeaways ul {
	margin-left: 0;
	margin-right: 0;
	padding-left: 20px;
}

.excelinks-blog .xl-content li,
.excelinks-blog .xl-takeaways li {
	margin-left: 0;
	padding-left: 4px;
}

.excelinks-blog .xl-content p {
	margin-bottom: 0;
}

/* The lead paragraph is a <p>, so theme paragraph sizing can flatten it. */
.excelinks-blog .xl-lead {
	font-size: clamp(20px, 2.1vw, 25px);
	line-height: 1.42;
	font-weight: 700;
	color: var(--xl-ink);
}

@media (max-width: 768px) {
	.excelinks-blog .xl-content h2 {
		margin-top: 40px;
	}

	.excelinks-blog .xl-content h3 {
		margin-top: 30px;
	}
}

/* =========================================================================
   8. Author socials
   ====================================================================== */

.xl-bio__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.xl-bio__socials li {
	margin: 0;
	padding: 0;
}

.xl-bio__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--xl-line-strong);
	background: var(--xl-white);
	color: var(--xl-blue-link);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.xl-bio__socials a svg {
	width: 17px;
	height: 17px;
	display: block;
}

.xl-bio__socials a:hover,
.xl-bio__socials a:focus-visible {
	background: var(--xl-blue);
	border-color: var(--xl-blue);
	color: var(--xl-white);
}

/* =========================================================================
   9. Rendering performance

   Related posts sit below the fold on every article. content-visibility lets
   the browser skip their layout and paint until they're scrolled near, and
   contain-intrinsic-size reserves the right height so nothing jumps when it
   does. Scoped to a section with no in-page anchors, so it can't break
   find-in-page or a jump link.
   ====================================================================== */

@supports (content-visibility: auto) {
	.xl-related__track {
		content-visibility: auto;
		contain-intrinsic-size: auto 420px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xl-bio__socials a {
		transition: none;
	}
}

/* =========================================================================
   10. Author hover card

   CSS only — no JavaScript, no extra request. The panel is in the markup and
   simply revealed, so there is nothing to fetch on hover and no delay before
   it appears.
   ====================================================================== */

.xl-authorcard {
	position: relative;
	display: inline-block;
}

.xl-authorcard__pop {
	position: absolute;
	top: calc(100% + 14px);
	left: -14px;
	z-index: 40;
	display: block;
	width: 310px;
	max-width: calc(100vw - 40px);
	box-sizing: border-box;
	padding: 18px;
	border: 1px solid var(--xl-line);
	border-radius: 16px;
	background: var(--xl-white);
	box-shadow: 0 20px 44px rgba(14, 17, 22, 0.16), 0 2px 6px rgba(14, 17, 22, 0.06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* The little pointer up to the name. */
.xl-authorcard__pop::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 26px;
	width: 11px;
	height: 11px;
	background: var(--xl-white);
	border-left: 1px solid var(--xl-line);
	border-top: 1px solid var(--xl-line);
	transform: rotate(45deg);
}

.xl-authorcard__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.xl-authorcard__avatar {
	--xl-avatar-size: 44px;
}

.xl-authorcard__name {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--xl-font-display);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--xl-ink);
}

.xl-authorcard__name .xl-badge {
	width: 16px;
	height: 16px;
}

.xl-authorcard__bio {
	display: block;
	margin-top: 12px;
	font-family: var(--xl-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #39405a;
}

/* Hover is only offered to devices that actually have a pointer. On touch
   there is no hover state to leave, so the card would stick open after a tap
   and sit over the content. */
@media (hover: hover) and (pointer: fine) {
	.xl-authorcard:hover .xl-authorcard__pop {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* Keyboard users get it on every device. */
.xl-authorcard:focus-within .xl-authorcard__pop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.xl-authorcard__pop {
		transition: none;
		transform: none;
	}

	.xl-authorcard:hover .xl-authorcard__pop,
	.xl-authorcard:focus-within .xl-authorcard__pop {
		transform: none;
	}
}