/* The GameGrades wordmark: "Game" in case lettering (Archivo), "Grades" in
   editorial italic (Bodoni Moda), pressed in light ink. Its own file so pages
   outside the remake layer (landing.html) can carry the mark without taking the
   rest of remake.css. gg_assets() loads it ahead of remake.css, which still
   holds the per-surface overrides (the guide cover, carbon). Tokens come from
   gamegrades-colors.css. The emails use a PNG of the same mark, drawn by
   tools/render_email_wordmark.py; redraw it if this changes. */

@font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: block; }
@font-face { font-family: "Bodoni Moda"; src: url("/static/fonts/BodoniModa-Italic-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: block; }

.gg-wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; margin: 0; font-size: inherit; }
.gg-wordmark .gg-wm-game { font: 900 1.12em/1 var(--gg-font-case); font-stretch: 118%; letter-spacing: -.03em; color: #fff; padding-left: .30em; position: relative; }
.gg-wordmark .gg-wm-game::before { content: ""; position: absolute; left: 0; top: .06em; bottom: .1em; width: .19em; border-radius: 1px; background: linear-gradient(180deg, #a08be6, var(--gg-accent)); }
.gg-wordmark .gg-wm-grades { font: 700 italic 1.16em/1 var(--gg-font-display); color: var(--gg-paper); margin-left: .08em; }

/* "Grades", pressed rather than flat: the same light ink with a mottle and the
   odd fleck the plate missed. Padded so the italic's overhang is inside the
   painted box (background-clip: text clips to it). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .gg-wordmark .gg-wm-grades {
    background: var(--gg-wordmark-ink), #e9e0ce;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    padding: 0 .12em 0 .04em; margin-right: 0; margin-left: .04em;
  }
}
