/* BrickPong site — same structure as the ToneFlush and Inkfolio pages, with the
   palette lifted from the game's own ChromeTokens.swift so the web presence and the
   product read as the same thing. Cyan is the primary accent and pink is the second,
   which is the pairing the game's chrome uses everywhere. */
:root {
  --bg:        #05081c;
  --bg-deep:   #03050f;
  --panel:     #0f1636;
  --panel-deep:#070b22;
  --line:      #1e2a5c;
  --text:      #eaf2ff;
  --text-2:    #aebadf;
  --text-3:    #7d8ab4;
  --dim:       #626f96;
  --accent:      #28dcf0;
  --accent-soft: #7cf3ff;
  --accent-deep: #12a7bd;
  --on-accent:   #04121a;
  --pink:      #ff4d9e;
  --pink-deep: #d62a7c;
  --green:     #3ce6a8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ---- Header ---- */

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--panel-deep);
}

header.site .wrap {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The mark is the game's own idea in miniature: a brick above a paddle. */
.mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--accent-soft), var(--pink-deep));
  display: grid;
  place-items: center;
  color: var(--on-accent);
  font-weight: 700;
  font-size: 17px;
}

.wordmark {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

header.site nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 15px;
}

header.site nav a { color: var(--text-3); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }

/* ---- Type ---- */

h1 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 56px 0 16px;
  font-weight: 700;
}

h2 {
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 52px 0 18px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; color: var(--text-2); }

.lede { font-size: 20px; color: var(--text-2); margin-bottom: 8px; }

a { color: var(--accent); }
a:hover { color: var(--accent-soft); }

small, .fine { font-size: 14px; color: var(--dim); line-height: 1.6; }

ul, ol { color: var(--text-2); }
li { margin-bottom: 6px; }

/* ---- Cards ---- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
}

.card p:last-child { margin-bottom: 0; }

.card ol, .card ul { margin: 0 0 4px; padding-left: 22px; color: var(--text-2); }

/* ---- Feature list ---- */

.features { display: grid; gap: 14px; }

.feature h3 { color: var(--text); }
.feature p { margin-bottom: 0; color: var(--text-3); font-size: 16px; }

/* ---- The plain-dealing panel: what the game costs and what it does not do.
   Styled as part of the pitch rather than as a disclaimer at the bottom. ---- */

.limits {
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink-deep);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
}

.limits p:last-child { margin-bottom: 0; }

/* ---- Orb / stat rows ---- */

.patterns { display: grid; gap: 10px; }

.pattern {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}

.pattern .name { font-weight: 600; color: var(--text); flex: none; min-width: 118px; }
.pattern .spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--accent);
  flex: none;
}
.pattern .note { color: var(--text-3); font-size: 15px; flex: 1 1 220px; }

/* ---- The numbers strip ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}

.stat .n {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.stat .l {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}

/* ---- Contact block ---- */

.contact {
  background: linear-gradient(150deg, #121a45, var(--panel-deep));
  border: 1px solid var(--accent-deep);
  border-radius: 14px;
  padding: 24px;
}

.contact .email {
  font-size: 21px;
  font-weight: 600;
  word-break: break-all;
}

/* ---- Footer ---- */

footer.site {
  border-top: 1px solid var(--line);
  background: var(--panel-deep);
  padding: 30px 0 40px;
}

footer.site .wrap { padding-bottom: 0; }

footer.site p { color: var(--dim); font-size: 14px; margin-bottom: 10px; }

footer.site nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; margin-bottom: 14px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; margin-top: 40px; }
  .lede { font-size: 18px; }
  .wrap { padding: 0 18px 64px; }
  .pattern .name { min-width: 0; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 14px 8px; }
  .stat .n { font-size: 21px; }
  .stat .l { font-size: 10px; }
}