/* vera20k.org: a plain info page. Dark only; violet follows the hero art. */

/* Self-hosted Latin subsets from Google Fonts, under the SIL Open Font License (see /fonts/). */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/michroma-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0c0716;
  --bg-deep: #08050f;
  --line: #2a1f40;
  --line-hi: #4a3a6b;
  --text: #ece6f8;
  --soft: #cfc6e3;
  --muted: #a99dc4;
  --psi: #c08cff;
  --psi-hi: #dcc2ff;
  /* The Latin fonts have no Chinese glyphs; Chinese falls through to the system's CJK fonts. */
  --display: "Michroma", "Eurostile", "Arial Black", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 24px;
  /* Height of the sticky header; links to a section stop just below it. */
  --header-h: 64px;
}
@media (max-width: 880px) { :root { --header-h: 100px; } }
@media (max-width: 600px) { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--psi); text-underline-offset: 3px; }
a:hover { color: var(--psi-hi); }
:focus-visible { outline: 2px solid var(--psi); outline-offset: 3px; }
p { margin: 0 0 16px; }
code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(192, 140, 255, 0.1);
  font: 0.88em var(--mono);
}

/* One container for the header, hero, sections and footer, so everything shares one left edge. */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; padding: 8px 12px; background: var(--bg-deep); color: var(--text); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Header: stays on screen while scrolling. On narrow screens the section links get a row of their own. */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo nav links";
  align-items: center;
  column-gap: 32px;
  height: var(--header-h);
}
.logo { grid-area: logo; color: var(--text); font: 17px/1 var(--display); letter-spacing: 0.3em; text-decoration: none; }
.logo:hover { color: var(--text); }
.logo span { color: var(--psi); }
.nav { grid-area: nav; justify-self: end; display: flex; gap: 28px; }
.top-links { grid-area: links; display: flex; align-items: center; gap: 18px; }
.nav a, .top-links a { color: var(--muted); font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav a:hover, .top-links a:hover { color: var(--text); }
.langs { display: flex; gap: 12px; padding-left: 18px; border-left: 1px solid var(--line-hi); }
.langs a[aria-current] { color: var(--text); font-weight: 600; }
@media (max-width: 880px) {
  .top-inner {
    grid-template-columns: auto auto;
    grid-template-rows: 56px 44px;
    grid-template-areas: "logo links" "nav nav";
    justify-content: space-between;
    column-gap: 16px;
  }
  .nav { justify-self: stretch; align-self: start; gap: 24px; overflow-x: auto; scrollbar-width: none; }
}
/* Phones held sideways: a header that stays on screen would cover too much of it. */
@media (max-height: 500px) {
  html { scroll-padding-top: 0; }
  .top { position: static; }
}
@media (max-width: 420px) {
  .logo { font-size: 15px; letter-spacing: 0.24em; }
  .nav { gap: 20px; }
  .top-links { gap: 14px; }
  .langs { gap: 10px; padding-left: 14px; }
}
/* The smallest phones drop the header's GitHub link; the hero's GitHub button is right below. */
@media (max-width: 349px) {
  .nav { gap: 16px; }
  .top-links > a { display: none; }
  .langs { padding-left: 0; border-left: 0; }
}

/* Hero: the whole art on top, never cropped, centred above the title. On short windows the art
   shrinks (keeping its 1672x941 shape) so the title still shows on the first screen. On phones the
   text lines up with the rest of the page instead. */
.hero { padding-top: 40px; padding-bottom: 64px; text-align: center; }
.hero-art {
  width: 100%;
  max-width: min(100%, 720px, max(480px, calc((100vh - var(--header-h) - 150px) * 1.777)));
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 80px -30px rgba(192, 140, 255, 0.45);
}
.hero-text { max-width: 720px; margin: 32px auto 0; }
.hero .lede { margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero .actions { justify-content: center; }
@media (max-width: 600px) {
  .hero { padding-top: 20px; padding-bottom: 48px; text-align: left; }
  .hero-text { margin-top: 24px; }
  .hero .actions { justify-content: flex-start; }
}
h1 {
  margin: 0 0 18px;
  font: clamp(26px, 2.6vw, 36px)/1.25 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 .pre { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.5em; letter-spacing: 0.22em; }
.lede { max-width: 600px; color: var(--soft); font-size: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.btn {
  display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 20px;
  border: 1px solid var(--psi);
  border-radius: 6px;
  background: var(--psi);
  color: #14091f;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: var(--psi-hi); border-color: var(--psi-hi); color: #14091f; }
.btn-ghost { background: none; border-color: var(--line-hi); color: var(--text); }
.btn-ghost:hover { background: none; border-color: var(--psi); color: var(--text); }
.note { color: var(--muted); font-size: 15px; }

/* Sections: a rule above each, and on wide screens the title in its own column beside the text.
   The text column is capped for comfortable line lengths. */
.section { position: relative; padding-top: 64px; padding-bottom: 64px; }
.section::before {
  content: "";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: 1px solid var(--line);
}
.section:last-child { padding-bottom: 88px; }
@media (max-width: 600px) { .section { padding-top: 48px; padding-bottom: 48px; } .section:last-child { padding-bottom: 64px; } }
.section-body { max-width: 660px; }
@media (min-width: 960px) {
  .section { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .section > h2 { margin: 0; }
  .section > .shots { grid-column: 1 / -1; }
}
h2 {
  margin: 0 0 20px;
  color: var(--psi);
  font: 17px/1.7 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:lang(zh) h2 { letter-spacing: 0.08em; }
h3 {
  margin: 28px 0 10px;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.goals { margin: 0 0 24px; padding-left: 22px; }
.goals li { margin-bottom: 6px; }
.goals li::marker { color: var(--psi); font-weight: 600; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 40px; }
.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; margin-bottom: 6px; padding-left: 22px; }
.list li::before {
  content: "";
  position: absolute; left: 2px; top: 0.66em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--psi);
}
.list-not li { color: var(--soft); }
.list-not li::before { background: none; border: 1.5px solid var(--muted); }
.status-note { margin-top: 20px; margin-bottom: 0; }

.shots { display: grid; grid-template-columns: 642fr 955fr; gap: 16px; margin-top: 40px; }
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }
.shots figure { margin: 0; }
.shots img { border-radius: 6px; }
.shots figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }

pre {
  margin: 0 0 16px;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--soft);
  font: 14px/1.7 var(--mono);
}
pre code { padding: 0; border-radius: 0; background: none; font: inherit; }
pre .c { color: var(--muted); }

.community { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 8px; font-weight: 600; }
.contact { margin-top: 20px; }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer-inner { padding-top: 32px; padding-bottom: 40px; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 16px; font-size: 15px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer p { max-width: 62em; margin-bottom: 8px; }

/* 404 */
.lost { min-height: 60vh; display: grid; place-content: center; gap: 12px; padding: 64px 20px; text-align: center; }
.lost h1 { margin: 0; }
.lost .btn { justify-self: center; margin-top: 8px; }