/* ==========================================================================
   Kami — Components
   Buttons, links, cards, image treatments, forms, breadcrumb, header, footer.
   ========================================================================== */

/* --- Buttons / links ----------------------------------------------------- */
.kami-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-wide);
	text-transform: lowercase;
	color: var(--kami-text);
	padding: var(--space-xs) 0;
	position: relative;
}

.kami-btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--kami-text);
	transform-origin: right;
	transform: scaleX(1);
	transition: transform var(--dur-mid) var(--ease-out);
}

.kami-btn:hover::after {
	transform-origin: left;
	transform: scaleX(0);
}

.kami-btn__arrow {
	display: inline-block;
	transition: transform var(--dur-fast) var(--ease-out);
}

.kami-btn:hover .kami-btn__arrow {
	transform: translateX(4px);
}

.kami-btn--solid {
	background: var(--kami-text);
	color: var(--kami-bg);
	padding: var(--space-sm) var(--space-md);
	letter-spacing: var(--ls-wide);
}

.kami-btn--solid::after {
	display: none;
}

.kami-btn--solid:hover {
	background: var(--kami-accent);
	color: var(--kami-bg);
}

.kami-btn--outline {
	border: 1px solid var(--kami-line);
	padding: var(--space-sm) var(--space-md);
}

.kami-btn--outline::after {
	display: none;
}

.kami-btn--outline:hover {
	border-color: var(--kami-text);
}

/* Inline text link with underline reveal */
.kami-link {
	position: relative;
	color: var(--kami-text);
	border-bottom: 1px solid var(--kami-line);
}

.kami-link:hover {
	border-color: var(--kami-text);
	color: var(--kami-text);
}

/* --- Image treatments ---------------------------------------------------- */
.kami-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Global warm cohesion safety-net for mixed imagery */
	filter: saturate(0.96) brightness(1.01);
}

.kami-figure {
	position: relative;
	overflow: hidden;
	background: var(--kami-bg-warm);
}

.kami-figure--portrait {
	aspect-ratio: 4 / 5;
}

.kami-figure--landscape {
	aspect-ratio: 16 / 9;
}

.kami-figure--square {
	aspect-ratio: 1 / 1;
}

.kami-figure--tall {
	aspect-ratio: 3 / 4;
}

.kami-figcaption {
	margin-top: var(--space-xs);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-mid);
	color: var(--kami-secondary);
	text-transform: lowercase;
}

/* Placeholder shown when no image is set yet */
.kami-figure__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(
			45deg,
			var(--kami-bg-warm),
			var(--kami-bg-warm) 12px,
			#e8e0d3 12px,
			#e8e0d3 24px
		);
	color: var(--kami-secondary);
	font-family: var(--font-serif-jp);
	font-size: var(--fs-xl);
}

/* --- Cards --------------------------------------------------------------- */
.kami-card {
	display: block;
	position: relative;
}

.kami-card__media {
	position: relative;
	overflow: hidden;
	background: var(--kami-bg-warm);
}

.kami-card__media .kami-img {
	transition: transform var(--dur-slow) var(--ease-out);
}

.kami-card:hover .kami-card__media .kami-img {
	transform: scale(1.04);
}

.kami-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md);
	background: linear-gradient(
		to top,
		var(--kami-overlay-strong),
		transparent 60%
	);
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-out);
	color: var(--kami-bg);
}

.kami-card:hover .kami-card__overlay,
.kami-card:focus-within .kami-card__overlay {
	opacity: 1;
}

.kami-card__title-jp {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-md);
	margin-bottom: var(--space-3xs);
}

.kami-card__title-en {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-wide);
	text-transform: lowercase;
	color: rgba(245, 240, 232, 0.85);
}

.kami-card__year {
	font-size: var(--fs-small);
	color: rgba(245, 240, 232, 0.6);
	margin-top: var(--space-3xs);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.kami-breadcrumb {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-mid);
	text-transform: lowercase;
	color: var(--kami-secondary);
	margin-bottom: var(--space-md);
}

.kami-breadcrumb a:hover {
	color: var(--kami-text);
}

.kami-breadcrumb span[aria-hidden] {
	margin-inline: var(--space-2xs);
	opacity: 0.5;
}

/* --- Forms (FormLayer / generic) ----------------------------------------- */
.kami-form input[type="text"],
.kami-form input[type="email"],
.kami-form input[type="tel"],
.kami-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--kami-line);
	padding: var(--space-sm) 0;
	font-size: var(--fs-base);
	color: var(--kami-text);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.kami-form input:focus,
.kami-form textarea:focus {
	outline: none;
	border-color: var(--kami-text);
}

.kami-form label {
	display: block;
	font-size: var(--fs-small);
	letter-spacing: var(--ls-wide);
	text-transform: lowercase;
	color: var(--kami-secondary);
	margin-bottom: var(--space-3xs);
}

.kami-form ::placeholder {
	color: var(--kami-secondary);
	opacity: 0.6;
}

/* --- Header -------------------------------------------------------------- */
.kami-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--container-pad);
	transition: background-color var(--dur-mid) var(--ease-out),
		padding var(--dur-mid) var(--ease-out);
	mix-blend-mode: normal;
}

.kami-header.is-scrolled {
	background-color: rgba(245, 240, 232, 0.92);
	backdrop-filter: blur(8px);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--kami-line-soft);
}

/* Light-on-dark header over a dark hero */
.kami-header.is-over-hero:not(.is-scrolled) {
	color: var(--kami-bg);
}

.kami-header.is-over-hero:not(.is-scrolled) .kami-hamburger__line {
	background: var(--kami-bg);
}

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

.kami-logo__mark {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
	line-height: 1;
	color: currentColor;
}

.kami-header .custom-logo {
	max-height: 48px;
	width: auto;
}

/* Hamburger */
.kami-hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 32px;
	height: 32px;
	padding: 4px;
	z-index: calc(var(--z-overlay) + 1);
}

.kami-hamburger__line {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--kami-text);
	transition: transform var(--dur-fast) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

body.nav-open .kami-hamburger__line {
	background: var(--kami-bg);
}

body.nav-open .kami-hamburger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.nav-open .kami-hamburger__line:nth-child(2) {
	opacity: 0;
}

body.nav-open .kami-hamburger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Footer -------------------------------------------------------------- */
.kami-footer {
	border-top: 1px solid var(--kami-line);
	padding-block: var(--space-xl);
	margin-top: var(--space-2xl);
}

.kami-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.kami-footer__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: space-between;
	align-items: baseline;
}

.kami-footer__mark {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-lg);
}

.kami-footer address {
	font-style: normal;
	color: var(--kami-secondary);
	line-height: var(--lh-snug);
	white-space: pre-line;
}

.kami-footer__meta {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-mid);
	color: var(--kami-secondary);
	text-transform: lowercase;
}

.kami-footer__links {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.kami-footer__copyright {
	font-size: var(--fs-small);
	color: var(--kami-secondary);
	letter-spacing: var(--ls-mid);
}

@media (max-width: 768px) {
	.kami-footer__row {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* --- Scroll indicator ---------------------------------------------------- */
.kami-scroll-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-wide);
	text-transform: lowercase;
	color: currentColor;
}

.kami-scroll-cue__line {
	width: 1px;
	height: 56px;
	background: currentColor;
	opacity: 0.5;
	transform-origin: top;
	animation: kami-cue 2.4s var(--ease-in-out) infinite;
}

/* --- Prev/next navigation ------------------------------------------------ */
.kami-pagenav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	border-top: 1px solid var(--kami-line);
	padding-top: var(--space-lg);
	margin-top: var(--space-xl);
}

.kami-pagenav__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	max-width: 45%;
}

.kami-pagenav__item--next {
	text-align: right;
	margin-left: auto;
}

.kami-pagenav__dir {
	font-size: var(--fs-small);
	letter-spacing: var(--ls-wide);
	text-transform: lowercase;
	color: var(--kami-secondary);
}

.kami-pagenav__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-light);
}