/**
 * SheForSea — core theme styles.
 * Depends on tokens.css.
 */

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--s4s-font-body);
	font-size: var(--s4s-body);
	line-height: 1.6;
	background: var(--s4s-sand);
	color: var(--s4s-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
figure { margin: 0; }

a {
	color: var(--s4s-blue-600);
	text-decoration: none;
	transition: color var(--s4s-fast) var(--s4s-ease);
}
a:hover,
a:focus { color: var(--s4s-gold); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

::selection { background: var(--s4s-gold); color: var(--s4s-navy-850); }

:focus-visible {
	outline: 2px solid var(--s4s-cyan);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--s4s-font-display);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.1;
	color: var(--s4s-navy-600);
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: var(--s4s-h1); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--s4s-h2); }
h3 { font-size: var(--s4s-h3); }

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

blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--s4s-gold);
	font-family: var(--s4s-font-display);
	font-size: 20px;
	line-height: 1.4;
	color: var(--s4s-navy-600);
}

hr {
	border: 0;
	height: 1px;
	background: var(--s4s-line);
	margin: 40px 0;
}

/* --------------------------------------------------------------- layout */
.s4s-wrap {
	width: 100%;
	max-width: var(--s4s-wide);
	margin-inline: auto;
	padding-inline: var(--s4s-gutter);
}
.s4s-wrap--content { max-width: var(--s4s-content); }
.s4s-wrap--narrow { max-width: var(--s4s-narrow); }

.s4s-section { padding-block: var(--s4s-section-y); }
.s4s-section--tight { padding-block: calc(var(--s4s-section-y) * .65); }

.s4s-site { display: flex; flex-direction: column; min-height: 100vh; }
.s4s-main { flex: 1 0 auto; }

/* On dark bands the whole type scale inverts. */
.s4s-onDark { background: var(--s4s-navy-700); color: var(--s4s-cream); }
.s4s-onDark h1, .s4s-onDark h2, .s4s-onDark h3 { color: var(--s4s-cream-warm); }
.s4s-onDark p { color: var(--s4s-mist); }
.s4s-onDark a { color: var(--s4s-gold-light); }

/* ------------------------------------------------------------- eyebrows */
.s4s-eyebrow {
	font-family: var(--s4s-font-display);
	font-size: var(--s4s-eyebrow);
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--s4s-gold);
	margin-bottom: 18px;
	display: block;
}
.s4s-onDark .s4s-eyebrow { color: var(--s4s-gold-light); }
.s4s-eyebrow--cyan { color: var(--s4s-cyan-200); }

.s4s-rule {
	width: 52px;
	height: 3px;
	background: var(--s4s-gold);
	border: 0;
	margin: 34px 0 0;
}
.s4s-rule--center { margin-inline: auto; }

/* -------------------------------------------------------------- buttons */
.s4s-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1;
	border: none;
	border-radius: var(--s4s-radius-sm);
	padding: 15px 28px;
	text-align: center;
	transition: background var(--s4s-fast) var(--s4s-ease),
	            color var(--s4s-fast) var(--s4s-ease),
	            border-color var(--s4s-fast) var(--s4s-ease);
}
.s4s-btn--gold { background: var(--s4s-gold); color: var(--s4s-navy-850); }
.s4s-btn--gold:hover, .s4s-btn--gold:focus { background: var(--s4s-gold-hover); color: var(--s4s-navy-850); }

.s4s-btn--navy { background: var(--s4s-navy-600); color: var(--s4s-cream); }
.s4s-btn--navy:hover, .s4s-btn--navy:focus { background: var(--s4s-cyan); color: #fff; }

.s4s-btn--yellow { background: var(--s4s-yellow); color: var(--s4s-navy-850); }
.s4s-btn--yellow:hover { background: #FFF8A0; color: var(--s4s-navy-850); }

.s4s-btn--ghost {
	background: transparent;
	color: var(--s4s-cream);
	border: 1.5px solid rgba(239, 233, 219, .45);
}
.s4s-btn--ghost:hover { border-color: var(--s4s-gold); color: var(--s4s-gold-light); }

.s4s-btn--outline {
	background: transparent;
	color: var(--s4s-navy-600);
	border: 1.5px solid var(--s4s-line-strong);
}
.s4s-btn--outline:hover { border-color: var(--s4s-gold); color: var(--s4s-gold-dark); }

.s4s-btn--sm { font-size: 13.5px; padding: 10px 16px; }
.s4s-btn--block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- chips */
.s4s-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.s4s-chip {
	background: transparent;
	color: var(--s4s-slate-deep);
	border: 1px solid var(--s4s-line-strong);
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 9px 16px;
	border-radius: var(--s4s-radius-pill);
	white-space: nowrap;
	transition: all var(--s4s-fast) var(--s4s-ease);
}
.s4s-chip:hover { border-color: var(--s4s-navy-600); color: var(--s4s-navy-600); }
.s4s-chip.is-active,
.s4s-chip[aria-current="true"] {
	background: var(--s4s-navy-600);
	border-color: var(--s4s-navy-600);
	color: var(--s4s-cream);
}

.s4s-tag {
	display: inline-block;
	background: rgba(8, 36, 59, .88);
	color: var(--s4s-yellow);
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
}
.s4s-tag--light { background: rgba(245, 239, 227, .94); color: var(--s4s-navy-600); }

/* ---------------------------------------------------------------- cards */
.s4s-card {
	background: var(--s4s-paper);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color var(--s4s-fast) var(--s4s-ease),
	            transform var(--s4s-fast) var(--s4s-ease);
}
.s4s-card:hover { border-color: var(--s4s-cyan); }
.s4s-card__media { position: relative; display: block; }
.s4s-card__media img { width: 100%; height: 190px; object-fit: cover; display: block; }
.s4s-card__media .s4s-tag { position: absolute; top: 12px; left: 12px; }
.s4s-card__body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.s4s-card__title {
	font-family: var(--s4s-font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--s4s-navy-600);
	margin: 0;
}
.s4s-card__title a { color: inherit; }
.s4s-card__title a:hover { color: var(--s4s-cyan); }
.s4s-card__text { font-size: 13.5px; line-height: 1.55; color: var(--s4s-slate); flex: 1; margin: 0; }
.s4s-card__meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--s4s-slate); }
.s4s-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--s4s-line-soft);
	padding-top: 14px;
	margin-top: 4px;
}
.s4s-card__price {
	font-family: var(--s4s-font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--s4s-navy-850);
}

/* Maker byline (cooperative avatar + place) */
.s4s-maker { display: flex; align-items: center; gap: 9px; padding-top: 4px; }
.s4s-maker__initials {
	width: 26px; height: 26px; flex: none;
	border-radius: 50%;
	background: var(--s4s-avatar-bg);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--s4s-font-display);
	font-weight: 700;
	font-size: 11px;
	color: var(--s4s-navy-600);
}
.s4s-maker__name { font-size: 12.5px; color: var(--s4s-slate); }

/* ---------------------------------------------------------------- grids */
.s4s-grid { display: grid; gap: 24px; }
.s4s-grid--2 { grid-template-columns: repeat(2, 1fr); }
.s4s-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s4s-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 980px) {
	.s4s-grid--3, .s4s-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.s4s-grid--2, .s4s-grid--3, .s4s-grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- header */
.s4s-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(10, 39, 64, .97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--s4s-line-gold);
}
body.admin-bar .s4s-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .s4s-header { top: 46px; } }

/* The header gets its own, wider measure than page content.
   At --s4s-wide (1200px) minus gutters there are 1136px to hold the logo, eight
   nav items, the language pill, Console, Account, Basket and the CTA. That does
   not fit, and because every child was flex:none the row overflowed to the
   right and clipped the CTA rather than shrinking. */
.s4s-header__inner {
	max-width: var(--s4s-header-w, min(1560px, 100%));
	margin-inline: auto;
	padding: 10px var(--s4s-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 0;
}

/* Every child may now give ground rather than push the row wider. */
.s4s-header__inner > * { min-width: 0; }
.s4s-brand { flex: 0 0 auto; }
.s4s-header__drawer { min-width: 0; }

.s4s-brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* Sized from the logo setting rather than fixed: this used to be a hard 52px
   circle with overflow:hidden, which silently cropped any logo wider than the
   badge instead of scaling it — so the width control appeared to do nothing. */
.s4s-brand__mark {
	width: auto; height: auto; flex: none;
	max-width: min(52vw, 460px);
	border-radius: 50%;
	background: var(--s4s-sand);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 1px rgba(198, 162, 76, .45);
}
.s4s-brand__mark img { width: var(--s4s-logo-w, 38px); height: auto; display: block; }
.s4s-brand__text {
	font-family: var(--s4s-font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .02em;
	color: var(--s4s-cream);
	white-space: nowrap;
}
.s4s-brand__text .s4s-brand__accent { color: var(--s4s-gold); }

.s4s-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
}
.s4s-nav li { position: relative; }
.s4s-nav a {
	position: relative;
	display: block;
	color: var(--s4s-cream);
	font-family: var(--s4s-font-display);
	font-weight: 500;
	font-size: 14px;
	padding: 8px 10px;
	white-space: nowrap;
}
.s4s-nav a:hover { color: var(--s4s-gold); }
.s4s-nav .current-menu-item > a::after,
.s4s-nav .current_page_item > a::after,
.s4s-nav .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 10px; right: 10px; bottom: 1px;
	height: 2px;
	background: var(--s4s-gold);
}
/* Marketplace / Academy / Journal get the cyan underline in the source design. */
.s4s-nav .current-menu-item.s4s-nav--cyan > a::after { background: var(--s4s-cyan); }

/* Language pair sitting inside the menu itself. */
.s4s-menu__lang {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 8px;
	padding-left: 10px;
	border-left: 1px solid var(--s4s-line-onDark);
}
.s4s-menu__langlink {
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--s4s-mist);
	padding: 6px 8px;
	border-radius: var(--s4s-radius-sm);
	line-height: 1;
}
.s4s-menu__langlink:hover { color: var(--s4s-gold); }
.s4s-menu__langlink.is-active {
	background: var(--s4s-gold);
	color: var(--s4s-navy-850);
}

/* Sub menus */
.s4s-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	background: var(--s4s-navy-800);
	border: 1px solid var(--s4s-line-gold);
	border-radius: var(--s4s-radius-sm);
	padding: 6px;
	box-shadow: var(--s4s-shadow-pop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--s4s-fast) var(--s4s-ease);
}
.s4s-nav li:hover > ul,
.s4s-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }

.s4s-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }

/* Language switcher (Polylang / WPML / manual) */
.s4s-lang {
	display: flex;
	border: 1px solid var(--s4s-line-onDark);
	border-radius: var(--s4s-radius-sm);
	overflow: hidden;
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .03em;
}
.s4s-lang a {
	padding: 6px 13px;
	color: var(--s4s-cream);
	background: transparent;
	text-transform: uppercase;
}
.s4s-lang a.is-active,
.s4s-lang .current-lang a { background: var(--s4s-gold); color: var(--s4s-navy-850); }

/* Cart pill */
.s4s-cart {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--s4s-cream);
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 13px;
	padding: 8px 12px;
	border: 1px solid var(--s4s-line-onDark);
	border-radius: var(--s4s-radius-sm);
}
.s4s-cart:hover { border-color: var(--s4s-gold); color: var(--s4s-gold); }
.s4s-cart__count {
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: var(--s4s-radius-pill);
	background: var(--s4s-gold);
	color: var(--s4s-navy-850);
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Burger — 44px hit area, the minimum comfortable touch target. */
.s4s-burger {
	display: none;
	width: 44px; height: 44px;
	background: none;
	border: 1px solid var(--s4s-line-onDark);
	border-radius: var(--s4s-radius-sm);
	padding: 0;
	position: relative;
	flex: none;
	cursor: pointer;
}
.s4s-burger:hover { border-color: var(--s4s-gold); }

.s4s-burger__bars,
.s4s-burger__bars::before,
.s4s-burger__bars::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 2px;
	background: var(--s4s-cream);
	border-radius: 2px;
	transition: transform var(--s4s-fast) var(--s4s-ease), opacity var(--s4s-fast) linear;
}
.s4s-burger__bars { top: 21px; left: 12px; }
.s4s-burger__bars::before { left: 0; top: -6px; }
.s4s-burger__bars::after { left: 0; top: 6px; }

.s4s-burger[aria-expanded="true"] .s4s-burger__bars { background: transparent; }
.s4s-burger[aria-expanded="true"] .s4s-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.s4s-burger[aria-expanded="true"] .s4s-burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

/*
 * The drawer wrapper is invisible to layout on desktop, so the nav and the
 * action cluster sit in the header row as if it were not there. Below the
 * burger breakpoint the same element becomes the off-canvas panel — which is
 * how the language switch, account, basket and CTA all reach mobile without a
 * second copy of the markup.
 */
.s4s-header__drawer { display: contents; }
.s4s-header__drawerhead { display: none; }
.s4s-drawer__scrim { display: none; }

/*
 * Between the burger breakpoint and a wide desktop the header carries eight
 * nav items plus the language switch, account, basket and CTA. That is too
 * much before there is room for it, so the CTA and language pill drop out
 * first rather than letting the row wrap into two lines.
 */
/* Staged collapse. Each step drops the least useful thing first, so a large
   logo costs the CTA label before it costs navigation. */
@media (max-width: 1560px) and (min-width: 1081px) {
	.s4s-header__inner { gap: 12px; }
	.s4s-nav a { padding-inline: 10px; }
}

@media (max-width: 1440px) and (min-width: 1081px) {
	.s4s-console-link span { display: none; }
	.s4s-console-link { padding-inline: 10px; }
	.s4s-account { display: none; }
}

@media (max-width: 1320px) and (min-width: 1081px) {
	.s4s-header__actions .s4s-btn { display: none; }
	.s4s-nav a { padding-inline: 8px; font-size: 13.5px; }
}

/* Exactly one language switcher at any width.

   There are two in the markup on purpose: the pill in the header actions is the
   design's, and the pair at the end of the menu exists so the languages are the
   first thing in the mobile drawer rather than buried under the basket and the
   CTA. Showing both at once is a bug — on a wide screen they appeared a few
   centimetres apart. The pill wins on desktop, the menu pair wins in the drawer,
   and the pair also covers the narrow band where the pill is dropped for space. */
@media (min-width: 1081px) {
	.s4s-menu__lang { display: none; }
}

@media (max-width: 1180px) and (min-width: 1081px) {
	.s4s-lang { display: none; }
	.s4s-menu__lang { display: flex; }
	.s4s-cart span:first-child { display: none; }
}

@media (max-width: 1080px) {
	.s4s-burger { display: block; }

	/*
	 * Drop the blur while the drawer exists.
	 *
	 * `backdrop-filter` makes an element a containing block for
	 * `position: fixed` descendants — same trap as `transform`. With it on,
	 * the drawer's `top:0; bottom:0` resolved against the 74px header instead
	 * of the viewport and the panel rendered as an invisible sliver: the menu
	 * looked completely dead. The blur is barely perceptible on a phone, so
	 * the honest fix is to turn it off exactly where the drawer is used rather
	 * than restructure the header for a decoration.
	 */
	.s4s-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--s4s-navy-850);
	}

	/* Off-canvas panel, sliding in from the right. */
	.s4s-header__drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 86vw);
		background: var(--s4s-navy-850);
		border-left: 1px solid var(--s4s-line-gold);
		box-shadow: -18px 0 44px rgba(8, 36, 59, .34);
		padding: 0 0 28px;
		z-index: 600;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--s4s-slow) var(--s4s-ease), visibility 0s linear var(--s4s-slow);
	}
	.s4s-header__drawer.is-open {
		transform: none;
		visibility: visible;
		transition: transform var(--s4s-slow) var(--s4s-ease), visibility 0s;
	}

	.s4s-header__drawerhead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 18px 14px;
		border-bottom: 1px solid rgba(198, 162, 76, .22);
		position: sticky;
		top: 0;
		background: var(--s4s-navy-850);
		z-index: 1;
	}
	.s4s-header__drawertitle {
		font-family: var(--s4s-font-display);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--s4s-gold-light);
	}
	.s4s-drawer__close {
		width: 42px; height: 42px;
		background: none;
		border: 1px solid var(--s4s-line-onDark);
		border-radius: var(--s4s-radius-sm);
		color: var(--s4s-cream);
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}
	.s4s-drawer__close:hover { border-color: var(--s4s-gold); color: var(--s4s-gold); }

	.s4s-nav { padding: 6px 14px 4px; }
	.s4s-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.s4s-nav li { border-bottom: 1px solid rgba(239, 233, 219, .08); }
	.s4s-nav li:last-child { border-bottom: 0; }

	/* Full-width rows at least 48px tall: comfortable to tap, hard to miss. */
	.s4s-nav a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 10px 12px 14px;
		font-size: 16px;
	}
	.s4s-nav .current-menu-item > a::after,
	.s4s-nav .current_page_item > a::after,
	.s4s-nav .current-menu-ancestor > a::after {
		left: 0;
		right: auto;
		top: 12px;
		bottom: 12px;
		width: 3px;
		height: auto;
	}

	/* In the drawer the languages become a full-width row of two big targets,
	   not a cramped pair squeezed against the last menu item. */
	.s4s-menu__lang {
		margin: 10px 0 0;
		padding: 12px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(198, 162, 76, .22);
		gap: 8px;
	}
	.s4s-menu__langlink {
		flex: 1;
		min-height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		border: 1px solid var(--s4s-line-onDark);
	}
	.s4s-menu__langlink.is-active { border-color: var(--s4s-gold); }

	/* Sub-menus become an indented list rather than a hover flyout — there is
	   no hover on a touch screen. */
	.s4s-nav ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 6px 16px;
		background: transparent;
		min-width: 0;
	}
	.s4s-nav ul ul a { min-height: 42px; font-size: 14.5px; color: var(--s4s-mist); }

	.s4s-header__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 18px 22px 0;
		margin-top: 8px;
		border-top: 1px solid rgba(198, 162, 76, .22);
	}
	.s4s-header__actions .s4s-btn {
		display: inline-flex;
		width: 100%;
		justify-content: center;
		padding-block: 15px;
	}
	.s4s-account,
	.s4s-cart {
		justify-content: center;
		padding-block: 13px;
		font-size: 14.5px;
	}
	/* The drawer already carries the languages as two big targets at the end of
	   the menu, so the header pill would be a second switcher a few centimetres
	   below the first. */
	.s4s-lang { display: none; }

	/* Scrim behind the drawer. */
	.s4s-drawer__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(8, 36, 59, .55);
		z-index: 590;
		opacity: 0;
		transition: opacity var(--s4s-slow) var(--s4s-ease);
	}
	.s4s-drawer__scrim[hidden] { display: none; }
	.s4s-drawer__scrim.is-open { opacity: 1; }

	/* Freeze the page behind an open drawer. */
	body.s4s-drawer-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.s4s-header__drawer,
	.s4s-drawer__scrim { transition: none; }
}

/* ----------------------------------------------------------- page hero */
.s4s-pagehero {
	position: relative;
	overflow: hidden;
	background: var(--s4s-grad-hero);
	color: var(--s4s-cream);
}
.s4s-pagehero--market { background: var(--s4s-grad-market); }
.s4s-pagehero--academy { background: var(--s4s-grad-academy); }
.s4s-pagehero--journal { background: var(--s4s-grad-journal); }
.s4s-pagehero__inner {
	position: relative;
	max-width: var(--s4s-wide);
	margin-inline: auto;
	padding: 70px var(--s4s-gutter) 60px;
}
.s4s-pagehero h1 { color: var(--s4s-cream-warm); margin: 0; max-width: 860px; }
.s4s-pagehero p { color: var(--s4s-mist); max-width: 620px; font-size: 17px; margin: 18px 0 0; }
.s4s-pagehero__waves {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .16;
	pointer-events: none;
}
/* Bottom wave that hands off to the sand background. */
.s4s-wave-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 92px;
	display: block;
}

.s4s-breadcrumb {
	font-size: 13px;
	color: var(--s4s-mist-2);
	margin-bottom: 14px;
}
.s4s-breadcrumb a { color: var(--s4s-gold-light); }

/* ---------------------------------------------------------------- entry */
.s4s-entry {
	background: var(--s4s-paper);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	padding: 48px 56px;
	margin-block: 56px;
}
.s4s-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: var(--s4s-slate);
	margin-bottom: 26px;
}
.s4s-entry__content > * + * { margin-top: 1.1em; }
.s4s-entry__content img { border-radius: var(--s4s-radius); }
.s4s-entry__content ul,
.s4s-entry__content ol { padding-left: 22px; }
.s4s-entry__content li { margin-bottom: .45em; }
.s4s-entry__content h2 { margin-top: 1.6em; }

@media (max-width: 820px) {
	.s4s-entry { padding: 30px 24px; margin-block: 32px; }
}

/* Post card (Journal) */
.s4s-post__cat {
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--s4s-gold-dark);
}

/* ------------------------------------------------------- pagination etc */
.s4s-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 48px 0;
}
.s4s-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--s4s-line-strong);
	border-radius: var(--s4s-radius-sm);
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--s4s-navy-600);
}
.s4s-pagination .page-numbers.current,
.s4s-pagination .page-numbers:hover {
	background: var(--s4s-navy-600);
	border-color: var(--s4s-navy-600);
	color: var(--s4s-cream);
}

/* --------------------------------------------------------------- forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--s4s-line-strong);
	border-radius: var(--s4s-radius-sm);
	padding: 13px 15px;
	color: var(--s4s-ink);
	transition: border-color var(--s4s-fast) var(--s4s-ease);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--s4s-cyan);
	outline: none;
}
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--s4s-slate-deep); margin-bottom: 6px; }

input[type="submit"],
button[type="submit"] {
	width: auto;
	background: var(--s4s-gold);
	color: var(--s4s-navy-850);
	font-family: var(--s4s-font-display);
	font-weight: 600;
	border: none;
	border-radius: var(--s4s-radius-sm);
	padding: 15px 28px;
}
input[type="submit"]:hover,
button[type="submit"]:hover { background: var(--s4s-gold-hover); }

/* Fields sitting on a dark band. */
.s4s-onDark input[type="text"],
.s4s-onDark input[type="email"],
.s4s-onDark input[type="search"],
.s4s-pagehero input[type="text"],
.s4s-pagehero input[type="search"] {
	background: rgba(255, 255, 255, .09);
	border-color: var(--s4s-line-onDark);
	color: var(--s4s-cream-warm);
}
.s4s-onDark input::placeholder,
.s4s-pagehero input::placeholder { color: rgba(239, 233, 219, .6); }

/* --------------------------------------------------------------- footer */
.s4s-footer {
	background: var(--s4s-navy-900);
	color: var(--s4s-cream);
	border-top: 3px solid var(--s4s-gold);
	margin-top: auto;
}
.s4s-footer__cols {
	max-width: var(--s4s-wide);
	margin-inline: auto;
	padding: 64px var(--s4s-gutter) 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
}
.s4s-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.s4s-footer__brand img { width: 54px; height: auto; display: block; }
.s4s-footer__wordmark {
	font-family: var(--s4s-font-display);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .02em;
	color: var(--s4s-cream);
}
.s4s-footer__wordmark span { color: var(--s4s-gold); }
.s4s-footer__blurb { font-size: 14.5px; line-height: 1.6; color: var(--s4s-mist-3); max-width: 320px; margin: 0 0 20px; }
.s4s-footer__motto {
	font-style: italic;
	font-size: 14px;
	color: var(--s4s-gold-light);
	line-height: 1.5;
	max-width: 320px;
}
.s4s-footer__title {
	font-family: var(--s4s-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--s4s-gold-light);
	margin-bottom: 18px;
}
.s4s-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.s4s-footer .menu,
.s4s-footer__links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 11px 24px;
}
.s4s-footer a { color: var(--s4s-mist); font-size: 15px; }
.s4s-footer a:hover { color: var(--s4s-gold); }

.s4s-social {
	display: flex;
	gap: 9px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.s4s-social a {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(239, 233, 219, .3);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 11px;
	color: var(--s4s-cream);
}
.s4s-social a:hover { background: var(--s4s-gold); color: var(--s4s-navy-850); border-color: var(--s4s-gold); }

.s4s-footer__bar {
	max-width: var(--s4s-wide);
	margin-inline: auto;
	padding: 20px var(--s4s-gutter);
	border-top: 1px solid rgba(198, 162, 76, .2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--s4s-mist-4);
}

@media (max-width: 860px) {
	.s4s-footer__cols { grid-template-columns: 1fr; gap: 34px; }
}

/* ------------------------------------------------- sidebar & widgets */
.s4s-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 44px;
	align-items: start;
}
@media (max-width: 900px) {
	.s4s-layout { grid-template-columns: 1fr; }
}

.s4s-sidebar { position: sticky; top: 100px; }
.s4s-widget {
	background: var(--s4s-paper);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	padding: 24px 22px;
	margin-bottom: 22px;
}
.s4s-widget__title {
	font-family: var(--s4s-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--s4s-gold-dark);
	margin: 0 0 14px;
}
.s4s-widget ul { list-style: none; margin: 0; padding: 0; }
.s4s-widget li + li { margin-top: 9px; }
.s4s-footer .s4s-widget { background: transparent; border: 0; padding: 0; }

/* ------------------------------------------------------------ comments */
.s4s-comments { padding-bottom: 72px; }
.s4s-comments__title { font-size: 22px; margin-bottom: 24px; }
.s4s-comments__list { list-style: none; margin: 0 0 40px; padding: 0; }
.s4s-comments__list .children { list-style: none; padding-left: 28px; }
.s4s-comments__list .comment-body {
	background: var(--s4s-paper);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	padding: 20px 22px;
	margin-bottom: 16px;
}
.s4s-comments .comment-form label { margin-top: 12px; }

/* -------------------------------------------------------- reveal anim */
[data-s4s-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--s4s-slow) var(--s4s-ease), transform var(--s4s-slow) var(--s4s-ease);
}
[data-s4s-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-s4s-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------- small screens */
/*
 * A table is the one block that cannot reflow without losing its meaning, so
 * any table inside authored content scrolls sideways in its own box and the
 * page body never does.
 */
.s4s-entry__content table,
.s4s-entry__content .wp-block-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* Long URLs and unbroken strings must not push the layout wider than the
   viewport. */
.s4s-entry__content,
.s4s-card__text,
.s4s-card__title { overflow-wrap: anywhere; }

.s4s-entry__content pre {
	overflow-x: auto;
	padding: 16px 18px;
	background: var(--s4s-paper-warm);
	border-radius: var(--s4s-radius-sm);
}

@media (max-width: 600px) {
	.s4s-hero__actions .s4s-btn,
	.s4s-pagehero .s4s-btn { width: 100%; justify-content: center; }

	.s4s-btn { padding: 14px 20px; font-size: 15px; }

	.s4s-chips { gap: 7px; }
	.s4s-chip { font-size: 12.5px; padding: 8px 13px; }

	.s4s-pagehero__inner { padding-block: 48px 40px; }

	.s4s-footer__bar { justify-content: flex-start; }
}

/*
 * Guard against a stray wide element scrolling the whole page sideways.
 *
 * `clip` and not `hidden`: `overflow: hidden` on an ancestor silently kills
 * `position: sticky` on everything inside it, which would drop the sticky
 * header. There is deliberately no `hidden` fallback for browsers without
 * `clip` — a rare horizontal scrollbar is a smaller problem than a header that
 * stops sticking.
 */
html, body { overflow-x: clip; }

/* ------------------------------------------------------------ utilities */
.s4s-center { text-align: center; }
.s4s-mt-0 { margin-top: 0; }
.alignwide { max-width: var(--s4s-wide); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 24px 18px 0; }
.alignright { float: right; margin: 0 0 18px 24px; }
.sticky .s4s-card { border-color: var(--s4s-gold); }

/* =========================================================================
   Editorial listings — lead story, Journal card, article furniture
   ========================================================================= */

/* --- Lead story ------------------------------------------------------- */

.s4s-lead {
	display: grid;
	gap: 0;
	background: var(--s4s-paper);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	overflow: hidden;
	margin-bottom: 24px;
	transition: border-color var(--s4s-fast) var(--s4s-ease);
}
.s4s-lead:hover { border-color: var(--s4s-gold); }

@media (min-width: 861px) {
	.s4s-lead { grid-template-columns: 1.1fr 1fr; }
}

.s4s-lead__media {
	display: block;
	position: relative;
	min-height: 260px;
	background: var(--s4s-navy-800);
	overflow: hidden;
}
.s4s-lead__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--s4s-ease);
}
.s4s-lead:hover .s4s-lead__media img { transform: scale(1.03); }

.s4s-lead__body {
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.s4s-lead__kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s4s-lead__cat,
.s4s-lead__latest {
	font-family: var(--s4s-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.s4s-lead__cat { color: var(--s4s-blue-600); }
.s4s-lead__latest {
	color: var(--s4s-navy-850);
	background: var(--s4s-gold);
	padding: 3px 9px;
	border-radius: 999px;
}

.s4s-lead__title {
	font-size: clamp(24px, 3.2vw, 38px);
	line-height: 1.12;
	margin: 0;
}
.s4s-lead__title a { color: inherit; }
.s4s-lead__title a:hover { color: var(--s4s-blue-700); }

.s4s-lead__excerpt {
	margin: 0;
	color: var(--s4s-slate);
	font-size: 16.5px;
	max-width: 54ch;
}

.s4s-lead__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--s4s-slate);
	font-variant-numeric: tabular-nums;
}

/* The pair under the lead sits a little tighter to it than the tail does. */
.s4s-listing__pair { margin-bottom: 24px; }
.s4s-listing__tail { margin-top: 4px; }

/* --- Journal card ----------------------------------------------------- */

/* The whole card is one link, so the anchor carries the layout rather than
   sitting inside it. Everything within is a span for that reason. */
.s4s-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}
.s4s-card--post .s4s-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--s4s-navy-800);
}
.s4s-card--post .s4s-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--s4s-ease);
}
.s4s-card--post:hover .s4s-card__media img { transform: scale(1.04); }

.s4s-card--post .s4s-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
	flex: 1;
}
.s4s-card__cat {
	font-family: var(--s4s-font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--s4s-blue-600);
}
.s4s-card--post .s4s-card__title {
	font-family: var(--s4s-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.22;
	margin: 0;
}
.s4s-card--post:hover .s4s-card__title { color: var(--s4s-blue-700); }
.s4s-card--post .s4s-card__text {
	color: var(--s4s-slate);
	font-size: 15px;
	line-height: 1.55;
}
.s4s-card--post .s4s-card__meta {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	gap: 7px;
	align-items: center;
	font-size: 12.5px;
	color: var(--s4s-slate);
	font-variant-numeric: tabular-nums;
}
.s4s-card__link:focus-visible {
	outline: 2px solid var(--s4s-gold);
	outline-offset: 2px;
}

/* --- Reading progress ------------------------------------------------- */

.s4s-progress {
	position: sticky;
	top: 0;
	z-index: 40;
	height: 3px;
	background: transparent;
}
.s4s-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--s4s-gold);
	transition: width 90ms linear;
}

/* --- Article shell ---------------------------------------------------- */

.s4s-article { display: block; }

@media (min-width: 1000px) {
	.s4s-article--toc {
		display: grid;
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

.s4s-article__rail { display: none; }

@media (min-width: 1000px) {
	.s4s-article__rail {
		display: block;
		position: sticky;
		top: 96px;
		padding-top: 56px;
	}
}

.s4s-toc__label {
	font-family: var(--s4s-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--s4s-slate);
	margin: 0 0 10px;
}
.s4s-toc ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--s4s-line);
	display: grid;
	gap: 9px;
}
.s4s-toc a {
	font-size: 14px;
	line-height: 1.35;
	color: var(--s4s-slate);
}
.s4s-toc a:hover { color: var(--s4s-navy-850); }
.s4s-toc li.is-current a { color: var(--s4s-navy-850); font-weight: 600; }
.s4s-toc li.is-current { position: relative; }
.s4s-toc li.is-current::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: var(--s4s-gold);
}

/* Long-form measure: the article column is the one place on the site that is
   read top to bottom, so it is narrower and set larger than everything else. */
.s4s-article__main .s4s-entry__content {
	max-width: 68ch;
	font-size: 18px;
	line-height: 1.72;
}
.s4s-article__main .s4s-entry__content > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	color: var(--s4s-navy-850);
}
.s4s-article__main .s4s-entry__content h2 {
	font-size: 27px;
	margin-top: 1.9em;
	scroll-margin-top: 100px;
}
.s4s-article__main .s4s-entry__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--s4s-gold);
	font-family: var(--s4s-font-display);
	font-size: 21px;
	line-height: 1.4;
	color: var(--s4s-navy-850);
}
.s4s-article__main .s4s-entry__content blockquote p { margin: 0; }
.s4s-article__main .s4s-entry__content figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--s4s-slate);
}

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

.s4s-postnav {
	display: grid;
	gap: 14px;
	margin: 40px 0 8px;
}
@media (min-width: 720px) {
	.s4s-postnav { grid-template-columns: 1fr 1fr; }
}
.s4s-postnav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 22px;
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	background: var(--s4s-paper);
	color: inherit;
	transition: border-color var(--s4s-fast) var(--s4s-ease);
}
.s4s-postnav__link:hover { border-color: var(--s4s-gold); }
.s4s-postnav__link--next { text-align: right; }

/* A single neighbour keeps its own side of the grid, so "next" does not slide
   under the "previous" heading on the first or last article. */
.s4s-postnav__link--next:only-child { grid-column: 2; }

.s4s-postnav__dir {
	font-family: var(--s4s-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--s4s-slate);
}
.s4s-postnav__title {
	font-family: var(--s4s-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

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

.s4s-related {
	background: var(--s4s-sand-deep);
	border-top: 1px solid var(--s4s-line);
	padding: clamp(40px, 6vw, 72px) 0;
	margin-top: clamp(40px, 6vw, 72px);
}
.s4s-related__title {
	font-size: clamp(22px, 2.6vw, 30px);
	margin: 0 0 24px;
}

@media (max-width: 860px) {
	.s4s-lead__media { min-height: 200px; }
	.s4s-postnav__link--next { text-align: left; }
	.s4s-postnav__link--next:only-child { grid-column: auto; }
}

/* --- Facts panel on services, courses and projects -------------------- */

.s4s-facts {
	margin: 40px 0 0;
	padding: clamp(22px, 3vw, 32px);
	background: var(--s4s-paper-warm);
	border: 1px solid var(--s4s-line);
	border-radius: var(--s4s-radius);
	display: grid;
	gap: 22px;
	max-width: 68ch;
}

.s4s-facts__list { margin: 0; display: grid; gap: 0; }
.s4s-facts__row {
	display: grid;
	grid-template-columns: minmax(110px, 30%) 1fr;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--s4s-line-soft);
}
.s4s-facts__row:last-child { border-bottom: 0; }
.s4s-facts__row dt {
	font-family: var(--s4s-font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--s4s-slate);
}
.s4s-facts__row dd {
	margin: 0;
	font-size: 16px;
	color: var(--s4s-navy-850);
	font-variant-numeric: tabular-nums;
}

.s4s-facts__title {
	font-size: 18px;
	margin: 0 0 12px;
}

/* The deliverables read as a checklist rather than prose, so they take a mark
   instead of a bullet — these are things you receive, not points in an argument. */
.s4s-facts__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.s4s-facts__ul li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.5;
}
.s4s-facts__ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .48em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--s4s-gold);
	border-bottom: 2px solid var(--s4s-gold);
	transform: rotate(-45deg);
}

.s4s-facts .s4s-btn { justify-self: start; }

@media (max-width: 560px) {
	.s4s-facts__row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Console link, staff only ----------------------------------------- */

.s4s-console-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--s4s-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--s4s-cream);
	border: 1px solid rgba(239, 233, 219, .3);
	border-radius: var(--s4s-radius-pill);
	padding: 7px 14px;
	white-space: nowrap;
	transition: border-color var(--s4s-fast) var(--s4s-ease),
	            color var(--s4s-fast) var(--s4s-ease);
}
.s4s-console-link:hover,
.s4s-console-link:focus { border-color: var(--s4s-gold); color: var(--s4s-gold-light); }
.s4s-console-link svg { flex: none; }

/* On a narrow desktop the label goes and the icon carries it. */
@media (max-width: 1240px) and (min-width: 1081px) {
	.s4s-console-link span { display: none; }
	.s4s-console-link { padding: 7px 10px; }
}

@media (max-width: 1080px) {
	.s4s-console-link {
		justify-content: center;
		padding-block: 12px;
		font-size: 14.5px;
	}
}