/* ============================================================================
   /press on the sub page system (9 Oct 2026). No instrument: a journalist's kit. The founder,
   the boilerplate in four lengths (each with its Copy button, run by site.js from
   data-copy-target), the fact sheet as a ledger with the press address held in a callout,
   the vocabulary as Say / Avoid, the brand assets as link rows, the quote.

   Loaded in PageStyles, right after sub.css. Every rule under .sp, tokens only (no hex, canon
   guard rule 4). Mobile first: rules outside media queries are the 390px phone.
   ============================================================================ */

/* the role under the founder's name */
.sp .press-role { margin-top: 12px; font-size: 18px; line-height: 1.4; color: var(--lp-ink-2); }

/* ---- 02 boilerplate: one row per length, label and Copy on top, the text under it ---- */
.sp .press-bp { border-top: 1px solid var(--lp-ink); }
.sp .press-bp > li { padding: 12px 0 22px; border-bottom: 1px solid var(--lp-rule); }
.sp .press-bp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp .press-bp-h .rec { color: var(--lp-muted); }
.sp .press-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 76px; padding: 0 16px; border: 1px solid var(--lp-rule-2); border-radius: 2px; font: 600 14px/1 var(--tos-font-body); color: var(--lp-ink); }
.sp .press-copy:hover { border-color: var(--lp-ink); }
/* Copy needs JavaScript (site.js): without it the button would do nothing, so it is not drawn; the text stays selectable */
.sp:not(.js) .press-copy { display: none; }
.sp .press-bp-t { margin-top: 6px; font-size: 17px; line-height: 1.6; color: var(--lp-ink); max-width: 36em; }

/* ---- 03 fact sheet: the record keys may be long words in German ---- */
.sp .press-facts .lg-k { overflow-wrap: anywhere; }

/* the press address, held: sub.css sets every callout paragraph to 16px with a selector that outranks
   .big (.callout p:not(.rec)), so the address is restated here one step heavier */
.sp .callout p.big { font-size: clamp(20px, 5.6vw, 28px); }

/* ---- 04 vocabulary: what to say (orange square) beside what to avoid (struck through). Two columns at
   every width, because the sentence above names "the right-hand column" (Arabic names the Avoid column) ---- */
.sp .press-vocab { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 14px; }
/* on a phone the Say words are set in bold and are the longer ones (German "Entscheidungshistorie"), so that
   column gets a little more of the width; a word wider than its column breaks rather than overflows */
.sp .press-v-h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-ink); color: var(--lp-ink); font-weight: 600; }
.sp .press-v-h::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }
.sp .press-avoid .press-v-h::before { background: none; border: 2px solid var(--lp-muted); width: 8px; height: 8px; box-sizing: border-box; }
.sp .press-vocab li { padding: 11px 0 12px; border-bottom: 1px solid var(--lp-rule); font-size: 15px; overflow-wrap: anywhere; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--lp-ink); }
.sp .press-avoid li { font-weight: 400; color: var(--lp-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
html[lang^="de"] .sp .press-vocab li { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 399px) { .sp .press-vocab li { font-size: 14px; } }
@media (min-width: 600px) {
  .sp .press-vocab { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sp .press-vocab li { font-size: 17px; }
}

/* ---- 05 brand assets: the lockup as provided, then the files as link rows ---- */
.sp .press-lockup img { display: block; width: 100%; max-width: 600px; height: auto; }
/* rows with no record key: the title takes the whole row at every width */
@media (min-width: 760px) {
  .sp .press-files a { grid-template-columns: minmax(0, 1fr); }
  .sp .press-files .lk-t { grid-column: 1; }
}
.sp .press-dl .lk-t::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }

/* ---- 06 the quote: set large, its attribution a record ---- */
.sp .press-quote blockquote p { font: 600 clamp(24px, 6.4vw, 36px)/1.25 var(--tos-font-body); letter-spacing: -.025em; color: var(--lp-ink); text-wrap: pretty; }
.sp .press-quote figcaption { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--lp-muted); }
.sp .press-quote figcaption::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }

@media (min-width: 1180px) {
  .sp .press-bp-t { font-size: 18px; }
  .sp .press-vocab li { font-size: 18px; }
}