/**
 * SEKILOG Home Blocks
 * Front-end styles.
 *
 * All selectors are namespaced to avoid overriding SWELL globally.
 */

:root {
	--sk-home-bg: #f8f8f5;
	--sk-home-surface: #ffffff;
	--sk-home-ink: #0e0f10;
	--sk-home-muted: #686b72;
	--sk-home-line: #e0e2e3;
	--sk-home-accent: #c2ff2e;
	--sk-home-radius: 16px;
	--sk-home-max: 1296px;
	--sk-home-page-max: 1440px;
	--sk-home-gutter: clamp(20px, 5vw, 72px);
	--sk-home-section-y: clamp(56px, 7vw, 88px);
	--sk-home-gap: clamp(18px, 2vw, 28px);
	--sk-home-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
		"Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
	--sk-home-font-en: "Helvetica Neue", "Inter", Arial, sans-serif;
}

.sk-home-hero,
.sk-home-section,
.sk-home-explore {
	box-sizing: border-box;
	color: var(--sk-home-ink);
	font-family: var(--sk-home-font);

	/*
	 * Break out of SWELL's fixed-page content column without adding a
	 * presentational wrapper element to the public markup. The section
	 * remains semantic; only its visual box becomes viewport-wide.
	 */
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.sk-home-hero *,
.sk-home-section *,
.sk-home-explore * {
	box-sizing: border-box;
}

.sk-home-hero a,
.sk-home-section a,
.sk-home-explore a {
	color: inherit;
	text-decoration: none;
}

/*
 * SWELL styles headings inside .post_content very aggressively. Keep semantic
 * h2/h3 elements in the markup, but make SEKILOG's own component classes the
 * sole source of their visual treatment.
 */
.sekilog-home-layout .post_content .sk-home-section-head__title,
.sekilog-home-layout .post_content .sk-home-card__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.sekilog-home-layout .post_content .sk-home-section-head__title::before,
.sekilog-home-layout .post_content .sk-home-section-head__title::after,
.sekilog-home-layout .post_content .sk-home-card__title::before,
.sekilog-home-layout .post_content .sk-home-card__title::after {
	content: none !important;
	display: none !important;
}

.sekilog-home-layout .post_content .sk-home-card__title a {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.sk-home-hero figure,
.sk-home-section figure {
	margin: 0;
}

.sk-home-hero img,
.sk-home-section img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* Shared section heading */
.sk-home-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 30px;
}

.sk-home-section-head__copy {
	min-width: 0;
	margin: 0;
}

.sk-home-section-head__eyebrow,
.sk-home-card__eyebrow,
.sk-home-category-card__code {
	margin: 0;
	color: var(--sk-home-muted);
	font: 700 0.72rem/1.2 var(--sk-home-font-en);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.sk-home-section-head__title {
	margin: 0;
	font-size: clamp(1.7rem, 2.7vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.035em;
	overflow-wrap: anywhere;
}

.sk-home-section-head__description {
	max-width: 52rem;
	margin: 10px 0 0;
	color: var(--sk-home-muted);
	font-size: 0.95rem;
	line-height: 1.75;
}

.sk-home-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid var(--sk-home-line);
	border-radius: 999px;
	background: var(--sk-home-surface);
	font: 700 0.75rem/1 var(--sk-home-font-en);
	letter-spacing: 0.035em;
	transition: transform 160ms ease, border-color 160ms ease;
}

.sk-home-button:hover {
	border-color: var(--sk-home-ink);
	transform: translateY(-1px);
}

.sk-home-button:focus-visible,
.sk-home-card__title a:focus-visible,
.sk-home-card__media-link:focus-visible,
.sk-home-category-card:focus-visible {
	outline: 3px solid var(--sk-home-accent);
	outline-offset: 4px;
}

/* Shared article card */
.sk-home-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 9px;
	margin: 0;
}

.sk-home-card__media-link {
	display: block;
	border-radius: var(--sk-home-radius);
	overflow: hidden;
}

.sk-home-card__figure {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--sk-home-radius);
	background:
		radial-gradient(circle at 78% 15%, rgba(72, 203, 218, 0.26), transparent 34%),
		linear-gradient(135deg, #12151b 0%, #25303c 100%);
}

.sk-home-card__image {
	transition: transform 320ms ease;
}

.sk-home-card:hover .sk-home-card__image {
	transform: scale(1.018);
}

.sk-home-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 78% 15%, rgba(72, 203, 218, 0.24), transparent 34%),
		linear-gradient(135deg, #12151b 0%, #25303c 100%);
}

.sk-home-card__header {
	display: grid;
	min-width: 0;
	gap: 6px;
	margin: 0;
}

.sk-home-card__title {
	margin: 0;
	font-size: clamp(1rem, 1.45vw, 1.2rem);
	line-height: 1.55;
	letter-spacing: -0.018em;
	overflow-wrap: anywhere;
}

.sk-home-card__excerpt {
	max-width: 50rem;
	margin: 0;
	color: var(--sk-home-muted);
	font-size: 0.94rem;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.sk-home-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1px;
	color: var(--sk-home-muted);
	font: 600 0.7rem/1.3 var(--sk-home-font-en);
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

/* Hero */
.sk-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 2.05fr) minmax(280px, 1fr);
	gap: 24px;
	padding-block: clamp(34px, 4vw, 52px) clamp(58px, 6vw, 76px);
	padding-inline: max(
		var(--sk-home-gutter),
		calc((100vw - var(--sk-home-max)) / 2)
	);
	background: var(--sk-home-bg);
}

.sk-home-hero > .sk-home-card--hero {
	min-width: 0;
}

.sk-home-card--hero {
	gap: 9px;
}

.sk-home-card--hero .sk-home-card__figure {
	aspect-ratio: 16 / 9.4;
}

.sk-home-card--hero .sk-home-card__title {
	font-size: clamp(2rem, 4vw, 3.15rem);
	line-height: 1.2;
	letter-spacing: -0.052em;
}

.sk-home-card--hero .sk-home-card__excerpt {
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
}

.sk-home-hero__secondary {
	display: grid;
	align-content: start;
	gap: 28px;
	min-width: 0;
	margin: 0;
}

.sk-home-card--hero-side .sk-home-card__figure {
	aspect-ratio: 16 / 7.6;
}

.sk-home-card--hero .sk-home-card__excerpt {
	margin-top: 3px;
	line-height: 1.68;
}

.sk-home-card--hero .sk-home-card__meta {
	margin-top: 3px;
}

/* Generic section
 * Full-bleed backgrounds with a constrained editorial content column.
 * No presentational wrapper element is required in the public HTML.
 */
.sk-home-section,
.sk-home-explore {
	padding-block: var(--sk-home-section-y);
	padding-inline: max(
		var(--sk-home-gutter),
		calc((100vw - var(--sk-home-max)) / 2)
	);
}

.sk-home-latest {
	background: var(--sk-home-surface);
}

.sk-home-post-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-home-post-list > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

/*
 * Let the tallest title define the row, then keep dates on one baseline.
 * No fixed title height or line clamp is used, so long Japanese titles remain
 * fully readable without breaking alignment.
 */
.sk-home-post-list .sk-home-card--grid {
	display: grid;
	grid-template-rows: auto 1fr auto;
	width: 100%;
	height: 100%;
	gap: 10px;
}

.sk-home-post-list .sk-home-card--grid .sk-home-card__header {
	align-self: start;
}

.sk-home-post-list .sk-home-card--grid .sk-home-card__meta {
	align-self: end;
	margin-top: 0;
}

/* Explore */
.sk-home-explore {
	background: var(--sk-home-bg);
}

.sk-home-category-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-home-category-list > li {
	min-width: 0;
	margin: 0;
}

.sk-home-category-card {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 148px;
	padding: 20px 22px 18px;
	border: 1px solid var(--sk-home-line);
	border-radius: 14px;
	background: var(--sk-home-surface);
	transition: transform 160ms ease, border-color 160ms ease;
}

.sk-home-category-card:hover {
	border-color: var(--sk-home-ink);
	transform: translateY(-2px);
}

.sk-home-category-card > header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin: 0;
}

.sk-home-category-card__code,
.sk-home-category-card__number {
	margin: 0;
}

.sk-home-category-card__number {
	color: var(--sk-home-muted);
	font: 600 0.72rem/1 var(--sk-home-font-en);
}

.sk-home-category-card__label {
	align-self: center;
	font-size: 1.18rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.sk-home-category-card__arrow {
	font: 700 1.1rem/1 var(--sk-home-font-en);
}

/* Smartphone */
.sk-home-smartphone {
	display: grid;
	grid-template-columns: minmax(0, 1.47fr) minmax(310px, 1fr);
	grid-template-areas:
		"head head"
		"lead side";
	gap: 30px 24px;
	background: var(--sk-home-surface);
}

.sk-home-smartphone > .sk-home-section-head {
	grid-area: head;
	margin-bottom: 0;
}

.sk-home-smartphone > .sk-home-card--feature-lead {
	grid-area: lead;
	min-width: 0;
}

.sk-home-smartphone__secondary {
	grid-area: side;
	display: grid;
	align-content: start;
	gap: 24px;
	min-width: 0;
	margin: 0;
}

.sk-home-card--feature-lead .sk-home-card__figure {
	aspect-ratio: 16 / 9.3;
}

.sk-home-card--feature-lead .sk-home-card__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.42;
}

.sk-home-card--feature-side .sk-home-card__figure {
	aspect-ratio: 16 / 6.9;
}

/* Editor placeholder also appears in front only for admins during preview */
.sk-home-editor-empty {
	padding: 20px;
	border: 1px dashed var(--sk-home-line);
	border-radius: 12px;
	color: var(--sk-home-muted);
	background: var(--sk-home-bg);
}

/*
 * Keep the browser from exposing a 1px horizontal scrollbar on platforms
 * where vw includes the scrollbar gutter. Modern browsers support clip;
 * hidden is the conservative fallback.
 */
html:has(.sk-home-hero),
body:has(.sk-home-hero) {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html:has(.sk-home-hero),
	body:has(.sk-home-hero) {
		overflow-x: clip;
	}
}

/* Gutenberg editor must stay inside the editor canvas. */
.editor-styles-wrapper .sk-home-hero,
.editor-styles-wrapper .sk-home-section,
.editor-styles-wrapper .sk-home-explore {
	margin-inline: 0;
}

/* Tablet */
@media (max-width: 1023px) {
	.sk-home-hero {
		grid-template-columns: 1fr;
	}

	.sk-home-hero__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sk-home-post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sk-home-category-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sk-home-smartphone {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"lead"
			"side";
	}

	.sk-home-smartphone__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile */
@media (max-width: 767px) {
	.sk-home-section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.sk-home-section-head__title {
		font-size: clamp(1.55rem, 8vw, 2rem);
	}

	.sk-home-hero {
		padding-inline: 16px;
	}

	.sk-home-card--hero .sk-home-card__title {
		font-size: clamp(1.7rem, 8.4vw, 2.2rem);
		line-height: 1.34;
	}

	.sk-home-hero__secondary,
	.sk-home-post-list,
	.sk-home-category-list,
	.sk-home-smartphone__secondary {
		grid-template-columns: 1fr;
	}

	.sk-home-section,
	.sk-home-explore {
		padding-inline: 16px;
	}

	.sk-home-category-card {
		min-height: 72px;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: 1fr;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
	}

	.sk-home-category-card > header {
		display: block;
	}

	.sk-home-category-card__number {
		display: none;
	}

	.sk-home-category-card__code {
		margin: 0;
		font-size: 0.64rem;
	}

	.sk-home-category-card__label {
		font-size: 0.95rem;
	}

	.sk-home-card--feature-side .sk-home-card__figure {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-home-card__image,
	.sk-home-category-card,
	.sk-home-button {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
 * SWELL integration — only on a fixed page that contains SEKILOG home blocks.
 * --------------------------------------------------------------------------
 * Keep the page title in the accessibility tree as the page H1, but remove it
 * visually. Breadcrumbs and SWELL's article spacing are presentation chrome for
 * this editorial landing page and are disabled only inside this scoped layout.
 */
.sekilog-home-layout {
	background: var(--sk-home-bg);
}

.sekilog-home-layout .c-pageTitle {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sekilog-home-layout #breadcrumb {
	display: none !important;
}

.sekilog-home-layout .l-content,
.sekilog-home-layout .l-mainContent,
.sekilog-home-layout .l-mainContent__inner {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.sekilog-home-layout .l-mainContent__inner > .post_content {
	max-width: none !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.sekilog-home-layout .post_content > .wp-block-sekilog-home-hero,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-latest,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-explore,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-smartphone {
	margin-block: 0 !important;
}

/* --------------------------------------------------------------------------
 * Phase 2 — Feature Stories / Watch / Select / About
 * -------------------------------------------------------------------------- */
.sekilog-home-layout .post_content .sk-home-about__title,
.sekilog-home-layout .post_content .sk-home-video-card__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.sekilog-home-layout .post_content .sk-home-about__title::before,
.sekilog-home-layout .post_content .sk-home-about__title::after,
.sekilog-home-layout .post_content .sk-home-video-card__title::before,
.sekilog-home-layout .post_content .sk-home-video-card__title::after {
	content: none !important;
	display: none !important;
}

.sk-home-stories {
	background: var(--sk-home-bg);
}

.sk-home-select {
	background: var(--sk-home-surface);
}

.sk-home-curated-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-home-curated-list > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

.sk-home-curated-list .sk-home-card {
	width: 100%;
}

.sk-home-card--story .sk-home-card__figure {
	aspect-ratio: 16 / 10.5;
}

.sk-home-card--select .sk-home-card__figure {
	aspect-ratio: 16 / 9.4;
}

.sk-home-card--story .sk-home-card__title,
.sk-home-card--select .sk-home-card__title {
	font-size: clamp(1.05rem, 1.55vw, 1.28rem);
	line-height: 1.5;
}

/* Watch */
.sk-home-watch {
	background: var(--sk-home-dark, #121316);
	color: #fff;
}

.sk-home-watch .sk-home-section-head__eyebrow,
.sk-home-watch .sk-home-section-head__description,
.sk-home-video-card__label {
	color: #a8abb1;
}

.sk-home-watch .sk-home-button {
	border-color: var(--sk-home-accent);
	background: var(--sk-home-accent);
	color: var(--sk-home-ink);
}

.sk-home-video-list {
	display: grid;
	grid-template-columns: minmax(0, 2.9fr) repeat(3, minmax(0, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-home-video-list > li {
	min-width: 0;
	margin: 0;
}

.sk-home-video-card,
.sk-home-video-card__link {
	display: block;
	min-width: 0;
}

.sk-home-video-card__figure {
	position: relative;
	aspect-ratio: 9 / 16;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sk-home-radius);
	background: linear-gradient(145deg, #272a30 0%, #08090b 100%);
}

.sk-home-video-card--lead .sk-home-video-card__figure {
	aspect-ratio: 16 / 9;
}

.sk-home-video-card__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sk-home-video-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 75% 18%, rgba(194, 255, 46, 0.18), transparent 26%),
		linear-gradient(145deg, #272a30 0%, #08090b 100%);
}

.sk-home-video-card__play {
	position: absolute;
	inset: 50% auto auto 50%;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 50%;
	background: var(--sk-home-accent);
	color: transparent;
	font-size: 0;
	line-height: 0;
	transform: translate(-50%, -50%);
}

/*
 * Draw the play icon inside a real 14x16 box.
 * Using a zero-width border triangle makes CSS Grid centre the zero-width
 * origin rather than the triangle's visible bounds, which shifts the icon.
 * A fixed box + clip-path gives the triangle a real alignment box.
 */
.sk-home-video-card__play::before {
	content: "";
	display: block;
	width: 14px;
	height: 16px;
	background: var(--sk-home-ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateX(1px);
}

.sk-home-video-card__header {
	display: grid;
	gap: 7px;
	margin-top: 12px;
}

.sk-home-video-card__label {
	margin: 0;
	font: 700 0.7rem/1.2 var(--sk-home-font-en);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.sk-home-video-card__title {
	margin: 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: -0.015em;
	overflow-wrap: anywhere;
}

.sk-home-video-card--lead .sk-home-video-card__title {
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
}

/* About */
.sk-home-about {
	display: grid;
	grid-template-columns: 184px minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	background: var(--sk-home-bg);
	border-top: 1px solid var(--sk-home-line);
}

.sk-home-about__visual {
	display: grid;
	width: 184px;
	height: 184px;
	place-items: center;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 45% 35%, #4b4e54 0%, #121316 72%);
}

.sk-home-about__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sk-home-about__mark {
	color: var(--sk-home-accent);
	font: 700 3.6rem/1 var(--sk-home-font-en);
}

.sk-home-about__copy {
	display: grid;
	gap: 10px;
	max-width: 820px;
	margin: 0;
}

.sk-home-about__title {
	margin: 0;
	font-size: clamp(1.7rem, 3vw, 2.35rem);
	line-height: 1.35;
	letter-spacing: -0.035em;
	overflow-wrap: anywhere;
}

.sk-home-about__description {
	max-width: 52rem;
	margin: 0;
	color: var(--sk-home-muted);
	font-size: 0.95rem;
	line-height: 1.8;
}

.sk-home-about__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

@media (max-width: 1023px) {
	.sk-home-curated-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sk-home-video-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sk-home-video-list > li:first-child {
		grid-column: 1 / -1;
	}

	.sk-home-about {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 28px;
	}

	.sk-home-about__visual {
		width: 150px;
		height: 150px;
	}
}

@media (max-width: 767px) {
	.sk-home-curated-list,
	.sk-home-video-list {
		grid-template-columns: 1fr;
	}

	.sk-home-video-list > li:first-child {
		grid-column: auto;
	}

	.sk-home-video-card__figure,
	.sk-home-video-card--lead .sk-home-video-card__figure {
		aspect-ratio: 16 / 9;
	}

	.sk-home-about {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sk-home-about__visual {
		width: 120px;
		height: 120px;
	}
}

/* Phase 2 blocks participate in the same zero-margin SWELL layout contract. */
.sekilog-home-layout .post_content > .wp-block-sekilog-home-stories,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-watch,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-select,
.sekilog-home-layout .post_content > .wp-block-sekilog-home-about {
	margin-block: 0 !important;
}

/* --------------------------------------------------------------------------
 * v0.2.1 — WATCH alignment + trailing SWELL/Gutenberg cleanup
 * -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	/*
	 * Keep every video thumbnail on one visual baseline on desktop.
	 * The lead item is wider, but its media box uses the same height as shorts.
	 * This makes labels/titles start at exactly the same Y position without
	 * changing the semantic article/figure/header markup.
	 */
	.sk-home-video-list {
		--sk-home-video-media-height: clamp(280px, 24vw, 344px);
		align-items: stretch;
	}

	.sk-home-video-list > li {
		display: flex;
	}

	.sk-home-video-card,
	.sk-home-video-card__link {
		width: 100%;
		height: 100%;
	}

	.sk-home-video-card__link {
		display: grid;
		grid-template-rows: var(--sk-home-video-media-height) auto;
		align-content: start;
	}

	.sk-home-video-card__figure,
	.sk-home-video-card--lead .sk-home-video-card__figure {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

/*
 * The SEKILOG landing page is fully composed from full-bleed blocks. SWELL's
 * normal post-content surface must not peek through after the last block.
 */
.sekilog-home-layout .post_content {
	background: transparent !important;
	padding-bottom: 0 !important;
}

/* Gutenberg can leave a trailing empty paragraph after inserting blocks. */
.sekilog-home-layout .post_content > p:empty:last-child,
.sekilog-home-layout .post_content > .wp-block-paragraph:empty:last-child,
.sekilog-home-layout .post_content > .wp-block-spacer:last-child:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
}

/* Keep the bottom edge of About clean when it is the final homepage block. */
.sekilog-home-layout .post_content > .wp-block-sekilog-home-about:last-of-type {
	margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
 * v0.2.2 — A3 site chrome + definitive terminal About cleanup
 * -------------------------------------------------------------------------- */

/*
 * ABOUT is the terminal content block in the SEKILOG landing page contract.
 * Gutenberg/SWELL/ad integrations can append non-empty nodes after it, which
 * means :empty cannot reliably catch the white placeholder seen in previews.
 * Once About appears, no later post-content sibling belongs to this landing
 * page, so hide those trailing nodes explicitly.
 */
/*
 * The homepage may be reordered freely. Keep only SEKILOG homepage blocks as
 * direct post_content children so SWELL/Gutenberg trailing helper nodes cannot
 * reintroduce the old white placeholder, without assuming About is last.
 */
.sekilog-home-layout .post_content > :not(.wp-block-sekilog-home-hero):not(.wp-block-sekilog-home-latest):not(.wp-block-sekilog-home-explore):not(.wp-block-sekilog-home-smartphone):not(.wp-block-sekilog-home-stories):not(.wp-block-sekilog-home-watch):not(.wp-block-sekilog-home-select):not(.wp-block-sekilog-home-about) {
	display: none !important;
}

/* Also make the surrounding landing-page canvas the same tone as A3 so no
 * default SWELL white surface can peek through between full-bleed sections. */
.sekilog-home-layout :is(.l-content, .l-mainContent, .l-mainContent__inner, .post_content) {
	background: var(--sk-home-bg) !important;
}

/* A3 utility strip -------------------------------------------------------- */
.sk-site-utility {
	display: flex;
	min-height: 34px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-inline: max(
		var(--sk-home-gutter),
		calc((100vw - var(--sk-home-max)) / 2)
	);
	background: var(--sk-home-ink);
	color: #fff;
	font-family: var(--sk-home-font-en);
}

.sk-site-utility a {
	color: inherit;
	text-decoration: none;
}

.sk-site-utility__brand,
.sk-site-utility__links {
	margin: 0;
}

.sk-site-utility__brand {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
}

.sk-site-utility__links {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 0;
	list-style: none;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.sk-site-utility__links > li {
	margin: 0;
}

.sk-site-utility a:focus-visible {
	outline: 3px solid var(--sk-home-accent);
	outline-offset: 3px;
}

/* SWELL header -> A3 editorial header ----------------------------------- */
.sekilog-site-chrome #header.l-header {
	border-bottom: 1px solid var(--sk-home-line) !important;
	background: var(--sk-home-bg) !important;
	box-shadow: none !important;
}

.sekilog-site-chrome #header .l-header__bar {
	display: none !important;
}

.sekilog-site-chrome #header .l-header__inner,
.sekilog-site-chrome #fix_header .l-fixHeader__inner {
	box-sizing: border-box;
	display: flex;
	width: 100% !important;
	max-width: 1440px !important;
	min-height: 82px;
	margin-inline: auto !important;
	padding-inline: 72px !important;
	align-items: center;
}

/* SWELL keeps layout padding on the logo wrapper. Reset the wrapper itself,
 * not only the anchor/image, otherwise the logo sits lower than the nav. */
.sekilog-site-chrome #header .l-header__logo,
.sekilog-site-chrome #fix_header .l-fixHeader__logo {
	display: flex !important;
	height: 82px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-self: center !important;
	align-items: center !important;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-headLogo {
	display: flex !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-headLogo__link {
	display: flex !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
	line-height: 1 !important;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-headLogo__img {
	display: block !important;
	width: auto !important;
	max-height: 40px !important;
	margin: 0 !important;
}

/* Keep the logo, global navigation and utility/search controls on one
 * vertical axis. SWELL gives the nav wrapper/anchors their own height rules,
 * so centering only the logo makes the menu appear slightly too high. */
.sekilog-site-chrome :is(#header, #fix_header) :is(.l-header__gnav, .l-fixHeader__gnav) {
	display: flex !important;
	height: 82px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-self: center !important;
	align-items: center !important;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-gnav {
	display: flex !important;
	height: 100% !important;
	margin: 0 !important;
	align-items: stretch !important;
	gap: clamp(4px, 0.8vw, 14px);
	font-family: var(--sk-home-font-en);
}

.sekilog-site-chrome :is(#header, #fix_header) .c-gnav > .menu-item {
	display: flex !important;
	height: 100% !important;
	margin: 0 !important;
	align-items: center !important;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-gnav > .menu-item > a {
	display: flex !important;
	height: 100% !important;
	margin: 0 !important;
	padding-block: 0 !important;
	padding-inline: clamp(9px, 1vw, 16px) !important;
	align-items: center !important;
	font-size: 0.72rem !important;
	font-weight: 700;
	line-height: 1 !important;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.sekilog-site-chrome :is(#header, #fix_header) .c-gnav > .menu-item > a::after {
	background: var(--sk-home-accent) !important;
}

.sekilog-site-chrome #fix_header.l-fixHeader {
	border-bottom: 1px solid var(--sk-home-line) !important;
	background: rgba(248, 248, 245, 0.96) !important;
	box-shadow: none !important;
	backdrop-filter: blur(12px);
}

/* SWELL footer -> A3 dark editorial footer ------------------------------- */
.sekilog-site-chrome #footer.l-footer {
	border-top: 0 !important;
	background: var(--sk-home-ink) !important;
	color: #fff !important;
}

.sekilog-site-chrome #footer .l-footer__inner {
	background: transparent !important;
}

.sekilog-site-chrome #footer .l-footer__foot {
	padding-block: 44px 40px !important;
}

.sekilog-site-chrome #footer .l-footer__foot > .l-container {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 1440px !important;
	margin-inline: auto !important;
	padding-inline: 72px !important;
}

.sekilog-site-chrome #footer .l-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px 26px;
	margin-bottom: 20px;
	font-family: var(--sk-home-font-en);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.sekilog-site-chrome #footer .l-footer__nav li,
.sekilog-site-chrome #footer .l-footer__nav a {
	border: 0 !important;
}

.sekilog-site-chrome #footer .l-footer__nav a {
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.88) !important;
}

.sekilog-site-chrome #footer .copyright {
	color: rgba(255, 255, 255, 0.52) !important;
	font-family: var(--sk-home-font-en);
	font-size: 0.68rem !important;
	letter-spacing: 0.04em;
	text-align: left !important;
}

@media (max-width: 1023px) {
	.sekilog-site-chrome #header .l-header__inner,
	.sekilog-site-chrome #fix_header .l-fixHeader__inner,
	.sekilog-site-chrome #footer .l-footer__foot > .l-container {
		padding-inline: 28px !important;
	}
}

@media (max-width: 767px) {
	.sk-site-utility {
		display: none;
	}

	.sekilog-site-chrome #header .l-header__inner,
	.sekilog-site-chrome #fix_header .l-fixHeader__inner {
		min-height: 64px;
		padding-inline: 16px !important;
	}

	.sekilog-site-chrome #header .l-header__logo,
	.sekilog-site-chrome #fix_header .l-fixHeader__logo {
		height: 64px !important;
	}

	.sekilog-site-chrome :is(#header, #fix_header) :is(.l-header__gnav, .l-fixHeader__gnav) {
		height: 64px !important;
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-headLogo__img {
		max-height: 34px !important;
	}

	.sekilog-site-chrome #footer .l-footer__foot {
		padding-block: 34px !important;
	}

	.sekilog-site-chrome #footer .l-footer__foot > .l-container {
		padding-inline: 20px !important;
	}

	.sekilog-site-chrome #footer .l-footer__nav {
		gap: 10px 18px;
		font-size: 0.66rem;
	}
}


/* v0.2.8: SWELL navigation tone + responsive header fixes --------------- */
/*
 * SWELL renders desktop global navigation and mobile navigation as separate
 * structures. Our desktop A3 centering rules must not force the desktop gnav
 * to remain visible below SWELL's mobile breakpoint.
 */
@media (max-width: 959px) {
	.sekilog-site-chrome :is(#header, #fix_header) :is(.l-header__gnav, .l-fixHeader__gnav) {
		display: none !important;
	}

	/* Hide SWELL's optional horizontal SP head navigation so the mobile
	 * header stays as a single A3-style row: logo + native menu controls. */
	.sekilog-site-chrome #header .l-header__spNav {
		display: none !important;
	}

	.sekilog-site-chrome #header .l-header__inner,
	.sekilog-site-chrome #fix_header .l-fixHeader__inner {
		justify-content: space-between !important;
	}

	.sekilog-site-chrome #header .l-header__menuBtn {
		display: flex !important;
		margin-left: auto !important;
		align-self: stretch !important;
		align-items: center !important;
		color: var(--sk-home-ink) !important;
	}

	.sekilog-site-chrome #header .l-header__customBtn {
		align-self: stretch !important;
		color: var(--sk-home-ink) !important;
	}

	.sk-site-utility {
		display: none;
	}
}

/* Desktop dropdown menus ------------------------------------------------- */
@media (min-width: 960px) {
	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu {
		min-width: 250px !important;
		padding: 8px !important;
		border: 1px solid var(--sk-home-line) !important;
		border-radius: 12px !important;
		background: rgba(248, 248, 245, 0.985) !important;
		box-shadow: 0 18px 50px rgba(14, 15, 16, 0.12) !important;
		color: var(--sk-home-ink) !important;
		backdrop-filter: blur(12px);
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item {
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a {
		position: relative;
		display: flex !important;
		min-height: 44px;
		padding: 11px 14px !important;
		border: 0 !important;
		border-radius: 8px !important;
		background: transparent !important;
		color: var(--sk-home-ink) !important;
		font-family: var(--sk-home-font) !important;
		font-size: 0.82rem !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		align-items: center;
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	/* SWELL adds a leading submenu marker with a pseudo-element. Once the
	 * dropdown spacing is restyled that marker can overlap the first glyph.
	 * Remove the theme marker entirely; the dropdown card itself already
	 * communicates hierarchy. */
	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a::before,
	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a::after {
		content: none !important;
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	/* Only deeper nested items need an explicit hierarchy cue. Place it on
	 * the far right, never in the text flow. */
	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item-has-children > a {
		padding-right: 34px !important;
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item-has-children > a::after {
		content: "›" !important;
		display: block !important;
		position: absolute;
		top: 50%;
		right: 14px;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		border: 0 !important;
		background: none !important;
		color: var(--sk-home-muted);
		font: 700 1rem/1 var(--sk-home-font-en);
		transform: translateY(-50%);
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a:hover,
	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a:focus-visible {
		background: rgba(194, 255, 46, 0.20) !important;
		color: var(--sk-home-ink) !important;
	}

	.sekilog-site-chrome :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a:focus-visible {
		outline: 2px solid var(--sk-home-accent);
		outline-offset: 1px;
	}
}

/* SWELL mobile drawer ---------------------------------------------------- */
.sekilog-site-chrome .p-spMenu__inner {
	background: var(--sk-home-bg) !important;
	color: var(--sk-home-ink) !important;
}

.sekilog-site-chrome .p-spMenu__nav {
	color: var(--sk-home-ink) !important;
}

.sekilog-site-chrome .p-spMenu__nav .c-gnav {
	font-family: var(--sk-home-font) !important;
}

.sekilog-site-chrome .p-spMenu__nav .c-gnav > .menu-item,
.sekilog-site-chrome .p-spMenu__nav .c-gnav .sub-menu > .menu-item {
	border-color: var(--sk-home-line) !important;
	background: transparent !important;
}

.sekilog-site-chrome .p-spMenu__nav .c-gnav a {
	color: var(--sk-home-ink) !important;
	background: transparent !important;
	font-weight: 650;
}

.sekilog-site-chrome .p-spMenu__nav .c-gnav > .menu-item > a {
	font-family: var(--sk-home-font-en) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.sekilog-site-chrome .p-spMenu__nav .sub-menu {
	background: rgba(14, 15, 16, 0.035) !important;
}

.sekilog-site-chrome .p-spMenu__nav .sub-menu a {
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.sekilog-site-chrome .p-spMenu .c-submenuToggleBtn::before {
	color: var(--sk-home-ink) !important;
}

.sekilog-site-chrome .p-spMenu .c-submenuToggleBtn::after {
	border-color: var(--sk-home-ink) !important;
}


/* --------------------------------------------------------------------------
 * v0.3.1 — editorial accent system
 * --------------------------------------------------------------------------
 * Use the lime as a recurring editorial marker rather than a large fill.
 * This keeps text contrast high while spreading the SEKILOG identity across
 * otherwise light sections.
 */
.sk-home-section-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sk-home-section-head__eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 3px;
	border-radius: 999px;
	background: var(--sk-home-accent);
}

.sk-home-card--hero .sk-home-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.sk-home-card--hero .sk-home-card__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--sk-home-accent);
}

.sk-home-button {
	padding-right: 9px;
}

.sk-home-button > span[aria-hidden="true"] {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 50%;
	background: var(--sk-home-accent);
	color: var(--sk-home-ink);
	font-size: 0.9rem;
	line-height: 1;
}

.sk-home-button:hover {
	border-color: var(--sk-home-accent);
}

.sk-home-watch .sk-home-button > span[aria-hidden="true"] {
	background: var(--sk-home-ink);
	color: var(--sk-home-accent);
}

.sk-home-explore {
	background:
		linear-gradient(135deg, rgba(194, 255, 46, 0.055) 0%, rgba(194, 255, 46, 0) 44%),
		var(--sk-home-bg);
}

.sk-home-category-card__number {
	display: inline-grid;
	min-width: 30px;
	height: 26px;
	padding-inline: 7px;
	place-items: center;
	border-radius: 999px;
	background: var(--sk-home-accent);
	color: var(--sk-home-ink);
	font-weight: 700;
}

.sk-home-category-card:hover {
	border-color: var(--sk-home-accent);
	box-shadow: 0 12px 30px rgba(14, 15, 16, 0.055);
}

.sk-home-category-card__arrow {
	color: var(--sk-home-ink);
	transition: transform 160ms ease;
}

.sk-home-category-card:hover .sk-home-category-card__arrow {
	transform: translateX(3px);
}

.sk-home-watch .sk-home-section-head__eyebrow::before {
	background: var(--sk-home-accent);
}

@media (max-width: 767px) {
	.sk-home-section-head__eyebrow::before {
		width: 18px;
	}

	.sk-home-category-card__number {
		display: none;
	}
}


/* --------------------------------------------------------------------------
 * v0.3.2 — optional dark editorial header
 * --------------------------------------------------------------------------
 * The existing logo asset stays untouched. In Dark mode it is rendered white
 * with a CSS filter, so switching back to Light never requires another upload.
 */
.sekilog-site-chrome.sekilog-header-dark #header.l-header,
.sekilog-site-chrome.sekilog-header-dark #fix_header.l-fixHeader {
	border-bottom-color: rgba(255, 255, 255, 0.10) !important;
	background: #0e1012 !important;
	color: #fff !important;
	box-shadow: none !important;
}

.sekilog-site-chrome.sekilog-header-dark #fix_header.l-fixHeader {
	background: rgba(14, 16, 18, 0.96) !important;
	backdrop-filter: blur(14px);
}

/* Utility strip becomes a quieter first tier of the same dark header. */
.sekilog-header-dark .sk-site-utility {
	border-bottom: 1px solid rgba(255, 255, 255, 0.075);
	background: #07090a;
	color: rgba(255, 255, 255, 0.82);
}

.sekilog-header-dark .sk-site-utility a:hover,
.sekilog-header-dark .sk-site-utility a:focus-visible {
	color: var(--sk-home-accent);
}

/* Preserve the exact SEKILOG mark while presenting a white variant. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-headLogo__img {
	filter: brightness(0) invert(1) !important;
}

/* Main navigation: white at rest, lime only as an interaction/editorial cue. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a {
	color: rgba(255, 255, 255, 0.88) !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a:hover,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a:focus-visible,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .current-menu-item > a,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .current-menu-ancestor > a {
	color: var(--sk-home-accent) !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a::after {
	background: var(--sk-home-accent) !important;
}

/* SWELL's search/custom/menu controls inherit the dark chrome too. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn,
	.c-iconList
) {
	color: #fff !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn
):hover {
	color: var(--sk-home-accent) !important;
}

/* Keep dropdowns light: this contrast is intentional and matches the A3
 * editorial system better than turning every layer dark. */
@media (min-width: 960px) {
	.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav .sub-menu {
		border-color: rgba(14, 15, 16, 0.10) !important;
		background: rgba(248, 248, 245, 0.99) !important;
		color: var(--sk-home-ink) !important;
		box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24) !important;
	}
}

/* Mobile header is also dark, while the opened drawer intentionally remains
 * the light reading surface already defined above. */
@media (max-width: 959px) {
	.sekilog-site-chrome.sekilog-header-dark #header .l-header__menuBtn,
	.sekilog-site-chrome.sekilog-header-dark #header .l-header__customBtn {
		color: #fff !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.3.3 — dark header polish + dark mobile navigation
 * -------------------------------------------------------------------------- */

/* Make the two dark header tiers read as one system while keeping a quiet
 * separator so the utility row remains legible. */
.sekilog-site-chrome.sekilog-header-dark #header.l-header {
	background: #0b0d0f !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.sekilog-site-chrome.sekilog-header-dark #fix_header.l-fixHeader {
	background: rgba(11, 13, 15, 0.965) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.sekilog-header-dark .sk-site-utility {
	min-height: 30px;
	background: #050708;
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* Stronger editorial active state without flooding the navigation with lime. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a {
	position: relative;
	color: rgba(255, 255, 255, 0.90) !important;
	transition: color 160ms ease;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a::after {
	height: 3px !important;
	bottom: 0 !important;
	border-radius: 999px 999px 0 0;
	background: var(--sk-home-accent) !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item:not(:hover):not(.current-menu-item):not(.current-menu-ancestor) > a::after {
	transform: scaleX(0) !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > :is(.current-menu-item, .current-menu-ancestor) > a::after,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item:hover > a::after,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav > .menu-item > a:focus-visible::after {
	transform: scaleX(1) !important;
}

/* Keep the dropdown intentionally light, but make its selected/hovered item
 * use the same lime cue as the dark header. */
@media (min-width: 960px) {
	.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav .sub-menu {
		padding: 10px !important;
		border: 1px solid rgba(14, 15, 16, 0.09) !important;
		border-radius: 12px !important;
		background: rgba(250, 250, 247, 0.995) !important;
		box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
	}

	.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a:hover,
	.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav .sub-menu > .menu-item > a:focus-visible,
	.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav .sub-menu > .current-menu-item > a {
		background: rgba(194, 255, 46, 0.18) !important;
	}
}

/* Dark mobile drawer — deliberately different from the light desktop
 * dropdown. It feels like a compact navigation panel rather than a white
 * content sheet. */
@media (max-width: 959px) {
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__inner,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__body,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav {
		background: #0b0d0f !important;
		color: #fff !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__inner {
		border-left: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: -24px 0 60px rgba(0, 0, 0, 0.34);
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > .menu-item,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav .sub-menu > .menu-item {
		border-color: rgba(255, 255, 255, 0.09) !important;
		background: transparent !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav a {
		color: rgba(255, 255, 255, 0.90) !important;
		background: transparent !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > .menu-item > a {
		font-size: 0.86rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.055em !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > :is(.current-menu-item, .current-menu-ancestor) > a,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > .menu-item > a:hover,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > .menu-item > a:focus-visible {
		color: var(--sk-home-accent) !important;
	}

	/* A narrow lime marker gives the open/current parent hierarchy without
	 * turning the whole row green. */
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .c-gnav > :is(.current-menu-item, .current-menu-ancestor) > a {
		border-left: 3px solid var(--sk-home-accent) !important;
		padding-left: calc(1em - 3px) !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .sub-menu {
		background: rgba(255, 255, 255, 0.035) !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .sub-menu a {
		color: rgba(255, 255, 255, 0.72) !important;
		font-size: 0.82rem !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .sub-menu .current-menu-item > a,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .sub-menu a:hover,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu__nav .sub-menu a:focus-visible {
		color: var(--sk-home-accent) !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu .c-submenuToggleBtn,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu .c-submenuToggleBtn::before,
	.sekilog-site-chrome.sekilog-header-dark .p-spMenu .c-submenuToggleBtn::after {
		color: rgba(255, 255, 255, 0.80) !important;
		border-color: rgba(255, 255, 255, 0.80) !important;
	}

	.sekilog-site-chrome.sekilog-header-dark .p-spMenu :is(.c-iconBtn, .c-searchBtn, .p-spMenu__closeBtn) {
		color: #fff !important;
	}

	/* The mock's top utility row also works on mobile when kept extremely
	 * compact. Do not show long copy; the editable labels remain available. */
	.sekilog-header-dark .sk-site-utility {
		display: flex;
		min-height: 28px;
		gap: 10px;
		padding-inline: 12px;
	}

	.sekilog-header-dark .sk-site-utility__brand {
		max-width: 62vw;
		overflow: hidden;
		font-size: 0.56rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sekilog-header-dark .sk-site-utility__links {
		gap: 12px;
		font-size: 0.54rem;
	}
}

@media (max-width: 380px) {
	/* At very narrow widths, the utility bar stops adding value. */
	.sekilog-header-dark .sk-site-utility {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * v0.3.4 — header icon polish + utility accents + scalable Explore
 * -------------------------------------------------------------------------- */

/* Search/menu controls: some SWELL icon implementations use SVG/path fills
 * rather than inherited text color, so cover both icon-font and SVG variants. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn,
	.c-iconList
),
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn,
	.c-iconList
) :is(i, span, svg) {
	color: #fff !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn,
	.c-iconList
) svg,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn,
	.c-iconList
) svg * {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn
):is(:hover, :focus-visible),
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) :is(
	.l-header__menuBtn,
	.l-header__customBtn,
	.c-iconBtn,
	.c-searchBtn
):is(:hover, :focus-visible) :is(i, span, svg) {
	color: var(--sk-home-accent) !important;
}

/* The utility row is small enough that permanent lime social labels work as
 * a restrained brand accent without competing with the main navigation. */
.sekilog-header-dark .sk-site-utility__links a {
	color: var(--sk-home-accent) !important;
	transition: color 160ms ease, opacity 160ms ease;
}

.sekilog-header-dark .sk-site-utility__links a:hover,
.sekilog-header-dark .sk-site-utility__links a:focus-visible {
	color: #fff !important;
}

/* About buttons contain no arrow badge, so use symmetrical inline padding and
 * explicit centering rather than inheriting the CTA-with-arrow compensation. */
.sk-home-about__links .sk-home-button {
	justify-content: center;
	padding-inline: 16px;
	text-align: center;
}

/* Explore remains 3 columns for the original six-card layout. When editors add
 * a seventh card or more, switch to a balanced four-column desktop grid. */
.sk-home-category-list--many {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.sk-home-category-list--many {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sk-home-category-list--many {
		grid-template-columns: 1fr;
	}
}



/* --------------------------------------------------------------------------
 * v0.3.5 — target SWELL's actual search button + utility theme class
 * -------------------------------------------------------------------------- */

/* The utility bar is emitted directly from wp_body_open, before SWELL's
 * #body_wrap. Therefore body/wrapper theme classes are not its ancestors.
 * Use an explicit theme class on the utility nav itself. */
.sk-site-utility--dark .sk-site-utility__links a {
	color: var(--sk-home-accent) !important;
	transition: color 160ms ease, opacity 160ms ease;
}

.sk-site-utility--dark .sk-site-utility__links a:hover,
.sk-site-utility--dark .sk-site-utility__links a:focus-visible {
	color: #fff !important;
}

.sk-site-utility--light .sk-site-utility__links a {
	color: inherit;
}

/* Current SWELL desktop search button lives inside the global navigation as
 * .c-gnav__sBtn and uses the icon-search pseudo element. Target those exact
 * hooks instead of relying on the mobile/custom-button classes. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn .icon-search,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn .icon-search::before,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn::before {
	color: #fff !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn:is(:hover, :focus-visible),
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn:is(:hover, :focus-visible) .icon-search,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn:is(:hover, :focus-visible) .icon-search::before,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .c-gnav__sBtn:is(:hover, :focus-visible)::before {
	color: var(--sk-home-accent) !important;
}

/* Mobile SWELL search/custom icon: the visible glyph is commonly rendered by
 * .c-iconBtn__icon and its pseudo element. Keep the same white -> lime rule. */
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .l-header__customBtn .c-iconBtn__icon,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .l-header__customBtn .c-iconBtn__icon::before {
	color: #fff !important;
}

.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .l-header__customBtn:is(:hover, :focus-within) .c-iconBtn__icon,
.sekilog-site-chrome.sekilog-header-dark :is(#header, #fix_header) .l-header__customBtn:is(:hover, :focus-within) .c-iconBtn__icon::before {
	color: var(--sk-home-accent) !important;
}


/* -------------------------------------------------------------------------
 * v0.4.0 — automatic split YouTube feed
 * ---------------------------------------------------------------------- */
.sk-home-watch--split {
	display: grid;
	row-gap: clamp(42px, 5vw, 68px);
}

.sk-home-watch-group {
	display: grid;
	gap: 22px;
}

.sk-home-watch-group + .sk-home-watch-group {
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sk-home-watch-group__header {
	display: grid;
	gap: 6px;
}

.sk-home-watch-group__eyebrow,
.sk-home-watch-group__title {
	margin: 0;
}

.sk-home-watch-group__eyebrow {
	color: var(--sk-home-accent);
	font: 700 0.72rem/1.2 var(--sk-home-font-en);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.sk-home-watch-group__title {
	color: #fff;
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 1.3;
	letter-spacing: -0.025em;
}

.sk-home-video-long-list,
.sk-home-video-short-list {
	display: grid;
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-home-video-long-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-home-video-short-list--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sk-home-video-short-list--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sk-home-video-long-list > li,
.sk-home-video-short-list > li {
	min-width: 0;
	margin: 0;
}

.sk-home-video-card--long .sk-home-video-card__figure {
	aspect-ratio: 16 / 9;
}

.sk-home-video-card--short .sk-home-video-card__figure {
	aspect-ratio: 9 / 16;
}

.sk-home-video-card--long .sk-home-video-card__title {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.sk-home-video-card--short .sk-home-video-card__title {
	font-size: 0.98rem;
	line-height: 1.45;
}

.sk-home-video-card__date {
	display: block;
	margin-top: 2px;
	color: #73777f;
	font: 600 0.68rem/1.2 var(--sk-home-font-en);
	letter-spacing: 0.03em;
}

@media (max-width: 1023px) {
	.sk-home-video-long-list {
		grid-template-columns: 1fr;
	}

	.sk-home-video-short-list--4,
	.sk-home-video-short-list--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.sk-home-watch--split {
		row-gap: 36px;
	}

	.sk-home-watch-group + .sk-home-watch-group {
		padding-top: 30px;
	}

	.sk-home-video-long-list,
	.sk-home-video-short-list {
		gap: 14px;
	}

	.sk-home-video-short-list--4,
	.sk-home-video-short-list--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sk-home-video-card--short .sk-home-video-card__title {
		font-size: 0.9rem;
	}
}

/* --------------------------------------------------------------------------
 * v0.5.0 — Contact page redesign
 * -------------------------------------------------------------------------- */
.sekilog-contact-layout {
	background: var(--sk-home-bg);
}

.sekilog-contact-layout .c-pageTitle,
.sekilog-contact-layout #breadcrumb,
.sekilog-contact-layout .l-sidebar {
	display: none !important;
}

.sekilog-contact-layout .l-content,
.sekilog-contact-layout .l-mainContent,
.sekilog-contact-layout .l-mainContent__inner {
	width: 100% !important;
	max-width: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.sekilog-contact-layout .l-mainContent__inner > .post_content {
	width: 100% !important;
	max-width: none !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	background: var(--sk-home-bg) !important;
}

.sekilog-contact-layout .post_content > .wp-block-sekilog-contact-page {
	margin-block: 0 !important;
}

.sk-contact-page {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	color: var(--sk-home-ink);
	font-family: var(--sk-home-font);
	background: var(--sk-home-bg);
}

.sk-contact-page *,
.sekilog-contact-layout .wpforms-container * {
	box-sizing: border-box;
}

.sk-contact-page :is(h1, h2, h3, p, ul, ol, li, article, section, header, aside) {
	margin-top: 0;
}

.sekilog-contact-layout .post_content .sk-contact-page :is(h1, h2, h3) {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.sekilog-contact-layout .post_content .sk-contact-page :is(h1, h2, h3)::before,
.sekilog-contact-layout .post_content .sk-contact-page :is(h1, h2, h3)::after {
	content: none !important;
	display: none !important;
}

.sk-contact-hero,
.sk-contact-section {
	padding-inline: max(var(--sk-home-gutter), calc((100vw - var(--sk-home-max)) / 2));
}

.sk-contact-hero {
	padding-top: clamp(72px, 9vw, 116px);
	padding-bottom: clamp(68px, 8vw, 104px);
	background:
		radial-gradient(circle at 88% 15%, rgba(194,255,46,.12), transparent 28%),
		linear-gradient(180deg, #0b0d0f 0%, #111417 100%);
	color: #fff;
}

.sk-contact-eyebrow,
.sk-contact-section__eyebrow,
.sk-contact-service-card__code {
	margin: 0;
	font: 700 .72rem/1.2 var(--sk-home-font-en);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sk-contact-eyebrow,
.sk-contact-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sk-contact-eyebrow::before,
.sk-contact-section__eyebrow::before {
	content: "";
	width: 30px;
	height: 3px;
	border-radius: 999px;
	background: var(--sk-home-accent);
}

.sk-contact-eyebrow {
	color: rgba(255,255,255,.72);
}

.sk-contact-hero__title {
	width: 100%;
	max-width: none;
	margin-top: 20px !important;
	font-size: clamp(2.5rem, 5vw, 5.25rem);
	line-height: 1.08;
	letter-spacing: -.055em;
}

.sk-contact-hero__description {
	width: 100%;
	max-width: none;
	margin: 28px 0 0;
	color: rgba(255,255,255,.72);
	font-size: clamp(1rem, 1.5vw, 1.16rem);
	line-height: 1.9;
}

.sk-contact-notice {
	width: 100%;
	max-width: none;
	margin-top: 34px;
	padding: 18px 20px;
	border-left: 3px solid var(--sk-home-accent);
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.9);
}

.sk-contact-notice p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.75;
}

.sk-contact-section {
	padding-top: clamp(64px, 7vw, 92px);
	padding-bottom: clamp(64px, 7vw, 92px);
}

.sk-contact-section__head {
	width: 100%;
	max-width: none;
	margin-bottom: 32px;
}

.sk-contact-section__eyebrow {
	color: var(--sk-home-muted);
}

.sk-contact-section__head h2 {
	margin-top: 10px !important;
	font-size: clamp(1.8rem, 3.2vw, 2.75rem);
	line-height: 1.25;
	letter-spacing: -.04em;
}

.sk-contact-section__head > p:last-child:not(.sk-contact-section__eyebrow) {
	margin: 14px 0 0;
	color: var(--sk-home-muted);
	line-height: 1.85;
}

.sk-contact-services {
	background: var(--sk-home-bg);
}

.sk-contact-service-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-contact-service-list > li {
	min-width: 0;
	margin: 0;
}

.sk-contact-service-card {
	height: 100%;
	padding: 26px 24px 28px;
	border: 1px solid var(--sk-home-line);
	border-radius: var(--sk-home-radius);
	background: #fff;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sk-contact-service-card:hover {
	transform: translateY(-2px);
	border-color: rgba(194,255,46,.8);
	box-shadow: 0 18px 40px rgba(14,15,16,.06);
}

.sk-contact-service-card__code {
	color: var(--sk-home-muted);
}

.sk-contact-service-card h3 {
	margin-top: 24px !important;
	font-size: 1.25rem;
	line-height: 1.35;
}

.sk-contact-service-card > p:last-child {
	margin: 14px 0 0;
	color: var(--sk-home-muted);
	font-size: .93rem;
	line-height: 1.8;
}

.sk-contact-footnote {
	width: 100%;
	max-width: none;
	margin: 18px 0 0;
	padding: 0;
	color: var(--sk-home-muted);
	font-size: .88rem;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.sk-contact-footnote p {
	width: 100%;
	margin: 0;
	color: inherit;
	font: inherit;
}

.sk-contact-policy {
	background: #111417;
	color: #fff;
}

.sk-contact-policy .sk-contact-section__eyebrow {
	color: rgba(255,255,255,.55);
}

.sk-contact-policy-list {
	padding: 0;
	margin: 0;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,.12);
}

.sk-contact-policy-list li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 22px 0;
	margin: 0;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

.sk-contact-policy-list span {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--sk-home-accent);
	color: #0e0f10;
	font: 800 .72rem/1 var(--sk-home-font-en);
}

.sk-contact-policy-list p {
	margin: 4px 0 0;
	color: rgba(255,255,255,.82);
	line-height: 1.8;
}

.sk-contact-before {
	background: #fff;
}

.sk-contact-check-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sk-contact-check-list > li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 22px;
	margin: 0;
	border: 1px solid var(--sk-home-line);
	border-radius: 14px;
	background: var(--sk-home-bg);
}

.sk-contact-check-list__num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--sk-home-accent);
	color: #0e0f10;
	font: 800 .72rem/1 var(--sk-home-font-en);
}

.sk-contact-check-list h3 {
	font-size: 1rem;
	line-height: 1.4;
}

.sk-contact-check-list section p {
	margin: 8px 0 0;
	color: var(--sk-home-muted);
	font-size: .88rem;
	line-height: 1.7;
}

.sk-contact-form-intro {
	padding-bottom: clamp(72px, 8vw, 112px);
	background: var(--sk-home-bg);
}

.sk-contact-form-intro > .wpforms-container {
	width: 100%;
	max-width: none;
	margin: 32px auto 0 !important;
}

.sk-contact-form-missing {
	width: 100%;
	max-width: none;
	margin: 28px auto 0;
	padding: 16px 18px;
	border: 1px solid #efb0b0;
	border-radius: 12px;
	background: #fff4f4;
	color: #7d2525;
	font-size: .9rem;
}

/* WPForms functionality remains owned by WPForms; only presentation changes here. */
.sekilog-contact-layout .post_content > .wpforms-container,
.sekilog-contact-layout .post_content > .wp-block-wpforms-form-selector,
.sekilog-contact-layout .post_content > [class*="wpforms"] {
	width: calc(100% - 40px);
	max-width: 960px;
	margin: 0 auto clamp(72px, 8vw, 112px) !important;
}

.sekilog-contact-layout .wpforms-container {
	padding: clamp(24px, 4vw, 48px) !important;
	border: 1px solid var(--sk-home-line) !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 20px 60px rgba(14,15,16,.05) !important;
}

.sekilog-contact-layout .wpforms-container :is(label, .wpforms-field-label) {
	color: var(--sk-home-ink) !important;
	font-weight: 700 !important;
}

.sekilog-contact-layout .wpforms-container :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea) {
	width: 100% !important;
	min-height: 50px !important;
	padding: 12px 14px !important;
	border: 1px solid #d8dadd !important;
	border-radius: 10px !important;
	background: #fbfbf8 !important;
	color: var(--sk-home-ink) !important;
	box-shadow: none !important;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.sekilog-contact-layout .wpforms-container textarea {
	min-height: 180px !important;
	resize: vertical;
}

.sekilog-contact-layout .wpforms-container :is(input, select, textarea):focus {
	outline: none !important;
	border-color: var(--sk-home-accent) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(194,255,46,.18) !important;
}

.sekilog-contact-layout .wpforms-container .wpforms-required-label {
	color: #78a700 !important;
}

.sekilog-contact-layout .wpforms-container :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--sk-home-accent);
}

.sekilog-contact-layout .wpforms-container button[type="submit"],
.sekilog-contact-layout .wpforms-container input[type="submit"] {
	min-height: 52px !important;
	padding: 0 28px !important;
	border: 1px solid var(--sk-home-ink) !important;
	border-radius: 999px !important;
	background: var(--sk-home-ink) !important;
	color: #fff !important;
	font-weight: 800 !important;
	letter-spacing: .02em;
	box-shadow: none !important;
	transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sekilog-contact-layout .wpforms-container button[type="submit"]:hover,
.sekilog-contact-layout .wpforms-container button[type="submit"]:focus-visible,
.sekilog-contact-layout .wpforms-container input[type="submit"]:hover,
.sekilog-contact-layout .wpforms-container input[type="submit"]:focus-visible {
	border-color: var(--sk-home-accent) !important;
	background: var(--sk-home-accent) !important;
	color: #0e0f10 !important;
	transform: translateY(-1px);
}

@media (max-width: 1023px) {
	.sk-contact-service-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sk-contact-hero {
		padding-top: 54px;
		padding-bottom: 58px;
	}

	.sk-contact-hero__title {
		font-size: clamp(2.25rem, 11vw, 3.65rem);
	}

	.sk-contact-service-list,
	.sk-contact-check-list {
		grid-template-columns: 1fr;
	}

	.sk-contact-policy-list li,
	.sk-contact-check-list > li {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.sekilog-contact-layout .post_content > .wpforms-container,
	.sekilog-contact-layout .post_content > .wp-block-wpforms-form-selector,
	.sekilog-contact-layout .post_content > [class*="wpforms"] {
		width: calc(100% - 32px);
	}

	.sekilog-contact-layout .wpforms-container {
		padding: 20px !important;
		border-radius: 14px !important;
	}
}


/* --------------------------------------------------------------------------
 * v0.5.2 — Contact editor completeness + trailing artifact guard
 * The Contact Page block owns the whole page body, including WPForms.
 * Any legacy blocks left after it (old WPForms block, empty paragraph, spacer)
 * are hidden on the public Contact page so they cannot render white bands.
 * -------------------------------------------------------------------------- */
.sekilog-contact-layout .post_content > .wp-block-sekilog-contact-page ~ * {
	display: none !important;
}

/* The embedded WPForms instance stays inside the Contact block. */
.sekilog-contact-layout .wp-block-sekilog-contact-page .wpforms-container {
	display: block !important;
}

/* Preserve explicit line breaks entered in Gutenberg textareas without
 * introducing layout whitespace from the source code itself. */
.sk-contact-page :is(.sk-contact-hero__description, .sk-contact-notice p, .sk-contact-service-card > p:last-child, .sk-contact-footnote, .sk-contact-policy-list p, .sk-contact-check-list section p, .sk-contact-section__head > p:last-child) {
	white-space: normal;
}


/* --------------------------------------------------------------------------
 * v0.5.3 — Contact long-copy width + services note placement
 * Editable section copy uses the same full editorial content width.
 * Manual line breaks remain available from Gutenberg; long unbroken strings
 * can wrap safely without shrinking the text area.
 * -------------------------------------------------------------------------- */
.sk-contact-page :is(
	.sk-contact-hero__title,
	.sk-contact-hero__description,
	.sk-contact-notice,
	.sk-contact-section__head,
	.sk-contact-section__head > p,
	.sk-contact-footnote,
	.sk-contact-footnote p,
	.sk-contact-form-missing
) {
	width: 100%;
	max-width: none;
	overflow-wrap: anywhere;
}

.sk-contact-page :is(
	.sk-contact-hero__description,
	.sk-contact-notice p,
	.sk-contact-section__head > p:not(.sk-contact-section__eyebrow),
	.sk-contact-footnote p,
	.sk-contact-policy-list p,
	.sk-contact-check-list section p
) {
	white-space: normal;
}

.sk-contact-services .sk-contact-section__head {
	margin-bottom: 34px;
}


/* --------------------------------------------------------------------------
 * v0.5.5 — Contact main-content ownership / trailing artifact fix
 * The dedicated Contact block owns the full visible page body. SWELL renders
 * page-level elements after .post_content (pagination, page-bottom widgets,
 * share blocks, etc.) inside .l-mainContent__inner. Hide every direct child
 * except .post_content on the Contact layout. Also suppress clearfix/pseudo
 * artifacts on the main-content wrapper.
 * -------------------------------------------------------------------------- */
.sekilog-contact-layout .l-mainContent__inner > :not(.post_content) {
	display: none !important;
}

.sekilog-contact-layout .l-mainContent__inner::before,
.sekilog-contact-layout .l-mainContent__inner::after {
	content: none !important;
	display: none !important;
}

.sekilog-contact-layout .w-pageBottom,
.sekilog-contact-layout .c-pagination.-post,
.sekilog-contact-layout #after_article,
.sekilog-contact-layout .l-articleBottom,
.sekilog-contact-layout .w-beforeFooter {
	display: none !important;
}

.sekilog-contact-layout :is(.l-content, .l-mainContent, .l-mainContent__inner, .post_content) {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
 * v0.6.0 — responsive system overhaul
 * --------------------------------------------------------------------------
 * Mobile must not behave like a compressed desktop canvas. SEKILOG landing
 * and Contact pages use one explicit viewport-width contract below 768px:
 * SWELL's content wrappers lose their own horizontal gutters, and each
 * semantic SEKILOG section owns a consistent 16–20px safe gutter instead.
 * Desktop styling remains unchanged.
 */
@media (max-width: 1023px) {
	:root {
		--sk-home-section-y: clamp(52px, 7vw, 68px);
		--sk-home-gap: 18px;
	}

	/* Tablet editorial rhythm. */
	.sk-home-section-head {
		gap: 16px;
		margin-bottom: 26px;
	}

	.sk-home-section-head__description {
		font-size: 0.92rem;
		line-height: 1.75;
	}

	.sk-contact-hero,
	.sk-contact-section {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 767px) {
	:root {
		--sk-home-section-y: 48px;
		--sk-home-gap: 16px;
		--sk-home-radius: 14px;
	}

	/* ------------------------------------------------------------------
	 * SWELL wrapper normalization
	 * ------------------------------------------------------------------ */
	.sekilog-home-layout :is(.l-content, .l-mainContent, .l-mainContent__inner, .post_content),
	.sekilog-contact-layout :is(.l-content, .l-mainContent, .l-mainContent__inner, .post_content) {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Once the parent canvas is genuinely viewport-wide, the SEKILOG blocks
	 * no longer need the desktop breakout calculation on mobile. */
	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-page {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-hero,
	.sk-contact-section {
		padding-left: max(16px, env(safe-area-inset-left)) !important;
		padding-right: max(16px, env(safe-area-inset-right)) !important;
	}

	/* ------------------------------------------------------------------
	 * Shared homepage typography and spacing
	 * ------------------------------------------------------------------ */
	.sk-home-hero {
		gap: 24px;
		padding-top: 24px;
		padding-bottom: 42px;
	}

	.sk-home-section,
	.sk-home-explore {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.sk-home-section-head {
		gap: 10px;
		margin-bottom: 22px;
	}

	.sk-home-section-head__copy {
		width: 100%;
	}

	.sk-home-section-head__eyebrow {
		font-size: 0.66rem;
		letter-spacing: 0.08em;
	}

	.sk-home-section-head__title {
		font-size: clamp(1.5rem, 6.6vw, 1.82rem);
		line-height: 1.28;
		letter-spacing: -0.035em;
	}

	.sk-home-section-head__description {
		margin-top: 6px;
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.sk-home-button {
		min-height: 42px;
		padding: 8px 9px 8px 14px;
		font-size: 0.7rem;
	}

	/* Hero */
	.sk-home-card--hero {
		gap: 8px;
	}

	.sk-home-card--hero .sk-home-card__figure {
		aspect-ratio: 16 / 10;
	}

	.sk-home-card--hero .sk-home-card__title {
		font-size: clamp(1.65rem, 7.2vw, 2rem);
		line-height: 1.27;
		letter-spacing: -0.045em;
	}

	.sk-home-card--hero .sk-home-card__excerpt {
		margin-top: 2px;
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.sk-home-card--hero .sk-home-card__meta {
		margin-top: 2px;
	}

	.sk-home-hero__secondary {
		gap: 22px;
	}

	.sk-home-card--hero-side .sk-home-card__figure,
	.sk-home-card--feature-side .sk-home-card__figure {
		aspect-ratio: 16 / 9;
	}

	/* Cards: keep readable without desktop-sized headings. */
	.sk-home-card {
		gap: 8px;
	}

	.sk-home-card__title,
	.sk-home-card--story .sk-home-card__title,
	.sk-home-card--select .sk-home-card__title,
	.sk-home-card--feature-lead .sk-home-card__title {
		font-size: 0.98rem;
		line-height: 1.48;
		letter-spacing: -0.018em;
	}

	.sk-home-card__excerpt {
		font-size: 0.88rem;
		line-height: 1.68;
	}

	.sk-home-card__meta {
		font-size: 0.64rem;
	}

	.sk-home-post-list,
	.sk-home-curated-list,
	.sk-home-smartphone__secondary {
		gap: 22px;
	}

	/* Explore remains compact and tappable on phones. */
	.sk-home-category-list,
	.sk-home-category-list--many {
		gap: 10px;
	}

	.sk-home-category-card {
		min-height: 64px;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 12px;
	}

	.sk-home-category-card__code {
		font-size: 0.6rem;
	}

	.sk-home-category-card__label {
		font-size: 0.9rem;
		line-height: 1.35;
	}

	/* WATCH */
	.sk-home-watch--split {
		row-gap: 34px;
	}

	.sk-home-watch-group {
		gap: 16px;
	}

	.sk-home-watch-group + .sk-home-watch-group {
		padding-top: 28px;
	}

	.sk-home-watch-group__title {
		font-size: 1.25rem;
	}

	.sk-home-video-long-list,
	.sk-home-video-short-list {
		gap: 12px;
	}

	.sk-home-video-card--long .sk-home-video-card__title {
		font-size: 0.98rem;
		line-height: 1.45;
	}

	.sk-home-video-card--short .sk-home-video-card__title {
		font-size: 0.82rem;
		line-height: 1.45;
	}

	.sk-home-video-card__label,
	.sk-home-video-card__date {
		font-size: 0.62rem;
	}

	/* About: compact editorial identity instead of a large vertical stack. */
	.sk-home-about {
		grid-template-columns: 84px minmax(0, 1fr);
		align-items: start;
		gap: 16px;
	}

	.sk-home-about__visual {
		width: 84px;
		height: 84px;
	}

	.sk-home-about__title {
		font-size: 1.35rem;
		line-height: 1.35;
	}

	.sk-home-about__description {
		font-size: 0.88rem;
		line-height: 1.7;
	}

	.sk-home-about__links {
		gap: 8px;
	}

	/* ------------------------------------------------------------------
	 * Contact mobile system
	 * ------------------------------------------------------------------ */
	.sk-contact-hero {
		padding-top: 46px;
		padding-bottom: 50px;
	}

	.sk-contact-eyebrow,
	.sk-contact-section__eyebrow {
		gap: 8px;
		font-size: 0.66rem;
	}

	.sk-contact-eyebrow::before,
	.sk-contact-section__eyebrow::before {
		width: 24px;
	}

	.sk-contact-hero__title {
		margin-top: 14px !important;
		font-size: clamp(1.9rem, 7.8vw, 2.35rem);
		line-height: 1.14;
		letter-spacing: -0.045em;
		overflow-wrap: anywhere;
	}

	.sk-contact-hero__description {
		margin-top: 18px;
		font-size: 0.92rem;
		line-height: 1.75;
	}

	.sk-contact-notice {
		margin-top: 20px;
		padding: 14px 16px;
	}

	.sk-contact-notice p {
		font-size: 0.85rem;
		line-height: 1.7;
	}

	.sk-contact-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.sk-contact-section__head {
		margin-bottom: 24px;
	}

	.sk-contact-section__head h2 {
		margin-top: 8px !important;
		font-size: clamp(1.65rem, 6.8vw, 1.95rem);
		line-height: 1.25;
		letter-spacing: -0.035em;
	}

	.sk-contact-section__head > p:last-child:not(.sk-contact-section__eyebrow),
	.sk-contact-footnote {
		margin-top: 10px;
		font-size: 0.88rem;
		line-height: 1.75;
	}

	.sk-contact-service-list {
		gap: 12px;
	}

	.sk-contact-service-card {
		padding: 20px 18px 22px;
		border-radius: 14px;
	}

	.sk-contact-service-card h3 {
		margin-top: 10px !important;
		font-size: 1.12rem;
		line-height: 1.35;
	}

	.sk-contact-service-card > p:last-child {
		margin-top: 10px;
		font-size: 0.88rem;
		line-height: 1.7;
	}

	.sk-contact-policy-list li {
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 12px;
		padding: 18px 0;
	}

	.sk-contact-policy-list span {
		width: 32px;
		height: 32px;
		font-size: 0.65rem;
	}

	.sk-contact-policy-list p {
		margin-top: 2px;
		font-size: 0.87rem;
		line-height: 1.72;
	}

	.sk-contact-check-list {
		gap: 10px;
	}

	.sk-contact-check-list > li {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 12px;
		padding: 16px;
		border-radius: 12px;
	}

	.sk-contact-check-list__num {
		width: 32px;
		height: 32px;
		font-size: 0.65rem;
	}

	.sk-contact-check-list h3 {
		font-size: 0.94rem;
	}

	.sk-contact-check-list section p {
		margin-top: 5px;
		font-size: 0.82rem;
		line-height: 1.65;
	}

	.sk-contact-form-intro {
		padding-bottom: 56px;
	}

	.sk-contact-form-intro > .wpforms-container,
	.sekilog-contact-layout .wp-block-sekilog-contact-page .wpforms-container {
		width: 100% !important;
		max-width: none !important;
		margin-top: 22px !important;
		padding: 18px !important;
		border-radius: 14px !important;
	}

	.sekilog-contact-layout .wpforms-container :is(label, .wpforms-field-label) {
		font-size: 0.88rem !important;
	}

	.sekilog-contact-layout .wpforms-container :is(
		input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
		input[type="number"], select, textarea
	) {
		min-height: 46px !important;
		padding: 11px 12px !important;
		border-radius: 9px !important;
		font-size: 16px !important; /* prevents iOS focus zoom */
	}

	.sekilog-contact-layout .wpforms-container textarea {
		min-height: 150px !important;
	}

	.sekilog-contact-layout .wpforms-container button[type="submit"],
	.sekilog-contact-layout .wpforms-container input[type="submit"] {
		min-height: 48px !important;
		padding-inline: 22px !important;
	}
}

@media (max-width: 420px) {
	/* Very narrow Android/iPhone widths need a little more restraint. */
	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-hero,
	.sk-contact-section {
		padding-left: max(14px, env(safe-area-inset-left)) !important;
		padding-right: max(14px, env(safe-area-inset-right)) !important;
	}

	.sk-home-card--hero .sk-home-card__title {
		font-size: 1.58rem;
	}

	.sk-home-section-head__title {
		font-size: 1.46rem;
	}

	.sk-contact-hero__title {
		font-size: 1.85rem;
	}

	.sk-contact-section__head h2 {
		font-size: 1.6rem;
	}

	.sk-home-about {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
	}

	.sk-home-about__visual {
		width: 72px;
		height: 72px;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.1 — definitive mobile layout + mobile chrome
 * --------------------------------------------------------------------------
 * Do not rely on SWELL's responsive flex distribution for the mobile header.
 * The three controls are anchored to one 60px header axis: menu / centered
 * logo / search. Landing-page sections are also re-centered against the
 * viewport so parent-theme gutters cannot leave an asymmetric canvas.
 */
@media (max-width: 959px) {
	/* Mobile utility bar adds height without enough value. The main header is
	 * the single navigation surface on phones/tablets. */
	.sk-site-utility {
		display: none !important;
	}

	.sekilog-site-chrome #header.l-header {
		position: relative !important;
		height: 60px !important;
		min-height: 60px !important;
	}

	.sekilog-site-chrome #header .l-header__inner {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 60px !important;
		min-height: 60px !important;
		margin: 0 !important;
		padding: 0 12px !important;
	}

	/* True optical/viewport center, independent of menu/search widths. */
	.sekilog-site-chrome #header .l-header__logo {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		z-index: 3 !important;
		display: flex !important;
		width: auto !important;
		height: auto !important;
		max-width: calc(100% - 124px) !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		transform: translate(-50%, -50%) !important;
	}

	.sekilog-site-chrome #header .c-headLogo,
	.sekilog-site-chrome #header .c-headLogo__link {
		display: flex !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.sekilog-site-chrome #header .c-headLogo__img {
		display: block !important;
		width: auto !important;
		max-width: min(154px, 42vw) !important;
		height: auto !important;
		max-height: 29px !important;
		margin: 0 !important;
	}

	/* Menu left / search right. Their visual boxes are identical. */
	.sekilog-site-chrome #header .l-header__menuBtn,
	.sekilog-site-chrome #header .l-header__customBtn {
		position: absolute !important;
		top: 50% !important;
		z-index: 4 !important;
		display: grid !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		place-items: center !important;
		align-self: auto !important;
		transform: translateY(-50%) !important;
	}

	.sekilog-site-chrome #header .l-header__menuBtn {
		left: 8px !important;
		right: auto !important;
	}

	.sekilog-site-chrome #header .l-header__customBtn {
		right: 8px !important;
		left: auto !important;
	}

	.sekilog-site-chrome #header :is(.l-header__menuBtn, .l-header__customBtn) .c-iconBtn {
		display: grid !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		place-items: center !important;
	}

	.sekilog-site-chrome #header :is(.l-header__menuBtn, .l-header__customBtn) .c-iconBtn__label {
		display: none !important;
	}

	/* Replace SWELL's hamburger glyph with a compact two-line mark while
	 * retaining SWELL's original clickable button and JS behavior. */
	.sekilog-site-chrome #header .l-header__menuBtn .c-iconBtn__icon {
		position: relative !important;
		display: block !important;
		width: 22px !important;
		height: 14px !important;
		font-size: 0 !important;
		line-height: 0 !important;
		color: transparent !important;
	}

	.sekilog-site-chrome #header .l-header__menuBtn .c-iconBtn__icon::before {
		content: "" !important;
		position: absolute !important;
		top: 2px !important;
		left: 0 !important;
		display: block !important;
		width: 22px !important;
		height: 2px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #fff !important;
		box-shadow: 0 8px 0 #fff !important;
		transform: none !important;
	}

	.sekilog-site-chrome #header .l-header__menuBtn .c-iconBtn__icon::after {
		content: none !important;
		display: none !important;
	}

	/* Full-screen editorial mobile drawer. */
	.sekilog-site-chrome .p-spMenu__inner {
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		background: #0b0d0f !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.sekilog-site-chrome .p-spMenu__body {
		box-sizing: border-box !important;
		width: 100% !important;
		padding: 68px 22px 36px !important;
		background: transparent !important;
	}

	.sekilog-site-chrome .p-spMenu__overlay {
		background: rgba(0, 0, 0, .48) !important;
	}

	/* Remove SWELL's stock blue MENU title panel. */
	.sekilog-site-chrome .p-spMenu .c-widget__title.-spmenu {
		display: none !important;
	}

	.sekilog-site-chrome .p-spMenu__nav {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .c-gnav,
	.sekilog-site-chrome .p-spMenu__nav .c-gnav ul {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .c-gnav > .menu-item {
		margin: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.11) !important;
		background: transparent !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .c-gnav > .menu-item > a {
		min-height: 52px !important;
		padding: 14px 4px !important;
		color: rgba(255,255,255,.94) !important;
		font-family: var(--sk-home-font-en) !important;
		font-size: 1rem !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
		letter-spacing: .02em !important;
		text-transform: none !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .sub-menu {
		margin: 0 0 8px 12px !important;
		padding: 2px 0 4px 16px !important;
		border-left: 2px solid rgba(194,255,46,.45) !important;
		background: transparent !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .sub-menu > .menu-item {
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .sub-menu a {
		min-height: 42px !important;
		padding: 10px 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: rgba(255,255,255,.72) !important;
		font-size: .86rem !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}

	.sekilog-site-chrome .p-spMenu__nav .c-gnav > :is(.current-menu-item,.current-menu-ancestor) > a,
	.sekilog-site-chrome .p-spMenu__nav a:is(:hover,:focus-visible) {
		color: var(--sk-home-accent) !important;
	}

	.sekilog-site-chrome .p-spMenu .c-submenuToggleBtn {
		width: 42px !important;
		height: 42px !important;
		color: rgba(255,255,255,.7) !important;
	}

	.sekilog-site-chrome .p-spMenu .p-spMenu__closeBtn,
	.sekilog-site-chrome .p-spMenu .c-iconBtn.-menuBtn {
		position: absolute !important;
		top: 10px !important;
		right: 10px !important;
		z-index: 5 !important;
		display: grid !important;
		width: 44px !important;
		height: 44px !important;
		place-items: center !important;
		color: #fff !important;
	}
}

@media (max-width: 767px) {
	/* Re-center every SEKILOG full-bleed block against the actual viewport.
	 * This is deliberately independent from SWELL's mobile container gutters. */
	.sekilog-home-layout,
	.sekilog-contact-layout {
		overflow-x: clip !important;
	}

	.sekilog-home-layout .post_content,
	.sekilog-contact-layout .post_content {
		position: relative !important;
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-page {
		position: relative !important;
		left: 50% !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
	}

	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-hero,
	.sk-contact-section {
		padding-left: max(16px, env(safe-area-inset-left)) !important;
		padding-right: max(16px, env(safe-area-inset-right)) !important;
	}

	.sk-home-hero > *,
	.sk-home-section > *,
	.sk-home-explore > *,
	.sk-contact-page > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.sk-home-hero img,
	.sk-home-section img,
	.sk-home-explore img,
	.sk-contact-page img {
		max-width: 100% !important;
	}

	/* About should finish tightly; the footer follows immediately after it. */
	.sk-home-about {
		padding-top: 36px !important;
		padding-bottom: 28px !important;
	}

	.sk-home-about__copy,
	.sk-home-about__links {
		margin-bottom: 0 !important;
	}

	.sk-home-about__links .sk-home-button {
		margin-bottom: 0 !important;
	}
}

@media (max-width: 420px) {
	.sk-home-hero,
	.sk-home-section,
	.sk-home-explore,
	.sk-contact-hero,
	.sk-contact-section {
		padding-left: max(14px, env(safe-area-inset-left)) !important;
		padding-right: max(14px, env(safe-area-inset-right)) !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.2 — mobile layout truth + dedicated left drawer
 * --------------------------------------------------------------------------
 * The remaining mobile offset was not the full-bleed section itself. SWELL's
 * .post_content list rules have higher specificity than the component list
 * rules and were re-introducing left padding on semantic ul/ol containers.
 * Reset those lists within the SEKILOG namespace, then let every card occupy
 * the same content line as its section heading.
 */
@media (max-width: 767px) {
	.sekilog-home-layout .post_content :is(
		.sk-home-post-list,
		.sk-home-category-list,
		.sk-home-category-list--many,
		.sk-home-curated-list,
		.sk-home-video-list,
		.sk-home-video-long-list,
		.sk-home-video-short-list
	),
	.sekilog-contact-layout .post_content :is(
		.sk-contact-service-list,
		.sk-contact-policy-list,
		.sk-contact-check-list
	) {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.sekilog-home-layout .post_content :is(
		.sk-home-post-list,
		.sk-home-category-list,
		.sk-home-category-list--many,
		.sk-home-curated-list,
		.sk-home-video-list,
		.sk-home-video-long-list,
		.sk-home-video-short-list
	) > li,
	.sekilog-contact-layout .post_content :is(
		.sk-contact-service-list,
		.sk-contact-policy-list,
		.sk-contact-check-list
	) > li {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* The section itself is already visually full-bleed in v0.6.1. Do not
	 * apply any further child indentation on mobile. */
	.sk-home-section > :is(
		.sk-home-post-list,
		.sk-home-category-list,
		.sk-home-category-list--many,
		.sk-home-curated-list,
		.sk-home-video-long-list,
		.sk-home-video-short-list
	) {
		justify-self: stretch !important;
		align-self: stretch !important;
	}

	/* About is the final editorial block. Keep the CTA close to the footer and
	 * eliminate SWELL's residual bottom canvas on the homepage. */
	.sk-home-about {
		padding-top: 26px !important;
		padding-bottom: 14px !important;
		row-gap: 12px !important;
	}

	.sk-home-about__copy {
		gap: 8px !important;
	}

	.sk-home-about__links {
		margin-top: 2px !important;
	}

	.sekilog-home-layout :is(#content, #main_content, .l-content, .l-mainContent, .l-mainContent__inner, .post_content) {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* Mobile header: remove every SWELL-only band that can survive when a desktop
 * window crosses the mobile breakpoint. This prevents the white strip seen
 * above the black header during responsive resizing. */
@media (max-width: 959px) {
	.sekilog-site-chrome #header :is(
		.l-header__bar,
		.l-header__spNav,
		.l-header__gnav,
		.w-header
	) {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.sekilog-site-chrome #fix_header {
		display: none !important;
	}

	.sekilog-site-chrome #header,
	.sekilog-site-chrome #header .l-header__inner {
		border: 0 !important;
		background: #0b0d0f !important;
		box-shadow: none !important;
	}

	/* The custom trigger is inserted only after the dedicated drawer has been
	 * built. Until then SWELL's original button remains as the no-JS fallback. */
	.sk-mobile-menu-trigger {
		display: none;
	}

	html.sk-mobile-nav-ready .sekilog-site-chrome #header .l-header__menuBtn {
		display: none !important;
	}

	html.sk-mobile-nav-ready .sekilog-site-chrome #sp_menu.p-spMenu {
		display: none !important;
	}

	html.sk-mobile-nav-ready .sekilog-site-chrome #header .sk-mobile-menu-trigger {
		position: absolute;
		top: 50%;
		left: 8px;
		z-index: 6;
		display: grid;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		place-items: center;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		transform: translateY(-50%);
	}

	.sk-mobile-menu-trigger > span,
	.sk-mobile-menu-trigger > span::before {
		display: block;
		width: 21px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
	}

	.sk-mobile-menu-trigger > span {
		position: relative;
	}

	.sk-mobile-menu-trigger > span::before {
		content: "";
		position: absolute;
		top: 7px;
		left: 0;
	}

	.sk-mobile-menu-trigger:is(:hover, :focus-visible) {
		color: var(--sk-home-accent);
	}

	.sk-mobile-menu-trigger:focus-visible,
	.sk-mobile-drawer button:focus-visible,
	.sk-mobile-drawer a:focus-visible {
		outline: 2px solid var(--sk-home-accent);
		outline-offset: 3px;
	}
}

/* Dedicated mobile navigation ------------------------------------------------
 * The menu button sits on the left, so the navigation enters from the left.
 * SWELL's stock drawer remains untouched as a no-JS fallback and is hidden
 * only after JS successfully builds this semantic aside/nav structure.
 */
.sk-mobile-drawer,
.sk-mobile-drawer__backdrop {
	display: none;
}

@media (max-width: 959px) {
	html.sk-mobile-nav-ready .sk-mobile-drawer__backdrop {
		position: fixed;
		inset: 0;
		z-index: 99997;
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		background: rgba(0, 0, 0, 0.54);
		opacity: 0;
		pointer-events: none;
		transition: opacity 260ms ease;
	}

	html.sk-mobile-nav-ready .sk-mobile-drawer {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99998;
		display: flex;
		width: min(88vw, 380px);
		max-width: calc(100vw - 44px);
		flex-direction: column;
		overflow: hidden;
		background: #0b0d0f;
		color: #fff;
		box-shadow: 20px 0 60px rgba(0, 0, 0, 0.32);
		transform: translate3d(-102%, 0, 0);
		visibility: hidden;
		transition:
			transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 320ms;
		will-change: transform;
	}

	body.admin-bar .sk-mobile-drawer {
		top: 32px;
	}

	body.sk-mobile-nav-open {
		overflow: hidden;
		touch-action: none;
	}

	body.sk-mobile-nav-open .sk-mobile-drawer__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	body.sk-mobile-nav-open .sk-mobile-drawer {
		transform: translate3d(0, 0, 0);
		visibility: visible;
		transition:
			transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0s;
	}

	.sk-mobile-drawer__header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 44px;
		align-items: center;
		min-height: 64px;
		padding: 8px 10px 8px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.sk-mobile-drawer__logo {
		display: inline-flex;
		width: fit-content;
		max-width: 160px;
		align-items: center;
	}

	.sk-mobile-drawer__logo img {
		display: block;
		width: auto;
		max-width: 150px;
		height: auto;
		max-height: 28px;
		filter: brightness(0) invert(1);
	}

	.sk-mobile-drawer__close {
		position: relative;
		display: grid;
		width: 44px;
		height: 44px;
		place-items: center;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.sk-mobile-drawer__close > span,
	.sk-mobile-drawer__close > span::before {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
	}

	.sk-mobile-drawer__close > span {
		transform: rotate(45deg);
	}

	.sk-mobile-drawer__close > span::before {
		content: "";
		transform: rotate(90deg);
	}

	.sk-mobile-drawer__nav {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px 18px max(32px, env(safe-area-inset-bottom));
	}

	.sk-mobile-drawer__nav :is(ul, li) {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.sk-mobile-drawer__nav .sk-mobile-drawer__list > li {
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.sk-mobile-drawer__nav .sk-mobile-drawer__list > li > a {
		display: flex;
		min-height: 52px;
		align-items: center;
		padding: 13px 46px 13px 2px !important;
		border: 0 !important;
		background: transparent !important;
		color: rgba(255, 255, 255, 0.94) !important;
		font-family: var(--sk-home-font-en) !important;
		font-size: 1rem !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
		text-decoration: none !important;
	}

	.sk-mobile-drawer__nav .sk-mobile-drawer__list > li.current-menu-item > a,
	.sk-mobile-drawer__nav .sk-mobile-drawer__list > li.current-menu-ancestor > a,
	.sk-mobile-drawer__nav a:is(:hover, :focus-visible) {
		color: var(--sk-home-accent) !important;
	}

	.sk-mobile-drawer__submenu-toggle {
		position: absolute;
		top: 4px;
		right: 0;
		display: grid;
		width: 44px;
		height: 44px;
		place-items: center;
		border: 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.7);
		cursor: pointer;
	}

	.sk-mobile-drawer__submenu-toggle > span {
		display: block;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 180ms ease;
	}

	.sk-mobile-drawer__submenu-toggle[aria-expanded="true"] > span {
		transform: translateY(2px) rotate(225deg);
	}

	.sk-mobile-drawer__submenu[hidden] {
		display: none !important;
	}

	.sk-mobile-drawer__submenu {
		margin: 0 0 10px 2px !important;
		padding: 2px 0 5px 16px !important;
		border-left: 2px solid rgba(194, 255, 46, 0.42);
	}

	.sk-mobile-drawer__submenu li {
		border: 0 !important;
	}

	.sk-mobile-drawer__submenu a {
		display: flex;
		min-height: 40px;
		align-items: center;
		padding: 9px 8px !important;
		border: 0 !important;
		background: transparent !important;
		color: rgba(255, 255, 255, 0.72) !important;
		font-size: 0.86rem !important;
		font-weight: 600 !important;
		line-height: 1.45 !important;
		text-decoration: none !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar .sk-mobile-drawer {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-mobile-drawer,
	.sk-mobile-drawer__backdrop,
	.sk-mobile-drawer__submenu-toggle > span {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.3 — clean mobile drawer DOM
 * --------------------------------------------------------------------------
 * The drawer now builds a fresh semantic list instead of cloning SWELL's
 * .c-gnav classes. These rules are deliberately self-contained so desktop
 * navigation declarations cannot influence the off-canvas menu.
 */
@media (max-width: 959px) {
	html.sk-mobile-nav-ready .sk-mobile-drawer {
		width: min(86vw, 360px);
		max-width: calc(100vw - 52px);
	}

	.sk-mobile-drawer__nav {
		display: block !important;
		padding: 10px 18px max(28px, env(safe-area-inset-bottom)) !important;
	}

	.sk-mobile-drawer__list,
	.sk-mobile-drawer__submenu {
		position: static !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		transform: none !important;
		list-style: none !important;
	}

	.sk-mobile-drawer__item {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		transform: none !important;
		border: 0 !important;
	}

	.sk-mobile-drawer__list > .sk-mobile-drawer__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
	}

	.sk-mobile-drawer__item > a {
		position: static !important;
		display: flex !important;
		width: 100% !important;
		height: auto !important;
		min-height: 52px !important;
		margin: 0 !important;
		padding: 13px 48px 13px 2px !important;
		align-items: center !important;
		justify-content: flex-start !important;
		float: none !important;
		transform: none !important;
		border: 0 !important;
		background: transparent !important;
		color: rgba(255,255,255,.94) !important;
		font-family: var(--sk-home-font-en) !important;
		font-size: 1rem !important;
		font-weight: 700 !important;
		line-height: 1.35 !important;
		text-align: left !important;
		text-decoration: none !important;
	}

	.sk-mobile-drawer__item.is-current > a,
	.sk-mobile-drawer__item > a:is(:hover, :focus-visible) {
		color: var(--sk-home-accent) !important;
	}

	.sk-mobile-drawer__submenu-toggle {
		top: 4px !important;
		right: 0 !important;
	}

	.sk-mobile-drawer__submenu {
		margin: 0 0 10px 2px !important;
		padding: 2px 0 6px 14px !important;
		border-left: 2px solid rgba(194,255,46,.42) !important;
	}

	.sk-mobile-drawer__submenu .sk-mobile-drawer__item > a {
		min-height: 42px !important;
		padding: 9px 40px 9px 10px !important;
		color: rgba(255,255,255,.74) !important;
		font-family: var(--sk-home-font-jp) !important;
		font-size: .88rem !important;
		font-weight: 600 !important;
	}

	html.sk-mobile-nav-open,
	body.sk-mobile-nav-open {
		overflow: hidden !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.4 — mobile breathing room below the site header
 * --------------------------------------------------------------------------
 * Keep the first editorial image from visually touching the black mobile
 * header. Scoped to the SEKILOG homepage only; desktop remains unchanged.
 */
@media (max-width: 767px) {
	.sekilog-home-layout .post_content > .sk-home-hero {
		padding-top: 20px !important;
	}
}

@media (max-width: 420px) {
	.sekilog-home-layout .post_content > .sk-home-hero {
		padding-top: 18px !important;
	}
}



/* --------------------------------------------------------------------------
 * v0.6.5 — mobile header flow fix
 * --------------------------------------------------------------------------
 * SWELL offsets the header by the WP admin-bar height in some logged-in/mobile
 * states. Once SEKILOG changes the mobile header to position:relative, that
 * residual top offset visually moves the header down without reserving space,
 * leaving a white strip above it and causing the header to overlap the Hero.
 * Reset the positional offset so the header participates in normal document
 * flow; the Hero's own 18–20px top padding can then create the intended gap.
 */
@media (max-width: 959px) {
	.sekilog-site-chrome #header.l-header {
		top: 0 !important;
		inset-block-start: 0 !important;
		bottom: auto !important;
		margin-top: 0 !important;
		transform: none !important;
	}

	/* The inner row must not inherit any admin-bar compensation either. */
	.sekilog-site-chrome #header .l-header__inner {
		top: 0 !important;
		inset-block-start: 0 !important;
		margin-top: 0 !important;
		transform: none !important;
	}
}


/* --------------------------------------------------------------------------
 * v0.6.6 — WATCH density + horizontal Shorts rail + YouTube CTA
 * ----------------------------------------------------------------------- */
.sk-home-watch--split {
	row-gap: clamp(24px, 2.5vw, 34px) !important;
}

.sk-home-watch .sk-home-section-head {
	margin-bottom: 0 !important;
}

.sk-home-watch .sk-home-section-head__description {
	margin-top: 6px !important;
}

.sk-home-watch-group {
	gap: 12px !important;
}

.sk-home-watch-group + .sk-home-watch-group {
	padding-top: clamp(20px, 2vw, 28px) !important;
}

.sk-home-watch-group__header {
	gap: 4px !important;
}

.sk-home-watch-group__title {
	font-size: clamp(1.25rem, 1.7vw, 1.55rem) !important;
}

/* Keep the channel CTA visible even when earlier block data had an empty label. */
.sk-home-watch .sk-home-button {
	align-self: flex-end;
	white-space: nowrap;
}

/* Shorts become a horizontally scrollable rail. The next card remains partly
 * visible, so the interaction is discoverable without extra JS controls. */
.sk-home-video-short-list,
.sk-home-video-short-list--4,
.sk-home-video-short-list--5,
.sk-home-video-short-list--6,
.sk-home-video-short-list--8 {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 16px !important;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 0 12px !important;
	margin: 0 !important;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.sk-home-video-short-list > li {
	flex: 0 0 clamp(210px, 20vw, 260px) !important;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

.sk-home-video-short-list {
	scrollbar-width: thin;
	scrollbar-color: var(--sk-home-accent) rgba(255,255,255,.10);
}

.sk-home-video-short-list::-webkit-scrollbar {
	height: 7px;
}

.sk-home-video-short-list::-webkit-scrollbar-track {
	background: rgba(255,255,255,.08);
	border-radius: 999px;
}

.sk-home-video-short-list::-webkit-scrollbar-thumb {
	background: var(--sk-home-accent);
	border-radius: 999px;
}

@media (max-width: 767px) {
	.sk-home-watch--split {
		row-gap: 22px !important;
	}

	.sk-home-watch-group {
		gap: 10px !important;
	}

	.sk-home-watch-group + .sk-home-watch-group {
		padding-top: 18px !important;
	}

	.sk-home-watch .sk-home-section-head {
		align-items: flex-start;
		gap: 14px;
	}

	.sk-home-watch .sk-home-button {
		align-self: flex-start;
	}

	.sk-home-video-short-list > li {
		flex-basis: min(68vw, 250px) !important;
	}
}

@media (max-width: 420px) {
	.sk-home-video-short-list > li {
		flex-basis: min(72vw, 245px) !important;
	}
}


/* --------------------------------------------------------------------------
 * v0.6.7 — WATCH dual horizontal rails + explicit rail controls + tight rhythm
 * ----------------------------------------------------------------------- */
.sk-home-watch--split {
	row-gap: 16px !important;
}

.sk-home-watch .sk-home-section-head {
	margin-bottom: 0 !important;
}

.sk-home-watch-group {
	gap: 10px !important;
}

.sk-home-watch-group + .sk-home-watch-group {
	padding-top: 16px !important;
	border-top-color: rgba(255, 255, 255, 0.10) !important;
}

/* Reset SWELL's h3 decoration/margins inside the WATCH subheads and draw the
 * separator ourselves so the spacing is deterministic. */
.sekilog-home-layout .post_content .sk-home-watch-group__header {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"eyebrow eyebrow"
		"title controls";
	align-items: end;
	column-gap: 14px !important;
	row-gap: 3px !important;
	padding: 0 0 9px !important;
	margin: 0 !important;
	background: linear-gradient(
		to right,
		var(--sk-home-accent) 0 27%,
		rgba(255,255,255,.16) 27% 100%
	) left bottom / 100% 2px no-repeat;
}

.sekilog-home-layout .post_content .sk-home-watch-group__eyebrow {
	grid-area: eyebrow;
	margin: 0 !important;
	padding: 0 !important;
}

.sekilog-home-layout .post_content .sk-home-watch-group__title {
	grid-area: title;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.sekilog-home-layout .post_content .sk-home-watch-group__title::before,
.sekilog-home-layout .post_content .sk-home-watch-group__title::after {
	content: none !important;
	display: none !important;
}

.sk-home-watch-group__controls {
	grid-area: controls;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.sk-home-watch-group__scroll-label {
	margin-right: 4px;
	color: var(--sk-home-accent);
	font: 700 0.66rem/1 var(--sk-home-font-en);
	letter-spacing: .08em;
}

.sk-home-watch-scroll-button {
	display: inline-grid;
	width: 30px;
	height: 30px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	color: #fff;
	font: 700 .9rem/1 var(--sk-home-font-en);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.sk-home-watch-scroll-button:hover,
.sk-home-watch-scroll-button:focus-visible {
	border-color: var(--sk-home-accent);
	background: var(--sk-home-accent);
	color: var(--sk-home-ink);
	outline: none;
}

.sk-home-watch-scroll-button:disabled {
	opacity: .28;
	cursor: default;
	border-color: rgba(255,255,255,.12);
	background: transparent;
	color: #fff;
}

/* Both LONG and SHORTS are rails now. A partial next card remains visible on
 * desktop and mobile so swipe/scroll affordance is apparent even before using
 * the arrow controls. */
.sk-home-video-long-list,
.sk-home-video-short-list,
.sk-home-video-short-list--4,
.sk-home-video-short-list--5,
.sk-home-video-short-list--6,
.sk-home-video-short-list--8 {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 16px !important;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0 10px !important;
	margin: 0 !important;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--sk-home-accent) rgba(255,255,255,.10);
}

.sk-home-video-long-list > li,
.sk-home-video-short-list > li {
	min-width: 0;
	margin: 0 !important;
	scroll-snap-align: start;
}

.sk-home-video-long-list > li {
	flex: 0 0 clamp(380px, 42vw, 540px) !important;
}

.sk-home-video-short-list > li {
	flex: 0 0 clamp(210px, 20vw, 260px) !important;
}

.sk-home-video-long-list::-webkit-scrollbar,
.sk-home-video-short-list::-webkit-scrollbar {
	height: 7px;
}

.sk-home-video-long-list::-webkit-scrollbar-track,
.sk-home-video-short-list::-webkit-scrollbar-track {
	background: rgba(255,255,255,.08);
	border-radius: 999px;
}

.sk-home-video-long-list::-webkit-scrollbar-thumb,
.sk-home-video-short-list::-webkit-scrollbar-thumb {
	background: var(--sk-home-accent);
	border-radius: 999px;
}

@media (max-width: 767px) {
	.sk-home-watch--split {
		row-gap: 14px !important;
	}

	.sk-home-watch-group {
		gap: 9px !important;
	}

	.sk-home-watch-group + .sk-home-watch-group {
		padding-top: 14px !important;
	}

	.sekilog-home-layout .post_content .sk-home-watch-group__header {
		column-gap: 10px !important;
		padding-bottom: 8px !important;
	}

	.sk-home-watch-group__scroll-label {
		display: none;
	}

	.sk-home-watch-scroll-button {
		width: 28px;
		height: 28px;
	}

	.sk-home-video-long-list,
	.sk-home-video-short-list {
		gap: 12px !important;
		padding-bottom: 8px !important;
	}

	.sk-home-video-long-list > li {
		flex-basis: min(84vw, 370px) !important;
	}

	.sk-home-video-short-list > li {
		flex-basis: min(68vw, 250px) !important;
	}
}

@media (max-width: 420px) {
	.sk-home-video-long-list > li {
		flex-basis: 86vw !important;
	}

	.sk-home-video-short-list > li {
		flex-basis: min(72vw, 245px) !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.8 — authoritative desktop sticky-header dark state + ghost control fix
 * ----------------------------------------------------------------------- */
@media (min-width: 960px) {
	/* SWELL's fixed header has independent background rules on both the outer
	 * fixed element and its inner wrappers. Keep every layer in the same dark
	 * chrome so the header does not flash white when it becomes sticky. */
	.sekilog-header-dark #fix_header.l-fixHeader,
	.sekilog-header-dark #fix_header .l-fixHeader__inner,
	.sekilog-header-dark #fix_header .l-fixHeader__logo,
	.sekilog-header-dark #fix_header .l-fixHeader__gnav,
	.sekilog-header-dark #fix_header .c-gnav {
		background-color: #0b0d0f !important;
		background-image: none !important;
		color: #fff !important;
		box-shadow: none !important;
	}

	.sekilog-header-dark #fix_header.l-fixHeader {
		border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
		backdrop-filter: blur(14px) !important;
	}

	.sekilog-header-dark #fix_header .l-fixHeader__inner {
		border: 0 !important;
	}

	.sekilog-header-dark #fix_header .c-headLogo__img {
		filter: brightness(0) invert(1) !important;
		opacity: 1 !important;
	}

	.sekilog-header-dark #fix_header .c-gnav > .menu-item > a {
		color: rgba(255, 255, 255, 0.90) !important;
	}

	.sekilog-header-dark #fix_header .c-gnav > .menu-item > a:hover,
	.sekilog-header-dark #fix_header .c-gnav > .menu-item > a:focus-visible,
	.sekilog-header-dark #fix_header .c-gnav > .current-menu-item > a,
	.sekilog-header-dark #fix_header .c-gnav > .current-menu-ancestor > a {
		color: var(--sk-home-accent) !important;
	}

	.sekilog-header-dark #fix_header .c-gnav__sBtn,
	.sekilog-header-dark #fix_header .c-gnav__sBtn .icon-search,
	.sekilog-header-dark #fix_header .c-gnav__sBtn .icon-search::before,
	.sekilog-header-dark #fix_header .c-gnav__sBtn::before {
		color: #fff !important;
	}

	.sekilog-header-dark #fix_header .c-gnav__sBtn:is(:hover, :focus-visible),
	.sekilog-header-dark #fix_header .c-gnav__sBtn:is(:hover, :focus-visible) .icon-search,
	.sekilog-header-dark #fix_header .c-gnav__sBtn:is(:hover, :focus-visible) .icon-search::before,
	.sekilog-header-dark #fix_header .c-gnav__sBtn:is(:hover, :focus-visible)::before {
		color: var(--sk-home-accent) !important;
	}

	/* Desktop search already lives in the global navigation. SWELL's optional
	 * custom-button slot is unused here and was rendering as a small white box
	 * on the dark header. Hide only the desktop slots; mobile keeps its search. */
	.sekilog-site-chrome #header .l-header__customBtn,
	.sekilog-site-chrome #fix_header .l-fixHeader__customBtn {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.6.9 — full-bleed sticky header + centered mobile Contact numbering
 * ----------------------------------------------------------------------- */
@media (min-width: 960px) {
	/* SWELL constrains the fixed-header element to its content width in some
	 * header layouts. Make the fixed chrome itself viewport-wide and keep only
	 * its inner content constrained. This removes the white gutters at both
	 * sides while preserving the existing 1440px editorial alignment. */
	.sekilog-site-chrome.sekilog-header-dark #fix_header.l-fixHeader {
		box-sizing: border-box !important;
		width: 100vw !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: #0b0d0f !important;
	}

	.sekilog-site-chrome.sekilog-header-dark #fix_header .l-fixHeader__inner {
		width: 100% !important;
		max-width: 1440px !important;
		margin-inline: auto !important;
		background: #0b0d0f !important;
	}
}

@media (max-width: 767px) {
	/* Mobile Contact cards use a distinct reading order: number first, centered,
	 * then the explanatory copy. The desktop two-column relationship is not
	 * useful at phone widths and makes the badge look pinned to the edge. */
	.sk-contact-check-list > li {
		grid-template-columns: 1fr !important;
		justify-items: center !important;
		gap: 10px !important;
		padding: 18px 18px 20px !important;
	}

	.sk-contact-check-list__num {
		justify-self: center !important;
		align-self: center !important;
		margin: 0 auto !important;
		place-items: center !important;
		text-align: center !important;
	}

	.sk-contact-check-list > li > section {
		width: 100% !important;
		min-width: 0 !important;
	}

	.sk-contact-check-list h3 {
		margin: 0 !important;
		text-align: center !important;
	}

	.sk-contact-check-list section p {
		margin-top: 6px !important;
		text-align: left !important;
	}
}


/* --------------------------------------------------------------------------
 * v0.6.9 — full-bleed sticky chrome + centered mobile contact numerals
 * ----------------------------------------------------------------------- */

/* Desktop: SWELL's fixed-header element can inherit a constrained width from
 * the theme layout. Make the fixed surface itself viewport-wide, while its
 * inner content keeps the editorial max width. This prevents white gutters
 * from appearing to the left/right of the sticky dark header. */
@media (min-width: 960px) {
	.sekilog-site-chrome #fix_header.l-fixHeader {
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		margin: 0 !important;
		background: #0b0d0f !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	.sekilog-site-chrome #fix_header .l-fixHeader__inner {
		width: 100% !important;
		max-width: 1440px !important;
		margin-inline: auto !important;
		background: transparent !important;
	}
}

/* Mobile/tablet: keep one header component instead of switching to SWELL's
 * separate fix_header copy. The normal dark header becomes sticky, so the
 * logo/menu/search geometry remains identical before and after scrolling. */
@media (max-width: 959px) {
	.sekilog-site-chrome #fix_header.l-fixHeader {
		display: none !important;
	}

	.sekilog-site-chrome #header.l-header {
		position: sticky !important;
		position: -webkit-sticky !important;
		top: 0 !important;
		inset-block-start: 0 !important;
		z-index: 9999 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		background: #0b0d0f !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	.sekilog-site-chrome #header .l-header__inner {
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
		background: transparent !important;
	}

	/* BEFORE CONTACT: reserve a real number column and center the lime chip in
	 * both axes. The copy column remains flexible, so multi-line descriptions
	 * do not pull the numeral toward the top-left corner. */
	.sekilog-contact-layout .sk-contact-check-list > li {
		grid-template-columns: 44px minmax(0, 1fr) !important;
		column-gap: 12px !important;
		align-items: center !important;
		padding: 16px 20px !important;
	}

	.sekilog-contact-layout .sk-contact-check-list__num {
		justify-self: center !important;
		align-self: center !important;
		margin: 0 !important;
	}

	.sekilog-contact-layout .sk-contact-check-list > li > section {
		align-self: center !important;
		min-width: 0;
	}
}

/* WordPress admin bar is fixed only above the core 600px mobile breakpoint.
 * Offset the sticky site header there so authenticated previews remain usable.
 * At <=600px the admin bar is absolute and scrolls away, so the header stays
 * at top:0 and behaves like the public site. */
@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .sekilog-site-chrome #header.l-header,
	body.admin-bar.sekilog-site-chrome #header.l-header {
		top: 46px !important;
	}
}

@media (min-width: 783px) and (max-width: 959px) {
	body.admin-bar .sekilog-site-chrome #header.l-header,
	body.admin-bar.sekilog-site-chrome #header.l-header {
		top: 32px !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.7.0 — one real sticky header on every breakpoint
 * --------------------------------------------------------------------------
 * SWELL keeps #header and #fix_header as two independent DOM trees. Styling
 * both to look identical still leaves different geometry and theme states.
 * SEKILOG now uses the real #header as the sticky surface and disables the
 * duplicate fixed-header tree entirely. The DOM, logo, nav and search are
 * therefore literally the same before and after scroll.
 */

/* A mobile trigger may stay in the DOM after resizing DevTools from phone to
 * desktop. Keep it hidden by default; the mobile media query explicitly turns
 * it back on only when the custom drawer is ready. */
.sk-mobile-menu-trigger {
	display: none !important;
}

/* Never use SWELL's duplicate fixed header while SEKILOG chrome is active. */
.sekilog-site-chrome #fix_header.l-fixHeader,
.sekilog-site-chrome #fix_header {
	display: none !important;
}

/* The visible header itself becomes sticky. Because this is the normal header,
 * its full-bleed background and 1440px inner alignment remain exactly the same
 * at rest and while following the viewport. */
.sekilog-site-chrome #header.l-header {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	inset-block-start: 0 !important;
	left: auto !important;
	right: auto !important;
	z-index: 99990 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	transform: none !important;
	background: #0b0d0f !important;
	background-image: none !important;
	box-shadow: none !important;
}

.sekilog-site-chrome #header.l-header,
.sekilog-site-chrome #header .l-header__inner {
	background-color: #0b0d0f !important;
	background-image: none !important;
}

/* Keep the exact desktop geometry that is already correct in the normal state. */
@media (min-width: 960px) {
	.sekilog-site-chrome #header .l-header__inner {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 1440px !important;
		min-height: 82px !important;
		margin-inline: auto !important;
		padding-inline: 72px !important;
	}

	.sekilog-site-chrome #header .l-header__logo,
	.sekilog-site-chrome #header .l-header__gnav {
		height: 82px !important;
	}

	/* The custom mobile trigger is a phone-only control, even if JS created it
	 * before a responsive resize back to desktop. */
	html.sk-mobile-nav-ready .sekilog-site-chrome #header .sk-mobile-menu-trigger,
	.sekilog-site-chrome #header .sk-mobile-menu-trigger {
		display: none !important;
	}
}

/* Restore the dedicated trigger only on mobile/tablet. */
@media (max-width: 959px) {
	html.sk-mobile-nav-ready .sekilog-site-chrome #header .sk-mobile-menu-trigger {
		display: grid !important;
	}
}

/* Authenticated previews: SWELL places WordPress body classes on #body_wrap,
 * so support both the wrapper form and the conventional body.admin-bar form. */
@media (min-width: 783px) {
	.admin-bar.sekilog-site-chrome #header.l-header,
	body.admin-bar .sekilog-site-chrome #header.l-header {
		top: 32px !important;
		inset-block-start: 32px !important;
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar.sekilog-site-chrome #header.l-header,
	body.admin-bar .sekilog-site-chrome #header.l-header {
		top: 46px !important;
		inset-block-start: 46px !important;
	}
}

@media (max-width: 600px) {
	.admin-bar.sekilog-site-chrome #header.l-header,
	body.admin-bar .sekilog-site-chrome #header.l-header {
		top: 0 !important;
		inset-block-start: 0 !important;
	}
}

/* --------------------------------------------------------------------------
 * v0.7.1 — WATCH scrollbar breathing room + compact About + left-aligned
 * BEFORE CONTACT copy
 * ----------------------------------------------------------------------- */

/* Keep dates and metadata visually separated from the native horizontal
 * scrollbar. The rail remains visibly scrollable, but the bar no longer sits
 * immediately beneath the final text line. */
.sk-home-video-long-list,
.sk-home-video-short-list,
.sk-home-video-short-list--4,
.sk-home-video-short-list--5,
.sk-home-video-short-list--6,
.sk-home-video-short-list--8 {
	padding-bottom: 24px !important;
}

@media (max-width: 767px) {
	.sk-home-video-long-list,
	.sk-home-video-short-list,
	.sk-home-video-short-list--4,
	.sk-home-video-short-list--5,
	.sk-home-video-short-list--6,
	.sk-home-video-short-list--8 {
		padding-bottom: 22px !important;
	}
}

/* About should read as a concise editorial sign-off, not a full-height hero.
 * Override the generic section padding at every breakpoint so the footer sits
 * naturally after the CONTACT CTA on desktop, iPad and mobile. */
.sk-home-about {
	padding-top: 52px !important;
	padding-bottom: 36px !important;
}

@media (max-width: 1023px) {
	.sk-home-about {
		padding-top: 40px !important;
		padding-bottom: 26px !important;
	}
}

@media (max-width: 767px) {
	.sk-home-about {
		padding-top: 28px !important;
		padding-bottom: 16px !important;
	}

	.sk-home-about__links {
		margin-top: 0 !important;
	}
}

/* BEFORE CONTACT: the numeral may be centered in its own column, but all
 * editorial copy is left-aligned. This intentionally overrides the earlier
 * mobile centering rule for h3. */
.sekilog-contact-layout .sk-contact-check-list > li > section {
	text-align: left !important;
}

.sekilog-contact-layout .sk-contact-check-list h3,
.sekilog-contact-layout .sk-contact-check-list section p {
	text-align: left !important;
}

/* --------------------------------------------------------------------------
 * v0.7.4 — vertically centered About sign-off on desktop
 * ----------------------------------------------------------------------- */
/* Keep the current desktop section footprint, but center the complete About
 * composition (portrait + copy + CTA) inside it so the top/bottom breathing
 * room reads evenly. Mobile/tablet retain their compact existing rhythm. */
@media (min-width: 1024px) {
	.sk-home-about {
		min-height: 330px !important;
		padding-top: 36px !important;
		padding-bottom: 36px !important;
		align-content: center !important;
	}
}


/* --------------------------------------------------------------------------
 * v0.7.5 — remove SWELL page-canvas bottom margin on SEKILOG home
 * ----------------------------------------------------------------------- */
/* SWELL gives #content.l-content a bottom margin (96px in the current theme).
 * That space sits outside the About section, so changing About padding cannot
 * balance it. Remove only the bottom margin on the SEKILOG homepage canvas;
 * keep the horizontal auto/side margins and About's own centered footprint. */
.sekilog-home-layout #content.l-content {
	margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
 * v0.8.6 — shared About social links
 * ----------------------------------------------------------------------- */
.sk-home-about__socials {
	margin-top: 2px;
}

.sk-home-about__socials ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sk-home-about__socials li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sk-home-about__socials a {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	color: var(--sk-home-ink);
	text-decoration: none;
	border: 1px solid var(--sk-home-line);
	border-radius: 50%;
	background: transparent;
	transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.sk-home-about__socials a:hover {
	color: var(--sk-home-ink);
	border-color: var(--sk-home-accent);
	background: var(--sk-home-accent);
	transform: translateY(-1px);
}

.sk-home-about__socials .sk-social-icon,
.sk-home-about__socials .sk-social-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}