/*
 * Hero-only type direction based on the supplied CITYSTYLE editorial sample.
 * Geometry remains owned by hero-v4.css.
 */
:root {
  --hero-logo-blue: #17365d;
  --hero-magazine-font:
    "Zen Kaku Gothic New",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif;
  --hero-citystyle-font:
    "Fredoka",
    "Arial Rounded MT Bold",
    "Arial Black",
    sans-serif;
  --hero-style-sample-font:
    "Barlow Condensed",
    "Arial Narrow",
    "Helvetica Neue",
    sans-serif;
}

.prelaunch-notice small,
.editorial-collage-heading > p,
.editorial-collage-rail span {
  font-family: var(--hero-magazine-font) !important;
  font-weight: 900;
}

.editorial-collage-heading h1 {
  position: relative;
  font-family: var(--hero-citystyle-font);
  font-weight: 700;
  font-optical-sizing: auto;
  gap: 0.2em;
  letter-spacing: 0.015em;
}

.editorial-collage-heading h1 .hero-title-word {
  position: relative;
  display: inline-block;
  color: var(--editorial-paper);
  -webkit-text-stroke: 3px var(--hero-logo-blue);
  paint-order: stroke fill;
}

.editorial-collage-heading > div {
  font-family: var(--hero-style-sample-font);
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .editorial-collage-heading h1 {
    gap: 0.18em;
    letter-spacing: 0.02em;
  }

  .editorial-collage-heading h1 .hero-title-word {
    -webkit-text-stroke-width: 1.75px;
  }
}