/*!
 * vup_2018_child - base/typography.css
 * Master typography controller
 * Single source of truth for tokens and base scales.
 */

/* Global tokens live in css/skin.css */

/* base sizing */
html{ font-size:16px }

/* =================================
   BODY TEXT
   ================================= */
body{
  font-family: var(--vu-system-font) !important;
  font-weight: var(--vu-body-weight);
  font-size: var(--vu-body-size);
  line-height: 1.6;
  -webkit-text-size-adjust:100%;
  text-rendering: optimizeLegibility;
}

/* =================================
   HEADINGS
   ================================= */
h1,h2,h3,h4,h5,h6{
  font-family: var(--vu-system-font) !important;
  font-weight: var(--vu-heading-weight);
  line-height: 1.2;
  margin: .6em 0 .3em;
}
h1{ font-size: var(--vu-h1-size); }
h2{ font-size: var(--vu-h2-size); }
h3{ font-size: var(--vu-h3-size); }
h4{ font-size: var(--vu-h4-size); }
h5{ font-size: var(--vu-h5-size); }
h6{ font-size: var(--vu-h6-size); }

/* =================================
   TITLES & UTILITIES
   ================================= */
.hero-title,
.page-title,
.entry-title{
  font-family: var(--vu-title-font) !important;
  font-weight: 400;
  letter-spacing: var(--vu-title-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
}
.u-title{ font-family: var(--vu-title-font) !important; }
.u-body{  font-family: var(--vu-system-font) !important; }
.u-up{ text-transform: uppercase; }
.u-tight{ line-height: 1.2; }

/* =================================
   LAYOUT HELPERS
   ================================= */
.container, .wrap, .site-content{
  max-width: var(--vu-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
img,video,canvas,svg{ max-width:100%; height:auto }
table{ width:100%; overflow:auto; display:block }
iframe{ max-width:100% }
.hide-overflow{ overflow:auto }

@media (min-width:1024px){ .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem } }
@media (min-width:1280px){ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem } }

/* =================================
   MOBILE TUNING
   ================================= */
@media (max-width:768px){
  .hero-title,
  .page-title,
  .entry-title{
    font-size: clamp(1.8rem, 6vw, 3rem);
  }
}