/* ===== RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== CUSTOM PROPERTIES ===== */
:root {
  --bg-color: #f5f3ef;
  --hex-fill: #faf9f6;
  --hex-border-color: #c8c4ba;
  --hex-border-width: 2px;
  --text-color: #2c2c2c;
  --text-muted: #888;
  --ghost-border-color: #d0cdc5;
  --ghost-label-color: #9e9a90;
  --ghost-label-hover: #5c5a55;
  --transition-duration: 0.6s;
  --label-fade-duration: 0.5s;
  --edge-angle: 72deg;
  --hex-left: 10%;
  --hex-right: 90%;
}

/* ===== BODY ===== */
body {
  background: var(--bg-color);
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  overflow: hidden;
}

/* ===== VIEWPORT & UNIVERSE ===== */
.hex-viewport {
  position: relative;
  width: min(calc(90vh * 5 / 3), 96vw);
  height: min(90vh, calc(96vw * 3 / 5));
  overflow: visible;
}

.hex-universe {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== MAIN HEXAGON ===== */
.hexagon {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.hexagon-inner {
  width: 100%;
  height: 100%;
  background-color: #faf9f6;
  clip-path: polygon(
    var(--hex-left) 0%,
    var(--hex-right) 0%,
    100% 50%,
    var(--hex-right) 100%,
    var(--hex-left) 100%,
    0% 50%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  pointer-events: auto;
  position: relative;
}

/* Content area — full available space inside hex */
.hex-content {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 8%;
  right: 8%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0.8em 1em 0.8em 1em;

  /* Hide native scrollbar in all states */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hex-content::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* Custom scrollbar track — just to the right of the text box */
.hex-scrollbar-track {
  position: absolute;
  right: 7%;
  top: 25%;
  bottom: 25%;
  width: 5px;
  border-radius: 3px;
  background: transparent;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

/* Arrows at top and bottom of track */
.hex-scrollbar-track::before,
.hex-scrollbar-track::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.hex-scrollbar-track::before {
  top: -10px;
  border-bottom: 5px solid var(--ghost-border-color);
}

.hex-scrollbar-track::after {
  bottom: -10px;
  border-top: 5px solid var(--ghost-border-color);
}

/* Hide scrollbar when not needed */
.hex-scrollbar-track.hidden {
  display: none !important;
}

.hex-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  min-height: 0;
  border-radius: 3px;
  background-color: var(--ghost-border-color);
  transition: background-color 0.2s ease;
  cursor: grab;
}

.hex-scrollbar-thumb:hover,
.hex-scrollbar-thumb.dragging {
  background-color: var(--ghost-label-color);
}

/* Even-thickness border */
.hexagon::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hex-border-width));
  background: var(--hex-border-color);
  clip-path: polygon(
    var(--hex-left) 0%,
    var(--hex-right) 0%,
    100% 50%,
    var(--hex-right) 100%,
    var(--hex-left) 100%,
    0% 50%
  );
  z-index: -1;
}

/* ===== GHOST (NEIGHBOR) HEXAGONS ===== */
.ghost-hex-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.ghost-hex-wrapper::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hex-border-width));
  background: var(--ghost-border-color);
  clip-path: polygon(
    var(--hex-left) 0%,
    var(--hex-right) 0%,
    100% 50%,
    var(--hex-right) 100%,
    var(--hex-left) 100%,
    0% 50%
  );
  z-index: 0;
}

.ghost-hex {
  position: absolute;
  inset: 0;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(
    var(--hex-left) 0%,
    var(--hex-right) 0%,
    100% 50%,
    var(--hex-right) 100%,
    var(--hex-left) 100%,
    0% 50%
  );
  pointer-events: auto;
  z-index: 1;
}

.ghost-hex-shape {
  width: 100%;
  height: 100%;
  /* No default background — JS sets it immediately on init */
  position: relative;
}

.ghost-hex:hover .ghost-hex-shape {
  filter: brightness(0.97);
}

.ghost-hex:hover .ghost-label {
  color: var(--ghost-label-hover);
  border-color: var(--ghost-label-hover);
}

/* ===== GHOST LABELS ===== */
.ghost-label {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(12px, 1.4vw, 17px);
  color: var(--ghost-label-color);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.25s ease, border-color 0.25s ease;
  user-select: none;
  white-space: nowrap;
  padding: 0.25em 0.8em;
  border: 1.5px solid var(--ghost-label-color);
  border-radius: 100px;
  position: absolute;
  z-index: 5;
}

/* Arrows */
.ghost-top .ghost-label::before,
.ghost-top-right .ghost-label::before,
.ghost-top-left .ghost-label::before {
  content: "↑  ";
  font-size: 0.85em;
}
.ghost-top .ghost-label::after,
.ghost-top-right .ghost-label::after,
.ghost-top-left .ghost-label::after {
  content: "  ↑";
  font-size: 0.85em;
}

.ghost-bottom .ghost-label::before,
.ghost-bottom-right .ghost-label::before,
.ghost-bottom-left .ghost-label::before {
  content: "↓  ";
  font-size: 0.85em;
}
.ghost-bottom .ghost-label::after,
.ghost-bottom-right .ghost-label::after,
.ghost-bottom-left .ghost-label::after {
  content: "  ↓";
  font-size: 0.85em;
}

/* LABEL POSITIONING */
.ghost-top .ghost-label {
  left: 50%;
  top: 97%;
  transform: translate(-50%, -50%);
}

.ghost-bottom .ghost-label {
  left: 50%;
  top: 3%;
  transform: translate(-50%, -50%);
}

.ghost-top-right .ghost-label {
  left: 7%;
  top: 75%;
  transform: translate(-50%, -50%) rotate(var(--edge-angle));
}

.ghost-top-left .ghost-label {
  left: 93%;
  top: 75%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--edge-angle)));
}

.ghost-bottom-right .ghost-label {
  left: 7%;
  top: 25%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--edge-angle)));
}

.ghost-bottom-left .ghost-label {
  left: 93%;
  top: 25%;
  transform: translate(-50%, -50%) rotate(var(--edge-angle));
}

/* ===== GHOST HEX WRAPPER POSITIONING ===== */
.ghost-wrapper-top {
  left: 0;
  top: calc(-100% - 1%);
}

.ghost-wrapper-bottom {
  left: 0;
  top: calc(100% + 1%);
}

.ghost-wrapper-top-right {
  left: calc(90% + 0.5%);
  top: calc(-50% - 0.5%);
}

.ghost-wrapper-top-left {
  left: calc(-90% - 0.5%);
  top: calc(-50% - 0.5%);
}

.ghost-wrapper-bottom-right {
  left: calc(90% + 0.5%);
  top: calc(50% + 0.5%);
}

.ghost-wrapper-bottom-left {
  left: calc(-90% - 0.5%);
  top: calc(50% + 0.5%);
}

/* ===== ANIMATION STATES ===== */
.hex-universe.sliding {
  pointer-events: none;
}

/* New content overlay on ghost hex — mirrors .hex-content positioning */
.ghost-hex-content {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 8%;
  right: 8%;
  padding: 0.8em 1em;
  overflow: hidden;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--text-color);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 10;
}

.ghost-hex-content.fade-in {
  opacity: 1;
}

/* Ghost label fadeout */
.ghost-label.fade-out {
  opacity: 0;
  transition: opacity var(--label-fade-duration) ease;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
  font-weight: 500;
  margin-bottom: 0.4em;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 3vw, 32px); }

p { margin-bottom: 0.8em; }

ul, ol {
  margin-bottom: 0.8em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.4em;
}

a:not(.ghost-hex) {
  color: var(--text-color);
  text-decoration-color: var(--ghost-border-color);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.hexagon-inner a:hover {
  text-decoration-color: var(--text-color);
}

/* ===== UTILITY ===== */
.text-center {
  text-align: center;
}

/* ===== IFRAME STYLING ===== */
.hexagon-inner iframe {
  max-width: 100%;
  border-radius: 4px;
  margin-top: 1em;
}

/* ===== VIOLIN GALLERY ===== */
.violin-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.violin-gallery > img {
  width: 80%;
  height: auto;
  display: block;
}

.violin-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 80%;
}

.violin-pair img {
  min-width: 0;
  height: auto;
  display: block;
}

/* flex-grow = aspect ratio (w/h) → equal rendered heights */
.violin-pair img:nth-child(1) { flex: 1.355; }  /* 1944÷1434 */
.violin-pair img:nth-child(2) { flex: 0.75; }   /* 1512÷2016 */

/* ===== JIGSAW GALLERY ===== */
.jigsaw-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.jigsaw-gallery > img {
  width: 80%;
  height: auto;
  display: block;
}

.jigsaw-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 80%;
}

.jigsaw-pair > img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
}

.jigsaw-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.jigsaw-right img {
  width: 100%;
  height: auto;
  display: block;
}

.jigsaw-poem {
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
  margin: 0;
}

/* ===== SINGLE IMAGE ===== */
.hex-img {
  display: block;
  width: 80%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* ===== VIDEO CENTER ===== */
.video-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.video-center video {
  width: 80%;
  height: auto;
  display: block;
}

/* ===== LINE BREAK ===== */

.nowrap {
  white-space: nowrap;
}

/* ===== HOME BUTTON ===== */
.hex-home-btn {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1.5px solid var(--ghost-label-color);
  border-radius: 50%;
  background: transparent;
  color: var(--ghost-label-color);
  transition: color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.hex-home-btn:hover {
  color: var(--ghost-label-hover);
  border-color: var(--ghost-label-hover);
}

.hex-home-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ghost-label-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s ease;
}

.hex-home-btn:hover svg {
  stroke: var(--ghost-label-hover);
}

/* ===== MOBILE PORTRAIT ===== */
@media (max-width: 768px) and (orientation: portrait) {

  html {
    overflow: hidden;
    height: 100%;
  }

  body {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2vh;
    padding-top: 3svh;
  }

  /* Hex wider than viewport, clipped symmetrically at sides */
  .hex-viewport {
    width: 108vw;
    height: 90vh;
    height: 94svh;
    flex-shrink: 0;
    position: relative;
    left: auto;
    transform: none;
    margin: 0;
  }

  /* Steeper diagonals */
  .hexagon-inner {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
    font-size: clamp(15px, 4.2vw, 19px);
  }

  .hexagon::before {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  /* Content area */
  .hex-content {
    left: 10%;
    right: 10%;
    top: 2.5%;
    bottom: 2.5%;
    padding: 0.6em 0.8em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hex-content::-webkit-scrollbar {
    display: none;
  }

  .ghost-hex-content {
    left: 10%;
    right: 10%;
    top: 2.5%;
    bottom: 2.5%;
    padding: 0.6em 0.8em;
    font-size: clamp(15px, 4.2vw, 19px);
  }

  h1 { font-size: clamp(22px, 6vw, 30px); }
  h2 { font-size: clamp(19px, 5vw, 26px); }

  /* Ghost hex shapes and borders: matching mobile clip-path */
  .ghost-hex-shape {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  .ghost-hex-wrapper::before {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  /* Remove clip-path from ghost anchor so labels can escape to main hex edges */
  .ghost-hex {
    clip-path: none;
  }

  /* Bring diagonal ghost hexes closer — halve the gap */
  .ghost-wrapper-top-right {
    left: calc(89.25%) !important;
    top: calc(-50.25%) !important;
  }

  .ghost-wrapper-top-left {
    left: calc(-89.25%) !important;
    top: calc(-50.25%) !important;
  }

  .ghost-wrapper-bottom-right {
    left: calc(89.25%) !important;
    top: calc(50.25%) !important;
  }

  .ghost-wrapper-bottom-left {
    left: calc(-89.25%) !important;
    top: calc(50.25%) !important;
  }

  /* Labels: positioned within full-size wrappers, coordinates computed to
     land on main hex edge midpoints despite wrapper being off-screen.
     Diagonal labels shifted to 15%/85% height to stay within viewport. */
  .ghost-label {
    font-size: clamp(9px, 2.5vw, 13px);
    padding: 0.3em 0.8em;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    white-space: nowrap;
    background: var(--hex-fill, #faf9f6);
    border: 1px solid var(--ghost-border-color);
    border-radius: 2em;
    z-index: 25;
  }

  .ghost-top .ghost-label {
    left: 50%;
    top: 101%;
    transform: translate(-50%, -50%);
  }

  .ghost-bottom .ghost-label {
    left: 50%;
    top: -1%;
    transform: translate(-50%, -50%);
  }

  /* top-right wrapper: (89.25%, -50.25%) → target (91.6%, 15%)
     label left: 91.6 - 89.25 = 2.35%
     label top: 15 - (-50.25) = 65.25% */
  .ghost-top-right .ghost-label {
    left: 2.35%;
    top: 65.25%;
    transform: translate(-50%, -50%) rotate(78deg);
  }

  /* top-left wrapper: (-89.25%, -50.25%) → target (8.4%, 15%)
     label left: 8.4 - (-89.25) = 97.65%
     label top: 15 - (-50.25) = 65.25% */
  .ghost-top-left .ghost-label {
    left: 97.65%;
    top: 65.25%;
    transform: translate(-50%, -50%) rotate(-78deg);
  }

  /* bottom-right wrapper: (89.25%, 50.25%) → target (91.6%, 85%)
     label left: 91.6 - 89.25 = 2.35%
     label top: 85 - 50.25 = 34.75% */
  .ghost-bottom-right .ghost-label {
    left: 2.35%;
    top: 34.75%;
    transform: translate(-50%, -50%) rotate(-78deg);
  }

  /* bottom-left wrapper: (-89.25%, 50.25%) → target (8.4%, 85%)
     label left: 8.4 - (-89.25) = 97.65%
     label top: 85 - 50.25 = 34.75% */
  .ghost-bottom-left .ghost-label {
    left: 97.65%;
    top: 34.75%;
    transform: translate(-50%, -50%) rotate(78deg);
  }

  /* Violin gallery — mobile portrait */
  .violin-gallery > img {
    width: 100%;
  }

  .violin-pair {
    flex-direction: column;
    width: 100%;
  }

  .violin-pair img {
    width: 100%;
    flex: none;
  }

  /* Jigsaw gallery — mobile portrait */
  .jigsaw-gallery > img {
    width: 100%;
  }

  .jigsaw-pair {
    flex-direction: column;
    width: 100%;
  }

  .jigsaw-pair > img,
  .jigsaw-right img {
    width: 100%;
    flex: none;
  }

  .jigsaw-right {
    width: 100%;
  }

  .video-center video {
    width: 100%;
  }

  .hex-img {
    width: 100%;
  }

  /* Scrollbar adjustments */
  .hex-scrollbar-track {
    right: 9%;
  }

  /* Home button — bottom-left, larger tap target */
  .hex-home-btn {
    width: 44px;
    height: 44px;
    left: 13%;
    top: auto;
    bottom: 1%;
    transform: none;
  }

  .hex-home-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== MOBILE LANDSCAPE ===== */
@media (max-width: 1280px) and (orientation: landscape) {

  html {
    overflow: hidden;
    height: 100%;
  }

  body {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5vh;
    padding-top: 5svh;
  }

  .hex-viewport {
    height: 90vh;
    height: 90svh;
    width: min(calc(90svh * 3), 96vw);
    flex-shrink: 0;
    position: relative;
    left: auto;
    transform: none;
    margin: 0;
  }

  .hexagon-inner {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
    font-size: clamp(13px, 2.2vw, 17px);
  }

  .hexagon::before {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  .hex-content {
    left: 10%;
    right: 10%;
    top: 2.5%;
    bottom: 2.5%;
    padding: 0.4em 0.8em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hex-content::-webkit-scrollbar {
    display: none;
  }

  .ghost-hex-content {
    left: 10%;
    right: 10%;
    top: 2.5%;
    bottom: 2.5%;
    padding: 0.4em 0.8em;
    font-size: clamp(13px, 2.2vw, 17px);
  }

  h1 { font-size: clamp(18px, 3.5vw, 26px); }
  h2 { font-size: clamp(16px, 3vw, 22px); }

  .ghost-hex-shape {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  .ghost-hex-wrapper::before {
    clip-path: polygon(
      12% 0%,
      88% 0%,
      100% 50%,
      88% 100%,
      12% 100%,
      0% 50%
    );
  }

  .ghost-hex {
    clip-path: none;
  }

  /* Vertical ghost hex gap: slightly larger */
  .ghost-wrapper-top {
    top: calc(-100% - 3%) !important;
  }

  .ghost-wrapper-bottom {
    top: calc(100% + 3%) !important;
  }

  /* Diagonal ghost hexes: closer */
  .ghost-wrapper-top-right {
    left: calc(89.25%) !important;
    top: calc(-50.25%) !important;
  }

  .ghost-wrapper-top-left {
    left: calc(-89.25%) !important;
    top: calc(-50.25%) !important;
  }

  .ghost-wrapper-bottom-right {
    left: calc(89.25%) !important;
    top: calc(50.25%) !important;
  }

  .ghost-wrapper-bottom-left {
    left: calc(-89.25%) !important;
    top: calc(50.25%) !important;
  }

  /* Labels at true edge midpoints.

     Edge midpoints on main hex (12%/88% clip-path):
       top edge: midpoint of (12%,0%)-(88%,0%) = (50%, 0%)
       bottom edge: midpoint of (12%,100%)-(88%,100%) = (50%, 100%)
       top-right edge: midpoint of (88%,0%)-(100%,50%) = (94%, 25%)
       top-left edge: midpoint of (12%,0%)-(0%,50%) = (6%, 25%)
       bottom-right edge: midpoint of (100%,50%)-(88%,100%) = (94%, 75%)
       bottom-left edge: midpoint of (0%,50%)-(12%,100%) = (6%, 75%)

     Convert to wrapper-relative coords:
       target - wrapper_offset = label_position_in_wrapper

     Top wrapper at (0%, -103%):
       (50%, 0%) - (0%, -103%) = (50%, 103%)

     Bottom wrapper at (0%, 103%):
       (50%, 100%) - (0%, 103%) = (50%, -3%)

     Top-right wrapper at (89.25%, -50.25%):
       (94%, 25%) - (89.25%, -50.25%) = (4.75%, 75.25%)

     Top-left wrapper at (-89.25%, -50.25%):
       (6%, 25%) - (-89.25%, -50.25%) = (95.25%, 75.25%)

     Bottom-right wrapper at (89.25%, 50.25%):
       (94%, 75%) - (89.25%, 50.25%) = (4.75%, 24.75%)

     Bottom-left wrapper at (-89.25%, 50.25%) → target (6%, 75%) → (95.25%, 24.75%) */
  .ghost-label {
    font-size: clamp(9px, 2vw, 13px);
    padding: 0.3em 0.8em;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    white-space: nowrap;
    background: var(--hex-fill, #faf9f6);
    border: 1px solid var(--ghost-border-color);
    border-radius: 2em;
    z-index: 25;
  }

  /* Top wrapper at (0%, -103%) → target (50%, 0%) → (50%, 103%) */
  .ghost-top .ghost-label {
    left: 50%;
    top: 103%;
    transform: translate(-50%, -50%);
  }

  /* Bottom wrapper at (0%, 103%) → target (50%, 100%) → (50%, -3%) */
  .ghost-bottom .ghost-label {
    left: 50%;
    top: -3%;
    transform: translate(-50%, -50%);
  }

  /* Top-right wrapper at (89.25%, -50.25%) → target (94%, 25%) → (4.75%, 75.25%) */
  .ghost-top-right .ghost-label {
    left: 4.75%;
    top: 75.25%;
    transform: translate(-50%, -50%) rotate(60deg);
  }

  /* Top-left wrapper at (-89.25%, -50.25%) → target (6%, 25%) → (95.25%, 75.25%) */
  .ghost-top-left .ghost-label {
    left: 95.25%;
    top: 75.25%;
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  /* Bottom-right wrapper at (89.25%, 50.25%) → target (94%, 75%) → (4.75%, 24.75%) */
  .ghost-bottom-right .ghost-label {
    left: 4.75%;
    top: 24.75%;
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  /* Bottom-left wrapper at (-89.25%, 50.25%) → target (6%, 75%) → (95.25%, 24.75%) */
  .ghost-bottom-left .ghost-label {
    left: 95.25%;
    top: 24.75%;
    transform: translate(-50%, -50%) rotate(60deg);
  }

  /* Violin gallery — mobile landscape */
  .violin-gallery > img {
    width: 100%;
  }

  .violin-pair {
    flex-direction: column;
    width: 100%;
  }

  .violin-pair img {
    width: 100%;
    flex: none;
  }

  /* Jigsaw gallery — mobile landscape */
  .jigsaw-gallery > img {
    width: 100%;
  }

  .jigsaw-pair {
    flex-direction: column;
    width: 100%;
  }

  .jigsaw-pair > img,
  .jigsaw-right img {
    width: 100%;
    flex: none;
  }

  .jigsaw-right {
    width: 100%;
  }

  .video-center video {
    width: 100%;
  }

  .hex-img {
    width: 100%;
  }

  .hex-scrollbar-track {
    right: 9%;
  }

  .hex-home-btn {
    width: 40px;
    height: 40px;
    left: 3%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .hex-home-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ===== TOOLTIP FOOTNOTES ===== */
.note {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ghost-label-color);
  text-underline-offset: 2px;
  cursor: help;
}

.note .note-text {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--hex-fill);
  color: var(--text-color);
  border: 1px solid var(--ghost-border-color);
  border-radius: 4px;
  padding: 0.4em 0.7em;
  font-size: 0.85em;
  line-height: 1.4;
  width: max-content;
  max-width: min(260px, 70vw);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 100;
  pointer-events: none;
  text-decoration: none;
  text-indent: 0;
  font-style: normal;
  font-weight: normal;
}

.note:hover .note-text,
.note:focus .note-text {
  display: block;
}

/* Keep tooltip on-screen when near edges */
.note .note-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ghost-border-color);
}