/*
Theme Name: Glitterpage
Author: Laika
Description: A hand-made looking profile page with glitter. Front page shows your profile, Top 8 albums, pics, latest blog entries and a random stuff widget area. Put photo posts in the category with slug "photos" and album posts in the category with slug "albums" (featured image = the photo or cover). Profile text is under Appearance > Customize > Profile stuff.
Version: 1.33
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glitterpage
*/

/* layout: fixed-width two-column profile page, 2006 style. flat colour header bars, ridge/outset borders, glitter that steps like a GIF */
:root {
  --ink: #000000;
  --paper: #ffffff;
  --hot: #ff2fa8;
  --purple: #7a1fd1;
  --lilac: #ecdcff;
  --pinkpale: #ffe1f2;
  --violet: #c77dff;

  --f-body: Verdana, Geneva, Tahoma, sans-serif;
  --f-head: "Arial Black", "Arial Bold", Gadget, Impact, sans-serif;
  --f-hand: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --f-serif: "Times New Roman", Times, Georgia, serif;
  --f-pixel: "VT323", "Courier New", Courier, monospace;
  --g1: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'><rect x='15' y='37' width='2' height='2' fill='%23ffd6f0' opacity='0.9'/><rect x='38' y='30' width='3' height='3' fill='%23ffffff' opacity='0.5'/><rect x='30' y='16' width='2' height='2' fill='%23ff4fc1' opacity='0.7'/><rect x='30' y='34' width='2' height='2' fill='%23fff3b0' opacity='1'/><rect x='9' y='14' width='3' height='3' fill='%23ffd6f0' opacity='1'/><rect x='0' y='4' width='1' height='1' fill='%23ffffff' opacity='0.9'/><rect x='1' y='17' width='2' height='2' fill='%23a64dff' opacity='1'/><rect x='25' y='36' width='2' height='2' fill='%23ffd6f0' opacity='0.9'/><rect x='6' y='2' width='1' height='1' fill='%23fff3b0' opacity='0.7'/><rect x='16' y='27' width='3' height='3' fill='%23ff2fa8' opacity='1'/><rect x='32' y='24' width='2' height='2' fill='%23d48bff' opacity='1'/><rect x='37' y='14' width='1' height='1' fill='%23ffffff' opacity='0.9'/><rect x='38' y='10' width='3' height='3' fill='%23d48bff' opacity='0.5'/><rect x='13' y='36' width='1' height='1' fill='%23ff2fa8' opacity='0.5'/><rect x='4' y='30' width='3' height='3' fill='%23fff3b0' opacity='0.5'/><rect x='22' y='4' width='2' height='2' fill='%23ffd6f0' opacity='0.5'/><rect x='18' y='27' width='2' height='2' fill='%23ffffff' opacity='0.5'/><rect x='38' y='39' width='1' height='1' fill='%23a64dff' opacity='0.9'/><rect x='35' y='17' width='2' height='2' fill='%23ff4fc1' opacity='0.5'/><rect x='19' y='0' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='12' y='26' width='1' height='1' fill='%23ff2fa8' opacity='0.7'/><rect x='2' y='21' width='1' height='1' fill='%23d48bff' opacity='0.7'/><rect x='24' y='24' width='2' height='2' fill='%23a64dff' opacity='0.5'/><rect x='39' y='32' width='1' height='1' fill='%23a64dff' opacity='0.7'/><rect x='19' y='27' width='1' height='1' fill='%23ff2fa8' opacity='0.9'/><rect x='0' y='26' width='2' height='2' fill='%23d48bff' opacity='0.5'/><rect x='24' y='39' width='2' height='2' fill='%23ffd6f0' opacity='0.5'/><rect x='21' y='29' width='1' height='1' fill='%23d48bff' opacity='0.9'/><rect x='31' y='1' width='2' height='2' fill='%23ffffff' opacity='0.5'/><rect x='23' y='16' width='3' height='3' fill='%23fff3b0' opacity='0.9'/><rect x='37' y='38' width='1' height='1' fill='%23ffd6f0' opacity='0.9'/><rect x='11' y='20' width='1' height='1' fill='%23ff2fa8' opacity='0.9'/><rect x='24' y='6' width='1' height='1' fill='%23ffd6f0' opacity='0.9'/><rect x='32' y='14' width='3' height='3' fill='%23ff2fa8' opacity='0.7'/><rect x='20' y='11' width='3' height='3' fill='%23a64dff' opacity='0.5'/><rect x='6' y='38' width='1' height='1' fill='%23d48bff' opacity='0.7'/><rect x='28' y='10' width='1' height='1' fill='%23d48bff' opacity='0.7'/><rect x='36' y='28' width='1' height='1' fill='%23ff4fc1' opacity='0.5'/><rect x='2' y='33' width='1' height='1' fill='%23d48bff' opacity='0.7'/><rect x='17' y='21' width='3' height='3' fill='%23ffffff' opacity='0.9'/><rect x='37' y='8' width='2' height='2' fill='%23ff2fa8' opacity='0.9'/><rect x='29' y='22' width='3' height='3' fill='%23a64dff' opacity='0.9'/><rect x='26' y='36' width='2' height='2' fill='%23ffffff' opacity='1'/><rect x='9' y='12' width='1' height='1' fill='%23fff3b0' opacity='1'/><rect x='35' y='14' width='1' height='1' fill='%23fff3b0' opacity='0.9'/><rect x='34' y='21' width='1' height='1' fill='%23ffffff' opacity='0.9'/><path d='M10 15h1v7h-1zM7 18h7v1h-7z' fill='%23fff'/><path d='M5 2h1v7h-1zM2 5h7v1h-7z' fill='%23fff'/></svg>");
  --g2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'><rect x='33' y='26' width='1' height='1' fill='%23d48bff' opacity='0.9'/><rect x='11' y='34' width='3' height='3' fill='%23ff2fa8' opacity='0.5'/><rect x='1' y='15' width='2' height='2' fill='%23a64dff' opacity='0.9'/><rect x='32' y='20' width='3' height='3' fill='%23a64dff' opacity='0.7'/><rect x='35' y='3' width='1' height='1' fill='%23ff4fc1' opacity='0.7'/><rect x='34' y='35' width='3' height='3' fill='%23ff4fc1' opacity='0.9'/><rect x='34' y='7' width='3' height='3' fill='%23ffffff' opacity='0.9'/><rect x='26' y='5' width='2' height='2' fill='%23fff3b0' opacity='0.7'/><rect x='26' y='32' width='1' height='1' fill='%23ffffff' opacity='1'/><rect x='23' y='36' width='1' height='1' fill='%23d48bff' opacity='0.5'/><rect x='30' y='23' width='2' height='2' fill='%23ffffff' opacity='1'/><rect x='15' y='7' width='2' height='2' fill='%23ff4fc1' opacity='0.7'/><rect x='33' y='23' width='1' height='1' fill='%23ff2fa8' opacity='0.5'/><rect x='17' y='12' width='3' height='3' fill='%23ffd6f0' opacity='0.9'/><rect x='19' y='22' width='1' height='1' fill='%23ffd6f0' opacity='0.9'/><rect x='6' y='36' width='2' height='2' fill='%23ff2fa8' opacity='0.9'/><rect x='0' y='3' width='1' height='1' fill='%23ffffff' opacity='1'/><rect x='17' y='30' width='3' height='3' fill='%23ffffff' opacity='0.7'/><rect x='19' y='16' width='1' height='1' fill='%23fff3b0' opacity='0.5'/><rect x='39' y='36' width='2' height='2' fill='%23ffd6f0' opacity='1'/><rect x='31' y='37' width='2' height='2' fill='%23ffd6f0' opacity='0.7'/><rect x='16' y='9' width='3' height='3' fill='%23ffffff' opacity='0.7'/><rect x='3' y='34' width='1' height='1' fill='%23d48bff' opacity='0.9'/><rect x='3' y='10' width='2' height='2' fill='%23ffffff' opacity='0.9'/><rect x='16' y='25' width='2' height='2' fill='%23ffffff' opacity='0.5'/><rect x='34' y='15' width='1' height='1' fill='%23ff2fa8' opacity='0.7'/><rect x='18' y='3' width='3' height='3' fill='%23fff3b0' opacity='1'/><rect x='31' y='14' width='2' height='2' fill='%23a64dff' opacity='1'/><rect x='4' y='29' width='1' height='1' fill='%23ff4fc1' opacity='1'/><rect x='20' y='12' width='1' height='1' fill='%23ffffff' opacity='1'/><rect x='3' y='21' width='2' height='2' fill='%23ffd6f0' opacity='0.7'/><rect x='39' y='20' width='1' height='1' fill='%23ffd6f0' opacity='0.7'/><rect x='19' y='27' width='1' height='1' fill='%23fff3b0' opacity='0.5'/><rect x='33' y='6' width='2' height='2' fill='%23ffffff' opacity='0.7'/><rect x='36' y='35' width='1' height='1' fill='%23fff3b0' opacity='1'/><rect x='28' y='32' width='1' height='1' fill='%23fff3b0' opacity='1'/><rect x='0' y='18' width='1' height='1' fill='%23ffd6f0' opacity='0.5'/><rect x='29' y='21' width='1' height='1' fill='%23ff4fc1' opacity='0.5'/><rect x='17' y='6' width='2' height='2' fill='%23ffffff' opacity='0.5'/><rect x='7' y='30' width='3' height='3' fill='%23ff2fa8' opacity='0.7'/><rect x='6' y='1' width='2' height='2' fill='%23ff4fc1' opacity='0.5'/><rect x='25' y='7' width='2' height='2' fill='%23ffffff' opacity='0.5'/><rect x='12' y='34' width='1' height='1' fill='%23ff2fa8' opacity='0.9'/><rect x='22' y='34' width='2' height='2' fill='%23a64dff' opacity='1'/><rect x='0' y='33' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='18' y='20' width='1' height='1' fill='%23ffffff' opacity='0.9'/><path d='M11 15h1v7h-1zM8 18h7v1h-7z' fill='%23fff'/><path d='M34 18h1v7h-1zM31 21h7v1h-7z' fill='%23fff'/></svg>");
  --g3: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'><rect x='7' y='1' width='3' height='3' fill='%23ff2fa8' opacity='0.7'/><rect x='14' y='8' width='3' height='3' fill='%23ffffff' opacity='0.5'/><rect x='37' y='27' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='13' y='14' width='2' height='2' fill='%23ffffff' opacity='0.7'/><rect x='34' y='26' width='1' height='1' fill='%23fff3b0' opacity='0.9'/><rect x='0' y='10' width='3' height='3' fill='%23a64dff' opacity='0.9'/><rect x='17' y='9' width='1' height='1' fill='%23d48bff' opacity='0.5'/><rect x='5' y='24' width='1' height='1' fill='%23d48bff' opacity='0.9'/><rect x='38' y='16' width='1' height='1' fill='%23fff3b0' opacity='0.5'/><rect x='24' y='5' width='2' height='2' fill='%23ff2fa8' opacity='0.9'/><rect x='36' y='12' width='3' height='3' fill='%23ffffff' opacity='0.5'/><rect x='14' y='18' width='1' height='1' fill='%23ff4fc1' opacity='0.5'/><rect x='24' y='17' width='2' height='2' fill='%23d48bff' opacity='0.7'/><rect x='23' y='22' width='1' height='1' fill='%23ff2fa8' opacity='0.5'/><rect x='38' y='10' width='2' height='2' fill='%23ff4fc1' opacity='0.7'/><rect x='29' y='24' width='1' height='1' fill='%23ff4fc1' opacity='0.9'/><rect x='3' y='14' width='1' height='1' fill='%23d48bff' opacity='1'/><rect x='17' y='4' width='1' height='1' fill='%23d48bff' opacity='0.7'/><rect x='31' y='25' width='3' height='3' fill='%23fff3b0' opacity='0.7'/><rect x='16' y='8' width='1' height='1' fill='%23ff2fa8' opacity='1'/><rect x='37' y='25' width='1' height='1' fill='%23ff4fc1' opacity='0.7'/><rect x='32' y='31' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='9' y='10' width='3' height='3' fill='%23a64dff' opacity='0.5'/><rect x='24' y='24' width='2' height='2' fill='%23fff3b0' opacity='0.9'/><rect x='35' y='0' width='3' height='3' fill='%23ffffff' opacity='0.9'/><rect x='21' y='7' width='1' height='1' fill='%23a64dff' opacity='0.7'/><rect x='29' y='0' width='3' height='3' fill='%23ff2fa8' opacity='0.7'/><rect x='32' y='6' width='3' height='3' fill='%23ff2fa8' opacity='0.7'/><rect x='9' y='23' width='1' height='1' fill='%23ffffff' opacity='0.9'/><rect x='31' y='1' width='1' height='1' fill='%23d48bff' opacity='0.9'/><rect x='15' y='3' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='31' y='4' width='2' height='2' fill='%23ffd6f0' opacity='0.7'/><rect x='30' y='35' width='1' height='1' fill='%23ff2fa8' opacity='1'/><rect x='13' y='34' width='3' height='3' fill='%23ff4fc1' opacity='0.9'/><rect x='25' y='23' width='2' height='2' fill='%23fff3b0' opacity='0.5'/><rect x='15' y='14' width='1' height='1' fill='%23d48bff' opacity='0.5'/><rect x='37' y='35' width='1' height='1' fill='%23ff4fc1' opacity='0.5'/><rect x='4' y='3' width='1' height='1' fill='%23ffffff' opacity='0.5'/><rect x='21' y='4' width='2' height='2' fill='%23ff4fc1' opacity='0.9'/><rect x='31' y='13' width='2' height='2' fill='%23ffd6f0' opacity='1'/><rect x='15' y='30' width='2' height='2' fill='%23ff4fc1' opacity='0.5'/><rect x='6' y='27' width='1' height='1' fill='%23a64dff' opacity='1'/><rect x='29' y='3' width='3' height='3' fill='%23ffffff' opacity='0.5'/><rect x='25' y='21' width='1' height='1' fill='%23ff4fc1' opacity='0.7'/><rect x='12' y='34' width='2' height='2' fill='%23ffd6f0' opacity='1'/><rect x='11' y='17' width='2' height='2' fill='%23ff4fc1' opacity='0.5'/><path d='M31 6h1v7h-1zM28 9h7v1h-7z' fill='%23fff'/><path d='M6 0h1v7h-1zM3 3h7v1h-7z' fill='%23fff'/></svg>");
  --star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23fff' stroke='%23ff2fa8' stroke-width='1'/></svg>");
  --stars-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' shape-rendering='crispEdges'><path d='M122 97h1v5h-1zM120 99h5v1h-5z' fill='%23ffffff'/><rect x='5' y='90' width='1' height='1' fill='%23a64dff'/><rect x='24' y='89' width='1' height='1' fill='%23ff2fa8'/><path d='M47 117h1v5h-1zM45 119h5v1h-5z' fill='%23a64dff'/><path d='M64 15h1v5h-1zM62 17h5v1h-5z' fill='%23ff2fa8'/><rect x='155' y='20' width='1' height='1' fill='%23a64dff'/><rect x='30' y='78' width='1' height='1' fill='%237a1fd1'/><rect x='111' y='26' width='1' height='1' fill='%23ffffff'/><rect x='105' y='75' width='1' height='1' fill='%23ffffff'/><path d='M55 3h1v5h-1zM53 5h5v1h-5z' fill='%23a64dff'/><path d='M100 127h1v5h-1zM98 129h5v1h-5z' fill='%237a1fd1'/><path d='M112 30h1v5h-1zM110 32h5v1h-5z' fill='%23ff2fa8'/><rect x='152' y='54' width='1' height='1' fill='%237a1fd1'/><rect x='25' y='38' width='1' height='1' fill='%23ff2fa8'/></svg>");
  --perf: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8'><rect x='3.3' y='0.7' width='9.4' height='6.6' rx='1.4' fill='%23f3f0ea'/></svg>");
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .8  0 0 0 0 .7  0 0 0 .09 0'/></filter><rect width='120' height='120' filter='url%28%23n%29'/></svg>");
  --tw-a: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='223' height='223' shape-rendering='crispEdges'><rect x='119' y='147' width='2' height='2' fill='%23ff2fa8'/><rect x='154' y='52' width='2' height='2' fill='%23ffffff'/><rect x='125' y='165' width='2' height='2' fill='%23c77dff'/><path d='M28 116h1v5h-1zM26 118h5v1h-5z' fill='%23ffd6f0'/><rect x='141' y='211' width='2' height='2' fill='%23ffffff'/><rect x='105' y='119' width='2' height='2' fill='%23c77dff'/><path d='M163 5h1v5h-1zM161 7h5v1h-5z' fill='%23c77dff'/></svg>");
  --tw-b: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='317' height='317' shape-rendering='crispEdges'><rect x='152' y='46' width='2' height='2' fill='%23ffffff'/><path d='M220 196h1v5h-1zM218 198h5v1h-5z' fill='%23c77dff'/><path d='M102 138h1v5h-1zM100 140h5v1h-5z' fill='%23ff2fa8'/><path d='M236 14h1v5h-1zM234 16h5v1h-5z' fill='%23ffffff'/><rect x='259' y='219' width='2' height='2' fill='%23ffffff'/><path d='M224 185h1v5h-1zM222 187h5v1h-5z' fill='%23ffffff'/><rect x='22' y='305' width='2' height='2' fill='%23ffd6f0'/><rect x='114' y='189' width='2' height='2' fill='%23c77dff'/><rect x='192' y='296' width='2' height='2' fill='%23ffd6f0'/></svg>");
  color-scheme: dark;
}

html { background: var(--ink) var(--stars-bg) repeat fixed; }
body {
  margin: 0;
  background: transparent;
  color: var(--paper);
  font: 13px/1.45 var(--f-body);
}
img { max-width: 100%; height: auto; }

a { color: var(--hot); }
a:visited { color: var(--violet); }
a:hover { color: var(--ink); background: var(--hot); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- header ---------- */
.site-top { padding-block: 14px 0; }
.site-title {
  display: inline-block;
  margin: 0 0 6px;
  font: 40px/1.1 var(--f-head);
  transform: rotate(-2deg);
}
.site-title a, .site-title a:hover, .site-title a:visited { background: none; text-decoration: none; }
.site-desc { margin: 0 0 10px; font: italic 14px var(--f-serif); color: var(--violet); }

.nav {
  background: var(--purple);
  border-top: 3px double var(--hot);
  border-bottom: 3px double var(--hot);
  padding: 5px 8px;
  margin-bottom: 14px;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.nav li { font: bold 11px var(--f-body); }
.nav li + li::before { content: " | "; color: var(--hot); padding: 0 6px; }
.nav a, .nav a:visited { color: var(--paper); text-decoration: none; }
.nav a:hover { background: var(--hot); color: var(--ink); }

.anim-link { margin: 0 0 8px; }
.anim-btn, .anim-btn:visited {
  display: inline-block;
  padding: 3px 8px;
  font: bold 12px var(--f-body);
  color: var(--ink);
  background: var(--hot);
  border: 2px outset #ff9ad6;
  text-decoration: none;
  transform: rotate(1deg);
}
.anim-btn:hover { color: var(--paper); background: var(--purple); border-style: inset; }
.anim-btn span { display: inline-block; animation: anim-bob 1s steps(2) infinite; }
@keyframes anim-bob { 50% { transform: translateY(2px); } }

/* ---------- glitter ---------- */
.glitter {
  color: var(--hot);
  background-color: var(--hot);
  background-image: var(--g1), linear-gradient(170deg, #ff8ad8 0%, #ff2fa8 40%, #b44dff 75%, #ffffff 100%);
  background-size: 26px 26px, 100% 100%;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(3px 3px 0 var(--purple));
  animation: glitter-text .45s steps(1) infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .glitter { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@keyframes glitter-text {
  0%   { background-image: var(--g1), linear-gradient(170deg, #ff8ad8 0%, #ff2fa8 40%, #b44dff 75%, #ffffff 100%); }
  33%  { background-image: var(--g2), linear-gradient(170deg, #ff8ad8 0%, #ff2fa8 40%, #b44dff 75%, #ffffff 100%); }
  66%  { background-image: var(--g3), linear-gradient(170deg, #ff8ad8 0%, #ff2fa8 40%, #b44dff 75%, #ffffff 100%); }
}

.gframe {
  display: inline-block;
  position: relative;
  padding: 6px;
  background-color: var(--hot);
  background-image: var(--g1);
  animation: glitter-bg .45s steps(1) infinite;
  max-width: 100%;
  box-sizing: border-box;
}
.gframe img { display: block; }
.gframe--purple { background-color: var(--purple); }
@keyframes glitter-bg {
  0%  { background-image: var(--g1); }
  33% { background-image: var(--g2); }
  66% { background-image: var(--g3); }
}

.glitter-rule {
  height: 8px;
  border: 0;
  margin: 14px 0;
  background-color: var(--purple);
  background-image: var(--g2);
  animation: glitter-bg .45s steps(1) infinite;
}

.stamp {
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--star) center / contain no-repeat;
  animation: twinkle .8s steps(1) infinite;
  pointer-events: none;
  z-index: 2;
}
.stamp--a { top: -12px; left: -10px; }
.stamp--b { bottom: -10px; right: -12px; width: 34px; height: 34px; animation-delay: .3s; }
.stamp--c { top: 20%; right: -14px; width: 18px; height: 18px; animation-delay: .55s; }
@keyframes twinkle {
  0%  { transform: scale(1) rotate(0deg); }
  50% { transform: scale(.45) rotate(45deg); }
}

/* ---------- columns + boxes ---------- */
.cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.box {
  border: 2px solid var(--purple);
  background: var(--ink);
  padding: 0 8px 8px;
  min-width: 0;
}
.box-head {
  margin: 0 -8px 8px;
  padding: 4px 8px;
  background: var(--purple);
  color: var(--paper);
  font: bold 12px var(--f-body);
}
.box--white { background: var(--paper); color: var(--ink); border-color: var(--hot); }
.box--white .box-head { background: var(--hot); color: var(--ink); }
.box--lilac { background: var(--lilac); color: var(--ink); border: 3px ridge var(--violet); }
.box--lilac .box-head { background: var(--purple); }
.box--white a, .box--lilac a { color: var(--purple); }
.box--white a:visited, .box--lilac a:visited { color: #9b1a6f; }
.box--white a:hover, .box--lilac a:hover { background: var(--purple); color: var(--paper); }
.box--plain { border: 0; padding: 0; background: none; }

.subhead { margin: 10px 0 4px; font: bold 13px var(--f-body); color: var(--hot); }
.box--white .subhead { color: #c4007a; }
.small { font-size: 11px; }
.more { font-size: 11px; font-weight: bold; }

/* ---------- profile block ---------- */
.profile-name { margin: 0 0 8px; font: 30px/1.15 var(--f-head); overflow-wrap: anywhere; }
.profile-row { display: flex; gap: 14px; align-items: flex-start; }
.profile-pic { flex: 0 0 auto; width: 140px; }
.profile-pic img { width: 128px; height: 128px; object-fit: cover; }
.profile-pic .nopic { width: 128px; height: 128px; display: grid; place-items: center; background: var(--ink); color: var(--hot); font: 22px var(--f-pixel); text-align: center; }
.profile-facts { min-width: 0; font-size: 12px; }
.profile-facts p { margin: 0 0 6px; }
.headline { font: italic bold 14px var(--f-serif); color: var(--paper); }
.mood b { color: var(--hot); }
.view-my { margin-top: 8px; font-size: 11px; }
.view-my b { color: var(--violet); }

.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.contact-grid a, .btn {
  display: block;
  padding: 3px 6px;
  border: 2px outset #d9d9d9;
  background: #efefef;
  color: var(--ink) !important;
  font: 11px var(--f-body);
  text-decoration: none;
  text-align: center;
}
.contact-grid a:hover, .btn:hover { background: var(--pinkpale) !important; }
.contact-grid a:active, .btn:active { border-style: inset; }

.url-box { font: 12px var(--f-body); overflow-wrap: anywhere; border: 1px solid #999; background: var(--paper); color: var(--ink); padding: 4px 6px; }

table.interests { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 12px; }
table.interests th, table.interests td { vertical-align: top; padding: 4px 6px; text-align: left; }
table.interests th { width: 30%; background: var(--pinkpale); color: var(--purple); font-weight: bold; }
table.interests td { background: var(--paper); color: var(--ink); overflow-wrap: anywhere; }

/* ---------- right column ---------- */
.extnet {
  border: 3px double var(--hot);
  background: var(--paper);
  color: var(--ink);
  padding: 16px 12px;
  font: bold 17px var(--f-body);
  text-align: center;
}
.extnet .glitter { font: 24px var(--f-head); }

.blog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.blog-list li { overflow-wrap: anywhere; }
.blog-list .date { color: #666; font-size: 11px; }
.box:not(.box--white):not(.box--lilac) .blog-list .date { color: var(--violet); }

.blurbs { font: 13px/1.55 var(--f-hand); }
.blurbs p { margin: 0 0 8px; }

.marquee { overflow: hidden; white-space: nowrap; border: 1px dashed var(--hot); padding: 3px 0; font: bold 12px var(--f-body); }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.top8-count { margin: 0 0 8px; font-size: 12px; }
.top8-count b { color: var(--hot); }
.top8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.top8 a { display: block; text-decoration: none; text-align: center; font-size: 11px; font-weight: bold; overflow-wrap: anywhere; }
.top8 a:hover { background: none; color: var(--paper); }
.top8 .cover { display: block; margin-top: 3px; border: 2px solid var(--paper); aspect-ratio: 1; overflow: hidden; background: var(--purple); }
.top8 .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top8 a:hover .cover { border-color: var(--hot); }

.pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pics--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pic { display: block; position: relative; border: 3px ridge var(--hot); background: var(--ink); }
.pic:hover { background: var(--ink); }
.pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pic::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--g1);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.pic:hover::after, .pic:focus-visible::after { opacity: 1; animation: glitter-bg .45s steps(1) infinite; }
.pic .cap { display: block; padding: 3px 4px; font-size: 10px; color: var(--paper); overflow-wrap: anywhere; }

/* ---------- blinkies + counter ---------- */
.blinkies { display: flex; flex-wrap: wrap; gap: 6px; }
.blinkie {
  display: inline-block;
  min-width: 150px;
  max-width: 100%;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid var(--paper);
  background: var(--purple);
  color: var(--paper);
  font: 17px/18px var(--f-pixel);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  animation: blink 1s steps(1) infinite;
}
.blinkie:nth-child(2n) { transform: rotate(-2deg); animation-delay: .5s; background: var(--hot); color: var(--ink); }
.blinkie:nth-child(3n) { transform: rotate(1.5deg); }
@keyframes blink { 50% { background: var(--ink); color: var(--hot); } }

.counter { font-size: 11px; text-align: center; }
.counter .digits { display: inline-flex; gap: 2px; margin: 4px 0; }
.counter .digits span { display: inline-block; width: 14px; background: #1a001a; border: 1px inset #777; color: var(--hot); font: 20px/22px var(--f-pixel); }

/* ---------- posts ---------- */
.entry { background: var(--paper); color: var(--ink); border: 2px solid var(--hot); padding: 0 12px 14px; }
.entry .box-head { margin: 0 -12px 10px; background: var(--hot); color: var(--ink); }
.entry-title { margin: 6px 0 2px; font: bold 24px/1.2 var(--f-serif); color: var(--purple); text-wrap: balance; overflow-wrap: anywhere; }
.entry-title a { color: var(--purple); text-decoration: none; }
.entry-title a:hover { background: var(--purple); color: var(--paper); }
.entry-meta { font-size: 11px; color: #555; margin-bottom: 10px; }
.entry-content { font: 15px/1.6 var(--f-serif); max-width: 65ch; overflow-wrap: anywhere; }
.entry-content a { color: var(--purple); }
.entry-content a:hover { background: var(--purple); color: var(--paper); }
.entry-content img, .entry-content figure { max-width: 100%; height: auto; }
.entry-content figure { margin: 12px 0; }
.entry-content pre { overflow-x: auto; }
.entry-content blockquote { margin: 10px 0; padding: 4px 12px; border-left: 4px dotted var(--hot); font-style: italic; }
.entry .gframe { margin-bottom: 12px; }
.entry-foot { margin-top: 14px; font-size: 11px; }
.entry-foot a { color: var(--purple); }
.entry-foot a:hover { background: var(--purple); color: var(--paper); }

.list-item { border-bottom: 1px dashed var(--hot); padding-block: 10px; }
.list-item:last-child { border-bottom: 0; }
.list-item p { margin: 4px 0; }

.archive-title { margin: 0 0 10px; font: 30px/1.15 var(--f-head); transform: rotate(-1deg); display: inline-block; }

.pagination { margin-top: 12px; font: bold 12px var(--f-body); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 4px; }
.pagination .page-numbers { padding: 2px 7px; border: 2px outset #d9d9d9; background: #efefef; color: var(--ink); text-decoration: none; }
.pagination .current { background: var(--hot); border-style: inset; }

.post-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }

/* ---------- comments ---------- */
.comments { margin-top: 14px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.comment-list .children { list-style: none; margin: 4px 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cmt { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px; }
.cmt-who { background: var(--pinkpale); color: var(--ink); padding: 6px; text-align: center; font-size: 11px; font-weight: bold; overflow-wrap: anywhere; }
.cmt-who img { display: block; margin: 0 auto 4px; border: 2px solid var(--purple); }
.cmt-body { background: var(--paper); color: var(--ink); padding: 6px 8px; font-size: 12px; overflow-wrap: anywhere; }
.cmt-body .when { color: #555; font-size: 10px; margin-bottom: 4px; }
.cmt-body p { margin: 0 0 6px; }
.comment-respond { margin-top: 12px; }
.comment-respond label { display: block; font-weight: bold; font-size: 12px; }
.comment-respond input[type=text], .comment-respond input[type=email], .comment-respond input[type=url], .comment-respond textarea {
  width: 100%; box-sizing: border-box; border: 2px inset #ccc; background: var(--paper); color: var(--ink); font: 13px var(--f-body); padding: 4px;
}
.comment-respond .submit { border: 2px outset #d9d9d9; background: #efefef; color: var(--ink); font: bold 12px var(--f-body); padding: 3px 10px; cursor: pointer; }
.comment-respond .submit:active { border-style: inset; }

.admin-hint { border: 2px dashed var(--hot); background: var(--pinkpale); color: var(--ink); padding: 6px 8px; font-size: 11px; }

/* ---------- footer ---------- */
.site-foot { padding-block: 18px calc(156px + 105vh); text-align: center; font-size: 11px; color: var(--violet); }

/* ---------- cursor sparkles (js) ---------- */
.spark {
  position: fixed;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--star) center / contain no-repeat;
  pointer-events: none;
  z-index: 9999;
  animation: spark-fall .8s steps(5) forwards;
}
@keyframes spark-fall {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx, 0px), 30px) scale(.2); opacity: 0; }
}

/* WordPress bits */
.alignleft { float: left; margin: 0 12px 8px 0; }
.alignright { float: right; margin: 0 0 8px 12px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: 11px; color: #555; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }


/* ---------- cursor ---------- */
html, body { cursor: url("images/cursor.png?v=1.33") 0 0, auto; }
a, button, select, label, summary, .pl-bar, input[type=submit], input[type=checkbox], input[type=radio] {
  cursor: url("images/cursor-link.png?v=1.33") 0 0, pointer;
}
input[type=text], input[type=email], input[type=url], input[type=search], textarea { cursor: text; }

/* ---------- player ---------- */
.player { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pl-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  padding: 0;
  display: grid; place-items: center;
  border: 2px outset #d9d9d9;
  background: #efefef;
  color: var(--ink);
}
.pl-btn:active { border-style: inset; }
.pl-pause { display: none; }
.player.is-playing .pl-play { display: none; }
.player.is-playing .pl-pause { display: block; }
.player.is-playing .pl-btn { background: var(--pinkpale); border-style: inset; }
.pl-main { flex: 1 1 auto; min-width: 0; }
.pl-title { margin-bottom: 3px; font: bold 12px var(--f-body); overflow-wrap: anywhere; }
.pl-bar {
  position: relative;
  height: 12px;
  border: 2px inset #777;
  background: #1a001a;
  touch-action: none;
}
.pl-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 0;
  background-color: var(--hot);
  background-image: var(--g1);
}
.pl-time { margin-top: 3px; font: 17px/1 var(--f-pixel); color: var(--hot); }
.box--white .pl-time, .box--lilac .pl-time { color: #c4007a; }

/* ---------- music page ---------- */
.tracks { display: flex; flex-direction: column; gap: 10px; }
.track {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hot);
}
.track:last-child { border-bottom: 0; padding-bottom: 0; }
.track-cover { display: block; aspect-ratio: 1; border: 2px solid var(--paper); background: var(--purple); overflow: hidden; }
.track-cover:hover { background: var(--purple); border-color: var(--hot); }
.track-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.track-title { margin: 0 0 2px; font: bold 15px/1.25 var(--f-body); overflow-wrap: anywhere; }
.track-date { margin-bottom: 8px; font-size: 11px; color: var(--violet); }

/* ---------- gif wall ---------- */
.gif-wall-content > * { margin-block: 0 10px; }
.gif-wall-content p { font-size: 13px; }
.gif-wall .wp-block-gallery,
.gif-wall .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px !important;
  margin: 0 0 10px;
}
.gif-wall .wp-block-gallery figure.wp-block-image,
.gif-wall .wp-block-gallery .blocks-gallery-item,
.gif-wall-content > figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 3px ridge var(--hot);
  background: var(--ink);
  overflow: hidden;
}
.gif-wall-content > figure.wp-block-image { max-width: 240px; }
.gif-wall .wp-block-gallery img,
.gif-wall-content > figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}
.gif-wall figcaption { display: none; }


/* ---------- film strips + contact sheet ---------- */
.sheet {
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: #f3f0ea;
  border: 1px solid var(--paper);
}
.roll {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
}
.strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hot) var(--ink);
  max-width: 100%;
}
.strip::-webkit-scrollbar { height: 10px; }
.strip::-webkit-scrollbar-track { background: var(--ink); }
.strip::-webkit-scrollbar-thumb { background: var(--hot); border: 2px solid var(--ink); }
.strip.is-dragging { user-select: none; }
.strip.is-dragging .frame { pointer-events: none; }
.strip-row {
  display: flex;
  width: max-content;
}

/* one frame = 38mm of 35mm film at about 3.37px per mm */
.frame {
  flex: 0 0 auto;
  width: 128px;
  display: grid;
  grid-template-rows: 9px 8px auto 8px 9px;
  row-gap: 1px;
  padding: 2px 0;
  background-color: #17110d;
  background-image: var(--grain);
  text-decoration: none;
  position: relative;
}
.frame:hover, .frame:visited:hover { background-color: #17110d; background-image: var(--grain); }
.frame:focus-visible { outline: 2px solid var(--hot); outline-offset: -2px; }
.perfs {
  display: block;
  background-image: var(--perf);
  background-size: 16px 8px;
  background-repeat: repeat-x;
}
.edge {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
  font: 7px/9px "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-stretch: condensed;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #e9a24c;
  opacity: .9;
}
.edge-bot { justify-content: space-between; }
.edge-bot b { font-weight: normal; }
.edge-bot i { font-style: normal; }
.edge-bot .dx {
  flex: 0 0 auto;
  width: 34px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #e9a24c 0 1px, transparent 1px 3px, #e9a24c 3px 5px, transparent 5px 6px, #e9a24c 6px 7px, transparent 7px 10px);
  opacity: .8;
}
.shot {
  position: relative;
  display: block;
  margin: 0 3px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: #050302;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 5px 1px rgba(0,0,0,.55);
  pointer-events: none;
}
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}
.frame.is-portrait .shot img {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 66.667%;
  height: 150%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.frame:hover .shot, .frame:focus-visible .shot { outline: 2px solid var(--hot); outline-offset: 1px; }
.grease {
  position: absolute;
  inset: -6% -4%;
  width: 108%;
  height: 112%;
  color: var(--hot);
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}


/* ---------- Laika ---------- */
.wolf {
  position: fixed;
  left: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  width: 80px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  z-index: 60;
}
.wolf:focus-visible { outline: 2px dashed var(--hot); outline-offset: 2px; }
.wolf-sprite {
  display: block;
  width: 80px;
  height: 52px;
  background: url("images/laika-sprites.png?v=1.33") 0 0 / 560px 52px no-repeat;
  image-rendering: pixelated;
}
.wolf-heart {
  position: absolute;
  left: 50%;
  top: -4px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
}
.wolf-heart svg { display: block; width: 21px; height: 18px; }
.wolf-heart.is-on { animation: wolf-heart 1s steps(6) forwards; }
@keyframes wolf-heart {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}
.wolf-z {
  position: absolute;
  left: 58px;
  top: 4px;
  font: 20px/1 var(--f-pixel);
  color: var(--hot);
  opacity: 0;
  pointer-events: none;
}
.wolf.is-sleeping .wolf-z { animation: wolf-z 1.6s steps(4) infinite; }
@keyframes wolf-z {
  0%   { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(8px, -20px); }
}


/* ---------- night sky ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tw { position: absolute; inset: 0; }
.sky-air { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.tw-a { background-image: var(--tw-a); animation: twinkle-a 1.8s steps(1) infinite; }
.tw-b { background-image: var(--tw-b); animation: twinkle-b 2.6s steps(1) infinite; }
@keyframes twinkle-a { 0% { opacity: 1; } 55% { opacity: .15; } }
@keyframes twinkle-b { 0% { opacity: .2; } 40% { opacity: 1; } 75% { opacity: .5; } }
.moon {
  position: absolute;
  top: 14px;
  right: max(24px, env(safe-area-inset-right, 0px));
  width: 48px;
  height: 48px;
  background: url("images/moon.png?v=1.33") 0 0 / 48px 48px no-repeat;
  image-rendering: pixelated;
}
.shoot {
  position: absolute;
  top: 40px;
  left: 30%;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd6f0 60%, #ffffff);
  opacity: 0;
  transform: rotate(18deg);
  animation: shoot 17s steps(1) infinite;
}
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  96%  { opacity: 1; transform: translate(0, 0) rotate(18deg); }
  97%  { opacity: 1; transform: translate(60px, 20px) rotate(18deg); }
  98%  { opacity: 1; transform: translate(120px, 40px) rotate(18deg); }
  99%  { opacity: 1; transform: translate(180px, 60px) rotate(18deg); }
  100% { opacity: 0; transform: translate(240px, 80px) rotate(18deg); }
}
.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 156px;
  border-bottom: env(safe-area-inset-bottom, 0px) solid #0a040e;
}
/* each layer is 5 screens wide so it can pan; --hz-pf is how much it moves per pixel of pan */
.hz {
  position: absolute;
  top: 0;
  left: -600vw;
  right: -600vw;
  height: 156px;
  image-rendering: pixelated;
  background-size: 10240px 156px;
  background-position-x: 50%;
  background-position-y: 0;
  background-repeat: no-repeat;
  transform: translate(calc(var(--hz-shift, 0px) - var(--hz-pan, 0px) * var(--hz-pf, 1)), calc(var(--hz-drop, 0) * var(--hz-depth, 0px)));
}
.hz-giants  { --hz-depth: 39px; --hz-pf: .35; top: auto; bottom: 0; height: 200px; background-image: url("images/horizon-giants.png?v=1.33"); background-size: 8192px 2600px; }
.hz-city    { --hz-depth: 46px; --hz-pf: .4; background-image: url("images/horizon-city.png?v=1.33"); background-size: 8192px 312px; animation: hz-city 2.4s steps(1) infinite; }
@keyframes hz-city { 0% { background-position-y: 0; } 50% { background-position-y: -156px; } }
.hz-cranes-c { --hz-depth: 46px; --hz-pf: .4; background: none; }
.hz-cranes-f { --hz-depth: 78px; --hz-pf: .65; background: none; }
.hz-cranes-m, .hz-iron { --hz-depth: 98px; --hz-pf: .8; background: none; }
.hz-tunnel  { --hz-depth: 98px; --hz-pf: .8; background-image: url("images/horizon-tunnel.png?v=1.33"); }
.cranes-c, .cranes-f, .cranes-m, .iron { position: absolute; top: 0; height: 156px; image-rendering: pixelated; }
.cranes-c { left: calc(50% + 926px); width: 180px; }
.cranes-f { left: calc(50% + 1294px); width: 348px; }
.cranes-m { left: calc(50% + 1646px); width: 180px; }
.iron { left: calc(50% + 3052px); top: -110px; width: 500px; height: 266px; }
.hz-terminal { --hz-depth: 98px; --hz-pf: .8; background-image: url("images/horizon-terminal.png?v=1.33"); }
.hz-sea     { --hz-depth: 78px; --hz-pf: .65; left: calc(50% + 3472px); right: auto; width: 40000px; top: 100px; height: 56px; background: url("images/sea.png?v=1.33") 0 0 / 256px 56px repeat-x; }
.hz-rail, .hz-road { clip-path: inset(0 calc(50% - 4182px) 0 0); }
.hz-launch  { --hz-depth: 46px; --hz-pf: .4; --ls-x: -426px; background: none; }
.ls-site, .ls-rocket, .ls-trail { position: absolute; image-rendering: pixelated; }
.ls-site { left: calc(50% + var(--ls-x) - 20px); top: 8px; width: 72px; height: 92px; background: url("images/launch-site.png?v=1.33") 0 0 / 216px 92px no-repeat; }
.ls-site.is-armaway { background-position: -72px 0; }
.ls-site.is-open { background-position: -144px 0; }
.ls-beacons { position: absolute; left: calc(50% + var(--ls-x) - 20px); top: 8px; width: 72px; height: 92px; background: url("images/launch-beacons.png?v=1.33") 0 0 / 72px 92px no-repeat; image-rendering: pixelated; display: none; }
.ls-beacons.is-on { display: block; animation: hz-blink .7s steps(1) infinite; }
.ls-vent { position: absolute; width: 4px; height: 4px; background: #e2d2ec; animation: ls-vent 1.6s steps(4) forwards; }
@keyframes ls-vent { from { opacity: .7; } to { opacity: 0; transform: translate(var(--dx, 0px), -6px) scale(2.5); } }
.ls-rocket { left: calc(50% + var(--ls-x)); top: 16px; width: 22px; height: 96px; background: url("images/rocket.png?v=1.33") 0 0 / 66px 96px no-repeat; transform-origin: 11px 40px; }
.ls-flame { position: absolute; left: 8px; top: 92px; width: 6px; height: 0; background: linear-gradient(#fff8de 0 22%, #ffb85a 22% 50%, #ff6e32 50% 78%, transparent 78%); }
.ls-rocket.is-gone { display: none; }
.ls-flood { position: absolute; left: calc(50% + var(--ls-x) - 56px); top: -20px; width: 144px; height: 120px; background: url("images/launch-flood.png?v=1.33") 0 0 / 1152px 120px no-repeat; image-rendering: pixelated; pointer-events: none; animation: ls-flood 9s steps(1) infinite; }
@keyframes ls-flood { 0.0% { background-position-x: -0px; } 7.14% { background-position-x: -144px; } 14.29% { background-position-x: -288px; } 21.43% { background-position-x: -432px; } 28.57% { background-position-x: -576px; } 35.71% { background-position-x: -720px; } 42.86% { background-position-x: -864px; } 50.0% { background-position-x: -1008px; } 57.14% { background-position-x: -864px; } 64.29% { background-position-x: -720px; } 71.43% { background-position-x: -576px; } 78.57% { background-position-x: -432px; } 85.71% { background-position-x: -288px; } 92.86% { background-position-x: -144px; } }
.ls-plume { position: absolute; left: calc(50% + var(--ls-x) - 229px); top: -512px; width: 480px; height: 640px; image-rendering: pixelated; pointer-events: none; }
html.over-rocket, html.over-rocket body { cursor: url("images/cursor-link.png?v=1.33") 0 0, pointer; }
.hz-distant { --hz-depth: 52px; --hz-pf: .45; background-image: url("images/horizon-distant.png?v=1.33"); }
.hz-lights  { --hz-depth: 52px; --hz-pf: .45; background-image: url("images/horizon-lights.png?v=1.33"); animation: hz-blink 1.6s steps(1) infinite; }
.hz-fog     { opacity: calc(1 - var(--hz-drop, 0)); }
.hz-fog-a   { --hz-depth: 58px; --hz-pf: .5; background-image: url("images/fog-a.png?v=1.33"); }
.hz-hv      { --hz-depth: 65px; --hz-pf: .55; --hv-end: min(33.333vw, calc(50vw - 130px)); left: calc(50vw - 1148px); right: auto; width: calc(var(--hv-end) - 840px - 50vw + 1148px); background: url("images/horizon-hv-tile.png?v=1.33") right top / 280px 156px repeat-x; }
.hz-hv::before { content: ""; position: absolute; top: 0; right: 100%; width: 560px; height: 156px; background: url("images/horizon-dam.png?v=1.33") 0 0 / 560px 156px no-repeat; image-rendering: pixelated; }
.hz-hv::after { content: ""; position: absolute; top: 0; left: 100%; margin-left: -120px; width: 960px; height: 156px; background: url("images/horizon-hv.png?v=1.33") 0 0 / 960px 156px no-repeat; image-rendering: pixelated; }
.hz-far     { --hz-depth: 78px; --hz-pf: .65; background-image: url("images/horizon-far.png?v=1.33"); }
.hz-town    { --hz-depth: 78px; --hz-pf: .65; background: none; }
.town-lights { position: absolute; left: calc(50% - 1552px); top: 0; width: 678px; height: 156px; image-rendering: pixelated; }
.hz-array   { --hz-depth: 78px; --hz-pf: .65; background-image: url("images/horizon-array.png?v=1.33"); background-size: 8192px 2028px; }
.hz-scope-layer { --hz-depth: 78px; --hz-pf: .65; background: none; }
.hz-fog-b   { --hz-depth: 88px; --hz-pf: .7; background-image: url("images/fog-b.png?v=1.33"); }
.hz-mid     { --hz-depth: 98px; --hz-pf: .8; background-image: url("images/horizon.png?v=1.33"); }
.hz-mine    { --hz-depth: 98px; --hz-pf: .8; background: none; }
.bwe-wheel { position: absolute; left: calc(50% - 3046px); top: 64px; width: 44px; height: 44px; background: url("images/bwe-wheel.png?v=1.33") 0 0 / 352px 44px no-repeat; image-rendering: pixelated; animation: bwe-turn 2.4s steps(8) infinite; }
@keyframes bwe-turn { from { background-position-x: 0; } to { background-position-x: -352px; } }
.hz-msmoke  { --hz-depth: 98px; --hz-pf: .8; background-image: url("images/horizon-msmoke.png?v=1.33"); background-size: 8192px 624px; animation: hz-msmoke 1.6s steps(1) infinite; }
@keyframes hz-msmoke { 0% { background-position-y: 0; } 25% { background-position-y: -156px; } 50% { background-position-y: -312px; } 75% { background-position-y: -468px; } }
.xing { position: absolute; left: calc(50% - 702px); top: 84px; width: 72px; height: 44px; background: url("images/crossing.png?v=1.33") 0 0 / 216px 44px no-repeat; image-rendering: pixelated; }
.xing.is-down { background-position: -72px 0; }
.xing::after { content: ""; position: absolute; inset: 0; background: url("images/crossing.png?v=1.33") -144px 0 / 216px 44px no-repeat; image-rendering: pixelated; opacity: 0; }
.xing.is-down::after { animation: hz-blink .8s steps(1) infinite; opacity: 1; }
.hz-rail    { --hz-depth: 98px; --hz-pf: .8; background: none; overflow: hidden; }
.train { position: absolute; left: 0; top: 92px; height: 24px; transform-origin: center; }
.hz-rail2 .train { top: 86px; }
.train i { position: absolute; top: 0; height: 24px; background-image: url("images/trains.png?v=1.33"); background-repeat: no-repeat; image-rendering: pixelated; }
.train .eot { position: absolute; background: #ff2828; animation: hz-blink 1s steps(1) infinite; }
.hz-road    { --hz-depth: 98px; --hz-pf: .8; background: none; overflow: hidden; }
.hz-strip   { --hz-depth: 98px; --hz-pf: .8; background-image: url("images/horizon-strip.png?v=1.33"); background-size: 8192px 312px; animation: hz-strip 1.4s steps(1) infinite; }
@keyframes hz-strip { 0% { background-position-y: 0; } 50% { background-position-y: -156px; } }
.bus-person { position: absolute; left: calc(50% - 1278px); top: 118px; width: 12px; height: 16px; background: url("images/bus-person.png?v=1.33") 0 0 / 24px 16px no-repeat; image-rendering: pixelated; animation: bus-person 2.2s steps(1) infinite; transition: opacity .6s steps(3); }
@keyframes bus-person { 0% { background-position-x: 0; } 50% { background-position-x: -12px; } }
.bus-person.is-gone { opacity: 0; }
.pan-hint { position: absolute; left: 50%; bottom: 196px; width: 90px; height: 30px; margin-left: -45px; background: url("images/pan-hint.png?v=1.33") 0 0 / 90px 30px no-repeat; image-rendering: pixelated; opacity: 0; transition: opacity .9s steps(4); }
.pan-hint.is-on { opacity: .9; transition: opacity .3s steps(2); }
@media (hover: none) { .pan-hint { display: none; } }
.veh { position: absolute; left: 0; background-image: url("images/vehicles.png?v=1.33"); background-repeat: no-repeat; image-rendering: pixelated; transform-origin: center; }
.hz-fog-c   { --hz-depth: 110px; --hz-pf: .9; background-image: url("images/fog-c.png?v=1.33"); }
.hz-front   { --hz-depth: 117px; --hz-pf: 1; background-image: url("images/horizon-front.png?v=1.33"); }
.hz-rave    { --hz-depth: 117px; --hz-pf: 1; background: none; overflow: visible; }
.rave { position: absolute; left: calc(50% + 2692px); top: -200px; width: 300px; height: 356px; image-rendering: pixelated; }
.hz-smoke   { --hz-depth: 117px; --hz-pf: 1; background-image: url("images/horizon-smoke.png?v=1.33"); background-size: 8192px 468px; animation: hz-smoke 1.2s steps(1) infinite; }
@keyframes hz-blink { 50% { opacity: 0; } }
@keyframes hz-smoke { 0% { background-position-y: 0; } 33% { background-position-y: -156px; } 66% { background-position-y: -312px; } }
.scope {
  position: absolute;
  top: 28px;
  left: calc(50% + 224px);
  width: 76px;
  height: 72px;
  background: url("images/telescope.png?v=1.33") 0 0 / 988px 72px no-repeat;
  image-rendering: pixelated;
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .horizon { left: -50%; right: -50%; transform: scale(.5); transform-origin: 50% 100%; border-bottom-width: calc(env(safe-area-inset-bottom, 0px) * 2); }
  .hz-front, .hz-smoke, .hz-rave { --hz-shift: -120px; }
  .hz-mid, .hz-msmoke, .hz-rail, .hz-road, .hz-strip, .hz-mine, .hz-cranes-m, .hz-iron, .hz-tunnel { --hz-shift: -80px; }
  .pan-hint { bottom: 110px; }
  .hz-distant, .hz-lights { --hz-shift: -200px; }
  .hz-giants { --hz-shift: -300px; }
  .hz-launch { --hz-shift: 170px; }
  .hz-scope-layer { --hz-shift: -20px; }
  .hz-hv { --hv-end: calc(100vw - 230px); }
  .wolf, .wolf-sprite { width: 40px; height: 26px; }
  .wolf-sprite { background-size: 280px 26px; }
  .wolf-z { left: 29px; top: 0; font-size: 14px; }
  .wolf-heart svg { width: 14px; height: 12px; }
  .moon { top: 8px; width: 32px; height: 32px; background-size: 32px 32px; }
  .site-title { font-size: 30px; }
}
@media (max-width: 480px) {
  .top8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pics, .pics--big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-row { flex-direction: column; }
  .cmt { grid-template-columns: minmax(0, 1fr); }
  .track { grid-template-columns: 64px minmax(0, 1fr); }
  .gif-wall .wp-block-gallery, .gif-wall .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .glitter, .gframe, .glitter-rule, .stamp, .blinkie, .marquee span, .pic:hover::after, .wolf-heart.is-on, .wolf.is-sleeping .wolf-z, .tw, .shoot, .hz-lights, .hz-smoke, .hz-msmoke, .xing.is-down::after, .anim-btn span, .hz-city, .hz-strip, .bus-person, .ls-flood, .bwe-wheel { animation: none !important; }
  .hz { transform: translateX(calc(var(--hz-shift, 0px) - var(--hz-pan, 0px) * var(--hz-pf, 1))); }
  .marquee span { padding-left: 0; }
  .spark { display: none; }
}

/* ---------- big screens: everything 1.5x, like browser zoom 150% ---------- */
@media (min-width: 1100px) {
body {
  margin: 0;
  background: transparent;
  color: var(--paper);
  font: 19.5px/1.45 var(--f-body);
}
a:focus-visible, button:focus-visible { outline: 3px dashed var(--paper); outline-offset: 3px; }
.wrap {
  max-width: 1290px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.site-top { padding-block: 21px 0; }
.site-title {
  display: inline-block;
  margin: 0 0 9px;
  font: 60px/1.1 var(--f-head);
  transform: rotate(-2deg);
}
.site-desc { margin: 0 0 15px; font: italic 21px var(--f-serif); color: var(--violet); }
.nav {
  background: var(--purple);
  border-top: 4.5px double var(--hot);
  border-bottom: 4.5px double var(--hot);
  padding: 7.5px 12px;
  margin-bottom: 21px;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 0; }
.nav li { font: bold 16.5px var(--f-body); }
.nav li + li::before { content: " | "; color: var(--hot); padding: 0 9px; }
.anim-link { margin: 0 0 12px; }
.anim-btn, .anim-btn:visited {
  display: inline-block;
  padding: 4.5px 12px;
  font: bold 18px var(--f-body);
  color: var(--ink);
  background: var(--hot);
  border: 3px outset #ff9ad6;
  text-decoration: none;
  transform: rotate(1deg);
}
@keyframes anim-bob { 50% { transform: translateY(3px); } }
.glitter {
  color: var(--hot);
  background-color: var(--hot);
  background-image: var(--g1), linear-gradient(170deg, #ff8ad8 0%, #ff2fa8 40%, #b44dff 75%, #ffffff 100%);
  background-size: 39px 39px, 100% 100%;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(4.5px 4.5px 0 var(--purple));
  animation: glitter-text .45s steps(1) infinite;
}
.gframe {
  display: inline-block;
  position: relative;
  padding: 9px;
  background-color: var(--hot);
  background-image: var(--g1);
  animation: glitter-bg .45s steps(1) infinite;
  max-width: 100%;
  box-sizing: border-box;
}
.glitter-rule {
  height: 12px;
  border: 0;
  margin: 21px 0;
  background-color: var(--purple);
  background-image: var(--g2);
  animation: glitter-bg .45s steps(1) infinite;
}
.stamp {
  position: absolute;
  width: 39px;
  height: 39px;
  background: var(--star) center / contain no-repeat;
  animation: twinkle .8s steps(1) infinite;
  pointer-events: none;
  z-index: 2;
}
.stamp--a { top: -18px; left: -15px; }
.stamp--b { bottom: -15px; right: -18px; width: 51px; height: 51px; animation-delay: .3s; }
.stamp--c { top: 20%; right: -21px; width: 27px; height: 27px; animation-delay: .55s; }
.cols { display: grid; grid-template-columns: 450px minmax(0, 1fr); gap: 24px; align-items: start; }
.col { min-width: 0; display: flex; flex-direction: column; gap: 21px; }
.box {
  border: 3px solid var(--purple);
  background: var(--ink);
  padding: 0 12px 12px;
  min-width: 0;
}
.box-head {
  margin: 0 -12px 12px;
  padding: 6px 12px;
  background: var(--purple);
  color: var(--paper);
  font: bold 18px var(--f-body);
}
.box--lilac { background: var(--lilac); color: var(--ink); border: 4.5px ridge var(--violet); }
.subhead { margin: 15px 0 6px; font: bold 19.5px var(--f-body); color: var(--hot); }
.small { font-size: 16.5px; }
.more { font-size: 16.5px; font-weight: bold; }
.profile-name { margin: 0 0 12px; font: 45px/1.15 var(--f-head); overflow-wrap: anywhere; }
.profile-row { display: flex; gap: 21px; align-items: flex-start; }
.profile-pic { flex: 0 0 auto; width: 210px; }
.profile-pic img { width: 192px; height: 192px; object-fit: cover; }
.profile-pic .nopic { width: 192px; height: 192px; display: grid; place-items: center; background: var(--ink); color: var(--hot); font: 33px var(--f-pixel); text-align: center; }
.profile-facts { min-width: 0; font-size: 18px; }
.profile-facts p { margin: 0 0 9px; }
.headline { font: italic bold 21px var(--f-serif); color: var(--paper); }
.view-my { margin-top: 12px; font-size: 16.5px; }
.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.contact-grid a, .btn {
  display: block;
  padding: 4.5px 9px;
  border: 3px outset #d9d9d9;
  background: #efefef;
  color: var(--ink) !important;
  font: 16.5px var(--f-body);
  text-decoration: none;
  text-align: center;
}
.url-box { font: 18px var(--f-body); overflow-wrap: anywhere; border: 1.5px solid #999; background: var(--paper); color: var(--ink); padding: 6px 9px; }
table.interests { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 18px; }
table.interests th, table.interests td { vertical-align: top; padding: 6px 9px; text-align: left; }
.extnet {
  border: 4.5px double var(--hot);
  background: var(--paper);
  color: var(--ink);
  padding: 24px 18px;
  font: bold 25.5px var(--f-body);
  text-align: center;
}
.extnet .glitter { font: 36px var(--f-head); }
.blog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.blog-list .date { color: #666; font-size: 16.5px; }
.blurbs { font: 19.5px/1.55 var(--f-hand); }
.blurbs p { margin: 0 0 12px; }
.marquee { overflow: hidden; white-space: nowrap; border: 1.5px dashed var(--hot); padding: 4.5px 0; font: bold 18px var(--f-body); }
.top8-count { margin: 0 0 12px; font-size: 18px; }
.top8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 12px; }
.top8 a { display: block; text-decoration: none; text-align: center; font-size: 16.5px; font-weight: bold; overflow-wrap: anywhere; }
.top8 .cover { display: block; margin-top: 4.5px; border: 3px solid var(--paper); aspect-ratio: 1; overflow: hidden; background: var(--purple); }
.pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pic { display: block; position: relative; border: 4.5px ridge var(--hot); background: var(--ink); }
.pic .cap { display: block; padding: 4.5px 6px; font-size: 15px; color: var(--paper); overflow-wrap: anywhere; }
.blinkies { display: flex; flex-wrap: wrap; gap: 9px; }
.blinkie {
  display: inline-block;
  min-width: 225px;
  max-width: 100%;
  height: 30px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1.5px solid var(--paper);
  background: var(--purple);
  color: var(--paper);
  font: 25.5px/27px var(--f-pixel);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  animation: blink 1s steps(1) infinite;
}
.counter { font-size: 16.5px; text-align: center; }
.counter .digits { display: inline-flex; gap: 3px; margin: 6px 0; }
.counter .digits span { display: inline-block; width: 21px; background: #1a001a; border: 1.5px inset #777; color: var(--hot); font: 30px/33px var(--f-pixel); }
.entry { background: var(--paper); color: var(--ink); border: 3px solid var(--hot); padding: 0 18px 21px; }
.entry .box-head { margin: 0 -18px 15px; background: var(--hot); color: var(--ink); }
.entry-title { margin: 9px 0 3px; font: bold 36px/1.2 var(--f-serif); color: var(--purple); text-wrap: balance; overflow-wrap: anywhere; }
.entry-meta { font-size: 16.5px; color: #555; margin-bottom: 15px; }
.entry-content { font: 22.5px/1.6 var(--f-serif); max-width: 65ch; overflow-wrap: anywhere; }
.entry-content figure { margin: 18px 0; }
.entry-content blockquote { margin: 15px 0; padding: 6px 18px; border-left: 6px dotted var(--hot); font-style: italic; }
.entry .gframe { margin-bottom: 18px; }
.entry-foot { margin-top: 21px; font-size: 16.5px; }
.list-item { border-bottom: 1.5px dashed var(--hot); padding-block: 15px; }
.list-item p { margin: 6px 0; }
.archive-title { margin: 0 0 15px; font: 45px/1.15 var(--f-head); transform: rotate(-1deg); display: inline-block; }
.pagination { margin-top: 18px; font: bold 18px var(--f-body); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { padding: 3px 10.5px; border: 3px outset #d9d9d9; background: #efefef; color: var(--ink); text-decoration: none; }
.post-nav { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-top: 18px; font-size: 18px; }
.comments { margin-top: 21px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comment-list .children { list-style: none; margin: 6px 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmt { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 3px; }
.cmt-who { background: var(--pinkpale); color: var(--ink); padding: 9px; text-align: center; font-size: 16.5px; font-weight: bold; overflow-wrap: anywhere; }
.cmt-who img { display: block; margin: 0 auto 6px; border: 3px solid var(--purple); }
.cmt-body { background: var(--paper); color: var(--ink); padding: 9px 12px; font-size: 18px; overflow-wrap: anywhere; }
.cmt-body .when { color: #555; font-size: 15px; margin-bottom: 6px; }
.cmt-body p { margin: 0 0 9px; }
.comment-respond { margin-top: 18px; }
.comment-respond label { display: block; font-weight: bold; font-size: 18px; }
.comment-respond input[type=text], .comment-respond input[type=email], .comment-respond input[type=url], .comment-respond textarea {
  width: 100%; box-sizing: border-box; border: 3px inset #ccc; background: var(--paper); color: var(--ink); font: 19.5px var(--f-body); padding: 6px;
}
.comment-respond .submit { border: 3px outset #d9d9d9; background: #efefef; color: var(--ink); font: bold 18px var(--f-body); padding: 4.5px 15px; cursor: pointer; }
.admin-hint { border: 3px dashed var(--hot); background: var(--pinkpale); color: var(--ink); padding: 9px 12px; font-size: 16.5px; }
.site-foot { padding-block: 27px calc(234px + 105vh); text-align: center; font-size: 16.5px; color: var(--violet); }
.spark {
  position: fixed;
  width: 21px; height: 21px;
  margin: -10.5px 0 0 -10.5px;
  background: var(--star) center / contain no-repeat;
  pointer-events: none;
  z-index: 9999;
  animation: spark-fall .8s steps(5) forwards;
}
@keyframes spark-fall {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx, 0px), 45px) scale(.2); opacity: 0; }
}
.alignleft { float: left; margin: 0 18px 12px 0; }
.alignright { float: right; margin: 0 0 12px 18px; }
.wp-caption-text, figcaption { font-size: 16.5px; color: #555; }
.screen-reader-text { position: absolute !important; width: 1.5px; height: 1.5px; overflow: hidden; clip: rect(1.5px, 1.5px, 1.5px, 1.5px); }
.player { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pl-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  padding: 0;
  display: grid; place-items: center;
  border: 3px outset #d9d9d9;
  background: #efefef;
  color: var(--ink);
}
.pl-title { margin-bottom: 4.5px; font: bold 18px var(--f-body); overflow-wrap: anywhere; }
.pl-bar {
  position: relative;
  height: 18px;
  border: 3px inset #777;
  background: #1a001a;
  touch-action: none;
}
.pl-time { margin-top: 4.5px; font: 25.5px/1 var(--f-pixel); color: var(--hot); }
.tracks { display: flex; flex-direction: column; gap: 15px; }
.track {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 15px;
  border-bottom: 1.5px dashed var(--hot);
}
.track-cover { display: block; aspect-ratio: 1; border: 3px solid var(--paper); background: var(--purple); overflow: hidden; }
.track-title { margin: 0 0 3px; font: bold 22.5px/1.25 var(--f-body); overflow-wrap: anywhere; }
.track-date { margin-bottom: 12px; font-size: 16.5px; color: var(--violet); }
.gif-wall-content > * { margin-block: 0 15px; }
.gif-wall-content p { font-size: 19.5px; }
.gif-wall .wp-block-gallery,
.gif-wall .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px !important;
  margin: 0 0 15px;
}
.gif-wall .wp-block-gallery figure.wp-block-image,
.gif-wall .wp-block-gallery .blocks-gallery-item,
.gif-wall-content > figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 4.5px ridge var(--hot);
  background: var(--ink);
  overflow: hidden;
}
.gif-wall-content > figure.wp-block-image { max-width: 360px; }
.sheet {
  display: flex;
  flex-direction: column;
  padding: 27px 21px;
  background: #f3f0ea;
  border: 1.5px solid var(--paper);
}
.roll {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
}
.strip::-webkit-scrollbar { height: 15px; }
.strip::-webkit-scrollbar-thumb { background: var(--hot); border: 3px solid var(--ink); }
.frame {
  flex: 0 0 auto;
  width: 192px;
  display: grid;
  grid-template-rows: 13.5px 12px auto 12px 13.5px;
  row-gap: 1.5px;
  padding: 3px 0;
  background-color: #17110d;
  background-image: var(--grain);
  text-decoration: none;
  position: relative;
}
.frame:focus-visible { outline: 3px solid var(--hot); outline-offset: -3px; }
.perfs {
  display: block;
  background-image: var(--perf);
  background-size: 24px 12px;
  background-repeat: repeat-x;
}
.edge {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 9px;
  font: 10.5px/13.5px "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-stretch: condensed;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9a24c;
  opacity: .9;
}
.edge-bot .dx {
  flex: 0 0 auto;
  width: 51px;
  height: 7.5px;
  background: repeating-linear-gradient(90deg, #e9a24c 0 1.5px, transparent 1.5px 4.5px, #e9a24c 4.5px 7.5px, transparent 7.5px 9px, #e9a24c 9px 10.5px, transparent 10.5px 15px);
  opacity: .8;
}
.shot {
  position: relative;
  display: block;
  margin: 0 4.5px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  background: #050302;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.6), inset 0 0 7.5px 1.5px rgba(0,0,0,.55);
  pointer-events: none;
}
.frame:hover .shot, .frame:focus-visible .shot { outline: 3px solid var(--hot); outline-offset: 1.5px; }
.wolf {
  position: fixed;
  left: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  width: 120px;
  height: 78px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  z-index: 60;
}
.wolf:focus-visible { outline: 3px dashed var(--hot); outline-offset: 3px; }
.wolf-sprite {
  display: block;
  width: 120px;
  height: 78px;
  background: url("images/laika-sprites.png?v=1.33") 0 0 / 840px 78px no-repeat;
  image-rendering: pixelated;
}
.wolf-heart {
  position: absolute;
  left: 50%;
  top: -6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0);
}
.wolf-heart svg { display: block; width: 31.5px; height: 27px; }
@keyframes wolf-heart {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -45px); }
}
.wolf-z {
  position: absolute;
  left: 87px;
  top: 6px;
  font: 30px/1 var(--f-pixel);
  color: var(--hot);
  opacity: 0;
  pointer-events: none;
}
@keyframes wolf-z {
  0%   { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(12px, -30px); }
}
.moon {
  position: absolute;
  top: 21px;
  right: max(36px, env(safe-area-inset-right, 0px));
  width: 72px;
  height: 72px;
  background: url("images/moon.png?v=1.33") 0 0 / 72px 72px no-repeat;
  image-rendering: pixelated;
}
.shoot {
  position: absolute;
  top: 60px;
  left: 30%;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffd6f0 60%, #ffffff);
  opacity: 0;
  transform: rotate(18deg);
  animation: shoot 17s steps(1) infinite;
}
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  96%  { opacity: 1; transform: translate(0, 0) rotate(18deg); }
  97%  { opacity: 1; transform: translate(90px, 30px) rotate(18deg); }
  98%  { opacity: 1; transform: translate(180px, 60px) rotate(18deg); }
  99%  { opacity: 1; transform: translate(270px, 90px) rotate(18deg); }
  100% { opacity: 0; transform: translate(360px, 120px) rotate(18deg); }
}
.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 234px;
  border-bottom: env(safe-area-inset-bottom, 0px) solid #0a040e;
}
.hz {
  position: absolute;
  top: 0;
  left: -600vw;
  right: -600vw;
  height: 234px;
  image-rendering: pixelated;
  background-size: 15360px 234px;
  background-position-x: 50%;
  background-position-y: 0;
  background-repeat: no-repeat;
  transform: translate(calc(var(--hz-shift, 0px) - var(--hz-pan, 0px) * var(--hz-pf, 1)), calc(var(--hz-drop, 0) * var(--hz-depth, 0px)));
}
.hz-giants  { --hz-depth: 58.5px; --hz-pf: .35; top: auto; bottom: 0; height: 300px; background-image: url("images/horizon-giants.png?v=1.33"); background-size: 12288px 3900px; }
.hz-city    { --hz-depth: 69px; --hz-pf: .4; background-image: url("images/horizon-city.png?v=1.33"); background-size: 12288px 468px; animation: hz-city 2.4s steps(1) infinite; }
@keyframes hz-city { 0% { background-position-y: 0; } 50% { background-position-y: -234px; } }
.hz-cranes-c { --hz-depth: 69px; --hz-pf: .4; background: none; }
.hz-cranes-f { --hz-depth: 117px; --hz-pf: .65; background: none; }
.hz-cranes-m, .hz-iron { --hz-depth: 147px; --hz-pf: .8; background: none; }
.hz-tunnel  { --hz-depth: 147px; --hz-pf: .8; background-image: url("images/horizon-tunnel.png?v=1.33"); }
.cranes-c, .cranes-f, .cranes-m, .iron { position: absolute; top: 0; height: 234px; image-rendering: pixelated; }
.cranes-c { left: calc(50% + 1389px); width: 270px; }
.cranes-f { left: calc(50% + 1941px); width: 522px; }
.cranes-m { left: calc(50% + 2469px); width: 270px; }
.iron { left: calc(50% + 4578px); top: -165px; width: 750px; height: 399px; }
.hz-terminal { --hz-depth: 147px; --hz-pf: .8; background-image: url("images/horizon-terminal.png?v=1.33"); }
.hz-sea     { --hz-depth: 117px; --hz-pf: .65; left: calc(50% + 5208px); right: auto; width: 60000px; top: 150px; height: 84px; background: url("images/sea.png?v=1.33") 0 0 / 384px 84px repeat-x; }
.hz-rail, .hz-road { clip-path: inset(0 calc(50% - 6273px) 0 0); }
.hz-launch  { --hz-depth: 69px; --hz-pf: .4; --ls-x: -639px; background: none; }
.ls-site { left: calc(50% + var(--ls-x) - 30px); top: 12px; width: 108px; height: 138px; background: url("images/launch-site.png?v=1.33") 0 0 / 324px 138px no-repeat; }
.ls-site.is-armaway { background-position: -108px 0; }
.ls-site.is-open { background-position: -216px 0; }
.ls-beacons { position: absolute; left: calc(50% + var(--ls-x) - 30px); top: 12px; width: 108px; height: 138px; background: url("images/launch-beacons.png?v=1.33") 0 0 / 108px 138px no-repeat; image-rendering: pixelated; display: none; }
.ls-vent { position: absolute; width: 6px; height: 6px; background: #e2d2ec; animation: ls-vent 1.6s steps(4) forwards; }
@keyframes ls-vent { from { opacity: .7; } to { opacity: 0; transform: translate(var(--dx, 0px), -9px) scale(2.5); } }
.ls-rocket { left: calc(50% + var(--ls-x)); top: 24px; width: 33px; height: 144px; background: url("images/rocket.png?v=1.33") 0 0 / 99px 144px no-repeat; transform-origin: 16.5px 60px; }
.ls-flame { position: absolute; left: 12px; top: 138px; width: 9px; height: 0; background: linear-gradient(#fff8de 0 22%, #ffb85a 22% 50%, #ff6e32 50% 78%, transparent 78%); }
.ls-flood { position: absolute; left: calc(50% + var(--ls-x) - 84px); top: -30px; width: 216px; height: 180px; background: url("images/launch-flood.png?v=1.33") 0 0 / 1728px 180px no-repeat; image-rendering: pixelated; pointer-events: none; animation: ls-flood 9s steps(1) infinite; }
@keyframes ls-flood { 0.0% { background-position-x: 0px; } 7.14% { background-position-x: -216px; } 14.29% { background-position-x: -432px; } 21.43% { background-position-x: -648px; } 28.57% { background-position-x: -864px; } 35.71% { background-position-x: -1080px; } 42.86% { background-position-x: -1296px; } 50.0% { background-position-x: -1512px; } 57.14% { background-position-x: -1296px; } 64.29% { background-position-x: -1080px; } 71.43% { background-position-x: -864px; } 78.57% { background-position-x: -648px; } 85.71% { background-position-x: -432px; } 92.86% { background-position-x: -216px; } }
.ls-plume { position: absolute; left: calc(50% + var(--ls-x) - 343.5px); top: -768px; width: 720px; height: 960px; image-rendering: pixelated; pointer-events: none; }
.hz-distant { --hz-depth: 78px; --hz-pf: .45; background-image: url("images/horizon-distant.png?v=1.33"); }
.hz-lights  { --hz-depth: 78px; --hz-pf: .45; background-image: url("images/horizon-lights.png?v=1.33"); animation: hz-blink 1.6s steps(1) infinite; }
.hz-fog-a   { --hz-depth: 87px; --hz-pf: .5; background-image: url("images/fog-a.png?v=1.33"); }
.hz-hv      { --hz-depth: 97.5px; --hz-pf: .55; --hv-end: min(33.333vw, calc(50vw - 195px)); left: calc(50vw - 1722px); right: auto; width: calc(var(--hv-end) - 1260px - 50vw + 1722px); background: url("images/horizon-hv-tile.png?v=1.33") right top / 420px 234px repeat-x; }
.hz-hv::before { content: ""; position: absolute; top: 0; right: 100%; width: 840px; height: 234px; background: url("images/horizon-dam.png?v=1.33") 0 0 / 840px 234px no-repeat; image-rendering: pixelated; }
.hz-hv::after { content: ""; position: absolute; top: 0; left: 100%; margin-left: -180px; width: 1440px; height: 234px; background: url("images/horizon-hv.png?v=1.33") 0 0 / 1440px 234px no-repeat; image-rendering: pixelated; }
.hz-far     { --hz-depth: 117px; --hz-pf: .65; background-image: url("images/horizon-far.png?v=1.33"); }
.hz-town    { --hz-depth: 117px; --hz-pf: .65; background: none; }
.town-lights { position: absolute; left: calc(50% - 2328px); top: 0; width: 1017px; height: 234px; image-rendering: pixelated; }
.hz-array   { --hz-depth: 117px; --hz-pf: .65; background-image: url("images/horizon-array.png?v=1.33"); background-size: 12288px 3042px; }
.hz-scope-layer { --hz-depth: 117px; --hz-pf: .65; background: none; }
.hz-fog-b   { --hz-depth: 132px; --hz-pf: .7; background-image: url("images/fog-b.png?v=1.33"); }
.hz-mid     { --hz-depth: 147px; --hz-pf: .8; background-image: url("images/horizon.png?v=1.33"); }
.hz-mine    { --hz-depth: 147px; --hz-pf: .8; background: none; }
.bwe-wheel { position: absolute; left: calc(50% - 4569px); top: 96px; width: 66px; height: 66px; background: url("images/bwe-wheel.png?v=1.33") 0 0 / 528px 66px no-repeat; image-rendering: pixelated; animation: bwe-turn 2.4s steps(8) infinite; }
@keyframes bwe-turn { from { background-position-x: 0; } to { background-position-x: -528px; } }
.hz-msmoke  { --hz-depth: 147px; --hz-pf: .8; background-image: url("images/horizon-msmoke.png?v=1.33"); background-size: 12288px 936px; animation: hz-msmoke 1.6s steps(1) infinite; }
@keyframes hz-msmoke { 0% { background-position-y: 0; } 25% { background-position-y: -234px; } 50% { background-position-y: -468px; } 75% { background-position-y: -702px; } }
.xing { position: absolute; left: calc(50% - 1053px); top: 126px; width: 108px; height: 66px; background: url("images/crossing.png?v=1.33") 0 0 / 324px 66px no-repeat; image-rendering: pixelated; }
.xing.is-down { background-position: -108px 0; }
.xing::after { content: ""; position: absolute; inset: 0; background: url("images/crossing.png?v=1.33") -216px 0 / 324px 66px no-repeat; image-rendering: pixelated; opacity: 0; }
.hz-rail    { --hz-depth: 147px; --hz-pf: .8; background: none; overflow: hidden; }
.train { position: absolute; left: 0; top: 138px; height: 36px; transform-origin: center; }
.hz-rail2 .train { top: 129px; }
.train i { position: absolute; top: 0; height: 36px; background-image: url("images/trains.png?v=1.33"); background-repeat: no-repeat; image-rendering: pixelated; }
.hz-road    { --hz-depth: 147px; --hz-pf: .8; background: none; overflow: hidden; }
.hz-strip   { --hz-depth: 147px; --hz-pf: .8; background-image: url("images/horizon-strip.png?v=1.33"); background-size: 12288px 468px; animation: hz-strip 1.4s steps(1) infinite; }
@keyframes hz-strip { 0% { background-position-y: 0; } 50% { background-position-y: -234px; } }
.bus-person { position: absolute; left: calc(50% - 1917px); top: 177px; width: 18px; height: 24px; background: url("images/bus-person.png?v=1.33") 0 0 / 36px 24px no-repeat; image-rendering: pixelated; animation: bus-person 2.2s steps(1) infinite; transition: opacity .6s steps(3); }
@keyframes bus-person { 0% { background-position-x: 0; } 50% { background-position-x: -18px; } }
.pan-hint { position: absolute; left: 50%; bottom: 294px; width: 135px; height: 45px; margin-left: -67.5px; background: url("images/pan-hint.png?v=1.33") 0 0 / 135px 45px no-repeat; image-rendering: pixelated; opacity: 0; transition: opacity .9s steps(4); }
.hz-fog-c   { --hz-depth: 165px; --hz-pf: .9; background-image: url("images/fog-c.png?v=1.33"); }
.hz-front   { --hz-depth: 175.5px; --hz-pf: 1; background-image: url("images/horizon-front.png?v=1.33"); }
.hz-rave    { --hz-depth: 175.5px; --hz-pf: 1; background: none; overflow: visible; }
.rave { position: absolute; left: calc(50% + 4038px); top: -300px; width: 450px; height: 534px; image-rendering: pixelated; }
.hz-smoke   { --hz-depth: 175.5px; --hz-pf: 1; background-image: url("images/horizon-smoke.png?v=1.33"); background-size: 12288px 702px; animation: hz-smoke 1.2s steps(1) infinite; }
@keyframes hz-smoke { 0% { background-position-y: 0; } 33% { background-position-y: -234px; } 66% { background-position-y: -468px; } }
.scope {
  position: absolute;
  top: 42px;
  left: calc(50% + 336px);
  width: 114px;
  height: 108px;
  background: url("images/telescope.png?v=1.33") 0 0 / 1482px 108px no-repeat;
  image-rendering: pixelated;
}
}
@media (prefers-reduced-motion: reduce) {
  .glitter, .gframe, .glitter-rule, .stamp, .blinkie, .marquee span, .pic:hover::after, .wolf-heart.is-on, .wolf.is-sleeping .wolf-z, .tw, .shoot, .hz-lights, .hz-smoke, .hz-msmoke, .xing.is-down::after, .anim-btn span, .hz-city, .hz-strip, .bus-person, .ls-flood, .bwe-wheel { animation: none !important; }
  .hz { transform: translateX(calc(var(--hz-shift, 0px) - var(--hz-pan, 0px) * var(--hz-pf, 1))); }
  .marquee span { padding-left: 0; }
  .spark { display: none; }
}