/* ============================================================
   DiV — brand mark (pure CSS, no images)
   Icon alone:  <span class="div-mark"></span>
   With text:   <span class="div-mark"><span class="div-word">DiV</span></span>
   Scale:       set --div-size (everything else is proportional)
   Requires:    'Playfair Display' loaded (variable or static, weight 400)
   ============================================================ */

.div-mark{
  /* --- the only knobs you normally touch --- */
  --div-size: 120px;          /* overall size; scales the whole mark   */
  --div-sand: #e3dcd1;        /* tile background                       */
  --div-red:  #c0392b;        /* the button (site CSS red)             */
  --div-ink:  #222;           /* the DiV lettering                     */

  position: relative;
  display: inline-block;
  width:  var(--div-size);
  height: var(--div-size);
  background: var(--div-sand);
  border-radius: 7%;
  vertical-align: middle;
}

/* the red "submit" button, bottom-right */
.div-mark::after{
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  right: 13%;
  bottom: 13%;
  background: var(--div-red);
  border-radius: 28%;         /* relative to the button, not the tile  */
}

/* optional wordmark, top-left */
.div-mark .div-word{
  position: absolute;
  left: 13%;
  top: 11%;
  font-family: 'Playfair Display Variable', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1;
  color: var(--div-ink);
  font-size: calc(var(--div-size) * .30);
}

/* If you want the button to be a real call-to-action, use an <a> as the
   mark and give it an href; add this so the link fills only the button:
   .div-mark.is-link::after{ cursor:pointer; } */