/*
 * Where this site departs from the live one, on purpose.
 *
 * foundation.css and custom.css are the theme's, and snippets.css is WordPress's;
 * all three are kept as they were found, so that they can be compared with their
 * sources. A rule that exists because somebody decided the live site was wrong
 * goes here, with who decided and when. Loaded last, so that it wins.
 */

/*
 * Award logos on the Cultist Simulator page, at their own size. (AK, 2026-09-29.)
 *
 * The theme pads each logo by 50px a side and counts the padding as part of the
 * logo's width, so a logo 132px wide is drawn 32px wide: legible for the two
 * BAFTA ones, which are wide, and for none of the others. With the padding
 * counted outside the width, each is drawn as it was made.
 */
.page-template-template-cultist .slider-awards img {
  box-sizing: content-box;
}

/*
 * A review's title stays on one line; the gold verdict wraps. (Lottie, 2026-09-30.)
 *
 * The theme sets the title and the verdict side by side and lets both shrink, so a
 * long title breaks into two lines and pushes the verdict about. She asked for the
 * title whole and the same gap after it as every other review has; the verdict
 * takes what is left and folds where it must.
 */
.reviews__author-stars h6 {
  flex: 0 0 auto;
}
.reviews__author-stars .review__item-star {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * The newsletter's "thank you" sits under the box, starting at its left edge,
 * and takes no room in the row. (Lottie, 2026-09-30.)
 *
 * The row centres "Stay Updated" on the form beside it. With the confirmation in
 * the form's flow the form grows a line and the heading slides down to the middle
 * of it. Out of the flow, the heading stays level with the box and the words hang
 * beneath, where they read as meant rather than as fallen.
 */
.form-subscribe .subscribe .gform_body {
  position: relative;
}
.form-subscribe .subscribe .wf-newsletter__status {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 12px;
  white-space: nowrap;
}

/*
 * On a phone, a game or book page's banner is as tall as what it holds.
 * (AK, 2026-10-21.)
 *
 * Below 1025px the theme fixes the banner at 900px and gives the picture a share
 * of that (60%, then 40%, then 35%), with the words printed beneath it. Most of
 * those pages have more words than fit, and the overflow is drawn over whatever
 * comes next: on Travelling At Night, 300px of quote across the screenshot strip,
 * reported from a Pixel. Eight of the ten pages on these templates overrun at
 * phone widths. The About and default templates already let the banner fit its
 * content and give the picture a fixed height; this does the same for the rest,
 * at the heights the percentages gave, so the picture is unchanged. (Press Kit
 * sets its own height on #hero, which wins.)
 *
 * The caption is nudged 50px down by `top`, which takes up no room, so on a
 * fitted banner it would eat the margin and the buttons would touch the next
 * section; the padding gives that room back. Not on default pages, whose own
 * spacing already allows for it.
 */
@media screen and (max-width: 64.06125em) {
  .hero {
    height: auto;
  }
  .hero__inner {
    height: 540px;
  }
  body:not(.page-template-default) .hero {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 40.06125em) {
  .hero__inner {
    height: 360px;
  }
}
@media (max-width: 400px) {
  .hero__inner {
    height: 315px;
  }
}