@layer Page, Content, Editing;

@import "../JP2526-PageCommon.css" layer(Page);
@import "TokyoNewYear26-heading.css" layer(Content);

@layer Content {

	:root {
		--color-background_dark: #181818;
		--themecolor-day-back: #F0F0F0;
		--themecolor-day-fore: #101010;
		--themecolor-dusk-back: #B8B4B0;
		--themecolor-dusk-fore: #000000;
		--themecolor-night-back: #383842;
		--themecolor-night-fore: #D0D0B0;
		--themecolor-night-panel-back: #484852;
		--themecolor-night-panel-fore: #C0C0A0;
		--themecolor-Japan_red: #BC002D;
		--themecolor-Japan_white: #FFFFFF;
		--themecolor-Japan_sakura: #FFB6C5;
	}

	body {
		min-width: 20rem;
		contain: content;
	}

	figure {
		border: none;
		contain: content;

		& > figcaption {
			display: none;
		}

		& img {
			aspect-ratio: auto;
			user-select: none;
		}

		& video {
			user-select: none;
		}

		& svg {
			max-width: 100%;
			height: auto;
		}
	}

	body,
	div.page {
		&[data-colortheme="neutral"] {
			background-color: var(--themecolor-day-back);
			color: var(--themecolor-day-fore);
			stroke: var(--themecolor-day-fore);
		}

		&[data-colortheme="dusk"] {
			background: var(--themecolor-dusk-back);
			color: var(--themecolor-dusk-fore);
			border-color: var(--themecolor-dusk-fore);
			stroke: var(--themecolor-dusk-fore);
		}

		&[data-colortheme="night"] {
			background: var(--themecolor-night-back);
			color: var(--themecolor-night-fore);
			border-color: var(--themecolor-night-fore);
			stroke: var(--themecolor-night-fore);
			fill: var(--themecolor-night-fore);
		}
	}

	nav {
		font-size: 1.2rem;
		padding: 0.5em 1em;
		inline-size: fit-content;
		margin-inline: auto;
		user-select: none;
		contain: content;

		a {
			text-decoration: none;
			color: inherit;

			&:hover,
			&:focus {
				outline-width: 0.2em;
				outline-style: dashed;
				outline-color: var(--themecolor-Japan_red);
				outline-offset: 0.1em;
			}

			&:active {
				outline-width: 0.1em;
				outline-style: solid;
				outline-color: var(--themecolor-Japan_red);
				outline-offset: 0.1em;
			}
		}

		span {
			color: inherit;
		}
	}

	nav.chain {
		padding-inline: clamp(2ch, 5%, 3ch);
		margin-block-end: 10rem;

		&:has(+ div.page) {
			margin-block-end: 3rem;
		}

		a.past {
			opacity: 0.7;
		}

		span.current {
			font-weight: bold;
			border-width: 0.2em;
			border-style: solid;
		}
	}

	nav.chain.parts {
		margin-block-start: 5rem;

		& > a,
		& > span {
			display: inline flow-root;
			line-height: 1.8;
			padding: 0.1em 0.9em;
			border-width: 0.1em;
			border-style: solid;
			border-radius: 0.1em;
			margin-block: 0.3em;
		}

	}

	nav.chain.pages {

		& > a,
		& > span {
			display: inline flow-root;
			line-height: 1.0;
			padding: 0.1em 0.3em;
			border-radius: 50%;
		}
	}

	nav.next.page {
		margin-block-start: 25rem;

		& > a {
			display: inline flow-root;
			inline-size: 4.0em;
			block-size: 4.0em;
			border-radius: 50%;

			span {
				display: inline flow-root;
				font-size: 300%;
				inline-size: 1.2em;
				block-size: 1.2em;
				text-align: center;
				line-height: 1.0;
				border-width: 0.2rem;
				border-style: solid;
				border-radius: 50%;
			}

			svg {
				fill: none;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
		}
	}

	nav.next.part {
		margin-block-start: 35em;

		& > a {
			display: block grid;
			grid-template-columns: 8em 1em;
			column-gap: 0.7em;
			padding: 0.7em 0.5em 0.7em 1.2em;
			border: 0.1em solid;
			border-radius: 0.1em;
			align-items: center;

			& > p {
				line-height: 1.0;
				margin-block: 0;
				white-space-collapse: collapse;

				& > span:first-of-type {
					line-height: 1.15;
				}

				& > span:last-of-type {
					font-size: 130%;
					font-weight: bold;
					line-height: 1.35;
				}
			}

			& > svg {
				max-width: 100%;
				fill: none;
			}

			&:active {
				& > svg {
					stroke: var(--themecolor-Japan_red);
					fill: var(--themecolor-Japan_red);
				}
			}
		}
	}

	#atcTokyoNewYear26 {
		font-family: 'Courier New', Courier, monospace;
		font-style: normal;
		font-size: 1rem;
		font-weight: normal;
		line-height: 2.0;
		text-align: start;
		margin-block-end: max(62lvh, 10rem);
		border-color: inherit;
		contain: content;

		div.page {
			contain: content;
		}

		figure.hero {
			width: 100%;
			max-width: 138rem;
			margin-inline: auto;
			aspect-ratio: 3.0 / 1.0;
			min-height: 38lvh;

			& > img:only-of-type {
				display: block flow-root;
				width: 100%;
				height: 100%;
				object-fit: cover;
				mask-image: linear-gradient(to bottom, black 97%, transparent);

				@media ((aspect-ratio>6) or (width>138rem)) {
					mask-image: linear-gradient(to bottom, black 97%, transparent), linear-gradient(to right, transparent, black 3%, black 97%, transparent);
					mask-composite: intersect;
				}
			}
		}

		#fgrPrologueHero {
			min-height: 62lvh;
			background-color: var(--color-background_dark);
			container-type: size;

			& > div:only-of-type {
				display: block grid;
				gap: 0.5rem;
				padding: 0.5rem;

				& > img {
					display: block flow-root;
					object-fit: cover;
					width: 100%;
					height: 100%;

					&:nth-child(1) {
						grid-area: p1;
					}

					&:nth-child(2) {
						grid-area: p2;
					}

					&:nth-child(3) {
						grid-area: p3;
					}
				}

				@container (aspect-ratio>=1.2) {
					grid-template-areas: "p1 p2 p3";
					grid-template-columns: 1fr 1fr 1fr;
					grid-template-rows: calc(100cqh - 1.00rem);
				}

				@container (0.6<=aspect-ratio<1.2) {
					grid-template-areas:
						"p1 p2"
						"p1 p3";
					grid-template-rows: repeat(2, calc(50cqh - 0.75rem));
					grid-template-columns: 19fr 31fr;
				}

				@container (aspect-ratio<0.6) {
					grid-template-areas:
						"p1"
						"p2"
						"p3";
					grid-template-rows: repeat(3, calc(33.33cqh - 0.66rem));
				}
			}
		}

		& figure:not(.hero) {
			inline-size: fit-content;
			margin-inline: auto;
			margin-block: 3em;

			& > img {
				display: block flow-root;
				max-width: 100%;
				margin-inline: auto;
				block-size: auto;
			}

			& > div.desc {
				font-size: 80%;
				inline-size: min(50em, 80%);
				margin-inline: auto 5%;
				padding-block-start: 0.5em;

				& p {
					line-height: 1.35;
					margin-block: 1.0em;
				}

				& p:first-of-type {
					font-weight: bolder;
				}
			}
		}

		& figure.photo {
			margin-block: 6em 5em;

			& > img {
				mask-image: linear-gradient(to bottom, transparent, black 2%, black 98%, transparent);
			}
		}

		h2 {
			font-size: 175%;
			margin-block: 5em 3em;
			text-align: center;
		}

		h3 {
			font-size: 150%;
			margin-block: 2.0em 1.0em;
		}

		& p {
			white-space-collapse: preserve-spaces;
			white-space: pre-wrap;

			& u {
				text-decoration-color: #606060;
			}
		}

		& div.H {
			max-width: 40em;
			margin-inline: auto;
			padding-inline: clamp(1ch, 5%, 2ch);

			& > div.M {
				box-sizing: border-box;
				max-width: min(32em, 90%);
				margin-inline: auto;
				margin-block: 1.5em;
			}

			& > div.Q {
				box-sizing: border-box;
				max-width: min(28em, 90%);
				margin-inline: auto 0;
			}
		}

		& div.D {
			padding-inline: 2em;
			border: 0.05em dashed;
			border-radius: 1em;
		}

		& .sm {
			font-size: 70%;
		}

		& span[lang="ja"].sm {
			font-size: 70%;

			&::selection {
				background-color: var(--themecolor-Japan_sakura);
			}
		}

		p,
		p *,
		math,
		h1,
		h2,
		h3 {
			user-select: text;

			&::selection {
				background-color: var(--themecolor-Japan_red);
				color: var(--themecolor-Japan_white);
			}
		}

		p.featured {
			font-size: 300%;
			text-align: center;
			user-select: none;

			&.larger {
				font-size: 500%;
			}
		}

		q.direct {
			quotes: '‘' '’';
		}

		hr {
			border: none;

			&.l1 {
				margin-block: 1em 2em;
			}

			&.l2 {
				margin-block: 3em 5em;
			}

			&.l3 {
				margin-block: 5em 8em;
			}
		}

	}

	#hgTokyoNewYear26 {
		display: block flow-root;
		box-sizing: content-box;
		font-size: 1rem;
		max-width: 50rem;
		padding-inline: clamp(1ch, 8%, 5ch);
		margin-inline: auto;
		container-type: inline-size;
		margin-block: 2em 2em;
		user-select: none;

		& * {
			user-select: none;
		}

		& > footer {
			font-size: 150%;
			margin-inline-end: 1em;

			@container (width<25rem) {
				font-size: 6.0cqw;
			}
		}
	}

	#h1TokyoNewYear26 {
		font-size: 200%;
		margin-block-end: 2em;
	}

	#pAuthor {
		font-size: 100%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 2em 1.5em;

		& > span {
			font-family: monospace;
			font-size: 80%;
		}

		& > u {
			font-family: monospace;
			font-style: italic;
			font-weight: bold;
			font-size: 150%;
			text-decoration: underline solid;
			text-underline-offset: 0.1em;
		}
	}

	#pContextTime {
		font-family: monospace;
		font-size: 100%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 1em 0.5em;
	}

	#pLastUpdate {
		font-family: monospace;
		font-size: 70%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 0;

		& > span:nth-of-type(1) {
			font-size: 80%;
		}
	}

	#fgrEmojiTokyoTower {

		& > div:first-of-type {
			display: block flow-root;
			width: max-content;
			text-align: center;
			padding: 2em 1em;
			margin-inline: auto;
			border: 0.2em double;

			& > div {
				line-height: 1.3;
				user-select: all;

				&::selection {
					background-color: var(--themecolor-Japan_sakura);
					color: var(--themecolor-Japan_white);
				}

				&:first-of-type {
					font-size: 12em;
				}

				&:last-of-type {
					font-size: 2em;
				}
			}

			& > hr {
				border: 0.05em solid;
				margin-inline: 1em;
				margin-block: 0em 1em;
				color: inherit;
			}
		}

		& > div.desc {
			inline-size: 30em;
			margin-inline: auto;
		}
	}

	#atcQuiz {
		display: block flow-root;
		padding-inline: clamp(1ch, 5%, 4ch);
		border: 0.1em solid;
		padding-block-start: 3em;
	}

	#atcQuizAnswer {
		display: block flow-root;
		padding-inline: clamp(1ch, 5%, 4ch);
		border: 0.1em solid;
		padding-block: 3em 5em;

		figure.illustration {
			inline-size: 100%;
		}

		figure.mathexps {
			inline-size: fit-content;
			max-inline-size: 100%;
			margin-inline: auto;
			overflow-x: auto;
			line-height: 4.0;
		}

		svg {
			user-select: none;
		}

		u {
			font-family: math;
			text-decoration: none;
			padding-inline: 0.2em;
		}

		article {
			margin-block-start: 4em;

			h1 {
				font-size: 120%;
			}
		}
	}

	div.page {
		content-visibility: hidden;
	}

}

@layer Editing {
	nav {

		a.editing,
		span.editing {
			border-style: dotted;
			opacity: 0.2;
		}
	}
}