@font-face {
	font-family: "Phyrexian Regular";
	src: url("fonts/Phyrexian-Regular.ttf") format("truetype");
	/* block: the encoded Latin string must never flash before the glyphs load */
	font-display: block;
}

:root {
	--ink: #0a0a0a;
	--bone: #ece8df;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
	background: var(--ink);
	color: var(--bone);
}

body {
	overflow: hidden;
}

.defs {
	position: absolute;
}

main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Phyrexian reads top to bottom, lines left to right. */
.phyrexian {
	margin: 0;
	font-family: "Phyrexian Regular";
	font-weight: normal;
	font-size: 5.6vh;
	font-size: 5.6dvh;
	line-height: 1;
	writing-mode: vertical-lr;
	white-space: nowrap;
	filter: url(#glyph-ink);
}

/* Wizards Fan Content Policy disclaimer: kept in the markup for screen
   readers and crawlers, but the page itself shows only the phrase. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Hidden link to /checklist/ over the second word (write-on.js). It must look
   like nothing: no cursor, no tap flash, no focus ring. */
.egg {
	fill: transparent;
	cursor: inherit;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

/* Pen-stroke write-on (write-on.js); the pen paths are a mask over the glyphs. */
.writing .phyrexian {
	visibility: hidden;
}

.phyrexian.drawn svg {
	display: block;
}

.pen {
	fill: none;
	stroke: #fff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
	animation: pen var(--d) var(--e, linear) var(--t) both;
}

@keyframes pen {
	0% { stroke-dashoffset: 1; opacity: 0; }
	2% { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

.inked {
	fill: var(--bone);
}

.final {
	fill: var(--bone);
	opacity: 0;
	animation: fade var(--fade, .35s) ease var(--end) both;
}

@keyframes fade {
	to { opacity: 1; }
}