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--cover {
  page: cover;
}

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

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

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

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

@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 {
  background: yellow;

  @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;

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

@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";
  }

  img {
    width: 100%;
    height: 100%;
  }

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

  article figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

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

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

@page imagespread {
  background: orange;
}

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

  @top-right {
    content: none;
  }

  @top-left {
    content: none;
  }

  @bottom-right {
    content: none;
  }

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

  footer {
    top: auto;
    bottom: 0;
    transform: none;
  }

}

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

table {
  break-before: page;
}

article>*:first-of-type:is(table) {
  margin-top: 0;
}

.header-section-number {
  display: none;
}

.fix-break-left {
  break-after: right;
}