@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,700;1,700&family=Fredoka:wght@500;600;700&display=swap");

/* ------------------------------------------------------------------ */
/* noelray.ca: retro edition                                          */
/* ------------------------------------------------------------------ */

:root {
  --sky: #63c9f3;
  --sky-light: #b9e8fb;
  --cyan: #29b8f0;
  --blue: #1f7fe0;
  --blue-deep: #1450b8;
  --navy: #0b2f73;
  --ink: #12306b;
  --white: #ffffff;
  --cloud: #f2faff;
  --lime: #c3ef3f;
  --lime-dark: #86b81a;
  --yellow: #ffe23d;
  --orange: #ff9b1f;
  --pink: #ff3d97;
  --red: #e8322b;
  --bubble: "Fredoka", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  --body: Verdana, Tahoma, Geneva, sans-serif;
  --xp: Tahoma, Verdana, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    repeating-conic-gradient(#8fd8f0 0% 25%, #7bcfea 0% 50%)
      0 0 / 18px 18px,
    #85d4ee;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--blue-deep);
}

a:hover {
  color: var(--pink);
}

p {
  margin: 0 0 10px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--bubble);
  font-weight: 700;
  line-height: 1.05;
}

:focus-visible {
  outline: 3px dashed var(--pink);
  outline-offset: 3px;
}

.page {
  width: min(100% - 20px, 980px);
  margin: 16px auto 30px;
}

/* ------------------------------------------------------------------ */
/* Shell + masthead                                                   */
/* ------------------------------------------------------------------ */

.shell {
  overflow: hidden;
  border: 4px solid var(--orange);
  border-radius: 24px;
  background: #fff;
  box-shadow: 10px 10px 0 #1f4d8f;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 10px 7px 18px;
  border-bottom: 3px solid var(--yellow);
  background: #173a80;
  color: #fff;
}

.topbar-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6ff6a;
  box-shadow: 0 0 0 3px rgba(230, 255, 106, 0.25), 0 0 8px #e6ff6a;
  animation: blink-soft 1.4s steps(2) infinite;
}

.topbar-scroll {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ticker-track {
  display: inline-block;
  animation: ticker 40s linear infinite;
}

.ticker-track span {
  margin-right: 10px;
}

.ticker-track span::after {
  content: "//";
  margin-left: 10px;
  color: var(--yellow);
}

.ticker-track b {
  color: var(--yellow);
}

.topbar-scroll:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.modern-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font: 700 11px/1.4 "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.15s ease;
}

.modern-btn:hover {
  color: #fff;
  transform: rotate(-3deg) scale(1.06);
}

.masthead-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: center;
  overflow: hidden;
  padding: 26px 30px 22px;
  background:
    linear-gradient(160deg, transparent 52%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.5) 100%),
    #74d4f0;
}

.rays {
  position: absolute;
  width: 220px;
  height: 220px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%, #000 48%, transparent 70%);
  mask: radial-gradient(circle, transparent 18%, #000 19%, #000 48%, transparent 70%);
  pointer-events: none;
}

.rays-tl {
  top: -110px;
  left: -110px;
}

.rays-br {
  right: -90px;
  bottom: -110px;
}

.sun {
  position: absolute;
  top: -50px;
  right: 70px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #f7ef4a;
  pointer-events: none;
}

.masthead-brand,
.masthead-side {
  position: relative;
  z-index: 1;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  padding: 12px 34px 18px 28px;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #f02e98, #c8177f 55%, #a8136c);
  box-shadow: 7px 7px 0 #1f3f86;
  text-decoration: none;
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}

.logo:hover {
  transform: rotate(-1deg) scale(1.02);
}

.logo-text {
  color: #fff;
  font-family: "Arial Black", "Archivo Black", Impact, sans-serif;
  font-size: clamp(2.6rem, 8vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  text-shadow: 3px 3px 0 #33c9f4, 5px 5px 0 #1f3f86;
}

.logo-tld {
  margin-left: 4px;
  color: var(--yellow);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-style: italic;
  font-weight: 700;
  text-shadow: 2px 2px 0 #1f3f86;
}

.tagline {
  margin: 20px 0 0 28px;
  color: var(--navy);
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.masthead-side {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.oval {
  display: grid;
  place-items: center;
  width: 190px;
  min-height: 92px;
  padding: 12px 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #6d2fa3;
  box-shadow: 5px 5px 0 #1f3f86;
  color: #fff;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transform: rotate(-6deg);
  transition: transform 0.2s ease;
}

.oval:hover {
  color: var(--yellow);
  transform: rotate(2deg) scale(1.05);
}

.search {
  position: relative;
  width: 230px;
  overflow: visible;
  border: 3px solid #6d2fa3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 4px 4px 0 #1f3f86;
}

.search label {
  display: block;
  margin: -3px -3px 0;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(#38b6f2, #1f7fe0);
  color: #fff;
  font: 700 12px/1.3 "Arial Black", "Archivo Black", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
}

.search-row {
  display: flex;
  gap: 4px;
  padding: 7px;
}

.search input {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  border: 2px inset #9ccbe8;
  background: #fff;
  color: var(--ink);
  font: 12px var(--body);
}

.search button {
  display: grid;
  place-items: center;
  width: 28px;
  border: 2px solid #b8121a;
  border-radius: 6px;
  background: linear-gradient(#ff7a6e, var(--red));
  color: #fff;
  cursor: pointer;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 290px;
  margin: 0;
  padding: 6px;
  border: 3px solid var(--blue);
  border-radius: 10px;
  background: #fff;
  box-shadow: 4px 6px 0 rgba(11, 47, 115, 0.35);
  list-style: none;
}

.search-results[hidden] {
  display: none;
}

.search-results a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
}

.search-results a:hover,
.search-results a:focus-visible {
  background: var(--sky-light);
}

.search-results strong {
  display: block;
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Nav tabs                                                           */
/* ------------------------------------------------------------------ */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 3px solid #fff;
  border-bottom: 5px solid #1f3f86;
  background: linear-gradient(#ffc93c, #ffa21c);
}

.tab {
  flex: 1 1 120px;
  padding: 9px 10px 10px;
  border: 3px solid var(--yellow);
  border-radius: 12px;
  background: linear-gradient(180deg, #6fd8ff 0%, #2bb4ee 48%, #1592d8 100%);
  box-shadow: 0 4px 0 #1f3f86;
  color: #fff;
  font-family: "Arial Black", "Archivo Black", sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #1f3f86;
  transition: transform 0.15s ease;
}

.tab:hover,
.tab:focus-visible {
  color: #fff;
  transform: translateY(-3px) rotate(-1.5deg);
}

.tab:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #1f3f86;
}

[data-page="home"] .tab[href="index.html"],
[data-page="visuals"] .tab[href="visuals.html"],
[data-page="projects"] .tab[href="projects.html"],
[data-page="shelf"] .tab[href="shelf.html"],
[data-page="blog"] .tab[href="blog.html"] {
  background: linear-gradient(180deg, #ff5fb0, #e0207f 55%, #b8156a);
  transform: rotate(-2deg) translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* Frame + boxes                                                      */
/* ------------------------------------------------------------------ */

.frame {
  position: relative;
  padding: 26px 22px 30px;
  background:
    linear-gradient(var(--orange) 0 3px, #fff 3px 6px, var(--yellow) 6px 9px, #fff 9px 12px, var(--cyan) 12px 15px, transparent 15px)
      top / 100% 15px no-repeat,
    linear-gradient(#ffffff, var(--cloud));
}

.title {
  margin-bottom: 14px;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.title .t1 {
  color: var(--blue-deep);
}

.title .t2 {
  color: var(--lime-dark);
}

.title .t3 {
  color: var(--pink);
}

.box {
  overflow: hidden;
  border: 3px solid var(--cyan);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(31, 127, 224, 0.25);
}

.box-head {
  margin: 0;
  padding: 7px 14px 8px;
  background: linear-gradient(#6fd6ff, var(--blue));
  color: #fff;
  font-family: var(--bubble);
  font-size: 1.2rem;
  font-weight: 700;
  text-shadow: 0 2px 0 var(--navy);
}

.box-head.is-lime {
  background: linear-gradient(#dcff7a, var(--lime-dark));
}

.box-head.is-pink {
  background: linear-gradient(#ff8cc6, var(--pink));
}

.box-head.is-orange {
  background: linear-gradient(#ffc56b, var(--orange));
}

.box-body {
  padding: 14px;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack {
  display: grid;
  gap: 20px;
  align-content: start;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 8px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(#ff7aa8, var(--red));
  box-shadow: 0 3px 0 rgba(11, 47, 115, 0.35);
  color: #fff;
  font-family: var(--bubble);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn::before {
  content: "➜";
}

.btn:hover,
.btn:focus-visible {
  color: #fff;
  transform: translateY(-2px) scale(1.03);
}

.btn.is-blue {
  background: linear-gradient(#7fdcff, var(--blue));
}

.btn.is-lime {
  background: linear-gradient(#e4ff8a, var(--lime-dark));
  color: var(--navy);
  text-shadow: none;
}

.btn.is-steam {
  background: linear-gradient(#3d5a7a, #171a21);
  border-color: #66c0f4;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stars {
  color: var(--yellow);
  font-size: 1rem;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 var(--navy);
}

.burst {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 100% 68%, 79% 72%, 82% 94%, 62% 84%, 50% 100%, 38% 84%, 18% 94%, 21% 72%, 0% 68%, 14% 52%, 0% 36%, 20% 30%, 18% 8%, 39% 18%);
  color: var(--red);
  font-family: var(--bubble);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  animation: burst-spin 4s ease-in-out infinite;
}

@keyframes burst-spin {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.08); }
}

/* ------------------------------------------------------------------ */
/* TV photo player                                                    */
/* ------------------------------------------------------------------ */

.tv {
  position: relative;
}

.tv-bezel {
  position: relative;
  padding: 14px;
  border: 4px solid #d4c600;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff794, var(--yellow) 40%, #f2c900);
  box-shadow: 0 5px 0 rgba(11, 47, 115, 0.35);
}

.tv-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 4px solid #2a2a2a;
  border-radius: 10px;
  background: #000;
}

.tv-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.tv-screen img.is-on {
  opacity: 1;
}

.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.tv-live {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  color: var(--red);
  font-family: var(--bubble);
  font-size: 1.6rem;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 2px 0 #000;
  animation: blink-soft 1.6s steps(2) infinite;
}

.tv-mark {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--bubble);
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

.tv-caption {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 2;
  max-width: 70%;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 2px #000;
}

@keyframes blink-soft {
  50% { opacity: 0.35; }
}

.tv-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 3px solid #0f0f0f;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, #2c2c2c 0 3px, #161616 3px 6px);
}

.tv-buttons {
  display: flex;
  gap: 5px;
}

.tv-buttons button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 2px solid var(--pink);
  border-radius: 8px;
  background: linear-gradient(#5b2a8a, #2c0f4d);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.tv-buttons button:hover {
  background: linear-gradient(var(--pink), #9b145a);
}

.tv-progress {
  height: 12px;
  overflow: hidden;
  border: 2px solid #555;
  border-radius: 999px;
  background: #0b0b0b;
}

.tv-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #4cff6a, var(--lime));
}

.tv-time {
  padding: 2px 8px;
  border: 2px solid #3a0000;
  border-radius: 6px;
  background: #1a0000;
  color: #ff3a2a;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 1px;
}

.click-to-play {
  position: absolute;
  top: 38%;
  left: -26px;
  z-index: 3;
  color: #fff;
  font-family: var(--bubble);
  font-size: 1.05rem;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 2px 0 var(--navy);
  transform: rotate(-24deg);
}

.click-to-play::before {
  content: "";
  position: absolute;
  inset: -6px -12px;
  z-index: -1;
  border-radius: 12px;
  background: var(--pink);
}

.rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 3px solid var(--lime);
  border-radius: 14px;
  background: #fff;
}

.rate-label {
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-weight: 700;
}

.rate-stars {
  display: flex;
}

.rate-stars button {
  padding: 0 2px;
  border: 0;
  background: none;
  color: #c9dff0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}

.rate-stars button.is-lit {
  color: var(--pink);
}

.rate-stars button:hover {
  transform: scale(1.25);
}

.rate-msg {
  min-width: 90px;
  color: var(--lime-dark);
  font-family: var(--bubble);
  font-weight: 700;
}

.vote {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lime-dark);
  color: #fff;
  font-family: var(--bubble);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(11, 47, 115, 0.35);
  transform: rotate(-12deg);
}

/* ------------------------------------------------------------------ */
/* Highlights panel + signposts                                       */
/* ------------------------------------------------------------------ */

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

.highlights {
  position: relative;
  max-height: 382px;
  overflow-y: auto;
  padding: 6px 30px 6px 14px;
  border: 4px solid var(--lime);
  border-radius: 14px;
  background: linear-gradient(170deg, #2a6fe0, var(--blue-deep) 60%, #0e3d97);
  color: #fff;
  scrollbar-color: #c0c8d0 #e8f4ff;
}

.highlights::-webkit-scrollbar {
  width: 20px;
}

.highlights::-webkit-scrollbar-track {
  background: repeating-linear-gradient(0deg, #f5f5f5 0 4px, #bfc7cf 4px 6px);
  border-left: 3px solid var(--lime);
}

.highlights::-webkit-scrollbar-thumb {
  border: 3px solid #8a939c;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffffff, #b9c2ca);
}

.hl-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--yellow);
  color: #fff;
  text-decoration: none;
}

.hl-item:last-child {
  border-bottom: 0;
}

.hl-item img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 4px;
  transition: transform 0.15s ease;
}

.hl-item:hover {
  color: #fff;
}

.hl-item:hover img {
  transform: rotate(-3deg) scale(1.05);
}

.hl-item strong {
  display: block;
  font-family: var(--bubble);
  font-size: 1.12rem;
  line-height: 1.15;
}

.hl-item:hover strong {
  color: var(--yellow);
}

.hl-item span {
  display: block;
  margin: 3px 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.92;
}

.hl-new {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--pink);
  font-family: var(--bubble);
  font-size: 0.72rem;
  vertical-align: middle;
  animation: blink-soft 1s steps(2) infinite;
}

.signpost {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 10px 0 30px;
}

.signpost::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58px;
  width: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e6e6e6, #9aa3ab);
}

.sign {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 6px 10px 6px 22px;
  background: linear-gradient(#e4ff8a, var(--lime-dark));
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%);
  color: var(--navy);
  font-family: var(--bubble);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(0 3px 0 rgba(11, 47, 115, 0.35));
  transition: transform 0.15s ease;
}

.sign:nth-child(1) {
  background: linear-gradient(#ffc56b, var(--orange));
  color: #fff;
  text-shadow: 0 1px 0 var(--navy);
  transform: rotate(-6deg);
}

.sign:nth-child(2) { transform: rotate(4deg); }
.sign:nth-child(3) { transform: rotate(-3deg); }

.sign:hover {
  color: var(--navy);
  transform: rotate(0) translateX(-4px);
}

.sign:nth-child(1):hover {
  color: #fff;
}

.link-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.link-strip a {
  padding: 4px 10px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: linear-gradient(#ff7a6e, var(--red));
  color: #fff;
  font-family: var(--bubble);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(11, 47, 115, 0.3);
}

.link-strip a::before {
  content: "➜ ";
}

.link-strip a:hover {
  color: var(--yellow);
}

/* ------------------------------------------------------------------ */
/* Home extras                                                        */
/* ------------------------------------------------------------------ */

.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 26px;
  align-items: start;
}

.home-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  margin-top: 26px;
}

.postcard {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 190px;
  padding: 18px 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #a8e9ff, var(--cyan));
  box-shadow: 0 5px 0 rgba(11, 47, 115, 0.3);
  color: var(--navy);
  text-align: center;
  text-decoration: none;
  transform: rotate(-3deg);
  transition: transform 0.15s ease;
}

.postcard:hover {
  color: var(--navy);
  transform: rotate(0) scale(1.03);
}

.postcard b {
  display: block;
  color: var(--pink);
  font-family: var(--bubble);
  font-size: 1.7rem;
  line-height: 1;
}

.postcard em {
  display: block;
  margin: 4px 0;
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
}

.postcard u {
  font-size: 12px;
}

.now-reading-mini {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.now-reading-mini img {
  width: 70px;
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 rgba(11, 47, 115, 0.3);
  transform: rotate(-4deg);
}

.now-reading-mini strong {
  display: block;
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-size: 1.1rem;
  line-height: 1.1;
}

.counter {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.counter b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 22px;
  border-radius: 3px;
  background: #111;
  color: var(--lime);
  font-family: "Courier New", monospace;
  font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Inner page bits                                                    */
/* ------------------------------------------------------------------ */

.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
}

.page-intro p {
  max-width: 62ch;
  margin: 0;
}

.album-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: -3px;
  padding-left: 12px;
}

.album-tabs button {
  position: relative;
  padding: 7px 16px 8px;
  border: 3px solid var(--cyan);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(#e4f6ff, #b9e3f8);
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.album-tabs button[aria-selected="true"] {
  z-index: 1;
  background: #fff;
  color: var(--pink);
}

.album {
  padding: 18px;
  border: 3px solid var(--cyan);
  border-radius: 0 16px 16px 16px;
  background: #fff;
}

.album[hidden] {
  display: none;
}

.album > p {
  margin-bottom: 16px;
}

.polaroids {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 18px;
}

.polaroid {
  margin: 0;
  padding: 8px 8px 10px;
  border: 1px solid #d9e8f2;
  background: #fff;
  box-shadow: 2px 4px 8px rgba(11, 47, 115, 0.22);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform 0.15s ease;
}

.polaroid:nth-child(even) {
  --tilt: 1.8deg;
}

.polaroid:nth-child(3n) {
  --tilt: -0.8deg;
}

.polaroid:hover {
  z-index: 2;
  transform: rotate(0) scale(1.05);
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
}

.polaroid figcaption {
  padding-top: 8px;
  color: var(--ink);
  font-family: var(--bubble);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.project + .project {
  margin-top: 30px;
}

.project-logo {
  margin-bottom: 8px;
  font-size: clamp(2.6rem, 7vw, 4rem);
  letter-spacing: 0.01em;
}

.marco-logo span {
  display: inline-block;
  text-shadow: 0 4px 0 var(--navy);
}

.marco-logo span:nth-child(1) { color: #3b6cf6; transform: rotate(-5deg); }
.marco-logo span:nth-child(2) { color: var(--orange); transform: rotate(4deg); }
.marco-logo span:nth-child(3) { color: var(--pink); transform: rotate(-3deg); }
.marco-logo span:nth-child(4) { color: #6fd23d; transform: rotate(5deg); }
.marco-logo span:nth-child(5) { color: var(--yellow); transform: rotate(-4deg); }

.safis-logo {
  color: var(--navy);
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.safis-logo span {
  color: var(--cyan);
}

.feature-list {
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding: 3px 0 3px 26px;
}

.feature-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--pink);
  font-size: 1.1rem;
}

.shot-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shot-stack img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(11, 47, 115, 0.3);
  cursor: zoom-in;
}

.shot-stack img:first-child {
  grid-column: 1 / -1;
}

.retro-table {
  width: 100%;
  border: 3px solid var(--blue);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
}

.retro-table th,
.retro-table td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}

.retro-table th {
  width: 36%;
  background: linear-gradient(#6fd6ff, var(--blue));
  color: #fff;
  font-family: var(--bubble);
  font-size: 1rem;
  font-weight: 600;
}

.retro-table tr:nth-child(even) td {
  background: #e8f6ff;
}

.retro-table tr + tr th,
.retro-table tr + tr td {
  border-top: 2px solid #fff;
}

/* Shelf */

.now-reading {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 22px;
  border: 4px solid var(--lime);
  border-radius: 20px;
  background: linear-gradient(160deg, #2a6fe0, var(--blue-deep));
  color: #fff;
}

.now-reading img {
  width: 100%;
  border: 4px solid #fff;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
}

.now-reading .burst {
  top: -22px;
  left: -22px;
}

.now-reading h2 {
  margin-bottom: 4px;
  color: var(--yellow);
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 3px 0 var(--navy);
}

.now-reading .by {
  margin-bottom: 12px;
  font-family: var(--bubble);
  font-size: 1.3rem;
}

.shelf {
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: 12px;
  padding: 26px 16px 0;
  overflow-x: auto;
}

.shelf button {
  flex: 0 0 auto;
  height: 176px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.shelf button img {
  width: auto;
  height: 100%;
  box-shadow: 4px 4px 0 rgba(11, 47, 115, 0.35);
}

.shelf button:hover,
.shelf button[aria-pressed="true"] {
  transform: translateY(-14px) rotate(-2deg);
}

.shelf-board {
  height: 20px;
  border: 3px solid var(--navy);
  border-radius: 6px;
  background: linear-gradient(#5aa0f0, var(--blue-deep));
  box-shadow: 0 6px 0 rgba(11, 47, 115, 0.3);
}

.book-info {
  margin-top: 22px;
}

.book-info[hidden] {
  display: none;
}

.book-info h3 {
  color: var(--blue-deep);
  font-size: 1.5rem;
}

.book-info .by {
  margin-bottom: 6px;
  color: var(--pink);
  font-family: var(--bubble);
  font-weight: 700;
}

/* Blog */

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

.entry {
  margin-bottom: 22px;
}

.entry-date {
  display: inline-block;
  margin-bottom: -3px;
  margin-left: 12px;
  padding: 3px 14px;
  border: 3px solid var(--cyan);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--bubble);
  font-weight: 700;
}

.entry .box-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
}

.entry .box-body img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(11, 47, 115, 0.3);
}

.entry h2 {
  margin-bottom: 6px;
  font-size: 1.6rem;
}

.entry h2 a {
  color: var(--blue-deep);
  text-decoration: none;
}

.entry h2 a:hover {
  color: var(--pink);
}

.entry-more {
  font-weight: 700;
}

.side-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-list li {
  padding: 5px 0;
  border-bottom: 1px dotted #9ccbe8;
}

.side-list li:last-child {
  border-bottom: 0;
}

.side-list li::before {
  content: "» ";
  color: var(--pink);
  font-weight: 700;
}

.under-construction {
  padding: 10px;
  border: 3px dashed #222;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, #222 14px 28px);
  text-align: center;
}

.under-construction span {
  display: inline-block;
  padding: 4px 10px;
  background: var(--yellow);
  color: #222;
  font-family: var(--bubble);
  font-weight: 700;
}

/* Post pages */

.post-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  border: 4px solid var(--lime);
  border-radius: 20px;
  background: linear-gradient(160deg, #2a6fe0, var(--blue-deep));
  color: #fff;
}

.post-head h1 {
  margin: 6px 0 10px;
  color: var(--yellow);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  text-shadow: 0 4px 0 var(--navy);
}

.post-head img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid #fff;
  border-radius: 10px;
  transform: rotate(2deg);
}

.post-meta {
  color: var(--sky-light);
  font-family: var(--bubble);
  font-weight: 600;
}

.post-body {
  display: grid;
  gap: 24px;
}

.post-body > p,
.post-section > p {
  max-width: 70ch;
}

.post-section h2 {
  margin-bottom: 10px;
  color: var(--blue-deep);
  font-size: 1.8rem;
}

.post-section h2 span {
  color: var(--pink);
}

/* ------------------------------------------------------------------ */
/* XP-style pop-up window                                             */
/* ------------------------------------------------------------------ */

.xp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(11, 47, 115, 0.55);
}

.xp-overlay[hidden] {
  display: none;
}

.xp {
  width: min(100%, 900px);
  border: 3px solid #0831a3;
  border-radius: 9px 9px 3px 3px;
  background: #ece9d8;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--xp);
  animation: xp-pop 0.18s ease-out;
}

.xp-small {
  width: min(100%, 360px);
}

@keyframes xp-pop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.xp-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 4px 8px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #3d95ff 0%, #0a64e8 12%, #0757d6 50%, #0a4fc4 90%, #0848b8 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #0a2a7a;
}

.xp-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: linear-gradient(#f0866b, #d9411e);
  color: #fff;
  font: 700 14px/1 var(--xp);
  cursor: pointer;
}

.xp-close:hover {
  background: linear-gradient(#ff9e85, #e8502c);
}

.xp-body {
  padding: 10px;
}

.xp-body img {
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border: 2px inset #c9c5b3;
}

.xp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 10px;
  font-size: 12px;
}

.xp-btn {
  min-width: 76px;
  padding: 3px 10px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #ecebe6 60%, #d6d0c5);
  color: #000;
  font: 12px var(--xp);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.xp-btn:hover {
  box-shadow: inset 0 0 0 2px #f8b636;
  color: #000;
}

.xp-msg {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 14px 8px;
  font-size: 13px;
}

.xp-msg-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fd0ff, #1a63d8);
  color: #fff;
  font: 700 20px/1 Georgia, serif;
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */

.site-foot {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 0 var(--navy);
}

.site-foot a {
  color: #fff;
  font-weight: 700;
}

.site-foot a:hover {
  color: var(--yellow);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.badge {
  display: inline-grid;
  place-items: center;
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  font: 700 10px/1.05 var(--xp);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}

.badge-1 { background: linear-gradient(90deg, var(--navy), var(--blue)); color: #fff; }
.badge-2 { background: linear-gradient(#3d5a7a, #171a21); color: #66c0f4; }
.badge-3 { background: repeating-linear-gradient(45deg, var(--yellow) 0 6px, #ffd000 6px 12px); color: #000; }
.badge-4 { background: #000; color: var(--lime); }

.site-foot .badge:hover {
  color: inherit;
  filter: brightness(1.15);
}

/* ------------------------------------------------------------------ */
/* Sparkle trail                                                      */
/* ------------------------------------------------------------------ */

.sparkle {
  position: fixed;
  z-index: 200;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  animation: sparkle-fade 0.8s ease-out forwards;
}

@keyframes sparkle-fade {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, 10px) scale(0.3) rotate(90deg); }
}

/* ------------------------------------------------------------------ */
/* Responsive + motion                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .masthead-body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .tagline {
    margin-left: 0;
  }

  .masthead-side {
    grid-auto-flow: column;
    align-items: center;
  }

  .home-top,
  .home-bottom,
  .project,
  .blog-layout,
  .post-head,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .now-reading {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .click-to-play {
    display: none;
  }
}

@media (max-width: 560px) {
  .tabs {
    gap: 8px;
    padding: 10px;
  }

  .tab {
    flex: 1 1 calc(33.333% - 8px);
    padding: 9px 4px 10px;
    font-size: 0.72rem;
  }

  .masthead-body {
    padding: 22px 14px 18px;
  }

  .masthead-side {
    grid-auto-flow: row;
  }

  .modern-btn {
    font-size: 10px;
  }

  .highlights-wrap {
    grid-template-columns: 1fr;
  }

  .signpost {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
  }

  .signpost::before {
    display: none;
  }

  .sign:nth-child(n) {
    transform: none;
  }

  .now-reading,
  .entry .box-body,
  .page-intro {
    grid-template-columns: 1fr;
  }

  .now-reading img {
    width: 150px;
  }

  .shelf button {
    height: 140px;
  }

  .frame {
    padding: 22px 12px 24px;
  }

  .postcard {
    border-radius: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* October additions: setup, shelf titles, WIP sticker                */
/* ------------------------------------------------------------------ */

.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

.setup-card {
  position: relative;
  padding: 14px;
  border: 3px solid var(--cyan);
  border-radius: 14px;
  background: linear-gradient(#ffffff, #eaf7ff);
}

.setup-card.is-main {
  border-color: var(--pink);
  background: linear-gradient(#fff3fa, #ffffff);
}

.setup-card h3 {
  color: var(--blue-deep);
  font-size: 1.35rem;
}

.setup-role {
  margin-bottom: 8px;
  color: var(--pink);
  font-family: var(--bubble);
  font-weight: 700;
}

.led {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 4px;
  font: 700 10px/1.6 "Courier New", monospace;
  vertical-align: middle;
}

.led.on { background: #0b3d1a; color: #4cff6a; }
.led.paper { background: #3d2a00; color: #ffc629; }
.led.off { background: #2a2a2a; color: #aaa; }

.shelf-title {
  margin-top: 26px;
  color: var(--blue-deep);
  font-size: 1.4rem;
}

.wip-sticker {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 10px, #ffd000 10px 20px);
  box-shadow: 0 4px 0 rgba(11, 47, 115, 0.35);
  color: var(--red);
  font-family: var(--bubble);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  transform: rotate(10deg);
  animation: burst-spin 4s ease-in-out infinite;
}

@media (max-width: 860px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared story structure: lede, beat, pull quote, closing reflection */

.post-lede {
  font-size: 1.05rem;
}

.post-lede::first-letter {
  float: left;
  padding: 4px 8px 0 0;
  color: var(--pink);
  font-family: var(--bubble);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 0.85;
}

.post-beat {
  color: var(--pink);
  font-family: var(--bubble);
  font-size: 1.8rem;
  font-weight: 700;
}

.post-quote {
  margin: 0 auto;
  padding: 18px 26px;
  border: 4px dashed var(--cyan);
  border-radius: 20px;
  background: #fffbe0;
  color: var(--blue-deep);
  font-family: var(--bubble);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-1deg);
}

.post-quote::before {
  content: "\201C";
  color: var(--pink);
}

.post-quote::after {
  content: "\201D";
  color: var(--pink);
}

.post-coda {
  padding: 16px 20px;
  border: 3px solid var(--lime);
  border-radius: 16px;
  background: linear-gradient(#ffffff, #f4fbe4);
  text-align: center;
}

.post-coda span {
  display: block;
  margin-bottom: 6px;
  color: var(--lime-dark);
  font-family: var(--bubble);
  font-size: 1.2rem;
  font-weight: 700;
}

.post-coda p {
  margin: 0;
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Featured photos, Ardalhoen, classified                             */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Seagram";
  src: url("fonts/seagram.ttf") format("truetype");
  font-display: swap;
}

.featured-retro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.featured-retro article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.featured-retro-meta {
  margin: 6px 0 0;
  color: var(--pink);
  font-family: var(--bubble);
  font-weight: 700;
}

.album-tabs small {
  font-size: 0.75em;
  opacity: 0.7;
}

.box-ardalhoen {
  border-color: #c6a45d;
  background: linear-gradient(#1a1712, #0d0f0f);
  color: #e9dfc5;
}

.box-ardalhoen .box-head {
  background: linear-gradient(#3a2a1c, #1a120d);
  color: #e9c97f;
  text-shadow: 0 2px 0 #000;
}

.box-ardalhoen a:not(.btn) {
  color: #e9c97f;
}

.ard-logo {
  color: #c6a45d;
  font-family: "Seagram", Georgia, serif;
  font-weight: 400;
  text-shadow: 0 3px 0 #000;
}

.box-ardalhoen .retro-table {
  border-color: #8c6635;
}

.box-ardalhoen .retro-table th {
  background: linear-gradient(#5a4126, #2a1d16);
  font-family: "Seagram", Georgia, serif;
}

.box-ardalhoen .retro-table td {
  background: #171918;
}

.box-ardalhoen .retro-table tr:nth-child(even) td {
  background: #211e19;
}

.ard-btn {
  border-color: #e9c97f;
  background: linear-gradient(#d6b46c, #8c6635);
  color: #120d08;
  font-family: "Seagram", Georgia, serif;
  text-shadow: none;
}

.ard-btn:hover {
  color: #120d08;
}

.box-classified {
  border-color: #222;
  cursor: not-allowed;
}

.box-classified .box-head {
  background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, #222 14px 28px);
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 4px #000;
}

.classified-body {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, #f2efe6 0 18px, #e8e4d8 18px 36px);
}

.classified-stamp {
  position: absolute;
  top: 50%;
  right: 6%;
  padding: 6px 16px;
  border: 5px solid var(--red);
  border-radius: 8px;
  color: var(--red);
  font-family: var(--bubble);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  opacity: 0.85;
  transform: translateY(-50%) rotate(-12deg);
}

.classified-domain {
  margin-bottom: 6px;
  color: #111;
  font-family: "Courier New", monospace;
  font-size: 1.6rem;
  font-weight: 700;
}

.redact {
  padding: 0 3px;
  background: #111;
  color: transparent;
  user-select: none;
}

.classified-denied-retro {
  margin: 10px 0 0;
  color: var(--red);
  font-family: "Courier New", monospace;
  font-weight: 700;
  animation: blink-soft 1s steps(2) infinite;
}

@media (max-width: 860px) {
  .featured-retro {
    grid-template-columns: 1fr;
  }

  .classified-stamp {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
    transform: rotate(-6deg);
  }
}

/* Shelf: book report pops up beside the book */

.book-info {
  position: absolute;
  z-index: 40;
  width: min(360px, calc(100% - 24px));
  margin: 0;
  overflow: visible;
  box-shadow: 6px 8px 0 rgba(11, 47, 115, 0.3);
  animation: xp-pop 0.18s ease-out;
}

.book-info .box-head {
  position: relative;
  border-radius: 12px 12px 0 0;
}

.book-info-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font: 700 14px/1 var(--xp);
  cursor: pointer;
}

.book-info .box-body {
  border-radius: 0 0 12px 12px;
  background: #fff;
}

.book-info::before {
  content: "";
  position: absolute;
  border: 12px solid transparent;
}

.book-info.is-right::before {
  top: var(--arrow-y, 34px);
  left: -27px;
  border-right-color: var(--cyan);
}

.book-info.is-left::before {
  top: var(--arrow-y, 34px);
  right: -27px;
  border-left-color: var(--cyan);
}

.book-info.is-below::before {
  top: -27px;
  left: calc(var(--arrow-x, 40px) - 12px);
  border-bottom-color: var(--cyan);
}

.book-label {
  margin: 10px 0 2px;
  color: var(--pink);
  font-family: var(--bubble);
  font-weight: 700;
}

.book-take {
  font-style: italic;
}