/* Dead Pixels — deadpixels.club
   "Weniger, aber besser."
   A catalog for ten thousand ghosts: deep velvet purple, light ink,
   hairlines, one instrument accent (the mint LED). Ghosts are shown as
   specimens at native 47px resolution, scaled only by whole integers.
   The Shenanigans apps keep their own near-black world. */

:root {
  color-scheme: dark;

  --paper: #272231;          /* velvet — dark, desaturated purple */
  --paper-2: #2F2940;        /* raised surface */
  --paper-3: #3A3350;        /* pressed / hover */
  --ink: #F1EEF6;            /* light ink */
  --ink-2: #B7B0C6;
  --ink-3: #837C95;
  --hairline: rgba(241, 238, 246, 0.16);
  --hairline-soft: rgba(241, 238, 246, 0.09);

  --led: #3BE8BC;            /* the one accent: instrument signal */
  --led-glow: rgba(59, 232, 188, 0.4);

  --font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --w: 1060px;               /* catalog column */
  /* the skins grid width: 6 tiles + 5 gaps — shared so the backgrounds
     band below lines up with it exactly at every viewport */
  --skins-w: calc(744px + 5 * clamp(10px, 1.4vw, 16px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.pixelated { image-rendering: pixelated; }
::selection { background: var(--led); color: #1B1626; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--hairline); transition: text-decoration-color 0.15s ease; }
a:hover { text-decoration-color: var(--ink); }

.mono { font-family: var(--mono); }
.microlabel {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.microlabel .n { font-family: var(--mono); font-weight: 400; margin-right: 10px; }

.container { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 28px; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  font: 500 14px var(--font);
  letter-spacing: 0.02em;
  padding: 11px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--paper-3); border-color: var(--ink-3); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.textlink { font-size: 14px; font-weight: 500; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(39, 34, 49, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .bar {
  max-width: var(--w); margin: 0 auto; padding: 0 28px;
  height: 58px;
  display: flex; align-items: center; gap: 26px;
}
.header-logo { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
.header-logo img { height: 33px; width: auto; display: block; }
.header-logo:hover img { animation: wiggle 0.5s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  60% { transform: rotate(7deg); }
}
.header-logo .wordmark {
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.nav-main { display: flex; align-items: center; gap: 22px; font-size: 13.5px; font-weight: 500; }
.nav-main a { color: var(--ink-2); text-decoration: none; }
.nav-main a:hover, .nav-main a.active { color: var(--ink); }
.nav-main .ext::after { content: '\2197'; margin-left: 4px; font-size: 11px; color: var(--ink-3); }
.nav-main .btn { padding: 7px 16px; font-size: 13px; color: var(--paper); }
.nav-main .btn:hover { color: var(--paper); }
.nav-social { display: flex; align-items: center; gap: 14px; }
.nav-social a { display: inline-flex; }
.nav-social svg { width: 17px; height: 17px; fill: var(--ink-2); transition: fill 0.15s ease; }
.nav-social a:hover svg { fill: var(--ink); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-main, .nav-social { display: none; }
  .burger { display: flex; }
  body.nav-open { overflow: hidden; }
  .mobile-menu { display: none; }
  body.nav-open .mobile-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; top: 58px; z-index: 40;
    background: var(--paper);
    padding: 30px 28px;
    overflow-y: auto;
  }
  .mobile-menu a {
    color: var(--ink); text-decoration: none;
    font-size: 21px; font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px solid var(--hairline-soft);
  }
  .mobile-menu .small-links { margin-top: 24px; display: flex; gap: 22px; }
  .mobile-menu .small-links a { font-size: 14px; color: var(--ink-2); border: 0; padding: 0; }
}
@media (min-width: 861px) { .mobile-menu { display: none; } }

/* ---------- hero + fleet ---------- */
.hero { text-align: center; padding: clamp(40px, 7vh, 84px) 28px 0; }
.hero .inner { max-width: var(--skins-w); margin: 0 auto; }
.fleet {
  position: relative;
  max-width: 1300px;
  height: 440px;
  margin: 0 auto 30px;
}
.fleet.wander { overflow: hidden; }   /* ghosts stay in the hero, no matter what */
/* all contact shadows live on one floor layer BELOW every sprite, so a
   passing ghost's shadow never crosses another ghost */
.fleet .shadows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fleet .shadow-slot {
  position: absolute;
  transform: translateX(-50%);
  bottom: var(--b);
  width: 188px; height: 188px;
}
.fleet .spot {
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
  bottom: var(--b);
  width: 188px;                 /* one size for the whole fleet: 47 × 4 */
}
.fleet .spot img {
  display: block;
  width: 188px; height: 188px;
  animation: float var(--d) ease-in-out infinite;
  animation-delay: var(--dl);
  position: relative; z-index: 1;
}
.fleet .contact {
  position: absolute; left: 50%; bottom: -12px;
  width: 98px; height: 11px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
  animation: contact var(--d) ease-in-out infinite;
  animation-delay: var(--dl);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes contact {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
  50% { transform: translateX(-50%) scaleX(0.78); opacity: 0.5; }
}
.fleet .spot { cursor: pointer; }
.fleet .spot img.hop { animation: hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(3px) scale(1.06, 0.9); }
  55% { transform: translateY(-30px) scale(0.96, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
@media (max-width: 900px) {
  .fleet { height: 340px; }
  /* keep the static (no-JS / reduced-motion) wave inside the shorter band */
  .fleet .spot, .fleet .shadow-slot { bottom: min(var(--b), 185px); }
}
@media (max-width: 700px) {
  .fleet { height: 290px; margin-bottom: 22px; }
  .fleet .spot.hide-sm, .fleet .shadow-slot.hide-sm { display: none; }
  .fleet .spot, .fleet .shadow-slot { bottom: var(--bm); width: 94px; }
  .fleet .shadow-slot { height: 94px; }
  .fleet .spot img { width: 94px; height: 94px; }
  .fleet .contact { width: 50px; height: 7px; bottom: -8px; }
}
.hero h1 {
  /* sized off the column itself (not the viewport) so the longer line fills
     ~94% of it at every width; the <br> keeps it to two lines, so "crafted"
     is never left stranded on its own */
  font-size: clamp(26px, calc(min(var(--skins-w), 100vw - 56px) * 0.101), 84px);
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.06;
  margin: 0;
}
.hero .sub {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.7;
  max-width: var(--skins-w); margin: 18px auto 0;
}
.hero .cta-row { justify-content: center; margin-top: 30px; padding-bottom: clamp(56px, 9vh, 96px); }

/* ---------- the skins shelf ---------- */
.shelf { padding: 0 28px; }
.shelf .inner { max-width: var(--skins-w); margin: 0 auto; }
.shelf .shelf-label { display: block; text-align: center; margin-bottom: 26px; }
.shelf .row {
  display: flex; justify-content: center; align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 16px);
}
.shelf .row + .row { margin-top: clamp(10px, 1.4vw, 16px); }
.shelf figure { margin: 0; text-align: center; flex: none; cursor: pointer; }
/* each skin sits in its own rounded tile */
.shelf .tile {
  display: grid; place-items: center;
  width: 124px; height: 124px;
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.shelf figure:hover .tile { background: var(--paper-3); border-color: var(--hairline); }
.shelf img {
  display: block; margin: 0 auto;
  width: 94px; height: 94px;        /* 47 × 2 */
  transition: transform 0.18s ease;
}
.shelf figure:hover img { transform: translateY(-3px); }
.shelf img.pop { animation: pop 0.3s ease; }
@keyframes pop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.shelf figcaption {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 0 0;
}

/* ---------- backgrounds ticker ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bgband { padding: clamp(48px, 8vh, 84px) 28px clamp(48px, 8vh, 84px); }
.bgband .inner { max-width: var(--skins-w); margin: 0 auto; }
.bgband .band-label { display: block; text-align: center; margin-bottom: 26px; }
.bgband .band {
  position: relative;
  height: 188px;                    /* 47 × 4, same scale as the hero fleet */
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--hairline-soft);
}
.bgband .ribbon {
  display: flex; width: max-content; height: 100%;
  animation: bandScroll 30s linear infinite;
}
.bgband .ribbon img { width: 188px; height: 188px; flex: none; display: block; image-rendering: pixelated; }
@keyframes bandScroll { to { transform: translateX(-50%); } }
/* one translucent ghost holds perfectly still while the world rides past through it */
.bgband .sit { position: absolute; left: 50%; top: 50%; width: 188px; height: 188px; transform: translate(-50%, -50%); }
.bgband .sit img { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
  .bgband .band { height: 141px; }          /* 47 × 3 */
  .bgband .ribbon img { width: 141px; height: 141px; }
  .bgband .sit { width: 94px; height: 94px; }  /* 47 × 2 */
}

/* ---------- instrument (counter) ---------- */
.instrument { padding: clamp(48px, 8vh, 84px) 28px; }
.instrument .inner { max-width: var(--skins-w); margin: 0 auto; }
.instrument .readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
  margin-bottom: 14px;
}
.instrument .label-row { display: inline-flex; align-items: center; gap: 9px; }
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 8px var(--led-glow);
  animation: led 2.6s ease-in-out infinite;
}
@keyframes led {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.instrument .count { font-family: var(--mono); font-size: 24px; color: var(--ink); letter-spacing: 0.02em; cursor: pointer; transition: color 0.15s ease; }
.instrument .count:hover { color: var(--led); }
.instrument .count.flash { animation: pop 0.3s ease; }
.instrument .count .of { color: var(--ink-3); font-size: 15px; }
.instrument .token { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.instrument .token a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.instrument .token a:hover { color: var(--ink); border-color: var(--ink); }
.progress { height: 2px; background: var(--hairline-soft); overflow: hidden; }
.progress span {
  display: block; height: 100%; width: 0;
  background: var(--led);
  box-shadow: 0 0 6px var(--led-glow);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- index (catalog list) ---------- */
.index { padding: 0 28px clamp(40px, 7vh, 72px); }
.index .inner { max-width: var(--skins-w); margin: 0 auto; }
.index a.row {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 6px;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  transition: background 0.15s ease;
}
.index a.row:last-child { border-bottom: 1px solid var(--hairline); }
.index a.row:hover { background: var(--paper-3); }
.index .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); width: 30px; flex: none; }
.index .name { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; width: 190px; flex: none; }
.index .name .ext { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.index .desc { font-size: 13.5px; color: var(--ink-2); flex: 1; min-width: 0; }
.index .desc .fun-tag { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: 8px; }
.index .thumb { width: 47px; height: 47px; flex: none; image-rendering: pixelated; }
.index .arrow { font-size: 15px; color: var(--ink-3); flex: none; transition: transform 0.15s ease, color 0.15s ease; }
.index a.row:hover .arrow { transform: translateX(4px); color: var(--ink); }
@media (max-width: 700px) {
  .index .desc { display: none; }
  .index .name { flex: 1; width: auto; }
}

/* ---------- community line ---------- */
.community { text-align: center; padding: 0 28px clamp(56px, 9vh, 96px); }
.community p { color: var(--ink-2); font-size: 13.5px; margin: 0; }

/* ---------- page scaffold ---------- */
.page { padding: clamp(48px, 8vh, 90px) 0 clamp(60px, 9vh, 110px); }
.page-head { max-width: var(--w); margin: 0 auto; padding: 0 28px; }
.page-head h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.1;
  margin: 14px 0 0;
}
.page-head .sub { color: var(--ink-2); font-size: 15px; margin: 12px 0 0; max-width: 560px; }
.page-head .head-rule { margin-top: 34px; }

/* ---------- article ---------- */
.article { max-width: 680px; margin: 0 auto; padding: clamp(30px, 5vh, 50px) 28px 0; }
.article h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin: 2.4em 0 0.6em; }
.article h3 { font-size: 17px; font-weight: 600; margin: 2.4em 0 0.6em; }
.article p, .article li { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.article strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--ink); }

/* ---------- team ---------- */
.team-grid {
  max-width: var(--w); margin: 0 auto;
  padding: clamp(30px, 5vh, 56px) 28px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px;
}
.member { text-align: center; }
.member img { width: 128px; border-radius: 50%; }
.member h3 { font-size: 15.5px; font-weight: 600; margin: 18px 0 4px; }
.member p { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.member a { color: var(--ink); }
@media (max-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- ghost stories ---------- */
.stories-wrap { max-width: var(--w); margin: 0 auto; padding: clamp(30px, 5vh, 56px) 28px 0; }
.stories-grid {
  display: grid;
  /* minmax(0, …) so long unbreakable strings can never blow the grid past
     the container edge */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.story {
  min-width: 0;
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 8px 8px 11px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.story:hover {
  transform: translateY(-3px);
  border-color: var(--hairline);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}
.story img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; }
/* Collapsed cards are all the same height: square image + one-line title
   + a fixed 3-line body window + a fixed footer row. */
.story h3 {
  font-size: 12.5px; font-weight: 600; margin: 10px 3px 3px; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story.open h3 { white-space: normal; overflow-wrap: anywhere; }
.story h3 .num { font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.story .body { overflow-wrap: anywhere; }
.story .body p { font-size: 11.5px; line-height: 1.65; color: var(--ink-2); margin: 0 3px 0.7em; }
.story .body p:last-child { margin-bottom: 0; }
.story .body a { color: var(--ink); }
.story .body.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: 57px;                 /* 3 × 19px lines — identical on every card */
}
.story.open .body.clamp { display: block; -webkit-line-clamp: unset; height: auto; }
.story.expandable { cursor: pointer; }
.story .more, .story .more-hold {
  display: block; height: 25px;
  font: 500 11px var(--font);
  background: none; border: 0;
  color: var(--ink-3); padding: 7px 3px 0;
  text-align: left;
  transition: color 0.15s ease;
}
.story .more { cursor: pointer; }
.story .more:hover { color: var(--ink); }
@media (max-width: 1000px) { .stories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .stories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 540px)  { .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- forever mint ---------- */
.fm-hero { text-align: center; padding: clamp(56px, 9vh, 110px) 28px 0; }
.fm-hero .stage { position: relative; display: inline-block; margin-bottom: 30px; }
.fm-hero img { display: block; width: min(52vw, 210px); animation: float 7s ease-in-out infinite; position: relative; z-index: 1; }
.fm-hero .contact { display: none; }
.fm-hero .microlabel { display: block; margin-bottom: 14px; }
.fm-hero h1 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.fm-hero .sub { color: var(--ink-2); font-size: 15.5px; margin: 12px 0 0; }
.fm-screen { padding: clamp(44px, 7vh, 72px) 28px 0; }
.fm-screen .frame { max-width: 705px; margin: 0 auto; }
.fm-screen img { display: block; }
.fm-try { text-align: center; padding: clamp(40px, 6vh, 64px) 28px 0; }
.fm-try .cta-row { justify-content: center; margin-top: 16px; }
.fm-steps {
  text-align: center; color: var(--ink-2); font-size: 13.5px;
  padding: clamp(30px, 5vh, 48px) 28px 0; line-height: 2;
}
.fm-legal { text-align: center; padding: clamp(36px, 6vh, 56px) 28px 0; font-size: 12.5px; }
.fm-legal a { color: var(--ink-3); }
.fm-legal a:hover { color: var(--ink); }

/* ---------- subscribe ---------- */
.subscribe-page { text-align: center; padding: clamp(64px, 11vh, 130px) 28px 0; }
.subscribe-page .streak { width: min(66vw, 360px); image-rendering: pixelated; }
.subscribe-page h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 500; letter-spacing: -0.015em; margin: 26px 0 0; }
.subscribe-page .sub { color: var(--ink-2); font-size: 15.5px; margin: 14px auto 0; max-width: 430px; }
.subscribe-page .panel { margin: 34px auto 0; width: min(100%, 440px); text-align: left; }
.subscribe-page .formkit-form { background: transparent !important; border: none !important; }
.subscribe-page .formkit-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-size: 16px !important;
}
.subscribe-page .formkit-submit {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}
.subscribe-page .formkit-powered-by-convertkit-container { opacity: 0.4; }

/* ---------- submit story form ---------- */
.story-form { margin-top: 2em; display: grid; gap: 16px; }
.story-form label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 6px; }
.story-form input, .story-form textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--ink);
  font: 16px var(--font);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.story-form input:focus, .story-form textarea:focus { border-color: var(--ink-2); }
.story-form textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.story-form .btn { justify-self: start; }
.story-form .btn[disabled] { opacity: 0.55; pointer-events: none; }
.story-form label .opt { font-weight: 400; color: var(--ink-3, var(--ink-2)); }
.story-form .hp { display: none; }
.form-note { font-size: 13px; color: var(--ink-2); }
.form-status { font-size: 13.5px; color: var(--ink-2); min-height: 1em; }
.form-status.is-ok { color: var(--led, #3BE8BC); }
.form-status.is-err { color: #FF8B8B; }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(56px, 9vh, 110px); border-top: 1px solid var(--hairline); }
.site-footer .inner {
  max-width: var(--w); margin: 0 auto; padding: 26px 28px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
}
.site-footer .header-logo { margin-right: 0; }
.site-footer .header-logo img { height: 16px; opacity: 0.85; }
.site-footer .header-logo .wordmark { font-size: 10.5px; color: var(--ink-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.site-footer .spacer { flex: 1; }
.site-footer .nav-social svg { width: 15px; height: 15px; fill: var(--ink-3); }
.site-footer .nav-social a:hover svg { fill: var(--ink); }
.site-footer .token {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px;
}
.site-footer .token a { color: var(--ink-2); text-decoration: none; }
.site-footer .token a:hover { color: var(--ink); }

/* ---------- 404 ---------- */
.notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 60px 28px; }
.notfound img { width: 141px; height: 141px; animation: float 5s ease-in-out infinite; margin-bottom: 8px; }
.notfound h1 { font-family: var(--mono); font-size: clamp(34px, 5vw, 54px); font-weight: 400; margin: 0 0 8px; }
.notfound p { color: var(--ink-2); }

/* ---------- the dead pixel (shh) ---------- */
.dead-pixel {
  position: fixed; z-index: 60;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: none; border: 0; padding: 0; cursor: default;
}
.dead-pixel span {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: #ff2d55; opacity: 0.9;
  animation: stuckpixel 9s steps(1) infinite;   /* a stuck subpixel, cycling */
}
@keyframes stuckpixel {
  0%, 100% { background: #ff2d55; }
  33% { background: #2dff6a; }
  66% { background: #2d6aff; }
}
.dead-pixel.freed span { display: none; }
.dead-pixel:focus-visible { outline: 1px dashed var(--hairline); outline-offset: 4px; }
.freed-ghost {
  position: fixed; z-index: 60;
  width: 47px; height: 47px;
  image-rendering: pixelated; pointer-events: none;
  animation: freedghost 2.2s ease-out forwards;
}
@keyframes freedghost {
  0%   { opacity: 0; transform: translateY(14px) scale(0.55); }
  14%  { opacity: 1; transform: none; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-64px); }
}
@media (prefers-reduced-motion: reduce) {
  .freed-ghost { animation: none; }   /* appears still, then departs quietly */
}

/* ---------- the wandering bubble ghost (poke it) ---------- */
.wander-ghost {
  position: fixed; left: 0; top: 0; z-index: 40;   /* drifts behind the header */
  background: none; border: 0; padding: 0; cursor: pointer;
  will-change: transform;
}
.wander-ghost img { display: block; image-rendering: pixelated; }
.wander-ghost.boing img { animation: pop 0.3s ease; }
.wander-ghost.popped img { animation: ghostpop 0.22s ease-out forwards; }
@keyframes ghostpop {
  to { transform: scale(1.35); opacity: 0; }
}
.wander-ghost.popped::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--led);
  border-radius: 50%;
  animation: popring 0.35s ease-out forwards;
}
@keyframes popring {
  to { width: 112px; height: 112px; opacity: 0; }
}
.wander-ghost:focus-visible { outline: 1px dashed var(--hairline); outline-offset: 5px; }