/* ============================================================
   PRESS KIT, print first.
   Same tokens as the site, laid out for paper. Assets are
   referenced relatively so this file renders identically from
   file:// (for the PDF) and from https:// (for the browser).
   ============================================================ */

@page{ size:A4; margin:16mm 15mm; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink-2);
  font-family:var(--mono);font-weight:var(--w-reg);
  font-size:9pt;line-height:1.5;letter-spacing:0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
h1,h2,h3{margin:0;font-weight:var(--w-thin);color:var(--ink)}

.sheet{max-width:180mm;margin:0 auto;padding:10mm 0}
.page-break{break-after:page;page-break-after:always}

/* --- the cover ----------------------------------------------
   The key art is finished artwork and carries its own title, so
   it is shown WHOLE (contain, not cover) and nothing is set over
   it. Cropping it to fill the sheet cut its own type off, and an
   overlaid title said the same thing twice. */
.cover{
  height:247mm;display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);
  break-after:page;page-break-after:always;
}
/* natural aspect, full measure. No letterboxing: the art sets its own
   height and the sheet gives it the room. */
.cover img{width:100%;height:auto;display:block}
.cover__type{
  margin-top:6mm;
  display:flex;justify-content:space-between;align-items:baseline;gap:8mm;
}
.cover .kicker,.cover .sub{font-size:8pt;color:var(--ink-3);margin:0}

/* --- headings and blocks ------------------------------------ */
.mark{
  font-size:7.5pt;letter-spacing:.12em;color:var(--ink-3);
  margin:0 0 2mm;text-transform:none;
}
.mark .slash{color:var(--svc-structure);margin-right:1.5mm}
.block{margin-bottom:8mm;break-inside:avoid;page-break-inside:avoid}
.lead{font-size:11pt;line-height:1.45;color:var(--ink);max-width:150mm}
.prose p{margin:0 0 3mm;max-width:150mm}

/* --- fact table --------------------------------------------- */
table{border-collapse:collapse;width:100%;font-size:8.5pt}
th,td{
  text-align:left;vertical-align:top;padding:1.6mm 0;
  border-bottom:.2mm solid var(--rule);
}
th{width:52mm;font-weight:var(--w-reg);color:var(--ink-3)}
td{color:var(--ink)}

/* --- two columns for the facts spread ------------------------ */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10mm}

/* --- the contact sheet of stills ----------------------------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
.grid figure{margin:0;break-inside:avoid;page-break-inside:avoid}
.grid img{width:100%;height:auto;display:block}
.grid figcaption{
  margin-top:1.5mm;font-size:7pt;letter-spacing:.1em;color:var(--ink-3);
}

/* --- running foot ------------------------------------------- */
.foot{
  margin-top:10mm;padding-top:3mm;border-top:.2mm solid var(--rule);
  font-size:7.5pt;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:6mm;
}

/* on screen this is a document, not a site: give it a ground */
@media screen{
  body{background:var(--surface);padding:8mm 0}
  .sheet,.cover{background:var(--paper);box-shadow:0 1px 24px rgba(11,13,16,.12)}
  .sheet{padding:14mm 12mm;margin-bottom:8mm;max-width:210mm}
  .cover{max-width:210mm;margin:0 auto 8mm;padding:14mm 12mm}
}