/* Jax's Full House, the flagship slide. It leaves the product grammar in
   styles.css for one piece of key art at full bleed: a real capture from the
   game at 640x300, Jax looming over you in the dark with a warm light on his
   face. Set like a poster, the line at the head, the name and the date at the
   foot, over the dark side of the art.

   Every one of the game's pixels is drawn at a whole multiple, never scaled to
   fit: the art by --art-px, the sign logo by --logo-px, the pixel labels by
   --px. On a phone the logo and labels step to 1.5 or 1.333 CSS pixels on 2x
   and 3x screens, which is a whole 3 or 4 device pixels. */

.jfh {
  --art-px: 3px;
  --logo-px: 1px;
  --px: 1px;
  /* The art pixel the slide frames on (his face), and where on the slide it lands. */
  --focus-x: 350;
  --focus-y: 175;
  --focus-at-x: 0.5;
  --focus-at-y: 0.5;

  --jfh-black: #050407;
  --jfh-text: #f3ead8;
  --jfh-gold: #e2b866;
  --jfh-face: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  background: var(--jfh-black);
  color: var(--jfh-text);
}

/* The art ---------------------------------------------------------------- */

.jfh-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Placed by its focus pixel, then held so it always covers the slide. */
.jfh-art-image {
  position: absolute;
  max-width: none;
  width: calc(640 * var(--art-px));
  height: calc(300 * var(--art-px));
  left: clamp(calc(100% - 640 * var(--art-px)), calc(var(--focus-at-x) * 100% - var(--focus-x) * var(--art-px)), 0px);
  top: clamp(calc(100% - 300 * var(--art-px)), calc(var(--focus-at-y) * 100% - var(--focus-y) * var(--art-px)), 0px);
  image-rendering: pixelated;
}

/* The grade sits over the art, not baked into it, so it follows the layout:
   the words' side and the foot fall to black, and the corners close in. */
.jfh-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 4, 7, 0.78) 0%, rgba(5, 4, 7, 0.45) 30%, rgba(5, 4, 7, 0) 52%),
    linear-gradient(0deg, rgba(5, 4, 7, 0.85) 0%, rgba(5, 4, 7, 0) 30%),
    radial-gradient(45% 45% at 15% 80%, rgba(5, 4, 7, 0.6) 0%, rgba(5, 4, 7, 0) 100%),
    radial-gradient(120% 90% at 62% 55%, rgba(5, 4, 7, 0) 50%, rgba(5, 4, 7, 0.55) 100%);
}

/* The smallest whole scale that covers the screen. */
@media (max-width: 1280px) and (max-height: 600px) { .jfh { --art-px: 2px; } }
@media (min-width: 1921px), (min-height: 901px) { .jfh { --art-px: 4px; } }
@media (min-width: 2561px), (min-height: 1201px) { .jfh { --art-px: 5px; } }
@media (min-width: 3201px), (min-height: 1501px) { .jfh { --art-px: 6px; } }

/* The words -------------------------------------------------------------- */

.jfh-body {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* The sign leads at the head; the line and everything after it sink to the foot. */
.jfh-name { line-height: 0; }

.jfh-tagline {
  margin-top: auto;
  max-width: 13em;
  font-family: var(--jfh-face);
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.jfh-logo {
  display: block;
  width: calc(200 * var(--logo-px));
  height: calc(112 * var(--logo-px));
  image-rendering: pixelated;
}

/* The game's own sign lettering, its colour baked in. */
.jfh-label { display: block; image-rendering: pixelated; }
.jfh-label--genre { width: calc(233 * var(--px)); height: calc(8 * var(--px)); }
.jfh-label--release { width: calc(176 * var(--px)); height: calc(8 * var(--px)); }

.jfh-genre { margin-top: 1.3rem; }
/* The label is baked white; this warms it to the sign gold. */
.jfh-genre .jfh-label { filter: sepia(1) saturate(2.2) brightness(0.95); }

/* The date is a brass room-key tag, notched at the hanging end and pointed at
   the other. The pixel label is dark on the brass, so it is darkened to black. */
.jfh-release {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.7rem;
  margin-top: 1.75rem;
  padding: 0.8rem 2.2rem 0.8rem 2.4rem;
  color: #2a1a10;
  background:
    radial-gradient(circle at 1.1rem 50%, #050407 0 0.26rem, #8a6428 0.3rem 0.4rem, rgba(138, 100, 40, 0) 0.44rem),
    linear-gradient(180deg, #f0d898 0%, #d6ac5c 100%);
  clip-path: polygon(0.6rem 0, calc(100% - 1.3rem) 0, 100% 50%, calc(100% - 1.3rem) 100%, 0.6rem 100%, 0 calc(100% - 0.6rem), 0 0.6rem);
}
.jfh-release .jfh-label { filter: brightness(0) opacity(0.85); }
.jfh-release-mark { flex: none; width: 18px; height: 18px; fill: currentColor; }

/* A quieter second step under the key tag: the same pixel lettering in the
   sign's warm paper, dimmed, with a pixel rule that arrives on hover/focus. */
.jfh-label--follow { width: calc(142 * var(--px)); height: calc(8 * var(--px)); }
.jfh-follow { margin-top: 1.1rem; align-self: flex-start; }
.jfh-follow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.1rem;
  color: #f3ead8;
  opacity: 0.68;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
}
.jfh-follow-link:hover { opacity: 1; border-bottom-color: currentColor; }
.jfh-follow-link:focus-visible { opacity: 1; outline: 2px solid #f3ead8; outline-offset: 4px; }
.jfh-follow-mark { flex: none; width: 16px; height: 16px; }

/* Phone: his face in the art band up top, the sign and the words stacked
   below it at the foot. */

@media (max-width: 47.99rem) {
  /* The pixel labels stay at 1px (a whole 2 or 3 device pixels) so the genre
     line and the key tag sit inside the 28px side margins at 360 wide. */
  .jfh { --art-px: 2px; --px: 1px; }
  .jfh-art-image { top: -90px; }
  /* The band fades to the slide's black before the art runs out. */
  .jfh-art::after {
    background: linear-gradient(180deg, rgba(5, 4, 7, 0) 0, rgba(5, 4, 7, 0) 330px, var(--jfh-black) 505px);
  }
  .jfh-body {
    align-items: center;
    justify-content: flex-end;
    padding: 3rem 28px;
    text-align: center;
  }
  .jfh-tagline { margin-top: 1.5rem; font-size: 1.5rem; }
  .jfh-genre { margin-top: 1rem; }
  .jfh-release { align-self: center; }
  .jfh-follow { align-self: center; }
}
@media (max-width: 47.99rem) and (min-resolution: 2dppx) { .jfh { --logo-px: 1.5px; } }
@media (max-width: 47.99rem) and (min-resolution: 3dppx) { .jfh { --logo-px: 1.3333px; } }

/* Wide: his face in the right third, the words down the dark left. -------- */

@media (min-width: 48rem) {
  .jfh { --logo-px: 2px; --px: 2px; --focus-at-x: 0.74; }
  .jfh-body { padding: clamp(3rem, 9vh, 6rem) clamp(2rem, 7vw, 8rem); }
}
@media (min-width: 64rem) and (min-height: 44rem) {
  .jfh-tagline { font-size: 2.1rem; }
}
/* The logo steps to x3 only where his fur stays clear of it. */
@media (min-width: 85rem) and (min-height: 50rem) {
  .jfh { --logo-px: 3px; --focus-at-x: 0.7; }
  .jfh-tagline { font-size: 2.4rem; }
}