.chapter {
  break-before: right;
  page: chapter;
}


@page chapter:first {

  @top-left-corner {
    content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
  }

  @top-left {
    content: none;
  }

  @top-center {
    content: none;
  }

  @top-right {
    content: none;
  }

}


.chapter-header {
  position: relative;

  /* break-after: page; */



}

.chapter-header .hgroup {
  font-size: 22px;
  line-height: 1;
  font-weight: normal;
  /* margin-top: calc(var(--baseline)*2);*/
  position: relative;
  top: calc(var(--baseline)*0.25); 
  margin-bottom: calc(var(--baseline)*3 + 11px); 
  padding-right: calc(var(--unit)*2);
  position: relative;
  padding-left: 15px;

}

.chapter-header .hgroup::before {
  content: "***************************************************************************************************************************************************************************************************************************************************************************************************************************************************";
  display: block;
  width: calc(100% + 1ch);
  height: 100%;

  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: -1;

  font-size: var(--sign-size);
  color: var(--sign-color);
  letter-spacing: var(--sign-spacing);
  font-family: var(--sign-family);
  line-height: calc(var(--sign-baseline)*1.5);
  overflow-wrap: anywhere;
  /* padding-top: 6px; */
}

.chapter-header .type {
  display: none;


}


.chapter-header .hgroup h2 {
  font-family: 'Teletext';
  font-weight: normal;
  font-size: 1em;
  line-height: calc(var(--sign-baseline)*1.5);
  display: inline;
  box-sizing: border-box;

}

.chapter-header .hgroup h2 span {
  color: white;
  padding-left: 0.25ch;
  padding-right: 0.25ch;
  box-decoration-break: clone;
  background-color: var(--blue);
  padding: 1px 0.25ch;
  text-transform: uppercase;
}


.chapter-header .author span {
  font-family: 'Teletext';
  color: var(--blue);
  margin-top: calc(var(--baseline)*1.5);
  text-transform: uppercase;
  background-color: white;
  display: inline-block;
}




.chapter-header .author::before {
  display: none;
}


.chapter-header .bio {
  display: none;
}

.hgroup-before,
.hgroup-after,
.chapter-header .title-before,
.chapter-header .title-after {
  font-size: var(--sign-size);
  color: var(--sign-color);
  letter-spacing: var(--sign-spacing);
  font-family: var(--sign-family);
  line-height: calc(var(--sign-baseline)*1);


}

.chapter-header .title-before,
.chapter-header .title-after{
    white-space: nowrap;
    position: absolute;
  left: 0px;

}

.chapter-header .title-before {
  top: calc(var(--baseline)*-1.25);
}

.chapter-header .title-after {
  bottom: calc(var(--baseline)*-1.5);
}


.hgroup-before{
  position: absolute;
  left: calc(var(--pagedjs-margin-left)*-1);
  padding-left: 19px;
    top: -36px;
}

.hgroup-after{
  position: absolute;
  bottom: calc(var(--baseline)*-5 + 4px);
  right: calc(var(--pagedjs-margin-right)*-1);

  text-align: right;
  /* left: calc(var(--pagedjs-margin-left)*-1);
  padding-left: 19px;
    top: -36px; */
}