/* Homepage 1999. A personal homepage made with care: web-safe colours, beveled boxes, pixel art drawn in site.js. */

/* Stand-in fonts sized to match the web fonts, so nothing jumps when the real ones arrive.
   Tinos and Arimo already match Times New Roman and Arial, so they need none. */
@font-face { font-family: "VT323 Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier"), local("Liberation Mono"), local("DejaVu Sans Mono"); size-adjust: 66%; ascent-override: 121.2%; descent-override: 30.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Black Fallback"; src: local("Arial Black"), local("Arial-Black"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.9%; ascent-override: 88.1%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Press Start 2P Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier"), local("Liberation Mono"), local("DejaVu Sans Mono"); size-adjust: 165%; ascent-override: 60.6%; descent-override: 0%; line-gap-override: 0%; }

:root {
  --navy: #000000;
  --deep: #000000;
  --ink: #111111;
  --steel: #262626;
  --sky: #f7ec3c;
  --ice: #ffffff;
  --butter: #ffffff;
  --cream-row: #f3f3f3;
  --gold: #f7ec3c;
  --gold-hi: #fbf59a;
  --orange: #000000;
  --rust: #000000;
  --red: #cc0000;
  --green: #006633;
  --lime: #66ff00;
  --white: #ffffff;
  --gray: #c0c0c0;
  --wood: #996633;
  --link: #000000;
  --visited: #444444;
  --hover: #000000;

  --f-body: "Tinos", "Times New Roman", Times, serif;
  --f-head: "Archivo Black", "Archivo Black Fallback", "Arial Black", sans-serif;
  --f-sans: "Arimo", Arial, Helvetica, sans-serif;
  --f-pixel: "Press Start 2P", "Press Start 2P Fallback", "Courier New", monospace;
  --f-led: "VT323", "VT323 Fallback", "Courier New", monospace;

  --z-skip: 60;
  --z-spark: 800;
  --side: 212px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font: 18px/1.55 var(--f-body);
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Crect width='96' height='96' fill='%23000000'/%3E%3Cpath fill='%23f7ec3c' d='M14 10h2v6h-2zM12 12h6v2h-6zM70 60h2v4h-2zM69 61h4v2h-4z'/%3E%3Cpath fill='%23ffffff' d='M44 6h1v1h-1zM84 30h1v1h-1zM26 54h1v1h-1zM60 86h1v1h-1zM4 40h1v1h-1zM90 78h1v1h-1zM36 80h1v1h-1z'/%3E%3Cpath fill='none' stroke='%23333333' stroke-width='2' d='M47 31h22v14h-22z'/%3E%3Cpath fill='%23333333' d='M51 35h4v4h-4zM61 35h4v4h-4zM53 43h10v2h-10z'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* pixel art: every picture is drawn on a grid in site.js and shown at a whole-number zoom (--s), so pixels stay square */
svg.px { display: block; width: calc(var(--w) * var(--s, 2) * 1px); height: calc(var(--h) * var(--s, 2) * 1px); }
/* animated pictures: a strip of frames behind a one-frame window, stepped like an animated GIF */
.gif { display: block; overflow: hidden; width: calc(var(--w) * var(--s, 2) * 1px); height: calc(var(--h) * var(--s, 2) * 1px); }
.gif > .px { animation: gif var(--t, 1s) steps(var(--f, 2)) infinite; }
@keyframes gif { to { transform: translateX(-100%); } }
/* art that repeats a lot on one page (sparkles, counter digits, reels) is one data-URI strip on the parent (--img) */
.spr {
  display: block; width: calc(var(--w) * var(--s, 2) * 1px); height: calc(var(--h) * var(--s, 2) * 1px);
  background: var(--img) 0 0 / calc(var(--w) * var(--f, 1) * var(--s, 2) * 1px) 100% no-repeat;
  animation: spr var(--t, 1s) steps(var(--f, 1)) infinite;
}
@keyframes spr { to { background-position: calc(var(--w) * var(--f, 1) * var(--s, 2) * -1px) 0; } }
a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--visited); }
a:hover { color: var(--hover); background: var(--gold); }
:focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 6px var(--gold); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -80px; z-index: var(--z-skip); background: var(--gold); color: #000 !important; padding: 8px 12px; font: 700 16px var(--f-sans); }
.skip:focus { top: 8px; }
.small { font-size: 15px; margin: 6px 0 0; }
.center { text-align: center; }

/* the yellow placeholder sticker, same on every page (turn it off in content.json > settings > prototypeNotice) */
.proto-sticker {
  position: fixed; z-index: 900; top: 14px; right: 18px; margin: 0;
  max-width: min(300px, calc(100vw - 28px)); padding: 5px 10px 6px;
  font: 700 13px/1.25 var(--f-sans); color: #1d1600; background: #ffd60a;
  border-radius: 2px; transform: rotate(3deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
@media (max-width: 600px) { .proto-sticker { font-size: 12px; padding: 4px 8px 5px; } }
.print-only { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0 !important; }

/* ---------- the page "table" ---------- */

.page {
  width: min(900px, 100% - 32px);
  margin: 28px auto 44px;
  background: var(--butter);
  border: 6px ridge var(--sky);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- masthead ---------- */

.mast {
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='130' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M12 18h2v2h-2zM74 8h2v2h-2zM128 40h2v2h-2zM36 84h2v2h-2zM98 100h2v2h-2zM156 116h2v2h-2z'/%3E%3Cpath fill='%23f7ec3c' d='M60 52h2v6h-2zM58 54h6v2h-6zM150 76h2v2h-2z'/%3E%3Cpath fill='%2399ccff' d='M110 22h2v2h-2zM22 120h2v2h-2z'/%3E%3C/svg%3E");
  border-bottom: 4px ridge var(--sky);
  color: var(--white);
}
.mast-row { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 8px; padding: 22px 18px 18px; }
.mast-title { text-align: center; min-width: 0; }
.mast-pre { margin: 0 0 6px; font: italic 18px var(--f-body); color: var(--ice); }
.mast-name { margin: 4px 0 14px; }
.wordart, .wordart:visited, .wordart:hover {
  display: inline-block;
  font: 400 clamp(38px, 8vw, 74px)/1 var(--f-head);
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 #ff9900, 2px 2px 0 #ff9900, 3px 3px 0 var(--orange), 4px 4px 0 var(--orange),
    5px 5px 0 var(--rust), 6px 6px 0 var(--rust), 7px 7px 0 #993300, 8px 8px 0 #000;
  transform: rotate(-2.5deg) skewX(-9deg);
  overflow-wrap: anywhere;
}
.wordart:hover { color: #ffe033; }
.mast-tag { margin: 0; font: 700 16px var(--f-sans); color: var(--gold); letter-spacing: 0.04em; text-shadow: 2px 2px 0 #000; }
.mast-tag .dot { color: var(--white); padding: 0 4px 0 2px; }
.mast-tag .it { white-space: nowrap; }
/* film reels either side of the logo: pixel art, four frames a turn, three screen pixels to a pixel */
.reel { --s: 3; justify-self: center; }
.reel-r .spr { animation-direction: reverse; }

/* ticker (home) and breadcrumb (other pages) share the black bar */
.ticker, .crumbs { background: #000; border-top: 3px solid var(--gold); margin: 0; }
.ticker { display: flex; align-items: center; padding: 4px 0; }
.ticker-window { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track {
  margin: 0; display: inline-block; white-space: nowrap; padding-left: 100%;
  font: 27px/1.2 var(--f-led); color: var(--gold);
  animation: ticker var(--ticker-s, 30s) linear infinite;
  animation-delay: calc(var(--ticker-s, 30s) * -0.3);
}
.ticker-track b { color: var(--lime); font-weight: 400; }
.ticker-track i { font-style: normal; color: var(--orange); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
.crumbs { padding: 4px 14px 5px; font: 24px/1.25 var(--f-led); color: var(--gold); }
.crumbs a, .crumbs a:visited { color: var(--sky); }
.crumbs a:hover { color: var(--white); }
.crumbs b { font-weight: 400; color: var(--lime); }
.crumb-k { color: var(--gray); }

/* ---------- layout: a frame on the left, the page on the right ---------- */

.layout {
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-areas: "nav main" "extras main";
  grid-template-rows: auto 1fr;
  background: linear-gradient(90deg, var(--steel) var(--side), transparent var(--side));
}
.frame-nav { grid-area: nav; padding: 14px 12px 0; }
.frame-extras { grid-area: extras; padding: 0 12px 14px; }
.content {
  grid-area: main; padding: 24px 28px 30px; min-width: 0; outline: none;
  border-left: 6px ridge var(--gray);
}

.box { background: var(--ice); border: 3px outset var(--sky); margin-bottom: 14px; padding: 0 9px 10px; }
.box-h {
  margin: 0 -9px 10px; padding: 4px 9px;
  background: var(--deep); color: var(--white);
  font: 700 15px var(--f-sans); letter-spacing: 0.02em;
}

.menu-btn { display: none; }
.navlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.navbtn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; min-height: 42px;
  background: var(--gold); color: #000 !important; text-decoration: none;
  border: 0;
  box-shadow: inset -1px -1px #663300, inset 1px 1px #ffff99, inset -2px -2px #cc9900, inset 2px 2px #ffe680;
  font: 700 16px/1.15 var(--f-sans);
}
.navbtn .ico { flex: none; display: grid; place-items: center; width: 32px; }
.navbtn .lbl { min-width: 0; }
.navbtn { position: relative; }
.navbtn .new { position: absolute; top: -8px; right: -6px; }
.navbtn:hover { background: var(--gold-hi); }
.navbtn:active, .navbtn[aria-current="page"] { box-shadow: inset 1px 1px #663300, inset -1px -1px #ffff99, inset 2px 2px #cc9900, inset -2px -2px #ffe680; padding: 7px 7px 5px 9px; }
.navbtn[aria-current="page"] { background: #000; box-shadow: inset 1px 1px #000, inset -1px -1px #555, inset 2px 2px #000, inset -2px -2px #333; }

.new { display: inline-block; vertical-align: middle; line-height: 0; }

/* mailbox */
.mailbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 2px; font: 700 16px var(--f-sans); text-decoration: none; }
.mailbox:visited { color: var(--link); }
.mb-ico { --s: 2; }
.mailbox:hover .mb-cap { text-decoration: underline; }
.mail-addr { overflow-wrap: anywhere; font-family: var(--f-sans); font-size: 14px; }


/* knobs and switches */
.knobs { display: grid; gap: 8px; }
.knobs .box-h { margin-bottom: 2px; }
.midi { display: grid; gap: 6px; background: #000; border: 2px inset #666; padding: 6px; }
.midi-song { display: flex; align-items: center; gap: 6px; margin: 0; font: 19px/1 var(--f-led); color: var(--lime); overflow-wrap: anywhere; }
.midi-ico { --s: 2; flex: none; }
.tog {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  min-height: 36px; padding: 4px 8px; cursor: pointer;
  font: 700 14px var(--f-sans); color: #000; background: var(--gray); border: 0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.tog:active, .tog[aria-pressed="true"] { box-shadow: inset 1px 1px #000, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.tog-v { font: 8px/1 var(--f-pixel); padding: 4px 4px 4px; background: #333; color: #ff9999; min-width: 34px; text-align: center; }
.tog[aria-pressed="true"] { background: #d8d8d8; }
.tog[aria-pressed="true"] .tog-v { background: var(--green); color: var(--lime); }
.tog:disabled { cursor: not-allowed; color: #333; }
.rm-note { display: none; font-size: 14px; }
.reduced .rm-note { display: block; }

.sign-wrap { margin: 4px 0 0; }
.b88-link { display: inline-block; line-height: 0; }
.b88 { --s: 2; }
.b88-link:hover .b88 { filter: brightness(1.08); outline: 2px solid var(--orange); }

/* ---------- content type ---------- */

.pg-h, .content h2 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  text-wrap: balance;
}
.pg-h { flex-wrap: nowrap; }
.pg-h > span { min-width: 0; }
.pg-h { margin: 0 0 14px; font: 400 clamp(28px, 4.2vw, 38px)/1.1 var(--f-head); color: var(--rust); outline: none; }
.pg-h .px { flex: none; }
.content h2 { margin: 26px 0 10px; font: 700 22px/1.2 var(--f-sans); color: var(--deep); }
.content h2 .px, .content h2 .gif { flex: none; }
.content p { margin: 0 0 12px; max-width: 64ch; }
.kicker { font: 700 15px var(--f-sans) !important; color: var(--rust); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px !important; }
.headline { font: 700 italic clamp(25px, 3.4vw, 31px)/1.15 var(--f-body); color: var(--deep); margin: 0 0 10px; text-wrap: balance; }

.visitor { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #000; color: var(--gold); font: 22px/1.2 var(--f-led); border: 3px inset #666; max-width: none !important; }
.visitor > .px, .visitor > .gif { flex: none; }

/* sparkle divider */
.sparkle-rule { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; padding: 0 2px; }
.sparkle-rule .sp .px { --w: 7; --h: 7; --f: 4; --t: 1600ms; animation-delay: var(--d, 0s); }

.tag-ex {
  display: inline-block; margin-left: 8px; padding: 3px 5px 3px; vertical-align: 3px;
  font: 8px/1 var(--f-pixel); background: var(--gold); color: #000; border: 1px solid #000;
}
.draft { display: inline-block; font: 8px/1 var(--f-pixel); padding: 4px 6px; background: var(--gold); border: 2px solid #000; color: #000; }

/* next booth flyer */
.flyer { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; background: var(--white); border: 4px double var(--rust); box-shadow: 5px 5px 0 var(--gold); }
.led { display: grid; place-items: center; min-width: 108px; padding: 8px 10px 6px; background: #000; border: 3px inset #555; font-family: var(--f-led); line-height: 1; text-align: center; }
.led-dow { font-size: 24px; color: var(--orange); text-transform: uppercase; }
.led-day { font-size: 38px; color: var(--gold); white-space: nowrap; }
.flyer-txt p { margin: 0 0 2px; }
.ev-title { font: 700 20px/1.25 var(--f-sans); color: var(--deep); }
.countdown { margin-top: 6px !important; font: 700 16px var(--f-sans); color: var(--green); }

.whatsnew { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.whatsnew li { display: flex; gap: 10px; align-items: baseline; }
.whatsnew .px { flex: none; }
.whatsnew .new { flex: none; }

.cta-row { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0 !important; max-width: none !important; }
.cta-q { font: 700 17px var(--f-sans); color: var(--deep); }
.btn99 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; min-height: 42px;
  font: 700 16px var(--f-sans); color: #000 !important; text-decoration: none; cursor: pointer;
  background: var(--gray); border: 0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.btn99 .px { --s: 1; }
.btn99:hover { background: #d4d4d4; }
.btn99:active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; padding: 7px 15px 5px 17px; }
.btn99.hot { background: var(--gold); box-shadow: inset -1px -1px #663300, inset 1px 1px #ffff99, inset -2px -2px #cc9900, inset 2px 2px #ffe680; }
.btn99.hot:active { box-shadow: inset 1px 1px #663300, inset -1px -1px #ffff99, inset 2px 2px #cc9900, inset -2px -2px #ffe680; }
.btn99.hot:hover { background: #ffdd33; }

/* under construction */
.construction { margin: 6px 0 22px; border: 3px solid #000; background: var(--gold); }
.stripes { height: 16px; background: repeating-linear-gradient(-45deg, #000 0 12px, var(--gold) 12px 24px); background-size: 34px 34px; animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 34px 0; } }
.c-body { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 16px; color: #000; }
.c-body .px { --s: 4; }
.c-body p { margin: 0; font: 17px/1.4 var(--f-sans); }
.c-body b { font: 400 24px/1.1 var(--f-head); letter-spacing: 0.02em; }

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

.tbl { width: 100%; border-collapse: separate; border-spacing: 2px; border: 3px outset var(--sky); background: var(--sky); font-size: 17px; }
.tbl th { background: var(--deep); color: var(--white); text-align: left; padding: 6px 10px; font: 700 15px var(--f-sans); }
.tbl td { background: var(--white); padding: 10px; vertical-align: top; }
.tbl tr:nth-child(even) td { background: var(--cream-row); }
.tbl tr.soonest td { background: #ffffcc; }
.tbl .ev-note { display: block; font-style: italic; margin-top: 4px; }
.tbl small { font-size: 15px; }
.when { white-space: nowrap; }
.when { display: table-cell; }
.when-txt { display: inline-block; vertical-align: top; }
.tear { display: inline-grid; vertical-align: top; width: 46px; margin-right: 10px; text-align: center; border: 2px solid #000; background: var(--white); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.tear-m { background: var(--red); color: var(--white); font: 700 12px/1.5 var(--f-sans); text-transform: uppercase; letter-spacing: 0.06em; }
.tear-d { font: 400 22px/1.3 var(--f-head); color: #000; }
.empty { padding: 12px; background: var(--white); border: 3px inset #ccc; }

/* ---------- photo album + viewer ---------- */

.click-hint { display: flex; align-items: center; gap: 8px; font: 700 15px var(--f-sans) !important; color: var(--green); }
.click-hint .px { --s: 1; flex: none; }
.album { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.thumb { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: center; color: var(--ink); font: inherit; }
.frame {
  display: block; padding: 7px; background: var(--wood);
  border: 6px ridge #cc9966; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px inset #663300; }
.thumb .cap { display: block; margin-top: 8px; font: italic 17px/1.3 var(--f-body); }
.thumb:hover .cap { color: var(--hover); text-decoration: underline; }
.thumb:hover .frame, .thumb:focus-visible .frame { border-color: var(--gold); }
.album li:nth-child(odd) .frame { transform: rotate(-1deg); }
.album li:nth-child(even) .frame { transform: rotate(1deg); }

.popup {
  padding: 0; border: 3px outset #eee; width: min(780px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow: auto;
  background: var(--gray); box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5); color: #000;
}
.popup::backdrop { background: rgba(0, 0, 51, 0.7); }
.popup-bar { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; background: linear-gradient(90deg, var(--deep), #444444); color: var(--white); font: 700 15px var(--f-sans); }
.popup-ico .px { --s: 1; }
#popup-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-x {
  display: grid; place-items: center; width: 32px; height: 28px; padding: 0; background: var(--gray); color: #000; border: 0; cursor: pointer;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.popup-x:active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.popup-body { padding: 10px; }
.popup-img { background: #000; border: 3px inset #999; }
.popup-img img { width: 100%; max-height: min(62dvh, 540px); object-fit: contain; }
.popup-cap { margin: 10px 2px 8px; font: italic 19px var(--f-body); }
.popup-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 15px var(--f-sans); }

/* ---------- the booth cam player ---------- */

.player-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; align-items: start; }
.qt {
  padding: 0 10px 10px; border-radius: 10px 10px 6px 6px;
  background: repeating-linear-gradient(0deg, #d9d9d9 0 1px, #cfcfcf 1px 2px), #d4d4d4;
  border: 1px solid #555; box-shadow: inset 0 1px 0 #fff, 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.qt-bar { display: flex; align-items: center; gap: 10px; height: 28px; }
.qt-lights { display: flex; gap: 6px; }
.qt-lights i { width: 11px; height: 11px; border-radius: 50%; background: #9a9a9a; border: 1px solid #555; box-shadow: inset 1px 1px 0 #ddd; }
.qt-title { flex: 1; text-align: center; font: 700 14px var(--f-sans); color: #000; padding-right: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-screen { position: relative; background: #000; border: 2px solid #333; aspect-ratio: 4 / 3; overflow: hidden; }
.qt-screen img, .qt-video { width: 100%; height: 100%; object-fit: cover; }
.qt-video { position: absolute; inset: 0; background: #000; }
.qt-static {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 2.2 -.6'/%3E%3C/filter%3E%3Crect width='160' height='120' filter='url(%23n)' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#222, #111);
  background-size: 160px 120px, cover;
}
.snow .qt-static { opacity: 1; animation: snow 0.18s steps(4) infinite; }
@keyframes snow { 0% { background-position: 0 0, 0 0; } 25% { background-position: -40px 30px, 0 0; } 50% { background-position: 60px -20px, 0 0; } 75% { background-position: -80px -50px, 0 0; } }
.qt-msg { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0 !important; max-width: none !important; padding: 8px 10px; background: #000; color: var(--gold); font: 23px/1.2 var(--f-led); border: 2px solid var(--gold); text-align: center; }
.qt-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qt-play { width: 44px; height: 34px; display: grid; place-items: center; cursor: pointer; border-radius: 4px; background: linear-gradient(#fafafa, #bdbdbd); border: 1px solid #444; box-shadow: inset 0 1px 0 #fff; }
.qt-play:active { background: linear-gradient(#bdbdbd, #e8e8e8); }
.qt-play .px { --s: 2; }
.qt-play .qt-i-pause, .qt-play[aria-pressed="true"] .qt-i-play { display: none; }
.qt-play[aria-pressed="true"] .qt-i-pause { display: block; }
.qt-track { flex: 1; height: 12px; border-radius: 6px; background: linear-gradient(#999, #eee); border: 1px solid #555; overflow: hidden; }
.qt-fill { display: block; height: 100%; width: 0; background: linear-gradient(var(--gold-hi), var(--gold)); }
.qt-time { font: 700 14px var(--f-sans); color: #000; font-variant-numeric: tabular-nums; }
.qt-vol .px { --s: 2; }
.tapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tape-btn {
  display: grid; justify-items: center; gap: 4px; width: 100%; padding: 8px 6px; cursor: pointer;
  background: #222; color: var(--white); border: 3px outset #666; font: 700 14px/1.25 var(--f-sans); text-align: center;
}
.tape-btn .px { --s: 4; }
.tape-btn[aria-pressed="true"] { border-style: inset; background: #000; color: var(--gold); outline: 2px solid var(--gold); outline-offset: -6px; }
.tape-btn:hover { background: #333; }

/* ---------- about ---------- */

.polaroid { float: right; width: 230px; margin: 4px 0 14px 22px; padding: 9px 9px 30px; background: var(--white); border: 1px solid #999; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); transform: rotate(2deg); }
.polaroid img { aspect-ratio: 1; object-fit: cover; object-position: 0 50%; width: 100%; }
.polaroid figcaption { font: italic 16px var(--f-body); text-align: center; margin-top: 8px; }
.clear { clear: both; }
.bring { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bring li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.bring .px { --s: 3; }
.bring b { font: 700 19px var(--f-sans); color: var(--deep); display: block; }
.mission { margin: 22px 0 0; padding: 14px 18px; background: var(--deep); color: var(--white); border: 4px ridge var(--gold); }
.mission p { margin: 0; }
.mission-h { font: 700 14px var(--f-sans) !important; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px !important; }
.mission q { font: 700 italic 23px/1.3 var(--f-body); quotes: "\201C" "\201D"; }

/* ---------- guestbook form ---------- */

.gb { border: 4px ridge var(--sky); background: var(--ice); padding: 4px; }
.gb-top { display: flex; gap: 6px; justify-content: center; padding: 4px 0 8px; }
/* three pixel-round rivets, drawn on a 2px grid */
.gb-dot {
  width: 12px; height: 12px; background: var(--deep); box-shadow: inset 2px 2px 0 var(--steel);
  clip-path: polygon(4px 0, 8px 0, 8px 2px, 10px 2px, 10px 4px, 12px 4px, 12px 8px, 10px 8px, 10px 10px, 8px 10px, 8px 12px, 4px 12px, 4px 10px, 2px 10px, 2px 8px, 0 8px, 0 4px, 2px 4px, 2px 2px, 4px 2px);
}
.gb-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2px; }
.gb-row + .gb-row { margin-top: 2px; }
.gb-row > label, .gb-row > .lbl { background: var(--deep); color: var(--white); padding: 9px 10px; font: 700 15px var(--f-sans); }
.gb-row .opt { font-weight: 400; color: var(--ice); }
.gb-row > div { background: var(--white); padding: 7px 9px; min-width: 0; }
.gb input:not([type="radio"]), .gb select, .gb textarea {
  width: 100%; font: 18px var(--f-body); padding: 6px 7px; color: #000; min-height: 40px;
  border: 2px inset #ccc; background: var(--white); border-radius: 0;
}
.gb [aria-invalid="true"] { border-color: var(--red); background: #fff0f0; }
.gb textarea { min-height: 96px; resize: vertical; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.radio { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 16px var(--f-sans); cursor: pointer; }
.radio input { width: 18px; height: 18px; accent-color: var(--deep); }
.err { margin: 4px 0 0 !important; color: var(--red); font: 700 15px var(--f-sans); }
.err:empty { display: none; }
.gb-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 8px 6px; }
.gb-foot small { font: 14px var(--f-sans); }

.thanks-card { padding: 18px 20px; background: var(--white); border: 4px ridge var(--gold); }
.thanks-big { font: 400 26px/1.15 var(--f-head) !important; color: var(--green); }
.proto-note { display: inline-block; padding: 4px 8px; background: var(--gold); color: #000; font: 700 15px var(--f-sans); border: 2px solid #000; margin: 4px 0 0 !important; }

/* ---------- guestbook entries ---------- */

.ex-note { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--white); border: 2px dashed var(--rust); font: 700 16px var(--f-sans); max-width: none !important; }
.ex-note .px { --s: 1; flex: none; align-self: center; }
.entries { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.entry { background: var(--white); border: 4px ridge var(--sky); }
.entry.mine { border-color: var(--gold); }
.entry-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; background: var(--ice); border-bottom: 2px solid var(--sky); font: 15px var(--f-sans); }
.entry-h b { font-size: 17px; color: var(--deep); }
.entry-h .tag-ex { margin-left: 0; }
.entry-h time { margin-left: auto; color: #333; }
.entry-n { font: 8px/1 var(--f-pixel); color: var(--rust); }
.entry-msg { margin: 0 !important; padding: 12px 14px; font-style: italic; font-size: 19px; }
.entry-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; padding: 12px 14px 0; }
.entry-dl dt { font: 700 15px var(--f-sans); color: var(--deep); }
.entry-dl dd { margin: 0; }

/* ---------- shop ---------- */

.rack { list-style: none; margin: 8px 0 0; padding: 26px 8px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 190px)); justify-content: center; gap: 16px; position: relative; border-top: 8px solid #666; border-image: linear-gradient(#ddd, #555) 1; }
.hanger { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px; background: var(--white); border: 3px outset #ddd; text-align: center; }
.hook { position: absolute; top: -26px; left: 50%; width: 18px; height: 24px; margin-left: -9px; border: 3px solid #555; border-bottom: 0; border-radius: 10px 10px 0 0; }
.shirt-art .px { --s: 7; }
.shop-next { display: flex; align-items: center; gap: 10px; font: 700 17px var(--f-sans); color: var(--deep); }
.shop-next .px { flex: none; }
.tagline { display: grid; gap: 2px; font: 16px var(--f-sans); }
.price { font: 26px/1 var(--f-led); color: var(--green); }
.stamp { position: absolute; top: 52px; left: 50%; translate: -50% 0; rotate: -12deg; padding: 3px 8px 2px; font: 400 13px/1.3 var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); background: rgba(255, 255, 255, 0.92); border: 3px double var(--red); width: max-content; max-width: 88%; text-align: center; }

/* ---------- links ---------- */

.ring-box { border: 4px ridge var(--gold); background: var(--deep); padding: 14px; color: var(--white); }
.ring-card { background: #000; border: 3px inset #666; padding: 12px 14px; min-height: 168px; outline: none; }
.ring-card:focus-visible { outline: 3px dashed var(--orange); }
.ring-card p { margin: 0 0 6px; color: var(--white); }
.ring-stop { font: 20px/1 var(--f-led); color: var(--gray) !important; }
.ring-name { font: 400 24px/1.15 var(--f-head); color: var(--gold) !important; }
.ring-owner { font: italic 17px var(--f-body); color: var(--sky) !important; }
.ring-ph { font: 19px/1.2 var(--f-led); color: var(--gold) !important; }
.tag-here { display: inline-block; vertical-align: 4px; padding: 3px 5px; font: 8px/1 var(--f-pixel); background: var(--lime); color: #000; }
.ring-ctl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.cool { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cool li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.cool .px { margin-top: 2px; }
.cool b { font: 700 18px var(--f-sans); color: var(--deep); }
.cool code { font: 19px var(--f-led); color: var(--green); overflow-wrap: anywhere; }

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

.foot { padding: 0 20px 20px; border-top: 4px ridge var(--sky); background: var(--butter); }
.hits { text-align: center; margin: 0 0 18px; }
.hits-h { margin: 0 0 4px; font: 700 16px var(--f-sans); color: var(--deep); }
.odo { display: inline-flex; gap: 3px; margin: 0; padding: 3px; background: #333; box-shadow: inset 1px 1px #000, inset -1px -1px #999, inset 2px 2px #000, inset -2px -2px #666; }
.dg { position: relative; width: 21px; height: 33px; overflow: hidden; }
/* the strip rolls a whole pixel (3 screen pixels) per step, never in between */
.dg-strip { position: absolute; left: 0; top: 0; width: 21px; height: 330px; background: var(--img) 0 0 / 21px 330px no-repeat; transform: translateY(calc(var(--n, 0) * -33px)); transition: transform 0.44s steps(11, end); }
.badges { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.badges li { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); }
.webring { margin: 0 auto 14px; max-width: 560px; border: 3px outset var(--sky); background: var(--ice); padding: 8px 12px; text-align: center; }
.ring-title { margin: 0 0 6px; font: 15px var(--f-sans); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ring-ico .px { flex: none; }
.ring-links { margin: 0; display: flex; justify-content: center; gap: 6px 24px; flex-wrap: wrap; font: 700 16px var(--f-sans); }
.ring-links a { padding: 4px 2px; }

/* ---------- sparkle trail ---------- */

.spark {
  position: fixed; z-index: var(--z-spark); width: 3px; height: 3px; margin: 4px 0 0 4px; pointer-events: none;
  background: var(--c); box-shadow: 3px 0 var(--c), -3px 0 var(--c), 0 3px var(--c), 0 -3px var(--c);
  animation: spark 0.7s steps(7) forwards;
}
@keyframes spark { to { transform: translate(var(--dx), 26px); opacity: 0; } }

/* ---------- motion off: the "Blinky stuff" switch and the device setting ---------- */

html.still *, html.still *::before, html.still *::after { animation-play-state: paused !important; }
html.still .spark { display: none; }
html.still .gif > .px, html.still .spr { animation: none; }
html.still .ticker-track { animation: none; padding: 0 12px; white-space: normal; display: block; }
html.still .ticker-track i { padding: 0 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track { padding: 0 12px; white-space: normal; display: block; }
  .spark { display: none; }
}

/* ---------- smaller screens ---------- */

@media (max-width: 1180px) {
  .proto-sticker { position: relative; top: auto; right: auto; display: table; margin: 12px auto -12px; transform: rotate(-1deg); }
}
@media (max-width: 860px) {
  .player-wrap { grid-template-columns: 1fr; }
  .tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .page { width: calc(100% - 16px); margin: 18px auto 24px; border-width: 4px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45); }
  .mast-row { grid-template-columns: 44px 1fr 44px; padding: 16px 8px 14px; gap: 4px; }
  .reel { --s: 2; }
  .mast-pre { font-size: 15px; }
  .mast-name { margin-bottom: 12px; }
  .wordart, .wordart:visited, .wordart:hover { font-size: 40px; -webkit-text-stroke: 1.5px #000; text-shadow: 1px 1px 0 #ff9900, 2px 2px 0 var(--orange), 3px 3px 0 var(--rust), 4px 4px 0 #993300, 5px 5px 0 #000; }
  .mast-tag { font-size: 14px; line-height: 1.5; }
  .mast-tag .dot { display: none; }
  .mast-tag .it { display: inline-block; margin: 0 5px; }
  .ticker-track { font-size: 23px; }
  .crumbs { font-size: 21px; padding: 4px 10px; }

  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "main" "extras"; grid-template-rows: none; background: none; }
  .frame-nav { padding: 10px 10px 10px; background: var(--steel); }
  .navbox { margin: 0; }
  .js .navbox { padding-bottom: 0; }
  .js #nav-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .menu-btn {
    display: flex; align-items: center; gap: 10px; width: calc(100% + 18px); margin: 0 -9px; min-height: 46px; padding: 6px 12px;
    background: var(--deep); color: var(--white); border: 0; font: 700 16px var(--f-sans); cursor: pointer; text-align: left;
  }
  .js .menu-btn b { color: var(--gold); }
  .menu-btn .menu-ico { margin-left: auto; order: 2; }
  .menu-btn .menu-ico .px { filter: invert(1); }
  .js .navlist { display: none; }
  .js.nav-open .navlist { display: grid; padding: 10px 0; }
  .mi-close, .js.nav-open .mi-open { display: none; }
  .js.nav-open .mi-close { display: block; }
  .navlist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .navbtn { font-size: 15px; padding: 6px; }

  .content { border-left: 0; border-top: 4px ridge var(--gray); border-bottom: 4px ridge var(--gray); padding: 20px 14px 24px; }
  .frame-extras { display: grid; gap: 10px; padding: 12px 10px; background: var(--steel); }
  .frame-extras .box { margin: 0; }
  .mailbox { flex-direction: row; justify-content: center; gap: 14px; }
  .mailbox-box .small { margin-top: 2px; }
  .knobs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .knobs .box-h, .knobs .midi, .knobs .rm-note { grid-column: 1 / -1; }
  .midi { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .midi .tog { width: auto; min-width: 116px; }
  .sign-wrap { margin: 0; }

  .flyer { grid-template-columns: 1fr; gap: 12px; }
  .led { justify-self: start; display: flex; gap: 10px; align-items: baseline; min-width: 0; }
  .album { gap: 16px 12px; }
  .thumb .cap { font-size: 15px; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl { border-spacing: 0; }
  .tbl tr { border-bottom: 3px solid var(--sky); }
  .tbl td { padding: 4px 12px; }
  .tbl td:first-child { padding-top: 12px; }
  .tbl td:last-child { padding-bottom: 12px; }
  .when { display: block; }
  .gb-row { grid-template-columns: minmax(0, 1fr); }
  .polaroid { float: none; margin: 0 auto 18px; }
  .rack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rack .hanger:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .shirt-art .px { --s: 6; }
  .stamp { top: 40px; font-size: 11px; }
  .foot { padding: 0 12px 16px; }
  .badges { gap: 4px; margin-left: -8px; margin-right: -8px; }
  .entry-h time { margin-left: 0; flex-basis: 100%; }
  .c-body { grid-template-columns: 52px 1fr; gap: 12px; padding: 10px 12px; }
  .c-body .px { --s: 3; }
  .c-body b { font-size: 20px; }
}
@media (max-width: 340px) {
  .navlist, .knobs { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) and (pointer: coarse) {
  #tog-trail { display: none; }
}

/* =================================================================
   Full rendition additions: changelog, shelf, map, FAQ, 404, e-card, print
   ================================================================= */

/* ---------- What's new (home changelog) ---------- */
.news-box { margin: 26px 0 0; border: 3px outset var(--sky); background: var(--ice); }
.content h2.news-bar {
  margin: 0; padding: 6px 10px; gap: 10px; background: var(--deep); color: var(--white);
  font: 700 18px/1.2 var(--f-sans);
}
.content h2.news-bar .px { flex: none; }
.news-upd { margin-left: auto; font: 20px/1 var(--f-led); color: var(--gold); white-space: nowrap; }
.news-scroll {
  max-height: 212px; overflow: auto; margin: 8px; background: var(--white); border: 3px inset #ccc;
  scrollbar-color: var(--steel) var(--ice);
}
.news-scroll:focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 6px var(--gold); }
.news { list-style: none; margin: 0; padding: 4px 12px; }
.news li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--steel); }
.news li:last-child { border-bottom: 0; }
.news-d { font: 21px/1.15 var(--f-led); color: var(--red); font-variant-numeric: tabular-nums; }
.news-t { font-size: 17px; line-height: 1.4; }
.news-t .new { vertical-align: -2px; margin-left: 2px; }

/* ---------- shared bits ---------- */
.pg-h .abbr { font: 700 18px var(--f-sans); color: var(--deep); }
.pg-h .draft { font-size: 10px; vertical-align: 10px; margin-left: 4px; white-space: nowrap; }
.tell-box .mb-ico.ecard { --s: 3; }
.tell-box .mailbox:hover .mb-ico.ecard .px { transform: rotate(-4deg); }

/* ---------- On the shelf ---------- */
.shelf-tbl { font-size: 16px; table-layout: fixed; }
.shelf-tbl th:nth-child(3), .shelf-tbl td.c-price { width: 112px; }
.shelf-tbl th:nth-child(4), .shelf-tbl td.c-status { width: 136px; }
.shelf-tbl th.c-pic, .shelf-tbl td.c-pic { width: 92px; text-align: center; }
.pic-frame { display: inline-block; padding: 4px; background: #000; border: 2px inset #666; line-height: 0; }
.pic-frame .sleeve { --s: 3; }
.pic-frame .pic-shirt { display: grid; place-items: center; width: 64px; height: 78px; background: var(--white); }
.pic-frame .pic-shirt .px { --s: 3; }
.pic-frame img { width: 54px; height: 72px; object-fit: cover; }
.shelf-tbl .ev-title { font-size: 18px; }
.shelf-tbl .meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font: 14px/1.35 var(--f-sans); color: #333; }
.shelf-tbl .meta b { color: var(--deep); }
.shelf-tbl .c-price { overflow-wrap: anywhere; }
.no-price { font: 14px/1.35 var(--f-sans); color: #333; }
.shelf-tbl .c-status { min-width: 128px; font: 700 14px var(--f-sans); }
.lamp { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.st-out .ev-title, .st-out .price { text-decoration: line-through; text-decoration-thickness: 2px; }
.st-out td { color: #333; }
.btn99.hold { display: flex; width: max-content; margin-top: 8px; min-height: 34px; padding: 3px 12px; font-size: 14px; }
.legend { margin-top: 10px !important; }

/* ---------- Where to find us ---------- */
.map-wrap { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 22px; align-items: start; }
.map-fig { margin: 0; }
.map-frame { padding: 6px; background: var(--wood); border: 6px ridge #cc9966; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); }
/* the map is drawn 8 screen pixels to a square, so it stays at its own size */
.njmap { display: block; width: 288px; height: 424px; background: #000; border: 2px solid; border-color: #663300 #cc9966 #cc9966 #663300; box-sizing: content-box; }
.map-pin.is-next { animation: pin-hop 1.4s steps(2) infinite; }
@keyframes pin-hop { 50% { transform: translateY(-4px); } }
.map-fig figcaption { margin-top: 10px; font-style: italic; }
.map-side .content h2, .map-side h2 { margin-top: 0 !important; }
.legend-list { list-style: none; counter-reset: pin; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.legend-list li { counter-increment: pin; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font: 700 16px/1.35 var(--f-sans); color: var(--deep); }
.legend-list .lg-n { padding-top: 0; --s: 2; }
.legend-list small { font: 400 15px var(--f-sans); color: #333; }
.legend-list .new { margin-left: 4px; }
.spot-box { padding: 12px 14px; background: #000; border: 3px inset #666; color: var(--white); }
.spot-box p { margin: 0 0 4px; color: var(--white); }
.spot-h { display: flex; align-items: center; gap: 10px; font: 22px/1.1 var(--f-led); color: var(--gold) !important; }
.spot-h .px { flex: none; }
.spots { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.spot { padding: 12px 14px 4px; background: var(--white); border: 4px ridge var(--sky); }
.spot-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font: 17px/1.3 var(--f-sans); }
.spot-name b { color: var(--deep); font-size: 19px; }
.spot-name .tag-ex { margin-left: 0; }
.spot-n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; font: 24px/1 var(--f-led); color: var(--white); background: var(--red); border: 2px solid #000; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tips li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; }
.tips .px { margin-top: 6px; }

/* ---------- FAQ ---------- */
.faq-toc { margin: 4px 0 0; padding: 12px 16px 6px; background: var(--white); border: 4px ridge var(--sky); }
.toc-h { font: 700 16px var(--f-sans) !important; color: var(--deep); margin-bottom: 6px !important; }
.faq-toc ol { margin: 0 0 8px; padding-left: 28px; display: grid; gap: 4px; }
.faq-toc li::marker { font: 700 16px var(--f-sans); color: var(--rust); }
.faq { list-style: none; margin: 0; padding: 0; }
.qa { padding: 16px 0 6px; border-top: 2px dashed var(--steel); scroll-margin-top: 16px; }
.qa:first-child { border-top: 0; padding-top: 0; }
.qa:target { background: #ffffff; outline: 3px solid var(--gold); outline-offset: 6px; }
.content h2.q { margin: 0 0 8px; gap: 10px; font: 700 20px/1.3 var(--f-sans); color: var(--deep); align-items: baseline; flex-wrap: nowrap; }
.qa-k { flex: none; font: 400 22px/1 var(--f-head); color: var(--rust); min-width: 32px; }
.qa .a { display: flex; gap: 10px; align-items: baseline; }
.qa .a .qa-k { color: var(--green); }
.qa .a p { margin-bottom: 6px; }
.qa .up { font: 14px var(--f-sans); }
.still { margin-top: 24px; padding: 14px 18px 16px; background: var(--deep); color: var(--white); border: 4px ridge var(--gold); }
.still p { color: var(--white); }
.still-h { display: flex; align-items: center; gap: 10px; font: 400 22px/1.1 var(--f-head) !important; color: var(--gold) !important; }
.still-h .px { flex: none; }
.still .cta-row { margin-top: 10px !important; }

/* ---------- 404 ---------- */
.pg-h.lost-h { font-size: clamp(26px, 3.6vw, 34px); }
.lost-card { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; background: var(--white); border: 4px double var(--rust); box-shadow: 5px 5px 0 var(--gold); }
.lost-card p { margin: 0; font-size: 19px; }
.lost-env { position: relative; }
.lost-env .env { --s: 8; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.35)); }
.rts { --s: 3; position: absolute; left: 12px; top: 84px; line-height: 0; }
.lost-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.lost-links a { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 700 17px var(--f-sans); }
.lost-links .px { flex: none; }

/* ---------- page ring ---------- */
.pagering { background: var(--butter); border-color: var(--gold-hi); }
.pagering .ring-title b { font-weight: 700; color: var(--deep); }


@media (max-width: 720px) {
  .news li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .news-upd { display: none; }
  .shelf-tbl tr { display: grid !important; grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .shelf-tbl td { padding: 0 !important; background: none !important; }
  .shelf-tbl tr:nth-child(even) { background: var(--cream-row); }
  .shelf-tbl tr { background: var(--white); }
  .shelf-tbl td.c-pic { grid-row: 1 / span 3; width: auto; }
  .shelf-tbl .c-price { margin-top: 6px; }
  .shelf-tbl .c-status { min-width: 0; margin-top: 4px; }
  .map-wrap { grid-template-columns: minmax(0, 1fr); }
  .map-fig { max-width: 320px; margin: 0 auto; width: 100%; }
  .lost-card { grid-template-columns: minmax(0, 1fr); }
  .lost-env { max-width: 240px; margin: 0 auto; }
  .lost-links { grid-template-columns: minmax(0, 1fr); }
  .navlist li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .content h2.q { font-size: 18px; }
}

/* ---------- print: just the words, black on white ---------- */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11.5pt; }
  .page { width: auto; margin: 0; border: 0; box-shadow: none; background: #fff; }
  .mast { background: #fff !important; color: #000; border-bottom: 2px solid #000; }
  .mast-row { grid-template-columns: 1fr; padding: 0 0 8pt; }
  .wordart, .wordart:visited { color: #000 !important; -webkit-text-stroke: 0; text-shadow: none; transform: none; font-size: 26pt; }
  .mast-pre, .mast-tag, .mast-tag .dot { color: #000 !important; }
  .reel, .ticker, .crumbs, .frame-nav, .frame-extras, .sparkle-rule, .hits, .badges, .webring, .to-top, .menu-btn,
  .skip, .qt, .tapes, .popup, .spark, .hold, .cta-row, .b88-link, .click-hint, .faq-toc, .up, .qt-static, .player-wrap { display: none !important; }
  .print-only { display: block; text-align: center; font: 10pt var(--f-sans); }
  .layout { display: block; background: none; }
  .content { border: 0; padding: 12pt 0 0; }
  .foot { border-top: 1px solid #000; background: #fff; padding: 6pt 0 0; }
  a, a:visited { color: #000; }
  .content a[href^="http"]::after, .content a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; overflow-wrap: anywhere; }
  .pg-h, .content h2, .ev-title, .kicker, .headline, .news-bar { color: #000 !important; }
  .content h2.news-bar { background: #fff; border-bottom: 1px solid #000; }
  .content h2.news-bar .px { filter: none; }
  .news-scroll { max-height: none; overflow: visible; border: 0; }
  .tbl, .tbl td, .tbl th, .tbl tr { background: #fff !important; color: #000 !important; }
  .tbl { border: 1px solid #000; }
  .tbl th { border-bottom: 1px solid #000; }
  .tag-ex, .draft, .tag-here { animation: none !important; background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .new .gif { display: none; }
  .new .sr-only { position: static !important; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; padding: 0 3px; border: 1px solid #000; font: 700 8pt var(--f-sans); line-height: 1.4; }
  .visitor, .spot-box, .still, .mission, .ring-box, .ring-card { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
  .visitor *, .spot-box *, .still *, .mission *, .spot-h { color: #000 !important; }
  .led { background: #fff; border: 1px solid #000; } .led-dow, .led-day { color: #000; }
  .flyer, .entry, .thanks-card, .lost-card, .spot, .gb, .news-box { box-shadow: none; border: 1px solid #000; background: #fff; }
  .proto-sticker { position: static; display: block; transform: none; box-shadow: none; margin: 0 0 8pt; border: 1px solid #000; max-width: none; }
  .polaroid { float: right; box-shadow: none; transform: none; width: 45mm; }
  .album { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frame { box-shadow: none; }
  .map-fig { max-width: 70mm; }
  tr, .entry, .qa, .flyer, .spot, .hanger, .album li, .news li { break-inside: avoid; }
  h1, h2 { break-after: avoid; }
}

/* ---------- Crypt Video Rentals: the logo and pieces the real content needs ---------- */
/* The logo is traced from the Instagram avatar (tools/make_logo.py): Tim's letter shapes, black on its yellow. */
.wordart.has-logo, .wordart.has-logo:visited, .wordart.has-logo:hover { display: inline-block; font-size: 0; line-height: 0; -webkit-text-stroke: 0; text-shadow: none; transform: rotate(-2deg); }
.wordart.has-logo img { display: block; width: clamp(240px, 46vw, 440px); height: auto; border: 3px solid #000; box-shadow: 6px 6px 0 #000, 6px 6px 0 3px var(--sky); }
.wordart.has-logo:hover img { box-shadow: 6px 6px 0 #000, 6px 6px 0 3px var(--gold); }
.home-mark { float: right; width: clamp(96px, 18vw, 150px); height: auto; margin: 0 0 12px 18px; border: 3px solid #000; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); transform: rotate(4deg); }
/* on a phone the logo tile tucks up beside "Welcome!" so the headline keeps the full width */
@media (max-width: 720px) { .home-mark { width: 76px; margin: -62px 0 4px 10px; } }
.polaroid.is-logo img { object-fit: contain; background: var(--white); }
.foot-links { list-style: none; margin: 0 auto 16px; padding: 10px 12px; max-width: 520px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; background: var(--white); border: 3px ridge var(--gold); font: 700 15px var(--f-sans); }
.entry-subj { margin: 0; padding: 10px 14px 0; font: 700 17px var(--f-sans); color: var(--deep); }
.entry-subj + .entry-msg { padding-top: 4px; }
.past-tag { display: inline-block; margin-top: 4px; padding: 3px 5px; font: 8px/1 var(--f-pixel); color: var(--white); background: var(--red); }
.past-tbl td { vertical-align: top; }
.open-sign { margin: 6px 0 22px; padding: 14px 18px 16px; background: var(--deep); color: var(--white); border: 4px ridge var(--gold); }
.open-sign p { margin: 0; color: var(--white); }
.open-sign .open-h { margin-bottom: 8px; font: 16px/1.25 var(--f-pixel); color: var(--lime); }
.hanger .item-detail { font: 14px/1.35 var(--f-sans); color: #333; }
.hanger .buy { margin-top: auto; }
.hanger.is-sold img { filter: grayscale(0.6); }
.hanger img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid #999; }

/* ---------- Crypt TV: the home page centerpiece, framed like a 1999 table cell ---------- */
.tv-box { clear: both; margin: 8px 0 24px; padding: 8px; background: var(--ice); border: 3px outset var(--sky); }
.content h2.tv-bar { display: flex; justify-content: center; margin: 0 0 8px; padding: 8px 6px; background: #000; border: 3px inset #666; }
.tv-marquee { --s: 3; display: block; line-height: 0; }
.tv-cell { padding: 16px 0 12px; background: #0d0c0e; border: 3px inset #666; }
.tv-mount { min-height: 300px; }
.tv-still { width: min(100%, 528px); margin: 0 auto; border: 3px inset #333; }
.tv-nojs { margin: 10px 12px 0 !important; color: var(--white); text-align: center; }
.tv-note { display: flex; gap: 10px; align-items: center; margin: 10px 2px 0 !important; font: 700 15px/1.4 var(--f-sans); color: var(--deep); }
.tv-note .px { --s: 1; flex: none; }
@media (max-width: 720px) {
  /* the set needs 352px for its 2x scale, so the frame borrows the column's side padding */
  .tv-box { margin: 8px -14px 22px; padding: 0; border-width: 2px; }
  .content h2.tv-bar { margin: 0; border-width: 2px; }
  .tv-marquee { --s: 2; }
  .tv-cell { padding: 10px 0 8px; border-width: 2px; }
  .tv-note { margin: 8px 10px 10px !important; font-size: 14px; }
}
@media print { .tv-box { display: none; } }


/* ---------- pop-up windows (fx99.js): event details, the photo viewer, page notes ---------- */
.win99 {
  position: fixed; inset: auto; margin: 0; padding: 0; z-index: 40;
  width: min(var(--ww, 560px), calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
  background: var(--gray); color: #000; border: 0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 10px 10px 0 rgba(0, 0, 0, 0.45);
  padding: 3px;
}
.win99-bar {
  display: flex; align-items: center; gap: 6px; padding: 3px 3px 3px 6px; min-height: 30px;
  background: linear-gradient(90deg, var(--deep), #1084d0); color: var(--white);
  font: 700 15px var(--f-sans); cursor: move; touch-action: none; user-select: none;
}
.win99.is-drag { opacity: 0.94; }
.win99-ico { flex: none; line-height: 0; }
.win99-ico .px { --s: 1; }
.win99-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win99-move, .win99-x {
  flex: none; display: grid; place-items: center; width: 30px; height: 26px; padding: 0; background: var(--gray); color: #000; border: 0; cursor: pointer;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font: 700 14px var(--f-sans);
}
.win99-move { width: 26px; }
.win99-move:active, .win99-x:active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.win99-body { padding: 10px; background: var(--gray); }
.win99-zoom { animation: win99-zoom 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes win99-zoom { from { transform: scale(0.08); opacity: 0.2; } to { transform: none; opacity: 1; } }
.win99 :focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.pv .popup-img img { width: 100%; max-height: min(58dvh, 540px); object-fit: contain; background: #000; }
.ev-win { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ev-flyer { display: block; background: #000; border: 3px inset #999; line-height: 0; }
.ev-flyer img { width: 100%; height: auto; }
.ev-facts { font: 16px/1.45 var(--f-sans); }
.ev-facts p { margin: 0 0 10px; }
.ev-win-title { font: 700 21px/1.2 var(--f-sans); color: var(--deep); }
.ev-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; padding: 8px 10px; background: var(--white); border: 2px inset #999; }
.ev-facts dt { font-weight: 700; }
.ev-facts dd { margin: 0; }
@media (max-width: 560px) { .ev-win { grid-template-columns: 1fr; } .ev-flyer { max-width: 240px; } }
.ev-open { display: inline; padding: 0; margin: 0; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; text-align: left; font: inherit; }
.ev-open:hover { color: var(--hover); }
.ev-price { display: inline-block; margin-top: 4px; font: 700 15px var(--f-sans); color: var(--green); }
.sold-tag { display: inline-block; padding: 3px 5px; font: 8px/1 var(--f-pixel); color: #000; background: var(--gold); border: 1px solid #000; vertical-align: middle; }
.ev-tbl tr.is-past td { background: #e6e6e6; color: #444; }
.ev-tbl tr.is-past .ev-open { color: #444; }
.ev-tbl tr.is-past .tear { filter: grayscale(1); opacity: 0.7; }
.home-base { font: 700 16px var(--f-sans); }

/* ---------- first-visit boot and dial-up ---------- */
html.booting body { overflow: hidden; }
.boot99 {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: #000; color: #c0c0c0;
}
.boot99::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px); }
.boot99.is-out { opacity: 0; transition: opacity 0.25s ease-out; }
.boot99-bios { position: absolute; left: 24px; top: 20px; right: 24px; margin: 0; font: 22px/1.3 var(--f-led); color: #c0c0c0; text-shadow: 0 0 6px rgba(255, 255, 255, 0.35); white-space: pre-wrap; }
.boot99-dial { width: min(420px, 100%); background: var(--gray); color: #000; padding: 3px; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.boot99-dial .win99-bar { cursor: default; }
.boot99-body { padding: 14px; font: 15px/1.4 var(--f-sans); }
.boot99-pcs { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.boot99-pcs .pc { width: 44px; height: 34px; background: #000; border: 3px solid #c0c0c0; box-shadow: 0 0 0 2px #000, 0 8px 0 -2px #808080; }
.boot99-pcs .wire { display: flex; gap: 8px; }
.boot99-pcs .wire i { width: 8px; height: 8px; background: #000; animation: boot99-blink 0.9s steps(1) infinite; }
.boot99-pcs .wire i:nth-child(2) { animation-delay: 0.3s; }
.boot99-pcs .wire i:nth-child(3) { animation-delay: 0.6s; }
@keyframes boot99-blink { 50% { background: #f0e838; } }
.boot99-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 10px; }
.boot99-dl dt { font-weight: 700; }
.boot99-dl dd { margin: 0; }
.boot99-status { margin: 0 0 8px; font-weight: 700; }
.boot99-meter { height: 18px; background: var(--white); box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; padding: 2px; }
.boot99-meter i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); transition: width 0.5s steps(8); }
.boot99-skip {
  position: absolute; right: 18px; bottom: 18px; z-index: 2; min-height: 48px; padding: 10px 20px;
  font: 700 18px var(--f-sans); color: #000; background: var(--gold); border: 0; cursor: pointer;
  box-shadow: inset -2px -2px #663300, inset 2px 2px #ffff99;
}
.boot99-skip:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- screensaver ---------- */
.saver99 { position: fixed; inset: 0; z-index: 1100; background: #000; cursor: none; }
.saver99 canvas { width: 100%; height: 100%; display: block; }
.saver99-tag { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 6px 12px; font: 26px var(--f-led); color: #000; background: #f0e838; border: 3px solid #000; }

/* ---------- "Leave a note on this page" ---------- */
.note-fab {
  position: fixed; left: 14px; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 6px 8px; font: 700 14px var(--f-sans); color: #000; background: #ffff99; border: 0; cursor: pointer;
  box-shadow: inset -2px -2px #996600, inset 2px 2px #fff, 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.note-fab:hover { background: var(--gold); }
.note-fab:active { box-shadow: inset 2px 2px #996600, inset -2px -2px #fff; }
.note-fab svg { flex: none; image-rendering: pixelated; }
@media (max-width: 600px) { .note-fab { left: 8px; bottom: 8px; font-size: 13px; padding: 5px 10px 5px 6px; } .foot { padding-bottom: 64px; } }
@media print { .note-fab, .win99 { display: none !important; } }
.note-wrap { font: 16px/1.45 var(--f-sans); }
.note-wrap label { display: block; margin: 8px 0 4px; font-weight: 700; }
.note-wrap input, .note-wrap textarea { width: 100%; box-sizing: border-box; padding: 8px; font: 17px var(--f-sans); background: var(--white); border: 0; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #000, inset -2px -2px #dfdfdf; }
.note-lead, .note-msg { margin: 0 0 8px; }
.note-err { min-height: 1.4em; margin: 6px 0; color: #990000; font-weight: 700; }
.note-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.note-state { font-weight: 700; color: var(--green); }
.note-h { margin: 14px 0 6px; font: 700 15px var(--f-sans); }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note-list li { padding: 8px 10px; background: #ffffcc; border: 1px solid #999; }
.note-list p { margin: 0; white-space: pre-wrap; }
.note-meta { margin-top: 6px !important; font-size: 13px; color: #333; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn99.big { min-height: 48px; padding: 10px 20px; font-size: 17px; }
.btn99.small { min-height: 30px; padding: 3px 10px; font-size: 13px; }

/* ---------- Games: Tape Sweeper ---------- */
.sweep99 { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 10px 0 20px; }
.sw-frame { border-collapse: collapse; background: var(--gray); box-shadow: inset -2px -2px #808080, inset 2px 2px #fff, 6px 6px 0 rgba(0, 0, 0, 0.35); }
.sw-frame td { padding: 8px; }
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 5px; box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; }
.sw-lcd { min-width: 52px; padding: 0 4px; font: 34px/1 var(--f-led); color: #ff2020; background: #000; text-align: right; font-variant-numeric: tabular-nums; }
.sw-face { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: var(--gray); border: 0; cursor: pointer; box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; }
.sw-face .px { --s: 3; }
.sw-face:active { box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; }
.sw-grid { display: grid; grid-template-columns: repeat(9, 32px); box-shadow: inset 3px 3px #808080, inset -3px -3px #fff; padding: 3px; }
.sq {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; background: var(--gray); cursor: pointer;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; font: 700 18px var(--f-sans);
}
.sq .px { --s: 2; }
.sq.open { box-shadow: inset 1px 1px #808080; cursor: default; }
.sq.boom { background: #ff0000; }
.sq.n1 { color: #0000ff; } .sq.n2 { color: #008000; } .sq.n3 { color: #ff0000; } .sq.n4 { color: #000080; } .sq.n5 { color: #800000; } .sq.n6 { color: #008080; } .sq.n7 { color: #000; } .sq.n8 { color: #808080; }
.sq:focus-visible { outline: 2px dotted #000; outline-offset: -5px; }
.sw-side { flex: 1 1 240px; min-width: 0; }
.sw-side .btn99 { display: inline-flex; gap: 8px; align-items: center; }
.sw-side .btn99[aria-pressed="true"] { background: var(--orange); }
.sw-side .btn99 .px { --s: 2; }
.sw-msg { font: 700 17px var(--f-sans); min-height: 1.5em; }
.sw-how { list-style: none; margin: 0; padding: 0; }
.sw-how li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.sw-how .px { --s: 1; flex: none; margin-top: 6px; }
@media (max-width: 420px) { .sw-grid { grid-template-columns: repeat(9, 30px); } .sq { width: 30px; height: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .win99-zoom, .boot99-pcs .wire i { animation: none !important; }
  .boot99-meter i, .boot99.is-out { transition: none !important; }
}

/* the two tagline lines are long: on a phone they stack instead of running off the masthead */
@media (max-width: 720px) {
  .mast-tag .it { display: block; white-space: normal; }
  .mast-tag .dot { display: none; }
}

/* Black, white and Crypt yellow (Cody, 2026-10-12): the spots the token swap can't reach on its own */
.ticker-track i { color: var(--gold); }
.led-dow { color: var(--gold); }
.crumbs a, .crumbs a:visited, .crumbs b { color: var(--gold); }
.navbtn[aria-current="page"] { color: var(--gold) !important; }
.navbtn[aria-current="page"] svg { filter: none; }
.wordart, .wordart:visited, .wordart:hover { background: none; }
.mast a:hover, .ring-box a:hover, .mission a:hover, .still a:hover { color: #000; }

/* Zeke pop-ups (zeke.js): the mascot as an 8-bit sprite climbing out of the bottom of the screen */
.zeke { position: fixed; bottom: 0; left: 50%; z-index: 35; width: var(--zw, 240px); display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: translateY(110%); }
.zeke[hidden] { display: none !important; }
.zeke.zeke-up { animation: zeke-rise 0.5s steps(5) forwards; }
.zeke.zeke-down { animation: zeke-sink 0.5s steps(5) forwards; }
.zeke.zeke-still { transform: none; animation: none !important; }
@keyframes zeke-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes zeke-sink { from { transform: translateY(0); } to { transform: translateY(110%); } }
.zeke-me { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; line-height: 0; }
.zeke-me img { width: var(--zw, 240px); height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.zeke.zeke-up .zeke-me img { animation: zeke-bob 0.9s steps(2) 0.5s infinite; }
@keyframes zeke-bob { 50% { transform: translateY(-3px); } }
.zeke-me:focus-visible { outline-offset: -4px; }
.zeke-say {
  position: relative; display: flex; align-items: flex-start; gap: 8px; width: var(--bw, 300px); max-width: calc(100vw - 24px); flex: none; margin: 0 0 14px; padding: 12px 12px 12px 14px;
  background: var(--white); color: #000; border: 4px solid #000; pointer-events: auto;
  box-shadow: 0 0 0 4px var(--gold), 6px 6px 0 4px #000;
}
/* the pixel tail, pointing down at his head */
.zeke-say::after {
  content: ""; position: absolute; left: 50%; bottom: -18px; width: 16px; height: 14px; margin-left: -8px; background: #000;
  clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 100%, 25% 100%, 25% 50%, 0 50%);
}
.zeke-say.zeke-pop { animation: zeke-pop 0.24s steps(3); }
@keyframes zeke-pop { from { transform: scale(0.6); } to { transform: scale(1); } }
.zeke-line { margin: 0; font: 10px/1.7 var(--f-pixel); letter-spacing: 0.02em; min-height: 2.2em; text-wrap: pretty; }
.zeke-line a, .zeke-line a:visited { color: #000; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.zeke-line a:hover { background: var(--gold); }
.zeke-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px 0 0; padding: 0; border: 2px solid #000; background: var(--gold); color: #000; cursor: pointer; }
.zeke-x:hover { background: #000; color: var(--gold); }
@media (max-width: 600px) {
  .zeke-say { position: fixed; right: 18px; bottom: 98px; width: min(280px, calc(100vw - 20px)); }
  .zeke-say::after { left: auto; right: 70px; }
}
.zeke-tight .zeke-say { align-self: flex-end; margin-right: 6px; }
.zeke-tight .zeke-say::after { left: auto; right: calc(var(--zw, 180px) / 2 - 8px); margin-left: 0; }
@media print { .zeke { display: none !important; } }