/* /press — press kit page. Reuses the tokens on :root in styles.css
 * (--bg-*, --fg-*, --accent*, --font-display VT323, --font-mono). Loaded
 * after styles.css. */

.press-page main { position: relative; z-index: 2; }
.pk-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px 90px; }

/* ---------- hero ---------- */
.pk-hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: center;
  padding: 128px 0 30px;
}
.pk-hero-logo { width: 200px; height: auto; filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .6)); }
.pk-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.pk-title {
  font-family: var(--font-display); font-size: clamp(52px, 8vw, 92px); line-height: .86;
  margin: 0; color: var(--fg-0); letter-spacing: .01em;
  text-shadow: 0 0 40px rgba(230, 167, 86, .18);
}
.pk-tagline { font-family: var(--font-mono); font-size: 16px; color: var(--accent-hot); margin: 14px 0 0; letter-spacing: .01em; }
.pk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pk-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 12px 20px; border-radius: var(--radius); border: 1px solid var(--accent);
  color: var(--accent); background: rgba(230, 167, 86, .06); transition: all var(--t-fast, .12s) ease;
}
.pk-btn:hover { background: var(--accent); color: var(--bg-0); }
.pk-btn--ghost { border-color: var(--border-strong); color: var(--fg-1); background: transparent; }
.pk-btn--ghost:hover { border-color: var(--fg-1); background: var(--bg-2); color: var(--fg-0); }

/* ---------- section frame ---------- */
.pk-sec { padding: 30px 0 8px; }
.pk-shead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pk-shead .idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--accent); }
.pk-shead h2 { font-family: var(--font-mono); margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-0); }
.pk-shead .note { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }

/* ---------- fact sheet ---------- */
.pk-facts {
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(27, 31, 38, .5), rgba(20, 23, 28, .28));
}
.pk-fact { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 13px 22px; border-top: 1px solid rgba(45, 51, 61, .55); font-family: var(--font-mono); font-size: 14px; }
.pk-fact:first-child { border-top: 0; }
.pk-fact dt { color: var(--fg-3); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; align-self: center; }
.pk-fact dd { margin: 0; color: var(--fg-1); line-height: 1.5; }
.pk-fact dd a { color: var(--accent); text-decoration: none; }
.pk-fact dd a:hover { text-decoration: underline; }
.pk-fact .ok { color: var(--accent-green); }

/* ---------- description / pillars ---------- */
.pk-lede { font-family: var(--font-mono); font-size: 15px; line-height: 1.7; color: var(--fg-1); max-width: 68ch; margin: 0 0 26px; }
.pk-lede b { color: var(--fg-0); }
.pk-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pk-pillar {
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 5px;
  padding: 16px 18px; background: var(--bg-1);
}
.pk-pillar h3 { font-family: var(--font-mono); margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pk-pillar p { font-family: var(--font-mono); margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }

/* ---------- screenshots ---------- */
.pk-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pk-shot { display: block; text-decoration: none; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg-1); transition: border-color var(--t-fast, .12s) ease, transform var(--t-fast, .12s) ease; }
.pk-shot:hover { border-color: var(--accent); transform: translateY(-2px); }
.pk-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pk-shot-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1); border-top: 1px solid var(--border); }
.pk-shot-cap .dl { color: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; white-space: nowrap; }
.pk-shot:hover .pk-shot-cap .dl { color: var(--accent); }

/* ---------- phone shots ---------- */
.pk-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
.pk-phone { display: block; text-decoration: none; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-1); transition: border-color var(--t-fast, .12s) ease, transform var(--t-fast, .12s) ease; }
.pk-phone:hover { border-color: var(--accent); transform: translateY(-2px); }
.pk-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }

/* ---------- brand assets ---------- */
.pk-brand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pk-asset { border: 1px solid var(--border); border-radius: 6px; padding: 22px; text-align: center; background: var(--bg-1); }
.pk-asset .frame { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pk-asset.-checker .frame { background: repeating-conic-gradient(#1b1f26 0% 25%, #14171c 0% 50%) 50% / 22px 22px; border-radius: 4px; }
.pk-asset img { max-height: 108px; max-width: 100%; }
.pk-asset h3 { font-family: var(--font-mono); margin: 0 0 3px; font-size: 13px; color: var(--fg-0); }
.pk-asset p { font-family: var(--font-mono); margin: 0 0 12px; font-size: 11px; color: var(--fg-3); letter-spacing: .06em; }

/* ---------- trailer ---------- */
.pk-trailer { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #000; }
.pk-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.pk-trailer-note { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: .04em; margin: 12px 0 0; text-align: right; }
.pk-trailer-note a { color: var(--accent); text-decoration: none; }
.pk-trailer-note a:hover { text-decoration: underline; }

/* ---------- links ---------- */
.pk-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pk-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; text-decoration: none;
  padding: 15px 18px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-1); color: var(--fg-1); transition: all var(--t-fast, .12s) ease;
}
.pk-link:hover { border-color: var(--accent); color: var(--fg-0); background: var(--bg-2); }
.pk-link .arr { color: var(--accent); }

@media (max-width: 760px) {
  .pk-hero { grid-template-columns: 1fr; text-align: center; padding-top: 118px; gap: 20px; }
  .pk-hero-logo { width: 150px; margin: 0 auto; }
  .pk-cta-row { justify-content: center; }
  .pk-pillars, .pk-gallery, .pk-brand, .pk-links { grid-template-columns: 1fr; }
  .pk-phones { grid-template-columns: 1fr; max-width: 320px; }
  .pk-fact { grid-template-columns: 1fr; gap: 4px; }
  .pk-shead { flex-wrap: wrap; } .pk-shead .note { margin-left: 0; }
}