/* /press: the Documents block of styles.css (.doc-head, .doc, .table) carries the page; this file
   adds the three things only it has: the descriptions to paste, the founder beside his photo, and
   the downloads with their previews. */
.doc-head .lede + .lede { margin-top: 20px; }
.doc-head .lede + .byline { margin-top: 24px; }
.doc-head .byline { max-width: 40em; }
.doc-head .byline + .byline { margin-top: 8px; }

/* The fact block's row headings are short, so the facts get the width. */
@media (min-width: 561px) { .doc .facts tbody th { width: 30%; } }

/* A description to paste: a hairline on the left, the text at the body size. */
.paste { max-width: 40em; margin-inline: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--black); }
.doc .paste + .paste { margin-top: 16px; }

/* The founder: the words, then his photo beside them; on a phone the photo follows. */
.founder { display: grid; grid-template-columns: minmax(0, 40em) 220px; gap: 48px; align-items: start; }
.founder p + p { margin-top: 20px; }

/* A download: its preview, then what it is and its links. */
.asset { margin: 0; }
.asset img { display: block; width: 100%; height: auto; }
.asset figcaption { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.assets { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; }
.swatch { display: grid; place-items: center; aspect-ratio: 1; padding: 24px; border: 1px solid var(--rule); background: #F2F3F4; }
.swatch img { width: 70%; }
.swatch--dark { border-color: var(--black); background: var(--black); }
/* A screenshot is mostly white, so a hairline keeps its edge on the white page. */
.asset .shot { border: 1px solid var(--rule); border-radius: 12px; }

@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; gap: 28px; }
  .founder .asset { width: 220px; }
  .assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}