/* /press, the press kit (site/press.html, edge/src/press.ts): picked mockup
   v2 "Asset Grid", 2026-10-15. Every colour and length is a site.css token;
   the only literals are the 1px hairline, the 50% swatch circle and the two
   container widths the grid steps at.
   Look plan:
   - Palette: --bg #000000 canvas and each asset's ground, --card #0d0d0d
     tile, --line #262626 hairline, --fg #ececec ink, --muted #b3b3b3 second
     ink; the light theme reads the same tokens.
   - Accent: --accent #4d8aff (light: ink #141310), one hue, on the download links
     and the focus ring only. "download everything" is the site's primary
     button (.sb-btn, --cta-bg).
   - Type: --font-ui for every word, --font-mono only for the kit's size and
     the hex values. Two families.
   - Radius: --r-lg (16px) on the tiles and the social banner; --r-pill on the
     button; 50% only on the swatches.
   - The one bold thing: the mascot tile, two rows tall, the cat at full size
     in the middle column.
   Exemplar borrowed: AirOps Brand Kit (mobbin 7642f33b): each asset on its
   own ground, with a line naming what is inside.
   The grid is one column, then two from 600px of page (the mascot down the
   left, the colours across the bottom), then three from 1040px (the mascot
   in the middle), where the wordmark at --fs-h1 still clears its tile.
   Motion is always on (superbot motion rule): no reduced-motion branch, and
   nothing here animates; hover lives on the links and the button only. */

.press {
  max-width: var(--container); margin: 0 auto;
  padding: var(--sp-10) var(--gutter-r) var(--sp-section) var(--gutter-l);
  container-type: inline-size;
}
.press .crumb { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-xs); margin-bottom: var(--sp-4); }
.press .crumb a { display: inline-flex; align-items: center; min-height: var(--target-sm); color: var(--muted); text-decoration: none; }
.press .crumb a:hover { color: var(--fg); }
.press .crumb .gg { color: var(--accent); }

/* -- the header row: title and lede, the whole kit on the right -- */
.press-head { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.press h1 { font-size: var(--fs-h1); line-height: var(--lh-h2); }
.press .lede { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-lg); }
.press-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.press-size { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-xs); white-space: nowrap; }
@container (min-width: 600px) {
  .press-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* -- the grid: one tile per kit section -- */
.press-grid { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@container (min-width: 600px) {
  .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-t-mascot { grid-column: 1; grid-row: 1 / span 2; }
  .press-t-colours { grid-column: 1 / -1; }
}
@container (min-width: 1040px) {
  .press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .press-t-mascot { grid-column: 2; }
}
.press-tile {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
/* each asset on its own ground: the page canvas, under a hairline */
.press-ground {
  flex: 1 1 auto; display: grid; place-items: center;
  padding: var(--sp-10) var(--sp-6); background: var(--bg); border-bottom: 1px solid var(--line);
}
.press-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6) var(--sp-5);
}
.press-meta h2 { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 500; letter-spacing: normal; }
.press-meta p { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.press-dl {
  display: inline-flex; align-items: center; min-height: var(--target-sm);
  color: var(--accent); font-size: var(--fs-sm); line-height: var(--lh-sm);
  text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--sp-1);
}
.press-dl:hover { text-decoration-thickness: var(--focus-w); }

/* -- the previews -- */
.press-cat { width: 100%; height: auto; }
.press-ladder { display: flex; align-items: flex-end; gap: var(--sp-6); }
.press-word { color: var(--fg); font-size: var(--fs-h1); line-height: var(--lh-h2); font-weight: 700; letter-spacing: var(--tracking-tight); white-space: nowrap; }
/* the social crops as they ship: the lockup on the brand canvas, a dark
   island in either theme */
.press-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-8); background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 700; letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.press-swatches { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6) var(--sp-8); }
.press-sw { display: grid; justify-items: center; gap: var(--sp-1); }
.press-dot { width: var(--sp-12); height: var(--sp-12); margin-bottom: var(--sp-2); border: 1px solid var(--line-strong); border-radius: 50%; }
.press-sw-name { color: var(--fg); font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* the value as plain mono text: site.css's `li code` chip (a fill, a hairline and a third radius) stays off it */
.press-sw code { padding: 0; background: none; border: 0; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-xs); }
/* each dot's fill is the hex it prints, set inline by press.ts from site.css: never the live token, which a
   signed-in visitor's synced accent repaints */