:root {
  --text:goldenrod;
  --link:yellow;
  --alt:gold;
  --menulink:whitesmoke;
  --bg:#161616;
  --mono:'Sono', "Courier New", Courier, monospace;
  --block:'Murs', serif;
  --body:'NeverMind', sans-serif;
}

@font-face {
  font-family: 'Murs';
  src: URL('../fonts/MursGothic-WideDark.woff') format('woff');
}

@font-face {
  font-family: 'NeverMind';
  src: URL('../fonts/NeverMindRounded-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'NeverMind';
  src: URL('../fonts/NeverMindRounded-MediumItalic.ttf') format('truetype');
  font-style:italic;
}

.center{text-align:center}
.none,.h{display:none !important}
.icon{width:2.25em;margin-right:1em;vertical-align:middle}
.clear{clear:both}
.mascot{height:2em;margin-right:0.25em;vertical-align:bottom}

body{margin:0;padding:1em;background:var(--bg);color:var(--text)}
header{font-family:var(--block);font-size:1.2;padding-left:1em;font-family:var(--block)}
main{margin:2em 0 6em;font-family:var(--body);padding-left:1em;font-size:1.1em}
footer{font-family:var(--body);padding-left:1em;border-top:1px dotted var(--alt)}
main,header,footer{width:800px;max-width:calc(95% - 2em)}
h1, h2, h3, h3, h4, h5, h6{font-family:var(--block);}
h2{font-size:3em}
h3{font-size:2.2em}
h1{font-size:4rem;}
a:any-link{color:var(--link)}
hr{width:25%; margin: 0 auto 4em}
hr.break{width:10%;border-color:yellow}

header nav a:any-link{font-style:italic;text-transform:uppercase;text-decoration:none;color:var(--menulink)}
header h1{margin:0}
header h1 a{color:var(--alt) !important;text-decoration:none}
header h1 a:hover,header h1 a:focus{text-shadow:0px 0px 10px #666}
header h1 small{font-size:1.2rem;font-family:var(--body);display:inline-block;margin-left:10px}
nav ul{list-style:none;padding: 1.25em 1em;border-top: 1px dashed gold;border-bottom: 1px dashed gold;display:inline-block;margin:0.75em 0}
nav ul li{display: inline-block}
nav ul li:not(:last-child)::after{content:'/';padding:0 1em}
nav li a[aria-current="page"]{font-weight:bold}

main p{line-height:1.3em;letter-spacing:0.25px}
.story main hr{margin: 4em auto}

.issue figure{width:300px;max-width:80vw;padding:0 2rem 0 0;padding-top:0;margin-top:0;margin-left:0;float:left}
.issue figure img{width:100%}
.issue figure figcaption{display:block;font-size:0.8em;margin-top:0.75rem;text-align:center}
.issue .contents li{margin-bottom:1em}
.issue .title small{font-size:0.5em}
.issue-list{list-style:none}
.issue-list li{margin-bottom:1em}
.issue-list img,.issue-list a{height:100%;width:100%;max-width:200px;vertical-align:top;text-align:center;display:inline-block}
main .content{font-family:sans-serif}
.content p:not(:first-child){text-indent: 3ch}
.content p:first-child::first-letter{font-size: 5em}
.story-links{border:none}
.story-links a:any-link{text-decoration:none}

@media screen and (max-width:710px) {
  main{font-size:1em}
  nav ul{display:block;text-align:center}
  nav ul li{display:block;text-align:center}
  nav ul li:not(:last-child)::after{content:'';margin:0;padding:0}
  h2{font-size:2em}
  h3{font-size:1.8em}
  h4{font-size:1.4em}
  .issue figure{float:unset;display:inline-block}
}

@media print {
  nav,footer{display:none}
  h1, body header h1 a {color:black !important}
  h1 img{filter: saturate(0) invert(1)}
  body{color:black;background:white}
  main a:any-link{color:black !important}
}