/* Junicode 2 (variable): put JunicodeVF-Roman.woff2 and JunicodeVF-Italic.woff2
   in a "fonts/" folder beside this HTML. Each variable file spans the whole
   weight axis, so these two cover regular, bold, italic and bold-italic. The
   static .ttf files aren't needed here. (No local() fallback, so the bundled
   Junicode 2 is always used and can't be confused with an installed Junicode 1.) */
@font-face {
	font-family: "Junicode";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url("fonts/JunicodeVF-Roman.woff2") format("woff2");
}

@font-face {
	font-family: "Junicode";
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	src: url("fonts/JunicodeVF-Italic.woff2") format("woff2");
}

html { color-scheme: light dark; }

body {
	font-family: "Junicode", "Palatino", serif;
	font-size: 15pt;
	max-width: 30em;
	padding: 0 2em;
	margin: 1em auto;
	text-align: justify;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-wrap: break-word;
}

a:link { text-decoration: none; color: #007F00; }
a:visited { text-decoration: none; color: #6F6F00; }
a:active { text-decoration: none; color: #00FF00; }
a:hover { text-decoration: none; color: #00BF00; }

h1 { font-size: 24pt; }
.large { font-size: 22pt; }
h2, .mega { font-size: 20pt; }
h3 { font-size: 17pt; }
h5, table { font-size: 15pt; }
.xnote { font-size: 14pt; }
.note { font-size: 13pt; }
sup { font-size: 10pt; }
.right { text-align: right; }
.center, h1, h2, h3, h4, h5 { text-align: center; }
.todo { color: gray; }
table { margin: auto; }
/* § 124 ablaut-series tables: left-aligned block and cells */
table.series { margin-left: 0; }
table.series td { text-align: left; }

h4 {
	font-size: 16pt;
	font-weight: bold;
}

th, td {
	padding-left: 0.3em;
	padding-right: 0.3em;
}

h1, h2, h3, h5, th {
	font-weight: normal;
	font-variant: small-caps;
	font-feature-settings: "smcp" 1, "case" 1;
}
/* Gothic alphabet cells are caseless: suppress small-caps/case so the diaeresis overlay is not raised */
tr.large th { font-variant: normal; font-feature-settings: normal; }
/* Gothic i with diaeresis (rare): the dots are drawn manually here so they
   sit identically in every context, instead of relying on the font’s
   placement of the combining mark. To move the dots up/down change "top";
   to nudge left/right add e.g. left: 0.02em (and keep right auto). */
.gi { position: relative; display: inline-block; line-height: 1; vertical-align: baseline; }
.gi::before {
	content: "\00A8";
	position: absolute;
	left: -0.03em;
	width: 100%;
	text-align: center;
	top: 0;
	line-height: 1;
	pointer-events: none;
}
/* the large alphabet-table glyph needs a slightly larger left nudge */
tr.large .gi::before { left: -0.04em; }
/* Gothic letter with a numeral overline: draw the line manually so it can
   sit higher than the font places the combining mark. Tune "top". */
.gline { position: relative; display: inline-block; line-height: 1; vertical-align: baseline; }
.gline::before {
	content: "\00AF";
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	top: -0.12em;
	line-height: 1;
	pointer-events: none;
}
table.gloss { margin-left: 0; }
.gloss td { vertical-align: top; }
.gloss td:first-child { white-space: nowrap; }
td.spacer { width: 1.6em; }

/* Smooth in-page navigation for the many cross-references, unless the
   reader prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Small screens: narrower side margins, ragged-right text (justified looks
   gappy on short lines), and wide tables scroll by themselves instead of
   forcing the whole page sideways */
@media (max-width: 40em) {
	body { padding: 0 1em; text-align: left; }
	table { display: block; width: fit-content; max-width: 100%; overflow-x: auto; }
}

/* Honour a dark system theme; the default light appearance is untouched */
@media (prefers-color-scheme: dark) {
	body { background: #1b1b1b; color: #e4e1d8; }
	a:link    { color: #5cc85c; }
	a:visited { color: #b3b356; }
	a:hover   { color: #79d879; }
	a:active  { color: #7dff7d; }
	.todo { color: #8a8a8a; }
}