/* the press page. It stands on ../style.css (font, inks, bar, buttons, letter, facts, trailer, contact)
   and adds only what a kit needs: the opening lines, section heads, picture tiles and copy rows.
   Order follows what a writer reaches for: pictures and video first, then words, then facts. */

.press .first { padding-top: calc(var(--u) * 6); }
.kicker { margin: 0; text-align: center; color: var(--gold); }
.press .logo { width: 480px; height: 180px; margin: -14px auto -14px; }
@media (max-width: 760px) { .press .logo { width: 320px; height: 120px; margin: -8px auto -8px; } }
.press .pitch { margin-bottom: calc(var(--u) * 3); }
.when { margin: 0 0 calc(var(--u) * 8); padding: 0 16px; text-align: center; color: var(--star0); }
.when i { display: inline-block; width: var(--u); height: var(--u); margin: 0 calc(var(--u) * 4) calc(var(--u) * 2); background: var(--teal1); }
.press .stores { margin-top: 0; }

.jump {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 calc(var(--u) * 8);
  margin: calc(var(--u) * 10) 0 0; padding: calc(var(--u) * 3) 16px;
  background: var(--void0);
  border-top: var(--u) solid var(--void2); border-bottom: var(--u) solid var(--void2);
}
.jump a { color: var(--star0); padding: calc(var(--u) * 1) 0; }
.jump a:hover, .jump a:focus-visible { color: var(--gold); }

.press .letter { --col: 960px; margin-top: calc(var(--u) * 6); }
@media (max-width: 1100px) { .press .letter { --col: 100%; box-sizing: border-box; } }
.press .letter > section { margin-top: calc(var(--u) * 24); scroll-margin-top: calc(var(--u) * 22); }
.press .letter > section:first-child { margin-top: 0; }
.press .facts { margin-top: 0; }
.press .facts dt { flex-basis: calc(var(--u) * 80); }
@media (max-width: 760px) { .press .facts dt { flex-basis: calc(var(--u) * 60); } }
.press .trailer { margin: 0; }

.head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 8); }
.head .btn { flex: none; }
.under {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 2) calc(var(--u) * 8);
  margin: calc(var(--u) * 4) 0 0; color: var(--grey);
}

/* pictures: click to look, "download" to take the original file */
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--u) * 8) calc(var(--u) * 4); }
.tiles figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.tiles .pic { display: block; border: var(--u) solid var(--void3); background: var(--void1); }
.tiles .pic:hover, .tiles .pic:focus-visible { border-color: var(--gold); }
.tiles img { display: block; width: 100%; height: auto; image-rendering: auto; }
.tiles figcaption { margin-top: calc(var(--u) * 2); display: flex; flex-direction: column; flex: 1; }
.tiles .what { color: var(--star1); flex: 1; }
.tiles .get { color: var(--grey); display: flex; justify-content: space-between; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 1); }
.tiles.one { grid-template-columns: 1fr; margin-bottom: calc(var(--u) * 8); }
.tiles.art { align-items: end; }
.tiles.one img, .tiles.art img, .tiles.logos img { image-rendering: pixelated; }
.tiles.logos { grid-template-columns: repeat(4, 1fr); align-items: end; }
.tiles.logos .pic { padding: calc(var(--u) * 4); }
.tiles.logos img { aspect-ratio: 1; object-fit: contain; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } .tiles.logos { grid-template-columns: 1fr 1fr; } }

/* words: each block has its name and its own copy button */
h3 {
  margin: 0; color: var(--gold);
  font: calc(var(--u) * 8) / calc(var(--u) * 12) 'Deep Field', monospace; font-weight: normal;
}
.copyhead {
  display: flex; justify-content: space-between; align-items: center;
  margin: calc(var(--u) * 10) 0 calc(var(--u) * 4);
}
h2 + .copyhead { margin-top: 0; }
button.btn { border: 0; cursor: pointer; font-family: inherit; }
.copy { padding: calc(var(--u) * 3) calc(var(--u) * 6); }
.copy.done, .copy.done:hover { color: var(--mint); }
.quote {
  margin: 0; padding: calc(var(--u) * 6) calc(var(--u) * 8);
  border-left: var(--u) solid var(--void3); background: var(--void1);
  color: var(--star1);
}
.quote.long { color: var(--star0); }
.quote.long b { font-weight: normal; color: var(--star1); }
.quote p:last-child { margin-bottom: 0; }