/* THE METALLIQUES — full Web 1.0 / Heaven's Gate kitsch
   Hand-edit freely. No build step. */

:root {
  --bg:      #04040c;
  --ink:     #e8e8f0;
  --muted:   #9aa4b2;
  --hot:     #ff2a2a;
  --gold:    #ffd21e;
  --cyan:    #28f0ff;
  --lime:    #7cff3f;
  --plum:    #c07cff;
  --plate:   #14141f;
  --plate2:  #0b0b14;
  --serif:   "Times New Roman", Times, Georgia, serif;
  --display: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
  /* mirror-ball / disco-tile sheen for the wordmark */
  --disco: linear-gradient(115deg,
    #ffffff 0%, #bdeffe 9%, #ffd21e 20%, #ff86e6 31%, #7cffd0 43%,
    #28f0ff 55%, #ffd21e 67%, #ff86e6 79%, #bdeffe 90%, #ffffff 100%);
  --disco-hover: linear-gradient(115deg,
    #ffffff 0%, #7cff3f 18%, #e6ffd2 36%, #7cff3f 52%, #28f0ff 72%,
    #a8ffca 86%, #ffffff 100%);
  /* brushed silver / chrome for the home wordmark's disco tiles */
  --chrome: linear-gradient(115deg,
    #f4f7fb 0%, #a3adbd 12%, #dfe4ec 24%, #838d9e 38%, #f4f7fb 50%,
    #929cac 62%, #d6dce6 74%, #7c8698 86%, #f4f7fb 100%);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background-color: var(--bg);
  /* static base starfield */
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #ffffff 99%, transparent),
    radial-gradient(1.5px 1.5px at 140px 90px, #cfd6ff 99%, transparent),
    radial-gradient(1px 1px at 80px 160px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 200px 40px, #9aa4ff 99%, transparent),
    radial-gradient(1.5px 1.5px at 260px 200px, #ffffff 99%, transparent),
    radial-gradient(1px 1px at 320px 120px, #ffe9a8 99%, transparent);
  background-repeat: repeat;
  background-size: 360px 240px;
  background-attachment: fixed;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

/* two out-of-phase layers of brighter stars that fade in and out = twinkle */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background-image:
    radial-gradient(1.7px 1.7px at 60px 50px, #ffffff, transparent),
    radial-gradient(2px 2px at 220px 150px, #d6f4ff, transparent),
    radial-gradient(1.5px 1.5px at 340px 30px, #fff6c0, transparent),
    radial-gradient(1.7px 1.7px at 130px 210px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 400px 110px, #ffffff, transparent);
  background-repeat: repeat;
  background-size: 440px 300px;
  animation: twinkle-a 4.6s ease-in-out infinite;
}
body::after {
  background-image:
    radial-gradient(1.7px 1.7px at 25px 130px, #ffffff, transparent),
    radial-gradient(2px 2px at 300px 60px, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 190px 250px, #ffe9a8, transparent),
    radial-gradient(2px 2px at 430px 200px, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 90px 40px, #ffffff, transparent);
  background-repeat: repeat;
  background-size: 520px 360px;
  animation: twinkle-b 6.9s ease-in-out infinite, star-drift 46s linear infinite;
}
@keyframes twinkle-a { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes twinkle-b { 0%, 100% { opacity: .8; } 38% { opacity: .1; } 68% { opacity: .55; } }
@keyframes star-drift { from { background-position: 0 0; } to { background-position: 140px -90px; } }

/* slow mirror-ball light raking across the whole page */
html::before {
  content: "";
  position: fixed;
  inset: -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255,255,255,.05) 47%,
    rgba(120,255,208,.07) 50%,
    rgba(255,134,230,.05) 53%,
    transparent 58%);
  animation: disco-rake 15s linear infinite;
}
@keyframes disco-rake {
  from { transform: translate3d(-22%, -8%, 0); }
  to   { transform: translate3d(22%, 8%, 0); }
}

/* ---------- night sky: moon, pulsing stars, shooting stars, UFO ---------- */

#sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.moon {
  position: absolute;
  top: clamp(210px, 24vh, 340px);
  right: clamp(18px, 8vw, 110px);
  width: clamp(58px, 8vw, 92px);
  aspect-ratio: 1 / 1;
  animation: moon-breathe 8s ease-in-out infinite;
}
.moon svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes moon-breathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(170,195,255,.28)); }
  50%      { filter: drop-shadow(0 0 22px rgba(170,195,255,.5)); }
}

.pstar {
  position: absolute;
  border-radius: 50%;
  opacity: .25;
  animation: pstar-pulse var(--dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes pstar-pulse {
  0%, 100% { opacity: .18; transform: scale(.6); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

.shooting-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255,255,255,.9);
  will-change: transform, opacity;
}
.shooting-star::after {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 50%;
  width: 78px;
  height: 1.5px;
  background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0));
  transform-origin: left center;
  transform: translateY(-50%) rotate(calc(var(--angle, 22deg) + 180deg));
}

.ufo {
  position: absolute;
  width: clamp(34px, 4vw, 48px);
  opacity: .5;
  filter: blur(.4px) drop-shadow(0 0 6px rgba(124,255,208,.35));
  will-change: transform;
}
.ufo svg { width: 100%; display: block; }
.ufo-l { animation: ufo-blink 1.1s steps(1, end) infinite; }
.ufo-l:nth-of-type(2) { animation-delay: .37s; }
.ufo-l:nth-of-type(3) { animation-delay: .74s; }
@keyframes ufo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }

a { color: var(--cyan); }
a:visited { color: var(--plum); }
a:hover { color: #000; background: var(--gold); }

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

hr.rule {
  border: 0;
  border-top: 3px ridge var(--muted);
  border-bottom: 3px groove var(--muted);
  margin: 2.4em auto;
  max-width: 860px;
}

/* ---------- header / nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(#0a0a16, #05050d);
  border-bottom: 3px ridge var(--muted);
  padding: 10px 12px;
}

.brand {
  display: block;
  position: relative;
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 4px;
  text-decoration: none;
  color: var(--gold); /* fallback where background-clip:text is unsupported */
  background-color: transparent;
  background-image: var(--disco);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(200,240,255,.35), 2px 2px 0 #000;
  filter: drop-shadow(0 0 5px rgba(120,255,208,.28));
  /* the disco-tile reflection under the wordmark */
  -webkit-box-reflect: below -0.1em
    linear-gradient(transparent 55%, rgba(255,255,255,.22));
  margin-bottom: .85em;
  animation: disco-sheen 6.5s linear infinite;
}
.brand:hover {
  background-color: transparent;
  background-image: var(--disco-hover);
  background-size: 220% 100%;
  /* redeclare: the global a:hover shorthand otherwise resets background-clip */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--lime);
  /* glow only — no scale / letter-spacing change, so the wordmark can never
     push the page wider than the viewport and spawn a horizontal scrollbar */
  text-shadow: 0 0 24px rgba(200,255,230,.85), 0 0 56px rgba(40,240,255,.6),
               0 0 96px rgba(255,134,230,.4), 2px 2px 0 #000;
  animation: disco-sheen 1.4s linear infinite,
             brand-flare 1s ease-in-out infinite alternate;
}
@keyframes disco-sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
@keyframes brand-flare {
  from { filter: drop-shadow(0 0 7px rgba(120,255,208,.6))
                drop-shadow(0 0 18px rgba(40,240,255,.4)); }
  to   { filter: drop-shadow(0 0 24px rgba(124,255,63,1))
                drop-shadow(0 0 60px rgba(40,240,255,.8))
                drop-shadow(0 0 110px rgba(255,134,230,.5)); }
}

.sitenav {
  margin: 8px 0 4px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 2.1;
}
.sitenav a {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px;
  color: var(--cyan);
  text-decoration: none;
  border: 2px outset var(--muted);
  background: #0e0e1a;
}
.sitenav a:hover { color: #000; background: var(--gold); border-style: inset; }
.sitenav a.is-here {
  color: var(--bg);
  background: var(--lime);
  border-style: inset;
}
.sitenav--noscript a { font-family: var(--display); }

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  border-bottom: 2px solid var(--hot);
  color: var(--hot);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 5px 0;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: slidein 22s linear infinite;
}
@keyframes slidein { to { transform: translateX(-100%); } }

/* ---------- social ---------- */

.social { margin: 6px 0 2px; }
.social--footer { margin: 1.5em 0; }
.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin: 3px;
  color: var(--cyan);
  border: 2px outset var(--muted);
  background: #0e0e1a;
  text-decoration: none;
}
.sbtn:hover { color: #000; background: var(--gold); border-style: inset; }

/* ---------- layout ---------- */

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}
.wrap--home { }

/* inner pages read left-aligned; landing stays centered */
.wrap--page { text-align: left; }
.wrap--page h1, .wrap--page h2 { text-align: center; }

h1.page-title {
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 58px);
  letter-spacing: 4px;
  color: var(--gold);
  margin: .2em 0 .1em;
  text-shadow: 0 0 10px rgba(255,210,30,.55), 3px 3px 0 #000;
}

/* home page only: the big wordmark as glittering silver disco-ball tiles.
   --lx / --ly are updated by JS to the cursor position, so the specular
   highlight tracks the pointer like a moving light source. */
.wrap--home .page-title {
  position: relative;
  --lx: 50%;
  --ly: 18%;
  color: #eef2f8; /* fallback if background-clip:text unsupported */
  background-color: transparent;
  background-image:
    /* cursor "light source" — bright specular spot that follows the pointer */
    radial-gradient(circle at var(--lx) var(--ly),
      rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 9%,
      rgba(255,255,255,.14) 24%, transparent 44%),
    /* mirror-tile mosaic: alternating bright / grey facets (no see-through) */
    conic-gradient(from 45deg,
      rgba(255,255,255,.5) 0 25%, rgba(110,118,132,.36) 0 50%,
      rgba(255,255,255,.5) 0 75%, rgba(110,118,132,.36) 0),
    /* per-tile diagonal glint */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.5) 0 1px, transparent 1px 15px),
    /* brushed-silver base */
    var(--chrome);
  background-size: 150% 150%, 15px 15px, 15px 15px, 190% 100%;
  background-position: 0 0, 0 0, 0 0, 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 7px rgba(220,232,245,.3);
  animation: disco-tile 4.5s linear infinite,
             disco-tile-glow 2.6s ease-in-out infinite alternate;
}
.wrap--home .page-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 0 45%, transparent 62%),
    radial-gradient(circle, #fff 0 45%, transparent 62%),
    radial-gradient(circle, #eef4ff 0 45%, transparent 62%),
    radial-gradient(circle, #fff 0 45%, transparent 62%),
    radial-gradient(circle, #e8ecf2 0 45%, transparent 62%);
  background-size: 6px 6px, 5px 5px, 7px 7px, 5px 5px, 6px 6px;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.8));
  animation: glitter 1.6s steps(1, end) infinite;
}
@keyframes disco-tile {
  from { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  to   { background-position: 0 0, 30px 15px, -30px 15px, 190% 50%; }
}
@keyframes disco-tile-glow {
  from { filter: drop-shadow(0 0 4px rgba(215,228,242,.28)); }
  to   { filter: drop-shadow(0 0 10px rgba(230,240,250,.5))
                drop-shadow(0 0 22px rgba(180,196,220,.22)); }
}
@keyframes glitter {
  0%   { background-position: 10% 30%, 63% 55%, 41% 80%, 82% 20%, 30% 60%; opacity: .95; }
  20%  { background-position: 74% 18%, 26% 72%, 56% 42%, 16% 60%, 90% 75%; opacity: .5; }
  40%  { background-position: 44% 64%, 88% 36%, 20% 24%, 60% 84%, 12% 45%; opacity: 1; }
  60%  { background-position: 22% 84%, 52% 12%, 73% 64%, 34% 38%, 66% 22%; opacity: .65; }
  80%  { background-position: 58% 46%, 14% 34%, 36% 90%, 80% 70%, 48% 58%; opacity: .9; }
  100% { background-position: 35% 20%, 70% 62%, 15% 55%, 55% 30%, 85% 40%; opacity: .8; }
}
h2 {
  font-family: var(--display);
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 2px 2px 0 #000;
}
.tag {
  font-family: var(--display);
  letter-spacing: 3px;
  color: var(--lime);
  font-size: 15px;
}

.blink { animation: blink 1.1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

.lore {
  max-width: 62ch;
  margin: 1.2em auto;
}

/* ---------- boxes ---------- */

.box {
  border: 4px ridge var(--muted);
  background: linear-gradient(var(--plate), var(--plate2));
  padding: 1.2em 1.4em;
  margin: 1.6em auto;
  max-width: 760px;
}

.redalert {
  border: 4px solid var(--hot);
  background: #180000;
  padding: 1em 1.2em;
  margin: 1.6em auto;
  max-width: 700px;
}
.redalert h3 {
  margin: 0 0 .3em;
  font-family: var(--display);
  letter-spacing: 3px;
  color: var(--hot);
}

.btn {
  display: inline-block;
  font-family: var(--display);
  letter-spacing: 2px;
  font-size: 15px;
  padding: 10px 20px;
  margin: 8px 4px;
  color: #000;
  background: var(--gold);
  border: 3px outset var(--gold);
  text-decoration: none;
}
.btn:hover { background: var(--lime); border-color: var(--lime); color: #000; }
.btn:active { border-style: inset; }

ul.creed {
  list-style: none;
  padding: 0;
  max-width: 52ch;
  margin: 1em auto;
  text-align: left;
}
ul.creed li { padding: .35em 0; border-bottom: 1px dotted #333; }
ul.creed li::before { content: "\25B8  "; color: var(--lime); }

/* ---------- gallery ---------- */

.portal {
  position: relative;
  max-width: 820px;
  margin: 1.6em auto .6em;
  border: 8px ridge var(--muted);
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.portal img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.portal img.is-on { opacity: 1; }

/* drawn portrait: slightly transparent, edges feathered so it melts into
   the starfield instead of sitting in a hard rectangle */
.drawn {
  margin: 1.6em auto .4em;
  max-width: min(760px, calc(100vw - 32px));
  line-height: 0;
}
.drawn img {
  width: 100%;
  height: auto;
  opacity: .82;
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 46%,
    #000 36%, rgba(0,0,0,.4) 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 82% at 50% 46%,
    #000 36%, rgba(0,0,0,.4) 70%, transparent 100%);
}

.caption {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 2em;
}

/* ---------- news ticker ---------- */

.ticker {
  height: 13em;
  max-width: 700px;
  margin: 1em auto;
  overflow: hidden;
  border: 4px inset var(--muted);
  background: #000;
  text-align: left;
}
.ticker__track { animation: scrollup 26s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker ul { list-style: none; margin: 0; padding: 0; }
.ticker li { padding: .7em 1em; border-bottom: 1px dashed #333; }
.ticker .date { color: var(--gold); font-family: var(--display); font-size: 12px; letter-spacing: 2px; display: block; }
@keyframes scrollup { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---------- tables ---------- */

table.tt {
  border-collapse: separate;
  border: 4px ridge var(--muted);
  margin: 1.4em auto;
  width: 100%;
  max-width: 780px;
  background: var(--plate2);
  text-align: left;
  font-size: 16px;
}
table.tt caption {
  font-family: var(--display);
  letter-spacing: 3px;
  color: var(--lime);
  padding: .4em;
}
table.tt th, table.tt td { border: 1px solid #2c2c3a; padding: .55em .8em; vertical-align: top; }
table.tt thead th {
  background: var(--gold);
  color: #000;
  font-family: var(--display);
  letter-spacing: 2px;
  font-size: 12px;
}
table.tt tbody tr:nth-child(even) td { background: #101019; }

.tscroll { overflow-x: auto; }

/* "The Ordained": break wider than the text column, drop the panel background
   so the starfield shows through. Width is capped to stay inside the viewport
   (incl. scrollbar) so it never spawns a horizontal scrollbar. */
.box--open {
  background: none;
  border: none;
  padding: 0;
  margin: 2em 0;
  margin-left: 50%;
  width: min(1100px, calc(100vw - 40px));
  max-width: none;
  transform: translateX(-50%);
}
.box--open > h2 { margin-top: 0; }

/* roster with member portraits */
table.tt.roster { background: transparent; max-width: none; }
table.tt.roster td,
table.tt.roster th { border-color: rgba(154, 164, 178, .4); }
table.tt.roster tbody td { background: transparent; }
table.tt.roster tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .045); }
.roster td:first-child { width: 150px; }
.roster .portrait {
  display: block;
  width: 130px;
  height: 130px;
  object-fit: cover;
  border: 2px ridge var(--muted);
  background: #000;
}
.roster td:nth-child(2) { white-space: nowrap; }
@media (max-width: 640px) {
  .roster td:first-child { width: 72px; }
  .roster .portrait { width: 60px; height: 60px; }
}

/* ---------- media grid (merch / videos) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 1.6em auto;
  max-width: 820px;
}
.card {
  border: 4px ridge var(--muted);
  background: linear-gradient(var(--plate), var(--plate2));
  padding: 12px;
  text-align: center;
}
.card h3 { font-family: var(--display); letter-spacing: 2px; color: var(--cyan); font-size: 15px; margin: .6em 0 .2em; }
.card .price { color: var(--gold); font-family: var(--display); font-size: 13px; }

/* ---------- releases (music page) ---------- */

.release {
  display: flex;
  gap: 22px;
  text-align: left;
  align-items: flex-start;
  /* wider than the text column so the cover art can be larger.
     capped to the viewport (incl. scrollbar) so it never causes h-scroll */
  width: min(1000px, calc(100vw - 40px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.release__cover {
  width: 260px;
  flex: 0 0 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 3px ridge var(--muted);
  background: #000;
}
.release__body { flex: 1 1 auto; min-width: 0; }
.release__body h2 { margin: 0 0 .2em; text-align: left; }
.release__links {
  margin: .8em 0 .4em;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.release__links .btn {
  margin: 0;
  padding: 6px 11px;
  font-size: 12px;
  letter-spacing: 1px;
  border-width: 2px;
  white-space: nowrap;
}
.release__tracks { margin-top: .6em; }
.release__tracks summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--lime);
}
.release__tracks ol { margin: .5em 0 0; padding-left: 1.6em; }
.release__tracks li { padding: .15em 0; }

@media (max-width: 560px) {
  .release { flex-direction: column; align-items: center; }
  .release__cover { flex-basis: auto; width: 60%; max-width: 220px; }
  .release__body { text-align: center; }
  .release__body h2, .release__tracks { text-align: center; }
  .release__tracks ol { display: inline-block; text-align: left; }
}

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 4px ridge var(--muted);
  background: #000;
  margin: 1.2em auto;
  max-width: 780px;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- footer ---------- */

#app-footer { padding: 0 16px 40px; }
.fine {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
}
.counter {
  font-family: "Courier New", monospace;
  background: #000;
  color: var(--lime);
  border: 2px inset var(--muted);
  padding: 1px 6px;
  letter-spacing: 3px;
}
.badges img, .badges svg { margin: 6px 4px; vertical-align: middle; }

/* ---------- motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink { animation: none; }
  .marquee span { animation: none; padding-left: 0; }
  .portal img { transition: none; }
  .ticker { height: auto; max-height: 22em; overflow-y: auto; }
  .ticker__track { animation: none; }
  .brand { animation: none; background-position: 20% 50%; }
  .brand:hover {
    animation: none;
    transform: none;
    letter-spacing: 4px;
    filter: drop-shadow(0 0 16px rgba(124,255,63,.85))
            drop-shadow(0 0 34px rgba(40,240,255,.5));
  }
  body::before { animation: none; opacity: .5; }
  body::after  { animation: none; opacity: .5; }
  html::before { animation: none; opacity: 0; }
  .moon { animation: none; filter: drop-shadow(0 0 12px rgba(170,195,255,.35)); }
  .pstar { animation: none; opacity: .55; }
  .wrap--home .page-title {
    animation: none;
    background-position: 0 0, 0 0, 0 0, 25% 50%;
    filter: drop-shadow(0 0 8px rgba(230,240,250,.4));
  }
  .wrap--home .page-title::after { animation: none; opacity: .5; }
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  body { font-size: 17px; }
  .sitenav a { padding: 3px 7px; letter-spacing: 1px; }
}