:root {
  --ill-teezer-size: 64px;
  --ill-logo-width: 210px;
  --ill-masthead-gap: 14px;
  --ill-tagline-color: #cc3300;
  --ill-tagline-size: 9px;
  --ill-tagline-gap: 12px;
  --ill-logo-nudge-x: 0px;
  --ill-logo-nudge-y: 8px;
  --ill-teezer-nudge-x: 0px;
  --ill-teezer-nudge-y: 0px;
  --ill-tagline-nudge-x: 0px;
  --ill-tagline-nudge-y: 0px;
}

.ill-brand {
  align-items: flex-start;
  justify-content: center;
  gap: var(--ill-masthead-gap);
}

.ill-brand-mark { margin: 0; }

.ill-title-stack {
  min-width: 0;
  gap: 0 !important;
  transform: translate(var(--ill-logo-nudge-x), var(--ill-logo-nudge-y));
}

.ill-title-stack > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.ill-site-logo { display: block; }

.ill-site-logo-image {
  display: block;
  width: var(--ill-logo-width);
  height: auto;
  max-width: min(var(--ill-logo-width), 60vw);
  object-fit: contain;
  object-position: left top;
}

.ill-random-image {
  width: var(--ill-teezer-size) !important;
  height: var(--ill-teezer-size) !important;
  max-width: none !important;
  flex: 0 0 var(--ill-teezer-size);
  object-fit: contain;
  transform: translate(var(--ill-teezer-nudge-x), var(--ill-teezer-nudge-y));
}

.ill-random-image--fallback {
  display: block;
  width: var(--ill-teezer-size);
  height: var(--ill-teezer-size);
}

.ill-site-title {
  display: block;
  color: var(--ill-ink);
  font: 900 clamp(2.6rem, 6vw, 4rem)/.8 Georgia, serif;
  letter-spacing: -.07em;
  text-decoration: none;
}

.ill-tagline-wrap {
  margin: 0 !important;
}

.ill-random-tagline {
  display: block;
  margin-top: var(--ill-tagline-gap);
  color: var(--ill-tagline-color) !important;
  font: 400 var(--ill-tagline-size)/1.25 var(--ill-mono) !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
  white-space: nowrap;
  transform: translate(var(--ill-tagline-nudge-x), var(--ill-tagline-nudge-y));
}

.ill-random-tagline::before { content: "^ "; }

@media (max-width: 620px) {
  :root {
    --ill-teezer-size: 54px;
    --ill-logo-width: 188px;
    --ill-masthead-gap: 12px;
    --ill-tagline-size: 10px;
    --ill-tagline-gap: 9px;
  }

  .ill-brand { width: 100%; justify-content: center; }
  .ill-site-logo-image { max-width: min(var(--ill-logo-width), 62vw); }
  .ill-random-tagline { white-space: normal; }
}