/*
Theme Name: Short Finger
Theme URI:
Author: Short Finger
Author URI: https://short-finger.com
Description: A minimal, editorial WordPress theme for Short Finger - knit design studio by Mami Watabe.
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: short-finger
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	--color-black: #231815;
	--color-white: #ffffff;
	--color-gray-100: #f7f7f7;
	--color-gray-200: #eeeeee;
	--color-gray-300: #dddddd;
	--color-gray-400: #8A8B8B;
	--color-gray-500: #6f6f6f;
	--color-gray-600: #555555;
	--color-bg: #ffffff;
	--color-text: #231815;
	--color-text-light: #666666;
	--color-border: #231815;
	--color-border-light: #dddddd;
	--color-error: #a83232;
	--font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--font-body: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	--font-accent: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--sidebar-width: 260px;
	--max-width: 1200px;
	--content-width: 880px;
	--gap: 2rem;
	--section-gap: clamp(40px, 5vw, 72px);
	--page-padding-x: clamp(20px, 4vw, 40px);
	--transition: 0.3s ease;
}

/* ==========================================================================
   Base Overrides (on top of Bootstrap)
   ========================================================================== */

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 2;
	color: var(--color-text);
	background-color: var(--color-bg);
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* Eliminate 300ms tap delay on all interactive elements */
a, button, input, select, textarea, label, [role="button"] {
	touch-action: manipulation;
}

a {
	color: var(--color-text);
	text-decoration: none;
	transition: opacity var(--transition);
}

a:hover,
a:focus {
	color: var(--color-text);
	text-decoration: none;
}

/* Dim only on hover/mouse-click — not on keyboard focus (focus-visible) */
a:hover,
a:focus:not(:focus-visible) {
	opacity: 0.6;
}

::selection {
	background: #cecece;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text);
	letter-spacing: 0.08em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
	min-height: 100vh;
}

.site-body {
	margin-left: var(--sidebar-width);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

.content-area {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 3rem var(--page-padding-x) var(--section-gap);
}

.site-main {
	flex: 1;
	min-width: 0;
}

/* Constrain Bootstrap .container so xxl breakpoint does not exceed our --max-width. */
.container {
	max-width: var(--max-width);
	padding-left: var(--page-padding-x);
	padding-right: var(--page-padding-x);
}

/* ==========================================================================
   Site Nav (left sidebar)
   ========================================================================== */

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100vh;
	overflow-y: auto;
	border-right: 1px solid var(--color-border-light);
	background: var(--color-white);
	z-index: 100;
}

.site-nav__inner {
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.site-branding {
	margin-bottom: 2.5rem;
}

.site-branding a {
	display: block;
}

.site-branding img {
	height: 40px;
	width: auto;
}

.site-title {
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0;
}

.site-title a {
	color: var(--color-text);
	text-decoration: none;
}

.site-title a:hover {
	opacity: 0.6;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.site-nav__list li a {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--color-text);
	text-decoration: none;
	display: block;
	padding: 0.375rem 0;
	position: relative;
}

.site-nav__list li a:hover {
	opacity: 0.5;
}

.site-nav__list li.current-menu-item > a {
	opacity: 1;
	font-weight: 500;
}

/* Left-side line indicator for current page */
.site-nav__list li.current-menu-item > a::before {
	content: '';
	position: absolute;
	left: -1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.625rem;
	height: 1px;
	background: currentColor;
}

.site-nav__list li.current-page-ancestor > a {
	opacity: 0.75;
}

/* Mobile toggle — hidden on desktop */
.site-nav__toggle {
	display: none;
}

@media (max-width: 768px) {
	.site-body {
		margin-left: 0;
	}

	.site-nav {
		position: fixed;
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--color-border-light);
		overflow: visible;
		z-index: 100;
	}

	.site-nav__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1rem var(--page-padding-x);
		min-height: auto;
	}

	.site-branding {
		margin-bottom: 0;
	}

	.site-nav__toggle {
		display: flex;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px;
		width: 44px;   /* was 28px — 44px minimum touch target */
		height: 44px;  /* was 28px */
		position: relative;
		touch-action: manipulation;
	}

	.hamburger-line {
		display: block;
		width: 20px;
		height: 1px;
		background: var(--color-text);
		position: absolute;
		left: 12px;  /* was 4px — center 20px icon in 44px button */
		transition: all var(--transition);
	}

	/* Center 3 lines (12px span) within 44px button */
	.hamburger-line:nth-child(1) { top: 16px; }  /* was 8px */
	.hamburger-line:nth-child(2) { top: 22px; }  /* was 14px */
	.hamburger-line:nth-child(3) { top: 28px; }  /* was 20px */

	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
		top: 22px;  /* was 14px */
		transform: rotate(45deg);
	}

	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
		top: 22px;  /* was 14px */
		transform: rotate(-45deg);
	}

	#primaryMenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-border-light);
		padding: 1rem var(--page-padding-x) 1.5rem;
		text-align: center;
	}

	#primaryMenu.is-open {
		display: block;
	}

	#primaryMenu li a {
		padding: 0.875rem 0;
	}

	.site-body {
		padding-top: 70px;
	}

	.activity-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.entry-content table,
	.lp-body__content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* iOS: prevent auto-zoom on input focus (requires font-size >= 16px) */
	.cf-form input[type="text"],
	.cf-form input[type="email"],
	.cf-form input[type="tel"],
	.cf-form textarea,
	.cf-form select {
		font-size: 1rem;
	}

	/* Extend touch target for small inline links */
	.activity-item__link {
		display: inline-block;
		padding: 0.625rem 0;
	}

	.more-link-wrap a {
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
	}
}

/* ==========================================================================
   Front Page
   ========================================================================== */

.front-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--page-padding-x);
	padding-right: var(--page-padding-x);
}

/* Front page: hero spans the full viewport width as a visual anchor. */
.home .front-hero {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.front-hero a {
	display: block;
}

.front-hero img {
	width: 100%;
	height: auto;
	display: block;
}

.front-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-100);
	min-height: 40vh;
}

.front-hero__placeholder span {
	font-family: var(--font-heading);
	font-size: 2rem;
	letter-spacing: 0.15em;
	color: var(--color-text);
}

/* Hero store caption — editorial CTA strip below the hero image */
.front-hero-caption {
	text-align: center;
	padding: 1.25rem var(--page-padding-x) 0;
	max-width: var(--max-width);
	margin: 0 auto;
}

.front-hero-caption__link {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
}

.front-hero-caption__link::after {
	content: '\2192';
}

.front-hero-caption__link:hover {
	opacity: 1;
}

/* Section Styling */
.front-section {
	padding: var(--section-gap) 0;
}

.front-section--alt {
}

.front-section__header {
	margin-bottom: 2rem;
}

.front-section__title {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	margin-bottom: 0.5rem;
}

.front-section__subtitle {
	font-size: 0.75rem;
	color: var(--color-text-light);
	letter-spacing: 0.05em;
}

.front-section__divider {
	display: none;
}

/* Brand Card */
.brand-card {
	position: relative;
	overflow: hidden;
}

.brand-card__image {
	overflow: hidden;
	background: var(--color-gray-100);
	aspect-ratio: 1 / 1;
}

.brand-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brand-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.brand-card__placeholder span {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	letter-spacing: 0.15em;
	color: var(--color-text);
}

.brand-card__body {
	padding: 2rem 0;
}

.brand-card__name {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.12em;

	margin-bottom: 0.75rem;
}

.brand-card__desc {
	font-size: 0.8125rem;
	color: var(--color-gray-500);
	line-height: 2;
	margin-bottom: 1.5rem;
}

.brand-card__link {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
}

.brand-card__link::after {
	content: '\2192';
}

.brand-card__link:hover {
	opacity: 1;
}

/* News Section */
.news-list {
}

.news-list__empty {
	text-align: center;
	padding: 2rem 0;
	color: var(--color-text-light);
}

/* Journal Section */
.journal-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.journal-card__media {
	display: block;
	overflow: hidden;
	background: var(--color-gray-100);
	aspect-ratio: 3 / 2;
}

.journal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.journal-card__placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-gray-100);
}

.journal-card__body {
	padding: 1.25rem 0 0;
}

.journal-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	margin-bottom: 0.5rem;
}

.journal-card__tag {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
}

.journal-card__title {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
	font-weight: 500;
	margin: 0;
}

.journal-card__title a {
	color: var(--color-text);
}

.news-item a {
	display: flex;
	align-items: baseline;
	gap: 2rem;
	padding: 0.625rem 0;
}

.news-item a:hover {
	opacity: 0.6;
}

.news-item__date {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	flex-shrink: 0;
	width: 100px;
}

.news-item__cat {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
	flex-shrink: 0;
}

.news-item__title {
	font-size: 0.875rem;
	flex: 1;
}

/* Theme Button (overrides Bootstrap .btn) */
.btn {
	display: inline-block;
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	cursor: pointer;
	transition: opacity var(--transition);
}

.btn:hover {
	color: var(--color-text);
	opacity: 0.55;
}

.btn--fill {
	background: var(--color-text);
	color: var(--color-white);
	border: 1px solid var(--color-text);
	padding: 0.875rem 2.5rem;
}

.btn--fill:hover {
	opacity: 0.75;
	color: var(--color-white);
	background: var(--color-text);
	border-color: var(--color-text);
}

/* More link */
.more-link-wrap {
	margin-top: 2rem;
}

.lp-news .more-link-wrap {
	text-align: right;
}

.more-link-wrap a {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
}

.more-link-wrap a::after {
	content: '\2192';
}

.more-link-wrap a:hover {
	opacity: 1;
}

/* ==========================================================================
   Brand Page
   ========================================================================== */

.brand-hero {
	/* No top padding — breadcrumbs already sit above this section and
	   provide their own bottom padding as breathing room. */
	padding: 0 0 clamp(32px, 4vw, 56px);
}

.brand-hero__name {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.15em;

	margin-bottom: 1.5rem;
}

.brand-hero__logo {
	display: block;
	height: 48px;
	width: auto;
}

.brand-hero__desc {
	font-size: 0.9375rem;
	color: var(--color-gray-500);
	line-height: 2;
	max-width: 600px;
}

/* Hero primary CTA (small, optional) */
.brand-hero__cta {
	margin-top: 2rem;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.brand-hero__cta-note {
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--color-text);
	margin: 0;
}

/* Primary CTA reinforced after the body */
.brand-cta {
	padding: clamp(56px, 6vw, 96px) 0;
}

.brand-cta__title {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
}

.brand-cta__text {
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.95;
	margin: 0 0 2rem;
	max-width: 480px;
}

.brand-gallery-section {
	padding: clamp(40px, 5vw, 72px) 0;
}

.brand-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	max-width: var(--max-width);
	margin: 0 auto;
}

.brand-gallery__item {
	margin: 0;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-gray-100);
}

.brand-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brand-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-gallery__placeholder span {
	font-family: var(--font-heading);
	font-size: clamp(0.875rem, 1vw, 1.125rem);
	letter-spacing: 0.12em;
	/* gray-400 measured ~3.4:1 on white, below WCAG AA (4.5:1) for text; gray-500 clears it */
	color: var(--color-gray-500);
	text-align: center;
	padding: 0 1rem;
}

.brand-detail {
	padding: 60px 0;
}

.brand-inquiry {
	padding: 60px 0;
}

.brand-inquiry__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.12em;

	margin-bottom: 1rem;
}

.brand-inquiry__text {
	font-size: 0.8125rem;
	color: var(--color-gray-500);
	margin-bottom: 2rem;
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.contact-section {
	padding: clamp(40px, 5vw, 72px) 0;
}

/* Theme-native contact form (no plugin dependency) */
.cf-form {
	max-width: 640px;
	margin: 0 auto;
}

.cf-form__honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cf-form__row {
	margin-bottom: 1.5rem;
}

.cf-form label {
	display: block;
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
}

.cf-form__required {
	display: inline-block;
	margin-left: 0;
	margin-right: 0.5rem;
	padding: 0.05rem 0.5rem;
	background: var(--color-text);
	color: var(--color-white);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	border-radius: 2px;
}

.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form textarea,
.cf-form select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border-light);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-text);
	transition: border-color var(--transition);
	appearance: none;
	border-radius: 0;
}

.cf-form input:focus,
.cf-form textarea:focus,
.cf-form select:focus {
	outline: none;
	border-color: var(--color-text);
	box-shadow: none;
}

/* Restore visible focus ring for keyboard users */
.cf-form input:focus-visible,
.cf-form textarea:focus-visible,
.cf-form select:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

.cf-form textarea {
	min-height: 180px;
	resize: vertical;
}

.cf-form__row--privacy label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.cf-form__row--privacy input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--color-text);
	flex-shrink: 0;
}

.cf-form__submit {
	text-align: center;
	margin-top: 2.5rem;
}

.cf-form__submit .btn {
	min-width: 240px;
}

/* Confirm page */
.cf-confirm {
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1rem 1.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.cf-confirm dt {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
}

.cf-confirm dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
	word-break: break-word;
}

.cf-confirm__actions {
	max-width: 640px;
	margin: 2.5rem auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

@media (max-width: 600px) {
	.cf-confirm {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.cf-confirm dt {
		margin-top: 1rem;
	}

	.cf-confirm dt:first-child {
		margin-top: 0;
	}
}

/* Error list */
.cf-errors {
	max-width: 640px;
	margin: 0 auto 2rem;
	padding: 1rem 1.5rem;
	border: 1px solid var(--color-error);
	color: var(--color-error);
	font-size: 0.875rem;
}

.cf-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

/* Complete page */
.cf-complete {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 2;
}

.cf-complete__actions {
	margin-top: 2.5rem;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
	margin: 0;
	padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(0.75rem, 1.5vw, 1rem);
}

.breadcrumbs__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: '/';
	margin-right: 0.5rem;
	color: var(--color-text-light);
	opacity: 0.6;
}

.breadcrumbs__item a {
	color: var(--color-text-light);
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus {
	color: var(--color-text);
	opacity: 1;
}

.breadcrumbs__item [aria-current="page"] {
	color: var(--color-text);
}

/* ==========================================================================
   Posts & Pages
   ========================================================================== */

.entry-header {
	margin-bottom: 2.5rem;
}

.single .entry-header {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border-light);
}

.entry-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
}

.entry-title a {
	color: var(--color-text);
}

.entry-meta {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	color: var(--color-text-light);
	letter-spacing: 0.05em;
}

.entry-meta a {
	color: var(--color-text-light);
}

.entry-content {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	overflow-wrap: break-word;
}

/* Underline links inside body content so they're distinguishable from text */
.page .entry-content a:not(.btn),
.lp-body__content a:not(.btn) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.page .entry-content a:not(.btn):hover,
.lp-body__content a:not(.btn):hover {
	text-decoration-thickness: 2px;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.entry-content h2:first-child,
.entry-content h3:first-child {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-footer {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border-light);
}

/* ==========================================================================
   Single Post — Reading typography
   ========================================================================== */

/* The article body and everything that hangs off it (author card,
   share row, post navigation, related posts) collapses to 720px on
   .single so the reading column stays narrow. Header and breadcrumb
   keep the wider site-wide layout — they belong to chrome, not body. */
.single .content-area {
	max-width: 720px;
}

/* News & Media archive list page: match width to home page News & Media list (merged from Additional CSS) */
.post-type-archive-news_media .content-area {
	max-width: var(--max-width);
}

/* Journal category archive: widen content area to match wider layout (--max-width) */
.category-journal .content-area {
	max-width: var(--max-width);
}

/* Tag archive pages: widen content area to match wider layout (--max-width) */
.tag .content-area {
	max-width: var(--max-width);
}

/* Tag archive pages: eyebrow label linking back to Journal, shown above the page title */
.entry-eyebrow {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin-bottom: 0.5rem;
}

.entry-eyebrow a {
	color: inherit;
	text-decoration: underline;
}

}
}

/* Article title (post H1) — inherits font-family from the site-wide
   h1..h6 rule (--font-heading), only size/spacing tweaked here. */
.single .entry-title {
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0.75rem;
}

.single .entry-meta {
	font-size: 0.8125rem;
}

/* Byline (avatar + name) under entry-meta */
.single .entry-byline {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.6rem 0 0;
	padding: 0;
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
}

.single .entry-byline__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.single .entry-byline__name {
	line-height: 1.4;
}

/* Featured image — extra breathing room */
.single .post-thumbnail {
	margin: 2.5rem 0;
}

/* Body */
.single .entry-content {
	/* Around 35–45 CJK chars per line — sweet spot for Japanese long-form */
	max-width: 720px;
	font-size: clamp(15px, 0.85rem + 0.35vw, 17px);
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.single .entry-content p {
	margin: 0 0 1.6em;
}

.single .entry-content > *:first-child {
	margin-top: 0;
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
	/* font-family / letter-spacing は base の h1..h6 ルール
	   (--font-heading, 0.08em) を継承してサイト全体と揃える */
	font-weight: 400;
	color: var(--color-text);
}

.single .entry-content h2 {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
	line-height: 1.5;
	margin: 2.8em 0 0.9em;
	padding-top: 1em;
	border-top: 1px solid var(--color-border-light);
}

.single .entry-content h3 {
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.6;
	margin: 2.2em 0 0.7em;
}

.single .entry-content h4 {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.6;
	margin: 1.8em 0 0.5em;
}

.single .entry-content ul,
.single .entry-content ol {
	margin: 0 0 1.6em;
	padding-left: 1.75em;
}

.single .entry-content li {
	margin-bottom: 0.4em;
	line-height: 1.85;
}

.single .entry-content li > ul,
.single .entry-content li > ol {
	margin-top: 0.4em;
	margin-bottom: 0;
}

.single .entry-content blockquote {
	margin: 2em 0;
	padding: 0.25em 1.5em;
	border-left: 2px solid var(--color-text);
	color: var(--color-text-light);
	font-style: italic;
}

.single .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.single .entry-content figure {
	margin: 2.5em 0;
}

.single .entry-content figure figcaption {
	margin-top: 0.5em;
	font-size: 0.8125em;
	color: var(--color-text-light);
	text-align: center;
	letter-spacing: 0.04em;
}

.single .entry-content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.single .entry-content a:hover {
	text-decoration-thickness: 2px;
}

.single .entry-content hr {
	margin: 3em auto;
	width: 60px;
	border: 0;
	border-top: 1px solid var(--color-text);
}

.single .entry-content code {
	font-size: 0.9em;
	background: var(--color-gray-100);
	padding: 0.1em 0.4em;
	border-radius: 2px;
}

.single .entry-content pre {
	margin: 2em 0;
	padding: 1.25em 1.5em;
	background: var(--color-gray-100);
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

.single .entry-content pre code {
	background: none;
	padding: 0;
}

@media (max-width: 768px) {
	.single .entry-content {
		line-height: 1.85;
	}

	.single .entry-content p {
		margin-bottom: 1.4em;
	}

	.single .entry-content h2 {
		margin-top: 2.4em;
		padding-top: 0.8em;
	}

	.single .entry-content h3 {
		margin-top: 1.9em;
	}

	.single .entry-content h4 {
		margin-top: 1.6em;
	}

	.single .entry-content figure {
		margin: 2em 0;
	}
}

article.post,
article.page {
	margin-bottom: 4rem;
}

/* Page Header (Archive) */
.page-header {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border-light);
}

.page-header .entry-title {
	font-size: 1.5rem;
}

.archive-description {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-top: 0.5rem;
}


.post-thumbnail {
	margin-bottom: 2rem;
	overflow: hidden;
}

/* Pagination */
.pagination,
.post-navigation {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border-light);
}

.pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border-light);
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	transition: all var(--transition);
}

.pagination .page-numbers.current {
	background: var(--color-text);
	color: var(--color-white);
	border-color: var(--color-text);
}

.pagination .page-numbers:hover {
	border-color: var(--color-text);
	opacity: 1;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
}

.post-navigation .nav-subtitle {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.08em;

	color: var(--color-text-light);
	display: block;
	margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
	font-size: 0.875rem;
}

/* News & Media - other brands nav (separator spacing) */
.news-media-brand-nav {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border-light);
}

.news-media-brand-nav__label {
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin-bottom: 1rem;
}

.news-media-brand-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ==========================================================================
   Post Author Profile
   ========================================================================== */

.post-author {
	max-width: 720px;
	margin: 3.5rem auto 0;
	padding: 1.75rem 0;
	border-top: 1px solid var(--color-border-light);
}

.post-author__heading {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 1.25rem;
}

.post-author__inner {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.post-author__avatar {
	flex-shrink: 0;
}

.post-author__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.post-author__body {
	flex: 1;
	min-width: 0;
}

.post-author__name {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.2em;
}

.post-author__role {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
	margin: 0 0 0.9em;
}

.post-author__desc {
	font-size: 0.875rem;
	line-height: 1.85;
	color: var(--color-text);
	margin: 0;
}

.post-author__links {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.post-author__links a {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.post-author__links a:hover {
	color: var(--color-text);
	opacity: 1;
}

@media (max-width: 600px) {
	.post-author {
		padding: 1.5rem 1.25rem;
	}

	.post-author__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1rem;
	}

	.post-author__avatar img {
		width: 80px;
		height: 80px;
	}

	.post-author__links {
		justify-content: center;
	}
}

/* ==========================================================================
   Post Share
   ========================================================================== */

.post-share {
	max-width: 720px;
	margin: 2.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border-light);
	text-align: center;
}

.post-share__title {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 1rem;
}

.post-share__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-share__btn {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-text);
	border: 1px solid var(--color-border-light);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	font: inherit;
	text-decoration: none;
}

.post-share__btn:hover,
.post-share__btn:focus-visible {
	background: var(--color-text);
	color: var(--color-white);
	border-color: var(--color-text);
	opacity: 1;
}

.post-share__btn--copy.is-copied {
	background: var(--color-text);
	color: var(--color-white);
	border-color: var(--color-text);
}

.post-share__btn svg {
	pointer-events: none;
}

/* ==========================================================================
   Related Posts
   ========================================================================== */

.related-posts {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border-light);
}

.related-posts__title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	letter-spacing: 0.12em;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--color-border-light);
	padding: 60px 0 40px;
}

.footer-copy {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	color: var(--color-text);
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Search
   ========================================================================== */

.search-form {
	display: flex;
	gap: 0;
}

.search-form .search-field {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border-light);
	border-right: none;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	border-radius: 0;
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--color-text);
	box-shadow: none;
}

.search-form .search-submit {
	background: var(--color-text);
	color: var(--color-white);
	border: 1px solid var(--color-text);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;

	cursor: pointer;
	transition: all var(--transition);
	border-radius: 0;
}

.search-form .search-submit:hover {
	background: var(--color-white);
	color: var(--color-text);
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
	padding: var(--section-gap) 0;
}

.error-404__inner {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.error-404__number {
	font-family: var(--font-heading);
	font-size: 8rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-gray-200);
	margin-bottom: 1.5rem;
}

.error-404__title {
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-bottom: 1.5rem;
}

.error-404__message {
	font-size: 0.875rem;
	color: var(--color-gray-500);
	line-height: 2;
	margin-bottom: 2.5rem;
}

.error-404__actions {
	margin-bottom: 2rem;
}

.error-404__search {
	max-width: 480px;
	margin: 0 auto 3rem;
}

.error-404__recent {
	border-top: 1px solid var(--color-border-light);
	padding-top: 2.5rem;
}

.error-404__recent-title {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;

	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.error-404__number {
		font-size: 5rem;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

.btn:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 3px;
}

/* Remove default outline since we handle it with focus-visible */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* External link icon — auto-appended to all target="_blank" links except buttons, nav, and block-child wrappers */
a[target="_blank"]:not(.btn):not(.site-nav__list a):not(.custom-logo-link):not(.media-item__body a):not(.news-archive-item__link):not(.pub-item__thumb-link):not(.post-share__btn)::after {
	content: '';
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	margin-left: 0.25em;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	background-color: currentColor;
	opacity: 0.5;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.screen-reader-text:focus-visible {
	background-color: var(--color-white);
	border: 2px solid var(--color-text);
	border-radius: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-family: var(--font-accent);
	font-size: 0.875rem;
	font-weight: 500;
	height: auto;
	left: 8px;
	letter-spacing: 0.05em;
	line-height: normal;
	padding: 12px 24px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   WordPress Alignments
   ========================================================================== */

.alignleft {
	float: left;
	margin-right: 2rem;
	margin-bottom: 1.5rem;
}

.alignright {
	float: right;
	margin-left: 2rem;
	margin-bottom: 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;
}

.wp-caption {
	margin-bottom: 1.5rem;
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.75rem;
	color: var(--color-text-light);
	text-align: center;
	padding: 0.75rem 0;
}

/* ==========================================================================
   Gallery (in-content)
   ========================================================================== */

.wp-block-gallery {
	display: grid;
	gap: 4px;
	margin: 2rem 0;
}

.wp-block-gallery.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.wp-block-gallery.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.wp-block-gallery.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.wp-block-gallery figure {
	margin: 0;
	overflow: hidden;
}

.wp-block-gallery img {
	width: 100%;
	height: auto;
}

.entry-content figure {
	margin: 2rem 0;
}

.entry-content figure img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   short finger umbrella — Story timeline
   ========================================================================== */

.sf-story {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.sf-story__item {
	display: flex;
	gap: 2rem;
	padding-bottom: 2.5rem;
}

.sf-story__item:last-child {
	padding-bottom: 0;
}

.sf-story__num {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--color-text-light);
	flex-shrink: 0;
	width: 3rem;
	line-height: 1.4;
}

.sf-story__body {
	flex: 1;
	min-width: 0;
}

.sf-story__name {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
}

.sf-story__desc {
	font-size: 0.9375rem;
	line-height: 1.95;
	color: var(--color-gray-600);
	margin: 0 0 1rem;
}

.sf-story__link {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 2px;
}

.sf-story__link::after {
	content: '\2192';
}

.sf-story__link:hover {
	opacity: 1;
}

@media (max-width: 600px) {
	.sf-story__item {
		flex-direction: column;
		gap: 0.5rem;
	}

	.sf-story__num {
		width: auto;
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   Media List
   ========================================================================== */

.container:has(.media-list) {
	max-width: clamp(1200px, 82%, 1600px);
	
}

.media-item {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
	align-items: baseline;
}

.media-item__brand {
	display: inline-block;
	flex-shrink: 0;
	min-width: 6.5rem; /* unified width, merged from Additional CSS */
	font-family: var(--font-accent);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
	border: 1px solid var(--color-text-light);
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	text-align: center;
}

/* Temporary placeholder box for images not yet supplied by the client */
.lp-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt, #eee);
	color: var(--color-text-light);
	font-family: var(--font-accent);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-align: center;
	border: 1px dashed var(--color-text-light);
}
.lp-hero__logo.lp-placeholder {
	width: 280px;
	max-width: 100%;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
}
.lp-featured__img.lp-placeholder {
	width: 100%;
	height: 420px;
}
.lp-gallery__item .lp-placeholder {
	width: 100%;
	height: 100%;
	min-height: 240px;
}

.media-item__date {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text);
	flex-shrink: 0;
	min-width: 4.5rem;
}

.media-item__body {}

.media-item__body a {
	color: inherit;
	text-decoration: none;
}

.media-item__body a:hover {
	opacity: 0.6;
}

/* Event / Project / Media type badge — same solid tag style as
   .cf-form__required. */
.media-item__type {
	display: inline-block;
	margin-right: 0.6em;
	padding: 0.05rem 0.4rem;
	background: var(--color-text);
	color: var(--color-white);
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	border-radius: 2px;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	min-width: 3.6rem; /* unified width, merged from Additional CSS */
	text-align: center;
}

.media-item__type:hover,
.media-item__type:focus {
	color: var(--color-white);
	opacity: 0.6;
}

.media-item__name {
	font-size: 0.875rem;
}

.media-item__name::after {
	content: ' - ';
	color: var(--color-text-light);
}

.media-item__body a[target="_blank"] .media-item__desc::after {
	content: '';
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: 0.2em;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	background-color: currentColor;
	opacity: 0.45;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v7H3V6h7zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.media-item__desc {
	font-size: 0.8125rem;
	color: var(--color-text);
	display: inline;
	margin-top: 0.125rem;
}

@media (max-width: 768px) {
	.media-item {
		flex-wrap: wrap;
	}

	.media-item__body {
		flex-basis: 100%;
		width: 100%;
		margin-top: 0.375rem;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--section-gap: 60px;
	}

	.news-item a {
		flex-direction: column;
		gap: 0.5rem;
	}

	.news-item__date {
		width: auto;
	}

	/* sewing-features, contact-types, about-brands grid now handled by Bootstrap row/col */

.entry-title {
		font-size: 1.25rem;
	}

	.brand-hero__name {
		font-size: 1.5rem;
	}

	/* .brand-gallery stays at 3 columns even on tablet — 3 items
	   reflow awkwardly in 2 columns (one orphan on row 2). */
}

@media (max-width: 480px) {
	.brand-gallery {
		grid-template-columns: 1fr;
	}

	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   News & Media — Pickup row (front page)
   ========================================================================== */

.news-media__pickup {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border-light);
}

.news-media__pickup-label {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 1rem;
}

/* News archive list */
.news-genre {
	margin-bottom: var(--section-gap);
}

.news-genre__title {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: var(--color-text-light);
	margin: 0 0 0.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.news-archive-list {
	display: flex;
	flex-direction: column;
}

.news-archive-item {
	border-bottom: 1px solid var(--color-border-light);
}

.news-archive-item__link {
	display: flex;
	align-items: baseline;
	gap: 2rem;
	padding: 0.75rem 0;
	text-decoration: none;
	color: var(--color-text);
}

.news-archive-item__link:hover {
	opacity: 0.5;
}

.news-archive-item__date {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
	flex-shrink: 0;
	min-width: 5rem;
}

.news-archive-item__title {
	font-size: 0.875rem;
}

/* ==========================================================================
   Profile Section (front page top)
   ========================================================================== */

.profile-section {
	padding: var(--section-gap) 0;
	border-top: 1px solid var(--color-border-light);
	border-bottom: 1px solid var(--color-border-light);
}

.profile-section__inner {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.profile-section__inner--no-photo {
	grid-template-columns: 1fr;
}

.profile-section__photo img {
	width: 100%;
	height: auto;
	display: block;
}

.profile-section__role {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 0.5rem;
}

.profile-section__name {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.3;
	margin: 0 0 1.75rem;
}

.profile-section__name-en {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--color-text-light);
}

.profile-text p {
	font-size: 0.875rem;
	line-height: 1.95;
	margin: 0 0 1.25rem;
	max-width: 680px;
}

.profile-text p:last-child {
	margin-bottom: 0;
}

.front-section + .front-section {
	border-top: 1px solid var(--color-border-light);
}

@media (max-width: 575px) {
	.profile-section__inner {
		grid-template-columns: 1fr;
	}

	.profile-section__photo {
		max-width: 200px;
		margin-left: auto;
		margin-right: auto;
	}

	.profile-section__name {
		text-align: center;
	}
}

/* ==========================================================================
   Activity List (front page / about)
   ========================================================================== */


.activity-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 3rem;
}

.activity-item {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 2rem;
	padding: 2.25rem 0;
	align-items: start;
	align-content: start;
}

.activity-item__name {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0 0 0.25rem;
}


.activity-item__logo {
	display: block;
	max-width: 120px;
	height: auto;
}

.activity-item__head {
	display: flex;
	align-items: center;
	height: 70px;
}

.activity-item__head a {
	display: inline-block;
}

.activity-item__desc {
	margin: 0 0 0.875rem;
	line-height: 1.85;
	font-size: 0.9375rem;
}

.activity-item__link {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.activity-item__link:hover {
	opacity: 0.55;
}

@media (max-width: 768px) {
	.activity-item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.activity-item__name {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Publications List
   ========================================================================== */

.pub-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

@media (max-width: 575px) {
	.pub-list {
		grid-template-columns: 1fr;
	}

	.pub-list .pub-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.pub-item {
	display: flex;
	gap: 2rem;
	padding: 1rem 0;
	align-items: flex-start;
}

.pub-item__thumb {
	flex-shrink: 0;
	width: 100px;
}

.pub-item__thumb img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--color-border-light);
}

.pub-item__year {
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	color: var(--color-text-light);
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: 0.25rem;
}

.pub-item__body {
	flex: 1;
}

.pub-item__title {
	font-size: 0.9375rem;
	font-weight: 400;
	margin: 0 0 0.25rem;
	line-height: 1.6;
}

.pub-item__title a {
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), opacity var(--transition);
}

.pub-item__title a:hover {
	border-color: var(--color-border);
	opacity: 0.65;
}

.pub-item__meta {
	font-size: 0.8125rem;
	color: var(--color-text-light);
	margin: 0;
}

@media (max-width: 480px) {
	.pub-item {
		flex-direction: column;
		gap: 0.25rem;
	}
}

/* ==========================================================================
   About Profile section
   ========================================================================== */

.about-profile {
	padding: var(--section-gap) 0;
}

.about-profile__inner {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(40px, 6vw, 72px);
	align-items: start;
}

.about-profile__photo img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.about-profile__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.about-profile__photo {
		max-width: 160px;
	}
}

/* ==========================================================================
   Career List (about page)
   ========================================================================== */

.career-list {
}

.career-item {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.5rem;
	padding: 0.875rem 0;
	align-items: baseline;
}

.career-item__year {
	font-family: var(--font-accent);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	white-space: nowrap;
	padding-top: 2px;
}

.career-item__desc {
	margin: 0;
	line-height: 1.8;
	font-size: 0.9375rem;
}

@media (max-width: 480px) {
	.career-item {
		grid-template-columns: 3rem 1fr;
		gap: 1rem;
	}
}

/* ==========================================================================
   Social Links (about page)
   ========================================================================== */

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}


/* ==========================================================================
   LP (ランディングページ) スタイル — template-brand.php 用
   ========================================================================== */

/* ---- Breadcrumb ---- */
.lp-breadcrumb-wrap {
    padding-top: 1rem;
    padding-bottom: 0;
}

/* ---- Main wrapper ---- */
.lp-main {
    padding-bottom: 0;
}

/* ---- 1. HERO ---- */
.lp-hero {
    padding: 3rem 0 clamp(0.75rem, 2vw, 1.25rem);
    background: var(--color-bg);
    text-align: center;
}

.lp-hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* When rendered as <h1>, reset heading default margins */
h1.lp-hero__logo {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    margin-top: 0;
}

.lp-hero__logo {
    margin-bottom: 1.25rem;
}

.lp-hero__logo-img {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.lp-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    color: var(--color-black);
}

.lp-hero__lead {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--color-text);
    margin-bottom: 1rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.lp-hero__cta {
    margin-top: 2rem;
}

/* ---- 2. FEATURED IMAGE ---- */
.lp-featured {
    margin: 0;
    overflow: hidden;
}

.lp-featured__wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
    box-sizing: border-box;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.lp-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.lp-featured__img:hover {
    transform: scale(1.02);
}

/* ---- 3. BODY CONTENT ---- */
.lp-body {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem);
    background: var(--color-bg);
}

.lp-body__content {
    max-width: none;
    margin: 0;
}

.lp-body__content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-top: 4.5rem;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-black);
}

.lp-body__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.lp-body__content p {
    line-height: 2;
    color: var(--color-text);
    margin-bottom: 1.2rem;
}

.lp-body__content ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.lp-body__content ul li {
    padding: 0.6rem 0 0.6rem 1.4rem;
    position: relative;
    line-height: 1.7;
}

.lp-body__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(0.6rem + 0.5lh);
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-black);
    border-radius: 50%;
}

/* ---- Reading width adjustment for wide screens (h2/p/ul start aligned, dividers stay full width) ---- */
.lp-body__content p,
.lp-body__content ul,
.lp-body__content h2 {
    padding-left: calc((100% - 34rem) / 2);
    padding-right: calc((100% - 34rem) / 2);
    box-sizing: border-box;
}

/* Table: align to same reading zone as surrounding text */
.lp-body__content table {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 4. GALLERY ---- */
.lp-gallery {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--color-gray-100);
}

.lp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}

.lp-gallery__item {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-gray-200);
}

.lp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.lp-gallery__item:hover img {
    transform: scale(1.04);
}

.lp-news {
    padding-bottom: var(--section-gap);
}

/* ---- Body content images (hero/featured images are excluded) width limit for PC ---- */
@media (min-width: 769px) {
    .lp-body__content > figure {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- 5. PRIMARY CTA (再掲) ---- */
.lp-cta {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: var(--color-black);
    text-align: center;
}

.lp-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.lp-cta__sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.lp-cta .btn--fill {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
    min-width: 240px;
    padding: 1rem 2.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.lp-cta .btn--fill:hover {
    background: transparent;
    color: var(--color-white);
}

/* ---- 6. INQUIRY / CONTACT ---- */
.lp-inquiry {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--color-bg);
    text-align: center;
    border-top: 1px solid var(--color-border-light);
}

.lp-inquiry__title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    color: var(--color-black);
}

.lp-inquiry__text {
    color: var(--color-text);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* ---- Shared Large Button ---- */
.btn--large {
    padding: 0.9rem 2.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    min-width: 200px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .lp-featured__wrap {
        aspect-ratio: 4 / 3;
    }

    .lp-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-hero__logo-img {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .lp-gallery__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- lp-inquiry btn スタイル強化 ---- */
.lp-inquiry .btn {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    border: 1px solid var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--color-black);
    background: transparent;
    transition: background var(--transition), color var(--transition);
    margin-top: 0.5rem;
}

.lp-inquiry .btn:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* ---- lp-hero CTA ボタン ---- */
.lp-hero__cta .btn--fill.btn--large {
    display: inline-block;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1rem 3rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.lp-hero__cta .btn--fill.btn--large:hover {
    background: transparent;
    color: var(--color-black);
}

/* ---- lp-body内 h2 — home front-section__title スタイルに合わせた洗練されたデザイン ---- */
.lp-body__content .wp-block-heading,
.lp-body__content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
    line-height: 1.4;
    margin-top: 3rem;
    margin-bottom: 1.4em;
    padding-top: 4.5rem;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-black);
}

/* ---- 全幅CTA セクションの左サイドバーへの対応 ---- */
@media (min-width: 769px) {
    .lp-cta,
    .lp-inquiry,
    .lp-featured,
    .lp-gallery {
        /* サイドバーのwidthを考慮せず、コンテンツエリア内に収める */
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
 *    Additional Customizations (integrated from Customizer Additional CSS)
 *    ========================================================================== */

/* =============================================
 *     entry-content 
 *    ============================================= */

/* --- p: 14px / line-height 1.95  --- */
.page-template-template-brand .entry-content p {
	  font-size: 14px;
	  line-height: 1.95;
	  letter-spacing: 0.04em;
	  margin-bottom: 20px;
}

/* --- ul / ol --- */
.page-template-template-brand .entry-content ul,
.page-template-template-brand .entry-content ol {
	  font-size: 14px;
	  line-height: 1.95;
	  margin-bottom: 20px;
	  padding-left: 1.5em;
}

.page-template-template-brand .entry-content li {
	  font-size: 14px;
	  line-height: 1.95;
	  margin-bottom: 0.3em;
}

/* --- h2:  front-section h2  --- */
.page-template-template-brand .entry-content h2 {
	  font-size: 15px;
	  font-weight: 400;
	  letter-spacing: 0.1em;
	  line-height: 1.6;
	  margin-top: 2.5em;
	  margin-bottom: 0.8em;
	  padding-top: 1.2em;
	  border-top: 1px solid var(--color-border-light, #dddddd);
	  color: var(--color-text, #231815);
}

/* h2 */
.page-template-template-brand .entry-content h2:first-child {
	  margin-top: 0;
	  padding-top: 0;
	  border-top: none;
}

/* --- h3:  front-section h315px --- */
.page-template-template-brand .entry-content h3 {
	  font-size: 14px;
	  font-weight: 400;
	  letter-spacing: 0.1em;
	  line-height: 1.7;
	  margin-top: 1.8em;
	  margin-bottom: 0.5em;
	  color: var(--color-text, #231815);
}

/* --- strong --- */
.page-template-template-brand .entry-content strong {
	  font-weight: 700;
}

/* --- a --- */
.page-template-template-brand .entry-content a {
	  text-decoration: underline;
	  text-underline-offset: 0.2em;
	  text-decoration-thickness: 1px;
	  color: inherit;
}

/* --- entry-content  max-width CSS--- */
.page-template-template-brand .brand-detail .entry-content {
	  max-width: var(--content-width, 880px);
	  margin-left: 0;
	  margin-right: auto;
}

/* --- brand-detail 51px --- */
.page-template-template-brand .brand-detail {
	  padding-top: 51px;
	  padding-bottom: 51px;
}

/* ---  --- */
.page-template-template-brand .brand-detail .container {
	  padding-left: 20px;
	  padding-right: 20px;
}

.page-template-template-brand .brand-detail .entry-content {
	  max-width: 100%;
}

/* ---  h2  --- */
.page-template-template-brand .entry-content h2 {
	  font-size: 17px;
	  font-weight: 500;
	  letter-spacing: 0.05em;
	  margin-top: 3em;
	  margin-bottom: 1em;
	  line-height: 1.5;
}

/* ---  h3  --- */
.page-template-template-brand .entry-content h3 {
	  font-size: 15px;
	  font-weight: 500;
	  letter-spacing: 0.05em;
	  margin-top: 2.5em;
	  margin-bottom: 0.8em;
	  line-height: 1.5;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

/* サイトタイトルロゴを少し大きく */
.site-branding img {
	    height: 36px;
	    width: auto;
}

/* 左メニューの余白調整 */
#primaryMenu > .menu-item:nth-child(4) {
	    margin-bottom: 24px;
}
#primaryMenu > .menu-item:nth-child(6) {
	    margin-bottom: 24px;
}
#primaryMenu > .menu-item:nth-child(7) {
	    margin-bottom: 48px;
}

}
}
}
}

/* ==========================================================================
 *    Additional Customizations (integrated from Customizer Additional CSS) - 2
 *    ========================================================================== */

.pub-item__thumb {
  width: 120px;
}

.page-template-template-brand .entry-content h3.front-section__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-top: 2.5em;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.lp-body__content .pub-item__title {
  line-height: 1.6;
  margin-bottom: 0.25rem;
}

.lp-body__content .pub-item__meta {
  margin-bottom: 0;
}

.lp-body__content .pub-item__year {
  margin-bottom: 4px;
}

.lp-body__content h2 {
  margin-top: 4rem;
  margin-bottom: 2rem;
}


/* ==========================================================================
Journal Archive - Card Grid & Tag Nav (added for note-style structure)
========================================================================== */

.journal-tag-nav {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.journal-tag-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.journal-tag-nav__link {
	display: inline-block;
	font-family: var(--font-accent);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	border: 1px solid var(--color-border-light);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
}

.journal-tag-nav__link:hover {
	color: var(--color-white);
	background: var(--color-text);
	border-color: var(--color-text);
	opacity: 1;
}

.journal-grid {
	margin-bottom: 1rem;
}

.journal-grid .journal-card__date {
	white-space: nowrap;
}

/* ==========================================================================
Post Table of Contents (single post)
========================================================================== */

.post-toc {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--color-gray-100);
}

.post-toc__title {
	font-family: var(--font-accent);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 1rem;
}

.post-toc__list {
	list-style: decimal;
	margin: 0;
	padding-left: 1.25em;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-toc__item a {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.post-toc__item a:hover {
	opacity: 0.6;
}


/* Journal category archive: align title styling with Books page (.entry-title) */
.category-journal .brand-hero {
	padding-top: 3rem;
}

.category-journal .brand-hero__name {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

/* ==========================================================================
 *    Responsive: extend mobile nav breakpoint to 992px (was 768px)
 *    so the sidebar/grid layouts don't break on ~834-991px widths (e.g. iPad).
 *    ========================================================================== */

@media (min-width: 769px) and (max-width: 991px) {
	.site-body {
		margin-left: 0;
	}
	
	.site-nav {
		position: fixed;
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--color-border-light);
		overflow: visible;
		z-index: 100;
	}
	
	.site-nav__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1rem var(--page-padding-x);
		min-height: auto;
	}
	
	.site-branding {
		margin-bottom: 0;
	}
	
	.site-nav__toggle {
		display: flex;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px;
		width: 44px;
		height: 44px;
		position: relative;
		touch-action: manipulation;
	}
	
	.hamburger-line {
		display: block;
		width: 20px;
		height: 1px;
		background: var(--color-text);
		position: absolute;
		left: 12px;
		transition: all var(--transition);
	}
	
	.hamburger-line:nth-child(1) {
		top: 16px;
	}
	
	.hamburger-line:nth-child(2) {
		top: 22px;
	}
	
	.hamburger-line:nth-child(3) {
		top: 28px;
	}
	
	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
		top: 22px;
		transform: rotate(45deg);
	}
	
	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
		opacity: 0;
	}
	
	.site-nav__toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
		top: 22px;
		transform: rotate(-45deg);
	}
	
	#primaryMenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-border-light);
		padding: 1rem var(--page-padding-x) 1.5rem;
		text-align: center;
	}
	
	#primaryMenu.is-open {
		display: block;
	}
	
	#primaryMenu li a {
		padding: 0.875rem 0;
	}
	
	.site-body {
		padding-top: 70px;
	}
	
	.activity-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.activity-item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	
	.activity-item__name {
		margin-bottom: 0;
	}
	
	.about-profile__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.about-profile__photo {
		max-width: 160px;
	}
}


/* ==========================================================================
   Migrated from Customizer > Additional CSS
   ========================================================================== */

.lp-body__content > .wp-block-columns {
    padding: 0 clamp(0px, (100% - 512px) / 2, 288px);
}

.cmp-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/* Hero section (logo + one-line copy): unify height across brand pages so hero image starts at the same position */
.lp-hero__logo {
    width: 280px;
    height: 120px;
    max-width: 100%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-hero__logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}