/* ============================================
   SIDE-QUESTS PLAYGROUND
   Loaded only by side-quests.html, on top of style.css.
   Playful accents (use sparingly): yellow, coral, lime.
============================================ */
.side-quests-page, body[data-page="side-quests"] {
  /* Side Quests is the playful corner of the site: it is allowed colours beyond the brand palette */
  --sq-yellow: #ffd23f;
  --sq-coral: #ff6b5a;
  --sq-lime: #b8f53a;
  --sq-violet: #8b6cff;
  --sq-pink: #ff8fc8;
  --sq-yellow-soft: #fff0b8;
  --sq-coral-soft: #ffd9d3;
  --sq-lime-soft: #e3fbb4;
  --sq-violet-soft: #e4dcff;
}
@media (hover: hover) and (pointer: fine) {
  .sq2-dark, .sq2-dark a, .sq2-dark button { cursor: var(--cursor-hallows-light); }
}

/* Sticker-style pills */
.sq2-sticker {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  background: #fff;
  line-height: 1;
}
.sq2-sticker--yellow { background: var(--sq-yellow); }
.sq2-sticker--coral { background: var(--sq-coral); color: #fff; }
.sq2-sticker--lime { background: var(--sq-lime); }
.sq2-sticker--violet { background: var(--sq-violet); color: #fff; }
.sq2-sticker--pink { background: var(--sq-pink); }
.sq2-sticker--white { background: #fff; }

/* ---------- PART 1: gallery ---------- */
.sq2-gallery {
  background: var(--blue);
  position: relative;
  padding: 0;               /* the wheel section is exactly one screen tall, nothing spills below it */
  overflow: clip; /* not hidden: the wheel below is position: sticky */
}
.sq2-gallery-head {
  padding: 0 24px;
  max-width: var(--container);
  margin: 0 auto 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.sq2-label {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--sq-yellow);
  margin: 0;
}

/* ---------- PART 2: story ---------- */
.sq2-story {
  background: #fff;
  padding: clamp(64px, 9vw, 110px) 0 clamp(24px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.sq2-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.sq2-story-photo { position: relative; max-width: 420px; margin: 0 auto; width: calc(100% - 44px); }
.sq2-photo.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 34px 14px 34px 14px;
}
.sq2-photo-sticker { position: absolute; right: -10px; bottom: 22px; font-size: 0.85rem; padding: 9px 16px; z-index: 2; }
img.sq2-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 28px; margin: 0; box-shadow: 0 0 0 1.5px var(--periwinkle), 0 12px 34px -16px rgba(12, 0, 84, 0.3); }
.sq2-doodle { position: absolute; pointer-events: none; }

.sq2-story-heading {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--blue);
  margin: 0 0 clamp(28px, 4vw, 48px);
  text-align: center;
  white-space: nowrap;
}
.sq2-story-copy p { margin: 0 0 18px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--navy); max-width: 620px; }
.sq2-story-copy { position: relative; }
/* The sign that a word is interactive: a bold marker underline plus a pointer. */
.sq2-term {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0 1px;
  cursor: pointer;
  font-weight: 700;
  background-image: linear-gradient(var(--sq-yellow), var(--sq-yellow));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.42em;
  transition: background-size 0.2s ease, color 0.2s ease;
}
.sq2-term:hover, .sq2-term[aria-expanded="true"] { background-size: 100% 100%; }
.sq2-term:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.sq2-pop {
  position: absolute;
  z-index: 20;
  width: min(300px, 82vw);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 0 0 2px var(--periwinkle);
  padding: 12px 12px 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sq2-pop[hidden] { display: none; }
.sq2-pop.is-open { opacity: 1; transform: translateY(0); }
.sq2-pop-media.img-placeholder { width: 100%; aspect-ratio: 4 / 3; margin: 0; border-radius: 16px; }
img.sq2-pop-media { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-radius: 16px; }
.sq2-pop-body { padding: 12px 6px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sq2-pop-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.sq2-pop-desc { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.5 !important; color: rgba(12, 0, 84, 0.75) !important; }
.sq2-pop-link { font-weight: 700; font-size: 0.9rem; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.sq2-pop-link:hover { color: var(--navy); }

.sq2-story-kicker { font-weight: 700; font-size: 1.2rem !important; }
.sq2-story-kicker mark { background: var(--sq-yellow); color: var(--navy); padding: 2px 8px; border-radius: 8px; }

/* ---------- PART 4: closing ---------- */
.sq2-closing { margin-top: -1px; position: relative; background: var(--blue); color: #fff; padding: clamp(72px, 10vw, 128px) 0; text-align: center; }
.sq2-closing-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sq2-closing-heading {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 0.92;
  color: var(--sq-yellow);
  margin: 0;
  max-width: 900px;
}
.sq2-btn {
  display: inline-flex;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--sq-lime);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.sq2-btn:hover { transform: translateY(-3px); background: #fff; }
.sq2-btn:focus-visible, .sq2-social:focus-visible { outline: 3px solid var(--sq-yellow); outline-offset: 4px; }
.sq2-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.sq2-social {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.sq2-social::after { content: none !important; }
.sq2-social svg { width: 24px; height: 24px; }
.sq2-social:hover { background: var(--sq-coral); transform: translateY(-4px); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 900px) {
  .sq2-story-inner { grid-template-columns: 1fr; }
  .sq2-story-photo { max-width: 360px; }
}
@media (max-width: 640px) {
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sq2-btn { transform: none !important; }
  .sq2-btn, .sq2-social, .sq2-pop { transition: none; }
}

/* Copyright bar: a deeper shade so it reads as separate from the blue closing block (this page only). */
body[data-page="side-quests"] .contact-bar { background: var(--navy); color: #fff; }


/* ---------- Playful landing touches ---------- */
.sq2-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 80;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sq-yellow);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}
.sq2-cursor.is-on { opacity: 1; }

/* ---------- Interactive illustrations around the heading ---------- */
.sq2-illos { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 7; pointer-events: none; }
body[data-page="side-quests"] main { position: relative; }
.sq2-illo {
  position: absolute;
  width: 62px;
  height: 62px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.25s cubic-bezier(.3,1.7,.5,1);
}
.sq2-illo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sq2-illo:hover, .sq2-illo:focus-visible { transform: rotate(0deg) scale(1.18); }
.sq2-illo.is-held { cursor: grabbing; transform: rotate(0deg) scale(1.25); transition: none; }
.sq2-illo:focus-visible { outline: 3px solid var(--sq-yellow); outline-offset: 4px; border-radius: 12px; }
.sq2-illo.is-pop { animation: sq2-pop 0.7s ease; }
.sq2-illo--volley.is-pop { animation: sq2-bounce 0.9s cubic-bezier(.3,.1,.3,1); }
.sq2-illo--pill.is-pop, .sq2-illo--baton.is-pop { animation: sq2-spin 0.8s ease; }
.sq2-illo--book.is-pop svg { animation: sq2-flip 0.7s ease; }
.sq2-illo--cake.is-pop .flame { animation: sq2-blow 1.1s ease forwards; transform-origin: 40px 22px; }
.sq2-illo--camera.is-pop::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 70;
  animation: sq2-flash 0.5s ease;
}
@keyframes sq2-pop { 0%,100% { transform: rotate(var(--r,0deg)) scale(1); } 40% { transform: rotate(-12deg) scale(1.3); } 70% { transform: rotate(10deg) scale(.95); } }
@keyframes sq2-bounce { 0% { transform: translateY(0); } 25% { transform: translateY(-46px) rotate(120deg); } 50% { transform: translateY(0) rotate(240deg); } 70% { transform: translateY(-20px) rotate(300deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes sq2-spin { to { transform: rotate(360deg) scale(1); } }
@keyframes sq2-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1) skewY(6deg); } 100% { transform: scaleX(1); } }
@keyframes sq2-blow { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.3) skewX(18deg); } 60%,100% { transform: scale(0.1); opacity: 0; } }
@keyframes sq2-flash { 0% { opacity: 0; } 20% { opacity: 0.85; } 100% { opacity: 0; } }
.sq2-note { position: fixed; z-index: 90; pointer-events: none; font-size: 1.5rem; font-weight: 700; color: var(--sq-yellow); }
@media (max-width: 900px) {
  .sq2-illo { width: 46px; height: 46px; }
  .sq2-illo--book, .sq2-illo--cake, .sq2-illo--art { display: none; }
}
@media (max-width: 480px) { .sq2-illo--volley, .sq2-illo--camera { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sq2-illo, .sq2-illo.is-pop, .sq2-illo svg, .sq2-illo .flame { animation: none !important; transition: none; }
}

/* ---------- Now-playing bar ---------- */
.sq2-music {
  /* Sits in the page, right under the photos, and scrolls with it (not floating). */
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(300px, calc(100vw - 32px));
  margin: 22px auto 0;
  padding: 6px 8px 6px 6px;
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
}
.sq2-music-icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--sq-yellow);
  display: flex; align-items: center; justify-content: center;
}
.sq2-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.sq2-eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--navy); transform: scaleY(0.35); transform-origin: bottom; }
.sq2-music.is-playing .sq2-eq i { animation: sq2-eq 0.9s ease-in-out infinite; }
.sq2-eq i:nth-child(2) { animation-delay: 0.15s; } .sq2-eq i:nth-child(3) { animation-delay: 0.3s; } .sq2-eq i:nth-child(4) { animation-delay: 0.45s; }
@keyframes sq2-eq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.sq2-music-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sq2-music-text strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq2-music-text em { font-style: normal; font-size: 0.72rem; color: rgba(12, 0, 84, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq2-music-ctrl { flex: none; display: flex; align-items: center; gap: 2px; }
.sq2-music-ctrl button {
  width: 30px; height: 30px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sq2-music-ctrl button svg { width: 14px; height: 14px; }
.sq2-music-ctrl button:hover { background: var(--pale); }
.sq2-music-ctrl .sq2-play { width: 34px; height: 34px; background: var(--blue); color: #fff; }
.sq2-music-ctrl .sq2-play:hover { background: var(--navy); }
.sq2-music-ctrl .sq2-play svg { width: 16px; height: 16px; }
.sq2-play .i-pause { display: none; }
.sq2-music.is-playing .sq2-play .i-pause { display: block; }
.sq2-music.is-playing .sq2-play .i-play { display: none; }
.sq2-music-ctrl button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.sq2-yt-holder { position: fixed; left: -9999px; top: 0; width: 200px; height: 200px; overflow: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sq2-music.is-playing .sq2-eq i { animation: none; transform: scaleY(0.7); } }

/* ---------- Lightbox for gallery pictures ---------- */
.sq2-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(7, 0, 46, 0.86);
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.sq2-lb[hidden] { display: none; }
.sq2-lb.is-open { opacity: 1; }
.sq2-lb img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  transform: scale(0.88);
  transition: transform 0.35s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.sq2-lb.is-open img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .sq2-lb, .sq2-lb img { transition: none; } }

/* ---------- Ferris wheel gallery (port of the 21st.dev Ferris Wheel Gallery) ---------- */
.sq2-gallery { padding-top: 0; }
.sqw { position: relative; color: #fff; }
.sqw-pin {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 28px 32px;
  box-sizing: border-box;
}
.sqw-head { text-align: center; margin: 0 0 6px; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.sqw-mount { width: 100%; max-width: 1320px; margin: 0 auto; min-height: 0; }
.sqw-grid { display: grid; gap: 14px; align-items: center; position: relative; }
@media (min-width: 900px) { .sqw-grid { --g: clamp(40px, 8.33vw, 120px); --cw: max(200px, min(44vw, 620px, calc((100vw - 3 * var(--g) - 130px) / 2), calc(100svh - 300px))); grid-template-columns: var(--cw) var(--cw); justify-content: center; margin: -12px auto 0; gap: calc(var(--g) * 0.4); } .sqw-left { justify-self: end; } .sqw-detail { justify-self: start; } }

.sqw-stage {
  position: relative;
  margin: 0 auto 0 0;
  width: min(100%, 860px, calc(100svh - 314px));
  overflow: visible;
  border-radius: 24px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.sqw-stage.is-dragging { cursor: grabbing; }
@media (min-width: 900px) { .sqw-stage { margin: 0; width: var(--cw); } .sqw-hint { width: var(--cw); } }
@media (max-width: 899px) { .sqw-stage { margin: 0 auto; width: min(100%, 40svh); } }
.sqw-square { position: relative; aspect-ratio: 1; container-type: inline-size; }
.sqw-square::before {
  /* A plain blue disc behind the wheel, so the background lines don't run through its middle. */
  content: '';
  position: absolute;
  left: 14%; top: 4%; width: 72%; height: 72%;
  border-radius: 50%;
  background: var(--blue);
}
.sqw-stand { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.35); pointer-events: none; }
.sqw-wheel {
  position: absolute; left: 14%; top: 4%; width: 72%; height: 72%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  will-change: transform;
}
.sqw-ring2 { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); }
.sqw-light {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--sq-yellow); opacity: 0.8;
}
.sqw-spoke {
  position: absolute; left: 50%; top: 50%; width: 50%; height: 1px;
  transform-origin: left center; background: rgba(255, 255, 255, 0.22);
}
.sqw-anchor { position: absolute; width: 27%; z-index: 10; }
.sqw-counter { position: relative; transform-origin: top left; }
.sqw-hang { position: absolute; left: 0; top: 0; width: 100%; transform: translateX(-50%); }
.sqw-pendulum { position: relative; transform-origin: top center; }
.sqw-rope { display: block; width: 2px; height: 10px; margin: 0 auto; border-radius: 2px; background: rgba(255, 255, 255, 0.5); }
.sqw-car {
  position: relative; display: block; width: 100%;
  padding: 4px; border: 2px solid transparent; border-radius: 8px;
  background: #fff; color: var(--navy);
  box-shadow: 0 6px 14px -6px rgba(7, 0, 46, 0.55);
  cursor: inherit; font: inherit;
  transition: transform 0.32s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sqw-car.is-on { transform: scale(1.12); border-color: var(--sq-yellow); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35), 0 8px 18px -6px rgba(7, 0, 46, 0.6); z-index: 2; }
.sqw-car:focus-visible { outline: 2px solid var(--sq-yellow); outline-offset: 3px; }
.sqw-thumb { display: block; aspect-ratio: 1.15; overflow: hidden; border-radius: 4px; background: var(--periwinkle); }
.sqw-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sqw-hub {
  position: absolute; left: 50%; top: 40%; width: 14%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; color: var(--navy);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(7, 0, 46, 0.35);
  pointer-events: none;
}
.sqw-hub b { font-size: clamp(0.9rem, 3.4cqw, 1.3rem); font-weight: 600; line-height: 1; }
.sqw-hub i { margin-top: 3px; font-style: normal; font-size: clamp(5px, 1.4cqw, 8px); letter-spacing: 0.12em; font-weight: 600; color: var(--blue); }
.sqw-hint { margin: 2px 0 0; width: min(100%, 860px, calc(100svh - 314px)); text-align: center; font-size: 11px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 899px) { .sqw-hint { margin: 2px auto 0; } }

.sqw-left { min-width: 0; }
.sqw-detail { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
/* Fixed column (as wide as the widest picture, a square) so the wheel never shifts as pictures change shape. */
@media (min-width: 900px) { .sqw-detail { width: min(54svh, 560px, 34vw); } }
@media (max-width: 899px) { .sqw-detail { flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .sqw-name { order: -1; } }
/* The picture box takes each image's true shape (--ar = width / height), as large as fits. */
.sqw-photo {
  --ar: 1;
  position: relative; display: block; flex: none;
  width: min(calc(54svh * var(--ar)), 560px, 34vw);
  aspect-ratio: var(--ar);
  padding: 0; border: 0; overflow: hidden;
  border-radius: 18px; background: var(--periwinkle);
  box-shadow: 0 18px 40px -18px rgba(7, 0, 46, 0.6);
  cursor: default;   /* the big picture is for looking at, not for enlarging */
}
@media (max-width: 899px) {
  .sqw-photo { width: min(88%, calc(var(--fit-h, 36svh) * var(--ar))); }
  /* the first screen holds the whole gallery: it starts at the top, and the fixed music bar needs no spacer */
  .sqw-pin { justify-content: flex-start; padding-top: 72px; padding-bottom: 0; }
  .sqw-pin .sq2-music-slot { display: none; }
}
.sqw-photo span { position: absolute; inset: 0; }
.sqw-photo .sqw-photo-b { opacity: 0; } /* the previous picture, only shown while fading out */
.sqw-photo img { width: 100%; height: 100%; object-fit: cover; }
.sqw-photo:focus-visible { outline: 3px solid var(--sq-yellow); outline-offset: 3px; }
.sqw-name { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.05; color: var(--sq-yellow); }
@media (max-width: 899px) { .sqw-name { text-align: center; font-size: 1.25rem; } }
.sqw-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sqw-pin .sq2-music { margin: 12px auto 0; flex: none; }
@media (prefers-reduced-motion: reduce) { .sqw-car { transition: none; } }

/* "Listen to music with me" nudge above the player. */
.sq2-cta {
  display: flex; align-items: center; gap: 8px;
  margin: 12px auto 0; padding: 8px 16px;
  border: 0; border-radius: 999px;
  background: var(--sq-yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
}
.sq2-cta:hover { background: #fff; transform: translateY(-1px); }
.sq2-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sq2-cta svg { animation: sq2-nudge 1.4s ease-in-out infinite; }
.sq2-cta.is-quiet { opacity: 0; pointer-events: none; }
.sqw-pin .sq2-cta + .sq2-music { margin-top: 8px; }
@keyframes sq2-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sq2-cta svg { animation: none; } }

/* The music bar stays fixed at the bottom of the screen, always on top, like the navigation bar */
.sq2-music-slot { display: flex; justify-content: center; margin-top: 12px; }
.sq2-music-slot { min-height: 50px; }
body > .sq2-music {
  position: fixed;
  left: 50%;
  bottom: 22px;
  margin: 0;
  transform: translateX(-50%);
  z-index: 9990;
  box-shadow: 0 10px 30px rgba(7, 0, 46, 0.35);
}
/* leave room at the very bottom of the page so the bar never covers the footer's last line */
body[data-page="side-quests"] .signpost-footer { padding-bottom: 84px; }
body[data-page="side-quests"] .games { padding-bottom: 96px; }
@media (max-width: 640px) {
  body > .sq2-music { bottom: 14px; }
  /* the sound switch sits just above the music bar on phones */
  body[data-page="side-quests"] .fx-sound { bottom: 74px; }
}

/* ---------- On rotation: playlist + reading / watching / last article ---------- */
.sq2-rotation { background: #fff; padding: clamp(64px, 9vw, 110px) 0 clamp(64px, 9vw, 100px); }
.sq2-rotation-heading { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.9; color: var(--blue); }
.sq2-rotation-sub { margin: 12px auto 0; max-width: 520px; text-align: center; font-size: 1rem; line-height: 1.55; color: rgba(12, 0, 84, 0.72); }

.rot-grid { margin-top: clamp(32px, 5vw, 52px); display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.rot-grid > *, .rot-side > * { min-width: 0; }
@media (min-width: 960px) { .rot-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.rot-card {
  position: relative;
  padding: 22px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--periwinkle), 0 12px 34px -16px rgba(12, 0, 84, 0.2);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.rot-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.rot-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.rot-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.rot-dot--live { background: var(--periwinkle); color: var(--blue); }
.rot-dot--book { background: var(--blue); color: var(--blue); }
.rot-dot--show { background: var(--indigo); color: var(--indigo); }
.rot-dot--article { background: var(--navy); color: var(--navy); }
.rot-card:hover .rot-dot:not(.rot-dot--live)::after { animation: rot-ping 1.4s ease-out infinite; }
body.rot-playing .rot-dot--live { background: var(--blue); }
body.rot-playing .rot-dot--live::after { animation: rot-ping 1.4s ease-out infinite; }
@keyframes rot-ping { 0% { opacity: 0.6; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

/* playlist */
.rot-playlist { display: flex; flex-direction: column; min-height: 560px; }
.rot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rot-count { font-size: 0.78rem; font-weight: 600; color: rgba(12, 0, 84, 0.55); font-variant-numeric: tabular-nums; }
.rot-now { margin-top: 16px; padding: 14px; display: flex; align-items: center; gap: 14px; border-radius: 20px; background: var(--pale); }
.rot-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; transition: background-color 0.2s ease, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rot-play:hover { background: var(--indigo); scale: 1.06; }
.rot-play:active { scale: 0.92; }
.rot-play svg { width: 20px; height: 20px; }
.rot-play .i-pause { display: none; }
body.rot-playing .rot-play .i-pause { display: block; }
body.rot-playing .rot-play .i-play { display: none; }
.rot-now-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rot-now-kicker { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.rot-now-text strong { font-size: 1.05rem; line-height: 1.2; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-now-text em { font-style: normal; font-size: 0.85rem; color: rgba(12, 0, 84, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-shuffle { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 0 1.5px var(--periwinkle); transition: background-color 0.2s ease, color 0.2s ease, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rot-shuffle:hover { background: var(--blue); color: #fff; scale: 1.04; }
.rot-shuffle:active { scale: 0.94; }
.rot-shuffle svg { width: 17px; height: 17px; }
.rot-play:focus-visible, .rot-shuffle:focus-visible, .rot-row:focus-visible, .rot-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.rot-list { list-style: none; margin: 14px 0 0; padding: 0 6px 0 0; flex: 1 1 0; min-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--periwinkle) transparent; }
.rot-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--navy); font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s ease; }
.rot-row:hover { background: var(--pale); }
.rot-row-n { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pale); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(12, 0, 84, 0.7); }
.rot-row-t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rot-row-t strong { font-size: 0.95rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-row-t span { font-size: 0.8rem; color: rgba(12, 0, 84, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-eq { flex: none; display: none; align-items: flex-end; gap: 2px; height: 14px; }
.rot-eq i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; transform: scaleY(0.4); }
.rot-row.is-current { background: var(--blue); color: #fff; }
.rot-row.is-current .rot-row-n { background: #fff; color: var(--blue); }
.rot-row.is-current .rot-row-t span { color: rgba(255, 255, 255, 0.82); }
.rot-row.is-current .rot-eq { display: inline-flex; }
body.rot-playing .rot-row.is-current .rot-eq i { animation: rot-eq 1.1s ease-in-out infinite; }
body.rot-playing .rot-row.is-current .rot-eq i:nth-child(2) { animation-delay: -0.35s; }
body.rot-playing .rot-row.is-current .rot-eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes rot-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* reading / watching / last article */
.rot-side { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); }
.rot-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; }
.rot-item--article { grid-template-columns: 150px minmax(0, 1fr); }
@media (hover: hover) { .rot-item:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--blue), 0 20px 40px -18px rgba(0, 82, 255, 0.4); } }
.rot-cover { display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 20px; background: var(--pale); transition: background-color 0.3s ease; perspective: 600px; }
.rot-item:hover .rot-cover { background: var(--periwinkle); }
.rot-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 20px -6px rgba(12, 0, 84, 0.45); transition: transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.rot-cover--wide img { border-radius: 8px; }
@media (hover: hover) { .rot-item:hover .rot-cover img { transform: rotateY(-14deg) rotateX(3deg) scale(1.04); } }
.rot-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rot-body h3 { margin: 4px 0 0; font-size: 1.12rem; line-height: 1.22; font-weight: 700; color: var(--navy); }
.rot-body p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: rgba(12, 0, 84, 0.68); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rot-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rot-link:hover { background: var(--blue); scale: 1.04; }
.rot-link:active { scale: 0.94; }

@media (max-width: 959px) { .rot-side { grid-template-rows: none; } .rot-playlist { min-height: 0; } .rot-list { flex: none; max-height: 420px; } }
@media (max-width: 560px) {
  .rot-card { padding: 16px; border-radius: 22px; }
  .rot-now { flex-wrap: wrap; }
  .rot-now-text { flex-basis: calc(100% - 70px); }
  .rot-shuffle { width: 100%; justify-content: center; }
  .rot-item, .rot-item--article { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .rot-item--article .rot-cover { padding: 8px; }
  .rot-list { max-height: 340px; }
}
@media (prefers-reduced-motion: reduce) { .rot-card, .rot-cover img, .rot-play, .rot-shuffle, .rot-link { transition: none; } .rot-item:hover { transform: none; } .rot-item:hover .rot-cover img { transform: none; } .rot-dot::after, body.rot-playing .rot-row.is-current .rot-eq i { animation: none !important; } }

/* ---- controls beside the song name ---- */
.rot-ctrl { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.rot-skip { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; box-shadow: 0 0 0 1.5px var(--periwinkle); transition: background-color 0.2s ease, color 0.2s ease, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rot-skip:hover { background: var(--blue); color: #fff; scale: 1.08; }
.rot-skip:active { scale: 0.9; }
.rot-skip svg { width: 16px; height: 16px; }
.rot-skip:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 560px) { .rot-ctrl { order: 0; } .rot-now-text { flex-basis: calc(100% - 170px); } }

/* ---- bigger covers (all three the same width) ---- */
.rot-item, .rot-item--article { grid-template-columns: 170px minmax(0, 1fr); }
.rot-cover { padding: 12px; }
@media (max-width: 560px) { .rot-item, .rot-item--article { grid-template-columns: 124px minmax(0, 1fr); } .rot-cover { padding: 8px; } .rot-item--article .rot-cover { padding: 8px; } }

/* ---- the suggestion box ---- */
.rot-suggest { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 860px; padding: clamp(18px, 3vw, 26px); border-radius: 28px; background: var(--pale); text-align: center; }
.rot-suggest-title { margin: 0 0 14px; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; line-height: 1.25; color: var(--navy); }
.rot-suggest-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; gap: 10px; align-items: stretch; text-align: left; }
.rot-field { display: block; min-width: 0; }
.rot-field textarea, .rot-field input { width: 100%; height: 100%; box-sizing: border-box; padding: 13px 16px; border: 1.5px solid transparent; border-radius: 18px; background: #fff; color: var(--navy); font-family: inherit; font-size: 0.95rem; line-height: 1.4; resize: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.rot-field textarea::placeholder, .rot-field input::placeholder { color: rgba(12, 0, 84, 0.45); }
.rot-field textarea:focus, .rot-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.14); }
.rot-submit { padding: 0 26px; border: 0; border-radius: 18px; background: var(--blue); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rot-submit:hover:not(:disabled) { background: var(--indigo); scale: 1.03; }
.rot-submit:active:not(:disabled) { scale: 0.95; }
.rot-submit:disabled { opacity: 0.6; cursor: default; }
.rot-submit:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.rot-sr, .rot-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.rot-suggest-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 0.9rem; font-weight: 500; color: var(--navy); }
.rot-suggest-msg.is-ok { color: var(--blue); font-weight: 600; }
.rot-suggest-msg a { color: var(--blue); font-weight: 600; }
@media (max-width: 720px) { .rot-suggest-row { grid-template-columns: 1fr; } .rot-submit { padding: 14px 26px; } }

/* ---- the music bar steps aside while the playlist section is on screen ---- */
body > .sq2-music { transition: opacity 0.35s ease, transform 0.35s ease; }
body > .sq2-music.is-away { opacity: 0; transform: translate(-50%, 26px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body > .sq2-music { transition: none; } }

/* ================= adjustments ================= */
/* header: shuffle + count on the right; controls after the song name */
.rot-head-right { display: inline-flex; align-items: center; gap: 12px; }
.rot-head .rot-shuffle { padding: 7px 13px; font-size: 0.78rem; }
.rot-head .rot-shuffle svg { width: 15px; height: 15px; }
.rot-now { justify-content: space-between; }
.rot-now-text { order: 0; }
.rot-ctrl { order: 1; }
@media (max-width: 560px) { .rot-now { flex-wrap: nowrap; } .rot-now-text { flex: 1 1 0; flex-basis: auto; } .rot-head .rot-shuffle span { display: none; } .rot-head .rot-shuffle { padding: 8px; } .rot-skip { width: 34px; height: 34px; } .rot-play { width: 46px; height: 46px; } .rot-ctrl { gap: 4px; } .rot-now { padding: 12px; gap: 10px; } }

/* the three cards: back to their earlier size, with the pictures filling more of them */
.rot-side { gap: 18px; }
.rot-item { padding: 16px; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.rot-item .rot-cover { padding: 8px; }
.rot-item .rot-cover img { width: auto; height: auto; max-height: 146px; max-width: 100%; }
.rot-item--article .rot-cover img { width: 150px; max-height: none; }
@media (max-width: 560px) {
  .rot-item { padding: 12px; gap: 12px; }
  .rot-item .rot-cover img { max-height: 120px; }
  .rot-item--article .rot-cover img { width: 112px; }
}

/* the suggestion box: smaller */
.rot-suggest { max-width: 680px; padding: 14px 16px 12px; border-radius: 22px; margin-top: clamp(22px, 3vw, 30px); }
.rot-suggest-title { margin-bottom: 10px; font-size: 1rem; }
.rot-suggest-row { gap: 8px; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto; }
.rot-field textarea, .rot-field input { padding: 11px 14px; border-radius: 14px; font-size: 0.9rem; min-height: 44px; }
.rot-field textarea { overflow-y: auto; }
.rot-submit { padding: 0 20px; border-radius: 14px; font-size: 0.9rem; }
.rot-suggest-msg { margin-top: 8px; font-size: 0.85rem; }
@media (max-width: 720px) { .rot-suggest-row { grid-template-columns: 1fr; } .rot-submit { padding: 12px 20px; } }

.rot-head .rot-shuffle { width: auto; flex: none; justify-content: center; }
.rot-head .rot-count { white-space: nowrap; }
.rot-head { flex-wrap: nowrap; }


/* ---------- Colour on the On Repeat cards: each one gets its own ---------- */
.rot-dot--live { background: var(--sq-yellow); color: var(--sq-coral); }
.rot-dot--book { background: var(--sq-coral); color: var(--sq-coral); }
.rot-dot--show { background: var(--sq-violet); color: var(--sq-violet); }
.rot-dot--article { background: var(--sq-lime); color: var(--navy); }
.rot-now { background: var(--sq-yellow-soft); }
.rot-now-kicker { color: var(--sq-coral); }
.rot-play { background: var(--sq-coral); }
.rot-play:hover { background: var(--navy); }
.rot-shuffle:hover { background: var(--sq-lime); color: var(--navy); }
.rot-row-n { background: var(--sq-violet-soft); }
.rot-row:hover { background: var(--sq-yellow-soft); }
.rot-row.is-current { background: var(--sq-coral); }
.rot-row.is-current .rot-row-n { color: var(--sq-coral); }
.rot-item--book .rot-cover { background: var(--sq-yellow-soft); }
.rot-item--show .rot-cover { background: var(--sq-violet-soft); }
.rot-item--article .rot-cover { background: var(--sq-lime-soft); }
.rot-item--book:hover .rot-cover { background: var(--sq-yellow); }
.rot-item--show:hover .rot-cover { background: var(--sq-violet); }
.rot-item--article:hover .rot-cover { background: var(--sq-lime); }
.rot-item--book .rot-label, .rot-item--show .rot-label, .rot-item--article .rot-label { color: var(--navy); }

/* ---------- genre pills on the playlist rows ---------- */
.rot-genre { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; white-space: nowrap; background: var(--sq-violet-soft); color: var(--navy); }
.rot-genre:empty { display: none; }
.rot-genre[data-genre="Afrobeats"] { background: #ff6b5a; color: #fff; }
.rot-genre[data-genre="Afro-house"] { background: #8b6cff; color: #fff; }
.rot-genre[data-genre="Alté"] { background: #ff8fc8; color: #0c0054; }
.rot-genre[data-genre="Amapiano"] { background: #b8f53a; color: #0c0054; }
.rot-genre[data-genre="Highlife"] { background: #ffd23f; color: #0c0054; }
.rot-genre[data-genre="Pop"] { background: #8fd3ff; color: #0c0054; }
.rot-genre[data-genre="R&B"] { background: #ffb347; color: #0c0054; }
.rot-genre[data-genre="Indie"] { background: #7fe3c0; color: #0c0054; }
.rot-genre[data-genre="Folk"] { background: #e8cf9a; color: #0c0054; }
.rot-genre[data-genre="Latin"] { background: #ff4f7b; color: #fff; }
.rot-genre[data-genre="Dance"] { background: #0052ff; color: #fff; }
.rot-genre[data-genre="Hip-Hop"] { background: #0a00cb; color: #fff; }
.rot-genre[data-genre="Soul"] { background: #ffd9d3; color: #0c0054; }
.rot-genre[data-genre="Soundtrack"] { background: #e4dcff; color: #0c0054; }
.rot-genre[data-genre="Musical"] { background: #ffc2e2; color: #0c0054; }
.rot-genre[data-genre="Gospel"] { background: #e3fbb4; color: #0c0054; }
.rot-genre[data-genre="Ambient"] { background: #bfd4ff; color: #0c0054; }
.rot-genre[data-genre="Electronic"] { background: #5b3dff; color: #fff; }
.rot-genre[data-genre="J-Pop"] { background: #ff9ad5; color: #0c0054; }
@media (max-width: 480px) { .rot-genre { padding: 3px 8px; font-size: 0.6rem; } }
.rot-row.is-current .rot-genre { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.rot-genre[data-genre="Worship"] { background: #ffe7a3; color: #0c0054; }
.rot-genre[data-genre="Choral"] { background: #c9f0ff; color: #0c0054; }

/* phones: no music bar at the bottom (the music icon in the top bar does the job); desktop: no extra icon */
@media (max-width: 899px) {
  .sq2-music-slot, .sq2-cta, .sq2-cta-gap { display: none; }
}
@media (min-width: 900px) { body[data-page="side-quests"] .nav-player { display: none; } }
.sqw-hub { width: 13.5%; }
.sqw-hub i { margin: 0; font-size: clamp(7px, 2.8cqw, 12px); line-height: 1.15; letter-spacing: 0.06em; text-align: center; font-weight: 700; color: var(--blue); }
.sqw-hub .sqw-the { color: var(--navy); }   /* "THE" in the darkest blue of the palette */

/* ---------- every screen: "SIDE" and "QUESTS" run down either side of the wheel, level with each other ---------- */
.sqw-head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still there for screen readers */
.sqw-pin { padding-top: 66px; }
.sqw-side {
  display: block;
  position: absolute;
  top: 52%;   /* the middle of the ring of pictures (they hang below the ring's own middle) */
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--sq-yellow);
  pointer-events: none;
}
/* the words sit just outside the wheel, one on each side, on every screen */
.sqw-side--l { right: calc(50% + var(--cw) / 2 + var(--g) - 39px); }
/* the wheel and picture come closer together; the side words keep their place */
@media (min-width: 900px) { .sqw-side--l { transform: translateY(-50%); } }
.sqw-side--r { left: calc(50% + var(--cw) / 2 + 18px); }
/* "QUESTS" sits beside the picture on the right, with the same gap as "SIDE" has to the wheel, on laptop and PC screens */
.sqw-photo-wrap { position: relative; width: 100%; }
.sqw-photo-wrap .sqw-photo { margin: 0 auto; }
@media (min-width: 900px) {
  .sqw-photo-wrap { width: fit-content; margin: 0 auto; }
  .sqw-square > .sqw-side--r { display: none; }
  .sqw-photo-wrap > .sqw-side--photo { display: block; inset: auto; top: 50%; left: 100%; right: auto; transform: translate(var(--g), -50%); }
}
@media (max-width: 899px) {
  .sqw-photo-wrap > .sqw-side--photo { display: none; }
}
@media (max-width: 899px) {
  /* a narrower wheel leaves a clear band down each side for the words, away from the pictures and the screen edge */
  .sqw-stage { width: min(calc(100% - 44px), 40svh); }
  .sqw-side--l { right: auto; left: calc(22px - (100vw - 100%) / 2); }
  .sqw-side--r { left: auto; right: calc(22px - (100vw - 100%) / 2); }
}
/* smooth: the big picture glides to each new shape instead of jumping, and the name fades */
.sqw-photo { transition: width 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), aspect-ratio 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sqw-name { transition: opacity 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .sqw-photo, .sqw-name { transition: none; } }

/* the top bar's small music player (phones): song on the left, play / pause on the right */
.nav-player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  background: linear-gradient(150deg, rgba(238, 241, 251, 0.72) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(228, 233, 250, 0.72) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 2px var(--navy), 0 10px 24px rgba(10, 0, 84, 0.12), inset 0 1px 1.5px rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: var(--navy);
}
.nav-player-text { display: flex; flex-direction: column; min-width: 0; max-width: 92px; line-height: 1.15; }
.nav-player-text b { font-size: 0.74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-player-text i { font-style: normal; font-size: 0.64rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-player .nav-music { width: 34px; height: 34px; background: var(--blue); color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-player .nav-music svg { width: 15px; height: 15px; }
.nav-player .nav-music .i-pause { display: none; }
.nav-player .nav-music.is-on svg.i-play { display: none; }
.nav-player .nav-music.is-on svg.i-pause { display: block; }
.nav-player .nav-music.is-on .nav-eq { display: none; }
.nav-player .nav-music:hover { background: var(--indigo); }
@media (max-width: 899px) {
  body[data-page="side-quests"] .brand { font-size: 1.15rem; padding: 7px 14px; }
  body[data-page="side-quests"] .nav-actions { gap: 6px; }
}

.nav-player-next { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; margin-left: -6px; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
.nav-player-next svg { width: 14px; height: 14px; }
.nav-player-next:hover { background: rgba(0, 82, 255, 0.12); }
.nav-player { padding-right: 6px; }
.nav-player-text { max-width: 70px; }
@media (max-width: 899px) { .nav-player-text { max-width: 54px; } .nav-player { gap: 6px; padding-left: 12px; } .nav-player-text b { font-size: 0.7rem; } }
.sqw-hub .sqw-the { color: var(--navy); }

/* ---------- phones: the bar is a floating pill that folds into one icon (like the other pages) ---------- */
.sq2-close { display: none; }
@media (min-width: 0px) {
  body > .sq2-music { display: flex; bottom: 14px; left: 14px; transform: none; width: auto; max-width: calc(100vw - 28px); margin: 0; border-radius: 999px; padding: 6px 8px 6px 8px; touch-action: none; transition: padding 0.3s ease; }
  body > .sq2-music.is-gone { display: none; }
  body > .sq2-music .sq2-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
  body > .sq2-music .sq2-close svg { width: 12px; height: 12px; }
  body > .sq2-music.is-mini { padding: 5px; gap: 0; }
  body > .sq2-music.is-mini .sq2-music-text, body > .sq2-music.is-mini .sq2-music-ctrl { display: none; }
  body > .sq2-music.is-mini.is-playing { animation: sqMiniPulse 3.2s ease-in-out infinite; }
  body > .sq2-music.is-away { opacity: 0; pointer-events: none; transform: none; }
  body.rot-away #nav-music { visibility: hidden; }
}
@keyframes sqMiniPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(7, 0, 46, 0.35), 0 0 0 0 rgba(255, 210, 63, 0.42); } 50% { box-shadow: 0 10px 30px rgba(7, 0, 46, 0.35), 0 0 0 7px rgba(255, 210, 63, 0); } }
@media (prefers-reduced-motion: reduce) { body > .sq2-music.is-mini.is-playing { animation: none; } }

/* the folded icon: the same music-note icon as on the other pages, kept in the Side Quests yellow */
.sq2-music-icon .sq2-note { display: none; }
@media (min-width: 0px) {
  body > .sq2-music.is-mini .sq2-music-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--sq-yellow); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
  body > .sq2-music.is-mini .sq2-music-icon .sq2-eq { display: none; }
  body > .sq2-music.is-mini .sq2-music-icon .sq2-note { display: block; width: 18px; height: 18px; }
  body > .sq2-music.is-mini { border-radius: 999px; }
}
body > .sq2-music .sq2-music-icon .sq2-note { color: var(--navy); }
}

/* the doodles around the lore photo: things that are about me */
.sq2-doodle--dc { width: 50px; right: -24px; top: 42%; transform: rotate(8deg); filter: drop-shadow(0 4px 6px rgba(12, 0, 84, 0.25)); }


/* doodles round the lore photo (not in the site's blues): the bishop leans in from outside at the top left,
   a volleyball sits at the top right, and the DC Comics badge is on the right */
.sq2-doodle--bishop { width: 58px; left: -58px; top: 2px; transform: rotate(18deg); filter: drop-shadow(0 4px 6px rgba(74, 29, 61, 0.3)); }
.sq2-doodle--volley { width: 54px; right: -22px; top: -22px; transform: rotate(14deg); filter: drop-shadow(0 5px 7px rgba(74, 40, 10, 0.3)); }
.sq2-doodle--dc { width: 52px; right: -26px; top: 46%; transform: rotate(8deg); filter: drop-shadow(0 4px 6px rgba(12, 0, 84, 0.25)); }
@media (max-width: 900px) {
  .sq2-doodle--bishop { left: -12px; top: -6px; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff); }
  .sq2-doodle--volley { right: -10px; top: -22px; }
  .sq2-doodle--dc { right: -12px; }
}

/* round the lore photo: a bishop, a volleyball and a DC badge; each flips over to something else when hovered or tapped */
.sq2-doodle { display: none; }
.sq2-icon { position: absolute; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; -webkit-tap-highlight-color: transparent; }
.sq2-icon-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sq2-icon.is-flipped .sq2-icon-in { transform: rotateY(180deg); }
.sq2-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(20, 10, 40, 0.3)); }
.sq2-icon-back { transform: rotateY(180deg); }
.sq2-icon:focus-visible { outline: 3px solid var(--sq-yellow); outline-offset: 4px; border-radius: 12px; }
.sq2-icon--bishop { width: 72px; height: 88px; left: -74px; top: 8px; transform: rotate(78deg); }          /* base outside, head pointing in at me */
.sq2-icon--volley { width: 60px; height: 60px; right: -24px; top: -24px; transform: rotate(12deg); }
.sq2-icon--dc { width: 58px; height: 58px; right: -26px; top: 46%; transform: rotate(-6deg); }
@media (max-width: 900px) {
  .sq2-icon--bishop { left: -16px; top: 4px; width: 62px; height: 76px; }
  .sq2-icon--volley { right: -10px; top: -22px; }
  .sq2-icon--dc { right: -12px; }
}
@media (prefers-reduced-motion: reduce) { .sq2-icon-in { transition: none; } }

/* new arrangement: the bishop comes in from the top right, head pointing diagonally across the photo;
   the volleyball (a little smaller) is top left, the DC badge is on the left side */
.sq2-icon--bishop { left: auto; right: -56px; top: -46px; transform: rotate(225deg); }
.sq2-icon--volley { right: auto; left: -22px; top: -20px; width: 50px; height: 50px; transform: rotate(-12deg); cursor: default; }
.sq2-icon--dc { right: auto; left: -26px; top: 46%; transform: rotate(6deg); }
@media (max-width: 900px) {
  .sq2-icon--bishop { left: auto; right: -14px; top: -40px; }
  .sq2-icon--volley { left: -10px; right: auto; top: -22px; }
  .sq2-icon--dc { left: -12px; right: auto; }
}

/* bishop flips to a volleyball; DC sits on the left edge at the neck; the Eye of Elena / the HP mark stand upright in the old "that's me" spot */
.sq2-icon--dc { left: -32px; top: 62%; }
.sq2-icon--lore { right: -18px; bottom: 16px; width: 66px; height: 82px; transform: none; }
.sq2-icon--lore img { filter: drop-shadow(0 5px 8px rgba(20, 10, 40, 0.35)); }
@media (max-width: 900px) { .sq2-icon--dc { left: -14px; top: 62%; } .sq2-icon--lore { right: -10px; bottom: 14px; width: 56px; height: 72px; } }

/* nudges: DC / Marvel a little further left; the Eye of Elena / HP mark smaller and a little further right;
   the bishop (and its volleyball back, now smaller) a little lower */
.sq2-icon--dc { left: -44px; }
.sq2-icon--lore { right: -30px; width: 52px; height: 66px; }
.sq2-icon--bishop { top: -24px; }
.sq2-icon--bishop .sq2-icon-back { inset: 20%; width: 60%; height: 60%; }
@media (max-width: 900px) {
  .sq2-icon--dc { left: -22px; }
  .sq2-icon--lore { right: -18px; width: 46px; height: 58px; }
  .sq2-icon--bishop { top: -22px; }
}

/* the volleyball comes first (70% of its box) and flips to the chess bishop; DC / Marvel and the Eye of Elena / HP mark swap sides */
.sq2-icon--bishop .sq2-icon-front { inset: 15%; width: 70%; height: 70%; }
.sq2-icon--bishop .sq2-icon-back { inset: 0; width: 100%; height: 100%; }
.sq2-icon--dc { left: auto; top: auto; right: -30px; bottom: 16px; transform: rotate(-6deg); }
.sq2-icon--lore { right: auto; bottom: auto; left: -44px; top: 62%; }
@media (max-width: 900px) {
  .sq2-icon--dc { left: auto; top: auto; right: -18px; bottom: 14px; }
  .sq2-icon--lore { right: auto; bottom: auto; left: -22px; top: 62%; }
}

/* positions: the Eye of Elena / HP mark on the rounded top-left corner, DC / Marvel at the neck on the left,
   the volleyball / bishop halfway down the right-hand side */
.sq2-icon--lore { left: -12px; top: -20px; right: auto; bottom: auto; }
.sq2-icon--dc { left: -22px; top: 62%; right: auto; bottom: auto; }
.sq2-icon--bishop { right: -26px; top: calc(34% - 38px); left: auto; }

/* the volleyball / bishop sits on the left, halfway between the Eye of Elena mark and the DC badge,
   and the bishop points straight across, level, into the photo */
.sq2-icon--bishop { left: -50px; right: auto; top: calc(34% - 44px); transform: rotate(90deg); }
@media (max-width: 900px) { .sq2-icon--bishop { left: -26px; right: auto; top: calc(34% - 38px); } }

/* the volleyball / bishop now sits on the right-hand side, the bishop pointing straight across into the photo */
.sq2-icon--bishop { left: auto; right: -26px; top: calc(34% - 38px); transform: rotate(-90deg); }

/* Side Quests: the top music icon is hidden; the icon at the bottom is the one visitors use. */
body[data-page="side-quests"] #nav-music { display: none !important; }

/* the music bar expands inward from whichever side it sits on */
body > .sq2-music.is-right { left: auto; right: 14px; }

/* the bottom icon waits in the top bar until the first tap (js/music-keep.js); this hides it before the script runs */
html.mk-nav-pending body > .sq2-music { visibility: hidden; }