/* ==== Underground Noize 2003 Storybox revival ==== */
.storybox {
  max-width: 900px;
  margin: 24px auto 36px;
  color: #e6e6e6;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

/* -------------------- TITLE ROW -------------------- */
/* grid: 6 | 1fr | 43 | 6  (22px tall) */
.storybox .sb-title {
  display: grid;
  grid-template-columns: 6px 1fr 43px 6px;
  height: 22px;
  align-items: end;
  line-height: 22px;
}

.sb-title .sb-lc {
  width: 6px;
  height: 22px;
  background: url("../gpx/storybox-title-left-corner.gif") no-repeat bottom left;
}
.sb-title .sb-mid {
  min-width: 0;
  height: 22px;
  padding: 0 10px; /* horizontal only */
  background: url("../gpx/storybox-title-bluebg.gif") repeat-x center;
  font-family: "Kdam Thmor Pro", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}
.sb-title .sb-cascade {
  width: 43px;
  height: 22px;
  background: url("../gpx/storybox-title-cascade.gif") no-repeat center;
}
.sb-title .sb-rc {
  width: 6px;
  height: 22px;
  background: url("../gpx/storybox-title-right-corner.gif") no-repeat bottom right;
}

/* -------------------- BODY ROW --------------------- */
/* grid: left 6px tube | content | right 6px tube */
.storybox .sb-body {
  display: grid;
  grid-template-columns: 6px 1fr 6px;
  min-height: 40px;
}
.sb-body .sb-left {
  width: 6px;
  background: url("../gpx/storybox-left-tube-bg.gif") repeat-y left top;
}
.sb-body .sb-right {
  width: 6px;
  background: url("../gpx/storybox-right-tube-bg.gif") repeat-y right top;
}
.storybox .sb-content {
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #660000;
  border-left: 0;
  border-right: 0;
  padding: 14px 16px;
}
.storybox .sb-meta {
  color: #a7a7a7;
  font-size: 0.92rem;
  margin: 2px 0 10px;
}

/* -------------------- BOTTOM ROW ------------------- */
/* grid: 6 | blue flex | 23 | 75 | 6 (5px tall) */
.storybox .sb-bottom {
  display: grid;
  grid-template-columns: 6px 1fr 23px 75px 6px;
  height: 5px;
}
.sb-bottom .sb-blc {
  width: 6px;
  height: 5px;
  background: url("../gpx/storybox-bottom-left-corner.gif") no-repeat left top;
}
.sb-bottom .sb-blue {
  min-width: 0;
  height: 5px;
  background: url("../gpx/storybox-bottom-bluebg.gif") repeat-x left top;
}
.sb-bottom .sb-bcascade {
  width: 23px;
  height: 5px;
  background: url("../gpx/storybox-bottom-cascade.gif") no-repeat right top;
}
.sb-bottom .sb-silver {
  width: 75px;
  height: 5px;
  background: url("../gpx/storybox-bottom-silverbg.gif") repeat-x left top;
}
.sb-bottom .sb-brc {
  width: 6px;
  height: 5px;
  background: url("../gpx/storybox-bottom-right-corner.gif") no-repeat right top;
}

/* Flavor */
.storybox h2 {
  margin: 0 0 4px;
  font-family: "Jolly Lodger", "Metal Mania", system-ui, sans-serif;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 6px rgba(209, 24, 24, 0.25),
    0 0 18px rgba(209, 24, 24, 0.15);
}
.storybox a {
  color: #d1d1d1;
}
.storybox a:hover {
  color: #d11818;
  text-shadow: 0 0 6px rgba(209, 24, 24, 0.55);
}
.storybox .sb-content p {
  margin: 0 0 10px;
}
.storybox .sb-content .cta {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
  border: 1px solid #333;
  padding: 6px 10px;
  border-radius: 8px;
}
.storybox .sb-content .cta:hover {
  border-color: #d11818;
  color: #d11818;
}