/**
 * 善 Zen — top-page hero「アイソメの街」(v0.9.11). Front page only (inc/hero-town.php).
 * Ref: kgen.co.jp first view (docs/hero-town-notes.md): one isometric town picture covering the first
 * view, copy at the lower left. The picture follows the visitor's clock (html[data-town]); business
 * ninjas run around helping troubled townspeople (assets/js/hero-town.js). Only transform / opacity animate.
 *
 * Scene coordinates: the town image is 1536×1024 (3:2). .p-town__scene keeps that ratio and covers
 * .p-town__stage, centred on the focus point (--fx, --fy = fraction of the scene) where possible.
 */
.p-town {
	--hh: max(600px, 100svh);           /* hero height */
	--box-h: var(--hh);                 /* stage height (phone: upper part only) */
	--sw: max(100vw, calc(var(--box-h) * 1.5));
	--sh: calc(var(--sw) / 1.5);
	--fx: .5;
	--fy: .46;
	--fy-screen: .5;
	--nz: 4.6;                          /* ninja box size, % of the scene width */
	--pz: 5.4;                          /* townsperson box size, % of the scene width */
	--navy: #043450;
	--town-bg: #e3f1ea;
	--chip-bg: rgba(255, 255, 255, .92);
	--chip-ink: var(--navy);
	--chip-line: rgba(4, 52, 80, .1);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-back: cubic-bezier(.34, 1.56, .64, 1);
	position: relative; overflow: hidden; isolation: isolate;
	height: var(--hh);
	background: var(--town-bg);
	transition: background-color 2s ease;
}
html[data-town="morning"] .p-town { --town-bg: #f4e9de; }
html[data-town="evening"] .p-town { --town-bg: #6f4f63; }
html[data-town="night"] .p-town {
	--town-bg: #102c47;
	--chip-bg: rgba(7, 27, 48, .86);
	--chip-ink: #fff;
	--chip-line: rgba(255, 255, 255, .14);
}

/* ---- the town ---- */
.p-town__stage { position: absolute; inset: 0 0 auto 0; height: var(--box-h); overflow: hidden; z-index: 0; transform-origin: 55% 45%; }
.p-town__scene {
	position: absolute;
	width: var(--sw); height: var(--sh);
	left: clamp(calc(100% - var(--sw)), calc(50% - var(--sw) * var(--fx)), 0px);
	top: clamp(calc(var(--box-h) - var(--sh)), calc(var(--box-h) * var(--fy-screen) - var(--sh) * var(--fy)), 0px);
}
.p-town__layer {
	position: absolute; inset: 0;
	background: no-repeat center / 100% 100%;
	opacity: 0;
	transition: opacity 2.4s ease;
}
html[data-town="morning"] .p-town__layer--morning,
html[data-town="day"] .p-town__layer--day,
html[data-town="evening"] .p-town__layer--evening,
html[data-town="night"] .p-town__layer--night { opacity: 1; z-index: 1; }
.p-town__layer.is-prev { opacity: 1; transition: none; }
/* first paint: fade the scene in once its picture is loaded (no JS / failsafe: just show it) */
.js .p-town__scene { opacity: 0; transform: scale(1.03); transition: opacity .9s ease, transform 1.8s var(--ease-out); }
.js .p-town.is-shown .p-town__scene, .is-failsafe .p-town__scene { opacity: 1; transform: none; }

/* ---- actors (built by hero-town.js; ninjas positioned in px of the current scene size) ---- */
.p-town__actors { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.p-town__ninja {
	position: absolute; left: 0; top: 0; z-index: 3;
	width: calc(var(--sw) * var(--nz) / 100); aspect-ratio: 1;
	will-change: transform;
}
.p-town__ninja-body { position: absolute; inset: 0; transform-origin: 50% 95%; }
/* v0.9.23: hero-town.js adds .is-out while a running ninja is outside the visible, uncovered part of the
   town (cropped edge, under the header / copy / time switch) — it fades out instead of being cut in half */
.p-town__ninja { transition: opacity .3s ease; }
.p-town__ninja.is-out { opacity: 0; }
.p-town__ninja-body img {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
	/* thin white rim + soft drop so the ninja reads on any part of the town, day or night */
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 3px 2px rgba(4, 52, 80, .3));
}
.p-town__ninja-body img.is-on { opacity: 1; }
/* working: a small progress bar fills over the ninja */
.p-town__progress {
	position: absolute; left: 22%; right: 22%; bottom: 102%; height: 7px; border-radius: 99px;
	background: #fff; box-shadow: 0 0 0 1.5px rgba(4, 52, 80, .2), 0 3px 8px rgba(4, 52, 80, .2);
	overflow: hidden; opacity: 0; transition: opacity .2s ease;
}
.p-town__progress i { position: absolute; inset: 0; background: linear-gradient(90deg, #00aeef, #5fd0fa); transform: scaleX(0); transform-origin: 0 50%; }
.p-town__ninja.is-working .p-town__progress { opacity: 1; }
.p-town__ninja.is-working .p-town__progress i { animation: zen-town-progress 1.9s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes zen-town-progress { to { transform: scaleX(1); } }
/* 「まかせて！」 / 「がんばる！」 */
.p-town__say {
	position: absolute; left: 50%; bottom: 100%;
	padding: .32em .7em; border-radius: 999px; white-space: nowrap;
	font-size: clamp(12px, calc(var(--sw) * .0082), 14px); font-weight: 700; letter-spacing: .04em; line-height: 1.2;
	color: #fff; background: #00a0dc; box-shadow: 0 0 0 2px #fff, 0 5px 12px rgba(4, 52, 80, .2);
	opacity: 0; transform: translate(-50%, 6px) scale(.8); transform-origin: 50% 100%;
}
.p-town__ninja.is-saying .p-town__say { animation: zen-town-say 1.6s var(--ease-out) both; }
@keyframes zen-town-say { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 15%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
/* tired: 「ふぅ…」 */
.p-town__sigh {
	position: absolute; left: 50%; bottom: 97%; margin-left: -1.9em; /* above the head, clear of the person */
	padding: .3em .65em; border-radius: 10px; white-space: nowrap;
	font-size: clamp(12px, calc(var(--sw) * .0082), 14px); font-weight: 700; letter-spacing: .06em; line-height: 1.2;
	color: #4b5a63; background: #fff; box-shadow: 0 0 0 1.5px rgba(4, 52, 80, .12), 0 5px 12px rgba(4, 52, 80, .18);
	opacity: 0; transform: translateY(6px) scale(.8); transform-origin: 50% 100%;
}
.p-town__ninja.is-tired .p-town__sigh { animation: zen-town-sigh 1.7s var(--ease-out) both; }
@keyframes zen-town-sigh { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 18%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.p-town__ninja::after { /* ground shadow */
	content: ""; position: absolute; left: 28%; right: 28%; bottom: 2%; height: 8%;
	border-radius: 50%; background: rgba(4, 52, 80, .22); z-index: -1;
}
/* 「善！」 over the ninja's head after helping */
.p-town__zen {
	position: absolute; left: 50%; bottom: 96%;
	display: inline-flex; align-items: baseline; gap: .02em;
	padding: .2em .55em .24em .6em; border-radius: 999px;
	font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; line-height: 1; white-space: nowrap;
	font-size: clamp(14px, calc(var(--sw) * .014), 24px);
	color: #fff; background: var(--navy);
	box-shadow: 0 0 0 2.5px #fff, 0 6px 16px rgba(4, 52, 80, .3);
	opacity: 0; transform: translate(-50%, 8px) scale(.5); transform-origin: 50% 100%;
}
.p-town__zen b { font-weight: 700; }
.p-town__zen i { font-style: normal; color: #fdd804; font-size: .85em; }
.p-town__zen::after {
	content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px;
	background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0; z-index: -1;
}
html[data-town="night"] .p-town__zen { background: #00a0dc; }
.p-town__ninja.is-zen .p-town__zen { animation: zen-town-zen 1.9s var(--ease-out) both; }
@keyframes zen-town-zen {
	0% { opacity: 0; transform: translate(-50%, 8px) scale(.5); }
	14% { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
	24%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -10px) scale(1); }
}

/* townsperson by a building: idle (hidden) → is-trouble → is-solving → is-happy → is-leave */
.p-town__spot { position: absolute; width: 0; height: 0; --f: calc(var(--sw) * var(--pz) / 100); z-index: 2; }
.p-town__who {
	position: absolute; left: calc(var(--f) * -.5); bottom: calc(var(--f) * -.03);
	width: var(--f); height: var(--f); transform-origin: 50% 100%; z-index: 1;
	opacity: 0; transform: scale(.6);
	transition: opacity .35s ease, transform .45s var(--ease-back);
}
.p-town__who img {
	position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 1.5px rgba(4, 52, 80, .25));
	transition: opacity .25s ease;
}
.p-town__who-happy { opacity: 0; }
.p-town__spot.is-trouble .p-town__who, .p-town__spot.is-solving .p-town__who, .p-town__spot.is-happy .p-town__who { opacity: 1; transform: none; }
.p-town__spot.is-leave .p-town__who { opacity: 0; transform: scale(.85); }
.p-town__spot.is-trouble .p-town__who-trouble, .p-town__spot.is-working .p-town__who-trouble { animation: zen-town-fret 1.6s ease-in-out infinite; }
.p-town__spot.is-happy .p-town__who-trouble, .p-town__spot.is-leave .p-town__who-trouble { opacity: 0; }
.p-town__spot.is-happy .p-town__who-happy, .p-town__spot.is-leave .p-town__who-happy { opacity: 1; }
.p-town__spot.is-happy .p-town__who-happy { animation: zen-town-hop .38s ease-in-out .1s 4 alternate; }
@keyframes zen-town-fret { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
@keyframes zen-town-hop { from { transform: none; } to { transform: translateY(-18%); } }

/* worry bubble 「書類が山積み…」 */
.p-town__worry {
	position: absolute; left: 0; bottom: calc(var(--f) * 1.02);
	display: inline-flex; align-items: center; gap: .35em;
	padding: .42em .8em .42em .6em; border-radius: 10px; white-space: nowrap;
	font-size: clamp(12px, calc(var(--sw) * .0082), 14px); font-weight: 700; letter-spacing: .02em; line-height: 1.2;
	color: var(--navy); background: #fff;
	box-shadow: 0 0 0 1.5px rgba(4, 52, 80, .12), 0 6px 14px rgba(4, 52, 80, .18);
	opacity: 0; transform: translate(-50%, 6px) scale(.8); transform-origin: 50% 100%;
	transition: opacity .3s ease, transform .4s var(--ease-back);
}
.p-town__worry::after {
	content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff;
	transform: translateX(-50%) rotate(45deg); box-shadow: 1.5px 1.5px 0 rgba(4, 52, 80, .08);
}
.p-town__sweat { display: block; width: .8em; flex: none; animation: zen-town-sweat 1.2s ease-in infinite; }
.p-town__sweat svg { display: block; width: 100%; height: auto; }
@keyframes zen-town-sweat { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
.p-town__spot.is-trouble .p-town__worry { opacity: 1; transform: translate(-50%, 0); }
.p-town__spot.is-trouble .p-town__worry { animation: zen-town-float 2.4s ease-in-out .4s infinite; }
@keyframes zen-town-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }

/* solving: sparkle burst + check over the person */
.p-town__fx {
	position: absolute; left: calc(var(--f) * .12); bottom: calc(var(--f) * .82); z-index: 2; /* beside the head, never over a face */
	width: calc(var(--f) * .5); height: calc(var(--f) * .5);
	opacity: 0; transform: scale(.3);
}
.p-town__fx svg { display: block; width: 100%; height: 100%; }
.p-town__check {
	position: absolute; left: calc(var(--f) * -.17); bottom: calc(var(--f) * 1.08); z-index: 2;
	width: calc(var(--f) * .34); opacity: 0; transform: scale(.3);
}
.p-town__check svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 4px rgba(4, 52, 80, .25)); }
.p-town__spot.is-solving .p-town__fx { animation: zen-town-burst .9s var(--ease-out) both; }
.p-town__spot.is-solving .p-town__check { animation: zen-town-check .9s var(--ease-back) .15s both; }
@keyframes zen-town-burst { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(15deg); } }
@keyframes zen-town-check { 0% { opacity: 0; transform: scale(.3); } 40%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1) translateY(-6px); } }

/* focus: a soft light under the active scene */
.p-town__glow {
	position: absolute; left: calc(var(--f) * -1.3); top: calc(var(--f) * -.55);
	width: calc(var(--f) * 2.6); height: calc(var(--f) * 1.1); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
	opacity: 0; transform: scale(.6); transition: opacity .5s ease, transform .6s var(--ease-out);
}
html[data-town="night"] .p-town__glow { background: radial-gradient(closest-side, rgba(255, 220, 140, .45), rgba(255, 220, 140, 0)); }
.p-town__spot.is-focus .p-town__glow { opacity: 1; transform: none; }
.p-town__spot.is-working .p-town__who { opacity: 1; transform: none; }
.p-town__spot.is-working .p-town__worry { opacity: 1; transform: translate(-50%, 0); }

/* happy: hearts + 「ありがとう！」 */
.p-town__heart { position: absolute; left: calc(var(--f) * .12); bottom: calc(var(--f) * .78); width: calc(var(--f) * .24); opacity: 0; }
.p-town__heart--2 { left: calc(var(--f) * -.4); bottom: calc(var(--f) * .68); width: calc(var(--f) * .18); }
.p-town__heart svg { display: block; width: 100%; height: auto; }
.p-town__thanks {
	position: absolute; left: 0; bottom: calc(var(--f) * 1.02);
	padding: .42em .85em; border-radius: 999px; white-space: nowrap;
	font-size: clamp(12px, calc(var(--sw) * .0085), 14px); font-weight: 700; letter-spacing: .04em; line-height: 1.2;
	color: #fff; background: #ff7a9a;
	box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(4, 52, 80, .2);
	opacity: 0; transform: translate(-50%, 6px);
}
.p-town__spot.is-happy .p-town__heart--1 { animation: zen-town-heart 1.5s ease-out .15s both; }
.p-town__spot.is-happy .p-town__heart--2 { animation: zen-town-heart 1.5s ease-out .45s both; }
.p-town__spot.is-happy .p-town__thanks { animation: zen-town-thanks 3s var(--ease-out) both; }
@keyframes zen-town-heart { 0% { opacity: 0; transform: translateY(0) scale(.4); } 25% { opacity: 1; transform: translateY(-20%) scale(1); } 100% { opacity: 0; transform: translateY(-160%) scale(.9); } }
@keyframes zen-town-thanks { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 10%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* reduced motion stills */
.p-town__spot.is-still-trouble .p-town__who, .p-town__spot.is-still-happy .p-town__who { opacity: 1; transform: none; transition: none; }
.p-town__spot.is-still-trouble .p-town__worry { opacity: 1; transform: translate(-50%, 0); transition: none; }
.p-town__spot.is-still-happy .p-town__who-trouble { opacity: 0; }
.p-town__spot.is-still-happy .p-town__who-happy { opacity: 1; }
.p-town__spot.is-still-happy .p-town__thanks { opacity: 1; transform: translate(-50%, 0); }

/* ---- copy: straight on the town, lower left (ref. kgen.co.jp) — no box, a soft wash for legibility ---- */
.p-town { --wash: 242, 250, 252; --wash-a: .9; --ink: #043450; --ink-sub: #33505f; --ink-en: #0090c8; --ink-shadow: rgba(255, 255, 255, .85); }
html[data-town="morning"] .p-town { --wash: 255, 247, 238; --wash-a: .9; }
html[data-town="evening"] .p-town { --wash: 58, 34, 62; --wash-a: .6; --ink: #fff; --ink-sub: rgba(255, 255, 255, .9); --ink-en: #ffd9c2; --ink-shadow: rgba(40, 18, 40, .55); }
html[data-town="night"] .p-town { --wash: 6, 22, 42; --wash-a: .72; --ink: #fff; --ink-sub: rgba(255, 255, 255, .86); --ink-en: #7fdcff; --ink-shadow: rgba(0, 10, 25, .6); }
.p-town__copy::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: -42vw; right: -26vw; top: -70%; bottom: -60%;
	background: radial-gradient(closest-side, rgba(var(--wash), var(--wash-a)) 0%, rgba(var(--wash), calc(var(--wash-a) * .75)) 40%, rgba(var(--wash), 0) 100%);
	transition: background 2s ease;
}
.p-town__copy {
	position: absolute; z-index: 3;
	left: max(var(--gutter), 4vw); bottom: calc(var(--seam-h) * .7 + clamp(16px, 3svh, 40px));
	max-width: calc(100% - 2 * var(--gutter));
	isolation: isolate;
}
.p-town__en {
	margin: 0 0 clamp(14px, 1.3vw, 20px);
	font-family: var(--f-en); font-weight: 500;
	font-size: clamp(12px, .9vw, 14px); line-height: 1; letter-spacing: .32em;
	color: var(--ink-en); text-shadow: 0 0 12px var(--ink-shadow); transition: color 2s ease;
}
.p-town__title {
	margin: 0; color: var(--ink);
	font-size: clamp(28px, 3vw, 48px); line-height: 1.6; letter-spacing: .18em; font-weight: 500;
	font-feature-settings: "palt";
	text-shadow: 0 0 18px var(--ink-shadow), 0 0 2px var(--ink-shadow);
	transition: color 2s ease;
}
.p-town__title > span { display: block; white-space: nowrap; }
.p-town__lead {
	margin: clamp(14px, 1.4vw, 22px) 0 0; max-width: 30em;
	font-size: clamp(13px, .95vw, 14.5px); line-height: 2; letter-spacing: .08em; font-weight: 500;
	color: var(--ink-sub); text-shadow: 0 0 10px var(--ink-shadow); transition: color 2s ease;
}
.js .p-town__copy > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s ease, transform 1s var(--ease-out), color 2s ease; }
.js .p-town__copy > :nth-child(2) { transition-delay: .12s; }
.js .p-town__copy > :nth-child(3) { transition-delay: .24s; }
.js .p-town.is-shown .p-town__copy > *, .is-failsafe .p-town__copy > * { opacity: 1; transform: none; }

/* ---- time toggle (bottom right): pill with the four periods, white knob on the current one ---- */
.p-town__toggle {
	position: absolute; z-index: 3;
	right: max(var(--gutter), 4vw); bottom: calc(var(--seam-h) * .7 + clamp(16px, 3svh, 40px));
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.p-town__toggle[hidden] { display: none; }
.p-town__tip {
	position: relative; padding: .55em 1em; border-radius: 10px;
	font-size: 12px; font-weight: 500; letter-spacing: .1em; line-height: 1.2; white-space: nowrap;
	color: var(--navy); background: #fff; box-shadow: 0 6px 18px rgba(4, 52, 80, .16);
}
.p-town__tip::after { content: ""; position: absolute; right: 30px; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
.p-town__pill {
	--i: 1; --slot: 38px;
	position: relative; display: inline-flex; padding: 4px; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(4, 52, 80, .55); color: rgba(255, 255, 255, .85);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 8px 22px rgba(4, 52, 80, .22);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background-color .3s ease, box-shadow .3s ease;
}
.p-town__pill:hover { background: rgba(4, 52, 80, .68); }
.p-town__pill:focus-visible { outline: 2px solid #00aeef; outline-offset: 3px; }
.p-town__knob {
	position: absolute; left: 4px; top: 4px; width: var(--slot); height: var(--slot); border-radius: 50%;
	background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	transform: translateX(calc(var(--i) * var(--slot))); transition: transform .45s var(--ease-back);
}
.p-town__slot { position: relative; display: grid; place-items: center; width: var(--slot); height: var(--slot); transition: color .3s ease; }
.p-town__slot svg { width: 18px; height: 18px; }
html[data-town="morning"] .p-town__slot--morning,
html[data-town="day"] .p-town__slot--day,
html[data-town="evening"] .p-town__slot--evening,
html[data-town="night"] .p-town__slot--night { color: #f29a1f; }
html[data-town="night"] .p-town__slot--night { color: #3a4f8f; }
.p-town__auto {
	padding: 2px 2px; border: 0; background: none; cursor: pointer;
	font: 500 12px/1.4 inherit; letter-spacing: .08em; color: var(--ink); text-decoration: underline; text-underline-offset: .25em;
	text-shadow: 0 0 8px var(--ink-shadow);
}
.p-town__auto[hidden] { display: none; }

/* scroll cue */
.p-town__scroll {
	position: absolute; z-index: 3; left: 50%; bottom: 4px; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	font-family: var(--f-en); font-size: 11px; letter-spacing: .28em; color: #fff; text-decoration: none; z-index: 4;
	padding: 6px 10px; border-radius: 999px;
}
.p-town__scroll::after { content: ""; width: 1px; height: 14px; background: currentColor; opacity: .6; transform-origin: top; animation: zen-town-cue 2s ease-in-out infinite; }
@keyframes zen-town-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- tablet ---- */
@media (max-width: 1024px) {
	.p-town { --nz: 5.1; --pz: 6; --fx: .55; }
	.p-town__scroll { display: none; }
}

/* ---- phone: the town on the upper ~66%, the copy below it on the wash ---- */
@media (max-width: 767px) {
	.p-town {
		--hh: max(640px, 100svh);
		--box-h: calc(var(--hh) * .66);
		--fx: .54; --fy: .46;
		--nz: 7; --pz: 8;
		height: var(--hh);
	}
	.p-town__stage::after { /* soft fade into the copy area */
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 3;
		background: linear-gradient(to bottom, transparent, var(--town-bg));
		transition: background 2s ease;
	}
	.p-town__copy { left: 20px; right: 20px; bottom: calc(var(--seam-h) + 6px); }
	.p-town__copy::before { left: -40px; right: -40px; top: -60%; bottom: -40%; }
	.p-town__en { font-size: 12px; margin-bottom: 12px; }
	.p-town__title { font-size: clamp(22px, 6.4vw, 27px); letter-spacing: .14em; }
	.p-town__lead { font-size: 13px; line-height: 1.9; margin-top: 12px; }
	.p-town__toggle { right: 16px; bottom: auto; top: calc(var(--header-h) + var(--header-top) + 12px); flex-direction: row; align-items: center; gap: 8px; }
	.p-town__tip { font-size: 11px; padding: .5em .8em; }
	.p-town__tip::after { right: -4px; bottom: auto; top: calc(50% - 5px); }
	.p-town__pill { --slot: 32px; }
	.p-town__slot svg { width: 15px; height: 15px; }
	.p-town__auto { position: absolute; right: 2px; top: calc(100% + 6px); }
	.p-town__worry, .p-town__thanks { font-size: 12px; }
}

/* ---- v0.9.23 phone (mobile QA「TOPが見切れる」): a column instead of fixed percentages ----
   Before: town = 66% of max(640px, 100svh) and the copy pinned 90px above the bottom, so on short
   phones / Safari with its toolbars (svh ≈ 550–660px) the lead was cut off and the copy sat on the town.
   Now: header space → town (flex: 1, a size container) → copy in normal flow at the bottom, so the copy is
   always fully on screen and the actors never sit under it. Height uses svh on purpose (not dvh): dvh
   grows while iOS hides its toolbar and would make the whole page jump during the first scroll.
   The scene is sized from the stage's own box (cq units) and capped at 1.9× the screen width so the
   streets with townspeople (scene x ≈ .27–.76) stay in view; if the stage is taller than that, the
   picture sits at the stage's bottom and fades into the sky colour under the header.
   hero-town.js reads the result from the DOM (scene offset / size), so no JS sizes live here. */
@media (max-width: 767px) {
	.p-town { --hh: max(520px, 100vh); }
	@supports (height: 100svh) { .p-town { --hh: max(520px, 100svh); } }
	@supports (container-type: size) {
		.p-town {
			display: flex; flex-direction: column;
			padding-top: calc(var(--header-h) + var(--header-top));
			--fx: .51;
			--box-h: 100cqh;
			--sw: min(max(100cqw, calc(100cqh * 1.5)), 190cqw);
		}
		.p-town__stage { position: relative; inset: auto; flex: 1 1 0; min-height: 0; height: auto; container-type: size; }
		.p-town__scene::after { /* soft top edge when the picture does not reach the top of the stage */
			content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; z-index: 1; pointer-events: none;
			background: linear-gradient(to bottom, var(--town-bg), transparent);
			transition: background 2s ease;
		}
		.p-town__copy {
			position: relative; left: auto; right: auto; bottom: auto; flex: none; max-width: none;
			padding: 14px max(20px, env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
		}
		.p-town__copy::before { left: -20px; right: -20px; top: -40%; bottom: 0; }
	}
	/* time switch: 44px tap target, never wider than the screen */
	.p-town__toggle { right: max(12px, env(safe-area-inset-right, 0px)); max-width: calc(100% - 24px); }
	.p-town__pill { --slot: 36px; }
	.p-town__tip { font-size: 12px; }
}
@media (max-width: 374px) { /* 360px phones: the hint would cover the town's upper-left street */
	.p-town__tip { display: none; }
}

/* ---- reduced motion: a still scene (hero-town.js places resting ninjas, nothing runs) ---- */
@media (prefers-reduced-motion: reduce) {
	.p-town, .p-town__layer, .p-town__copy > *, .p-town__scene, .p-town__knob { transition: none !important; }
	.js .p-town__scene, .js .p-town__copy > * { transform: none; }
	.p-town__scroll::after, .p-town__sweat, .p-town__worry, .p-town__who-trouble { animation: none !important; }
}

/* ---- v0.9.15 cloud seam at the hero's bottom edge (ref. kgen.co.jp; flat, no outlines / shadows / blur) ----
   back = white tall bumps, mid = pale sky, front = About's blue (so the bank flows into the next section).
   hero-town.js only shifts the layers a little sideways and lets the town lag the scroll slightly. */
.p-town { --seam-h: clamp(96px, 12vw, 170px); --bank-back: #ffffff; --bank-mid: #e4f5fd; --bank-front: var(--c-main-deep); }
html[data-town="morning"] .p-town { --bank-back: #fffdf9; --bank-mid: #eef6fb; }
html[data-town="evening"] .p-town { --bank-back: #fff8f4; --bank-mid: #eaf2f8; }
html[data-town="night"] .p-town { --bank-back: #c9d4e2; --bank-mid: #9fb1c8; }
.p-town__seam { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--seam-h); z-index: 2; pointer-events: none; }
.p-town__bank { position: absolute; left: -12%; width: 124%; max-width: none; bottom: 0; height: 100%; display: block; transition: fill 2s ease; }
.p-town__bank--back { fill: var(--bank-back); height: 100%; }
.p-town__bank--mid { fill: var(--bank-mid); height: 78%; }
.p-town__bank--front { fill: var(--bank-front); height: 52%; }
.p-town__float { position: absolute; z-index: 1; pointer-events: none; width: clamp(70px, 8vw, 130px); fill: rgba(255, 255, 255, .92); }
html[data-town="night"] .p-town__float { fill: rgba(200, 212, 228, .55); }
.p-town__float svg { display: block; width: 100%; height: auto; }
.p-town__float--1 { top: 18%; left: 0; animation: zen-town-drift 70s linear infinite; }
.p-town__float--2 { top: 30%; left: 0; width: clamp(50px, 5.5vw, 90px); animation: zen-town-drift 95s linear -40s infinite; }
@keyframes zen-town-drift { from { transform: translateX(-15vw); } to { transform: translateX(110vw); } }
@media (max-width: 767px) {
	.p-town { --seam-h: 84px; }
	.p-town__float--2 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p-town__float { animation: none; left: 12%; } }

/* v0.9.52 (speed): the first picture is a real <img> in its layer (same box, same 100% × 100% stretch as the
   background), and nothing waits for JS or for the picture — scene and copy enter with CSS-only animations
   from the first paint (same timings as before). They start at opacity .01, not 0, so the browser counts the
   picture / heading as painted (LCP) from the first frame. */
.p-town__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.js .p-town__scene, .js .p-town__copy > * { opacity: 1; transform: none; }
.p-town__scene { animation: zen-town-scene-in 1.8s var(--ease-out) both; }
.p-town__copy > * { animation: zen-town-copy-in 1s var(--ease-out) both; }
.p-town__copy > :nth-child(2) { animation-delay: .12s; }
.p-town__copy > :nth-child(3) { animation-delay: .24s; }
@keyframes zen-town-scene-in { from { opacity: .01; transform: scale(1.03); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes zen-town-copy-in { from { opacity: .01; transform: translate3d(0, 14px, 0); } 80% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .p-town__scene, .p-town__copy > * { animation: none; } }