html{ font-size:72.36%; }
body{
  margin:0;
  padding:0;
  background:#fff;
  color:#000;
  font-family:"Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color:#000; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness: 1px; }
a:active{ opacity:.7; }
a:focus{ outline:1px dotted rgba(0,0,0,.35); outline-offset:2px; }

#nav{
  position:fixed;
  top:0;
  left:0;
  z-index:10;
  font-size:1.6rem;
  line-height:1.1;
  padding:0;
  margin:0;
}
#nav a{ color:#000; }
#nav a:hover{ opacity:.7; }
#nav .links a{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }

.page_container{
  width:100%;
}
.page{
  width:72%;
  max-width: 74rem;
  margin:0 auto;
}

bodycopy{
  display:block;
  font-size:1.6rem;
  line-height:1.3;
  font-style:normal;
  font-weight:400;
  text-align:center;
  letter-spacing: 0.005em;
}

img.hero{
  max-width:62%;
  max-height: 78vh;
  height:auto;
  display:block;
  margin:0 auto;
}

@media (max-width: 820px){
  .page{ width:92%; }
  img.hero{ max-width:92%; }
  .page_container{ padding-top: 120px !important; }
}

/* Live page layout */
.live-years{display:block;}
@media (min-width: 1100px){
  .live-years{display:block;}
  .live-years .yearRow{display:grid; grid-template-columns: 7rem 1fr; column-gap: 2.2rem; margin: 2.4rem 0;}
  .live-years .year{font-style: italic; text-align:right;}
  .live-years .items{ text-align:left; }
}
@media (max-width: 1099px){
  .live-years .yearRow{ margin: 2.2rem 0; }
  .live-years .year{ display:block; font-style: italic; margin-bottom: 1.2rem; }
}

#nav .name a{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }

#nav .name{ margin:0 0 18px 0; }

/* Live page layout */
.live{ max-width: 820px; margin: 0 auto; text-align: center; }
.live .year{ font-style: italic; font-size: 2.2rem; line-height: 1.2; margin: 0 0 1.6rem 0; }
.live .gig{ margin: 0 0 1.05rem 0; }
@media (min-width: 980px){
  .live-grid{ display: grid; grid-template-columns: 120px 1fr; column-gap: 80px; align-items: start; }
  .live-grid .year-col{ text-align: right; font-style: italic; font-size: 2.2rem; line-height: 1.2; padding-top: 0.1rem; }
  .live-grid .gigs-col{ text-align: left; }
  .live-grid .gig{ margin: 0 0 0.9rem 0; }
}

.proj{ letter-spacing: 0.02em; }
.sep{ padding:0 0.15rem; }
