:root {
  line-height: var(--ratio);
  font-size: var(--root-fontsize);
  font-family: var(--font-plain);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  background-color: inherit;
  font-family: inherit;
  color: inherit;
  overflow-wrap: break-word;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 0;
  /*border: 0.125rem solid #cc0;*/
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
}

header nav ul {
  width: 100%;
  max-width: none;
  font-size: var(--root-fontsize);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

header nav ul {

}

header nav ul li {
  display: block;
  /* background-color: pink; */
  margin: .5em;

}

ul, li {
  list-style-type: none;
}

section ul {
  margin-left: var(--s3)
}

html, body, div, header, nav, main, footer {
  max-width: none;
}

nav, section>* {
  aborder: var(--border-thin) solid orange;
}

nav {}

aside {
  amax-width: 33%;
  min-width: 20ch;
}

.with-sidebar {
  overflow: hidden;
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--s1) / 2 * -1);
}

.with-sidebar>* {
  amax-width: none;
  margin: calc(var(--s1) / 2);
  flex-grow: 1;
  flex-basis: 25ch;

}

.with-sidebar> :last-child {
  flex-basis: 40ch;
  flex-grow: 999 !important;
  max-width: none;
  min-width: calc(50% - var(--s1));
  abackground-color: orange;
}

main>section {
  /*margin-left: auto;
  margin-right: 0;*/
  /*max-width: 10rem;*/

}

#site {
  max-width: 100%;
}
#site>section {

}

#sec1, #sec2 {
  width: 60ch;
  border: 0.125rem solid orange;
display: none;
}

#sec2 {
  width: 85ch;
}