/* Press kit (press.html). Loads after site.css (the Map design system); uses its tokens only, no web fonts,
   no requests to other sites. Mobile-first: one column, then grids from 860px (the .cards breakpoint). */

.press__section { padding: 0 0 var(--space-7); }
.press__section--last { padding-bottom: var(--space-8); }
.press h2 { font-size: var(--step-2); margin: 0 0 var(--space-3); }
.press__intro { margin: 0 0 var(--space-2); }
.press .page-head { padding-bottom: var(--space-6); }
.press .page-head .lede { max-width: 46ch; margin: 0; }

/* About + contact: text links read as links on cream */
.press .panel a:not(.btn) { color: var(--lake); font-weight: 700; }
.press .panel a:not(.btn):hover { color: var(--ink); }
.press__about p { max-width: var(--measure); font-size: var(--step-1); line-height: 1.35; font-family: var(--serif); font-weight: 700; }

/* Quick facts: label and value stack on phones, sit side by side from 600px */
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { padding: 0.7rem 0; border-bottom: 3px dotted rgba(42, 29, 18, 0.3); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-weight: 800; font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 0.1rem 0 0; font-size: var(--step-0); }
@media (min-width: 600px) {
  .facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-4); align-items: baseline; }
  .facts dd { margin: 0; }
}

/* Logos: a swatch in the ground the file is meant for, then the card body */
.press__logos { margin-top: var(--space-5); }
.logo-swatch { display: grid; place-items: center; min-height: 130px; padding: var(--space-5) var(--space-4); border-bottom: var(--line); }
.logo-swatch--light { background: #fff; }
.logo-swatch--dark { background: var(--ink); }
.logo-swatch img { width: min(100%, 300px); height: auto; }
.logo-swatch .logo-swatch__icon { width: 96px; height: 96px; border-radius: var(--radius-s); }
.press__logos .card { transform: none; }
.press__logos .card:hover, .press__logos .card:focus-within { transform: none; }
.press__logos .card__body p { margin: 0 0 var(--space-3); }
.press__logos .card__body p:last-child { margin-bottom: 0; }
.press__logos .card__body .small { color: var(--ink-soft); }
.press__logos .card h3 { margin-bottom: 0.3rem; }

/* Screenshots: the cards are not links as a whole here, so no lift on hover */
.press__shots { margin-top: var(--space-5); }
.press__shots .card:hover, .press__shots .card:focus-within { transform: none; }
.press__shots .card__body p { margin: 0 0 var(--space-2); }
.press__shots .card__body a { color: var(--lake); font-weight: 700; }
.press__shots .card__body a:hover { color: var(--ink); }
.press__shots .card__body p:last-child { margin-bottom: 0; }

/* Contact */
.press__email { font-family: var(--serif); font-weight: 900; font-size: var(--step-1); overflow-wrap: anywhere; margin: 0 0 var(--space-2); }
.press__contact p { max-width: var(--measure); }

/* Logos are 3 across on desktop: the 5th card sits in the second row, so let the grid breathe */
@media (min-width: 860px) { .press__logos { align-items: stretch; } }