: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-width: 1px;
  --rule: var(--rule-width) solid var(--foreground-color);
  --dashed: 1px dashed rgb(128 128 128 / 0.25);
  --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";

}

/* main nav {
  border-image: linear-gradient(90deg, var(--yellow), var(--yellow) calc(var(--y) * 100%), var(--foreground-color) 0) 1;  
} */


/* 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);
}

html.lock body,
body.lock {
  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;
  min-height: 200vh;
}

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: 0 var(--gap-half) var(--gap-half);
}

table {
  border-collapse: collapse;
  border: 2px solid var(--background-color);
  width: 100%;
  text-align: center;
}

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

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

a[href='#content'] {
  display: none;
}