:root {
  --ink: #690337;      /* the logo's outline colour */
  --ink-soft: #8a4a6e;
  --paper: #fffaf5;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  padding: 24px 16px;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(60vmax 60vmax at 10% 5%, rgba(201, 171, 240, .34), transparent 62%),
    radial-gradient(55vmax 55vmax at 92% 96%, rgba(199, 244, 226, .6), transparent 62%),
    var(--paper);
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.brand {
  margin: 0;
  /* ponytail: device rounded fonts, no webfont download; self-host one typeface if the wordmark must match everywhere */
  font-family: "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
    Nunito, Quicksand, "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(3.4rem, 17vw, 9.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.name {
  display: block;
  white-space: nowrap;
}

/* the dragon stands in for the capital D */
.d {
  display: inline-block;
  width: .78em;
  height: 1.15em;
  margin-right: .01em;
  overflow: hidden;
  color: transparent;
  background: url(/dragana-d.webp) center / contain no-repeat;
  transform: translateY(.04em);
}

.sub {
  display: block;
  margin-top: .42em;
  font-size: .43em;
  font-weight: 700;
  letter-spacing: .02em;
}

/* background images are dropped in forced-colors mode, so show the letter */
@media (forced-colors: active) {
  .d {
    width: auto;
    height: auto;
    color: inherit;
    background: none;
    transform: none;
  }
}

.about {
  max-width: 34ch;
  margin: 1.8rem auto 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

footer {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

footer p { margin: 0; }

footer a { color: inherit; }