/* Press kits. Practical first: facts, copy and downloads, in the game's colours. Loaded after crooked.css or ominous.css. */

.press { font: 400 17px/1.6 var(--body); }
.press h1, .press h2, .press h3 { font-family: var(--head, var(--fell)); font-weight: 400; }
.om.press { --head: var(--fell); }

.pk { max-width: 1320px; margin: 0 auto; padding: 130px var(--gutter) clamp(80px, 10vw, 130px); }
.pk__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 60px; align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line, rgba(255, 255, 255, .14)); }
.pk__top h1 { margin-top: 18px; }
.pk__top h1 img { width: min(440px, 80vw); }
.pk__lede { margin-top: 22px; max-width: 36em; font-size: clamp(18px, 1.5vw, 21px); color: var(--fg); }
.pk__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pk__actions .btn small { font: 500 12px/1 var(--body); font-variation-settings: "MONO" 1; letter-spacing: .08em; opacity: .7; }
@media (max-width: 860px) { .pk__top { grid-template-columns: 1fr; } }

.pk__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 960px) { .pk__grid { grid-template-columns: 1fr; } }

.pk__facts { position: sticky; top: 24px; align-self: start; padding: 26px 24px; border-radius: 14px; background: var(--card, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .12)); }
.pk__facts h2 { font-size: 30px; line-height: 1; margin-bottom: 16px; }
.pk__facts dl div { padding: 11px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, .12)); }
.pk__facts dt { font: 500 11.5px/1.3 var(--body); font-variation-settings: "MONO" 1; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pk__facts dd { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
.pk__facts a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 960px) { .pk__facts { position: static; } }

.pk__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.pk__nav a { padding: 7px 13px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .18)); text-decoration: none; font-size: 14px; }
.pk__nav a:hover { background: var(--accent); color: #140b06; box-shadow: none; }

.pk section { scroll-margin-top: 24px; }
.pk section + section { margin-top: clamp(56px, 7vw, 90px); }
.pk section > h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; margin-bottom: 20px; }
.pk section > p { color: var(--muted); max-width: 40em; }
.pk section > p + p { margin-top: 14px; }
.pk h3 { font-size: 24px; margin: 30px 0 10px; }
.pk__hint { font-size: 15px; }

.pk__copy { position: relative; padding: 22px 24px; border-radius: 12px; background: var(--card, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .12)); }
.pk__copy p { color: var(--fg); max-width: 44em; }
.pk__copy button { margin-top: 14px; padding: 8px 14px; border: 0; border-radius: 99px; background: var(--accent); color: #140b06; font: 600 14px/1 var(--display); cursor: pointer; }

.pk__list { display: grid; gap: 10px; max-width: 44em; }
.pk__list li { position: relative; padding-left: 26px; color: var(--muted); }
.pk__list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; background: var(--accent); rotate: 45deg; }
.pk__list li b { color: var(--fg); font-weight: 600; }

.pk__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pk__shots figure { margin: 0; }
.pk__shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; transition: filter .2s; }
.pk__shots a:hover img { filter: brightness(1.12); }
.pk__shots figcaption, .asset__meta { margin-top: 6px; font: 500 12px/1.3 var(--body); font-variation-settings: "MONO" 1; letter-spacing: .06em; color: var(--muted); }
.pk__shots figcaption a, .asset__meta a { color: var(--accent); }
@media (max-width: 700px) { .pk__shots { grid-template-columns: 1fr 1fr; } }

.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.asset { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--card, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .12)); text-decoration: none; transition: translate .25s var(--bounce); }
.asset:hover { translate: 0 -4px; }
.asset__pic { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 18px; background: #000; }
.asset__pic img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.asset__pic--cover { padding: 0; }
.asset__pic--cover img { width: 100%; height: 100%; object-fit: cover; }
.asset__pic--light { background: #efe7d8; }
.asset__pic--check { background: repeating-conic-gradient(#2a2a2a 0 25%, #1c1c1c 0 50%) 0 0 / 22px 22px; }
.asset__body { padding: 14px 16px 16px; }
.asset__body b { display: block; font-size: 16px; font-weight: 600; color: var(--fg); }
.asset__meta { margin-top: 4px; }

.pk__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pk__contact a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media print {
  body::after, .bar, .foot, .pk__actions, .pk__nav, .assets, .pk__shots, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .pk { padding-top: 0; }
  .pk__facts { position: static; box-shadow: none; }
  .pk section > p, .pk__list li { color: #000; }
}

/* theme details */
.ct.press { --line: rgba(233, 180, 90, .22); --card: rgba(233, 180, 90, .05); }
.ct .pk__nav a:hover { color: var(--ink); }
.om.press { --line: rgba(233, 226, 214, .14); }
.om .pk__list li::before { rotate: 0deg; width: 12px; height: 2px; top: .8em; }
.om .pk__copy button, .om .pk__nav a:hover { color: #000; background: var(--fg); }