/* ==========================================================================
   Vardané press kit (vardane.html). Desktop: the model rebuilt in layers,
   numbers inside calc(N * var(--a)) are model pixels (4688 wide).
   Phones: one column of real text over the same art.
   ========================================================================== */
.vard{--W:4688;aspect-ratio:4688/24861;background:#2b3636}
.vard .vs{pointer-events:none}
.vard .vs>img{display:block;width:100%;height:100%;max-width:none}

/* Watch Here: a real link drawn like the model's button */
.vard .vwatch{left:calc(3169 * var(--a));top:calc(1869 * var(--a));width:calc(575 * var(--a));height:calc(200 * var(--a));
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:calc(9.5 * var(--a)) solid #bdbdbd;padding:0;
  font:400 calc(62 * var(--a))/1 var(--font);letter-spacing:0;color:#eef0f2;
  transition:box-shadow .2s ease,text-shadow .2s ease,background .2s ease}
.vard .vwatch:hover,.vard .vwatch:focus-visible{background:rgba(255,255,255,.08);
  box-shadow:0 0 calc(30 * var(--a)) rgba(255,255,255,.55),inset 0 0 calc(24 * var(--a)) rgba(255,255,255,.18);text-shadow:0 0 6px #fff;outline:none}

/* the words, as real text: always on the page for search engines and screen readers; the lettering shows them */
.vard .vt{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vard .vt .v-links,.vard .vt .v-end,.vard .vt .vbtn{display:none}   /* the visible links are drawn on the page */

/* ------------------------------------------------------------------ phones: the phone model, in layers (css px × --u) */
@media (max-width:760px){
  .ab.vard{display:block;padding:0!important;min-height:0;aspect-ratio:auto!important;background:#36686a!important}
  .vard .vmab{position:relative;display:block!important;width:100%;overflow:hidden;overflow:clip}
  .vmab>*{position:absolute;margin:0}
  .vmab .vm-bg{left:0;width:100%;overflow:hidden;pointer-events:none}
  .vmab .vm-bg>img{position:absolute;left:0;width:100%;max-width:none;display:block}
  .vmab .vm-p{z-index:1}
  .vmab .vm-t{left:0;width:100%;max-width:none;display:block;z-index:2;pointer-events:none}
  .vmab .vm-watch{z-index:3;left:calc(219.64 * var(--u));top:calc(183.36 * var(--u));width:calc(91.36 * var(--u));height:calc(32 * var(--u));
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;border:calc(1.6 * var(--u)) solid #bdbdbd;
    font:400 calc(10 * var(--u))/1 Arial,"Liberation Sans",Helvetica,sans-serif;color:#eef0f2;transition:background .2s ease,box-shadow .2s ease}
  .vmab .vm-watch:hover,.vmab .vm-watch:focus-visible{background:rgba(255,255,255,.1);box-shadow:0 0 12px rgba(255,255,255,.5);outline:none}
  .vmab .vm-hot{z-index:3;border-radius:2px}
  .vmab .vm-hot:focus-visible{outline:1.5px solid #fff;outline-offset:1px}
}