/* ============================================================================
   Press kit pages (/press/ and /press/<slug>/) — same theme system as the
   homepage (loads AFTER site.css, uses its tokens and reuses .panel, .frame,
   .capsule, .art, .btn wholesale). One kit page per released game; the
   factsheet-sidebar + sections anatomy is the standard indie presskit format.
   ========================================================================= */

/* Press pages get the BROKEN checker: giant tile, strongest at the edges,
   faded to clean field behind the content — calmer reading surface than
   the homepage's uniform wallpaper. The !importants are deliberate: this
   background is FIXED on press pages, and must beat the lab's
   html[data-bg] recipe selectors too (otherwise a lab session's saved
   Background choice silently replaces it — which is exactly what
   happened). Theme/accent/panel lab axes still apply here. */
body::before{
  /* No drift on press: this mask's tile is 340px, so the baked travel of one
     --pat-size would not loop cleanly. Static, and flush to the viewport. */
  inset:0 !important;
  animation:none !important;
  opacity:.5 !important;
  background:var(--pattern) !important;
  -webkit-mask-image:url("/assets/img/pat-checker.svg") !important;
  mask-image:url("/assets/img/pat-checker.svg") !important;
  -webkit-mask-size:340px 340px !important;
  mask-size:340px 340px !important;
}
body::after{
  content:"" !important;
  position:fixed; inset:0 !important; z-index:-1;
  height:auto !important;
  border:0 !important;
  background:radial-gradient(120% 90% at 50% 40%, var(--page) 38%, transparent 82%) !important;
  pointer-events:none;
}

/* The homepage's tall top padding frames its floating wordmark; a reading
   page starts like a document instead. */
body{ padding-top:28px; }

.back{
  display:inline-block; margin:0 auto 22px;
  color:var(--text-mid); text-decoration:none; font-weight:600; font-size:.95rem;
}
.back:hover{ color:var(--accent); }

.press{
  max-width:960px; margin:0 auto;
  display:grid; grid-template-columns:260px 1fr; gap:36px;
  align-items:start;
}
@media (max-width:760px){
  .press{ grid-template-columns:1fr; }
}

/* ---- the factsheet: one more cream card ---- */
.facts{
  position:sticky; top:20px;
  background:var(--panel);
  border-radius:var(--r-panel);
  padding:20px 20px 22px;
  box-shadow:0 10px 0 -2px var(--keyline), 0 18px 40px -12px var(--shadow);
}
.facts h2{ margin:0 0 4px; font-size:1.15rem; font-weight:800; color:var(--ink); }
.facts dl{ margin:0; }
/* Sentence case on purpose — the uppercase-microlabel treatment reads as
   template filler no matter how tight the tracking is. */
.facts dt{
  margin-top:13px; font-size:12px; font-weight:700; color:var(--ink-mid);
}
.facts dd{ margin:3px 0 0; font-size:.9rem; line-height:1.45; color:var(--ink); }
.facts a{ color:var(--ink); }

/* ---- the kit body: sits straight on the page ---- */
.kit h1{
  margin:0;
  font-family:"Slab", var(--font);
  font-size:clamp(2rem, 5vw, 2.6rem);
  font-weight:800; text-transform:uppercase; line-height:1.05;
  color:var(--accent);
  -webkit-text-stroke:.09em var(--keyline);
  paint-order:stroke fill;
  text-shadow:.06em .07em 0 var(--keyline);
}
.kit .lede{
  margin:12px 0 0; max-width:56ch;
  color:var(--text-hi); font-size:1.05rem; font-weight:600; line-height:1.5;
}
.kit h2{
  margin:40px 0 12px; font-size:1.3rem; font-weight:800;
  letter-spacing:-.01em; color:var(--text-hi);
}
.kit p, .kit li{
  margin:0 0 10px; max-width:62ch;
  color:var(--text-mid); font-size:.95rem; line-height:1.6;
}
.kit ul{ margin:0; padding-left:1.2em; }
.kit li{ margin-bottom:6px; }
.kit b{ color:var(--text-hi); font-weight:700; }
/* Text links only — .btn styles its own colors, and letting this rule
   reach buttons painted the solid pill's hover label accent-on-accent. */
.kit a:not(.btn){ color:var(--text-hi); }
.kit a:not(.btn):hover{ color:var(--accent); }
.kit .btn{ margin-top:6px; }

/* screenshots reuse the mount/keyline system — the guarantee applies here too */
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .shots{ grid-template-columns:1fr; } }