/* chrome.css: THE container, header and footer of every tabletales.gg page that carries the site
   chrome (the homepage, the score pages, the guides, the feature pages, the story), the one copy of
   their styles, as design/score-pages/site.mjs topbar() and footer() are the one copy of their
   markup. index.html and pages.css each had their own, and they drifted: the homepage's column was
   1220px against 1180px everywhere else, so its header sat 20px further out on each side, with a 2px
   bigger logo and a taller bar (Tyler, 2026-10-19: "The width of these two pages is different -
   why? Should we be consistent?"). The homepage's values won, since it is the page the others
   follow. scripts/web/check.mjs fails a page that leaves this file out, or any other stylesheet that
   styles these again.

   The legal pages, the privacy FAQ and support keep their own document header on purpose: the app
   opens the policy and terms in its in-app browser, where a site menu with a Download button would
   be wrong.

   Colours come from the page's own tokens (--line, --cream, --ember), which index.html and
   pages.css define alike. */

.shell { width: min(1220px, calc(100% - 48px)); margin: 0 auto; }

/* the top bar, with the wordmark drawn once as an image (design/wordmark.mjs), never the 330 KB font */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 88px; border-bottom: 1px solid var(--line); position: relative; z-index: 5;
  line-height: 1.5;   /* its own, never the page's: the homepage's body is 1.5, pages.css's 1.55 */
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .logo { width: 38px; height: 38px; }
/* 1px is the T's own side bearing, trimmed from the picture */
.brand .wordmark { display: block; width: auto; height: 29px; margin-left: 1px; }
.toplinks { display: flex; align-items: center; gap: 28px; }
.toplinks a { color: #d6c5ad; font-size: 14px; font-weight: 650; text-decoration: none; }
.toplinks a:hover { color: var(--cream); }
/* .toplinks a (0,1,1) once outranked .nav-cta (0,1,0): the button drew tan text on orange */
.toplinks .nav-cta { color: #211408; background: linear-gradient(135deg, #f4b15d, var(--ember)); border-radius: 999px; padding: 10px 18px; font-weight: 800; }
.toplinks .nav-cta:hover { color: #211408; filter: brightness(1.05); }

footer {
  min-height: 110px; padding: 30px 0; display: flex; justify-content: space-between; align-items: center;
  gap: 30px; color: #857664; font-size: 12px; line-height: 1.5; background: #0d0907; border-top: 1px solid rgba(255, 249, 237, .08);
}
footer .links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
footer a { text-decoration: none; }
footer a:hover { color: #cdbca6; }
footer span a { text-decoration: underline; text-decoration-color: rgba(205, 188, 166, .35); text-underline-offset: 3px; }

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 640px); }
  .topbar { min-height: 72px; }
  /* a phone keeps the one link that matters: Download */
  .toplinks a:not(.nav-cta) { display: none; }
  .toplinks .nav-cta { padding: 8px 14px; }
  footer { flex-direction: column; text-align: center; }
  footer .links { justify-content: center; }
}

@media print {
  .topbar, footer { display: none; }
}