@font-face {
	font-family: "Galaxie Copernicus Book";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../assets/galaxiecopernicus-book.woff2) format("woff2");
}

@font-face {
	font-family: Maax;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../assets/maax-regular.woff2) format("woff2");
}

@font-face {
	font-family: "Maax Medium";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../assets/maax-medium.woff2) format("woff2");
}

@font-face {
	font-family: "Maax Bold";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../assets/maax-bold.woff2) format("woff2");
}

@font-face {
	font-family: "Maax Black";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(../../assets/maax-black.woff2) format("woff2");
}

/* Typography
--------------------------------------------- */
body,
button,
input,
optgroup,
select,
textarea {
	font-size: 100%;
	line-height: inherit;
	font-family: var(--font-family-sans-serif);
	color: var(--color-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: var(--line-height-heading);
	color: var(--color-text);
}

h1 {
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: var(--font-size-18);
	letter-spacing: -1.6px;
	margin: 0 0 0.5em;
}

h2 {
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: var(--font-size-14);
	letter-spacing: -1px;
	margin: 0 0 0.5em;
}

h3 {
	font-family: "Maax Bold";
	font-weight: 400;
	font-size: var(--font-size-10);
	letter-spacing: -0.5px;
	margin: 0 0 0.5em;
}

h4 {
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: var(--font-size-06);
	letter-spacing: -0.4px;
	margin: 0 0 0.5em;
}

.page-title {
	margin: 0 0 1rem;
}

/* Kodansha Black — global display-weight utility. Pairs the heavy Maax Black
   face with negative tracking to tighten the rendering. Apply to headings or
   any element that should read as the brand's display voice. Size lives on
   the host element so the tracking scales (em-based) automatically. */
.kodansha-black {
	font-family: "Maax Black";
	font-weight: 400;
	letter-spacing: -0.04em;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--color-gray-light);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--color-text-2);
	cursor: help;
}

mark,
ins {

	/* Soft yellow highlight (Underscores default #fff9c0). Illustration-class
	   color — not a UI chrome token, exempt from grayscale rule per DESIGN.md. */
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

.kodansha--header--title {
	margin: 0 auto 0.5rem;
	font-family: "Maax Bold";
	font-size: var(--font-size-14);
	font-style: normal;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -1.5px;
}

.kodansha--header--title--big {
	margin: 0 auto 0.5rem;
	font-family: "Maax Bold";
	font-size: var(--font-size-18);
	font-style: normal;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -4.25px;
}

.kodansha--smallcaps {
	text-transform: uppercase;
	font-size: 0.75rem;
	font-family: "Maax Medium";
	letter-spacing: 2px;
	font-style: normal;
	font-weight: 400;
}

.kodansha--smallcaps--cta-link {
	color: var(--color-black);
	text-decoration-color: currentColor;
	text-underline-offset: 0.3rem;
	text-decoration-line: underline;
	text-decoration-skip-ink: auto;
	text-decoration-style: solid;
	text-decoration-thickness: 2px;
	transition: opacity 0.2s ease;
	width: fit-content;
	padding-bottom: 0.25rem;
}

.kodansha--lead {
	font-size: var(--font-size-07);
	line-height: var(--line-height);
}

.kodansha--tag {
	background: var(--color-gray-light);
	padding: 4px 12px;
	text-transform: uppercase;
	font-size: 0.813rem;
	color: var(--color-gray-dark);
	letter-spacing: 2px;
	font-family: "Maax Medium";
	font-weight: 400;
}

.kodansha--label {
	font-size: 1.25rem;
	font-family: "Maax Medium";
	font-weight: 400;
}

/* Responsive Typography
--------------------------------------------- */

/* Tablet landscape and below */
@media (max-width: 1024px) {

	.kodansha--header--title--big {
		font-size: var(--font-size-16);
		letter-spacing: -3px;
	}

	h1 {
		font-size: var(--font-size-16);
		letter-spacing: -1.2px;
	}

	h2 {
		font-size: var(--font-size-12);
		letter-spacing: -0.8px;
	}
}

/* Tablet portrait and below */
@media (max-width: 768px) {

	.kodansha--header--title {
		font-size: var(--font-size-12);
		letter-spacing: -1.2px;
	}

	.kodansha--header--title--big {
		font-size: var(--font-size-13);
		letter-spacing: -2px;
	}

	h1 {
		font-size: var(--font-size-14);
		letter-spacing: -1px;
	}

	h2 {
		font-size: var(--font-size-11);
		letter-spacing: -0.6px;
	}

	h3 {
		font-size: var(--font-size-08);
	}
}

/* Mobile */
@media (max-width: 480px) {

	.kodansha--header--title {
		font-size: var(--font-size-10);
		letter-spacing: -1px;
	}

	.kodansha--header--title--big {
		font-size: var(--font-size-12);
		letter-spacing: -1.5px;
	}

	h1 {
		font-size: var(--font-size-12);
		letter-spacing: -0.8px;
	}

	h2 {
		font-size: var(--font-size-10);
		letter-spacing: -0.5px;
	}
}