/* BOTG overlay, removable layer for the test host only */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&display=swap");

body { padding-top: 44px; }

/* Breaking news ticker */
.botg-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 44px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #ff1f8e;
  color: #fff200;
  font: 400 20px/1 "Anton", Impact, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 3px solid #111;
}
.botg-ticker-label {
  position: relative;
  z-index: 1;
  flex: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #111;
  color: #fff;
}
.botg-ticker-track { display: inline-block; padding-left: 100%; animation: botg-scroll 60s linear -12s infinite; }
@keyframes botg-scroll { to { transform: translateX(-100%); } }

/* Rubber stamp over the logo */
.site-header { position: relative; }
.botg-stamp {
  position: absolute;
  top: 18px;
  left: calc(var(--gutter) + 50%);
  z-index: 20;
  padding: 6px 22px 4px;
  border: 7px double #d8141c;
  border-radius: 10px;
  background: rgba(245, 245, 245, .94);
  color: #d8141c;
  font: 400 clamp(38px, 5vw, 76px)/1 "Anton", Impact, sans-serif;
  letter-spacing: .08em;
  transform: rotate(-9deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  pointer-events: none;
  text-align: center;
  animation: botg-slam .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.botg-stamp small { display: block; font-size: .22em; letter-spacing: .14em; margin-top: .25em; }
@keyframes botg-slam { from { transform: rotate(-30deg) scale(3); opacity: 0; } }

/* Every project tile gets an ABSENT sash */
.tile::after {
  content: "ABSENT";
  position: absolute;
  top: 26px;
  right: -64px;
  z-index: 2;
  width: 260px;
  padding: 8px 0;
  background: #fff200;
  color: #111;
  font: 400 22px/1 "Anton", Impact, sans-serif;
  letter-spacing: .2em;
  text-align: center;
  transform: rotate(38deg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.tile:nth-child(3n+2)::after { content: "NO-SHOW"; }
.tile:nth-child(3n)::after { content: "BOTG"; background: #ff1f8e; color: #fff; }

/* Graffiti scrawl on content pages */
.botg-scrawl {
  margin: 0 auto 10px;
  max-width: 900px;
  color: #ff1f8e;
  font: 400 clamp(22px, 3vw, 38px)/1.2 "Permanent Marker", cursive;
  text-align: center;
  transform: rotate(-2deg);
}
.botg-strike { text-decoration: line-through 4px #d8141c; color: var(--heading); }
.botg-new { color: #ff1f8e; font-family: "Permanent Marker", cursive; }

@media (max-width: 767px) {
  .botg-ticker { font-size: 16px; }
  .botg-stamp { top: 6px; left: auto; right: 12px; }
  .tile::after { font-size: 18px; top: 20px; }
}