/* Castle banner at the top of /heirs-to-ruin (+ FR): the artwork covers the top two fifths of
   the screen, edge to edge, with the Nivalis Vale title centred on the castle (same idea
   as the Nimble "Creators" page). Own file because the main stylesheet is cached for a year. */
.project-hero {
  position: relative;
  width: 100%;
  height: 40vh;
  height: 40svh;
  min-height: 240px;
  overflow: hidden;
  background-color: #3f6f8c; /* the sky's tone, shown while the artwork loads */
}
.project-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 18%; /* keep the castle (about 48% across) in the strip */
}
.project-hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(62vw, 640px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .55));
}
@media screen and (max-width: 767px) {
  .project-hero__title { width: min(80vw, 480px); }
}

.project-hero__h1 { margin: 0; font-size: 0; line-height: 0; }

/* Red rule beside the key paragraph, same as the homepage's practical-facts paragraph. */
.project-description p.project-description__facts {
  padding-left: 16px;
  border-left: 3px solid #bc2317;
}

/* The page title and text now sit below the banner, so the old fixed offset above
   them is not needed. */
.project-page .page-flank { padding-top: 24px; padding-bottom: 24px; }

/* ---- Text area below the banner ---- */
/* A cool pale blue taken from the castle's snow and sky, instead of the off-white. */
.project-page { background-color: #dde7ed; }
.project-page .navbar { background: var(--background); }
.project-page .project-description { color: #3f474e; }
/* The NPC portrait has a white background: multiply lets the page colour show through. */
.project-page .illustration-right { mix-blend-mode: multiply; background-color: transparent; }

/* Wolves and Malla sit at the top of the text, not centred on it. */
.project-page .page-flank { align-items: flex-start; }
.project-page .page-flank > .illustration-left,
.project-page .page-flank > .illustration-right { margin-top: 8px; }
/* Malla is mirrored so she faces the text. */
.project-page .illustration-right { transform: scaleX(-1); }

/* The exported grid has five empty rows with a 42px gap each, which left a big void between
   the last paragraph and the home icon. Collapse the gaps and give the icon its own margin. */
@media screen and (min-width: 768px) {
  .project-page .grid-2 { row-gap: 0; }
}

/* Names in bold. Inter Tight is only loaded up to weight 600, and the description used to be
   600 already, so <strong> looked identical to the text around it. Body is now regular and
   names are the semibold, in a slightly darker ink so they stand out. */
.project-page .project-description p { font-weight: 400; }
.project-page .project-description strong { font-weight: 600; color: #14181b; }

/* Phones: the wolves and Malla portraits are left out; the text gets the full width. */
@media screen and (max-width: 767px) {
  .project-page .page-flank > .illustration-left,
  .project-page .page-flank > .illustration-right { display: none; }
}