/* Pushplay brand layer. Colors sampled from references/brand/ppicon.png.
   Layout, reflow, and project-media behavior remain in site.css. */
:root {
  --pushplay-red-bright: #ef4036;
  --pushplay-red: #bd3029;
  --pushplay-red-dark: #96251f;
  --pushplay-graphite: #404041;
  --pushplay-gray: #606369;
  --pushplay-light-gray: #f0f1f2;
  --pushplay-paper: #fcfcfc;
  --pushplay-rule: #bfc1c4;
  --pushplay-grid: rgba(64,64,65,.035);
  --paper: var(--pushplay-paper);
  --paper-2: var(--pushplay-light-gray);
  --paper-3: #fff;
  --ink: #303032;
  --ink-soft: #595c61;
  --muted: var(--pushplay-gray);
  --line: var(--pushplay-rule);
  --line-strong: #92969a;
  --red: var(--pushplay-red);
  --red-dark: var(--pushplay-red-dark);
  --red-soft: #fff0ef;
  --shadow: none;
  --shadow-soft: none;
  --brand-grid: repeating-linear-gradient(90deg,transparent 0,transparent 85px,var(--pushplay-grid) 85px,var(--pushplay-grid) 86px);
}
body,.fingerguns-page {background:var(--brand-grid),var(--paper);color:var(--ink)}
h1,h2,h3 {font-weight:500;letter-spacing:-.028em}
h1 {font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.12}
.site-header {background:var(--brand-grid),#fff;border-bottom:1px solid var(--pushplay-graphite)}
.header-inner {min-height:114px;padding-block:24px}
.logo img {width:240px}
.nav a {font-size:.9rem}
.nav a[aria-current=page] {color:var(--red);background:none;text-decoration:none;border-bottom:2px solid var(--pushplay-red-bright)}
.nav a:hover {color:var(--red)}
.hero {padding-block:34px 26px}
.hero-row {display:block}
.hero h1 {font:italic 400 clamp(1.8rem,3.2vw,2.9rem)/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.025em;max-width:none}
.hero .lede {max-width:77ch;margin-top:20px;font-size:1.03rem;line-height:1.7}
.hero .eyebrow {margin-bottom:16px}
.eyebrow,.section-kicker {letter-spacing:.14em;font-size:.72rem}
.section-header,.code-group h2 {position:relative;border-color:var(--pushplay-graphite)}
.section-header::before,.code-group h2::after {content:'';position:absolute;left:0;width:52px;height:3px;background:var(--pushplay-red-bright)}
.section-header::before {top:-2px}
.code-group h2::after {bottom:-2px}
.section-header h2,.code-group h2 {font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:1.8rem}
.project {padding-bottom:24px;border-bottom:1px solid var(--line);background:none;border-radius:0;box-shadow:none}
.project-title h3 {font-weight:500;letter-spacing:-.035em}
.project .metadata {font-size:.7rem;font-weight:500;letter-spacing:.07em}
.status {border:0;border-left:2px solid var(--pushplay-red-bright);padding:0 0 0 8px;font-size:.7rem;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);background:none;border-radius:0}
.project .card-action {font-size:.9rem;font-weight:500}
.project-media {border-radius:0;box-shadow:none}
.project-media.time-anchor img {object-position:left center}
.project-media.vendano {background:#f4f5f6}
.project-media img {border-radius:0}
.repo-icon {border-radius:0;background:none;width:64px;height:64px}
.repo {grid-template-columns:64px minmax(0,1fr) auto;gap:24px;padding-block:24px}
.repo h3 {font-weight:500;letter-spacing:-.02em}
.repo .metadata {font-weight:400;letter-spacing:.025em}
.repo-link,.text-link {font-weight:500;color:var(--red)}
.source-preview article {border-color:var(--line)}
.source-preview h3 {font-weight:500}
.studio-grid {border-color:var(--pushplay-graphite)}
.studio-grid h2 {font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
.page-intro .lede,.detail-intro .lede {font-size:1.1rem}
.button,.button.primary {border-radius:0;background:none;color:var(--red);border:0;border-bottom:1px solid var(--red);padding:10px 4px;font-weight:500;justify-content:flex-start;text-decoration:none}
.button.primary:hover,.button:hover {background:none;color:var(--red-dark);border-color:var(--red-dark)}
.hero-actions {gap:12px 26px}
.legal-note {background:none;border-color:var(--pushplay-red-bright);padding-block:4px}
.site-footer {position:relative;border-top:1px solid var(--pushplay-graphite);border-bottom:6px solid var(--pushplay-graphite);background:var(--brand-grid),#f5f6f7}
.site-footer::before {content:'';position:absolute;top:-3px;left:max(20px,calc((100% - 1216px)/2));width:64px;height:4px;background:var(--pushplay-red-bright)}
.footer-contact {font-family:Georgia,'Times New Roman',serif;font-style:italic;color:var(--red);font-size:1.13rem}
.footer-nav a {font-size:.85rem}
.preview-toggle {border-radius:0}
/* Keep the product's own imagery; align its surrounding page with the studio. */
.fg-hero-media,.fg-game-card,.fg-demo-grid,.fg-faq-grid article {background:none;border-radius:0;box-shadow:none}
.fg-hero-media {padding:0;border:0}
.fg-hero-media img,.fg-game-card img,.fg-demo-media,.fg-demo-media img {border-radius:0;box-shadow:none}
.fg-game-card,.fg-faq-grid article {border:0;border-top:1px solid var(--line)}
.fg-demo-grid {border:0;border-block:1px solid var(--line)}
.fg-hero {padding-top:44px}
@media(max-width:64rem){.repo{grid-template-columns:56px minmax(0,1fr) auto;gap:18px}.repo-icon{width:56px;height:56px}}
@media(max-width:48rem){
 .header-inner{min-height:0;padding-block:20px 8px;gap:16px}
 .logo img{width:210px}
 .hero{padding-block:26px 20px}
 .hero h1{font-size:2rem;max-width:24ch}
 .hero .lede{font-size:1rem;max-width:52ch;margin-top:16px}
 .section-header h2,.code-group h2{font-size:1.55rem}
 .repo{grid-template-columns:48px minmax(0,1fr);gap:12px 16px}
 .repo-icon{width:48px;height:48px}
 .repo-link{grid-column:2}
 .project-title h3{font-size:2rem}
}
@media(max-width:30rem){
 :root{--brand-grid:repeating-linear-gradient(90deg,transparent 0,transparent 63px,var(--pushplay-grid) 63px,var(--pushplay-grid) 64px)}
 h1{font-size:clamp(1.5rem,calc(1.1rem + 4vw),2.4rem)}
 .hero h1{font-size:1.85rem;line-height:1.22}
 .nav{gap:4px 20px}
}
.fg-pills span{border-radius:0;background:none;border:0;border-left:2px solid var(--pushplay-red-bright);padding:2px 10px;font-size:.8rem;font-weight:500;min-height:0}