@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");
}

/* 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;
}

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: #eee;
	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 #666;
	cursor: help;
}

mark,
ins {
	background: var(--color-white)9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

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

.kodansha--header--title--big {
	margin: 0 auto .5rem;
	font-family: "Maax Bold";
	font-size: var(--font-size-18);
	font-style: normal;
	font-weight: 400;
	line-height: 90%;
	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;
	text-transform: uppercase;
}

.kodansha--smallcaps--cta-link {
	color: var(--color-black);
	text-decoration-color: currentColor;
	text-underline-offset: .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;
	border-radius: 4px;
	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;
	}
}