/* ==========================================================================
   presskit() layout — shells-game.com/press/

   Reproduces the canonical presskit() output (dopresskit.com, Rami Ismail),
   the format press expect: a left rail of title + section nav, a 3/4 content
   column, factsheet beside the description, <hr> between sections, and a
   two-up image grid.

   presskit() itself is a PHP app and can't run on Cloudflare Pages, so this is
   its rendered structure written as static HTML. The original pulls UIkit
   1.2.0 and jQuery/Masonry off a CDN; the ~40 rules that actually matter are
   reimplemented here instead, so the page has no external dependencies.

   Loaded after /styles.css, which it deliberately overrides — this page keeps
   presskit()'s own typography (Trebuchet body, Georgia headings), not the
   site's.
   ========================================================================== */

body.presskit-page {
  /* Top only — a bottom padding here leaves a white strip under the footer. */
  padding: 15px 0 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.6em;
  color: #444;
  background: #fff;
}

.presskit-page .pk-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 15px;
}

.presskit-page .pk-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 25px;
}

/* --- Left rail ----------------------------------------------------------- */

.presskit-page #navigation {
  padding-top: 5px;
}

/* Page title. Already an <h1> — this is the document's top-level heading, and
   the only one on the page. Sized to 2.5em (~36px), matching presskit()'s own
   title size; A Short Hike renders that in sans-serif, but Georgia here keeps
   it consistent with the serif section headings in the content column.
   Title and site link sit tight together as in presskit()'s output — the h1
   carries no bottom margin and the link hangs directly off it. */
.presskit-page #navigation h1 {
  margin: 0;
  padding: 0 15px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.15;
  color: #444;
}

.presskit-page #navigation .nav-header {
  display: block;
  padding: 2px 15px 5px;
  font-weight: bold;
}

.presskit-page #navigation ul {
  margin: 0;
  padding: 15px 0;
  list-style: none;
}

.presskit-page #navigation li a {
  display: block;
  padding: 4px 15px;
  color: #07d;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.presskit-page #navigation li a:hover {
  background: #f5f5f5;
  border-left-color: #07d;
  text-decoration: none;
}

/* --- Content column ------------------------------------------------------ */

/* Header banner. presskit() renders whatever key art you give it at its
   natural ratio — A Short Hike's is 6144x1536, i.e. 4:1, landing around 210px
   tall at desktop width. Shells' capsule art is 920x430 (2.14:1), so it's
   cropped to the same 4:1 band rather than rendering nearly 330px tall.
   The art's own background is a flat #ffeacc, so the crop takes only
   background and the matching backdrop fills any gap seamlessly. */
.presskit-page #content img.header {
  width: 100%;
  aspect-ratio: 4 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: #ffeacc;
  margin-bottom: 20px;
}

.presskit-page #content h2 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.7em;
  font-weight: 400;
  line-height: 1.3;
  color: #444;
}

.presskit-page #content p {
  margin: 0 0 15px;
}

.presskit-page #content ul {
  margin: 0 0 15px;
  padding-left: 25px;
  list-style-type: square;
}

.presskit-page #content hr {
  margin: 25px 0;
  border: 0;
  border-top: 1px solid #ddd;
}

/* Scoped to .pk-container, not the whole body — the site footer lives outside
   it and must keep its own white-on-blue links. */
.presskit-page .pk-container a {
  color: #07d;
  text-decoration: none;
}

.presskit-page .pk-container a:hover {
  text-decoration: underline;
}

/* Factsheet 2/6 beside description 4/6, as presskit() splits it */
.presskit-page .pk-split {
  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: 25px;
}

.presskit-page .pk-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

/* Download callout — presskit()'s uk-alert box */
.presskit-page .pk-alert {
  margin-bottom: 15px;
  padding: 10px;
  background: #ebf7fd;
  color: #2d7091;
  border: 1px solid rgba(45, 112, 145, 0.3);
  border-radius: 4px;
}

a:hover .pk-alert {
  background: #dff965;
}

/* Image grid. presskit() ships a two-up masonry, which suits the landscape
   screenshots most PC games have. Shells' are portrait phone captures, so
   two-up renders them enormous — three-up keeps the section scannable. */
.presskit-page .images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px;
  margin-bottom: 10px;
}

/* Logo and icon are landscape/square — the canonical two-up is right here. */
.presskit-page .images--pair {
  grid-template-columns: 2fr 1fr;
  align-items: center;
}

.presskit-page .images img {
  width: 100%;
  height: auto;
  display: block;
}

.presskit-page .pk-credit {
  font-size: 0.95em;
  color: #999;
}

@media (max-width: 767px) {
  .presskit-page .pk-grid,
  .presskit-page .pk-split,
  .presskit-page .pk-half {
    grid-template-columns: 1fr;
  }

  .presskit-page #navigation ul {
    display: none; /* anchor nav is noise once the columns collapse */
  }

  .presskit-page #content h2 {
    margin-top: 25px;
  }
}