/* Site-wide custom styles. Early-2000s homepage vibe: tiled background, beveled boxes, Verdana. */
:root {
  --retro-blue: #1d3f8a;
  --retro-sky: #cfe6ff;
  --retro-yellow: #ffe97a;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #9ccbff;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .35) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .35) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

.site-header {
  background: linear-gradient(#4f86e0, var(--retro-blue));
  border-bottom: 4px ridge #8fb4f0;
  padding: .4rem 1rem;
  display: flex;
  align-items: center;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font: bold 1.5rem "Trebuchet MS", Verdana, sans-serif;
  text-decoration: none;
  text-shadow: 2px 2px 0 #0b1e4a;
  letter-spacing: .05em;
}

.page-box {
  background: #fffef2;
  color: #222;
  border: 4px outset #e8e8e8;
  max-width: 62rem;
}

.retro-title {
  text-align: center;
  font: bold 2.4rem "Comic Sans MS", "Trebuchet MS", sans-serif;
  color: var(--retro-blue);
  text-shadow: 2px 2px 0 var(--retro-yellow);
  margin-bottom: 0;
}
.retro-empty { text-align: center; font-size: 4rem; color: var(--retro-blue); margin: 2rem 0; }
.retro-heading {
  margin-top: 2rem;
  font: bold 1.1rem Verdana, sans-serif;
  color: #fff;
  background: linear-gradient(90deg, var(--retro-blue), #6fa0ee);
  padding: .3rem .8rem;
  border: 2px outset #c9d8f5;
}

.retro-frame {
  background: #fff;
  border: 4px ridge #d8c27a;
  padding: 6px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
}
.retro-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }