/* ============================================================
   press.css — /press and /games/<slug>/press
   Paper-arcade, same tokens as site.css. Nothing new invented:
   1px --line borders, hard 4px ink shadows on hover, no radii,
   no gradients, yellow only where the interface already uses it.
   The last block turns the page into a printable fact sheet.
   ============================================================ */

/* ---------- boilerplate ---------- */
.press-boiler{display:grid;gap:14px;justify-items:start}
.press-boiler__text{font-size:1.06rem;line-height:1.62;max-width:62ch}
.press-boiler__long{max-width:66ch}
.press-print-hint{color:var(--muted);max-width:52ch;line-height:1.6}
/* The page's own address, on paper only — a printed kit with no URL is a dead end. */
.press-printed-from{display:none}

/* ---------- logos ---------- */
.press-logos{
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.press-logo{gap:12px}
.press-logo__shot{
  border:1px dashed var(--line-strong);
  background:var(--shade);
  display:grid;place-items:center;padding:18px;min-height:120px;
}
.press-logo__shot img{width:100%;max-height:96px;object-fit:contain}
.press-logo--dark .press-logo__shot{background:var(--ink);border-color:var(--ink)}
.press-logo .arrow-link{justify-self:start;margin-top:2px}
.press-logos--compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.press-logos--compact .press-logo__shot{min-height:88px;padding:12px}
.press-logos--compact .press-logo__shot img{max-height:64px}

/* ---------- brand colours ---------- */
.press-colours{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--paper-2)}
.press-colour{
  display:grid;align-items:center;gap:4px 16px;
  grid-template-columns:34px minmax(96px,1fr) 92px 132px minmax(0,1.4fr) auto;
  padding:12px 16px;border-top:1px solid var(--line);
}
.press-colour:first-child{border-top:0}
.press-colour__chip{width:34px;height:34px;border:1px solid var(--ink);display:block}
.press-colour__name{font-weight:600}
.press-colour__hex,.press-colour__rgb{
  font-family:var(--pixel);font-size:10px;letter-spacing:.04em;
  color:var(--ink-soft);white-space:nowrap;
}
.press-colour__rgb{color:var(--muted)}
.press-colour__use{font-size:13px;line-height:1.45;color:var(--muted)}
.press-colour__copy{margin-top:0;justify-self:end}
@media (max-width:860px){
  .press-colour{grid-template-columns:34px 1fr auto;row-gap:6px}
  .press-colour__rgb,.press-colour__use{grid-column:2/4}
  .press-colour__copy{grid-column:3;grid-row:1}
}

/* ---------- catalogue table ---------- */
.press-table td{vertical-align:top}
.press-table__dek{
  display:block;margin-top:4px;font-size:13px;color:var(--muted);
  line-height:1.45;max-width:44ch;
}

/* ---------- usage rules ---------- */
.press-rules{list-style:none;margin:0;padding:0;counter-reset:pressrule;display:grid}
.press-rules li{
  counter-increment:pressrule;
  border-top:1px solid var(--line);padding:16px 0 16px 52px;position:relative;
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:70ch;
}
.press-rules li:last-child{border-bottom:1px solid var(--line)}
.press-rules li::before{
  content:counter(pressrule,decimal-leading-zero);
  position:absolute;left:0;top:18px;
  font-family:var(--pixel);font-size:10px;color:var(--muted);
}

/* ---------- key art + screenshots ---------- */
.press-keyart{margin:0;border:1px solid var(--line);background:var(--paper-2)}
.press-keyart img{width:100%;display:block}
.press-keyart figcaption{padding:14px 16px;border-top:1px solid var(--line)}

.press-shots{
  display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.press-shot{margin:0;border:1px solid var(--line);background:var(--paper-2);display:grid}
.press-shot > a{
  display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);
  transition:transform .14s ease,box-shadow .14s ease;
}
.press-shot > a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.press-shot img{width:100%;height:100%;object-fit:cover}
.press-shot figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
}
.press-shot__dl{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:2px solid var(--yellow);padding-bottom:2px;
}
.press-shot__dl:hover{background:var(--yellow)}

/* ---------- links + markdown callout ---------- */
.press-links{max-width:520px}
.press-md{display:grid;justify-items:start;gap:2px}
.press-md .btn-row{flex-wrap:wrap}
.copy.is-failed{background:var(--red);border-color:var(--ink);color:#fff}

/* ============================================================
   Print — the reason this page exists in the first place.
   Chrome/Firefox/Safari all honour these; colour swatches keep
   their fill so the hex codes stay checkable on paper.
   ============================================================ */
@media print{
  :root{
    --paper:#fff;--paper-2:#fff;--paper-3:#fff;
    --ink:#000;--ink-soft:#1a1a1a;--muted:#4a4a4a;
    --line:#b9b9b9;--line-strong:#8a8a8a;--shade:#f2f2f2;
  }
  body.press{background:#fff;color:#000;font-size:11pt;line-height:1.45}

  /* Swatches are the point of the page: keep their fill on paper. */
  .press-colour__chip,.pill,.eyebrow::before,.tag::before{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* Page furniture and anything that needs a pointer to be worth ink. */
  .nav,.footer,.skip-link,.preview-bar,.lang,.theme-toggle,.icon-btn,
  .copy,.press-shot__dl,.press-print-hint,.page-head__actions,
  .page-head__meta .btn,.press-md,.press-keyart figcaption{display:none!important}

  /* The contact button is an address; print it as one. */
  .factpanel .btn{
    display:block;border:0;background:none;color:#000;text-align:left;
    padding:2pt 0;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none;
  }

  .section,.section--tight{padding-block:0 18pt}
  .page-head{padding-block:0 14pt;border-bottom:1.5pt solid #000}
  .wrap{max-width:none;padding-inline:0}
  .split,.split--wide-aside{grid-template-columns:1fr;gap:16pt}
  .sticky{position:static;gap:12pt}
  .stack{gap:18pt!important}

  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .display-l{font-size:26pt}
  .display-s{font-size:15pt}
  .lead{font-size:12pt}
  .sec-head{margin-bottom:10pt;gap:6pt}
  .sec-head__row{display:block}
  .dek,.hint,.micro{font-size:9pt}

  .factpanel,.panel,.callout,.notice,.table-wrap,.press-colours,
  .press-logo,.press-shot,.press-keyart{
    border-color:#9a9a9a;background:#fff;break-inside:avoid;page-break-inside:avoid;
  }
  .press-logos{grid-template-columns:repeat(3,1fr);gap:10pt}
  .press-logos--compact{grid-template-columns:repeat(4,1fr)}
  .press-shots{grid-template-columns:repeat(3,1fr);gap:8pt}
  .press-shot > a{box-shadow:none;transform:none}
  .press-rules li{padding-block:8pt;break-inside:avoid}
  .press-colour{padding:7pt 8pt;break-inside:avoid}

  /* A printed link is worthless without its address. */
  .press-table a[href]::after,
  .store-btn[href]::after{content:" (" attr(href) ")";font-size:8pt;color:#4a4a4a;word-break:break-all}
  .store-btn{border:0;padding:2pt 0;display:block}
  .store-btn .go{display:none}

  .press-printed-from{
    display:block;margin-top:8pt;
    font-family:var(--pixel);font-size:7.5pt;color:#4a4a4a;word-break:break-all;
  }

  a{text-decoration:none;color:#000}
  table.data{min-width:0;font-size:9.5pt}
  table.data th{border-bottom:1pt solid #000}
}

@page{margin:14mm}
/* logo previews show the logo on its intended ground, whatever the page theme */
.press-logo__shot{background:#f4f1ea;border-color:#c9c4b8}
.press-logo--dark .press-logo__shot{background:#141414;border-color:#141414}

/* ---------- embed & badges (features/embed) ---------- */
.embed-kit{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
.embed-kit__preview iframe{display:block;width:100%;max-width:360px;height:380px;border:0}
.embed-kit__pre{margin:8px 0 0;padding:12px 14px;border:1px solid var(--line);background:var(--paper-2);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.embed-kit__badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:10px}
.embed-badge__shot{display:grid;place-items:center;padding:14px;border:1px solid var(--line);background:#f4f1ea}
.embed-badge--dark .embed-badge__shot{background:#141414}
.embed-badge__shot img{width:220px;max-width:100%;height:auto}
@media (max-width:760px){.embed-kit{grid-template-columns:1fr}}