/*
 * Press page (/press/, /press/en/, ADR 0008). Layered on /notes/notes.css,
 * which gives the paper, the ink, dark mode and the summary box. This file
 * adds the fact sheet's layout and its print stylesheet: a reporter should be
 * able to print it and write on it.
 */

.press { max-width: 46rem; }

.press h2 {
  font-family: 'Space Grotesk', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 2.4em 0 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--hair);
}
.press .summary h2 { border-top: 0; padding-top: 0; margin: 0 0 8px; font-size: 0.68rem; }
.press p, .press ul, .press ol { margin: 0 0 1.1em; text-wrap: pretty; }
.press ul, .press ol { padding-left: 1.3em; }
.press li { margin-bottom: 0.45em; }
.press li::marker { color: var(--accent); }
.press .note { font-size: 0.88rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 28px; }
.actions a { font-size: 0.9rem; padding: 10px 0; }
.print {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}
.print:hover { border-color: var(--accent); }

.pillars { list-style: decimal; }
.pillars strong { display: block; }

.press figure.wide img { width: 100%; border-radius: 6px; border: 1px solid var(--hair); }

/* Products: name and status on one line, the plain sentence under it. */
.products { list-style: none; padding: 0 !important; }
.products > li { border-top: 1px solid var(--hair); padding: 14px 0 4px; margin: 0; }
.products > li:last-child { border-bottom: 1px solid var(--hair); }
.products .name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 1.05rem;
}
.products p { margin: 0 0 10px; }
.status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--muted);
  white-space: nowrap;
}
.status.live { border-color: #3f7d4e; color: #2f6b3d; }
.status.beta { border-color: #9a6a12; color: #85590b; }
.status.proto { border-style: dashed; }
:root[data-theme="dark"] .status.live { border-color: #7fbf8c; color: #9fd3a9; }
:root[data-theme="dark"] .status.beta { border-color: #e0b35a; color: #ecc87e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status.live { border-color: #7fbf8c; color: #9fd3a9; }
  :root:not([data-theme="light"]) .status.beta { border-color: #e0b35a; color: #ecc87e; }
}

/* Numbers: big figure, short label. */
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.numbers > div { background: var(--paper); border: 1px solid var(--hair); border-radius: 6px; padding: 14px 16px; }
.numbers dt { font-family: 'Space Grotesk', 'Hiragino Sans', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 4.2vw, 1.5rem); line-height: 1.25; }
.numbers dd { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }

.person { font-size: 1.05rem; line-height: 1.6; }

/* Photos and screens: a grid of thumbnails, each a link to the full file. */
.photos { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 16px; }
.photos li { margin: 0; }
.photos a { display: block; line-height: 0; }
.photos img {
  width: 100%;
  height: 9rem;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: var(--paper);
}
.photos p { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.5; }
.photos p span { font-size: 0.75rem; color: var(--muted); }

/* Company facts: label and value. */
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 11em 1fr; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--hair); }
.facts > div:last-child { border-bottom: 1px solid var(--hair); }
.facts dt { font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .facts > div { grid-template-columns: 1fr; gap: 0; }
}

.contact .mail { font-size: 1.25rem; font-weight: 600; }
.contact .mail a { padding: 8px 0; display: inline-block; }

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  .top, .actions, .skip { display: none; }
  .press { max-width: none; padding: 0; }
  .press h2 { font-size: 13pt; margin-top: 1.4em; break-after: avoid; }
  .press section { break-inside: auto; }
  body { font-size: 9.5pt; line-height: 1.6; }
  .press p, .press ul, .press ol { margin-bottom: 0.6em; }
  .products > li { padding: 8px 0 2px; }
  .products .name, .products .line { break-after: avoid; }
  .numbers > div, .facts > div, .photos li, .summary { break-inside: avoid; }
  .numbers { grid-template-columns: repeat(4, 1fr); }
  .facts > div { padding: 5px 0; }
  .press figure.wide { max-width: 45%; margin: 0.8em 0; }
  .photos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .photos img { height: 24mm; }
  .status { color: #000 !important; border-color: #000 !important; }
  /* On paper a link is only useful with its address written out. */
  .press a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; font-weight: 400; color: #444; overflow-wrap: anywhere; }
  .press a[href^="/"]::after { content: " (kensaur.us" attr(href) ")"; font-size: 0.8em; font-weight: 400; color: #444; overflow-wrap: anywhere; }
  .photos a::after, .facts a::after, .contact a::after { content: none !important; }
  .foot { border-top: 1px solid #bbb; }
}

/* The one-line description is the same line the exhibit card shows. */
.products .line { font-weight: 600; margin: 0 0 4px; }

/* The four featured exhibits also list what you can do with them. */
.products .can { margin: 0 0 12px; padding-left: 1.2em; font-size: 0.95rem; }
.products .can li { margin-bottom: 0.25em; }