/* Programmatically focused section headings should retain the supplied artwork appearance. */
.view h1[tabindex='-1']:focus,.view h2[tabindex='-1']:focus{outline:0}

/* Tablet, laptop and desktop refinements. Mobile artboard rules stay in mobile-alignment.css. */
@media (min-width:700px){
  html,body,.site-main{width:100%;height:var(--vp-frame);min-height:var(--vp-frame);overflow:hidden}
  .site-main>.view{width:100%;height:100%;max-height:100%;overflow:hidden}
  body .home-view{box-sizing:border-box;display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);grid-template-rows:1fr;align-items:center;column-gap:clamp(24px,5vw,96px);width:min(100%,1600px);margin-inline:auto;padding:clamp(72px,11vh,124px) clamp(42px,6vw,112px) clamp(28px,4vh,54px)}
  body .home-view>.hero{grid-column:1;grid-row:1;align-self:center;justify-self:end;width:min(100%,calc(var(--vp-frame)*.67));max-width:700px;max-height:calc(var(--vp-frame)*.78);margin:0}
  body .home-view>.campaign-layout{grid-column:2;grid-row:1;align-self:center;justify-self:start;width:min(100%,590px);max-width:590px;min-height:0;margin:0;padding:0}
  body .home-view .campaign-title{font-size:clamp(32px,min(4vw,6vh),62px);line-height:1.42}
  body .home-view .campaign-action{width:min(100%,430px);min-height:clamp(48px,7.3vh,62px);margin-top:clamp(20px,4vh,40px)}

  body .prizes-layout.container{box-sizing:border-box;justify-content:center;width:min(92vw,720px);height:100%;min-height:0;margin-inline:auto;padding:clamp(10px,1.6vh,22px) 0;gap:clamp(7px,1.5vh,18px)}
  body .prizes-layout .gift-stamp{width:clamp(105px,20vh,205px);max-height:23vh;object-fit:contain}
  body .prizes-layout .prizes-heading{width:min(100%,620px)}
  body .prizes-layout .new-prize-grid{width:min(100%,calc(var(--vp-frame)*.5),560px)}
  body .prizes-layout .prizes-action{width:min(100%,560px);min-height:clamp(42px,6vh,56px)}

  body .registration-layout.container{box-sizing:border-box;width:min(88vw,1200px);height:100%;min-height:0;margin-inline:auto;padding:clamp(28px,6vh,72px) 0 clamp(34px,6vh,70px);grid-template-columns:minmax(300px,520px) minmax(300px,520px);justify-content:space-between;gap:clamp(40px,8vw,130px)}
  body .registration-content,body .registration-aside{width:100%;min-width:0}
  body .registration-form{width:100%;max-width:520px}
  body .registration-form .privacy-assurance{white-space:normal;text-align:center}

  body .music-view.container{box-sizing:border-box;align-items:center;justify-content:center;width:min(92vw,1180px);height:100%;min-height:0;margin-inline:auto;padding:clamp(24px,4vh,48px) 0 clamp(22px,4vh,46px)}
  body .music-view .music-heading,body .music-view .media-layout{width:100%}
  body .music-view .music-heading{flex:none;margin:0;text-align:center;direction:rtl}
  body .music-view .media-layout{width:min(84vw,760px);max-width:760px;margin:clamp(14px,2.2vh,22px) auto 0}
  body .music-view .audio-player,body .music-view .steps-list,body .music-view .follow-condition,body .music-view .instagram-action{box-sizing:border-box;width:100%;max-width:none}
  body .music-view .steps-list{direction:ltr}
  body .music-view .step-card{border:0}
  body .music-view .step-card:nth-child(1){grid-column:2;grid-row:1;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
  body .music-view .step-card:nth-child(2){grid-column:1;grid-row:1;border-bottom:1px solid var(--line)}
  body .music-view .step-card:nth-child(3){grid-column:2;grid-row:2;border-left:1px solid var(--line)}
  body .music-view .step-card:nth-child(4){grid-column:1;grid-row:2}
  body .music-view .follow-condition{min-height:clamp(34px,5vh,52px);margin-top:clamp(7px,1.2vh,14px);padding:7px clamp(12px,2vw,24px);border-radius:clamp(10px,1.2vw,15px);background:#50468a;font-size:clamp(12px,1.8vh,17px);line-height:1.35;white-space:normal}
  body .music-view .follow-condition .follow-bell{width:clamp(23px,3.6vh,36px);height:clamp(24px,3.8vh,38px)}
  body .music-view .music-route{width:100%}
  body .music-view .music-support{display:flex;flex:none;align-items:center;justify-content:center;align-self:center;gap:6px;min-height:24px;margin:0;color:var(--purple);font-size:13px;font-weight:var(--font-bold);direction:rtl}
  body .music-view .music-support .support-icon{width:16px;height:16px;flex:none}
}

/* Desktop campaign composition: Persian content starts at the right and uses the canvas. */
@media (min-width:1024px){
  body .music-view.container{
    display:grid;
    grid-template-columns:minmax(390px,520px) minmax(430px,560px);
    grid-template-areas:
      "download heading"
      "condition steps"
      "cta steps"
      "route route"
      "support support";
    grid-template-rows:auto auto auto clamp(76px,10vh,96px) auto;
    align-content:center;
    align-items:center;
    justify-content:center;
    column-gap:clamp(40px,5vw,72px);
    row-gap:clamp(8px,1.25vh,13px);
    width:min(90vw,1180px);
    padding:clamp(30px,4vh,46px) 0 clamp(20px,3vh,32px);
    direction:ltr;
  }
  body .music-view .music-heading{grid-area:heading;align-self:end;width:100%;margin:0;direction:rtl}
  body .music-view .music-heading::before{width:clamp(68px,8vh,82px);height:clamp(68px,8vh,82px);margin-bottom:clamp(10px,1.5vh,15px);background-size:48%}
  body .music-view .music-heading h1{font-size:clamp(32px,3vw,40px);line-height:1.35;white-space:nowrap;word-spacing:normal}
  body .music-view .music-heading p{max-width:100%;margin-top:clamp(7px,1vh,11px);font-size:clamp(17px,1.45vw,21px);line-height:1.55;text-align:center}
  body .music-view .media-layout,
  body .music-view .media-primary{display:contents}
  body .music-view .audio-player{grid-area:download;align-self:end;min-height:clamp(104px,13vh,118px);margin:0;border-radius:20px}
  body .music-view .steps-list{grid-area:steps;align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(76px,1fr));width:100%;min-height:clamp(164px,21vh,190px);margin:0;border-radius:16px;direction:ltr}
  body .music-view .step-card{min-height:0;padding:clamp(10px,1.7vh,16px) clamp(11px,1.3vw,18px);gap:clamp(6px,.8vw,10px);direction:rtl;text-align:right}
  body .music-view .step-card__copy h3{font-size:clamp(14px,1.15vw,17px);line-height:1.55;text-align:right;text-align-last:right}
  body .music-view .step-card__action{width:clamp(27px,2.4vw,34px);height:clamp(27px,2.4vw,34px)}
  body .music-view .follow-condition{grid-area:condition;align-self:end;min-height:clamp(46px,5.7vh,54px);margin:0;border-radius:14px;font-size:clamp(13px,1.08vw,16px);white-space:nowrap;direction:rtl}
  body .music-view .instagram-action{grid-area:cta;align-self:start;min-height:clamp(50px,6.4vh,58px);margin:0;font-size:clamp(21px,1.8vw,27px);direction:rtl}
  body .music-view .music-route{grid-area:route;position:relative;inset:auto;width:100%;height:100%;margin:0;align-self:end}
  body .music-view .music-route .music-route__scene{width:100%;height:100%;object-fit:fill}
  body .music-view .music-support{grid-area:support}
}

@media (min-width:700px) and (max-width:1023px){
  body .home-view{grid-template-columns:minmax(250px,1fr) minmax(260px,1fr);column-gap:clamp(18px,4vw,42px);padding-inline:clamp(28px,5vw,48px)}
  body .home-view>.hero{width:min(100%,440px)}
  body .registration-layout.container{width:min(91vw,900px);grid-template-columns:minmax(270px,1fr) minmax(270px,1fr);gap:clamp(28px,6vw,58px)}
  body .music-view .media-layout{width:min(90vw,700px)}
}

@media (min-width:1600px){
  body .home-view{column-gap:clamp(72px,7vw,128px)}
  body .registration-layout.container{width:min(82vw,1280px)}
  body .music-view.container{width:min(84vw,1240px);grid-template-columns:minmax(430px,540px) minmax(470px,580px)}
}

@media (min-width:700px) and (max-height:650px){
  body .home-view{padding-top:clamp(62px,11vh,82px);padding-bottom:22px}
  body .home-view>.hero{max-height:72vh}
  body .prizes-layout.container{padding-block:5px;gap:5px}
  body .registration-layout.container{padding-top:10px;padding-bottom:30px}
  body .music-view.container{padding-top:6px;padding-bottom:28px}
  body .music-view .follow-condition{min-height:30px;margin-top:5px;padding-block:3px}
}

/* The supplied bell artwork has the same purple background as the condition bar. */
.follow-condition{background:#50468a}
.follow-condition .follow-bell{display:inline-block;flex:none;mask:none!important;-webkit-mask:none!important;background:#50468a url('../images/follow-badge.png') center/contain no-repeat!important}