@charset "UTF-8";
/* [ʞ] serenity.scss <https://hale.su/serenity.html>
 *  ~ lexi hale <lexi@hale.su>
 *  © GNU affero general public license v3
 *  $ sassc -t compressed serenity.{scss,css}

 * a stylesheet designed for flexibility and for minimalistic,
 * hand-coded websites. ideally, it should be possible to
 * drop it right into any existing plain-html document and
 * have it immediately spice up the look.

 NOTE i'm fine with people other than me using and modifying
      this stylesheet under the terms of the AGPL, under two
	  conditions:

	    1) this block-comment be left in place per the AGPL,
		   and at least the first three lines copied verbatim
		   to the top of any CSS file generated from it

		2) you change the default hue in :root to something
		   other than rose-red, which is the signature hue
		   of my own websites

	  i would also appreciate being credited somewhere
	  visible to visitors of the website, but it's not
	  required as long as the credit at the top of this
	  file is preserved. */
    
/*
 * This version has been modified by Aaron Kriegman.
 * I would like to add the stipulation that you not only don't
 * use rose-red, but that you use your own color.
 */
    
/* bring in a fallback font in case the user doesn't have
 * a garamond on hand */
/* imported from google stylesheet to reduce tracking
 * original: https://fonts.googleapis.com/css?family=EB+Garamond&display=swap
 */
/* cyrillic-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR4SDktYw.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* cyrillic */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GRxSDktYw.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR5SDktYw.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }

/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR2SDktYw.woff2) format("woff2");
  unicode-range: U+0370-03FF; }

/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR6SDktYw.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; }

/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* cyrillic-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR4SDktYw.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* cyrillic */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GRxSDktYw.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR5SDktYw.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }

/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR2SDktYw.woff2) format("woff2");
  unicode-range: U+0370-03FF; }

/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR6SDktYw.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; }

/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(https://fonts.gstatic.com/s/ebgaramond/v10/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* fonts to display IPA characters */
@font-face {
  font-family: "ipa";
  unicode-range: u+0250-02af;
  src: local("Junicode"), url("/res/Junicode.woff") format("woff"); }

@font-face {
  font-family: "ipa";
  unicode-range: u+0250-02af;
  font-weight: bold;
  src: local("Junicode Bold"), url("/res/Junicode-Bold.woff") format("woff"); }

@font-face {
  font-family: "ipa";
  unicode-range: u+0250-02af;
  font-weight: bold;
  font-style: italic;
  src: local("Junicode Bold Italic"), url("/res/Junicode-BoldItalic.woff") format("woff"); }

@font-face {
  font-family: "ipa";
  unicode-range: u+0250-02af;
  font-style: italic;
  src: local("Junicode Italic"), url("/res/Junicode-Italic.woff") format("woff"); }

@font-face {
  /* if there's any japanese text in the document,
	 * do what we can to make sure it's not hideous */
  font-family: "mincho";
  unicode-range: u+4e00-9fbf, u+3040-309f, u+30a0-30ff;
  src: local("Kochi Mincho"), local("Hiragino Mincho Pro"), local("Yu Mincho"), local("MS Mincho"); }

@font-face {
  font-family: 'GoMonoRegular';
  src: url('/font/GoMonoRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@viewport {
  zoom: 1;
  width: device-width; }

:root, body {
  font-size: 14pt; }

:root {
  --hue: 215;
  --width: 35rem;
  --bright: 86%;
  --link-br: 3  2%;
  --hover: 22%; }

::selection {
  background-color: hsl(var(--hue), 100%, 60%);
  color: white; }

body {
  margin-top: 1em;
  padding: 0 1em;
  font-family: mincho, ipa, Garamond, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond Pro", "Adobe Garamond", "EB Garamond", "Junicode", serif;
  hanging-punctuation: first last force-end;
  text-align: justify;
  /* browser specific hacks */ }
  @media print {
    body {
      --faint-color: #666;
      color: black; } }
  @media screen {
    body {
      --fg-color: hsl(var(--hue),50%, 27%);
      --bg-color: hsl(var(--hue),84%,var(--bright));
      --faint-color: hsl(var(--hue),64%,50%);
      max-width: var(--width);
      margin: auto;
      margin-top: 1em;
      background: var(--bg-color);
      color: var(--fg-color); } }
  @media all and (min-resolution: 400dpi) and (max-width: 1080px) {
    body {
      max-width: calc(1080px - 1em);
      margin: auto;
      margin-top: 1em;
      margin-bottom: 1em; } }
  body::-webkit-scrollbar {
    width: 20px; }
  body::-webkit-scrollbar-track {
    background: linear-gradient(to left, var(--bg-color) -50%, hsl(var(--hue), 100%, calc(var(--bright) / 2)) 130%); }
  body::-webkit-scrollbar-thumb {
    background: url(scroller.svg), hsl(var(--hue), 100%, 21%);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border-left: 1px outset hsl(var(--hue), 60%, 30%);
    border-radius: 1.5px 0 0 1.5px; }
    body::-webkit-scrollbar-thumb:hover {
      background-color: hsl(var(--hue), 100%, 28%);
      border-color: hsl(var(--hue), 60%, 40%); }

img {
  max-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
  /* sigh */
  all: unset;
  display: block;
  text-align: left;
  line-height: 1em;
  margin-top: 0.3em; }
  @media screen {
    h1 a[href], h2 a[href], h3 a[href], h4 a[href], h5 a[href], h6 a[href] {
      color: hsl(var(--hue), 60%, 80%); }
      h1 a[href]:hover, h2 a[href]:hover, h3 a[href]:hover, h4 a[href]:hover, h5 a[href]:hover, h6 a[href]:hover {
        color: var(--fg-color); } }
  @media print {
    h1 a[href], h2 a[href], h3 a[href], h4 a[href], h5 a[href], h6 a[href] {
      text-decoration: none; } }

h1 {
  font-size: 1.9666666667em; }
  section > h1 ~ * {
    margin-left: 0.5em; }

h2 {
  font-size: 1.6333333333em; }
  h2::before {
    display: inline;
    margin-right: 0.2em; }
  section > h2 ~ * {
    margin-left: 1em; }

h3 {
  font-size: 1.3em; }
  h3::before {
    display: inline;
    margin-right: 0.2em; }
  section > h3 ~ * {
    margin-left: 1.5em; }

h4 {
  font-size: 0.9666666667em; }
  h4::before {
    display: inline;
    margin-right: 0.2em; }
  section > h4 ~ * {
    margin-left: 2em; }

h5 {
  font-size: 0.6333333333em; }
  h5::before {
    display: inline;
    margin-right: 0.2em; }
  section > h5 ~ * {
    margin-left: 2.5em; }

@media screen {
  /* dim the pathbar */
  h1 a[href], h3 a[href] {
    color: hsl(var(--hue), 50%, 40%); } }

p {
  margin: 0.7em 0;
  line-height: 1.5em; }

del {
  color: var(--faint-color);
  text-decoration-color: hsl(var(--hue), 80%, 60%); }

ins {
  all: unset;
  border: 1px solid black;
  padding: 0.3ex 0.8ex;
  font-style: italic; }
  @media screen {
    ins {
      color: #4dff8e;
      background-color: #003313; } }

body > code,
pre > code,
code.listing, p code, li code {
  display: inline-block;
  background-color: hsl(var(--hue), 71%, 25%);
  font-size: 0.7em;
  padding: 0 0.5em;
  /* text-shadow: 0px 1.2px 0px #2A0017; */
  border: 1px solid #2A0017;
  font-family: "GoMonoRegular", monospace;
  color: white;
  /* box-shadow: 0 0 5px -2px black inset; */
} 
  body > code strong, pre > code strong, code.listing strong, p code strong, li code strong {
    /* keywords */
    color: hsl(var(--hue), 100%, 70%); }
  body > code var, pre > code var, code.listing var, p code var, li code var {
    /* variables */
    color: hsl(calc(var(--hue) - 30), 80%, 50%); }
  body > code dfn, pre > code dfn, code.listing dfn, p code dfn, li code dfn {
    /* literals */
    color: hsl(calc(var(--hue) + 30), 50%, 60%); }
  body > code em, pre > code em, code.listing em, p code em, li code em {
    /* strings */
    color: hsl(calc(var(--hue) - 20), 90%, 70%); }
  body > code i, pre > code i, code.listing i, p code i, li code i {
    /* comments */
    color: hsl(var(--hue), 70%, 70%); }
  body > code em i, pre > code em i, code.listing em i, p code em i, li code em i {
    font-style: italic; }
  body > code b, pre > code b, code.listing b, p code b, li code b {
    /* pragmata */
    font-weight: normal;
    color: hsl(calc(var(--hue) - 20), 50%, 65%); }
  body > code cite, pre > code cite, code.listing cite, p code cite, li code cite {
    /* imports */
    font-style: normal;
    color: hsl(calc(var(--hue) - 40), 70%, 70%); }

body > code,
pre > code,
code.listing {
  display: block;
  /* box-shadow: 0 0 8px -2px black inset; */
  white-space: pre-wrap;
  padding: 0.5em 1em;
  line-height: 1.2em;
  tab-size: 4;
  width: 100%;
  overflow: scroll; }

@media print {
  a[href] {
    color: black; } }

@media screen {
  a[href] {
    /* define the numbers */
    --link-t: var(--hue), 100%, var(--link-br);
    --hi-t: var(--hue), 100%, calc(var(--link-br) + var(--hover));
    /* define the two alpha variants */
    --link-c: hsl(var(--link-t));
    --ul-c: hsla(var(--link-t), 30%);
    --hi-c: hsl(var(--hi-t));
    --ul-hi-c: hsla(var(--hi-t), 60%);
    --glow-c: hsla(var(--link-t), 50%);
    color: var(--link-c);
    text-decoration-color: var(--ul-c);
    text-decoration-width: 1px;
    text-underline-offset: 2px; }
    p a[href]:focus, li a[href]:focus, span a[href]:focus, h1 a[href]:focus, h2 a[href]:focus, h3 a[href]:focus, p a[href]:hover:focus, li a[href]:hover:focus, span a[href]:hover:focus, h1 a[href]:hover:focus, h2 a[href]:hover:focus, h3 a[href]:hover:focus {
      /* a11y: keyboard users need an unambiguous, easy-to
			 * spot identifier for what's currently focused. this
			 * style inverts the default colors to create a highly-
			 * visible reverse-video effect. */
      color: var(--bg-color) !important;
      background: var(--fg-color) !important;
      /* box-shadow: 0 0 30px var(--ul-c); */
      text-decoration: none;
      /* browsers normally supply their own (ugly, useless) 
			 * indicator; we suppress these by blanking outline */
      outline: none; }
    a[href]:hover, a[href]:active {
      color: var(--hi-c);
      text-decoration: underline;
      text-decoration-color: var(--ul-hi-c);
      /* text-shadow: 0px 0px 30px var(--glow-c); */
      background: none !important;
      box-shadow: none;
  }
} 

div.dir > div {
  /* for div-type directory lists */
  margin-left: 2em;
  text-indent: -2em; }
  div.dir > div > *:first-child {
    font-weight: bold; }

ol, ul {
  padding-left: 1.2em;
  list-style: none;
  line-height: 1.4em; }
  ol ol, ol ul, ol li, ul ol, ul ul, ul li {
    margin-top: 0.5em; }
  ol li > a[href]:first-child, ul li > a[href]:first-child {
    display: inline-block; }
  ol li::before, ul li::before {
    display: inline-block;
    color: hsl(var(--hue), 40%, 60%); }

ul li::before {
  hanging-punctuation: none;
  content: "»";
  width: 0.7em;
  margin-left: -0.7em; }

ol {
  counter-reset: li; }
  ol li::before {
    counter-increment: li;
    content: counter(li);
    width: 1.5em;
    margin-left: -1.9em;
    text-align: right;
    padding-right: 0.4em; }

.byline {
  margin-left: 1.5em;
  margin-top: -0.5;
  padding: 0em;
  font-style: italic;
  color: var(--faint-color); }

hr {
  border: none;
  border-bottom: 1px solid hsl(var(--hue), 50%, 30%);
  width: 90%; }
  hr[data-dec]::before {
    display: block;
    content: attr(data-dec);
    position: relative;
    letter-spacing: 1em;
    text-align: center;
    top: 0.8em;
    color: hsl(var(--hue), 50%, 40%);
    font-size: 60%; }
  hr[data-dec=""]::before {
    content: "◆"; }

.imgbox {
  margin: 0 calc((20vw - 20%) * -1);
  break-inside: avoid; }

/* entries in definition lists, numbered footnotes */
.entry {
  margin-left: 1em;
  text-indent: -1em; }

/* links to previous and next chapter */
nav {
  padding-bottom: 1em;
  /* hideous evil clearfix */ }
  @media print {
    nav {
      display: none; } }
  nav::after {
    display: table;
    content: "";
    /* ಠ_ಠ */
    clear: both; }
  nav a[href] {
    --fg-color: hsl(var(--hue), 100%, 80%);
    display: block;
    color: var(--fg-color);
    background-color: hsl(var(--hue), 100%, calc(var(--bright) / 2));
    border: 1px solid var(--fg-color);
    text-decoration: none;
    line-height: .7em;
    transition-property: border-color, text-shadow, color, --fg-color, background;
    transition-duration: 0.2s;
    /* back and forward buttons */ }
    nav a[href]:hover {
      --fg-color: hsl(var(--hue),80%,90%);
      background: hsl(var(--hue), 70%, 10%) !important;
      text-decoration: none; }
    nav a[href]:active, nav a[href]:focus {
      padding: 0;
      margin: 0; }
    nav a[href].next::after, nav a[href].prev::before {
      display: inline-block;
      color: var(--bg-color);
      font-weight: bold;
      background-color: var(--fg-color);
      padding: 1.7ex 1.5ex;
      text-shadow: none;
      transition-property: background-color, --fg-color;
      transition-duration: 0.2s; }
    nav a[href].next {
      float: right;
      padding-left: 2ex;
      border-radius: 0 0 0 10px; }
      nav a[href].next::after {
        margin-left: 2ex;
        content: "⮞"; }
    nav a[href].prev {
      float: left;
      padding-right: 2ex;
      border-radius: 0 0 10px 0; }
      nav a[href].prev::before {
        margin-right: 2ex;
        content: "⮜"; }

blockquote, aside {
  page-break-inside: avoid;
  margin-left: 1em;
  margin-right: 1em;
  padding: 0.1px 1em;
  /* heavy sigh */
  font-size: 90%; }
  @media screen {
    blockquote, aside {
      background: rgba(6, 102, 147, 0.5);
      outline: 1px solid hsl(var(--hue), 100%, calc(var(--bright) - 8%)); } }
  blockquote > blockquote, aside > blockquote, blockquote > aside, aside > aside {
    margin-bottom: 1em; }
  blockquote + blockquote, aside + blockquote, blockquote + aside, aside + aside {
    margin-top: 1em; }

blockquote {
  margin: 0;
  border-left: 5px solid hsl(var(--hue), 60%, calc(var(--bright) + 20%)); }
  @media print {
    blockquote {
      border-color: black; } }

aside {
  --asize: 28px;
  --padsize: 4px;
  padding-left: calc(var(--asize) + (var(--padsize) * 2) + 0.5em);
  transform: translateY(-50%); }
  aside::before {
    line-height: 55px;
    display: block;
    position: absolute;
    left: 0;
    padding: 0 var(--padsize);
    height: 100%;
    content: "➤";
    color: black;
    font-size: var(--asize); }
    @media screen {
      aside::before {
        background: hsl(var(--hue), 60%, calc(var(--bright) + 20%)); } }
  @media (min-width: 60em) {
    aside {
      position: absolute;
      left: calc(10px + var(--width) + (50vw - (var(--width) / 2)));
      margin: 0; } }

/* endnote mechanism */
.endnote .entry a.backlink {
  text-decoration: underline !important;
  font-weight: bold; }

@media screen {
  a.endnote-link[href], a.endnote-link[href]:focus, a.endnote-link[href]:hover:focus {
    display: inline-block;
    text-decoration: none;
    color: var(--fg-color);
    background-color: hsl(var(--hue), 60%, 25%);
    /* yes, this is weird. unfortunately padding
			 * doesn't work to provide a consistent height -
			 * webkit uses x-height as the font's bounding
			 * box whereas blink uses the em square. */
    height: 100%;
    padding: 0 0.4em;
    margin: 0em;
    /* the following two stanzas are unfortunately
			 * necessary and i don't know why; trying to
			 * incorporate them into one consistently
			 * breaks cross-browser. shruggo */
    --border-color: hsl(var(--hue),80%,8%);
    border: 1px solid var(--border-color); }
  a[href].endnote-link:hover {
    background-color: hsl(var(--hue), 76%, 35%) !important;
    /* i don't know why the hell the !important is
				   needed, and the inspector won't tell me */ }
  .endnote {
    bottom: 0.5em;
    /* try to only use the popup mechanism in browsers
			 * that can support it - this is a little wacky */ }
    @supports (position: fixed) {
      .endnote {
        position: fixed;
        display: none;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background-color: hsl(var(--hue), 61%, 15%);
        --box-shadow-color: hsla(var(--hue),54%,30%,0.7);
        /* box-shadow: 0 0 40px 0 var(--box-shadow-color); */
        /* center the element */
        left: 0;
        right: 0;
        max-width: calc(var(--width) + 2em);
        /* same width as body */
        margin: auto; } }
    .endnote:target {
      display: block; }
    .endnote > * {
      font-size: 90%; }
    .endnote .entry {
      margin-left: 0em;
      padding: 0.7em 1.0em;
      text-indent: -0.5em;
      max-height: calc(100vh - 2em);
      overflow-x: visible;
      overflow-y: auto;
      line-height: 1.4em; }
      .endnote .entry a.backlink {
        text-decoration: none; }
    .endnote .ui {
      display: none; }
    @supports (position: fixed) {
      .endnote .ui a[href], .endnote a.ui[href] {
        text-decoration: none;
        font-weight: bold; }
      .endnote .ui {
        display: block;
        /* hover it over the corner of the interface */
        position: absolute;
        top: -1.2em;
        right: -0.8em;
        background: hsl(var(--hue), 51%, 5%);
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0.1em .5em; }
      .endnote a[href].ui {
        background: hsl(var(--hue), 51%, 5%) !important;
        cursor: default; }
        .endnote a[href].ui:hover {
          border-style: outset; }
        .endnote a[href].ui:active {
          border-style: inset; } } }

@media print {
  a[href].endnote-link {
    text-decoration: none;
    color: black; }
  .endnote .ui {
    display: none; }
  .endnote .entry a.backlink {
    color: black; } }

/* this is a grotesque hack and i don't understand
	 * why it works, but: for some reason, the following
	 * line does not succeed in removing the underline in
	 * Dillo (which doesn't obey media queries or feature
	 * queries properly), so we have to rely on the
	 * glitched behavior of !important to produce the
	 * desired effect. */
@supports (position: fixed) {
  .endnote .entry a.backlink {
    text-decoration: none !important; } }

.footer {
  font-size: 70%;
  text-align: center;
}