/* Site header, mobile menu and footer, shared by every page on playquads.com (the
   homepage keeps its own inline styles for everything else, so this can't
   live in site.css, which is article-only).

   Wide screens: a single sticky bar with inline links. Under 760px the links
   collapse behind a hamburger that drops a full-width sheet. The collapse is
   scoped to html.js (set by /js/nav.js) so that without JavaScript the links
   simply wrap under the brand, as they did before there was a menu.

   .on-dark is the variant every page uses now, over its dark title band. */

/* The display face: Outfit Black (SIL OFL, fonts/outfit-OFL.txt), latin
   subset, self-hosted so the site makes no third-party font request. Used
   for the wordmark and for titles and headings (here, site.css and the
   homepage's inline styles); body text stays on the system font. Only the
   900 weight is shipped. */
@font-face {
  font-family: 'Outfit';
  src: url(/fonts/outfit-black.woff2) format('woff2');
  font-weight: 900;
  font-display: swap;
}
.site-header {
  --h-bg: rgba(244, 235, 217, .88);
  --h-sheet: #f4ebd9;
  --h-ink: #4a3419;
  --h-line: #d9c9ae;
  --h-hover: #e3d3b0;
  --h-current: #9a5416;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: .55rem 1.25rem;
  background: var(--h-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--h-line);
}
.site-header.on-dark {
  --h-bg: rgba(36, 21, 5, .82);
  --h-sheet: #2a1809;
  --h-ink: #f4ebd9;
  --h-line: rgba(244, 235, 217, .14);
  --h-hover: rgba(244, 235, 217, .1);
  --h-current: #ecc37c;
}
.site-header .bar {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-right: auto;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--h-ink);
  text-decoration: none;
}
.site-header .brand::before {
  content: '';
  width: 2rem;
  height: 2rem;
  background: url(/favicon.svg) center / contain no-repeat;
  border-radius: 22%;
  box-shadow: 0 2px 6px rgba(36, 21, 5, .25);
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
  font-size: .9375rem;
  font-weight: 600;
}
.site-header nav a {
  color: var(--h-ink);
  text-decoration: none;
  padding: .45rem .75rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.site-header nav a:hover { background: var(--h-hover); color: var(--h-ink); text-decoration: none; }
.site-header nav a[aria-current="page"] { color: var(--h-current); text-decoration: none; }
.site-header nav .nav-play {
  background: #9f5819;
  color: #f4ebd9;
  font-weight: 700;
  padding: .5rem 1.05rem;
  margin-left: .45rem;
}
.site-header nav .nav-play:hover { background: #b5651d; color: #f4ebd9; opacity: 1; }
.site-header.on-dark nav .nav-play { background: #e8721c; color: #fffaf0; box-shadow: 0 0 0 2px #fffaf0 inset; }
.site-header.on-dark nav .nav-play:hover { background: #f58430; color: #fffaf0; }
.site-header a:focus-visible, .nav-toggle:focus-visible { outline: 3px solid #d07a2b; outline-offset: 2px; }

/* The hamburger: three bars that fold into a cross. Hidden unless JS is
   there to operate it. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -.5rem;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--h-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--h-hover); }
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s cubic-bezier(.3, 1.3, .5, 1), opacity .15s ease, top .25s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.site-header.open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.site-header.open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.site-header.open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .js .nav-toggle { display: block; }
  .js .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: .35rem 1.25rem 1.25rem;
    font-size: 1.125rem;
    background: var(--h-sheet);
    border-bottom: 1px solid var(--h-line);
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: 0 24px 40px rgba(36, 21, 5, .28);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1), visibility 0s .25s;
  }
  .js .site-header.open nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .js .site-header nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem .25rem;
    border-radius: 0;
    border-bottom: 1px solid var(--h-line);
  }
  .js .site-header nav a:not(.nav-play)::after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
  }
  .js .site-header nav a:hover { background: transparent; }
  .js .site-header nav .nav-play {
    justify-content: center;
    margin: 1.1rem 0 0;
    padding: .95rem 1rem;
    border: 0;
    border-radius: .9rem;
  }
  /* Scrim under the sheet. Absolute, not fixed: backdrop-filter makes the
     header a containing block for fixed descendants anyway. */
  .js .site-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    background: rgba(20, 12, 3, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .js .site-header.open::after { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav, .site-header::after, .nav-toggle span { transition: none !important; }
}

/* ---------------- Footer ----------------
   Dark on every page: it closes the cream article pages the same way it
   closes the homepage's dark band. Everything is scoped to .site-footer
   because site.css styles bare h2/p/a for articles. */
.site-footer {
  background: #241505;
  color: rgba(244, 235, 217, .66);
  font-size: .9375rem;
  line-height: 1.5;
  padding: 3.25rem 1.25rem 1.5rem;
  text-align: left;
}
.site-footer .foot {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: #f4ebd9;
  text-decoration: none;
}
.site-footer .brand::before {
  content: '';
  width: 2.25rem;
  height: 2.25rem;
  background: url(/favicon.svg) center / contain no-repeat;
  box-shadow: 0 0 0 1px rgba(244, 235, 217, .16);
  border-radius: 22%;
}
.site-footer .foot-brand p { margin: .9rem 0 1.25rem; max-width: 21rem; font-size: .9375rem; color: inherit; }
.site-footer .foot-badges { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer .foot-badges a { line-height: 0; transition: opacity .15s ease; }
.site-footer .foot-badges a:hover { opacity: .8; }
.site-footer .foot-badges img { display: block; height: 40px; width: auto; max-width: none; }

/* A white keyline on both store badges so they match on the dark ground
   (Apple's artwork carries a grey one, Google's none). Drawn outside the
   artwork, which is itself untouched; the radii follow each badge's own
   corner at the two sizes used — 48px in the homepage hero, 40px here. */
img[src$="/app-store-badge.svg"], img[src$="/google-play-badge.png"] { box-shadow: 0 0 0 1.5px #fffaf0; }
.badge-link img[src$="/app-store-badge.svg"] { border-radius: 8px; }
.badge-link img[src$="/google-play-badge.png"] { border-radius: 6px; }
.foot-badges img[src$="/app-store-badge.svg"] { border-radius: 6.5px; }
.foot-badges img[src$="/google-play-badge.png"] { border-radius: 5px; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.site-footer h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: .35rem 0 .35rem;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: #ecc37c;
}
.site-footer nav a { color: rgba(244, 235, 217, .82); text-decoration: none; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .foot-base {
  max-width: 68rem;
  margin: 2.75rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 235, 217, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  font-size: .8125rem;
}
.site-footer .foot-base a { color: rgba(244, 235, 217, .82); text-underline-offset: 2px; }
.site-footer .foot-base a:hover { color: #ecc37c; }
.site-footer .foot-langs { display: flex; gap: 1.1rem; }
.site-footer .foot-langs a { text-decoration: none; }
.site-footer a:focus-visible { outline: 3px solid #d07a2b; outline-offset: 2px; }

@media (max-width: 760px) {
  .site-footer { padding-top: 2.5rem; }
  .site-footer .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .site-footer .foot-brand { grid-column: 1 / -1; }
}