/* Video insert */

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {}

.video.video--vimeo {
  display: none;
}



/* Base variables */

:root {
  --font-size: 14px;
  --line-height: 19px;

  --font-size--h1: 40px;
  --line-height--h1: 40px;
  --font-size--h2: 25px;
  --line-height--h2: 25px;
  --font-size--h3: 17px;

  --body-font: "Fluxisch Else";
  --header-font: "Fluxisch Else Bold";

  --text-color: black;
  --quiet-color: #666;

  --link-color: black;
  --link-color--visited: black;

  --accent-color: #ff5c00;
  --accent-soft: #ffe1cf;
  --line-color: black;
}


/* Page base */

html,
body {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--body-font);
  color: var(--text-color);
}


/* Set page properties size and white space */

@page {
  size: A4 portrait;
  margin: 57px 57px 76px 57px;
}

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

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

@page cover {
  @bottom-right {
    content: "";
  }
}


/* Page breaks */


.report,
.chapter,
.index {
  page-break-before: page;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--header-font);
  font-weight: normal;
  break-after: avoid;
  break-inside: avoid;
}


/* Typography */

h1 {
  font-size: var(--font-size--h1);
  line-height: var(--line-height--h1);
  letter-spacing: -0.055em;
  margin: 0 0 calc(2 * var(--line-height)) 0;
  max-width: 20ch;
}

h1::after {
  content: "";
  display: block;
  width: 2.5ch;
  height: 6px;
  margin-top: calc(1.25 * var(--line-height));
  background: var(--accent-color);
}

h2 {
  font-size: var(--font-size--h2);
  line-height: var(--line-height--h2);
  letter-spacing: -0.035em;
  margin: calc(4 * var(--line-height)) 0 var(--line-height) 0;
  max-width: 75%;
  padding-top: calc(0.75 * var(--line-height));
  border-top: 3px solid var(--line-color);
  break-inside: avoid;
  break-after: avoid;
}

h2::before {
  content: "↪ ";
  color: var(--accent-color);
}

h3 {
  font-size: var(--font-size--h3);
  line-height: var(--line-height);
  letter-spacing: -0.02em;
  margin: calc(2.5 * var(--line-height)) 0 calc(0.5 * var(--line-height)) 0;
    padding-left: 1ch;
  border-left: 5px solid var(--accent-color);
  max-width: 80%;
  break-inside: avoid;
  break-after: avoid;
}


h4 {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;

  font-family: var(--header-font);
  font-size: 13px;
  line-height: var(--line-height);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--quiet-color);

  margin: calc(1 * var(--line-height)) 0 calc(0.25 * var(--line-height)) 0;
  padding: 0;

  break-inside: avoid;
  break-after: avoid;
}

h4:has(+ h2) {
  margin-top: calc(1 * var(--line-height));
  margin-bottom: 0;
}

h4 + h2 {
  margin-top: 0;
}

h5,
h6 {
  font-size: 11px;
  line-height: var(--line-height);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--quiet-color);
  margin: calc(1.5 * var(--line-height)) 0 0 0;
  max-width: 80%;
}

/* Etherpad-friendly spacing

Single Enter creates a tight new line.
Empty line creates paragraph space.

This avoids adding <br/> or class="compact-lines" by hand.
*/

p {
  margin: 0;
}

p:empty,
p:has(> br:only-child) {
  display: block;
  min-height: var(--line-height);
}

p + h2 {
  margin-top: calc(4 * var(--line-height));
}

p + h3 {
  margin-top: calc(2.5 * var(--line-height));
}
p + h4 {
  margin-top: calc(1 * var(--line-height));
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 0;
}


/* Optional manual classes, still available when needed */

.compact-lines {
  white-space: pre-line;
  line-height: var(--line-height);
  margin: 0;
}

.compact-lines p {
  margin: 0;
}

.loose-lines {
  white-space: pre-line;
  line-height: var(--line-height);
  margin: 0 0 var(--line-height) 0;
}

.loose-lines p {
  margin: 0 0 var(--line-height) 0;
}

b,
strong {
  font-family: var(--header-font);
  font-weight: normal;
  border: 0;
  background: var(--accent-soft);
  padding: 0 0.25em;
  border-radius: 0.15em;
}

em {
  color: var(--quiet-color);
}


/* Links */

a {
  color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:visited {
  color: var(--link-color--visited);
}


/* Code */

pre {
  line-wrap: pre-wrap;
  white-space: pre-wrap;
}


/* Images */

img {
  float: left;
  max-width: 40%;
  margin: calc(.5 * var(--line-height)) var(--line-height) calc(.5 * var(--line-height)) 0;
  break-inside: avoid;
}

.pagedjs_right_page img {
  float: left;
  margin-left: var(--line-height);
  margin-right: 0;
}


/* References */

a[data-reference][data-label] {
  color: inherit;
  text-decoration: none;
}

a[data-reference][data-label] .reference--label--inline {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.pagedjs_left_page .report,
.pagedjs_left_page .front-matter,
.pagedjs_left_page .chapter,
.pagedjs_right_page .indexes {
  padding-right: 47.5mm;
}

.pagedjs_left_page .reference--target {
  float: right;
  clear: right;
  width: 40mm;
  margin-right: -45mm;
  text-align: right;
}

.pagedjs_right_page .report,
.pagedjs_right_page .front-matter,
.pagedjs_right_page .chapter,
.pagedjs_right_page .indexes {
  padding-left: 47.5mm;
}

.pagedjs_right_page .reference--target {
  float: left;
  clear: left;
  width: 40mm;
  margin-left: -45mm;
}


/* Front matter */

.front-matter--title {
  page: cover;
  margin-left: -47.5mm;
}

.front-matter--title h1 {
  font-size: 450%;
  line-height: 1.05;
  letter-spacing: -0.065em;
  max-width: 9ch;
}

.front-matter--introduction {
  break-after: right;
}




/* Hide embedded YouTube videos */

iframe[title="YouTube video player"],
iframe[src^="https://www.youtube.com/"] {
  display: none;
}


/* Table of contents */

.toc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.toc ul a {
  color: inherit;
  text-decoration: none;
}

.toc ul a::after {
  content: target-counter(attr(href), page);
  float: right;
}

.toc {
  min-height: 210mm;
  display: flex;
  flex-direction: column;
}

.toc-note {
  margin-top: auto;
  padding-top: var(--line-height);
  border-top: 3px solid var(--accent-color);
  font-size: 11px;
  line-height: 14px;
  color: var(--quiet-color);
  max-width: 75%;
  break-inside: avoid;
}

.toc-note p {
  margin: 0 0 8px 0;
}

.toc-note a {
  color: black;
  text-decoration-color: var(--accent-color);
}


/* Index */



.index ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.index-entry::after {
  content: target-counter(attr(data-link-id), page) ", ";
}

.index-entry:last-child::after {
  content: target-counter(attr(data-link-id), page);
}

.index h1,
.indexes h1 {
  font-size: 70px;
  line-height: 64px;
  max-width: 12ch;
}

/* Labels / references - print, safe patch */

/* Keep tagged text exactly as normal text */
a[data-reference][data-label],
a[data-reference][data-label]:visited {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Remove dotted underline from the text that has the label */
a[data-reference][data-label] .reference--label--inline {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Keep the label in the margin, only change appearance */
a[data-reference][data-label] .reference--target {
  color: red !important;
  font-size: 60% !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

/* If a label wraps a heading, keep the heading layout stable */
a[data-reference][data-label]:has(> h1),
a[data-reference][data-label]:has(> h2),
a[data-reference][data-label]:has(> h3),
a[data-reference][data-label]:has(> h4),
a[data-reference][data-label]:has(> h5),
a[data-reference][data-label]:has(> h6) {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Fix spacing when a labelled h2 is followed by a paragraph */
a[data-reference][data-label]:has(> h2) + p {
  margin-top: 0;
}