/* Deliberately light, not the app's twilight palette.
   These pages are read on a laptop, printed by a lawyer, and opened by a
   Play Store reviewer. Legibility beats brand here, and a dark legal page
   is harder to read and harder to print. */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f6f4fa;
  color: #241d38;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 21px; margin: 36px 0 10px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 22px; }
a { color: #5b4b8a; }
.meta { color: #6b6280; font-size: 14px; margin-bottom: 24px; }
.back { font-size: 14px; margin-bottom: 24px; }
.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid #e2ddec; font-size: 14px; }
.callout {
  background: #fff;
  border: 1px solid #e2ddec;
  border-left: 4px solid #8fa3e8;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 24px 0 8px;
}
.callout p:last-child { margin-bottom: 0; }
.rule {
  background: #fff; border: 1px solid #e2ddec; border-left: 4px solid #e8899c;
  border-radius: 10px; padding: 14px 16px; margin: 16px 0;
}
.small { font-size: 13px; }
.dim { color: #6b6280; font-weight: 400; }

/* The rate card. Same shape as the one in the advertiser portal on purpose —
   a business that reads this page and then signs in should recognise it. */
.rates { border-collapse: collapse; width: 100%; min-width: 460px; margin: 8px 0 4px; }
.rates th, .rates td {
  padding: 9px 12px; text-align: right; border-bottom: 1px solid #e2ddec; white-space: nowrap;
}
.rates thead th { font-size: 14px; font-weight: 500; color: #6b6280; }
.rates tbody th[scope='row'] { text-align: left; font-weight: 600; }
.rates tbody td { font-variant-numeric: tabular-nums; font-weight: 600; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: none; }

.hero { text-align: center; padding: 40px 0 8px; }
.hero h1 { font-size: 40px; }
.hero p { color: #4a4262; font-size: 19px; }
.links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.links a {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: #fff; border: 1px solid #d9d2e8; text-decoration: none; color: #3d3355;
}
@media (prefers-color-scheme: dark) {
  body { background: #17121f; color: #ece7f3; }
  a { color: #b9a8ea; }
  .meta, .hero p { color: #a99fbd; }
  .callout, .links a, .rule { background: #201a2c; border-color: #362d47; }
  .links a { color: #ece7f3; }
  .foot { border-top-color: #362d47; }
  .dim, .rates thead th { color: #a99fbd; }
  .rates th, .rates td { border-bottom-color: #362d47; }
}

/* The mark, above the name. alt="" on purpose: the word "Queer Town" is
   directly underneath it, so a screen reader announcing the image as well
   would just say the name twice. */
.mark {
  display: block;
  margin: 0 auto 20px;
  border-radius: 22%;
  width: 96px;
  height: 96px;
}

/* Quick exit. Fixed top-right and always visible, because the moment it is
   needed is the moment there is no time to scroll for it. 44px tall - the
   same minimum touch target the app uses. */
.quick-exit {
  position: fixed; top: 12px; right: 12px; z-index: 10;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 999px;
  background: #241d38; color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.quick-exit:focus-visible { outline: 3px solid #8fa3e8; outline-offset: 2px; }
.lede { font-size: 16px; }
.places li { margin-bottom: 10px; }
@media (prefers-color-scheme: dark) {
  .quick-exit { background: #ece7f3; color: #17121f; }
}