:root {
	--hcl-wrap: 1180px;
	--hcl-gutter: 56px;
	--hcl-ink: #24211e;
	--hcl-text: #514b44;
	--hcl-gold: #b88932;
	--hcl-line: #ddd5c8;
	--hcl-title: clamp(48px, 5vw, 64px);
	--hcl-title-section: clamp(40px, 4.2vw, 56px);
	--hcl-kicker: 12px;
	--hcl-kicker-ls: 0.28em;
	--hcl-body: 14.5px;
	--hcl-body-lh: 2.1;
	--hcl-body-max: 520px;
	--hcl-ease: ease;
}

@media (max-width: 720px) {
	:root {
		--hcl-gutter: 32px;
		--hcl-title: clamp(30px, 8.5vw, 36px);
		--hcl-title-section: clamp(30px, 7.5vw, 36px);
	}
}

.hcl-wrap {
	width: min(var(--hcl-wrap), calc(100% - var(--hcl-gutter)));
	margin-inline: auto;
}

.eyebrow,
.hcl-kicker,
.hcl-page-hero__eyebrow,
.hcl-bp-eyebrow,
.hcl-news__hero > p,
.hcl-privacy__en,
.hcl-recruit__kicker,
.hcl-contact__kicker {
	margin: 0 0 16px;
	color: var(--hcl-gold);
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--hcl-kicker);
	font-weight: 400;
	letter-spacing: var(--hcl-kicker-ls);
	line-height: 1.4;
}

.hcl-page h1,
.hcl-page-hero h1,
.hcl-about-page h1,
.hcl-about-page h2,
.hcl-news__hero h1,
.hcl-recruit__hero-copy h1,
.hcl-contact__hero-copy h1,
.hcl-privacy__hero h1,
.hcl-bp-hero h1,
.hcl-site .split-content h2,
.hcl-site .section-heading h2,
.hcl-site .scene-title h2,
.hcl-site .map-heading h2,
.hcl-site .bottom-cta h2 {
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 400;
	color: var(--hcl-ink);
	letter-spacing: 0.04em;
}

.hcl-page-hero h1,
.hcl-news__hero h1,
.hcl-recruit__hero-copy h1,
.hcl-contact__hero-copy h1,
.hcl-privacy__hero h1,
.hcl-bp-hero h1,
.hcl-bp-hero__title,
.hcl-about-origin__title,
.hcl-site .hero-main__title {
	font-size: var(--hcl-title);
}

.hcl-about-intro h2,
.hcl-about-brands h2,
.hcl-about-history h2,
.hcl-about-company h2,
.hcl-about-business h3,
.hcl-site .split-content h2,
.hcl-site .section-heading h2,
.hcl-site .scene-title h2,
.hcl-site .map-heading h2,
.hcl-site .bottom-cta h2,
.hcl-bp-intro h2,
.hcl-bp-philosophy h2,
.hcl-bp-signature h2 {
	font-size: var(--hcl-title-section);
}

.hcl-page p,
.hcl-site .split-content p,
.hcl-site .section-heading p:last-child,
.hcl-site .map-heading p,
.hcl-recruit__hero-copy > p:not(.hcl-recruit__count),
.hcl-contact__hero-copy p,
.hcl-bp-hero p,
.hcl-bp-intro p,
.hcl-bp-philosophy__copy p,
.hcl-privacy__hero p:not(.hcl-privacy__en) {
	max-width: var(--hcl-body-max);
	font-size: var(--hcl-body);
	line-height: var(--hcl-body-lh);
	color: var(--hcl-text);
}

/* Hero title: fade + 18px rise, 600ms */
.hcl-anim-hero {
	opacity: 0;
	animation: hcl-hero-in 600ms var(--hcl-ease) forwards;
}

@keyframes hcl-hero-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Section titles: fade only, 450ms */
.hcl-anim-title {
	opacity: 0;
}

.hcl-anim-title.is-in {
	animation: hcl-title-in 450ms var(--hcl-ease) forwards;
}

@keyframes hcl-title-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Images: mask wipe 800–1000ms */
.hcl-anim-image,
.image-reveal-right,
.image-reveal-left,
.image-reveal-map {
	position: relative;
	overflow: hidden;
}

.hcl-anim-image::after,
.image-reveal-right::after,
.image-reveal-left::after,
.image-reveal-map::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background: #faf8f3;
	pointer-events: none;
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
}

.image-reveal-right::after {
	transform-origin: right center;
}

.hcl-anim-image--up::after {
	transform: scaleY(1);
	transform-origin: bottom center;
}

.hcl-anim-image.is-in::after,
.image-visible::after {
	transform: scaleX(0);
}

.hcl-anim-image--up.is-in::after {
	transform: scaleY(0);
}

/* Link arrows: 4px / 200ms */
a > span[aria-hidden="true"],
.store-more span,
.button-gold span,
.button-outline span,
.hcl-bp-button::after,
.hcl-news__go,
.hcl-contact__shops a span {
	transition: transform 200ms var(--hcl-ease);
}

a:hover > span[aria-hidden="true"],
.store-more:hover span,
.button-gold:hover span,
.button-outline:hover span,
.hcl-bp-button:hover::after,
.hcl-news__row:hover .hcl-news__go,
.hcl-contact__shops a:hover span {
	transform: translateX(4px);
}

header#header .header-reserve__go {
	transition: transform 200ms var(--hcl-ease);
}

header#header .header-reserve:hover .header-reserve__go {
	transform: translateX(3px);
}

/* Buttons: 200ms surface change */
.button-gold,
.button-outline,
.hcl-page-button,
.hero-search__submit,
header#header .header-reserve,
.hcl-recruit__button,
.hcl-contact__form button[type="submit"] {
	transition: background-color 200ms var(--hcl-ease), border-color 200ms var(--hcl-ease), color 200ms var(--hcl-ease);
}

.button-gold:hover {
	background-color: #a67a2b;
}

.button-outline:hover,
.hcl-page-button:hover {
	background-color: rgba(184, 137, 50, 0.08);
}

body.hcl-lang-zh {
	font-family: "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

body.hcl-lang-zh h1,
body.hcl-lang-zh h2,
body.hcl-lang-zh h3,
body.hcl-lang-zh .hcl-anim-title,
body.hcl-lang-zh .hero-main__title,
body.hcl-lang-zh .hcl-page h1,
body.hcl-lang-zh .hcl-about-page h1,
body.hcl-lang-zh .hcl-about-page h2 {
	font-family: "Noto Serif SC", "Noto Serif JP", "Songti SC", serif;
}

@media (prefers-reduced-motion: reduce) {
	.hcl-anim-hero,
	.hcl-anim-title,
	.hcl-anim-title.is-in {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.hcl-anim-image::after,
	.image-reveal-right::after,
	.image-reveal-left::after,
	.image-reveal-map::after {
		display: none !important;
	}

	.hcl-japanese-background,
	.hcl-japanese-background *,
	.hcl-japanese-background::before,
	.hcl-japanese-background::after {
		animation: none !important;
	}

	.hero-main__line,
	.hero-main__lead,
	.hero-main__copy p,
	.hero-main__actions {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
