/* Mr. Little Guy — responsive Videos page, preserving the original Muse artwork. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.mlg-videos-page { background: #fff; padding-top: 99px; font-family: Arial, Helvetica, sans-serif; }
.site-scene { position: relative; width: min(100%, 750px); aspect-ratio: 750 / 450; margin: 0 auto; background: url("../images/frame01.jpg") center top / 100% 100% no-repeat; overflow: hidden; }
.main-nav { position: absolute; z-index: 5; left: 8.8%; top: 60%; width: 16%; display: grid; gap: 2.2%; }
.main-nav a { min-height: 32px; padding: 9px 4px 5px; display: flex; align-items: center; justify-content: center; color: #754c24; text-decoration: none; text-transform: uppercase; font-size: clamp(11px, 1.6vw, 16px); background: url("../images/brassplaque.jpg") center / 100% 100% no-repeat; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: #fbb03b; }
.home-link { position: absolute; z-index: 4; left: 8%; top: 10.5%; width: 17.8%; height: 32.9%; }
.video-frame { position: absolute; left: 29.33%; top: 2.44%; width: 65.47%; }
.frame-art { display: block; width: 100%; height: auto; }
.player-window { position: absolute; left: 15.07%; top: 16.08%; width: 71.28%; aspect-ratio: 350 / 263; overflow: hidden; background: #080706; }
.player-placeholder { width: 100%; height: 100%; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: #f2dfb5; background: #080706; font-size: clamp(13px, 1.5vw, 18px); line-height: 1.4; }
.player-placeholder strong { font-size: 1.15em; }
.video-choices { position: absolute; z-index: 6; left: 30%; right: 1.5%; bottom: 2.8%; display: grid; grid-template-columns: 1fr 1fr .92fr; gap: 2.5%; align-items: stretch; }
.video-choice { display: block; border: 0; padding: 5px 2px; background: transparent; color: #f0c998; cursor: pointer; font: 16px/1.25 Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; }
.video-choice span { display: block; }
.video-choice:hover, .video-choice:focus-visible { color: #fff; text-decoration: underline; outline-color: #c69c6d; }
/* Tablet: retain the original 750 × 450 composition and scale it as one unit. */
@media (min-width: 701px) and (max-width: 900px) {
  body.mlg-videos-page { padding-top: clamp(32px, 7vh, 72px); }
  .site-scene { width: min(100%, 750px); }
  .main-nav a { min-height: clamp(28px, 4.2vw, 32px); }
  .video-choice { font-size: clamp(13px, 1.9vw, 16px); }
  .player-placeholder { font-size: clamp(13px, 2vw, 16px); }
}

/* Phone: use the supplied portrait wood texture and stack the controls below the frame. */
@media (max-width: 700px) {
  body.mlg-videos-page { background: #fff; padding-top: 18px; }
  .site-scene {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    aspect-ratio: auto;
    margin: 0 auto;
    padding: 18px 14px 28px;
    overflow: hidden;
    background: url("../images/frame01phone.jpg") center top / 100% auto repeat-y;
  }
  .main-nav {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 auto 18px;
    display: flex;
    gap: 6px;
  }
  .main-nav a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 8px 2px;
    font-size: clamp(10px, 3.2vw, 12px);
  }
  /* The portrait background already contains the lion knocker. */
  .home-link { display: none; }
  .video-frame {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 491px;
    margin: 0 auto;
  }
  .player-placeholder {
    padding: 7px;
    gap: 6px;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.3;
  }
  .video-choices {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 491px;
    margin: 12px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .video-choice {
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(198,156,109,.72);
    background: rgba(28,17,10,.78);
    font-size: 14px;
    line-height: 1.25;
  }
  .video-choice span { display: inline; margin-left: 4px; }
}

@media (max-width: 360px) {
  .site-scene { padding-left: 9px; padding-right: 9px; }
  .main-nav { gap: 4px; }
  .main-nav a { font-size: 10px; }
  .video-choice { font-size: 13px; }
}