@charset "utf-8";

/* =========================================================
   PC — comp width 1920, content column 1140 centered
   ========================================================= */

.page { position: relative; overflow: hidden; }

.col {
	position: relative;
	width: min(1140px, 100%);
	margin: 0 auto;
	background: #fff;
	z-index: 2;
}

/*-----------
header
-----------*/
header { position: absolute; top: 0; left: 0; width: 100%; height: 130px; z-index: 40; }
header .logo-gsc {
	position: absolute;
	left: 6px;
	top: -35px;
	width: 124px;
	line-height: 0;
}
/* logos flip to white at <=1140, where the column loses its side margins and
   they end up sitting on the KV photo instead of the stripe background */
header picture { display: block; }
header .logo-collection {
	position: absolute;
	left: 138px;
	top: 9px;
	width: 106px;
	line-height: 0;
}
header .language {
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 241px;
	height: 34px;
	background: #000;
	border-radius: 100px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}
header .language .label { margin-right: 8px; }
header .language li + li + li::before { content: "｜"; margin-right: 4px; }
header .language .active a { color: var(--teal); }
header .language a:hover { opacity: 0.7; }

.btn_nav { display: none; }
.menu_sp { display: none; }

/*-----------
right rail
-----------*/
#sidenav {
	position: fixed;
	top: 342px;
	left: calc(50% + 586px);
	width: 124px;
	z-index: 40;
}
.sidenav-links { font-weight: 900; font-size: 20px; line-height: 45px; }
.sidenav-links a { position: relative; transition: color 0.25s ease; }
.sidenav-links a:hover { color: var(--teal); }
/* current-section marker: absolute so a wide label can't wrap the 124px rail */
.sidenav-links a::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-left: 1px;
	transform: translateY(-50%);
	background: url(../images/deco/feather_nav.svg) center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.sidenav-links .current a::after { opacity: 1; }
#sidenav .share { display: flex; gap: 11px; margin-top: 12px; }
#sidenav .share a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #000;
	border-radius: 6px;
	transition: background 0.25s ease;
}
#sidenav .share a:hover { background: var(--teal); }
#sidenav .share svg { width: 58%; height: 58%; fill: #fff; }

/*-----------
feather decorations
-----------*/
/* ambient background texture: behind all content (negative z sits above
   .col's own background but under everything in it), softened, parallaxed */
.feather { position: absolute; z-index: -1; opacity: 0.6; pointer-events: none; will-change: transform; }
/* hero group rides above the KV photo (behind it they'd be invisible) and
   needs more opacity than the body feathers to read against the dark image */
.f-kv-l1, .f-kv-l2, .f-kv-l3, .f-kv-r2, .f-kv-r1 { z-index: 4; opacity: 0.85; }
/* comp px scaled by --hu, same as the KV itself. Fixed px here meant the two
   right-hand feathers walked off the edge as the column narrowed (entirely gone
   by ~800); scaling keeps the designed bleed constant instead of growing. */
.f-kv-l1 { left: calc(95 * var(--hu));  top: calc(485 * var(--hu)); width: calc(204 * var(--hu)); height: calc(175 * var(--hu)); }
.f-kv-l2 { left: calc(175 * var(--hu)); top: calc(496 * var(--hu)); width: calc(123 * var(--hu)); height: calc(137 * var(--hu)); }
.f-kv-l3 { left: calc(-25 * var(--hu)); top: calc(804 * var(--hu)); width: calc(292 * var(--hu)); height: calc(385 * var(--hu)); }
.f-kv-r2 { left: calc(981 * var(--hu)); top: calc(669 * var(--hu)); width: calc(221 * var(--hu)); height: calc(306 * var(--hu)); }
.f-kv-r1 { left: calc(934 * var(--hu)); top: calc(-42 * var(--hu)); width: calc(251 * var(--hu)); height: calc(285 * var(--hu)); }
.f-gallery { left: 259px; top: 3100px; width: 1480px; height: 641px; }
.f-product { left: 89px;  top: 6201px; width: 214px; height: 187px; }
.f-foot   { left: 1109px; top: 7035px; width: 248px; height: 325px; }

/*-----------
KV
-----------*/
#mv { position: relative; height: calc(1080 * var(--hu)); overflow: hidden; z-index: 3; }
.mv-photo { position: absolute; inset: 0; }
.mv-photo img {
	position: absolute;
	left: -0.09%;
	top: -22.04%;
	width: 100.18%;
	max-width: none;
}
.mv-frame {
	position: absolute;
	left: calc(71 * var(--hu));
	top: calc(70 * var(--hu));
	width: calc(1000 * var(--hu));
	height: calc(849 * var(--hu));
	border: 4px solid transparent;
	background-origin: border-box;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(#000000, #000000),
		linear-gradient(#b1d0d1, #b1d0d1),
		var(--frame-stroke),
		var(--frame-stroke);
	background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
	background-position: left top, left bottom, left top, right top;
}
.mv-title { position: absolute; inset: 0; }
.mv-title > * { position: absolute; white-space: nowrap; }

/* Load-in: the KV text and the rail both sit against the right edge, so they
   arrive from that side. Animated in CSS rather than via .fadein/.scrollin, which
   waits on final.js sitting behind four blocking CDN scripts.
   Applied to .mv-title itself, not its children — they carry their own transforms. */
@keyframes slide-in-right {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: translateX(0); }
}
.mv-title { animation: slide-in-right 1s ease 0.15s both; }
#sidenav { animation: slide-in-right 1s ease 0.45s both; }
/* Feathers just fade, no slide: the parallax script owns their transform. A
   from-only keyframe leaves the "to" implicit, so each fades up to its own resting
   opacity (0.6 body, 0.85 hero) rather than being forced to 1. */
@keyframes feather-in { from { opacity: 0; } }
.feather { animation: feather-in 1.4s ease 0.3s both; }
@media (prefers-reduced-motion: reduce) {
	.mv-title, #sidenav, .feather { animation: none; }
}
.mv-title .scale {
	left: calc(932 * var(--hu));
	top: calc(884 * var(--hu));
	transform: translateX(-50%);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: calc(24 * var(--hu));
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.mv-title .name {
	right: calc(63 * var(--hu));
	top: calc(904 * var(--hu));
	font-family: var(--display);
	font-weight: 900;
	font-size: calc(96 * var(--hu));
	/* Figma's text box is 135px for 96px type; 1.15 rode up onto the frame */
	line-height: 1.406;
	color: var(--teal);
	text-shadow: 2px 2px 0 #000;
}
.mv-title .romaji {
	right: calc(68 * var(--hu));
	top: calc(1027 * var(--hu));
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: calc(24 * var(--hu));
	line-height: 1.15;
	letter-spacing: calc(2.88 * var(--hu));
	color: var(--red);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/*-----------
shared section furniture
-----------*/
.sec { position: relative; padding-top: 45px; }
.sec-title {
	position: absolute;
	top: 0;
	left: 52px;
	font-weight: 900;
	font-size: 64px;
	line-height: 1.4;
	color: var(--teal);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
}
.sec-title-center {
	position: static;
	left: auto;
	text-align: center;
}

.panel {
	position: relative;
	width: 1000px;
	max-width: 88%;
	margin: 0 auto;
	padding: 0 76px;
	border: 4px solid transparent;
	background-origin: border-box;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(#000000, #000000),
		linear-gradient(#b1d0d1, #b1d0d1),
		var(--frame-stroke),
		var(--frame-stroke);
	background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%;
	background-position: left top, left bottom, left top, right top;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	text-align: center;
}
.panel h3 {
	font-weight: 900;
	font-size: 36px;
	line-height: 1.36;
}
.cta { text-align: center; }

/*-----------
ABOUT
-----------*/
#about { margin-top: 107px; }
#about .panel { padding-top: 96px; padding-bottom: 95px; }
#about .panel p { margin-top: 70px; text-align: left; }

/*-----------
HIGHLIGHTS
-----------*/
#highlights { margin-top: 121px; }
#highlights .sec-title { margin-bottom: 36px; }

.point { position: relative; height: 278px; }
.point + .point { margin-top: 46px; }
.point-label {
	position: absolute;
	/* raised so the glyphs rest on the panel's top edge rather than being cut by it
	   and relying on z-index to sit over the border. -6, not -10: at -10 the labels
	   read as floating clear of the frame instead of sitting on it. */
	top: -6px;
	left: 383px;
	font-weight: 900;
	font-size: 32px;
	line-height: 1.66;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	z-index: 5;
}
.point-thumb {
	position: absolute;
	display: block;
	left: 72px;
	top: 33px;
	width: 245px;
	height: 245px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* exports are 253px: 245px of art plus Figma's shadow bleed, which overflow clips.
   Percentages keep the art flush to the box once it goes fluid on SP. */
.point-thumb img {
	position: absolute;
	left: -1.6327%;
	top: 0;
	width: 103.2653%;
	max-width: none;
}

.point-text {
	position: absolute;
	left: 385px;
	top: 33px;
	display: flex;
	align-items: center;
	width: 687px;
	max-width: none;
	height: 245px;
	margin: 0;
	padding: 0 79px;
}

/*-----------
GALLERY
-----------*/
#gallery { margin-top: 140px; }
.gallery-head { position: relative; text-align: center; }
.gnav {
	width: 24px;
	height: 48px;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.gnav svg { width: 100%; height: 100%; fill: var(--teal); }
.gnav { position: absolute; top: 20px; }
.gnav-prev { left: 34.39%; transform: scaleX(-1); }
.gnav-next { left: 63.95%; }
.gnav:hover { opacity: 0.65; }
.gnav-prev:hover { transform: scaleX(-1) translateX(3px); }
.gnav-next:hover { transform: translateX(3px); }

#gallery .swiper {
	width: 100vw;
	margin: 35px calc(50% - 50vw) 0;
	overflow: hidden;
	/* bleed stays full width but dissolves into the stripe bg at the column
	   edges, so the fixed side nav never sits over slide artwork */
	-webkit-mask-image: linear-gradient(to right, transparent calc(50% - 575px), #000 calc(50% - 470px), #000 calc(50% + 470px), transparent calc(50% + 575px));
	mask-image: linear-gradient(to right, transparent calc(50% - 575px), #000 calc(50% - 470px), #000 calc(50% + 470px), transparent calc(50% + 575px));
	/* mask hides pixels but keeps them hit-testable; clip-path removes both */
	-webkit-clip-path: inset(0 calc(50% - 575px));
	clip-path: inset(0 calc(50% - 575px));
}
#gallery .swiper-slide {
	width: 480px;
	height: 670px;
	border-radius: 30px;
	overflow: hidden;
	background: #d9d9d9;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* masked-out slides are still hit-testable, so only the three the fade
   leaves visible stay clickable */
#gallery .swiper-slide { pointer-events: none; }
#gallery .swiper-slide-active,
#gallery .swiper-slide-prev,
#gallery .swiper-slide-next { pointer-events: auto; }
#gallery .swiper-slide a,
#gallery .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gallery .swiper-pagination {
	position: static;
	margin-top: 20px;
	line-height: 0;
}
#gallery .swiper-pagination-bullet {
	width: 33px;
	height: 33px;
	margin: 0 !important;
	border-radius: 0;
	opacity: 1;
	background: var(--teal);
	-webkit-mask: url(../images/deco/feather_dot.svg) center / contain no-repeat;
	mask: url(../images/deco/feather_dot.svg) center / contain no-repeat;
	transition: background 0.25s ease;
}
#gallery .swiper-pagination-bullet-active { background: #000; }

/*-----------
SHIPPING
-----------*/
#shipping { margin-top: 114px; }
#shipping .panel { padding-top: 72px; padding-bottom: 72px; }
#shipping .panel p { margin-top: 45px; }
#shipping .cta { margin-top: 52px; }

/*-----------
PREORDER
-----------*/
#preorder { margin-top: 114px; }
#preorder .panel { padding-top: 101px; padding-bottom: 100px; }
#preorder .period {
	margin-top: 14px;
	font-weight: 900;
	font-size: 32px;
	color: var(--teal);
}
#preorder .cta { margin-top: 48px; }
#preorder h3.mt { margin-top: 92px; }
#preorder h3.mt + p { margin-top: 45px; }
#preorder p + h3.mt { margin-top: 57px; }
#preorder p + .cta { margin-top: 41px; }
#preorder .period + .cta { margin-top: 48px; }
#preorder .panel > p:not(.period) { text-align: left; }

/*-----------
PRODUCT
-----------*/
#product { margin-top: 148px; }
.product-card {
	width: 1000px;
	max-width: 88%;
	margin: 0 auto;
	/* right inset lives on .spec, not here: on the card it made the content box
	   lopsided (79 right, 0 left) so the centred h2 landed 39px left of centre */
	padding: 93px 0 92px;
	background: #000;
	border-radius: 50px;
	color: #fff;
}
.product-card h2 {
	margin-bottom: 85px;
	font-weight: 900;
	font-size: 64px;
	line-height: 35px;
	text-align: center;
}
.spec {
	display: grid;
	grid-template-columns: 250px 1fr;
	column-gap: 75px;
	padding-right: 79px;
	font-size: 24px;
	line-height: 35px;
}
/* dt carries the same gap as dd so a label that wraps to two lines (longer in
   EN/ZH) can't close up the space before the next row */
.spec dt { text-align: right; font-weight: 900; margin-bottom: 35px; }
.spec dd { margin-bottom: 35px; }
.spec dt:last-of-type, .spec dd:last-child { margin-bottom: 0; }

.footer-logo { display: none; }
.copyright {
	margin-top: 173px;
	padding-bottom: 153px;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
}

/*-----------
sticky CTA
-----------*/
#stickybar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #333;
	z-index: 50;
	/* held back until scrolled; visibility so it can't catch clicks while hidden */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s;
}
#stickybar.visible { opacity: 1; visibility: visible; }
.sticky-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 370px;
	height: 40px;
	background: #fff;
	border-radius: 100px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	color: var(--teal);
	font-weight: 900;
	font-size: 15px;
	transition: background 0.25s ease, color 0.25s ease;
}
.sticky-btn:hover { background: var(--teal); color: #fff; }

/* =========================================================
   narrow desktop / tablet
   ========================================================= */
@media screen and (max-width: 1440px) {
	/* side rail no longer fits beside the column: fold the section links into
	   a hamburger. Styling lives here, not at the SP breakpoint, or the menu
	   renders as a bare stacked list between 769-1440. */
	#sidenav { display: none; }

	.btn_nav {
		position: absolute;
		right: 261px;
		top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 0;
		border-radius: 50%;
		background: #000;
		cursor: pointer;
		z-index: 45;
	}
	.btn_nav span,
	.btn_nav::before,
	.btn_nav::after {
		content: "";
		position: absolute;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.btn_nav::before { transform: translateY(-6px); }
	.btn_nav::after { transform: translateY(6px); }
	.btn_nav.active span { opacity: 0; }
	.btn_nav.active::before { transform: rotate(45deg); }
	.btn_nav.active::after { transform: rotate(-45deg); }

	.menu_sp {
		display: block;
		position: absolute;
		top: 54px;
		right: 10px;
		width: 210px;
		padding: 18px;
		border-radius: 12px;
		background: rgba(0, 0, 0, 0.92);
		color: #fff;
		opacity: 0;
		visibility: hidden;
		/* matches the KV/rail entrance direction */
		transform: translateX(8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
		z-index: 44;
	}
	.menu_sp.active { opacity: 1; visibility: visible; transform: translateX(0); }
	/* language pill is still on screen here, so don't repeat it in the menu */
	.language_sp { display: none; }
	.menu_sp_links {
		font-weight: 900;
		font-size: 14px;
		line-height: 30px;
		text-align: center;
	}
	/* the rail's share block is hidden with #sidenav from here down, so the menu
	   carries it instead. Bare white glyphs, not the rail's black tiles, which
	   would disappear into this panel. */
	.menu_sp_share {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}
	.menu_sp_share a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
	}
	.menu_sp_share svg { width: 68%; height: 68%; fill: #fff; transition: fill 0.25s ease; }
	.menu_sp_share a:hover svg { fill: var(--teal); }
}

@media screen and (max-width: 1200px) {
	.sec-title { font-size: 52px; left: 4%; }
	.panel { padding-left: 6%; padding-right: 6%; }
	.point-label { left: 34%; }
	.point-body { gap: 5%; }
	.point-thumb { margin-left: 6%; }
	.point-text { width: auto; flex: 1; padding: 0 5%; }
	#gallery .swiper-slide { width: 380px; height: 530px; }
	.product-card { padding: 70px 0; }
	.spec { grid-template-columns: 22% 1fr; column-gap: 6%; padding-right: 6%; font-size: 20px; }
}

@media screen and (max-width: 900px) {
	body { font-size: 17px; line-height: 30px; }
	.sec-title { font-size: 42px; }
	.panel h3 { font-size: 28px; }
	.point { height: auto; }
	/* clear the PC coordinates too: switching to relative leaves left/top applied
	   as nudges, which shoved the thumb off centre and down onto the POINT label */
	.point-thumb { position: relative; left: auto; top: auto; margin: 0 auto; }
	.point-label { position: relative; left: auto; top: auto; z-index: 5; text-align: center; margin: 12px 0 -10px; }
	.point-text { position: static; width: 100%; height: auto; padding: 24px 6%; }
	.spec { font-size: 17px; line-height: 30px; }
	.spec dd { margin-bottom: 30px; }
}

/* =========================================================
   SP — comp width 393
   Held to 600 so tablets keep the PC comp: the PC hero scales with --hu, while
   this one is pinned to the 393 comp and reads badly once it gets much wider.
   ========================================================= */
@media screen and (max-width: 600px) {
	body {
		font-size: 13px;
		line-height: 25px;
		background-size: 620px 310px;
	}
	.col { width: 100%; background: none; }

	/* header */
	header { height: 90px; }
	header .logo-gsc { display: none; }
	/* Position in --su so the logo tracks the percentage-based KV frame it sits
	   inside, but keep the size fixed: the asset is only 112px wide and upscaling
	   it goes soft. 40 rather than the comp's 33 to clear the frame's left edge. */
	header .logo-collection { left: calc(40 * var(--su)); top: calc(34 * var(--su)); width: 110px; }
	header .language { display: none; }

	/* top in the same --su as the logo, so the two stay centre-aligned as they are
	   in the comp (logo 53.4, burger 53) instead of drifting apart across the range */
	.btn_nav { right: calc(36 * var(--su)); top: calc(35 * var(--su)); width: 36px; height: 36px; }
	/* burger top + its fixed 36px + the comp's 9px gap, so the offset holds at
	   every width instead of pinching shut at 320 or overlapping at 600 */
	.menu_sp { top: calc(35 * var(--su) + 45px); right: calc(20 * var(--su)); }
	.language_sp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700;
		font-size: 13px;
		line-height: 1;
	}
	.language_sp .label { width: 100%; text-align: center; margin-bottom: 4px; }
	.language_sp .active a { color: var(--teal); }
	.menu_sp_links {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	/* feathers */
	/* --su for the same reason, minus 60 on the ones anchored to the art: cropping
	   the photo's top moved its content up by that much within the shorter box.
	   r1 bleeds in over the top edge, so it stays pinned to the edge, not the art. */
	.f-kv-l1 { left: calc(91 * var(--su));  top: calc(488 * var(--su)); width: calc(98 * var(--su));  height: calc(84 * var(--su)); }
	.f-kv-l2 { left: calc(106 * var(--su)); top: calc(502 * var(--su)); width: calc(47 * var(--su));  height: calc(64 * var(--su)); }
	.f-kv-l3 { display: none; }
	.f-kv-r2 { left: calc(307 * var(--su)); top: calc(382 * var(--su)); width: calc(108 * var(--su)); height: calc(169 * var(--su)); }
	.f-kv-r1 { left: calc(327 * var(--su)); top: calc(-32 * var(--su)); width: calc(122 * var(--su)); height: calc(149 * var(--su)); }
	.f-gallery { display: none; }
	.f-product { left: 102px; top: 5615px; width: 94px; height: 82px; }
	.f-foot   { left: 275px; top: 6598px; width: 102px; height: 139px; }

	/* KV — the photo is a fixed 393:700 crop, so the frame and title must scale
	   with it or they drift off the art as the viewport widens. --su is the
	   PC side's --hu trick against the 393 comp: values below are comp pixels. */
	:root { --su: calc(100vw / 393); }
	#mv { height: auto; }
	/* 640 not the comp's 700: the top of the shot is bare sky, and trimming it
	   buys the title clearance off the bottom edge instead of sitting on it.
	   object-position holds the photo's bottom edge, so the 60 comes off the top. */
	.mv-photo { position: relative; width: 100%; aspect-ratio: 393 / 640; }
	.mv-photo img { left: -27.48%; top: 0; width: 154.96%; height: 100%; object-fit: cover; object-position: center 28%; }
	.mv-frame {
		left: 6.87%; top: calc(21 * var(--su)); width: 86.51%; height: calc(530 * var(--su));
		border-width: 3px;
		background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
	}
	.mv-title > * { position: absolute; }
	/* group sits low enough that the frame's bottom edge falls in the gap between
	   the scale label and the name instead of cutting through the glyphs */
	.mv-title .scale { left: 70.74%; top: calc(528 * var(--su)); font-size: calc(16 * var(--su)); }
	.mv-title .name { right: 6.62%; top: calc(551 * var(--su)); font-size: calc(40 * var(--su)); }
	.mv-title .romaji { right: 6.62%; top: calc(607 * var(--su)); font-size: calc(11 * var(--su)); letter-spacing: calc(1.32 * var(--su)); }

	/* shared */
	.sec { padding-top: 0; }
	.sec-title {
		position: relative;
		left: auto;
		margin-bottom: -26px;
		font-size: 40px;
		line-height: 1.32;
		text-align: center;
	}
	.panel {
		width: 86.51%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 7.13%;
		border-width: 3px;
		background-color: #fff;
		background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
	}
	.panel h3 { font-size: 16px; line-height: 1.4; }
	.panel p { line-height: 25px; }
	.btn { width: 280px; max-width: 100%; height: 40px; font-size: 13px; }

	/* ABOUT */
	#about { margin-top: 42px; }
	#about .panel { padding-top: 49px; padding-bottom: 49px; }
	#about .panel p { margin-top: 19px; text-align: center; }

	/* HIGHLIGHTS */
	#highlights { margin-top: 86px; }
	#highlights .sec-title { margin-bottom: 29px; }
	.point { height: auto; }
	.point + .point { margin-top: 58px; }
	.point-thumb {
		position: relative;
		display: block;
		width: 86.51%;
		max-width: 500px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 auto 17px;
	}
	.point-label {
		position: relative;
		z-index: 5;
		margin-bottom: -7px;
		font-size: 24px;
		line-height: 1.33;
		text-align: center;
	}
	.point-text {
		position: static;
		width: 86.51%;
		max-width: 500px;
		height: auto;
		margin: 0 auto;
		padding: 25px 7.13%;
	}

	/* GALLERY */
	#gallery { margin-top: 70px; }
	#gallery .sec-title { margin-bottom: 16px; }
	.gnav { display: none; }
	#gallery .swiper { margin-top: 0; -webkit-mask-image: none; mask-image: none; -webkit-clip-path: none; clip-path: none; }
	#gallery .swiper-slide { width: 287px; height: 400px; border-radius: 18px; }
	#gallery .swiper-pagination { margin-top: 16px; }
	#gallery .swiper-pagination-bullet { width: 22px; height: 22px; }

	/* SHIPPING */
	#shipping { margin-top: 42px; }
	#shipping .panel { padding-top: 48px; padding-bottom: 48px; }
	#shipping .panel p { margin-top: 27px; }
	#shipping .cta { margin-top: 26px; }

	/* PREORDER */
	#preorder { margin-top: 42px; }
	#preorder .panel { padding-top: 71px; padding-bottom: 71px; }
	#preorder .period { margin-top: 12px; font-size: 16px; line-height: 1.4; }
	#preorder .period + .cta { margin-top: 23px; }
	#preorder h3.mt { margin-top: 51px; }
	#preorder h3.mt + p { margin-top: 22px; }
	#preorder p + h3.mt { margin-top: 51px; }
	#preorder p + .cta { margin-top: 23px; }

	/* PRODUCT */
	#product { margin-top: 80px; }
	.product-card {
		width: 86.51%;
		max-width: 500px;
		padding: 64px 7.13% 89px;
		border-radius: 20px;
		text-align: center;
	}
	.product-card h2 { margin-bottom: 47px; font-size: 40px; }
	.spec {
		display: block;
		padding-right: 0;
		font-size: 16px;
		line-height: 25px;
	}
	/* one column: the label belongs to the value under it, so the row gap lives
	   on dd only. The grid's dt gap would push label and value apart. */
	.spec dt { margin-bottom: 0; text-align: center; font-weight: 700; color: var(--teal); }
	.spec dd { margin-bottom: 25px; }
	.spec dd:last-child { margin-bottom: 0; }

	.footer-logo {
		display: block;
		width: 104px;
		margin: 51px auto -14px;
		line-height: 0;
	}
	.copyright {
		margin-top: 0;
		/* 52 as designed plus the 56px fixed bar, so it can't sit over the credits */
		padding-bottom: 108px;
		font-size: 11px;
		line-height: 14px;
	}

	/* Sticky CTA stays on mobile. The 370px pill has to shrink to fit narrow screens,
	   but the height holds at 40 per the tap-target rule. */
	#stickybar { height: 56px; }
	/* 12px, not 13: the ZH label is the longest and at 13 it filled the 275px pill
	   edge to edge on a 320 screen */
	.sticky-btn { width: min(370px, 86%); height: 40px; font-size: 12px; }
}

@media screen and (max-width: 400px) {
	/* .name needs no override: 40 * --su is already 10.18vw */
	.sec-title { font-size: 10.2vw; }
}

/* =========================================================
   EN spec table — Latin labels run much wider than the JP ones at weight 900
   ("Specifications" is ~120px against a 109px column at the narrowest grid width,
   and being one word it can't wrap, so it clipped). Step the Latin type down over
   the range where the two-column grid is narrow; wider widths have room already.
   ========================================================= */
@media screen and (min-width: 601px) and (max-width: 900px) {
	html:lang(en) .spec { font-size: 14px; line-height: 25px; }
}