/* Temp Cryptid Agency :: Online Office :: handcoded in Notepad (allegedly) */

:root {
  --magenta: #D800A9;
  --blue: #3200EB;
  --cyan: #7FD6E8;
  --black: #000;
  --stone: #1A1A1A;
  --paper: #FBFAF6;
  --kraft: #C8AE8A;
  --rust: #9A4424;
  --yellow: #FFF200;
  --lime: #39FF14;
  --link: #0000EE;
  --visited: #551A8B;
  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --type: "Special Elite", "Courier New", Courier, monospace;
  --black-letter: "UnifrakturCook", "Old English Text MT", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 16px;
  background: var(--magenta) url("img/tile-cardback.jpg") repeat;
  background-size: 180px auto;
  color: var(--black);
  font: 16px/1.45 "Times New Roman", Times, serif;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; }

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { background: var(--yellow); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--yellow); color: #000; padding: 8px;
}
.skip:focus { left: 16px; z-index: 10; }

.page {
  max-width: 920px;
  margin: 0 auto;
  background: var(--black);
  border: 6px ridge var(--cyan);
  padding: 10px;
}

/* ---------- masthead ---------- */

.masthead { text-align: center; }

.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 4px;
}
.logo-row img { width: 80px; flex: none; border: 3px outset #ccc; }

.welcome {
  margin: 0;
  font-family: var(--comic);
  color: var(--lime);
  font-size: 15px;
  letter-spacing: 1px;
}

h1 {
  margin: 0;
  font-family: var(--black-letter);
  font-weight: 700;
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.05;
  color: var(--magenta);
  text-shadow: 3px 3px 0 var(--blue), -1px -1px 0 #fff;
}

.sub {
  margin: 6px 0 0;
  font-family: var(--type);
  color: var(--cyan);
  font-size: 14px;
}

/* the "marquee" (CSS only, pauses for reduced motion) */
.marquee {
  margin: 12px 0 8px;
  overflow: hidden;
  background: var(--blue);
  border-top: 2px dashed var(--yellow);
  border-bottom: 2px dashed var(--yellow);
  color: var(--yellow);
  font-family: var(--comic);
  font-weight: bold;
  font-size: 15px;
}
.marquee p {
  margin: 0;
  padding: 6px 0;
  display: flex;
  width: max-content;
  animation: scroll 38s linear infinite;
}
.marquee span { padding-right: 2em; white-space: nowrap; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* under-construction bar, all CSS, no gifs harmed */
.construction {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: repeating-linear-gradient(-45deg, #000 0 14px, var(--yellow) 14px 28px);
  border: 3px outset #999;
}
.construction p {
  flex: 1;
  margin: 0;
  background: var(--yellow);
  color: #000;
  font-family: var(--comic);
  font-size: 14px;
  padding: 4px 8px;
  border: 2px solid #000;
}
.cone {
  flex: none;
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 30px solid #FF6A00;
  position: relative;
  animation: bob 0.9s steps(2) infinite;
}
.cone::after {
  content: "";
  position: absolute; left: -7px; top: 12px;
  width: 14px; height: 5px; background: #fff;
}
@keyframes bob { 50% { transform: translateY(-4px) rotate(-8deg); } }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.sidebar {
  background: var(--stone) url("img/tile-mud.jpg");
  background-size: 260px auto;
  background-blend-mode: multiply;
  border: 4px ridge var(--magenta);
  padding: 10px;
  color: #fff;
  font-family: var(--comic);
  font-size: 14px;
}
.nav-title {
  margin: 0 0 6px;
  text-align: center;
  color: var(--yellow);
  font-weight: bold;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0 0 4px; }
.sidebar li a {
  display: block;
  background: #c0c0c0;
  color: #000;
  text-decoration: none;
  padding: 4px 6px;
  border: 3px outset #eee;
}
.sidebar li a:active { border-style: inset; }
.sidebar li a:hover { background: var(--yellow); }

.new {
  display: inline-block;
  background: #c00;
  color: var(--yellow);
  font: bold 11px/1 Arial, sans-serif;
  padding: 2px 3px;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.counter { margin: 14px 0; text-align: center; }
.counter p { margin: 0; }
.digits { display: inline-flex; gap: 2px; margin: 4px 0 !important; }
.digits span {
  display: inline-block;
  width: 18px;
  background: #000;
  color: var(--lime);
  font: bold 18px/24px "Courier New", monospace;
  border: 1px solid #555;
}
.tiny { font-size: 11px; color: #bbb; }

.midi {
  background: #c0c0c0;
  color: #000;
  border: 3px outset #eee;
  padding: 6px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}
.midi p { margin: 0 0 4px; }
.midi-title { background: #000080; color: #fff; padding: 2px 4px; font-weight: bold; }
.track { background: #000; color: var(--lime); font-family: "Courier New", monospace; padding: 2px 4px; }
.midi-ctrls { display: flex; gap: 3px; margin-bottom: 4px; }
.midi-ctrls span {
  flex: 1; text-align: center;
  border: 2px outset #eee; background: #d4d0c8; padding: 1px 0;
}
.midi summary { cursor: pointer; font-weight: bold; }
.midi .err { color: #800; margin-top: 6px; }
.midi .tiny { color: #333; }

.best-viewed {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--cyan);
  text-align: center;
}

/* ---------- content boxes ---------- */

main { min-width: 0; }

.box {
  background: var(--paper);
  border: 4px outset #ddd;
  padding: 14px;
  margin: 0 0 10px;
}
.box:nth-of-type(even) { background: #fdf0fb; }

/* spray loops off the Graphics folder, behind the manifesto */
.box.welcome-back { background: var(--magenta) url("img/tile-spray.jpg") repeat; background-size: 420px auto; }

h2 {
  margin: 0 0 10px;
  font-family: var(--black-letter);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.15;
  color: var(--blue);
  text-shadow: 2px 2px 0 var(--magenta);
}
h2 small { font-family: var(--comic); font-size: 13px; color: #444; text-shadow: none; }
h2 i { font-family: var(--type); font-style: italic; font-size: .8em; }
h3 { margin: 2px 0 6px; font-family: var(--type); font-size: 20px; color: var(--magenta); }

.whetu { width: 16px; height: auto; vertical-align: middle; }
.bang { width: 30px; height: auto; vertical-align: middle; }

.lede { font-family: var(--comic); font-size: 15px; }

blockquote { margin: 0 0 12px; }
.printed {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 var(--blue);
  padding: 8px 12px;
  font-family: var(--type);
  font-size: 15px;
  text-transform: uppercase;
}
.printed p { margin: 0; }
.printed.big { font-size: 17px; text-align: center; box-shadow: 4px 4px 0 var(--magenta); }

.mission { font-family: var(--type); font-size: 14px; }

.polaroid {
  margin: 12px auto 14px;
  max-width: 460px;
  background: #fff;
  padding: 10px 10px 4px;
  border: 1px solid #aaa;
  box-shadow: 3px 3px 8px rgba(0,0,0,.4);
  transform: rotate(-1.5deg);
}
.polaroid img { display: block; width: 100%; }
.polaroid figcaption { font-family: var(--comic); font-size: 13px; text-align: center; padding: 6px 0; }

/* jobs */
.jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.job-poster { margin: 0; border: 3px ridge var(--kraft); }
.job-poster img { display: block; width: 100%; }
.job {
  background: #fff;
  border: 2px dashed var(--blue);
  padding: 10px;
  font-size: 15px;
}
.job p { margin: 0 0 6px; }
.job-tag {
  background: var(--kraft);
  font-family: var(--type);
  font-size: 12px;
  padding: 2px 6px;
  display: inline-block;
}
.when {
  font-family: var(--type);
  background: #000;
  color: var(--yellow);
  padding: 2px 6px;
  display: inline-block;
}
.apply {
  margin: 12px 0 0;
  background: var(--yellow);
  border: 2px solid #000;
  padding: 8px;
  font-family: var(--comic);
  font-size: 14px;
  text-align: center;
}

/* staff roster */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.card {
  margin: 0;
  background: #fff;
  border: 5px ridge var(--kraft);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.card.gold { border-color: #E8B04A; background: #fffbe8; }
.card img { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: contain; background: #fff; }
.card.applicant img { object-fit: contain; }
.ribbon {
  margin: 0 0 6px;
  background: var(--magenta);
  color: #fff;
  font: bold 12px/1.3 var(--comic);
  text-align: center;
  padding: 3px;
}
.card.gold .ribbon { background: #E8B04A; color: #000; }
.card figcaption { font-family: var(--type); font-size: 13px; margin-top: 6px; }
.card figcaption b {
  display: inline-block;
  background: var(--kraft);
  padding: 1px 8px;
  font-size: 15px;
  margin-bottom: 4px;
}
.card figcaption span { display: block; }

/* tikanga: plain, calm, nothing moves, nothing jokes */
.box.tikanga {
  background: #fff;
  border: 4px double #000;
}
.tikanga h2 { color: #000; text-shadow: none; }
.tikanga blockquote {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 6px solid var(--magenta);
  font-family: var(--type);
  font-size: 16px;
}
.tikanga blockquote p { margin: 0 0 10px; }
.credit { margin: 8px 0 0; font-size: 13px; color: #333; }

/* etiquette */
.stars { padding-left: 0; list-style: none; font-family: var(--type); font-size: 17px; }
.stars li {
  padding-left: 26px;
  margin-bottom: 6px;
  background: url("img/whetu.png") no-repeat 4px 50% / 12px auto;
}
.memo-text { font-family: var(--comic); }

/* guestbook */
.guestbook { background: #fffff0 !important; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  border: 2px inset #ddd;
  background: #fff;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-family: var(--comic);
  font-size: 14px;
}
.entries p { margin: 0 0 4px; }
.gb-meta { font-family: Arial, sans-serif; font-size: 12px; color: #555; border-bottom: 1px dotted #aaa; padding-bottom: 3px; }
.reply { color: var(--magenta); }

.gb-form {
  background: #c0c0c0;
  border: 3px outset #eee;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
.gb-form-title { margin: 0 0 6px; font-weight: bold; }
.gb-form label { display: block; margin-bottom: 6px; }
.gb-form input, .gb-form textarea {
  display: block;
  width: 100%;
  margin-top: 2px;
  font: inherit;
  border: 2px inset #eee;
  background: #eee;
}
.gb-full {
  margin: 8px 0 0;
  background: #000;
  color: var(--lime);
  font-family: "Courier New", monospace;
  padding: 6px;
  text-align: center;
}

/* 88x31 buttons, lovingly CSS'd */
.buttons { background: #000 !important; border-color: #444; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0; }
.b88 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  max-width: 100%;
  min-height: 31px;
  padding: 2px 5px;
  font: 10px/1.1 Verdana, Arial, sans-serif;
  text-align: center;
  border: 2px outset #999;
}
.b88 b { margin-left: 3px; }
.b-ns { background: #000080; color: #fff; }
.b-ns b { color: var(--yellow); }
.b-np { background: #fff; color: #000; }
.b-tk { background: var(--magenta); color: #fff; }
.b-koha { background: var(--blue); color: var(--cyan); }
.b-pa { background: var(--yellow); color: #8a006b; }
.b-hg { background: #000; color: var(--lime); border-color: var(--lime); }

/* ---------- webring footer ---------- */

.webring {
  margin-top: 10px;
  border-top: 3px ridge var(--magenta);
  padding-top: 10px;
  text-align: center;
  color: #fff;
  font-family: var(--comic);
}
.webring a { color: var(--cyan); }
.webring a:visited { color: #d9a0ff; }
.webring a:hover { color: #000; }
.ring {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--blue);
  border: 3px outset #7a5bff;
  padding: 6px 10px;
}
.ring p { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ring img { width: 28px; }
.versions { margin: 10px 0 6px; }
.versions [aria-current] { color: var(--yellow); font-weight: bold; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { order: 0; }
  .sidebar ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .sidebar li { margin: 0; }
  .gadgets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 10px; }
  .counter { margin: 0; }
  .best-viewed { margin-top: 8px; }
}

@media (max-width: 480px) {
  body { padding: 16px; background-size: 140px auto; }
  .page { padding: 6px; border-width: 4px; }
  .logo-row img { width: 44px; }
  .logo-row { gap: 6px; }
  .construction { padding: 6px; }
  .cone { display: none; }
  .box { padding: 10px; }
  .ring { font-size: 13px; padding: 6px; }
}

/* ---------- people who asked the portal to hold still ---------- */

@media (prefers-reduced-motion: reduce) {
  .marquee p { animation: none; width: auto; display: block; }
  .marquee span { white-space: normal; display: block; padding: 0 8px; }
  .marquee span[aria-hidden] { display: none; }
  .cone, .new, .spin { animation: none !important; }
}

/* the logos spin, obviously */
.spin { animation: spin 6s linear infinite; border-radius: 50%; }
.spin.rev { animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.ring a { white-space: nowrap; }
@media (min-width: 761px) { .job-poster { grid-row: span 2; } }

/* ---------- round 2 ---------- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the loud way home */
.home-strip { margin: 0 0 8px; text-align: center; }
.b-home {
  font-size: 13px !important;
  font-weight: bold;
  background: var(--yellow);
  color: #a00 !important;
  border: 3px outset var(--lime) !important;
  text-decoration: none;
  padding: 4px 10px !important;
  animation: blink2 1.2s steps(1) infinite;
}
.b-home b { color: var(--blue); }
.b-home:hover { background: var(--lime); }
@keyframes blink2 { 50% { background: var(--lime); } }
.sidebar li a.nav-home { background: var(--yellow); color: #c00; font-weight: bold; }

/* hit counter: the last digit is a hubcap */
.digits .tca-gift {
  display: inline-block; width: 18px; background: #000; color: var(--lime);
  font: bold 18px/24px "Courier New", monospace; border: 1px solid #555; text-align: center;
}
h2 .tca-gift { vertical-align: middle; }
.reply .tca-gift { color: var(--magenta); }

/* office plant gadget */
.plant { margin: 12px 0 0; background: #fff; border: 3px ridge var(--cyan); padding: 6px; color: #000; text-align: center; }
.plant-title { margin: 0 0 4px; font-weight: bold; color: var(--magenta); }
.plant img { display: block; width: 100%; max-width: 180px; margin: 0 auto; }
.plant figcaption { font-size: 12px; margin-top: 4px; }

/* the third colour: blue, for the applicant */
.card.applicant { border-color: #1E6FD9; background: #eef4ff; }
.card.applicant .ribbon { background: #1E6FD9; color: #fff; }

/* 10 Oct address */
.job .addr { font-family: var(--type); font-size: 13px; background: var(--cyan); color: #000; padding: 2px 6px; display: inline-block; }

/* kyber kaves */
.kk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kk { margin: 0; background: #fff; border: 4px ridge #E8705E; padding: 6px; }
.kk img { display: block; width: 100%; }
.kk figcaption { font-family: var(--comic); font-size: 13px; text-align: center; padding-top: 4px; }

/* FDFF shrine */
.box.shrine { background: #2a1030 url("img/tile-mud.jpg"); background-size: 260px auto; background-blend-mode: multiply; color: #fff; border-color: #E8B04A; }
.shrine h2 { color: #E8B04A; text-shadow: 2px 2px 0 #000; }
.shrine h2 small { color: #f8d0d4; }
.shrine-in { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 14px; align-items: start; font-family: var(--comic); font-size: 15px; }
.shrine-in p { margin: 0 0 8px; }
.shrine .polaroid { margin: 0; color: #000; }
.polaroid.tilt { transform: rotate(2deg); }
.shrine .apply { margin-top: 10px; }
.shrine .apply a { color: #c00; font-weight: bold; }

/* buttons + closet */
.btn-title { margin: 0 0 6px; text-align: center; color: var(--yellow); font-family: var(--comic); font-weight: bold; }
.btn-title small { color: #bbb; font-weight: normal; }
.buttons .btn-row + .btn-row { margin-top: 8px; }
a.b88 { text-decoration: none; }
a.b88:hover { filter: brightness(1.15); }
.b-ig1 { background: var(--magenta); color: #fff !important; }
.b-ig1 b { color: #fff; font-weight: 900; }
.b-ig2 { background: #E8B04A; color: #000 !important; }
.b-ig2 b { color: #5A1E2E; }
.b-ig3 { background: #1F6B6B; color: #fff !important; }
.b-ig3 b { color: var(--cyan); }
.b-sign { background: var(--lime); color: #000 !important; border-color: var(--yellow); }
.b-sign b { color: #c00; }
.closet { margin-top: 12px; border-top: 2px dashed #444; padding-top: 10px; color: #fff; font-family: Arial, sans-serif; font-size: 13px; }

@media (max-width: 480px) {
  .shrine-in { grid-template-columns: minmax(0, 1fr); }
  .shrine .polaroid { max-width: 220px; margin: 0 auto 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .b-home { animation: none !important; }
  .polaroid, .polaroid.tilt { transform: none; }
}

/* ---------- round 3 ---------- */

/* the FDFF table video */
video { display: block; max-width: 100%; height: auto; background: #1a0f22; }
.shrine .vid { max-width: 200px; margin: 0 0 10px; }
.shrine .vid video { width: 100%; }
.polaroid.vid { transform: rotate(-2deg); }
.shrine-in { grid-template-areas: "a c" "b c"; }
.shrine-in > figure:nth-child(1) { grid-area: a; }
.shrine-in > figure:nth-child(2) { grid-area: b; }
.shrine-in > div { grid-area: c; }

/* real links read bigger than the decorative badges */
a.b88 { font-size: 12px; }

/* the moss-bed dot gets a thumb-sized hit area */
.construction .tca-gift { padding: 0 6px; margin: 0 -6px; }

@media (max-width: 760px) {
  /* office plant is decor: it waits below the content on phones */
  .layout { display: flex; flex-direction: column; gap: 10px; }
  .sidebar { display: contents; }
  .sidebar > nav, .sidebar > .gadgets {
    background: var(--stone) url("img/tile-mud.jpg"); background-size: 260px auto; background-blend-mode: multiply;
    border: 4px ridge var(--magenta); padding: 10px; color: #fff; font-family: var(--comic); font-size: 14px;
  }
  .sidebar > .gadgets { margin-top: 0; }
  main { order: 1; }
  .plant { order: 2; margin: 0; color: #000; font-family: var(--comic); font-size: 14px; }
  .best-viewed { order: 3; margin: 0; font-family: var(--comic); }
}

@media (max-width: 480px) {
  .shrine-in { grid-template-areas: "a" "b" "c"; }
  .shrine .vid { max-width: 220px; margin: 0 auto 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid.vid { transform: none; }
}

/* ---------- round 4 ---------- */

/* the midi player works now (it was never a midi) */
.midi-ctrls button {
  flex: 1; min-width: 0; min-height: 32px; padding: 1px 0;
  font: 13px/1 Arial, sans-serif; color: #000; cursor: pointer;
  border: 2px outset #eee; background: #d4d0c8;
}
.midi-ctrls button:active { border-style: inset; }
.midi-ctrls button:hover { background: var(--yellow); }
.midi button:focus-visible, .cp7 button:focus-visible, .cp7 video:focus-visible { outline: 2px dotted #000; outline-offset: 1px; }
.midi .status { background: #fff; border: 2px inset #eee; padding: 2px 4px; min-height: 2.6em; }

/* the Cryptid Player 7 window: floats bottom right, never covers the whole page */
.cp7 {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: min(250px, calc(100vw - 32px));
  background: #c0c0c0; color: #000;
  border: 3px outset #eee; box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  padding: 0 4px 4px;
  font: 12px/1.35 Arial, sans-serif;
}
.cp7[hidden] { display: none; }
.cp7 p { margin: 0; }
.cp7-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0 -4px 4px !important; padding: 2px 3px 2px 6px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold;
}
.cp7-x {
  flex: none; width: 24px; height: 22px; padding: 0; cursor: pointer;
  font: bold 13px/1 Arial, sans-serif; color: #000; background: #c0c0c0; border: 2px outset #eee;
}
.cp7 video {
  width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: min(58vh, 420px);
  object-fit: contain; background: #000; border: 2px inset #eee;
}
.cp7-credit { margin-top: 4px !important; font-weight: bold; }
.cp7-fine { font-size: 11px; color: #333; }

/* staff wall additions */
.card.kaakahu { border-color: #7A5BB0; background: #f6f0ff; }
.card.kaakahu .ribbon { background: #7A5BB0; }
.card.kaakahu img { object-fit: cover; }
.via { font-family: var(--comic); font-size: 12px; color: #555; }
.shrine .via, .buttons .via { color: #bbb; }

/* past exhibition archive */
.archive-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; align-items: start; }
.archive-row figure { margin: 0; background: #fff; border: 4px ridge #7A5BB0; padding: 6px; }
.archive-row img { display: block; width: 100%; }
.stamp-past { display: inline-block; font: bold 12px/1.2 var(--type); color: #c00; border: 2px solid #c00; padding: 1px 6px; transform: rotate(-3deg); }

/* HOH badge in the follow box */
.hoh-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; }
.hoh-badge a { display: block; border: 2px outset #999; line-height: 0; }
.hoh-badge a:hover { background: none; filter: brightness(1.2); }
.hoh-badge img { width: 88px; height: 88px; }

@media (max-width: 480px) {
  .archive-row { grid-template-columns: minmax(0, 1fr); }
  .archive-row figure { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .stamp-past { transform: none; } }

/* training tape: the loudest button in the office */
.vhs-btn { margin: 0 0 10px; text-align: center; }
.b-vhs {
  font-size: 12px !important; font-weight: bold; background: #000; color: var(--lime) !important;
  border: 3px outset var(--magenta) !important; text-decoration: none; padding: 4px 8px !important;
  animation: blink3 .9s steps(1) infinite;
}
.b-vhs b { color: var(--yellow); }
@keyframes blink3 { 50% { background: var(--magenta); } }
@media (prefers-reduced-motion: reduce) { .b-vhs { animation: none; } }
.gadgets .vhs-btn { grid-column: 1 / -1; }
.shrine-in p a { color: var(--yellow); }