/* What the Benji sites share: the type, the field and its grain, the header and footer, and the paw prints. Each
   site sets --field, --deep and --print, and adds its own scene in site.css. */
@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-roman.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-display: swap;
  src: url("fonts/dm-mono.woff2") format("woff2");
}
:root {
  color-scheme: light dark;
  --cream: #f6efdc;
  --ball: #dcf23e;
  --serif: Fraunces, Georgia, serif;
  --quiet: color-mix(in srgb, var(--cream) 84%, var(--field));
}
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  background: var(--field);
}
body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: clip;
  color: var(--cream);
  font: 400 1.0625rem / 1.5 var(--serif);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%, transparent 35%, var(--deep) 130%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 7rem, transparent 7rem 14rem), var(--field);
}
.defs {
  position: absolute;
}
header,
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 2rem;
  padding: 1.5rem max(1.25rem, 4vw);
}
.mark {
  font: italic 600 1.6rem / 1 var(--serif);
  text-decoration: none;
}
.tag {
  font:
    0.72rem / 1.6 "DM Mono",
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}
a {
  color: var(--cream);
  text-underline-offset: 0.3em;
}
:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 6px;
  border-radius: 4px;
}
main {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 1rem 1.25rem;
}
h1 {
  font: italic 560 1em / 0.85 var(--serif);
  letter-spacing: -0.04em;
}
.prints {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.prints svg {
  position: absolute;
  left: -0.8rem;
  top: -0.8rem;
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--print);
  animation: print 9s linear forwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.2em);
    font-weight: 100;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
}
@keyframes print {
  0%,
  100% {
    opacity: 0;
  }
  4%,
  55% {
    opacity: 1;
  }
}