:root {
  --grid-scale: 14;
  --grid-lines: calc(var(--grid-scale) + 1);
  --grid-unit: calc(100vw / var(--grid-scale));
  --gap: calc(0.75rem + 0.75vw);
  --gap-inverse: calc(var(--gap) * -0.5);
  --gap-half: calc(var(--gap) / 2);
  --gap-quarter: calc(var(--gap) / 4);
  --gapless-grid-unit: calc(
    calc(var(--grid-unit) - var(--gap-half)) -
      calc(var(--gap) / var(--grid-lines))
  );
  --columns: 1;
  --rule: 1px solid var(--foreground-color);
  --bleed: 2.5rem;
  --scale-up: 1.125;
  --pull: 0;
  --flex-column: column-reverse;
  --left: none;
  --right: none;
  --first-col: calc(100vw - var(--bleed));
}

:target {
  scroll-margin-top: 1rem;
}

.error {
  display: none;
}

body > main,
body > header > nav,
body > footer {
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "header main"
                       "footer footer";
}

/* custom scroll bar */
body::-webkit-scrollbar {
  width: var(--gap-half);
}

body::-webkit-scrollbar-track {
  background: var(--background-color);
  border-left: var(--rule);
}

body::-webkit-scrollbar-thumb {
  background: var(--foreground-color);
  border-left: var(--rule);
}

body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  border-left: var(--rule);
}

body > header {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  border-right: var(--rule);
  min-height: 100vh;
  background-color: var(--background-color);
  padding: 0;
  z-index: 5;
}

body > header label {
  text-transform: uppercase;
  max-width: var(--bleed);
  word-break: break-all;
  font-size: 1.25rem;
  display: block;
  text-align: center;
  padding: 0.5rem;
  position: sticky;
  top: 0;
}

body > header input:checked ~ label {
  max-width: 100%;
  background-color: #000;
  color: #fff;
  height: auto;
  top: var(--gap);
}

body > header input:checked ~ label:before {
  content: 'close ';
}

body > header > nav {
  position: sticky;
  top: 3em;
  font-size: 125%;
  max-height: 100vh;
  overflow-y: scroll;
  padding: var(--gap-half);
}

.lock body {
  overflow: hidden;
}

.lock body > header {
  width: 100%;
  backdrop-filter: blur(5px);
  opacity: 0.95;
  padding: var(--gap);
}

body > header input:checked ~ nav {
  width: 60vw;
}

body > main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

body > main > * {
  /* padding: var(--gap-half); */
}

body > footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  border-top: var(--rule);
  padding: var(--gap-half);
}

body > footer > section.enews {
  grid-column-end: span 4;
}

body > footer time:first-child:not(:nth-last-of-type(2)) {
  margin-right: -0.25em;
}

body > header input,
body > header input:not(:checked) ~ nav,
body > footer time + time:not(:last-of-type):not(:nth-last-of-type(2)) {
  display: none;
}

body > footer time + time:nth-last-of-type(2)::before {
  content: '–';
}

body > footer time {
  display: inline-block;
}

body > footer li {
  white-space: nowrap;
}

body > footer dt {
  margin-bottom: 0;
}

article > * {
  padding-left: var(--gap-half);
  padding-right: var(--gap-half);
}

table {
  border-collapse: collapse;
  border: 2px solid var(--background-color);
}

td,
th {
  border: var(--rule);
  padding: var(--gap-quarter);
}

#mca_logo {
  width: 77vw;
  height: 25vw;
  display: block;
  margin: 1em 0;
}

@media only screen and (min-width: 48em) {
  :root {
    --columns: 2;
    --bleed: 135px;
    --scale-up: 1.25;
    --flex-column: row;
    --left: left;
    --right: right;
  }

  :target {
    scroll-margin-top: 4rem;
  }

  h1 {
    font-size: 3.5rem;
  }

  body > header label {
    display: none;
  }

  body > header input:not(:checked) ~ nav {
    display: block;
  }

  body > header {
    position: static;
    overflow-x: visible;
    min-width: var(--bleed);
  }
  body > header > nav {
    position: sticky;
    top: 0;
  }
  
  #mca-main-navigation {
    position: sticky;
    top: 0;
  }

  main,
  body > footer {
    margin: 0;
  }

  main > article,
  section.lede,
  ul.calendar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gap-half);
    grid-auto-flow: row dense;
  }

  section.lede *:not(article) {
    grid-column: 1 / -1;
  }

  main > article > header,
  main > article > header ~ section:first-of-type {
    grid-column-start: span 12;
  }

  body > footer {
    --first-col: calc(var(--bleed));
    /* min-width: 100vw; */
    display: grid;
    gap: var(--gap-half);
    grid-template-columns: var(--first-col) repeat(10, 1fr);
    padding: var(--gap-half);
    border-top: var(--rule);
  }

  body > main > article > * {
    grid-column-end: span 12;
  }

  body > footer > section:first-child {
    grid-column-end: span 1;
  }

  body > footer > section:nth-child(2) {
    grid-column-end: span 1;
  }

  body > footer > section:nth-child(n + 2) {
    grid-column-end: span 1;
  }

  body > footer > section:nth-child(4) {
    grid-column-end: span 3;
    /* padding: 0 1rem; */
  }

  body > footer > section:nth-child(5),
  body > footer > nav:nth-child(5) {
    grid-column-end: span 3;
  }

  body > footer > section:nth-child(6) {
    grid-column-end: span 2;
  }

  aside {
    --pull: var(--gap-inverse);
  }

  .template {
    margin: 0;
    padding: 0;
  }
}

@media only screen and (min-width: 74em) {
  :root {
    --columns: 3;
    --scale-up: 1.35;
  }
}

@media only screen and (min-width: 96em) {
  :root {
    --columns: 4;
    --scale-up: 1.5;
  }

}