/* ============================================================
   KNIGHTMARE INTERACTIVE — Press Kit
   press.css

   Built entirely on the tokens in style.css. No new colours,
   fonts or spacing values are introduced here.
   ============================================================ */

.press section,
.press header { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* Denser than the marketing pages: press wants information,
   not atmosphere. */
.press .section--sm { padding: var(--spacing-lg) 0; }

.press-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: calc(var(--spacing-xs) * -1);
  margin-bottom: var(--spacing-md);
}

.press-note a { color: var(--ember-light); }

/* ── Hero ───────────────────────────────────────────────────── */
.press-hero {
  padding: calc(var(--nav-height) + var(--spacing-md)) 0 var(--spacing-md);
  background:
    radial-gradient(ellipse 70% 80% at 20% 0%, rgba(140, 10, 0, 0.16) 0%, transparent 65%),
    var(--bg);
}

.press-hero__title { margin: var(--spacing-xs) 0 var(--spacing-sm); }

.press-hero__title img {
  width: min(440px, 76vw);
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.8));
}

.press-hero__descriptor {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--bone);
  margin-bottom: var(--spacing-md);
  max-width: none;
}

.press-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-lg);
  margin-bottom: 0;
}

.press-hero__meta dt,
.press-facts__list dt {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.press-hero__meta dd {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bone);
}

.press-hero__cta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* ── Quotable summary ───────────────────────────────────────── */
.press-quote {
  position: relative;
  padding: var(--spacing-md);
  padding-right: 6.5rem;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border), inset 3px 0 0 var(--crimson);
}

.press-quote p {
  font-family: var(--font-lore);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--bone);
  max-width: 70ch;
}

.press-copy {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: color var(--transition), box-shadow var(--transition);
}

.press-copy:hover { color: var(--ember-light); box-shadow: inset 0 0 0 1px var(--ember); }
.press-copy.is-copied { color: var(--ember-light); box-shadow: inset 0 0 0 1px var(--ember); }

/* ── Fact sheet ─────────────────────────────────────────────── */
.press-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  box-shadow: inset 0 0 0 1px var(--border);
}

.press-facts__list > div { background: var(--bg-card); padding: var(--spacing-sm) var(--spacing-md); }

.press-facts__list dd { font-size: 0.9rem; color: var(--text-secondary); }
.press-facts__list dd a { color: var(--ember-light); }

/* ── Screenshots ────────────────────────────────────────────── */
.press-shots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-sm);
}

/* Full frame, never cropped — press needs to see the shot as shipped. */
.press-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--bg-card);
  cursor: zoom-in;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
}

.press-shot img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.88;
  transition: opacity var(--transition);
}

.press-shot:hover,
.press-shot:focus-visible { box-shadow: inset 0 0 0 1px var(--border-ember); transform: translateY(-2px); }
.press-shot:hover img { opacity: 1; }

.press-empty {
  padding: var(--spacing-md);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: none;
}

/* ── Brand assets ───────────────────────────────────────────── */
.press-brand__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-sm);
}

/* Column layout so captions line up across a row of tiles whose
   artwork is different shapes. */
.press-asset {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
}

.press-asset__frame {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--spacing-md);
  min-height: 170px;
  background:
    linear-gradient(135deg, rgba(209, 105, 12, 0.05), transparent 60%),
    #0a0807;
}

.press-asset__frame img { max-height: 130px; width: auto; max-width: 100%; }
.press-asset__frame--wide img { max-height: 70px; }

.press-asset figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0.75rem var(--spacing-sm);
  box-shadow: inset 0 1px 0 var(--border);
}

.press-asset__name { font-size: 0.8rem; color: var(--text-secondary); }

.press-asset__dl {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember-light);
  white-space: nowrap;
  transition: color var(--transition);
}

.press-asset__dl:hover { color: var(--bone-light); }

/* ── Download buttons ───────────────────────────────────────── */

.press-dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing-md);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.press-dl:hover { box-shadow: inset 0 0 0 1px var(--border-ember); transform: translateY(-2px); }

.press-dl__title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--parchment);
}

.press-dl__meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Single prominent archive download. */
.press-dl--primary {
  max-width: 420px;
  gap: 6px;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: inset 0 0 0 1px var(--border-ember);
}

.press-dl--primary .press-dl__title { font-size: 0.95rem; }

.press-contents {
  margin-top: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--spacing-md);
}

.press-contents li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.press-contents li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--ember);
  transform: rotate(45deg);
  opacity: 0.8;
}

/* Awaiting a real URL: visibly inert rather than a dead link.
   Applies to the hero button as well, which shares the same config. */
.btn.is-pending {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* Awaiting a real URL: visibly inert rather than a dead link. */
.press-dl.is-pending {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.press-dl.is-pending:hover { box-shadow: inset 0 0 0 1px var(--border); transform: none; }
.press-dl.is-pending .press-dl__meta { color: var(--ember); }

/* ── Studio ─────────────────────────────────────────────────── */
.press-studio__slogan {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-top: var(--spacing-md);
  max-width: none;
}

/* ── Contact and links ──────────────────────────────────────── */
.press-contact__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.press-contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ember-light);
  margin-top: var(--spacing-sm);
  transition: color var(--transition);
}

.press-contact__email:hover { color: var(--bone-light); }

.press-links { display: flex; flex-direction: column; gap: 0.6rem; }

.press-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  width: fit-content;
  transition: color var(--transition);
}

.press-links a:hover { color: var(--ember-light); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .press-contact__grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
}

@media (max-width: 600px) {
  .press-hero__cta { flex-direction: column; align-items: stretch; }
  .press-hero__cta .btn { width: 100%; }
  .press-hero__meta { gap: var(--spacing-sm) var(--spacing-md); }

  .press-quote { padding-right: var(--spacing-md); padding-top: 3.5rem; }
  .press-copy { top: var(--spacing-sm); right: var(--spacing-sm); }

  .press-shots__grid { grid-template-columns: 1fr; }
  .press-facts__list { grid-template-columns: 1fr; }
}


/* ── Quick links beneath the kit download ───────────────────── */
.press-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  box-shadow: inset 0 1px 0 var(--border);
}

.press-quicklinks a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ember-light);
  transition: color var(--transition);
}

.press-quicklinks a:hover { color: var(--bone-light); }

/* ── Press talking points ───────────────────────────────────── */
.press-points {
  margin: var(--spacing-md) 0;
  display: grid;
  gap: 0.45rem;
}

.press-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.press-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  background: var(--crimson-bright);
  transform: rotate(45deg);
}

.press-points strong { color: var(--bone); font-weight: 400; }

/* ── Lightbox ───────────────────────────────────────────────
   Defined here as well as in profanum.css: /press loads only
   style.css and press.css, so without this the overlay renders
   inline at the bottom of the page instead of covering it. */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  background: rgba(4, 3, 3, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pf-lightbox.open { display: flex; animation: fadeIn 0.25s ease forwards; opacity: 0; }

.pf-lightbox img {
  max-width: min(1400px, 96vw);
  max-height: 88vh;
  width: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--border-ember);
}

.pf-lightbox__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 46px;
  height: 46px;
  background: none;
  border: none;
  color: var(--bone);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: all var(--transition);
}

.pf-lightbox__close:hover { color: var(--ember-light); box-shadow: inset 0 0 0 1px var(--ember); }