/*
Theme Name: Syria Spiritual Tours
Theme URI: https://syriaspiritualtours.com
Description: Child theme of Hello Elementor for Syria Spiritual Tours. Brand system, header, footer and editorial blog templates. Built to work with Elementor Free only, no Pro dependencies.
Author: Syria Spiritual Tours
Template: hello-elementor
Version: 2.1.0
Text Domain: sst-child
*/

/* ==========================================================================
   1. Brand tokens

   The green is sampled from the designer's own artwork rather than guessed.
   Everything else hangs off it. Swap these values and the site follows.
   ========================================================================== */

:root {
	--sst-green:        #1A4A39; /* the logo arch, measured from the source file */
	--sst-green-deep:   #0F2A20; /* footer, dark bands */
	--sst-green-soft:   #2E6250; /* hovers */
	--sst-limestone:    #C9A87C; /* warm stone accent, light on dark */
	--sst-gold:         #A8894F; /* rules and small accents on light */
	--sst-sand:         #EAE1D2; /* tinted section ground */
	--sst-paper:        #F7F5F0; /* page ground */
	--sst-white:        #FFFFFF;
	--sst-ink:          #22201D; /* body copy */
	--sst-muted:        #6E6A63; /* captions, meta */
	--sst-line:         #DDD6C9; /* hairlines */

	/* Playfair for headings, Montserrat for everything else.
	   A previous pass swapped these for Bodoni Moda and Lora on the argument
	   that Bodoni matches the logo's thick/thin contrast more closely. It does,
	   on paper, but Bodoni's hairlines go spindly at screen sizes and the whole
	   site read as less finished. Reverted. */
	--sst-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--sst-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--sst-body:    var(--sst-sans);

	--sst-measure: 68ch;
	--sst-gutter: clamp(1.25rem, 5vw, 4rem);
	--sst-wide: 1240px;
	--sst-narrow: 720px;

	/* One page box for the whole site.
	   The site had two grids. Theme-rendered screens capped a box at 1240px and
	   put the gutter inside it, so their content ran 1112px wide; Elementor
	   capped content at 1240px and sat it in a 10px page edge. Nothing lined up
	   across the two, which is why the footer sat 64px inboard of the hero text.
	   Boxes that carry the gutter as padding use --sst-page, so content is
	   min(1240px, viewport - 2 gutters) wherever it is rendered from. */
	--sst-page: calc(var(--sst-wide) + 2 * var(--sst-gutter));

	/* One rhythm for the whole site, tightened: 128px of section padding read
	   as holes rather than breathing room. */
	--sst-section: clamp(3.25rem, 6.5vw, 6rem);
	--sst-section-tight: clamp(2.25rem, 4vw, 3.5rem);

	--sst-ease: cubic-bezier(.22, .68, .3, 1);
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--sst-paper);
	color: var(--sst-ink);
	font-family: var(--sst-body);
	font-size: 1.0625rem;
	line-height: 1.78;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Name the selection colour rather than inheriting the browser's.
 *
 * Left unset, a highlight is painted in whatever accent the browser uses, and
 * on some mobile browsers that is a bright pink. It showed up over the burger
 * because a few quick taps start a selection across the header, but it applies
 * to any selected text on the site.
 */
::selection { background: var(--sst-green); color: var(--sst-white); }

h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--sst-display);
	font-weight: 400;
	font-optical-sizing: auto;
	color: var(--sst-ink);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.35rem, 5vw, 3.9rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

h5, h6 {
	font-family: var(--sst-sans);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.7rem;
	color: var(--sst-muted);
	margin: 0 0 1em;
}

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sst-green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--sst-green-soft); }

strong, b { font-weight: 600; }

/* Arabic and honorifics keep their own face so ﷺ and the maqam names render. */
.sst-ar, [lang="ar"] {
	font-family: "Noto Naskh Arabic", "Segoe UI", "Traditional Arabic", serif;
	line-height: 2;
}

/* Visible focus everywhere, in brand rather than browser blue. */
:focus-visible {
	outline: 2px solid var(--sst-green);
	outline-offset: 3px;
}

/* ==========================================================================
   3. Helper classes
   Add these in Elementor under Advanced > CSS Classes.
   ========================================================================== */

/* The logo's own "SPIRITUAL TOURS" treatment. */
.sst-eyebrow,
.sst-eyebrow .elementor-heading-title {
	font-family: var(--sst-sans) !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	line-height: 1.6 !important;
	color: var(--sst-gold) !important;
}
.sst-eyebrow--light .elementor-heading-title { color: var(--sst-limestone) !important; }

.sst-lead,
.sst-lead p {
	font-size: clamp(1.1rem, 1.45vw, 1.28rem);
	line-height: 1.72;
	color: var(--sst-muted);
}

/* The short gold segment that marks a section. An ablaq band, the alternating
   stone courses of Damascene building, was tried here and read as one novelty
   too many on a page that already has the arch. Back to the hairline. */
.sst-ablaq,
.sst-rule::before,
.sst-expectgrid .sst-item::before,
.sst-factgrid .sst-item::before {
	background: var(--sst-gold);
}
.sst-ablaq {
	display: block;
	width: 52px;
	height: 1px;
	margin-bottom: 1.4rem;
}
.sst-ablaq--center { margin-inline: auto; }

.sst-rule { border-top: 1px solid var(--sst-line); position: relative; }
.sst-rule::before {
	content: ""; position: absolute; top: -1px; left: 0;
	width: 52px; height: 1px;
}

/* The signature: images clipped to the traced silhouette of the logo arch.
   The path is generated from the artwork itself, in object bounding box units,
   so one definition fits every aspect ratio on the site. */
.sst-arch img,
.sst-arch > img {
	display: block;
	clip-path: url(#sst-arch);
}
.sst-archdef { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Dark section: flip text colours inside a green container. */
.sst-dark, .sst-dark p, .sst-dark li { color: rgba(255,255,255,0.82); }
.sst-dark h1, .sst-dark h2, .sst-dark h3, .sst-dark h4,
.sst-dark .elementor-heading-title { color: var(--sst-white); }
.sst-dark a { color: var(--sst-limestone); }

/* ==========================================================================
   4. Motion

   One idea: things arrive from just below, once, and only for visitors who
   have not asked for less movement. The hero runs on a short stagger at load;
   everything else waits until it is actually on screen.
   ========================================================================== */

.sst-reveal.is-armed {
	opacity: 0;
	transform: translateY(14px);
}
.sst-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--sst-ease), transform .7s var(--sst-ease);
}

@keyframes sst-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.sst-reveal.is-armed { opacity: 1; transform: none; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.elementor-button,
.sst-btn {
	font-family: var(--sst-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 1.2em 2.3em;
	line-height: 1;
	border: 1px solid var(--sst-green);
	background-color: var(--sst-green);
	color: var(--sst-white);
	transition: background-color .25s var(--sst-ease), color .25s var(--sst-ease), border-color .25s var(--sst-ease);
	text-decoration: none;
	display: inline-block;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/*
 * Hover is behind a (hover: hover) query on purpose. A touch screen has no
 * hover, so a tapped button keeps the hover styling until something else is
 * touched, which reads as a button stuck in the pressed state. Touch gets
 * :active instead, which ends when the finger lifts.
 */
@media (hover: hover) {
	.elementor-button:hover, .sst-btn:hover {
		background-color: var(--sst-green-deep);
		border-color: var(--sst-green-deep);
		color: var(--sst-white);
	}
}
.elementor-button:active, .sst-btn:active {
	background-color: var(--sst-green-deep);
	border-color: var(--sst-green-deep);
	color: var(--sst-white);
}

.sst-btn-ghost .elementor-button,
.sst-btn-ghost.sst-btn {
	background-color: transparent;
	border-color: rgba(255,255,255,0.6);
	color: var(--sst-white);
}
@media (hover: hover) {
	.sst-btn-ghost .elementor-button:hover,
	.sst-btn-ghost.sst-btn:hover {
		background-color: var(--sst-white);
		border-color: var(--sst-white);
		color: var(--sst-green-deep);
	}
}
.sst-btn-ghost .elementor-button:active,
.sst-btn-ghost.sst-btn:active {
	background-color: var(--sst-white);
	border-color: var(--sst-white);
	color: var(--sst-green-deep);
}

/* Quiet text link. No box, so no padding by design. */
.sst-link .elementor-button,
.sst-btn.sst-btn--text {
	background: none; border: 0; padding: 0 0 4px;
	color: var(--sst-green);
	border-bottom: 1px solid var(--sst-gold);
	border-radius: 0;
}
.sst-link .elementor-button:hover { background: none; color: var(--sst-green-soft); }

/* ==========================================================================
   6. Site header
   ========================================================================== */

.sst-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--sst-paper);
	border-bottom: 1px solid var(--sst-line);
	transition: padding .3s var(--sst-ease), box-shadow .3s var(--sst-ease);
}
.sst-header.is-scrolled { box-shadow: 0 1px 20px rgba(15,42,32,.07); }

/* The header sits on the shared page box, so the logo's left edge is the same
   edge as the first word of the page below it. */
.sst-header__inner {
	max-width: var(--sst-page);
	margin: 0 auto;
	padding: .8rem var(--sst-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	transition: padding .3s var(--sst-ease);
}
.sst-header.is-scrolled .sst-header__inner { padding-block: .6rem; }

/* The lockup is the designer's artwork, so it is placed rather than rebuilt.
   Height drives it and the intrinsic ratio does the rest.

   The header file is cropped to the ink with no padding, so these heights are
   the artwork's real height and the left edge of the arch is the left edge of
   the image. That is what lets it line up with the page text.

   74px rather than the 62px this used to run at: the lockup carries
   "SPIRITUAL TOURS" and "MANEVI YOLCULUKLAR", which are a fixed fraction of its
   height, and below about 70px they stop being type and start being texture. */
.sst-brand { display: block; text-decoration: none; flex-shrink: 0; line-height: 0; }
.sst-brand__img { height: 74px; width: auto; display: block; transition: height .3s var(--sst-ease); }
.sst-header.is-scrolled .sst-brand__img { height: 58px; }

.sst-brand--footer { display: inline-block; margin-bottom: 1.75rem; }
.sst-brand--footer .sst-brand__img { height: 172px; }

@media (max-width: 520px) {
	.sst-brand__img,
	.sst-header.is-scrolled .sst-brand__img { height: 54px; }
	.sst-brand--footer .sst-brand__img { height: 140px; }
}

.sst-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.1rem; }
/* :not(.sst-btn) so the drawer's call to action keeps its button styling. */
.sst-nav a:not(.sst-btn) {
	font-family: var(--sst-sans);
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em;
	text-transform: uppercase; color: var(--sst-ink); text-decoration: none;
	padding-bottom: 3px; border-bottom: 1px solid transparent;
	transition: color .2s var(--sst-ease), border-color .2s var(--sst-ease);
}
.sst-nav a:not(.sst-btn):hover,
.sst-nav .current-menu-item > a,
.sst-nav .current_page_parent > a { border-bottom-color: var(--sst-gold); color: var(--sst-green); }

.sst-header__cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.sst-header__cta .sst-btn { padding: 1em 1.6em; font-size: .68rem; }

/*
 * The burger is a real <button>, so the browser treats it as a native control:
 * `background: none` clears the paint but not `appearance`, and the browser is
 * still free to draw its own pressed state and tap highlight over the top. On
 * mobile that showed as a solid block in the browser's own accent colour, a
 * pink rectangle sitting over the icon. Both defaults are switched off here and
 * replaced with a press state of our own, so the feedback is ours rather than
 * whatever the browser happens to use.
 */
.sst-nav-toggle {
	display: none; background: none; border: 0; cursor: pointer;
	padding: .5rem; color: var(--sst-ink);
	appearance: none; -webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	/* A few quick taps register as a double tap, which starts a selection and
	   a zoom gesture. manipulation turns both off for this control. */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	user-select: none; -webkit-user-select: none;
	border-radius: 3px;
	transition: background-color .15s var(--sst-ease);
}
.sst-nav-toggle svg { display: block; }
/*
 * Hello Elementor's reset paints every <button> pink:
 *
 *   button:focus, button:hover { background-color: #c36; color: #fff }
 *
 * At 0,1,1 that beats a plain .sst-nav-toggle rule at 0,1,0, so the burger went
 * pink the moment it was clicked and stayed pink for as long as it held focus.
 * Every state is named here so ours win outright, and the colour is restored
 * too, because the reset changes that as well.
 */
@media (hover: hover) {
	.sst-nav-toggle:hover { background-color: rgba(26, 74, 57, .07); color: var(--sst-ink); }
}
.sst-nav-toggle:focus { background-color: transparent; color: var(--sst-ink); }
.sst-nav-toggle:focus-visible { outline: 2px solid var(--sst-green); outline-offset: 2px; }
/* Last, so a press still reads as a press whether or not it also has focus. */
.sst-nav-toggle:active { background-color: rgba(26, 74, 57, .13); color: var(--sst-ink); }

/* Same reset, same fix, for anything of ours that renders as a real <button>. */
button.sst-btn:hover, button.sst-btn:focus {
	background-color: var(--sst-green-deep); border-color: var(--sst-green-deep); color: var(--sst-white);
}

/* The call to action names an intention now rather than a channel, so it is a
   longer label than the "WhatsApp" it replaced. Between the full layout and the
   drawer it tightens instead of disappearing: it used to be hidden below 1100px
   while the drawer only takes over at 940px, which left every width in between
   with no call to action in the header at all. */
@media (max-width: 1180px) {
	.sst-nav ul { gap: 1.5rem; }
	.sst-header__cta .sst-btn { padding: 1em 1.15em; }
}
@media (max-width: 940px) {
	.sst-header__cta .sst-btn { display: none; }
	.sst-nav-toggle { display: block; }
	.sst-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--sst-paper); border-bottom: 1px solid var(--sst-line);
		padding: 1rem var(--sst-gutter) 1.75rem;
		box-shadow: 0 20px 40px rgba(15,42,32,.09);
	}
	.sst-header.is-open .sst-nav { display: block; }
	.sst-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.sst-nav li { width: 100%; border-bottom: 1px solid var(--sst-line); }
	.sst-nav li:last-child { border-bottom: 0; }
	.sst-nav a:not(.sst-btn) { display: block; padding: .95rem 0; border-bottom: 0; font-size: .8rem; }
	.sst-nav .sst-btn { display: inline-block; margin-top: 1.25rem; }
}
@media (min-width: 941px) {
	.sst-nav .sst-btn { display: none; }
}

/* ==========================================================================
   7. Site footer
   ========================================================================== */

/* Warm off-white rather than white at an opacity.
   White on the deep green read cold and, at .72, harder than the rest of the
   page: the type looked like it belonged to a different site. These are the
   sand tone the site already uses, carried down to footer weights, so the
   contrast drops and the whole block sits warm against the green.

   The ground stays exactly --sst-green-deep on purpose. The reversed lockup is
   flat artwork with that colour baked in behind it, so warming the ground means
   regenerating the logo as a cutout first, or the logo shows as a patch. */
.sst-footer {
	background: var(--sst-green-deep);
	color: rgba(234,225,210,0.78);
	--sst-footer-quiet: rgba(234,225,210,0.55);
	--sst-footer-rule:  rgba(234,225,210,0.14);
}
.sst-footer__inner {
	max-width: var(--sst-page); margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) var(--sst-gutter) 2.5rem;
	display: grid; gap: 3rem;
	grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 860px) { .sst-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; } }

.sst-footer h4 {
	font-family: var(--sst-sans); font-size: .68rem; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase;
	color: var(--sst-limestone); margin: 0 0 1.1rem;
}
.sst-footer p { font-size: .92rem; line-height: 1.8; margin-bottom: 1em; }
.sst-footer ul { list-style: none; margin: 0; padding: 0; }
.sst-footer li { margin-bottom: .6rem; }
.sst-footer a {
	color: rgba(234,225,210,0.78); text-decoration: none; font-size: .92rem;
	transition: color .2s var(--sst-ease);
}
.sst-footer a:hover { color: var(--sst-sand); }

.sst-footer__bottom {
	max-width: var(--sst-page); margin: 0 auto;
	padding: 1.5rem var(--sst-gutter) 2.5rem;
	border-top: 1px solid var(--sst-footer-rule);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	font-size: .76rem; color: var(--sst-footer-quiet);
	font-family: var(--sst-sans); letter-spacing: .04em;
}

/* ==========================================================================
   8. Breadcrumbs
   ========================================================================== */

.sst-crumbs {
	max-width: var(--sst-page); margin: 0 auto;
	padding: 1.25rem var(--sst-gutter) 0;
	font-family: var(--sst-sans);
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--sst-muted);
}
.sst-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sst-crumbs li::after { content: "/"; margin-left: .5rem; color: var(--sst-line); }
.sst-crumbs li:last-child::after { content: ""; }
.sst-crumbs a { color: var(--sst-muted); text-decoration: none; }
.sst-crumbs a:hover { color: var(--sst-green); }
.sst-crumbs [aria-current] { color: var(--sst-ink); }

/* ==========================================================================
   9. Journal: archive and single

   Elementor Free has no Theme Builder, so the blog lives here in the child
   theme. Nothing on these screens depends on Elementor at all.
   ========================================================================== */

.sst-main { min-height: 50vh; }

.sst-page-head {
	max-width: var(--sst-page); margin: 0 auto;
	padding: clamp(3rem, 7vw, 5.5rem) var(--sst-gutter) clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}
.sst-page-head .sst-ablaq { margin-inline: auto; margin-bottom: 1.4rem; }
.sst-page-head .sst-eyebrow { display: block; margin-bottom: 1rem; }
.sst-page-head h1 { margin-bottom: .75rem; }
.sst-page-head p { max-width: 58ch; margin: 0 auto; color: var(--sst-muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

.sst-archive {
	max-width: var(--sst-page); margin: 0 auto;
	padding: 0 var(--sst-gutter) clamp(4rem, 9vw, 7rem);
	display: grid; gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .sst-archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sst-archive { grid-template-columns: 1fr; } }

.sst-card { display: flex; flex-direction: column; }
.sst-card__media {
	display: block; overflow: hidden; margin-bottom: 1.4rem;
	background: var(--sst-sand); aspect-ratio: 4 / 3;
}
.sst-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s var(--sst-ease);
}
.sst-card:hover .sst-card__media img { transform: scale(1.045); }
/* The arch plate. See sst_media_plate() for why this exists. */
.sst-card__media--plate {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 1rem;
	background: var(--sst-sand);
	border: 1px solid var(--sst-line);
}
.sst-plate__arch {
	display: block; width: 52px; aspect-ratio: 346 / 431;
	background: var(--sst-limestone);
	clip-path: url(#sst-arch);
}
.sst-plate__label {
	font-family: var(--sst-sans);
	font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
	color: var(--sst-green);
}
.sst-post-figure--plate .sst-card__media--plate { aspect-ratio: 21 / 9; }
.sst-post-figure--plate .sst-plate__arch { width: 74px; }
.sst-card__meta {
	font-family: var(--sst-sans);
	font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sst-gold); margin-bottom: .7rem;
}
.sst-card h2, .sst-card h3 { font-size: 1.42rem; line-height: 1.24; margin-bottom: .6rem; }
.sst-card h2 a, .sst-card h3 a { color: var(--sst-ink); text-decoration: none; }
.sst-card:hover h2 a, .sst-card:hover h3 a { color: var(--sst-green); }
.sst-card p { font-size: .95rem; color: var(--sst-muted); margin-bottom: 1rem; }
.sst-card__more {
	margin-top: auto; align-self: flex-start;
	font-family: var(--sst-sans);
	font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--sst-green); border-bottom: 1px solid var(--sst-gold);
	padding-bottom: 3px;
	transition: border-color .2s var(--sst-ease);
}
.sst-card:hover .sst-card__more { border-bottom-color: var(--sst-green); }

/* The whole card is the link target, so the title anchor covers it. */
.sst-card h2 a::after, .sst-card h3 a::after {
	content: ""; position: absolute; inset: 0;
}
.sst-card { position: relative; }
.sst-card__media { position: static; }

/* Single post */
.sst-post-hero {
	max-width: var(--sst-narrow); margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--sst-gutter) 0; text-align: center;
}
.sst-post-hero .sst-ablaq { margin-inline: auto; margin-bottom: 1.4rem; }
.sst-post-hero .sst-eyebrow { display: block; margin-bottom: 1rem; }
.sst-post-hero h1 { margin-bottom: 1.1rem; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.sst-post-hero__meta {
	font-family: var(--sst-sans);
	font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sst-muted);
}
.sst-post-hero__meta span + span::before { content: "·"; margin: 0 .6rem; color: var(--sst-line); }

.sst-post-figure {
	max-width: var(--sst-page); margin: clamp(2.5rem, 5vw, 4rem) auto;
	padding: 0 var(--sst-gutter);
}
.sst-post-figure img { width: 100%; height: auto; display: block; }
.sst-post-figure figcaption {
	font-family: var(--sst-sans); font-size: .68rem; letter-spacing: .1em;
	color: var(--sst-muted); margin-top: .8rem; text-align: center;
}

/* The photographer credit a CC BY or CC BY-SA image is used on condition of.
   Set a step below the caption: it has to be legible, because that is the
   licence term, but it is not something the reader came for. */
.sst-credit {
	font-family: var(--sst-sans); font-size: .74rem; letter-spacing: .04em;
	color: var(--sst-muted); margin-top: .55rem; text-align: center;
}
.sst-post-figure figcaption + .sst-credit { margin-top: .35rem; }
.sst-credit a { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.sst-credit a:hover { color: var(--sst-green); }

.sst-article {
	max-width: var(--sst-narrow); margin: 0 auto;
	padding: 0 var(--sst-gutter) clamp(3rem, 6vw, 5rem);
}
.sst-article > * { max-width: var(--sst-measure); }
.sst-article h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.sst-article h3 { margin-top: 1.9em; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.sst-article p, .sst-article li { font-size: 1.075rem; line-height: 1.82; }
.sst-article ul, .sst-article ol { padding-left: 1.3em; margin-bottom: 1.5em; }
.sst-article li { margin-bottom: .5em; }
.sst-article li::marker { color: var(--sst-gold); }
.sst-article blockquote {
	margin: 2.2em 0; padding: 0 0 0 1.6em;
	border-left: 2px solid var(--sst-gold);
	font-family: var(--sst-display); font-size: 1.35rem; line-height: 1.45; color: var(--sst-green);
}
.sst-article img { max-width: 100%; height: auto; }
.sst-article hr { border: 0; border-top: 1px solid var(--sst-line); margin: 3em 0; }

/* Cross references to other guides, set apart from ordinary links just enough
   to be findable without peppering the paragraph with colour. */
.sst-article .sst-xref {
	color: var(--sst-green);
	text-decoration: none;
	border-bottom: 1px solid var(--sst-line);
	transition: border-color .2s var(--sst-ease);
}
.sst-article .sst-xref:hover { border-bottom-color: var(--sst-gold); }

/* Topic clusters at the foot of an article. */
.sst-tags {
	max-width: var(--sst-narrow); margin: 0 auto clamp(3rem, 6vw, 4.5rem);
	padding: 0 var(--sst-gutter);
}
.sst-tags .sst-eyebrow { display: block; margin-bottom: .9rem; }
.sst-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.sst-tags a {
	display: inline-block;
	font-family: var(--sst-sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sst-green); text-decoration: none;
	border: 1px solid var(--sst-line); padding: .6rem 1rem;
	transition: border-color .2s var(--sst-ease), background-color .2s var(--sst-ease);
}
.sst-tags a:hover { border-color: var(--sst-green); background: var(--sst-sand); }

/* Article-end call to action. */
.sst-post-cta {
	max-width: var(--sst-narrow); margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
	padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--sst-green); color: var(--sst-white); text-align: center;
}
.sst-post-cta h2 { color: var(--sst-white); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .75rem; }
.sst-post-cta p { color: rgba(255,255,255,0.8); max-width: 48ch; margin: 0 auto 1.9rem; font-size: 1rem; }
.sst-post-cta .sst-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* Related guides. */
.sst-related { background: var(--sst-sand); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
/* The page box lives on the wrapper here, so the nested archive grid must not
   apply its own or the cards end up a gutter inboard of everything else. */
.sst-related__inner { max-width: var(--sst-page); margin: 0 auto; padding-inline: var(--sst-gutter); }
.sst-related .sst-archive { max-width: none; padding-inline: 0; }
.sst-related__title { text-align: center; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 2.5rem; }
.sst-related__title .sst-eyebrow { display: block; margin-bottom: .7rem; }
.sst-related .sst-archive { padding-bottom: 0; }
.sst-related .sst-card__media { background: rgba(255,255,255,.5); }

.sst-pagination {
	max-width: var(--sst-page); margin: 0 auto;
	padding: 0 var(--sst-gutter) clamp(4rem, 8vw, 6rem);
	display: flex; gap: .5rem; justify-content: center;
}
.sst-pagination .page-numbers {
	min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--sst-line); color: var(--sst-ink); text-decoration: none;
	font-family: var(--sst-sans); font-size: .8rem;
}
.sst-pagination .page-numbers.current,
.sst-pagination .page-numbers:hover { background: var(--sst-green); border-color: var(--sst-green); color: #fff; }

/* ==========================================================================
   10. Elementor scoping
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con { --container-max-width: var(--sst-wide); }

/* Top level containers take the site's page edge instead of Elementor's 10px
   default, which is what puts page content on the same grid as the header, the
   footer and every theme-rendered screen.
   Elementor reads its own custom properties for this, so they are what gets
   set; writing padding-inline directly would be overridden by its own rule.
   Wide screens are untouched: the inner container is still capped at 1240px and
   centred, so this only bites once the viewport is narrower than the box, where
   10px was too tight for text anyway. Full width backgrounds are unaffected,
   the padding insets the content, not the container. */
.elementor > .e-con {
	--padding-inline-start: var(--sst-gutter);
	--padding-inline-end: var(--sst-gutter);
}

.elementor-widget-icon-list .elementor-icon-list-item { margin-bottom: .55em; }

/* Screen reader helper reused by the nav toggle and skip link. */
.sst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
	clip: auto; z-index: 999; background: var(--sst-green); color: #fff;
	padding: .8rem 1.2rem; font-family: var(--sst-sans); font-size: .8rem;
}