: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));
}

.gridlines {
  --color: var(--shade);
  --size: 2vw;
  background-image: repeating-linear-gradient(0deg, transparent 0, var(--color) 0, var(--color) 1px, transparent 0, transparent var(--size)),
                    repeating-linear-gradient(90deg, transparent 0, var(--color) 0, var(--color) 1px, transparent 0, transparent var(--size));
  background-position: 100% 100%;
}

: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 > label > span {
  display: none;
}

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

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;
  height: 10%;
}

body > header input:checked ~ nav form#language-selector{
  position: static;
}

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

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 dt {
  margin-bottom: 0;
}

article.page > p {
  margin: 0;
}

article > *:not(figure) {
  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;
}