@charset "UTF-8";

/* Measure for measure */

a[data-note] {
	position: relative;
}

a[data-note]::after {
	bottom: 100%;
	content: attr(data-note);
	left: 50%;
	max-width: 25ch; /* Brevity. Try it. */
	padding: 0.5ch 1ch;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	width: max-content;
	z-index: 2;
}

address { /* I’ve got mail */
	margin-block: 1lh;
}

body {
	margin: 0 auto;
	max-width: 85ch;
	min-height: 100dvh;
	padding: 2lh 1rem;
}

details ol {
	margin-top: 0.5lh;
}

dt {
	margin-block-start: 1lh;
}

figcaption {
	margin-top: 1lh;
}

figure {
	margin: 1lh 0;
}

figure img {
	margin: 0 auto;
}

.floppydisk {
	margin-top: 1lh;
	text-align: center;
}

.date {
	margin-top: 1lh;
	text-align: right;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

nav {
	margin: 1lh 0;
}

/* Architecture headache */

nav a[data-note]::after {	
	bottom: auto;
	left: 100%;
	margin-left: 1.5ch;
	max-width: 30ch;
	top: 50%;
	transform: translateY(-50%);
}

nav a[data-note]::before {
	left: 100%;
	margin-left: 0.5ch;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

li.starcatcher-anya {
	position: relative;
	padding-left: 2ch;
}

li.starcatcher-anya::before {
	left: 0;
	position: absolute;
}

.tagline {
	margin: 0 0 1lh 0;
}

.zettairyouiki { 
	/* Yes, I know what you were expecting. It’s just margin. Manage your expectations accordingly. */
	margin-block: 1lh;
}

.zettairyouiki_grade_a { 
	margin-block: 3lh;
}

.zettairyouiki_grade_s { 
	margin-block: 5lh;
}