/* Star 3, subtle: the GAME star's facet angles as the shape language of information pages.
   Angles are taken from the logo's outer points (~21° lower edges). Keep it quiet: the
   content leads, and the star is felt rather than shown. */

/* page header: real footage/still, angled bottom edge, faint facet star bleeding off the right */
.fhero { position: relative; overflow: hidden; padding: 150px 0 120px; background: #0B0E0C;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 64% 100%, 0 93%); }
.fhero > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.fhero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,14,12,.92) 0%, rgba(11,14,12,.6) 45%, rgba(11,14,12,.15) 100%); }
.fhero::after { content: ""; position: absolute; z-index: 1; right: -12vw; bottom: -38%; width: 62vw; aspect-ratio: 676/649;
  background: url(logo/game-star.svg) center/contain no-repeat; opacity: .10; transform: rotate(-8deg); pointer-events: none; }
.fhero > .wrap { position: relative; z-index: 2; }
@media (max-width: 760px) { .fhero { padding: 130px 0 90px; clip-path: polygon(0 0, 100% 0, 100% 92%, 60% 100%, 0 96%); }
  .fhero::after { width: 110vw; right: -45vw; bottom: -20%; } }

/* facet-cut media and cards: two opposite corners cut on the star angle */
.fcut { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.fcut-lg { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }

/* thin facet divider: two green hairlines at the star's angle */
.fline { height: 46px; background:
  linear-gradient(159deg, transparent 49.6%, rgba(112,191,98,.55) 49.6% 50.4%, transparent 50.4%) left/50% 100% no-repeat,
  linear-gradient(21deg, transparent 49.6%, rgba(32,86,43,.9) 49.6% 50.4%, transparent 50.4%) right/50% 100% no-repeat; opacity: .8; }

/* eyebrow marker: a tiny star facet instead of a dot */
.fmark::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; vertical-align: -1px;
  background: #70BF62; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }

/* footer sign-off: the big horizontal lockup */
.signoff { text-align: center; padding: 70px 0 24px; }
.signoff img { height: clamp(70px, 10vw, 130px); display: inline-block; }