/*
Theme Name: ELEMNT
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elemnt
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* ==========================================================================
   §5 Type system — self-hosted fonts (interim: Anton stands in for the
   client's licensed PP Monument Extended; swap path is @font-face only).
   ========================================================================== */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/anton-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/inter-700.woff2') format('woff2');
}

:root {
	-webkit-font-smoothing: antialiased;
	--radius-sm: 2px;
	--radius-md: 4px;
	--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3,
.wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	/* Anton only ships a 400 weight; the UA stylesheet's default bold on
	   h1-h3 has no matching face to draw from, so the browser synthesizes
	   (fake-bolds) it — a doubled/smeared stroke at small sizes. Anton
	   already reads as a heavy display face at 400, so pin it there. */
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* ==========================================================================
   §4 Dark mode — the same CSS custom properties WordPress writes as color
   presets are re-pointed to the dark-mode-corrected hex values. Light is
   the default render (no prefers-color-scheme fallback, per §11): dark
   mode only activates when JS sets data-theme="dark" (toggle click or a
   restored localStorage value), never from the OS preference alone.
   ========================================================================== */
:root[data-theme='dark'] {
	--wp--preset--color--base: #0A0A0A;
	--wp--preset--color--contrast: #FDFDFD;
	--wp--preset--color--secondary: #1A1A1A;
	--wp--preset--color--meta: #8B8B94;
	--wp--preset--color--accent-interactive: #D4AF37;
}

:root[data-theme='dark'] img,
:root[data-theme='dark'] video {
	filter: brightness(0.9);
}

/* ==========================================================================
   §2 Interim image placeholder — rendered by elemnt_media_slot() only when
   has_post_thumbnail() is false. Secondary UI background, triangle-mark
   motif, Space Grotesk micro-copy label stating the slot's required
   orientation + ratio. Zero image assets, zero AI cost.
   ========================================================================== */
.elemnt-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.elemnt-media__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elemnt-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--16);
	width: 100%;
	aspect-ratio: 1.91 / 1;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--meta);
	transition: color 0.3s var(--ease-premium);
}

.elemnt-placeholder__triangle {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-placeholder__label {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.elemnt-placeholder--brand {
	gap: var(--wp--preset--spacing--12);
}

.elemnt-placeholder__brand {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.875rem, 3.5vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--wp--preset--color--meta);
	transition: color 0.3s var(--ease-premium);
}

.elemnt-placeholder--portrait {
	aspect-ratio: 4 / 5;
}

.elemnt-placeholder--square {
	aspect-ratio: 1 / 1;
}

/* §4 accent tag — urgent/critical labels, same fill + dark-text rule as buttons. */
.elemnt-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border-radius: var(--radius-sm);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

/* === §11 header === */
/* position: sticky was buggy in practice; fixed pins reliably regardless
   of ancestor overflow/transform quirks. Being taken out of flow, the
   page content needs compensating top padding — see the --elemnt-header-h
   var set by chrome.js and consumed by body below. */
.elemnt-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	transform: translateY(0);
	transition: padding 0.3s var(--ease-premium), transform 0.35s var(--ease-premium);
}

/* Hides upward off-screen on scroll-down (past one header height so it
   doesn't flicker right at the top), reappears the instant the user
   scrolls up even a little — the standard "scroll up to reveal" pattern.
   chrome.js toggles this; suspended while search-open so the header
   can't hide while the user is mid-search. */
.elemnt-header.is-hidden {
	transform: translateY(-100%);
}

body {
	padding-top: var(--elemnt-header-h, 0px);
}

.elemnt-header__bar {
	width: 100%;
	padding-block: var(--wp--preset--spacing--32, 32px);
	transition: padding-block 0.3s var(--ease-premium);
	align-items: center;
}

.elemnt-header.is-condensed .elemnt-header__bar {
	padding-block: var(--wp--preset--spacing--16);
}

.elemnt-header.is-condensed .elemnt-logo__word,
.elemnt-header.is-condensed .elemnt-logo__word a {
	font-size: var(--wp--preset--font-size--ui);
}

.elemnt-header.is-condensed .elemnt-icon-btn {
	width: 36px;
	height: 36px;
}

.elemnt-header__nav {
	display: flex;
	align-items: center;
}

.elemnt-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--24);
	/* At 16px the label set is wide enough that the default wrap wrapped
	   it onto two lines inside its centered grid column; nowrap lets it
	   overflow into the flexible spacer columns instead, which is what we
	   want since those columns exist purely to center it. */
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
}

.elemnt-header__nav a.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--micro);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s var(--ease-premium);
}

.elemnt-header__nav a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-header__utility {
	gap: var(--wp--preset--spacing--16);
	align-items: center;
}
/* === §11 logo === */
.elemnt-logo {
	gap: var(--wp--preset--spacing--8);
	align-items: center;
}

.elemnt-logo::before {
	content: '';
	width: 20px;
	height: 17px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent-interactive);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transition: width 0.3s var(--ease-premium), height 0.3s var(--ease-premium);
}

.elemnt-header.is-condensed .elemnt-logo::before {
	width: 14px;
	height: 12px;
}

.elemnt-logo__word,
.elemnt-logo__word a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	transition: font-size 0.3s var(--ease-premium);
}
/* === §11 utility icons === */
.elemnt-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium), transform 0.15s var(--ease-premium), width 0.3s var(--ease-premium), height 0.3s var(--ease-premium);
}

.elemnt-icon-btn svg {
	width: 22px;
	height: 22px;
}

.elemnt-icon-btn:hover {
	border-color: var(--wp--preset--color--accent-interactive);
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-icon-btn:active {
	transform: scale(0.96);
}

.elemnt-icon-btn--theme .elemnt-icon--moon {
	display: none;
}

:root[data-theme='dark'] .elemnt-icon-btn--theme .elemnt-icon--sun {
	display: none;
}

:root[data-theme='dark'] .elemnt-icon-btn--theme .elemnt-icon--moon {
	display: block;
}

.elemnt-icon-btn--menu[aria-expanded='true'] {
	border-color: var(--wp--preset--color--contrast);
}
/* === §11 lang switcher === */
ul.elemnt-lang-switcher {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	/* CJK text line-breaks between syllables even without spaces, so a
	   squeezed flex sibling (e.g. the nav growing at 16px) can wrap "한국어"
	   internally even though flex-wrap only governs whole items — nowrap
	   the text itself so it never happens. */
	flex-wrap: nowrap;
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

ul.elemnt-lang-switcher li {
	margin: 0;
}

ul.elemnt-lang-switcher a {
	color: var(--wp--preset--color--meta);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

ul.elemnt-lang-switcher a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

ul.elemnt-lang-switcher li.current-lang a {
	color: var(--wp--preset--color--contrast);
}

ul.elemnt-lang-switcher li:not(:last-child)::after {
	content: '/';
	margin-inline-start: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--secondary);
}

/* The overlay carries its own switcher only as the mobile fallback for the
   one hidden from the header bar under 782px (see responsive section);
   desktop already has it in the header, so hide the duplicate there. */
.elemnt-overlay__chrome ul.elemnt-lang-switcher--overlay {
	display: none;
}
/* === §11 header search — blog.youtube-style takeover: the field replaces
   the nav/utility row in place (bar height never changes) while the logo
   stays put on the left, exactly like YouTube's search takeover — the
   overlay is scoped to `.elemnt-header__center`, a sibling of the logo,
   not the whole bar, so it never paints over it. */
.elemnt-header__center {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	/* 4-track grid: two equal spacer tracks flank the nav (col 2), a 4th
	   auto track reserves the utility group's own natural width (col 4)
	   so it never competes with the spacers for space. Nav ends up
	   centered in the leftover room between the logo and the utility
	   group, without squeezing the utility group's icons/lang switcher.
	   The block's own generated `.wp-container-core-group-is-layout-*`
	   rule sets display:flex at the same specificity and loads after this
	   stylesheet, so !important is needed to actually win. */
	display: grid !important;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
}

.elemnt-header__center > .elemnt-header__nav {
	grid-column: 2;
	justify-self: center;
}

.elemnt-header__center > .elemnt-header__utility {
	grid-column: 4;
	justify-self: end;
	flex-shrink: 0;
	white-space: nowrap;
}

.elemnt-header__center > .elemnt-header__nav,
.elemnt-header__center > .elemnt-header__utility {
	opacity: 1;
	transition: opacity 0.2s var(--ease-premium);
}

.elemnt-header.search-open .elemnt-header__center > .elemnt-header__nav,
.elemnt-header.search-open .elemnt-header__center > .elemnt-header__utility {
	opacity: 0;
	pointer-events: none;
}

.elemnt-header__search-inline .elemnt-icon-btn--close {
	flex-shrink: 0;
	margin-left: var(--wp--preset--spacing--16);
}

.elemnt-header__search-inline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), visibility 0s linear 0.25s;
}

.elemnt-header.search-open .elemnt-header__search-inline {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.3s var(--ease-premium) 0.05s, transform 0.3s var(--ease-premium) 0.05s;
}

.elemnt-header__search-field {
	flex: 1 1 auto;
	min-width: 0;
}

.elemnt-header__search-field .wp-block-search__label {
	display: none;
}

.elemnt-header__search-field .wp-block-search__inside-wrapper {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0;
	padding-bottom: var(--wp--preset--spacing--8);
	transition: border-color 0.2s var(--ease-premium);
}

.elemnt-header__search-field:focus-within .wp-block-search__inside-wrapper {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.elemnt-header__search-field .wp-block-search__input {
	border: none;
	background: transparent;
	padding: 0;
	width: 100%;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.elemnt-header__search-field .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.elemnt-header__search-field .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--meta);
}

/* A real filled button, not a bare text label floating inside the
   underline field — matches the site's other CTA buttons (e.g. footer
   newsletter subscribe). Fixed height matches .elemnt-icon-btn's 44px
   next-door close button so both sit flush in the row's centered flex
   line — the earlier margin-bottom nudge threw that off. Radius uses
   the same --radius-sm token as every other solid-fill button/tag on
   the site (see .elemnt-tag, footer subscribe button, and the global
   core/button style in theme.json) — no pill shapes for UI components. */
.elemnt-header__search-field .wp-block-search__button {
	flex-shrink: 0;
	margin-left: var(--wp--preset--spacing--16);
	height: 44px;
	padding: 0 20px;
	border: none;
	border-radius: var(--radius-sm);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	transition: background-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium);
}

.elemnt-header__search-field .wp-block-search__button svg,
.elemnt-header__search-field .wp-block-search__button {
	width: auto;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.elemnt-header__search-field .wp-block-search__button:hover {
	background-color: #d4af37;
	color: #0a0a0a;
}

/* Suggested-searches panel: unfolds below the (still fully visible,
   sticky) header bar — collapse wrapper is the sole grid item so the
   0fr→1fr track genuinely collapses. */
.elemnt-search-suggestions {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	/* Muted, distinct from the page background so the panel doesn't blend
	   in — was the same base white as the page before. */
	background-color: var(--wp--preset--color--secondary);
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	padding-inline: clamp(1.5rem, 5vw, 3rem);
	transition: grid-template-rows 0.4s var(--ease-premium), opacity 0.3s var(--ease-premium), visibility 0s linear 0.4s, padding-block 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

.elemnt-search-suggestions__inner {
	min-height: 0;
	overflow: hidden;
}

.elemnt-header.search-open + .elemnt-search-suggestions {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
	transition: grid-template-rows 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium) 0.1s, padding-block 0.4s var(--ease-premium);
}

.elemnt-search-suggestions__label {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--16);
}

.elemnt-search-suggestions__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-search-suggestions__chips a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	/* Base-white fill so the chip reads as a distinct card floating on the
	   now-muted suggestions panel, instead of an outline that would have
	   matched the panel's own border color and disappeared into it. UI
	   components use 2/4px corners only — no pill shapes. */
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--radius-md);
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	transition: border-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium);
}

.elemnt-search-suggestions__chips a:hover {
	border-color: var(--wp--preset--color--accent-interactive);
	color: var(--wp--preset--color--accent-interactive);
}
/* === §11 overlay === */
.elemnt-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: var(--wp--preset--color--base);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.98) translateY(12px);
	transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), visibility 0s linear 0.5s;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--24) clamp(1.25rem, 5vw, 3rem);
}

.elemnt-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
	transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.elemnt-overlay {
	display: flex;
	flex-direction: column;
}

/* Grid instead of the block's own flex layout: a true center column keeps
   the logo centered between the close button and the icon/lang group even
   though those two flanks are different widths. */
.elemnt-overlay__chrome {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--48);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.elemnt-overlay__chrome > .elemnt-overlay__logo {
	justify-self: center;
}

.elemnt-overlay__chrome > div:last-child {
	justify-self: end;
}

.elemnt-overlay__legal {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--48);
}

.elemnt-overlay__legal .elemnt-footer__legal-links {
	gap: var(--wp--preset--spacing--24);
}

.elemnt-overlay__legal .elemnt-footer__legal-links a {
	color: var(--wp--preset--color--meta);
}

.elemnt-overlay__legal .elemnt-footer__legal-links a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-overlay__panels {
	width: 100%;
	gap: var(--wp--preset--spacing--64);
	align-items: flex-start;
}

.elemnt-overlay__nav-panel {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Making the panel a flex column (above) turns the constrained-layout's
   generic `margin-inline: auto` (meant for centering in normal block flow)
   into flexbox auto-margin self-centering on every direct child — shrinking
   both the categories <nav> and the pages list to their own content width
   and floating them mid-column instead of filling the panel edge-to-edge.
   Override back to a plain full-width block for both direct children. */
.elemnt-overlay__nav-panel > * {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.elemnt-overlay__promo-panel {
	flex: 1 1 45%;
	position: sticky;
	top: var(--wp--preset--spacing--24);
}

.elemnt-overlay-panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
	width: 100%;
}
/* === §11 mega nav === */
/* Single vertical column — this is the *categories* list (with expandable
   subcategory accordions), kept simple and scannable; the two-column
   balance treatment lives on the separate pages list below it instead. */
.elemnt-mega-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elemnt-mega-nav {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Pages list (About, Newsroom…) sits vertically beneath the categories
   list, in the same column, pinned to the bottom of the nav panel so it
   balances against the sticky promo panel's height. */
.elemnt-overlay-pages__list {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--32);
}

.elemnt-mega-nav__item {
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

.elemnt-mega-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding-block: var(--wp--preset--spacing--16);
}

.elemnt-mega-nav__parent-link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h1);
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s var(--ease-premium);
}

.elemnt-mega-nav__parent-link:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-mega-nav__caret {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 0.3s var(--ease-premium), border-color 0.2s var(--ease-premium);
}

.elemnt-mega-nav__caret:hover {
	border-color: var(--wp--preset--color--accent-interactive);
}

.elemnt-mega-nav__caret[aria-expanded='true'] {
	transform: rotate(45deg);
}

/* Collapse wrapper: exactly one grid item (the <ul>), so grid-template-rows:
   0fr→1fr actually collapses/expands — a bare <ul> with several <li>
   children as the 0fr element does NOT collapse, because each extra <li>
   becomes its own implicit auto-sized row beyond the single explicit track. */
.elemnt-mega-nav__children-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s var(--ease-premium);
}

.elemnt-mega-nav__children {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.25s var(--ease-premium);
}

.elemnt-mega-nav__item.is-expanded .elemnt-mega-nav__children-wrap {
	grid-template-rows: 1fr;
}

.elemnt-mega-nav__item.is-expanded .elemnt-mega-nav__children {
	opacity: 1;
	padding-bottom: var(--wp--preset--spacing--16);
	transition: opacity 0.3s var(--ease-premium) 0.1s;
}

.elemnt-mega-nav__children li {
	padding-block: var(--wp--preset--spacing--8);
}

.elemnt-mega-nav__children a {
	font-family: var(--wp--preset--font-family--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--meta);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-mega-nav__children a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-overlay-pages__list {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--16) 0 0;
	display: flex;
	flex-direction: column;
}

.elemnt-overlay-pages__list li {
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

.elemnt-overlay-pages__list a {
	display: block;
	padding-block: var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--h3);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-overlay-pages__list a:hover {
	color: var(--wp--preset--color--accent-interactive);
}
/* === §11 overlay promo === */
.elemnt-overlay-promo {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.elemnt-overlay-promo__media-wrap {
	overflow: hidden;
	border-radius: var(--radius-sm);
	margin-bottom: var(--wp--preset--spacing--24);
}

.elemnt-overlay-promo__media-wrap .elemnt-overlay-promo__media,
.elemnt-overlay-promo__media-wrap .elemnt-media {
	width: 100%;
	aspect-ratio: 1.91 / 1;
}

.elemnt-overlay-promo__media-wrap .elemnt-media__image,
.elemnt-overlay-promo__media-wrap .elemnt-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.75s var(--ease-premium);
}

.elemnt-overlay-promo:hover .elemnt-overlay-promo__media-wrap .elemnt-media__image,
.elemnt-overlay-promo:hover .elemnt-overlay-promo__media-wrap .elemnt-placeholder {
	transform: scale(1.05) rotate(1.5deg);
}

.elemnt-overlay-promo__media {
	width: 100%;
	aspect-ratio: 1.91 / 1;
}

.elemnt-overlay-promo__eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--accent-interactive);
	margin-bottom: var(--wp--preset--spacing--8);
}

.elemnt-overlay-promo__headline {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h2);
	letter-spacing: -0.01em;
	margin: 0;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-overlay-promo:hover .elemnt-overlay-promo__headline {
	color: var(--wp--preset--color--accent-interactive);
}

/* Overlay menu — minimalist newsletter beneath Editor's Pick */
.elemnt-overlay-newsletter {
	padding-top: var(--wp--preset--spacing--24);
	border-top: 1px solid var(--wp--preset--color--secondary);
}

.elemnt-overlay-newsletter__heading {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--16);
	color: var(--wp--preset--color--primary);
}

.elemnt-newsletter-form--overlay .elemnt-newsletter-form__row {
	flex-direction: column;
	align-items: stretch;
}

.elemnt-newsletter-form--overlay .elemnt-newsletter-form__input {
	flex: 0 0 auto;
	width: 100%;
	border: 2px solid #0a0a0a;
	box-shadow: 0 2px 0 rgba(10, 10, 10, 0.06);
}

:root[data-theme='dark'] .elemnt-newsletter-form--overlay .elemnt-newsletter-form__input {
	border-color: #fdfdfd;
	box-shadow: none;
	background: var(--wp--preset--color--secondary);
}

.elemnt-newsletter-form--overlay .elemnt-newsletter-form__submit {
	width: 100%;
	font-family: var(--wp--preset--font-family--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--eyebrow);
}

.elemnt-newsletter-form--overlay .elemnt-newsletter-form__status {
	text-align: left;
	font-size: var(--wp--preset--font-size--eyebrow);
}

:lang(ko) .elemnt-overlay-promo__headline {
	font-weight: 500;
}
/* === §11 responsive === */
@media (max-width: 781px) {
	.elemnt-header__nav,
	.elemnt-header__utility ul.elemnt-lang-switcher {
		display: none;
	}

	.elemnt-header__bar {
		padding-block: var(--wp--preset--spacing--24);
	}

	.elemnt-logo__word,
	.elemnt-logo__word a {
		font-size: var(--wp--preset--font-size--ui);
	}

	.elemnt-icon-btn {
		width: 40px;
		height: 40px;
	}

	.elemnt-header__utility {
		gap: var(--wp--preset--spacing--8);
	}

	.elemnt-overlay__chrome ul.elemnt-lang-switcher {
		display: flex;
	}

	.elemnt-overlay__panels {
		flex-direction: column;
	}

	.elemnt-overlay__nav-panel,
	.elemnt-overlay__promo-panel {
		flex-basis: auto;
		width: 100%;
	}

	.elemnt-overlay__promo-panel {
		position: static;
		margin-top: var(--wp--preset--spacing--32);
	}

	.elemnt-mega-nav__parent-link {
		font-size: var(--wp--preset--font-size--h3);
	}

	/* Stacked single column: the nav-panel no longer shares a stretched row
	   with the promo panel, so drop the height-matching/fill-to-bottom
	   rules that assumed that stretch — they were blowing out to 100vh
	   against an indefinite-height ancestor and leaving a huge empty gap
	   between the categories and the pages list. */
	.elemnt-overlay__nav-panel,
	.elemnt-mega-nav {
		min-height: 0;
		flex: 0 1 auto;
	}

	.elemnt-overlay-pages__list {
		margin-top: 0;
	}

	.elemnt-overlay__chrome {
		grid-template-columns: auto 1fr auto;
		column-gap: var(--wp--preset--spacing--8);
	}

	.elemnt-overlay__chrome > div:last-child {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: var(--wp--preset--spacing--8);
	}

	ul.elemnt-lang-switcher {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-overlay,
	.elemnt-search-suggestions,
	.elemnt-header__search-inline,
	.elemnt-mega-nav__children,
	.elemnt-mega-nav__children-wrap,
	.elemnt-mega-nav__caret,
	.elemnt-icon-btn,
	.elemnt-header__bar,
	.elemnt-header__center > .elemnt-header__nav,
	.elemnt-header__center > .elemnt-header__utility,
	.elemnt-overlay-promo__headline {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}
/* === footer — kingsmansuit.com-inspired inverted panel, branded for
   ELEMNT: a fixed near-black surface regardless of the site's light/dark
   toggle state (an editorial footer is a deliberate visual full-stop, not
   a themed surface), large brand statement, then a clean 3-column grid. === */
.elemnt-footer {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--32);
	background-color: #0a0a0a;
	color: #f4f4f5;
}

.elemnt-footer__intro {
	gap: var(--wp--preset--spacing--32);
	padding-bottom: var(--wp--preset--spacing--48);
	border-bottom: 1px solid rgba(244, 244, 245, 0.16);
	margin-bottom: var(--wp--preset--spacing--64);
}

.elemnt-footer__logo .elemnt-logo__word,
.elemnt-footer__logo .elemnt-logo__word a {
	color: #f4f4f5;
	font-size: 32px;
}

.elemnt-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	max-width: 36ch;
}

.elemnt-footer__about {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(244, 244, 245, 0.7);
}

.elemnt-footer__logo::before {
	width: 20px;
	height: 17px;
}

.elemnt-footer__tagline {
	margin: 0;
	max-width: 32ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
	color: #f4f4f5;
}

.elemnt-footer__grid {
	gap: var(--wp--preset--spacing--64) var(--wp--preset--spacing--48);
	padding-bottom: var(--wp--preset--spacing--64);
}

.elemnt-footer__column {
	min-width: 160px;
}

.elemnt-footer__column--newsletter {
	max-width: 380px;
	flex: 1 1 320px;
}

.elemnt-footer__column-title {
	margin: 0 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
	color: #f4f4f5;
}

/* === §11 footer — Follow Us social icons === */
.elemnt-footer-social__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-footer-social__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(244, 244, 245, 0.1);
	color: #f4f4f5;
	transition: background-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium);
}

.elemnt-footer-social__list svg {
	width: 18px;
	height: 18px;
}

.elemnt-footer-social__list a:hover {
	background-color: var(--wp--preset--color--accent-interactive);
	color: #0a0a0a;
}

.elemnt-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-footer__links a {
	font-size: 0.9375rem;
	color: #f4f4f5;
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-footer__links a:hover {
	color: #d4af37;
}

.elemnt-footer-newsletter__heading {
	font-size: var(--wp--preset--font-size--h3);
	color: #f4f4f5;
	margin: 0 0 var(--wp--preset--spacing--8);
}

.elemnt-footer-newsletter__copy {
	color: rgba(244, 244, 245, 0.6);
	margin: 0 0 var(--wp--preset--spacing--16);
}

.elemnt-footer-newsletter__button {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--eyebrow);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	border-radius: var(--radius-sm);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	text-decoration: none;
	transition: background-color 0.2s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-footer-newsletter__button:hover {
	background-color: #d4af37;
	color: #0a0a0a;
}

.elemnt-footer-newsletter__button:active {
	transform: scale(0.98);
}

.elemnt-footer__bottom {
	padding-top: var(--wp--preset--spacing--32);
	border-top: 1px solid rgba(244, 244, 245, 0.16);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(244, 244, 245, 0.5);
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
	text-align: center;
}

.elemnt-footer__copyright {
	margin: 0;
}

.elemnt-footer__legal-links {
	list-style: none;
	display: flex;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding: 0;
}

.elemnt-footer__legal-links a {
	color: rgba(244, 244, 245, 0.5);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-footer__legal-links a:hover {
	color: #f4f4f5;
}

@media (max-width: 600px) {
	.elemnt-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* === §A1 Korean typography === the 0.06–0.1em letter-spacing and uppercase
   transforms throughout the UI chrome (nav, mega-nav, search chips, footer)
   are tuned for Latin all-caps tracking; applied to Hangul they read as
   loose, uneven gaps between syllable blocks rather than a deliberate
   style. Reset both for any Korean-language text run, wherever it sits. */
:lang(ko) {
	letter-spacing: normal;
}

/* Anton (the display face) is an inherently heavy/blocky design, so EN
   headlines read as bold even at its only shipped weight, 400. Korean
   text never renders in Anton (no Hangul glyphs) — it silently falls
   back to Noto Sans KR, whose 400 looks genuinely thin next to Anton's
   400. Bump every display-font element to Noto Sans KR's 700 for
   Korean specifically so both languages read with the same visual
   weight, without reintroducing Anton's synthetic-bold bug (Anton is
   never selected for :lang(ko) text, so this can't double-stroke it). */
:lang(ko) h1,
:lang(ko) h2,
:lang(ko) h3,
:lang(ko) .wp-block-post-title,
:lang(ko) .elemnt-mega-nav__parent-link,
:lang(ko) .elemnt-overlay-promo__headline,
:lang(ko) .elemnt-hero-split__lead-title,
:lang(ko) .elemnt-hero-split__rail-title {
	font-weight: 700;
}

/* ==========================================================================
   Homepage Chat A (revised) — hero split (luxiders.com reference, §0/§3).
   Left = single latest post, full-bleed overlay card (parent · subcategory,
   headline, date over the image). Right = next 7 posts, stacked cards
   (image top, meta row, headline). Both columns are sticky within the
   section so the shorter left card doesn't scroll out of view while the
   taller right rail scrolls past it. Section container widened to 1595px
   with a fixed 24px gutter, per user revision request. GSAP-driven
   parallax drift on the right rail stays SCOPED TO THIS RAIL ONLY (§6
   approved exception). The image-hover zoom/tilt on both columns is a
   deliberate exception to §6's "never on Hero/Feature images" rule,
   approved for this section specifically.
   ========================================================================== */
.elemnt-hero-split {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(4rem, 8vw, 7.5rem);
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.elemnt-hero-split__grid.alignwide {
	max-width: 1595px;
}

.elemnt-hero-split__grid.is-layout-flex {
	column-gap: var(--wp--preset--spacing--48);
	row-gap: var(--wp--preset--spacing--64);
	/* WordPress injects a per-instance scoped <style> block (the
	   wp-container-core-columns-is-layout-* class) later in <head> than this
	   stylesheet, which otherwise wins the align-items tie on source order
	   and stretches both columns to match the tallest one — breaking the
	   sticky effect below (the sticky child would never be shorter than its
	   container). !important guarantees our flex-start wins regardless of
	   injection order. */
	align-items: flex-start !important;
}

/* --- sticky columns (feedback #4): pinned at the same offset so the short
   left card stays in view for the rail's full scroll length; a no-op on
   the rail itself since its own height defines the section's scroll room. */
.elemnt-hero-split__lead,
.elemnt-hero-split__rail {
	position: sticky;
	top: calc(var(--elemnt-header-h, 80px) + var(--wp--preset--spacing--32));
}

.elemnt-hero-split__lead-query,
.elemnt-hero-split__rail-list {
	width: 100%;
}

/* === left column: full-bleed overlay card === */
.elemnt-hero-split__lead-query {
	height: calc(100vh - var(--elemnt-header-h, 80px) - var(--wp--preset--spacing--64));
	min-height: 520px;
	max-height: 880px;
}

.elemnt-hero-split__lead-query .wp-block-post-template,
.elemnt-hero-split__lead-query .wp-block-post {
	height: 100%;
}

.elemnt-hero-split__lead-card {
	position: relative;
	height: 100%;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.elemnt-hero-split__lead-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
}

.elemnt-hero-split__lead-media .elemnt-media__image,
.elemnt-hero-split__lead-media.elemnt-placeholder {
	width: 100%;
	height: 100%;
}

/* Zoom is clipped by .elemnt-hero-split__lead-card's own overflow:hidden
   above (a separate ancestor element from the one being scaled), so it
   stays contained — no tilt/rotate per feedback, scale only. */
.elemnt-hero-split__lead-media .elemnt-media__image,
.elemnt-hero-split__lead-media.elemnt-placeholder {
	transition: transform .75s ease-in-out, -webkit-transform .75s ease-in-out;
}

.wp-block-post:hover .elemnt-hero-split__lead-media .elemnt-media__image,
.wp-block-post:hover .elemnt-hero-split__lead-media.elemnt-placeholder {
	transform: scale(1.15);
}

/* Fixed dark gradient + white text regardless of light/dark theme (feedback
   #2) — a photo overlay reads correctly in both without swapping tokens. */
.elemnt-hero-split__lead-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.85) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Whole-tile click target (feedback: "the whole tile should be
   clickable"). A direct child of .lead-card (position:relative), so
   inset:0 covers the full card, not just the bottom overlay. Sits below
   the eyebrow's real category links (z-index 3) so those stay
   independently clickable, and below the overlay's own z-index only
   where the overlay actually paints (its title/date area) since equal
   z-index ties resolve to DOM order — elsewhere (the image area) the
   veil is the only positioned layer and happily takes the click. */
.elemnt-hero-split__lead-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.elemnt-hero-split__lead-overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--wp--preset--spacing--32);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	/* Lets clicks on the date line / padding gaps fall through to the
	   whole-tile veil link below instead of dead-ending on this plain
	   (non-link) group — the two real links below opt back in. */
	pointer-events: none;
}

.elemnt-hero-split__lead-eyebrow a,
.elemnt-hero-split__lead-title a {
	pointer-events: auto;
}

.elemnt-hero-split__lead-eyebrow {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #f4f4f5;
}

.elemnt-hero-split__lead-eyebrow a {
	position: relative;
	z-index: 3;
	color: inherit;
	text-decoration: none;
}

.elemnt-hero-split__lead-eyebrow a:first-child {
	color: #d4af37;
}

.elemnt-hero-split__lead-eyebrow-sep {
	margin: 0 var(--wp--preset--spacing--8);
	color: rgba(244, 244, 245, 0.6);
}

.elemnt-hero-split__lead-title {
	margin: 0;
	color: #fdfdfd;
}

.elemnt-hero-split__lead-title a {
	color: inherit;
	text-decoration: none;
}

.elemnt-hero-split__lead-title a:hover {
	color: #d4af37;
}

.elemnt-hero-split__lead-date {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: rgba(244, 244, 245, 0.72);
}

/* === right column: 2-column card grid, image-top layout === */
.elemnt-hero-split__rail-list .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--wp--preset--spacing--24);
	row-gap: 0;
}

.elemnt-hero-split__rail-item {
	padding-block: var(--wp--preset--spacing--24);
	border-top: 1px solid var(--wp--preset--color--secondary);
}

/* First row (the first two cards) carries no top divider/padding. */
.elemnt-hero-split__rail-list .wp-block-post:nth-child(-n+2) .elemnt-hero-split__rail-item {
	border-top: none;
	padding-top: 0;
}

/* Frame is a separate, non-transformed ancestor that clips the zoom —
   scaling .elemnt-hero-split__rail-media (a placeholder box) directly
   would otherwise scale past its own overflow:hidden, since an element
   can't clip its own transform, only a child's. Real images clip twice
   over (frame + .elemnt-media's own overflow:hidden around the <img>). */
.elemnt-hero-split__rail-frame {
	margin-bottom: var(--wp--preset--spacing--16);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

/* The rail image is now individually clickable (wraps in an <a> to the
   post, see [elemnt_query_media linked="1"]) — display:contents keeps
   the anchor out of the box model entirely so it doesn't sit between
   .rail-media's flex container and the placeholder's icon+label,
   which broke their centering (and will do the same to the real <img>
   once photos exist). The anchor stays clickable; only its generated
   box is removed. */
.elemnt-media-link {
	display: contents;
}

.elemnt-hero-split__rail-media {
	width: 100%;
	height: 100%;
}

.elemnt-hero-split__rail-media .elemnt-media__image,
.elemnt-hero-split__rail-media.elemnt-placeholder {
	width: 100%;
	height: 100%;
	transition: transform .75s ease-in-out, -webkit-transform .75s ease-in-out;
}

.wp-block-post:hover .elemnt-hero-split__rail-media .elemnt-media__image,
.wp-block-post:hover .elemnt-hero-split__rail-media.elemnt-placeholder {
	transform: scale(1.15);
}

.elemnt-hero-split__rail-meta {
	margin-bottom: var(--wp--preset--spacing--8);
}

.elemnt-hero-split__rail-eyebrow {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-hero-split__rail-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.elemnt-hero-split__rail-date {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--meta);
}

.elemnt-hero-split__rail-title {
	margin: 0;
	line-height: 1.25;
	text-transform: uppercase;
}

.elemnt-hero-split__rail-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.elemnt-hero-split__rail-title a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

@media (max-width: 960px) {
	.elemnt-hero-split__lead,
	.elemnt-hero-split__rail {
		position: static;
	}

	.elemnt-hero-split__lead-query {
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.elemnt-hero-split__lead-card {
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 782px) {
	.elemnt-hero-split {
		padding-top: 2rem;
		padding-bottom: 4rem;
	}

	.elemnt-hero-split__lead,
	.elemnt-hero-split__rail {
		flex-basis: 100% !important;
	}

	.elemnt-hero-split__rail-list .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.elemnt-hero-split__rail-list .wp-block-post:nth-child(-n+2) .elemnt-hero-split__rail-item {
		border-top: 1px solid var(--wp--preset--color--secondary);
		padding-top: var(--wp--preset--spacing--24);
	}

	.elemnt-hero-split__rail-list .wp-block-post:first-child .elemnt-hero-split__rail-item {
		border-top: none;
		padding-top: 0;
	}
}

/* GSAP parallax (assets/js/hero-parallax.js) only transforms translateY on
   .wp-block-post items inside the rail — no CSS transition needed for that
   property (GSAP tweens it directly with scrub), but reduced-motion must
   still be able to neutralize any leftover inline transform if the script
   already ran before the preference changed mid-session. Also cancels the
   hover zoom/tilt on both columns' images under the same preference. */
@media (prefers-reduced-motion: reduce) {
	.elemnt-hero-split__rail-list .wp-block-post {
		transform: none !important;
	}

	.elemnt-hero-split__lead-media .elemnt-media__image,
	.elemnt-hero-split__lead-media.elemnt-placeholder,
	.elemnt-hero-split__rail-media .elemnt-media__image,
	.elemnt-hero-split__rail-media.elemnt-placeholder {
		transition: none !important;
	}

	.wp-block-post:hover .elemnt-hero-split__lead-media .elemnt-media__image,
	.wp-block-post:hover .elemnt-hero-split__lead-media.elemnt-placeholder,
	.wp-block-post:hover .elemnt-hero-split__rail-media .elemnt-media__image,
	.wp-block-post:hover .elemnt-hero-split__rail-media.elemnt-placeholder {
		transform: none !important;
	}
}

/* ==========================================================================
   Homepage Chat B — Editor's Picks carousel (ignant.com structure
   reference, content angle is curated/qualitative not recency — see
   FEEDBACK.md). A fixed-width clipping viewport + a `.elemnt-picks__track`
   paged by vanilla JS via `transform: translateX()` — no scroll library,
   no native overflow-scroll (the hero split's GSAP dependency stays
   scoped to that section only).
   ========================================================================== */
/* A distinct warm parchment tint (not the `secondary` gray used by the
   card placeholders themselves, which would otherwise blend invisibly
   into a same-toned section background) — reads as its own "section",
   not a continuation of the page's plain white. */
.elemnt-picks {
	background-color: #f5f2ec;
	padding-top: 120px;
	padding-bottom: 120px;
	--elemnt-picks-band-max: 1920px;
	--elemnt-picks-content-max: 1440px;
	/* Shared left edge for the head row + carousel — matches alignwide /
	   contentSize, never bleeds past it on the left (ignant ref). */
	--elemnt-picks-content-left: max(
		var(--wp--style--root--padding-left, clamp(1.5rem, 5vw, 3rem)),
		calc((100vw - min(100vw, var(--elemnt-picks-content-max))) / 2)
	);
	/* How far the clipping window may extend to the right from that edge:
	   full bleed on normal screens, hard-capped at 1920px on 4K+. */
	--elemnt-picks-viewport-width: min(
		var(--elemnt-picks-band-max),
		calc(100vw - var(--elemnt-picks-content-left))
	);
}

/* The parchment tint above is a fixed literal, not a --wp--preset color var,
   so it never flips with the rest of §4's dark-mode re-point — left alone,
   the heading/title/nav text (which DOES use `--contrast`, now near-white)
   ends up unreadable white-on-light-parchment. Give this section its own
   dark counterpart: a warm near-black distinct from the placeholder cards'
   `--secondary` (#1A1A1A) sitting on top of it. */
:root[data-theme='dark'] .elemnt-picks {
	background-color: #14110d;
}

.elemnt-picks-section__inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--elemnt-picks-viewport-width);
	max-width: var(--elemnt-picks-band-max);
	margin-left: var(--elemnt-picks-content-left);
	margin-right: auto;
	overflow: visible;
}

/* === picks: head === */
.elemnt-picks__head {
	margin-bottom: var(--wp--preset--spacing--48);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	width: 100%;
	max-width: min(var(--elemnt-picks-content-max), 100%);
	text-align: left;
	align-self: flex-start;
}

/* Eyebrow sits on the same row as the nav cluster (matches the reference:
   the single-line label is the nav's horizontal counterpart), heading
   runs full-width underneath. */
.elemnt-picks__head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--wp--preset--spacing--16);
}

.elemnt-picks__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-picks__heading {
	margin: 0;
	max-width: 24ch;
}

/* Visually hidden but screen-reader-readable label — used on the nav
   buttons below, whose visible content is a CSS-drawn chevron only. */
.elemnt-screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* === picks: head nav (Ignant-style progress-track → twin-arrow reveal) === */
/* Initial state: a light progress track + a single bold "next" arrow-line
   (there's nothing to go back to yet). The moment the user advances once,
   `.has-scrolled` (added by JS, one-way) swaps the track out for a
   matching "prev" arrow-line, so the pair reads as ←——  ——→ exactly like
   the ignant.com reference once its carousel has been interacted with. */
.elemnt-picks__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	flex-shrink: 0;
}

.elemnt-picks__nav-buttons-wrap {
	display: flex;
}

.elemnt-picks__progress-track {
	position: relative;
	width: clamp(80px, 8vw, 140px);
	height: 1px;
	background-color: var(--wp--preset--color--secondary);
	transition: width 0.25s var(--ease-premium), opacity 0.25s var(--ease-premium);
}

.elemnt-picks__nav.has-scrolled .elemnt-picks__progress-track {
	width: 0;
	opacity: 0;
	pointer-events: none;
}

.elemnt-picks__progress-fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0%;
	background-color: var(--wp--preset--color--contrast);
	transition: width 0.2s var(--ease-premium);
}

.elemnt-picks__nav-btn {
	margin: 0;
}

/* No circle/border chrome — a bold line-and-chevron "arrow", full-strength
   contrast color so it actually reads against a white section (the old
   pale bordered circle was nearly invisible). */
.elemnt-picks__nav-btn .wp-element-button {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	width: auto;
	height: 28px;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	transition: opacity 0.2s var(--ease-premium), gap 0.2s var(--ease-premium);
}

.elemnt-picks__nav-btn .wp-element-button::before {
	content: "";
	width: 40px;
	height: 2px;
	background-color: currentColor;
	order: 1;
}

.elemnt-picks__nav-btn .wp-element-button::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	order: 2;
}

.elemnt-picks__nav-btn--next .wp-element-button::after {
	transform: rotate(45deg) translate(-3px, 3px);
}

/* Prev's tail/chevron swap order so the chevron points left, tail trails
   to its right — mirrored, not just rotated whole. */
.elemnt-picks__nav-btn--prev .wp-element-button::before {
	order: 2;
}

.elemnt-picks__nav-btn--prev .wp-element-button::after {
	order: 1;
	transform: rotate(-135deg) translate(-3px, 3px);
}

/* Hidden (not just dimmed) until the user has scrolled once — there's
   nothing to go back to on first load, matching the ignant reference. */
.elemnt-picks__nav-btn--prev {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--ease-premium);
}

.elemnt-picks__nav.has-scrolled .elemnt-picks__nav-btn--prev {
	opacity: 1;
	pointer-events: auto;
}

.elemnt-picks__nav-btn .wp-element-button:hover {
	opacity: 0.6;
}

.elemnt-picks__nav-btn .wp-element-button.is-disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* === picks: viewport (fixed clipping window) + track (the translated element) === */
/* Ignant-style right-only bleed: left edge is locked to the same inset as
   the head row (`--elemnt-picks-content-left` on the section); width runs
   from there to the viewport edge, capped at 1920px on ultra-wide screens.
   Right-edge mask fades the partial peek card; left stays fully opaque at
   index 0. `.elemnt-picks__track` is what JS translates. */
.elemnt-picks__viewport {
	overflow: hidden;
	align-self: stretch;
	width: 100%;
	margin-inline: 0;
	padding-bottom: var(--wp--preset--spacing--16);
	mask-image: linear-gradient(
		to right,
		black 0,
		black calc(100% - 260px),
		rgba(0, 0, 0, 0.65) calc(100% - 120px),
		rgba(0, 0, 0, 0.25) 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		black 0,
		black calc(100% - 260px),
		rgba(0, 0, 0, 0.65) calc(100% - 120px),
		rgba(0, 0, 0, 0.25) 100%
	);
}

/* The element JS actually translates. Width is intentionally the sum of
   its own content (never constrained to the viewport), so it can extend
   past the visible window on the right — that's what the clipping window
   above reveals/hides as it's paged through. */
.elemnt-picks__track {
	display: flex;
	gap: var(--wp--preset--spacing--24);
	width: max-content;
	will-change: transform;
	transition: transform 0.5s var(--ease-premium);
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-picks__track {
		transition: none;
	}
}

/* The flattened <ul> keeps its core "is-layout-flow" block-gap CSS
   (`* + * { margin-block-start: 24px }`) even though display:contents
   removes its own box — that rule still matches and was pushing every
   .wp-block-post except the first down by 24px, making card 1 look
   "elevated" relative to the rest. Neutralize it; .elemnt-picks__track's
   own `gap` (flex) is what actually spaces the cards. */
.elemnt-picks__track .wp-block-post-template > .wp-block-post {
	display: block !important;
	margin-top: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
	padding-left: 0 !important;
	margin-left: 0;
}

/* Query Loop renders a `<ul>` of `<li>` posts; `display: contents` (below)
   lifts the `<li>`s into the flex track but they stay `display: list-item`
   unless overridden — that paints disc `::marker` dots in the gap. */
.elemnt-picks__track .wp-block-post-template {
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.elemnt-picks__track .wp-block-post-template > .wp-block-post::marker {
	display: none;
	content: none;
	font-size: 0;
}

/* Full-bleed (alignfull) sections control their own vertical rhythm via
   their own padding-block, not `<main>`'s flow block-gap — but core still
   applies `margin-block-start: 24px` to every section after the first,
   which showed up as a stray white sliver of the page's own background
   between two full-bleed sections with different background colors
   (e.g. the parchment Editor's Picks section and the near-black CTA
   break right after it). Zero it for every full-bleed section so
   adjacent sections sit flush against each other. */
main.wp-block-group > .alignfull {
	margin-top: 0;
}

/* Flattens the query wrapper markup so its rendered .wp-block-post items
   sit as direct flex children of the track alongside the hand-written
   video placeholder card, without changing the Query Loop's own DOM. */
.elemnt-picks__track > .wp-block-query,
.elemnt-picks__track > .wp-block-query > .wp-block-post-template {
	display: contents;
}

/* Fixed, identical flex-basis for every card (real picks and the static
   video-preview card alike) plus `min-width: 0` — without it, a flex item's
   default `min-width: auto` lets its content (a long, non-wrapping
   headline) force the card wider than its own basis, throwing sizing off
   between cards. */
.elemnt-picks__track .wp-block-post {
	display: block !important;
	flex: 0 0 clamp(260px, 28vw, 340px);
	min-width: 0;
	box-sizing: border-box;
	list-style: none !important;
	list-style-type: none !important;
}

.elemnt-picks__track > .elemnt-picks__card {
	flex: 0 0 clamp(260px, 28vw, 340px);
	min-width: 0;
	box-sizing: border-box;
}

/* === picks: card === */
.elemnt-picks__card {
	display: flex;
	flex-direction: column;
}

.elemnt-picks__frame {
	margin-bottom: var(--wp--preset--spacing--16);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.elemnt-picks__media {
	width: 100%;
	height: 100%;
}

/* §6 "Selective Image Hover" — standard article-loop cards get the full
   scale+rotate editorial tilt (unlike the hero split, which is explicitly
   exempted from it). */
.elemnt-picks__media .elemnt-media__image,
.elemnt-picks__media.elemnt-placeholder {
	width: 100%;
	height: 100%;
	transition: transform 0.5s var(--ease-premium);
}

.elemnt-picks__viewport .wp-block-post:hover .elemnt-picks__media .elemnt-media__image,
.elemnt-picks__viewport .wp-block-post:hover .elemnt-picks__media.elemnt-placeholder {
	transform: scale(1.05) rotate(1.5deg);
}

.elemnt-picks__meta {
	margin-bottom: var(--wp--preset--spacing--8);
}

.elemnt-picks__eyebrow-tag {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-picks__date {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--meta);
}

.elemnt-picks__title {
	margin: 0;
	line-height: 1.25;
}

.elemnt-picks__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-picks__title a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

/* === picks: video placeholder card === */
/* Not a real video, never linked — §13 standing rule against faking
   unbuilt features. cursor:default + reduced opacity read as an inert
   "reserved slot" card, distinct from the clickable pick cards next to it. */
.elemnt-picks__card--video {
	opacity: 0.85;
	cursor: default;
}

.elemnt-picks__card--video .elemnt-picks__frame {
	border: 1px dashed var(--wp--preset--color--secondary);
}

.elemnt-picks__card--video .elemnt-picks__media .elemnt-media__image,
.elemnt-picks__card--video .elemnt-picks__media.elemnt-placeholder {
	transform: none !important;
}

.elemnt-picks__eyebrow-tag--badge {
	margin: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border-radius: var(--radius-sm);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--meta);
}

/* === CTA break === */
/* Full-bleed "palette cleanser" pause (§0 ignant.com large-type CTA
   reference) — a real `core/cover` block now supplies the fixed
   background: `hasParallax` (its `.has-parallax` class) is core's own
   `background-attachment: fixed` implementation, complete with a built-in
   `@media (hover: none)` fallback to `background-attachment: scroll` on
   touch devices (iOS Safari never supported the fixed attachment, so
   core degrades gracefully there instead of breaking layout) — no custom
   `position: fixed` hack needed. `dimRatio`/`overlayColor` supply the dark
   overlay for headline legibility. This class only adds padding-block
   and the light-on-dark text color; the background/overlay/parallax
   mechanics all come from core's own cover block CSS. Scroll-reveal must
   NOT target `.elemnt-cta` — transform on the cover breaks fixed parallax;
   only `.elemnt-cta__content` gets the reveal (see scroll-reveal.js). */
.elemnt-cta {
	padding-block: 120px;
	color: #fdfdfd;
}

/* This cover's 60%-dim scrim was set to the `contrast` color slug because
   in light mode that resolves to near-black — a proper darkening overlay
   behind the always-white heading/eyebrow above. But `contrast` is a TEXT
   color slot that §4 deliberately re-points to near-white in dark mode, so
   the same scrim flips into a 60%-white wash over an already-light photo,
   killing all contrast. The scrim's job here is "always darken the photo",
   not "follow the text-color preset" — pin it to near-black regardless of
   theme mode. Matches core's own generated `.has-contrast-background-color`
   specificity + !important, so it needs to win on both counts. */
:root[data-theme='dark'] .elemnt-cta .wp-block-cover__background.has-contrast-background-color {
	background-color: #0a0a0a !important;
}

.elemnt-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--32);
}

.elemnt-cta__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #d4af37;
}

.elemnt-cta__heading {
	margin: 0;
	max-width: 18ch;
	color: #fdfdfd;
}

.elemnt-cta__button {
	font-family: var(--wp--preset--font-family--micro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--ui);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--40);
	text-decoration: none;
	transition: background-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-cta__button:hover {
	background-color: #d4af37;
	color: #0a0a0a;
}

.elemnt-cta__button:active {
	transform: scale(0.98);
}

/* === picks/CTA responsive + reduced motion === */
@media (max-width: 782px) {
	.elemnt-picks {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.elemnt-picks-section__inner {
		width: var(--elemnt-picks-viewport-width);
		margin-left: var(--elemnt-picks-content-left);
		margin-right: auto;
	}

	.elemnt-cta {
		padding-block: 64px;
	}

	.elemnt-picks__track .wp-block-post,
	.elemnt-picks__track > .elemnt-picks__card {
		flex-basis: min(78vw, 300px);
	}

	/* The desktop fade zone (~260px on each side) is tuned against a ~300px
	   desktop card and reads as a graduated "muted" edge; on a narrow phone
	   viewport that same fixed px width eats almost the entire visible card,
	   reading as a near-blank page instead. Scale the fade down to suit. */
	.elemnt-picks__viewport {
		mask-image: linear-gradient(
			to right,
			black 0,
			black calc(100% - 56px),
			rgba(0, 0, 0, 0.65) calc(100% - 24px),
			rgba(0, 0, 0, 0.25) 100%
		);
		-webkit-mask-image: linear-gradient(
			to right,
			black 0,
			black calc(100% - 56px),
			rgba(0, 0, 0, 0.65) calc(100% - 24px),
			rgba(0, 0, 0, 0.25) 100%
		);
	}

	.elemnt-picks__head {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--16);
	}

	.elemnt-picks__progress-track {
		width: 15vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-picks__media .elemnt-media__image,
	.elemnt-picks__media.elemnt-placeholder,
	.elemnt-cta__button {
		transition: none !important;
	}

	/* The fixed-background parallax is itself a motion effect — core's own
	   `.has-parallax` fallback only covers touch devices via `(hover: none)`,
	   so mirror that degrade for anyone who has asked for reduced motion. */
	.elemnt-cta.has-parallax {
		background-attachment: scroll;
	}

	.elemnt-picks__viewport .wp-block-post:hover .elemnt-picks__media .elemnt-media__image,
	.elemnt-picks__viewport .wp-block-post:hover .elemnt-picks__media.elemnt-placeholder {
		transform: none !important;
	}
}

/* ==========================================================================
   Homepage Chat C — horizontal accordion category rail (§12, 5-parent
   taxonomy). One persistent vertical-text label "tab" per panel is always
   visible (the click target); `.elemnt-cat-rail__body` occupies width only
   once its panel carries `.is-expanded`, via a plain `flex-grow` transition
   on that inner element — no JS-driven animation, no new library (spec:
   "vanilla CSS transition ... class toggle via plain JS"). Culture ships
   `.is-expanded` server-side (functions.php) so the no-JS/editor state is
   already correct. Full-bleed row, echoing the Codrops-style expanding-
   panels reference (§0) rather than the page's own 1440px content cap.
   ========================================================================== */
/* === cat-rail: section head === */
.elemnt-cat-rail-section {
	display: flex;
	flex-direction: column;
	padding-block: 120px;
	background-color: var(--wp--preset--color--base);
}

.elemnt-cat-rail-section__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

.elemnt-cat-rail__head {
	margin-bottom: var(--wp--preset--spacing--48);
	width: 100%;
	text-align: left;
	align-self: flex-start;
}

.elemnt-cat-rail__row-wrap {
	width: 100%;
	margin-inline: auto;
}

.elemnt-cat-rail__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-cat-rail__heading-main {
	margin: 0;
}
/* === cat-rail: row + panel shell === */
.elemnt-cat-rail {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 26rem;
	border-top: 1px solid var(--wp--preset--color--secondary);
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

/* Explicit flex-basis (not "auto") is load-bearing here: with "auto", a
   flex item's hypothetical size falls back to its CONTENT's intrinsic
   width when the size isn't yet definite — which pulled in
   .elemnt-cat-rail__inner's 34rem min-width even while .body was
   correctly collapsed to 0, forcing every "collapsed" panel to render at
   full expanded width anyway. A definite 5.5rem basis removes that
   ambiguity outright; overflow:hidden also clips .inner's min-width
   leak while collapsed. */
.elemnt-cat-rail__panel {
	display: flex;
	flex: 0 1 5.5rem;
	overflow: hidden;
	transition: flex-grow 0.6s var(--ease-premium);
	border-right: 1px solid var(--wp--preset--color--secondary);
}

.elemnt-cat-rail__panel.is-expanded {
	flex: 1 1 5.5rem;
}

.elemnt-cat-rail__panel:last-child {
	border-right: none;
}
/* === cat-rail: toggle + vertical label === */
.elemnt-cat-rail__toggle {
	all: unset;
	box-sizing: border-box;
	flex: 0 0 5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--32);
	cursor: pointer;
	background-color: var(--wp--preset--color--secondary);
	transition: background-color 0.3s var(--ease-premium);
}

.elemnt-cat-rail__toggle:hover,
.elemnt-cat-rail__toggle:focus-visible,
.elemnt-cat-rail__panel.is-expanded .elemnt-cat-rail__toggle {
	background-color: var(--wp--preset--color--accent);
}

.elemnt-cat-rail__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -4px;
}

.elemnt-cat-rail__label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	transition: color 0.3s var(--ease-premium);
}

:lang(ko) .elemnt-cat-rail__label {
	font-weight: 700;
}

.elemnt-cat-rail__toggle:hover .elemnt-cat-rail__label,
.elemnt-cat-rail__toggle:focus-visible .elemnt-cat-rail__label,
.elemnt-cat-rail__panel.is-expanded .elemnt-cat-rail__label {
	color: var(--wp--preset--color--accent-foreground);
}
/* === cat-rail: body + inner content === */
/* Collapsed: flex-basis 0%, flex-grow 0 — the panel's only visible width
   is its toggle strip. Expanded: flex-grow 1 is the sole grower in the row,
   so flexbox hands it all the remaining space once the other 4 panels'
   fixed-width strips are subtracted — no manual ratio math needed. Width
   and content-visibility transition on separate timers (opacity fades in
   only after the width transition is mostly settled) so text doesn't
   reflow/wrap visibly mid-expand. */
.elemnt-cat-rail__body {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 0%;
	min-width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: flex-grow 0.6s var(--ease-premium), opacity 0.3s var(--ease-premium), visibility 0s linear 0.6s;
}

.elemnt-cat-rail__panel.is-expanded .elemnt-cat-rail__body {
	flex-grow: 1;
	opacity: 1;
	visibility: visible;
	transition: flex-grow 0.6s var(--ease-premium), opacity 0.4s var(--ease-premium) 0.25s, visibility 0s linear;
}

.elemnt-cat-rail__inner {
	width: 100%;
	min-width: 34rem;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
}

.elemnt-cat-rail__heading {
	margin: 0 0 var(--wp--preset--spacing--24);
	font-size: var(--wp--preset--font-size--h3);
}
/* === cat-rail: post rail + view-all link === */
.elemnt-cat-rail__posts {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	margin: 0 0 var(--wp--preset--spacing--24);
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.elemnt-cat-rail__post-link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	text-decoration: none;
	color: inherit;
}

/* Small fixed thumb — triangle + brand scaled for the 56px square. */
.elemnt-cat-rail__post-media,
.elemnt-cat-rail__post-media.elemnt-placeholder {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	aspect-ratio: 1 / 1;
	gap: var(--wp--preset--spacing--4);
}

.elemnt-cat-rail__post-media .elemnt-placeholder__triangle {
	width: 16px;
	height: 14px;
}

.elemnt-cat-rail__post-media .elemnt-placeholder__brand {
	font-size: 0.5rem;
	letter-spacing: 0.02em;
}

.elemnt-cat-rail__post-media .elemnt-media__image,
.elemnt-cat-rail__post-media.elemnt-placeholder {
	width: 100%;
	height: 100%;
}

.elemnt-cat-rail__post-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	transition: color 0.3s var(--ease-premium);
}

.elemnt-cat-rail__post-link:hover .elemnt-cat-rail__post-title {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-cat-rail__viewall {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: opacity 0.3s var(--ease-premium);
}

:lang(ko) .elemnt-cat-rail__viewall {
	letter-spacing: normal;
}

.elemnt-cat-rail__viewall:hover {
	opacity: 0.6;
}
/* === cat-rail: responsive + reduced motion === */
@media (max-width: 782px) {
	.elemnt-cat-rail-section {
		padding-block: 64px;
	}

	/* Undo the desktop 1440px cap — the stacked accordion is meant to stay
	   full-bleed edge-to-edge on phones. */
	.elemnt-cat-rail-section__inner {
		max-width: none;
	}

	/* Five narrow vertical-text strips don't read well on a phone-width
	   viewport — switch to a conventional vertical accordion: full-width
	   panels stacked, horizontal (not rotated) label row, body height
	   (not width) is what expands/collapses. */
	.elemnt-cat-rail {
		flex-direction: column;
		min-height: 0;
		border-top: none;
	}

	.elemnt-cat-rail__panel {
		/* Desktop's fixed 5.5rem flex-basis sizes the panel's WIDTH — once
		   flex-direction flips to column for the stacked mobile layout, that
		   same basis would size its HEIGHT instead (forcing a fixed-height
		   collapsed row here). Reset to auto-height; the toggle row's own
		   padding gives it height, and .body's max-height governs expansion. */
		flex: 0 0 auto;
		flex-direction: column;
		overflow: visible;
		border-right: none;
		border-top: 1px solid var(--wp--preset--color--secondary);
	}

	.elemnt-cat-rail__panel.is-expanded {
		flex: 0 0 auto;
	}

	.elemnt-cat-rail__panel:last-child {
		border-bottom: 1px solid var(--wp--preset--color--secondary);
	}

	.elemnt-cat-rail__toggle {
		flex: 0 0 auto;
		width: 100%;
		justify-content: flex-start;
		padding: var(--wp--preset--spacing--24);
	}

	.elemnt-cat-rail__label {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: var(--wp--preset--font-size--h3);
	}

	.elemnt-cat-rail__body {
		flex-grow: 0;
		flex-basis: auto;
		max-height: 0;
		transition: max-height 0.5s var(--ease-premium), opacity 0.3s var(--ease-premium), visibility 0s linear 0.5s;
	}

	.elemnt-cat-rail__panel.is-expanded .elemnt-cat-rail__body {
		flex-grow: 0;
		max-height: 60rem;
		transition: max-height 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium) 0.2s, visibility 0s linear;
	}

	.elemnt-cat-rail__inner {
		min-width: 0;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
	}

	/* Tab toggle already shows the category name — hide the duplicate
	   inner h3 on stacked mobile accordion. */
	.elemnt-cat-rail__heading {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-cat-rail__panel,
	.elemnt-cat-rail__body,
	.elemnt-cat-rail__toggle,
	.elemnt-cat-rail__label,
	.elemnt-cat-rail__post-title,
	.elemnt-cat-rail__viewall {
		transition: none !important;
	}
}

/* ==========================================================================
   Single post template — SEO-first standard layout (720px reading well,
   ~1000px hero image, breadcrumbs, meta row, share, newsletter, read next).
   ========================================================================== */

.elemnt-single {
	padding-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-end: 0;
}

.elemnt-single__breadcrumbs-wrap {
	margin-block-end: var(--wp--preset--spacing--32);
}

.elemnt-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.elemnt-breadcrumbs__item:not(:last-child)::after {
	content: '›';
	margin-inline-start: 0.35rem;
	color: var(--wp--preset--color--meta);
}

.elemnt-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-breadcrumbs__link:hover {
	color: var(--wp--preset--color--contrast);
}

.elemnt-breadcrumbs__current {
	color: var(--wp--preset--color--contrast);
}

/* Hero — eyebrow, H1, meta, wide featured image */
.elemnt-post-hero {
	margin-block-end: var(--wp--preset--spacing--48);
}

.elemnt-post-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elemnt-post-eyebrow a {
	color: var(--wp--preset--color--accent-interactive);
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-post-eyebrow a:hover {
	color: var(--wp--preset--color--contrast);
}

.elemnt-post-hero__title {
	margin-block: 0 var(--wp--preset--spacing--24);
}

.elemnt-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-block-end: var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--meta);
}

.elemnt-post-meta__sep {
	opacity: 0.65;
}

.elemnt-post-meta__author a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-post-meta__author a:hover {
	color: var(--wp--preset--color--contrast);
}

.elemnt-post-hero__media,
.elemnt-post-hero .elemnt-media {
	width: 100%;
	aspect-ratio: 1.91 / 1;
	border-radius: var(--radius-md);
}

.elemnt-post-hero__media .elemnt-media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elemnt-logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

.elemnt-logo-fallback__mark {
	width: 40px;
	height: 34px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent-interactive);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.elemnt-logo-fallback__word {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

/* Reading well — 680–720px centered column */
.elemnt-reading-well {
	margin-block: var(--wp--preset--spacing--48);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--read);
	line-height: 1.7;
}

.elemnt-reading-well > * + * {
	margin-block-start: 1.25em;
}

.elemnt-reading-well h2,
.elemnt-reading-well h3 {
	margin-block: 2.5rem 1rem;
}

.elemnt-reading-well h2:first-child,
.elemnt-reading-well h3:first-child {
	margin-block-start: 0;
}

.elemnt-reading-well img {
	border-radius: var(--radius-sm);
}

.elemnt-reading-well iframe,
.elemnt-reading-well .wp-block-html iframe,
.elemnt-reading-well .wp-block-embed iframe {
	display: block;
	margin: 32px auto;
	max-width: none;
}

.elemnt-reading-well iframe[width="700"][height="1080"] {
	width: 700px;
	height: 1080px;
}

@media (max-width: 760px) {
	.elemnt-reading-well iframe,
	.elemnt-reading-well .wp-block-html iframe,
	.elemnt-reading-well .wp-block-embed iframe {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
		aspect-ratio: 700 / 1080;
	}
}

/* Pull quote pattern — ~800px breakout, Champagne Gold left border */
.elemnt-pull-quote,
.wp-block-pullquote.elemnt-pull-quote {
	max-width: min(800px, calc(100vw - 2 * var(--wp--style--root--padding-left, 1.5rem)));
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--48);
	padding: 0;
	border: none;
	border-left: 2px solid var(--wp--preset--color--accent);
}

.elemnt-pull-quote blockquote,
.wp-block-pullquote.elemnt-pull-quote blockquote {
	margin: 0;
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
	line-height: 1.35;
	text-wrap: balance;
}

.elemnt-pull-quote cite,
.wp-block-pullquote.elemnt-pull-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

/* Byline cluster — Written by (left) + Tags/Share (right), 8pt grid */
.elemnt-post-byline {
	margin-block: var(--wp--preset--spacing--48);
	padding-block: var(--wp--preset--spacing--32);
	border-block: 1px solid #C4C4CC;
}

.elemnt-post-byline__grid {
	gap: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
	margin: 0;
}

.elemnt-post-byline__grid.wp-block-columns {
	margin-bottom: 0;
}

.elemnt-post-byline__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--24);
	text-align: right;
}

.elemnt-post-tags__label {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.elemnt-post-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.elemnt-post-tags--empty {
	display: block;
	color: var(--wp--preset--color--meta);
}

.elemnt-post-tags a {
	color: var(--wp--preset--color--accent-interactive);
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-post-tags a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Share bar */
.elemnt-post-share-wrap {
	margin: 0;
}

.elemnt-post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}

.elemnt-post-share__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.elemnt-post-share__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elemnt-post-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid #C4C4CC;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium), background 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-post-share__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-post-share__link:active {
	transform: scale(0.98);
}

.elemnt-post-share__copy-feedback {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: calc(100% + 0.35rem);
	transform: translateX(-50%);
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-sm);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--micro);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.elemnt-post-share__copy {
	position: relative;
}

/* Newsletter inline box */
.elemnt-post-newsletter-wrap {
	margin-block: var(--wp--preset--spacing--48);
}

.elemnt-post-newsletter {
	padding: var(--wp--preset--spacing--32);
	border: 1px solid #C4C4CC;
	border-radius: var(--radius-md);
}

.elemnt-post-newsletter__heading {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
}

.elemnt-post-newsletter__copy {
	margin: 0 0 var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--meta);
}

.elemnt-post-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-post-newsletter__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 2px solid #0A0A0A;
	border-radius: var(--radius-sm);
	background: #FFFFFF;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	box-shadow: 0 2px 0 rgba(10, 10, 10, 0.06);
	transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
}

.elemnt-post-newsletter__input:focus {
	outline: none;
	border: 2px solid var(--wp--preset--color--contrast);
}

.elemnt-post-newsletter__submit {
	flex: 0 0 auto;
	cursor: pointer;
	transition: background 0.25s var(--ease-premium), color 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-post-newsletter__submit:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

.elemnt-post-newsletter__submit:active {
	transform: scale(0.98);
}

/* Author bio */
.elemnt-post-author-wrap {
	margin: 0;
}

.elemnt-author-bio {
	padding: 0;
	border: 0;
}

.elemnt-author-bio__label {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.elemnt-author-bio__inner {
	display: flex;
	gap: var(--wp--preset--spacing--16);
	align-items: center;
}

.elemnt-author-bio__avatar {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-sm);
}

.elemnt-author-bio__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 400;
}

.elemnt-author-bio__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-author-bio__name a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-author-bio__desc {
	margin: var(--wp--preset--spacing--8) 0 0;
	color: var(--wp--preset--color--meta);
	line-height: 1.6;
}

/* Read next — full-bleed section, 1440px inner grid */
.elemnt-read-next {
	margin-block: var(--wp--preset--spacing--80) 0;
	padding-block: clamp(4rem, 8vw, 7.5rem);
	background: #EDE8DF;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

.elemnt-single > .wp-block-template-part:last-child {
	margin-bottom: 0;
}

.elemnt-read-next.alignfull,
.elemnt-read-next__inner.alignfull {
	max-width: none;
	width: 100%;
}

.elemnt-read-next__inner {
	align-self: center;
	padding: 0;
	width: 100%;
}

.elemnt-read-next__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-read-next__grid {
	gap: var(--wp--preset--spacing--24);
}

.elemnt-read-next__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--base);
	border: 1px solid #D6D0C6;
	border-radius: var(--radius-md);
}

.elemnt-read-next__media-frame {
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.elemnt-read-next__media,
.elemnt-read-next__media.elemnt-media {
	aspect-ratio: 3 / 2;
}

.elemnt-read-next__media .elemnt-media__image,
.elemnt-read-next__media.elemnt-placeholder {
	transition: transform 0.75s var(--ease-premium);
}

.elemnt-read-next__card:hover .elemnt-read-next__media .elemnt-media__image,
.elemnt-read-next__card:hover .elemnt-read-next__media.elemnt-placeholder {
	transform: scale(1.05);
}

.elemnt-read-next__title {
	margin: 0;
}

.elemnt-read-next__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--ease-premium);
}

.elemnt-read-next__title a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

:root[data-theme='dark'] .elemnt-post-byline,
:root[data-theme='dark'] .elemnt-post-share__link,
:root[data-theme='dark'] .elemnt-post-newsletter {
	border-color: #3A3A40;
}

:root[data-theme='dark'] .elemnt-post-newsletter__input {
	border-color: #FDFDFD;
	background: #0A0A0A;
	box-shadow: none;
	color: #FDFDFD;
}

:root[data-theme='dark'] .elemnt-read-next {
	background: #141414;
}

:root[data-theme='dark'] .elemnt-read-next__card {
	background: #1A1A1A;
	border-color: #2E2E32;
}

:lang(ko) .elemnt-post-hero__title,
:lang(ko) .elemnt-post-newsletter__heading,
:lang(ko) .elemnt-author-bio__name,
:lang(ko) .elemnt-read-next__title,
:lang(ko) .elemnt-pull-quote blockquote {
	font-weight: 700;
}

:lang(ko) .elemnt-logo-fallback__word {
	font-weight: 500;
}

:lang(ko) .elemnt-breadcrumbs__list,
:lang(ko) .elemnt-post-eyebrow,
:lang(ko) .elemnt-post-meta,
:lang(ko) .elemnt-post-tags__label,
:lang(ko) .elemnt-post-share__label,
:lang(ko) .elemnt-author-bio__label,
:lang(ko) .elemnt-read-next__eyebrow {
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 782px) {
	.elemnt-read-next__grid {
		grid-template-columns: 1fr !important;
	}

	.elemnt-post-byline__grid {
		flex-direction: column;
	}

	.elemnt-post-newsletter__form {
		flex-direction: column;
	}

	.elemnt-post-newsletter__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-read-next__media .elemnt-media__image,
	.elemnt-read-next__media.elemnt-placeholder,
	.elemnt-post-share__link,
	.elemnt-post-newsletter__submit {
		transition: none !important;
	}

	.elemnt-read-next__card:hover .elemnt-read-next__media .elemnt-media__image,
	.elemnt-read-next__card:hover .elemnt-read-next__media.elemnt-placeholder {
		transform: none;
	}
}

/* === Phase 5 — Archive listings (category · tag · search) === */

.elemnt-archive-header {
	padding-block: var(--wp--preset--spacing--48) 0;
}

.elemnt-archive-header--tag {
	padding-block: var(--wp--preset--spacing--48) 0;
}

/* Author archive — E-E-A-T profile header */
.elemnt-author-header {
	padding-block: var(--wp--preset--spacing--48) 0;
}

.elemnt-author-header__profile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
	max-width: 42rem;
}

.elemnt-author-header__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-author-header__avatar {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-sm, 2px);
	object-fit: cover;
}

.elemnt-author-header__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.elemnt-author-header__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--meta);
}

.elemnt-author-header__bio {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--read);
	line-height: 1.7;
	color: var(--wp--preset--color--meta);
	text-wrap: pretty;
}

.elemnt-author-header__bio p {
	margin: 0;
}

.elemnt-author-header__bio[hidden] {
	display: none;
}

:lang(ko) .elemnt-author-header__title {
	font-weight: 500;
}

.elemnt-archive-header__description {
	max-width: 42rem;
	margin-block: var(--wp--preset--spacing--16) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--read);
	line-height: 1.7;
	color: var(--wp--preset--color--meta);
	text-wrap: pretty;
}

.elemnt-archive-header__description p {
	margin: 0;
}

.elemnt-archive-header__description[hidden] {
	display: none;
}

.elemnt-archive-header__inner,
.elemnt-archive-layout,
.elemnt-search-header__inner {
	padding-inline: var(--wp--style--root--padding-left, 1rem);
}

.elemnt-archive-header__row {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--24);
}

.elemnt-archive-header__title,
.elemnt-search-header__query {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	text-wrap: balance;
}

.elemnt-archive-header__eyebrow,
.elemnt-search-header__eyebrow,
.elemnt-archive-card__eyebrow,
.elemnt-archive-anchor__eyebrow,
.elemnt-archive-anchor__pick-eyebrow {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
	margin: 0 0 var(--wp--preset--spacing--8);
}

.elemnt-archive-anchor__pick-eyebrow {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	margin-bottom: var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	border-radius: var(--radius-sm, 2px);
}

.elemnt-archive-card__eyebrow a,
.elemnt-archive-anchor__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.elemnt-archive-card__eyebrow a:hover,
.elemnt-archive-anchor__eyebrow a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Grid / List view toggle (swipe mode on hold). */
.elemnt-archive-view-toggle {
	display: inline-flex;
	border: 1px solid rgba(10, 10, 10, 0.12);
	border-radius: var(--radius-sm, 2px);
	overflow: hidden;
	background: rgba(253, 253, 253, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

:root[data-theme='dark'] .elemnt-archive-view-toggle {
	background: rgba(253, 253, 253, 0.06);
	border-color: rgba(253, 253, 253, 0.16);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme='dark'] .elemnt-archive-view-toggle__btn.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.elemnt-archive-view-toggle__btn {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding: 0.5625rem 1rem;
	cursor: pointer;
	transition: background-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium);
}

.elemnt-archive-view-toggle__btn + .elemnt-archive-view-toggle__btn {
	border-inline-start: 1px solid rgba(10, 10, 10, 0.08);
}

:root[data-theme='dark'] .elemnt-archive-view-toggle__btn + .elemnt-archive-view-toggle__btn {
	border-inline-start-color: rgba(253, 253, 253, 0.08);
}

.elemnt-archive-view-toggle__btn:hover {
	background: rgba(10, 10, 10, 0.04);
}

:root[data-theme='dark'] .elemnt-archive-view-toggle__btn:hover {
	background: rgba(253, 253, 253, 0.06);
}

.elemnt-archive-view-toggle__btn.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.elemnt-archive-view-toggle__btn:active {
	transform: scale(0.98);
}

/* Swipe toggle styles kept for future re-enable. */
.elemnt-archive-swipe-toggle__btn {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.625rem 1.125rem;
	border-radius: var(--radius-sm, 2px);
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06);
	transition: background-color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-archive-swipe-toggle__btn:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

.elemnt-archive-swipe-toggle__btn:active {
	transform: scale(0.98);
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-swipe-toggle__btn {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

/* Sidebar + main layout (category + search). */
.elemnt-archive-layout {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1rem);
	padding-block: 0 var(--wp--preset--spacing--64);
	display: grid;
	grid-template-columns: minmax(10rem, 12.5rem) minmax(0, 1fr);
	column-gap: calc(var(--wp--preset--spacing--64) + var(--wp--preset--spacing--48));
	row-gap: var(--wp--preset--spacing--32);
	align-items: start;
}

.elemnt-archive-layout--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1440px;
}

.elemnt-archive-content {
	min-width: 0;
}

.elemnt-archive-sidebar {
	position: sticky;
	top: var(--elemnt-archive-sticky-top, var(--elemnt-header-h, 80px));
	z-index: 20;
	padding-block: var(--wp--preset--spacing--48) 0;
	isolation: isolate;
}

.elemnt-archive-sidebar::before {
	content: '';
	position: absolute;
	top: 18%;
	left: 50%;
	z-index: 0;
	width: 155%;
	max-width: 16rem;
	aspect-ratio: 100 / 86;
	transform: translateX(-50%);
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'%3E%3Cpath d='M50 0L100 86H0L50 0Z' fill='%23C9A66B'/%3E%3C/svg%3E");
	opacity: 0.15;
	pointer-events: none;
}

:root[data-theme='dark'] .elemnt-archive-sidebar::before {
	opacity: 0.12;
}

.elemnt-archive-sidebar__stack {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.elemnt-archive-sidebar .elemnt-archive-view-toggle {
	display: flex;
	width: 100%;
}

.elemnt-archive-sidebar .elemnt-archive-view-toggle__btn {
	flex: 1 1 50%;
	justify-content: center;
	text-align: center;
}

.elemnt-archive-sidebar .elemnt-archive-filter__track {
	overflow: visible;
}

.elemnt-archive-sidebar .elemnt-archive-filter__list {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-archive-sidebar .elemnt-archive-filter__chip {
	width: 100%;
	justify-content: flex-start;
}

.elemnt-archive-filter__label {
	display: none;
	margin: 0 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--meta);
}

.elemnt-archive-sidebar .elemnt-archive-filter__label {
	display: block;
}

:root[data-theme='dark'] .elemnt-archive-sidebar .elemnt-archive-filter__label {
	color: var(--wp--preset--color--meta);
}

.elemnt-archive-main {
	min-width: 0;
}

.elemnt-archive-filter__track {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.elemnt-archive-filter__track::-webkit-scrollbar {
	display: none;
}

.elemnt-archive-filter__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elemnt-archive-filter__chip {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: rgba(253, 253, 253, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(10, 10, 10, 0.1);
	border-radius: var(--radius-sm, 2px);
	padding: 0.5625rem 0.875rem;
	box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transition: background-color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}

:root[data-theme='dark'] .elemnt-archive-filter__chip {
	background: rgba(253, 253, 253, 0.06);
	border-color: rgba(253, 253, 253, 0.16);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--contrast);
}

:root[data-theme='dark'] .elemnt-archive-filter__chip:hover {
	border-color: rgba(253, 253, 253, 0.28);
	background: rgba(253, 253, 253, 0.1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme='dark'] .elemnt-archive-filter__chip.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.elemnt-archive-filter__chip:hover {
	border-color: rgba(10, 10, 10, 0.22);
	box-shadow: 0 2px 6px rgba(10, 10, 10, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transform: translateY(-1px);
}

.elemnt-archive-filter__chip.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transform: none;
}

:root[data-theme='dark'] .elemnt-archive-filter__chip.is-active:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
	transform: none;
}

.elemnt-archive-anchor-wrap {
	padding-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
}

.elemnt-archive-anchor {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--32);
	align-items: end;
}

.elemnt-archive-anchor__media-frame {
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
	border-radius: var(--radius-sm, 2px);
}

.elemnt-archive-anchor__media,
.elemnt-archive-anchor__media.elemnt-media {
	width: 100%;
	height: 100%;
}

.elemnt-archive-anchor__title {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h2);
	line-height: 1.15;
	text-wrap: balance;
}

.elemnt-archive-anchor__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.elemnt-archive-anchor__title a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-archive-anchor__date {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--meta);
}

.elemnt-archive-feed {
	padding-block: 0 var(--wp--preset--spacing--64);
}

.elemnt-archive-grid__template {
	gap: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24) !important;
}

.elemnt-archive-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	height: 100%;
}

.elemnt-archive-card__media-frame {
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
	border-radius: var(--radius-sm, 2px);
}

.elemnt-archive-card__media,
.elemnt-archive-card__media.elemnt-media {
	width: 100%;
	height: 100%;
}

/* Hero-split zoom pattern — separate overflow frame, transform on child. */
.elemnt-archive-card__media .elemnt-media__image,
.elemnt-archive-card__media.elemnt-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.75s ease-in-out;
}

.elemnt-archive-card:hover .elemnt-archive-card__media .elemnt-media__image,
.elemnt-archive-card:hover .elemnt-archive-card__media.elemnt-placeholder {
	transform: scale(1.15);
}

.elemnt-archive-card__title {
	margin: 0;
	line-height: 1.25;
}

.elemnt-archive-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.2s var(--ease-premium);
}

.elemnt-archive-card__title a:hover {
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-archive-card__date {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--meta);
	margin: 0;
}

.elemnt-archive-pagination {
	margin-top: var(--wp--preset--spacing--48);
}

.elemnt-archive-pagination .wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
}

.elemnt-archive-pagination a,
.elemnt-archive-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--secondary);
	border: 1px solid #D4D4D8;
	border-radius: var(--radius-sm, 2px);
	transition: background-color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium), color 0.25s var(--ease-premium);
}

:root[data-theme='dark'] .elemnt-archive-pagination a,
:root[data-theme='dark'] .elemnt-archive-pagination span {
	border-color: #3F3F46;
}

.elemnt-archive-pagination a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

.elemnt-archive-pagination span.current,
.elemnt-archive-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.elemnt-search-header {
	padding-block: var(--wp--preset--spacing--48) 0;
}

.elemnt-search-header__query {
	margin-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.elemnt-search-header__field {
	margin-block-end: var(--wp--preset--spacing--32);
}

.elemnt-search-header__field .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--radius-sm, 2px);
}

.elemnt-search-header__field .wp-block-search__input:focus {
	border-width: 2px;
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.elemnt-archive-search__empty {
	padding-block: var(--wp--preset--spacing--48);
}

.elemnt-archive-search__empty-title {
	margin: 0 0 var(--wp--preset--spacing--32);
	text-transform: uppercase;
}

.elemnt-archive-search__empty-eyebrow {
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent-interactive);
	margin: 0 0 var(--wp--preset--spacing--24);
}

.elemnt-archive-search__picks-grid {
	margin-block-start: 0;
}

/* === 404 — command-center header + Editor's Picks grid === */
.elemnt-not-found {
	padding-block: 0 var(--wp--preset--spacing--120);
}

.elemnt-not-found__inner {
	width: 100%;
}

.elemnt-not-found__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.elemnt-not-found__copy {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--24);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--read);
	line-height: 1.7;
	color: var(--wp--preset--color--meta);
	text-wrap: pretty;
}

.elemnt-not-found__picks {
	padding-block: var(--wp--preset--spacing--48) 0;
}

:lang(ko) .elemnt-not-found__title {
	font-weight: 500;
}

/* === Team training pages (internal staging docs) === */
.elemnt-training__video-slot {
	margin-block: var(--wp--preset--spacing--32) var(--wp--preset--spacing--48);
	padding: var(--wp--preset--spacing--32);
	background: var(--wp--preset--color--secondary);
	border: 1px dashed var(--wp--preset--color--meta);
	border-radius: 4px;
}

.elemnt-training__video-label {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-interactive);
}

.elemnt-training__video-slot p:last-child {
	margin-bottom: 0;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.5;
}

.elemnt-training__note {
	margin-block-start: var(--wp--preset--spacing--48);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--secondary);
	border-inline-start: 3px solid var(--wp--preset--color--accent-interactive);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.elemnt-not-found {
		padding-block-end: var(--wp--preset--spacing--64);
	}
}

/* List view mode. */
.elemnt-archive.is-list-mode .elemnt-archive-grid__template,
.elemnt-archive.is-list-mode .elemnt-archive-search__picks-grid .elemnt-archive-grid__template {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: var(--wp--preset--spacing--24) !important;
}

.elemnt-archive.is-list-mode .elemnt-archive-card {
	display: grid;
	grid-template-columns: clamp(8rem, 32%, 17.5rem) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: var(--wp--preset--spacing--24);
	row-gap: var(--wp--preset--spacing--8);
	align-items: center;
}

.elemnt-archive.is-list-mode .elemnt-archive-card__media-frame {
	grid-row: 1 / -1;
	align-self: center;
	width: 100%;
}

.elemnt-archive.is-list-mode .elemnt-archive-card__title {
	margin: 0;
}

/* Category swipe mode — on hold; styles kept for future re-enable. */
.elemnt-archive--category.is-swipe-mode .elemnt-archive-pagination {
	display: none;
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-sidebar {
	display: none;
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-layout {
	grid-template-columns: 1fr;
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-grid__template {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	height: calc(100dvh - var(--elemnt-archive-sticky-top, var(--elemnt-header-h, 80px)));
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	overscroll-behavior-y: contain;
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-card {
	min-height: calc(100dvh - var(--elemnt-archive-sticky-top, var(--elemnt-header-h, 80px)));
	scroll-snap-align: start;
	scroll-snap-stop: always;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--32);
}

.elemnt-archive--category.is-swipe-mode .elemnt-archive-card__media-frame {
	flex: 0 0 auto;
	max-height: 55dvh;
}

:lang(ko) .elemnt-archive-header__title,
:lang(ko) .elemnt-search-header__query,
:lang(ko) .elemnt-archive-card__title,
:lang(ko) .elemnt-archive-anchor__title,
:lang(ko) .elemnt-archive-search__empty-title {
	font-weight: 700;
}

:lang(ko) .elemnt-archive-header__eyebrow,
:lang(ko) .elemnt-search-header__eyebrow,
:lang(ko) .elemnt-archive-card__eyebrow,
:lang(ko) .elemnt-archive-filter__chip,
:lang(ko) .elemnt-archive-view-toggle__btn,
:lang(ko) .elemnt-archive-swipe-toggle__btn,
:lang(ko) .elemnt-archive-anchor__pick-eyebrow {
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 1024px) {
	.elemnt-archive-layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--16);
	}

	.elemnt-archive-sidebar {
		position: sticky;
		top: var(--elemnt-archive-sticky-top, var(--elemnt-header-h, 80px));
		padding-block: var(--wp--preset--spacing--8);
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		background: rgba(253, 253, 253, 0.92);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-block: 1px solid rgba(10, 10, 10, 0.08);
	}

	:root[data-theme='dark'] .elemnt-archive-sidebar {
		background: rgba(10, 10, 10, 0.92);
		border-block-color: rgba(253, 253, 253, 0.08);
	}

	.elemnt-archive-sidebar .elemnt-archive-filter__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--wp--preset--spacing--8);
	}

	.elemnt-archive-sidebar .elemnt-archive-filter__chip {
		width: auto;
		flex: 0 0 auto;
	}

	.elemnt-archive-grid__template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.elemnt-archive-anchor {
		grid-template-columns: 1fr;
	}

	.elemnt-archive.is-list-mode .elemnt-archive-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.elemnt-archive.is-list-mode .elemnt-archive-card__media-frame {
		grid-row: auto;
	}
}

@media (max-width: 782px) {
	.elemnt-archive-header,
	.elemnt-archive-header--tag {
		padding-block: var(--wp--preset--spacing--32);
	}

	.elemnt-search-header {
		padding-block: var(--wp--preset--spacing--32) 0;
	}

	.elemnt-archive-layout {
		padding-block: 0 var(--wp--preset--spacing--48);
	}

	.elemnt-archive-feed {
		padding-block: 0 var(--wp--preset--spacing--48);
	}

	.elemnt-archive-grid__template {
		grid-template-columns: 1fr !important;
	}

	.elemnt-archive-header__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.elemnt-search-header__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.elemnt-search-header__actions .elemnt-archive-view-toggle {
		align-self: flex-start;
	}

	.elemnt-archive-sidebar .elemnt-archive-view-toggle {
		width: 100%;
	}
}

/* === Homepage newsletter section + shared signup form === */
.elemnt-newsletter-section {
	padding-block: 120px;
	background: var(--wp--preset--color--base);
}

.elemnt-newsletter-section__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--24);
	max-width: 720px;
	margin-inline: auto;
}

.elemnt-newsletter-section__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--micro);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--meta);
}

.elemnt-newsletter-section__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 400;
	text-wrap: balance;
	max-width: 20ch;
}

.elemnt-newsletter-section__copy {
	margin: 0;
	max-width: 42ch;
	color: var(--wp--preset--color--meta);
	font-size: var(--wp--preset--font-size--read);
	line-height: 1.7;
}

.elemnt-newsletter-signup--homepage {
	width: 100%;
	max-width: 560px;
}

.elemnt-newsletter-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.elemnt-newsletter-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	align-items: center;
}

.elemnt-newsletter-form__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--radius-sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.5;
	min-height: 48px;
	box-sizing: border-box;
	transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
}

/* Homepage — strong field edge on light palette-cleanser section */
.elemnt-newsletter-form--homepage .elemnt-newsletter-form__input {
	border: 2px solid #0a0a0a;
	box-shadow: 0 2px 0 rgba(10, 10, 10, 0.06);
}

:root[data-theme='dark'] .elemnt-newsletter-form--homepage .elemnt-newsletter-form__input {
	border-color: #fdfdfd;
	box-shadow: none;
	background: var(--wp--preset--color--secondary);
}

.elemnt-newsletter-form__input:focus {
	outline: none;
	border-width: 2px;
	border-color: var(--wp--preset--color--contrast);
}

.elemnt-newsletter-form__submit {
	flex: 0 0 auto;
	cursor: pointer;
	transition: background 0.25s var(--ease-premium), color 0.25s var(--ease-premium), transform 0.15s var(--ease-premium);
}

.elemnt-newsletter-form__submit:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-foreground);
}

.elemnt-newsletter-form__submit:active {
	transform: scale(0.98);
}

.elemnt-newsletter-form__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.elemnt-newsletter-form__status {
	margin: var(--wp--preset--spacing--8) 0 0;
	min-height: 1.5em;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--meta);
}

.elemnt-newsletter-form__status.is-success {
	color: var(--wp--preset--color--contrast);
}

.elemnt-newsletter-form__status.is-error {
	color: var(--wp--preset--color--contrast);
}

.elemnt-newsletter-form__legal {
	margin: var(--wp--preset--spacing--16) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--meta);
}

.elemnt-newsletter-form__legal a {
	color: var(--wp--preset--color--accent-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Inline (single post) — reuse boxed treatment */
.elemnt-post-newsletter .elemnt-newsletter-form__row {
	margin-top: 0;
}

.elemnt-newsletter-form--inline .elemnt-newsletter-form__input {
	border: 2px solid #0A0A0A;
	box-shadow: 0 2px 0 rgba(10, 10, 10, 0.06);
}

:root[data-theme='dark'] .elemnt-newsletter-form--inline .elemnt-newsletter-form__input {
	border-color: #FDFDFD;
	box-shadow: none;
	background: var(--wp--preset--color--secondary);
}

/* Footer — compact stacked form on dark chrome */
.elemnt-footer-newsletter .elemnt-newsletter-form__row {
	flex-direction: column;
	align-items: stretch;
}

.elemnt-footer-newsletter .elemnt-newsletter-form__input {
	flex: 0 0 auto;
	width: 100%;
	min-height: 44px;
	border: 1px solid rgba(244, 244, 245, 0.35);
	background: rgba(10, 10, 10, 0.35);
	color: #fdfdfd;
}

.elemnt-footer-newsletter .elemnt-newsletter-form__input::placeholder {
	color: rgba(244, 244, 245, 0.55);
}

.elemnt-footer-newsletter .elemnt-newsletter-form__input:focus {
	border-color: #fdfdfd;
}

.elemnt-footer-newsletter .elemnt-newsletter-form__submit {
	flex: 0 0 auto;
	width: 100%;
	min-height: 44px;
}

.elemnt-footer-newsletter .elemnt-newsletter-form__legal {
	color: rgba(244, 244, 245, 0.55);
}

.elemnt-footer-newsletter .elemnt-newsletter-form__legal a {
	color: #d4af37;
}

.elemnt-footer-newsletter .elemnt-newsletter-form__status {
	color: rgba(244, 244, 245, 0.75);
}

:lang(ko) .elemnt-newsletter-section__heading {
	font-weight: 500;
}

@media (max-width: 782px) {
	.elemnt-newsletter-section {
		padding-block: 64px;
	}

	.elemnt-newsletter-form__row {
		flex-direction: column;
		align-items: stretch;
	}

	.elemnt-newsletter-form__input {
		flex: 0 0 auto;
		width: 100%;
	}

	.elemnt-newsletter-form__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-newsletter-form__submit:active {
		transform: none;
	}
}

/* === §6 Scroll reveal — calm slide-up + soft fade (IntersectionObserver in scroll-reveal.js) === */
@media (prefers-reduced-motion: no-preference) {
	.elemnt-reveal {
		opacity: 0.3;
		transform: translate3d(0, 28px, 0);
		transition:
			opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
			transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}

	.elemnt-reveal.is-visible {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elemnt-reveal {
		opacity: 1;
		transform: none;
	}

	.elemnt-archive-filter__chip:hover {
		transform: none;
	}

	.elemnt-archive-view-toggle,
	.elemnt-archive-filter__chip,
	.elemnt-archive-sidebar {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.elemnt-archive-card__media .elemnt-media__image,
	.elemnt-archive-card__media.elemnt-placeholder {
		transition: none !important;
	}

	.elemnt-archive-card:hover .elemnt-archive-card__media .elemnt-media__image,
	.elemnt-archive-card:hover .elemnt-archive-card__media.elemnt-placeholder {
		transform: none;
	}

	.elemnt-archive--category.is-swipe-mode .elemnt-archive-grid__template {
		scroll-snap-type: none;
	}
}