@font-face {
  font-family: "IBM Plex Mono";
  src:
    url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"),
    url("assets/fonts/IBMPlexMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #000;
  --paper: #e8f1e8;
  --brand: #00FF00;
}

* {
  box-sizing: border-box;
}

html.js .site-name:not(.entered),
html.js .title img:not(.entered),
html.js .tags span:not(.entered),
html.js .statement:not(.entered),
html.js .web-badge:not(.entered),
html.js .audience-spec-title:not(.entered),
html.js .audience-spec:not(.entered) {
  visibility: hidden;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--paper);
  background: linear-gradient(to bottom, #004400 0%, #000 25vh, #000 100%);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  font-family: "IBM Plex Mono", monospace;
}

.composition {
  --gutter: 1rem;
  display: grid;
  grid-template: auto auto / 1fr .6fr;
  align-content: center;
  gap: var(--gutter);
  width: min(100% - 3rem, 1020px);
  margin: auto;
  padding: 1em;
}

.site-name {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand);
  font-size: .72rem;
  letter-spacing: .22em;
  padding: 1em;
}

.title-panel {
  padding: 1em;
}

.title {
  display: grid;
  align-content: start;
  gap: .5rem;
  margin: 0;
  font-size: 1rem;
}

.title img {
  display: block;
  width: min(100%, 660px);
  height: clamp(4rem, 10vw, 8rem);
  object-fit: contain;
  object-position: left top;
}

.title img:first-child { height: auto; }

.side-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1em;
}

.statement {
  max-width: 25rem;
  margin: 0;
  font-size: .5em;
  line-height: 1.75;
}

.audience-spec {
  margin: .35rem 0 0;
  color: var(--brand);
  font: inherit;
  font-size: .5em;
  line-height: 1.75;
  white-space: pre-wrap;
}

.audience-spec-panel {
  grid-column: 1 / -1;
  padding: 0 1em;
}

.audience-spec-title {
  margin: 1.5rem 0 0;
  color: var(--paper);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .12em;
}

.tags {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--paper);
}

.highlight { color: var(--brand); }

.mark-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: .75rem;
}

.web-badge {
  display: block;
  width: min(100%, 360px);
  height: auto;
}

.site-name.is-typing {
  width: fit-content;
}

@media (max-width: 650px) {
  .composition {
    grid-template: auto auto auto / 1fr;
    align-content: center;
    gap: var(--gutter);
    width: min(100% - 2rem, 480px);
  }

  .title {
    gap: .25rem;
  }

  .title-panel,
  .side-content {
    grid-column: 1 / -1;
  }

  .title img {
    height: clamp(3.5rem, 16vw, 6rem);
  }

  .mark-row {
    gap: .65rem;
    margin-top: .75rem;
  }

}