:root {
  --bg: #000000;
  --gold: #f9d849;
  --gray: #888780;
  /* Side padding, as on newlimit.com. */
  --padding: 10vw;
  /* Inter, the typeface newlimit.com uses. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Wordmark letter-spacing; also used to offset the trailing space it leaves. */
  --track: 0.32em;
  color-scheme: dark;
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
}

main,
.site-footer {
  padding-left: var(--padding);
  padding-right: var(--padding);
}

main {
  flex: 1;
  display: flex;
  align-items: center;
}

main.centered { justify-content: center; }

/* Wordmark: light, widely tracked capitals in gold. */
.wordmark {
  margin: 0;
  color: var(--gold);
  font-weight: 300;
  font-size: clamp(28px, 6.5vw, 96px);
  letter-spacing: var(--track);
  line-height: 1.1;
  text-transform: uppercase;
}

/* Single-line layouts need a smaller size to fit "VONNON INC." on phones. */
.wordmark--inline {
  font-size: clamp(18px, 4.2vw, 60px);
  white-space: nowrap;
}

.wordmark-line {
  display: block;
  white-space: pre;
}

.wordmark-indent { visibility: hidden; }

/* Hairline rule under the wordmark. Letter-spacing leaves trailing space after
   the last letter, so the rule stops short by that amount to end at the glyph. */
.wordmark--ruled { display: inline-grid; }

.wordmark-rule {
  height: 1px;
  margin: var(--track) var(--track) 0.38em 0;
  background: var(--gold);
  opacity: 0.6;
}

/* Centred: matching space on the left so the glyphs, not the box, are centred. */
.wordmark--centered {
  padding-left: var(--track);
  text-align: center;
}

/* v7: small caps; only the first letter of each word is full height.
   Letter-spacing is inherited as a length, so tracking stays even. */
.wordmark-sc {
  font-size: 0.78em;
  /* One step heavier so the scaled-down strokes match the full-size letters. */
  font-weight: 400;
}

/* v8: real upper and lower case. */
.wordmark--mixed { text-transform: none; }

/* v5: small INC. ending under the final N. */
.wordmark-sub {
  justify-self: end;
  /* Floor keeps INC. legible on phones. */
  font-size: max(0.2em, 10px);
  font-weight: 400;
  letter-spacing: 0.5em;
  /* (0.32em - 0.1em) of the heading, expressed at this line's 0.2em size. */
  margin-right: 1.1em;
}

.site-footer {
  padding-bottom: 36px;
  color: var(--gray);
  font-size: 13px;
}

.site-footer p { margin: 0; }

@media (max-width: 767px) {
  :root { --padding: 24px; }
  .site-footer { padding-bottom: 24px; }
}