@charset "UTF-8";

/**
 * Release-candidate polish and migrated site-owned components.
 *
 * These rules replace the small subset of WordPress Additional CSS that is
 * still used by authored pages. Obsolete Cocoon/Modern Black overrides are not
 * carried forward.
 */

body.sl-design-system.sl-front-page .article-header .entry-title,
body.sl-design-system.sl-singular-layout .entry-content > .wp-block-post-title {
	display: none !important;
}

/* Migrated page-builder grids. */
body.sl-design-system .custom-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sl-space-5);
	margin: var(--sl-space-6) 0;
}

body.sl-design-system .custom-post-grid.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.sl-design-system .custom-post-grid.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.sl-design-system :where(.custom-post-grid .grid-item, .new-post-card) {
	min-width: 0;
	overflow: hidden;
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-primary);
	background: var(--sl-color-surface);
	transition: border-color var(--sl-motion-base) var(--sl-ease-standard), transform var(--sl-motion-base) var(--sl-ease-standard), box-shadow var(--sl-motion-base) var(--sl-ease-standard);
}

body.sl-design-system :where(.custom-post-grid .grid-item, .new-post-card):hover {
	border-color: rgb(240 208 23 / 38%);
	box-shadow: var(--sl-shadow-card-hover);
	transform: translateY(-3px);
}

body.sl-design-system .custom-post-grid .grid-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

body.sl-design-system .custom-post-grid .grid-title {
	display: -webkit-box;
	margin: 0;
	padding: var(--sl-space-3);
	overflow: hidden;
	color: var(--sl-color-text-primary);
	font-size: var(--sl-font-size-sm);
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Cocoon popular-entry blocks used by the existing front page. */
body.sl-design-system main.main .popular-entry-cards {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sl-space-3);
	margin: var(--sl-space-6) 0;
}

body.sl-design-system :where(.popular-entry-card, .popular-entry) {
	min-width: 0;
	overflow: hidden;
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-primary);
	background: var(--sl-color-surface);
	transition: border-color var(--sl-motion-base) var(--sl-ease-standard), transform var(--sl-motion-base) var(--sl-ease-standard), box-shadow var(--sl-motion-base) var(--sl-ease-standard);
}

body.sl-design-system :where(.popular-entry-card, .popular-entry):hover {
	border-color: rgb(240 208 23 / 38%);
	box-shadow: var(--sl-shadow-card-hover);
	transform: translateY(-3px);
}

body.sl-design-system .popular-entry-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

body.sl-design-system .popular-entry-content {
	padding: var(--sl-space-3);
	color: var(--sl-color-text-secondary);
	font-size: var(--sl-font-size-xs);
	line-height: 1.5;
}

body.sl-design-system .popular-entry-card-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sl-color-text-primary);
	font-weight: 600;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Authored CTA and ranking links. */
body.sl-design-system :where(.entry-content .btn-fanza, .ranking-items .ranking-item-detail a) {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: var(--sl-space-3) var(--sl-space-5);
	border: 1px solid transparent;
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-on-brand);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	background: var(--sl-color-brand);
	transition: filter var(--sl-motion-fast) var(--sl-ease-standard), transform var(--sl-motion-fast) var(--sl-ease-standard);
}

body.sl-design-system :where(.entry-content .btn-fanza, .ranking-items .ranking-item-detail a):hover {
	color: var(--sl-color-on-brand);
	filter: brightness(0.92);
	transform: translateY(-1px);
}

/* Contact Form 7 and native comment forms. */
body.sl-design-system :where(.wpcf7-form, .comment-form) {
	color: var(--sl-color-text-secondary);
}

body.sl-design-system :where(.wpcf7-form, .comment-form) :where(label, .comment-notes) {
	color: var(--sl-color-text-secondary);
	font-size: var(--sl-font-size-sm);
}

body.sl-design-system :where(.wpcf7-form, .comment-form) :where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select) {
	width: 100%;
	min-height: 46px;
	padding: var(--sl-space-3) var(--sl-space-4);
	border: 1px solid var(--sl-color-border);
	border-radius: var(--sl-radius-sm);
	color: var(--sl-color-text-primary);
	font: inherit;
	background: var(--sl-color-bg-secondary);
	box-shadow: none;
}

body.sl-design-system :where(.wpcf7-form, .comment-form) textarea {
	min-height: 180px;
	resize: vertical;
}

body.sl-design-system :where(.wpcf7-form, .comment-form) :where(input, textarea, select):focus {
	border-color: var(--sl-color-brand);
	outline: 0;
	box-shadow: 0 0 0 3px rgb(240 208 23 / 14%);
}

body.sl-design-system :where(.wpcf7-submit, .comment-form input[type="submit"], .comment-btn) {
	display: inline-flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: var(--sl-space-3) var(--sl-space-5);
	border: 1px solid transparent;
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-on-brand);
	font-weight: 700;
	background: var(--sl-color-brand);
	cursor: pointer;
}

body.sl-design-system.sl-singular-layout .comment-area {
	width: min(100%, var(--sl-singular-content-width));
	margin: var(--sl-space-8) auto 0;
}

body.sl-design-system.sl-singular-layout .commets-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sl-design-system.sl-singular-layout .comment-body {
	margin: 0 0 var(--sl-space-4);
	padding: var(--sl-space-4);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-secondary);
	background: var(--sl-color-surface);
}

body.sl-design-system.sl-singular-layout .comment-form-wrap {
	display: block;
	margin-top: var(--sl-space-6);
	padding: var(--sl-space-5);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	background: var(--sl-color-surface);
}

/* Sharing outside single posts. */
body.sl-design-system .sns-share-message,
body.sl-design-system .sns-follow-message {
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-xs);
	letter-spacing: var(--sl-letter-spacing-label);
}

body.sl-design-system .sns-buttons a {
	min-height: 44px;
	border-radius: var(--sl-radius-sm);
	box-shadow: none;
}

/* Search and 404. */
body.sl-design-system.error404 #sidebar {
	display: none;
}

body.sl-design-system.error404 main.main {
	width: 100%;
}

body.sl-design-system .sl-not-found {
	width: min(100%, 760px);
	margin: var(--sl-space-7) auto var(--sl-space-9);
	padding: clamp(2rem, 6vw, 4rem);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-lg);
	text-align: center;
	background: var(--sl-color-bg-secondary);
	box-shadow: var(--sl-shadow-card);
}

body.sl-design-system .sl-not-found__eyebrow {
	margin-bottom: var(--sl-space-3);
	color: var(--sl-color-brand);
	font-family: var(--sl-font-display);
	font-size: var(--sl-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--sl-letter-spacing-label);
}

body.sl-design-system .sl-not-found__title {
	margin: 0 0 var(--sl-space-4);
	padding: 0;
	border: 0;
	color: var(--sl-color-text-primary);
	font-size: clamp(1.75rem, 5vw, 3rem);
	line-height: var(--sl-line-height-tight);
	background: transparent;
}

body.sl-design-system .sl-not-found__text {
	margin: 0 auto;
	color: var(--sl-color-text-secondary);
	line-height: var(--sl-line-height-body);
}

body.sl-design-system .sl-not-found__search {
	width: min(100%, 560px);
	margin: var(--sl-space-6) auto 0;
}

body.sl-design-system .sl-not-found__search .search-box {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0;
}

body.sl-design-system .sl-not-found__search .search-edit {
	width: 100%;
	height: 48px;
	padding: 0 52px 0 var(--sl-space-4);
	border: 1px solid var(--sl-color-border);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-primary);
	background: var(--sl-color-bg);
}

body.sl-design-system .sl-not-found__search .search-submit {
	position: absolute;
	top: 2px;
	right: 2px;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: calc(var(--sl-radius-md) - 2px);
	color: var(--sl-color-on-brand);
	background: var(--sl-color-brand);
	cursor: pointer;
}

body.sl-design-system .sl-not-found__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--sl-space-5);
}

body.sl-design-system .sl-not-found__widgets {
	margin-top: var(--sl-space-7);
	padding-top: var(--sl-space-6);
	border-top: var(--sl-border-subtle);
	text-align: left;
}

@media screen and (max-width: 1023px) {
	body.sl-design-system .custom-post-grid.columns-5,
	body.sl-design-system .popular-entry-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.sl-design-system .custom-post-grid.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 768px) {
	body.sl-design-system .custom-post-grid,
	body.sl-design-system .custom-post-grid.columns-4,
	body.sl-design-system .custom-post-grid.columns-5,
	body.sl-design-system .popular-entry-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sl-space-3);
	}

	body.sl-design-system.sl-singular-layout .comment-form-wrap {
		padding: var(--sl-space-4);
	}

	body.sl-design-system .sl-not-found {
		margin-block: var(--sl-space-5) var(--sl-space-8);
		padding: var(--sl-space-7) var(--sl-space-4);
	}
}