.hh,
body {
	--font-effect: 'Lora', Georgia, serif;
}

.body,
.say {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(17px, 4.3vw, 19px);
	line-height: 1.62;
	color: var(--ink);
	max-width: 42ch;
}

.body strong { font-weight: 600; color: var(--red-ink); }

.rs {
	font-family: var(--font-body);
	font-size: clamp(15px, 3.9vw, 17px);
	line-height: 1.58;
}

.eyebrow { color: var(--magenta-deep); }

.head { color: var(--red-ink); font-weight: 400; }

.bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(161, 11, 26, .1);
}

.bar-in {
	max-width: var(--measure);
	margin-inline: auto;
	padding: 10px clamp(14px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.bar a.home { display: block; text-decoration: none; flex: none; }

.bar a.home img {
	display: block;
	width: clamp(44px, 12vw, 62px);
	height: auto;
}

.bar nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 2vw, 26px);
	justify-content: flex-end;
}

.bar nav a {
	text-decoration: none;
	font: 400 clamp(13px, 3.4vw, 15px)/1 var(--font-body);
	letter-spacing: .01em;
	color: var(--magenta-deep);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
	white-space: nowrap;
}

.bar nav a:hover,
.bar nav a[aria-current] {
	color: var(--magenta);
	border-bottom-color: var(--magenta);
}

@media (max-width: 619px) {
	.bar-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-bottom: 9px;
	}

	.bar nav {
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;

		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
		mask-image: linear-gradient(to right, #000 88%, transparent);
	}

	.bar nav::-webkit-scrollbar { display: none; }

	.bar nav ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 16px;
		padding-right: 32px;
	}
}

.scene {
	position: relative;
	display: grid;
	place-items: center;
	isolation: isolate;
	background: var(--red-deep);
	min-height: clamp(380px, 74vw, 620px);
	max-height: 760px;
	overflow: hidden;
	padding: clamp(28px, 6vw, 64px) clamp(16px, 5vw, 56px);
}

.scene > img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-point, center 32%);
}

.scene--tall { min-height: clamp(430px, 92vw, 700px); }

.panel-words {
	position: relative;
	max-width: min(660px, 100%);
	padding: clamp(20px, 4.4vw, 40px) clamp(20px, 5vw, 48px);
	background: var(--panel-ground);
	text-align: center;
}

.panel-words .head {
	color: var(--panel-head);
	font-size: clamp(34px, 9.6vw, 76px);
	line-height: 1.06;
	margin: 0;
	text-shadow: var(--lift-on-panel);
}

.panel-words .said {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(16px, 4.3vw, 22px);
	line-height: 1.5;
	color: var(--panel-ink);
	margin: clamp(12px, 2vw, 20px) auto 0;
	max-width: 34ch;
	text-wrap: balance;
}

.panel-words .said + .said { margin-top: .35em; }

.panel-words .who,
.panel-words .says {
	font: 400 clamp(14px, 3.7vw, 17px)/1.4 var(--font-body);
	color: var(--pink-soft);
	margin: 8px 0 0;
}

.panel-words .says { font-style: italic; }

.panel-words .price {
	font: 400 clamp(15px, 4vw, 18px)/1.4 var(--font-body);
	color: var(--cream);
	margin: clamp(10px, 1.6vw, 16px) 0 0;
}

.panel-words .vow {
	font-family: var(--font-body);
	font-size: clamp(16px, 4.1vw, 18px);
	line-height: 1.5;
	color: var(--pink);
	margin: clamp(14px, 2vw, 20px) auto 0;
	max-width: 38ch;
}

.panel-words .more {
	display: inline-block;
	margin: clamp(16px, 2.4vw, 24px) 0 0;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--white);
	border-bottom: 1px solid var(--magenta);
	padding-bottom: 5px;
}

a.scene { text-decoration: none; }
a.scene .panel-words { transition: background-color .35s ease; }

a.scene:hover .panel-words,
a.scene:focus-visible .panel-words { background: rgba(161, 11, 26, .88); }

a.scene:hover .more,
a.scene:focus-visible .more { color: var(--magenta); }

.passage {
	margin: 0 auto;
	max-width: 36ch;
	text-align: center;
}

.passage p {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.5;
	color: var(--ink);
}

.passage p + p { margin-top: .28em; }
.passage p.gap { margin-top: 1.1em; }
.passage--wide { max-width: 46ch; }

.sec--said { text-align: center; }

.lands {
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: clamp(20px, 5.4vw, 36px);
	line-height: 1.2;
	color: var(--red-ink);
	margin: 0;
	max-width: 26ch;
}

.sec--said .lands { margin-inline: auto; }

.close { text-align: center; max-width: 30ch; margin-inline: auto; }

.close p {
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: clamp(19px, 5.2vw, 34px);
	line-height: 1.25;
	color: var(--magenta);
	margin: 0;
	text-shadow: var(--lift-on-panel);
}

.close p + p { margin-top: clamp(14px, 2.4vw, 24px); }

.band { background: var(--blush); }
.band .head { color: var(--red-ink); }
.row { background: var(--white); box-shadow: 0 2px 10px rgba(161, 11, 26, .07); }
.rh { color: var(--red-ink); }
.rs { color: var(--ink-soft); }

.threshold {
	max-width: min(760px, 100%);
	margin-inline: auto;
	padding: clamp(26px, 4.4vw, 56px);
	text-align: center;
	background: var(--panel-ground-solid);
}

.threshold .head {
	color: var(--panel-head);
	text-shadow: var(--lift-on-panel);
	font-size: clamp(28px, 7.4vw, 58px);
}

.threshold .body { color: var(--pink); margin-inline: auto; max-width: 46ch; }
.threshold .eyebrow { color: var(--pink-soft); }

.begin { margin: clamp(22px, 3vw, 34px) 0 0; }

.begin a {
	display: inline-block;
	text-decoration: none;
	font: 700 12px/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--white);
	padding: 17px 30px;
	background: var(--magenta);
	box-shadow: var(--surface-shadow-soft);
	transition: transform .25s var(--float-ease), background-color .25s ease;
}

.begin a:hover,
.begin a:focus-visible { transform: translateY(-2px); background: var(--magenta-lit); }

.threshold .begin a { color: var(--red-ink); background: var(--white); }
.threshold .begin a:hover { background: var(--cream); }

.written .body { max-width: 62ch; }

.written h2 {
	font: 400 clamp(24px, 6vw, 40px)/1.2 var(--font-head);
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--red-ink);
	margin: clamp(40px, 5vw, 68px) 0 clamp(16px, 1.9vw, 24px);
}

.written h3 {
	font: 400 clamp(17px, 4.4vw, 22px)/1.3 var(--font-body);
	font-style: italic;
	color: var(--magenta-deep);
	margin: clamp(26px, 3.2vw, 40px) 0 clamp(12px, 1.5vw, 18px);
}

.written ul { padding-left: 1.1em; margin: 18px 0 0; max-width: 60ch; }

.written li {
	font-family: var(--font-body);
	font-size: clamp(17px, 4.3vw, 19px);
	line-height: 1.62;
	color: var(--ink);
	margin: 0 0 12px;
}

.written li::marker { color: var(--magenta); }
.written a { color: var(--magenta-deep); }

.written .lands { margin-bottom: clamp(22px, 2.8vw, 34px); }
.written .lands + .verse { margin-top: 0; }

.written .verse { margin: 0 0 clamp(26px, 3.4vw, 40px); max-width: 42ch; }

.written .verse p {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.4vw, 20px);
	line-height: 1.46;
	color: var(--ink);
}

.written .verse p + p { margin-top: .22em; }
.written .verse p.gap { margin-top: 1em; }
.written .verse + .verse { margin-top: clamp(22px, 2.8vw, 34px); }

.months {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: clamp(26px, 3.4vw, 40px) 0 0;
	max-width: var(--measure);
}

@media (min-width: 680px) { .months { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .months { grid-template-columns: repeat(3, 1fr); } }

.month { padding: clamp(16px, 2vw, 22px); background: var(--blush); }

.month h4 {
	font: 700 clamp(12px, 3.2vw, 13px)/1.3 var(--font-util);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--magenta-deep);
	margin: 0 0 8px;
}

.month p {
	font-family: var(--font-body);
	font-size: clamp(16px, 4.1vw, 17px);
	line-height: 1.45;
	color: var(--ink);
	margin: 0;
}

.reads {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	max-width: var(--measure);
	margin-inline: auto;
}

@media (min-width: 720px) { .reads { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .reads { grid-template-columns: repeat(3, 1fr); } }

.read {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 2.4vw, 28px);
	text-decoration: none;
	background: var(--white);
	border: 1px solid rgba(161, 11, 26, .14);
	box-shadow: var(--surface-shadow-soft);
	transition: transform .3s var(--float-ease), box-shadow .3s ease, border-color .3s ease;
}

.read:hover,
.read:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--surface-shadow);
	border-color: var(--magenta);
}

.read h2 {
	font: 400 clamp(20px, 5vw, 26px)/1.2 var(--font-head);
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--red-ink);
	margin: 0;
}

.read p {
	font-family: var(--font-body);
	font-size: clamp(15px, 3.9vw, 16px);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

.read span {
	margin-top: auto;
	padding-top: 6px;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--magenta);
}

.reading .in { max-width: 720px; }

.reading .standfirst {
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(18px, 4.6vw, 21px);
	line-height: 1.5;
	color: var(--magenta-deep);
	margin: clamp(16px, 2.2vw, 24px) 0 clamp(28px, 3.6vw, 44px);
	max-width: 38ch;
}

.reading .head { font-size: clamp(32px, 8.4vw, 62px); }
.reading .body,
.reading .verse { max-width: none; }

.legal h2 { font-size: clamp(20px, 5vw, 28px); margin-top: clamp(38px, 4.6vw, 60px); }
.legal .body,
.legal li { font-size: clamp(16px, 4.2vw, 18px); }

.legal .ask {
	background: var(--gold);
	color: var(--red-ink);
	padding: 2px 8px;
	font: 700 .82em/1.4 var(--font-util);
	letter-spacing: .04em;
}

.legal .stamp {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 20px;
	border-top: 1px solid rgba(161, 11, 26, .16);
	font: 600 12px/1.6 var(--font-util);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.foot-in {
	max-width: var(--measure);
	margin-inline: auto;
	display: grid;
	gap: clamp(26px, 4vw, 48px);
	text-align: left;
}

@media (min-width: 720px) { .foot-in { grid-template-columns: repeat(3, 1fr); } }

.foot h2 {
	font: 400 clamp(15px, 4vw, 19px)/1.3 var(--font-head);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--magenta);
	margin: 0 0 14px;
}

.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.foot li a,
.foot p a {
	font: 400 15px/1.5 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--pink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.foot li a:hover,
.foot p a:hover { color: var(--white); border-bottom-color: var(--pink); }

.foot .rights {
	margin-top: clamp(24px, 3.4vw, 40px);
	padding-top: 20px;
	border-top: 1px solid rgba(255, 146, 244, .3);
	text-align: center;
	letter-spacing: .16em;
	font-size: 10px;
	color: var(--pink-soft);
}

.tone-itoshii {
	--panel-ground: rgba(150, 4, 85, .76);
	--panel-ground-solid: #960455;
	--panel-head: #ff9ac3;
	--panel-ink: #ffcee4;
}

.tone-tamashii {
	--panel-ground: rgba(161, 11, 26, .76);
	--panel-ground-solid: #a10b1a;
	--panel-head: #f054eb;
	--panel-ink: #ffaece;
}

.tone-totoki {
	--panel-ground: rgba(150, 4, 85, .78);
	--panel-ground-solid: #960455;
	--panel-head: #ff2bf8;
	--panel-ink: #ff9af4;
}

.tone-mirror {
	--panel-ground: rgba(133, 3, 16, .78);
	--panel-ground-solid: #850310;
	--panel-head: #ff92f4;
	--panel-ink: #ffceff;
}

body[class*='tone-'] .written h2,
body[class*='tone-'] .lands,
body[class*='tone-'] .read h2 { color: var(--panel-ground-solid); }

body[class*='tone-'] .written h3,
body[class*='tone-'] .month h4,
body[class*='tone-'] .eyebrow { color: var(--panel-ground-solid); }

body[class*='tone-'] .written li::marker { color: var(--panel-head); }
body[class*='tone-'] .begin a { background: var(--panel-ground-solid); }
body[class*='tone-'] .begin a:hover { background: var(--panel-head); color: var(--white); }
body[class*='tone-'] .threshold .begin a { background: var(--white); color: var(--panel-ground-solid); }

.panel-words .close p { color: var(--panel-head); }
.panel-words .close { max-width: 26ch; }

a.scene:hover .panel-words,
a.scene:focus-visible .panel-words { background: var(--panel-ground-solid); }
a.scene:hover .more,
a.scene:focus-visible .more { color: var(--panel-head); border-bottom-color: var(--panel-head); }
.panel-words .more { border-bottom-color: var(--panel-head); }

.panel-words .who,
.panel-words .says { color: var(--panel-ink); }
.panel-words .vow { color: var(--panel-ink); }

.scene { max-height: none; }

.scene { padding: clamp(40px, 9vw, 80px) clamp(22px, 7vw, 64px); }

.scene > img { z-index: 0; }
.scene .panel-words { z-index: 1; }

.arch-band {
	background: var(--white);
	line-height: 0;
}

.arch-band img {
	display: block;
	width: 100%;
	height: auto;
}

.rite-name { padding-block: clamp(26px, 4vw, 50px) clamp(20px, 3vw, 34px); text-align: center; }
.rite-name .head { font-size: clamp(38px, 11vw, 88px); color: var(--panel-ground-solid, var(--red-ink)); }

.rite-name .says {
	font: 400 clamp(15px, 4vw, 19px)/1.4 var(--font-body);
	font-style: italic;
	color: var(--magenta-deep);
	margin: 12px 0 0;
}

.rite-name .who {
	font: 700 clamp(12px, 3.2vw, 14px)/1.4 var(--font-util);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 10px 0 0;
}

.hers .passage { max-width: 26ch; }
.hers .passage--wide { max-width: 30ch; }

.hers .passage p {
	font-size: clamp(19px, 5.2vw, 24px);
	line-height: 1.5;
}

.hers .passage + .lands,
.hers .word + .passage,
.hers .passage + .passage { margin-top: clamp(44px, 8vw, 76px); }

.hers .lands {
	margin: clamp(52px, 9vw, 88px) auto clamp(30px, 5vw, 44px);
	max-width: 20ch;
	color: var(--magenta-deep);
}

.hers .word {
	margin: clamp(44px, 8vw, 76px) auto 0;
	max-width: 34rem;
	padding: clamp(26px, 5vw, 44px) clamp(22px, 5vw, 40px);
	background: var(--blush);
	text-align: center;
}

.hers .word-mark {
	font: 400 clamp(34px, 10vw, 58px)/1 var(--font-head);
	letter-spacing: .04em;
	color: var(--magenta-deep);
	margin: 0;
}

.hers .word-say {
	font: 400 clamp(15px, 4vw, 18px)/1.4 var(--font-body);
	color: var(--red-ink);
	margin: 12px 0 0;
}

.hers .word-means {
	font: 400 clamp(18px, 4.8vw, 22px)/1.4 var(--font-body);
	font-style: italic;
	color: var(--red-ink);
	margin: 18px 0 0;
}

.hers .word .body {
	max-width: 34ch;
	margin-inline: auto;
	margin-top: 20px;
	font-size: clamp(17px, 4.4vw, 19px);
}

.hers .signoff {
	margin: clamp(48px, 8vw, 80px) auto 0;
	max-width: 24ch;
	font: 400 clamp(17px, 4.6vw, 20px)/1.5 var(--font-body);
	font-style: italic;
	color: var(--magenta-deep);
}

.ask .head { font-size: clamp(28px, 7.4vw, 48px); margin-bottom: clamp(14px, 2vw, 20px); }
.ask .body.quiet { color: var(--ink-soft); font-size: clamp(15px, 4vw, 17px); }

.threshold-form label {
	display: block;
	margin: clamp(24px, 3.4vw, 34px) 0 10px;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.5;
	color: var(--red-ink);
}

.threshold-form input[type='text'],
.threshold-form input[type='email'],
.threshold-form input[type='date'] {
	width: 100%;
	max-width: 30rem;
	padding: 15px 16px;
	border: 1px solid rgba(161, 11, 26, .3);
	background: var(--white);
	font: 400 18px/1.4 var(--font-body);
	color: var(--ink);
}

.threshold-form input:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

.children { margin-top: clamp(26px, 4vw, 40px); }

.child {
	border: 0;
	padding: 0 0 clamp(26px, 4vw, 38px);
	margin: 0 0 clamp(26px, 4vw, 38px);
	border-bottom: 1px solid rgba(161, 11, 26, .16);
}

.child:last-of-type { border-bottom: 0; }
.child--spare { display: none; }

.child legend {
	font: 700 clamp(12px, 3.2vw, 13px)/1.4 var(--font-util);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--magenta-deep);
	padding: 0;
}

.which {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.which label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 18px;
	border: 1px solid rgba(161, 11, 26, .28);
	background: var(--white);
	font-size: clamp(15px, 4vw, 17px);
	color: var(--ink);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.which label:hover { border-color: var(--magenta); }
.which label:has(input:checked) { border-color: var(--magenta); background: var(--blush); color: var(--red-ink); }
.which input { accent-color: var(--magenta); width: 18px; height: 18px; }

.another {
	appearance: none;
	cursor: pointer;
	margin-top: clamp(6px, 1vw, 10px);
	padding: 13px 22px;
	border: 1px solid var(--magenta);
	background: var(--white);
	color: var(--magenta-deep);
	font: 700 12px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}

.another:hover { background: var(--magenta); color: var(--white); }

.threshold .begin button {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-block;
	font: 700 12px/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--red-ink);
	padding: 18px 32px;
	background: var(--white);
	transition: transform .25s var(--float-ease), background-color .25s ease;
}

.threshold .begin button:hover { transform: translateY(-2px); background: var(--cream); }
.threshold .body.quiet { color: var(--pink-soft); font-size: clamp(14px, 3.8vw, 16px); }

.threshold [data-price] { display: inline-block; transition: opacity .2s ease; }

.household {
	display: grid;
	gap: 12px;
	margin: clamp(30px, 4.4vw, 44px) auto 0;
	max-width: 34rem;
	text-align: left;
}

.in-house { padding: clamp(18px, 2.6vw, 24px); background: var(--blush); }

.who-name {

	font: 400 clamp(21px, 5.3vw, 28px)/1.15 var(--font-body);
	text-transform: none;
	color: var(--red-ink);
	margin: 0;
}

.who-age {
	font: 400 15px/1.4 var(--font-body);
	font-style: italic;
	color: var(--magenta-deep);
	margin: 6px 0 0;
}

.in-house ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }

.in-house li {
	font: 400 clamp(15px, 4vw, 16px)/1.45 var(--font-body);
	color: var(--ink);
	margin: 0;
}

.in-house li b { color: var(--red-ink); font-weight: 600; }

.entrance-door {
	position: relative;
	height: 100svh;
	min-height: 540px;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #5c0430;
}

.entrance-door > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 44%;
}

.entrance-door .seam {
	position: absolute;
	left: 50%;
	top: 44%;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 3px;
	height: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, #fff6fb 20%, #fff 50%, #fff6fb 80%, transparent);
	animation: hh-kindle 3s ease-out .5s forwards, hh-breathe 5s ease-in-out 3.5s infinite;
}

@keyframes hh-kindle { from { height: 0; opacity: 0; } to { height: 40%; opacity: 1; } }
@keyframes hh-breathe {
	0%, 100% { box-shadow: 0 0 28px 9px rgba(255, 214, 246, .55); }
	50%      { box-shadow: 0 0 60px 22px rgba(255, 214, 246, .95); }
}

.entrance-foot {
	position: relative;
	z-index: 2;
	padding: clamp(40px, 10vw, 80px) clamp(24px, 8vw, 60px) clamp(34px, 8vw, 64px);
	text-align: center;
	background: linear-gradient(to top, rgba(58, 2, 30, .94), rgba(58, 2, 30, .72) 55%, transparent);
}

.entrance-foot .its-time {
	margin: 0 auto;
	max-width: 20ch;
	font-family: var(--font-head);
	font-size: clamp(19px, 5.4vw, 26px);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #ffd9f4;
	opacity: 0;
	animation: hh-arrive 1.6s cubic-bezier(.2, .8, .3, 1) 1.6s forwards;
}

.entrance-foot .deserve {
	margin: clamp(20px, 4.6vw, 32px) auto 0;
	max-width: 16ch;
	font: 400 clamp(30px, 8.4vw, 58px)/1.12 var(--font-head);
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	animation: hh-arrive 2s cubic-bezier(.2, .8, .3, 1) 3.4s forwards;
}

.entrance-foot .anchor-line {
	margin: clamp(26px, 6vw, 40px) auto 0;
	max-width: 24ch;
	font: 400 clamp(13px, 3.5vw, 15px)/1.4 var(--font-body);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pink);
	opacity: 0;
	animation: hh-arrive 1.6s cubic-bezier(.2, .8, .3, 1) 4.6s forwards;
}

@keyframes hh-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.entrance-door .seam { animation: none; height: 40%; opacity: 1; box-shadow: 0 0 40px 14px rgba(255, 214, 246, .8); }
		.entrance-foot .its-time,
	.entrance-foot .deserve,
	.entrance-foot .anchor-line { animation: none; opacity: 1; }
}

.crossing { background: var(--white); }

.path {
	position: relative;
	max-width: 34rem;
	margin: clamp(30px, 5vw, 46px) 0 clamp(28px, 4vw, 40px);
}

.path::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: linear-gradient(180deg, var(--rose), var(--magenta), var(--magenta-lit), var(--pink));
}

.step { position: relative; padding: 0 0 clamp(26px, 5vw, 38px) 58px; }
.step:last-child { padding-bottom: 0; }

.step i {
	position: absolute;
	left: 12px;
	top: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--white);
	border: 3px solid var(--magenta);
	display: block;
}

.step--gap i { border-color: #ffc9e4; background: #fff6fb; }

.step b {
	display: block;
	font: 400 clamp(20px, 5.4vw, 30px)/1.1 var(--font-head);
	text-transform: uppercase;
	color: var(--red-ink);
}

.step--gap b { color: var(--magenta-deep); }

.step span {
	display: block;
	margin-top: 5px;
	font-family: var(--font-body);
	font-size: clamp(15px, 4vw, 17px);
	color: var(--ink-soft);
}

.step em {
	display: block;
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.5;
	color: var(--ink);
	max-width: 30ch;
}

.uzume { background: var(--blush); text-align: center; }

.uzume-mark {
	margin: 0;
	font: 400 clamp(46px, 13vw, 84px)/1 var(--font-head);
	letter-spacing: .04em;
	color: var(--magenta-deep);
}

.uzume-say {
	margin: 12px 0 0;
	font: 400 clamp(15px, 4vw, 17px)/1.4 var(--font-body);
	font-style: italic;
	color: var(--red-ink);
}

.uzume-line {
	margin: clamp(26px, 5vw, 38px) auto 0;
	max-width: 28ch;
	font-family: var(--font-body);
	font-size: clamp(18px, 4.8vw, 22px);
	line-height: 1.55;
	color: var(--ink);
}

.scene {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	place-items: initial;
	padding: 0;
	min-height: clamp(440px, 90vw, 680px);
}

.panel-words {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(52px, 13vw, 104px) clamp(24px, 8vw, 64px) clamp(34px, 8vw, 60px);
	text-align: center;
	background: linear-gradient(
		to top,
		var(--scrim-deep, rgba(58, 2, 22, .95)) 0%,
		var(--scrim-mid, rgba(58, 2, 22, .78)) 42%,
		transparent 100%
	);
}

.panel-words::before {
	content: '';
	position: absolute;
	left: 50%;
	top: clamp(26px, 7vw, 52px);
	transform: translateX(-50%);
	width: min(58%, 320px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--panel-head), #fff6fb, var(--panel-head), transparent);
	box-shadow: 0 0 16px 2px rgba(255, 146, 244, .5);
	opacity: .9;
}

.panel-words .head,
.panel-words .close p { color: #fff; text-shadow: 0 2px 26px rgba(40, 1, 16, .9); }
.panel-words .said,
.panel-words .vow  { color: #ffd9f4; text-shadow: 0 2px 18px rgba(40, 1, 16, .9); }
.panel-words .who,
.panel-words .says { color: var(--panel-head); text-shadow: 0 2px 18px rgba(40, 1, 16, .9); }
.panel-words .price { color: var(--cream); text-shadow: 0 2px 18px rgba(40, 1, 16, .9); }

.panel-words .head { max-width: 16ch; margin-inline: auto; }
.panel-words .vow  { max-width: 34ch; }

a.scene .panel-words { transition: none; }
a.scene:hover .panel-words,
a.scene:focus-visible .panel-words { background: linear-gradient(
	to top, rgba(58, 2, 22, .97) 0%, rgba(58, 2, 22, .84) 46%, transparent 100%); }
a.scene:hover .panel-words::before,
a.scene:focus-visible .panel-words::before { width: min(76%, 420px); opacity: 1; }
.panel-words::before { transition: width .5s var(--float-ease), opacity .4s ease; }

.panel-words .more {
	border-bottom-color: var(--panel-head);
	color: #fff;
	text-shadow: 0 2px 18px rgba(40, 1, 16, .9);
}

.tone-itoshii  { --scrim-deep: rgba(84, 2, 48, .95); --scrim-mid: rgba(84, 2, 48, .74); }
.tone-tamashii { --scrim-deep: rgba(88, 6, 15, .95); --scrim-mid: rgba(88, 6, 15, .74); }
.tone-totoki   { --scrim-deep: rgba(70, 2, 42, .95); --scrim-mid: rgba(70, 2, 42, .74); }
.tone-mirror   { --scrim-deep: rgba(72, 2, 10, .95); --scrim-mid: rgba(72, 2, 10, .74); }

.threshold {
	background: var(--panel-ground-solid);
	position: relative;
	overflow: hidden;
}

.threshold::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: min(60%, 340px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--panel-head), #fff6fb, var(--panel-head), transparent);
	box-shadow: 0 0 18px 3px rgba(255, 146, 244, .5);
}

.panel-words {
	background: linear-gradient(
		to top,
		var(--scrim-deep, rgba(46, 1, 18, .97)) 0%,
		var(--scrim-deep, rgba(46, 1, 18, .97)) 62%,
		var(--scrim-mid, rgba(46, 1, 18, .82)) 82%,
		transparent 100%
	);
	padding-top: clamp(64px, 16vw, 128px);
}

.panel-words .said,
.panel-words .vow,
.panel-words .who,
.panel-words .says,
.panel-words .price {
	color: #fff6ec;
	text-shadow: none;
}

.panel-words .says { color: #ffd9f4; }

.panel-words .head {
	color: #fff;
	text-shadow: 0 2px 22px rgba(30, 1, 12, .8);
}

.tone-itoshii  { --scrim-deep: rgba(66, 1, 38, .97); --scrim-mid: rgba(66, 1, 38, .8); }
.tone-tamashii { --scrim-deep: rgba(72, 4, 12, .97); --scrim-mid: rgba(72, 4, 12, .8); }
.tone-totoki   { --scrim-deep: rgba(55, 1, 33, .97); --scrim-mid: rgba(55, 1, 33, .8); }
.tone-mirror   { --scrim-deep: rgba(58, 1, 8, .97);  --scrim-mid: rgba(58, 1, 8, .8); }

a.scene:hover .panel-words,
a.scene:focus-visible .panel-words { background: linear-gradient(
	to top,
	var(--scrim-deep) 0%, var(--scrim-deep) 68%, var(--scrim-mid) 86%, transparent 100%); }

.scene {
	display: block;
	min-height: 0;
	max-height: none;
	padding: 0;
	background: var(--blush);
	overflow: hidden;
}

.scene > img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	max-height: min(78svh, 640px);
	object-fit: cover;
	object-position: var(--focus-point, center 30%);
}

.panel-words {
	position: relative;
	z-index: auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(38px, 9vw, 72px) clamp(24px, 8vw, 64px) clamp(42px, 10vw, 80px);
	text-align: center;
	background: var(--say-ground, var(--white));
}

.panel-words::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: min(56%, 300px);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--glow, var(--magenta)), #fff, var(--glow, var(--magenta)), transparent);
	box-shadow: 0 0 18px 3px var(--glow-soft, rgba(240, 84, 235, .55));
	opacity: 1;
	transition: width .5s var(--float-ease);
}

a.scene:hover .panel-words::before,
a.scene:focus-visible .panel-words::before { width: min(80%, 460px); }

.panel-words .head {
	margin: 0 auto;
	max-width: 16ch;
	color: var(--name-ink, var(--red-ink));
	text-shadow: none;
	font-size: clamp(38px, 11vw, 76px);
	line-height: 1.02;
	letter-spacing: .015em;
}

.panel-words .says {
	margin: clamp(12px, 2.6vw, 18px) auto 0;
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(16px, 4.3vw, 19px);
	color: var(--glow, var(--magenta-deep));
	text-shadow: none;
}

.panel-words .who {
	margin: clamp(14px, 3vw, 20px) auto 0;
	font-family: var(--font-util);
	font-weight: 700;
	font-size: clamp(12px, 3.2vw, 13px);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-shadow: none;
}

.panel-words .price {
	margin: clamp(10px, 2.2vw, 14px) auto 0;
	font-family: var(--font-body);
	font-size: clamp(16px, 4.3vw, 19px);
	color: var(--red-ink);
	text-shadow: none;
}

.panel-words .vow {
	margin: clamp(24px, 5vw, 36px) auto 0;
	max-width: 30ch;
	font-family: var(--font-body);
	font-size: clamp(18px, 4.7vw, 21px);
	line-height: 1.55;
	color: var(--ink);
	text-shadow: none;
}

.panel-words .said {
	margin: clamp(20px, 4.4vw, 30px) auto 0;
	max-width: 30ch;
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(19px, 5vw, 23px);
	line-height: 1.5;
	color: var(--glow, var(--magenta-deep));
	text-shadow: none;
}

.panel-words .more {
	display: inline-block;
	margin: clamp(26px, 5vw, 38px) 0 0;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--glow, var(--magenta-deep));
	border-bottom: 1px solid currentColor;
	padding-bottom: 6px;
	text-shadow: none;
}

.panel-words .close p { color: var(--red-ink); text-shadow: none; }

.tone-itoshii  { --say-ground: #fff2f7; --glow: #d4488c; --glow-soft: rgba(212, 72, 140, .5); --name-ink: #960455; }
.tone-tamashii { --say-ground: #fff;    --glow: #f054eb; --glow-soft: rgba(240, 84, 235, .5); --name-ink: #a10b1a; }
.tone-totoki   { --say-ground: #fff0fb; --glow: #ff2bf8; --glow-soft: rgba(255, 43, 248, .5); --name-ink: #960455; }
.tone-mirror   { --say-ground: #fff;    --glow: #ff5ad0; --glow-soft: rgba(255, 90, 208, .5); --name-ink: #850310; }

.threshold .head,
.threshold .body,
.threshold .eyebrow { text-shadow: none; }

.scene > img {
	max-height: none;
	object-fit: fill;
	height: auto;
	filter: saturate(1.14) contrast(1.03);
}

.js-float .scene > img.float { transform: translateY(28px) scale(1.015); }
.js-float .scene > img.float.is-in { transform: none; }
.js-float .scene > img.float { transition: opacity 1.1s var(--float-ease), transform 1.2s var(--float-ease); }

.scene { position: relative; }

.panel-words {
	padding-top: clamp(30px, 7vw, 56px);
	margin-top: 0;
}

.panel-words::before {
	top: -1px;
	height: 3px;
	width: min(72%, 420px);
	box-shadow: 0 0 26px 6px var(--glow-soft), 0 0 60px 14px var(--glow-soft);
}

.panel-words .head {
	position: relative;
	margin-top: clamp(-46px, -9vw, -22px);
	font-size: clamp(42px, 13vw, 92px);
	line-height: .96;
	color: var(--name-ink);
	text-shadow:
		0 0 22px var(--say-ground),
		0 0 44px var(--say-ground),
		0 2px 3px rgba(255, 255, 255, .9);
}

.panel-words .says { margin-top: clamp(16px, 3.4vw, 24px); }

@media (min-width: 900px) {
	.rites-pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.rites-pair .scene > img { aspect-ratio: 4 / 3; object-fit: cover; }
	.rites-pair .panel-words .head { font-size: clamp(38px, 5vw, 62px); }
}

.scene .panel-words .close p {
	font-size: clamp(22px, 6vw, 40px);
	color: var(--red-ink);
}

:root {

	--vivid:       #ff1744;
	--vivid-deep:  #e4003c;
	--hot:         #ff2bf8;
	--flare:       #ff4fd8;
	--rose-lit:    #ff6fb5;

	--ink:         #c4003a;
	--ink-soft:    #b5326b;
	--red-ink:     #e4003c;
	--name-ink:    #ff1744;
	--glow:        #ff2bf8;
	--glow-soft:   rgba(255, 43, 248, .55);
	--say-ground:  #ffffff;
	--blush:       #fff0f6;
}

.scene { position: relative; background: var(--vivid); }

.scene > img {
	filter: saturate(1.3) contrast(1.06) brightness(1.04);
	mix-blend-mode: luminosity;
	opacity: .92;
}

.scene::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(158deg,
		var(--wash-a, rgba(255, 23, 68, .58)) 0%,
		var(--wash-b, rgba(255, 43, 248, .52)) 62%,
		var(--wash-c, rgba(255, 111, 181, .46)) 100%);
	mix-blend-mode: screen;
}

.tone-itoshii  { --wash-a: rgba(255,79,216,.52); --wash-b: rgba(255,111,181,.5);  --wash-c: rgba(255,23,68,.4);
                 --glow:#ff4fd8; --glow-soft:rgba(255,79,216,.55); --name-ink:#ff2bf8; --say-ground:#fff; }
.tone-tamashii { --wash-a: rgba(255,23,68,.6);   --wash-b: rgba(255,43,248,.46);  --wash-c: rgba(255,23,68,.44);
                 --glow:#ff1744; --glow-soft:rgba(255,23,68,.55);  --name-ink:#ff1744; --say-ground:#fff; }
.tone-totoki   { --wash-a: rgba(255,43,248,.62); --wash-b: rgba(255,23,68,.48);   --wash-c: rgba(255,43,248,.5);
                 --glow:#ff2bf8; --glow-soft:rgba(255,43,248,.6);  --name-ink:#ff2bf8; --say-ground:#fff; }
.tone-mirror   { --wash-a: rgba(255,23,68,.56);  --wash-b: rgba(255,79,216,.54);  --wash-c: rgba(255,43,248,.46);
                 --glow:#ff4fd8; --glow-soft:rgba(255,79,216,.55); --name-ink:#e4003c; --say-ground:#fff; }

.panel-words { background: var(--say-ground); padding-top: clamp(34px, 8vw, 60px); }
.panel-words .head { color: var(--name-ink); text-shadow: 0 0 24px #fff, 0 0 48px #fff; }
.panel-words .says  { color: var(--glow); }
.panel-words .who   { color: var(--ink-soft); }
.panel-words .price { color: var(--vivid-deep); }
.panel-words .vow   { color: #5a1030; }
.panel-words .said  { color: var(--glow); }
.panel-words .more  { color: var(--vivid-deep); }

.head, .lands, .written h2, .read h2, .who-name, .rh, .reading .head { color: var(--red-ink); }
.written h3, .eyebrow, .month h4, .reading .standfirst { color: var(--glow); }
.body, .passage p, .written li, .step em, .uzume-line { color: #5a1030; }
.rs, .read p, .step span, .legal .stamp { color: var(--ink-soft); }

.band  { background: var(--blush); }
.uzume { background: var(--blush); }
.uzume-mark { color: var(--hot); }
.uzume-say  { color: var(--vivid-deep); }

.path::before { background: linear-gradient(180deg, var(--flare), var(--hot), var(--vivid), var(--flare)); }
.step i { border-color: var(--hot); }
.step--gap i { border-color: #ffc2e8; }
.step b { color: var(--vivid-deep); }
.step--gap b { color: var(--hot); }

.threshold { background: linear-gradient(150deg, var(--vivid) 0%, var(--hot) 100%); }
.threshold .head { color: #fff; text-shadow: none; }
.threshold .body { color: #fff2f8; }
.threshold .eyebrow { color: #ffd9f4; }
.threshold .begin a { background: #fff; color: var(--vivid-deep); }

.foot { background: linear-gradient(150deg, var(--vivid) 0%, var(--hot) 100%); }
.foot h2 { color: #fff; }
.foot li a, .foot p a { color: #ffe0f4; }
.foot li a:hover, .foot p a:hover { color: #fff; }

.bar { background: rgba(255, 255, 255, .96); border-bottom-color: rgba(255, 43, 248, .22); }
.bar nav a { color: var(--vivid-deep); }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--hot); border-bottom-color: var(--hot); }

.begin a { background: var(--vivid); }
.begin a:hover { background: var(--hot); }
.num { background: var(--hot); }
.row { background: #fff; }
.month { background: var(--blush); }
.in-house { background: var(--blush); }
.arch-band { background: #fff; }
.rite-name .head { color: var(--name-ink); }
.rite-name .says { color: var(--glow); }

:root {

	--arch-pale:  #fcd2e1;
	--arch-soft:  #f6b7c1;
	--arch-mid:   #eda2ac;
	--arch-deep:  #cb6b74;
	--arch-shade: #c25a6a;
	--arch-warm:  #fbb19b;

	--say-ground: #fdeef1;
	--blush:      #fdeef1;
}

.rites-flow {
	background:
		radial-gradient(120% 80% at 12% 0%, #fff6f8 0%, transparent 55%),
		radial-gradient(110% 70% at 88% 100%, var(--arch-pale) 0%, transparent 60%),
		var(--say-ground);
	padding: clamp(48px, 11vw, 110px) clamp(22px, 6vw, 64px);
	display: grid;
	gap: clamp(56px, 13vw, 120px);
}

.rite-arch {
	display: grid;
	gap: clamp(26px, 6vw, 52px);
	align-items: center;
	max-width: var(--measure);
	margin-inline: auto;
	width: 100%;
	text-decoration: none;
}

@media (min-width: 820px) {
	.rite-arch { grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); }
	.rite-arch--turned .arch-cut { order: 2; }
	.rite-arch--turned .arch-say { order: 1; text-align: right; }
	.rite-arch--turned .arch-say .vow { margin-left: auto; margin-right: 0; }
}

.arch-cut {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	clip-path: url(#hh-arch);
	background: var(--arch-mid);
	overflow: hidden;
}

.arch-cut img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-point, center 30%);
	filter: saturate(1.25) contrast(1.04) brightness(1.06);
	mix-blend-mode: luminosity;
	opacity: .95;
	transition: transform 1.4s var(--float-ease);
}

.arch-cut::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(162deg,
		var(--cut-a, rgba(252, 210, 225, .58)) 0%,
		var(--cut-b, rgba(237, 162, 172, .52)) 55%,
		var(--cut-c, rgba(203, 107, 116, .46)) 100%);
	mix-blend-mode: screen;
}

.arch-cut::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 2;
	width: 34%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #fff, var(--glow), #fff, transparent);
	box-shadow: 0 0 22px 5px var(--glow-soft);
	transition: width .7s var(--float-ease);
}

.rite-arch:hover .arch-cut::before,
.rite-arch:focus-visible .arch-cut::before { width: 72%; }
.rite-arch:hover .arch-cut img { transform: scale(1.04); }

.arch-say { display: block; }

.arch-say .head {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(40px, 12vw, 84px);
	line-height: .98;
	text-transform: uppercase;
	letter-spacing: .015em;
	color: var(--name-ink);
	text-shadow: none;
}

.arch-say .says {
	display: block;
	margin-top: clamp(12px, 2.6vw, 18px);
	font-family: var(--font-body);
	font-style: italic;
	font-size: clamp(16px, 4.3vw, 20px);
	color: var(--glow);
}

.arch-say .who {
	display: block;
	margin-top: clamp(14px, 3vw, 20px);
	font: 700 clamp(12px, 3.2vw, 13px)/1.4 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--arch-shade);
}

.arch-say .price {
	display: block;
	margin-top: clamp(8px, 2vw, 12px);
	font-family: var(--font-body);
	font-size: clamp(16px, 4.3vw, 19px);
	color: var(--vivid-deep);
}

.arch-say .vow {
	display: block;
	margin-top: clamp(22px, 5vw, 34px);
	max-width: 30ch;
	font-family: var(--font-body);
	font-size: clamp(18px, 4.7vw, 21px);
	line-height: 1.55;
	color: #6b2038;
}

.arch-say .more {
	display: inline-block;
	margin-top: clamp(24px, 5vw, 36px);
	font: 700 11px/1 var(--font-util);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--vivid-deep);
	border-bottom: 1px solid currentColor;
	padding-bottom: 6px;
}

.rite-arch.tone-itoshii  { --cut-a: rgba(252,210,225,.62); --cut-b: rgba(246,183,193,.5);  --cut-c: rgba(251,177,155,.4);
                           --glow: #ff6fb5; --glow-soft: rgba(255,111,181,.5); --name-ink: #d4488c; }
.rite-arch.tone-tamashii { --cut-a: rgba(252,210,225,.5);  --cut-b: rgba(237,162,172,.56); --cut-c: rgba(255,23,68,.34);
                           --glow: #ff1744; --glow-soft: rgba(255,23,68,.45);  --name-ink: #e4003c; }
.rite-arch.tone-totoki   { --cut-a: rgba(255,180,230,.56); --cut-b: rgba(237,162,172,.5);  --cut-c: rgba(255,43,248,.34);
                           --glow: #ff2bf8; --glow-soft: rgba(255,43,248,.5);  --name-ink: #c02a9e; }
.rite-arch.tone-mirror   { --cut-a: rgba(252,210,225,.56); --cut-b: rgba(203,107,116,.48); --cut-c: rgba(255,23,68,.36);
                           --glow: #ff4fd8; --glow-soft: rgba(255,79,216,.5);  --name-ink: #b5245c; }

.band, .uzume, .month, .in-house { background: var(--arch-pale); }
.crossing { background: var(--say-ground); }
.sec { background: transparent; }
body { background: var(--say-ground); }
.bar { background: rgba(253, 238, 241, .96); }

.arch-cut img {
	mix-blend-mode: normal;
	opacity: 1;
	filter: saturate(1.32) contrast(1.06) brightness(1.05);
}

.arch-cut::after {
	background:
		radial-gradient(78% 62% at 50% 42%,
			transparent 0%,
			transparent 42%,
			var(--cut-a, rgba(252, 210, 225, .55)) 78%,
			var(--cut-b, rgba(237, 162, 172, .8)) 100%),
		linear-gradient(178deg, transparent 55%, var(--cut-c, rgba(255, 23, 68, .3)) 100%);
	mix-blend-mode: screen;
	opacity: .9;
}

.arch-cut::before { z-index: 3; }

.arch-cut .warm {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--cut-b, rgba(237, 162, 172, .8));
	mix-blend-mode: soft-light;
	opacity: .55;
}

.scene {
	background: transparent;
	display: grid;
	gap: clamp(24px, 6vw, 52px);
	align-items: center;
	max-width: var(--measure);
	margin-inline: auto;
	padding: clamp(44px, 10vw, 96px) clamp(22px, 6vw, 64px);
	isolation: isolate;
	position: relative;
}

.scene > img {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: var(--focus-point, center 30%);
	clip-path: url(#hh-arch);
	mix-blend-mode: normal;
	opacity: 1;
	filter: saturate(1.3) contrast(1.05) brightness(1.05);
}

.scene--tall > img { aspect-ratio: 4 / 5; }

.scene::after {
	content: '';
	position: absolute;
	inset: clamp(44px, 10vw, 96px) auto auto clamp(22px, 6vw, 64px);
	display: none;
}

.scene .panel-words {
	position: static;
	background: transparent;
	padding: 0;
	max-width: 34ch;
}

.scene .panel-words::before { display: none; }

.scene .panel-words .head {
	color: var(--name-ink);
	text-shadow: none;
	font-size: clamp(32px, 8.4vw, 58px);
	line-height: 1.06;
}

.scene .panel-words .said {
	color: var(--glow);
	text-shadow: none;
	font-size: clamp(20px, 5.4vw, 27px);
}

.scene .panel-words .vow,
.scene .panel-words .close p {
	color: #6b2038;
	text-shadow: none;
}

.scene .panel-words .says { color: var(--glow); text-shadow: none; }
.scene .panel-words .who  { color: var(--arch-shade); text-shadow: none; }

@media (min-width: 820px) {
	.scene { grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 80px); }
	.scene:nth-of-type(even) > img { order: 2; }
	.scene:nth-of-type(even) .panel-words { order: 1; text-align: right; margin-left: auto; }
}

.scene.tone-itoshii  { --glow: #ff6fb5; --name-ink: #d4488c; }
.scene.tone-tamashii { --glow: #ff1744; --name-ink: #e4003c; }
.scene.tone-totoki   { --glow: #ff2bf8; --name-ink: #c02a9e; }
.scene.tone-mirror   { --glow: #ff4fd8; --name-ink: #b5245c; }

.arch-cut,
.scene > img {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}

.arch-cut { background: transparent; }

.arch-cut::before { display: none; }

.rite-arch { gap: clamp(4px, 2vw, 24px); }
.scene { gap: clamp(4px, 2vw, 24px); }

@media (min-width: 820px) {
	.rite-arch, .scene { gap: clamp(40px, 5vw, 80px); }
}

.rite-arch.tone-totoki,
.scene.tone-totoki  { --glow: #ff2bf8; --name-ink: #ff21c8; }
.rite-arch.tone-mirror,
.scene.tone-mirror  { --glow: #ff4fd8; --name-ink: #ff1470; }
.rite-arch.tone-itoshii,
.scene.tone-itoshii { --glow: #ff6fb5; --name-ink: #ff3d94; }
.rite-arch.tone-tamashii,
.scene.tone-tamashii{ --glow: #ff1744; --name-ink: #ff0a3c; }

.scene .panel-words .close { display: block; }

.scene .panel-words .close p {
	font-family: var(--font-head);
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.08;
	font-size: clamp(30px, 7.6vw, 52px);
	color: var(--vivid);
	text-shadow: none;
	margin: 0;
}

.scene .panel-words .close p + p {
	margin-top: clamp(18px, 4vw, 28px);
	color: var(--hot);
	font-size: clamp(24px, 6.2vw, 40px);
}

.bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(253, 238, 241, 0);
	backdrop-filter: none;
	border: 0;
	padding: clamp(10px, 2.4vw, 16px) 0 0;
	transition: background .5s var(--float-ease), backdrop-filter .5s var(--float-ease);
}

.bar.is-held {
	background: rgba(253, 238, 241, .82);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
}

.bar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 3vw, 28px);
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 48px);
}

.bar .wordmark { display: block; text-decoration: none; line-height: 1; }

.bar .wordmark-name {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(17px, 4.6vw, 24px);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vivid);
}

.bar .wordmark-said {
	display: block;
	margin-top: 5px;
	font: 400 clamp(9px, 2.5vw, 11px)/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--arch-shade);
}

.bar .way {
	flex: 0 0 auto;
	display: inline-block;
	padding: clamp(9px, 2.4vw, 12px) clamp(13px, 3.4vw, 22px);
	border-radius: 999px;
	font: 700 clamp(9px, 2.5vw, 11px)/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(118deg, var(--vivid) 0%, var(--hot) 100%);
	box-shadow: 0 6px 20px rgba(255, 23, 68, .32);
	transition: box-shadow .45s var(--float-ease), transform .45s var(--float-ease);
}

.bar .way:hover,
.bar .way:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px rgba(255, 43, 248, .45);
}

.rites-row {
	max-width: var(--measure);
	margin: clamp(8px, 2vw, 12px) auto 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%);
}

.rites-row::-webkit-scrollbar { display: none; }

.rites-row ul {
	display: flex;
	gap: clamp(14px, 4vw, 30px);
	margin: 0;
	padding: 0 clamp(16px, 5vw, 48px) clamp(9px, 2.2vw, 13px);
	list-style: none;
	white-space: nowrap;
}

.rites-row a {
	font-family: var(--font-head);
	font-size: clamp(12px, 3.3vw, 15px);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--arch-shade);
	transition: color .35s var(--float-ease);
}

.rites-row a:hover,
.rites-row a:focus-visible,
.rites-row a[aria-current="page"] { color: var(--hot); }

.bar-seam {
	display: block;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%, var(--arch-soft) 22%, #fff 50%, var(--arch-soft) 78%, transparent 100%);
	opacity: .0;
	transition: opacity .5s var(--float-ease);
}

.bar.is-held .bar-seam {
	opacity: 1;
	box-shadow: 0 0 14px 1px rgba(255, 111, 181, .5);
}

.foot-mark {
	display: block;
	width: clamp(96px, 26vw, 140px);
	margin: 0 auto clamp(26px, 6vw, 44px);
	padding-top: clamp(38px, 9vw, 64px);
}

.foot-mark img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 14px 40px rgba(120, 4, 60, .38);
}

.rites-row {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}

html { scroll-padding-top: 96px; }

.ladder {
	--door:  #b81d2a;
	--below: #e8303f;
	--light: #f67882;
	--pink:  #fbcfd3;
}

.ladder .ladder-arch { display: block; margin: 0; }
.ladder .ladder-arch img { display: block; width: 100%; height: auto; }

.ladder .rung {
	width: 100%;
	max-width: none;
	padding: clamp(44px, 11vw, 84px) 0;
	text-align: center;
}

.ladder .rung > .in {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5.5vw, 46px);
}

.ladder .rung--door  { background: var(--door);  color: #fff; }
.ladder .rung--white { background: #fff;         color: #6b2038; }
.ladder .rung--below { background: var(--below); color: #fff; }
.ladder .rung--light { background: var(--light); color: #5a0f22; }
.ladder .rung--pink  { background: var(--pink);  color: #6b2038; }

.ladder .rung h1,
.ladder .rung h2 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .012em;
	line-height: 1.03;
	color: inherit;
	max-width: 17ch;
	margin-inline: auto;
}

.ladder .rung h1 { font-size: clamp(30px, 8.8vw, 56px); }
.ladder .rung h2 { font-size: clamp(27px, 7.8vw, 46px); }

.ladder .its,
.ladder .kick {
	margin: 0 0 clamp(14px, 3.2vw, 20px);
	font: 700 10px/1.5 var(--font-util);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: inherit;
	opacity: .85;
}

.ladder .its { letter-spacing: .42em; }

.ladder .alone,
.ladder .say {
	margin: clamp(16px, 3.6vw, 24px) auto 0;
	max-width: 28ch;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.6vw, 20px);
	line-height: 1.5;
	color: inherit;
	opacity: .95;
}

.ladder .rites {
	list-style: none;
	margin: clamp(26px, 6vw, 38px) auto 0;
	padding: 0;
	max-width: 420px;
	display: grid;
	gap: 2px;
}

.ladder .rites a {
	display: block;
	padding: 16px 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(232, 48, 63, .22);
	transition: background .35s var(--float-ease);
}

.ladder .rites li:last-child a { border-bottom: 0; }
.ladder .rites a:hover, .ladder .rites a:focus-visible { background: rgba(232, 48, 63, .06); }

.ladder .rites b {
	display: block;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(21px, 5.8vw, 28px);
	text-transform: uppercase;
	color: var(--below);
}

.ladder .rites span {
	display: block;
	margin-top: 5px;
	font-family: var(--font-body);
	font-size: 15px;
	color: #8a3a52;
}

.ladder .go {
	display: inline-block;
	margin-top: clamp(24px, 5.5vw, 34px);
	padding: 16px 32px;
	border-radius: 999px;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .4s var(--float-ease), box-shadow .4s var(--float-ease);
}

.ladder .rung--door .go,
.ladder .rung--below .go,
.ladder .rung--light .go {
	background: #fff;
	color: var(--below);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

.ladder .rung--white .go,
.ladder .rung--pink .go {
	background: var(--below);
	color: #fff;
	box-shadow: 0 12px 34px rgba(190, 20, 90, .3);
}

.ladder .go:hover,
.ladder .go:focus-visible { transform: translateY(-2px); }

.bar .way {
	background: #e8303f;
	box-shadow: 0 8px 22px rgba(184, 29, 42, .3);
}

.bar .way:hover,
.bar .way:focus-visible {
	background: #d1202f;
	box-shadow: 0 12px 30px rgba(184, 29, 42, .42);
}

.bar .wordmark-name { color: #b81d2a; }
.bar .wordmark-said { color: #c25a6a; }
.rites-row a { color: #a8404e; }
.rites-row a:hover,
.rites-row a:focus-visible,
.rites-row a[aria-current="page"] { color: #e8303f; }
.bar.is-held .bar-seam { box-shadow: 0 0 14px 1px rgba(232, 48, 63, .45); }

.ladder .ladder-arch {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ladder .ladder-arch::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 12%;
	bottom: 6%;
	width: 3px;
	margin-left: -1.5px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, #fff 16%, #fff 84%, transparent);
	box-shadow:
		0 0 22px 6px rgba(255, 214, 230, .9),
		0 0 62px 20px rgba(255, 111, 181, .55),
		0 0 120px 44px rgba(255, 43, 248, .28);
	animation: hh-seam 3.6s ease-in-out infinite;
}

@keyframes hh-seam {
	0%, 100% { opacity: .72; }
	50%      { opacity: 1; }
}

.ladder .ladder-arch::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 46%;
	height: 22%;
	margin-left: -23%;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(60% 100% at 50% 100%, rgba(255, 235, 245, .55) 0%, transparent 72%);
	animation: hh-seam 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ladder .ladder-arch::after,
	.ladder .ladder-arch::before { animation: none; opacity: .9; }
}

.ladder .its {
	font-size: clamp(13px, 3.6vw, 17px);
	letter-spacing: .38em;
	margin-bottom: clamp(18px, 4vw, 26px);
	opacity: 1;
}

.ladder .rung--door .alone {
	margin-top: clamp(20px, 4.6vw, 30px);
	max-width: 24ch;
	font-size: clamp(21px, 5.8vw, 27px);
	line-height: 1.4;
	opacity: 1;
}

.window {
	position: relative;
	height: clamp(300px, 52vh, 460px);
	clip-path: inset(0);
	overflow: hidden;
	isolation: isolate;
}

.window .pane {
	position: fixed;
	inset: 0;
	z-index: 0;

	background-size: var(--fit, 116vw auto);
	background-position: var(--focus, center 38%);
	background-repeat: no-repeat;
	background-color: #b81d2a;
	filter: saturate(1.18) contrast(1.04);
	will-change: transform;
}

.window .pane::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(168deg,
		rgba(184, 29, 42, .34) 0%,
		rgba(232, 48, 63, .18) 48%,
		rgba(255, 111, 181, .26) 100%);
	mix-blend-mode: multiply;
}

.window::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		var(--from, #b81d2a) 0%,
		color-mix(in srgb, var(--from, #b81d2a) 55%, transparent) 16%,
		transparent 40%,
		transparent 60%,
		color-mix(in srgb, var(--to, #ffffff) 55%, transparent) 84%,
		var(--to, #ffffff) 100%);
}

.window .said {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	height: 100%;
	margin: 0;
	padding: 0 clamp(24px, 7vw, 60px);
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(22px, 6.4vw, 36px);
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(120, 4, 40, .8), 0 1px 3px rgba(120, 4, 40, .5);
}

@media (prefers-reduced-motion: reduce) {
	.window .pane { position: absolute; }
}

.ages {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	width: 100%;
	background: #b81d2a;
}

@media (min-width: 700px) {
	.ages { grid-template-columns: repeat(4, 1fr); }
}

.ages .age {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
}

.ages .age img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.15) contrast(1.05);
	transition: transform 1.2s var(--float-ease);
}

.ages .age::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--wash);
	mix-blend-mode: multiply;
	opacity: .62;
	transition: opacity .6s var(--float-ease);
}

.ages .age::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(0, 0, 0, .34) 0%, transparent 46%);
}

.ages .age span {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: clamp(10px, 2.6vw, 18px);
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(15px, 4vw, 21px);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 14px rgba(90, 4, 26, .8);
}

.ages .age:hover img,
.ages .age:focus-visible img { transform: scale(1.05); }
.ages .age:hover::after,
.ages .age:focus-visible::after { opacity: .44; }

.foot .soon { color: var(--foot-ink); opacity: .62; }

.years { --door:#b81d2a; --below:#e8303f; --light:#f67882; --pink:#fbcfd3; }

.years .rung { width:100%; max-width:none; padding: clamp(40px,10vw,78px) 0; text-align:center; }
.years .rung > .in { max-width:640px; margin-inline:auto; padding-inline: clamp(20px,5.5vw,46px); }
.years .rung--door  { background: var(--door);  color:#fff; }
.years .rung--white { background:#fff;          color:#6b2038; }
.years .rung--below { background: var(--below); color:#fff; }
.years .rung--light { background: var(--light); color:#5a0f22; }
.years .rung--pink  { background: var(--pink);  color:#6b2038; }

.years h1, .years h2 {
	margin: 0 auto;
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.04;
	color: inherit;
	max-width: 17ch;
}

.years h1 { font-size: clamp(29px, 8.4vw, 52px); }
.years h2 { font-size: clamp(26px, 7.4vw, 44px); }

.years .its, .years .kick {
	margin: 0 0 clamp(14px,3.2vw,20px);
	font: 700 clamp(11px,3vw,13px)/1.5 var(--font-util);
	letter-spacing: .34em; text-transform: uppercase; color: inherit;
}

.years .alone, .years .say {
	margin: clamp(16px,3.6vw,24px) auto 0; max-width: 30ch;
	font-family: var(--font-body); font-size: clamp(17px,4.6vw,20px); line-height:1.5; color: inherit;
}

.years .quiet {
	margin: clamp(20px,4.6vw,28px) auto 0; max-width: 32ch;
	font-family: var(--font-body); font-size: 15px; line-height:1.55; color:#a8566a;
}

.years .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.years .kid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px 14px;
	align-items: end;
	max-width: 460px;
	margin: 0 auto clamp(22px,5vw,32px);
	text-align: left;
	position: relative;
}

.years .kid input {
	border: 0;
	border-bottom: 1px solid var(--dusty, #eda2ac);
	background: transparent;
	padding: 10px 2px;
	font-family: var(--font-body);
	font-size: clamp(19px, 5vw, 23px);
	color: #6b2038;
	width: 100%;
}

.years .kid input:focus-visible { outline: 0; border-bottom-color: var(--below); }
.years .kid input::placeholder { color: #d59aa9; }
.years .kid .kid-age { width: 76px; text-align: center; }

.years .which { grid-column: 1 / -1; display: flex; gap: 8px; }

.years .which .w {
	flex: 1 1 auto;
	padding: 11px 12px;
	border-radius: 999px;
	border: 1px solid var(--dusty, #eda2ac);
	background: #fff;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .14em; text-transform: uppercase; color: #a8566a;
	cursor: pointer;
	transition: background .3s var(--float-ease), color .3s var(--float-ease), border-color .3s var(--float-ease);
}

.years .which .w.on { background: var(--below); border-color: var(--below); color:#fff; }

.years .kid .drop {
	position: absolute; top: 4px; right: -4px;
	border: 0; background: transparent; cursor: pointer;
	font-size: 24px; line-height: 1; color: #d59aa9;
}

.years .add {
	margin-top: 6px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid var(--below);
	background: #fff;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .2em; text-transform: uppercase; color: var(--below);
	cursor: pointer;
}

.years .standing[hidden] { display: none; }
.years [data-waiting-wrap][hidden] { display: none; }
.years [data-bundle][hidden] { display: none; }

.years .cards { display: grid; gap: 10px; margin: clamp(24px,5.5vw,34px) auto 0; max-width: 460px; text-align: left; }

.years .card {
	padding: 18px 22px;
	border-radius: 20px;
	background: rgba(255,255,255,.92);
	box-shadow: 0 10px 28px rgba(150,20,60,.16);
}

.years .card--quiet { background: rgba(255,255,255,.72); box-shadow: none; border: 1px solid rgba(237,162,172,.6); }

.years .card b {
	display: block;
	font-family: var(--font-head); font-weight: 400;
	font-size: clamp(21px, 5.8vw, 27px);
	text-transform: uppercase; color: var(--below); line-height: 1.05;
}

.years .card i {
	display: block; margin-top: 6px; font-style: normal;
	font: 700 10px/1.4 var(--font-util); letter-spacing:.18em; text-transform:uppercase; color:#a8566a;
}

.years .card span { display:block; margin-top: 8px; font-family: var(--font-body); font-size: 16px; color:#6b2038; }

.years .none { margin: 20px auto 0; max-width: 30ch; font-family: var(--font-body); color: inherit; }

.years .bundle {
	margin: clamp(26px,6vw,38px) auto 0;
	max-width: 420px;
	padding: 22px 24px;
	border-radius: 22px;
	background: rgba(255,255,255,.9);
	box-shadow: 0 12px 32px rgba(150,20,60,.18);
}

.years .bundle-name {
	margin: 0;
	font-family: var(--font-head); font-size: clamp(20px,5.4vw,26px);
	text-transform: uppercase; color: var(--door);
}

.years .bundle-said { margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; color:#6b2038; }

.years .bundle-price {
	margin: 14px 0 0;
	font: 700 11px/1.6 var(--font-util); letter-spacing:.16em; text-transform:uppercase; color: var(--below);
}

.years .go {
	display:inline-block; margin-top: clamp(24px,5.5vw,34px);
	padding: 16px 32px; border-radius:999px;
	font: 700 11px/1 var(--font-util); letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
	background:#fff; color: var(--below);
	box-shadow: 0 12px 34px rgba(0,0,0,.16);
}

.years .rung--white .go, .years .rung--pink .go { background: var(--below); color:#fff; }

.letter-day {
	--door:#b81d2a; --below:#e8303f; --light:#f67882; --pink:#fbcfd3;
	display: block;
	background: linear-gradient(180deg, #fffaf6 0%, #fff4f7 40%, var(--pink) 100%);
	padding-bottom: clamp(50px, 12vw, 96px);
}

.letter-day .ld-open {
	background: radial-gradient(110% 76% at 50% 16%, #fff 0%, #fff2f6 44%, var(--pink) 100%);
	padding: clamp(46px, 12vw, 96px) clamp(22px, 6vw, 56px) clamp(34px, 8vw, 60px);
	text-align: center;
}

.letter-day .ld-which {
	margin: 0;
	font: 700 clamp(11px, 3vw, 13px)/1.5 var(--font-util);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--shade, #c25a6a);
}

.letter-day .ld-kanji {
	display: block;
	margin-top: clamp(18px, 4vw, 28px);
	font-size: clamp(40px, 12vw, 68px);
	line-height: 1;
	color: var(--below);
	opacity: .9;
}

.letter-day .ld-open h1 {
	margin: clamp(16px, 3.6vw, 24px) auto 0;
	max-width: 18ch;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(28px, 8vw, 50px);
	line-height: 1.04;
	text-transform: uppercase;
	color: var(--door);
}

.letter-day .ld-body {
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(30px, 8vw, 56px) clamp(22px, 6vw, 40px) 0;
}

.letter-day .ld-line {
	margin: 0 0 clamp(18px, 4vw, 26px);
	font-family: var(--font-body);
	font-size: clamp(18px, 4.7vw, 20px);
	line-height: 1.62;
	color: #4f1526;
}

.letter-day .ld-lift {
	margin: clamp(26px, 6vw, 38px) 0;
	font-family: var(--font-head);
	font-size: clamp(22px, 6vw, 32px);
	line-height: 1.18;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--below);
}

.letter-day .ld-word {
	margin: clamp(34px, 8vw, 52px) 0 0;
	padding: clamp(22px, 5vw, 32px) clamp(20px, 4.5vw, 30px) clamp(16px, 3.6vw, 22px);
	border-radius: 22px 22px 0 0;
	background: #fff;
	box-shadow: 0 -2px 0 var(--below) inset;
	font-family: var(--font-head);
	font-size: clamp(26px, 7vw, 38px);
	line-height: 1.1;
	letter-spacing: .06em;
	color: var(--door);
	text-align: center;
}

.letter-day .ld-say {
	margin: 0 0 clamp(26px, 6vw, 38px);
	padding: 0 20px clamp(20px, 4.4vw, 28px);
	border-radius: 0 0 22px 22px;
	background: #fff;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--shade, #c25a6a);
	text-align: center;
}

.letter-day .ld-rule {
	display: block;
	width: 54px;
	height: 1px;
	margin: clamp(30px, 7vw, 44px) auto;
	background: linear-gradient(90deg, transparent, var(--light), transparent);
	position: relative;
}

.letter-day .ld-rule::after {
	content: '✶';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	color: var(--light);
	background: transparent;
}

.letter-day .ld-next {
	margin: clamp(34px, 8vw, 50px) 0 0;
	padding: 20px 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .78);
	font-family: var(--font-body);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.55;
	color: var(--door);
}

.letter-day .ld-sign {
	margin: clamp(10px, 2.4vw, 14px) 0 0;
	font-family: var(--font-head);
	font-size: clamp(16px, 4.2vw, 19px);
	letter-spacing: .06em;
	color: var(--shade, #c25a6a);
	text-align: center;
}

.letter-day .ld-days {
	max-width: 34rem;
	margin: clamp(44px, 10vw, 74px) auto 0;
	padding: 0 clamp(22px, 6vw, 40px);
}

.letter-day .ld-days-say {
	margin: 0 0 16px;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--shade, #c25a6a);
	text-align: center;
}

.letter-day .ld-days ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.letter-day .ld-days a {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 14px 16px;
	border-radius: 14px;
	text-decoration: none;
	background: rgba(255, 255, 255, .6);
	transition: background .35s var(--float-ease);
}

.letter-day .ld-days a:hover,
.letter-day .ld-days a:focus-visible { background: #fff; }

.letter-day .ld-days a[aria-current="page"] { background: #fff; box-shadow: 0 0 0 1px var(--light) inset; }

.letter-day .ld-days b {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 20px;
	color: var(--below);
}

.letter-day .ld-days span {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: #6b2038;
}

.letter-day .ld-word { border-radius: 22px; }
.letter-day .ld-word + .ld-say { margin-top: -22px; border-radius: 0 0 22px 22px; }
.letter-day .ld-word:has(+ .ld-say) { border-radius: 22px 22px 0 0; }

.years .card--choose { background: #fff; }

.years .choose-say {
	margin: 8px 0 16px;
	font-family: var(--font-body);
	font-size: 16px;
	color: #6b2038;
}

.years .pick {
	display: block;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(251, 207, 211, .5);
	margin-bottom: 8px;
}

.years .pick:last-child { margin-bottom: 0; }

.years .pick b {
	display: block;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(19px, 5.2vw, 24px);
	text-transform: uppercase;
	color: var(--below);
	line-height: 1.05;
}

.years .pick em {
	display: block;
	margin-top: 5px;
	font-style: normal;
	font: 700 11px/1 var(--font-util);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--door);
}

.years .pick u {
	display: block;
	margin-top: 7px;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 15px;
	color: #8a3a52;
}

.years .kid {
	display: block;
	max-width: 460px;
	margin: 0 auto clamp(20px, 4.6vw, 28px);
	padding: clamp(18px, 4vw, 24px);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(150, 20, 60, .12);
	text-align: left;
}

.years .kid-in { display: grid; grid-template-columns: 1fr 84px; gap: 14px; align-items: end; }

.years .kid input {
	border: 0;
	border-bottom: 1px solid var(--dusty, #eda2ac);
	background: transparent;
	padding: 9px 2px;
	font-family: var(--font-body);
	font-size: clamp(19px, 5vw, 22px);
	color: #6b2038;
	width: 100%;
	border-radius: 0;
}

.years .kid input:focus-visible { outline: 0; border-bottom-color: var(--below); }
.years .kid input::placeholder { color: #d59aa9; }
.years .kid .kid-age { text-align: center; }

.years .kid input[type="text"]::-webkit-outer-spin-button,
.years .kid input[type="text"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.years .which { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.years .which .w,
.years .which .drop {
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid var(--dusty, #eda2ac);
	background: #fff;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #a8566a;
	cursor: pointer;
}

.years .which .w { flex: 1 1 0; min-width: 108px; }
.years .which .w.on { background: var(--below); border-color: var(--below); color: #fff; }

.years .which .drop {
	flex: 0 0 auto;
	margin-left: auto;
	border-color: transparent;
	color: #c99;
	letter-spacing: .1em;
}

.years .which .drop:hover { color: var(--below); }

.years .kid-answer:empty { display: none; }

.years .answer {
	margin-top: 16px;
	padding: 15px 18px;
	border-radius: 16px;
}

.years .answer b {
	display: block;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(20px, 5.4vw, 25px);
	line-height: 1.06;
	text-transform: uppercase;
}

.years .answer span {
	display: block;
	margin-top: 7px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.45;
	color: #6b2038;
}

.years .answer--now  { background: rgba(232, 48, 63, .1); }
.years .answer--now b { color: var(--below); }

.years .answer--held { background: rgba(237, 162, 172, .24); }
.years .answer--held b { color: #a8566a; font-size: clamp(17px, 4.6vw, 21px); }

.years .answer--two { background: rgba(232, 48, 63, .07); }

.years .answer-say {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 16px;
	color: #6b2038;
}

.plans {
	--door:#b81d2a; --below:#e8303f; --light:#f67882; --pink:#fbcfd3;
	display: block;
	background: #fff;
}

.plans .pl-in { max-width: 620px; margin-inline: auto; padding-inline: clamp(20px, 5.5vw, 46px); }

.plans .pl-open {
	background: radial-gradient(110% 80% at 50% 10%, #fff 0%, #fff2f6 46%, var(--pink) 100%);
	padding: clamp(44px, 11vw, 88px) clamp(20px, 5.5vw, 46px) clamp(34px, 8vw, 60px);
	text-align: center;
}

.plans h1, .plans h2 {
	margin: 0 auto;
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.04;
	max-width: 18ch;
}

.plans h1 { font-size: clamp(30px, 8.6vw, 52px); color: var(--door); margin-top: 14px; }
.plans h2 { font-size: clamp(25px, 7vw, 40px); }

.plans .pl-kick {
	margin: 0;
	font: 700 clamp(10px, 2.8vw, 12px)/1.5 var(--font-util);
	letter-spacing: .3em; text-transform: uppercase; color: var(--shade, #c25a6a);
}

.plans .pl-lead,
.plans .pl-say {
	margin: clamp(16px, 3.6vw, 24px) auto 0;
	max-width: 34ch;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.5vw, 19px);
	line-height: 1.55;
}

.plans .pl-band { padding: clamp(40px, 10vw, 76px) 0; }
.plans .pl-band--white { background: #fff; color: #4f1526; }
.plans .pl-band--pale  { background: #fff4f7; color: #4f1526; }
.plans .pl-band--red   { background: var(--below); color: #fff; }
.plans .pl-band--pink  { background: var(--pink); color: #4f1526; }

.plans .pl-band--white h2, .plans .pl-band--pale h2 { color: var(--below); }
.plans .pl-band--red h2 { color: #fff; }
.plans .pl-band--pink h2 { color: var(--door); }
.plans .pl-band--red .pl-kick { color: #ffd9e6; }

.plans i { font-style: italic; }
.plans b { font-weight: 400; }

.plans .pl-two { display: grid; gap: 14px; margin-top: clamp(26px, 6vw, 36px); }
@media (min-width: 760px) { .plans .pl-two { grid-template-columns: 1fr 1fr; } }

.plans .pl-price {
	padding: clamp(24px, 5.5vw, 32px);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(150, 20, 60, .14);
	text-align: left;
}

.plans .pl-price b {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(40px, 11vw, 56px);
	line-height: 1;
	color: var(--below);
}

.plans .pl-price span { display: block; margin-top: 6px; font-size: 14px; color: #a8566a; }

.plans .pl-price em {
	display: block; margin-top: 14px; font-style: italic;
	font: 700 11px/1 var(--font-util); letter-spacing: .24em; text-transform: uppercase; color: var(--door);
}

.plans .pl-price p { margin: 12px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #4f1526; }
.plans .pl-price p i { color: #a8566a; }

.plans .pl-price ul { margin: 14px 0 0; padding: 0; list-style: none; }
.plans .pl-price li {
	padding: 7px 0; border-top: 1px solid rgba(237,162,172,.5);
	font-family: var(--font-head); font-size: 15px; letter-spacing: .06em; color: var(--shade, #c25a6a);
}

.plans .pl-note {
	margin: clamp(24px, 5.5vw, 32px) auto 0;
	max-width: 36ch;
	padding: 16px 20px;
	border-radius: 16px;
	background: rgba(255,255,255,.7);
	font-family: var(--font-body); font-size: 16px; line-height: 1.5;
}

.plans .pl-rule {
	margin: clamp(24px, 5.5vw, 34px) auto 0;
	max-width: 34ch;
	padding: clamp(20px, 4.5vw, 28px);
	border-radius: 20px;
	background: rgba(255,255,255,.16);
}

.plans .pl-rule-say { margin: 0; font-family: var(--font-body); font-size: clamp(17px, 4.6vw, 20px); line-height: 1.5; }

.plans .pl-cases { display: grid; gap: 10px; margin: clamp(24px, 5.5vw, 32px) auto 0; max-width: 460px; text-align: left; }

.plans .pl-case { padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,.92); color: #4f1526; }

.plans .pl-case b {
	display: block; font: 700 10px/1 var(--font-util);
	letter-spacing: .22em; text-transform: uppercase;
}

.plans .pl-case--yes b { color: var(--below); }
.plans .pl-case--no  b { color: #a8566a; }

.plans .pl-case span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 16px; }

.plans .pl-case i {
	display: block; margin-top: 8px;
	font-family: var(--font-head); font-size: clamp(20px, 5.4vw, 25px); color: var(--door);
}

.plans .pl-case u { display: block; margin-top: 6px; text-decoration: none; font-family: var(--font-body); font-size: 15px; color: #8a3a52; }

.plans .pl-guard {
	margin: clamp(20px, 4.6vw, 28px) auto 0;
	max-width: 36ch;
	padding: 20px 22px;
	border-radius: 18px;
	background: #fff4f7;
	text-align: left;
}

.plans .pl-guard b { display: block; font-family: var(--font-head); font-size: clamp(18px, 4.8vw, 22px); text-transform: uppercase; color: var(--below); line-height: 1.1; }
.plans .pl-guard p { margin: 10px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; }

.plans .pl-ask { margin: clamp(24px, 5.5vw, 34px) auto 0; max-width: 460px; padding: 0; list-style: none; text-align: left; counter-reset: q; }

.plans .pl-ask li {
	position: relative;
	padding: 18px 0 18px 42px;
	border-bottom: 1px solid rgba(184,29,42,.16);
}

.plans .pl-ask li::before {
	counter-increment: q; content: counter(q);
	position: absolute; left: 0; top: 18px;
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--below); color: #fff;
	font: 700 12px/1 var(--font-util);
}

.plans .pl-ask b { display: block; font-family: var(--font-head); font-size: clamp(18px, 4.8vw, 22px); text-transform: uppercase; color: var(--door); line-height: 1.12; }
.plans .pl-ask span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.5; }

.plans .pl-foot {
	padding: clamp(34px, 8vw, 56px) clamp(20px, 5.5vw, 46px);
	background: #fff;
	text-align: center;
}

.plans .pl-foot p { margin: 0 auto; max-width: 40ch; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: #8a3a52; }

.doors-two {
	--door: #b81d2a;
	--below: #e8303f;
	background: linear-gradient(180deg, #fff 0%, #fff4f7 100%);
	padding: clamp(44px, 11vw, 84px) clamp(20px, 5.5vw, 46px);
}

.doors-two.tone-tamashii { --below: #e8303f; }
.doors-two.tone-totoki   { --below: #e83074; }
.doors-two.tone-mirror   { --below: #e8305e; }

.doors-in {
	display: grid;
	gap: 14px;
	max-width: 640px;
	margin-inline: auto;
}

@media (min-width: 780px) { .doors-in { grid-template-columns: 1fr 1fr; align-items: start; } }

.door-one {
	display: block;
	padding: clamp(26px, 6vw, 36px);
	border-radius: 24px;
	text-decoration: none;
	transition: transform .45s var(--float-ease), box-shadow .45s var(--float-ease);
}

.door-one:hover, .door-one:focus-visible { transform: translateY(-3px); }

.door-one--parent {
	background: var(--below);
	color: #fff;
	box-shadow: 0 16px 44px rgba(190, 20, 90, .3);
}

.door-one--parent:hover { box-shadow: 0 24px 56px rgba(190, 20, 90, .4); }

.door-one--hers {
	background: #fff;
	color: #4f1526;
	box-shadow: 0 12px 34px rgba(150, 20, 60, .14);
	border: 1px solid rgba(237, 162, 172, .7);
}

.door-who {
	display: block;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .85;
}

.door-one--hers .door-who { color: #a8566a; opacity: 1; }

.door-head {
	display: block;
	margin-top: clamp(14px, 3vw, 18px);
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(23px, 6.2vw, 30px);
	line-height: 1.08;
	text-transform: uppercase;
	color: inherit;
}

.door-one--hers .door-head { color: var(--door); }

.door-say {
	display: block;
	margin-top: clamp(12px, 2.8vw, 16px);
	font-family: var(--font-body);
	font-size: clamp(16px, 4.3vw, 17px);
	line-height: 1.5;
	color: inherit;
	opacity: .94;
}

.door-go {
	display: inline-block;
	margin-top: clamp(18px, 4vw, 26px);
	font: 700 10px/1 var(--font-util);
	letter-spacing: .22em;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
}

.door-one--hers .door-go { color: var(--below); }

.ladder .rung--itoshii  { background: #f7c8d0; color: #4f1526; }
.ladder .rung--tamashii { background: #ef8296; color: #4f1526; }
.ladder .rung--totoki   { background: #e22f57; color: #fff;    }
.ladder .rung--mirror   { background: #a8143a; color: #fff;    }

.ladder .rung--itoshii .go,
.ladder .rung--tamashii .go,
.ladder .rung--white .go {
	background: #d92034;
	color: #fff;
	box-shadow: 0 12px 34px rgba(168, 20, 58, .3);
}

.ladder .rung--totoki .go,
.ladder .rung--mirror .go {
	background: #fff;
	color: #a8143a;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
}

.ladder .rites b { color: #a8143a; }
.ladder .rites a { border-bottom-color: rgba(168, 20, 58, .2); }
.ladder .rites a:hover, .ladder .rites a:focus-visible { background: rgba(168, 20, 58, .06); }

.ladder .rung--itoshii + .window { --from: #f7c8d0; }

.ages .age::after { mix-blend-mode: multiply; }

.ages { background: #a8143a; }

.ages .age img { filter: saturate(1.2) contrast(1.04) brightness(1.1); }

.ages .age:nth-child(1)::after { opacity: .26; }
.ages .age:nth-child(2)::after { opacity: .22; }
.ages .age:nth-child(3)::after { opacity: .18; }
.ages .age:nth-child(4)::after { opacity: .15; }

.ages .age::before {
	background: linear-gradient(to top, rgba(60, 6, 22, .3) 0%, transparent 40%);
}

.window::after {
	background: linear-gradient(to bottom,
		var(--from, #fff) 0%,
		color-mix(in srgb, var(--from, #fff) 50%, transparent) 12%,
		transparent 30%,
		transparent 72%,
		color-mix(in srgb, var(--to, #fff) 50%, transparent) 90%,
		var(--to, #fff) 100%);
}

.window .pane::after {
	background: linear-gradient(168deg,
		rgba(184, 29, 42, .2) 0%,
		rgba(232, 48, 63, .1) 48%,
		rgba(255, 111, 181, .16) 100%);
}

.window .pane { filter: saturate(1.2) contrast(1.03) brightness(1.06); }

.letter-day .ld-say { font-style: italic; }
.years .pick u { font-style: italic; }
.plans .pl-price p i { font-style: italic; }

.ten { display: block; background: #fff; }

.ten .ten-in { max-width: 620px; margin-inline: auto; padding-inline: clamp(20px, 5.5vw, 46px); }

.ten .ten-open {
	background: radial-gradient(115% 80% at 50% 8%, #fff 0%, #fdeef1 44%, #f7c8d0 100%);
	padding: clamp(46px, 12vw, 92px) clamp(20px, 5.5vw, 46px) clamp(38px, 9vw, 66px);
	text-align: center;
}

.ten h1, .ten h2 {
	margin: 0 auto;
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.03;
	max-width: 17ch;
}

.ten h1 { font-size: clamp(30px, 8.6vw, 54px); color: #a8143a; margin-top: 16px; }
.ten h2 { font-size: clamp(25px, 7vw, 40px); }

.ten .ten-kick {
	margin: 0;
	font: 700 clamp(10px, 2.8vw, 12px)/1.5 var(--font-util);
	letter-spacing: .3em; text-transform: uppercase; color: #a8566a;
}

.ten .ten-lead {
	margin: clamp(18px, 4vw, 26px) auto 0;
	max-width: 34ch;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.5vw, 19px);
	line-height: 1.55;
	color: #4f1526;
}

.ten .ten-one { padding: clamp(38px, 9vw, 68px) 0; }
.ten .rung-0 { background: #fff;    color: #4f1526; }
.ten .rung-1 { background: #fdeef1; color: #4f1526; }
.ten .rung-2 { background: #f7c8d0; color: #4f1526; }
.ten .rung-3 { background: #ef8296; color: #35091a; }

.ten .rung-0 h2, .ten .rung-1 h2 { color: #a8143a; }
.ten .rung-2 h2, .ten .rung-3 h2 { color: #7d0f2b; }

.ten .ten-n {
	margin: 0 0 10px;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .34em; text-transform: uppercase; opacity: .7;
}

.ten .ten-line {
	margin: clamp(14px, 3vw, 20px) auto 0;
	max-width: 30ch;
	font-family: var(--font-head);
	font-size: clamp(19px, 5.2vw, 25px);
	line-height: 1.2;
	color: inherit;
}

.ten .ten-what,
.ten .ten-why {
	margin: clamp(16px, 3.4vw, 22px) auto 0;
	max-width: 36ch;
	font-family: var(--font-body);
	font-size: clamp(16px, 4.3vw, 18px);
	line-height: 1.56;
}

.ten .ten-why { opacity: .92; }

.ten .ten-can {
	display: inline-block;
	margin: clamp(20px, 4.4vw, 28px) 0 0;
	padding: 8px 16px;
	border-radius: 999px;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.ten .ten-one--built .ten-can { background: #a8143a; color: #fff; }
.ten .ten-one--days  .ten-can { background: rgba(168, 20, 58, .12); color: #a8143a; }
.ten .ten-one--argue .ten-can { background: transparent; color: inherit; box-shadow: 0 0 0 1px currentColor inset; opacity: .8; }

.ten .ten-note {
	margin: 12px auto 0;
	max-width: 36ch;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	opacity: .78;
}

.ten .ten-foot {
	background: #a8143a;
	color: #fff;
	padding: clamp(46px, 11vw, 84px) 0;
	text-align: center;
}

.ten .ten-foot h2 { color: #fff; }
.ten .ten-foot .ten-lead { color: #ffe2e9; }

.entry {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(28px, 8vw, 70px);
	text-align: center;
	background:
		radial-gradient(120% 92% at 50% 40%, #fff 0%, #fdeef1 34%, #f7c8d0 70%, #ef8296 100%);
	transition: opacity 1.3s cubic-bezier(.16,.84,.28,1), transform 1.5s cubic-bezier(.16,.84,.28,1);
}

.entry.is-gone { opacity: 0; transform: translateY(-2%); pointer-events: none; }

.entry .entry-in { max-width: 24ch; width: 100%; }
.entry [hidden] { display: none; }

.entry .entry-kick {
	margin: 0;
	font: 700 clamp(10px, 2.8vw, 12px)/1 var(--font-util);
	letter-spacing: .38em; text-transform: uppercase; color: #a8566a;
	opacity: 0; animation: hh-in 1.1s cubic-bezier(.16,.84,.28,1) .3s forwards;
}

.entry .entry-q {
	display: block;
	margin: clamp(18px, 4vw, 26px) auto 0;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(27px, 8vw, 46px);
	line-height: 1.05;
	letter-spacing: -.012em;
	text-transform: uppercase;
	color: #a8143a;
	opacity: 0; transform: translateY(12px);
	animation: hh-in 1.2s cubic-bezier(.16,.84,.28,1) .7s forwards;
}

.entry .entry-field {
	display: block;
	width: min(100%, 15ch);
	margin: clamp(26px, 6vw, 38px) auto 0;
	padding: 6px 4px 12px;
	border: 0;
	border-bottom: 1px solid #e0a6b2;
	background: transparent;
	font-family: var(--font-head);
	font-size: clamp(30px, 9vw, 48px);
	line-height: 1.1;
	text-align: center;
	color: #a8143a;
	opacity: 0;
	animation: hh-in 1.1s ease 1.2s forwards;
}

.entry .entry-field:focus { outline: 0; border-bottom-color: #e22f57; }
.entry .entry-field::placeholder { color: #e6bcc5; }

.entry .entry-quiet {
	margin: clamp(20px, 4.6vw, 28px) auto 0;
	max-width: 28ch;
	font-family: var(--font-body);
	font-size: clamp(14px, 3.6vw, 15px);
	line-height: 1.5;
	color: #a8566a;
	opacity: 0; animation: hh-in 1s ease 1.8s forwards;
}

.entry .entry-name {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(44px, 15vw, 92px);
	line-height: 1;
	letter-spacing: -.02em;
	color: #a8143a;
	text-shadow: 0 0 40px #fff, 0 0 90px rgba(255, 217, 168, .9);
	opacity: 0; transform: translateY(16px) scale(.97);
	animation: hh-in 1.5s cubic-bezier(.16,.84,.28,1) .1s forwards;
}

.entry .entry-line {
	margin: clamp(26px, 6vw, 40px) auto 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 4.2vw, 20px);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #e22f57;
	opacity: 0;
	animation: hh-in 1.3s ease 1.1s forwards;
}

.entry .entry-past {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 6vw, 42px);
	transform: translateX(-50%);
	border: 0;
	background: transparent;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #b8798a;
	cursor: pointer;
	padding: 10px 14px;
	opacity: 0;
	animation: hh-in 1s ease 2.4s forwards;
}

.entry .entry-past:hover { color: #a8143a; }

@keyframes hh-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.entry *, .entry { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

.years .held { display: grid; gap: 12px; max-width: 460px; margin: 0 auto; text-align: left; }
.years .held:empty { display: none; }

.years .held .card { padding: 20px 22px 16px; }

.years .card-name {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(21px, 5.6vw, 26px);
	line-height: 1.1;
	text-transform: none;
	color: var(--below);
}

.years .card-you {
	margin: 6px 0 0;
	font-family: var(--font-body);
	font-size: clamp(15px, 4vw, 17px);
	line-height: 1.5;
	color: #a8566a;
	white-space: pre-wrap;
}

.years .held .answer { margin-top: 14px; }

.years .out {
	display: block;
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: 700 10px/1 var(--font-util);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #c98d9a;
	cursor: pointer;
}

.years .out:hover, .years .out:focus-visible { color: var(--below); }

.years .moment {
	max-width: 460px;
	margin: clamp(26px, 6vw, 38px) auto 0;
	text-align: left;
}

.years .held:not(:empty) + .moment {
	padding-top: clamp(26px, 6vw, 38px);
	border-top: 1px solid rgba(237, 162, 172, .55);
}

.years .ask { margin: 0 0 clamp(24px, 5.6vw, 32px); }

.years .ask label {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(17px, 4.6vw, 20px);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #6b2038;
}

.years .why {
	margin: 7px 0 0;
	font-family: var(--font-body);
	font-size: clamp(14px, 3.7vw, 15px);
	line-height: 1.5;
	color: #a8566a;
}

.years .ask input {
	display: block;
	width: 100%;
	margin-top: 12px;
	border: 0;
	border-bottom: 2px solid #c25f74;
	border-radius: 0;
	background: rgba(107, 32, 56, .035);
	padding: 12px 10px;
	font-family: var(--font-body);
	font-size: clamp(19px, 5vw, 23px);
	color: #6b2038;
	-webkit-appearance: none;
	appearance: none;
	min-height: 52px;
	transition: border-bottom-color .25s ease, background-color .25s ease;
}

.years .ask input::placeholder {
	color: #b07f8b;
	opacity: 1;
}

.years .ask input:hover { background: rgba(107, 32, 56, .055); }

.years .ask input:focus-visible {
	outline: 0;
	border-bottom-color: #6b2038;
	background: rgba(107, 32, 56, .07);
}

.years .ask .which { margin-top: 12px; flex-wrap: wrap; }
.years .ask .which .w { min-height: 48px; }

.years .answer-live:empty { display: none; }
.years .answer-live { margin: 0 0 clamp(22px, 5vw, 28px); }

.years .moment .add {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 0;
}

.years .moment .add[disabled] {
	opacity: .4;
	cursor: default;
}

.years button.go { border: 0; cursor: pointer; }
.years button.go[hidden] { display: none; }

.years .yours { max-width: 460px; margin: 0 auto; text-align: left; }
.years .yours[hidden] { display: none; }

.years .yours h2 { max-width: none; text-align: left; margin: 0; }
.years .yours .say { margin-left: 0; max-width: none; }

.years .yours label {
	display: block;
	margin-top: clamp(24px, 5.6vw, 32px);
	font-family: var(--font-head);
	font-size: clamp(17px, 4.6vw, 20px);
	line-height: 1.2;
	text-transform: uppercase;
	color: #6b2038;
}

.years .yours input {
	display: block;
	width: 100%;
	margin-top: 12px;
	min-height: 48px;
	border: 0;
	border-bottom: 1px solid var(--dusty, #eda2ac);
	border-radius: 0;
	background: transparent;
	padding: 10px 2px;
	font-family: var(--font-body);
	font-size: clamp(19px, 5vw, 23px);
	color: #6b2038;
	-webkit-appearance: none;
	appearance: none;
}

.years .yours input:focus-visible { outline: 0; border-bottom-color: var(--below); }
.years .yours .go { width: 100%; min-height: 52px; }

.years .hers {
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	color: inherit;
	display: inline;
	text-transform: none;
	letter-spacing: inherit;
	white-space: pre-wrap;
}

.years .hers,
.years .card-name {
	font-family: var(--font-body);
	font-feature-settings: normal;
	font-variant: normal;
}

.years .card-name { font-size: clamp(20px, 5.3vw, 24px); }

.years [data-open-head],
.years .rung--door { scroll-margin-top: 140px; }

.who-held {
	margin: 12px 0 0;
	font: 400 15px/1.5 var(--font-body);
	color: var(--ink-soft);
}

.reach {
	--door:#b81d2a; --below:#e8303f; --pink:#fbcfd3; --dusty:#eda2ac;
	background: radial-gradient(120% 70% at 50% 0%, #fff 0%, #fff4f7 52%, var(--pink) 100%);
	padding: clamp(42px,10vw,84px) 0 clamp(52px,12vw,96px);
}

.reach > .in { max-width: 460px; margin-inline: auto; padding-inline: clamp(20px,5.5vw,46px); }

.reach .its {
	margin: 0 0 clamp(14px,3.2vw,20px);
	font: 700 clamp(11px,3vw,13px)/1.5 var(--font-util);
	letter-spacing: .34em; text-transform: uppercase; color: var(--door);
}

.reach h1 {
	margin: 0;
	font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
	font-size: clamp(29px,8.4vw,50px); line-height: 1.04; color: var(--door);
}

.reach .say {
	margin: clamp(16px,3.6vw,24px) 0 0;
	font-family: var(--font-body); font-size: clamp(17px,4.6vw,20px); line-height: 1.55; color: #6b2038;
}

.reach .quiet { font-size: 15.5px; color: #a8566a; }

.reach .astray {
	margin: clamp(22px,5vw,30px) 0 0;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(255,255,255,.9);
	border: 1px solid var(--dusty);
	font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: #6b2038;
}

.reach .astray b { color: var(--door); }

.reach-form { margin-top: clamp(26px,6vw,36px); }

.reach-form label {
	display: block;
	margin-top: clamp(24px,5.6vw,32px);
	font-family: var(--font-head); font-size: clamp(17px,4.6vw,20px); line-height: 1.2;
	text-transform: uppercase; color: #6b2038;
}

.reach-form .why {
	margin: 7px 0 0;
	font-family: var(--font-body); font-size: clamp(14px,3.7vw,15px); line-height: 1.5; color: #a8566a;
}

.reach-form textarea,
.reach-form input[type=email] {
	display: block; width: 100%; margin-top: 12px;
	border: 0; border-bottom: 1px solid var(--dusty); border-radius: 0;
	background: transparent; padding: 10px 2px;
	font-family: var(--font-body); font-size: clamp(18px,4.8vw,21px); line-height: 1.5; color: #6b2038;
	-webkit-appearance: none; appearance: none; min-height: 48px;
}

.reach-form textarea { resize: vertical; }
.reach-form textarea:focus-visible,
.reach-form input:focus-visible { outline: 0; border-bottom-color: var(--below); }

.reach-form .about { margin: clamp(28px,6vw,38px) 0 0; padding: 0; border: 0; }

.reach-form .about legend {
	padding: 0;
	font-family: var(--font-head); font-size: clamp(17px,4.6vw,20px); line-height: 1.2;
	text-transform: uppercase; color: #6b2038;
}

.reach-form .pickone {
	display: flex; align-items: center; gap: 12px;
	margin-top: 12px; min-height: 48px;
	font-family: var(--font-body); font-size: 16.5px; line-height: 1.45; color: #6b2038;
	text-transform: none;
}

.reach-form .pickone input { accent-color: var(--below); width: 20px; height: 20px; flex: 0 0 auto; }

.reach-form .aside { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reach .go {
	display: inline-block; width: 100%; min-height: 54px;
	margin-top: clamp(30px,6.5vw,40px);
	padding: 16px 32px; border: 0; border-radius: 999px; cursor: pointer;
	font: 700 11px/1 var(--font-util); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
	background: var(--below); color: #fff; text-align: center;
	box-shadow: 0 12px 34px rgba(150,20,60,.24);
}

.reach .onward { margin: clamp(30px,6.5vw,40px) 0 0; }

.ladder .entrance {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	overflow: hidden;
	background: #f7c8d0;
}

.ladder .entrance-arch {
	display: block;
	width: 100%;
	height: auto;

	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center center;
}

.ladder .entrance::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 4%;
	height: 56%;
	width: 3px;
	margin-left: -1.5px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, #fff 18%, #fff 82%, transparent);
	filter: blur(1.4px);
	opacity: .9;
}

.ladder .entrance-said {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: clamp(34px, 9vw, 64px) clamp(22px, 6vw, 48px) clamp(26px, 6.5vw, 48px);
	text-align: center;

	background: linear-gradient(to bottom,
		rgba(247, 200, 208, 0) 0%,
		rgba(247, 200, 208, .34) 26%,
		rgba(247, 200, 208, .82) 62%,
		#f7c8d0 100%);
}

.ladder .entrance-said .its {
	margin: 0 0 clamp(12px, 3vw, 18px);
	font: 700 clamp(11px, 3vw, 13px)/1.5 var(--font-util);
	letter-spacing: .36em;
	text-transform: uppercase;
	color: #a8143a;
}

.ladder .entrance-said h1 {
	margin: 0 auto;
	max-width: 15ch;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(30px, 9.2vw, 62px);
	line-height: 1.02;
	text-transform: uppercase;
	color: #7d0713;

	text-shadow: 0 1px 0 rgba(255, 236, 240, .7), 0 0 22px rgba(255, 236, 240, .55);
}

.ladder .entrance-said .alone {
	margin: clamp(16px, 4vw, 24px) auto 0;
	max-width: 28ch;
	font-family: var(--font-body);
	font-size: clamp(16.5px, 4.4vw, 20px);
	line-height: 1.5;
	color: #8a2038;
}

@media (min-width: 760px) {
	.ladder .entrance-arch { aspect-ratio: 16 / 11; object-position: center 55%; }
	.ladder .entrance-said { padding-bottom: clamp(40px, 5vw, 72px); }
}

.ladder .rung,
.years .rung,
.reach,
.sec,
.ages .age,
.household .in-house {
	position: relative;
	isolation: isolate;
}

.ladder .rung::after,
.years .rung::after,
.sec::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(140% 78% at 50% -10%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(to bottom, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 34%, rgba(122, 12, 34, .05) 100%);
}

.ladder .rung--white::after,
.years .rung--white::after {
	background:
		radial-gradient(140% 78% at 50% -10%, rgba(255, 236, 240, .8) 0%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(to bottom, rgba(255, 246, 248, .9) 0%, rgba(255, 255, 255, 0) 30%);
}

.ladder .rung::before,
.years .rung::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .55) 24%,
		rgba(255, 255, 255, .72) 50%,
		rgba(255, 255, 255, .55) 76%,
		rgba(255, 255, 255, 0) 100%);
}

.arch-band::after,
.ladder .entrance::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(154deg,
		rgba(255, 255, 255, .26) 0%,
		rgba(255, 255, 255, .07) 22%,
		rgba(255, 255, 255, 0) 44%,
		rgba(122, 12, 34, .07) 100%);
}

.arch-band,
.ladder .entrance,
.ages .age {
	position: relative;
	isolation: isolate;
}

.arch-band img,
.ages .age img {

	filter: saturate(1.16) contrast(1.05) brightness(1.06);
}

.ladder h1,
.ladder h2,
.years h1,
.years h2,
.reach h1,
.sec .head,
.ages .age b {
	background-image: linear-gradient(to bottom,
		rgba(255, 255, 255, .34) 0%,
		rgba(255, 255, 255, 0) 46%);
	-webkit-background-clip: text;
	background-clip: text;
}

.ladder .rung--white h1,
.ladder .rung--white h2,
.years .rung--white h1,
.years .rung--white h2,
.reach h1 {
	background-image: none;
}

@media (prefers-reduced-motion: reduce) {
	.ladder .rung::after,
	.years .rung::after,
	.sec::after { transition: none; }
}

.doorpick .doorpick-name {
	margin: 0;
	padding: clamp(22px, 5.5vw, 34px) clamp(22px, 6vw, 46px) clamp(16px, 4vw, 24px);
	background: #fff;
	font: 700 clamp(12px, 3.4vw, 15px)/1.5 var(--font-util);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #a8143a;
	text-align: center;
}

.doorpick .doorpick-name span {
	display: block;
	margin-top: 9px;
	font: 400 15.5px/1.5 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: #a8566a;
}

.doorpick .entrance + .doorpick-name { margin-top: 0; }

@media (max-width: 759px) {
	.bar nav.rites-row {
		overflow-x: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bar nav.rites-row ul {
		flex-wrap: wrap;
		justify-content: center;
		white-space: normal;
		gap: clamp(10px, 3.4vw, 18px) clamp(14px, 4.4vw, 24px);
		padding-inline: clamp(14px, 4vw, 22px);
	}

	.bar nav.rites-row li { display: inline-flex; }

	.bar nav.rites-row a {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
	}
}

.ladder .faces {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4.4;
	overflow: hidden;
	background: #7d0713;
}

.ladder .faces-field {
	position: absolute;
	inset: -6% -2%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	gap: 3px;
	z-index: 0;
}

.ladder .faces-field .lane {
	display: grid;
	gap: 3px;
	align-content: start;
	will-change: transform;
	animation: honour-her-drift 64s linear infinite;
}

@keyframes honour-her-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -50%, 0); }
}

.ladder .faces-field .lane--0 { animation-duration: 76s; margin-top: -7%; }
.ladder .faces-field .lane--1 { animation-duration: 61s; animation-direction: reverse; margin-top: -22%; }
.ladder .faces-field .lane--2 { animation-duration: 88s; margin-top: -13%; }

.ladder .faces-field img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 28%;
	filter: saturate(1.06) contrast(1.03);
}

.ladder .faces-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;

	background:
		radial-gradient(120% 76% at 50% 6%, rgba(255, 236, 242, .34) 0%, rgba(255, 236, 242, 0) 60%),
		linear-gradient(to bottom,
			rgba(240, 84, 235, .20) 0%,
			rgba(226, 47, 87, .34) 32%,
			rgba(214, 32, 84, .44) 66%,
			rgba(190, 22, 72, .60) 100%);
	mix-blend-mode: multiply;
}

.ladder .faces::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(96% 58% at 50% 30%, rgba(255, 146, 244, .16) 0%, rgba(255, 146, 244, 0) 70%),
		linear-gradient(to bottom, rgba(255, 236, 240, .10) 0%, rgba(255, 236, 240, 0) 26%);
}

.ladder .faces-said {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: clamp(80px, 22vw, 180px) clamp(24px, 7vw, 56px) clamp(34px, 9vw, 64px);
	text-align: center;
	background: linear-gradient(to bottom,
		rgba(161, 11, 26, 0) 0%,
		rgba(168, 20, 58, .34) 38%,
		rgba(178, 18, 62, .78) 76%,
		rgba(184, 20, 66, .94) 100%);
}

.ladder .faces-said .its {
	margin: 0 0 clamp(14px, 3.4vw, 20px);
	font: 700 clamp(11px, 3vw, 13px)/1.5 var(--font-util);
	letter-spacing: .38em;
	text-transform: uppercase;
	color: #ffc9d6;
}

.ladder .faces-said h1 {
	margin: 0 auto;
	max-width: 16ch;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(28px, 8.4vw, 56px);
	line-height: 1.05;
	text-transform: uppercase;
	color: #fff;
	background-image: none;
}

.ladder .faces-said .alone {
	margin: clamp(16px, 4vw, 24px) auto 0;
	max-width: 26ch;
	font-family: var(--font-body);
	font-size: clamp(17px, 4.6vw, 21px);
	line-height: 1.5;
	color: #ffd7e0;
}

@media (min-width: 760px) {
	.ladder .faces { aspect-ratio: 16 / 10; }
	.ladder .faces-field { grid-template-columns: repeat(5, 1fr); }
	.ladder .faces-field .lane--3 { animation-duration: 70s; animation-direction: reverse; }
	.ladder .faces-field .lane--4 { animation-duration: 94s; }
}

@media (prefers-reduced-motion: reduce) {
	.ladder .faces-field .lane { animation: none; }
	.ladder .faces-field { inset: 0 -2%; }
}

.bar nav.rites-row {
	-webkit-mask-image: none;
	mask-image: none;
	overflow-x: visible;
}

.bar nav.rites-row ul {
	flex-wrap: wrap;
	justify-content: center;
	white-space: normal;
}

.ladder .rung--top {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 92% at 50% -14%, #fff 0%, #fff6f8 34%, #ffe6ee 62%, #ffd2e0 100%);
	color: #6b2038;
	padding: clamp(78px, 19vw, 190px) 0 clamp(70px, 17vw, 170px);
}

.ladder .rung--top::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -32%;
	width: min(150%, 1300px);
	aspect-ratio: 1;
	transform: translateX(-50%);
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,236,244,.6) 34%, rgba(255,214,230,0) 68%);
}

.ladder .rung--top .its {
	margin: 0 0 clamp(20px, 4.4vw, 32px);
	font: 700 clamp(11px, 3vw, 14px)/1.5 var(--font-util);
	letter-spacing: .4em; text-transform: uppercase; color: #c4245a;
}

.ladder .rung--top h1 {
	margin: 0 auto; max-width: 13ch;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(38px, 11vw, 96px);
	line-height: 1.02;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #a8143a;

	background-image: none;
}

.ladder .rung--top .alone {
	margin: clamp(22px, 4.6vw, 32px) auto 0; max-width: 26ch;
	font-family: var(--font-body);
	font-size: clamp(18px, 4.8vw, 24px);
	line-height: 1.5; color: #8a2038;
}

.ladder .rung h1,
.ladder .rung h2,
.years .rung h1,
.years .rung h2 {
	font-weight: 700;

}

.ladder .rung--totoki h1, .ladder .rung--totoki h2,
.ladder .rung--mirror h1, .ladder .rung--mirror h2,
.years .rung--door h1,    .years .rung--door h2 {

}

.ladder .rung--stages {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(140% 100% at 50% -30%, rgba(255,255,255,.92) 0%, rgba(255,236,244,.6) 38%, rgba(255,214,230,0) 74%),
		linear-gradient(to bottom, #ffe4ee 0%, #ffd3e1 100%);
	color: #6b2038;
	padding: clamp(34px, 7vw, 66px) 0 0;
}

.ladder .rung--stages .its {
	margin: 0;
	font: 700 clamp(11px, 3vw, 14px)/1.5 var(--font-util);
	letter-spacing: .4em; text-transform: uppercase; color: #c4245a;
}

.ladder .rung--stages h1 {
	margin: 0 auto; max-width: 16ch;
	font-family: var(--font-head); font-weight: 700;
	font-size: clamp(30px, 8vw, 66px); line-height: 1.06;
	text-transform: uppercase; color: #a8143a;

	background-image: none;
}

.ladder .rung--stages .alone {
	margin: clamp(20px, 4.4vw, 30px) auto 0; max-width: 30ch;
	font-family: var(--font-body); font-size: clamp(16px, 4.2vw, 19px);
	line-height: 1.5; color: #b07d8c;
}

.stages {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin: clamp(30px, 6vw, 54px) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) { .stages { grid-template-columns: repeat(4, 1fr); } }

.stages li { position: relative; background: var(--wash); overflow: hidden; }

.stages a {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	text-decoration: none;
	color: #fff;
}

.stages img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.12) contrast(1.04) brightness(1.04);
	transition: transform 1.1s var(--float-ease);
}

.stages a:hover img { transform: scale(1.04); }

.stages a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wash);
	mix-blend-mode: multiply;
	opacity: .2;
}

.stages a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(60, 6, 22, .62) 0%, rgba(60, 6, 22, .1) 40%, rgba(60, 6, 22, 0) 66%);
}

.stage-said {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(5px, 1vw, 9px);
	padding: clamp(18px, 3.4vw, 32px) clamp(12px, 2vw, 22px);
	text-align: center;
}

.stage-age {
	font-family: var(--font-head); font-weight: 700;
	font-size: clamp(24px, 4.4vw, 44px); line-height: 1;
	text-transform: uppercase; letter-spacing: -.01em;
	color: #fff;

	text-shadow: 0 2px 24px rgba(60, 6, 22, .6);
}

.stage-rite {
	font: 700 clamp(10px, 1.5vw, 12px)/1.5 var(--font-util);
	letter-spacing: .28em; text-transform: uppercase; color: #fff; opacity: .9;
	text-shadow: 0 1px 16px rgba(60, 6, 22, .7);
}

.sec .head,
.sec h1, .sec h2,
.written h2, .read h2, .reading .head,
.letter-day h1, .letter-day .ld-lift,
.beats h1, .beats h2,
.circle h1, .circle h2,
.craft h1, .craft h2,
.worlds h1, .worlds h2,
.reach h1,
.household .who-name {
	font-weight: 700;

}

.sec .go, .sec .begin button, .sec button[type="submit"],
.years .go, .reach .go, .doorpick .go,
.letter-day .ld-go, .the-gift .go, .circle .go {
	position: relative;
	display: inline-block;
	padding: 0 0 13px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(13px, 1.7vw, 18px);
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--red-ink, #85030f);
	cursor: pointer;

	transition: color .35s var(--float-ease);
}

.sec .go::after, .sec .begin button::after, .sec button[type="submit"]::after,
.years .go::after, .reach .go::after, .doorpick .go::after,
.letter-day .ld-go::after, .the-gift .go::after, .circle .go::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: currentColor;
	opacity: .42;
	transition: opacity .35s ease, transform .45s var(--float-ease);
	transform-origin: left;
}

.sec .go:hover::after, .years .go:hover::after, .reach .go:hover::after,
.sec button[type="submit"]:hover::after, .doorpick .go:hover::after {
	opacity: 1;
	transform: scaleY(2.4);
}

.sec--said .go, .rung--totoki .go, .rung--mirror .go,
.rung--door .go, .years .rung--door .go, .reach .go { color: #fff; }

.sec, .letter-day .ld-open, .circle .band, .craft .band {
	position: relative;
	isolation: isolate;
}

.sec::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(130% 74% at 50% -12%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 62%);
}

.arch-band img, .window .pane, .sec img:not([class*="mark"]):not([class*="icon"]) {
	filter: saturate(1.1) contrast(1.04) brightness(1.03);
}

.bar .mark-word, .bar .site-name, .bar > .in > a:first-child {

}

.ladder .rung--needs {
	background: linear-gradient(to bottom, #ffd3e1 0%, #fff 22%, #fff 100%);
	color: #6b2038;
	padding: clamp(60px, 14vw, 130px) 0 clamp(50px, 12vw, 110px);
}

.ladder .rung--needs .its {
	margin: 0 0 clamp(16px, 3.4vw, 24px);
	font: 700 clamp(11px, 3vw, 13px)/1.5 var(--font-util);
	letter-spacing: .4em; text-transform: uppercase; color: #e22f57;
}

.ladder .rung--needs h2 {
	margin: 0 auto; max-width: 18ch;
	font-family: var(--font-effect); font-weight: 700;
	font-size: clamp(28px, 6.4vw, 58px); line-height: 1.14;
	letter-spacing: -.008em; text-transform: none;
	color: #e22f57;
background-image: none;
}

.ladder .rung--needs .alone {
	margin: clamp(20px, 4.2vw, 30px) auto 0; max-width: 34ch;
	font-family: var(--font-body); font-size: clamp(17px, 4.4vw, 21px);
	line-height: 1.55; color: #8a2038;
}

.needs {
	display: grid;
	gap: clamp(14px, 2.4vw, 22px);
	max-width: 1180px;
	margin: clamp(40px, 8vw, 74px) auto 0;
	padding-inline: clamp(18px, 4vw, 34px);
}

@media (min-width: 820px) { .needs { grid-template-columns: repeat(4, 1fr); } }

.needs article {
	position: relative;
	padding: clamp(26px, 3.4vw, 38px) clamp(22px, 2.6vw, 30px) clamp(30px, 3.6vw, 40px);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(150, 20, 60, .12);
	overflow: hidden;
}

.needs article::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 5px;
	background: var(--wash);
}

.need-age {
	margin: 0 0 clamp(12px, 1.6vw, 18px);
	font: 700 clamp(10px, 1.3vw, 12px)/1.6 var(--font-util);
	letter-spacing: .26em; text-transform: uppercase; color: #c4245a;
}

.need-age span { display: block; margin-top: 5px; color: #b07d8c; }

.needs h3 {
	margin: 0;
	font-family: var(--font-effect); font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px); line-height: 1.22;
	letter-spacing: -.004em; text-transform: none; color: #a8143a;
}

.need-said {
	margin: clamp(12px, 1.8vw, 18px) 0 0;
	font-family: var(--font-body); font-size: clamp(15.5px, 1.5vw, 17px);
	line-height: 1.58; color: #7d4a58;
}

.ladder .rung--letter {
	background: linear-gradient(to bottom, #ffd3e1 0%, #fff8fa 16%, #fff 100%);
	padding: clamp(60px, 14vw, 140px) 0 clamp(56px, 13vw, 130px);
}

.letter-in {
	max-width: 34rem;
	margin: 0 auto;
	padding-inline: clamp(24px, 7vw, 40px);
	text-align: left;
}

.letter-beat + .letter-beat { margin-top: clamp(46px, 10vw, 88px); }

.letter-lift {
	margin: 0 0 clamp(18px, 3.6vw, 26px);
	font-family: var(--font-effect);
	font-weight: 700;
	font-size: clamp(24px, 6vw, 38px);
	line-height: 1.18;
	letter-spacing: -.008em;
	color: #e22f57;
}

.letter-line {
	margin: 0 0 clamp(16px, 3.4vw, 22px);
	font-family: var(--font-body);
	font-size: clamp(17.5px, 4.6vw, 20px);
	line-height: 1.66;
	color: #4f1526;
}

.letter-line:last-child { margin-bottom: 0; }

.letter-line em {
	display: block;
	margin: clamp(22px, 5vw, 32px) 0;
	font-family: var(--font-effect);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(19px, 5vw, 24px);
	line-height: 1.42;
	color: #a8143a;
}

.rung--manifesto {
	background: #ffffff;
	padding: clamp(72px, 16vh, 160px) clamp(20px, 6vw, 64px);
}

.mf {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
	color: #6b2038;
}

.mf-kick {
	margin: 0 0 clamp(30px, 6vh, 54px);
	font: 600 12px/1 var(--font-body, Georgia, serif);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #b5326b;
}

.mf-open {
	margin: 0 0 clamp(28px, 5vh, 46px);
	font-family: var(--font-head, Georgia, serif);
	font-size: clamp(27px, 5.6vw, 46px);
	line-height: 1.2;
	font-weight: 400;
}

.mf-verse,
.mf-strike,
.mf-lift,
.mf-close {
	margin: 0 0 clamp(26px, 4.6vh, 42px);
	font-family: var(--font-body, Georgia, serif);
	font-size: clamp(18px, 2.9vw, 23px);
	line-height: 1.62;

	text-wrap: balance;
}

.mf-strike {
	font-family: var(--font-head, Georgia, serif);
	font-size: clamp(21px, 3.6vw, 30px);
	line-height: 1.32;
	color: #a10b1a;
}

.mf-lift {
	font-family: var(--font-head, Georgia, serif);
	font-size: clamp(25px, 5vw, 42px);
	line-height: 1.22;
	color: #c4003a;
}

.mf-close {
	margin-bottom: 0;
	font-family: var(--font-head, Georgia, serif);
	font-size: clamp(23px, 4.4vw, 36px);
	line-height: 1.3;
}

.bar .way,
.bar .way:hover,
.bar .way:focus-visible {
	padding: 0 0 4px;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	color: #b81d2a;
	border-bottom: 1.5px solid rgba(232, 48, 63, .55);
	transition: color .35s var(--float-ease), border-color .35s var(--float-ease);
}

.bar .way:hover,
.bar .way:focus-visible {
	color: #e8303f;
	border-bottom-color: #e8303f;
}

.foot .rights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	letter-spacing: .12em;
}

.foot .rights a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 224, 244, .4);
}

.foot .rights a:hover,
.foot .rights a:focus-visible { color: #fff; border-bottom-color: #fff; }

.foot .rights a {
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

@media (max-width: 619px) {
	.bar-in {
		align-items: center;
		text-align: center;
		gap: 6px;
		padding-bottom: 4px;
	}

	.bar .wordmark-said {
		max-height: 20px;
		overflow: hidden;
		transition: max-height .4s var(--float-ease), opacity .4s var(--float-ease), margin .4s var(--float-ease);
	}

	.bar.is-held .wordmark-said {
		max-height: 0;
		opacity: 0;
		margin-top: 0;
	}

	.bar nav.rites-row ul {
		gap: 6px clamp(14px, 4.4vw, 24px);
	}

	.bar nav.rites-row a { min-height: 30px; }
}