@font-face {
  font-family: "gc-00";
  src: url("fonts/00-bodoni-moda.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-01";
  src: url("fonts/01-anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-02";
  src: url("fonts/02-italiana.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-03";
  src: url("fonts/03-cinzel.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-04";
  src: url("fonts/04-archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-05";
  src: url("fonts/05-eb-garamond.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "gc-06";
  src: url("fonts/06-oswald.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-07";
  src: url("fonts/07-poiret-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-08";
  src: url("fonts/08-ultra.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-09";
  src: url("fonts/09-cardo.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "gc-10";
  src: url("fonts/10-spectral.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "gc-11";
  src: url("fonts/11-syncopate.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "gc-12";
  src: url("fonts/12-yeseva-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #000;
  --fg: #fff;
}

html.invert {
  --bg: #fff;
  --fg: #000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

html {
  color-scheme: dark;
}

html.invert {
  color-scheme: light;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  cursor: default;
}

.stage {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: max(4vh, env(safe-area-inset-top)) max(3vw, env(safe-area-inset-right))
    max(4vh, env(safe-area-inset-bottom)) max(3vw, env(safe-area-inset-left));
}

.mark {
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 0.82;
  font-size: 18vw;
  font-weight: 400;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  opacity: 0;
}

html.ready .mark {
  opacity: 1;
}

.word {
  display: flex;
  align-items: center;
}

.gap {
  display: block;
  width: 0.38em;
  flex: 0 0 0.38em;
}

.l {
  display: block;
  font-size: 1em;
  line-height: 0.82;
  padding: 0 0.012em;
}

.l0 {
  font-family: "gc-00", serif;
  font-weight: 900;
  font-style: normal;
}
.l1 {
  font-family: "gc-01", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.l2 {
  font-family: "gc-02", serif;
  font-weight: 400;
  font-style: normal;
}
.l3 {
  font-family: "gc-03", serif;
  font-weight: 700;
  font-style: normal;
}
.l4 {
  font-family: "gc-04", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.l5 {
  font-family: "gc-05", serif;
  font-weight: 700;
  font-style: italic;
}
.l6 {
  font-family: "gc-06", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.l7 {
  font-family: "gc-07", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.l8 {
  font-family: "gc-08", serif;
  font-weight: 400;
  font-style: normal;
}
.l9 {
  font-family: "gc-09", serif;
  font-weight: 400;
  font-style: italic;
}
.l10 {
  font-family: "gc-10", serif;
  font-weight: 700;
  font-style: italic;
}
.l11 {
  font-family: "gc-11", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.l12 {
  font-family: "gc-12", serif;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 720px) {
  .mark {
    flex-direction: column;
    white-space: normal;
    gap: 0.08em;
    font-size: 22vw;
  }

  .gap {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.invert {
    --bg: #000;
    --fg: #fff;
  }
}