/* ── THE WAY BACK, ON EVERY PAGE ─────────────────────────────────────────────
 *
 * Marcus, 2026-11-03: "The parent portal, the player portal, the entire site
 * needs both back buttons ... You can't click through anything on the site and
 * it makes the user experience brutal."
 *
 * He was right: 22 of 26 standalone pages had no way back at all, and eight had
 * no links of any kind. This file is the one place that styling lives now, so
 * the next page added gets it with two lines instead of a copy-paste.
 *
 * WHY A STYLESHEET AND NOT A SCRIPT. The link itself is plain markup on each
 * page. If this file ever fails to load the link is unstyled but still a link a
 * thumb can hit -- whereas a script that injects the link leaves nothing at all
 * on the one page where somebody is already stuck. That is the failure we are
 * fixing, so it cannot be the failure mode of the fix.
 *
 * The 44px box is lifted from faq.html, where it was set deliberately: it was a
 * bare 12px inline link, a quarter of the height a thumb needs -- Marcus,
 * 2026-10-13, "there are buttons that are not properly scaled."
 */

.back-link-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 24px 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  /* Pulls the text back to where the eye expects it while the tap box grows. */
  margin-left: -10px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #555;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.back-link:hover,
.back-link:focus-visible { color: #F2EFEA; }

/* A light page (privacy, the membership rules, the printed handouts) needs the
   opposite end of the scale or the link is invisible on white. */
.back-link--light { color: #777; }
.back-link--light:hover,
.back-link--light:focus-visible { color: #111; }

@media (max-width: 640px) {
  .back-link-wrap { padding: 12px 16px 0; }
}

@media (max-width: 400px) {
  .back-link { font-size: 0.68rem; letter-spacing: 0.14em; }
}

/* Nothing in a print-out should offer a link to tap. */
@media print {
  .back-link-wrap { display: none; }
}