/* The site pages around the game — how to play, the guides, about, contact,
   privacy. Static HTML in public/, one stylesheet: the game's paper palette
   (app.css is the source of the hex values) set in a plain serif, because
   these are pages to read rather than screens to play. The homepage carries
   its own copy of the essentials inline (index.html), since the game ships
   as one self-contained file and must not depend on this one. */
:root {
  --paper: #f5efe3;
  --paper-deep: #ece4d1;
  --ink: #3f392f;
  --ink-soft: #5f5849;
  --stone: #726957;
  --stone-light: #c8bfae;
  --indigo: #4d5a7d;
  --indigo-deep: #2f3852;
  --moss: #6f7d58;
}
html {
  background: var(--paper);
}
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(200, 191, 174, 0.14), transparent 60%),
    radial-gradient(900px 500px at 110% 30%, rgba(200, 191, 174, 0.1), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a {
  color: var(--indigo);
}
.site-header {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
}
.site-header .brand {
  color: var(--indigo);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  font-size: 0.95rem;
}
.site-nav a {
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--indigo);
  border-bottom-color: currentColor;
}
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
h1 {
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--indigo);
  margin: 0.4em 0 0.5em;
}
h2 {
  font-size: 1.2rem;
  margin-top: 2em;
}
h3 {
  font-size: 1rem;
  margin-bottom: 0.2em;
}
h3 + p {
  margin-top: 0;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.updated {
  color: var(--stone);
  font-size: 0.9rem;
}
ol,
ul {
  padding-left: 1.4rem;
}
li {
  margin: 0.3em 0;
}
figure {
  margin: 1.5rem 0;
}
figure.boards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
}
figure.boards img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
figure figcaption {
  flex-basis: 100%;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  margin: 1.2rem 0;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--paper-deep);
}
th {
  color: var(--stone);
  font-weight: normal;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.4rem 0;
}
.play-cta {
  display: inline-block;
  background: var(--indigo);
  color: var(--paper);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.play-cta:hover {
  background: var(--indigo-deep);
}
/* the hidden attribute must beat the display rules below, which the UA's own rule does not */
[hidden] {
  display: none !important;
}
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.store-badges a {
  display: inline-block;
  line-height: 0;
}
.store-badges img {
  height: 40px;
  width: auto;
  display: block;
}
/* Google Play, until the official badge artwork is dropped in beside the
   App Store one (see store-links.js): the same 40px footprint, set in type. */
.store-badges .play-badge {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 0.9rem;
  border-radius: 6px;
  background: #1c1c1c;
  color: #fff;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.store-badges .play-badge strong {
  display: block;
  font-size: 1.05rem;
}
.note {
  background: var(--paper-deep);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}
.site-footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--paper-deep);
  font-size: 0.9rem;
  color: var(--stone);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-bottom: 0.6rem;
}
.site-footer a {
  color: var(--stone);
}