/* Sling Theory - the one stylesheet of sling-theory-web.web.app.
   The app's own look: the night sky, neon cyan, VOX teal and PYRE orange, and the
   app's typeface, Chakra Petch, served from this site (the same bytes the app
   carries, SIL Open Font License 1.1). No other host, no script. */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/chakra-petch-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/chakra-petch-latin-700-normal.woff2) format('woff2'); }

:root {
  --sky: #02040c; --sky2: #0b1428; --panel: rgba(14, 22, 40, .92); --line: rgba(120, 150, 210, .35);
  --text: #eaf4ff; --muted: #a9bddc; --cyan: #7fd4ff; --vox: #7fffd0; --pyre: #ff9a4d; --gold: #ffd23d;
  --ui: 'Chakra Petch', 'Arial Narrow', system-ui, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 17px/1.6 var(--ui);
  background: radial-gradient(1100px 700px at 50% -8%, #16233f 0%, var(--sky2) 45%, var(--sky) 100%) fixed, var(--sky);
}
a { color: var(--cyan); }
a:hover { color: var(--text); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 5; background: var(--panel); padding: 6px 12px; border-radius: 8px; }
.wrap { width: min(1040px, 100% - 32px); margin: 0 auto; }

/* header */
.top { border-bottom: 1px solid var(--line); background: rgba(2, 4, 12, .55); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .18em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; letter-spacing: .06em; }
.nav a:hover { color: var(--cyan); }

/* the showcase */
.hero { text-align: center; padding: 56px 0 28px; }
.hero h1 { margin: 0; font-size: clamp(36px, 8vw, 64px); letter-spacing: .22em; font-weight: 700;
  text-shadow: 0 0 22px rgba(127, 212, 255, .55); }
.hero .tag { margin: 10px auto 0; max-width: 620px; color: var(--muted); font-size: 19px; }
.cta { display: inline-block; margin-top: 26px; padding: 12px 26px; border: 2px solid var(--vox); border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .08em;
  box-shadow: 0 0 18px rgba(127, 255, 208, .25); }
.cta:hover { border-color: var(--gold); color: var(--gold); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 10px; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55); }
.shots figcaption { margin-top: 10px; text-align: center; color: var(--muted); font-size: 15px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin: 26px 0; }
.card h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: .12em; color: var(--pyre); }
.card ul { margin: 0; padding-left: 20px; }
.card li { margin: 6px 0; }

/* the text pages (privacy, the Discord fallback, 404) */
.doc { padding: 38px 0 20px; max-width: 760px; }
.doc h1 { font-size: clamp(28px, 6vw, 40px); letter-spacing: .12em; margin: 0 0 6px; text-shadow: 0 0 16px rgba(127, 212, 255, .45); }
.doc h2 { font-size: 19px; letter-spacing: .1em; color: var(--cyan); margin: 30px 0 8px; }
.doc .muted, .muted { color: var(--muted); }
.button { display: inline-block; margin-top: 12px; padding: 11px 22px; border: 2px solid var(--cyan); border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .06em; }
.button:hover { border-color: var(--gold); color: var(--gold); }
.backlinks { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

/* footer */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 20px 0 34px; color: var(--muted); font-size: 14px; }
.foot p { margin: 4px 0; }

@media (max-width: 760px) {
  .shots { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-left: auto; margin-right: auto; }
  .hero { padding-top: 38px; }
  .card { padding: 18px 18px; }
}