/* Press kit page.
 *
 * The palette, typography and focus ring come from /styles.css, which this
 * page loads first. Nothing here redeclares a colour or a font family: the
 * press page drifting to its own near-miss ink and Arial is exactly how a
 * brand page ends up off-brand. Only press-specific layout lives here.
 */

main { margin: 0 auto; max-width: var(--max-width); padding: 48px 32px 100px; }

.backlink { font-size: 13px; letter-spacing: 0.02em; margin: 0; }
.backlink a { border-bottom: 1px solid var(--line); }

.hero { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 0.8fr; padding: 70px 0; }
.hero img { max-width: 420px; width: 100%; }

h1 { font-size: clamp(54px, 9vw, 104px); letter-spacing: -0.06em; line-height: 0.9; margin: 0 0 25px; }
h2 { font-size: 34px; letter-spacing: -0.04em; margin: 0 0 20px; }
.lede { color: var(--muted); font-size: 20px; line-height: 1.5; max-width: 640px; }

.section { border-top: 1px solid var(--line); padding: 54px 0; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.card { background: var(--cream); border: 1px solid var(--line); padding: 20px; }

.preview { align-items: center; background: var(--paper); display: flex; height: 170px; justify-content: center; margin: -20px -20px 18px; }
.preview.dark { background: var(--ink); }
.preview img { max-height: 110px; max-width: 90%; }

.download { background: var(--ink); color: var(--cream); display: inline-block; font-size: 13px; font-weight: 500; margin: 4px 6px 4px 0; padding: 9px 12px; }
.download:hover { background: var(--orange-deep); }
.download.light { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.download.light:hover { background: var(--ink); color: var(--cream); }

ul { padding-left: 20px; }

.fact { border-top: 1px solid var(--line); display: grid; grid-template-columns: 190px 1fr; padding: 11px 0; }

.note { background: var(--orange); margin-top: 32px; padding: 28px; }

footer { border-top: 1px solid var(--line); font-size: 13px; padding-top: 30px; }
footer a { border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .hero, .grid, .fact { grid-template-columns: 1fr; }
  .hero { gap: 30px; }
  .hero img { max-width: 300px; }
}