.mw-content-container {
  max-inline-size: 46em;
  margin-inline: 15rem;
}

// meta

@main-width: 60rem;
@content-width: 50rem;
@content-side-pad: 3rem / 2;
@side-width: 10rem;
// grid line
@grid-line-end: -1;
@entire-span: 1 / -1;
@grid-line--end-cell--start: -1 - 1;

.page-grid() {
  display: grid;
  grid-template-rows: 5rem 1fr 1fr;
  grid-template-columns: @side-width 1fr;
  // responsive
  @media screen and (min-width: 982px) {
    grid-template-columns: calc(@side-width + 1rem) 1fr;
  }
}

.justify-end() {
  grid-column: -1 - 1;
  justify-self: end;
}

// physical

// sizing
html {
  font-size: 16px;
}
// #mw-head {
//   width: unset;
//   max-width: calc(@main-width + @content-side-pad * 2);
// }
// .mw-body,
// #content {
//   max-width: @main-width;
// }
.mw-body-content,
#bodyContent {
  font-size: 1em;
  max-width: @content-width;
}

// page grid
body {
  .page-grid();
}
#mw-page-base {
  grid-row: 1;
  grid-column: @entire-span;
}
#mw-head-base {
  grid-row: 1;
  grid-column: 2;
}
#content {
  grid-row: 2;
  grid-column: 2;
  margin-left: unset;
}
// nested in
#mw-navigation {
  .page-grid();
  grid-row: @entire-span;
  grid-column: @entire-span;
}
#mw-head {
  grid-row: 1;
  grid-column: 2;
  position: unset;
  width: unset;
}
#mw-panel {
  grid-row: @entire-span;
  grid-column: 1;
  position: unset;
}
// end
.mw-footer,
#footer {
  grid-row: 3;
  grid-column: 2;
  margin-left: unset;
}

// header grid
#mw-head {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 10rem 1fr;
}
#p-personal {
  grid-row: 1;
  .justify-end();
  position: unset;
  margin-top: 6px;
  margin-right: 0.75em;
  @media screen and (min-width: 982px) {
    margin-right: 1em;
  }
  ul {
    padding-left: unset;
  }
}
#left-navigation {
  grid-row: 2;
  grid-column: 1;
  margin: unset;
  float: unset;
}
#right-navigation {
  grid-row: 2;
  .justify-end();
  margin: unset;
  float: unset;
}

.main() {
  max-inline-size: 40em;
  margin-inline-start: 10rem;
  font-size: 1rem;
}

.mw-content-container,
#mw-head > .mw-article-toolbar-container {
  .main()
}