:root {
  /* Same dark/green theme as the Beyond dashboard */
  --bg: #0f1115;
  --bg-panel: #171a21;
  --bg-panel-2: #1b1f28;
  --fg: #e8eaf0;
  --fg-dim: #8b93a7;
  --green: #1a8a4a;
  --green-hi: #22a85b;
  --green-lo: #126b38;
  --green-glow: rgba(26,138,74,.28);
  --green-dim: #15291e;
  --green-bright: #3ccf7a;
  --border: #262b36;
  --max-width: 1120px;
  --body-font: 'Chakra Petch Body', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Roboto, Arial, sans-serif;
  --heading-font: 'Jacinto', 'Teko', var(--body-font);
  --nav-font: 'Jacinto', 'Chakra Petch', var(--body-font);
  --label-font: 'Chakra Petch', var(--body-font);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: clip;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
h1, h2 {
  font-family: var(--heading-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg);
  line-height: 1.2;
}
h3, h4 {
  font-family: var(--label-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
  line-height: 1.3;
}
h1 { font-size: 2.6rem; margin-top: 0; }
h2 { font-size: 1.65rem; margin-top: 2.6rem; color: var(--green-bright); letter-spacing: 0.06em; }
h3 { font-size: 1.1rem; margin-top: 1.7rem; }
p { color: var(--fg); }
a { color: var(--green-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
code, pre { font-family: 'Consolas', monospace; background: #0f1112; }
pre { padding: 1rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
code { padding: 0.1rem 0.3rem; border-radius: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #11141a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--green-hi), var(--green-lo)); border-radius: 6px; border: 2px solid #11141a; }

/* ---------------- Header (matches the Beyond dashboard) ---------------- */
.site-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #15171d, #0f1115);
  flex-wrap: wrap;
  min-width: 0;
}
.site-header .wm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.site-header .wmshield {
  position: absolute; left: 50%; top: 50%;
  height: 300px; aspect-ratio: 265/393;
  background-size: auto 100%; background-position: left center; background-repeat: no-repeat;
  transform: translate(-50%, -50%) rotate(-18deg) scaleX(1.6);
  opacity: .07; filter: saturate(1.2);
}
.site-header .logo-link { position: relative; z-index: 1; display: block; line-height: 0; min-width: 0; }
.site-header .logo-link img { height: 88px; width: auto; display: block; }
.site-header .contact {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  margin-left: auto; text-align: right;
  min-width: 0;
}
.site-header .contact a {
  color: var(--fg); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end;
  text-decoration: none;
  min-width: 0; max-width: 100%;
  word-break: break-word;
}
.site-header .contact a span { color: #f5a300; }
.site-header .contact a:hover { color: #f5a300; text-decoration: none; }
.social { display: flex; gap: 12px; justify-content: flex-end; }
.social a { color: var(--fg-dim) !important; line-height: 0; }
.social a:hover { color: #f5a300 !important; }
.footer-inner .social { justify-content: flex-start; margin-top: 8px; }
.about-social { justify-content: flex-start; margin: 1rem 0 2rem; }
.about-social svg { width: 34px; height: 34px; }
@media (max-width: 640px) {
  .site-header { padding: 12px 16px; gap: 12px; }
  .site-header .logo-link img { height: 52px; }
  .site-header .contact { margin-left: 0; text-align: left; }
  .site-header .contact a { justify-content: flex-start; }
  .site-header .social { justify-content: flex-start; }
}

nav.main-nav {
  position: relative;
  background: transparent;
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
nav.main-nav a {
  background: url("ui/grunge_tile.webp") center/256px, rgba(30,34,42,.85); border: 0; color: var(--fg-dim);
  padding: 8px 16px; border-radius: 0;
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  box-shadow: inset 0 0 0 1px rgba(191,204,199,.16);
  font-family: var(--nav-font); font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em; font-size: 15px;
  text-decoration: none; white-space: nowrap;
}
nav.main-nav a { position: relative; transition: color .15s, box-shadow .15s; }
nav.main-nav a:hover { color: var(--green-bright); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(60,207,122,.5); }
nav.main-nav a.active { color: #fff; box-shadow: inset 0 0 0 1px rgba(60,207,122,.75), inset 0 0 18px rgba(60,207,122,.18); }
nav.main-nav a.active::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px;
  background: linear-gradient(225deg, #02d672 50%, transparent 50%); }

/* ---------------- Green glow under panels (like the game menu) ---------------- */
.glow, .page-hero-inner, .card-grid, .home-hero .hero-panel-wrap {
  filter: drop-shadow(0 0 14px rgba(2,214,114,.30)) drop-shadow(0 0 3px rgba(2,214,114,.35));
}
.glow { margin: 2.6rem 0; }
.glow > .featured-banner, .glow > .planned-block { margin: 0; }
.glow > .cta-block.compact { margin: 0; }
.changelog-entries .glow, .glow + .glow { }
.glow:has(> .changelog-date) { margin: 0 0 1.4rem; }
.card-grid { padding: 6px; }

/* ---------------- Forms, reactions, comments ---------------- */
.lede { font-size: 1.15rem; color: var(--fg); }
.muted { color: var(--fg-dim); } .small { font-size: .85rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.contact-grid .glow { margin: 1.4rem 0 0; }
.form-panel, .engage {
  background: url("ui/grunge_tile.webp") center/512px, var(--bg-panel);
  border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(191,204,199,.14);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); padding: 1.4rem 1.6rem; height: 100%;
}
.form-panel h2, .engage h2 { margin-top: 0; }
.engage h2 + .reactions { margin-bottom: 1.6rem; }
.site-form { display: flex; flex-direction: column; gap: .9rem; }
.site-form label { display: flex; flex-direction: column; gap: .35rem; font-family: var(--label-font); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--fg-dim); }
.site-form label.check { flex-direction: row; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .9rem; font-family: var(--body-font); font-weight: 400; }
.site-form .opt { text-transform: none; font-weight: 400; letter-spacing: 0; }
.site-form input:not([type=checkbox]), .site-form select, .site-form textarea {
  background: #0d0f13; border: 1px solid #2e3440; color: var(--fg); font: inherit; font-family: var(--body-font);
  font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400;
  padding: .65rem .8rem; clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px)); outline: none;
}
.site-form input:focus, .site-form select:focus, .site-form textarea:focus { border-color: var(--green-bright); box-shadow: 0 0 0 1px var(--green-bright) inset; }
.site-form input[type=checkbox] { accent-color: #02d672; width: 18px; height: 18px; }
.site-form .btn { align-self: flex-start; cursor: pointer; }
.site-form .btn:disabled { opacity: .6; cursor: wait; }
.site-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.form-foot .hint { color: var(--fg-dim); font-size: .85rem; }
.form-msg { margin: 0; min-height: 1.2em; font-size: .95rem; }
.form-msg.ok { color: var(--green-bright); } .form-msg.err { color: #ff7a6b; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.reactions { display: flex; gap: .6rem; flex-wrap: wrap; }
.rx { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; padding: .45rem .9rem;
  background: url("ui/grunge_tile.webp") center/256px, #1d222b; border: 0; color: var(--fg);
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px)); box-shadow: inset 0 0 0 1px rgba(191,204,199,.2); transition: transform .1s, box-shadow .15s; }
.rx:hover { box-shadow: inset 0 0 0 1px rgba(60,207,122,.6); }
.rx:active { transform: scale(.94); }
.rx.on { box-shadow: inset 0 0 0 1px rgba(60,207,122,.9), inset 0 0 14px rgba(60,207,122,.25); }
.rx-e { font-size: 1.3rem; line-height: 1; } .rx-n { font-family: var(--label-font); font-weight: 700; min-width: 1ch; }
.comment { border-left: 2px solid rgba(60,207,122,.5); padding: .3rem 0 .3rem 1rem; margin: 0 0 1.2rem; }
.comment-head { display: flex; gap: .8rem; align-items: baseline; }
.comment-head span { color: var(--fg-dim); font-size: .82rem; }
.comment p { margin: .3rem 0 0; overflow-wrap: anywhere; }
.comment-reply { margin: .7rem 0 0 1rem; padding: .5rem .8rem; background: rgba(2,214,114,.07); border-left: 2px solid #02d672; }
.comment-reply b { color: var(--green-bright); font-size: .9rem; }
.comment-form { margin-top: 1.4rem; }
@media (max-width: 760px) { .contact-grid, .site-form .two { grid-template-columns: 1fr; } }

/* ---------------- Sticky top bar (header + nav) ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: url("ui/grunge_tile.webp") center/512px, linear-gradient(180deg, #15171d, #0f1115);
  border-bottom: 1px solid rgba(191,204,199,.22);
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 1px 0 rgba(60,207,122,.35);
}
.topbar .site-header { background: transparent; border-bottom: 1px solid rgba(191,204,199,.10);
  transition: padding .2s ease; }
.topbar .site-header .logo-link img { transition: height .2s ease; }
.topbar .site-header .contact > a { transition: opacity .2s, max-height .2s; max-height: 2em; overflow: hidden; }
.topbar.shrunk .site-header { padding-top: 8px; padding-bottom: 8px; }
.topbar.shrunk .site-header .logo-link img { height: 44px; }
.topbar.shrunk .site-header .contact > a { opacity: 0; max-height: 0; }
.topbar.shrunk .site-header .contact { gap: 0; }
.topbar.shrunk nav.main-nav { padding-top: 6px; padding-bottom: 6px; }
html { scroll-padding-top: 9rem; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.4rem 4rem;
}
main.has-hero { padding-top: 0; }
main.no-hero { padding-top: 2.6rem; }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  margin-top: 3rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.4rem;
  color: var(--fg-dim);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-inner a { color: var(--fg-dim); }
.footer-inner a:hover { color: var(--green-bright); }

/* ---------------- Full-width hero banners ---------------- */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-bottom: 2.6rem;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,17,21,0.35) 0%, rgba(15,17,21,0.55) 45%, rgba(15,17,21,0.97) 100%);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 3.5rem 1.4rem 2.6rem;
}
.hero-panel {
  background: url("ui/grunge_tile.webp") center/512px, rgba(23,26,33,.72);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(191,204,199,.18);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  padding: 1.6rem 1.8rem;
  backdrop-filter: blur(3px);
  display: inline-block;
  max-width: 100%;
}
.hero-mark-halo {
  display: inline-block;
  background: none;
  padding: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.6));
  margin-bottom: 1.2rem;
}
.hero-mark-halo img { height: 230px; width: auto; display: block; }
.page-hero { min-height: 0; }
.page-hero-inner { padding: 2rem 1.4rem 1.6rem; }
.hero-compact { display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem 1.5rem; }
.hero-compact .hero-mark-halo { margin: 0; flex: 0 0 auto; }
.hero-compact .hero-mark-halo img { height: 128px; }
.hero-compact h1 { margin-bottom: .35rem; }
.hero-compact .hero-pitch { margin-bottom: .8rem; font-size: 1.05rem; }
.hero-compact .tag-list { margin-bottom: .8rem; }
.hero-compact .tag-list .tag { padding: .15rem .55rem; font-size: .78rem; }
.hero-compact .btn-row .btn { padding: .45rem .9rem; font-size: .85rem; }
.video-wrap { max-width: var(--max-width); margin: 0 auto 2.4rem; padding: 0 1.4rem; }
.video-frame { position: relative; aspect-ratio: 16/9; clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); border: 1px solid var(--border); background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-head { margin: 0 0 .2rem; }
.video-sub { margin: 0 0 1rem; color: var(--muted, #9aa3ad); }
.page-hero h1 {
  font-size: 2.1rem;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero-pitch {
  font-size: 1.15rem;
  color: var(--fg);
  max-width: 640px;
  margin: 0 0 1.4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.tag-list { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.tag {
  border: 1px solid var(--green);
  background: var(--green-dim);
  color: var(--green-bright);
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-family: var(--label-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}

/* ---------------- Home hero (wordmark over dark image) --------------- */
.home-hero {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1b1f28 0%, #0f1115 70%);
  text-align: center;
  margin-bottom: 0;
  padding: 3.5rem 1.4rem;
}
.home-hero .hero-panel { display: block; }
.home-hero img.wordmark { max-width: 560px; width: 90%; height: auto; margin: 0 auto; }
.home-hero .tagline {
  margin-top: 1.1rem;
  color: var(--fg-dim);
  font-family: var(--label-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.what-we-do {
  max-width: 760px;
  margin: 2.6rem auto 0;
  text-align: center;
  font-size: 1.1rem;
  color: var(--fg);
}

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--green-hi), var(--green-lo));
  color: #fff;
  font-family: var(--label-font);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  border: 1px solid #2fc06c;
  box-shadow: 0 2px 0 #0b4424, 0 0 18px var(--green-glow);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.secondary {
  background: url("ui/grunge_tile.webp") center/256px, #242a36;
  border: 1px solid var(--border);
  color: var(--fg);
  box-shadow: none;
}
.btn.secondary:hover { border-color: var(--green-hi); color: var(--green-bright); filter: none; }
.btn.brand {
  background: linear-gradient(180deg, #ffb43c, #d97f0a);
  color: #1a1206;
  border: 1px solid #ffb43c;
  box-shadow: 0 2px 0 #7a4a06, 0 0 22px rgba(255,180,60,.35);
}
.btn.brand:hover { filter: brightness(1.08); text-decoration: none; }
.btn-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.4rem 0; }

/* ---------------- Featured Beyond banner on home ---------------- */
.featured-banner {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 2.6rem 0;
  border: 1px solid var(--border);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  min-height: 280px;
  background-size: cover;
  background-position: center;
}
.featured-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,17,21,0.92) 0%, rgba(15,17,21,0.55) 55%, rgba(15,17,21,0.15) 100%);
}
.featured-banner-inner {
  position: relative;
  z-index: 2;
  padding: 2.2rem;
  max-width: 440px;
}
.featured-banner h2 {
  margin-top: 0;
  color: var(--fg);
  font-size: 1.8rem;
}
.featured-banner p { color: var(--fg-dim); }
.featured-banner:hover { text-decoration: none; }
.featured-banner:hover h2 { color: var(--green-bright); }

/* ---------------- Alternating image/text rows (Beyond page) ---------------- */
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: center;
  margin: 2.8rem 0;
}
.content-row .row-media img {
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(60,207,122,.28);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  background: var(--bg-panel);
}
.content-row.multi .row-media { display: flex; flex-direction: column; gap: 14px; }
.content-row.multi .row-media img { aspect-ratio: 16/10; }
.content-row .row-text h2 { margin-top: 0; }
.content-row.reverse .row-media { order: 2; }
.content-row.reverse .row-text { order: 1; }
.content-plain { margin: 2.8rem 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.3rem;
  margin: 1.6rem 0;
}
.card {
  background: url("ui/grunge_tile.webp") center/512px, var(--bg-panel);
  box-shadow: inset 0 0 0 1px rgba(191,204,199,.14);
  border: 1px solid var(--border);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--green-hi); transform: translateY(-2px); }
.card img { aspect-ratio: 16/10; object-fit: cover; }
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.card-body h3 {
  margin: 0;
  font-size: 1.05rem;
}
.card-meta {
  color: var(--green-bright);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--label-font);
  font-weight: 700;
}
.card-body p { margin: 0.2rem 0 0.6rem; color: var(--fg-dim); font-size: 0.92rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
  margin: 1.4rem 0;
}
.gallery img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(60,207,122,.22);
}

article.post figure { margin: 1.6rem 0; }
article.post figure img { clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); border: 1px solid var(--border); }
article.post figcaption {
  color: var(--fg-dim);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  text-align: center;
}

.changelog-layout { display: grid; grid-template-columns: 140px 1fr; gap: 2rem; align-items: start; }
.changelog-date {
  margin-top: 0;
  margin-bottom: 1.4rem;
  padding: 1.2rem 1.4rem;
  background: url("ui/grunge_tile.webp") center/512px, var(--bg-panel);
  box-shadow: inset 0 0 0 1px rgba(191,204,199,.14);
  border: 1px solid var(--border);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.changelog-date:last-child { margin-bottom: 0; }
.changelog-date-head {
  position: sticky;
  top: 8.5rem;
  font-family: var(--label-font);
  font-weight: 700;
  color: var(--green-bright);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding-top: 0.2rem;
}
.changelog-entries { padding-top: 0.2rem; }
.changelog-entries ul { padding-left: 1.3rem; margin: 0; }
.changelog-entries li { margin-bottom: 0.6rem; }

.status-note {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: 0.95rem;
  color: var(--fg-dim);
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}

.planned-block {
  background: url("ui/grunge_tile.webp") center/512px, var(--bg-panel-2);
  box-shadow: inset 0 0 0 1px rgba(191,204,199,.14);
  border: 1px solid var(--border);
  padding: 1.2rem 1.4rem;
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  margin: 2.6rem 0;
}
.cta-block.compact {
  padding: 1rem 1.2rem;
  margin: 2rem 0;
}
.cta-block.compact h2 { margin-top: 0; font-size: 1.3rem; }


table.device-check { width: 100%; border-collapse: collapse; }

@media (max-width: 760px) {
  .content-row { grid-template-columns: 1fr; gap: 1rem; }
  .content-row.reverse .row-media,
  .content-row.reverse .row-text { order: unset; }
  .changelog-layout { grid-template-columns: 1fr; }
  .changelog-date-head { position: static; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.8rem; }
  body { font-size: 16px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .btn-row .btn.secondary { text-align: center; }
  .page-hero { min-height: 320px; }
  .page-hero-inner { padding: 2.2rem 1rem 1.8rem; }
  .page-hero h1 { font-size: 1.6rem; }
  .hero-pitch { font-size: 1rem; }
  .hero-mark-halo img { height: 150px; }
  .hero-compact { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .hero-compact .hero-mark-halo img { height: 84px; }
  .video-wrap { padding: 0 1rem; }
  .hero-panel { padding: 1.1rem 1.2rem; }
  .home-hero { min-height: 280px; padding: 2.4rem 1rem; }
  .home-hero img.wordmark { max-width: 90%; }
  .featured-banner-inner { max-width: 100%; }
  nav.main-nav { padding: 8px 10px; gap: 2px; }
  nav.main-nav a { padding: 6px 8px; font-size: 12px; letter-spacing: .03em; }
}

@font-face {
  font-family: 'Teko';
  src: url('fonts/Teko-Variable.ttf') format('truetype');
  font-weight: 300 700;
  size-adjust: 135%;
  font-display: swap;
}
/* Jacinto (the game's font). It has no usable punctuation glyphs, so it only covers
   letters, digits and spaces; everything else falls back to Teko. */
@font-face {
  font-family: 'Jacinto';
  src: url('fonts/Jacinto_Sans.ttf') format('truetype');
  unicode-range: U+0020, U+0030-0039, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch Body';
  src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch Body';
  src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}