field-guide-to-salvaging-sound/src/assets/styles/paged.css

:root {
  --print-margin-x: 8mm;
}
body {
  font-size: var(--font-size-base);
}

.meta [data-generated-date] {
  position: running(generatedDate);
}

.meta [data-publication-title] {
  position: running(publicationTitle);
}

.meta [data-chapter-title] {
  position: running(chapterTitle);
}


@page {
  size: A5;
  margin: 13mm var(--print-margin-x);

}

@page:left {
  @bottom-left {
    content: "page " counter(page);
  }

  @top-left {
    content: element(publicationTitle);
    font-size: var(--font-size-base);
    font-style: italic;
  }

  @top-right {
    content: element(generatedDate);
    font-size: var(--font-size-base);
    font-style: italic;
  }
}

@page : blank {
  @top-left {
    content: "blank " counter(page);
  }
}

@page:right {
  @top-right {
    content: element(chapterTitle);
    font-size: var(--font-size-base);
    font-style: italic;
  }
  @bottom-right {
    content: counter(page);
  }
}



@page cover {
  background: var(--accent);
  margin-top: auto;
  position: relative;

  img {
    border: 1px solid blue;
  }

  header {
    position: absolute;
    margin: 0 0;
    top: 50%;
    transform: translate3d(0, -50%, 0px);
    width: 100%;
  }

  @top-right {
    content: "coverttt";
  }
}




@page image {
  margin-top: auto;
  position: relative;
  margin: var(--print-margin-x) var(--print-margin-x);

  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "nul";
    grid-column-gap: 4mm;
  }

  header[data-length="2"] {
    grid-template-columns: 1fr;
    grid-template-rows: 50% 50%;
    grid-template-areas: "nul" "1";
  }

  header[data-length="3"] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 50% 50%;
    grid-template-areas: "nul 1" "nul 2";
  }

  figure {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    margin: 0 0;
    position: relative;
  }

  figure[index="0"] {
    grid-area: nul;
  }

  figure[index="1"] {
    grid-area: 1;
  }

  figure[index="2"] {
    grid-area: 2;
  }
  figure[index="3"] {
    grid-area: 3;
  }


  figcaption {
    position: absolute;
    z-index: 2;
    left: 2mm;
    bottom: 2mm;
    padding: 1mm 2mm;
    background: white;
    font-size: 7px;

  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  @top-right {
    content: "imaaagggee";
  }
}

@page front {
  background: lightgrey;
  position: relative;

  @top-right {
    content: none;
  }

  @top-left {
    content: none;
  }
  @bottom-right {
    content: none;
  }
  

  header {
    position: absolute;
    margin: 0 0;
    top: 50%;
    transform: translate3d(0, -50%, 0px);
    width: 100%;
  }
}

.header--meta {
  display: none;
}

[data-subchapter-title] {
  display: none;
}
article:has([data-chapter-title]), article:has([data-subchapter-title]) {
  /* break-before: page; */
}

hr {
  /* break-after: page; */
  opacity: .2;
}
.page--cover {
  page: cover;
}

.page--image {
  page: image;
  break-before: left;
}

[template-type="front"] {
  page: front;
  counter-reset: page;
}

[template-type="image-spread"] {
  page: front;
  counter-reset: page;
}

[template-type="circuit"] {
  page: circuit;
/*  break-before: page;*/
}


.header-section-number {
  display: none;
}
.fix-break-left {
  break-after: right;
}