/* The next app, at the foot of every app page (nextapp.py; Adam,
 * 2026-10-21, design "A1").
 *
 * A band the window's width in pure black, under a 1px rule of #636363 the
 * window's width (3:1 or more against the near-black pages above it, and
 * against the black under it); the next app's icon, large and centred;
 * "Next app" in a muted grey over the app's name in its accent; one line
 * of the body's mono; one white button, the band's one link, stretched
 * over the whole block. Only the site's own type roles, on every page:
 *   display  din-condensed-web (Barlow Condensed), 400, the site's h2
 *   button   din-condensed-web, 1.5rem, 1rem x 3.1rem, 7.2px corners, 59px
 *   text     ibm-plex-mono, 400, 1rem, -0.04em, 1.6
 * The accent comes from the page, as --next-accent on the band.
 * Scoped under #mp-next so it outranks each page's own scoped rules, and
 * linked after every page's stylesheet.
 */

#mp-next,
#mp-next * {
  box-sizing: border-box;
}

#mp-next {
  --mp-pad: 6vw;
  --next-ink: #f2f2f0;
  --next-ink-2: #9a9a9a;
  --next-btn-bg: #f2f2f0;
  --next-btn-ink: #000;
  --next-btn-hover: #d9d9d6;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
  padding-block: 6.6vmax;
  background: #000;
  border-top: 1px solid #636363;
  text-align: center;
  font-family: "ibm-plex-mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.04em;
  color: var(--next-ink);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  #mp-next { --mp-pad: 4vw; }
}

#mp-next .mp-next-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 2 * var(--mp-pad));
  max-width: 1500px;
  margin-inline: auto;
}

#mp-next img.mp-next-icon {
  display: block;
  width: 176px;
  height: 176px;
  max-width: none;
  margin: 0 0 1.5rem;
}

#mp-next .mp-next-title {
  margin: 0;
  padding: 0;
  font-family: "din-condensed-web", "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  /* the site's h2: size value 3.5 through its own formula */
  font-size: min(calc(3vw + 1rem), 59.2px);
  line-height: 1.08;
  color: var(--next-ink);
  text-wrap: balance;
}

#mp-next .mp-next-kick,
#mp-next .mp-next-name {
  display: block;
}

#mp-next .mp-next-kick { color: var(--next-ink-2); }
#mp-next .mp-next-name { color: var(--next-accent); }

#mp-next .mp-next-about {
  margin: 1rem auto 0;
  padding: 0;
  max-width: 34ch;
  font: inherit;
  letter-spacing: inherit;
  color: var(--next-ink);
}

#mp-next a.mp-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 59px;
  margin-top: 2rem;
  padding: 1rem 3.1rem;
  border: 0;
  border-radius: 7.2px;
  font-family: "din-condensed-web", "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background: var(--next-btn-bg);
  color: var(--next-btn-ink);
  transition: background-color 0.15s ease;
}

/* one link, the whole block its target */
#mp-next a.mp-next-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

#mp-next .mp-next-in:has(a.mp-next-btn:hover) a.mp-next-btn {
  background: var(--next-btn-hover);
}

#mp-next a.mp-next-btn:focus {
  outline: none;
}

#mp-next a.mp-next-btn:focus-visible {
  outline: 2px solid var(--next-accent);
  outline-offset: 4px;
}

/* the site's ↗ for a page elsewhere, as the Wallpapers item draws it */
#mp-next .mp-next-out {
  position: relative;
  top: -0.18em;
  margin-left: 0.15em;
  font-family: "ibm-plex-mono", monospace;
  font-size: 0.75em;
}

@media (max-width: 767px) {
  #mp-next { padding-block: 64px; }
  #mp-next img.mp-next-icon { width: 128px; height: 128px; margin-bottom: 1rem; }
  #mp-next .mp-next-title { font-size: calc(0.03 * min(100vh, 900px) + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  #mp-next a.mp-next-btn { transition: none; }
}

/* The footer under the band is the band's ground (Adam, 2026-10-21, on his
   iPhone): pure black and no hairline of its own, so band and footer read
   as one, whatever the page's own ground above (Herald's #0b0b10, BatFi's
   #070c0a, Hourly Beep's #111). The icons keep each footer's grey, which
   only gains on black. */
#mp-next + footer {
  background: #000;
  border-top: 0;
}

/* The footer's icons are a plain row at every width: BatFi's guides set
   their own lists' indent and spacing, which reached the footer's list and
   pushed it 28px wide of its row. */
#mp-next + footer ul {
  margin: 0;
  padding: 0;
}
#mp-next + footer ul li {
  margin: 0;
  padding: 0;
}

/* On a phone the footer under the band is one row, the wordmark on the
   left and the five icons right-aligned, never the icons wrapped under it
   (Adam, 2026-10-21; it replaces the wrap /herald's, /batfi's and Hourly
   Beep's footers had below 768). The icons keep their 24px. Where the
   wordmark is 2rem from 768 (Herald, BatFi and its guides, Hourly Beep) it
   is as large as the row allows on a phone, up to that 2rem: the footer's
   width, 88% of the window inside the 6vw margins, less the 24px gap and
   the icons' 172px, over 5 (Lily Script One sets "micropixels" 5em wide),
   with a pixel to spare. /horzono's, /vetero's and /winyl's were one row
   already, at the homepage's size, and keep it. Under 375 the row closes
   up as the site's other footers do (an 8px gap between icons, 1rem before
   them, 148px of icons), and the wordmark stops at 25px, its size at 375,
   so it never grows as the window narrows. */
@media (max-width: 767px) {
  #mp-next + footer > div {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  #mp-next + footer a.mp-foot-home {
    white-space: nowrap;
  }
  #mp-next + footer:is(.hd-foot, .bf-foot, .hb-foot) a.mp-foot-home {
    font-size: min(2rem, calc(17.6vw - 41px));
  }
  #mp-next + footer ul {
    flex: none;
    gap: 14px;
  }
}
@media (max-width: 374px) {
  #mp-next + footer > div { gap: 1rem; }
  #mp-next + footer:is(.hd-foot, .bf-foot, .hb-foot) a.mp-foot-home { font-size: min(25px, calc(17.6vw - 34px)); }
  #mp-next + footer ul { gap: 8px; }
}