:root {
  --font-body: 'Roboto Condensed', sans-serif;
  --font-display: 'Oswald', sans-serif;;
  --font-special: 'Oswald', sans-serif;;
}
.body-font { font-family: var(--font-body) }
.display-font {
  font-family: var(--font-display);
  font-weight: 800;
}
.special-font { font-family: var(--font-special) }

.f-body, h4               { font-size: 1rem     }
.f-special                { font-size: 2.25rem; letter-spacing: -0.03em  }
.f-max                    { font-size: 2rem     }
.f-mega, .f-display, h1   { font-size: 1.75rem  }
.f-alpha, .f-title        { font-size: 1.5rem   }
.f-gamma, .f-subtitle     { font-size: 1.375rem }
.f-epsilon, .f-header, h2 { font-size: 1.25rem  }
.f-zeta, .f-header-2, h3  { font-size: 1.125rem }
.f-eta, .f-caption        { font-size: 0.875rem }
.f-iota, .f-footnote      { font-size: 0.75rem  }

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
}

.text-style-title {
  font-size: 1.67rem;
  font-family: var(--font-display);
  font-weight: 800;
}


:root {
  --color-background: #ffffff;
  --color-foreground: #343840;
  --color-info: #616568;
  --color-primary: #786847;
  --color-primary-button: #128152;
  --color-error: #EA1319;
  --color-disabled-button: #E5E5E5;
  --color-secondary: #F4FCF2;
  --color-attention: #128152;
  --color-active-pill: #f2f2f2;
  --color-quick-links: #99845a;
  --color-primary-stroke: #7ca18d;
  --color-live: #EA1319;
  --color-selected: #244f4d;
  --color-shade: #E8E3DF;

  
  --color-brand-a: #223C2E;
  --color-brand-b: #C5A459;
}
.c-figure  { color: var(--color-foreground) }
.c-ground  { color: var(--color-background) }
.c-tint    { color: var(--color-primary) }
.c-tint-2  { color: var(--color-primary-button) }
.c-tint-3  { color: var(--color-quick-links) }
.c-error   { color: var(--color-error) }
.c-hint    { color: var(--color-info) }
.c-brand-a { color: var(--color-brand-a) }
.c-brand-b { color: var(--color-brand-b) }
.bg-figure   { background-color: var(--color-foreground) }
.bg-ground   { background-color: var(--color-background) }
.bg-tint     { background-color: var(--color-primary) }
.bg-tint-2   { background-color: var(--color-primary-button) }
.bg-tint-3   { background-color: var(--color-quick-links) }
.bg-error    { background-color: var(--color-error) }
.bg-hint     { background-color: var(--color-info) }
.bg-selected { background-color: var(--color-selected) }
.bg-brand-a  { background-color: var(--color-brand-a) }
.bg-brand-b  { background-color: var(--color-brand-b) }
.bg-shade    { background-color: var(--color-shade) }

a { color: var(--color-primary-button) }
a:hover, a:focus { color: var(--color-selected) }


.body-inset {
  padding: 1rem;
}
.body-offset {
  max-width: 52.5rem;
  margin-left: auto;
  margin-right: auto;
}


.tap-button {
  font-family: inherit;
  background: var(--color-brand-a);
}


.oblique-effect {
  transform: scaleX(0.95) skew(0, -12deg) translateY(-2%);
}


.month-header,
.month-subheader {
  background-color: var(--color-shade);
}
.month-header .text-style-title {
  font-family: var(--font-display);
  text-transform: uppercase;
}
body .monthly-event-unit {
  background-color: var(--color-brand-a);
}
body a:hover .monthly-event-unit {
  background-color: var(--color-brand-b);
}
body .monthly-event-unit header {
  font-family: var(--font-special);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-brand-b);
  text-transform: uppercase;
}
body .monthly-event-unit > * {
  transform: scaleX(0.95) skew(0, -12deg) translateY(8px);
}
.month-header .text-style-title {
  font-size: 22px;
}
.month-cell.view-mode-day {
  color: var(--color-shade);
}
.month-day-cell.cell-style-current-day {
  outline-color: var(--color-primary-button);
}
.month-cell.view-mode-day .active-day {
  background-color: var(--color-primary-button);
  color: var(--color-background);
}
.day-detail {
  font-size: 1rem;
}
.day-detail h2 {
  color: var(--color-brand-b);
}
@media (max-width: 599px) {
  .month-header .onepcssgrid-1200 { padding: 0 16px }
  .month-header .onerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .month-header .button-group { padding-top: 0 }
  .view-mode-day .month-week-cell,
  .month-cell.view-mode-day .month-week-cell.active-week {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .view-mode-day .month-day-cell .text-style-caption { font-size: 10px; color: rgba(255,255,255,0.4); }
  .view-mode-day .month-day-cell {
    flex: 1;
    height: 60px;
  }
  .view-mode-day .month-day-cell ._items { display: none }
  .month-day-cell .text-style-caption-title { font-size: 1rem }
  .day-detail {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
  }
  .day-detail .tap-button { margin-top: 0; margin-bottom: 0 }
  .month-events-layout { border-spacing: 0 }
}