/*
Theme Name:   Loving Spain Life
Theme URI:    https://lovingspainlife.com
Description:  Child theme for lovingspainlife.com. Cream and burgundy, with a green accent on Portugal posts. All design lives in tokens.css — nothing is stored in the Customizer.
Author:       Matt Hulland
Template:     generatepress
Version:      0.1.0
License:      GPL v2 or later
Text Domain:  lsl
*/

/* Type ------------------------------------------------------------------ */

body {
	background: var(--lsl-paper);
	color: var(--lsl-ink-soft);
	font-family: var(--lsl-font-body);
	font-size: var(--lsl-size-base);
	line-height: var(--lsl-leading-body);
}

h1, h2, h3, h4 {
	font-family: var(--lsl-font-display);
	color: var(--lsl-ink);
	line-height: var(--lsl-leading-tight);
	font-weight: 400;
}

h1 { font-size: var(--lsl-size-2xl); }
h2 { font-size: var(--lsl-size-xl); }
h3 { font-size: var(--lsl-size-lg); }

/* One width system: text, media and the featured image all fill the content
   column. Line length is controlled by the column itself (--lsl-article-max
   and --lsl-rail in tokens.css), not by per-element caps — two width systems
   is why nothing lined up on the right edge. */

a {
	color: var(--lsl-accent);
	text-decoration-color: var(--lsl-accent-tint);
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--lsl-accent-deep);
	text-decoration-color: currentColor;
}

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

.site-header {
	background: var(--lsl-paper-warm);
	border-bottom: var(--lsl-rule) solid var(--lsl-accent);
	padding: var(--lsl-space-3) 0;
}

/* GeneratePress centres a 1200px header container with 40px padding; our
   content sections use 1180 with 16. Match them, or the logo sits on a
   different left edge from everything beneath it. */
/* GeneratePress caps the whole site wrapper at 1200px, so widening only our
   own sections does nothing — the wrapper still holds them in. The hero
   escapes it (rendered outside the wrapper), which is why it moved left and
   the sections below did not. */
.site.grid-container {
	max-width: var(--lsl-content-max);
}

.site-header .inside-header {
	max-width: var(--lsl-container);
	padding-inline: var(--lsl-space-4);
}

/* Branding block ------------------------------------------------------- */

.lsl-branding-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lsl-space-3);
	text-decoration: none;
}

/* The mark holds burgundy on every page. The accent moves around it, not with
   it — otherwise the logo changes colour as you browse. */
.lsl-mark {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	color: var(--lsl-accent-deep);
}

.lsl-wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.lsl-sitename {
	font-family: var(--lsl-font-display);
	font-size: var(--lsl-size-lg);
	font-weight: 400;
	color: var(--lsl-ink);
	margin: 0;
}

.lsl-tagline {
	font-family: var(--lsl-font-body);
	font-size: var(--lsl-size-xs);
	color: var(--lsl-ink-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 3px 0 0;
}

/* GeneratePress prints its own site name and tagline alongside ours. The class
   is .main-title, not .site-title — hiding the latter does nothing. */
.site-header .main-title,
.site-header .site-title,
.site-header .site-description {
	display: none;
}

@media (max-width: 600px) {
	.lsl-mark { width: 38px; height: 38px; }
	.lsl-tagline { display: none; }
}

/* Navigation ------------------------------------------------------------ */

.main-navigation {
	background: transparent;
}

.main-navigation .main-nav > ul > li > a {
	font-size: var(--lsl-size-sm);
	color: var(--lsl-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--lsl-accent);
}

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

.lsl-byline .lsl-avatar {
	border-radius: 50%;
	width: 22px;
	height: 22px;
}

/* Post header ----------------------------------------------------------- */

.lsl-eyebrow {
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lsl-accent);
	margin: 0 0 var(--lsl-space-2);
}

/* The reading column is centred on the PAGE, and the TOC hangs in the leftover
   margin beside it. The previous layout put the rail inside the box and pushed
   the text ~111px right of the page's centre — header centred, text not, which
   reads as "everything shifted right".
   The explicit margin-inline pin also beats a stray upstream 40px margin-left
   on .entry-header that staggered the title off the featured image. */
.lsl-post-header,
.lsl-featured {
	max-width: var(--lsl-content-col);
	margin-inline: auto;
}

/* Full container width, margins pinned to zero — something upstream hands
   in-article blocks a 40px side margin, which steals the symmetry budget. */
.lsl-single .lsl-article {
	max-width: none;
	margin-inline: 0;
}

/* No `balance` here: it equal-lengths the lines by wrapping early, which reads
   as the title refusing the column width. `pretty` fills each line and only
   steps in to avoid a lone word on the last one. */
.lsl-post-title {
	margin: 0 0 var(--lsl-space-3);
	text-wrap: pretty;
}

.lsl-byline {
	display: flex;
	align-items: center;
	gap: var(--lsl-space-2);
	font-size: var(--lsl-size-sm);
	color: var(--lsl-ink-muted);
	padding-bottom: var(--lsl-space-4);
	border-bottom: 1px solid var(--lsl-border);
}

/* Featured image and stamp ---------------------------------------------- */

.lsl-featured {
	position: relative;
	margin: var(--lsl-space-6) auto; /* auto: this rule is later in the cascade
	                                    than the centring one, so a 0 here wins
	                                    and drags the image off-centre */
	border-radius: var(--lsl-radius);
	overflow: hidden;
}

.lsl-featured img {
	display: block;
	width: 100%;
	height: auto;
}

.lsl-stamp {
	position: absolute;
	right: var(--lsl-space-3);
	bottom: var(--lsl-space-3);
	width: clamp(104px, 13vw, 150px);
	height: auto;
	color: var(--lsl-accent-deep);
	opacity: 1;
	pointer-events: none;

	/* A photo can be any colour under here, so the stamp carries its own
	   paper-coloured halo. Many stacked drop-shadows compound into a solid
	   glow — one alone is too thin to lift ink off a busy image. */
	filter:
		drop-shadow( 0 0 1px var(--lsl-paper) )
		drop-shadow( 0 0 2px var(--lsl-paper) )
		drop-shadow( 0 0 3px var(--lsl-paper) )
		drop-shadow( 0 0 6px var(--lsl-paper) )
		drop-shadow( 0 0 10px var(--lsl-paper) );
}

/* The eyebrow already carries the country in text, so below the fold of a
   phone the stamp is decoration competing for a small image. */
@media (max-width: 600px) {
	.lsl-stamp {
		display: none;
	}
}

/* Callout --------------------------------------------------------------- */

.lsl-callout {
	background: var(--lsl-wash);
	border-left: 4px solid var(--lsl-accent);
	border-radius: 0;
	padding: var(--lsl-space-4) var(--lsl-space-6);
	margin: var(--lsl-space-6) 0;
	font-style: italic;
	color: var(--lsl-ink-soft);
}

.lsl-callout p:last-child {
	margin-bottom: 0;
}

/* Tile divider — one file, inherits the accent via currentColor ---------- */

/* A rule above and below, with the 40px tile row centred between them, so the
   band reads as one deliberate object rather than a pattern that happens to
   end at a line. */
.lsl-divider {
	height: 56px;
	margin: var(--lsl-space-8) 0;
	color: var(--lsl-accent);
	background-color: var(--lsl-paper-cream);
	background-image: var(--lsl-tile);
	background-size: 40px 40px;
	background-repeat: repeat-x;
	background-position: center center;
	border-top: var(--lsl-rule) solid var(--lsl-accent);
	border-bottom: var(--lsl-rule) solid var(--lsl-accent);
}

/* Table of contents ----------------------------------------------------- */

.lsl-toc {
	background: var(--lsl-paper-cream);
	border-radius: var(--lsl-radius);
	padding: var(--lsl-space-3) var(--lsl-space-4);
	font-size: var(--lsl-size-sm);
}

.lsl-toc-label {
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lsl-ink-muted);
	margin: 0 0 var(--lsl-space-2);
}

/* Symmetric side columns keep the middle column on the page's centre line.
   The TOC sits at the inner edge of the left one; the right one stays empty
   on purpose — it is what buys the symmetry. */
@media (min-width: 900px) {
	.lsl-article {
		display: grid;
		grid-template-columns: 1fr minmax(0, var(--lsl-content-col)) 1fr;
		gap: var(--lsl-space-8);
		align-items: start;
	}

	.lsl-toc {
		position: sticky;
		top: var(--lsl-space-6);
		width: var(--lsl-rail);
		justify-self: end;
	}
}

/* In-content media ------------------------------------------------------ */

/* The posts use Gutenberg image blocks: div.wp-block-image > figure.aligncenter.
   Core's block CSS makes that figure `display: table`, which shrink-wraps it to
   the image and centres it — width overrides are ignored on tables, so the fix
   is to stop it being a table. Then media takes the text measure exactly: same
   left edge, same right edge as the paragraphs. */
.entry-content .wp-block-image .aligncenter,
.entry-content .wp-block-image .alignnone,
.entry-content figure.aligncenter,
.entry-content .wp-caption {
	display: block;
	width: auto !important; /* classic-editor inline width, if any post has it */
	max-width: 100%;
	margin: var(--lsl-space-6) 0;
}

.entry-content .wp-block-image img,
.entry-content figure img,
.entry-content .wp-caption img,
.entry-content > p > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lsl-radius);
}

/* Core makes figcaption `display: table-caption`, which only exists inside a
   table box — dissolve that too or captions vanish once the figure is a block. */
.entry-content .wp-block-image figcaption,
.entry-content figcaption,
.entry-content .wp-caption-text {
	display: block;
	text-align: left;
	font-size: var(--lsl-size-sm);
	font-style: italic;
	color: var(--lsl-ink-muted);
	margin: var(--lsl-space-2) 0 0;
}

/* Video embeds: full column width, correct ratio, no fixed pixel height. */
.entry-content iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--lsl-radius);
}

/* Archives --------------------------------------------------------------- */

.lsl-archive-header {
	max-width: var(--lsl-content-max);
	margin: 0 auto var(--lsl-space-8);
	text-align: center;
}

.lsl-archive-header .lsl-eyebrow a {
	color: var(--lsl-accent);
	text-decoration: none;
}

.lsl-archive-title {
	margin: 0 0 var(--lsl-space-2);
}

.lsl-archive-description {
	max-width: 60ch;
	margin: 0 auto var(--lsl-space-2);
	color: var(--lsl-ink-soft);
}

.lsl-archive-description p {
	margin: 0;
}

.lsl-archive-count {
	font-size: var(--lsl-size-sm);
	color: var(--lsl-ink-muted);
	margin: 0 0 var(--lsl-space-4);
}

.lsl-archive-regions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lsl-space-2);
}

.lsl-region-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--lsl-space-2);
	padding: var(--lsl-space-2) var(--lsl-space-4);
	border: 1px solid var(--lsl-border);
	border-radius: 999px;
	background: var(--lsl-paper-warm);
	color: var(--lsl-ink-soft);
	font-size: var(--lsl-size-sm);
	text-decoration: none;
}

.lsl-region-pill:hover,
.lsl-region-pill:focus-visible {
	border-color: var(--lsl-accent);
	color: var(--lsl-accent);
}

.lsl-region-count {
	font-size: var(--lsl-size-xs);
	color: var(--lsl-ink-muted);
}

/* Card grid */

.lsl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--lsl-space-6);
	max-width: var(--lsl-content-max);
	margin-inline: auto;
}

.lsl-card {
	display: flex;
	background: var(--lsl-paper);
	border: 1px solid var(--lsl-border-soft);
	border-radius: var(--lsl-radius-lg);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.lsl-card:hover,
.lsl-card:focus-within {
	border-color: var(--lsl-accent-tint);
	transform: translateY(-2px);
}

/* The card, its link and its body all stretch, so the date can be pinned to
   the bottom of the body and line up across a row of uneven titles. */
.lsl-card-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.lsl-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.lsl-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--lsl-space-4) var(--lsl-space-4) var(--lsl-space-6);
}

.lsl-card-body .lsl-eyebrow {
	margin-bottom: var(--lsl-space-2);
}

.lsl-card-title {
	font-size: var(--lsl-size-lg);
	line-height: 1.3;
	margin: 0 0 var(--lsl-space-2);
	color: var(--lsl-ink);
}

.lsl-card-link:hover .lsl-card-title {
	color: var(--lsl-accent);
}

/* The date sits below the excerpt and stays quiet — a freshness signal to
   check, not part of the sell. Pushed to the bottom of the card body so it
   lines up across a row whatever the title length. */
.lsl-card-meta {
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.02em;
	color: var(--lsl-ink-muted);
	margin: auto 0 0;
	padding-top: var(--lsl-space-1);
}

/* Home page --------------------------------------------------------------- */

.lsl-home > section {
	max-width: var(--lsl-content-max);
	margin-inline: auto;
	padding-inline: var(--lsl-space-4);
}

/* Hero: content column left, photograph right, bleeding to the viewport edge.
   The previous arrangement hid the photo behind two cards of unequal weight;
   giving each half its own territory removes the balancing act entirely, and
   leaves one left edge for everything in the text column. */

.lsl-hero-cine {
	position: relative;
	margin-bottom: var(--lsl-space-8);
}

@media (min-width: 900px) {
	.lsl-hero-cine {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: clamp(460px, 64vh, 640px);
	}

	/* Photo second on screen, first in the DOM — so mobile stacks
	   photo, headline, about with no reordering. */
	.lsl-hero-cine-media {
		grid-column: 2;
		grid-row: 1;
		/* Reaches back into the text column; the mask below dissolves that
		   edge so it reads as the photograph fading into paper rather than
		   a hard seam sitting under the cards. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 150px);
		mask-image: linear-gradient(to right, transparent 0, #000 150px);
	}

	.lsl-hero-cine-inner {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		z-index: 2; /* the cards sit over the photo */
	}
}

/* Applied after the base rule below, which sets margin:0 and would otherwise
   clobber this — same specificity, so source order decides. */
@media (min-width: 900px) {
	.lsl-hero-cine {
		--lsl-photo-reach: 160px;
	}
}

/* The figure owns the height; the slides stack inside it and crossfade. */
.lsl-hero-cine-media {
	margin: 0 0 0 calc(-1 * var(--lsl-photo-reach, 0px));
	position: relative;
	height: clamp(380px, 62vh, 640px);
	overflow: hidden;
	background: var(--lsl-paper-cream);
	/* Contains the slides' z-index values. Without this the active slide's
	   z-index competes in the outer stacking context and paints over the
	   text card that overlaps the photo. */
	isolation: isolate;
	z-index: 0;
}

.lsl-hero-cine-media img.lsl-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	z-index: 0;
	transition: opacity 1.1s ease;
}

/* The incoming slide fades in ON TOP of the outgoing one, which holds at full
   opacity underneath until the fade completes. A plain two-way crossfade can
   leave both slides at zero if a transition stalls — which is what a hidden or
   throttled tab does — and the hero renders blank. This cannot.
   Both selectors must also out-specify the 0,2,1 rule above; a bare
   `.lsl-hero-slide.is-active` is 0,2,0 and silently loses. */
.lsl-hero-cine-media img.lsl-hero-slide.was-active {
	opacity: 1;
	z-index: 1;
}

.lsl-hero-cine-media img.lsl-hero-slide.is-active {
	opacity: 1;
	z-index: 2;
	/* Slow drift, so a still photo is never quite still. Long enough that you
	   notice the frame has changed without ever catching it moving. */
	animation: lsl-hero-drift 26s ease-out forwards;
}

@keyframes lsl-hero-drift {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.lsl-hero-cine-media img.lsl-hero-slide.is-active {
		animation: none;
	}
}

/* The stamp is a link: each place's stamp goes to that place's guides. The
   anchor owns the position; the svg inside just draws and animates. */
/* The passport corner: stamp, slot row, guides link. */
.lsl-hero-passport {
	position: absolute;
	right: max(var(--lsl-space-6), 4vw);
	bottom: var(--lsl-space-6);
	z-index: 3; /* above the slides, which stack at 0-2 inside this figure */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lsl-space-2);
}

/* GeneratePress styles bare <button> elements, including hover and focus
   backgrounds. These are ink stamps sitting on a photograph, so every state
   has to be transparent — otherwise a grey chip appears under the cursor. */
.lsl-hero-stamp-link,
.lsl-hero-stamp-link:hover,
.lsl-hero-stamp-link:focus,
.lsl-hero-stamp-link:active,
.lsl-hero-slot,
.lsl-hero-slot:hover,
.lsl-hero-slot:focus,
.lsl-hero-slot:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
}

.lsl-hero-stamp-link {
	display: block;
	padding: 0;
	cursor: pointer;
	border-radius: var(--lsl-radius);
}

.lsl-hero-stamp-link:focus-visible {
	outline: 2px solid var(--lsl-paper);
	outline-offset: 4px;
}

.lsl-hero-stamp-link:hover .lsl-hero-stamp,
.lsl-hero-stamp-link:focus-visible .lsl-hero-stamp {
	transform: rotate(-2deg) scale(1.03);
}

/* Empty stamp slots — a passport page waiting to be filled. */
.lsl-hero-slots {
	display: flex;
	gap: 6px;
}

.lsl-hero-slot {
	padding: 4px;
	cursor: pointer;
	line-height: 0;
}

.lsl-hero-slot span {
	display: block;
	width: 16px;
	height: 11px;
	border: 1px dashed var(--lsl-paper);
	border-radius: 2px;
	opacity: 0.5;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.lsl-hero-slot:hover span {
	opacity: 0.85;
}

.lsl-hero-slot.is-current span {
	border-style: solid;
	background: var(--lsl-paper);
	opacity: 0.9;
}

.lsl-hero-slot:focus-visible {
	outline: 2px solid var(--lsl-paper);
	outline-offset: 2px;
	border-radius: 3px;
}

/* The photo underneath can be anything, including a white sand dune, so a text
   shadow alone was not enough. 0.65 is the lowest alpha that still clears AA
   for paper-on-ink even if the photograph behind it is pure white. */
.lsl-hero-guides-link {
	display: inline-block;
	padding: var(--lsl-space-2) var(--lsl-space-4);
	border-radius: 999px;
	background: rgba(43, 39, 36, 0.65);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lsl-paper);
	text-decoration: none;
}

.lsl-hero-guides-link:hover {
	background: rgba(43, 39, 36, 0.8);
}

.lsl-hero-guides-link:hover,
.lsl-hero-guides-link:focus-visible {
	color: var(--lsl-paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The stamp lands on the photo half a beat after load. */
.lsl-hero-cine .lsl-hero-stamp {
	position: static;
	opacity: 0;
	transform-origin: center;
	transition: transform 0.2s ease;
	animation: lsl-stamp-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.6s forwards;
}

@keyframes lsl-stamp-in {
	from { opacity: 0; transform: scale(1.8) rotate(-6deg); }
	60%  { opacity: 1; transform: scale(0.95) rotate(0deg); }
	to   { opacity: 1; transform: scale(1); }
}

.lsl-hero-cine-inner {
	max-width: var(--lsl-container);
	margin-inline: auto;
	padding-inline: var(--lsl-space-4);
}

@media (min-width: 900px) {
	/* The content block is right-aligned inside the left column and sized to
	   half the container minus one gutter. That puts its left edge exactly on
	   the site container's edge without any 100vw arithmetic — 100vw counts
	   the scrollbar, the layout does not, so every computed version of this
	   landed a few pixels adrift. */
	.lsl-hero-cine-inner {
		max-width: none;
		margin: 0;
		/* The extra bottom padding is what pushes the photo's lower edge past
		   the about card, so both cards sit inside the image. */
		padding: var(--lsl-space-12) 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.lsl-hero-cine-media {
		height: 100%;
	}
}

/* No card, no frame, no overlap. One column on paper: headline, buttons,
   then the about block under a hairline. Boxing them separately is what made
   the about block read as a widget bolted onto the hero. */
.lsl-hero-cine-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lsl-space-6);
	padding-inline: var(--lsl-space-4);
}

@media (min-width: 900px) {
	.lsl-hero-cine-card {
		/* Widened and pulled right by the same amount, so the cards spill 48px
		   over the photograph while their left edge stays on the site column. */
		width: calc(var(--lsl-container) / 2 + 48px);
		margin-right: -48px;
		padding-inline: var(--lsl-space-4) 0;
	}
}

@media (max-width: 899px) {
	.lsl-hero-cine-media { height: clamp(260px, 44vh, 420px); }
	.lsl-hero-passport { display: none; }

	/* The stack rides up over the photo, so the first card overlaps it the
	   way it does on desktop rather than starting below a hard edge. */
	.lsl-hero-cine-inner {
		position: relative;
		z-index: 2;
	}

	.lsl-hero-cine-card {
		margin-top: -56px;
		padding-block: 0 var(--lsl-space-8);
	}
}

.lsl-home-title {
	margin: 0 0 var(--lsl-space-4);
}

.lsl-home-sub {
	max-width: 58ch;
	margin: 0 0 var(--lsl-space-6);
	color: var(--lsl-ink-soft);
}

.lsl-home-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lsl-space-3);
}

/* The Portugal button carries the green even on the burgundy home page.
   Doubled class beats .lsl-btn-ghost, which sits later in this file. */
.lsl-btn.lsl-btn-pt {
	color: #2c5340;
	border-color: #2c5340;
}

.lsl-btn.lsl-btn-pt:hover,
.lsl-btn.lsl-btn-pt:focus-visible {
	background: #2c5340;
	border-color: #2c5340;
	color: var(--lsl-paper);
}

.lsl-home-hero-media {
	position: relative; /* anchors the hero stamp */
	margin: 0;
	border-radius: var(--lsl-radius-lg);
	overflow: hidden;
}

.lsl-home-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Country cards */

.lsl-home-countries {
	display: grid;
	gap: var(--lsl-space-6);
	margin-bottom: var(--lsl-space-16);
}

@media (min-width: 640px) {
	.lsl-home-countries {
		grid-template-columns: 1fr 1fr;
	}
}

.lsl-country-card {
	display: block;
	border: 1px solid var(--lsl-border);
	border-radius: var(--lsl-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.lsl-country-card:hover,
.lsl-country-card:focus-visible {
	transform: translateY(-2px);
}

.lsl-country-card-media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.lsl-country-card-body {
	padding: var(--lsl-space-4) var(--lsl-space-6);
	border-top: 3px solid var(--lsl-accent);
}

.lsl-country-card-pt .lsl-country-card-body {
	border-top-color: #2c5340;
}

.lsl-country-card-pt:hover h2 {
	color: #2c5340;
}

.lsl-country-card-es:hover h2 {
	color: var(--lsl-accent);
}

.lsl-country-card-body h2 {
	margin: 0 0 var(--lsl-space-1);
	font-size: var(--lsl-size-xl);
}

.lsl-country-card-body p {
	margin: 0;
	font-size: var(--lsl-size-sm);
	color: var(--lsl-ink-muted);
}

/* Latest guides */

.lsl-home-label {
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lsl-ink-muted);
	margin: 0 0 var(--lsl-space-4);
}

.lsl-home-latest {
	margin-bottom: var(--lsl-space-16);
}

.lsl-home-more {
	margin: var(--lsl-space-6) 0 0;
	text-align: right;
}

.lsl-home-more a {
	font-size: var(--lsl-size-sm);
	text-decoration: none;
}

/* Home ground band */

.lsl-home-band {
	display: grid;
	gap: var(--lsl-space-6);
	align-items: center;
	background: var(--lsl-paper-cream);
	border-radius: var(--lsl-radius-lg);
	padding: var(--lsl-space-8) !important;
	margin-bottom: var(--lsl-space-16);
}

@media (min-width: 800px) {
	.lsl-home-band {
		grid-template-columns: 1.3fr 0.7fr;
	}
}

/* On phones the band's own !important padding beats the section's inline
   padding, so its cream background bled to the viewport edges with clipped
   corners. Inset it; desktop keeps auto-centring. */
/* The band IS its own visual panel, so it needs to be a gutter narrower than
   the sections whose panels are their child cards — otherwise the cream edge
   sits outside the column everything else shares. */
.lsl-home > .lsl-home-band {
	max-width: calc(var(--lsl-content-max) - var(--lsl-space-8));
}

@media (max-width: 899px) {
	.lsl-home > .lsl-home-band {
		margin-inline: var(--lsl-space-4);
	}
}

.lsl-home-band h2 {
	margin: 0 0 var(--lsl-space-3);
}

.lsl-home-band p {
	max-width: 58ch;
	color: var(--lsl-ink-soft);
}

.lsl-home-band-links a {
	margin-right: var(--lsl-space-6);
	font-size: var(--lsl-size-sm);
	text-decoration: none;
}

.lsl-home-band-media {
	margin: 0;
	border-radius: var(--lsl-radius);
	overflow: hidden;
}

.lsl-home-band-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The pig strip */

.lsl-home-pig {
	display: flex;
	gap: var(--lsl-space-6);
	align-items: center;
	margin-bottom: var(--lsl-space-16);
}

.lsl-home-pig-photo {
	flex: 0 0 110px;
	margin: 0;
}

.lsl-home-pig-photo img {
	display: block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
}

.lsl-home-pig p {
	margin: 0;
	max-width: 60ch;
	color: var(--lsl-ink-soft);
}

/* Static pages ----------------------------------------------------------- */

/* Pages get the same centred reading column as posts — without the TOC rail,
   stamp or grid. The margin pin beats the stray upstream 40px side margin. */
.page .inside-article .entry-header,
.page .inside-article .entry-content {
	max-width: var(--lsl-content-col);
	margin-inline: auto;
}

/* 404 -------------------------------------------------------------------- */

.lsl-404 {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--lsl-space-8) var(--lsl-space-4) var(--lsl-space-12);
	text-align: center;
	color: var(--lsl-accent-deep);
}

.lsl-404-scene {
	width: 100%;
	max-width: 560px;
	height: auto;
	margin-bottom: var(--lsl-space-6);
}

/* Each line sketches itself in; groups stagger the sequence. */
.lsl-404 .draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: lsl-draw 1.1s ease forwards;
}

.lsl-404 .d2 { animation-delay: 0.35s; }
.lsl-404 .d3 { animation-delay: 0.7s; }
.lsl-404 .d4 { animation-delay: 1.05s; }
.lsl-404 .d5 { animation-delay: 1.4s; }

@keyframes lsl-draw {
	to { stroke-dashoffset: 0; }
}

/* SVG <text> cannot draw-in, so the numerals and fills fade instead. */
.lsl-404-numerals,
.lsl-404-sundisc {
	opacity: 0;
	animation: lsl-404-fade 0.9s ease 0.2s forwards;
}

.lsl-404-sundisc { animation-delay: 0.9s; animation-name: lsl-404-fade-soft; }

.lsl-404-wine {
	animation: lsl-404-fade 0.5s ease 2.3s forwards;
}

@keyframes lsl-404-fade      { to { opacity: 1; } }
@keyframes lsl-404-fade-soft { to { opacity: 0.3; } }

/* Then the sun turns, slowly, forever. */
.lsl-404-rays {
	animation: lsl-404-spin 80s linear infinite;
	transform-origin: 280px 104px;
}

@keyframes lsl-404-spin {
	to { transform: rotate(360deg); }
}

.lsl-404-title {
	margin: 0 0 var(--lsl-space-3);
	color: var(--lsl-ink);
}

.lsl-404-text {
	max-width: 52ch;
	margin: 0 auto var(--lsl-space-6);
	color: var(--lsl-ink-soft);
}

.lsl-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lsl-space-3);
	margin-bottom: var(--lsl-space-8);
}

.lsl-btn {
	display: inline-block;
	padding: var(--lsl-space-3) var(--lsl-space-6);
	border-radius: var(--lsl-radius);
	background: var(--lsl-accent);
	color: var(--lsl-paper);
	font-size: var(--lsl-size-sm);
	text-decoration: none;
	border: 1px solid var(--lsl-accent);
}

.lsl-btn:hover,
.lsl-btn:focus-visible {
	background: var(--lsl-accent-deep);
	border-color: var(--lsl-accent-deep);
	color: var(--lsl-paper);
}

.lsl-btn-ghost {
	background: transparent;
	color: var(--lsl-accent);
}

.lsl-btn-ghost:hover,
.lsl-btn-ghost:focus-visible {
	background: var(--lsl-accent);
	color: var(--lsl-paper);
}

.lsl-404-search-label {
	font-size: var(--lsl-size-sm);
	color: var(--lsl-ink-muted);
	margin: 0 0 var(--lsl-space-2);
}

.lsl-404-search form {
	display: flex;
	justify-content: center;
	gap: var(--lsl-space-2);
}

.lsl-404-search input[type="search"] {
	border: 1px solid var(--lsl-border);
	border-radius: var(--lsl-radius);
	padding: var(--lsl-space-2) var(--lsl-space-3);
	background: var(--lsl-paper);
	max-width: 260px;
}

/* Footer ---------------------------------------------------------------- */

/* GP's .site-footer wrapper stays; it just holds our markup now. */
.site-footer {
	background: transparent;
}

.lsl-footer-tiles {
	margin: 0;
}

/* No border-top here: the tile band directly above already ends in one, and
   two rules two pixels apart read as a mistake. */
.lsl-footer {
	background: var(--lsl-paper-warm);
}

.lsl-footer-inner {
	max-width: var(--lsl-content-max);
	margin-inline: auto;
	padding: var(--lsl-space-12) var(--lsl-space-6) var(--lsl-space-8);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lsl-space-8);
}

@media (min-width: 700px) {
	.lsl-footer-inner {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}

.lsl-footer-mark {
	width: 44px;
	height: 44px;
	color: var(--lsl-accent-deep);
}

.lsl-footer-name {
	font-family: var(--lsl-font-display);
	font-size: var(--lsl-size-lg);
	color: var(--lsl-ink);
	margin: var(--lsl-space-2) 0 0;
}

.lsl-footer-tag {
	font-size: var(--lsl-size-xs);
	color: var(--lsl-ink-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: var(--lsl-space-1) 0 0;
}

.lsl-footer-label {
	font-size: var(--lsl-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lsl-ink-muted);
	margin: 0 0 var(--lsl-space-3);
}

.lsl-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lsl-footer-menu li {
	margin: 0 0 var(--lsl-space-2);
}

.lsl-footer-menu a {
	color: var(--lsl-ink-soft);
	text-decoration: none;
	font-size: var(--lsl-size-sm);
}

.lsl-footer-menu a:hover,
.lsl-footer-menu a:focus-visible {
	color: var(--lsl-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lsl-footer-bottom {
	border-top: 1px solid var(--lsl-border);
	padding: var(--lsl-space-4) var(--lsl-space-6);
	text-align: center;
}

.lsl-footer-bottom p {
	margin: 0;
	font-size: var(--lsl-size-xs);
	color: var(--lsl-ink-muted);
}

/* Accessibility --------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--lsl-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Hero content column ---------------------------------------------------- */

.lsl-hero-card-main,
.lsl-hero-card-author {
	background: var(--lsl-paper);
	border-radius: var(--lsl-radius-lg);
	box-shadow: 0 20px 44px -26px rgba(43, 39, 36, 0.42);
}

.lsl-hero-card-main {
	padding: var(--lsl-space-8);
	border-top: 3px solid var(--lsl-accent);
}

/* No cream card, no tile frame. On paper, a hairline and smaller type are
   enough to separate the about block — boxing it made it read as a widget,
   and the tile panel had turned into a picture frame. */
.lsl-hero-card-author {
	display: flex;
	align-items: center;
	gap: var(--lsl-space-4);
	padding: var(--lsl-space-6);
}

.lsl-hero-author-photo {
	margin: 0;
	flex: 0 0 auto;
}

.lsl-hero-author-photo img,
.lsl-hero-author-placeholder {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}

.lsl-hero-author-placeholder {
	display: grid;
	place-items: center;
	background: var(--lsl-paper-cream);
	color: var(--lsl-accent);
	font-family: var(--lsl-font-display);
	font-size: 3rem;
}

.lsl-hero-author-text p {
	margin: 0;
	font-size: var(--lsl-size-sm);
	line-height: 1.7;
	color: var(--lsl-ink-soft);
	/* Avoids a single orphaned word on the last line at narrow widths. */
	text-wrap: pretty;
}

.lsl-hero-author-aside {
	margin-top: var(--lsl-space-2) !important;
	color: var(--lsl-ink-muted) !important;
}

@media (max-width: 899px) {
	/* The card supplies the gutter on mobile; the inner wrapper must not add
	   a second one on top of it. */
	.lsl-hero-cine-inner {
		padding-inline: 0;
	}

	.lsl-hero-card-author {
		gap: var(--lsl-space-3);
	}

	.lsl-hero-author-photo {
		flex: 0 0 auto;
	}
}

/* Botón charro — Salamanca's filigree button ----------------------------- */

.lsl-charro {
	display: block;
	color: var(--lsl-accent);
}

/* In the Salamanca band it is a proper ornament, above the eyebrow. */
.lsl-charro-band {
	width: 46px;
	height: 46px;
	opacity: 0.9;
	margin-bottom: var(--lsl-space-3);
}

/* A section divider: hairline rule with the button centred on it. */
.lsl-charro-rule {
	position: relative;
	max-width: var(--lsl-content-max);
	margin: var(--lsl-space-12) auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lsl-charro-rule::before,
.lsl-charro-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lsl-border);
}

.lsl-charro-rule-mark {
	width: 34px;
	height: 34px;
	margin: 0 var(--lsl-space-4);
	opacity: 0.75;
	flex: 0 0 auto;
}


/* Static pages: lead paragraph and figures ------------------------------- */

/* WordPress's has-large-font-size is an unstyled default — a huge sans block
   sitting under a serif h1 with body line-height, which is what made the About
   page read as broken. A lead paragraph needs its own treatment: bigger than
   body, but tighter and darker, so it supports the heading instead of
   competing with it. */
.page .entry-content > p:first-of-type,
.page .entry-content .has-large-font-size {
	font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
	line-height: 1.55;
	color: var(--lsl-ink);
	margin: 0 0 var(--lsl-space-8);
	text-wrap: pretty;
}

.page .entry-content h1 {
	margin-bottom: var(--lsl-space-4);
}

.page .entry-content h2 {
	margin-top: var(--lsl-space-12);
	margin-bottom: var(--lsl-space-4);
}

/* Figures placed by [lsl_figure]. */
.lsl-page-figure {
	margin: var(--lsl-space-8) 0;
}

.lsl-page-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lsl-radius);
}

.lsl-page-figure figcaption {
	margin-top: var(--lsl-space-2);
	font-size: var(--lsl-size-sm);
	font-style: italic;
	color: var(--lsl-ink-muted);
}

/* Breaks the reading column on wide screens, so a photo lands as a beat
   rather than another paragraph-shaped block. */
@media (min-width: 900px) {
	.lsl-page-figure.is-wide {
		width: calc(100% + 160px);
		margin-inline: -80px;
	}
}

/* The mark as an illustration, for the logo section. */
.lsl-charro-figure {
	margin: var(--lsl-space-8) 0;
	display: flex;
	justify-content: center;
}

.lsl-charro-inline {
	width: var(--lsl-charro-size, 132px);
	height: var(--lsl-charro-size, 132px);
	color: var(--lsl-accent);
}

/* Portrait-shaped figures sit narrower than the text column, so a face does not
   arrive at the same scale as a landscape. */
.lsl-page-figure.is-narrow {
	max-width: 380px;
	margin-inline: auto;
}

.lsl-page-figure.is-narrow img {
	border-radius: var(--lsl-radius-lg);
}

.lsl-page-figure.is-narrow figcaption {
	text-align: center;
}

/* Card excerpt: two lines, clamped, so every card in a row stays the same
   height whatever the length of the source text. */
.lsl-card-excerpt {
	margin: 0 0 var(--lsl-space-3);
	font-size: var(--lsl-size-sm);
	line-height: 1.6;
	color: var(--lsl-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Author -----------------------------------------------------------------
   One layout serves both surfaces: the box under a single post and the
   header of the author archive. Portrait left, text right, stacking to a
   single column on narrow screens. */

.lsl-author-box {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--lsl-space-6);
	align-items: start;
	/* Sits on the reading column, not the wider article track. Everything else
	   on a single post lines up there; only the TOC rail sits outside it. */
	max-width: var(--lsl-content-col);
	margin: var(--lsl-space-16) auto 0;
	padding: var(--lsl-space-6);
	background: var(--lsl-wash);
	border: 1px solid var(--lsl-border);
	border-radius: var(--lsl-radius-lg);
}

.lsl-archive-author {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--lsl-space-8);
	align-items: start;
	text-align: left;
}

.lsl-author-portrait img,
.lsl-author-initial {
	display: block;
	width: 100%;
	max-width: 150px;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
	border: var(--lsl-rule) solid var(--lsl-paper);
	box-shadow: 0 0 0 1px var(--lsl-border);
}

.lsl-author-initial {
	display: grid;
	place-items: center;
	background: var(--lsl-accent);
	color: var(--lsl-paper);
	font-family: var(--lsl-font-display);
	font-size: 3rem;
}

.lsl-author-name {
	font-family: var(--lsl-font-display);
	font-size: var(--lsl-size-xl);
	line-height: var(--lsl-leading-tight);
	margin: 0 0 var(--lsl-space-3);
	color: var(--lsl-ink);
}

.lsl-author-bio p {
	margin: 0 0 var(--lsl-space-4);
	max-width: var(--lsl-measure);
	color: var(--lsl-ink-soft);
}

.lsl-author-bio p:last-child {
	margin-bottom: var(--lsl-space-6);
}

@media (max-width: 700px) {
	.lsl-author-box,
	.lsl-archive-author {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lsl-space-4);
		justify-items: center;
		text-align: center;
	}

	.lsl-author-bio p {
		text-align: left;
	}
}

/* Wide and full alignment ------------------------------------------------
   Mirrors .lsl-page-figure.is-wide, so an image block set to "Wide" in the
   editor breaks the reading column exactly as the shortcode did. Full goes
   further but stays inside the article track rather than the viewport, which
   would collide with the TOC rail. */
@media (min-width: 900px) {
	.entry-content .alignwide {
		width: calc(100% + 160px);
		max-width: calc(100% + 160px);
		margin-inline: -80px;
	}

	.entry-content .alignfull {
		width: var(--lsl-article-max);
		max-width: var(--lsl-article-max);
		margin-inline: calc((100% - var(--lsl-article-max)) / 2);
	}
}

.entry-content .alignwide img,
.entry-content .alignfull img {
	width: 100%;
	height: auto;
}