/* Oops Horrifying LLC. One stylesheet for the whole site. No build step, no webfonts. */

:root {
  --moss: #1b3a0c;
  --moss-hero-top: #2c5714;
  --card: #23480f;
  --card-border: #3a6b1c;
  --footer: #14290a;
  --accent: #cdf06a;
  --accent-head: #a4d334;
  --text: #dcecc6;
  --text-hero: #e2f0d0;
  --text-muted: #b3c9a0;
  --text-footer: #9ab389;
  --text-fine: #7d9670;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Column flex plus the footer's auto top margin keeps the footer at the bottom of the
     viewport on the short 404 page without pinning it there on the taller front page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--moss);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
}

a {
  color: var(--accent);
}

/* Keyboard focus has to survive a very dark page, so it gets the brightest colour we have. */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
 * Decorative slime. A div rather than an img because it carries no meaning, and a fixed
 * height with repeat-x rather than a stretched image because a 2816px wide tile scaled to
 * the viewport would be 400px tall on a wide monitor. The tile is mirror doubled, so
 * repeating it horizontally leaves no seam.
 */
.drip {
  height: 120px;
  background: url(../img/drip-tile.png) top center / auto 120px repeat-x;
  /* Pulled over the hero so the gradient runs behind the drips and there is no band of
     flat page background between the slime and the hero. */
  margin-bottom: -120px;
  position: relative;
  z-index: 1;
}

.hero {
  background: linear-gradient(178deg, #2c5714 0%, #1b3a0c 100%);
  text-align: center;
  /* The bottom value pairs with main's top padding: the two stack, so keep the sum in
     mind rather than tuning either alone. */
  padding: calc(120px + 3.5rem) 1.5rem 3rem;
}

.hero__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  /* Letter spacing trails the last character, which pulls centred text left by half a step. */
  text-indent: 0.28em;
}

.hero__wordmark {
  margin: 0;
}

.hero__logo {
  display: block;
  width: 300px;
  max-width: 72%;
  height: auto;
  margin: 1.75rem auto 0;
}

.hero__title {
  margin: 1.5rem 0 0;
  color: var(--text-hero);
  font-size: 2rem;
  letter-spacing: -0.01em;
}

.hero__pitch {
  max-width: 26rem;
  margin: 1.75rem auto 0;
  color: var(--text-hero);
  font-size: 1.125rem;
}

.hero__back {
  display: inline-block;
  margin-top: 2rem;
  color: var(--accent);
  font-size: 0.95rem;
}

main {
  padding: 2.5rem 0 5.5rem;
}

.section {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section__heading {
  margin: 0 0 1.5rem;
  color: var(--accent-head);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
  text-indent: 0.18em;
}

.card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.card + .card {
  margin-top: 1rem;
}

.card__icon {
  flex: none;
  width: 76px;
  height: 76px;
  /* Roughly the iOS icon corner curve, so the App Store icons look like themselves. */
  border-radius: 17px;
}

/* Opt in only for pixel art. Smooth scaling turns it to mush, but applying this to a
   normal app icon is just as wrong, so it is a modifier rather than the default. */
.card__icon--pixel {
  border-radius: 8px;
  image-rendering: pixelated;
}

.card__body {
  min-width: 0;
}

.card__name {
  margin: 0;
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 700;
}

.card__desc {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/*
 * A project can ship on several platforms, so each card carries a list of links rather
 * than being one big anchor. That is also why the card is a plain element: an anchor
 * cannot contain anchors.
 */
.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.card__link {
  color: var(--accent-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
}

/* Marks where a link leaves the page, without relying on the label to say so. */
.card__link::after {
  content: " \2192";
}

/*
 * A platform that is not shipped yet. Deliberately not an anchor, so it cannot be
 * clicked or focused, and dimmer than the live links so the difference is visible
 * before reading the label rather than only after.
 */
/* Forces its own row, so unreleased platforms never share a line with live links. */
.card__links-row {
  flex-basis: 100%;
}

.card__soon {
  color: var(--text-fine);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.card__soon em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.85;
}

.footer {
  margin-top: auto;
  background: var(--footer);
  color: var(--text-footer);
  text-align: center;
  padding: 3rem 1.5rem;
  font-size: 0.9375rem;
}

.footer p {
  margin: 0;
}

.footer p + p {
  margin-top: 0.5rem;
}

.footer a {
  color: var(--accent-head);
}

.footer__fine {
  color: var(--text-fine);
  font-size: 0.8125rem;
}

@media (max-width: 640px) {
  .drip {
    height: 62px;
    background-size: auto 62px;
    margin-bottom: -62px;
  }

  .hero {
    padding: calc(62px + 2.5rem) 1.25rem 2.25rem;
  }

  .hero__logo {
    width: 190px;
    margin-top: 1.5rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .hero__pitch {
    font-size: 1.0625rem;
  }

  main {
    padding: 2rem 0 4rem;
  }

  .section {
    padding: 0 1.25rem;
  }

  .card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.75rem 1.25rem;
  }

  .footer {
    padding: 2.5rem 1.25rem;
  }
}